From e8b307e8d7611f4bae3c9cc02d338cc540a4ea1a Mon Sep 17 00:00:00 2001
From: Jonas Carlsen <jonas.carlsen@knowit.no>
Date: Mon, 7 Oct 2024 17:03:12 +0200
Subject: [PATCH] refactor: use form primitives in VersionForm

---
 .../components/VersionForm.tsx                |  5 +-
 .../components/VersionLockedField.tsx         | 54 +++++++++----------
 .../components/VersionNameField.tsx           | 15 +++---
 3 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/src/containers/TaxonomyVersions/components/VersionForm.tsx b/src/containers/TaxonomyVersions/components/VersionForm.tsx
index ffc8d5bbc7..a5db0f27d4 100644
--- a/src/containers/TaxonomyVersions/components/VersionForm.tsx
+++ b/src/containers/TaxonomyVersions/components/VersionForm.tsx
@@ -21,6 +21,7 @@ import VersionSourceField from "./VersionSourceField";
 import { Row } from "../../../components";
 import AlertModal from "../../../components/AlertModal";
 import Field from "../../../components/Field";
+import { FormikForm } from "../../../components/FormikForm";
 import validateFormik, { RulesType } from "../../../components/formikValidationSchema";
 import SaveButton from "../../../components/SaveButton";
 import Fade from "../../../components/Taxonomy/Fade";
@@ -155,7 +156,7 @@ const VersionForm = ({ version, existingVersions, onClose }: Props) => {
       >
         {({ isSubmitting, isValid, dirty, handleSubmit }) => {
           return (
-            <>
+            <FormikForm>
               <StyledTitle>{t(`taxonomyVersions.${!version ? "newVersionTitle" : "editVersionTitle"}`)}</StyledTitle>
               <VersionNameField />
               {!version && <VersionSourceField existingVersions={existingVersions} />}
@@ -201,7 +202,7 @@ const VersionForm = ({ version, existingVersions, onClose }: Props) => {
                 ]}
                 onCancel={() => setShowAlertModal(false)}
               />
-            </>
+            </FormikForm>
           );
         }}
       </Formik>
diff --git a/src/containers/TaxonomyVersions/components/VersionLockedField.tsx b/src/containers/TaxonomyVersions/components/VersionLockedField.tsx
index 22cb6a9414..a37d7e47fc 100644
--- a/src/containers/TaxonomyVersions/components/VersionLockedField.tsx
+++ b/src/containers/TaxonomyVersions/components/VersionLockedField.tsx
@@ -7,8 +7,15 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { Label, RadioButtonGroup, RadioButtonItem } from "@ndla/forms";
-import { RadioButtonWrapper, FieldsetRow, LeftLegend, StyledFormControl } from "../../../components/Form/styles";
+import {
+  FieldRoot,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+  RadioGroupLabel,
+  RadioGroupRoot,
+} from "@ndla/primitives";
 import { FormField } from "../../../components/FormField";
 
 const VersionLockedField = () => {
@@ -26,36 +33,23 @@ const VersionLockedField = () => {
   ];
   return (
     <FormField name="locked">
-      {({ field }) => (
-        <StyledFormControl>
-          <RadioButtonGroup
-            onValueChange={(value: string) =>
-              field.onChange({
-                target: {
-                  name: field.name,
-                  value: value,
-                },
-              })
-            }
+      {({ field, helpers }) => (
+        <FieldRoot>
+          <RadioGroupRoot
+            value={field.value.toString()}
             orientation="horizontal"
-            defaultValue={field.value.toString()}
-            asChild
+            onValueChange={(details) => helpers.setValue(details.value)}
           >
-            <FieldsetRow>
-              <LeftLegend margin="none" textStyle="label-small">
-                {t("taxonomyVersions.form.locked.subTitle")}
-              </LeftLegend>
-              {options.map((option) => (
-                <RadioButtonWrapper key={option.value}>
-                  <RadioButtonItem id={`locked-${option.value}`} value={option.value} />
-                  <Label htmlFor={`locked-${option.value}`} margin="none" textStyle="label-small">
-                    {option.title}
-                  </Label>
-                </RadioButtonWrapper>
-              ))}
-            </FieldsetRow>
-          </RadioButtonGroup>
-        </StyledFormControl>
+            <RadioGroupLabel>{t("taxonomyVersions.form.locked.subTitle")}</RadioGroupLabel>
+            {options.map((option) => (
+              <RadioGroupItem key={option.value} value={option.value}>
+                <RadioGroupItemControl />
+                <RadioGroupItemText>{option.title}</RadioGroupItemText>
+                <RadioGroupItemHiddenInput />
+              </RadioGroupItem>
+            ))}
+          </RadioGroupRoot>
+        </FieldRoot>
       )}
     </FormField>
   );
diff --git a/src/containers/TaxonomyVersions/components/VersionNameField.tsx b/src/containers/TaxonomyVersions/components/VersionNameField.tsx
index 2cc9b21d2b..65c5b163b2 100644
--- a/src/containers/TaxonomyVersions/components/VersionNameField.tsx
+++ b/src/containers/TaxonomyVersions/components/VersionNameField.tsx
@@ -7,20 +7,19 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { FieldErrorMessage, InputV3, Label } from "@ndla/forms";
-import { FormControl, FormField } from "../../../components/FormField";
+import { FieldErrorMessage, FieldInput, FieldLabel, FieldRoot } from "@ndla/primitives";
+import { FormField } from "../../../components/FormField";
+
 const VersionNameField = () => {
   const { t } = useTranslation();
   return (
     <FormField name="name">
       {({ field, meta }) => (
-        <FormControl isRequired isInvalid={!!meta.error}>
-          <Label textStyle="label-small" margin="none">
-            {t("taxonomyVersions.form.name.label")}
-          </Label>
-          <InputV3 {...field} placeholder={t("taxonomyVersions.form.name.placeholder")} />
+        <FieldRoot required invalid={!!meta.error}>
+          <FieldLabel>{t("taxonomyVersions.form.name.label")}</FieldLabel>
           <FieldErrorMessage>{meta.error}</FieldErrorMessage>
-        </FormControl>
+          <FieldInput {...field} placeholder={t("taxonomyVersions.form.name.placeholder")} />
+        </FieldRoot>
       )}
     </FormField>
   );