Aksel DS in dialogmøte-referat-deltakere components

navikt · Dec 11, 2023 · 004bc65 · 004bc65
1 parent 137073d
commit 004bc65
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 141 deletions.
diff --git a/src/components/LeggTilKnapp.tsx b/src/components/LeggTilKnapp.tsx
diff --git a/src/components/SlettKnapp.tsx b/src/components/SlettKnapp.tsx
diff --git a/src/components/dialogmote/referat/AndreDeltakere.tsx b/src/components/dialogmote/referat/AndreDeltakere.tsx
@@ -1,31 +1,18 @@
 import React from "react";
-import { LeggTilKnapp } from "../../LeggTilKnapp";
 import { FieldArray } from "react-final-form-arrays";
 import { NewDialogmotedeltakerAnnenDTO } from "@/data/dialogmote/types/dialogmoteReferatTypes";
 import { Field, useFormState } from "react-final-form";
-import { Input } from "nav-frontend-skjema";
 import { FlexColumn, FlexRow, PaddingSize } from "../../Layout";
-import styled from "styled-components";
 import { ValidationErrors } from "final-form";
-import { SlettKnapp } from "../../SlettKnapp";
+import { Button, TextField } from "@navikt/ds-react";
+import { PlusIcon, TrashIcon } from "@navikt/aksel-icons";
 
 const texts = {
   buttonText: "Legg til en deltaker",
   funksjonLabel: "Funksjon",
   navnLabel: "Navn",
 };
 
-const FunksjonColumn = styled(FlexColumn)`
-  margin-right: 1em;
-`;
-const NavnColumn = styled(FlexColumn)`
-  margin-right: 0.25em;
-`;
-
-const SlettColumn = styled(FlexColumn)`
-  margin-top: 1.85em;
-`;
-
 interface DeltakerFieldProps {
   fieldName: string;
   label: string;
@@ -48,57 +35,66 @@ const DeltakerField = ({
 }: DeltakerFieldProps) => (
   <Field<string> name={fieldName} parse={identityFunction}>
     {({ input }) => (
-      <Input
+      <TextField
         {...input}
         id={fieldName}
         label={label}
-        feil={submitFailed && errors && errors[fieldName]}
+        error={submitFailed && errors && errors[fieldName]}
+        type="text"
+        size="small"
       />
     )}
   </Field>
 );
 
-const AndreDeltakereBoks = styled.div`
-  margin-top: 2em;
-`;
-
 export const AndreDeltakere = () => {
   const { submitFailed, errors } = useFormState();
 
   return (
-    <AndreDeltakereBoks>
+    <div className="mt-4">
       <FieldArray<NewDialogmotedeltakerAnnenDTO> name={"andreDeltakere"}>
         {({ fields }) => (
           <>
             {fields.map((field, index) => (
               <FlexRow key={field} bottomPadding={PaddingSize.SM}>
-                <FunksjonColumn flex={0.3}>
+                <FlexColumn className="mr-4" flex={0.3}>
                   <DeltakerField
                     fieldName={`${field}.funksjon`}
                     label={texts.funksjonLabel}
                     submitFailed={submitFailed}
                     errors={errors}
                   />
-                </FunksjonColumn>
-                <NavnColumn flex={0.3}>
+                </FlexColumn>
+                <FlexColumn className="mr-1" flex={0.3}>
                   <DeltakerField
                     fieldName={`${field}.navn`}
                     label={texts.navnLabel}
                     submitFailed={submitFailed}
                     errors={errors}
                   />
-                </NavnColumn>
-                <SlettColumn>
-                  <SlettKnapp onClick={() => fields.remove(index)} />
-                </SlettColumn>
+                </FlexColumn>
+                <FlexColumn className="mt-7">
+                  <Button
+                    type="button"
+                    variant="tertiary"
+                    size="small"
+                    icon={<TrashIcon title="Slett ikon" />}
+                    onClick={() => fields.remove(index)}
+                  />
+                </FlexColumn>
               </FlexRow>
             ))}
-            <LeggTilKnapp onClick={() => fields.push(initialDeltaker)}>
+            <Button
+              type="button"
+              variant="secondary"
+              icon={<PlusIcon title="Pluss ikon" />}
+              onClick={() => fields.push(initialDeltaker)}
+            >
               {texts.buttonText}
-            </LeggTilKnapp>
+            </Button>
           </>
         )}
       </FieldArray>
-    </AndreDeltakereBoks>
+    </div>
   );
 };
diff --git a/src/components/dialogmote/referat/Deltakere.tsx b/src/components/dialogmote/referat/Deltakere.tsx
@@ -1,23 +1,20 @@
 import React, { ReactElement, ReactNode, useEffect, useState } from "react";
 import { useNavBrukerData } from "@/data/navbruker/navbruker_hooks";
-import { Normaltekst, Systemtittel, Undertittel } from "nav-frontend-typografi";
 import { Field, useFormState } from "react-final-form";
 import styled from "styled-components";
-import { Checkbox, Input } from "nav-frontend-skjema";
 import { FlexColumn, FlexRow, PaddingSize } from "../../Layout";
 import { AndreDeltakere } from "./AndreDeltakere";
 import { useAktivVeilederinfoQuery } from "@/data/veilederinfo/veilederinfoQueryHooks";
 import { DialogmotedeltakerBehandlerDTO } from "@/data/dialogmote/types/dialogmoteTypes";
 import { behandlerDeltokTekst } from "@/utils/behandlerUtils";
-import { EkspanderbartpanelBase } from "nav-frontend-ekspanderbartpanel";
-import navFarger from "nav-frontend-core";
 import { ReferatSkjemaValues } from "@/components/dialogmote/referat/Referat";
 import {
   PersonIcon,
   PersonPencilIcon,
   PersonSuitIcon,
 } from "@navikt/aksel-icons";
 import { MedisinskrinImage } from "../../../../img/ImageComponents";
+import { Checkbox, ExpansionCard, Heading, TextField } from "@navikt/ds-react";
 
 export const texts = {
   title: "Deltakere i møtet",
@@ -32,33 +29,22 @@ export const texts = {
     "Dersom behandleren ikke deltok i møtet, men likevel ønsker å motta referat, krever det et samtykke fra arbeidstakeren.",
 };
 
-const DeltakereBoks = styled.div`
-  margin-bottom: 4em;
-`;
-
-const Header = styled(Systemtittel)`
-  margin-bottom: 1.5em;
-`;
-
 const deltakerIconProps = {
   role: "img",
   focusable: false,
   width: 24,
   height: 24,
 };
 
-const StyledEkspanderbartpanel = styled(EkspanderbartpanelBase)`
-  margin-bottom: 0.5em;
-  border: 1px solid ${navFarger.navGra60};
-`;
-
 interface DeltakerEkspanderbartPanelProps {
+  ariaLabel: string;
   tittel: ReactNode;
   children: ReactNode;
   harValideringsfeil?: boolean;
 }
 
 const DeltakerEkspanderbartPanel = ({
+  ariaLabel,
   tittel,
   children,
   harValideringsfeil,
@@ -71,22 +57,24 @@ const DeltakerEkspanderbartPanel = ({
   }, [harValideringsfeil]);
 
   return (
-    <StyledEkspanderbartpanel
-      renderContentWhenClosed
-      apen={open}
-      onClick={() => setOpen(!open)}
-      tittel={tittel}
+    <ExpansionCard
+      className="mb-2"
+      size="small"
+      open={open}
+      onToggle={() => setOpen(!open)}
+      aria-label={ariaLabel}
     >
-      {children}
-    </StyledEkspanderbartpanel>
+      <ExpansionCard.Header>{tittel}</ExpansionCard.Header>
+      <ExpansionCard.Content>{children}</ExpansionCard.Content>
+    </ExpansionCard>
   );
 };
 
 interface DeltakerTekstProps {
   color?: string;
 }
 
-const DeltakerTekst = styled(Undertittel)<DeltakerTekstProps>`
+const DeltakerTekst = styled(Heading)<DeltakerTekstProps>`
   margin-left: 0.5em;
   ${(props) =>
     props.color && {
@@ -102,41 +90,43 @@ const DeltakerBehandler = ({ behandler }: DeltakerBehandlerProps) => {
   const {
     values: { behandlerDeltatt },
   } = useFormState<ReferatSkjemaValues>();
+  const tittelTekst = behandlerDeltokTekst(behandler, behandlerDeltatt);
 
   return (
     <DeltakerEkspanderbartPanel
+      ariaLabel={tittelTekst}
       tittel={
         <FlexRow>
           <img
             src={MedisinskrinImage}
             alt="Medisinskrin-ikon"
             {...deltakerIconProps}
           />
-          <DeltakerTekst>
-            {behandlerDeltokTekst(behandler, behandlerDeltatt)}
-          </DeltakerTekst>
+          <DeltakerTekst size="small">{tittelTekst}</DeltakerTekst>
         </FlexRow>
       }
     >
-      <FlexRow topPadding={PaddingSize.SM}>
-        <Normaltekst>{texts.behandlerTekst}</Normaltekst>
-      </FlexRow>
+      <FlexRow topPadding={PaddingSize.SM}>{texts.behandlerTekst}</FlexRow>
       <FlexRow topPadding={PaddingSize.MD}>
         <Field name="behandlerDeltatt" type="checkbox">
           {({ input }) => (
-            <Checkbox {...input} label={texts.behandlerDeltokLabel} />
+            <Checkbox size="small" {...input}>
+              {texts.behandlerDeltokLabel}
+            </Checkbox>
           )}
         </Field>
       </FlexRow>
       <FlexRow topPadding={PaddingSize.MD}>
         <Field name="behandlerMottarReferat" type="checkbox">
           {({ input }) => (
-            <Checkbox {...input} label={texts.behandlerMottaReferatLabel} />
+            <Checkbox size="small" {...input}>
+              {texts.behandlerMottaReferatLabel}
+            </Checkbox>
           )}
         </Field>
       </FlexRow>
       <FlexRow topPadding={PaddingSize.MD}>
-        <Normaltekst>{texts.behandlerReferatSamtykke}</Normaltekst>
+        {texts.behandlerReferatSamtykke}
       </FlexRow>
     </DeltakerEkspanderbartPanel>
   );
@@ -147,32 +137,38 @@ const DeltakerArbeidsgiver = () => {
     <Field<string> name="naermesteLeder">
       {({ input, meta }) => {
         const harValideringsfeil = meta.submitFailed && !!meta.error;
-        const tittelFarge = harValideringsfeil ? navFarger.redError : undefined;
+        const tittelFarge = harValideringsfeil
+          ? "var(--a-text-danger)"
+          : undefined;
+        const tittelTekst = `Fra arbeidsgiver: ${input.value || ""}`;
 
         return (
           <DeltakerEkspanderbartPanel
+            ariaLabel={tittelTekst}
             harValideringsfeil={harValideringsfeil}
             tittel={
               <FlexRow>
                 <PersonSuitIcon {...deltakerIconProps} color={tittelFarge} />
-                <DeltakerTekst color={tittelFarge}>{`Fra arbeidsgiver: ${
-                  input.value || ""
-                }`}</DeltakerTekst>
+                <DeltakerTekst size="small" color={tittelFarge}>
+                  {tittelTekst}
+                </DeltakerTekst>
               </FlexRow>
             }
           >
             <FlexRow topPadding={PaddingSize.SM}>
               <FlexColumn flex={0.5}>
-                <Input
+                <TextField
                   {...input}
                   id="naermesteLeder"
                   label={texts.arbeidsgiverLabel}
-                  feil={meta.submitFailed && meta.error}
+                  error={meta.submitFailed && meta.error}
+                  type="text"
+                  size="small"
                 />
               </FlexColumn>
             </FlexRow>
             <FlexRow topPadding={PaddingSize.MD}>
-              <Normaltekst>{texts.arbeidsgiverTekst}</Normaltekst>
+              {texts.arbeidsgiverTekst}
             </FlexRow>
           </DeltakerEkspanderbartPanel>
         );
@@ -190,20 +186,22 @@ const Deltakere = ({ behandler }: DeltakereProps): ReactElement => {
   const { data: veilederinfo } = useAktivVeilederinfoQuery();
 
   return (
-    <DeltakereBoks>
-      <Header>{texts.title}</Header>
+    <div className="mb-16">
+      <Heading size="medium" className="mb-4">
+        {texts.title}
+      </Heading>
       <FlexRow leftPadding={PaddingSize.SM} bottomPadding={PaddingSize.MD}>
         <PersonIcon {...deltakerIconProps} />
-        <DeltakerTekst>{`Arbeidstaker: ${navbruker?.navn}`}</DeltakerTekst>
+        <DeltakerTekst size="small">{`Arbeidstaker: ${navbruker?.navn}`}</DeltakerTekst>
       </FlexRow>
       <FlexRow leftPadding={PaddingSize.SM} bottomPadding={PaddingSize.MD}>
         <PersonPencilIcon {...deltakerIconProps} />
-        <DeltakerTekst>{`Fra NAV: ${veilederinfo?.navn}`}</DeltakerTekst>
+        <DeltakerTekst size="small">{`Fra NAV: ${veilederinfo?.navn}`}</DeltakerTekst>
       </FlexRow>
       <DeltakerArbeidsgiver />
       {behandler && <DeltakerBehandler behandler={behandler} />}
       <AndreDeltakere />
-    </DeltakereBoks>
+    </div>
   );
 };