Velkommensider - fellesbranch for 4 ulike søknadsdialoger (#2086)

* Bruke SoknadVelkommenPage * Changeset * Bruke SoknadVelkommenPage * Changeset * Bruke Aksel mal for Velkommenside * Changeset * Bruke Aksel mal for Velkommenside - omsdager-ikke-tilsyn * Changeset * Sette på wrap=false for SoknadHeader * Sette wrap=false i SoknadHeader * Changeset * Oppdatere versjonsnumre
navikt · Aug 12, 2024 · b11d85f · b11d85f
1 parent b49d0a8
commit b11d85f
Show file tree

Hide file tree

Showing 41 changed files with 433 additions and 366 deletions.
diff --git a/apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/CHANGELOG.md b/apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @navikt/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn
 
+## 1.25.12
+
+### Patch Changes
+
+-   d2355d6: Bruke Aksel mal for Velkommenside
+-   Updated dependencies [7f61cd6]
+    -   @navikt/sif-common-soknad-ds@12.0.5
+
 ## 1.25.11
 
 ### Patch Changes

diff --git a/apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/package.json b/apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/package.json
@@ -3,7 +3,7 @@
     "description": "Søknad om ekstra omsorgsdager når den andre forelderen ikke kan ha tilsyn med barn",
     "license": "MIT",
     "name": "@navikt/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn",
-    "version": "1.25.11",
+    "version": "1.25.12",
     "repository": "https://github.com/navikt/sif-brukerdialog",
     "private": true,
     "type": "module",

diff --git a/...re-forelder-ikke-tilsyn/src/app/pages/velkommen/BehandlingAvPersonopplysningerContent.tsx b/...re-forelder-ikke-tilsyn/src/app/pages/velkommen/BehandlingAvPersonopplysningerContent.tsx
@@ -1,49 +1,51 @@
-import { Heading, Link } from '@navikt/ds-react';
+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 { AppText, useAppIntl } from '../../i18n';
 import getLenker from '../../lenker';
 
 const BehandlingAvPersonopplysningerContent: React.FunctionComponent = () => {
     const { intl } = useAppIntl();
     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="4">
+        <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">
                     <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>
-                    <li>
+                    </List.Item>
+                    <List.Item>
                         <AppText id="personopplysninger.4.6" />
-                    </li>
-                </InfoList>
-            </Block>
-            <Block>
+                    </List.Item>
+                </List>
+            </div>
+            <div>
                 <AppText
                     id="personopplysninger.5"
                     values={{
@@ -54,8 +56,8 @@ const BehandlingAvPersonopplysningerContent: React.FunctionComponent = () => {
                         ),
                     }}
                 />
-            </Block>
-        </Block>
+            </div>
+        </VStack>
     );
 };
 

diff --git a/apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/OmSøknaden.tsx b/apps/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/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>
     );
 };
 

diff --git a/...ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/VelkommenGuide.tsx b/...ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/VelkommenGuide.tsx
diff --git a/...omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/VelkommenGuideContent.tsx b/...omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/VelkommenGuideContent.tsx
@@ -0,0 +1,38 @@
+import { BodyLong, List } from '@navikt/ds-react';
+import { AppText } from '../../i18n';
+
+const VelkommenGuideContent = () => (
+    <>
+        <BodyLong size="large">
+            <AppText id="page.velkommen.guide.ingress" />
+        </BodyLong>
+
+        <BodyLong as="div">
+            <p>
+                <AppText id="page.velkommen.guide.tekst.1" />
+            </p>
+            <List>
+                <List.Item>
+                    <AppText id="page.velkommen.guide.tekst.1.1" />
+                </List.Item>
+                <List.Item>
+                    <AppText id="page.velkommen.guide.tekst.1.2" />
+                </List.Item>
+                <List.Item>
+                    <AppText id="page.velkommen.guide.tekst.1.3" />
+                </List.Item>
+                <List.Item>
+                    <AppText id="page.velkommen.guide.tekst.1.4" />
+                </List.Item>
+                <List.Item>
+                    <AppText id="page.velkommen.guide.tekst.1.5" />
+                </List.Item>
+            </List>
+            <p>
+                <AppText id="page.velkommen.guide.tekst.2" />
+            </p>
+        </BodyLong>
+    </>
+);
+
+export default VelkommenGuideContent;
diff --git a/.../ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/VelkommenPage.tsx b/.../ekstra-omsorgsdager-andre-forelder-ikke-tilsyn/src/app/pages/velkommen/VelkommenPage.tsx
@@ -1,13 +1,12 @@
-import { SIFCommonPageKey, useAmplitudeInstance, useLogSidevisning } from '@navikt/sif-common-amplitude';
-import Page from '@navikt/sif-common-core-ds/src/components/page/Page';
 import { OmsorgsdagerAnnenForelderIkkeTilsynApp } from '@navikt/sif-app-register';
-import { SamtykkeForm } from '@navikt/sif-common-soknad-ds';
+import { SIFCommonPageKey, useAmplitudeInstance, useLogSidevisning } from '@navikt/sif-common-amplitude';
+import { SoknadVelkommenPage } from '@navikt/sif-common-soknad-ds';
+import { useAppIntl } from '../../i18n';
 import actionsCreator from '../../søknad/context/action/actionCreator';
 import { useSøknadContext } from '../../søknad/context/hooks/useSøknadContext';
 import { SøknadRoutes } from '../../types/SøknadRoutes';
 import OmSøknaden from './OmSøknaden';
-import VelkommenGuide from './VelkommenGuide';
-import { useAppIntl } from '../../i18n';
+import VelkommenGuideContent from './VelkommenGuideContent';
 
 const VelkommenPage = () => {
     const { text } = useAppIntl();
@@ -26,13 +25,15 @@ const VelkommenPage = () => {
         dispatch(actionsCreator.setSøknadRoute(SøknadRoutes.OM_ANNEN_FORELDER));
     };
     return (
-        <Page title={text('application.title')}>
-            <VelkommenGuide navn={søker.fornavn} />
-
+        <SoknadVelkommenPage
+            title={text('application.title')}
+            guide={{
+                navn: søker.fornavn,
+                content: <VelkommenGuideContent />,
+            }}
+            onStartSøknad={startSøknad}>
             <OmSøknaden />
-
-            <SamtykkeForm onValidSubmit={startSøknad} />
-        </Page>
+        </SoknadVelkommenPage>
     );
 };
 

diff --git a/apps/endringsmelding-pleiepenger/CHANGELOG.md b/apps/endringsmelding-pleiepenger/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @navikt/endringsmelding-pleiepenger
 
+## 2.30.11
+
+### Patch Changes
+
+-   Updated dependencies [7f61cd6]
+    -   @navikt/sif-common-soknad-ds@12.0.5
+
 ## 2.30.10
 
 ### 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.10",
+    "version": "2.30.11",
     "private": true,
     "dependencies": {
         "@navikt/ds-css": "6.15.0",

diff --git a/apps/omsorgsdager-aleneomsorg-dialog/CHANGELOG.md b/apps/omsorgsdager-aleneomsorg-dialog/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @navikt/omsorgsdager-aleneomsorg-dialog
 
+## 2.19.12
+
+### Patch Changes
+
+-   039a2c1: Bruke SoknadVelkommenPage komponent
+-   Updated dependencies [7f61cd6]
+    -   @navikt/sif-common-soknad-ds@12.0.5
+
 ## 2.19.11
 
 ### 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.11",
+    "version": "2.19.12",
     "private": true,
     "type": "module",
     "scripts": {