From 015cf3b91c97d213160e9d96fb137e8c43f10ed1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Marti=CC=81n?= <danimartinprieto@gmail.com>
Date: Mon, 16 Dec 2024 16:45:11 +0100
Subject: [PATCH] Allow deleting link variant options

---
 .../models/common/widgets/Link/components.tsx | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 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 a2e03423a..cb697be2a 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
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Icon,
+  IconButton,
   Switch,
   Text,
   TextInput,
@@ -119,6 +120,8 @@ export function Variants({
 
   const addButtonShown = (variants?.length ?? 0) < 5;
 
+  const deleteButtonShown = (variants?.length ?? 0) > 2;
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -153,26 +156,37 @@ export function Variants({
             )}
           </Text>
           {variants?.map((variant, position) => (
-            <Box
-              key={position}
-              backgroundColor="white"
-              padding={{ inline: 12, block: 8 }}
-              flexDirection="column"
-              gap={8}
-              border
-              borderRadius={4}
-            >
-              <TextInput
-                placeholder="Variant option (e.g. Primary)"
-                value={variant}
-                onValueChange={(newVariant) =>
-                  onVariantsChange(
-                    variants?.map((variant, index) =>
-                      index === position ? newVariant : variant,
-                    ),
-                  )
-                }
-              />
+            <Box key={position} gap={4} alignItems="center">
+              <Box
+                flexGrow={1}
+                backgroundColor="white"
+                padding={{ inline: 12, block: 8 }}
+                flexDirection="column"
+                border
+                borderRadius={4}
+              >
+                <TextInput
+                  placeholder="Variant option (e.g. Primary)"
+                  value={variant}
+                  onValueChange={(newVariant) =>
+                    onVariantsChange(
+                      variants?.map((variant, index) =>
+                        index === position ? newVariant : variant,
+                      ),
+                    )
+                  }
+                />
+              </Box>
+              {deleteButtonShown && (
+                <IconButton
+                  icon="delete"
+                  onClick={() =>
+                    onVariantsChange(
+                      variants?.filter((_, index) => index !== position),
+                    )
+                  }
+                />
+              )}
             </Box>
           ))}
           {addButtonShown && (