Merge pull request #878 from navikt/dev/migrering-designsystemet-v5

Migrering til designsystemet v5 (endret modal)
navikt · Aug 22, 2023 · aa544a7 · aa544a7
2 parents a67294b + 78b6fe0
commit aa544a7
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 94 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,9 +23,9 @@
         "@alheimsins/virkedager": "2.2.0",
         "@grafana/faro-web-sdk": "^1.1.3",
         "@grafana/faro-web-tracing": "^1.1.3",
-        "@navikt/aksel-icons": "4.8.0",
-        "@navikt/ds-css": "4.8.0",
-        "@navikt/ds-react": "4.8.0",
+        "@navikt/aksel-icons": "^5.0.2",
+        "@navikt/ds-css": "^5.0.2",
+        "@navikt/ds-react": "^5.0.2",
         "amplitude-js": "8.21.9",
         "classnames": "2.3.2",
         "core-js": "^3.32.1",

diff --git a/src/komponenter/endre-situasjon/les-igjen-modal.tsx b/src/komponenter/endre-situasjon/les-igjen-modal.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import { Button, Heading, Modal } from '@navikt/ds-react';
+import { Button, Modal } from '@navikt/ds-react';
 
 import Veiledning from './veiledning';
 import { loggAktivitet } from '../../metrics/metrics';
 
-import spacing from '../../spacing.module.css';
 import flex from '../../flex.module.css';
-import styles from './modal.module.css';
 
 interface LesIgjenModalProps {
     openModal: boolean;
@@ -69,17 +67,13 @@ const LesIgjenModal = (props: LesIgjenModalProps) => {
     return (
         <Modal
             open={openModal}
-            aria-label="Jobbsituasjonen min har endret seg"
-            onClose={() => setOpenModal((x) => !x)}
-            // shouldCloseOnEsc={!datepickerProps.open}
-            aria-labelledby="modal-heading"
+            onClose={() => setOpenModal(false)}
+            width={'medium'}
+            header={{ heading: 'Jobbsituasjonen min har endret seg', size: 'medium' }}
         >
-            <Modal.Content className={styles.maxWidth}>
-                <Heading spacing level="1" size="large" id="modal-heading" className={spacing.mr2}>
-                    Jobbsituasjonen min har endret seg
-                </Heading>
+            <Modal.Body>
                 <Innhold tilleggsData={tilleggsData} valgtSituasjon={valgtSituasjon} amplitudeData={amplitudeData} />
-            </Modal.Content>
+            </Modal.Body>
         </Modal>
     );
 };

diff --git a/src/komponenter/endre-situasjon/modal.module.css b/src/komponenter/endre-situasjon/modal.module.css
diff --git a/src/komponenter/endre-situasjon/permittert-modal.tsx b/src/komponenter/endre-situasjon/permittert-modal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { BodyShort, Heading, Link, Modal } from '@navikt/ds-react';
+import { BodyShort, Link, Modal } from '@navikt/ds-react';
 import { ChevronLeftIcon } from '@navikt/aksel-icons';
 
 import { AmplitudeData } from '../../metrics/amplitude-utils';
@@ -8,7 +8,6 @@ import Steg3 from './steg3';
 import Steg1 from './steg1';
 
 import spacing from '../../spacing.module.css';
-import styles from './modal.module.css';
 
 interface PermittertModalProps {
     openModal: boolean;
@@ -28,10 +27,6 @@ const PermittertModal = (props: PermittertModalProps) => {
         settAktivSide(1);
     }, [openModal]);
 
-    useEffect(() => {
-        Modal.setAppElement('#aia-wrapper');
-    }, []);
-
     const Innhold = () => {
         if (aktivSide === 1) {
             return (
@@ -85,22 +80,18 @@ const PermittertModal = (props: PermittertModalProps) => {
 
     return (
         <Modal
+            width={'medium'}
             open={openModal}
-            aria-label="Jobbsituasjonen min har endret seg"
-            onClose={() => setOpenModal((x) => !x)}
-            // shouldCloseOnEsc={!datepickerProps.open}
-            aria-labelledby="modal-heading"
+            onClose={() => setOpenModal(false)}
+            header={{ heading: 'Jobbsituasjonen min har endret seg', size: 'medium' }}
         >
-            <Modal.Content className={styles.maxWidth}>
+            <Modal.Body>
                 <Tilbake />
-                <Heading spacing level="1" size="large" id="modal-heading" className={spacing.mr2}>
-                    Jobbsituasjonen min har endret seg
-                </Heading>
-                <BodyShort className={spacing.mb1}>
+                <BodyShort spacing>
                     <small>Steg {aktivSide}/3</small>
                 </BodyShort>
                 <Innhold />
-            </Modal.Content>
+            </Modal.Body>
         </Modal>
     );
 };

diff --git a/src/komponenter/gjelder-fra-dato/GjelderFraDato.tsx b/src/komponenter/gjelder-fra-dato/GjelderFraDato.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { BodyShort, Button, Heading, Link, Modal } from '@navikt/ds-react';
+import { BodyShort, Button, Link, Modal } from '@navikt/ds-react';
 
 import { useGjelderFraDatoModal } from '../../contexts/gjelder-fra-dato-modal';
 import { useFeatureToggleData } from '../../contexts/feature-toggles';
@@ -50,11 +50,12 @@ function GjelderFraDato(): JSX.Element | null {
     }
 
     return (
-        <Modal open={visModal} onClose={settLukkModal} shouldCloseOnOverlayClick={false}>
-            <Modal.Content>
-                <Heading spacing={true} size={'medium'} style={{ marginRight: '2em' }}>
-                    Hvilken dag er den siste dagen med lønn?
-                </Heading>
+        <Modal
+            open={visModal}
+            onClose={settLukkModal}
+            header={{ heading: 'Hvilken dag er den siste dagen med lønn?', size: 'medium' }}
+        >
+            <Modal.Body>
                 <BodyShort spacing={true}>
                     <input
                         style={{ width: 'initial' }}
@@ -84,7 +85,7 @@ function GjelderFraDato(): JSX.Element | null {
                 <Button variant={'secondary'} onClick={onSubmit} loading={lagrerDato}>
                     Lagre
                 </Button>
-            </Modal.Content>
+            </Modal.Body>
         </Modal>
     );
 }