From dda7c5d22c6aaa9012893174c30098d2815642f1 Mon Sep 17 00:00:00 2001 From: robertkittilsen Date: Thu, 19 Oct 2023 11:33:11 +0200 Subject: [PATCH] Fikset bug hvor Panel styling skjulte Kort styling. Fjernet bruk av deprecated Panel og byttet ut med Box. --- src/demo/demo-dashboard.tsx | 34 +++++++++---------- src/innhold/innhold.module.css | 6 ++++ .../aktivitetsplan/aktivitetsplan.tsx | 6 ++-- ...ovsavklaring-avklart-situasjonsbestemt.tsx | 6 ++-- .../behovsavklaring-avklart-standard.tsx | 6 ++-- ...avklaring-ikke-svart-situasjonsbestemt.tsx | 6 ++-- .../behovsavklaring-ikke-svart-standard.tsx | 6 ++-- ...ehovsavklaring-svart-situasjonsbestemt.tsx | 10 +++--- .../behovsavklaring-svart-standard.tsx | 10 +++--- .../dagpenger-og-ytelser-innhold.tsx | 6 ++-- .../endre-situasjon/min-situasjon.tsx | 11 +++--- .../hjelp-og-stotte/hjelp-og-stotte.tsx | 6 ++-- .../ikke-registrert/ikke-registrert.tsx | 6 ++-- .../ikke-standard/forenklet-innhold.tsx | 6 ++-- src/komponenter/ikke-standard/motestotte.tsx | 6 ++-- .../meldekort-mikrofrontend/LinkCard.tsx | 2 +- src/komponenter/meldekort/meldekort.tsx | 6 ++-- .../min-situasjon/min-situasjon.tsx | 6 ++-- .../reaktivering/automatisk-reaktivert.tsx | 6 ++-- .../reaktivering/reaktivering-kvittering.tsx | 6 ++-- .../registrert-tittel/registrert-tittel.tsx | 10 +++--- .../situasjonsbestemt/situasjonsbestemt.tsx | 6 ++-- src/tabs/aia-tabs.tsx | 2 +- 23 files changed, 90 insertions(+), 85 deletions(-) diff --git a/src/demo/demo-dashboard.tsx b/src/demo/demo-dashboard.tsx index 58f80e30..87fcc36e 100644 --- a/src/demo/demo-dashboard.tsx +++ b/src/demo/demo-dashboard.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { Accordion, + Box, Cell, Checkbox, CheckboxGroup, Grid, Heading, - Panel, Radio, RadioGroup, Select, @@ -348,9 +348,9 @@ const DemoDashboard = () => { Demo av Veien til arbeid - +
- + { ))} - + { Klare seg selv Ønsker hjelp - + - + { Ja Nei - - - + + + {Object.values(FeatureToggles).map((toggle) => { return ( @@ -497,7 +497,7 @@ const DemoDashboard = () => { ); })} - +
@@ -593,7 +593,7 @@ const DemoDashboard = () => { - + { Vis gjelder fra dato-velger - + - + { ); })} - + - + ); }; diff --git a/src/innhold/innhold.module.css b/src/innhold/innhold.module.css index 333bc763..7e40cc17 100644 --- a/src/innhold/innhold.module.css +++ b/src/innhold/innhold.module.css @@ -35,6 +35,12 @@ margin: 0; } +.tabsPanel { + background-color: var(--a-surface-default)!important; + border-radius: var(--a-border-radius-large)!important; + border: none!important; +} + .header { color: #262626; width: 100%; diff --git a/src/komponenter/aktivitetsplan/aktivitetsplan.tsx b/src/komponenter/aktivitetsplan/aktivitetsplan.tsx index 60af1476..2e427ca0 100644 --- a/src/komponenter/aktivitetsplan/aktivitetsplan.tsx +++ b/src/komponenter/aktivitetsplan/aktivitetsplan.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Heading, Link, Panel } from '@navikt/ds-react'; +import { BodyLong, Heading, Link, Box } from '@navikt/ds-react'; import { TasklistIcon } from '@navikt/aksel-icons'; import spacingStyles from '../../spacing.module.css'; import flexStyles from '../../flex.module.css'; @@ -33,7 +33,7 @@ const Aktivitetsplan = () => { }; return ( - + { {tekst('aktivitetsplan.holde-orden')} - + ); }; diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx index ba343049..3341d063 100644 --- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx +++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Detail, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; @@ -40,7 +40,7 @@ function BehovsavklaringAvklartSituasjonsbestemt() { const tekst = lagHentTekstForSprak(TEKSTER, sprak); const brukTabsDemo = useSkalBrukeTabs(); return ( - + {!brukTabsDemo && ( @@ -61,7 +61,7 @@ function BehovsavklaringAvklartSituasjonsbestemt() { /> - + ); } diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx index 9a6cc3e1..7ffbdbd8 100644 --- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx +++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Detail, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; @@ -34,7 +34,7 @@ function BehovsavklaringAvklartStandard() { const brukTabsDemo = useSkalBrukeTabs(); return ( - + {!brukTabsDemo && ( @@ -54,7 +54,7 @@ function BehovsavklaringAvklartStandard() { - + ); } diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx index d78ee31e..0fb72a94 100644 --- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx +++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx @@ -1,4 +1,4 @@ -import { BodyLong, BodyShort, Button, Detail, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, BodyShort, Box, Button, Detail, Heading } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning'; @@ -65,7 +65,7 @@ function IkkeSvartPaaBehovsavklaringSituasjonsbestemt() { } return ( - + {' '} {!brukTabsDemo && ( @@ -99,7 +99,7 @@ function IkkeSvartPaaBehovsavklaringSituasjonsbestemt() { - + ); } diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx index 18f92860..4f1c0d7e 100644 --- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx +++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { BodyLong, Button, Detail, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, Box, Button, Detail, Heading } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning'; @@ -80,7 +80,7 @@ function IkkeSvartPaaBehovsavklaringStandardInnsats() { } return ( - + {!brukTabsDemo && ( @@ -113,7 +113,7 @@ function IkkeSvartPaaBehovsavklaringStandardInnsats() { - + ); } diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx index 7b6573a5..fce8b430 100644 --- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx +++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, Box, Heading } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning'; @@ -41,7 +41,7 @@ function EnigMedProfilering() { const tekst = lagHentTekstForSprak(TEKSTER, sprak); return ( - + {tekst('headingEnig')} @@ -57,7 +57,7 @@ function EnigMedProfilering() { /> - + ); } @@ -66,7 +66,7 @@ function UenigMedProfilering() { const tekst = lagHentTekstForSprak(TEKSTER, sprak); return ( - + {tekst('headingUenig')} @@ -86,7 +86,7 @@ function UenigMedProfilering() { /> - + ); } diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx index 0b2bf92a..6f298cc3 100644 --- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx +++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Detail, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning'; @@ -35,7 +35,7 @@ function EnigMedProfilering() { const brukTabsDemo = useSkalBrukeTabs(); return ( - + {!brukTabsDemo && ( @@ -57,7 +57,7 @@ function EnigMedProfilering() { /> - + ); } @@ -66,7 +66,7 @@ function UenigMedProfilering() { const tekst = lagHentTekstForSprak(TEKSTER, sprak); const brukTabsDemo = useSkalBrukeTabs(); return ( - + {!brukTabsDemo && ( @@ -88,7 +88,7 @@ function UenigMedProfilering() { /> - + ); } diff --git a/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx b/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx index 13f8579e..7cf8897e 100644 --- a/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx +++ b/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { BodyShort, Detail, Panel } from '@navikt/ds-react'; +import { BodyShort, Box, Detail } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; import HarIkkeSokt from './dagpenger-har-ikke-sokt'; @@ -62,7 +62,7 @@ function DagpengerOgYtelserInnhold(props: Props) { const tekst = lagHentTekstForSprak(TEKSTER, useSprakValg().sprak); return ( - + {!brukTabsDemo && ( {tekst('tittel')} @@ -85,7 +85,7 @@ function DagpengerOgYtelserInnhold(props: Props) { handleByttVisningKlikk={props.handleByttVisningKlikk} valgtYtelserVisning={props.valgtVisning} /> - + ); } diff --git a/src/komponenter/endre-situasjon/min-situasjon.tsx b/src/komponenter/endre-situasjon/min-situasjon.tsx index 5799764f..676d06e1 100644 --- a/src/komponenter/endre-situasjon/min-situasjon.tsx +++ b/src/komponenter/endre-situasjon/min-situasjon.tsx @@ -1,5 +1,3 @@ -import { Panel } from '@navikt/ds-react'; - import { useAmplitudeData } from '../hent-initial-data/amplitude-provider'; import { useArbeidssokerPerioder } from '../../contexts/arbeidssoker'; import { useBesvarelse } from '../../contexts/besvarelse'; @@ -10,6 +8,7 @@ import beregnArbeidssokerperioder from '../../lib/beregn-arbeidssokerperioder'; import AiAInViewport from '../aia-in-viewport/aia-in-viewport'; import ErRendret from '../er-rendret/er-rendret'; import { useBrukerregistreringData } from '../../hooks/use-brukerregistrering-data'; +import { Box } from '@navikt/ds-react'; function MinSituasjon() { const brukerregistreringData = useBrukerregistreringData(); @@ -27,9 +26,9 @@ function MinSituasjon() { if (!kanViseKomponent) return null; return ( - + - + - + - + ); } diff --git a/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx b/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx index dea3d1d9..77504836 100644 --- a/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx +++ b/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Detail, Heading, Panel, ReadMore } from '@navikt/ds-react'; +import { Box, Detail, Heading, ReadMore } from '@navikt/ds-react'; import { useAmplitudeData } from '../hent-initial-data/amplitude-provider'; import { useSprakValg } from '../../contexts/sprak'; @@ -60,7 +60,7 @@ function HjelpOgStotte() { }; return ( - + Hjelp og støtte @@ -69,7 +69,7 @@ function HjelpOgStotte() { - + ); } diff --git a/src/komponenter/ikke-registrert/ikke-registrert.tsx b/src/komponenter/ikke-registrert/ikke-registrert.tsx index b1ca6bb9..5ac6abfb 100644 --- a/src/komponenter/ikke-registrert/ikke-registrert.tsx +++ b/src/komponenter/ikke-registrert/ikke-registrert.tsx @@ -1,4 +1,4 @@ -import { Button, Heading, BodyShort, Panel } from '@navikt/ds-react'; +import { Button, Heading, BodyShort, Box } from '@navikt/ds-react'; import spacingStyles from '../../spacing.module.css'; import { loggAktivitet } from '../../metrics/metrics'; @@ -47,7 +47,7 @@ const IkkeRegistrert = () => { return ( - + {tekst('header')} @@ -57,7 +57,7 @@ const IkkeRegistrert = () => { {tekst('button')} - + ); }; diff --git a/src/komponenter/ikke-standard/forenklet-innhold.tsx b/src/komponenter/ikke-standard/forenklet-innhold.tsx index 1869cc29..0c3955a5 100644 --- a/src/komponenter/ikke-standard/forenklet-innhold.tsx +++ b/src/komponenter/ikke-standard/forenklet-innhold.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Heading, Link, Panel } from '@navikt/ds-react'; +import { BodyLong, Heading, Link, Box } from '@navikt/ds-react'; import { BandageIcon, ChatIcon, LaptopIcon, ClipboardIcon, TasklistIcon } from '@navikt/aksel-icons'; import { useSprakValg } from '../../contexts/sprak'; @@ -104,7 +104,7 @@ function ForenkletInnhold() { }; return ( - +
    {ListeElement(
- + ); } diff --git a/src/komponenter/ikke-standard/motestotte.tsx b/src/komponenter/ikke-standard/motestotte.tsx index 5168190a..75fccb51 100644 --- a/src/komponenter/ikke-standard/motestotte.tsx +++ b/src/komponenter/ikke-standard/motestotte.tsx @@ -1,4 +1,4 @@ -import { BodyShort, Button, Heading, Panel } from '@navikt/ds-react'; +import { BodyShort, Button, Heading, Box } from '@navikt/ds-react'; import spacingStyles from '../../spacing.module.css'; import { useAmplitudeData } from '../hent-initial-data/amplitude-provider'; @@ -108,7 +108,7 @@ const Motestotte = ({ state }: Props) => { if (!kanViseKomponent) return null; return ( - + {tekst(`${sykmeldtStatus}-tittel`)} @@ -117,7 +117,7 @@ const Motestotte = ({ state }: Props) => { - + ); }; diff --git a/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx b/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx index 8a489569..5add76d9 100644 --- a/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx +++ b/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx @@ -9,7 +9,7 @@ interface Props { const LinkCard = ({ href, children }: Props) => { return ( - +
{children}
 diff --git a/src/komponenter/meldekort/meldekort.tsx b/src/komponenter/meldekort/meldekort.tsx index dc50d6de..97065d2a 100644 --- a/src/komponenter/meldekort/meldekort.tsx +++ b/src/komponenter/meldekort/meldekort.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Detail, Panel, ReadMore } from '@navikt/ds-react'; +import { Detail, Box, ReadMore } from '@navikt/ds-react'; import { useSprakValg } from '../../contexts/sprak'; import { useAmplitudeData } from '../hent-initial-data/amplitude-provider'; @@ -38,7 +38,7 @@ function Meldekort() { }; return ( - + {!brukTabsDemo && ( Meldekort og meldeplikt @@ -48,7 +48,7 @@ function Meldekort() { - + ); } diff --git a/src/komponenter/min-situasjon/min-situasjon.tsx b/src/komponenter/min-situasjon/min-situasjon.tsx index 68710267..3cd524d0 100644 --- a/src/komponenter/min-situasjon/min-situasjon.tsx +++ b/src/komponenter/min-situasjon/min-situasjon.tsx @@ -1,4 +1,4 @@ -import { BodyShort, Detail, Heading, Panel } from '@navikt/ds-react'; +import { BodyShort, Box, Detail, Heading } from '@navikt/ds-react'; import { useFeatureToggleData } from '../../contexts/feature-toggles'; import { useAmplitudeData } from '../hent-initial-data/amplitude-provider'; @@ -64,7 +64,7 @@ function MinSituasjon() { : 'Min jobbsituasjon: ukjent'; return ( - + Min situasjon {heading} @@ -80,7 +80,7 @@ function MinSituasjon() { amplitudeData={amplitudeData} /> - + ); } diff --git a/src/komponenter/reaktivering/automatisk-reaktivert.tsx b/src/komponenter/reaktivering/automatisk-reaktivert.tsx index 15dd0553..fd328dbf 100644 --- a/src/komponenter/reaktivering/automatisk-reaktivert.tsx +++ b/src/komponenter/reaktivering/automatisk-reaktivert.tsx @@ -1,4 +1,4 @@ -import { BodyLong, Button, Heading, Panel } from '@navikt/ds-react'; +import { BodyLong, Box, Button, Heading } from '@navikt/ds-react'; import { InformationIcon } from '@navikt/aksel-icons'; import { useEffect, useRef, useState } from 'react'; @@ -78,7 +78,7 @@ function AutomatiskReaktivert() { if (!kanViseKomponent) return null; return ( - + {visSprakvelger && (