Skip to content

Commit 12f3508

Browse files
mariusfossmariusfoss
committed
IS-3007: Fjernet accordion ifm. visning av flere opplysning fra behandler, samt refaktorert slik at elementer på siden følger samme stil
1 parent 9b5d489 commit 12f3508

36 files changed

+430
-696
lines changed

‎src/components/FieldReadOnly.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { ReactNode } from "react";
2+
3+
interface FieldReadOnlyProps {
4+
label: string;
5+
children: ReactNode;
6+
className?: string;
7+
classNameLabel?: string;
8+
}
9+
10+
export function FieldReadOnly(fieldReadOnlyProps: FieldReadOnlyProps) {
11+
const {
12+
label,
13+
className = "",
14+
classNameLabel = "",
15+
children,
16+
} = fieldReadOnlyProps;
17+
18+
return (
19+
<div
20+
className={`navds-body-short--small inline-table w-full mb-5 ${className}`}
21+
>
22+
<div className={`navds-label mt-0 mb-1 ${classNameLabel}`}>{label}</div>
23+
{children}
24+
</div>
25+
);
26+
}

‎src/mocks/syfosmregister/sykmeldingerMock.ts

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,14 @@ export const sykmeldingerMock = [
4444
},
4545
fom: "2020-07-22",
4646
tom: TODAY,
47-
gradert: null,
48-
behandlingsdager: null,
49-
innspillTilArbeidsgiver: null,
47+
gradert: {
48+
grad: 50,
49+
reisetilskudd: true,
50+
},
51+
behandlingsdager: 10,
52+
innspillTilArbeidsgiver: "Ta deg en bolle",
5053
type: "AKTIVITET_IKKE_MULIG",
54+
reisetilskudd: true,
5155
},
5256
{
5357
aktivitetIkkeMulig: null,
@@ -118,7 +122,43 @@ export const sykmeldingerMock = [
118122
juridiskOrgnummer: "000999000",
119123
orgNavn: "Virksomhet uten leder AS",
120124
},
121-
sporsmalOgSvarListe: null,
125+
sporsmalOgSvarListe: [
126+
{
127+
tekst:
128+
"Hvilke dager var du borte fra jobb før datoen sykmeldingen gjelder fra?",
129+
shortName: "PERIODE",
130+
svar: {
131+
svarType: "PERIODER",
132+
svar: '[{"fom":"2020-02-24","tom":"2020-03-22"}]',
133+
},
134+
},
135+
{
136+
tekst:
137+
"Brukte du egenmelding eller noen annen sykmelding før datoen denne sykmeldingen gjelder fra?",
138+
shortName: "FRAVAER",
139+
svar: {
140+
svarType: "JA_NEI",
141+
svar: "JA",
142+
},
143+
},
144+
{
145+
tekst:
146+
"Har du forsikring som gjelder de første 16 dagene av sykefraværet?",
147+
shortName: "FORSIKRING",
148+
svar: {
149+
svarType: "JA_NEI",
150+
svar: "NEI",
151+
},
152+
},
153+
{
154+
tekst: "Jeg er sykmeldt fra",
155+
shortName: "ARBEIDSSITUASJON",
156+
svar: {
157+
svarType: "ARBEIDSSITUASJON",
158+
svar: "NAERINGSDRIVENDE",
159+
},
160+
},
161+
],
122162
},
123163
medisinskVurdering: {
124164
hovedDiagnose: {
@@ -136,7 +176,7 @@ export const sykmeldingerMock = [
136176
],
137177
svangerskap: true,
138178
yrkesskade: false,
139-
yrkesskadeDato: null,
179+
yrkesskadeDato: "2020-10-15",
140180
},
141181
skjermesForPasient: false,
142182
prognose: {
@@ -180,7 +220,11 @@ export const sykmeldingerMock = [
180220
tiltakNAV:
181221
"Pasienten har plager som er kommet tilbake etter operasjon. Det er nylig tatt MR bildet som viser forandringer i hånd som mulig må opereres. Venter på time. Det er mulig sykemledingen vil vare utover aktuell sm periode. ",
182222
andreTiltak: null,
183-
meldingTilNAV: null,
223+
meldingTilNAV: {
224+
bistandUmiddelbart: true,
225+
beskrivBistand:
226+
"Nav kan vise til egen forskning på faren med phaser blasts",
227+
},
184228
meldingTilArbeidsgiver: null,
185229
kontaktMedPasient: {
186230
kontaktDato: "2020-07-22",

‎src/sider/sykepengsoknader/soknad-felles/SykmeldingUtdrag.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,7 @@ const SykmeldingUtdrag = ({
3838
perioder={sykmelding.mulighetForArbeid.perioder}
3939
/>
4040
<SykmeldingNokkelOpplysning tittel={texts.arbeidsgiver}>
41-
<p className="js-arbeidsgiver">
42-
{sykmelding.mottakendeArbeidsgiver?.navn}
43-
</p>
41+
<p>{sykmelding.mottakendeArbeidsgiver?.navn}</p>
4442
</SykmeldingNokkelOpplysning>
4543
<SykmeldingNokkelOpplysning tittel={texts.utdrag}>
4644
<p className="js-utstedelsesdato">

‎src/sider/sykmeldinger/sykmelding/ArbeidsgiversNokkelopplysninger.tsx

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from "react";
22
import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
33
import { tidligsteFom } from "@/utils/periodeUtils";
4-
import SykmeldingNokkelOpplysning from "./sykmeldingOpplysninger/SykmeldingNokkelOpplysning";
54
import SykmeldingPerioder from "./sykmeldingOpplysninger/SykmeldingPerioder";
65
import { SykmeldingCheckboxForFelt } from "./sykmeldingOpplysninger/SykmeldingCheckboxForFelt";
76
import { SladdImage } from "../../../../img/ImageComponents";
7+
import { Nokkelopplysning } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning";
88

99
const texts = {
1010
arbeidsgiver: "Arbeidsgiver som legen har skrevet inn",
@@ -31,13 +31,9 @@ const ArbeidsgiversNokkelopplysninger = (
3131
<div className="arbeidsgiversSykmelding__nokkelopplysninger">
3232
<SykmeldingPerioder perioder={sykmelding.mulighetForArbeid.perioder} />
3333
{!sykmelding.skalViseSkravertFelt ? null : (
34-
<SykmeldingNokkelOpplysning tittel={texts.diagnose} Overskrift="h4">
35-
<img
36-
src={SladdImage}
37-
className="js-diagnose"
38-
alt={texts.diagnoseSkjult}
39-
/>
40-
</SykmeldingNokkelOpplysning>
34+
<Nokkelopplysning label={texts.diagnose}>
35+
<img src={SladdImage} alt={texts.diagnoseSkjult} />
36+
</Nokkelopplysning>
4137
)}
4238
<SykmeldingCheckboxForFelt
4339
sykmeldingBolk={sykmelding.friskmelding}
@@ -46,34 +42,27 @@ const ArbeidsgiversNokkelopplysninger = (
4642
className="blokk"
4743
/>
4844
{!sykmelding.friskmelding.hensynPaaArbeidsplassen ? null : (
49-
<SykmeldingNokkelOpplysning tittel={texts.hensynTittel} Overskrift="h4">
50-
<p className="js-hensynPaaArbeidsplassen">
51-
{sykmelding.friskmelding.hensynPaaArbeidsplassen}
52-
</p>
53-
</SykmeldingNokkelOpplysning>
45+
<Nokkelopplysning label={texts.hensynTittel}>
46+
<p>{sykmelding.friskmelding.hensynPaaArbeidsplassen}</p>
47+
</Nokkelopplysning>
5448
)}
5549
{!sykmelding.arbeidsgiver ? null : (
56-
<SykmeldingNokkelOpplysning tittel={texts.arbeidsgiver} Overskrift="h4">
57-
<p className="js-arbeidsgiver">{sykmelding.arbeidsgiver}</p>
50+
<Nokkelopplysning label={texts.arbeidsgiver}>
51+
<p>{sykmelding.arbeidsgiver}</p>
5852
{
5953
// periode-sjekken kan fjernes etter 1.august 2018 (Når sykmeldinger med fom før 26.april uansett ikke vises)
6054
sykmelding.stillingsprosent &&
6155
tidligsteFom(sykmelding.mulighetForArbeid.perioder) >=
6256
new Date("2018-04-26") ? (
63-
<p className="js-stillingsprosent">
64-
{getStillingsprosentText(sykmelding.stillingsprosent)}
65-
</p>
57+
<p>{getStillingsprosentText(sykmelding.stillingsprosent)}</p>
6658
) : null
6759
}
68-
</SykmeldingNokkelOpplysning>
60+
</Nokkelopplysning>
6961
)}
7062
{!sykmelding.bekreftelse.sykmelder ? null : (
71-
<SykmeldingNokkelOpplysning
72-
tittel={texts.avsenderTittel}
73-
Overskrift="h4"
74-
>
75-
<p className="js-sykmelder">{sykmelding.bekreftelse.sykmelder}</p>
76-
</SykmeldingNokkelOpplysning>
63+
<Nokkelopplysning label={texts.avsenderTittel}>
64+
<p>{sykmelding.bekreftelse.sykmelder}</p>
65+
</Nokkelopplysning>
7766
)}
7867
</div>
7968
);

‎src/sider/sykmeldinger/sykmelding/ArbeidsgiversSykmeldingOpplysninger.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ArbeidsgiversSykmeldingOpplysninger = (
1818
{sykmelding.pasient.fornavn} {sykmelding.pasient.mellomnavn}{" "}
1919
{sykmelding.pasient.etternavn}
2020
</h3>
21-
<p className="js-fnr arbeidsgiversSykmelding__fodselsnummer">
21+
<p className="arbeidsgiversSykmelding__fodselsnummer">
2222
{sykmelding.pasient.fnr}
2323
</p>
2424
</header>

‎src/sider/sykmeldinger/sykmelding/avvisteSykmeldinger/BekreftAvvistSykmelding.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const BekreftAvvistSykmelding = (): ReactElement => {
1313
<>
1414
<div>
1515
<Checkbox
16-
className="bekreftLestAvvistSykmelding bekreftCheckboksPanel"
16+
className="bekreftCheckboksPanel max-w-md mr-auto ml-auto"
1717
label={texts.confirmCheckboxLabel}
1818
disabled
1919
/>

‎src/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/DineKoronaSykmeldingOpplysninger.tsx

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from "react";
22
import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
3-
import SykmeldingNokkelOpplysning from "./SykmeldingNokkelOpplysning";
43
import SykmeldingPerioder from "./SykmeldingPerioder";
54
import { Egenmeldingsdager } from "./Egenmeldingsdager";
65
import { Heading } from "@navikt/ds-react";
6+
import { Nokkelopplysning } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning";
7+
import { RadContainer } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/RadContainer";
78

89
const texts = {
910
diagnose: "Diagnose",
@@ -31,35 +32,21 @@ export default function DineKoronaSykmeldingOpplysninger({
3132
/>
3233
)}
3334
{sykmelding.diagnose.hoveddiagnose ? (
34-
<div className="hoveddiagnose">
35-
<div className="rad-container">
36-
<SykmeldingNokkelOpplysning
37-
className="nokkelopplysning--hoveddiagnose"
38-
tittel={texts.diagnose}
39-
>
40-
<div>
41-
<p className="js-hoveddiagnose">
42-
{sykmelding.diagnose.hoveddiagnose.diagnose}
43-
</p>
44-
</div>
45-
</SykmeldingNokkelOpplysning>
46-
<div className="nokkelopplysning nokkelopplysning--hoveddiagnose js-hoveddiagnose-kode-container">
47-
<div className="medHjelpetekst">
48-
<h3 className="nokkelopplysning__tittel">
49-
{texts.diagnosekode}
50-
</h3>
51-
</div>
35+
<div className="md:mb-8">
36+
<RadContainer>
37+
<Nokkelopplysning label={texts.diagnose} className={"mb-0"}>
38+
<p>{sykmelding.diagnose.hoveddiagnose.diagnose}</p>
39+
</Nokkelopplysning>
40+
<Nokkelopplysning label={texts.diagnosekode} className={"mb-0"}>
5241
<p>
53-
<span className="js-hoveddiagnose-kode">
54-
{sykmelding.diagnose.hoveddiagnose.diagnosekode}
55-
</span>
42+
<span>{sykmelding.diagnose.hoveddiagnose.diagnosekode}</span>
5643
&nbsp;
57-
<span className="js-hoveddiagnose-system">
44+
<span>
5845
{sykmelding.diagnose.hoveddiagnose.diagnosesystem}
5946
</span>
6047
</p>
61-
</div>
62-
</div>
48+
</Nokkelopplysning>
49+
</RadContainer>
6350
</div>
6451
) : null}
6552
</div>

‎src/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Egenmeldingsdager.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
2-
import SykmeldingNokkelOpplysning from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingNokkelOpplysning";
32
import { tilLesbarDatoMedArstall } from "@/utils/datoUtils";
43
import dayjs from "dayjs";
4+
import { Nokkelopplysning } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning";
55

66
const texts = {
77
title: "Egenmeldingsdager (lagt til av deg)",
@@ -39,8 +39,8 @@ export const Egenmeldingsdager = ({
3939
egenmeldingsdager,
4040
}: EgenmeldingsdagerProps) => {
4141
return (
42-
<SykmeldingNokkelOpplysning tittel={texts.title}>
42+
<Nokkelopplysning label={texts.title}>
4343
<EgenmeldingsdagerSummary egenmeldingsdager={egenmeldingsdager} />
44-
</SykmeldingNokkelOpplysning>
44+
</Nokkelopplysning>
4545
);
4646
};

‎src/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { ReactNode } from "react";
2+
import { FieldReadOnly } from "@/components/FieldReadOnly";
3+
4+
interface NokkelopplysningProps {
5+
label: string;
6+
children?: ReactNode;
7+
className?: string;
8+
isSubopplysning?: boolean;
9+
}
10+
11+
export function Nokkelopplysning(nokkelopplysningProps: NokkelopplysningProps) {
12+
const {
13+
label,
14+
children,
15+
className = "",
16+
isSubopplysning = false,
17+
} = nokkelopplysningProps;
18+
return (
19+
<FieldReadOnly
20+
label={label}
21+
className={`${className} ${isSubopplysning ? "ml-6" : ""}`}
22+
classNameLabel={"nokkelopplysning__tittel"}
23+
>
24+
{children}
25+
</FieldReadOnly>
26+
);
27+
}

‎src/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/OpplysningListItem.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { ReactNode } from "react";
2+
3+
interface OpplysningListItemProps {
4+
children?: ReactNode;
5+
}
6+
7+
export function OpplysningListItem(
8+
opplysningListItemProps: OpplysningListItemProps
9+
) {
10+
const { children } = opplysningListItemProps;
11+
12+
return (
13+
<p className={`before:content-['–'] before:mr-1 before:inline-block`}>
14+
{children}
15+
</p>
16+
);
17+
}

‎src/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/RadContainer.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { ReactNode } from "react";
2+
3+
interface RadContainerProps {
4+
children?: ReactNode;
5+
}
6+
7+
export function RadContainer(radContainerProps: RadContainerProps) {
8+
const { children } = radContainerProps;
9+
return (
10+
<div
11+
className={
12+
"md:flex md:mr-8 md:flex-1 md:w-[calc(50% - 2rem)] md:last:*:w-1/2 md:last:*:mr-0"
13+
}
14+
>
15+
{children}
16+
</div>
17+
);
18+
}

0 commit comments

Comments
 (0)