From b1a4ba94edf5784060a66711c361530805378ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Marti=CC=81n?= <danimartinprieto@gmail.com>
Date: Mon, 16 Dec 2024 16:13:00 +0100
Subject: [PATCH] Allow adding up to 5 link variant options

---
 .../models/common/widgets/Link/components.tsx    | 16 +++++++++++++++-
 .../lib/models/common/widgets/Link/index.ts      |  2 +-
 2 files changed, 16 insertions(+), 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
index 5f069fa74..a2e03423a 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
@@ -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
index 94af4c2c2..98ff95308 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
@@ -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()