Merge pull request #2480 from NDLANO/refactor/remove-remaining-checkb…

…oxes refactor: remove remaining checkboxes from ndla/forms
NDLANO · Oct 8, 2024 · 9c5b4aa · 9c5b4aa
2 parents c42f4be + b3d1d0c
commit 9c5b4aa
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 43 deletions.
diff --git a/e2e/specs/search_content.spec.ts b/e2e/specs/search_content.spec.ts
@@ -81,19 +81,19 @@ test("Can use content type dropdown", async ({ page }) => {
 });
 
 test("Can use inactive checkbox", async ({ page }) => {
-  await page.getByLabel("Inkluder utgåtte fag").click();
+  await page.locator("label", { hasText: "Inkluder utgåtte fag" }).click();
   await page.getByTestId("content-search-result").first().waitFor();
   expect(await page.getByTestId("searchTotalCount").innerText()).toEqual("42700");
-  await page.getByLabel("Inkluder utgåtte fag").click();
+  await page.locator("label", { hasText: "Inkluder utgåtte fag" }).click();
   await page.getByTestId("content-search-result").first().waitFor();
   expect(await page.getByTestId("searchTotalCount").innerText()).toEqual(searchTotalCount);
 });
 
 test("Can use exclude checkbox", async ({ page }) => {
-  await page.getByLabel("Ekskluder endringslogg").click();
+  await page.locator("label", { hasText: "Ekskluder endringslogg" }).click();
   await page.getByTestId("content-search-result").first().waitFor();
   expect(await page.getByTestId("searchTotalCount").innerText()).toEqual(searchTotalCount);
-  await page.getByLabel("Ekskluder endringslogg").click();
+  await page.locator("label", { hasText: "Ekskluder endringslogg" }).click();
   await page.getByTestId("content-search-result").first().waitFor();
   expect(await page.getByTestId("searchTotalCount").innerText()).toEqual(searchTotalCount);
 });
diff --git a/src/containers/PodcastSeries/components/PodcastSeriesMetaData.tsx b/src/containers/PodcastSeries/components/PodcastSeriesMetaData.tsx
@@ -7,10 +7,18 @@
  */
 
 import { useTranslation } from "react-i18next";
-import { CheckboxItem, Label } from "@ndla/forms";
-import { CheckboxWrapper } from "../../../components/Form/styles";
-import { FormControl, FormField } from "../../../components/FormField";
+import { CheckLine } from "@ndla/icons/editor";
+import {
+  CheckboxControl,
+  CheckboxHiddenInput,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxRoot,
+  FieldRoot,
+} from "@ndla/primitives";
+import { FormField } from "../../../components/FormField";
 import FormikField from "../../../components/FormikField";
+import { FormContent } from "../../../components/FormikForm";
 import PlainTextEditor from "../../../components/SlateEditor/PlainTextEditor";
 import { textTransformPlugin } from "../../../components/SlateEditor/plugins/textTransform";
 import { MetaImageSearch, TitleField } from "../../FormikForm";
@@ -25,7 +33,7 @@ const PodcastSeriesMetaData = ({ language, onImageLoad }: Props) => {
   const { t } = useTranslation();
   const plugins = [textTransformPlugin];
   return (
-    <>
+    <FormContent>
       <TitleField hideToolbar />
 
       <FormikField name="description" label={t("podcastSeriesForm.description")}>
@@ -55,28 +63,21 @@ const PodcastSeriesMetaData = ({ language, onImageLoad }: Props) => {
       </FormikField>
 
       <FormField name="hasRSS">
-        {({ field }) => (
-          <FormControl>
-            <CheckboxWrapper>
-              <CheckboxItem
-                checked={field.value}
-                onCheckedChange={() =>
-                  field.onChange({
-                    target: {
-                      name: field.name,
-                      value: !field.value,
-                    },
-                  })
-                }
-              />
-              <Label margin="none" textStyle="label-small">
-                {t("podcastSeriesForm.hasRSS")}
-              </Label>
-            </CheckboxWrapper>
-          </FormControl>
+        {({ field, helpers }) => (
+          <FieldRoot>
+            <CheckboxRoot checked={field.value} onCheckedChange={(details) => helpers.setValue(details.checked)}>
+              <CheckboxControl>
+                <CheckboxIndicator asChild>
+                  <CheckLine />
+                </CheckboxIndicator>
+              </CheckboxControl>
+              <CheckboxLabel>{t("podcastSeriesForm.hasRSS")}</CheckboxLabel>
+              <CheckboxHiddenInput />
+            </CheckboxRoot>
+          </FieldRoot>
         )}
       </FormField>
-    </>
+    </FormContent>
   );
 };
 

diff --git a/src/containers/SearchPage/components/form/CheckboxSelector.tsx b/src/containers/SearchPage/components/form/CheckboxSelector.tsx
@@ -6,32 +6,28 @@
  *
  */
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, fonts } from "@ndla/core";
-import { CheckboxItem, Label } from "@ndla/forms";
-import { CheckboxWrapper } from "../../../../components/Form/styles";
+import { CheckLine } from "@ndla/icons/editor";
+import { CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "@ndla/primitives";
 
 interface Props {
   checked: boolean;
   onCheckedChange: (value: boolean) => void;
   name: string;
 }
 
-const StyledLabel = styled(Label)`
-  color: ${colors.brand.primary};
-  font-weight: ${fonts.weight.normal};
-`;
-
 const CheckboxSelector = ({ name, checked, onCheckedChange }: Props) => {
   const { t } = useTranslation();
 
   return (
-    <CheckboxWrapper>
-      <CheckboxItem id={`checkbox-${name}`} checked={checked} onCheckedChange={onCheckedChange} />
-      <StyledLabel margin="none" textStyle="label-small" htmlFor={`checkbox-${name}`}>
-        {t(`searchForm.types.${name}`)}
-      </StyledLabel>
-    </CheckboxWrapper>
+    <CheckboxRoot checked={checked} onCheckedChange={(details) => onCheckedChange(details.checked as boolean)}>
+      <CheckboxControl>
+        <CheckboxIndicator asChild>
+          <CheckLine />
+        </CheckboxIndicator>
+      </CheckboxControl>
+      <CheckboxLabel>{t(`searchForm.types.${name}`)}</CheckboxLabel>
+      <CheckboxHiddenInput />
+    </CheckboxRoot>
   );
 };