Skip to content

Commit

Permalink
IS-3007: Fjernet accordion ifm. visning av flere opplysning fra behan…
Browse files Browse the repository at this point in the history
…dler, samt refaktorert slik at elementer på siden følger samme stil
  • Loading branch information
mariusfoss committed Jan 30, 2025
1 parent 9b5d489 commit 12f3508
Show file tree
Hide file tree
Showing 36 changed files with 430 additions and 696 deletions.
26 changes: 26 additions & 0 deletions src/components/FieldReadOnly.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React, { ReactNode } from "react";

interface FieldReadOnlyProps {
label: string;
children: ReactNode;
className?: string;
classNameLabel?: string;
}

export function FieldReadOnly(fieldReadOnlyProps: FieldReadOnlyProps) {
const {
label,
className = "",
classNameLabel = "",
children,
} = fieldReadOnlyProps;

return (
<div
className={`navds-body-short--small inline-table w-full mb-5 ${className}`}
>
<div className={`navds-label mt-0 mb-1 ${classNameLabel}`}>{label}</div>
{children}
</div>
);
}
56 changes: 50 additions & 6 deletions src/mocks/syfosmregister/sykmeldingerMock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,14 @@ export const sykmeldingerMock = [
},
fom: "2020-07-22",
tom: TODAY,
gradert: null,
behandlingsdager: null,
innspillTilArbeidsgiver: null,
gradert: {
grad: 50,
reisetilskudd: true,
},
behandlingsdager: 10,
innspillTilArbeidsgiver: "Ta deg en bolle",
type: "AKTIVITET_IKKE_MULIG",
reisetilskudd: true,
},
{
aktivitetIkkeMulig: null,
Expand Down Expand Up @@ -118,7 +122,43 @@ export const sykmeldingerMock = [
juridiskOrgnummer: "000999000",
orgNavn: "Virksomhet uten leder AS",
},
sporsmalOgSvarListe: null,
sporsmalOgSvarListe: [
{
tekst:
"Hvilke dager var du borte fra jobb før datoen sykmeldingen gjelder fra?",
shortName: "PERIODE",
svar: {
svarType: "PERIODER",
svar: '[{"fom":"2020-02-24","tom":"2020-03-22"}]',
},
},
{
tekst:
"Brukte du egenmelding eller noen annen sykmelding før datoen denne sykmeldingen gjelder fra?",
shortName: "FRAVAER",
svar: {
svarType: "JA_NEI",
svar: "JA",
},
},
{
tekst:
"Har du forsikring som gjelder de første 16 dagene av sykefraværet?",
shortName: "FORSIKRING",
svar: {
svarType: "JA_NEI",
svar: "NEI",
},
},
{
tekst: "Jeg er sykmeldt fra",
shortName: "ARBEIDSSITUASJON",
svar: {
svarType: "ARBEIDSSITUASJON",
svar: "NAERINGSDRIVENDE",
},
},
],
},
medisinskVurdering: {
hovedDiagnose: {
Expand All @@ -136,7 +176,7 @@ export const sykmeldingerMock = [
],
svangerskap: true,
yrkesskade: false,
yrkesskadeDato: null,
yrkesskadeDato: "2020-10-15",
},
skjermesForPasient: false,
prognose: {
Expand Down Expand Up @@ -180,7 +220,11 @@ export const sykmeldingerMock = [
tiltakNAV:
"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. ",
andreTiltak: null,
meldingTilNAV: null,
meldingTilNAV: {
bistandUmiddelbart: true,
beskrivBistand:
"Nav kan vise til egen forskning på faren med phaser blasts",
},
meldingTilArbeidsgiver: null,
kontaktMedPasient: {
kontaktDato: "2020-07-22",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,7 @@ const SykmeldingUtdrag = ({
perioder={sykmelding.mulighetForArbeid.perioder}
/>
<SykmeldingNokkelOpplysning tittel={texts.arbeidsgiver}>
<p className="js-arbeidsgiver">
{sykmelding.mottakendeArbeidsgiver?.navn}
</p>
<p>{sykmelding.mottakendeArbeidsgiver?.navn}</p>
</SykmeldingNokkelOpplysning>
<SykmeldingNokkelOpplysning tittel={texts.utdrag}>
<p className="js-utstedelsesdato">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
import { tidligsteFom } from "@/utils/periodeUtils";
import SykmeldingNokkelOpplysning from "./sykmeldingOpplysninger/SykmeldingNokkelOpplysning";
import SykmeldingPerioder from "./sykmeldingOpplysninger/SykmeldingPerioder";
import { SykmeldingCheckboxForFelt } from "./sykmeldingOpplysninger/SykmeldingCheckboxForFelt";
import { SladdImage } from "../../../../img/ImageComponents";
import { Nokkelopplysning } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning";

const texts = {
arbeidsgiver: "Arbeidsgiver som legen har skrevet inn",
Expand All @@ -31,13 +31,9 @@ const ArbeidsgiversNokkelopplysninger = (
<div className="arbeidsgiversSykmelding__nokkelopplysninger">
<SykmeldingPerioder perioder={sykmelding.mulighetForArbeid.perioder} />
{!sykmelding.skalViseSkravertFelt ? null : (
<SykmeldingNokkelOpplysning tittel={texts.diagnose} Overskrift="h4">
<img
src={SladdImage}
className="js-diagnose"
alt={texts.diagnoseSkjult}
/>
</SykmeldingNokkelOpplysning>
<Nokkelopplysning label={texts.diagnose}>
<img src={SladdImage} alt={texts.diagnoseSkjult} />
</Nokkelopplysning>
)}
<SykmeldingCheckboxForFelt
sykmeldingBolk={sykmelding.friskmelding}
Expand All @@ -46,34 +42,27 @@ const ArbeidsgiversNokkelopplysninger = (
className="blokk"
/>
{!sykmelding.friskmelding.hensynPaaArbeidsplassen ? null : (
<SykmeldingNokkelOpplysning tittel={texts.hensynTittel} Overskrift="h4">
<p className="js-hensynPaaArbeidsplassen">
{sykmelding.friskmelding.hensynPaaArbeidsplassen}
</p>
</SykmeldingNokkelOpplysning>
<Nokkelopplysning label={texts.hensynTittel}>
<p>{sykmelding.friskmelding.hensynPaaArbeidsplassen}</p>
</Nokkelopplysning>
)}
{!sykmelding.arbeidsgiver ? null : (
<SykmeldingNokkelOpplysning tittel={texts.arbeidsgiver} Overskrift="h4">
<p className="js-arbeidsgiver">{sykmelding.arbeidsgiver}</p>
<Nokkelopplysning label={texts.arbeidsgiver}>
<p>{sykmelding.arbeidsgiver}</p>
{
// periode-sjekken kan fjernes etter 1.august 2018 (Når sykmeldinger med fom før 26.april uansett ikke vises)
sykmelding.stillingsprosent &&
tidligsteFom(sykmelding.mulighetForArbeid.perioder) >=
new Date("2018-04-26") ? (
<p className="js-stillingsprosent">
{getStillingsprosentText(sykmelding.stillingsprosent)}
</p>
<p>{getStillingsprosentText(sykmelding.stillingsprosent)}</p>
) : null
}
</SykmeldingNokkelOpplysning>
</Nokkelopplysning>
)}
{!sykmelding.bekreftelse.sykmelder ? null : (
<SykmeldingNokkelOpplysning
tittel={texts.avsenderTittel}
Overskrift="h4"
>
<p className="js-sykmelder">{sykmelding.bekreftelse.sykmelder}</p>
</SykmeldingNokkelOpplysning>
<Nokkelopplysning label={texts.avsenderTittel}>
<p>{sykmelding.bekreftelse.sykmelder}</p>
</Nokkelopplysning>
)}
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const ArbeidsgiversSykmeldingOpplysninger = (
{sykmelding.pasient.fornavn} {sykmelding.pasient.mellomnavn}{" "}
{sykmelding.pasient.etternavn}
</h3>
<p className="js-fnr arbeidsgiversSykmelding__fodselsnummer">
<p className="arbeidsgiversSykmelding__fodselsnummer">
{sykmelding.pasient.fnr}
</p>
</header>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const BekreftAvvistSykmelding = (): ReactElement => {
<>
<div>
<Checkbox
className="bekreftLestAvvistSykmelding bekreftCheckboksPanel"
className="bekreftCheckboksPanel max-w-md mr-auto ml-auto"
label={texts.confirmCheckboxLabel}
disabled
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React from "react";
import { SykmeldingOldFormat } from "@/data/sykmelding/types/SykmeldingOldFormat";
import SykmeldingNokkelOpplysning from "./SykmeldingNokkelOpplysning";
import SykmeldingPerioder from "./SykmeldingPerioder";
import { Egenmeldingsdager } from "./Egenmeldingsdager";
import { Heading } from "@navikt/ds-react";
import { Nokkelopplysning } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning";
import { RadContainer } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/RadContainer";

const texts = {
diagnose: "Diagnose",
Expand Down Expand Up @@ -31,35 +32,21 @@ export default function DineKoronaSykmeldingOpplysninger({
/>
)}
{sykmelding.diagnose.hoveddiagnose ? (
<div className="hoveddiagnose">
<div className="rad-container">
<SykmeldingNokkelOpplysning
className="nokkelopplysning--hoveddiagnose"
tittel={texts.diagnose}
>
<div>
<p className="js-hoveddiagnose">
{sykmelding.diagnose.hoveddiagnose.diagnose}
</p>
</div>
</SykmeldingNokkelOpplysning>
<div className="nokkelopplysning nokkelopplysning--hoveddiagnose js-hoveddiagnose-kode-container">
<div className="medHjelpetekst">
<h3 className="nokkelopplysning__tittel">
{texts.diagnosekode}
</h3>
</div>
<div className="md:mb-8">
<RadContainer>
<Nokkelopplysning label={texts.diagnose} className={"mb-0"}>
<p>{sykmelding.diagnose.hoveddiagnose.diagnose}</p>
</Nokkelopplysning>
<Nokkelopplysning label={texts.diagnosekode} className={"mb-0"}>
<p>
<span className="js-hoveddiagnose-kode">
{sykmelding.diagnose.hoveddiagnose.diagnosekode}
</span>
<span>{sykmelding.diagnose.hoveddiagnose.diagnosekode}</span>
&nbsp;
<span className="js-hoveddiagnose-system">
<span>
{sykmelding.diagnose.hoveddiagnose.diagnosesystem}
</span>
</p>
</div>
</div>
</Nokkelopplysning>
</RadContainer>
</div>
) : null}
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import SykmeldingNokkelOpplysning from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/SykmeldingNokkelOpplysning";
import { tilLesbarDatoMedArstall } from "@/utils/datoUtils";
import dayjs from "dayjs";
import { Nokkelopplysning } from "@/sider/sykmeldinger/sykmelding/sykmeldingOpplysninger/Nokkelopplysning";

const texts = {
title: "Egenmeldingsdager (lagt til av deg)",
Expand Down Expand Up @@ -39,8 +39,8 @@ export const Egenmeldingsdager = ({
egenmeldingsdager,
}: EgenmeldingsdagerProps) => {
return (
<SykmeldingNokkelOpplysning tittel={texts.title}>
<Nokkelopplysning label={texts.title}>
<EgenmeldingsdagerSummary egenmeldingsdager={egenmeldingsdager} />
</SykmeldingNokkelOpplysning>
</Nokkelopplysning>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { ReactNode } from "react";
import { FieldReadOnly } from "@/components/FieldReadOnly";

interface NokkelopplysningProps {
label: string;
children?: ReactNode;
className?: string;
isSubopplysning?: boolean;
}

export function Nokkelopplysning(nokkelopplysningProps: NokkelopplysningProps) {
const {
label,
children,
className = "",
isSubopplysning = false,
} = nokkelopplysningProps;
return (
<FieldReadOnly
label={label}
className={`${className} ${isSubopplysning ? "ml-6" : ""}`}
classNameLabel={"nokkelopplysning__tittel"}
>
{children}
</FieldReadOnly>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React, { ReactNode } from "react";

interface OpplysningListItemProps {
children?: ReactNode;
}

export function OpplysningListItem(
opplysningListItemProps: OpplysningListItemProps
) {
const { children } = opplysningListItemProps;

return (
<p className={`before:content-['–'] before:mr-1 before:inline-block`}>
{children}
</p>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React, { ReactNode } from "react";

interface RadContainerProps {
children?: ReactNode;
}

export function RadContainer(radContainerProps: RadContainerProps) {
const { children } = radContainerProps;
return (
<div
className={
"md:flex md:mr-8 md:flex-1 md:w-[calc(50% - 2rem)] md:last:*:w-1/2 md:last:*:mr-0"
}
>
{children}
</div>
);
}
Loading

0 comments on commit 12f3508

Please sign in to comment.