Add link variants switch behavior

prismicio · Dec 13, 2024 · 4c7da94 · 4c7da94
1 parent 0cb05fd
commit 4c7da94
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 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
@@ -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
@@ -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
@@ -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