Add layout components based on spacing tokens

7 files changed, 167 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx
new file mode 100644
index 0000000000..3222bb9719
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+interface CenterProps {
+  $width?: string;
+  $height?: string;
+}
+
+export const Center = styled.div<CenterProps>((props) => ({
+  display: 'grid',
+  placeItems: 'center',
+  height: props.$height,
+  width: props.$width,
+}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
new file mode 100644
index 0000000000..1b73d69f4c
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Spacings } from '../../../tokens';
+
+export interface FlexProps {
+  $gap?: Spacings;
+  $flex?: React.CSSProperties['flex'];
+  $flexDirection?: React.CSSProperties['flexDirection'];
+  $alignItems?: React.CSSProperties['alignItems'];
+  $justifyContent?: React.CSSProperties['justifyContent'];
+  $flexGrow?: React.CSSProperties['flexGrow'];
+  $flexShrink?: React.CSSProperties['flexShrink'];
+  children?: React.ReactNode;
+}
+
+export const Flex = styled.div<FlexProps>(
+  ({ $gap, $flex, $flexDirection, $alignItems, $justifyContent, $flexGrow, $flexShrink }) => ({
+    display: 'flex',
+    gap: $gap,
+    flex: $flex,
+    flexDirection: $flexDirection,
+    alignItems: $alignItems,
+    justifyContent: $justifyContent,
+    flexGrow: $flexGrow,
+    flexShrink: $flexShrink,
+  }),
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
new file mode 100644
index 0000000000..5afb47169d
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import { Spacings } from '../../../tokens';
+import { margin } from './margin';
+import { padding } from './padding';
+import { LayoutSpacings } from './types';
+
+interface LayoutProps {
+  $margin?: Spacings | LayoutSpacings;
+  $padding?: Spacings | LayoutSpacings;
+}
+
+const combine = (
+  funcs: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties>,
+  spacings?: Spacings | LayoutSpacings,
+): React.CSSProperties => {
+  if (!spacings) return {};
+
+  if (typeof spacings === 'string') return funcs.all(spacings);
+
+  const result: React.CSSProperties = {};
+  for (const [key, value] of Object.entries(spacings)) {
+    Object.assign(result, funcs[key as keyof LayoutSpacings](value));
+  }
+
+  return result;
+};
+
+export const Layout = styled.div<LayoutProps>(({ $margin, $padding }) => ({
+  ...combine(margin, $margin),
+  ...combine(padding, $padding),
+}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts
new file mode 100644
index 0000000000..885ab32d4b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts
@@ -0,0 +1,3 @@
+export * from './Center';
+export * from './Flex';
+export * from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
new file mode 100644
index 0000000000..c410e47c34
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
@@ -0,0 +1,40 @@
+import { Spacings } from '../../../tokens';
+import { LayoutSpacings } from './types';
+
+export const all = (margin: Spacings) => ({ margin });
+
+const vertical = (margin: Spacings) => ({
+  ...top(margin),
+  ...bottom(margin),
+});
+
+const horizontal = (margin: Spacings) => ({
+  ...left(margin),
+  ...right(margin),
+});
+
+const top = (marginTop: Spacings) => ({
+  marginTop,
+});
+
+const right = (marginRight: Spacings) => ({
+  marginRight,
+});
+
+const bottom = (marginBottom: Spacings) => ({
+  marginBottom,
+});
+
+const left = (marginLeft: Spacings) => ({
+  marginLeft,
+});
+
+export const margin: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties> = {
+  all,
+  vertical,
+  horizontal,
+  top,
+  right,
+  bottom,
+  left,
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
new file mode 100644
index 0000000000..d98a209203
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
@@ -0,0 +1,40 @@
+import { Spacings } from '../../../tokens';
+import { LayoutSpacings } from './types';
+
+export const all = (padding: Spacings) => ({ padding });
+
+const vertical = (padding: Spacings) => ({
+  ...top(padding),
+  ...bottom(padding),
+});
+
+const horizontal = (padding: Spacings) => ({
+  ...left(padding),
+  ...right(padding),
+});
+
+const top = (paddingTop: Spacings) => ({
+  paddingTop,
+});
+
+const right = (paddingRight: Spacings) => ({
+  paddingRight,
+});
+
+const bottom = (paddingBottom: Spacings) => ({
+  paddingBottom,
+});
+
+const left = (paddingLeft: Spacings) => ({
+  paddingLeft,
+});
+
+export const padding: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties> = {
+  all,
+  vertical,
+  horizontal,
+  top,
+  right,
+  bottom,
+  left,
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
new file mode 100644
index 0000000000..f31c458917
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
@@ -0,0 +1,11 @@
+import { Spacings } from '../../../tokens';
+
+export interface LayoutSpacings {
+  all?: 'string';
+  vertical?: Spacings;
+  horizontal?: Spacings;
+  top?: Spacings;
+  right?: Spacings;
+  bottom?: Spacings;
+  left?: Spacings;
+}