la til skjemanummer inni lenkepanelene i mellomsteg for skjema

Author: taniaholst

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

@@ -4,9 +4,12 @@ import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 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';
+import FormNumberTag from 'components/_common/formNumberTag/FormNumberTag';
 
 type Props = FormIntermediateStep_StepLinkData &
-    Omit<React.ComponentProps<typeof LenkeBase>, 'children' | 'href'>;
+    Omit<React.ComponentProps<typeof LenkeBase>, 'children' | 'href'> & {
+        formNumberStepData?: string;
+    };
 
 export const FormIntermediateStepLink = ({
     label,
@@ -16,6 +19,7 @@ export const FormIntermediateStepLink = ({
     isStepNavigation,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     nextStep,
+    formNumberStepData,
     ...rest
 }: Props) => {
     if (!href) {
@@ -25,6 +29,7 @@ export const FormIntermediateStepLink = ({
     return (
         <LinkPanel {...rest} as={LenkeBase} href={href} shallow={isStepNavigation}>
             <LinkPanel.Title>{label}</LinkPanel.Title>
+            {formNumberStepData && <FormNumberTag formNumber={formNumberStepData} />}
             <LinkPanel.Description>{explanation}</LinkPanel.Description>
             {languageDisclaimer && <LanguageDisclaimer>{languageDisclaimer}</LanguageDisclaimer>}
         </LinkPanel>

packages/nextjs/src/components/_common/formNumberTag/FormNumberTag.module.scss

@@ -0,0 +1,7 @@
+.formNumberTag {
+    background-color: var(--a-surface-neutral-subtle);
+    border-radius: 2px;
+    padding: 3px 6px;
+    color: var(--a-gray-700);
+    width: fit-content;
+}

packages/nextjs/src/components/_common/formNumberTag/FormNumberTag.tsx

@@ -0,0 +1,11 @@
+import style from './FormNumberTag.module.scss';
+
+interface Props {
+    formNumber: string;
+}
+
+export const FormNumberTag = ({ formNumber }: Props) => {
+    return <div className={style.formNumberTag}>{formNumber}</div>;
+};
+
+export default FormNumberTag;

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

@@ -16,19 +16,13 @@
         line-height: 52px;
     }
 
-    .skjemanummerListe {
+    .formNumberListe {
         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

@@ -2,6 +2,7 @@ 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 FormNumberTag from 'components/_common/formNumberTag/FormNumberTag';
 import style from './HeaderWithParent.module.scss';
 
 type Props = {
@@ -19,7 +20,6 @@ export const HeaderWithParent = ({
     className,
     formNumbers,
 }: Props) => {
-
     const { data } = contentProps;
     return (
         <div className={classNames(style.headerContainer, className)}>
@@ -30,11 +30,9 @@ export const HeaderWithParent = ({
                 {data.title}
             </Heading>
             {formNumbers && (
-                <ul className={style.skjemanummerListe}>
+                <ul className={style.formNumberListe}>
                     {formNumbers.map((nummer, index) => (
-                        <li key={index} className={style.skjemanummer}>
-                            {nummer}
-                        </li>
+                        <FormNumberTag key={index} formNumber={nummer} />
                     ))}
                 </ul>
             )}

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

@@ -1,7 +1,3 @@
-@use 'common' as common;
-
-$padding: 2rem;
-
 .formIntermediateStepPage {
     padding-bottom: 1rem;
     column-gap: 1.75rem;
@@ -43,44 +39,22 @@ $padding: 2rem;
     .content {
         grid-area: content;
         margin-top: 2rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-start;
-        align-self: center;
-        width: 100%;
-        max-width: common.$contentMaxWidth;
 
         & > * {
             width: 100%;
         }
 
-        .stepOptionsWrapper {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            max-width: common.$sectionMaxWidth;
-
-            .stepList {
-                list-style-type: none;
-                margin: 0;
-                padding: 0;
+        .stepList {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
 
-                .stepItem {
-                    margin-bottom: var(--a-spacing-7);
+            .stepItem {
+                margin-bottom: var(--a-spacing-7);
 
-                    .stepAction {
-                        &:global(.navds-link-panel) {
-                            border-color: var(--default-action-color);
-                        }
-                        & :global {
-                            .navds-link-panel__title,
-                            .navds-link-panel__chevron {
-                                color: var(--default-action-color);
-                            }
-                        }
-                        @media #{common.$mq-screen-mobile} {
-                            padding: 0.75rem;
-                        }
+                .stepAction {
+                    &:global(.navds-link-panel) {
+                        border-color: var(--default-action-color);
                     }
                 }
             }

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

@@ -43,45 +43,44 @@ export const FormIntermediateStepPage = (props: FormIntermediateStepPageProps) =
                 formNumbers={formNumbers}
             />
             <div className={style.content}>
-                <div className={style.stepOptionsWrapper}>
-                    <ParsedHtml htmlProps={currentStepData.editorial} />
-                    {previousStepTitle && <div>Forrige steg: {previousStepTitle}</div>}
-                    {currentStepData.stepsHeadline && (
-                        <Heading level={'2'} size={'medium'} spacing>
-                            {currentStepData.stepsHeadline}
-                        </Heading>
-                    )}
-                    <ul className={style.stepList}>
-                        {currentStepData.steps.map((step) => (
-                            <li key={step.label} className={style.stepItem}>
-                                <FormIntermediateStepLink
-                                    {...step}
-                                    className={style.stepAction}
-                                    analyticsComponent={'mellomsteg'}
-                                    analyticsLinkGroup={currentStepData.stepsHeadline}
-                                    analyticsLabel={step.label}
-                                />
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-                {backUrl && (
-                    <div className={style.buttonGroup}>
-                        <Button
-                            href={backUrl}
-                            shallow={true}
-                            as={LenkeBase}
-                            variant={'tertiary'}
-                            className={style.backButton}
-                            analyticsComponent={'mellomsteg'}
-                            analyticsLinkGroup={currentStepData.stepsHeadline}
-                            analyticsLabel={'Tilbake'}
-                        >
-                            {getTranslations('back')}
-                        </Button>
-                    </div>
+                <ParsedHtml htmlProps={currentStepData.editorial} />
+                {previousStepTitle && <div>Forrige steg: {previousStepTitle}</div>}
+                {currentStepData.stepsHeadline && (
+                    <Heading level={'2'} size={'medium'} spacing>
+                        {currentStepData.stepsHeadline}
+                    </Heading>
                 )}
+                <ul className={style.stepList}>
+                    {currentStepData.steps.map((step) => (
+                        <li key={step.label} className={style.stepItem}>
+                            <FormIntermediateStepLink
+                                {...step}
+                                className={style.stepAction}
+                                analyticsComponent={'mellomsteg'}
+                                analyticsLinkGroup={currentStepData.stepsHeadline}
+                                analyticsLabel={step.label}
+                                formNumberStepData={step.formNumberStepData}
+                            />
+                        </li>
+                    ))}
+                </ul>
             </div>
+            {backUrl && (
+                <div className={style.buttonGroup}>
+                    <Button
+                        href={backUrl}
+                        shallow={true}
+                        as={LenkeBase}
+                        variant={'tertiary'}
+                        className={style.backButton}
+                        analyticsComponent={'mellomsteg'}
+                        analyticsLinkGroup={currentStepData.stepsHeadline}
+                        analyticsLabel={'Tilbake'}
+                    >
+                        {getTranslations('back')}
+                    </Button>
+                </div>
+            )}
         </div>
     );
 };

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

@@ -12,6 +12,7 @@ export type StepOptions = {
 };
 
 export type SelectableStep = {
+    formNumberStepData: string | undefined;
     label: string;
     explanation: string;
     languageDisclaimer?: string;