Merge pull request #1508 from prismicio/dani/link-variant-4

Adding link variants
prismicio · Dec 16, 2024 · f6d065c · f6d065c
2 parents fe17006 + b1a4ba9
commit f6d065c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
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
@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   Icon,
   Switch,
   Text,
@@ -116,6 +117,8 @@ export function Variants({
 
   const optionsTitle = `Options (${variants?.length ?? 0}/5)`;
 
+  const addButtonShown = (variants?.length ?? 0) < 5;
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -160,7 +163,7 @@ export function Variants({
               borderRadius={4}
             >
               <TextInput
-                placeholder="Variation option (e.g. Primary)"
+                placeholder="Variant option (e.g. Primary)"
                 value={variant}
                 onValueChange={(newVariant) =>
                   onVariantsChange(
@@ -172,6 +175,17 @@ export function Variants({
               />
             </Box>
           ))}
+          {addButtonShown && (
+            <Box>
+              <Button
+                invisible
+                startIcon="add"
+                onClick={() => onVariantsChange([...(variants ?? []), ""])}
+              >
+                Add option
+              </Button>
+            </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
@@ -79,7 +79,7 @@ export const linkConfigSchema = yup
     allowText: yup.boolean().strict().optional(),
     repeat: yup.boolean().strict().optional(),
     variants: yup
-      .array(yup.string().required("values can't be empty"))
+      .array(yup.string().trim().required("values can't be empty"))
       .optional(),
   })
   .required()