Handle link variants error

prismicio · Dec 13, 2024 · 9a2d3b5 · 9a2d3b5
1 parent 4c7da94
commit 9a2d3b5
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 8 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
@@ -3,6 +3,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 
 import { Box } from "@prismicio/editor-ui";
+import { useField } from "formik";
 import { Flex } from "theme-ui";
 
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
@@ -81,16 +82,29 @@ const Form = (props) => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           setFieldValue={setFieldValue}
         />
-        <Variants
-          variants={variants}
-          onVariantsChange={(variants) =>
-            setFieldValue("config.variants", variants)
-          }
-        />
+        <VariantsWrapper variants={variants} setFieldValue={setFieldValue} />
       </Box>
     </>
   );
 };
 
 export { FormFields };
 export default Form;
+
+function VariantsWrapper({ variants, setFieldValue }) {
+  const fieldKey = "config.variants";
+
+  const onVariantsChange = (variants) => setFieldValue(fieldKey, variants);
+
+  const [_, meta] = useField(fieldKey);
+
+  const error = meta.error?.find((err) => err);
+
+  return (
+    <Variants
+      variants={variants}
+      onVariantsChange={onVariantsChange}
+      error={error}
+    />
+  );
+}
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,4 +1,11 @@
-import { Box, Icon, Switch, Text, Tooltip } from "@prismicio/editor-ui";
+import {
+  Box,
+  Icon,
+  Switch,
+  Text,
+  TextInput,
+  Tooltip,
+} from "@prismicio/editor-ui";
 import { Checkbox, Flex, Label } from "theme-ui";
 
 import { Col } from "@/legacy/components/Flex";
@@ -93,9 +100,11 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
 export function Variants({
   variants,
   onVariantsChange,
+  error,
 }: {
   variants?: string[];
   onVariantsChange: (variants?: string[]) => void;
+  error?: string;
 }) {
   const enabled = Boolean(variants);
 
@@ -105,6 +114,8 @@ export function Variants({
 
   const switchLabel = enabled ? "Enabled" : "Disabled";
 
+  const optionsTitle = `Options (${variants?.length ?? 0}/5)`;
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -125,6 +136,44 @@ export function Variants({
           <Text color="grey11">{switchLabel}</Text>
         </Box>
       </Box>
+      {enabled && (
+        <Box
+          border={{ bottom: true }}
+          padding={12}
+          flexDirection="column"
+          gap={8}
+        >
+          <Text variant="h5" color="grey11">
+            {optionsTitle}
+            {Boolean(error) && (
+              <Text variant="inherit" color="tomato9">{` ${error}`}</Text>
+            )}
+          </Text>
+          {variants?.map((variant, position) => (
+            <Box
+              key={position}
+              backgroundColor="white"
+              padding={{ inline: 12, block: 8 }}
+              flexDirection="column"
+              gap={8}
+              border
+              borderRadius={4}
+            >
+              <TextInput
+                placeholder="Variation option (e.g. Primary)"
+                value={variant}
+                onValueChange={(newVariant) =>
+                  onVariantsChange(
+                    variants?.map((variant, index) =>
+                      index === position ? newVariant : variant,
+                    ),
+                  )
+                }
+              />
+            </Box>
+          ))}
+        </Box>
+      )}
       <Box backgroundColor="white" flexDirection="column" padding={12}>
         <Text variant="normal" color="grey11">
           Need additional properties similar to "Variants"?{" "}

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,7 +78,9 @@ 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(),
+    variants: yup
+      .array(yup.string().required("values can't be empty"))
+      .optional(),
   })
   .required()
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access