Merge pull request #327 from navikt/tc-100-gammelt-til-nytt-design

Byttet komponenter nav-frontend -> designsystemet

package.json

@@ -13,38 +13,18 @@
 	},
 	"dependencies": {
 		"@craco/craco": "7.0.0-alpha.7",
-		"@navikt/ds-css": "0.18.29",
-		"@navikt/ds-css-internal": "0.7.7",
-		"@navikt/ds-icons": "1.3.4",
-		"@navikt/ds-react": "0.19.27",
-		"@navikt/ds-react-internal": "0.14.28",
+		"@navikt/ds-css": "2.1.1",
+		"@navikt/ds-css-internal": "2.1.1",
+		"@navikt/ds-icons": "2.1.1",
+		"@navikt/ds-react": "2.1.1",
+		"@navikt/ds-react-internal": "2.1.1",
 		"@navikt/fnrvalidator": "1.3.0",
 		"@navikt/navspa": "5.0.1",
 		"axios": "^0.27.2",
 		"classnames": "^2.3.2",
 		"constate": "3.3.2",
 		"craco-less": "2.1.0-alpha.0",
 		"moment": "2.29.4",
-		"nav-frontend-chevron": "1.0.30",
-		"nav-frontend-chevron-style": "1.0.4",
-		"nav-frontend-core": "6.0.1",
-		"nav-frontend-ikoner-assets": "3.0.1",
-		"nav-frontend-js-utils": "1.0.20",
-		"nav-frontend-knapper": "3.1.3",
-		"nav-frontend-knapper-style": "2.1.2",
-		"nav-frontend-lenker": "2.0.2",
-		"nav-frontend-lenker-style": "2.0.2",
-		"nav-frontend-lukknapp": "2.0.2",
-		"nav-frontend-modal": "2.0.2",
-		"nav-frontend-modal-style": "2.0.2",
-		"nav-frontend-paneler": "3.0.2",
-		"nav-frontend-paneler-style": "2.0.2",
-		"nav-frontend-skjema": "4.0.6",
-		"nav-frontend-skjema-style": "3.0.3",
-		"nav-frontend-spinner": "3.0.1",
-		"nav-frontend-spinner-style": "1.0.2",
-		"nav-frontend-typografi": "4.0.2",
-		"nav-frontend-typografi-style": "2.0.2",
 		"prop-types": "^15.7.2",
 		"react": "17.0.2",
 		"react-app-polyfill": "3.0.0",
@@ -60,8 +40,8 @@
 		"@types/react-dom": "17.0.13",
 		"@types/react-modal": "3.13.1",
 		"cross-env": "^7.0.3",
-		"husky": "8.0.1",
-		"lint-staged": "13.0.3",
+		"husky": "8.0.3",
+		"lint-staged": "13.1.0",
 		"msw": "0.42.3",
 		"prettier": "2.7.1",
 		"typescript": "4.7.4"

src/app.less

@@ -1,6 +1,3 @@
-@import '~nav-frontend-core/less/core';
-@import '~nav-frontend-typografi-style/src/index';
-
 .veilarbmaofs {
 	scroll-behavior: smooth !important;
 	flex-grow: 1;
@@ -13,10 +10,8 @@
 		height: auto;
 	}
 
-	.typo-normal-mixin();
-	color: @navMorkGra;
-	font-family: @font-family;
-	line-height: @line-height-base;
+	color: var(--a-gray-900);
+	font-family: var(--a-font-family);
 
 	&__container {
 		max-width: 1920px;
@@ -41,7 +36,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		margin-bottom: var(--navds-spacing-1);
+		margin-bottom: var(--a-spacing-1);
 	}
 
 	.underinformasjon {
@@ -61,7 +56,7 @@
 	}
 
 	.italic-gra {
-		color: @navGra60;
+		color: var(--a-gray-600);
 		font-style: italic;
 	}
 

src/app.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import StoreProvider from './stores/store-provider';
 import { ViewController } from './components/views/view-controller';
 import './app.less';

src/components/feature-fetcher.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import { AxiosResponse } from 'axios';
 import { fetchFeatureToggle } from '../rest/api';
 import { Laster } from './felles/fetch';

src/components/felles/error-boundry.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import { Alert } from '@navikt/ds-react';
 
 interface ErrorBoundryProps {
@@ -10,7 +10,7 @@ interface ErrorBoundryState {
 	hasError: boolean;
 }
 
-class ErrorBoundary extends React.Component<ErrorBoundryProps, ErrorBoundryState> {
+class ErrorBoundary extends Component<ErrorBoundryProps, ErrorBoundryState> {
 	constructor(props: ErrorBoundryProps) {
 		super(props);
 		this.state = { hasError: false };

src/components/felles/fetch.tsx

@@ -1,9 +1,6 @@
-import React from 'react';
+import { Alert, BodyShort, Loader } from '@navikt/ds-react';
 import cls from 'classnames';
-import NavFrontendSpinner from 'nav-frontend-spinner';
-import { Normaltekst } from 'nav-frontend-typografi';
 import './fetch.less';
-import { Alert } from '@navikt/ds-react';
 
 export const Feilmelding = (props: { children?: any }) => (
 	<Alert variant="warning" className="alertstripe_intern">
@@ -13,10 +10,10 @@ export const Feilmelding = (props: { children?: any }) => (
 
 export const Laster = (props: { midtstilt?: boolean }) => (
 	<div className={cls({ 'veilarbmaofs__laster--midtstilt': props.midtstilt })}>
-		<NavFrontendSpinner type="XL" />
+		<Loader size="2xlarge" />
 	</div>
 );
 
 export const NoData = (props: { tekst?: string }) => (
-	<Normaltekst>{props.tekst ? props.tekst : 'Ingen data tilgjengelig'}</Normaltekst>
+	<BodyShort>{props.tekst ? props.tekst : 'Ingen data tilgjengelig'}</BodyShort>
 );

src/components/felles/float-grid.tsx

@@ -37,7 +37,7 @@ function FloatGrid({ columns, gap, children }: FloatGridProps) {
 	));
 
 	return (
-		<div className="floatgrid clearfix" style={containerStyle}>
+		<div className="floatgrid" style={containerStyle}>
 			{columnsChildren}
 		</div>
 	);

src/components/felles/grid.less

@@ -3,4 +3,7 @@
 		display: grid;
 		display: -ms-grid;
 	}
+	.floatgrid {
+		display: flex;
+	}
 }

src/components/felles/informasjonsbolk-enkel.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Normaltekst } from 'nav-frontend-typografi';
 import EMDASH from '../../utils/emdash';
 import { isNullOrUndefined } from '../../utils';
 import { StringOrNothing } from '../../utils/felles-typer';
 import Informasjonsbolk from './informasjonsbolk';
+import { BodyShort } from '@navikt/ds-react';
 
 interface Props {
 	header: string;
@@ -17,7 +17,7 @@ function InformasjonsbolkEnkel(props: Props) {
 	const { value, defaultValue, ...rest } = props;
 	let content: string | React.ReactElement<Props> = EMDASH;
 	if (!(isNullOrUndefined(props.value) && isNullOrUndefined(props.defaultValue))) {
-		content = <Normaltekst className={props.childclassname}>{value || defaultValue}</Normaltekst>;
+		content = <BodyShort className={props.childclassname}>{value || defaultValue}</BodyShort>;
 	}
 
 	return <Informasjonsbolk {...rest}>{content}</Informasjonsbolk>;

src/components/felles/informasjonsbolk-liste.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Normaltekst } from 'nav-frontend-typografi';
 import { safeMap } from '../../utils';
 import Informasjonsbolk from './informasjonsbolk';
+import { BodyShort } from '@navikt/ds-react';
 
 interface Props<T> {
 	header: string;
@@ -11,7 +10,7 @@ interface Props<T> {
 function InformasjonsbolkListe<T>(props: Props<T>) {
 	const { header, list, ...rest } = props;
 
-	const elementer = safeMap(list, (element: T) => <Normaltekst key={element as any}>{element}</Normaltekst>);
+	const elementer = safeMap(list, (element: T) => <BodyShort key={element as any}>{element}</BodyShort>);
 
 	return (
 		<Informasjonsbolk header={header} {...rest}>

src/components/felles/informasjonsbolk.tsx

@@ -22,7 +22,7 @@ function Informasjonsbolk(props: Props) {
 						{header}
 					</Heading>
 				)}
-				{headerTypo === 'element' && <Label>{header}</Label>}
+				{headerTypo === 'element' && <Label size="small">{header}</Label>}
 			</span>
 			{children}
 		</div>

src/components/felles/sist-endret.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
 import cls from 'classnames';
-import { Normaltekst } from 'nav-frontend-typografi';
 import { StringOrNothing } from '../../utils/felles-typer';
 import { formaterDato } from '../../utils';
+import { BodyShort } from '@navikt/ds-react';
 
 interface SistEndretProps {
 	sistEndret: StringOrNothing;
@@ -14,9 +13,7 @@ function SistEndret(props: SistEndretProps) {
 	const formattertTidspunkt = formaterDato(props.sistEndret, props.onlyYearAndMonth);
 
 	return (
-		<Normaltekst className={cls('italic-gra', props.className)}>
-			{`Sist endret: ${formattertTidspunkt}`}
-		</Normaltekst>
+		<BodyShort className={cls('italic-gra', props.className)}>{`Sist endret: ${formattertTidspunkt}`}</BodyShort>
 	);
 }
 

src/components/felles/til-toppen-knapp.less

@@ -4,7 +4,7 @@
 		right: 2rem;
 		bottom: 2rem;
 		z-index: 1;
-		box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border), 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
+		box-shadow: inset 0 0 0 2px var(--a-surface-action), 0px 4px 6px -1px rgba(0, 0, 0, 0.1),
 			0px 2px 4px -2px rgba(0, 0, 0, 0.05);
 		opacity: 0;
 		visibility: hidden;

src/components/felles/til-toppen-knapp.tsx

@@ -26,8 +26,11 @@ export const TilToppenKnapp = () => {
 	});
 
 	return (
-		<Button variant="secondary" className={`til-toppen-knapp ${synlig ? 'visKnapp' : ''}`} onClick={skrollOgLogg}>
-			<Up />
-		</Button>
+		<Button
+			variant="secondary"
+			icon={<Up />}
+			className={`til-toppen-knapp ${synlig ? 'visKnapp' : ''}`}
+			onClick={skrollOgLogg}
+		></Button>
 	);
 };

src/components/paneler/innhold/cv/andre-godkjenninger.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArenaPerson } from '../../../../rest/datatyper/arenaperson';
 import Informasjonsbolk from '../../../felles/informasjonsbolk';
 import { formaterDato, safeMap } from '../../../../utils';
@@ -13,7 +12,9 @@ function AndreGodkjenninger(props: Props) {
 
 	const annenGodkjenningListe = safeMap(andreGodkjenninger, (annenGodkjenning, index) => (
 		<div key={`andregodkjenninger-${index}`} className="underinformasjon">
-			<Label key={`andregodkjenninger-${index}`}>{annenGodkjenning.tittel}</Label>
+			<Label size="small" as="p" key={`andregodkjenninger-${index}`}>
+				{annenGodkjenning.tittel}
+			</Label>
 
 			<BodyShort>Utsteder: {annenGodkjenning.utsteder ? annenGodkjenning.utsteder : EMDASH}</BodyShort>
 			<BodyShort>Fullført: {formaterDato(annenGodkjenning.gjennomfortDato)}</BodyShort>

src/components/paneler/innhold/cv/annen-erfaring.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArenaPerson } from '../../../../rest/datatyper/arenaperson';
 import Informasjonsbolk from '../../../felles/informasjonsbolk';
 import { formaterDato, safeSort, safeMap } from '../../../../utils';
@@ -10,7 +9,9 @@ function AnnenErfaring(props: Pick<ArenaPerson, 'annenErfaring'>) {
 	const sortedErfaringer = arenaErfaring.sort((a, b) => safeSort(b.tilDato, a.tilDato));
 	const erfaringer = safeMap(sortedErfaringer, (erfaring, index) => (
 		<div key={`annenerfaring-${index}`} className="underinformasjon">
-			<Label>{erfaring.rolle}</Label>
+			<Label size="small" as="p">
+				{erfaring.rolle}
+			</Label>
 
 			<BodyShort>{erfaring.beskrivelse}</BodyShort>
 			<BodyShort>

src/components/paneler/innhold/cv/arbeidserfaring.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ArenaPerson } from '../../../../rest/datatyper/arenaperson';
 import Informasjonsbolk from '../../../felles/informasjonsbolk';
 import { formaterDato, safeSort, safeMap } from '../../../../utils';
@@ -10,7 +9,9 @@ function Arbeidserfaring(props: Pick<ArenaPerson, 'arbeidserfaring'>) {
 	const sortedErfaringer = arenaErfaring.sort((a, b) => safeSort(b.tilDato, a.tilDato));
 	const erfaringer = safeMap(sortedErfaringer, (erfaring, index) => (
 		<div key={`arbeidserfaring-${index}`} className="underinformasjon">
-			<Label>{erfaring.tittel}</Label>
+			<Label size="small" as="p">
+				{erfaring.tittel}
+			</Label>
 
 			<BodyShort>{erfaring.arbeidsgiver}</BodyShort>
 			<BodyShort>Sted: {erfaring.sted}</BodyShort>

src/components/paneler/innhold/cv/cv-ikke-synlig-info.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
-import { Alert } from '@navikt/ds-react';
+import { Alert, Link } from '@navikt/ds-react';
 
 export const CvIkkeSynligInfo = () => {
 	return (
-		<Alert variant="info" className="cv-ikke-synlig blokk-l alertstripe_intern">
+		<Alert variant="info" className="cv-ikke-synlig alertstripe_intern">
 			Fra 17.2.2021 kan arbeidsgivere kun se CV til jobbsøkere som ikke er under arbeidsrettet oppfølging fra NAV.
 			Les mer om{' '}
-			<a href="https://navno.sharepoint.com/sites/fag-og-ytelser-arbeid-markedsarbeid/SitePages/Oversikt-over-veileders-tilgang-p%C3%A5-CV-og-jobbprofil.aspx">
+			<Link
+				href="https://navno.sharepoint.com/sites/fag-og-ytelser-arbeid-markedsarbeid/SitePages/Oversikt-over-veileders-tilgang-p%C3%A5-CV-og-jobbprofil.aspx"
+				className="lenke-i-alert"
+			>
 				synlig CV
-			</a>
+			</Link>
 			.
 		</Alert>
 	);

src/components/paneler/innhold/cv/cv-panel-innhold.less

@@ -1,4 +1,4 @@
-@import '~nav-frontend-core/less/_variabler';
+@screen-md: 992px;
 
 .veilarbmaofs {
 	.cv-panel-lenke {
@@ -19,6 +19,7 @@
 
 	.cv-ikke-synlig {
 		width: 100%;
+		margin-bottom: var(--a-spacing-10);
 	}
 
 	.cv-alert-ikke-tilgang .alertstripe__tekst {
@@ -41,7 +42,11 @@
 		}
 	}
 
-	@media (min-width: @screen-md-min) {
+	.sist-endret {
+		margin-bottom: var(--a-spacing-4);
+	}
+
+	@media (min-width: @screen-md) {
 		.cv-sammendrag {
 			width: 50%;
 		}