Merge pull request #2233 from navikt/mellomsteg-steps-titles

Mellomsteg steps titles

Author: bdahle

packages/nextjs/src/components/pages/form-intermediate-step-page/FormIntermediateStepPage.tsx

@@ -37,7 +37,7 @@ export const FormIntermediateStepPage = (props: FormIntermediateStepPageProps) =
         <div className={style.formIntermediateStepPage}>
             <IllustrationStatic illustration={illustration} className={style.pictogram} />
             <HeaderWithParent
-                contentProps={{ data: { title } }}
+                contentProps={{ data: { title: currentStepData.overrideTitle ?? title } }}
                 textAboveTitle={textAboveTitle}
                 className={style.header}
                 formNumbers={formNumbers}

packages/nextjs/src/components/pages/form-intermediate-step-page/useFormIntermediateStepPage.tsx

@@ -51,17 +51,20 @@ const getStepData = (data: FormIntermediateStepPageProps['data'], stepPath: Step
     // No steps selected (meaning the user is on first step)
     if (stepPath.length === 0) {
         return {
+            overrideTitle: data.title,
             editorial: data.editorial,
             stepsHeadline: data.stepsHeadline,
             steps: data.steps,
         };
     }
 
     let tmp: any = data;
+    let lastStepLabel: string | undefined;
 
     stepPath.forEach((index) => {
         const foundStep = tmp.steps[index];
         if (foundStep) {
+            lastStepLabel = foundStep.label;
             tmp = foundStep.nextStep?.next;
         }
     });
@@ -72,6 +75,7 @@ const getStepData = (data: FormIntermediateStepPageProps['data'], stepPath: Step
     }
 
     return {
+        overrideTitle: tmp.overrideTitle || lastStepLabel,
         editorial: tmp.editorial,
         stepsHeadline: tmp.stepsHeadline,
         steps: tmp.steps,

packages/nextjs/src/types/content-props/form-intermediate-step.ts

@@ -20,6 +20,7 @@ export type SelectableStep = {
 };
 
 export type StepBase = {
+    overrideTitle?: string;
     editorial: ProcessedHtmlProps;
     stepsHeadline: string;
     steps: SelectableStep[];