Add Header component

6 files changed, 83 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/Header.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/Header.tsx
new file mode 100644
index 0000000000..1dbfee5b82
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/Header.tsx
@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+import { Colors, Spacings } from '../../../foundations';
+import { TransientProps } from '../../../types';
+import { Flex } from '../../layout';
+import { HeaderMainRow, HeaderSubRow } from './components';
+
+export type HeaderProps = React.PropsWithChildren<{
+  size?: '1' | '2';
+  variant?: 'default' | 'success' | 'error';
+}>;
+
+const sizes = {
+  '1': '68px',
+  '2': '80px',
+};
+
+const variants = {
+  default: Colors.blue,
+  error: Colors.red,
+  success: Colors.green,
+};
+
+const StyledHeader = styled.header<TransientProps<HeaderProps>>(
+  ({ $size = '1', $variant = 'default' }) => ({
+    height: sizes[$size],
+    minHeight: sizes[$size],
+
+    backgroundColor: variants[$variant],
+    transition: 'height 250ms ease-in-out, min-height 250ms ease-in-out',
+  }),
+);
+
+const Header = ({ size = '1', variant = 'default', children, ...props }: HeaderProps) => {
+  return (
+    <StyledHeader $size={size} $variant={variant} {...props}>
+      <Flex
+        $flexDirection="column"
+        $justifyContent="center"
+        $margin={{
+          horizontal: Spacings.spacing5,
+          top: Spacings.spacing5,
+          bottom: Spacings.spacing3,
+        }}>
+        {children}
+      </Flex>
+    </StyledHeader>
+  );
+};
+
+const HeaderNamespace = Object.assign(Header, {
+  MainRow: HeaderMainRow,
+  SubRow: HeaderSubRow,
+});
+
+export { HeaderNamespace as Header };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/HeaderMainRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/HeaderMainRow.tsx
new file mode 100644
index 0000000000..a764fdfd8e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/HeaderMainRow.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { Flex } from '../../../layout';
+
+export const HeaderMainRow = styled(Flex).attrs({
+  $justifyContent: 'space-between',
+  $alignItems: '  center',
+})({
+  minHeight: '38px',
+  height: '38px',
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/HeaderSubRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/HeaderSubRow.tsx
new file mode 100644
index 0000000000..4e5896a26a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/HeaderSubRow.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { Spacings } from '../../../../foundations';
+import { Flex } from '../../../layout';
+
+export const HeaderSubRow = styled(Flex).attrs({
+  $flex: 1,
+  $alignItems: 'flex-end',
+  $gap: Spacings.spacing6,
+})({
+  minHeight: '18px',
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/index.ts
new file mode 100644
index 0000000000..22215abc57
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/components/index.ts
@@ -0,0 +1,2 @@
+export * from './HeaderMainRow';
+export * from './HeaderSubRow';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/index.ts
new file mode 100644
index 0000000000..266dec8a1b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/header/index.ts
@@ -0,0 +1 @@
+export * from './Header';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/index.ts
new file mode 100644
index 0000000000..677ca79d47
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/organisms/index.ts
@@ -0,0 +1 @@
+export * from './header';