Add SplitListboxOption component

7 files changed, 107 insertions, 0 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/SplitListboxOption.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/SplitListboxOption.tsx
new file mode 100644
index 0000000000..5126f0f62e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/SplitListboxOption.tsx
@@ -0,0 +1,21 @@
+import { Flex } from '../../lib/components';
+import { ListboxOptionProps } from '../../lib/components/listbox/components';
+import { Listbox } from '../../lib/components/listbox/Listbox';
+import { SplitListboxOptionItem, SplitListboxOptionNavigateButton } from './components';
+
+export type ListBoxOptionWithNavigationProps<T> = ListboxOptionProps<T>;
+
+function SplitListboxOption<T>({ children, ...props }: ListBoxOptionWithNavigationProps<T>) {
+  return (
+    <Listbox.Option level={1} {...props}>
+      <Flex>{children}</Flex>
+    </Listbox.Option>
+  );
+}
+
+const SplitListboxOptionNamespace = Object.assign(SplitListboxOption, {
+  Item: SplitListboxOptionItem,
+  NavigateButton: SplitListboxOptionNavigateButton,
+});
+
+export { SplitListboxOptionNamespace as SplitListboxOption };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/index.ts
new file mode 100644
index 0000000000..a2dce96c0e
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/index.ts
@@ -0,0 +1,2 @@
+export * from './split-listbox-option-navigate-button';
+export * from './split-listbox-option-item';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx
new file mode 100644
index 0000000000..a39db24dd6
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/SplitListboxOptionItem.tsx
@@ -0,0 +1,18 @@
+import { Listbox } from '../../../../lib/components/listbox/Listbox';
+
+export type ListBoxOptionWithNavigationProps = React.ComponentPropsWithRef<'li'>;
+
+export function SplitListboxOptionItem({ children, ...props }: ListBoxOptionWithNavigationProps) {
+  return (
+    <Listbox.Option.Trigger {...props}>
+      <Listbox.Option.Item>
+        <Listbox.Option.Content>
+          <Listbox.Option.Group>
+            <Listbox.Option.Icon icon="checkmark" />
+            {children}
+          </Listbox.Option.Group>
+        </Listbox.Option.Content>
+      </Listbox.Option.Item>
+    </Listbox.Option.Trigger>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/index.ts
new file mode 100644
index 0000000000..4de2adf5b5
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-item/index.ts
@@ -0,0 +1 @@
+export * from './SplitListboxOptionItem';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx
new file mode 100644
index 0000000000..4a7eda59f2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/SplitListboxOptionNavigateButton.tsx
@@ -0,0 +1,63 @@
+import { useCallback } from 'react';
+import styled from 'styled-components';
+
+import { RoutePath } from '../../../../../shared/routes';
+import { Flex, Icon } from '../../../../lib/components';
+import { colors } from '../../../../lib/foundations';
+import { useHistory } from '../../../../lib/history';
+
+export type NavigationListboxOptionNavigateProps = {
+  to: RoutePath;
+} & React.ComponentPropsWithRef<'button'>;
+
+const StyledFlex = styled(Flex)`
+  background-color: ${colors.blue60};
+  height: 100%;
+`;
+
+const StyledSplitListboxOptionNavigateButton = styled.button`
+  position: relative;
+  &&::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 22px;
+    background-color: ${colors.darkBlue};
+  }
+  &&:hover {
+    ${StyledFlex} {
+      background-color: ${colors.blue};
+    }
+  }
+  &&:active {
+    ${StyledFlex} {
+      background-color: ${colors.whiteOnBlue20};
+    }
+  }
+  &&:focus-visible {
+    outline: 2px solid ${colors.white};
+    outline-offset: -2px;
+    z-index: 10;
+  }
+`;
+
+export function SplitListboxOptionNavigateButton({
+  to,
+  children,
+  ...props
+}: NavigationListboxOptionNavigateProps) {
+  const history = useHistory();
+  const navigate = useCallback(() => {
+    return history.push(to);
+  }, [history, to]);
+
+  return (
+    <StyledSplitListboxOptionNavigateButton onClick={navigate} {...props}>
+      <StyledFlex $justifyContent="center" $alignItems="center" $padding={{ horizontal: 'medium' }}>
+        <Icon icon={'chevron-right'} aria-hidden="true" />
+      </StyledFlex>
+    </StyledSplitListboxOptionNavigateButton>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts
new file mode 100644
index 0000000000..2733912a04
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/components/split-listbox-option-navigate-button/index.ts
@@ -0,0 +1 @@
+export * from './SplitListboxOptionNavigateButton';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/index.ts
new file mode 100644
index 0000000000..89452272b3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/split-listbox-option/index.ts
@@ -0,0 +1 @@
+export * from './SplitListboxOption';