Add AppNavigationHeader component

5 files changed, 70 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx
new file mode 100644
index 0000000000..80f1f794f4
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/AppNavigationHeader.tsx
@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+
+import { NavigationHeader, NavigationHeaderProps } from '../../lib/components';
+import { NavigationScrollContext } from '../NavigationContainer';
+import { AppNavigationHeaderBackButton, AppNavigationHeaderInfoButton } from './components';
+
+export interface NavigationBarProps extends NavigationHeaderProps {
+  title?: string;
+  children?: React.ReactNode;
+}
+
+const AppNavigationHeader = ({ title, children, ...props }: NavigationBarProps) => {
+  const { showsBarTitle } = useContext(NavigationScrollContext);
+  return (
+    <NavigationHeader titleVisible={showsBarTitle} {...props}>
+      <AppNavigationHeaderBackButton />
+      {title && <NavigationHeader.Title>{title}</NavigationHeader.Title>}
+      <NavigationHeader.ButtonGroup $justifyContent="flex-end">
+        {children}
+      </NavigationHeader.ButtonGroup>
+    </NavigationHeader>
+  );
+};
+
+const AppNavigationHeaderNamespace = Object.assign(AppNavigationHeader, {
+  IconButton: NavigationHeader.IconButton,
+  InfoButton: AppNavigationHeaderInfoButton,
+});
+
+export { AppNavigationHeaderNamespace as AppNavigationHeader };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx
new file mode 100644
index 0000000000..686305180a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx
@@ -0,0 +1,32 @@
+import { useContext, useMemo } from 'react';
+
+import { messages } from '../../../../shared/gettext';
+import { IconButton } from '../../../lib/components';
+import { transitions, useHistory } from '../../../lib/history';
+import { BackActionContext } from '../../KeyboardNavigation';
+
+export const AppNavigationHeaderBackButton = () => {
+  const history = useHistory();
+  // Compare the transition name with dismiss to infer wheter or not the view will slide
+  // horizontally or vertically and then use matching button.
+  const backIcon = useMemo(
+    () => history.getPopTransition().name !== transitions.dismiss.name,
+    [history],
+  );
+  const { parentBackAction } = useContext(BackActionContext);
+
+  if (!parentBackAction) return null;
+
+  const iconSource = backIcon ? 'icon-back' : 'icon-close-down';
+  const ariaLabel = backIcon ? messages.gettext('Back') : messages.gettext('Close');
+
+  return (
+    <IconButton
+      variant="secondary"
+      size="regular"
+      icon={iconSource}
+      aria-label={ariaLabel}
+      onClick={parentBackAction}
+    />
+  );
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx
new file mode 100644
index 0000000000..882308e454
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderInfoButton.tsx
@@ -0,0 +1,5 @@
+import InfoButton, { InfoButtonProps } from '../../InfoButton';
+
+export const AppNavigationHeaderInfoButton = (props: InfoButtonProps) => {
+  return <InfoButton size="regular" variant="secondary" {...props} />;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/index.ts
new file mode 100644
index 0000000000..6a81375ace
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/index.ts
@@ -0,0 +1,2 @@
+export * from './AppNavigationHeaderBackButton';
+export * from './AppNavigationHeaderInfoButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/index.ts
new file mode 100644
index 0000000000..5bf59572e3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/index.ts
@@ -0,0 +1 @@
+export * from './AppNavigationHeader';