Fjerner komponenten FamilieAlert og bytter den ut med Aksel sin Alert…

… komponent (#1276) * Fjerner "FamilieAlert" og bytter den ut med vanlig Alert fra Aksel * Legger tilbake inline på Alert * Legger tilbake inline på Alert * Legger tilbake inline på Alert * Setter variant prop med {} slik som det er gjort andre steder i applikasjonen * Skriver om tester for OmDeg for alerts
navikt · Jul 8, 2024 · c4dc8bc · c4dc8bc
1 parent b12183a
commit c4dc8bc
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 124 deletions.
diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 
 import { BrowserRouter as Router } from 'react-router-dom';
 
+import { Alert } from '@navikt/ds-react';
+
 import { basePath } from '../shared-utils/Miljø';
 
 import AppContainer from './AppContainer';
-import FamilieAlert from './components/Felleskomponenter/FamilieAlert/FamilieAlert';
 import { AppProvider } from './context/AppContext';
 import { AppNavigationProvider } from './context/AppNavigationContext';
 import { EøsProvider } from './context/EøsContext';
@@ -22,12 +23,12 @@ function App() {
                         <StegProvider>
                             <GlobalStyle />
                             {process.env.NODE_ENV !== 'production' && (
-                                <FamilieAlert variant={'warning'} inline={false}>
+                                <Alert variant={'warning'}>
                                     {`Denne siden er under utvikling. `}
                                     <a href="https://www.nav.no/no/person/familie/barnetrygd-og-kontantstotte/barnetrygd">
                                         Klikk her for å gå til våre sider for barnetrygd
                                     </a>
-                                </FamilieAlert>
+                                </Alert>
                             )}
                             <AppNavigationProvider>
                                 <AppContainer />

diff --git a/src/frontend/AppContainer.tsx b/src/frontend/AppContainer.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
+import { Alert } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
-import FamilieAlert from './components/Felleskomponenter/FamilieAlert/FamilieAlert';
 import { Feilside } from './components/Felleskomponenter/Feilside/Feilside';
 import SystemetLaster from './components/Felleskomponenter/SystemetLaster/SystemetLaster';
 import { useApp } from './context/AppContext';
@@ -15,12 +15,12 @@ const AppContainer = () => {
             {systemetLaster() && <SystemetLaster />}
             {sluttbruker.status === RessursStatus.IKKE_TILGANG && (
                 <div>
-                    <FamilieAlert variant={'warning'}>
+                    <Alert variant={'warning'} inline>
                         {'Du må søke på papir. '}
                         <a href="https://www.nav.no/no/person/familie/barnetrygd-og-kontantstotte/barnetrygd">
                             Klikk her for å gå til våre sider for barnetrygd
                         </a>
-                    </FamilieAlert>
+                    </Alert>
                 </div>
             )}
             {systemetOK() && <Søknad />}

diff --git a/src/frontend/components/Felleskomponenter/Barnetrygdperiode/BarnetrygdperiodeModal.tsx b/src/frontend/components/Felleskomponenter/Barnetrygdperiode/BarnetrygdperiodeModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { Alert } from '@navikt/ds-react';
 import { ESvar } from '@navikt/familie-form-elements';
 
 import { IEøsBarnetrygdsperiode } from '../../../typer/perioder';
@@ -8,7 +9,6 @@ import { dagenEtterDato, dagensDato, gårsdagensDato, stringTilDate } from '../.
 import { trimWhiteSpace, visFeiloppsummering } from '../../../utils/hjelpefunksjoner';
 import Datovelger from '../Datovelger/Datovelger';
 import { LandDropdown } from '../Dropdowns/LandDropdown';
-import FamilieAlert from '../FamilieAlert/FamilieAlert';
 import JaNeiSpm from '../JaNeiSpm/JaNeiSpm';
 import KomponentGruppe from '../KomponentGruppe/KomponentGruppe';
 import { SkjemaFeiloppsummering } from '../SkjemaFeiloppsummering/SkjemaFeiloppsummering';
@@ -165,9 +165,9 @@ export const BarnetrygdperiodeModal: React.FC<Props> = ({
                             }),
                         }}
                         description={
-                            <FamilieAlert variant={'info'}>
+                            <Alert variant={'info'} inline>
                                 <SpråkTekst id={'ombarnet.trygdbeløp.info'} />
-                            </FamilieAlert>
+                            </Alert>
                         }
                         fullbredde={false}
                     />

diff --git a/src/frontend/components/Felleskomponenter/FamilieAlert/FamilieAlert.tsx b/src/frontend/components/Felleskomponenter/FamilieAlert/FamilieAlert.tsx
diff --git a/src/frontend/components/Felleskomponenter/Feilside/Feilside.tsx b/src/frontend/components/Felleskomponenter/Feilside/Feilside.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 
-import FamilieAlert from '../FamilieAlert/FamilieAlert';
+import { Alert } from '@navikt/ds-react';
+
 import SpråkTekst from '../SpråkTekst/SpråkTekst';
 
 export const Feilside: React.FC = () => {
     return (
         <div>
-            <FamilieAlert variant={'error'} dynamisk>
+            <Alert variant={'error'} inline aria-live={'polite'}>
                 <SpråkTekst id={'felles.crashmelding'} />
-            </FamilieAlert>
+            </Alert>
         </div>
     );
 };
diff --git a/src/frontend/components/Felleskomponenter/Steg/ModellVersjonModal.tsx b/src/frontend/components/Felleskomponenter/Steg/ModellVersjonModal.tsx
@@ -3,9 +3,8 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { BodyLong, Button, Modal } from '@navikt/ds-react';
+import { Alert, BodyLong, Button, Modal } from '@navikt/ds-react';
 
-import FamilieAlert from '../FamilieAlert/FamilieAlert';
 import ModalContent from '../ModalContent';
 import SpråkTekst from '../SpråkTekst/SpråkTekst';
 
@@ -30,11 +29,9 @@ const ModellVersjonModal: React.FC<{ erÅpen: boolean }> = ({ erÅpen }) => {
             }}
         >
             <ModalContent>
-                <FamilieAlert
-                    inline={false}
-                    variant={'error'}
-                    children={<SpråkTekst id={'felles.modal.deployfeil.error'} />}
-                />
+                <Alert variant={'error'}>
+                    <SpråkTekst id={'felles.modal.deployfeil.error'} />
+                </Alert>
                 <StyledBodyLong>
                     <SpråkTekst id={'felles.modal.deployfeil.info'} />
                 </StyledBodyLong>

diff --git a/src/frontend/components/Felleskomponenter/SøkerMåBrukePDF.tsx b/src/frontend/components/Felleskomponenter/SøkerMåBrukePDF.tsx
@@ -2,10 +2,9 @@ import React, { FC } from 'react';
 
 import styled from 'styled-components';
 
-import { BodyShort, Label } from '@navikt/ds-react';
+import { Alert, BodyShort, Label } from '@navikt/ds-react';
 
 import EksternLenke from './EksternLenke/EksternLenke';
-import FamilieAlert from './FamilieAlert/FamilieAlert';
 import Informasjonsbolk from './Informasjonsbolk/Informasjonsbolk';
 import SpråkTekst from './SpråkTekst/SpråkTekst';
 
@@ -21,9 +20,9 @@ const LenkeContainer = styled.div`
 export const SøkerMåBrukePDF: FC<Props> = ({ advarselTekstId, utfyllendeAdvarselInfoId }) => {
     return (
         <Informasjonsbolk aria-live={'polite'}>
-            <FamilieAlert variant={'warning'}>
+            <Alert variant={'warning'} inline>
                 <SpråkTekst id={advarselTekstId} />
-            </FamilieAlert>
+            </Alert>
             {utfyllendeAdvarselInfoId && (
                 <Informasjonsbolk>
                     <Label as="p">

diff --git a/src/frontend/components/Felleskomponenter/expandableContent/ExpandableInfo.tsx b/src/frontend/components/Felleskomponenter/expandableContent/ExpandableInfo.tsx
@@ -4,9 +4,7 @@ import { css } from 'styled-components';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
-import { BodyShort } from '@navikt/ds-react';
-
-import FamilieAlert from '../FamilieAlert/FamilieAlert';
+import { Alert, BodyShort } from '@navikt/ds-react';
 
 import CollapsableContainer from './CollapsableContainer';
 import InfoToggleButton from './InfoToggleButton';
@@ -68,13 +66,7 @@ const ExpandableInfo = ({
             </ButtonContainer>
             <InnholdContainer id={toggleContentId}>
                 <CollapsableContainer isOpen={isOpen} animated={true} ariaLive="polite">
-                    {filledBackground ? (
-                        <FamilieAlert variant={'info'} inline={false}>
-                            {children}
-                        </FamilieAlert>
-                    ) : (
-                        children
-                    )}
+                    {filledBackground ? <Alert variant={'info'}>{children}</Alert> : children}
                 </CollapsableContainer>
             </InnholdContainer>
         </Container>

diff --git a/src/frontend/components/SøknadsSteg/Dokumentasjon/Dokumentasjon.tsx b/src/frontend/components/SøknadsSteg/Dokumentasjon/Dokumentasjon.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import { add, isBefore } from 'date-fns';
 
-import { BodyLong, BodyShort } from '@navikt/ds-react';
+import { Alert, BodyLong, BodyShort } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
 import { useApp } from '../../../context/AppContext';
@@ -11,7 +11,6 @@ import { useSendInnSkjema } from '../../../hooks/useSendInnSkjema';
 import { IDokumentasjon, IVedlegg } from '../../../typer/dokumentasjon';
 import { Dokumentasjonsbehov } from '../../../typer/kontrakt/dokumentasjon';
 import { erDokumentasjonRelevant } from '../../../utils/dokumentasjon';
-import FamilieAlert from '../../Felleskomponenter/FamilieAlert/FamilieAlert';
 import { Feilside } from '../../Felleskomponenter/Feilside/Feilside';
 import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe';
 import PictureScanningGuide from '../../Felleskomponenter/PictureScanningGuide/PictureScanningGuide';
@@ -75,7 +74,7 @@ const Dokumentasjon: React.FC = () => {
         >
             {slettaVedlegg.length > 0 && (
                 <KomponentGruppe>
-                    <FamilieAlert variant={'warning'} inline={false}>
+                    <Alert variant={'warning'}>
                         <BodyShort>
                             <SpråkTekst id={'dokumentasjon.forlangtid.info'} />
                         </BodyShort>
@@ -86,13 +85,13 @@ const Dokumentasjon: React.FC = () => {
                                 </li>
                             ))}
                         </ul>
-                    </FamilieAlert>
+                    </Alert>
                 </KomponentGruppe>
             )}
             <KomponentGruppe>
-                <FamilieAlert variant={'info'} inline={false}>
+                <Alert variant={'info'}>
                     <SpråkTekst id={'dokumentasjon.nudge'} />
-                </FamilieAlert>
+                </Alert>
 
                 <BodyLong>
                     <SpråkTekst id={'dokumentasjon.info'} />

diff --git a/src/frontend/components/SøknadsSteg/Forside/FortsettPåSøknad.tsx b/src/frontend/components/SøknadsSteg/Forside/FortsettPåSøknad.tsx
@@ -3,9 +3,8 @@ import React, { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { BodyLong, Button, Modal } from '@navikt/ds-react';
+import { Alert, BodyLong, Button, Modal } from '@navikt/ds-react';
 
-import FamilieAlert from '../../Felleskomponenter/FamilieAlert/FamilieAlert';
 import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe';
 import ModalContent from '../../Felleskomponenter/ModalContent';
 import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
@@ -34,11 +33,11 @@ const FortsettPåSøknad: FC = () => {
     return (
         <StyledFortsettPåSøknad role={'navigation'}>
             <KomponentGruppe>
-                <FamilieAlert variant={'info'} inline={false}>
+                <Alert variant={'info'}>
                     <BodyLong>
                         <SpråkTekst id={'mellomlagring.info'} />
                     </BodyLong>
-                </FamilieAlert>
+                </Alert>
             </KomponentGruppe>
             <StyledButton onClick={fortsettPåSøknaden}>
                 <SpråkTekst id={'mellomlagring.knapp.fortsett'} />

diff --git a/src/frontend/components/SøknadsSteg/Kvittering/Kvittering.tsx b/src/frontend/components/SøknadsSteg/Kvittering/Kvittering.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { format } from 'date-fns';
 
-import { BodyLong } from '@navikt/ds-react';
+import { Alert, BodyLong } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
 import { useApp } from '../../../context/AppContext';
@@ -11,7 +11,6 @@ import { RouteEnum } from '../../../typer/routes';
 import { setUserProperty, UserProperty } from '../../../utils/amplitude';
 import BlokkerTilbakeKnappModal from '../../Felleskomponenter/BlokkerTilbakeKnappModal/BlokkerTilbakeKnappModal';
 import EksternLenke from '../../Felleskomponenter/EksternLenke/EksternLenke';
-import FamilieAlert from '../../Felleskomponenter/FamilieAlert/FamilieAlert';
 import Informasjonsbolk from '../../Felleskomponenter/Informasjonsbolk/Informasjonsbolk';
 import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe';
 import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
@@ -53,15 +52,15 @@ const Kvittering: React.FC = () => {
     return (
         <Steg tittel={<SpråkTekst id={'kvittering.sidetittel'} />}>
             <KomponentGruppe>
-                <FamilieAlert variant={'success'} inline={false}>
+                <Alert variant={'success'}>
                     <SpråkTekst
                         id={'kvittering.mottatt'}
                         values={{
                             tidspunkt: klokkeslett,
                             dato: dato,
                         }}
                     />
-                </FamilieAlert>
+                </Alert>
             </KomponentGruppe>
             <KomponentGruppe>
                 <BodyLong>

diff --git a/src/frontend/components/SøknadsSteg/OmBarnaDine/OmBarnaDine.tsx b/src/frontend/components/SøknadsSteg/OmBarnaDine/OmBarnaDine.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import { useNavigate } from 'react-router-dom';
 
+import { Alert } from '@navikt/ds-react';
 import { ESvar } from '@navikt/familie-form-elements';
 
 import { useApp } from '../../../context/AppContext';
 import { barnDataKeySpørsmål } from '../../../typer/barn';
 import { ESanitySteg } from '../../../typer/sanity/sanity';
-import FamilieAlert from '../../Felleskomponenter/FamilieAlert/FamilieAlert';
 import JaNeiSpm from '../../Felleskomponenter/JaNeiSpm/JaNeiSpm';
 import KomponentGruppe from '../../Felleskomponenter/KomponentGruppe/KomponentGruppe';
 import SpråkTekst from '../../Felleskomponenter/SpråkTekst/SpråkTekst';
@@ -73,9 +73,9 @@ const OmBarnaDine: React.FC = () => {
                         ]
                     }
                     tilleggsinfo={
-                        <FamilieAlert variant={'info'}>
+                        <Alert variant={'info'} inline>
                             <SpråkTekst id={'ombarna.institusjon.info'} />
-                        </FamilieAlert>
+                        </Alert>
                     }
                 />
 
@@ -105,9 +105,9 @@ const OmBarnaDine: React.FC = () => {
                             ]
                         }
                         tilleggsinfo={
-                            <FamilieAlert variant={'info'}>
+                            <Alert variant={'info'} inline>
                                 <SpråkTekst id={'ombarna.adoptert.info'} />
-                            </FamilieAlert>
+                            </Alert>
                         }
                     />
                     <HvilkeBarnCheckboxGruppe
@@ -166,9 +166,9 @@ const OmBarnaDine: React.FC = () => {
                             ]
                         }
                         tilleggsinfo={
-                            <FamilieAlert variant={'info'}>
+                            <Alert variant={'info'} inline>
                                 <SpråkTekst id={'felles.korteopphold.info'} />
-                            </FamilieAlert>
+                            </Alert>
                         }
                     />
                     <HvilkeBarnCheckboxGruppe