From 4c7da9439b98a6d9135ef4224fb088c809017b5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Marti=CC=81n?= <danimartinprieto@gmail.com>
Date: Fri, 13 Dec 2024 12:57:16 +0100
Subject: [PATCH] Add link variants switch behavior

---
 .../lib/models/common/widgets/Link/Form.jsx   | 19 +++++++++++++++---
 .../models/common/widgets/Link/components.tsx | 20 ++++++++++++++++---
 .../lib/models/common/widgets/Link/index.ts   |  1 +
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx
index 013601c30..76b8d8b1c 100644
--- a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx
+++ b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/Form.jsx
@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
 import { Box } from "@prismicio/editor-ui";
 import { Flex } from "theme-ui";
 
@@ -7,7 +11,11 @@ import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { CheckBox } from "@/legacy/lib/forms/fields";
 
-import { DisplayTextCheckbox, RepeatableCheckbox, Variant } from "./components";
+import {
+  DisplayTextCheckbox,
+  RepeatableCheckbox,
+  Variants,
+} from "./components";
 
 const FormFields = {
   ...DefaultFields,
@@ -19,7 +27,7 @@ const Form = (props) => {
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const {
-    config: { allowText, repeat },
+    config: { allowText, repeat, variants },
   } = formValues;
 
   return (
@@ -73,7 +81,12 @@ const Form = (props) => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           setFieldValue={setFieldValue}
         />
-        <Variant />
+        <Variants
+          variants={variants}
+          onVariantsChange={(variants) =>
+            setFieldValue("config.variants", variants)
+          }
+        />
       </Box>
     </>
   );
diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx
index 32352f4ae..997dd6207 100644
--- a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx
+++ b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/components.tsx
@@ -90,7 +90,21 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
   );
 }
 
-export function Variant() {
+export function Variants({
+  variants,
+  onVariantsChange,
+}: {
+  variants?: string[];
+  onVariantsChange: (variants?: string[]) => void;
+}) {
+  const enabled = Boolean(variants);
+
+  const onCheckedChange = (checked: boolean) => {
+    onVariantsChange(checked ? ["Primary", "Secondary"] : undefined);
+  };
+
+  const switchLabel = enabled ? "Enabled" : "Disabled";
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -107,8 +121,8 @@ export function Variant() {
           the link's style by selecting one of them.
         </Text>
         <Box gap={8}>
-          <Switch />
-          <Text color="grey11">Disabled</Text>
+          <Switch checked={enabled} onCheckedChange={onCheckedChange} />
+          <Text color="grey11">{switchLabel}</Text>
         </Box>
       </Box>
       <Box backgroundColor="white" flexDirection="column" padding={12}>
diff --git a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts
index 871f11b57..7227744e1 100644
--- a/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts
+++ b/packages/slice-machine/src/legacy/lib/models/common/widgets/Link/index.ts
@@ -78,6 +78,7 @@ export const linkConfigSchema = yup
     allowTargetBlank: yup.boolean().strict().optional(),
     allowText: yup.boolean().strict().optional(),
     repeat: yup.boolean().strict().optional(),
+    variants: yup.array(yup.string()).optional(),
   })
   .required()
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access