diff --git a/package-lock.json b/package-lock.json index 067c2504..ed83cf46 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,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", @@ -3068,28 +3068,27 @@ } }, "node_modules/@navikt/aksel-icons": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/@navikt/aksel-icons/-/aksel-icons-4.8.0.tgz", - "integrity": "sha512-6IOnCTE6iHA6b8NqVVOLjM7E1TCkladwDD6569lVm66j04Khg4dkXTCzTjktDaI0Mxszd/8uc5m0oRTFiZjFWg==" + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@navikt/aksel-icons/-/aksel-icons-5.0.2.tgz", + "integrity": "sha512-rxW5XjjVcTCfcPEc8rKaUoIfgC0TDAkvV1+Xhd+xU0+AAHb71aLPWLbVo1cgF0wajNEv0r99ukUIDgSSEljBHQ==" }, "node_modules/@navikt/ds-css": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/@navikt/ds-css/-/ds-css-4.8.0.tgz", - "integrity": "sha512-rYJD8YicL3yQQXOvXDwmYWnWm6GznyPD6b0lXxd923WoiENPyjwY6zro6sZMh8MgyDTdYGiWzaKz91jj7ifbUg==" + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@navikt/ds-css/-/ds-css-5.0.2.tgz", + "integrity": "sha512-0EpORQ6zl9go1wxjImaqLoo/k6TlDGdOadbxwuyQmIIb/iXyLIM17fHXv0wUH8mZlRY71rWpNo9q+MLTqqk91w==" }, "node_modules/@navikt/ds-react": { - "version": "4.8.0", - "resolved": "https://registry.npmjs.org/@navikt/ds-react/-/ds-react-4.8.0.tgz", - "integrity": "sha512-7/7OMYIAK9yebB3sURpUKqO0R09CVTj0KMTSDIBmjEyd4mN6lQR3oPtvtk4o1ntUBBaVnMmnsd+fG412npIdlA==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@navikt/ds-react/-/ds-react-5.0.2.tgz", + "integrity": "sha512-Pyd7A6/mGaQ+sS6ENWyllsDa36pg/yzwJH5g1lx1+6xX647BuUxNF8+uwRGSxnf5+r7GMfQIuvTDGcibYkA4rg==", "dependencies": { "@floating-ui/react": "0.24.1", - "@navikt/aksel-icons": "^4.8.0", + "@navikt/aksel-icons": "^5.0.2", "@radix-ui/react-tabs": "1.0.0", "@radix-ui/react-toggle-group": "1.0.0", "clsx": "^1.2.1", "date-fns": "2.29.3", - "react-day-picker": "8.3.4", - "react-modal": "3.15.1" + "react-day-picker": "8.3.4" }, "peerDependencies": { "@types/react": "^17.0.30 || ^18.0.0", @@ -7060,11 +7059,6 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, - "node_modules/exenv": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", - "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" - }, "node_modules/expect": { "version": "29.6.2", "resolved": "https://registry.npmjs.org/expect/-/expect-29.6.2.tgz", @@ -9594,6 +9588,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -10118,6 +10113,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -10127,7 +10123,8 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true }, "node_modules/psl": { "version": "1.9.0", @@ -10249,29 +10246,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, - "node_modules/react-modal": { - "version": "3.15.1", - "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.15.1.tgz", - "integrity": "sha512-duB9bxOaYg7Zt6TMFldIFxQRtSP+Dg3F1ZX3FXxSUn+3tZZ/9JCgeAQKDg7rhZSAqopq8TFRw3yIbnx77gyFTw==", - "dependencies": { - "exenv": "^1.2.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.0", - "warning": "^4.0.3" - }, - "engines": { - "node": ">=8" - }, - "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", - "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" - } - }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -11932,14 +11906,6 @@ "node": ">=14" } }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/wcwidth": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", diff --git a/package.json b/package.json index d18e7549..cbf57f77 100644 --- 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 index b3957635..7e5443cc 100644 --- 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 ( setOpenModal((x) => !x)} - // shouldCloseOnEsc={!datepickerProps.open} - aria-labelledby="modal-heading" + onClose={() => setOpenModal(false)} + width={'medium'} + header={{ heading: 'Jobbsituasjonen min har endret seg', size: 'medium' }} > - - - Jobbsituasjonen min har endret seg - + - + ); }; diff --git a/src/komponenter/endre-situasjon/modal.module.css b/src/komponenter/endre-situasjon/modal.module.css deleted file mode 100644 index ce99fac6..00000000 --- a/src/komponenter/endre-situasjon/modal.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.maxWidth { - width: 85vw; - max-width: 1000px; -} diff --git a/src/komponenter/endre-situasjon/permittert-modal.tsx b/src/komponenter/endre-situasjon/permittert-modal.tsx index dc9fae2c..22a38e00 100644 --- 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 ( setOpenModal((x) => !x)} - // shouldCloseOnEsc={!datepickerProps.open} - aria-labelledby="modal-heading" + onClose={() => setOpenModal(false)} + header={{ heading: 'Jobbsituasjonen min har endret seg', size: 'medium' }} > - + - - Jobbsituasjonen min har endret seg - - + Steg {aktivSide}/3 - + ); }; diff --git a/src/komponenter/gjelder-fra-dato/GjelderFraDato.tsx b/src/komponenter/gjelder-fra-dato/GjelderFraDato.tsx index 0684efc3..29dc39f7 100644 --- 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 ( - - - - Hvilken dag er den siste dagen med lønn? - + + Lagre - + ); }