Add link variant box

prismicio · Dec 12, 2024 · fe9f24f · fe9f24f
1 parent c41b16e
commit fe9f24f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 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,4 @@
+import { Box } from "@prismicio/editor-ui";
 import { Flex } from "theme-ui";
 
 import { Col, Flex as FlexGrid } from "@/legacy/components/Flex";
@@ -6,7 +7,7 @@ import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { CheckBox } from "@/legacy/lib/forms/fields";
 
-import { DisplayTextCheckbox, RepeatableCheckbox } from "./components";
+import { DisplayTextCheckbox, RepeatableCheckbox, Variant } from "./components";
 
 const FormFields = {
   ...DefaultFields,
@@ -64,12 +65,16 @@ const Form = (props) => {
           </Flex>
         </Col>
       </FlexGrid>
-      <RepeatableCheckbox
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        checked={repeat}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        setFieldValue={setFieldValue}
-      />
+      <Box height={8} />
+      <Box flexDirection="column" gap={16}>
+        <RepeatableCheckbox
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          checked={repeat}
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          setFieldValue={setFieldValue}
+        />
+        <Variant />
+      </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
@@ -1,4 +1,4 @@
-import { Box, Icon, Text, Tooltip } from "@prismicio/editor-ui";
+import { Box, Icon, Switch, Text, Tooltip } from "@prismicio/editor-ui";
 import { Checkbox, Flex, Label } from "theme-ui";
 
 import { Col } from "@/legacy/components/Flex";
@@ -57,13 +57,7 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
 
   return (
     <Box flexDirection="column">
-      <Label
-        htmlFor="repeat"
-        variant="label.primary"
-        sx={{
-          mt: 2,
-        }}
-      >
+      <Label htmlFor="repeat" variant="label.primary">
         Repeatable
       </Label>
       <Label variant="label.border" sx={{ display: "flex" }}>
@@ -95,3 +89,41 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
     </Box>
   );
 }
+
+export function Variant() {
+  return (
+    <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
+      <Box
+        border={{ bottom: true }}
+        padding={12}
+        flexDirection="column"
+        gap={8}
+      >
+        <Text variant="h4" color="grey12">
+          Variants
+        </Text>
+        <Text color="grey11">
+          Add variants like "Primary" and "Secondary" to allow editors to choose
+          the link's style by selecting one of them.
+        </Text>
+        <Box gap={8}>
+          <Switch />
+          <Text color="grey11">Disabled</Text>
+        </Box>
+      </Box>
+      <Box backgroundColor="white" flexDirection="column" padding={12}>
+        <Text variant="normal" color="grey11">
+          Need additional properties similar to "Variants"?{" "}
+          <a
+            href="https://prismic.io/"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "inherit", textDecoration: "underline" }}
+          >
+            Please, provide your feedback here.
+          </a>
+        </Text>
+      </Box>
+    </Box>
+  );
+}