;
+ return pages[currentPage].props;
+};
+
+const getAllPageNamesFromPagesConfig = (pages: PagesConfig): PageName[] => {
+ const customPages = Object.keys(pages) as PageName[];
+ return ['landingPage', ...customPages];
+};
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/PagesRouter.test.tsx
similarity index 57%
rename from frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/PagesRouter.test.tsx
index 711ac30d150..c25079939fc 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/PagesRouter.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/PagesRouter.test.tsx
@@ -1,18 +1,23 @@
import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { PagesRouter } from './PagesRouter';
import { textMock } from '@studio/testing/mocks/i18nMock';
-import { RouterContext } from '../../contexts/RouterContext';
-import type { PageName } from '../../types/PageName';
+import { RouterContext } from '../../../contexts/RouterContext';
+import type { PageName } from '../../../types/PageName';
+import { renderWithBrowserRouter } from '../../../../test-utils/renderWithBrowserRouter';
const navigateMock = jest.fn();
describe('PagesRouter', () => {
it('renders the pages as navigation titles', () => {
renderPagesRouter();
- const codeListNavTitle = screen.getByText(textMock('app_content_library.code_lists.page_name'));
- const imagesNavTitle = screen.getByText(textMock('app_content_library.images.page_name'));
+ const codeListNavTitle = screen.getByRole('tab', {
+ name: textMock('app_content_library.code_lists.page_name'),
+ });
+ const imagesNavTitle = screen.getByRole('tab', {
+ name: textMock('app_content_library.images.page_name'),
+ });
expect(codeListNavTitle).toBeInTheDocument();
expect(imagesNavTitle).toBeInTheDocument();
});
@@ -20,22 +25,17 @@ describe('PagesRouter', () => {
it('calls navigate from RouterContext when clicking on a page that is not selected', async () => {
const user = userEvent.setup();
renderPagesRouter();
- const imagesNavTitle = screen.getByText(textMock('app_content_library.images.page_name'));
+ const imagesNavTitle = screen.getByRole('tab', {
+ name: textMock('app_content_library.images.page_name'),
+ });
await user.click(imagesNavTitle);
expect(navigateMock).toHaveBeenCalledTimes(1);
expect(navigateMock).toHaveBeenCalledWith('images');
});
-
- it('returns null if trying to render an unknown pageName', () => {
- const pageName: string = 'unknownPageName';
- renderPagesRouter([pageName as PageName]);
- const navTitle = screen.queryByText(pageName);
- expect(navTitle).not.toBeInTheDocument();
- });
});
const renderPagesRouter = (pageNames: PageName[] = ['codeList', 'images']) => {
- render(
+ renderWithBrowserRouter(
,
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/PagesRouter.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/PagesRouter.tsx
new file mode 100644
index 00000000000..64c855ff184
--- /dev/null
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/PagesRouter.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useRouterContext } from '../../../contexts/RouterContext';
+import type { PageName } from '../../../types/PageName';
+import { useContentTabs } from '../../../hooks/useLibraryMenuContentTabs';
+import { StudioContentMenu } from '@studio/components';
+
+type PagesRouterProps = {
+ pageNames: PageName[];
+};
+
+export function PagesRouter({ pageNames }: PagesRouterProps): React.ReactElement {
+ const { navigate, currentPage } = useRouterContext();
+ const contentTabs = useContentTabs();
+
+ const handleNavigation = (pageToNavigateTo: PageName) => {
+ navigate(pageToNavigateTo);
+ };
+
+ return (
+
+ {pageNames.map((pageName) => (
+
+ ))}
+
+ );
+}
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/index.ts
new file mode 100644
index 00000000000..a2a2b9baf0b
--- /dev/null
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/PagesRouter/index.ts
@@ -0,0 +1 @@
+export { PagesRouter } from './PagesRouter';
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/index.ts
new file mode 100644
index 00000000000..159e8cfa63e
--- /dev/null
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/index.ts
@@ -0,0 +1 @@
+export { LibraryBody } from './LibraryBody';
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/CodeList.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/CodeList/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/Images.test.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/Images.test.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/Images.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/Images.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/Images.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/Images/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/Images/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.module.css b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/LandingPage.module.css
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.module.css
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/LandingPage.module.css
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/LandingPage.test.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.test.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/LandingPage.test.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/LandingPage.tsx
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/LandingPage.tsx
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/LandingPage.tsx
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/index.ts
similarity index 100%
rename from frontend/libs/studio-content-library/src/ContentLibrary/pages/LandingPage/index.ts
rename to frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/LandingPage/index.ts
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css
index 7b0751c64e6..25d5304ea77 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css
@@ -1,12 +1,13 @@
.libraryHeading {
+ display: flex;
+ align-items: center;
+ gap: var(--fds-spacing-1);
padding: var(--fds-spacing-4);
border-bottom: solid 1px var(--fds-semantic-border-neutral-subtle);
}
-.libraryLandingPageNavigation {
+.headingIcon {
display: flex;
- align-items: center;
- gap: var(--fds-spacing-1);
- cursor: pointer;
- width: fit-content;
+ color: var(--fds-semantic-text-neutral-default);
+ font-size: var(--fds-sizing-10);
}
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx
index 85dbbfa2553..eca2675279e 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.test.tsx
@@ -2,31 +2,19 @@ import React from 'react';
import { textMock } from '@studio/testing/mocks/i18nMock';
import { LibraryHeader } from './LibraryHeader';
import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
import { RouterContext } from '../../contexts/RouterContext';
const navigateMock = jest.fn();
describe('LibraryHeader', () => {
- it('renders the landingPage header', () => {
+ it('renders the content library header', () => {
renderLibraryHeader();
- const landingPageIcon = screen.getByRole('img');
- const landingPageHeader = screen.getByRole('heading', {
- name: textMock('app_content_library.landing_page.page_name'),
+ const libraryIcon = screen.getByRole('img');
+ const libraryHeader = screen.getByRole('heading', {
+ name: textMock('app_content_library.library_heading'),
});
- expect(landingPageIcon).toBeInTheDocument();
- expect(landingPageHeader).toBeInTheDocument();
- });
-
- it('calls navigate from useRouterContext when clicking on the header', async () => {
- const user = userEvent.setup();
- renderLibraryHeader();
- const landingPageHeader = screen.getByRole('heading', {
- name: textMock('app_content_library.landing_page.page_name'),
- });
- await user.click(landingPageHeader);
- expect(navigateMock).toHaveBeenCalledTimes(1);
- expect(navigateMock).toHaveBeenCalledWith('landingPage');
+ expect(libraryIcon).toBeInTheDocument();
+ expect(libraryHeader).toBeInTheDocument();
});
});
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx
index e59df0f2d9e..299ac11b248 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx
@@ -1,30 +1,16 @@
import React from 'react';
import classes from './LibraryHeader.module.css';
-import { pagesRouterConfigs } from '../PagesRouter';
-import type { PageName } from '../../types/PageName';
-import { useRouterContext } from '../../contexts/RouterContext';
import { StudioHeading } from '@studio/components';
import { useTranslation } from 'react-i18next';
+import { BookIcon } from '@studio/icons';
export function LibraryHeader(): React.ReactElement {
- const { navigate } = useRouterContext();
const { t } = useTranslation();
- const handleNavigation = (pageToNavigateTo: PageName) => {
- navigate(pageToNavigateTo);
- };
-
return (
-
handleNavigation('landingPage')}
- >
- {pagesRouterConfigs['landingPage'].icon}
-
- {t(pagesRouterConfigs['landingPage'].pageTitleTextKey)}
-
-
+
+
{t('app_content_library.library_heading')}
- {pageNames.map((pageName) => (
-
- ))}
-
onClick(pageName)}
- >
- {pagesRouterConfigs[pageName].icon}
- {t(pagesRouterConfigs[pageName].pageTitleTextKey)}
-
- );
-}
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/index.ts
deleted file mode 100644
index 49a7c6f8f2a..00000000000
--- a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PagesRouter } from './PagesRouter';
-export { pagesRouterConfigs } from './pagesRouterConfigs';
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/pagesRouterConfigs.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/pagesRouterConfigs.tsx
deleted file mode 100644
index 0e323134291..00000000000
--- a/frontend/libs/studio-content-library/src/ContentLibrary/PagesRouter/pagesRouterConfigs.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { type ReactNode } from 'react';
-import type { PageName } from '../../types/PageName';
-import { BookIcon, CodeListsIcon, ImageIcon } from '@studio/icons';
-
-type RouterPageProps = {
- icon: ReactNode;
- pageName: PageName;
- pageTitleTextKey: string;
-};
-
-type PagesRouterConfigs = { [T in PageName]: RouterPageProps };
-
-export const pagesRouterConfigs: PagesRouterConfigs = {
- landingPage: {
- pageName: 'landingPage',
- pageTitleTextKey: 'app_content_library.landing_page.page_name',
- icon: ,
- },
- codeList: {
- icon: ,
- pageName: 'codeList',
- pageTitleTextKey: 'app_content_library.code_lists.page_name',
- },
- images: {
- icon: ,
- pageName: 'images',
- pageTitleTextKey: 'app_content_library.images.page_name',
- },
-};
diff --git a/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx b/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
index 131bd3bedb4..25e068df168 100644
--- a/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
+++ b/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
import type { PagesConfig } from '../types/PagesProps';
import { ResourceContentLibraryImpl } from './ContentResourceLibraryImpl';
import { textMock } from '@studio/testing/mocks/i18nMock';
+import { renderWithBrowserRouter } from '../../test-utils/renderWithBrowserRouter';
describe('ContentResourceLibraryImpl', () => {
it('renders ContentResourceLibraryImpl with given pages', () => {
@@ -51,5 +51,5 @@ describe('ContentResourceLibraryImpl', () => {
const renderContentResourceLibraryImpl = (pages: PagesConfig) => {
const contentResourceLibraryImpl = new ResourceContentLibraryImpl({ pages });
const { getContentResourceLibrary } = contentResourceLibraryImpl;
- render({getContentResourceLibrary()}
);
+ renderWithBrowserRouter(getContentResourceLibrary());
};
diff --git a/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx b/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx
new file mode 100644
index 00000000000..0a18886a374
--- /dev/null
+++ b/frontend/libs/studio-content-library/src/hooks/useLibraryMenuContentTabs.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import type { PageName } from '../types/PageName';
+import { BookIcon, CodeListsIcon, ImageIcon } from '@studio/icons';
+import type { StudioContentMenuLinkTabProps } from '@studio/components';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import { pageRouterQueryParamKey } from '../utils/router/QueryParamsRouter';
+
+type TabDictionary = {
+ [Key in PageName]: StudioContentMenuLinkTabProps;
+};
+
+export const useContentTabs = (): TabDictionary => {
+ const { t } = useTranslation();
+
+ return {
+ landingPage: {
+ tabName: t('app_content_library.landing_page.page_name'),
+ tabId: 'landingPage',
+ icon: ,
+ renderTab: (props) => ,
+ },
+ codeList: {
+ tabName: t('app_content_library.code_lists.page_name'),
+ tabId: 'codeList',
+ icon: ,
+ renderTab: (props) => ,
+ },
+ images: {
+ tabName: t('app_content_library.images.page_name'),
+ tabId: 'images',
+ icon: ,
+ renderTab: (props) => ,
+ },
+ };
+};
diff --git a/frontend/libs/studio-content-library/src/types/PagesProps.ts b/frontend/libs/studio-content-library/src/types/PagesProps.ts
index 6e7760f5c81..07aea20e47d 100644
--- a/frontend/libs/studio-content-library/src/types/PagesProps.ts
+++ b/frontend/libs/studio-content-library/src/types/PagesProps.ts
@@ -1,19 +1,19 @@
-import type { CodeListProps } from '../ContentLibrary/pages/CodeList';
+import type { CodeListProps } from '../ContentLibrary/LibraryBody/pages/CodeList';
import type { PageName } from './PageName';
-import type { ImagesProps } from '../ContentLibrary/pages/Images';
+import type { ImagesProps } from '../ContentLibrary/LibraryBody/pages/Images';
-export type PagePropsMap = {
- landingPage?: {};
- codeList?: CodeListProps;
- images?: ImagesProps;
-};
+export type PagePropsMap = {
+ landingPage: {};
+ codeList: CodeListProps;
+ images: ImagesProps;
+}[P];
type GlobalPageConfig = {
props: T;
};
type AllPagesConfig = {
- [K in PageName]: GlobalPageConfig;
+ [K in PageName]: GlobalPageConfig>;
};
export type PagesConfig = Partial;
diff --git a/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts b/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts
index 23c21e495da..3ebdb611691 100644
--- a/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/QueryParamsRouter.ts
@@ -1,6 +1,6 @@
import type { PageName } from '../../types/PageName';
-const pageRouterQueryParamKey: string = 'currentLibraryRoute';
+export const pageRouterQueryParamKey: string = 'currentLibraryRoute';
export interface QueryParamsRouter {
currentRoute: PageName;
diff --git a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
index f5d0c9e9752..e5de2eb3655 100644
--- a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
@@ -1,6 +1,6 @@
import { RouterRouteMapperImpl } from './RouterRouteMapper';
-import { LandingPage } from '../../ContentLibrary/pages/LandingPage';
-import { CodeList } from '../../ContentLibrary/pages/CodeList';
+import { LandingPage } from '../../ContentLibrary/LibraryBody/pages/LandingPage';
+import { CodeList } from '../../ContentLibrary/LibraryBody/pages/CodeList';
import { mockPagesConfig } from '../../../mocks/mockPagesConfig';
describe('RouterRouteMapperImpl', () => {
diff --git a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts
index e05fca14698..211a5ef5c69 100644
--- a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.ts
@@ -1,9 +1,9 @@
import { type ComponentProps, type ReactElement } from 'react';
-import { CodeList } from '../../ContentLibrary/pages/CodeList';
+import { CodeList } from '../../ContentLibrary/LibraryBody/pages/CodeList';
import type { PageName } from '../../types/PageName';
-import { LandingPage } from '../../ContentLibrary/pages/LandingPage';
+import { LandingPage } from '../../ContentLibrary/LibraryBody/pages/LandingPage';
import type { PagesConfig } from '../../types/PagesProps';
-import { Images } from '../../ContentLibrary/pages/Images';
+import { Images } from '../../ContentLibrary/LibraryBody/pages/Images';
type PageProps =
| ComponentProps
diff --git a/frontend/libs/studio-content-library/test-utils/renderWithBrowserRouter.tsx b/frontend/libs/studio-content-library/test-utils/renderWithBrowserRouter.tsx
new file mode 100644
index 00000000000..a0e21c65ad9
--- /dev/null
+++ b/frontend/libs/studio-content-library/test-utils/renderWithBrowserRouter.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import type { RenderResult } from '@testing-library/react';
+import { render } from '@testing-library/react';
+
+export function renderWithBrowserRouter(component: ReactNode): RenderResult {
+ return render({component});
+}