Use StudioContentMenu in SettingsModal

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/SettingsModal.module.css

@@ -13,6 +13,7 @@
 
 .leftNavWrapper {
   overflow-y: auto;
+  width: 250px;
 }
 
 .contentWrapper {

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/SettingsModal.tsx

@@ -1,33 +1,26 @@
 import type { ReactElement } from 'react';
 import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
 import classes from './SettingsModal.module.css';
-import {
-  CogIcon,
-  InformationSquareIcon,
-  TimerStartIcon,
-  ShieldLockIcon,
-  SidebarBothIcon,
-} from '@studio/icons';
-import { StudioModal } from '@studio/components';
-import type { LeftNavigationTab } from 'app-shared/types/LeftNavigationTab';
-import { LeftNavigationBar } from 'app-shared/components/LeftNavigationBar';
-import type { SettingsModalTab } from 'app-development/types/SettingsModalTab';
-import { createNavigationTab } from './utils';
+import { CogIcon } from '@studio/icons';
+import { StudioModal, StudioContentMenu } from '@studio/components';
+import type { SettingsModalTabId } from 'app-development/types/SettingsModalTabId';
 import { useTranslation } from 'react-i18next';
 import { PolicyTab } from './components/Tabs/PolicyTab';
 import { AboutTab } from './components/Tabs/AboutTab';
 import { AccessControlTab } from './components/Tabs/AccessControlTab';
 import { SetupTab } from './components/Tabs/SetupTab';
 import { type SettingsModalHandle } from 'app-development/types/SettingsModalHandle';
+import { useSettingsModalMenuTabConfigs } from './hooks/useSettingsModalMenuTabConfigs';
 
 export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): ReactElement => {
   const { t } = useTranslation();
 
-  const [currentTab, setCurrentTab] = useState<SettingsModalTab>('about');
+  const [currentTab, setCurrentTab] = useState<SettingsModalTabId>('about');
   const dialogRef = useRef<HTMLDialogElement>();
+  const { getMenuTabConfigs } = useSettingsModalMenuTabConfigs();
 
   const openSettings = useCallback(
-    (tab: SettingsModalTab = currentTab) => {
+    (tab: SettingsModalTabId = currentTab) => {
       setCurrentTab(tab);
       dialogRef.current?.showModal();
     },
@@ -38,38 +31,6 @@ export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): Reac
     openSettings,
   ]);
 
-  const aboutTabId: SettingsModalTab = 'about';
-  const setupTabId: SettingsModalTab = 'setup';
-  const policyTabId: SettingsModalTab = 'policy';
-  const accessControlTabId: SettingsModalTab = 'access_control';
-
-  const leftNavigationTabs: LeftNavigationTab[] = [
-    createNavigationTab(
-      <InformationSquareIcon className={classes.icon} />,
-      aboutTabId,
-      () => setCurrentTab(aboutTabId),
-      currentTab,
-    ),
-    createNavigationTab(
-      <SidebarBothIcon className={classes.icon} />,
-      setupTabId,
-      () => setCurrentTab(setupTabId),
-      currentTab,
-    ),
-    createNavigationTab(
-      <ShieldLockIcon className={classes.icon} />,
-      policyTabId,
-      () => setCurrentTab(policyTabId),
-      currentTab,
-    ),
-    createNavigationTab(
-      <TimerStartIcon className={classes.icon} />,
-      accessControlTabId,
-      () => setCurrentTab(accessControlTabId),
-      currentTab,
-    ),
-  ];
-
   const displayTabs = () => {
     switch (currentTab) {
       case 'about': {
@@ -98,7 +59,11 @@ export const SettingsModal = forwardRef<SettingsModalHandle, {}>(({}, ref): Reac
       contentClassName={classes.modalContent}
     >
       <div className={classes.leftNavWrapper}>
-        <LeftNavigationBar tabs={leftNavigationTabs} selectedTab={currentTab} />
+        <StudioContentMenu
+          contentTabs={getMenuTabConfigs()}
+          selectedTabId={currentTab}
+          onChangeTab={(tabId: SettingsModalTabId) => setCurrentTab(tabId)}
+        />
       </div>
       <div className={classes.contentWrapper}>{displayTabs()}</div>
     </StudioModal.Dialog>

frontend/app-development/layout/PageHeader/SubHeader/SettingsModalButton/SettingsModal/hooks/useSettingsModalMenuTabConfigs.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { SettingsModalTabId } from '../../../../../../types/SettingsModalTabId';
+import {
+  InformationSquareIcon,
+  SidebarBothIcon,
+  ShieldLockIcon,
+  TimerStartIcon,
+} from '@studio/icons';
+import { useTranslation } from 'react-i18next';
+import type { StudioMenuTabType } from '@studio/components';
+
+const aboutTabId: SettingsModalTabId = 'about';
+const setupTabId: SettingsModalTabId = 'setup';
+const policyTabId: SettingsModalTabId = 'policy';
+const accessControlTabId: SettingsModalTabId = 'access_control';
+
+export const useSettingsModalMenuTabConfigs = () => {
+  const { t } = useTranslation();
+
+  const getMenuTabConfigs = (): StudioMenuTabType<SettingsModalTabId>[] => {
+    return [
+      {
+        tabId: aboutTabId,
+        tabName: t(`settings_modal.left_nav_tab_${aboutTabId}`),
+        icon: <InformationSquareIcon />,
+      },
+      {
+        tabId: setupTabId,
+        tabName: t(`settings_modal.left_nav_tab_${setupTabId}`),
+        icon: <SidebarBothIcon />,
+      },
+      {
+        tabId: policyTabId,
+        tabName: t(`settings_modal.left_nav_tab_${policyTabId}`),
+        icon: <ShieldLockIcon />,
+      },
+      {
+        tabId: accessControlTabId,
+        tabName: t(`settings_modal.left_nav_tab_${accessControlTabId}`),
+        icon: <TimerStartIcon />,
+      },
+    ];
+  };
+
+  return { getMenuTabConfigs };
+};

frontend/app-development/types/SettingsModalHandle.ts

@@ -1,5 +1,5 @@
-import type { SettingsModalTab } from './SettingsModalTab';
+import type { SettingsModalTabId } from './SettingsModalTabId';
 
 export type SettingsModalHandle = {
-  openSettings: (tab?: SettingsModalTab) => void;
+  openSettings: (tab?: SettingsModalTabId) => void;
 };

frontend/app-development/types/SettingsModalTabId.ts

@@ -0,0 +1 @@
+export type SettingsModalTabId = 'about' | 'setup' | 'policy' | 'access_control';

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.module.css

@@ -0,0 +1,4 @@
+.tabsContainer {
+  background-color: var(--fds-semantic-surface-action-second-subtle);
+  height: 100%;
+}

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import type { Meta, StoryFn } from '@storybook/react';
+import { StudioContentMenu } from './StudioContentMenu';
+import { BookIcon, VideoIcon, QuestionmarkDiamondIcon, ExternalLinkIcon } from '@studio/icons';
+import { StudioContentMenuWrapper } from './StudioContentMenuWrapper';
+
+type Story = StoryFn<typeof StudioContentMenu>;
+
+const meta: Meta = {
+  title: 'Components/StudioContentMenu',
+  component: StudioContentMenu,
+  argTypes: {
+    contentTabs: {
+      control: 'object',
+      description:
+        'Array of menu tabs with icons, names, and ids. Add prop `to` if tab should navigate to a different url',
+      table: {
+        type: { summary: 'StudioMenuTabType<TabId>[]' },
+      },
+    },
+    selectedTabId: {
+      table: { disable: true },
+    },
+    onChangeTab: {
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+
+export const Preview: Story = (args) => (
+  <StudioContentMenuWrapper {...args}></StudioContentMenuWrapper>
+);
+
+Preview.args = {
+  contentTabs: [
+    {
+      tabId: 'booksTab',
+      tabName: 'Bøker',
+      icon: <BookIcon />,
+    },
+    {
+      tabId: 'videosTab',
+      tabName: 'Filmer',
+      icon: <VideoIcon />,
+    },
+    {
+      tabId: 'tabWithVeryLongTabName',
+      tabName: 'LoremIpsumLoremIpsumLoremIpsum',
+      icon: <QuestionmarkDiamondIcon />,
+    },
+    {
+      tabId: 'tabAsLink',
+      tabName: 'Gå til Designsystemet',
+      icon: <ExternalLinkIcon />,
+      to: 'https://next.storybook.designsystemet.no',
+    },
+  ],
+};

frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import type { StudioContentMenuProps } from './StudioContentMenu';
+import { StudioContentMenu } from './StudioContentMenu';
+import type { StudioMenuTabType } from './types/StudioMenuTabType';
+
+type StudioMenuTabName = 'tab1' | 'tab2' | 'tab3';
+
+const onChangeTabMock = jest.fn();
+
+const tab1Name = 'My tab';
+const tab1Id: StudioMenuTabName = 'tab1';
+const tab1: StudioMenuTabType<StudioMenuTabName> = {
+  tabName: tab1Name,
+  tabId: tab1Id,
+  icon: <svg></svg>,
+};
+const tab2Name = 'My second tab';
+const tab2Id: StudioMenuTabName = 'tab2';
+const tab2: StudioMenuTabType<StudioMenuTabName> = {
+  tabName: tab2Name,
+  tabId: tab2Id,
+  icon: <svg></svg>,
+};
+
+describe('StudioContentMenu', () => {
+  afterEach(jest.clearAllMocks);
+
+  it('renders an empty contentMenu when there is no provided tabs', () => {
+    renderStudioContentMenu({ contentTabs: [] });
+    const emptyMenu = screen.getByRole('tablist');
+    expect(emptyMenu).toBeInTheDocument();
+  });
+
+  it('renders the title and icon of a given menu tab', () => {
+    const iconTitle = 'My icon';
+    renderStudioContentMenu({
+      contentTabs: [
+        {
+          ...tab1,
+          icon: <svg data-testid={iconTitle}></svg>,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    const menuIcon = screen.getByTestId(iconTitle);
+    expect(menuTab).toBeInTheDocument();
+    expect(menuIcon).toBeInTheDocument();
+  });
+
+  it('renders a tab with "to" prop as a link element', () => {
+    const link = 'url-link';
+    renderStudioContentMenu({
+      contentTabs: [
+        {
+          ...tab1,
+          to: link,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    const linkTab = screen.getByRole('link', { name: tab1Name });
+    expect(menuTab).toBeInTheDocument();
+    expect(linkTab).toBeInTheDocument();
+    expect(linkTab).toHaveAttribute('href', link);
+  });
+
+  it('allows changing focus to next tab using keyboard', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    expect(tab2Element).not.toHaveFocus();
+    await user.keyboard('{ArrowDown}');
+    expect(tab2Element).toHaveFocus();
+  });
+
+  it('keeps focus on current tab if pressing keyDown when focus is on last tab in menu', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    await user.click(tab2Element);
+    expect(tab2Element).toHaveFocus();
+    await user.keyboard('{ArrowDown}');
+    expect(tab2Element).toHaveFocus();
+  });
+
+  it('allows changing focus to previous tab using keyboard', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab2Element = screen.getByRole('tab', { name: tab2Name });
+    await user.click(tab2Element);
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    expect(tab1Element).not.toHaveFocus();
+    await user.keyboard('{ArrowUp}');
+    expect(tab1Element).toHaveFocus();
+  });
+
+  it('keeps focus on current tab if pressing keyUp when focus is on first tab in menu', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    expect(tab1Element).toHaveFocus();
+    await user.keyboard('{ArrowUp}');
+    expect(tab1Element).toHaveFocus();
+  });
+
+  it('calls onChangeTab when clicking enter on a tab with focus', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1, tab2],
+    });
+    const tab1Element = screen.getByRole('tab', { name: tab1Name });
+    await user.click(tab1Element);
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+    expect(onChangeTabMock).toHaveBeenCalledTimes(2);
+    expect(onChangeTabMock).toHaveBeenNthCalledWith(1, tab1Id);
+    expect(onChangeTabMock).toHaveBeenNthCalledWith(2, tab2Id);
+  });
+
+  it('calls onChangeTab when clicking on a menu tab', async () => {
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [tab1],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    await user.click(menuTab);
+    expect(onChangeTabMock).toHaveBeenCalledTimes(1);
+    expect(onChangeTabMock).toHaveBeenCalledWith(tab1Id);
+  });
+
+  it('calls onChangeTab when clicking on a menu tab with link', async () => {
+    const link = 'url-link';
+    const user = userEvent.setup();
+    renderStudioContentMenu({
+      contentTabs: [
+        {
+          ...tab1,
+          to: link,
+        },
+      ],
+    });
+    const menuTab = screen.getByRole('tab', { name: tab1Name });
+    await user.click(menuTab);
+    expect(onChangeTabMock).toHaveBeenCalledTimes(1);
+    expect(onChangeTabMock).toHaveBeenCalledWith(tab1Id);
+  });
+});
+
+const renderStudioContentMenu = ({
+  contentTabs,
+}: Partial<StudioContentMenuProps<StudioMenuTabName>> = {}) => {
+  render(
+    <StudioContentMenu
+      contentTabs={contentTabs}
+      selectedTabId={undefined}
+      onChangeTab={onChangeTabMock}
+    />,
+  );
+};