Adjust studioContentMenu

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

@@ -0,0 +1,6 @@
+.buttonTab {
+  all: unset;
+  display: var(--tab-display);
+  align-items: var(--tab-align-items);
+  width: var(--tab-width);
+}

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

@@ -1,4 +1,4 @@
 .contentMenuWrapper {
   height: 300px;
-  width: 200px;
+  width: 20vw;
 }

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import { StudioContentMenu } from './';
 import classes from './StudioContentMenuWrapper.module.css';
-import type { StudioButtonTabType, StudioLinkTabType } from './types/StudioMenuTabType';
+import type { StudioContentMenuButtonTabProps } from './StudioContentMenuButtonTab';
+import type { StudioContentMenuLinkTabProps } from './StudioContentMenuLinkTab';
 
 export type StudioContentMenuWrapperProps<TabId extends string> = {
-  buttonTabs: StudioButtonTabType<TabId>[];
-  linkTabs: StudioLinkTabType<TabId>[];
+  buttonTabs: StudioContentMenuButtonTabProps<TabId>[];
+  linkTabs: StudioContentMenuLinkTabProps<TabId>[];
   selectedTabId: TabId;
   onChangeTab: (tabId: TabId) => void;
 };
@@ -19,10 +20,27 @@ export function StudioContentMenuWrapper<TabId extends string>({
   return (
     <div className={classes.contentMenuWrapper}>
       <StudioContentMenu selectedTabId={selectedTabId} onChangeTab={onChangeTab}>
-        <StudioContentMenu.ButtonTab contentTab={buttonTabs[0]} />
-        <StudioContentMenu.ButtonTab contentTab={buttonTabs[1]} />
-        <StudioContentMenu.ButtonTab contentTab={buttonTabs[2]} />
-        <StudioContentMenu.LinkTab contentTab={linkTabs[0]} />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[0].icon}
+          tabId={buttonTabs[0].tabId}
+          tabName={buttonTabs[0].tabName}
+        />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[1].icon}
+          tabId={buttonTabs[1].tabId}
+          tabName={buttonTabs[1].tabName}
+        />
+        <StudioContentMenu.ButtonTab
+          icon={buttonTabs[2].icon}
+          tabId={buttonTabs[2].tabId}
+          tabName={buttonTabs[2].tabName}
+        />
+        <StudioContentMenu.LinkTab
+          icon={linkTabs[0].icon}
+          tabId={linkTabs[0].tabId}
+          tabName={linkTabs[0].tabName}
+          renderTab={linkTabs[0].renderTab}
+        />
       </StudioContentMenu>
     </div>
   );

frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.test.tsx

@@ -6,14 +6,15 @@ import { mockPagesConfig } from '../../mocks/mockPagesConfig';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { RouterContext } from '../contexts/RouterContext';
 import type { PageName } from '../types/PageName';
+import { BrowserRouter } from 'react-router-dom';
 
 const navigateMock = jest.fn();
 
 describe('ContentLibrary', () => {
   it('renders the ContentLibrary with landingPage by default', () => {
     renderContentLibrary();
     const libraryHeader = screen.getByRole('heading', {
-      name: textMock('app_content_library.landing_page.page_name'),
+      name: textMock('app_content_library.library_heading'),
     });
     const landingPageTitle = screen.getByRole('heading', {
       name: textMock('app_content_library.landing_page.title'),
@@ -52,8 +53,10 @@ describe('ContentLibrary', () => {
 
 const renderContentLibrary = (currentPage: PageName = undefined) => {
   render(
-    <RouterContext.Provider value={{ currentPage, navigate: navigateMock }}>
-      <ContentLibrary pages={mockPagesConfig} />
-    </RouterContext.Provider>,
+    <BrowserRouter>
+      <RouterContext.Provider value={{ currentPage, navigate: navigateMock }}>
+        <ContentLibrary pages={mockPagesConfig} />
+      </RouterContext.Provider>
+    </BrowserRouter>,
   );
 };

frontend/libs/studio-content-library/src/ContentLibrary/ContentLibrary.tsx

@@ -4,11 +4,10 @@ import type { PageComponent } from '../utils/router/RouterRouteMapper';
 import { RouterRouteMapperImpl } from '../utils/router/RouterRouteMapper';
 import type { PagePropsMap, PagesConfig } from '../types/PagesProps';
 import classes from './ContentLibrary.module.css';
-import { InfoBox } from './InfoBox';
-import { PagesRouter } from './PagesRouter';
 import { LibraryHeader } from './LibraryHeader';
 import { StudioHeading } from '@studio/components';
 import type { PageName } from '../types/PageName';
+import { LibraryContent } from './LibraryContent/LibraryContent';
 
 type ContentLibraryProps = {
   pages: PagesConfig;
@@ -34,22 +33,11 @@ function ContentLibraryForPage<T extends PageName = 'landingPage'>({
     router.configuredRoutes.get(currentPage);
   if (!Component) return <StudioHeading>404 Page Not Found</StudioHeading>; // Show the NotFound page from app-dev instead
 
-  const componentPropsAreExternal = currentPage !== 'landingPage';
-
-  const componentProps: Required<PagePropsMap>[T] =
-    componentPropsAreExternal && (pages[currentPage].props as Required<PagePropsMap>[T]);
-
   return (
     <div className={classes.libraryBackground}>
       <div className={classes.libraryContainer}>
         <LibraryHeader />
-        <div className={classes.libraryContent}>
-          <PagesRouter currentPage={currentPage} />
-          <div className={classes.component}>
-            <Component {...componentProps} />
-          </div>
-          <InfoBox pageName={currentPage} />
-        </div>
+        <LibraryContent Component={Component} pages={pages} currentPage={currentPage} />
       </div>
     </div>
   );

frontend/libs/studio-content-library/src/ContentLibrary/InfoBox/InfoBox.test.tsx → frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/InfoBox/InfoBox.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { InfoBox } from './InfoBox';
 import { render, screen } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
-import type { PageName } from '../../types/PageName';
+import type { PageName } from '../../../types/PageName';
 import { infoBoxConfigs } from './infoBoxConfigs';
 
 const pageNameMock: PageName = 'codeList';

frontend/libs/studio-content-library/src/ContentLibrary/LibraryContent/LibraryContent.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classes from '../ContentLibrary.module.css';
+import { PagesRouter } from './PagesRouter';
+import { InfoBox } from './InfoBox';
+import type { PagePropsMap, PagesConfig } from '../../types/PagesProps';
+import type { PageName } from '../../types/PageName';
+import type { PageComponent } from '../../utils/router/RouterRouteMapper';
+
+type LibraryContentProps<T extends PageName = 'landingPage'> = {
+  Component: PageComponent<Required<PagePropsMap>[T]>;
+  pages: PagesConfig;
+  currentPage: PageName;
+};
+
+export function LibraryContent<T extends PageName = 'landingPage'>({
+  Component,
+  pages,
+  currentPage,
+}: LibraryContentProps) {
+  const componentPropsAreExternal = currentPage !== 'landingPage';
+
+  const componentProps: Required<PagePropsMap>[T] =
+    componentPropsAreExternal && (pages[currentPage].props as Required<PagePropsMap>[T]);
+
+  return (
+    <div className={classes.libraryContent}>
+      <PagesRouter pageNames={getAllPageNamesFromPagesConfig(pages)} />
+      <div className={classes.component}>
+        <Component {...componentProps} />
+      </div>
+      <InfoBox pageName={currentPage} />
+    </div>
+  );
+}
+
+const getAllPageNamesFromPagesConfig = (pages: PagesConfig): PageName[] => {
+  const customPages = Object.keys(pages) as PageName[];
+  return ['landingPage', ...customPages];
+};