Bytter fra Stepper til FormProgress for skjema-steg (#1288)

* Bytter ut Stepper med FormProgress * Lager container rundt FormProgress for å stoppe den fra å ta opp hele vidden på større skjermstørrelser
navikt · Jul 19, 2024 · 4b67133 · 4b67133
1 parent 6bd78a0
commit 4b67133
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 59 deletions.
diff --git a/src/frontend/components/Felleskomponenter/Steg/Steg.tsx b/src/frontend/components/Felleskomponenter/Steg/Steg.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode, useEffect } from 'react';
 
 import { useNavigate } from 'react-router-dom';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
-import { Box, GuidePanel, Heading, Stepper } from '@navikt/ds-react';
+import { Box, FormProgress, GuidePanel, Heading } from '@navikt/ds-react';
 import { ISkjema } from '@navikt/familie-skjema';
 import { setAvailableLanguages } from '@navikt/nav-dekoratoren-moduler';
 
@@ -45,6 +45,16 @@ interface ISteg {
     children?: ReactNode;
 }
 
+const FormProgressContainer = styled.div`
+    max-width: var(--innhold-bredde);
+    margin: 0 auto;
+
+    @media all and ${device.tablet} {
+        max-width: 100%;
+        margin: 0 var(--a-spacing-8);
+    }
+`;
+
 const ChildrenContainer = styled.div`
     margin-bottom: 2rem;
 `;
@@ -63,34 +73,6 @@ const Form = styled.form`
     width: 100%;
 `;
 
-const kompaktStepper = () => css`
-    * {
-        font-size: 0;
-        --navds-stepper-circle-size: 0.75rem;
-        --navds-stepper-border-width: 1px;
-        > li {
-            gap: 0;
-        }
-    }
-`;
-
-const StepperContainer = styled.div<{ $antallSteg: number }>`
-    margin: 0 auto;
-    display: flex;
-    justify-content: center;
-
-    @media all and ${device.mobile} {
-        ${kompaktStepper};
-    }
-    ${props =>
-        props.$antallSteg > 12 &&
-        css`
-            @media all and ${device.tablet} {
-                ${kompaktStepper};
-            }
-        `}
-`;
-
 const Steg: React.FC<ISteg> = ({
     tittel,
     guide = undefined,
@@ -109,12 +91,12 @@ const Steg: React.FC<ISteg> = ({
         søknad,
     } = useApp();
     const {
+        formProgressSteps,
         hentNesteSteg,
         hentForrigeSteg,
         hentNåværendeSteg,
         hentNåværendeStegIndex,
         erPåKvitteringsside,
-        stepperObjekter,
     } = useSteg();
     const { komFra, settKomFra } = useAppNavigation();
     const { toggles } = useFeatureToggles();
@@ -180,29 +162,34 @@ const Steg: React.FC<ISteg> = ({
         navigate(forrigeRoute.path);
     };
 
+    const håndterGåTilSteg = (stegIndex: number) => {
+        const steg = formProgressSteps[stegIndex];
+        navigate(steg.path);
+    };
+
     return (
         <>
             <ScrollHandler />
             <header>
                 <Banner />
                 {nyesteNåværendeRoute !== RouteEnum.Kvittering && (
-                    <StepperContainer $antallSteg={stepperObjekter.length}>
-                        <Stepper
-                            aria-label={'Søknadssteg'}
+                    <FormProgressContainer>
+                        <FormProgress
+                            totalSteps={formProgressSteps.length}
                             activeStep={hentNåværendeStegIndex()}
-                            orientation={'horizontal'}
-                            interactive={false}
+                            onStepChange={stegIndex => håndterGåTilSteg(stegIndex - 1)}
                         >
-                            {stepperObjekter.map((value, index) => (
-                                <Stepper.Step
-                                    children={''}
-                                    title={value.label}
-                                    key={value.key}
+                            {formProgressSteps.map((value, index) => (
+                                <FormProgress.Step
+                                    key={index}
                                     completed={index + 1 < hentNåværendeStegIndex()}
-                                />
+                                    interactive={index + 1 < hentNåværendeStegIndex()}
+                                >
+                                    {value.label}
+                                </FormProgress.Step>
                             ))}
-                        </Stepper>
-                    </StepperContainer>
+                        </FormProgress>
+                    </FormProgressContainer>
                 )}
             </header>
             <InnholdContainer>

diff --git a/src/frontend/context/Steg.test.tsx b/src/frontend/context/Steg.test.tsx
@@ -30,7 +30,7 @@ describe('Steg', () => {
         expect(result.current.steg.length).toEqual(9);
     });
 
-    test(`stepperObjekter skal returnere en liste uten forside`, () => {
+    test(`formProgressSteps skal returnere en liste uten forside og kvittering`, () => {
         spyOnUseApp({
             barnInkludertISøknaden: [],
         });
@@ -42,7 +42,7 @@ describe('Steg', () => {
             </RoutesProvider>
         );
         const { result } = renderHook(() => useSteg(), { wrapper });
-        expect(result.current.stepperObjekter.length).toEqual(8);
+        expect(result.current.formProgressSteps.length).toEqual(7);
     });
 
     test(`Kan hente neste steg fra forsiden`, () => {

diff --git a/src/frontend/context/StegContext.tsx b/src/frontend/context/StegContext.tsx
@@ -10,11 +10,6 @@ import { useApp } from './AppContext';
 import { useEøs } from './EøsContext';
 import { useRoutes } from './RoutesContext';
 
-interface StepperStegProps {
-    label: string;
-    index: number;
-    key: number;
-}
 const [StegProvider, useSteg] = createUseContext(() => {
     const { søknad } = useApp();
     const { barnInkludertISøknaden } = søknad;
@@ -72,13 +67,9 @@ const [StegProvider, useSteg] = createUseContext(() => {
         })
         .flat();
 
-    const stepperObjekter: StepperStegProps[] = steg
-        .filter(steg => steg.route !== RouteEnum.Forside)
-        .map((steg, index) => ({
-            label: steg.label,
-            index: index,
-            key: index,
-        }));
+    const formProgressSteps: ISteg[] = steg.filter(
+        steg => steg.route !== RouteEnum.Forside && steg.route !== RouteEnum.Kvittering
+    );
 
     const hentSteg = (pathname: string): ISteg => {
         const index = steg.findIndex(steg => matchPath(steg.path, decodeURIComponent(pathname)));
@@ -131,7 +122,7 @@ const [StegProvider, useSteg] = createUseContext(() => {
 
     return {
         steg,
-        stepperObjekter,
+        formProgressSteps,
         hentStegNummer,
         hentStegObjektForBarn,
         hentNesteSteg,