⬆️ Oppgraderer designsystem til ny majorversjon

navikt · Mar 21, 2024 · 2176983 · 2176983
1 parent 10f330b
commit 2176983
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 113 deletions.
diff --git a/components/SoknadFormWrapper/LagreModal.tsx b/components/SoknadFormWrapper/LagreModal.tsx
@@ -11,7 +11,11 @@ interface Props {
 const LagreModal = ({ isOpen, onClose }: Props) => {
   const { formatMessage } = useIntl();
   return (
-    <Modal open={isOpen} onClose={() => onClose(false)}>
+    <Modal
+      open={isOpen}
+      onClose={() => onClose(false)}
+      aria-label={formatMessage({ id: 'lagreModal.heading' })}
+    >
       <Modal.Header>
         <Heading size={'small'} level={'2'} spacing>
           {formatMessage({ id: 'lagreModal.heading' })}

diff --git a/components/SoknadFormWrapper/SlettModal.tsx b/components/SoknadFormWrapper/SlettModal.tsx
@@ -44,6 +44,7 @@ const SlettModal = ({ isOpen, onClose }: Props) => {
           e.preventDefault();
         }
       }}
+      aria-label={formatMessage({ id: 'avbrytOgSlettModal.heading' })}
     >
       {!slettSøknadSuccess && (
         <Modal.Header>

diff --git a/components/pageComponents/standard/AndreUtbetalinger/AndreUtbetalinger.tsx b/components/pageComponents/standard/AndreUtbetalinger/AndreUtbetalinger.tsx
@@ -1,10 +1,9 @@
 import {
   Alert,
   BodyShort,
-  Cell,
   Checkbox,
   CheckboxGroup,
-  Grid,
+  HGrid,
   Heading,
   Radio,
   RadioGroup,
@@ -288,26 +287,24 @@ export const AndreUtbetalinger = ({ onBackClick }: Props) => {
         <Checkbox value={StønadType.AFP}>{StønadAlternativer.AFP}</Checkbox>
         {søknadState.søknad?.andreUtbetalinger?.stønad?.includes(StønadType.AFP) && (
           <ColorPanel color="grey">
-            <Grid>
-              <Cell xs={7}>
-                <TextField
-                  name={'afp.hvemBetaler'}
-                  id={'afp.hvemBetaler'}
-                  onChange={(e) =>
-                    updateSøknadData(søknadDispatch, {
-                      andreUtbetalinger: {
-                        ...søknadState.søknad?.andreUtbetalinger,
-                        afp: {
-                          hvemBetaler: e.target.value,
-                        },
+            <HGrid columns={{ xs: 1, md: 2 }}>
+              <TextField
+                name={'afp.hvemBetaler'}
+                id={'afp.hvemBetaler'}
+                onChange={(e) =>
+                  updateSøknadData(søknadDispatch, {
+                    andreUtbetalinger: {
+                      ...søknadState.søknad?.andreUtbetalinger,
+                      afp: {
+                        hvemBetaler: e.target.value,
                       },
-                    })
-                  }
-                  label={formatMessage({ id: 'søknad.andreUtbetalinger.hvemBetalerAfp.label' })}
-                  error={errors?.find((e) => e.path === 'afp.hvemBetaler')?.message}
-                />
-              </Cell>
-            </Grid>
+                    },
+                  })
+                }
+                label={formatMessage({ id: 'søknad.andreUtbetalinger.hvemBetalerAfp.label' })}
+                error={errors?.find((e) => e.path === 'afp.hvemBetaler')?.message}
+              />
+            </HGrid>
           </ColorPanel>
         )}
         <Checkbox value={StønadType.LÅN}>{StønadAlternativer.LÅN}</Checkbox>

diff --git a/components/pageComponents/standard/Barnetillegg/AddBarnModal.tsx b/components/pageComponents/standard/Barnetillegg/AddBarnModal.tsx
@@ -124,6 +124,7 @@ export const AddBarnModal = ({
         clearErrors();
         onCloseClick();
       }}
+      aria-label={formatMessage({ id: 'søknad.barnetillegg.leggTilBarn.modal.title' })}
     >
       <Modal.Header>
         <Heading size={'medium'} level={'2'}>

diff --git a/components/pageComponents/standard/Behandlere/EndreEllerLeggTilBehandlerModal.tsx b/components/pageComponents/standard/Behandlere/EndreEllerLeggTilBehandlerModal.tsx
@@ -25,7 +25,7 @@ export const getBehandlerSchema = (formatMessage: IntlFormatters['formatMessage'
     lastname: yup
       .string()
       .required(
-        formatMessage({ id: 'søknad.helseopplysninger.modal.etternavn.validation.required' })
+        formatMessage({ id: 'søknad.helseopplysninger.modal.etternavn.validation.required' }),
       )
       .nullable(),
   });
@@ -54,6 +54,7 @@ export const EndreEllerLeggTilBehandlerModal = ({
         clearErrors();
         onCloseClick();
       }}
+      aria-label={formatMessage({ id: 'søknad.helseopplysninger.modal.title' })}
     >
       <Modal.Header>
         <Heading className={classes?.modalHeading} size={'small'} level={'3'}>

diff --git a/components/pageComponents/standard/Medlemskap/Medlemskap.tsx b/components/pageComponents/standard/Medlemskap/Medlemskap.tsx
@@ -1,13 +1,4 @@
-import {
-  BodyShort,
-  Button,
-  Cell,
-  Grid,
-  Heading,
-  Radio,
-  RadioGroup,
-  ReadMore,
-} from '@navikt/ds-react';
+import { BodyShort, Button, HGrid, Heading, Radio, RadioGroup, ReadMore } from '@navikt/ds-react';
 import React, { useEffect, useState } from 'react';
 import { JaEllerNei } from 'types/Generic';
 import { Add } from '@navikt/ds-icons';
@@ -291,25 +282,23 @@ export const Medlemskap = ({ onBackClick }: Props) => {
                   arbeidEllerBodd={arbeidEllerBodd}
                 />
               )}
-            <Grid>
-              <Cell xs={12}>
-                <Button
-                  id="medlemskap.utenlandsOpphold"
-                  variant="secondary"
-                  type="button"
-                  icon={<Add title={'Legg til'} />}
-                  iconPosition={'left'}
-                  onClick={() => {
-                    setSelectedUtenlandsPeriode({});
-                    setShowUtenlandsPeriodeModal(true);
-                  }}
-                >
-                  {søknadState?.søknad?.medlemskap?.harArbeidetINorgeSiste5År === JaEllerNei.NEI
-                    ? 'Registrer utenlandsopphold'
-                    : 'Registrer periode med jobb utenfor Norge'}
-                </Button>
-              </Cell>
-            </Grid>
+            <HGrid columns={{ xs: 1, md: 2 }}>
+              <Button
+                id="medlemskap.utenlandsOpphold"
+                variant="secondary"
+                type="button"
+                icon={<Add title={'Legg til'} />}
+                iconPosition={'left'}
+                onClick={() => {
+                  setSelectedUtenlandsPeriode({});
+                  setShowUtenlandsPeriodeModal(true);
+                }}
+              >
+                {søknadState?.søknad?.medlemskap?.harArbeidetINorgeSiste5År === JaEllerNei.NEI
+                  ? 'Registrer utenlandsopphold'
+                  : 'Registrer periode med jobb utenfor Norge'}
+              </Button>
+            </HGrid>
 
             {utenlandsOppholdErrorMessage && (
               <div className={'navds-error-message navds-error-message--medium navds-label'}>

diff --git a/...eComponents/standard/Oppsummering/AccordianItemOppsummering/AccordianItemOppsummering.tsx b/...eComponents/standard/Oppsummering/AccordianItemOppsummering/AccordianItemOppsummering.tsx
@@ -1,4 +1,4 @@
-import { Accordion, Alert, BodyShort, Cell, Grid, Link } from '@navikt/ds-react';
+import { Accordion, Alert, BodyShort, HGrid, Link } from '@navikt/ds-react';
 import React, { useState } from 'react';
 import * as classes from './AccordianItemOppsummering.module.css';
 import { Back } from '@navikt/ds-icons';
@@ -52,14 +52,12 @@ const AccordianItemOppsummering = ({
             </Alert>
           )}
           {showEdit && (
-            <Grid>
-              <Cell xs={12}>
-                <Link href="#" onClick={onEdit}>
-                  <Back />
-                  {editText}
-                </Link>
-              </Cell>
-            </Grid>
+            <HGrid columns={{ xs: 1 }}>
+              <Link href="#" onClick={onEdit}>
+                <Back />
+                {editText}
+              </Link>
+            </HGrid>
           )}
         </div>
       </Accordion.Content>

diff --git a/components/pageComponents/standard/UtenlandsPeriodeVelger/UtenlandsPeriodeVelger.tsx b/components/pageComponents/standard/UtenlandsPeriodeVelger/UtenlandsPeriodeVelger.tsx
@@ -41,38 +41,38 @@ export interface UtenlandsPeriodeProps {
 
 export const getUtenlandsPeriodeSchema = (
   formatMessage: IntlFormatters['formatMessage'],
-  arbeidEllerBodd = ArbeidEllerBodd.BODD
+  arbeidEllerBodd = ArbeidEllerBodd.BODD,
 ) => {
   return yup.object().shape({
     land: yup
       .string()
       .required(
-        formatMessage({ id: 'søknad.medlemskap.utenlandsperiode.modal.land.validation.required' })
+        formatMessage({ id: 'søknad.medlemskap.utenlandsperiode.modal.land.validation.required' }),
       )
       .notOneOf(
         ['none'],
-        formatMessage({ id: 'søknad.medlemskap.utenlandsperiode.modal.land.validation.required' })
+        formatMessage({ id: 'søknad.medlemskap.utenlandsperiode.modal.land.validation.required' }),
       ),
     fraDato: yup
       .date()
       .required(
         formatMessage({
           id: 'søknad.medlemskap.utenlandsperiode.modal.periode.fraDato.validation.required',
-        })
+        }),
       )
       .nullable(),
     tilDato: yup
       .date()
       .required(
         formatMessage({
           id: 'søknad.medlemskap.utenlandsperiode.modal.periode.tilDato.validation.required',
-        })
+        }),
       )
       .min(
         yup.ref('fraDato'),
         formatMessage({
           id: 'søknad.medlemskap.utenlandsperiode.modal.periode.tilDato.validation.fraDatoEtterTilDato',
-        })
+        }),
       )
       .nullable(),
     iArbeid: yup.string().when('arbeidEllerBodd', ([], schema) => {
@@ -82,7 +82,7 @@ export const getUtenlandsPeriodeSchema = (
           .required(
             formatMessage({
               id: 'søknad.medlemskap.utenlandsperiode.modal.iArbeid.validation.required',
-            })
+            }),
           )
           .oneOf([JaEllerNei.JA, JaEllerNei.NEI])
           .nullable();
@@ -119,6 +119,9 @@ const UtenlandsPeriodeVelger = ({
         clearErrors();
         closeModal();
       }}
+      aria-label={formatMessage({
+        id: `søknad.medlemskap.utenlandsperiode.modal.title.${arbeidEllerBodd}`,
+      })}
     >
       <Modal.Header>
         <Heading size={'medium'} level={'3'} spacing>
@@ -176,7 +179,7 @@ const UtenlandsPeriodeVelger = ({
                   id: `søknad.medlemskap.utenlandsperiode.modal.periode.label.${arbeidEllerBodd}`,
                 })}
               </Label>
-              <HGrid columns={2}>
+              <HGrid columns={{ xs: 1, md: 2 }} gap="4">
                 <MonthPickerWrapper
                   id="fraDato"
                   selectedDate={utenlandsPeriode.fraDato}

diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
     "@navikt/aap-felles-react": "^0.0.97",
     "@navikt/aap-felles-utils": "^0.0.97",
     "@navikt/aap-felles-utils-client": "^0.0.97",
-    "@navikt/ds-css": "^5.17.4",
+    "@navikt/ds-css": "^6.3.3",
     "@navikt/ds-icons": "^3.4.3",
-    "@navikt/ds-react": "^5.17.4",
-    "@navikt/nav-dekoratoren-moduler": "^2.1.5",
+    "@navikt/ds-react": "^6.3.3",
+    "@navikt/nav-dekoratoren-moduler": "^2.1.6",
     "@navikt/next-api-proxy": "3.4.0",
     "@navikt/oasis": "^3.2.2",
     "@ungap/structured-clone": "^1.2.0",