Merge pull request #2498 from NDLANO/refactor/notes-field

refactor: use primitives in version notes
NDLANO · Oct 15, 2024 · ac30b67 · ac30b67
2 parents 5a9328d + 00bc1c2
commit ac30b67
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 60 deletions.
diff --git a/src/containers/FormikForm/AddNotesField.tsx b/src/containers/FormikForm/AddNotesField.tsx
@@ -8,54 +8,48 @@
 
 import { FormEvent, MouseEvent } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
-import { Label, InputV3, FieldErrorMessage } from "@ndla/forms";
-import FieldRemoveButton from "../../components/Field/FieldRemoveButton";
-import { FormControl } from "../../components/FormField";
+import { TrashCanOutline } from "@ndla/icons/action";
+import {
+  Button,
+  FieldErrorMessage,
+  FieldInput,
+  FieldLabel,
+  FieldRoot,
+  FieldsetLegend,
+  FieldsetRoot,
+  IconButton,
+} from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 
 interface Props {
   name: string;
-  placeholder?: string;
-  labelRemoveNote: string;
-  labelAddNote: string;
   labelWarningNote?: string;
   onChange: Function;
   value: string[];
   showError?: boolean;
 }
 
-const NoteWrapper = styled.li`
-  display: flex;
-  gap: ${spacing.small};
-  margin: 0;
-  padding: 0;
-`;
+const StyledFieldsetRoot = styled(FieldsetRoot, {
+  base: {
+    alignItems: "flex-start",
+    gap: "small",
+  },
+});
 
-const NotesContainer = styled.ul`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.small};
-  align-items: flex-start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  div {
-    width: 100%;
-  }
-`;
+const NoteWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xsmall",
+  },
+});
 
-const AddNotesField = ({
-  name,
-  placeholder,
-  labelAddNote,
-  labelRemoveNote,
-  labelWarningNote,
-  onChange,
-  value,
-  showError,
-}: Props) => {
+const StyledFieldRoot = styled(FieldRoot, {
+  base: {
+    width: "100%",
+  },
+});
+
+const AddNotesField = ({ name, labelWarningNote, onChange, value, showError }: Props) => {
   const { t } = useTranslation();
   const onNotesChange = (newContributors: string[]) => {
     onChange({
@@ -82,29 +76,37 @@ const AddNotesField = ({
   };
 
   return (
-    <NotesContainer>
+    <StyledFieldsetRoot>
+      <FieldsetLegend>{t("form.name.notes")}</FieldsetLegend>
       {value.map((note, index) => (
-        <FormControl key={`note-${index}`} isInvalid={showError && note === ""}>
-          <Label visuallyHidden>{`${t("form.notes.history.note")} ${index + 1}`}</Label>
+        <StyledFieldRoot key={`note-${index}`} invalid={showError && note === ""}>
+          <FieldLabel srOnly>{`${t("form.notes.history.note")} ${index + 1}`}</FieldLabel>
           <NoteWrapper>
-            <InputV3
+            <FieldInput
               type="text"
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus
-              placeholder={placeholder}
               value={note}
               data-testid="notesInput"
               onChange={(e) => handleNoteChange(e, index)}
+              placeholder={t("form.notes.placeholder")}
             />
-            <FieldRemoveButton onClick={(evt) => removeNote(evt, index)}>{labelRemoveNote}</FieldRemoveButton>
+            <IconButton
+              variant="danger"
+              onClick={(e) => removeNote(e, index)}
+              aria-label={t("form.notes.remove")}
+              title={t("form.notes.remove")}
+            >
+              <TrashCanOutline />
+            </IconButton>
           </NoteWrapper>
           <FieldErrorMessage>{labelWarningNote}</FieldErrorMessage>
-        </FormControl>
+        </StyledFieldRoot>
       ))}
-      <ButtonV2 variant="outline" onClick={addNote} data-testid="addNote">
-        {labelAddNote}
-      </ButtonV2>
-    </NotesContainer>
+      <Button variant="secondary" onClick={addNote} data-testid="addNote">
+        {t("form.notes.add")}
+      </Button>
+    </StyledFieldsetRoot>
   );
 };
 

diff --git a/src/containers/FormikForm/VersionAndNotesPanel.tsx b/src/containers/FormikForm/VersionAndNotesPanel.tsx
@@ -25,7 +25,7 @@ import { styled } from "@ndla/styled-system/jsx";
 import { IArticle, IEditorNote } from "@ndla/types-backend/draft-api";
 import AddNotesField from "./AddNotesField";
 import VersionActionbuttons from "./VersionActionButtons";
-import FormikField from "../../components/FormikField";
+import { FormField } from "../../components/FormField";
 import Spinner from "../../components/Spinner";
 import VersionHistory from "../../components/VersionHistory/VersionHistory";
 import { useSession } from "../../containers/Session/SessionProvider";
@@ -184,17 +184,9 @@ const VersionAndNotesPanel = ({ article, articleHistory, type, currentLanguage }
 
   return (
     <Wrapper>
-      <FormikField name="notes" showError={false}>
-        {({ field, form: { errors } }) => (
-          <AddNotesField
-            showError={!!errors[field.name]}
-            labelAddNote={t("form.notes.add")}
-            labelRemoveNote={t("form.notes.remove")}
-            labelWarningNote={errors[field.name]}
-            {...field}
-          />
-        )}
-      </FormikField>
+      <FormField name="notes">
+        {({ field, meta }) => <AddNotesField showError={!!meta.error} labelWarningNote={meta.error} {...field} />}
+      </FormField>
       <StyledAccordionRoot multiple defaultValue={["0"]} variant="clean" lazyMount unmountOnExit>
         {articleHistory.map((version, index) => {
           const isLatestVersion = index === 0;

diff --git a/src/phrases/phrases-en.ts b/src/phrases/phrases-en.ts
@@ -899,6 +899,7 @@ const phrases = {
       warning: "A note must contain text",
       areHere: "You are here",
       published: "Published",
+      placeholder: "Write a note",
       history: {
         user: "User",
         time: "When",

diff --git a/src/phrases/phrases-nb.ts b/src/phrases/phrases-nb.ts
@@ -954,6 +954,7 @@ const phrases = {
       warning: "En merknad må ha tekst",
       areHere: "Du er her",
       published: "Publisert",
+      placeholder: "Skriv inn merknad",
       history: {
         user: "Bruker",
         time: "Når",

diff --git a/src/phrases/phrases-nn.ts b/src/phrases/phrases-nn.ts
@@ -899,6 +899,7 @@ const phrases = {
       warning: "Ein merknad må ha tekst",
       areHere: "Du er her",
       published: "Publisert",
+      placeholder: "Skriv inn merknad",
       history: {
         user: "Bruker",
         time: "Når",