-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into fix/accessability-help-text-settings-modal
- Loading branch information
Showing
24 changed files
with
729 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
...tend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| .menuContainer { | ||
| height: 100%; | ||
| background-color: var(--fds-semantic-surface-action-second-subtle); | ||
| } | ||
|
|
||
| .tabsContainer { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: var(--fds-border_width-default); | ||
| background-color: var(--fds-semantic-border-action-second-subtle); | ||
| padding: var(--fds-border_width-default); | ||
| } |
72 changes: 72 additions & 0 deletions
72
...end/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| import React from 'react'; | ||
| import type { Meta, StoryFn } from '@storybook/react'; | ||
| import { BookIcon, VideoIcon, QuestionmarkDiamondIcon, ExternalLinkIcon } from '@studio/icons'; | ||
| import type { StudioContentMenuStoryExampleProps } from './StudioContentMenuStoryExample'; | ||
| import { StudioContentMenuStoryExample } from './StudioContentMenuStoryExample'; | ||
|
|
||
| type Story = StoryFn<StudioContentMenuStoryExampleProps<StudioMenuTabName>>; | ||
|
|
||
| const meta: Meta<StudioContentMenuStoryExampleProps<StudioMenuTabName>> = { | ||
| title: 'Components/StudioContentMenu', | ||
| component: StudioContentMenuStoryExample, | ||
| argTypes: { | ||
| buttonTabs: { | ||
| control: 'object', | ||
| description: 'Array of button menu tabs with icons, names, and ids.', | ||
| table: { | ||
| type: { summary: 'StudioContentMenuButtonTabProps<TabId>[]' }, | ||
| }, | ||
| }, | ||
| linkTabs: { | ||
| control: 'object', | ||
| description: | ||
| 'Array of link menu tabs with icons, names, and ids. Provide an optional link-element to return `props` in renderTab.', | ||
| table: { | ||
| type: { summary: 'StudioContentMenuLinkTabProps<TabId>[]' }, | ||
| }, | ||
| }, | ||
| selectedTabId: { | ||
| table: { disable: true }, | ||
| }, | ||
| onChangeTab: { | ||
| table: { disable: true }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type StudioMenuTabName = 'booksTab' | 'videosTab' | 'tabWithVeryLongTabName' | 'tabAsLink'; | ||
|
|
||
| export const Preview: Story = (args: StudioContentMenuStoryExampleProps<StudioMenuTabName>) => ( | ||
| <StudioContentMenuStoryExample {...args} /> | ||
| ); | ||
|
|
||
| Preview.args = { | ||
| buttonTabs: [ | ||
| { | ||
| tabId: 'booksTab', | ||
| tabName: 'Bøker', | ||
| icon: <BookIcon />, | ||
| }, | ||
| { | ||
| tabId: 'videosTab', | ||
| tabName: 'Filmer', | ||
| icon: <VideoIcon />, | ||
| }, | ||
| { | ||
| tabId: 'tabWithVeryLongTabName', | ||
| tabName: 'LoremIpsumLoremIpsumLoremIpsum', | ||
| icon: <QuestionmarkDiamondIcon />, | ||
| }, | ||
| ], | ||
| linkTabs: [ | ||
| { | ||
| tabId: 'tabAsLink', | ||
| tabName: 'Gå til Designsystemet', | ||
| icon: <ExternalLinkIcon />, | ||
| renderTab: (props) => <a href={'https://next.storybook.designsystemet.no'} {...props} />, | ||
| }, | ||
| ], | ||
| onChangeTab: () => {}, | ||
| }; |
206 changes: 206 additions & 0 deletions
206
frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| import React from 'react'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { userEvent } from '@testing-library/user-event'; | ||
| import { StudioContentMenu, type StudioContentMenuLinkTabProps } from './'; | ||
| import type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab'; | ||
|
|
||
| type StudioMenuTabName = 'tab1' | 'tab2' | 'tab3'; | ||
|
|
||
| const onChangeTabMock = jest.fn(); | ||
|
|
||
| const tab1Name = 'My tab'; | ||
| const tab1Id: StudioMenuTabName = 'tab1'; | ||
| const tab1: StudioContentMenuButtonTabProps<StudioMenuTabName> = { | ||
| tabName: tab1Name, | ||
| tabId: tab1Id, | ||
| icon: <svg />, | ||
| }; | ||
| const tab2Name = 'My second tab'; | ||
| const tab2Id: StudioMenuTabName = 'tab2'; | ||
| const tab2: StudioContentMenuButtonTabProps<StudioMenuTabName> = { | ||
| tabName: tab2Name, | ||
| tabId: tab2Id, | ||
| icon: <svg />, | ||
| }; | ||
|
|
||
| describe('StudioContentMenu', () => { | ||
| afterEach(jest.clearAllMocks); | ||
|
|
||
| it('renders first tab as selected if selectedTab is not provided', () => { | ||
| renderStudioContentMenu({ | ||
| buttonTabs: [tab1, tab2], | ||
| }); | ||
| const firstTab = screen.getByRole('tab', { name: tab1Name }); | ||
| expect(firstTab).toHaveClass('selected'); | ||
| }); | ||
|
|
||
| it('renders a not selected tab without selected style', () => { | ||
| renderStudioContentMenu({ | ||
| buttonTabs: [tab1, tab2], | ||
| }); | ||
| const notSelectedTab = screen.getByRole('tab', { name: tab2Name }); | ||
| expect(notSelectedTab).not.toHaveClass('selected'); | ||
| }); | ||
|
|
||
| it('renders a selected tab with tabIndex 0', () => { | ||
| renderStudioContentMenu({ | ||
| buttonTabs: [tab1], | ||
| }); | ||
| const menuTab = screen.getByRole('tab', { name: tab1Name }); | ||
| expect(menuTab).toHaveAttribute('tabIndex', '0'); | ||
| }); | ||
|
|
||
| it('renders a not selected tab with tabIndex -1', () => { | ||
| renderStudioContentMenu({ | ||
| buttonTabs: [tab1, tab2], | ||
| }); | ||
| const notSelectedTab = screen.getByRole('tab', { name: tab2Name }); | ||
| expect(notSelectedTab).toHaveAttribute('tabIndex', '-1'); | ||
| }); | ||
|
|
||
| it('renders an empty contentMenu when there is no provided tabs', () => { | ||
| renderStudioContentMenu({ buttonTabs: [] }); | ||
| const emptyMenu = screen.getByRole('tablist'); | ||
| expect(emptyMenu).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders the title and icon of a given menu tab', () => { | ||
| const iconTitle = 'My icon'; | ||
| renderStudioContentMenu({ | ||
| buttonTabs: [ | ||
| { | ||
| ...tab1, | ||
| icon: <svg data-testid={iconTitle}></svg>, | ||
| }, | ||
| ], | ||
| }); | ||
| const menuTab = screen.getByRole('tab', { name: tab1Name }); | ||
| const menuTabTitle = screen.getByTitle(tab1Name); | ||
| const menuIcon = screen.getByTestId(iconTitle); | ||
| expect(menuTab).toBeInTheDocument(); | ||
| expect(menuTabTitle).toBeInTheDocument(); | ||
| expect(menuIcon).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders a linkTab as a link element', () => { | ||
| const link = 'url-link'; | ||
| renderStudioContentMenu({ | ||
| linkTabs: [ | ||
| { | ||
| ...tab1, | ||
| renderTab: (props) => <a href={link} {...props} />, | ||
| }, | ||
| ], | ||
| }); | ||
| const linkTab = screen.getByRole('tab', { name: tab1Name }); | ||
| expect(linkTab).toBeInTheDocument(); | ||
| expect(linkTab).toHaveAttribute('href', link); | ||
| }); | ||
|
|
||
| it('allows changing focus to next tab using keyboard', async () => { | ||
| const user = userEvent.setup(); | ||
| renderStudioContentMenu({ | ||
| buttonTabs: [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({ | ||
| buttonTabs: [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({ | ||
| buttonTabs: [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({ | ||
| buttonTabs: [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({ | ||
| buttonTabs: [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({ | ||
| buttonTabs: [tab1], | ||
| }); | ||
| const menuTab = screen.getByRole('tab', { name: tab1Name }); | ||
| await user.click(menuTab); | ||
| expect(onChangeTabMock).toHaveBeenCalledTimes(1); | ||
| expect(onChangeTabMock).toHaveBeenCalledWith(tab1Id); | ||
| }); | ||
| }); | ||
|
|
||
| type RenderStudioContentMenuProps<TabId extends string> = { | ||
| buttonTabs: StudioContentMenuButtonTabProps<TabId>[]; | ||
| linkTabs: StudioContentMenuLinkTabProps<TabId>[]; | ||
| }; | ||
|
|
||
| const renderStudioContentMenu = ({ | ||
| buttonTabs = [], | ||
| linkTabs = [], | ||
| }: Partial<RenderStudioContentMenuProps<StudioMenuTabName>> = {}) => { | ||
| render( | ||
| <StudioContentMenu selectedTabId={undefined} onChangeTab={onChangeTabMock}> | ||
| {buttonTabs.map((buttonTab) => ( | ||
| <StudioContentMenu.ButtonTab | ||
| key={buttonTab.tabId} | ||
| icon={buttonTab.icon} | ||
| tabId={buttonTab.tabId} | ||
| tabName={buttonTab.tabName} | ||
| /> | ||
| ))} | ||
| {linkTabs.map((linkTab) => ( | ||
| <StudioContentMenu.LinkTab | ||
| key={linkTab.tabId} | ||
| icon={linkTab.icon} | ||
| tabId={linkTab.tabId} | ||
| tabName={linkTab.tabName} | ||
| renderTab={linkTab.renderTab} | ||
| /> | ||
| ))} | ||
| </StudioContentMenu>, | ||
| ); | ||
| }; |
48 changes: 48 additions & 0 deletions
48
frontend/libs/studio-components/src/components/StudioContentMenu/StudioContentMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React, { Children, forwardRef, useState } from 'react'; | ||
| import type { ReactElement, ReactNode } from 'react'; | ||
| import classes from './StudioContentMenu.module.css'; | ||
| import { StudioContentMenuContextProvider } from './context/StudioContentMenuContext'; | ||
|
|
||
| export type StudioContentMenuProps<TabId extends string> = { | ||
| children: ReactNode; | ||
| selectedTabId: TabId; | ||
| onChangeTab: (tabId: TabId) => void; | ||
| }; | ||
|
|
||
| function StudioContentMenuForwarded<TabId extends string>( | ||
| { children, selectedTabId, onChangeTab }: StudioContentMenuProps<TabId>, | ||
| ref: React.Ref<HTMLDivElement>, | ||
| ): ReactElement { | ||
| const firstTabId = getFirstTabId(children); | ||
| const [selectedTab, setSelectedTab] = useState<TabId>(selectedTabId ?? firstTabId); | ||
|
|
||
| const handleChangeTab = (tabId: TabId) => { | ||
| onChangeTab(tabId); | ||
| setSelectedTab(tabId); | ||
| }; | ||
|
|
||
| const isTabSelected = (tabId: TabId) => selectedTab === tabId; | ||
|
|
||
| return ( | ||
| <div ref={ref} className={classes.menuContainer}> | ||
| <div ref={ref} className={classes.tabsContainer} role='tablist'> | ||
| <StudioContentMenuContextProvider | ||
| isTabSelected={isTabSelected} | ||
| onChangeTab={handleChangeTab} | ||
| > | ||
| {children} | ||
| </StudioContentMenuContextProvider> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export const StudioContentMenu = forwardRef<HTMLDivElement, StudioContentMenuProps<string>>( | ||
| StudioContentMenuForwarded, | ||
| ); | ||
|
|
||
| const getFirstTabId = (children: ReactNode) => { | ||
| return Children.toArray(children).filter((child): child is ReactElement => | ||
| React.isValidElement(child), | ||
| )[0]?.props.tabId; | ||
| }; |
Oops, something went wrong.