NAV-26302: styled components 20251220 (#4218)

* NAV-26302: Erstatter RegistrerInstitusjo styled-components med Aksel primitive

* Skriv om filtreringsregler fra styled-components til Aksel primitive

* Oppdater registeropplysninger og vilkårsvurdering fra styled-components til aksel og module.css

Author: NghiNg

src/frontend/sider/Fagsak/Behandling/Sider/FiltreringFødselshendelser/Filtreringsregler.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { useNavigate } from 'react-router';
-import styled from 'styled-components';
 
-import { BodyShort } from '@navikt/ds-react';
+import { BodyShort, List } from '@navikt/ds-react';
 
 import useSakOgBehandlingParams from '../../../../../hooks/useSakOgBehandlingParams';
 import VilkårResultatIkon from '../../../../../ikoner/VilkårResultatIkon';
@@ -16,20 +15,6 @@ interface IProps {
     åpenBehandling: IBehandling;
 }
 
-const StyledUl = styled.ul`
-    list-style: none;
-    padding-left: 0;
-`;
-
-const StyledLi = styled.li`
-    display: flex;
-    padding-bottom: 1rem;
-`;
-
-const StyledBodyShort = styled(BodyShort)`
-    margin-left: 0.5rem;
-`;
-
 const Filtreringsregler: React.FC<IProps> = ({ åpenBehandling }) => {
     const { fagsakId } = useSakOgBehandlingParams();
     const navigate = useNavigate();
@@ -45,7 +30,7 @@ const Filtreringsregler: React.FC<IProps> = ({ åpenBehandling }) => {
             senderInn={false}
             steg={BehandlingSteg.FILTRERING_FØDSELSHENDELSER}
         >
-            <StyledUl>
+            <List>
                 {Object.keys(Filtreringsregel).map(filtreringsregel => {
                     const fødselshendelsefiltreringResultat = åpenBehandling.fødselshendelsefiltreringResultater.find(
                         it => it.filtreringsregel === filtreringsregel
@@ -54,15 +39,18 @@ const Filtreringsregler: React.FC<IProps> = ({ åpenBehandling }) => {
                     if (!fødselshendelsefiltreringResultat) return null;
 
                     return (
-                        <StyledLi key={filtreringsregel}>
-                            <VilkårResultatIkon resultat={fødselshendelsefiltreringResultat.resultat} />
-                            <StyledBodyShort>
+                        <List.Item
+                            aria-hidden
+                            icon={<VilkårResultatIkon resultat={fødselshendelsefiltreringResultat.resultat} />}
+                            key={filtreringsregel}
+                        >
+                            <BodyShort>
                                 {filtreringsregler[fødselshendelsefiltreringResultat.filtreringsregel]}
-                            </StyledBodyShort>
-                        </StyledLi>
+                            </BodyShort>
+                        </List.Item>
                     );
                 })}
-            </StyledUl>
+            </List>
         </Skjemasteg>
     );
 };

src/frontend/sider/Fagsak/Behandling/Sider/RegistrerInstitusjon/RegistrerInstitusjon.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
-
 import { Alert } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
@@ -12,10 +10,6 @@ import { BehandlingSteg, type IBehandling } from '../../../../../typer/behandlin
 import { useBehandlingContext } from '../../context/BehandlingContext';
 import Skjemasteg from '../Skjemasteg';
 
-const StyledSkjemasteg = styled(Skjemasteg)`
-    max-width: 40rem;
-`;
-
 interface IProps {
     åpenBehandling: IBehandling;
 }
@@ -31,7 +25,7 @@ const RegistrerInstitusjon: React.FC<IProps> = ({ åpenBehandling }) => {
     }
 
     return (
-        <StyledSkjemasteg
+        <Skjemasteg
             className={'mottaker'}
             tittel={'Info om institusjon'}
             nesteOnClick={onSubmitMottaker}
@@ -47,7 +41,7 @@ const RegistrerInstitusjon: React.FC<IProps> = ({ åpenBehandling }) => {
                 <Alert children={samhandlerRessurs.frontendFeilmelding} variant={'error'} />
             )}
             {submitFeilmelding && <Alert variant="error" children={submitFeilmelding} />}
-        </StyledSkjemasteg>
+        </Skjemasteg>
     );
 };
 

src/frontend/sider/Fagsak/Behandling/Sider/Skjemasteg.tsx

@@ -83,7 +83,7 @@ const Skjemasteg: React.FunctionComponent<IProps> = ({
     }
 
     return (
-        <Box marginBlock={'space-0 space-128'}>
+        <Box marginBlock={'space-0 space-128'} maxWidth={'40rem'}>
             <VStack id={'skjemasteg'} paddingInline={'space-32'} paddingBlock={'space-24'} gap={'space-16'}>
                 <BehandlingPåVentAlert />
                 <MidlertidigEnhetAlert />

src/frontend/sider/Fagsak/Behandling/Sider/Vilkårsvurdering/Registeropplysninger/HentetLabel.tsx

@@ -0,0 +1,8 @@
+.regularHeading {
+    font-weight: var(--a-font-weight-regular);
+}
+
+.detail {
+    color: var(--a-text-subtle);
+    margin-bottom: var(--a-spacing-4);
+}

src/frontend/sider/Fagsak/Behandling/Sider/Vilkårsvurdering/Registeropplysninger/Registeropplysninger.module.css

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import styled from 'styled-components';
-
 import {
     CalendarIcon,
     FlowerPetalFallingIcon,
@@ -10,23 +8,14 @@ import {
     HouseIcon,
     PassportIcon,
 } from '@navikt/aksel-icons';
-import { Heading } from '@navikt/ds-react';
-import { AFontWeightRegular, ASpacing4 } from '@navikt/ds-tokens/dist/tokens';
+import { Box, Detail, Heading } from '@navikt/ds-react';
 
-import { HentetLabel } from './HentetLabel';
+import styles from './Registeropplysninger.module.css';
 import RegisteropplysningerTabell from './RegisteropplysningerTabell';
 import type { IRestRegisterhistorikk } from '../../../../../../typer/person';
 import { Registeropplysning } from '../../../../../../typer/registeropplysning';
 import { Datoformat, isoStringTilFormatertString } from '../../../../../../utils/dato';
 
-const Container = styled.div`
-    width: 32rem;
-`;
-
-const SemiBoldHeading = styled(Heading)`
-    font-weight: ${AFontWeightRegular};
-`;
-
 interface IRegisteropplysningerProps {
     registerHistorikk: IRestRegisterhistorikk;
     fødselsdato: string;
@@ -37,13 +26,12 @@ const Registeropplysninger: React.FC<IRegisteropplysningerProps> = ({ registerHi
 
     return (
         <>
-            <SemiBoldHeading level={'3'} size="medium">
+            <Heading className={styles.regularHeading} level={'3'} size="medium">
                 Registeropplysninger
-            </SemiBoldHeading>
-            <Container>
-                <HentetLabel
-                    size={'small'}
-                    style={{ marginBottom: ASpacing4 }}
+            </Heading>
+            <Box width={'32rem'}>
+                <Detail
+                    className={styles.detail}
                     children={
                         'Sist hentet fra Folkeregisteret ' +
                         isoStringTilFormatertString({
@@ -105,7 +93,7 @@ const Registeropplysninger: React.FC<IRegisteropplysningerProps> = ({ registerHi
                         historikk={registerHistorikk.deltBosted}
                     />
                 )}
-            </Container>
+            </Box>
         </>
     );
 };

src/frontend/sider/Fagsak/Behandling/Sider/Vilkårsvurdering/Registeropplysninger/Registeropplysninger.tsx

@@ -0,0 +1,17 @@
+.table {
+    margin-left: var(--a-spacing-4);
+}
+
+.opplysningsIkon {
+    padding-top: var(--a-spacing-2);
+}
+
+.headerCell {
+    &:nth-of-type(1) {
+        width: 15rem;
+    }
+
+    &:nth-of-type(2) {
+        width: 12rem;
+    }
+}

src/frontend/sider/Fagsak/Behandling/Sider/Vilkårsvurdering/Registeropplysninger/RegisteropplysningerTabell.module.css

@@ -2,11 +2,11 @@ import type { ReactNode } from 'react';
 import React, { useState } from 'react';
 
 import { differenceInMilliseconds } from 'date-fns';
-import styled from 'styled-components';
 
 import { ChevronDownIcon, ChevronUpIcon } from '@navikt/aksel-icons';
-import { Button, Table } from '@navikt/ds-react';
+import { Button, HStack, Table } from '@navikt/ds-react';
 
+import styles from './RegisteropplysningerTabell.module.css';
 import type { IRestRegisteropplysning } from '../../../../../../typer/person';
 import { Registeropplysning, registeropplysning } from '../../../../../../typer/registeropplysning';
 import {
@@ -17,35 +17,6 @@ import {
     tidenesMorgen,
 } from '../../../../../../utils/dato';
 
-const Container = styled.div`
-    display: flex;
-    margin-top: 1rem;
-    justify-content: space-between;
-    width: 100%;
-`;
-
-const StyledHeaderCell = styled(Table.HeaderCell)`
-    &:nth-of-type(1) {
-        width: 15rem;
-    }
-    &:nth-of-type(2) {
-        width: 12rem;
-    }
-`;
-
-const StyledTable = styled(Table)`
-    margin-left: 1rem;
-`;
-
-const OpplysningsIkon = styled.div`
-    padding-top: 0.5rem;
-`;
-
-const HøyrejustertKnapperad = styled.div`
-    display: flex;
-    flex-direction: row-reverse;
-`;
-
 interface IRegisteropplysningerTabellProps {
     opplysningstype: Registeropplysning;
     ikon: ReactNode;
@@ -110,16 +81,23 @@ const RegisteropplysningerTabell: React.FC<IRegisteropplysningerTabellProps> = (
 
     return (
         <>
-            <Container>
-                <OpplysningsIkon children={ikon} />
-                <StyledTable
+            <HStack wrap={false} marginBlock={'space-16 space-0'} justify={'space-between'} width={'100%'}>
+                <div className={styles.opplysningsIkon} children={ikon} />
+                <Table
+                    className={styles.table}
                     size={'small'}
                     aria-label={`Registeropplysninger for ${registeropplysning[opplysningstype]}`}
                 >
                     <Table.Header>
                         <Table.Row>
-                            <StyledHeaderCell children={registeropplysning[opplysningstype]} />
-                            <StyledHeaderCell children={hentDatoHeader(opplysningstype)} />
+                            <Table.HeaderCell
+                                className={styles.headerCell}
+                                children={registeropplysning[opplysningstype]}
+                            />
+                            <Table.HeaderCell
+                                className={styles.headerCell}
+                                children={hentDatoHeader(opplysningstype)}
+                            />
                         </Table.Row>
                     </Table.Header>
                     <Table.Body>
@@ -137,10 +115,10 @@ const RegisteropplysningerTabell: React.FC<IRegisteropplysningerTabellProps> = (
                                 </Table.Row>
                             ))}
                     </Table.Body>
-                </StyledTable>
-            </Container>
+                </Table>
+            </HStack>
             {skalVæreEkspanderbar && (
-                <HøyrejustertKnapperad>
+                <HStack justify={'end'}>
                     <Button
                         variant="tertiary"
                         size="small"
@@ -150,7 +128,7 @@ const RegisteropplysningerTabell: React.FC<IRegisteropplysningerTabellProps> = (
                     >
                         {erEkspandert ? 'Skjul' : `Vis ${historikk.length - GRENSE_FOR_EKSPANDERBAR_HISTORIKK} flere`}
                     </Button>
-                </HøyrejustertKnapperad>
+                </HStack>
             )}
         </>
     );

src/frontend/sider/Fagsak/Behandling/Sider/Vilkårsvurdering/Registeropplysninger/RegisteropplysningerTabell.tsx

@@ -0,0 +1,3 @@
+.hentetLabel {
+    color: var(--a-text-subtle);
+}