Merge branch 'master' into sla-sammen-lokalkontor-og-kontorsider

navikt · Jul 15, 2024 · 14aa655 · 14aa655
2 parents 545db7c + 2e8af32
commit 14aa655
Show file tree

Hide file tree

Showing 20 changed files with 1,037 additions and 1,757 deletions.
diff --git a/.github/workflows/deploy.prod.yml b/.github/workflows/deploy.prod.yml
@@ -17,7 +17,7 @@ jobs:
       ADMIN_ORIGIN: https://portal-admin.oera.no
       APP_ORIGIN: https://www.nav.no
       REVALIDATOR_PROXY_ORIGIN: http://nav-enonicxp-frontend-revalidator-proxy
-      DECORATOR_URL: https://www.nav.no/dekoratoren
+      DECORATOR_URL: https://www.nav.no/nav-dekoratoren
       XP_ORIGIN: https://www.nav.no
       TELEMETRY_URL: https://telemetry.nav.no/collect
       INNLOGGINGSSTATUS_URL: https://www.nav.no/person/nav-dekoratoren-api/auth

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,77 +36,77 @@
         "word-wrap": "Transitive dependency only, bumped directly due to vulnerability alert"
     },
     "dependencies": {
-        "@grafana/faro-web-sdk": "1.2.9",
-        "@grafana/faro-web-tracing": "1.2.9",
-        "@navikt/aksel-icons": "6.1.1",
-        "@navikt/ds-css": "6.1.1",
-        "@navikt/ds-react": "6.1.1",
-        "@navikt/ds-tokens": "6.1.1",
+        "@grafana/faro-web-sdk": "1.8.1",
+        "@grafana/faro-web-tracing": "1.8.1",
+        "@navikt/aksel-icons": "6.13.0",
+        "@navikt/ds-css": "6.13.0",
+        "@navikt/ds-react": "6.13.0",
+        "@navikt/ds-tokens": "6.13.0",
         "@navikt/nav-dekoratoren-moduler": "2.1.6",
         "@navikt/nav-office-reception-info": "1.0.6",
-        "@reduxjs/toolkit": "1.9.7",
+        "@reduxjs/toolkit": "2.2.6",
         "csp-header": "5.2.1",
-        "dayjs": "1.11.10",
+        "dayjs": "1.11.11",
         "fuse.js": "6.6.2",
-        "html-react-parser": "5.0.7",
+        "html-react-parser": "5.1.10",
         "js-cookie": "3.0.5",
-        "jsdom": "23.0.1",
+        "jsdom": "24.1.0",
         "jsep": "1.3.8",
         "lodash.debounce": "4.0.8",
-        "lru-cache": "10.1.0",
-        "next": "14.1.4",
+        "lru-cache": "10.4.0",
+        "next": "14.2.4",
         "node-cache": "5.1.2",
-        "p-limit": "4.0.0",
-        "pino": "8.18.0",
-        "react": "18.2.0",
+        "p-limit": "6.0.0",
+        "pino": "9.2.0",
+        "react": "18.3.1",
         "react-collapse": "5.1.1",
-        "react-dom": "18.2.0",
-        "react-movable": "3.0.4",
-        "react-redux": "8.1.3",
-        "redis": "4.6.13",
+        "react-dom": "18.3.1",
+        "react-movable": "3.2.0",
+        "react-redux": "9.1.2",
+        "redis": "4.6.15",
         "rss": "1.2.2",
-        "sharp": "0.33.3",
+        "sharp": "0.33.4",
         "swr": "2.2.5",
-        "tough-cookie": "4.1.3",
-        "uuid": "9.0.1",
+        "tough-cookie": "4.1.4",
+        "uuid": "10.0.0",
         "word-wrap": "1.2.5"
     },
     "devDependencies": {
-        "@next/bundle-analyzer": "14.1.4",
-        "@next/eslint-plugin-next": "14.1.4",
-        "@testing-library/jest-dom": "6.4.2",
-        "@testing-library/react": "14.2.1",
+        "@next/bundle-analyzer": "14.2.4",
+        "@next/eslint-plugin-next": "14.2.4",
+        "@testing-library/jest-dom": "6.4.6",
+        "@testing-library/react": "16.0.0",
         "@types/jest": "29.5.12",
         "@types/js-cookie": "3.0.6",
         "@types/lodash.debounce": "4.0.9",
         "@types/mock-fs": "4.13.4",
-        "@types/node": "20.11.26",
-        "@types/react": "18.2.65",
+        "@types/node": "20.14.10",
+        "@types/react": "18.3.3",
         "@types/react-collapse": "5.0.4",
-        "@types/react-dom": "18.2.22",
+        "@types/react-dom": "18.3.0",
         "@types/react-redux": "7.1.33",
         "@types/rss": "0.0.32",
-        "@types/uuid": "9.0.8",
-        "@types/ws": "^8.5.10",
-        "@typescript-eslint/eslint-plugin": "7.6.0",
-        "@typescript-eslint/parser": "7.6.0",
+        "@types/uuid": "10.0.0",
+        "@types/ws": "8.5.10",
+        "@typescript-eslint/eslint-plugin": "7.15.0",
+        "@typescript-eslint/parser": "7.15.0",
         "eslint": "8.57.0",
-        "eslint-config-next": "14.1.4",
+        "eslint-config-next": "14.2.4",
         "eslint-nibble": "8.1.0",
         "eslint-plugin-css-modules": "2.12.0",
-        "eslint-plugin-no-relative-import-paths": "1.5.4",
-        "husky": "8.0.3",
+        "eslint-plugin-no-relative-import-paths": "1.5.5",
+        "husky": "9.0.11",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
         "jest-fetch-mock": "3.0.3",
-        "lint-staged": "15.2.0",
+        "lint-staged": "15.2.7",
         "mock-fs": "5.2.0",
         "npm-run-all": "4.1.5",
-        "pino-pretty": "10.3.1",
-        "prettier": "3.1.0",
-        "sass": "1.70.0",
-        "ts-jest": "29.1.2",
-        "typescript": "5.4.2",
+        "pino-pretty": "11.2.1",
+        "prettier": "3.3.2",
+        "sass": "1.77.6",
+        "ts-jest": "29.1.5",
+        "typescript": "5.5.3",
         "typescript-plugin-css-modules": "5.1.0"
     },
     "browserslist": {

diff --git a/server/package.json b/server/package.json
@@ -18,19 +18,19 @@
     },
     "dependencies": {
         "cookie-parser": "1.4.6",
-        "dotenv": "16.3.1",
+        "dotenv": "16.4.5",
         "express": "4.19.2",
         "express-prom-bundle": "7.0.0",
         "http-terminator": "3.2.0",
         "on-headers": "1.0.2",
-        "prom-client": "15.1.0"
+        "prom-client": "15.1.3"
     },
     "devDependencies": {
-        "@types/cookie-parser": "1.4.6",
+        "@types/cookie-parser": "1.4.7",
         "@types/express": "4.17.21",
         "@types/on-headers": "1.0.3",
         "concurrently": "8.2.2",
-        "esbuild": "0.20.0",
-        "nodemon": "3.0.2"
+        "esbuild": "0.23.0",
+        "nodemon": "3.1.4"
     }
 }
diff --git a/src/components/_common/expandable/Expandable.tsx b/src/components/_common/expandable/Expandable.tsx
@@ -1,10 +1,11 @@
-import React, { useEffect, useId, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ExpansionCard } from '@navikt/ds-react';
 import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons';
 import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { classNames } from 'utils/classnames';
 import { smoothScrollToTarget } from 'utils/scroll-to';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
+import { ProductDetailType } from 'types/content-props/product-details';
 
 import style from './Expandable.module.scss';
 
@@ -14,7 +15,8 @@ type Props = {
     analyticsOriginTag?: string;
     className?: string;
     children: React.ReactNode;
-    expandableType?: 'processing_times' | 'payout_dates' | 'rates' | 'documentation_requirements';
+    expandableType?: ProductDetailType | 'documentation_requirements';
+    ariaLabel?: string;
 };
 
 export const Expandable = ({
@@ -24,10 +26,10 @@ export const Expandable = ({
     children,
     className,
     expandableType,
+    ariaLabel,
 }: Props) => {
     const [isOpen, setIsOpen] = useState(false);
     const accordionRef = useRef<HTMLDivElement | null>(null);
-    const componentId = useId();
 
     useShortcuts({
         shortcut: Shortcuts.SEARCH,
@@ -71,13 +73,13 @@ export const Expandable = ({
     };
 
     const getHeaderIcon = () => {
-        if (expandableType === 'processing_times') {
+        if (expandableType === ProductDetailType.PROCESSING_TIMES) {
             return <BriefcaseClockIcon aria-hidden className={style.headerIcon} />;
         }
-        if (expandableType === 'payout_dates') {
+        if (expandableType === ProductDetailType.PAYOUT_DATES) {
             return <CalendarIcon aria-hidden className={style.headerIcon} />;
         }
-        if (expandableType === 'rates') {
+        if (expandableType === ProductDetailType.RATES) {
             return <BarChartIcon aria-hidden className={style.headerIcon} />;
         }
         if (expandableType === 'documentation_requirements') {
@@ -113,9 +115,9 @@ export const Expandable = ({
             ref={accordionRef}
             onToggle={toggleExpandCollapse}
             open={isOpen}
-            aria-labelledby={componentId}
+            aria-label={ariaLabel || title}
         >
-            <ExpansionCard.Header className={style.header} id={componentId}>
+            <ExpansionCard.Header className={style.header}>
                 {getHeaderIcon()}
                 <div className={style.headerTitle}>{title}</div>
             </ExpansionCard.Header>

diff --git a/src/components/_common/expandable/ExpandableComponentWrapper.tsx b/src/components/_common/expandable/ExpandableComponentWrapper.tsx
@@ -12,6 +12,7 @@ export const ExpandableComponentWrapper = ({
     expandableAnchorId,
     analyticsOriginTag = '',
     type,
+    ariaLabel,
     children,
 }: Props) => {
     if (!expandable) {
@@ -24,6 +25,7 @@ export const ExpandableComponentWrapper = ({
             anchorId={expandableAnchorId}
             analyticsOriginTag={analyticsOriginTag}
             expandableType={type}
+            ariaLabel={ariaLabel}
         >
             {children}
         </Expandable>

diff --git a/src/components/_common/metatags/HeadWithMetatags.tsx b/src/components/_common/metatags/HeadWithMetatags.tsx
@@ -14,9 +14,7 @@ type Props = {
     children?: React.ReactNode;
 };
 
-const descriptionMaxLength = 140;
-
-const decoratorUrl = process.env.DECORATOR_URL;
+const descriptionMaxLength = 250;
 
 const getDescription = (content: ContentProps) => {
     if (hasMetaDescription(content)) {
@@ -86,10 +84,6 @@ export const HeadWithMetatags = ({ content, children }: Props) => {
                 name="google-site-verification"
                 content="svdLQanNMq_FTzsWHitPYTAvVASZp_KdWz3vQVMGt4Q"
             />
-            <link rel={'icon'} href={`${decoratorUrl}/media/favicon.ico`} sizes="any" />
-            <link rel={'icon'} href={`${decoratorUrl}/media/favicon.svg`} type={'image/svg+xml'} />
-            <link rel={'apple-touch-icon'} href={`${decoratorUrl}/media/apple-touch-icon.png`} />
-            <link rel={'manifest'} href={`${decoratorUrl}/media/site.webmanifest`} />
             {children}
         </Head>
     );

diff --git a/src/components/_common/pageUpdatedInfo/PageUpdatedInfo.tsx b/src/components/_common/pageUpdatedInfo/PageUpdatedInfo.tsx
@@ -16,8 +16,11 @@ export const PageUpdatedInfo = ({
     language = 'no',
     isSituationPage,
 }: PageUpdatedInfoProps) => {
-    const formattedDate = formatDate({ datetime });
-    const getDatesTranslations = translator('dates', language);
+    const usableLanguage =
+        language === 'nn' || language === 'no' || language === 'se' ? 'no' : 'en';
+
+    const formattedDate = formatDate({ datetime, language: usableLanguage });
+    const getDatesTranslations = translator('dates', usableLanguage);
     const updatedString = getDatesTranslations('lastChanged');
 
     return (

diff --git a/src/components/layouts/page-with-side-menus/PageWithSideMenus.tsx b/src/components/layouts/page-with-side-menus/PageWithSideMenus.tsx
@@ -55,7 +55,7 @@ export const PageWithSideMenus = ({ pageProps, layoutProps }: Props) => {
                     />
                 )}
                 <Region pageProps={pageProps} regionProps={pageContent} />
-                <PageUpdatedInfo datetime={pageProps.modifiedTime} />
+                <PageUpdatedInfo datetime={pageProps.modifiedTime} language={pageProps.language} />
             </div>
             <div className={styles.bottomContent}>
                 <Region pageProps={pageProps} regionProps={bottomRow} />

diff --git a/src/components/layouts/product-details-layout/ProductDetailsLayout.tsx b/src/components/layouts/product-details-layout/ProductDetailsLayout.tsx
@@ -63,7 +63,10 @@ export const ProductDetailsLayout = ({ pageProps, layoutProps }: Props) => {
 
                 // The 'main_complaint' section in product details is only applicable
                 // for product detail types === 'processing_times'
-                if (name === 'main_complaint' && detailType !== 'processing_times') {
+                if (
+                    name === 'main_complaint' &&
+                    detailType !== ProductDetailType.PROCESSING_TIMES
+                ) {
                     return null;
                 }
 

diff --git a/src/components/layouts/single-col-page/SingleColPage.tsx b/src/components/layouts/single-col-page/SingleColPage.tsx
@@ -36,7 +36,11 @@ export const SingleColPage = ({ pageProps, layoutProps }: Props) => {
             )}
             <Region pageProps={pageProps} regionProps={regions.pageContent} />
             {showHeaderAndChangedate && (
-                <PageUpdatedInfo datetime={pageProps.modifiedTime} isSituationPage />
+                <PageUpdatedInfo
+                    datetime={pageProps.modifiedTime}
+                    isSituationPage
+                    language={pageProps.language}
+                />
             )}
         </LayoutContainer>
     );

diff --git a/src/components/parts/_legacy/main-article/MainArticleLegacyPart.tsx b/src/components/parts/_legacy/main-article/MainArticleLegacyPart.tsx
@@ -11,6 +11,7 @@ import { translator } from 'translations';
 import { parseInnholdsfortegnelse } from 'components/parts/_legacy/main-article/komponenter/parseInnholdsfortegnelse';
 
 import { createTypeGuard } from 'types/_type-guards';
+import { MainArticleData } from 'types/content-props/main-article-props';
 import stylePermanent from './MainArticlePermanent.module.scss';
 import styleNews from './MainArticleNewsPress.module.scss';
 
@@ -33,7 +34,8 @@ export const MainArticleLegacyPart = (propsInitial: ContentProps) => {
         return null;
     }
 
-    const { data, language, displayName, _path } = props;
+    const { language, displayName, _path } = props;
+    const data = props.data as MainArticleData;
 
     const isNewsArticle = data.contentType === 'news' || data.contentType === 'pressRelease';
 

diff --git a/src/components/parts/product-details/ProductDetailsPart.tsx b/src/components/parts/product-details/ProductDetailsPart.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { ComponentMapper } from 'components/ComponentMapper';
 import { ExpandableComponentWrapper } from 'components/_common/expandable/ExpandableComponentWrapper';
-import { ProductDetailType } from 'types/content-props/product-details';
+import {
+    ProcessingTimesVisibilityType,
+    ProductDetailType,
+} from 'types/content-props/product-details';
 import { FilteredContent } from 'components/_common/filtered-content/FilteredContent';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { Language, translator } from 'translations';
@@ -14,6 +17,7 @@ import style from './ProductDetailsPart.module.scss';
 
 export type PartConfigProductDetails = {
     detailType: ProductDetailType;
+    processingTimesVisibility: ProcessingTimesVisibilityType;
     // Note: these two fields are defined as a special case on the backend
     // and are not included in the Graphql schema
     components: ComponentProps[];
@@ -56,12 +60,25 @@ export const ProductDetailsPart = ({ config }: PartComponentProps<PartType.Produ
     };
 
     const expandableType = config.detailType as unknown as ExpandableMixin['type'];
+    const visibilityType = config.processingTimesVisibility;
+    const getProductDetailsLabel = translator('productDetailTypes', pageContent.language);
+    const getVisibilityLabel = translator('processingTimesVisibilityTypes', pageContent.language);
+    const ariaLabel =
+        expandableType === ProductDetailType.PROCESSING_TIMES && visibilityType
+            ? `${getProductDetailsLabel(ProductDetailType.PROCESSING_TIMES)} ${getVisibilityLabel(
+                  visibilityType
+              )}`
+            : undefined;
 
     return (
         <div className={style.productDetails}>
             <PageContextProvider content={pageContent}>
                 <FilteredContent {...config}>
-                    <ExpandableComponentWrapper type={expandableType} {...config}>
+                    <ExpandableComponentWrapper
+                        type={expandableType}
+                        ariaLabel={ariaLabel}
+                        {...config}
+                    >
                         {components.map((component, index) => (
                             <ComponentMapper
                                 key={index}

diff --git a/src/components/parts/related-situations/RelatedSituationsPart.tsx b/src/components/parts/related-situations/RelatedSituationsPart.tsx
@@ -5,6 +5,7 @@ import { ContentType } from 'types/content-props/_content-common';
 import { PartComponentProps, PartType } from 'types/component-props/parts';
 import { usePageContentProps } from 'store/pageContext';
 import { createTypeGuard } from 'types/_type-guards';
+import { ProductPageProps } from 'types/content-props/dynamic-page-props';
 
 const isValidContentType = createTypeGuard([
     ContentType.ProductPage,
@@ -21,7 +22,7 @@ export type PartConfigRelatedSituations = {
 export const RelatedSituationsPart = ({
     config,
 }: PartComponentProps<PartType.RelatedSituations>) => {
-    const { type, data } = usePageContentProps();
+    const { type, data } = usePageContentProps<ProductPageProps>();
 
     if (!isValidContentType(type)) {
         return <EditorHelp text={`Ugyldig content-type ${type}`} />;