diff --git a/package.json b/package.json index d380a6f68..d9b0064c9 100644 --- a/package.json +++ b/package.json @@ -26,40 +26,37 @@ }, "dependencyComments": { "color-string": "Overrider versjon som brukes av winston, som kommer fra familie-frontend-backend", - "request-promise": "Overrider versjon som kommer fra familie-frontend-backend", "body-parser": "Overrider versjon som kommer fra familie-frontend backend", "react-collapse": "Trengs for datovelgeren, overrider versjonen som ligger der" }, "dependencies": { - "@navikt/aksel-icons": "^2.9.x", - "@navikt/ds-css": "2.9.x", - "@navikt/ds-icons": "2.9.x", - "@navikt/ds-react": "2.9.x", - "@navikt/ds-react-internal": "2.9.x", - "@navikt/ds-tokens": "2.9.x", + "@navikt/aksel-icons": "^5.5.0", + "@navikt/ds-css": "5.5.0", + "@navikt/ds-react": "5.5.0", + "@navikt/ds-tokens": "5.5.0", "@navikt/familie-backend": "10.0.7", - "@navikt/familie-dokumentliste": "^8.1.1", - "@navikt/familie-endringslogg": "^8.1.1", - "@navikt/familie-form-elements": "^10.1.2", - "@navikt/familie-header": "^9.0.1", - "@navikt/familie-ikoner": "^7.0.0", + "@navikt/familie-dokumentliste": "^9.0.1", + "@navikt/familie-endringslogg": "^9.0.3", + "@navikt/familie-form-elements": "^12.0.0", + "@navikt/familie-header": "^11.0.1", + "@navikt/familie-ikoner": "^7.0.1", "@navikt/familie-logging": "^6.0.0", - "@navikt/familie-typer": "^8.0.0", - "@navikt/familie-visittkort": "^9.0.0", + "@navikt/familie-typer": "^8.0.1", + "@navikt/familie-visittkort": "^11.0.2", "@navikt/fnrvalidator": "^1.3.3", - "@sentry/browser": "^7.60.1", - "@sentry/core": "^7.60.1", + "@sentry/browser": "^7.69.0", + "@sentry/core": "^7.69.0", "@types/amplitude-js": "^8.16.2", "@types/classnames": "^2.3.1", "@types/express": "^4.17.17", "@types/file-saver": "^2.0.5", - "@types/react": "^18.2.17", + "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "@types/styled-components": "^5.1.26", - "@types/uuid": "^9.0.2", + "@types/styled-components": "^5.1.27", + "@types/uuid": "^9.0.4", "amplitude-js": "^8.21.9", - "autoprefixer": "^10.4.14", - "axios": "^1.4.0", + "autoprefixer": "^10.4.15", + "axios": "^1.5.0", "babel-loader": "^9.1.3", "body-parser": "^1.20.2", "classnames": "^2.3.2", @@ -72,88 +69,75 @@ "file-loader": "^6.2.0", "file-saver": "^2.0.5", "http-proxy-middleware": "^2.0.6", - "https-proxy-agent": "^7.0.1", + "https-proxy-agent": "^7.0.2", "lodash.throttle": "^4.1.1", "loglevel": "^1.8.1", "namecase": "^1.1.2", - "nav-datovelger": "^12.6.0", - "nav-frontend-core": "^6.0.1", - "nav-frontend-js-utils": "^1.0.20", - "nav-frontend-lenker": "^2.0.2", - "nav-frontend-lenker-style": "^2.0.2", - "nav-frontend-paneler-style": "^2.0.2", - "nav-frontend-popover": "^2.0.4", - "nav-frontend-popover-style": "^2.0.2", - "nav-frontend-skjema": "^4.0.6", - "nav-frontend-skjema-style": "^3.0.3", - "nav-frontend-tabell-style": "^2.1.2", - "nav-frontend-typografi": "^4.0.2", - "nav-frontend-typografi-style": "^2.0.2", "passport": "^0.6.0", "passport-azure-ad": "^4.3.5", "prom-client": "^14.2.0", "prop-types": "^15.8.1", "react": "^18.2.0", "react-collapse": "^5.1.1", - "react-day-picker": "^7.4.10", + "react-day-picker": "^8.8.2", "react-dom": "^18.2.0", "react-is": "^18.2.0", - "react-pdf": "7.3.0", - "react-router-dom": "^6.14.2", + "react-pdf": "7.3.3", + "react-router-dom": "^6.16.0", "react-router-prompt": "^0.5.4", "react-select": "^5.7.4", - "snyk": "^1.1198.0", - "styled-components": "^5.3.5", + "snyk": "^1.1221.0", + "styled-components": "^6.0.8", "svg-inline-loader": "^0.8.2", "use-debounce": "^9.0.4", - "uuid": "^9.0.0" + "uuid": "^9.0.1" }, "devDependencies": { "@axe-core/react": "4.7.3", - "@babel/core": "^7.22.9", + "@babel/core": "^7.22.20", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@babel/preset-env": "^7.22.9", - "@babel/preset-react": "^7.22.5", - "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10", + "@babel/preset-env": "^7.22.20", + "@babel/preset-react": "^7.22.15", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@types/axe-core": "^2.0.7", - "@types/webpack": "^5.28.1", + "@types/webpack": "^5.28.2", "@types/webpack-dev-middleware": "^5.3.0", "@types/webpack-env": "^1.18.1", "@types/webpack-hot-middleware": "^2.25.6", - "@typescript-eslint/eslint-plugin": "^6.2.0", - "@typescript-eslint/parser": "^6.2.0", - "@typescript-eslint/typescript-estree": "^6.2.0", + "@typescript-eslint/eslint-plugin": "^6.7.0", + "@typescript-eslint/parser": "^6.7.0", + "@typescript-eslint/typescript-estree": "^6.7.0", "babel-polyfill": "^6.26.0", "babel-preset-react-app": "^10.0.1", "compression-webpack-plugin": "^10.0.0", "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.8.1", - "eslint": "^8.46.0", + "eslint": "^8.49.0", "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^8.9.0", - "eslint-plugin-import": "^2.28.0", + "eslint-config-prettier": "^9.0.0", + "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^5.0.0", - "eslint-plugin-react": "^7.33.1", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-webpack-plugin": "^4.0.1", "express-static-gzip": "^2.1.7", "fork-ts-checker-webpack-plugin": "^8.0.0", "html-webpack-plugin": "^5.5.3", "husky": "^8.0.3", - "less": "^4.1.3", + "less": "^4.2.0", "less-loader": "^11.1.3", - "lint-staged": "^13.2.3", + "lint-staged": "^14.0.1", "mini-css-extract-plugin": "^2.7.6", - "postcss": "^8.4.27", + "postcss": "^8.4.29", "postcss-loader": "^7.3.3", - "prettier": "^3.0.0", + "prettier": "^3.0.3", "react-hot-loader": "^4.13.1", "react-refresh": "^0.14.0", "style-loader": "^3.3.3", "ts-loader": "^9.4.4", "tsconfig-paths-webpack-plugin": "^4.1.0", - "typescript": "^5.1.6", + "typescript": "^5.2.2", "webpack": "^5.88.2", "webpack-cli": "^5.1.4", "webpack-dev-middleware": "^6.1.1", diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx index c78cdfe8e..e379d21f0 100644 --- a/src/frontend/App.tsx +++ b/src/frontend/App.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Modal } from '@navikt/ds-react'; +import { BodyLong } from '@navikt/ds-react'; import * as React from 'react'; import { useState } from 'react'; import { AppProvider, useApp } from './App/context/AppContext'; @@ -37,9 +37,6 @@ import { loggBesøkEvent } from './App/utils/amplitude/amplitudeLoggEvents'; import { BesøkEvent } from './App/utils/amplitude/typer'; import Innloggingsfeilmelding from './Felles/Varsel/Innloggingsfeilmelding'; -// @ts-ignore -Modal.setAppElement(document.getElementById('modal-a11y-wrapper')); - const Innhold = styled(BodyLong)` margin-top: 2rem; margin-bottom: 2rem; diff --git a/src/frontend/App/utils/dato.ts b/src/frontend/App/utils/dato.ts index cb770201b..a5dba36da 100644 --- a/src/frontend/App/utils/dato.ts +++ b/src/frontend/App/utils/dato.ts @@ -86,8 +86,13 @@ export const tilDato = (dato: string | Date): Date => export const tilLocaleDateString = (dato: Date) => formatISO(dato, { representation: 'date' }); -export const nullableTilDato = (dato: string | Date | undefined): Date | undefined => - typeof dato === 'string' ? parseISO(dato) : dato; +export const nullableTilDato = (dato: string | Date | undefined): Date | undefined => { + if (typeof dato === 'string') { + return dato !== '' ? parseISO(dato) : undefined; + } else { + return dato; + } +}; export const nullableDatoTilAlder = (dato?: string | Date | null): number | undefined => { return dato ? datoTilAlder(dato) : undefined; diff --git a/src/frontend/Felles/Datovelger/Datovelger.tsx b/src/frontend/Felles/Datovelger/Datovelger.tsx new file mode 100644 index 000000000..5a1f80eb2 --- /dev/null +++ b/src/frontend/Felles/Datovelger/Datovelger.tsx @@ -0,0 +1,39 @@ +import React, { FC } from 'react'; +import { useDatepicker, DatePicker } from '@navikt/ds-react'; +import { FamilieLesefelt } from '@navikt/familie-form-elements'; +import { nullableTilDato, tilLocaleDateString } from '../../App/utils/dato'; +import { formaterNullableIsoDato } from '../../App/utils/formatter'; + +export const Datovelger: FC<{ + verdi: string | undefined; + settVerdi: (verdi: string | undefined) => void; + erLesevisning?: boolean; + label: string; + id: string; + feil?: string; + maksDato?: Date; + minDato?: Date; +}> = ({ settVerdi, erLesevisning, verdi, label, id, feil, minDato, maksDato }) => { + const { datepickerProps, inputProps } = useDatepicker({ + defaultSelected: nullableTilDato(verdi), + onDateChange: (dato) => settVerdi(dato && tilLocaleDateString(dato)), + toDate: maksDato, + fromDate: minDato, + }); + + return ( +
+ {erLesevisning ? ( + + ) : ( + + + + )} +
+ ); +}; diff --git "a/src/frontend/Felles/F\303\270dselsnummer/KopierbartNullableF\303\270dselsnummer.tsx" "b/src/frontend/Felles/F\303\270dselsnummer/KopierbartNullableF\303\270dselsnummer.tsx" index 6093595d5..df0213a94 100644 --- "a/src/frontend/Felles/F\303\270dselsnummer/KopierbartNullableF\303\270dselsnummer.tsx" +++ "b/src/frontend/Felles/F\303\270dselsnummer/KopierbartNullableF\303\270dselsnummer.tsx" @@ -1,11 +1,13 @@ import React from 'react'; import { formaterFødselsnummer } from '../../App/utils/formatter'; -import Clipboard from '@navikt/familie-clipboard'; +import { CopyButton } from '@navikt/ds-react'; import styled from 'styled-components'; const NoWrapSpan = styled.span` white-space: nowrap; font-size: 16px; + display: flex; + align-items: center; `; export const KopierbartNullableFødselsnummer: React.FC<{ fødselsnummer: string }> = ({ @@ -13,9 +15,13 @@ export const KopierbartNullableFødselsnummer: React.FC<{ fødselsnummer: string }) => { return ( - - {formaterFødselsnummer(fødselsnummer)} - + {formaterFødselsnummer(fødselsnummer)} + ); }; diff --git a/src/frontend/Felles/Hamburgermeny/Hamburgermeny.tsx b/src/frontend/Felles/Hamburgermeny/Hamburgermeny.tsx index b29158d72..07088e441 100644 --- a/src/frontend/Felles/Hamburgermeny/Hamburgermeny.tsx +++ b/src/frontend/Felles/Hamburgermeny/Hamburgermeny.tsx @@ -1,12 +1,12 @@ import React, { FC, useEffect, useRef, useState } from 'react'; -import { Hamburger, EllipsisV } from '@navikt/ds-icons'; +import { MenuHamburgerIcon, MenuElipsisVerticalIcon } from '@navikt/aksel-icons'; import styled from 'styled-components'; interface HamburgerMenyInnholdProps { åpen: boolean; } -const HamburgerMenyIkon = styled(Hamburger)` +const HamburgerMenyIkon = styled(MenuHamburgerIcon)` margin: 1rem 1rem 0 1rem; &:hover { @@ -14,7 +14,7 @@ const HamburgerMenyIkon = styled(Hamburger)` } `; -const HamburgerMenyEllipsisVIkon = styled(EllipsisV)` +const HamburgerMenyEllipsisVIkon = styled(MenuElipsisVerticalIcon)` margin: 0.5rem 0.5rem 0 0.5rem; &:hover { @@ -26,8 +26,8 @@ const HamburgerWrapper = styled.div` position: relative; `; -const HamburgerMenyInnhold = styled.div` - display: ${(props: HamburgerMenyInnholdProps) => (props.åpen ? 'block' : 'none')}; +const HamburgerMenyInnhold = styled.div` + display: ${(props) => (props.åpen ? 'block' : 'none')}; position: absolute; diff --git "a/src/frontend/Felles/HeaderMedS\303\270k/headermeds\303\270k.less" "b/src/frontend/Felles/HeaderMedS\303\270k/headermeds\303\270k.less" index 98475377a..58948de8e 100644 --- "a/src/frontend/Felles/HeaderMedS\303\270k/headermeds\303\270k.less" +++ "b/src/frontend/Felles/HeaderMedS\303\270k/headermeds\303\270k.less" @@ -1,4 +1,3 @@ -@import (reference) '~nav-frontend-core/less/_variabler'; .header { position: sticky; diff --git a/src/frontend/Felles/Ikoner/BeslutterIkon.tsx b/src/frontend/Felles/Ikoner/BeslutterIkon.tsx index 8fb49fd0d..9252b2d25 100644 --- a/src/frontend/Felles/Ikoner/BeslutterIkon.tsx +++ b/src/frontend/Felles/Ikoner/BeslutterIkon.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { DecisionFilled } from '@navikt/ds-icons'; +import { PersonGavelFillIcon } from '@navikt/aksel-icons'; import { TidslinjeIkonbakgrunn } from './ikonelementer'; const BeslutterIkon: React.FC = () => { return ( - + ); }; diff --git a/src/frontend/Felles/Ikoner/SaksbehandlerIkon.tsx b/src/frontend/Felles/Ikoner/SaksbehandlerIkon.tsx index a695ddaed..d1e030175 100644 --- a/src/frontend/Felles/Ikoner/SaksbehandlerIkon.tsx +++ b/src/frontend/Felles/Ikoner/SaksbehandlerIkon.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { CaseworkerFilled } from '@navikt/ds-icons'; +import { PersonPencilFillIcon } from '@navikt/aksel-icons'; import { TidslinjeIkonbakgrunn } from './ikonelementer'; const SaksbehandlerIkon: React.FC = () => { return ( - + ); }; diff --git a/src/frontend/Felles/Ikoner/SystemIkon.tsx b/src/frontend/Felles/Ikoner/SystemIkon.tsx index b00cd1bd2..60dee9c57 100644 --- a/src/frontend/Felles/Ikoner/SystemIkon.tsx +++ b/src/frontend/Felles/Ikoner/SystemIkon.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; -import { AutomaticSystem } from '@navikt/ds-icons'; +import { CogRotationIcon } from '@navikt/aksel-icons'; import { TidslinjeIkonbakgrunn } from './ikonelementer'; const SystemIkon: React.FC = () => { return ( - + ); }; diff --git a/src/frontend/Felles/Input/EnsligFamilieSelect.tsx b/src/frontend/Felles/Input/EnsligFamilieSelect.tsx index fa4044f72..150aa5b94 100644 --- a/src/frontend/Felles/Input/EnsligFamilieSelect.tsx +++ b/src/frontend/Felles/Input/EnsligFamilieSelect.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { IFamilieSelectProps } from '@navikt/familie-form-elements/src/select/FamilieSelect'; +import { IFamilieSelectProps } from '@navikt/familie-form-elements'; import styled from 'styled-components'; import { FamilieSelect } from '@navikt/familie-form-elements'; diff --git "a/src/frontend/Felles/Input/M\303\245ned\303\205r/M\303\245ned\303\205rVelger.tsx" "b/src/frontend/Felles/Input/M\303\245ned\303\205r/M\303\245ned\303\205rVelger.tsx" index d795da410..6f1aa5d9e 100644 --- "a/src/frontend/Felles/Input/M\303\245ned\303\205r/M\303\245ned\303\205rVelger.tsx" +++ "b/src/frontend/Felles/Input/M\303\245ned\303\205r/M\303\245ned\303\205rVelger.tsx" @@ -56,11 +56,7 @@ const MånedÅrVelger: React.FC = ({ return (
- {label && ( - - {label} - - )} + {label && {label}} } + icon={} onClick={onClick} type="button" variant={knappetekst ? 'secondary' : 'tertiary'} diff --git a/src/frontend/Felles/Knapper/LeggTilKnapp.tsx b/src/frontend/Felles/Knapper/LeggTilKnapp.tsx index 2c6118506..3e5857693 100644 --- a/src/frontend/Felles/Knapper/LeggTilKnapp.tsx +++ b/src/frontend/Felles/Knapper/LeggTilKnapp.tsx @@ -1,4 +1,4 @@ -import { AddCircle } from '@navikt/ds-icons'; +import { PlusCircleIcon } from '@navikt/aksel-icons'; import React from 'react'; import { Knapp } from './HovedKnapp'; import { ButtonProps } from '@navikt/ds-react'; @@ -14,7 +14,7 @@ const LeggTilKnapp: React.FC<{ return ( } + icon={} iconPosition={ikonPosisjon} onClick={onClick} type="button" diff --git a/src/frontend/Felles/Knapper/NedKnapp.tsx b/src/frontend/Felles/Knapper/NedKnapp.tsx index 22ed817bb..0332cd8b4 100644 --- a/src/frontend/Felles/Knapper/NedKnapp.tsx +++ b/src/frontend/Felles/Knapper/NedKnapp.tsx @@ -1,4 +1,4 @@ -import { Down } from '@navikt/ds-icons'; +import { ArrowDownIcon } from '@navikt/aksel-icons'; import React from 'react'; import { Button } from '@navikt/ds-react'; @@ -8,7 +8,7 @@ const NedKnapp: React.FC<{ onClick: () => void; ikontekst: string }> = ({ onClic type={'button'} onClick={onClick} variant={'tertiary'} - icon={} + icon={} /> ); }; diff --git a/src/frontend/Felles/Knapper/OppKnapp.tsx b/src/frontend/Felles/Knapper/OppKnapp.tsx index 74715e0c5..5c4e50b6f 100644 --- a/src/frontend/Felles/Knapper/OppKnapp.tsx +++ b/src/frontend/Felles/Knapper/OppKnapp.tsx @@ -1,4 +1,4 @@ -import { Up } from '@navikt/ds-icons'; +import { ArrowUpIcon } from '@navikt/aksel-icons'; import React from 'react'; import { Button } from '@navikt/ds-react'; @@ -8,7 +8,7 @@ const OppKnapp: React.FC<{ onClick: () => void; ikontekst: string }> = ({ onClic type={'button'} onClick={onClick} variant={'tertiary'} - icon={} + icon={} /> ); }; diff --git a/src/frontend/Felles/Knapper/TilbakestillKnapp.tsx b/src/frontend/Felles/Knapper/TilbakestillKnapp.tsx index d51300a86..aaa2aa029 100644 --- a/src/frontend/Felles/Knapper/TilbakestillKnapp.tsx +++ b/src/frontend/Felles/Knapper/TilbakestillKnapp.tsx @@ -1,4 +1,4 @@ -import { Cancel } from '@navikt/ds-icons'; +import { ArrowUndoIcon } from '@navikt/aksel-icons'; import React from 'react'; import { Knapp } from './HovedKnapp'; @@ -12,7 +12,7 @@ const TilbakestillKnapp: React.FC<{ onClick={onClick} type="button" variant={knappetekst ? 'secondary' : 'tertiary'} - icon={} + icon={} > {knappetekst && {knappetekst}} diff --git a/src/frontend/Felles/Lenker/LenkeTilPersonopplysningsside.tsx b/src/frontend/Felles/Lenker/LenkeTilPersonopplysningsside.tsx index 013d08c7c..ee74265f7 100644 --- a/src/frontend/Felles/Lenker/LenkeTilPersonopplysningsside.tsx +++ b/src/frontend/Felles/Lenker/LenkeTilPersonopplysningsside.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from 'react'; import { Link } from '@navikt/ds-react'; -import { ExternalLink } from '@navikt/ds-icons'; +import { ExternalLinkIcon } from '@navikt/aksel-icons'; import { Ressurs, RessursStatus } from '../../App/typer/ressurs'; import { useApp } from '../../App/context/AppContext'; import { BodyShortSmall } from '../Visningskomponenter/Tekster'; @@ -40,7 +40,7 @@ export const LenkeTilPersonopplysningsside: React.FC = ({ personIdent, c redirectTilPersonopplysningsside(personIdent); }} > - {children} + {children} ) : ( diff --git a/src/frontend/Felles/Modal/ModalWrapper.tsx b/src/frontend/Felles/Modal/ModalWrapper.tsx index 707296881..9c78ac776 100644 --- a/src/frontend/Felles/Modal/ModalWrapper.tsx +++ b/src/frontend/Felles/Modal/ModalWrapper.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { Button, Heading, Modal } from '@navikt/ds-react'; +import { Button, Modal } from '@navikt/ds-react'; import React from 'react'; const ModalContainer = styled(Modal)<{ maxWidth?: number }>` @@ -7,12 +7,6 @@ const ModalContainer = styled(Modal)<{ maxWidth?: number }>` max-width: ${(props) => (props.maxWidth ? `${props.maxWidth}rem` : '40rem')}; `; -const Tittel = styled(Heading)` - margin-top: 0.5rem; - margin-right: 3.5rem; - margin-left: 2rem; -`; - const Innhold = styled.div` margin-right: 2rem; margin-left: 2rem; @@ -58,37 +52,36 @@ export const ModalWrapper: React.FC = ({ children, }) => { return ( - onClose() : () => null} - maxWidth={maxWidth} - aria-label={ariaLabel ? ariaLabel : tittel} - > - - - {tittel} - - {children} - {aksjonsknapper && ( - - - {aksjonsknapper.lukkKnapp.tekst} - - - {aksjonsknapper.hovedKnapp.tekst} - - - )} - - + visModal && ( + onClose() : () => null} + maxWidth={maxWidth} + aria-label={ariaLabel ? ariaLabel : tittel} + header={{ heading: tittel, closeButton: !!onClose }} + > + + {children} + {aksjonsknapper && ( + + + {aksjonsknapper.lukkKnapp.tekst} + + + {aksjonsknapper.hovedKnapp.tekst} + + + )} + + + ) ); }; diff --git a/src/frontend/Felles/PersonHeader/StatusElementer.tsx b/src/frontend/Felles/PersonHeader/StatusElementer.tsx index ba2184a5c..c02978b2d 100644 --- a/src/frontend/Felles/PersonHeader/StatusElementer.tsx +++ b/src/frontend/Felles/PersonHeader/StatusElementer.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { FC, useState } from 'react'; import { Behandling, behandlingResultatTilTekst } from '../../App/typer/fagsak'; -import { Expand } from '@navikt/ds-icons'; +import { ChevronDownIcon } from '@navikt/aksel-icons'; import { BodyShort, Button } from '@navikt/ds-react'; import { behandlingStatusTilTekst } from '../../App/typer/behandlingstatus'; import { behandlingstypeTilTekst } from '../../App/typer/behandlingstype'; @@ -18,8 +18,8 @@ export const GråTekst = styled(BodyShort)` color: ${ATextSubtle}; `; -const StatusMenyInnhold = styled.div` - display: ${(props: StatusMenyInnholdProps) => (props.åpen ? 'block' : 'none')}; +const StatusMenyInnhold = styled.div` + display: ${(props) => (props.åpen ? 'block' : 'none')}; position: absolute; @@ -113,7 +113,7 @@ const StatusMeny: FC<{ behandling: Behandling }> = ({ behandling }) => { onClick={() => { settÅpenStatusMeny(!åpenStatusMeny); }} - icon={} + icon={} />
    diff --git a/src/frontend/Felles/Personopplysninger/BarnBosted.tsx b/src/frontend/Felles/Personopplysninger/BarnBosted.tsx index f297a0305..f0e0bbc77 100644 --- a/src/frontend/Felles/Personopplysninger/BarnBosted.tsx +++ b/src/frontend/Felles/Personopplysninger/BarnBosted.tsx @@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react'; import { IBarn } from '../../App/typer/personopplysninger'; import { BodyShort, Popover } from '@navikt/ds-react'; import styled from 'styled-components'; -import { Information } from '@navikt/ds-icons'; +import { InformationSquareIcon } from '@navikt/aksel-icons'; import { popoverContentDeltBosted } from './BarnDeltBosted'; const FlexBox = styled.div` @@ -11,7 +11,7 @@ const FlexBox = styled.div` gap: 0.5rem; `; -const InformationIcon = styled(Information)` +const InformationIcon = styled(InformationSquareIcon)` &:hover { cursor: pointer; } diff --git a/src/frontend/Felles/Personopplysninger/NavKontor.tsx b/src/frontend/Felles/Personopplysninger/NavKontor.tsx index bdf6bca3a..3e3c8a979 100644 --- a/src/frontend/Felles/Personopplysninger/NavKontor.tsx +++ b/src/frontend/Felles/Personopplysninger/NavKontor.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { INavKontor } from '../../App/typer/personopplysninger'; import styled from 'styled-components'; import { Detail } from '@navikt/ds-react'; -import { Office1 } from '@navikt/ds-icons'; +import { Buldings3Icon } from '@navikt/aksel-icons'; const NavKontorContainer = styled.div` display: flex; @@ -11,7 +11,7 @@ const NavKontorContainer = styled.div` gap: 0.5rem; `; -const OfficeIkon = styled(Office1)` +const OfficeIkon = styled(Buldings3Icon)` width: 1rem; height: 1rem; `; diff --git a/src/frontend/Felles/Personopplysninger/PersonopplysningerMedNavKontor.tsx b/src/frontend/Felles/Personopplysninger/PersonopplysningerMedNavKontor.tsx index e19b82c39..1fe193e3c 100644 --- a/src/frontend/Felles/Personopplysninger/PersonopplysningerMedNavKontor.tsx +++ b/src/frontend/Felles/Personopplysninger/PersonopplysningerMedNavKontor.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import 'nav-frontend-tabell-style'; import InnflyttingUtflytting from './InnflyttingUtflytting'; import Barn from './Barn'; import Adressehistorikk from './Adressehistorikk'; diff --git a/src/frontend/Felles/Personopplysninger/TabellWrapper.tsx b/src/frontend/Felles/Personopplysninger/TabellWrapper.tsx index f35ef430b..e0f536e7d 100644 --- a/src/frontend/Felles/Personopplysninger/TabellWrapper.tsx +++ b/src/frontend/Felles/Personopplysninger/TabellWrapper.tsx @@ -46,6 +46,10 @@ export const TabellWrapper = styled.div<{ erDobbelTabell?: boolean }>` export const SmallTable = styled(Table).attrs({ size: 'small' })` max-width: max-content; + th, + td { + font-size: var(--a-font-size-medium); + } `; type Kolonnetittel = string | React.ReactNode; diff --git a/src/frontend/Felles/UtvidPanel/UtvidPanel.tsx b/src/frontend/Felles/UtvidPanel/UtvidPanel.tsx index 114713b02..e07411120 100644 --- a/src/frontend/Felles/UtvidPanel/UtvidPanel.tsx +++ b/src/frontend/Felles/UtvidPanel/UtvidPanel.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Button } from '@navikt/ds-react'; -import { Down, Up } from '@navikt/ds-icons'; +import { ArrowUpIcon, ArrowDownIcon } from '@navikt/aksel-icons'; import styled from 'styled-components'; export interface UtvidPanelProps { @@ -34,7 +34,7 @@ const UtvidPanel: React.FC = ({ size={'small'} variant={'tertiary'} onClick={onClick} - icon={åpen ? : } + icon={åpen ? : } > {knappTekst} diff --git a/src/frontend/Felles/Visningskomponenter/ToKolonnerLayout.tsx b/src/frontend/Felles/Visningskomponenter/ToKolonnerLayout.tsx index 8aa0b60a9..e525ffdb9 100644 --- a/src/frontend/Felles/Visningskomponenter/ToKolonnerLayout.tsx +++ b/src/frontend/Felles/Visningskomponenter/ToKolonnerLayout.tsx @@ -1,11 +1,10 @@ import React from 'react'; import styled from 'styled-components'; -const Container = styled.div` +const Container = styled.div<{ skillelinje?: boolean }>` display: flex; margin: 2rem; - border-bottom: ${(props: { skillelinje: boolean }) => - props.skillelinje ? '3px solid #e9e7e7' : 'none'}; + border-bottom: ${(props) => (props.skillelinje ? '3px solid var(--a-border-subtle)' : 'none')}; @media (max-width: 1600px) { flex-direction: column; diff --git a/src/frontend/Komponenter/Behandling/Brev/Flettefelt.tsx b/src/frontend/Komponenter/Behandling/Brev/Flettefelt.tsx index 0f83fc6aa..5f7a7df82 100644 --- a/src/frontend/Komponenter/Behandling/Brev/Flettefelt.tsx +++ b/src/frontend/Komponenter/Behandling/Brev/Flettefelt.tsx @@ -4,12 +4,10 @@ import { BrevStruktur, FlettefeltMedVerdi, Flettefeltreferanse } from './BrevTyp import styled from 'styled-components'; import { BodyShort, HelpText, Label, Textarea, TextField } from '@navikt/ds-react'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const StyledInput = styled(({ fetLabel, ...props }) => )` +const StyledInput = styled(({ ...props }) => ( + +))` padding-top: 0.5rem; - .skjemaelement__label { - font-weight: ${(fetLabel) => (fetLabel ? 600 : 300)}; - } `; const TekstMedHjelpetekstWrapper = styled.div` diff --git a/src/frontend/Komponenter/Behandling/Fanemeny/Fane.tsx b/src/frontend/Komponenter/Behandling/Fanemeny/Fane.tsx index 2219d5043..9e69b001e 100644 --- a/src/frontend/Komponenter/Behandling/Fanemeny/Fane.tsx +++ b/src/frontend/Komponenter/Behandling/Fanemeny/Fane.tsx @@ -23,7 +23,7 @@ const StyledNavLink = styled(NavLink)` padding-left: 5px; padding-right: 5px; - :hover { + &:hover { border-bottom: 5px solid ${ABlue400}; .navds-body-short { diff --git "a/src/frontend/Komponenter/Behandling/F\303\270rstegangsbehandling/OpprettF\303\270rstegangsbehandling.tsx" "b/src/frontend/Komponenter/Behandling/F\303\270rstegangsbehandling/OpprettF\303\270rstegangsbehandling.tsx" index 4da9d345c..4eb1549e4 100644 --- "a/src/frontend/Komponenter/Behandling/F\303\270rstegangsbehandling/OpprettF\303\270rstegangsbehandling.tsx" +++ "b/src/frontend/Komponenter/Behandling/F\303\270rstegangsbehandling/OpprettF\303\270rstegangsbehandling.tsx" @@ -15,12 +15,12 @@ import DataViewer from '../../../Felles/DataViewer/DataViewer'; import { BodyLong, BodyShort, Button, Heading, Label } from '@navikt/ds-react'; import { TextLabel } from '../../../Felles/Visningskomponenter/Tekster'; import { stønadstypeTilTekst } from '../../../App/typer/behandlingstema'; -import { FamilieDatovelger } from '@navikt/familie-form-elements'; import { erGyldigDato } from '../../../App/utils/dato'; import AlertStripeFeilPreWrap from '../../../Felles/Visningskomponenter/AlertStripeFeilPreWrap'; import styled from 'styled-components'; import { Behandlingsårsak, behandlingsårsakTilTekst } from '../../../App/typer/Behandlingsårsak'; import { Behandlingstype } from '../../../App/typer/behandlingstype'; +import { Datovelger } from '../../../Felles/Datovelger/Datovelger'; type IFagsakParam = { fagsakId: string; @@ -145,19 +145,19 @@ const OpprettFørstegangsbehandling = () => { - { + settVerdi={(dato) => { settKravMottattDato(dato as string); }} - value={kravMottattDato} + verdi={kravMottattDato} feil={ - kravMottattDato && - !erGyldigDato(kravMottattDato) && - 'Ugyldig dato' + kravMottattDato && !erGyldigDato(kravMottattDato) + ? 'Ugyldig dato' + : undefined } - limitations={{ maxDate: new Date().toISOString() }} + maksDato={new Date()} /> ` margin-right: 13px; border-right: 1px dashed #a0a0a0; - min-height: ${(props: LinjeProps) => - props.siste ? '30px' : props.størreMellomrom ? '75px' : '60px'}; - height: ${(props: LinjeProps) => (props.siste ? '30px' : '100%')}; + min-height: ${(props) => (props.siste ? '30px' : props.størreMellomrom ? '75px' : '60px')}; + height: ${(props) => (props.siste ? '30px' : '100%')}; `; const Innhold = styled.div``; -const StyledHistorikkElement = styled.li` +const StyledHistorikkElement = styled.li` display: flex; list-style: none; - padding: ${(props: StyledHistorikkElementProps) => - props.første ? '0.75rem 2rem 0' : '0 2rem'}; + padding: ${(props) => (props.første ? '0.75rem 2rem 0' : '0 2rem')}; .navds-body-short, .navds-label, @@ -118,7 +116,7 @@ const HistorikkElement: React.FC = ({ type={'button'} variant={'tertiary'} onClick={hentOgÅpneVedtaksbrev} - icon={} + icon={} iconPosition={'right'} size={'xsmall'} > diff --git "a/src/frontend/Komponenter/Behandling/H\303\270yremeny/H\303\270yremeny.tsx" "b/src/frontend/Komponenter/Behandling/H\303\270yremeny/H\303\270yremeny.tsx" index a63fedb48..67a5d3356 100644 --- "a/src/frontend/Komponenter/Behandling/H\303\270yremeny/H\303\270yremeny.tsx" +++ "b/src/frontend/Komponenter/Behandling/H\303\270yremeny/H\303\270yremeny.tsx" @@ -5,7 +5,7 @@ import Valgvisning from './Valgvisning'; import styled from 'styled-components'; import BehandlingHistorikk from './BehandlingHistorikk'; import Totrinnskontroll from '../Totrinnskontroll/Totrinnskontroll'; -import { Back, Next } from '@navikt/ds-icons'; +import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons'; import { useBehandling } from '../../../App/context/BehandlingContext'; import { RessursStatus } from '../../../App/typer/ressurs'; import { erBehandlingUnderArbeid } from '../../../App/typer/behandlingstatus'; @@ -16,14 +16,14 @@ interface IHøyremenyProps { åpenHøyremeny: boolean; } -const StyledBack = styled(Back)` +const StyledBack = styled(ChevronLeftIcon)` border-radius: 0; margin-top: 3px; margin-right: 2px; color: white; `; -const StyledNext = styled(Next)` +const StyledNext = styled(ChevronRightIcon)` border-radius: 0; margin-top: 3px; diff --git "a/src/frontend/Komponenter/Behandling/H\303\270yremeny/Valgvisning.tsx" "b/src/frontend/Komponenter/Behandling/H\303\270yremeny/Valgvisning.tsx" index 3a00a87fc..09e2e0787 100644 --- "a/src/frontend/Komponenter/Behandling/H\303\270yremeny/Valgvisning.tsx" +++ "b/src/frontend/Komponenter/Behandling/H\303\270yremeny/Valgvisning.tsx" @@ -1,7 +1,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { Høyremenyvalg } from './Høyremeny'; -import { Folder, ClockFilled } from '@navikt/ds-icons'; +import { FolderIcon, ClockFillIcon } from '@navikt/aksel-icons'; import { BodyShortSmall } from '../../../Felles/Visningskomponenter/Tekster'; import { ABlue400, ABlue500, AGray100, ABorderStrong } from '@navikt/ds-tokens/dist/tokens'; @@ -25,13 +25,13 @@ interface IkonProps { } const StyledIkon = styled.div` flex: 1; - padding-top: 1rem; - padding-bottom: 0.62rem; + padding-top: 0.75rem; + padding-bottom: 0.25rem; background-color: ${ABlue500}; color: ${ABlue500}; - :hover { + &:hover { cursor: pointer; svg { fill: ${ABlue400}; @@ -56,7 +56,7 @@ const Valgvisning: React.FC = ({ aktiv, settAktiv }) => { erAktiv={aktiv === Høyremenyvalg.Logg} onClick={() => settAktiv(Høyremenyvalg.Logg)} > - + Historikk = ({ aktiv, settAktiv }) => { erAktiv={aktiv === Høyremenyvalg.Mappe} onClick={() => settAktiv(Høyremenyvalg.Mappe)} > - + Dokumenter diff --git "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Aleneomsorg/Bosted.tsx" "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Aleneomsorg/Bosted.tsx" index cd0feb99f..96150d5a4 100644 --- "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Aleneomsorg/Bosted.tsx" +++ "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Aleneomsorg/Bosted.tsx" @@ -4,7 +4,7 @@ import { VilkårInfoIkon } from '../../Vilkårpanel/VilkårInformasjonKomponente import { IDeltBostedPeriode } from '../../../../App/typer/personopplysninger'; import styled from 'styled-components'; import { Popover } from '@navikt/ds-react'; -import { Information } from '@navikt/ds-icons'; +import { InformationSquareIcon } from '@navikt/aksel-icons'; import { popoverContentDeltBosted } from '../../../../Felles/Personopplysninger/BarnDeltBosted'; interface Props { @@ -21,7 +21,7 @@ const FlexBox = styled.div` gap: 0.5rem; `; -const InformationIcon = styled(Information)` +const InformationIcon = styled(InformationSquareIcon)` &:hover { cursor: pointer; } diff --git "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/KopierInngangsvilk\303\245r.tsx" "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/KopierInngangsvilk\303\245r.tsx" index 12a997aee..ed000cf79 100644 --- "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/KopierInngangsvilk\303\245r.tsx" +++ "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/KopierInngangsvilk\303\245r.tsx" @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; -import { Collapse, Expand, ExternalLink } from '@navikt/ds-icons'; +import { ChevronUpIcon, ChevronDownIcon, ExternalLinkIcon } from '@navikt/aksel-icons'; import { Alert, BodyLong, Button, Heading, Link } from '@navikt/ds-react'; import { Behandling, behandlingResultatTilTekst } from '../../../../App/typer/fagsak'; import { behandlingstypeTilTekst } from '../../../../App/typer/behandlingstype'; @@ -60,7 +60,7 @@ export const KopierInngangsvilkår: React.FC = ({ <ÅpneLukkeKnapp type={'button'} variant={'tertiary'} - icon={visForrigeBehandlinger ? : } + icon={visForrigeBehandlinger ? : } iconPosition={'right'} onClick={() => { settVisForrigeBehandlinger((prevState) => !prevState); @@ -103,7 +103,7 @@ export const KopierInngangsvilkår: React.FC = ({ target={'_blank'} > {behandlingstypeTilTekst[behandling.type]} - + {behandlingStatusTilTekst[behandling.status]} diff --git "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/OppdaterOpplysninger.tsx" "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/OppdaterOpplysninger.tsx" index 9168ad7b7..7d818d91a 100644 --- "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/OppdaterOpplysninger.tsx" +++ "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/OppdaterOpplysninger.tsx" @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import styled from 'styled-components'; -import { Refresh } from '@navikt/ds-icons'; +import { ArrowsCirclepathIcon } from '@navikt/aksel-icons'; import { Button, HelpText } from '@navikt/ds-react'; import { DetailSmall } from '../../../../Felles/Visningskomponenter/Tekster'; import { ATextSubtle } from '@navikt/ds-tokens/dist/tokens'; @@ -62,7 +62,7 @@ export const OppdaterOpplysninger: React.FC = ({ loading={nyGrunnlagsdataHentes} variant={'tertiary'} size={'small'} - icon={} + icon={} > Oppdater diff --git "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/\303\205pneOgLukkePanelKnapper.tsx" "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/\303\205pneOgLukkePanelKnapper.tsx" index 3008a4ff9..7de5b5303 100644 --- "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/\303\205pneOgLukkePanelKnapper.tsx" +++ "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Inngangsvilk\303\245rHeader/\303\205pneOgLukkePanelKnapper.tsx" @@ -1,5 +1,5 @@ import React from 'react'; -import { Collapse, Expand } from '@navikt/ds-icons'; +import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons'; import { Button } from '@navikt/ds-react'; import styled from 'styled-components'; @@ -16,10 +16,10 @@ interface Props { export const ÅpneOgLukkePanelKnapper: React.FC = ({ lukkAlle, åpneAlle }) => { return ( - - diff --git "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/NyttBarnSammePartner/Tabell.tsx" "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/NyttBarnSammePartner/Tabell.tsx" index 4d381e3bc..9cefed219 100644 --- "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/NyttBarnSammePartner/Tabell.tsx" +++ "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/NyttBarnSammePartner/Tabell.tsx" @@ -30,9 +30,13 @@ const IngenDataContainer = styled.div` margin-top: 1.5rem; `; +const Container = styled.div` + margin-bottom: 1rem; +`; + export function Tabell({ data, kolonner, onEmpty }: Props): React.ReactElement { return ( -
    + @@ -66,6 +70,6 @@ export function Tabell({ data, kolonner, onEmpty }: Props): React.ReactEle {onEmpty} )} -
    + ); } diff --git "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Samliv/Bostedsadresse.tsx" "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Samliv/Bostedsadresse.tsx" index 47b9902c0..d7a109514 100644 --- "a/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Samliv/Bostedsadresse.tsx" +++ "b/src/frontend/Komponenter/Behandling/Inngangsvilk\303\245r/Samliv/Bostedsadresse.tsx" @@ -5,7 +5,7 @@ import { useApp } from '../../../../App/context/AppContext'; import { byggTomRessurs, Ressurs, RessursStatus } from '../../../../App/typer/ressurs'; import DataViewer from '../../../../Felles/DataViewer/DataViewer'; import styled from 'styled-components'; -import { Collapse, Expand } from '@navikt/ds-icons'; +import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons'; import { AlertStripeVariant } from '../../../../Felles/Visningskomponenter/AlertStripeFeilPreWrap'; import { Button } from '@navikt/ds-react'; import { BodyShortSmall } from '../../../../Felles/Visningskomponenter/Tekster'; @@ -74,7 +74,7 @@ export const Bostedsadresse = ({ behandlingId, personalia }: BostedsadresseProps : } + icon={visBeboere ? : } iconPosition={'right'} onClick={() => { settVisBeboere(!visBeboere); diff --git "a/src/frontend/Komponenter/Behandling/SettP\303\245Vent/FristVelger.tsx" "b/src/frontend/Komponenter/Behandling/SettP\303\245Vent/FristVelger.tsx" index 67fdf8150..3ec96d9d9 100644 --- "a/src/frontend/Komponenter/Behandling/SettP\303\245Vent/FristVelger.tsx" +++ "b/src/frontend/Komponenter/Behandling/SettP\303\245Vent/FristVelger.tsx" @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { IOppgave } from '../../Oppgavebenk/typer/oppgave'; -import { UNSAFE_useDatepicker, UNSAFE_DatePicker } from '@navikt/ds-react'; +import { useDatepicker, DatePicker } from '@navikt/ds-react'; import { nullableTilDato, tilLocaleDateString } from '../../../App/utils/dato'; import { FamilieLesefelt } from '@navikt/familie-form-elements'; import { formaterNullableIsoDato } from '../../../App/utils/formatter'; @@ -10,7 +10,7 @@ export const FristVelger: FC<{ settFrist: (frist: string | undefined) => void; erLesevisning: boolean; }> = ({ oppgave, settFrist, erLesevisning }) => { - const { datepickerProps, inputProps } = UNSAFE_useDatepicker({ + const { datepickerProps, inputProps } = useDatepicker({ defaultSelected: nullableTilDato(oppgave.fristFerdigstillelse), onDateChange: (dato) => settFrist(dato && tilLocaleDateString(dato)), }); @@ -24,9 +24,9 @@ export const FristVelger: FC<{ verdi={formaterNullableIsoDato(oppgave.fristFerdigstillelse)} /> ) : ( - - - + + + )}
); diff --git "a/src/frontend/Komponenter/Behandling/Simulering/Simulering\303\205rvelger.tsx" "b/src/frontend/Komponenter/Behandling/Simulering/Simulering\303\205rvelger.tsx" index aabd8a392..fd8dba50a 100644 --- "a/src/frontend/Komponenter/Behandling/Simulering/Simulering\303\205rvelger.tsx" +++ "b/src/frontend/Komponenter/Behandling/Simulering/Simulering\303\205rvelger.tsx" @@ -2,7 +2,7 @@ import React from 'react'; import { ISimuleringÅrsvelger } from './SimuleringTyper'; import styled from 'styled-components'; import { Button } from '@navikt/ds-react'; -import { Left, Right } from '@navikt/ds-icons'; +import { ArrowLeftIcon, ArrowRightIcon } from '@navikt/aksel-icons'; const Årstall = styled.span` margin: 0 1rem; @@ -15,14 +15,14 @@ const SimuleringÅrvelger: React.FC<{ årsvelger: ISimuleringÅrsvelger }> = ({ return (
- - - {feilmelding && {feilmelding}} - - + visModal && ( + settVisModal(false)} open={visModal}> + + + + Er du sikker på at du vil nullstille lagret vedtak? Du vil miste alle + lagrede opplysninger på vedtak og beregningssiden. + + + + + + + {feilmelding && {feilmelding}} + + + ) ); }; diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/IngenBegrunnelseOppgitt.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/IngenBegrunnelseOppgitt.tsx" index 5d421d2d5..495582704 100644 --- "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/IngenBegrunnelseOppgitt.tsx" +++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Overgangsst\303\270nad/InnvilgeVedtak/IngenBegrunnelseOppgitt.tsx" @@ -7,10 +7,14 @@ export const StyledDiv = styled.div` margin-bottom: 2rem; `; +const SmallTextLabelMedMargin = styled(SmallTextLabel)` + margin-bottom: 0.5rem; +`; + export const IngenBegrunnelseOppgitt: React.FC = () => { return ( - Begrunnelse + Begrunnelse Ingen opplysninger oppgitt. diff --git "a/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rInformasjonKomponenter.tsx" "b/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rInformasjonKomponenter.tsx" index 781502c72..9be12ef22 100644 --- "a/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rInformasjonKomponenter.tsx" +++ "b/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rInformasjonKomponenter.tsx" @@ -6,8 +6,7 @@ import EtikettDød from '../../../Felles/Etiketter/EtikettDød'; import LiteBarn from '../../../Felles/Ikoner/LiteBarn'; import styled from 'styled-components'; import { Registergrunnlag, Søknadsgrunnlag } from '../../../Felles/Ikoner/DataGrunnlagIkoner'; -import { Calculator } from '@navikt/ds-icons'; -import { SackKronerIcon } from '@navikt/aksel-icons'; +import { CalculatorIcon, SackKronerIcon } from '@navikt/aksel-icons'; interface UnderseksjonWrapperProps { underoverskrift: string; @@ -94,7 +93,7 @@ export const mapIkon = (ikon: VilkårInfoIkon) => { case VilkårInfoIkon.SØKNAD: return ; case VilkårInfoIkon.KALKULATOR: - return ; + return ; case VilkårInfoIkon.PENGESEKK: return ; } diff --git "a/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rpanel.tsx" "b/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rpanel.tsx" index 7e351a2f7..bf698ec63 100644 --- "a/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rpanel.tsx" +++ "b/src/frontend/Komponenter/Behandling/Vilk\303\245rpanel/Vilk\303\245rpanel.tsx" @@ -2,7 +2,7 @@ import React, { FC, ReactNode } from 'react'; import styled from 'styled-components'; import { Vilkårsresultat, VilkårType } from '../Inngangsvilkår/vilkår'; import { Button, Heading } from '@navikt/ds-react'; -import { Collapse, Expand } from '@navikt/ds-icons'; +import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons'; import { VilkårsresultatIkon } from '../../../Felles/Ikoner/VilkårsresultatIkon'; import { BodyShortSmall } from '../../../Felles/Visningskomponenter/Tekster'; import { AGray50, ATextSubtle } from '@navikt/ds-tokens/dist/tokens'; @@ -72,9 +72,9 @@ export const Vilkårpanel: FC = ({ variant="tertiary" icon={ ekspanderteVilkår[vilkår] === EkspandertTilstand.KOLLAPSET ? ( - + ) : ( - + ) } onClick={() => toggleEkspandertTilstand(vilkår)} diff --git "a/src/frontend/Komponenter/Behandling/Vurdering/Delvilk\303\245rContainer.tsx" "b/src/frontend/Komponenter/Behandling/Vurdering/Delvilk\303\245rContainer.tsx" index 92f460365..407994c52 100644 --- "a/src/frontend/Komponenter/Behandling/Vurdering/Delvilk\303\245rContainer.tsx" +++ "b/src/frontend/Komponenter/Behandling/Vurdering/Delvilk\303\245rContainer.tsx" @@ -1,6 +1,6 @@ import styled from 'styled-components'; -export const DelvilkårContainer = styled.div` +export const DelvilkårContainer = styled.div<{ hjelpetekstMaxWidth?: number }>` display: flex; .radiogruppe { @@ -8,8 +8,7 @@ export const DelvilkårContainer = styled.div` } .hjelpetekst__innhold { - max-width: ${(props: { hjelpetekstMaxWidth?: number }) => - props.hjelpetekstMaxWidth || 22}rem; + max-width: ${(props) => props.hjelpetekstMaxWidth || 22}rem; } .knapp { diff --git a/src/frontend/Komponenter/Behandling/Vurdering/EndreVurdering.tsx b/src/frontend/Komponenter/Behandling/Vurdering/EndreVurdering.tsx index 18b4f6d8b..85b8a109d 100644 --- a/src/frontend/Komponenter/Behandling/Vurdering/EndreVurdering.tsx +++ b/src/frontend/Komponenter/Behandling/Vurdering/EndreVurdering.tsx @@ -6,7 +6,7 @@ import { Ressurs, RessursStatus } from '../../../App/typer/ressurs'; import EndreVurderingComponent from './EndreVurderingComponent'; import { useBehandling } from '../../../App/context/BehandlingContext'; import { Redigeringsmodus } from './VisEllerEndreVurdering'; -import { Cancel } from '@navikt/ds-icons'; +import { ArrowUndoIcon } from '@navikt/aksel-icons'; import { Button, ErrorMessage, Heading } from '@navikt/ds-react'; import { EkspandertTilstand, @@ -92,7 +92,7 @@ const EndreVurdering: FC = ({