Merge pull request #2214 from navikt/contact-step-page

Contact step page

Author: bdahle

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

@@ -30,6 +30,7 @@ import { FormIntermediateStepPage } from './pages/form-intermediate-step-page/Fo
 import { CalculatorPage } from './pages/calculator-page/CalculatorPage';
 import { AlertInContextPage } from './pages/alert-in-context-page/AlertInContextPage';
 import { OfficePage } from './pages/office-page/OfficePage';
+import { ContactStepPage } from './pages/contact-step-page/ContactStepPage';
 
 const contentToReactComponent: {
     [key in ContentType]?: React.FunctionComponent<ContentProps<key>>;
@@ -61,6 +62,7 @@ const contentToReactComponent: {
     [ContentType.Calculator]: CalculatorPage,
     [ContentType.UserTestsConfig]: UserTestsConfigPreviewPage,
     [ContentType.AlertInContext]: AlertInContextPage,
+    [ContentType.ContactStepPage]: ContactStepPage,
 
     [ContentType.AreaPage]: DynamicPage,
     [ContentType.FrontPage]: DynamicPage,

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

@@ -0,0 +1,18 @@
+.headerContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .textAboveTitle {
+        color: var(--a-text-subtle);
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 28px;
+        letter-spacing: -0.1%;
+    }
+
+    .header {
+        font-size: 40px;
+        line-height: 52px;
+    }
+}

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

@@ -0,0 +1,28 @@
+import { BodyShort, Heading } from '@navikt/ds-react';
+import { ProductDataMixin } from 'types/component-props/_mixins';
+import { ContentProps } from 'types/content-props/_content-common';
+import { classNames } from 'utils/classnames';
+import style from './HeaderWithParent.module.scss';
+
+type Props = {
+    contentProps: Pick<ContentProps, 'data'> & {
+        data: Pick<ProductDataMixin, 'title' | 'illustration'>;
+    };
+    textAboveTitle?: string;
+    className?: string;
+};
+
+export const HeaderWithParent = ({ contentProps, textAboveTitle, className }: Props) => {
+    const { data } = contentProps;
+
+    return (
+        <div className={classNames(style.headerContainer, className)}>
+            <BodyShort textColor="subtle" className={style.textAboveTitle}>
+                {textAboveTitle}
+            </BodyShort>
+            <Heading level="1" size="large" spacing className={style.header}>
+                {data.title}
+            </Heading>
+        </div>
+    );
+};

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-common-headers-themedpageheader--with-time-stamp-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-pages-contact-step-page-contactsteppage--default-desktop-linux-desktop-linux.png

@@ -23,7 +23,11 @@ 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;

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-pages-contact-step-page-contactsteppage--editor-view-desktop-linux-desktop-linux.png

@@ -0,0 +1,63 @@
+.contactStepPage {
+    padding-bottom: 1rem;
+    column-gap: 1.75rem;
+    margin: 1.25rem auto 2.5rem;
+    display: grid;
+    grid-template-columns: 1fr 40rem 1fr;
+    grid-template-areas:
+        'pictogram header .'
+        '. content .'
+        '. backLink .';
+
+    @media only screen and (max-width: 1024px) {
+        grid-template-columns: none;
+        grid-template-areas:
+            '. pictogram .'
+            '. header .'
+            '. content .'
+            '. backLink .';
+    }
+    .pictogram {
+        grid-area: pictogram;
+        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 {
+        grid-area: header;
+    }
+
+    .content {
+        grid-area: content;
+
+        .linkPanels {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            list-style-type: none;
+            padding: 0;
+
+            .linkPanel {
+                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;
+                }
+            }
+        }
+    }
+
+    .backLink {
+        grid-area: backLink;
+    }
+}

packages/nextjs/playwright/screenshot.spec.ts-snapshots/components-pages-contact-step-page-contactsteppage--english-desktop-linux-desktop-linux.png

@@ -0,0 +1,149 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
+import { mockStore } from 'store/store';
+import { ContactStepPage } from './ContactStepPage';
+
+const withStore: Decorator = (Story) => (
+    <Provider store={mockStore}>
+        <Story />
+    </Provider>
+);
+
+const meta = {
+    component: ContactStepPage,
+    decorators: [withStore],
+    //Ikke en komplett side. Ikke sikkert vi skal sette opp hele sider i storybook.
+    //Bør kanskje finne en bedre måte å gjøre dette på om vi skal prøve å ha hele sider i storybook.
+    //Sjekk ut: https://storybook.js.org/docs/writing-stories/build-pages-with-storybook
+    args: {
+        _id: '4b4f44c8-d82c-4046-80e8-2b49ff9feca3',
+        _name: 'skrivtiloss',
+        _path: '/www.nav.no/tania/skrivtiloss',
+        creator: 'user:system:su',
+        modifier: 'user:system:su',
+        createdTime: '2025-03-06T09:12:39.492046Z',
+        modifiedTime: '2025-03-13T11:26:18.994311Z',
+        owner: 'user:system:su',
+        // @ts-ignore
+        type: 'no.nav.navno:contact-step-page',
+        displayName: 'Skriv til oss',
+        hasChildren: true,
+        language: 'no',
+        valid: true,
+        childOrder: 'modifiedtime DESC',
+        data: {
+            audience: {
+                person: {},
+                // @ts-ignore
+                _selected: 'person',
+            },
+            steps: {
+                nextStep: {
+                    _selected: 'internal',
+                    internal: {
+                        internalContent: '5f679435-e468-4196-aa4a-5c86be9438a0',
+                    },
+                },
+                label: 'Test',
+            },
+            customPath: '/test-kontaktside',
+            title: 'Skriv til oss',
+            textAboveTitle: 'Kontakt oss',
+            ingress: 'yrdyr',
+            html: '<p>Hva vil du gjøre?</p>\n',
+            target: '4b4f44c8-d82c-4046-80e8-2b49ff9feca3',
+            text: 'Skriv til oss om noe annet',
+            link: {
+                internal: {
+                    // @ts-ignore
+                    target: '419e1783-25af-4513-aebb-2cce0b6bd7da',
+                    text: 'Kontakt oss på en annen måte',
+                },
+                _selected: 'internal',
+            },
+            links: [
+                {
+                    label: 'Melde fra om endringer i saken din',
+                    explanation:
+                        'Når du får støtte fra Nav, må du melde fra om endringer som kan ha betydning for saken din. Det kan for eksempel være endringer i inntekt, bosted, jobb- eller familiesituasjon, eller ferie og opphold i utlandet.',
+                    link: {
+                        internal: {
+                            internalContent: {
+                                // @ts-ignore
+                                createdTime: '2025-03-13T11:18:33.082857Z',
+                                displayName: '"Melde fra om endringer i saken din"',
+                                language: 'no',
+                                modifiedTime: '2025-03-13T11:23:51.173Z',
+                                publish: {
+                                    first: '2025-03-13T11:24:01.903Z',
+                                    from: '2025-03-13T11:24:01.903Z',
+                                },
+                                type: 'no.nav.navno:contact-step-page',
+                                _id: 'ad33a6f6-403b-4ba4-bd7e-04cc25a473f2',
+                                _path: '/privatperson/meldeifraomendringer',
+                            },
+                        },
+                        _selected: 'internal',
+                    },
+                },
+                {
+                    label: 'Få svar på spørsmål',
+                    explanation:
+                        'Du kan blant annet stille oss spørsmål om saken din, hvilke rettigheter du har, hvilke regler som gjelder og hvordan du går frem for å søke.',
+                    link: {
+                        internal: {
+                            internalContent: {
+                                // @ts-ignore
+                                createdTime: '2025-03-13T11:18:33.082857Z',
+                                displayName: 'Skriv til oss',
+                                language: 'no',
+                                modifiedTime: '2025-03-13T11:23:51.173Z',
+                                publish: {
+                                    first: '2025-03-13T11:24:01.903Z',
+                                    from: '2025-03-13T11:24:01.903Z',
+                                },
+                                type: 'no.nav.navno:contact-step-page',
+                                _id: '"4b4f44c8-d82c-4046-80e8-2b49ff9feca3"',
+                                _path: '/privatperson/velgpengestotteellertjeneste',
+                            },
+                        },
+                        _selected: 'internal',
+                    },
+                },
+            ],
+        },
+        x: {
+            'no-nav-navno': {
+                redirectToLayer: {},
+                virtualParent: {},
+                previewOnly: {},
+                searchOrder: {},
+            },
+        },
+        // @ts-ignore
+        page: {},
+        attachments: {},
+        publish: {
+            from: '2025-03-11T09:40:07.350Z',
+            first: '2025-03-11T09:40:07.350Z',
+        },
+    },
+} satisfies Meta<typeof ContactStepPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const English: Story = {
+    args: {
+        language: 'en',
+    },
+};
+
+export const EditorView: Story = {
+    args: {
+        editorView: 'edit',
+    },
+};