Merge pull request #608 from navikt/bytt-veilederverktoykomponent

Bruk designsystem-komponent til Veilederverktøy

src/app.tsx

@@ -1,5 +1,5 @@
 import PersonInfo from './component/personinfo/personinfo';
-import Veilederverktoylinje from './component/veilederverktoy/veilederverktoylinje';
+import { Veilederverktoy } from './component/veilederverktoy/veilederverktoy';
 import Etiketter from './component/personinfo/components/etiketter';
 import Tilbakelenke from './component/components/tilbakelenke/tilbakelenke';
 import StoreProvider from './store/store-provider';
@@ -31,7 +31,7 @@ function App({ fnr, enhet, tilbakeTilFlate, visVeilederVerktoy, skjulEtiketter,
                     <div className="visittkortfs__container">
                         <PersonInfo />
                         {!skjulEtiketter && <Etiketter />}
-                        <Veilederverktoylinje />
+                        <Veilederverktoy />
                     </div>
                 </DataFetcher>
                 <VeilederverktoyModalController />

src/component/components/varselmodal/varsel-modal.less

@@ -7,6 +7,7 @@
             text-align: start;
             max-width: 66ch; // Unngår at tekstlinjer vert ubehageleg lange å lese
         }
+
         ul {
             text-align: left;
             margin: 0.5rem 1.5rem;
@@ -15,9 +16,14 @@
         }
     }
 
+    // Gjer det lettare å midtstille #varsel-ikon
+    & > :first-child {
+        text-align: start;
+    }
+
     #varsel-ikon {
         margin-top: -3rem; // placerar en ikon med størrelsen 64x64 i mitten
-        margin-left: 3rem; // Tilsvarar breidda av lukk-knappen til modalen som også bur i header (2024-01-17)
+        margin-left: calc(50% - 2rem); // midtstillar ikonet langs x-aksen
     }
 
     .modal-footer {

src/component/veilederverktoy/prosess/kvittering.tsx

@@ -27,8 +27,10 @@ function Kvittering({ tittel, alertStripeTekst, footer, onRequestClose }: Kvitte
             <Heading size="medium" level="2" className="modal-info-tekst__undertekst">
                 {tittel}
             </Heading>
-            <BodyShort size="small">{alertStripeTekst}</BodyShort>
-            {!!footer && <BodyShort size="medium">{footer}</BodyShort>}
+            <BodyShort size="small" spacing={true}>
+                {alertStripeTekst}
+            </BodyShort>
+            {footer}
         </VarselModal>
     );
 }

src/component/veilederverktoy/prosess/start-prosess.tsx

@@ -1,28 +1,24 @@
+import { Dropdown } from '@navikt/ds-react';
 import withClickMetric, { ClickMetricProps } from '../../components/click-metric/click-metric';
-import { MenyKnapp } from '../../components/meny-knapp/meny-knapp';
 import { useAppStore } from '../../../store/app-store';
 
 interface StartProsessProps {
     knappeTekst: string;
     onClick?: () => void;
 }
 
-const ProcessKnapp = withClickMetric(MenyKnapp);
+const DropdownMenuListItem = withClickMetric(Dropdown.Menu.List.Item);
 
-function StartProcess({ knappeTekst, onClick, metricName }: StartProsessProps & ClickMetricProps) {
+export const StartProsess = ({ knappeTekst, onClick, metricName }: StartProsessProps & ClickMetricProps) => {
     const { setAvsluttOppfolgingOpptelt } = useAppStore();
 
     if (metricName === 'avslutt_oppfolging') {
         setAvsluttOppfolgingOpptelt(false);
     }
 
     return (
-        <li>
-            <ProcessKnapp onClick={onClick} metricName={metricName}>
-                {knappeTekst}
-            </ProcessKnapp>
-        </li>
+        <DropdownMenuListItem as="button" variant="tertiary-neutral" onClick={onClick} metricName={metricName}>
+            {knappeTekst}
+        </DropdownMenuListItem>
     );
-}
-
-export default StartProcess;
+};

src/component/veilederverktoy/start-manuell-oppfolging/start-manuell-oppfolging-kvittering.tsx

@@ -44,7 +44,7 @@ function StartManuellOppfolgingKvittering({ begrunnelse }: StartManuellOppfolgin
             tittel="Endre til manuell oppfølging"
             alertStripeTekst={`Endring til manuell oppfølging er gjennomført. Begrunnelse: ${begrunnelse}`}
             footer={
-                <Alert variant="warning">
+                <Alert variant="warning" size="small">
                     Brukere som ikke kan legge inn CV og jobbprofil selv skal få hjelp til dette.
                 </Alert>
             }

src/component/veilederverktoy/start-registrering/start-registrering-prosess.tsx

@@ -1,3 +1,4 @@
+import { Dropdown } from '@navikt/ds-react';
 import { erITestMiljo } from '../../../util/utils';
 import { logMetrikk } from '../../../util/logger';
 import { useAppStore } from '../../../store/app-store';
@@ -19,15 +20,12 @@ function byggRegistreringUrl(fnr: string, enhet: StringOrNothing, bruk_gammel_ar
     }
 }
 
-function StartRegistreringProsess() {
+export const StartRegistreringProsess = () => {
     const { brukerFnr, enhetId } = useAppStore();
     const { oppfolging, features } = useDataStore();
 
     const kanRegistreres = kanRegistreresEllerReaktiveres(oppfolging);
-
-    if (!kanRegistreres) {
-        return null;
-    }
+    const registreringUrl = byggRegistreringUrl(brukerFnr, enhetId, features[BRUK_GAMMEL_ARBEIDSREGISTRERING_URL]);
 
     const brukerType = () => {
         if (oppfolging?.erSykmeldtMedArbeidsgiver) {
@@ -52,17 +50,17 @@ function StartRegistreringProsess() {
         }
     };
 
+    if (!kanRegistreres) {
+        return null;
+    }
+
     return (
-        <li>
-            <a
-                href={byggRegistreringUrl(brukerFnr, enhetId, features[BRUK_GAMMEL_ARBEIDSREGISTRERING_URL])}
-                className="knapp meny-knapp btn--mb1"
-                onClick={() => logMetrikk('veilarbvisittkortfs.metrikker.registrering', {}, { brukerType: brukerType })}
-            >
-                {brukerTekst()}
-            </a>
-        </li>
+        <Dropdown.Menu.List.Item
+            as="a"
+            href={registreringUrl}
+            onClick={() => logMetrikk('veilarbvisittkortfs.metrikker.registrering', {}, { brukerType: brukerType })}
+        >
+            {brukerTekst()}
+        </Dropdown.Menu.List.Item>
     );
-}
-
-export default StartRegistreringProsess;
+};