Skip to content

Commit 3a62b7a

Browse files
AudunSorheimAudunSorheim
authored
Bump designsystem (#222)
* Bump designsystem
1 parent 14e0469 commit 3a62b7a

24 files changed

+8756
-7452
lines changed

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
registry=https://registry.npmjs.org/
22
@navikt:registry=https://npm.pkg.github.com
33
//npm.pkg.github.com/:_authToken=${NPM_AUTH_TOKEN}
4+
legacy-peer-deps=true

‎package-lock.json

+8,639-7,374
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,12 @@
2222
},
2323
"dependencies": {
2424
"@grafana/faro-web-sdk": "^1.0.5",
25-
"@navikt/dinesykmeldte-sidemeny": "^3.0.0",
26-
"@navikt/ds-css": "^2.0.1",
27-
"@navikt/ds-icons": "^2.0.1",
28-
"@navikt/ds-react": "^2.0.1",
29-
"@navikt/nav-dekoratoren-moduler": "^1.8.1",
25+
"@navikt/aksel-icons": "4.1.3",
26+
"@navikt/dinesykmeldte-sidemeny": "^3.1.0",
27+
"@navikt/ds-css": "^4.1.3",
28+
"@navikt/ds-icons": "^3.4.3",
29+
"@navikt/ds-react": "4.1.3",
30+
"@navikt/nav-dekoratoren-moduler": "^2.0.1",
3031
"@navikt/next-logger": "^1.19.0",
3132
"@tanstack/react-query": "^4.13.0",
3233
"@tanstack/react-query-devtools": "^4.13.0",
@@ -40,13 +41,12 @@
4041
"next": "^13.2.4",
4142
"openid-client": "^5.1.9",
4243
"pino": "^8.7.0",
43-
"prop-types": "^15.8.1",
4444
"react": "^18.2.0",
4545
"react-datepicker": "^4.8.0",
4646
"react-dom": "^18.2.0",
4747
"react-error-boundary": "^3.1.4",
4848
"react-hook-form": "^7.36.1",
49-
"styled-components": "^5.3.7",
49+
"styled-components": "^6.0.0-rc.3",
5050
"uuid": "^9.0.0",
5151
"zod": "^3.19.1"
5252
},

‎src/components/arbeidsoppgaver/ArbeidsoppgaveCard.tsx

+32-10
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,6 @@ import { VurderButton } from "../blocks/buttons/VurderButton";
99
import { VurderingFraSykmeldt } from "./VurderingFraSykmeldt";
1010
import { useAudience } from "../../hooks/routeHooks";
1111
import { KANGJENNOMFOERES } from "../../constants/konstanter";
12-
import {
13-
Edit,
14-
ErrorColored,
15-
SuccessColored,
16-
WarningColored,
17-
} from "@navikt/ds-icons";
1812
import { useState } from "react";
1913
import { Card } from "../blocks/card/Card";
2014
import { CardHeader } from "../blocks/card/CardHeader";
@@ -27,6 +21,13 @@ import {
2721
getAktorNavn,
2822
} from "../../utils/textContextUtils";
2923
import { ARBEIDSOPPGAVE_CARD } from "../../../cypress/dataTestId";
24+
import {
25+
CheckmarkCircleFillIcon,
26+
ExclamationmarkTriangleFillIcon,
27+
PencilIcon,
28+
XMarkOctagonFillIcon,
29+
} from "@navikt/aksel-icons";
30+
import { IconWrapper } from "../blocks/icons/IconWrapper";
3031

3132
interface Props {
3233
arbeidstakerFnr: string;
@@ -66,7 +67,7 @@ export const ArbeidsoppgaveCard = ({
6667
return (
6768
<Button
6869
variant={"tertiary"}
69-
icon={<Edit aria-hidden />}
70+
icon={<PencilIcon aria-hidden />}
7071
onClick={() => setEditererArbeidsoppgave(true)}
7172
>
7273
Endre
@@ -94,7 +95,14 @@ export const ArbeidsoppgaveCard = ({
9495
{type === KANGJENNOMFOERES.KAN && (
9596
<Card>
9697
<CardHeader>
97-
<SuccessColored aria-hidden />
98+
<IconWrapper>
99+
<CheckmarkCircleFillIcon
100+
aria-hidden
101+
color={"var(--a-green-600)"}
102+
width={30}
103+
height={30}
104+
/>
105+
</IconWrapper>
98106
{texts.arbeidsoppgaveList.cards.kan}
99107
</CardHeader>
100108
<ArbeidsoppgaveHeading navn={arbeidsoppgave.arbeidsoppgavenavn} />
@@ -135,7 +143,14 @@ export const ArbeidsoppgaveCard = ({
135143
{type === KANGJENNOMFOERES.KAN_IKKE && (
136144
<Card>
137145
<CardHeader>
138-
<ErrorColored aria-hidden />
146+
<IconWrapper>
147+
<XMarkOctagonFillIcon
148+
aria-hidden
149+
color={"var(--ac-alert-icon-error-color,var(--a-icon-danger))"}
150+
width={30}
151+
height={30}
152+
/>
153+
</IconWrapper>
139154
{texts.arbeidsoppgaveList.cards.kanIkke}
140155
</CardHeader>
141156
<ArbeidsoppgaveHeading navn={arbeidsoppgave.arbeidsoppgavenavn} />
@@ -156,7 +171,14 @@ export const ArbeidsoppgaveCard = ({
156171
(!type && (
157172
<Card>
158173
<CardHeader>
159-
<WarningColored aria-hidden />
174+
<IconWrapper>
175+
<ExclamationmarkTriangleFillIcon
176+
color="var(--ac-alert-icon-warning-color,var(--a-icon-warning))"
177+
aria-hidden
178+
width={30}
179+
height={30}
180+
/>
181+
</IconWrapper>{" "}
160182
{texts.arbeidsoppgaveList.cards.ikkeVurdert}
161183
</CardHeader>
162184
<ArbeidsoppgaveHeading navn={arbeidsoppgave.arbeidsoppgavenavn} />

‎src/components/arbeidsoppgaver/SlettArbeidsoppgaveButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Delete } from "@navikt/ds-icons";
1+
import { TrashIcon } from "@navikt/aksel-icons";
22
import { Button, Heading, Modal } from "@navikt/ds-react";
33
import React, { useState } from "react";
44
import styled from "styled-components";
@@ -76,7 +76,7 @@ export const SlettArbeidsoppgaveButton = ({
7676

7777
<Button
7878
variant={"tertiary"}
79-
icon={<Delete aria-hidden />}
79+
icon={<TrashIcon aria-hidden />}
8080
onClick={() => setModalOpen(true)}
8181
>
8282
{texts.arbeidsoppgaveList.buttons.slett}

‎src/components/blocks/datepicker/Datepicker.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { ReactNode } from "react";
22
import { useController, Validate } from "react-hook-form";
3-
import { UNSAFE_DatePicker, UNSAFE_useDatepicker } from "@navikt/ds-react";
3+
import { DatePicker, useDatepicker } from "@navikt/ds-react";
44
import { leggTilDagerPaDato, toDate } from "../../../utils/dateUtils";
55

66
export interface Props {
@@ -20,7 +20,7 @@ const Datepicker = ({ testid, name, label, defaultValue, validate }: Props) => {
2020
},
2121
});
2222

23-
const { datepickerProps, inputProps } = UNSAFE_useDatepicker({
23+
const { datepickerProps, inputProps } = useDatepicker({
2424
defaultSelected: field.value ? toDate(field.value) : undefined,
2525
toDate: leggTilDagerPaDato(new Date(), 365 * 5),
2626
onDateChange: (date: Date | undefined) => {
@@ -29,16 +29,16 @@ const Datepicker = ({ testid, name, label, defaultValue, validate }: Props) => {
2929
});
3030

3131
return (
32-
<UNSAFE_DatePicker {...datepickerProps}>
33-
<UNSAFE_DatePicker.Input
32+
<DatePicker {...datepickerProps}>
33+
<DatePicker.Input
3434
id={field.name}
3535
data-testid={testid}
3636
{...inputProps}
3737
label={label}
3838
placeholder="DD.MM.ÅÅÅÅ"
3939
error={fieldState.error?.message}
4040
/>
41-
</UNSAFE_DatePicker>
41+
</DatePicker>
4242
);
4343
};
4444

‎src/components/blocks/icons/AddColored.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import { DS_COLOR_FEEDBACK_WARNING_ICON } from "../../../styles/colors/ColorConstants";
2-
import { AddCircleFilled } from "@navikt/ds-icons";
2+
import { PlusCircleFillIcon } from "@navikt/aksel-icons";
3+
import { IconWrapper } from "./IconWrapper";
34

45
export const AddColored = () => {
5-
return <AddCircleFilled color={DS_COLOR_FEEDBACK_WARNING_ICON} aria-hidden />;
6+
return (
7+
<IconWrapper>
8+
<PlusCircleFillIcon
9+
color={DS_COLOR_FEEDBACK_WARNING_ICON}
10+
aria-hidden
11+
width={30}
12+
height={30}
13+
/>
14+
</IconWrapper>
15+
);
616
};

‎src/components/blocks/icons/IconWrapper.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import styled from "styled-components";
2+
3+
export const IconWrapper = styled.div`
4+
height: 100%;
5+
align-content: center;
6+
display: flex;
7+
`;

‎src/components/blocks/images/sun.svg

+1
Loading

‎src/components/blocks/testscenarioselector/TestScenarioSelector.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Button, Heading, Modal, Radio, RadioGroup } from "@navikt/ds-react";
22
import styled from "styled-components";
3-
import Sun from "@navikt/ds-icons/svg/Sun.svg";
4-
import Image from "next/image";
3+
import SunImage from "../../blocks/images/sun.svg";
54
import { ImageContainer } from "../wrappers/ImageContainer";
65
import React, { useEffect, useState } from "react";
76
import { Row } from "../wrappers/Row";
@@ -11,6 +10,7 @@ import {
1110
useActiveTestScenario,
1211
useSetActiveTestScenario,
1312
} from "../../../api/queries/testScenarioQueries";
13+
import Image from "next/image";
1414

1515
const MockdataWrapper = styled.div`
1616
position: fixed;
@@ -172,8 +172,8 @@ export const TestScenarioSelector = () => {
172172
</Modal>
173173

174174
<MockdataWrapper id="TestScenarioSelector" onClick={() => setOpen(!open)}>
175-
<ImageContainer width={"4rem"}>
176-
<Image src={Sun} fill={true} alt={""} color={"#FF0000"} />
175+
<ImageContainer>
176+
<Image src={SunImage} alt="" width={40} height={40} />
177177
</ImageContainer>
178178
</MockdataWrapper>
179179
</>

‎src/components/blocks/wrappers/ArbeidsgiverSide.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ import { ArbeidsgiverSideMenu } from "../sidemenu/ArbeidsgiverSideMenu";
88
import { PageContainer } from "@navikt/dinesykmeldte-sidemeny";
99
import { Sykmeldt } from "../../../schema/sykmeldtSchema";
1010
import { addSpaceAfterEverySixthCharacter } from "../../../utils/stringUtils";
11-
import { People } from "@navikt/ds-icons";
11+
import { PersonIcon } from "@navikt/aksel-icons";
1212
import { IkkeTilgangTilAnsattInfoBoks } from "../infoboks/IkkeTilgangTilAnsattInfoBoks";
1313

1414
const getSykmeldtHeader = (sykmeldt?: Sykmeldt) => {
1515
if (sykmeldt?.navn && sykmeldt.fnr) {
1616
return {
1717
title: sykmeldt.navn,
1818
subtitle: `Fødselsnr: ${addSpaceAfterEverySixthCharacter(sykmeldt?.fnr)}`,
19-
Icon: People,
19+
Icon: PersonIcon,
2020
};
2121
}
2222

‎src/components/blocks/wrappers/ImageContainer.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import styled from "styled-components";
22

33
interface ImageContainerProps {
4-
width: string;
4+
width?: string;
55
}
66

77
export const ImageContainer = styled.div<ImageContainerProps>`
8-
display: block;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
911
width: ${(p) => p.width};
1012
`;

‎src/components/status/AapnePlanSomPDF.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { usePdfApiUrl } from "../../hooks/routeHooks";
2-
import { FileContent } from "@navikt/ds-icons";
2+
import { FilePdfIcon } from "@navikt/aksel-icons";
33
import { Button } from "@navikt/ds-react";
44

55
interface Props {
@@ -12,7 +12,7 @@ export const AapnePlanSomPDF = ({ oppfolgingsplanId }: Props) => {
1212
return (
1313
<Button
1414
onClick={() => window.open(pdfUrl, "_blank", "noopener,noreferrer")}
15-
icon={<FileContent aria-hidden />}
15+
icon={<FilePdfIcon aria-hidden />}
1616
variant="tertiary"
1717
>
1818
Åpne som pdf

‎src/components/status/AvvisPlanKnapp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Edit } from "@navikt/ds-icons";
1+
import { PencilIcon } from "@navikt/aksel-icons";
22
import { Button } from "@navikt/ds-react";
33
import { useOppfolgingsplanUrl } from "../../hooks/routeHooks";
44
import { useRouter } from "next/router";
@@ -24,7 +24,7 @@ export const AvvisPlanKnapp = ({ oppfolgingsplanId }: Props) => {
2424
router.push(arbeidsOppgaverPage);
2525
})
2626
}
27-
icon={<Edit aria-hidden />}
27+
icon={<PencilIcon aria-hidden />}
2828
variant="tertiary"
2929
>
3030
Gjør endringer

‎src/components/status/GodkjennOppfolgingsplan.tsx

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
import { BodyLong, Button, Checkbox, Heading } from "@navikt/ds-react";
1+
import { Alert, BodyLong, Button, Checkbox, Heading } from "@navikt/ds-react";
22
import { useState } from "react";
33
import { SpacedDiv } from "../blocks/wrappers/SpacedDiv";
44
import { useGodkjennsistOppfolgingsplan } from "../../api/queries/oppfolgingsplan/oppfolgingsplanQueries";
55
import { Godkjenning } from "../../types/oppfolgingsplan";
6-
import { InformationColored } from "@navikt/ds-icons";
7-
import styled from "styled-components";
8-
9-
const AlignedContent = styled.div`
10-
display: flex;
11-
gap: 1rem;
12-
align-items: center;
13-
`;
146

157
export type MotpartNavnForAltinn = "arbeidstakeren" | "arbeidsgiveren din";
168

@@ -40,10 +32,9 @@ export const GodkjennOppfolgingsplan = ({
4032
</BodyLong>
4133
<SpacedDiv>
4234
{godkjenninger.find((godkjenning) => godkjenning.delMedNav) ? (
43-
<AlignedContent>
44-
<InformationColored />
35+
<Alert variant="info">
4536
Planen vil bli delt med NAV når du godkjenner den.
46-
</AlignedContent>
37+
</Alert>
4738
) : (
4839
<Checkbox
4940
onChange={() => setDelMedNav(!delMedNav)}

‎src/components/status/NullstillGodkjenningKnapp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Edit } from "@navikt/ds-icons";
1+
import { PencilIcon } from "@navikt/aksel-icons";
22
import { Button } from "@navikt/ds-react";
33
import { useOppfolgingsplanUrl } from "../../hooks/routeHooks";
44
import { useRouter } from "next/router";
@@ -24,7 +24,7 @@ export const NullstillGodkjenningKnapp = ({ oppfolgingsplanId }: Props) => {
2424
router.push(arbeidsoppgaverUrl);
2525
})
2626
}
27-
icon={<Edit aria-hidden />}
27+
icon={<PencilIcon aria-hidden />}
2828
variant="tertiary"
2929
>
3030
Rediger planen

‎src/components/status/SePlan.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { FileContent } from "@navikt/ds-icons";
1+
import { FileSearchIcon } from "@navikt/aksel-icons";
22
import { Button, Modal } from "@navikt/ds-react";
33
import { useState } from "react";
44
import styled from "styled-components";
@@ -19,7 +19,7 @@ export const SePlan = ({ oppfolgingsplan }: Props) => {
1919
return (
2020
<>
2121
<Button
22-
icon={<FileContent aria-hidden />}
22+
icon={<FileSearchIcon aria-hidden />}
2323
variant="tertiary"
2424
onClick={() => setOpen(true)}
2525
>

‎src/components/status/TilLandingssideKnapp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Back } from "@navikt/ds-icons";
1+
import { ChevronLeftIcon } from "@navikt/aksel-icons";
22
import { Button } from "@navikt/ds-react";
33
import { useLandingUrl } from "../../hooks/routeHooks";
44
import NextLink from "next/link";
@@ -8,7 +8,7 @@ export const TilLandingssideKnapp = () => {
88

99
return (
1010
<NextLink href={landingPage}>
11-
<Button variant="tertiary" icon={<Back aria-hidden />}>
11+
<Button variant="tertiary" icon={<ChevronLeftIcon aria-hidden />}>
1212
Tilbake til oppfølgingsplaner
1313
</Button>
1414
</NextLink>

‎src/components/status/godkjentplan/AvbrytPlanKnapp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Edit } from "@navikt/ds-icons";
1+
import { PencilIcon } from "@navikt/aksel-icons";
22
import { BodyLong, Button, Heading, Modal } from "@navikt/ds-react";
33
import { useState } from "react";
44
import { useAvbrytOppfolgingsplan } from "../../../api/queries/oppfolgingsplan/oppfolgingsplanQueries";
@@ -15,7 +15,7 @@ export const AvbrytPlanKnapp = ({ oppfolgingsplanId }: Props) => {
1515
<>
1616
<Button
1717
onClick={() => setVisBekreftelse(true)}
18-
icon={<Edit aria-hidden />}
18+
icon={<PencilIcon aria-hidden />}
1919
variant="tertiary"
2020
>
2121
Gjør endringer

0 commit comments

Comments
 (0)