Justert design for mellomsteg

.nais/vars/vars-dev1-failover.yml

@@ -9,7 +9,7 @@ ingresses:
   - https://www-failover.intern.dev.nav.no
 resources:
   requests:
-    cpu: 100m
+    cpu: 50m
     memory: 250Mi
   limits:
     memory: 250Mi

.nais/vars/vars-dev1.yml

@@ -11,10 +11,10 @@ ingresses:
   - https://www.intern.dev.nav.no
 resources:
   requests:
-    cpu: 500m
-    memory: 1000Mi
+    cpu: 100m
+    memory: 384Mi
   limits:
-    memory: 2000Mi
+    memory: 1024Mi
 valkey:
   plan: hobbyist
   project: nav-dev

.nais/vars/vars-dev2-failover.yml

@@ -9,7 +9,7 @@ ingresses:
   - https://www-2-failover.intern.dev.nav.no
 resources:
   requests:
-    cpu: 100m
+    cpu: 50m
     memory: 250Mi
   limits:
     memory: 250Mi

.nais/vars/vars-dev2.yml

@@ -12,10 +12,10 @@ ingresses:
   - https://www-2.intern.dev.nav.no
 resources:
   requests:
-    cpu: 250m
-    memory: 500Mi
+    cpu: 100m
+    memory: 384Mi
   limits:
-    memory: 1000Mi
+    memory: 1024Mi
 valkey:
   plan: hobbyist
   project: nav-dev

.nais/vars/vars-prod-failover.yml

@@ -9,7 +9,7 @@ ingresses:
   - https://www-failover.nav.no
 resources:
   requests:
-    cpu: 500m
-    memory: 750Mi
+    cpu: 250m
+    memory: 512Mi
   limits:
-    memory: 750Mi
+    memory: 1024Mi

.nais/vars/vars-prod.yml

@@ -9,7 +9,7 @@ ingresses:
   - https://www.nav.no
 resources:
   requests:
-    cpu: 750m
+    cpu: 600m
     memory: 2048Mi
   limits:
     memory: 4096Mi

packages/nextjs/src/components/_common/formIntermediateStepLink/FormIntermediateStepLink.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FormIntermediateStepLink } from './FormIntermediateStepLink';
+
+const meta = {
+    component: FormIntermediateStepLink,
+} satisfies Meta<typeof FormIntermediateStepLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Steg 1',
+        explanation: 'Dette er et eksempel på hva som kan stå her',
+        href: '/example-path',
+        isStepNavigation: true,
+        analyticsComponent: 'mellomsteg',
+        analyticsLinkGroup: 'Example Group',
+        analyticsLabel: 'Example Step',
+        nextStep: {
+            _selected: 'next',
+            next: {
+                editorial: { html: '' },
+                stepsHeadline: '',
+                steps: [],
+            },
+        },
+    },
+};
+
+export const LanguageDisclaimer: Story = {
+    args: {
+        label: 'Steg med språk',
+        explanation: 'Dette er et eksempel på hva som kan stå her',
+        languageDisclaimer: 'Kun på bokmål',
+        href: '/example-path',
+        isStepNavigation: true,
+        analyticsComponent: 'mellomsteg',
+        analyticsLinkGroup: 'Example Group',
+        analyticsLabel: 'Example Step',
+        nextStep: {
+            _selected: 'next',
+            next: {
+                editorial: { html: '' },
+                stepsHeadline: '',
+                steps: [],
+            },
+        },
+    },
+};

packages/nextjs/src/components/pages/form-intermediate-step-page/FormIntermediateStepLink.tsx → packages/nextjs/src/components/_common/formIntermediateStepLink/FormIntermediateStepLink.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { LinkPanel } from '@navikt/ds-react';
-import { InfoBox } from 'components/_common/infoBox/InfoBox';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
-import { FormIntermediateStep_StepLinkData } from 'components/pages/form-intermediate-step-page/useFormIntermediateStepPageState';
+import { FormIntermediateStep_StepLinkData } from 'components/pages/form-intermediate-step-page/useFormIntermediateStepPage';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
+import { LanguageDisclaimer } from 'components/_common/languageDisclaimer/LanguageDisclaimer';
 
 type Props = FormIntermediateStep_StepLinkData &
     Omit<React.ComponentProps<typeof LenkeBase>, 'children' | 'href'>;
@@ -14,19 +14,19 @@ export const FormIntermediateStepLink = ({
     languageDisclaimer,
     href,
     isStepNavigation,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    nextStep,
     ...rest
 }: Props) => {
     if (!href) {
         return <EditorHelp text={'Lenken mangler URL!'} />;
     }
 
     return (
-        <>
-            {languageDisclaimer && <InfoBox>{languageDisclaimer}</InfoBox>}
-            <LinkPanel {...rest} as={LenkeBase} href={href} shallow={isStepNavigation}>
-                <LinkPanel.Title>{label}</LinkPanel.Title>
-                <LinkPanel.Description>{explanation}</LinkPanel.Description>
-            </LinkPanel>
-        </>
+        <LinkPanel {...rest} as={LenkeBase} href={href} shallow={isStepNavigation}>
+            <LinkPanel.Title>{label}</LinkPanel.Title>
+            <LinkPanel.Description>{explanation}</LinkPanel.Description>
+            {languageDisclaimer && <LanguageDisclaimer>{languageDisclaimer}</LanguageDisclaimer>}
+        </LinkPanel>
     );
 };

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

@@ -15,4 +15,20 @@
         font-size: 40px;
         line-height: 52px;
     }
+
+    .skjemanummerListe {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        align-items: center;
+        gap: 5px;
+        margin: 0;
+        flex-wrap: wrap;
+
+        .skjemanummer {
+            background-color: var(--a-surface-neutral-subtle);
+            border-radius: 2px;
+            padding: 3px 6px;
+        }
+    }
 }

packages/nextjs/src/components/_common/headers/headerWithParent/HeaderWithParent.tsx

@@ -6,15 +6,21 @@ import style from './HeaderWithParent.module.scss';
 
 type Props = {
     contentProps: Pick<ContentProps, 'data'> & {
-        data: Pick<ProductDataMixin, 'title' | 'illustration'>;
+        data: Pick<ProductDataMixin, 'title'>;
     };
     textAboveTitle?: string;
     className?: string;
+    formNumbers?: string[];
 };
 
-export const HeaderWithParent = ({ contentProps, textAboveTitle, className }: Props) => {
-    const { data } = contentProps;
+export const HeaderWithParent = ({
+    contentProps,
+    textAboveTitle,
+    className,
+    formNumbers,
+}: Props) => {
 
+    const { data } = contentProps;
     return (
         <div className={classNames(style.headerContainer, className)}>
             <BodyShort textColor="subtle" className={style.textAboveTitle}>
@@ -23,6 +29,15 @@ export const HeaderWithParent = ({ contentProps, textAboveTitle, className }: Pr
             <Heading level="1" size="large" spacing className={style.header}>
                 {data.title}
             </Heading>
+            {formNumbers && (
+                <ul className={style.skjemanummerListe}>
+                    {formNumbers.map((nummer, index) => (
+                        <li key={index} className={style.skjemanummer}>
+                            {nummer}
+                        </li>
+                    ))}
+                </ul>
+            )}
         </div>
     );
 };

packages/nextjs/src/components/_common/languageDisclaimer/LanguageDisclaimer.module.scss

@@ -0,0 +1,10 @@
+.languageDisclaimer {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+
+    svg {
+        color: var(--a-icon-subtle);
+    }
+}

packages/nextjs/src/components/_common/languageDisclaimer/LanguageDisclaimer.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LanguageDisclaimer } from './LanguageDisclaimer';
+
+const meta = {
+    component: LanguageDisclaimer,
+} satisfies Meta<typeof LanguageDisclaimer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        children: 'Kun på bokmål',
+    },
+};

packages/nextjs/src/components/_common/languageDisclaimer/LanguageDisclaimer.tsx

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { InformationSquareIcon } from '@navikt/aksel-icons';
+import style from './LanguageDisclaimer.module.scss';
+
+export const LanguageDisclaimer = (props: PropsWithChildren) => {
+    return (
+        <div className={style.languageDisclaimer}>
+            <InformationSquareIcon fontSize="1.5rem" title="Informasjon" />
+            {props.children}
+        </div>
+    );
+};

packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss

@@ -37,6 +37,7 @@
 
     .content {
         grid-area: content;
+        margin-top: 2rem;
 
         .linkPanels {
             display: flex;

packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx

@@ -20,6 +20,7 @@ export type ContactStepPageProps = ContentCommonProps & {
         linkPanelsSubHeading: string;
         linkPanels: (InternalLinkMixin & { ingress?: string })[];
         backLink: InternalLinkMixin;
+        formNumbers?: string[];
     };
 };
 
@@ -33,15 +34,17 @@ export const ContactStepPage = ({ data }: ContactStepPageProps) => {
         linkPanelsSubHeading,
         linkPanels,
         backLink,
+        formNumbers,
     } = data;
 
     return (
         <div className={style.contactStepPage}>
             <IllustrationStatic illustration={illustration} className={style.pictogram} />
             <HeaderWithParent
-                contentProps={{ data: { title, illustration } }}
+                contentProps={{ data: { title } }}
                 textAboveTitle={textAboveTitle}
                 className={style.header}
+                formNumbers={formNumbers}
             />
             <div className={style.content}>
                 <ParsedHtml htmlProps={html} />