Merge branch 'main' into mellomsteg

Author: taniaholst

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-card-largecardv2--illustration-desktop-linux-desktop-linux.png

@@ -2,6 +2,7 @@ import React from 'react';
 import { LinkPanel } from '@navikt/ds-react';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { classNames } from 'utils/classnames';
+import { useLayoutConfig } from 'components/layouts/useLayoutConfig';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { AreaCardGraphics } from './graphics/AreaCardGraphics';
 
@@ -17,6 +18,9 @@ type Props = {
 } & Omit<React.ComponentProps<typeof LinkPanel>, 'as'>;
 
 export const AreaCard = ({ path, title, area, linkGroup, className, ...rest }: Props) => {
+    const { layoutConfig } = useLayoutConfig();
+    const analyticsLinkGroup= linkGroup ?? layoutConfig.title;
+
     if (!area) {
         return <EditorHelp text={'Velg en grafikk for kortet'} />;
     }
@@ -28,7 +32,7 @@ export const AreaCard = ({ path, title, area, linkGroup, className, ...rest }: P
             href={path}
             analyticsLabel={title}
             analyticsComponent={'Områdekort'}
-            analyticsLinkGroup={linkGroup}
+            analyticsLinkGroup={analyticsLinkGroup}
             className={classNames(style.linkPanel, graphicsStyle.expandOnHover, className)}
             as={LenkeBase}
         >

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-headers-themedpageheader--default-desktop-linux-desktop-linux.png

@@ -6,7 +6,7 @@
     .textAboveTitle {
         color: var(--a-text-subtle);
         font-weight: 400;
-        font-size: 20px;
+        font-size: 18px;
         line-height: 28px;
         letter-spacing: -0.1%;
     }

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-headers-themedpageheader--overview-page-desktop-linux-desktop-linux.png

@@ -3,6 +3,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    width: 100%;
+    height: 100%;
+    min-width: 4rem;
+    min-height: 4rem;
 
     &:empty {
         display: none;

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-headers-themedpageheader--with-time-stamp-desktop-linux-desktop-linux.png

@@ -23,13 +23,14 @@ const getDescription = (content: ContentProps) => {
     return description.slice(0, DESCRIPTION_MAX_LENGTH);
 };
 
-const contentTypesWithNoIndex = new Set([ContentType.Error, ContentType.FormIntermediateStepPage]);
+const contentTypesWithNoIndex = new Set([
+    ContentType.Error,
+    ContentType.FormIntermediateStepPage,
+    ContentType.ContactStepPage,
+]);
 
 const isNoIndex = (content: ContentProps) =>
-    content.isPagePreview ||
-    contentTypesWithNoIndex.has(content.type) ||
-    content.data?.noindex ||
-    content.type === 'no.nav.navno:contact-step-page';
+    content.isPagePreview || contentTypesWithNoIndex.has(content.type) || content.data?.noindex;
 
 const getCanonicalUrl = (content: ContentProps) => {
     return content.data?.canonicalUrl || `${appOrigin}${getPublicPathname(content)}`;

packages/nextjs/src/components/_common/areaCard/AreaCard.tsx

@@ -5,15 +5,25 @@ import { LenkeStandalone } from 'components/_common/lenke/lenkeStandalone/LenkeS
 
 import styles from './MoreLink.module.scss';
 
-export const MoreLink = ({ link }: { link?: LinkSelectable }) => {
-    if (!link) {
+type Props = {
+    link: LinkSelectable;
+    analyticsGroup?: string;
+};
+
+export const MoreLink = ( props: Props) => {
+    if (!props.link) {
         return null;
     }
 
-    const { text, url } = getSelectableLinkProps(link);
+    const { text, url } = getSelectableLinkProps(props.link);
 
     return (
-        <LenkeStandalone href={url} className={styles.moreLink} withChevron={false}>
+        <LenkeStandalone
+            href={url}
+            linkGroup={props.analyticsGroup}
+            className={styles.moreLink}
+            withChevron={false}
+        >
             <ArrowRightIcon aria-hidden={true} className={styles.arrow} />
             {text}
         </LenkeStandalone>

packages/nextjs/src/components/_common/headers/headerWithParent/HeaderWithParent.module.scss

@@ -1,22 +1,70 @@
 import React, { useEffect } from 'react';
+import { getCurrentConsent } from '@navikt/nav-dekoratoren-moduler';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 
 import style from './UxSignalsWidget.module.scss';
 
-type Props = {
+type UxSignalsWidgetProps = {
     embedCode: string;
 };
 
-export const UxSignalsWidget = ({ embedCode }: Props) => {
-    useEffect(() => {
+type Consent = {
+    consent: {
+        analytics: boolean;
+        surveys: boolean;
+    };
+    userActionTaken: boolean;
+};
+
+const uxSignalsScriptUrl = 'https://widget.uxsignals.com/embed.js';
+let scriptAddTimeout: ReturnType<typeof setTimeout>;
+
+export const UxSignalsWidget = ({ embedCode }: UxSignalsWidgetProps) => {
+    // If the cookie banner is visible, the user has not taken any action yet.
+    // Wait and see if the user takes action before adding the script if consent is given..
+    const checkConsentOrWait = (tries: number = 0) => {
+        const { consent, userActionTaken }: Consent = getCurrentConsent();
+        if (consent.surveys && consent.analytics) {
+            addUXSignalsScript();
+            return;
+        }
+        // Wait max 60 seconds for user respond to the cookie banner
+        // (userActionTaken) or give up.
+        if (!userActionTaken && tries < 60) {
+            scriptAddTimeout = setTimeout(() => {
+                checkConsentOrWait(tries + 1);
+            }, 1000);
+        }
+    };
+
+    const addUXSignalsScript = () => {
+        if (document.querySelector(`script[src="${uxSignalsScriptUrl}"]`)) {
+            return;
+        }
+
         const script = document.createElement('script');
-        script.src = 'https://widget.uxsignals.com/embed.js';
+        script.src = uxSignalsScriptUrl;
         script.async = true;
         document.body.appendChild(script);
-        return () => {
+    };
+
+    const removeUXSignalsScript = () => {
+        const script = document.querySelector(`script[src="${uxSignalsScriptUrl}"]`);
+        if (script) {
             document.body.removeChild(script);
+        }
+    };
+
+    useEffect(() => {
+        checkConsentOrWait();
+        return () => {
+            if (scriptAddTimeout) {
+                clearTimeout(scriptAddTimeout);
+            }
+            removeUXSignalsScript();
         };
-    });
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, []);
 
     return (
         <>

packages/nextjs/src/components/_common/illustration/Illustration.module.scss

@@ -20,6 +20,8 @@ export const LayoutContainer = ({
     layoutProps,
     layoutStyle,
     children,
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    pageProps,
     ...divElementProps
 }: Props) => {
     const { editorView } = usePageContentProps();

packages/nextjs/src/components/_common/lenkepanel-liste/LenkepanelListe.module.scss

@@ -43,6 +43,8 @@ export const FrontpageLoggedinSectionLayout = ({ layoutProps, pageProps }: Props
     }
 
     const { header, mypage } = config;
+    const title = yourServicesText('yourServices');
+    layoutProps.config.title = title; //for at kortene i region skal kunne plukke opp title til analytics
 
     return (
         <AuthDependantRender renderOn={'loggedIn'}>
@@ -53,11 +55,11 @@ export const FrontpageLoggedinSectionLayout = ({ layoutProps, pageProps }: Props
                 data-hj-suppress
             >
                 <HeaderWithName headerText={header} />
-                <Header level={'2'} size={'small'} className={style.services}>
-                    {yourServicesText('yourServices')}
+                <Header level="3" size="small" className={style.services}>
+                    {title}
                 </Header>
                 <Region pageProps={pageProps} regionProps={regions.cards} className={style.cards} />
-                <MoreLink link={mypage?.link} />
+                <MoreLink analyticsGroup={title} link={mypage?.link} />
             </LayoutContainer>
         </AuthDependantRender>
     );

packages/nextjs/src/components/_common/lenkepanel-liste/LenkepanelListe.tsx

@@ -1,31 +1,34 @@
-@use 'common' as common;
-
 .contactStepPage {
     padding-bottom: 1rem;
+    column-gap: 1.75rem;
+    margin: 1.25rem auto 2.5rem;
     display: grid;
-    row-gap: var(--a-spacing-5);
-    margin: 1.25rem auto var(--a-spacing-10);
+    grid-template-columns: 1fr 40rem 1fr;
     grid-template-areas:
-        'header'
-        'content'
-        'link';
+        'pictogram header .'
+        '. content .'
+        '. backLink .';
 
-    @media #{common.$mq-screen-tablet-and-desktop} {
-        grid-template-columns: 1fr 40rem 1fr;
+    @media only screen and (max-width: 1024px) {
+        grid-template-columns: none;
         grid-template-areas:
-            'pictogram header .'
+            '. pictogram .'
+            '. header .'
             '. content .'
-            '. link .';
-        column-gap: var(--a-spacing-10);
+            '. backLink .';
     }
     .pictogram {
         grid-area: pictogram;
-        display: none;
-
-        @media #{common.$mq-screen-tablet-and-desktop} {
-            display: block;
-            width: 7rem;
-            justify-self: end;
+        display: block;
+        justify-self: end;
+        width: 4.5rem;
+        height: auto;
+        position: relative;
+        align-self: flex-start;
+
+        @media only screen and (max-width: 1024px) {
+            width: 4rem;
+            justify-self: start;
         }
     }
     .header {
@@ -34,11 +37,6 @@
 
     .content {
         grid-area: content;
-        max-width: 40rem;
-
-        & > * {
-            border-radius: common.$border-radius-large;
-        }
 
         .linkPanels {
             display: flex;
@@ -48,19 +46,18 @@
             padding: 0;
 
             .linkPanel {
-                border-radius: common.$border-radius-large;
+                border-radius: 0.5rem;
                 border: 1px solid var(--a-border-subtle);
 
-                & :global {
-                    .navds-link-panel__title {
-                        color: var(--default-action-color);
-                        font-size: 1.25rem;
-                    }
+                & :global(.navds-link-panel__title) {
+                    color: var(--default-action-color);
+                    font-size: 1.25rem;
                 }
             }
         }
     }
-    .link {
-        grid-area: link;
+
+    .backLink {
+        grid-area: backLink;
     }
 }