feat: add library as beta to studio page header with news

frontend/app-development/enums/HeaderMenuItemKey.ts

@@ -5,5 +5,6 @@ export enum HeaderMenuItemKey {
   Text = 'top_menu.texts',
   Deploy = 'top_menu.deploy',
   ProcessEditor = 'top_menu.process_editor',
+  ContentLibrary = 'top_menu.content_library',
   None = '',
 }

frontend/app-development/features/overview/components/News/NewsContent/news.nb.json

@@ -1,6 +1,11 @@
 {
   "$schema": "news.schema.json",
   "news": [
+    {
+      "date": "2025-01-27",
+      "title": "Biblioteket er nå tilgjengelig fra menylinjen",
+      "content": "Vi har lagd et nytt bibliotek! Her finner du nå kodelistene dine. Vi jobber med å utvide biblioteket til at du kan finne eller lagre andre ting der, som bilder og tekster."
+    },
     {
       "date": "2025-01-17",
       "title": "Nå kan du ha flere datamodeller i et prosess-steg!",

frontend/app-development/utils/headerMenu/headerMenuUtils.test.ts

@@ -171,14 +171,13 @@ describe('headerMenuUtils', () => {
 
       // Ensure other items are still present
       const remainingKeys = filteredMenu.map((item) => item.key);
-      expect(remainingKeys).toEqual(
-        expect.arrayContaining([
-          HeaderMenuItemKey.Create,
-          HeaderMenuItemKey.DataModel,
-          HeaderMenuItemKey.Text,
-          HeaderMenuItemKey.ProcessEditor,
-        ]),
-      );
+      expect(remainingKeys).toEqual([
+        HeaderMenuItemKey.Create,
+        HeaderMenuItemKey.DataModel,
+        HeaderMenuItemKey.Text,
+        HeaderMenuItemKey.ProcessEditor,
+        HeaderMenuItemKey.ContentLibrary,
+      ]);
     });
   });
 });

frontend/app-development/utils/headerMenu/headerMenuUtils.ts

@@ -3,7 +3,14 @@ import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
 import { type HeaderMenuItem } from 'app-development/types/HeaderMenu/HeaderMenuItem';
 import { HeaderMenuItemKey } from 'app-development/enums/HeaderMenuItemKey';
 import { type HeaderMenuGroup } from 'app-development/types/HeaderMenu/HeaderMenuGroup';
-import { DatabaseIcon, Density3Icon, PencilIcon, TenancyIcon, UploadIcon } from '@studio/icons';
+import {
+  BookIcon,
+  DatabaseIcon,
+  Density3Icon,
+  PencilIcon,
+  TenancyIcon,
+  UploadIcon,
+} from '@studio/icons';
 import { RoutePaths } from 'app-development/enums/RoutePaths';
 import { HeaderMenuGroupKey } from 'app-development/enums/HeaderMenuGroupKey';
 import { type NavigationMenuSmallGroup } from 'app-development/types/HeaderMenu/NavigationMenuSmallGroup';
@@ -50,6 +57,14 @@ export const topBarMenuItem: HeaderMenuItem[] = [
     repositoryTypes: [RepositoryType.App],
     group: HeaderMenuGroupKey.Other,
   },
+  {
+    key: HeaderMenuItemKey.ContentLibrary,
+    link: RoutePaths.ContentLibrary,
+    icon: BookIcon,
+    repositoryTypes: [RepositoryType.App],
+    group: HeaderMenuGroupKey.Tools,
+    isBeta: true,
+  },
 ];
 
 export const getFilteredTopBarMenu = (repositoryType: RepositoryType): HeaderMenuItem[] => {

frontend/language/src/nb.json

@@ -44,9 +44,9 @@
   "app_content_library.code_lists.search_label": "Søk på kodelister",
   "app_content_library.code_lists.upload_code_list": "Last opp din egen kodeliste",
   "app_content_library.fetch_error": "Det har oppstått et problem ved henting av data til biblioteket.",
+  "app_content_library.images.coming_soon": "Snart blir det mulig å laste opp bilder i biblioteket. Vi jobber med saken!",
   "app_content_library.images.info_box.description": "Du kan bruke bildene i biblioteket til å legge inn bilder i skjemaet. Du kan også laste opp et bilde med organisasjonens logo, og legge det som logobilde i innstillingene for appen.",
   "app_content_library.images.info_box.title": "Hva kan du bruke bildene til?",
-  "app_content_library.images.no_content": "Dette biblioteket har ingen bilder",
   "app_content_library.images.page_name": "Bilder",
   "app_content_library.info_box.title": "En kort beskrivelse om bruk av og hensikt med ressursen i bibliotket.",
   "app_content_library.landing_page.description": "Når du utvikler tjenester, er det nyttig å samle ulike filer og ressurser på ett sted. I biblioteket kan du laste opp ting andre har laget som du har bruk for, eller selv lage det du trenger til de appene og skjemaene du utvikler.",
@@ -1187,6 +1187,7 @@
   "top_bar.group_overview": "Oversikt",
   "top_bar.group_tools": "Verktøy",
   "top_menu.about": "Oversikt",
+  "top_menu.content_library": "Bibliotek",
   "top_menu.create": "Utforming",
   "top_menu.data_model": "Datamodell",
   "top_menu.deploy": "Publiser",

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

@@ -22,8 +22,8 @@ describe('ImagesPage', () => {
 
   it('renders an alert when no images are passed', () => {
     renderImages({ images: [], onUpdateImage: onUpdateImageMock });
-    const noImagesExistAlert = screen.getByText(textMock('app_content_library.images.no_content'));
-    expect(noImagesExistAlert).toBeInTheDocument();
+    const alert = screen.getByText(textMock('app_content_library.images.coming_soon'));
+    expect(alert).toBeInTheDocument();
   });
 
   it('calls onUpdateImagesMock when clicking the button to update', async () => {

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.tsx

@@ -24,7 +24,7 @@ export function ImagesPage({ images, onUpdateImage }: ImagesPageProps): React.Re
         {t('app_content_library.images.page_name')}
       </StudioHeading>
       {noExistingImages ? (
-        <Alert size='small'>{t('app_content_library.images.no_content')}</Alert>
+        <Alert size='small'>{t('app_content_library.images.coming_soon')}</Alert>
       ) : (
         images.map((image) => (
           <div key={image.title}>

frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.module.css

@@ -11,3 +11,7 @@
   color: var(--fds-semantic-text-neutral-default);
   font-size: var(--fds-sizing-10);
 }
+
+.headingText {
+  display: contents;
+}

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

@@ -16,6 +16,14 @@ describe('LibraryHeader', () => {
     expect(libraryIcon).toBeInTheDocument();
     expect(libraryHeader).toBeInTheDocument();
   });
+
+  it('renders the content library header with isBeta class', () => {
+    renderLibraryHeader();
+    const libraryHeader = screen.getByRole('heading', {
+      name: textMock('app_content_library.library_heading'),
+    });
+    expect(libraryHeader).toHaveClass('isBeta');
+  });
 });
 
 const renderLibraryHeader = () => {

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

@@ -1,16 +1,19 @@
 import React from 'react';
 import classes from './LibraryHeader.module.css';
-import { StudioHeading } from '@studio/components';
+import { studioBetaTagClasses, StudioHeading } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { BookIcon } from '@studio/icons';
+import cn from 'classnames';
 
 export function LibraryHeader(): React.ReactElement {
   const { t } = useTranslation();
 
   return (
     <div className={classes.libraryHeading}>
       <BookIcon className={classes.headingIcon} />
-      <StudioHeading size='small'>{t('app_content_library.library_heading')}</StudioHeading>
+      <StudioHeading size='small' className={cn(classes.headingText, studioBetaTagClasses.isBeta)}>
+        {t('app_content_library.library_heading')}
+      </StudioHeading>
     </div>
   );
 }