Aksel-mal på oppsummeringsside i PILS (#2104)

* Utvide summarylist til å støtte List * Oppsummering i Aksel-drakt * Oppdatere pw-test * Aksel-mal på velkommenside * Tekstkorrigering * Korrigere test * Justere layout * Tekstoppdatering * Typo * Verneplikt * Cleanup * Flytte styling * yarn.lock * EditStep lenker * Justere tekst i oppsummering * Changelog og versjonering
navikt · Aug 20, 2024 · 692201c · 692201c
1 parent 3207a51
commit 692201c
Show file tree

Hide file tree

Showing 49 changed files with 1,108 additions and 647 deletions.
diff --git a/apps/endringsmelding-pleiepenger/CHANGELOG.md b/apps/endringsmelding-pleiepenger/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/endringsmelding-pleiepenger
 
+## 2.30.17
+
+### Patch Changes
+
+-   Updated dependencies
+    -   @navikt/sif-common-forms-ds@9.1.0
+
 ## 2.30.16
 
 ### Patch Changes

diff --git a/apps/endringsmelding-pleiepenger/package.json b/apps/endringsmelding-pleiepenger/package.json
@@ -5,7 +5,7 @@
     "license": "MIT",
     "name": "@navikt/endringsmelding-pleiepenger",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "2.30.16",
+    "version": "2.30.17",
     "private": true,
     "dependencies": {
         "@navikt/ds-css": "6.16.0",

diff --git a/apps/omsorgsdager-aleneomsorg-dialog/CHANGELOG.md b/apps/omsorgsdager-aleneomsorg-dialog/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/omsorgsdager-aleneomsorg-dialog
 
+## 2.19.19
+
+### Patch Changes
+
+-   Updated dependencies
+    -   @navikt/sif-common-forms-ds@9.1.0
+
 ## 2.19.18
 
 ### Patch Changes

diff --git a/apps/omsorgsdager-aleneomsorg-dialog/package.json b/apps/omsorgsdager-aleneomsorg-dialog/package.json
@@ -4,7 +4,7 @@
     "license": "MIT",
     "name": "@navikt/omsorgsdager-aleneomsorg-dialog",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "2.19.18",
+    "version": "2.19.19",
     "private": true,
     "type": "module",
     "scripts": {

diff --git a/apps/omsorgspengerutbetaling-arbeidstaker-soknad/CHANGELOG.md b/apps/omsorgspengerutbetaling-arbeidstaker-soknad/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/omsorgspengerutbetaling-arbeidstaker-soknad
 
+## 1.4.19
+
+### Patch Changes
+
+-   Updated dependencies
+    -   @navikt/sif-common-forms-ds@9.1.0
+
 ## 1.4.18
 
 ### Patch Changes

diff --git a/apps/omsorgspengerutbetaling-arbeidstaker-soknad/package.json b/apps/omsorgspengerutbetaling-arbeidstaker-soknad/package.json
@@ -4,7 +4,7 @@
     "license": "MIT",
     "name": "@navikt/omsorgspengerutbetaling-arbeidstaker-soknad",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "1.4.18",
+    "version": "1.4.19",
     "private": true,
     "dependencies": {
         "@navikt/ds-css": "6.16.0",

diff --git a/apps/omsorgspengerutbetaling-soknad/CHANGELOG.md b/apps/omsorgspengerutbetaling-soknad/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/omsorgspengerutbetaling-soknad
 
+## 1.13.13
+
+### Patch Changes
+
+-   Updated dependencies
+    -   @navikt/sif-common-forms-ds@9.1.0
+
 ## 1.13.12
 
 ### Patch Changes

diff --git a/apps/omsorgspengerutbetaling-soknad/package.json b/apps/omsorgspengerutbetaling-soknad/package.json
@@ -4,7 +4,7 @@
     "license": "MIT",
     "name": "@navikt/omsorgspengerutbetaling-soknad",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "1.13.12",
+    "version": "1.13.13",
     "private": true,
     "type": "module",
     "dependencies": {

diff --git a/apps/omsorgspengesoknad/CHANGELOG.md b/apps/omsorgspengesoknad/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/omsorgspengesoknad
 
+## 1.28.18
+
+### Patch Changes
+
+-   Updated dependencies
+    -   @navikt/sif-common-forms-ds@9.1.0
+
 ## 1.28.17
 
 ### Patch Changes

diff --git a/apps/omsorgspengesoknad/package.json b/apps/omsorgspengesoknad/package.json
@@ -4,7 +4,7 @@
     "license": "MIT",
     "name": "@navikt/omsorgspengesoknad",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "1.28.17",
+    "version": "1.28.18",
     "private": true,
     "type": "module",
     "dependencies": {

diff --git a/apps/pleiepenger-i-livets-sluttfase-soknad/CHANGELOG.md b/apps/pleiepenger-i-livets-sluttfase-soknad/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @navikt/pleiepenger-i-livets-sluttfase-soknad
 
+## 2.9.12
+
+### Patch Changes
+
+-   Bruke Aksel mal for oppsummeringssiden
+-   Updated dependencies
+    -   @navikt/sif-common-forms-ds@9.1.0
+
 ## 2.9.11
 
 ### Patch Changes

diff --git a/...pleiepenger-i-livets-sluttfase-soknad/e2e/playwright/tests/fyll-ut-søknad-med-fnr.spec.ts b/...pleiepenger-i-livets-sluttfase-soknad/e2e/playwright/tests/fyll-ut-søknad-med-fnr.spec.ts
@@ -15,7 +15,7 @@ test('Fyll ut søknad med fnr', async ({ page }) => {
     await page.goto(startUrl);
 
     /** Velkommen side */
-    await expect(page.getByRole('heading', { level: 1, name: 'Hei PRESENTABEL' })).toBeVisible();
+    await expect(page.getByRole('heading', { level: 2, name: 'Hei, PRESENTABEL' })).toBeVisible();
     await page.getByLabel('Jeg bekrefter at jeg har forstått mitt ansvar som søker').click();
     await page.getByRole('button', { name: 'Start søknad' }).click();
 

diff --git a/...-i-livets-sluttfase-soknad/e2e/playwright/utfylling-utils/pleietrengendeUtfyllingUtils.ts b/...-i-livets-sluttfase-soknad/e2e/playwright/utfylling-utils/pleietrengendeUtfyllingUtils.ts
@@ -30,10 +30,10 @@ export const fyllUtPleietrengendeUtenFnr = async (page: Page) => {
 export const kontrollerPleietrengendeUtenFnr = async (page: Page) => {
     /** Kontroller oppsummering */
     await expect(await page.getByText('Test Testesen').isVisible()).toBeTruthy();
-    await expect(await page.getByText('Fødselsdato: 04.04.1994').isVisible()).toBeTruthy();
+    await expect(await page.getByText('Fødselsdato04.04.1994').isVisible()).toBeTruthy();
     await expect(await page.locator('a').getByText('navlogopng.png').nth(0).isVisible()).toBeTruthy();
     await expect(
-        await page.getByText('Oppgitt grunn for at han/hun ikke har fødselsnummer eller D-nummer: Annet').isVisible(),
+        await page.getByText('Oppgitt grunn for at hen ikke har fødselsnummer eller D-nummerAnnet').isVisible(),
     ).toBeTruthy();
     await expect(await page.getByText('Er dere flere som skal dele på pleiepengene?Nei').isVisible()).toBeTruthy();
 };
diff --git a/apps/pleiepenger-i-livets-sluttfase-soknad/package.json b/apps/pleiepenger-i-livets-sluttfase-soknad/package.json
@@ -4,7 +4,7 @@
     "license": "MIT",
     "name": "@navikt/pleiepenger-i-livets-sluttfase-soknad",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "2.9.11",
+    "version": "2.9.12",
     "private": true,
     "type": "module",
     "dependencies": {
@@ -80,6 +80,14 @@
         "vite-plugin-checker": "0.7.2",
         "vitest": "2.0.5"
     },
+    "lint-staged": {
+        "apps/**/*.{ts,tsx}": [
+            "eslint --fix"
+        ],
+        "packages/**/*.{ts,tsx}": [
+            "eslint --fix"
+        ]
+    },
     "scripts": {
         "build": "vite build --base=/familie/sykdom-i-familien/soknad/pleiepenger-i-livets-sluttfase",
         "build-storybook": "storybook build",

diff --git a/...ger-i-livets-sluttfase-soknad/src/app/components/dager-med-tid-liste/DagerMedTidListe.tsx b/...ger-i-livets-sluttfase-soknad/src/app/components/dager-med-tid-liste/DagerMedTidListe.tsx
@@ -11,7 +11,7 @@ interface Props {
     dagerMedTid: DagMedTid[];
     viseUke?: boolean;
     visNormaltid?: boolean;
-    headingLevel?: number;
+    ukeHeadingLevel?: '2' | '3' | '4' | '5';
 }
 
 const sortDays = (d1: DagMedTid, d2: DagMedTid): number => (dayjs(d1.dato).isSameOrBefore(d2.dato, 'day') ? -1 : 1);
@@ -46,7 +46,7 @@ const renderDagerMedTid = (dager: DagMedTid[], visNormaltid?: boolean) => {
     );
 };
 
-export const DagerMedTidListe = ({ dagerMedTid, viseUke, visNormaltid, headingLevel = 5 }: Props) => {
+export const DagerMedTidListe = ({ dagerMedTid, viseUke, visNormaltid, ukeHeadingLevel = '5' }: Props) => {
     const weeksWithDays = groupBy(dagerMedTid, (dag) => `${dag.dato.getFullYear()}-${dayjs(dag.dato).isoWeek()}`);
     return (
         <div className={bem.block}>
@@ -58,7 +58,7 @@ export const DagerMedTidListe = ({ dagerMedTid, viseUke, visNormaltid, headingLe
                             <div key={key} className={bem.element('uke', viseUke ? undefined : 'utenUkenummer')}>
                                 {viseUke && (
                                     <Heading
-                                        level={`${headingLevel}` as any}
+                                        level={`${ukeHeadingLevel}` as any}
                                         size="xsmall"
                                         className={bem.element('uketittel')}>
                                         <AppText id="dagerMedTid.uke" values={{ uke: dayjs(days[0].dato).isoWeek() }} />

diff --git a/...eiepenger-i-livets-sluttfase-soknad/src/app/components/tid-enkeltdager/TidEnkeltdager.tsx b/...eiepenger-i-livets-sluttfase-soknad/src/app/components/tid-enkeltdager/TidEnkeltdager.tsx
@@ -17,14 +17,14 @@ interface Props {
     dager: ISODagMedTid[];
     renderAsAccordion?: boolean;
     visUke?: boolean;
-    headingLevel?: number;
+    headingLevel?: '2' | '3' | '4' | '5';
 }
 
 const TidEnkeltdager: React.FunctionComponent<Props> = ({
     dager,
     renderAsAccordion = false,
     visUke = false,
-    headingLevel = 5,
+    headingLevel = '5',
 }) => {
     const days: DagMedTid[] = [];
     dager.forEach((dag) => {
@@ -51,14 +51,14 @@ const TidEnkeltdager: React.FunctionComponent<Props> = ({
                     }
                     return (
                         <div key={key} style={{ paddingTop: index > 0 ? '2rem' : '.5rem' }}>
-                            <Heading level="5" size="xsmall" className="capitalize">
+                            <Heading level={headingLevel} size="xsmall" className="capitalize">
                                 {dayjs(dagerMedTid[0].dato).format('MMMM YYYY')}
                             </Heading>
                             <Block margin="l">
                                 <DagerMedTidListe
                                     dagerMedTid={dagerMedTid}
                                     viseUke={visUke}
-                                    headingLevel={headingLevel}
+                                    ukeHeadingLevel={headingLevel}
                                 />
                             </Block>
                         </div>
@@ -80,7 +80,11 @@ const TidEnkeltdager: React.FunctionComponent<Props> = ({
                             <div className="capitalize">{dayjs(dagerMedTid[0].dato).format('MMMM YYYY')}</div>
                         </Accordion.Header>
                         <Accordion.Content>
-                            <DagerMedTidListe dagerMedTid={dagerMedTid} viseUke={visUke} headingLevel={headingLevel} />
+                            <DagerMedTidListe
+                                dagerMedTid={dagerMedTid}
+                                viseUke={visUke}
+                                ukeHeadingLevel={headingLevel}
+                            />
                         </Accordion.Content>
                     </Accordion.Item>
                 );

diff --git a/...livets-sluttfase-soknad/src/app/pages/velkommen/BehandlingAvPersonopplysningerContent.tsx b/...livets-sluttfase-soknad/src/app/pages/velkommen/BehandlingAvPersonopplysningerContent.tsx
@@ -1,48 +1,48 @@
+import { Heading, Link, List, VStack } from '@navikt/ds-react';
 import React from 'react';
-import Block from '@navikt/sif-common-core-ds/src/atoms/block/Block';
-import InfoList from '@navikt/sif-common-core-ds/src/components/lists/info-list/InfoList';
-import { Heading, Link } from '@navikt/ds-react';
-import getLenker from '../../lenker';
 import { AppText } from '../../i18n';
+import getLenker from '../../lenker';
 
 const BehandlingAvPersonopplysningerContent: React.FunctionComponent = () => {
     return (
-        <Block margin="l" style={{ paddingTop: '.5rem' }}>
-            <Heading level="3" size="small">
-                <AppText id="personopplysninger.1" />
-            </Heading>
-            <p>
-                <AppText id="personopplysninger.2" />
-            </p>
-            <Block margin="l">
-                <Heading size="small" level="3">
+        <VStack gap="2" paddingBlock="2 0">
+            <div>
+                <Heading level="3" size="xsmall" spacing={true}>
+                    <AppText id="personopplysninger.1" />
+                </Heading>
+                <p>
+                    <AppText id="personopplysninger.2" />
+                </p>
+            </div>
+            <div>
+                <Heading level="3" size="xsmall" spacing={true}>
                     <AppText id="personopplysninger.3" />
                 </Heading>
                 <p>
                     <AppText id="personopplysninger.4" />
                 </p>
-                <InfoList>
-                    <li>
+                <List>
+                    <List.Item>
                         <AppText id="personopplysninger.4.1" />
-                    </li>
-                    <li>
+                    </List.Item>
+                    <List.Item>
                         <AppText id="personopplysninger.4.2" />
-                    </li>
-                    <li>
+                    </List.Item>
+                    <List.Item>
                         <AppText id="personopplysninger.4.3" />
-                    </li>
-                    <li>
+                    </List.Item>
+                    <List.Item>
                         <AppText id="personopplysninger.4.4" />
-                    </li>
-                    <li>
+                    </List.Item>
+                    <List.Item>
                         <AppText id="personopplysninger.4.5" />
-                    </li>
-                </InfoList>
-            </Block>
-            <p>
-                <AppText id="personopplysninger.5.1" />
-            </p>
-            <Block>
+                    </List.Item>
+                </List>
+                <p>
+                    <AppText id="personopplysninger.5.1" />
+                </p>
+            </div>
+            <div>
                 <AppText
                     id="personopplysninger.6"
                     values={{
@@ -53,8 +53,8 @@ const BehandlingAvPersonopplysningerContent: React.FunctionComponent = () => {
                         ),
                     }}
                 />
-            </Block>
-        </Block>
+            </div>
+        </VStack>
     );
 };
 

diff --git a/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/pages/velkommen/OmSøknaden.tsx b/apps/pleiepenger-i-livets-sluttfase-soknad/src/app/pages/velkommen/OmSøknaden.tsx
@@ -1,31 +1,36 @@
-import { BodyLong, Heading } from '@navikt/ds-react';
-import Block from '@navikt/sif-common-core-ds/src/atoms/block/Block';
-import ExpandableInfo from '@navikt/sif-common-core-ds/src/components/expandable-info/ExpandableInfo';
+import { Accordion, Box, Heading, List, VStack } from '@navikt/ds-react';
 import { AppText, useAppIntl } from '../../i18n';
 import BehandlingAvPersonopplysningerContent from './BehandlingAvPersonopplysningerContent';
 
 const OmSøknaden = () => {
     const { text } = useAppIntl();
     return (
-        <Block margin="xl" padBottom="l">
-            <Heading level="2" size="medium">
-                <AppText id="page.velkommen.omSøknaden.tittel" />
-            </Heading>
-            <BodyLong as="div">
-                <p>
-                    <AppText id="page.velkommen.omSøknaden.1" />
-                </p>
-                <p>
-                    <AppText id="page.velkommen.omSøknaden.2" />
-                </p>
-                <p>
-                    <AppText id="page.velkommen.omSøknaden.3" />
-                </p>
-                <ExpandableInfo title={text('page.velkommen.omSøknaden.4')}>
-                    <BehandlingAvPersonopplysningerContent />
-                </ExpandableInfo>
-            </BodyLong>
-        </Block>
+        <VStack gap="4">
+            <Box>
+                <Heading level="2" size="medium" spacing={true}>
+                    <AppText id="page.velkommen.omSøknaden.tittel" />
+                </Heading>
+                <List>
+                    <List.Item>
+                        <AppText id="page.velkommen.omSøknaden.1" />
+                    </List.Item>
+                    <List.Item>
+                        <AppText id="page.velkommen.omSøknaden.2" />
+                    </List.Item>
+                    <List.Item>
+                        <AppText id="page.velkommen.omSøknaden.3" />
+                    </List.Item>
+                </List>
+            </Box>
+            <Accordion>
+                <Accordion.Item>
+                    <Accordion.Header>{text('page.velkommen.omSøknaden.4')}</Accordion.Header>
+                    <Accordion.Content>
+                        <BehandlingAvPersonopplysningerContent />
+                    </Accordion.Content>
+                </Accordion.Item>
+            </Accordion>
+        </VStack>
     );
 };