Skip to content

Commit

Permalink
Use Aksel DS in dialogmotesvar-expandables
Browse files Browse the repository at this point in the history
  • Loading branch information
@andersrognstad
andersrognstad committed Dec 11, 2023
1 parent df97825 commit c18b6ad
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 103 deletions.
77 changes: 26 additions & 51 deletions src/components/dialogmote/DeltakereSvarInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,8 @@ import {
MotedeltakerVarselType,
SvarType,
} from "@/data/dialogmote/types/dialogmoteTypes";
import { FlexColumn, FlexRow } from "@/components/Layout";
import navFarger from "nav-frontend-core";
import React, { ReactElement } from "react";
import { tilLesbarDatoMedArUtenManedNavn } from "@/utils/datoUtils";
import styled from "styled-components";
import { Element, Normaltekst } from "nav-frontend-typografi";
import Ekspanderbartpanel from "nav-frontend-ekspanderbartpanel";
import { useNavBrukerData } from "@/data/navbruker/navbruker_hooks";
import { useLedereQuery } from "@/data/leder/ledereQueryHooks";
import { capitalizeAllWords } from "@/utils/stringUtils";
Expand All @@ -22,6 +17,7 @@ import {
MinusCircleFillIcon,
XMarkOctagonFillIcon,
} from "@navikt/aksel-icons";
import { BodyLong, BodyShort, ExpansionCard, Label } from "@navikt/ds-react";

const texts = {
naermesteLeder: "Nærmeste leder:",
Expand Down Expand Up @@ -96,31 +92,31 @@ const DeltakerSvarIcon = ({
return (
<CheckmarkCircleFillIcon
fontSize="1.5em"
color={navFarger.navGronn}
color="var(--a-icon-success)"
title="suksess-ikon"
/>
);
case SvarType.NYTT_TID_STED:
return (
<ExclamationmarkTriangleFillIcon
fontSize="1.5em"
color={navFarger.navOransje}
color="var(--a-icon-warning)"
title="advarsel-ikon"
/>
);
case SvarType.KOMMER_IKKE:
return (
<XMarkOctagonFillIcon
fontSize="1.5em"
color={navFarger.navRod}
color="var(--a-icon-danger)"
title="feil-ikon"
/>
);
default:
return (
<MinusCircleFillIcon
fontSize="1.5em"
color={navFarger.navGra40}
color="var(--a-gray-600)"
title="minus-sirkel-ikon"
/>
);
Expand All @@ -133,10 +129,10 @@ interface SvarDetaljerTekstProps {
}

const SvarDetaljerTekst = ({ header, tekst }: SvarDetaljerTekstProps) => (
<DetaljerTekst>
<Element>{header}</Element>
<Normaltekst>{tekst}</Normaltekst>
</DetaljerTekst>
<>
<Label size="small">{header}</Label>
<BodyLong size="small">{tekst}</BodyLong>
</>
);

interface DeltakerBehandlerSvarDetaljerProps {
Expand All @@ -154,7 +150,7 @@ const DeltakerBehandlerSvarDetaljer = ({
)}`;

if (svarList.length === 0) {
return <DetaljerTekst>{texts.harIkkeBegrunnelse}</DetaljerTekst>;
return <BodyLong size="small">{texts.harIkkeBegrunnelse}</BodyLong>;
}

if (svarList.length === 1) {
Expand All @@ -165,7 +161,7 @@ const DeltakerBehandlerSvarDetaljer = ({
tekst={svar.tekst}
/>
) : (
<DetaljerTekst>{texts.harIkkeBegrunnelse}</DetaljerTekst>
<BodyLong size="small">{texts.harIkkeBegrunnelse}</BodyLong>
);
}

Expand Down Expand Up @@ -209,19 +205,6 @@ const DeltakerBehandlerSvarPanel = ({
);
};

const DeltakerLabel = styled(Element)`
margin-left: 0.5em;
`;

const TittelTekst = styled(Normaltekst)`
margin-left: 0.5em;
`;

const StyledEkspanderbartpanel = styled(Ekspanderbartpanel)`
margin-bottom: 1em;
border: 1px solid ${navFarger.navGra60};
`;

interface EkspanderbartSvarPanelProps {
deltaker: string;
tittel: string;
Expand All @@ -235,24 +218,20 @@ const EkspanderbartSvarPanel = ({
tittel,
children,
}: EkspanderbartSvarPanelProps) => (
<StyledEkspanderbartpanel
renderContentWhenClosed
tittel={
<FlexRow>
{icon}
<DeltakerLabel>{deltaker}</DeltakerLabel>
<TittelTekst>{tittel}</TittelTekst>
</FlexRow>
}
>
{children}
</StyledEkspanderbartpanel>
<ExpansionCard size="small" aria-label={tittel} className="mb-4">
<ExpansionCard.Header>
<ExpansionCard.Title size="small">
<div className="flex gap-1 items-center">
{icon}
<Label size="small">{deltaker}</Label>
<BodyShort size="small">{tittel}</BodyShort>
</div>
</ExpansionCard.Title>
</ExpansionCard.Header>
<ExpansionCard.Content>{children}</ExpansionCard.Content>
</ExpansionCard>
);

const DetaljerTekst = styled.div`
margin-top: 0.5em;
`;

interface DeltakerSvarPanelProps {
deltakerLabel: string;
deltakerNavn: string;
Expand Down Expand Up @@ -287,16 +266,12 @@ const DeltakerSvarPanel = ({
tekst={svar.svarTekst}
/>
) : (
<DetaljerTekst>{texts.harIkkeBegrunnelse}</DetaljerTekst>
<BodyLong size="small">{texts.harIkkeBegrunnelse}</BodyLong>
)}
</EkspanderbartSvarPanel>
);
};

const StyledColumn = styled(FlexColumn)`
width: 100%;
`;

interface DeltakereSvarInfoProps {
dialogmote: DialogmoteDTO;
}
Expand All @@ -312,7 +287,7 @@ export const DeltakereSvarInfo = ({ dialogmote }: DeltakereSvarInfoProps) => {
const customTitle = noNarmesteLeder ? texts.noNarmesteleder : undefined;

return (
<StyledColumn>
<div className="flex flex-col w-full">
<DeltakerSvarPanel
deltakerLabel={texts.naermesteLeder}
deltakerNavn={narmesteLederNavn ?? ""}
Expand All @@ -327,6 +302,6 @@ export const DeltakereSvarInfo = ({ dialogmote }: DeltakereSvarInfoProps) => {
{dialogmote.behandler && (
<DeltakerBehandlerSvarPanel behandler={dialogmote.behandler} />
)}
</StyledColumn>
</div>
);
};
92 changes: 40 additions & 52 deletions test/dialogmote/DeltakereSvarInfo/DeltakereSvarInfoBehandlerTest.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { QueryClientProvider } from "@tanstack/react-query";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
DialogmotedeltakerBehandlerVarselSvarDTO,
DialogmoteDTO,
Expand All @@ -10,7 +10,7 @@ import {
dialogmote,
dialogmoteMedBehandler,
} from "../testData";
import { render, screen, within } from "@testing-library/react";
import { render, screen } from "@testing-library/react";
import { DeltakereSvarInfo } from "@/components/dialogmote/DeltakereSvarInfo";
import React from "react";
import { expect } from "chai";
Expand All @@ -19,7 +19,7 @@ import {
testQueryClient,
} from "../../testQueryClient";

let queryClient: any;
let queryClient: QueryClient;

const dialogmoteBehandlerMedSvar = (
svarList: Pick<
Expand All @@ -45,16 +45,6 @@ const dialogmoteBehandlerMedSvar = (

const ingenDetaljerTekst = "Ingen detaljer er tilgjengelig.";

const getBehandlerExpandableButton = () =>
screen.getByRole("button", {
name: /Behandleren/,
});

const getBehandlerExpanded = () =>
screen.getByRole("region", {
name: /Behandleren/,
});

const renderDeltakereSvarInfo = (dialogmote: DialogmoteDTO) =>
render(
<QueryClientProvider client={queryClient}>
Expand Down Expand Up @@ -92,18 +82,18 @@ describe("DeltakereSvarInfo med behandler", () => {
const expectedText = `${behandlerDeltaker.behandlerNavn}, har ikke gitt svar`;
renderDeltakereSvarInfo(dialogmoteMedUbesvartVarsel);

const behandlerExpandableButon = getBehandlerExpandableButton();
const behandlerExpanded = getBehandlerExpanded();

expect(screen.getAllByRole("button", { name: "Vis mer" })).to.have.length(
3
);
expect(screen.getByText("Behandleren:", { exact: false })).to.exist;
expect(screen.getByText(expectedText, { exact: false })).to.exist;
expect(
within(behandlerExpandableButon).getByRole("img", {
screen.getAllByRole("img", {
name: "minus-sirkel-ikon",
})
).to.exist;
expect(within(behandlerExpanded).getByText(ingenDetaljerTekst)).to.exist;
expect(within(behandlerExpanded).queryByText("Begrunnelse")).to.not.exist;
).to.have.length(3);
expect(screen.getAllByText(ingenDetaljerTekst)).to.have.length(3);
expect(screen.queryByText("Begrunnelse")).to.not.exist;
});
});
describe("behandler har svart kommer uten begrunnelse", () => {
Expand All @@ -118,18 +108,18 @@ describe("DeltakereSvarInfo med behandler", () => {
const expectedText = `${behandlerDeltaker.behandlerNavn}, kommer - Svar mottatt 07.12.2021`;
renderDeltakereSvarInfo(dialogmoteMedSvar);

const behandlerExpandableButton = getBehandlerExpandableButton();
const behandlerExpanded = getBehandlerExpanded();

expect(screen.getAllByRole("button", { name: "Vis mer" })).to.have.length(
3
);
expect(screen.getByText("Behandleren:", { exact: false })).to.exist;
expect(screen.getByText(expectedText, { exact: false })).to.exist;
expect(
within(behandlerExpandableButton).getByRole("img", {
screen.getByRole("img", {
name: "suksess-ikon",
})
).to.exist;
expect(within(behandlerExpanded).getByText(ingenDetaljerTekst)).to.exist;
expect(within(behandlerExpanded).queryByText("Begrunnelse")).to.not.exist;
expect(screen.getAllByText(ingenDetaljerTekst)).to.have.length(3);
expect(screen.queryByText("Begrunnelse")).to.not.exist;
});
});
describe("behandler har svart 'kommer ikke' med begrunnelse", () => {
Expand All @@ -145,23 +135,23 @@ describe("DeltakereSvarInfo med behandler", () => {
const expectedText = `${behandlerDeltaker.behandlerNavn}, ønsker å avlyse - Svar mottatt 08.12.2021`;
renderDeltakereSvarInfo(dialogmoteMedSvar);

const behandlerExpandableButton = getBehandlerExpandableButton();
const behandlerExpanded = getBehandlerExpanded();

expect(screen.getAllByRole("button", { name: "Vis mer" })).to.have.length(
3
);
expect(screen.getByText("Behandleren:", { exact: false })).to.exist;
expect(screen.getByText(expectedText, { exact: false })).to.exist;
expect(
within(behandlerExpandableButton).getByRole("img", {
screen.getByRole("img", {
name: "feil-ikon",
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Begrunnelse mottatt 08.12.2021", {
screen.getByText("Begrunnelse mottatt 08.12.2021", {
exact: false,
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Jeg kan ikke komme", {
screen.getByText("Jeg kan ikke komme", {
exact: false,
})
).to.exist;
Expand All @@ -185,39 +175,37 @@ describe("DeltakereSvarInfo med behandler", () => {
const expectedText = `${behandlerDeltaker.behandlerNavn}, ønsker å endre tidspunkt eller sted - Oppdatering mottatt 08.12.2021`;
renderDeltakereSvarInfo(dialogmoteMedSvar);

const behandlerExpandableButton = getBehandlerExpandableButton();
const behandlerExpanded = getBehandlerExpanded();

expect(screen.getAllByRole("button", { name: "Vis mer" })).to.have.length(
3
);
expect(screen.getByText("Behandleren:", { exact: false })).to.exist;
expect(screen.getByText(expectedText, { exact: false })).to.exist;
expect(
within(behandlerExpandableButton).getByRole("img", {
screen.getByRole("img", {
name: "advarsel-ikon",
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Begrunnelse mottatt 08.12.2021", {
screen.getByText("Begrunnelse mottatt 08.12.2021", {
exact: false,
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Tidspunktet passer ikke likevel", {
screen.getByText("Tidspunktet passer ikke likevel", {
exact: false,
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Begrunnelse mottatt 07.12.2021", {
screen.getByText("Begrunnelse mottatt 07.12.2021", {
exact: false,
})
).to.exist;
expect(screen.getByText("Jeg kommer", { exact: false })).to.exist;
expect(
within(behandlerExpanded).getByText("Jeg kommer", { exact: false })
).to.exist;
expect(
within(behandlerExpanded).queryByText(ingenDetaljerTekst, {
screen.getAllByText(ingenDetaljerTekst, {
exact: false,
})
).to.not.exist;
).to.have.length(2);
});
});
describe("behandler har svart 'kommer ikke' med begrunnelse etter 'kommer' uten begrunnelse", () => {
Expand All @@ -237,31 +225,31 @@ describe("DeltakereSvarInfo med behandler", () => {
const expectedText = `${behandlerDeltaker.behandlerNavn}, ønsker å avlyse - Oppdatering mottatt 08.12.2021`;
renderDeltakereSvarInfo(dialogmoteMedSvar);

const behandlerExpandableButton = getBehandlerExpandableButton();
const behandlerExpanded = getBehandlerExpanded();

expect(screen.getAllByRole("button", { name: "Vis mer" })).to.have.length(
3
);
expect(screen.getByText("Behandleren:", { exact: false })).to.exist;
expect(screen.getByText(expectedText, { exact: false })).to.exist;
expect(
within(behandlerExpandableButton).getByRole("img", {
screen.getByRole("img", {
name: "feil-ikon",
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Begrunnelse mottatt 08.12.2021", {
screen.getByText("Begrunnelse mottatt 08.12.2021", {
exact: false,
})
).to.exist;
expect(
within(behandlerExpanded).getByText("Kommer ikke likevel", {
screen.getByText("Kommer ikke likevel", {
exact: false,
})
).to.exist;
expect(
within(behandlerExpanded).queryByText(ingenDetaljerTekst, {
screen.getAllByText(ingenDetaljerTekst, {
exact: false,
})
).to.not.exist;
).to.have.length(2);
});
});
});

0 comments on commit c18b6ad

Please sign in to comment.