Merge pull request #1504 from prismicio/dani/link-variant-2

Link variants switch behavior
prismicio · Dec 13, 2024 · fc58398 · fc58398
2 parents 0e7198c + 4c7da94
commit fc58398
Show file tree

Hide file tree

Showing 14 changed files with 57 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
   "resolutions": {
     "connected-next-router/react-redux": "8.0.7",
     "react-beautiful-dnd/react-redux": "8.0.7",
-    "@prismicio/types-internal": "3.2.0",
+    "@prismicio/types-internal": "3.3.0-alpha.2",
     "express": "4.20.0"
   },
   "workspaces": [

diff --git a/packages/adapter-next/package.json b/packages/adapter-next/package.json
@@ -67,7 +67,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

diff --git a/packages/adapter-nuxt/package.json b/packages/adapter-nuxt/package.json
@@ -60,7 +60,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

diff --git a/packages/adapter-nuxt2/package.json b/packages/adapter-nuxt2/package.json
@@ -60,7 +60,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

diff --git a/packages/adapter-sveltekit/package.json b/packages/adapter-sveltekit/package.json
@@ -63,7 +63,7 @@
 	},
 	"dependencies": {
 		"@prismicio/simulator": "^0.1.4",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

diff --git a/packages/manager/package.json b/packages/manager/package.json
@@ -68,7 +68,7 @@
 		"@prismicio/client": "^7.11.0",
 		"@prismicio/custom-types-client": "2.1.0",
 		"@prismicio/mocks": "2.5.0",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@segment/analytics-node": "^2.1.2",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"cookie": "^1.0.1",

diff --git a/packages/plugin-kit/package.json b/packages/plugin-kit/package.json
@@ -76,7 +76,7 @@
 	},
 	"devDependencies": {
 		"@prismicio/mock": "0.3.7",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@size-limit/preset-small-lib": "8.2.4",
 		"@types/common-tags": "1.8.1",
 		"@types/fs-extra": "11.0.1",

diff --git a/packages/slice-machine/package.json b/packages/slice-machine/package.json
@@ -49,7 +49,7 @@
     "@prismicio/mock": "0.3.3",
     "@prismicio/mocks": "2.5.0",
     "@prismicio/simulator": "0.1.4",
-    "@prismicio/types-internal": "3.2.0",
+    "@prismicio/types-internal": "3.3.0-alpha.2",
     "@radix-ui/react-hover-card": "1.0.6",
     "@radix-ui/react-tabs": "1.0.4",
     "@reach/menu-button": "0.18.0",

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,7 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
 import { Box } from "@prismicio/editor-ui";
 import { Flex } from "theme-ui";
 
@@ -7,7 +11,11 @@ import { createFieldNameFromKey } from "@/legacy/lib/forms";
 import { DefaultFields } from "@/legacy/lib/forms/defaults";
 import { CheckBox } from "@/legacy/lib/forms/fields";
 
-import { DisplayTextCheckbox, RepeatableCheckbox, Variant } from "./components";
+import {
+  DisplayTextCheckbox,
+  RepeatableCheckbox,
+  Variants,
+} from "./components";
 
 const FormFields = {
   ...DefaultFields,
@@ -19,7 +27,7 @@ const Form = (props) => {
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const {
-    config: { allowText, repeat },
+    config: { allowText, repeat, variants },
   } = formValues;
 
   return (
@@ -73,7 +81,12 @@ const Form = (props) => {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           setFieldValue={setFieldValue}
         />
-        <Variant />
+        <Variants
+          variants={variants}
+          onVariantsChange={(variants) =>
+            setFieldValue("config.variants", variants)
+          }
+        />
       </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
@@ -90,7 +90,21 @@ export function RepeatableCheckbox(props: CommonCheckboxProps) {
   );
 }
 
-export function Variant() {
+export function Variants({
+  variants,
+  onVariantsChange,
+}: {
+  variants?: string[];
+  onVariantsChange: (variants?: string[]) => void;
+}) {
+  const enabled = Boolean(variants);
+
+  const onCheckedChange = (checked: boolean) => {
+    onVariantsChange(checked ? ["Primary", "Secondary"] : undefined);
+  };
+
+  const switchLabel = enabled ? "Enabled" : "Disabled";
+
   return (
     <Box overflow="hidden" flexDirection="column" border borderRadius={6}>
       <Box
@@ -107,8 +121,8 @@ export function Variant() {
           the link's style by selecting one of them.
         </Text>
         <Box gap={8}>
-          <Switch />
-          <Text color="grey11">Disabled</Text>
+          <Switch checked={enabled} onCheckedChange={onCheckedChange} />
+          <Text color="grey11">{switchLabel}</Text>
         </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
@@ -78,6 +78,7 @@ 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(),
   })
   .required()
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

diff --git a/packages/start-slicemachine/package.json b/packages/start-slicemachine/package.json
@@ -56,7 +56,7 @@
 	"bin": "./bin/start-slicemachine.js",
 	"dependencies": {
 		"@prismicio/mocks": "2.5.0",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/types-internal": "3.3.0-alpha.2",
 		"@slicemachine/manager": "workspace:*",
 		"body-parser": "^1.20.3",
 		"chalk": "^4.1.2",

diff --git a/playwright/package.json b/playwright/package.json
@@ -15,7 +15,7 @@
   "devDependencies": {
     "@msgpack/msgpack": "2.8.0",
     "@playwright/test": "1.39.0",
-    "@prismicio/types-internal": "3.2.0",
+    "@prismicio/types-internal": "3.3.0-alpha.2",
     "@slicemachine/manager": "workspace:*",
     "@typescript-eslint/eslint-plugin": "7.17.0",
     "@typescript-eslint/parser": "7.17.0",

diff --git a/yarn.lock b/yarn.lock
@@ -6236,9 +6236,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prismicio/types-internal@npm:3.2.0":
-  version: 3.2.0
-  resolution: "@prismicio/types-internal@npm:3.2.0"
+"@prismicio/types-internal@npm:3.3.0-alpha.2":
+  version: 3.3.0-alpha.2
+  resolution: "@prismicio/types-internal@npm:3.3.0-alpha.2"
   dependencies:
     monocle-ts: ^2.3.11
     newtype-ts: ^0.3.5
@@ -6248,7 +6248,7 @@ __metadata:
     fp-ts: ^2.11.8
     io-ts: ^2.2.16
     io-ts-types: ^0.5.16
-  checksum: d5f51562adcabc9255092a06817f3de384c392834c075858c2e03740b8a79df108b082f35e07cbf0ec5e8818594ddd42a3374e89d139826248c38ba54b32742c
+  checksum: 7439e4bdd456059fae8cd0759a7abb64b14ee35876bfbb84609e0bbacfb396eb23141a88fcf7c340ffe03f0367b2f01e76df8d39133961f921f0950c1267961a
   languageName: node
   linkType: hard
 
@@ -8980,7 +8980,7 @@ __metadata:
   dependencies:
     "@prismicio/mock": 0.2.0
     "@prismicio/simulator": ^0.1.4
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@size-limit/preset-small-lib": 8.2.4
     "@slicemachine/plugin-kit": "workspace:*"
     "@types/common-tags": 1.8.1
@@ -9025,7 +9025,7 @@ __metadata:
   dependencies:
     "@prismicio/mock": 0.2.0
     "@prismicio/simulator": ^0.1.4
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@size-limit/preset-small-lib": 8.2.4
     "@slicemachine/plugin-kit": "workspace:*"
     "@typescript-eslint/eslint-plugin": 5.55.0
@@ -9066,7 +9066,7 @@ __metadata:
   dependencies:
     "@prismicio/mock": 0.2.0
     "@prismicio/simulator": ^0.1.4
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@size-limit/preset-small-lib": 8.2.4
     "@slicemachine/plugin-kit": "workspace:*"
     "@types/common-tags": 1.8.1
@@ -9108,7 +9108,7 @@ __metadata:
   dependencies:
     "@prismicio/mock": 0.2.0
     "@prismicio/simulator": ^0.1.4
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@size-limit/preset-small-lib": 8.2.4
     "@slicemachine/plugin-kit": "workspace:*"
     "@sveltejs/kit": 2.0.0
@@ -9161,7 +9161,7 @@ __metadata:
   dependencies:
     "@msgpack/msgpack": 2.8.0
     "@playwright/test": 1.39.0
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@slicemachine/manager": "workspace:*"
     "@typescript-eslint/eslint-plugin": 7.17.0
     "@typescript-eslint/parser": 7.17.0
@@ -9231,7 +9231,7 @@ __metadata:
     "@prismicio/custom-types-client": 2.1.0
     "@prismicio/mock": 0.2.0
     "@prismicio/mocks": 2.5.0
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@segment/analytics-node": ^2.1.2
     "@size-limit/preset-small-lib": 8.2.4
     "@slicemachine/plugin-kit": "workspace:*"
@@ -9289,7 +9289,7 @@ __metadata:
   dependencies:
     "@prismicio/client": ^7.11.0
     "@prismicio/mock": 0.3.7
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@size-limit/preset-small-lib": 8.2.4
     "@types/common-tags": 1.8.1
     "@types/fs-extra": 11.0.1
@@ -31227,7 +31227,7 @@ __metadata:
     "@prismicio/mock": 0.3.3
     "@prismicio/mocks": 2.5.0
     "@prismicio/simulator": 0.1.4
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@radix-ui/react-hover-card": 1.0.6
     "@radix-ui/react-tabs": 1.0.4
     "@radix-ui/react-visually-hidden": 1.0.3
@@ -31705,7 +31705,7 @@ __metadata:
   resolution: "start-slicemachine@workspace:packages/start-slicemachine"
   dependencies:
     "@prismicio/mocks": 2.5.0
-    "@prismicio/types-internal": 3.2.0
+    "@prismicio/types-internal": 3.3.0-alpha.2
     "@size-limit/preset-small-lib": 8.2.4
     "@slicemachine/manager": "workspace:*"
     "@types/body-parser": 1.19.2