diff --git a/frontend/app-development/enums/HeaderMenuItemKey.ts b/frontend/app-development/enums/HeaderMenuItemKey.ts index ccf4b2ba028..e7977896eef 100644 --- a/frontend/app-development/enums/HeaderMenuItemKey.ts +++ b/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 = '', } diff --git a/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json b/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json index c7085d5cd5d..d11fdedd481 100644 --- a/frontend/app-development/features/overview/components/News/NewsContent/news.nb.json +++ b/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!", diff --git a/frontend/app-development/utils/headerMenu/headerMenuUtils.test.ts b/frontend/app-development/utils/headerMenu/headerMenuUtils.test.ts index 14d2bfe5f05..3757382f299 100644 --- a/frontend/app-development/utils/headerMenu/headerMenuUtils.test.ts +++ b/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, + ]); }); }); }); diff --git a/frontend/app-development/utils/headerMenu/headerMenuUtils.ts b/frontend/app-development/utils/headerMenu/headerMenuUtils.ts index 840f654f44b..e1ce820a34a 100644 --- a/frontend/app-development/utils/headerMenu/headerMenuUtils.ts +++ b/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[] => { diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json index ecf14bad3b1..ac6852cfd6d 100644 --- a/frontend/language/src/nb.json +++ b/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", diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.test.tsx index 5d59094ea19..2f11b50268e 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.test.tsx +++ b/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 () => { diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.tsx index 8dd33945c64..d509a53018a 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/ImagesPage/ImagesPage.tsx +++ b/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')} {noExistingImages ? ( - {t('app_content_library.images.no_content')} + {t('app_content_library.images.coming_soon')} ) : ( images.map((image) => (
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 25d5304ea77..b13b7da638b 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 @@ -11,3 +11,7 @@ color: var(--fds-semantic-text-neutral-default); font-size: var(--fds-sizing-10); } + +.headingText { + display: contents; +} 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 eca2675279e..373c16e68c3 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 @@ -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 = () => { 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 299ac11b248..2539a8abb73 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryHeader/LibraryHeader.tsx @@ -1,8 +1,9 @@ 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(); @@ -10,7 +11,9 @@ export function LibraryHeader(): React.ReactElement { return (
- {t('app_content_library.library_heading')} + + {t('app_content_library.library_heading')} +
); }