Fikset bug hvor Panel styling skjulte Kort styling.

Fjernet bruk av deprecated Panel og byttet ut med Box.
navikt · Oct 19, 2023 · dda7c5d · dda7c5d
1 parent bbeedab
commit dda7c5d
Show file tree

Hide file tree

Showing 23 changed files with 90 additions and 85 deletions.
diff --git 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 = () => {
             <Heading size="xlarge" className={styles.demoHeading}>
                 Demo av Veien til arbeid
             </Heading>
-            <Panel className={styles.demodashboardInnhold}>
+            <Box padding="4" className={styles.demodashboardInnhold}>
                 <div className={`${spacingStyles.mb2} ${flexStyles.flex} ${flexStyles.wrap}`}>
-                    <Panel className={styles.demoCheckboxpanel}>
+                    <Box padding="4" className={styles.demoCheckboxpanel}>
                         <Select
                             label={'Velg arbeidssøkerperiode'}
                             onChange={handleChangeArbeidssokerPeriode}
@@ -438,8 +438,8 @@ const DemoDashboard = () => {
                                 Mangler registreringsdata
                             </Checkbox>
                         </CheckboxGroup>
-                    </Panel>
-                    <Panel className={styles.demoCheckboxpanel}>
+                    </Box>
+                    <Box padding="4" className={styles.demoCheckboxpanel}>
                         <Select
                             label={'Velg 14a vedtak'}
                             onChange={handleChangeServicegruppe}
@@ -465,7 +465,7 @@ const DemoDashboard = () => {
                             ))}
                         </Select>
 
-                        <Panel className={styles.demoCheckboxpanel}>
+                        <Box padding="4" className={styles.demoCheckboxpanel}>
                             <RadioGroup
                                 legend="Velg brukers valg"
                                 defaultValue={behovForVeiledningState?.oppfolging}
@@ -474,9 +474,9 @@ const DemoDashboard = () => {
                                 <Radio value={ForeslattInnsatsgruppe.STANDARD_INNSATS}>Klare seg selv</Radio>
                                 <Radio value={ForeslattInnsatsgruppe.SITUASJONSBESTEMT_INNSATS}>Ønsker hjelp</Radio>
                             </RadioGroup>
-                        </Panel>
+                        </Box>
 
-                        <Panel className={styles.demoCheckboxpanel}>
+                        <Box padding="4" className={styles.demoCheckboxpanel}>
                             <RadioGroup
                                 legend="Vil være arbeidssøker neste periode"
                                 defaultValue={hentDemoState(DemoData.ARBEIDSSOKER_NESTE_PERIODE) || 'Ja'}
@@ -485,9 +485,9 @@ const DemoDashboard = () => {
                                 <Radio value={'Ja'}>Ja</Radio>
                                 <Radio value={'Nei'}>Nei</Radio>
                             </RadioGroup>
-                        </Panel>
-                    </Panel>
-                    <Panel className={styles.demoFeaturetoggles}>
+                        </Box>
+                    </Box>
+                    <Box padding="4" className={styles.demoFeaturetoggles}>
                         <CheckboxGroup legend={'Featuretoggles'} value={getFeatureToggleCheckboxGroupValue()}>
                             {Object.values(FeatureToggles).map((toggle) => {
                                 return (
@@ -497,7 +497,7 @@ const DemoDashboard = () => {
                                 );
                             })}
                         </CheckboxGroup>
-                    </Panel>
+                    </Box>
                 </div>
 
                 <Accordion>
@@ -593,7 +593,7 @@ const DemoDashboard = () => {
                                     </Select>
                                 </Cell>
                                 <Cell xs={6} md={6} lg={3}>
-                                    <Panel className={styles.demoCheckboxpanel}>
+                                    <Box padding="4" className={styles.demoCheckboxpanel}>
                                         <CheckboxGroup
                                             legend=""
                                             value={[
@@ -641,10 +641,10 @@ const DemoDashboard = () => {
                                                 Vis gjelder fra dato-velger
                                             </Checkbox>
                                         </CheckboxGroup>
-                                    </Panel>
+                                    </Box>
                                 </Cell>
                                 <Cell xs={6} md={6} lg={3}>
-                                    <Panel className={styles.demoFeaturetoggles}>
+                                    <Box padding="4" className={styles.demoFeaturetoggles}>
                                         <CheckboxGroup
                                             legend={'Featuretoggles'}
                                             value={getFeatureToggleCheckboxGroupValue()}
@@ -662,13 +662,13 @@ const DemoDashboard = () => {
                                                 );
                                             })}
                                         </CheckboxGroup>
-                                    </Panel>
+                                    </Box>
                                 </Cell>
                             </Grid>
                         </Accordion.Content>
                     </Accordion.Item>
                 </Accordion>
-            </Panel>
+            </Box>
         </section>
     );
 };

diff --git 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
@@ -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 (
-        <Panel className={`${flexStyles.flex} ${spacingStyles.pb2}`}>
+        <Box padding="4" className={`${flexStyles.flex} ${spacingStyles.pb2}`}>
             <span
                 style={{
                     marginRight: '0.5em',
@@ -54,7 +54,7 @@ const Aktivitetsplan = () => {
                     {tekst('aktivitetsplan.holde-orden')}
                 </BodyLong>
             </div>
-        </Panel>
+        </Box>
     );
 };
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - avklart - situasjonsbestemt" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -61,7 +61,7 @@ function BehovsavklaringAvklartSituasjonsbestemt() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - avklart - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - avklart - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -54,7 +54,7 @@ function BehovsavklaringAvklartStandard() {
                 <AktivitetsplanLenke aktivitet={'Behovsavklaring - avklart - standard - går til aktivitetsplanen'} />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - avklart - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - ikke svart - situasjonsbestemt" />{' '}
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -99,7 +99,7 @@ function IkkeSvartPaaBehovsavklaringSituasjonsbestemt() {
             <ReadMoreVeileder />
             <ReadMoreVurdering />
             <InViewport loggTekst="Viser behovsavklaringkomponent - ikke svart - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - ikke svart - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -113,7 +113,7 @@ function IkkeSvartPaaBehovsavklaringStandardInnsats() {
             <ReadMoreVeileder />
             <ReadMoreVurdering />
             <InViewport loggTekst="Viser behovsavklaringkomponent - ikke svart - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - enig - situasjonsbestemt" />
             <Heading size="small" className={spacingStyles.mb1}>
                 {tekst('headingEnig')}
@@ -57,7 +57,7 @@ function EnigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - enig - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
@@ -66,7 +66,7 @@ function UenigMedProfilering() {
     const tekst = lagHentTekstForSprak(TEKSTER, sprak);
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - uenig - situasjonsbestemt" />
             <Heading size="small" className={spacingStyles.mb1}>
                 {tekst('headingUenig')}
@@ -86,7 +86,7 @@ function UenigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - uenig - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - enig - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -57,7 +57,7 @@ function EnigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - enig - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
@@ -66,7 +66,7 @@ function UenigMedProfilering() {
     const tekst = lagHentTekstForSprak(TEKSTER, sprak);
     const brukTabsDemo = useSkalBrukeTabs();
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - uenig - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -88,7 +88,7 @@ function UenigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - uenig - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel>
+        <Box padding="4">
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
                     {tekst('tittel')}
@@ -85,7 +85,7 @@ function DagpengerOgYtelserInnhold(props: Props) {
                 handleByttVisningKlikk={props.handleByttVisningKlikk}
                 valgtYtelserVisning={props.valgtVisning}
             />
-        </Panel>
+        </Box>
     );
 }
 

diff --git 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 (
-        <Panel style={{ paddingLeft: 0, paddingTop: 0, paddingRight: 0 }}>
+        <Box padding="4" style={{ paddingLeft: 0, paddingTop: 0, paddingRight: 0 }}>
             <ErRendret loggTekst="Rendrer endring av situasjon" />
-            <Panel>
+            <Box padding="4">
                 <Sammendrag
                     startDato={opprettetDato || aktivPeriodeStart}
                     manueltRegistrertAv={manueltRegistrertAv}
@@ -39,9 +38,9 @@ function MinSituasjon() {
                     endretAv={endretAv}
                     erBesvarelsenEndret={erBesvarelsenEndret}
                 />
-            </Panel>
+            </Box>
             <AiAInViewport loggTekst="Viser endring av situasjon" />
-        </Panel>
+        </Box>
     );
 }