SKomponent for meldedag med titteÃl/ingress

src/components/kalender/Uke.tsx

@@ -8,7 +8,6 @@ type Props = {
 };
 
 export const Uke = ({ meldekortUke, readonly }: Props) => {
-
     return (
         <tr className={styles.ukeRadKontainer}>
             {meldekortUke.map((dag) => (

src/components/meldekort-dag-modal/MeldekortDagModal.tsx

@@ -10,6 +10,7 @@ import { formatterDato } from '@utils/datetime';
 import { useMeldekortUtfylling } from '@context/meldekort-utfylling/useMeldekortUtfylling';
 
 import style from './MeldekortDagModal.module.css';
+import { MeldekortDagStatusValg } from '@components/meldekort-dag-modal/status-valg/MeldekortDagStatusValg';
 
 export const MeldekortDagModal = () => {
     const { valgtMeldekortDag, setValgtMeldekortDag, lagreMeldekortDag } = useMeldekortUtfylling();
@@ -60,12 +61,18 @@ export const MeldekortDagModal = () => {
                                 setValgtStatus({ ...valgtStatus, underValg: value });
                             }}
                         >
-                            <Radio value={MeldekortDeltattUndervalg.DeltattUtenLønn}>
-                                {'Uten lønn'}
-                            </Radio>
-                            <Radio value={MeldekortDeltattUndervalg.DeltattMedLønn}>
-                                {'Med lønn'}
-                            </Radio>
+                            <MeldekortDagStatusValg
+                                status={MeldekortDeltattUndervalg.DeltattUtenLønn}
+                                tittel={'Uten lønn'}
+                                ingress={'Du har deltatt på tiltak uten lønn fra tiltaksarrangør'}
+                            />
+                            <MeldekortDagStatusValg
+                                status={MeldekortDeltattUndervalg.DeltattMedLønn}
+                                tittel={'Med lønn'}
+                                ingress={
+                                    'Du har deltatt på tiltak og fått lønn fra tiltaksarrangør'
+                                }
+                            />
                         </RadioGroup>
                     )}
                     <Radio value={'ikkeDeltatt'}>
@@ -81,16 +88,26 @@ export const MeldekortDagModal = () => {
                                 setValgtStatus({ ...valgtStatus, underValg: value });
                             }}
                         >
-                            <Radio value={MeldekortIkkeDeltattUndervalg.FraværSyk}>{'Syk'}</Radio>
-                            <Radio value={MeldekortIkkeDeltattUndervalg.FraværSyktBarn}>
-                                {'Sykt barn eller syk barnepasser'}
-                            </Radio>
-                            <Radio value={MeldekortIkkeDeltattUndervalg.FraværAnnet}>
-                                {'Annet godkjent fravær'}
-                            </Radio>
-                            <Radio value={MeldekortIkkeDeltattUndervalg.IkkeDeltatt}>
-                                {'Annet ikke godkjent fravær'}
-                            </Radio>
+                            <MeldekortDagStatusValg
+                                status={MeldekortIkkeDeltattUndervalg.FraværSyk}
+                                tittel={'Syk'}
+                                ingress={'Du har vært syk'}
+                            />
+                            <MeldekortDagStatusValg
+                                status={MeldekortIkkeDeltattUndervalg.FraværSyktBarn}
+                                tittel={'Sykt barn'}
+                                ingress={'Du har hatt sykt barn eller syk barnepasser'}
+                            />
+                            <MeldekortDagStatusValg
+                                status={MeldekortIkkeDeltattUndervalg.FraværAnnet}
+                                tittel={'Annet godkjent fravær'}
+                                ingress={'Du har annet fravær som er godkjent av Nav'}
+                            />
+                            <MeldekortDagStatusValg
+                                status={MeldekortIkkeDeltattUndervalg.IkkeDeltatt}
+                                tittel={'Annet fravær'}
+                                ingress={'Annet fravær som ikke er godkjent av Nav'}
+                            />
                         </RadioGroup>
                     )}
                 </RadioGroup>

src/components/meldekort-dag-modal/status-valg/MeldekortDagStatusValg.module.css

@@ -0,0 +1,8 @@
+.valg {
+    border-radius: var(--a-border-radius-large);
+    padding:  0.25rem 0.5rem;
+}
+
+.utenLønn {
+    background: var(--a-green-200);
+}

src/components/meldekort-dag-modal/status-valg/MeldekortDagStatusValg.tsx

@@ -0,0 +1,22 @@
+import {
+    MeldekortDeltattUndervalg,
+    MeldekortIkkeDeltattUndervalg,
+} from '@typer/meldekort-utfylling';
+import { BodyLong, Radio } from '@navikt/ds-react';
+
+import style from './MeldekortDagStatusValg.module.css'
+
+type Props = {
+    status: MeldekortDeltattUndervalg | MeldekortIkkeDeltattUndervalg;
+    tittel: string;
+    ingress: string;
+};
+
+export const MeldekortDagStatusValg = ({ status, tittel, ingress }: Props) => {
+    return (
+        <Radio value={status} className={style.valg}>
+            <BodyLong weight={'semibold'}>{tittel}</BodyLong>
+            <BodyLong>{ingress}</BodyLong>
+        </Radio>
+    );
+};