Oppdatere til versjon 5 av designsystemet Aksel (#1081)

* Oppdatere ds-pakker til v5 * Bruke createPortal for <Modal/> * Justere tester i endringsdialog * Changeset * Oppdatere versjonsnumre
navikt · Aug 24, 2023 · 099363a · 099363a
1 parent 5c8e593
commit 099363a
Show file tree

Hide file tree

Showing 43 changed files with 500 additions and 399 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,19 @@
 # @navikt/ekstra-omsorgsdager-andre-forelder-ikke-tilsyn
 
+## 1.14.0
+
+### Minor Changes
+
+-   026fc373: Oppdatere til versjon 5 av designsystemet aksel
+
+### Patch Changes
+
+-   Updated dependencies [41d0a03c]
+-   Updated dependencies [026fc373]
+    -   @navikt/sif-common-formik-ds@0.3.0
+    -   @navikt/sif-common-soknad-ds@10.3.0
+    -   @navikt/sif-common-core-ds@9.3.0
+
 ## 1.13.0
 
 ### Minor Changes
@@ -12,8 +26,8 @@
 -   Updated dependencies
     -   @navikt/sif-common-amplitude@2.19.0
     -   @navikt/sif-common-formik-ds@0.24.0
-    -   @navikt/sif-common-soknad-ds@11.0.0
-    -   @navikt/sif-common-core-ds@10.0.0
+    -   @navikt/sif-common-soknad-ds@10.3.0
+    -   @navikt/sif-common-core-ds@9.3.0
     -   @navikt/sif-common-sentry@0.20.0
     -   @navikt/sif-common-utils@3.38.0
 
@@ -60,8 +74,8 @@
 
 -   Updated dependencies [ea79f31c]
     -   @navikt/sif-common-formik-ds@0.23.0
-    -   @navikt/sif-common-soknad-ds@11.0.0
-    -   @navikt/sif-common-core-ds@10.0.0
+    -   @navikt/sif-common-soknad-ds@10.3.0
+    -   @navikt/sif-common-core-ds@9.3.0
     -   @navikt/sif-common-sentry@0.19.0
 
 ## 1.11.0

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.13.0",
+    "version": "1.14.0",
     "repository": "https://github.com/navikt/sif-brukerdialog",
     "private": true,
     "scripts": {
@@ -27,9 +27,9 @@
         "start-e2e-server": "node ./server-e2e.js"
     },
     "dependencies": {
-        "@navikt/ds-css": "4.11.2",
-        "@navikt/ds-react": "4.11.2",
-        "@navikt/ds-tailwind": "4.11.2",
+        "@navikt/ds-css": "5.0.3",
+        "@navikt/ds-react": "5.0.3",
+        "@navikt/ds-tailwind": "5.0.3",
         "@navikt/sif-common-amplitude": "*",
         "@navikt/sif-common-core-ds": "*",
         "@navikt/sif-common-formik-ds": "*",

diff --git a/apps/endringsmelding-pleiepenger/CHANGELOG.md b/apps/endringsmelding-pleiepenger/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @navikt/endringsmelding-pleiepenger
 
+## 2.17.0
+
+### Minor Changes
+
+-   026fc373: Oppdatere til versjon 5 av designsystemet aksel
+
+### Patch Changes
+
+-   Updated dependencies [41d0a03c]
+-   Updated dependencies [026fc373]
+    -   @navikt/sif-common-formik-ds@0.3.0
+    -   @navikt/sif-common-soknad-ds@10.3.0
+    -   @navikt/sif-common-forms-ds@8.5.0
+    -   @navikt/sif-common-core-ds@9.3.0
+
 ## 2.16.0
 
 ### Minor Changes
@@ -12,9 +27,9 @@
 -   Updated dependencies
     -   @navikt/sif-common-amplitude@2.19.0
     -   @navikt/sif-common-formik-ds@0.24.0
-    -   @navikt/sif-common-soknad-ds@11.0.0
-    -   @navikt/sif-common-forms-ds@9.0.0
-    -   @navikt/sif-common-core-ds@10.0.0
+    -   @navikt/sif-common-soknad-ds@10.3.0
+    -   @navikt/sif-common-forms-ds@8.5.0
+    -   @navikt/sif-common-core-ds@9.3.0
     -   @navikt/sif-common-sentry@0.20.0
     -   @navikt/sif-common-utils@3.38.0
 
@@ -70,9 +85,9 @@
 
 -   Updated dependencies [ea79f31c]
     -   @navikt/sif-common-formik-ds@0.23.0
-    -   @navikt/sif-common-soknad-ds@11.0.0
-    -   @navikt/sif-common-forms-ds@9.0.0
-    -   @navikt/sif-common-core-ds@10.0.0
+    -   @navikt/sif-common-soknad-ds@10.3.0
+    -   @navikt/sif-common-forms-ds@8.5.0
+    -   @navikt/sif-common-core-ds@9.3.0
     -   @navikt/sif-common-sentry@0.19.0
 
 ## 2.14.0

diff --git a/apps/endringsmelding-pleiepenger/e2e/cypress/e2e/tester/1-utfylling-av-dialog/cyHelpers.ts b/apps/endringsmelding-pleiepenger/e2e/cypress/e2e/tester/1-utfylling-av-dialog/cyHelpers.ts
@@ -99,6 +99,7 @@ const endreOgFjernFerie = () => {
         getTestElement('dateRangeAccordion_0').within(() => {
             cy.get('.lovbestemtFerieListe li:nth-child(2) .lovbestemtFerieListe__ferie__endreKnapp').click();
         });
+        cy.wait(250);
         cy.checkA11y();
         fyllUtFerieDialog('28.11.2022', '29.11.2022');
         getTestElement('dateRangeAccordion_0').within(() => {
@@ -142,23 +143,24 @@ const endreOgFjernFerie = () => {
     });
 };
 
-const endreEnkeltuke = (ukenummer = enkeltuke) => {
+const endreArbeidEnkeltuke = (ukenummer = enkeltuke) => {
     it('åpne periode', () => {
-        cy.wait(1000);
+        cy.wait(250);
         cy.injectAxe();
         getAktivitet().within(() => {
             cy.get('[data-testid=dateRangeAccordion_0]').click();
             getUkeRow(ukenummer).within(() => {
                 expect(cy.get('[data-testid=ukenummer]').contains(ukenummer));
                 expect(cy.get('[data-testid=arbeidstid-faktisk]').contains('4 t. 0 m.'));
             });
-            cy.wait(500);
+            cy.wait(250);
             cy.checkA11y();
             captureScreenshot();
         });
     });
     it('kontrollerer verdi før endring', () => {
-        cy.wait(1000);
+        cy.wait(250);
+        cy.injectAxe();
         getAktivitet().within(() => {
             getUkeRow(ukenummer).within(() => {
                 expect(cy.get('[data-testid=ukenummer]').contains(ukenummer));
@@ -169,11 +171,13 @@ const endreEnkeltuke = (ukenummer = enkeltuke) => {
         });
     });
     it('åpner dialog for uke', () => {
-        cy.wait(1000);
+        cy.wait(250);
+        cy.injectAxe();
         getAktivitet().within(() => {
             getUkeRow(ukenummer).within(() => {
                 cy.get('[data-testid=endre-button]').click();
             });
+            cy.wait(250);
             cy.checkA11y();
             captureScreenshot();
         });
@@ -199,11 +203,12 @@ const endreEnkeltuke = (ukenummer = enkeltuke) => {
     });
 };
 
-const endreFlereUker = (uker: number[] = flereUker) => {
+const endreArbeidFlereUker = (uker: number[] = flereUker) => {
     it('velger uker for endring', () => {
         getAktivitet().within(() => {
             getPeriode().within(() => {
                 getTestElement('endre-flere-uker-cb').click();
+                cy.wait(300);
                 const rows = uker.map((uke) => getUkeRow(uke));
                 rows.forEach((row) => {
                     row.within(() => {
@@ -221,6 +226,7 @@ const endreFlereUker = (uker: number[] = flereUker) => {
                 cy.get('[data-testid=endre-flere-uker-button]').click();
             });
         });
+        cy.wait(300);
         cy.checkA11y();
         getArbeidstimerModal().within(() => {
             getTestElement('timer-verdi').type('5');
@@ -254,6 +260,7 @@ const fyllUtArbeidstidUkjentArbeidsforhold = (
                             cy.get('[data-testid=endre-button]').click();
                         });
                 });
+                cy.wait(250);
                 getArbeidstimerModal().within(() => {
                     getTestElement('toggle-timer').click();
                     getTestElement('timer-verdi').type(uke.tid);
@@ -348,8 +355,8 @@ export const cyHelpers = {
     leggTilOgFjernFerie,
     leggTilFerie,
     endreOgFjernFerie,
-    endreEnkeltuke,
-    endreFlereUker,
+    endreEnkeltuke: endreArbeidEnkeltuke,
+    endreFlereUker: endreArbeidFlereUker,
     fyllUtArbeidstidUkjentArbeidsforhold,
     fortsettTilOppsummering,
     kontrollerOppsummering,

diff --git a/apps/endringsmelding-pleiepenger/package.json b/apps/endringsmelding-pleiepenger/package.json
@@ -4,15 +4,15 @@
     "license": "MIT",
     "name": "@navikt/endringsmelding-pleiepenger",
     "repository": "https://github.com/navikt/sif-brukerdialog",
-    "version": "2.16.0",
+    "version": "2.17.0",
     "private": true,
     "dependencies": {
         "@devexperts/remote-data-ts": "2.1.1",
         "@formatjs/intl-pluralrules": "5.2.4",
-        "@navikt/ds-css": "4.11.2",
+        "@navikt/ds-css": "5.0.3",
         "@navikt/ds-icons": "3.4.3",
-        "@navikt/ds-react": "4.11.2",
-        "@navikt/ds-tailwind": "4.11.2",
+        "@navikt/ds-react": "5.0.3",
+        "@navikt/ds-tailwind": "5.0.3",
         "@navikt/fnrvalidator": "1.3.0",
         "@navikt/sif-common-amplitude": "*",
         "@navikt/sif-common-core-ds": "*",
@@ -72,7 +72,7 @@
         "@babel/preset-react": "7.22.5",
         "@babel/preset-typescript": "7.22.5",
         "@mswjs/data": "0.13.0",
-        "@navikt/ds-tailwind": "4.11.2",
+        "@navikt/ds-tailwind": "5.0.3",
         "@storybook/addon-actions": "7.3.1",
         "@storybook/addon-essentials": "7.3.1",
         "@storybook/addon-interactions": "7.3.1",

diff --git a/apps/endringsmelding-pleiepenger/src/app/dev/DevFooter.tsx b/apps/endringsmelding-pleiepenger/src/app/dev/DevFooter.tsx
@@ -1,5 +1,4 @@
-import { Button, Heading, Modal, Radio, RadioGroup } from '@navikt/ds-react';
-import ModalContent from '@navikt/ds-react/esm/modal/ModalContent';
+import { Button, Modal, Radio, RadioGroup } from '@navikt/ds-react';
 import React, { useState } from 'react';
 import { useSøknadContext } from '@hooks';
 import { Settings } from '@navikt/ds-icons';
@@ -42,11 +41,13 @@ const DevFooter: React.FunctionComponent = () => {
                     {scenario.name}
                 </Button>
             </div>
-            <Modal open={showModal} onClose={() => setShowModal(false)}>
-                <ModalContent>
-                    <Heading level="1" size="medium" style={{ paddingRight: '3rem', minWidth: '14rem' }}>
-                        Velg scenario som skal brukes
-                    </Heading>
+            <Modal
+                open={showModal}
+                onClose={() => setShowModal(false)}
+                header={{
+                    heading: 'Velg scenario som skal brukes',
+                }}>
+                <Modal.Body>
                     <FormBlock>
                         <RadioGroup
                             value={scenario.value}
@@ -89,7 +90,7 @@ const DevFooter: React.FunctionComponent = () => {
                             Velg
                         </Button>
                     </FormBlock>
-                </ModalContent>
+                </Modal.Body>
             </Modal>
         </>
     );

diff --git a/...dringsmelding-pleiepenger/src/app/modules/endre-arbeidstid-modal/EndreArbeidstidModal.tsx b/...dringsmelding-pleiepenger/src/app/modules/endre-arbeidstid-modal/EndreArbeidstidModal.tsx
@@ -1,8 +1,7 @@
-import { Button, Heading, Modal } from '@navikt/ds-react';
-import React, { FunctionComponent, useEffect } from 'react';
-import { Close } from '@navikt/ds-icons';
-import Block from '@navikt/sif-common-core-ds/lib/atoms/block/Block';
+import { Modal } from '@navikt/ds-react';
+import React, { FunctionComponent } from 'react';
 import './endreArbeidstidModal.css';
+import { createPortal } from 'react-dom';
 
 interface Props {
     title: string;
@@ -12,39 +11,25 @@ interface Props {
 }
 
 const EndreArbeidstidModal: FunctionComponent<Props> = ({ children, title, isVisible = false, onClose }) => {
-    useEffect(() => {
-        Modal.setAppElement('#app');
-    });
-    return (
-        <Modal
-            open={isVisible}
-            onClose={onClose}
-            className="endreArbeidstidModal"
-            aria-label="Endre arbeidstid dialog"
-            closeButton={false}>
-            <Button
-                className="navds-modal__button"
-                size="small"
-                variant="tertiary"
-                onClick={onClose}
-                tabIndex={0}
-                icon={<Close title="Lukk modalvindu" aria-label="Lukk modalvindu" />}
-            />
-            <Modal.Content>
-                <div style={{ marginTop: 'var(--a-spacing-1)', paddingBottom: 'var(--a-spacing-2)' }}>
-                    <Heading
-                        spacing={true}
-                        size="small"
-                        level="1"
-                        id="endreArbeidstidModalHeader"
-                        className="endreArbeidstidModal__noFocusOutline">
-                        {title}
-                    </Heading>
-                    <Block margin="l">{children}</Block>
-                </div>
-            </Modal.Content>
-        </Modal>
-    );
+    return isVisible
+        ? createPortal(
+              <Modal
+                  open={isVisible}
+                  onClose={onClose}
+                  className="endreArbeidstidModal"
+                  aria-label="Endre arbeidstid dialog"
+                  header={{
+                      heading: title,
+                  }}>
+                  <Modal.Body>
+                      <div style={{ marginTop: 'var(--a-spacing-1)', paddingBottom: 'var(--a-spacing-2)' }}>
+                          {children}
+                      </div>
+                  </Modal.Body>
+              </Modal>,
+              document.body
+          )
+        : null;
 };
 
 export default EndreArbeidstidModal;