Link variant

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",
     "express": "4.20.0"
   },
   "workspaces": [

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",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

packages/adapter-next/src/hooks/snippet-read.ts

@@ -62,33 +62,48 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 			const repeat = data.model.config?.repeat ?? false;
 			const allowText = data.model.config?.allowText ?? false;
 
+			const allowVariants = Boolean(data.model.config?.variants);
+			const variant = (path: string, prefix: "" | "\n    " = "") =>
+				allowVariants ? `${prefix}className={${path}.variant}` : "";
+
+			const path = dotPath(fieldPath);
+
 			let code;
 			if (!repeat && !allowText) {
 				code = await format(
 					stripIndent`
-					<PrismicNextLink field={${dotPath(fieldPath)}}>Link</PrismicNextLink>
+					<PrismicNextLink field={${path}} ${variant(path)}>Link</PrismicNextLink>
 				`,
 					helpers,
 				);
 			} else if (!repeat && allowText) {
 				code = await format(
 					stripIndent`
-					<PrismicNextLink field={${dotPath(fieldPath)}} />
+					<PrismicNextLink field={${path}} ${variant(path)}/>
 				`,
 					helpers,
 				);
 			} else if (repeat && !allowText) {
-				code = stripIndent`
-					{${dotPath(fieldPath)}.map((link) => (
-						<PrismicNextLink key={link.key} field={link}>Link</PrismicNextLink>
-				))}
-				`;
+				// We cannot use `format` since this snippet contains invalid syntax.
+				// Please ensure this snippet is manually formatted correctly.
+				// Make sure to use spaces instead of tabs.
+				code = stripIndent`{${path}.map((link) => (
+  <PrismicNextLink
+    key={link.key}
+    field={link}${variant("link", "\n    ")}>
+      Link
+  </PrismicNextLink>
+))}`;
 			} else if (repeat && allowText) {
-				code = stripIndent`
-					{${dotPath(fieldPath)}.map((link) => (
-					  <PrismicNextLink key={link.key} field={link} />
-					))}
-				`;
+				// We cannot use `format` since this snippet contains invalid syntax.
+				// Please ensure this snippet is manually formatted correctly.
+				// Make sure to use spaces instead of tabs.
+				code = stripIndent`{${path}.map((link) => (
+  <PrismicNextLink
+    key={link.key}
+    field={link}${variant("link", "\n    ")}
+  />
+))}`;
 			} else {
 				throw new Error("Invalid configuration.");
 			}

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",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

packages/adapter-nuxt/src/hooks/snippet-read.ts

@@ -61,25 +61,31 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 			const repeat = data.model.config?.repeat ?? false;
 			const allowText = data.model.config?.allowText ?? false;
 
+			const allowVariants = Boolean(data.model.config?.variants);
+			const variant = (path: string) =>
+				allowVariants ? ` :class="${path}.variant"` : "";
+
+			const path = dotPath(fieldPath);
+
 			let codeText;
 			if (!repeat && !allowText) {
 				codeText = stripIndent`
-					<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
+					<PrismicLink :field="${path}"${variant(path)}>Link</PrismicLink>
 				`;
 			} else if (!repeat && allowText) {
 				codeText = stripIndent`
-					<PrismicLink :field="${dotPath(fieldPath)}" />
+					<PrismicLink :field="${path}"${variant(path)} />
 				`;
 			} else if (repeat && !allowText) {
 				codeText = stripIndent`
-					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
-						<PrismicLink :field="link">Link</PrismicLink>
+					<template v-for="link in ${path}" :key="link.key">
+						<PrismicLink :field="link"${variant("link")}>Link</PrismicLink>
 					</template>
 				`;
 			} else if (repeat && allowText) {
 				codeText = stripIndent`
-					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
-						<PrismicLink :field="link" />
+					<template v-for="link in ${path}" :key="link.key">
+						<PrismicLink :field="link"${variant("link")} />
 					</template>
 				`;
 			} else {

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",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

packages/adapter-nuxt2/src/hooks/snippet-read.ts

@@ -61,25 +61,31 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 			const repeat = data.model.config?.repeat ?? false;
 			const allowText = data.model.config?.allowText ?? false;
 
+			const allowVariants = Boolean(data.model.config?.variants);
+			const variant = (path: string) =>
+				allowVariants ? ` :class="${path}.variant"` : "";
+
+			const path = dotPath(fieldPath);
+
 			let codeText;
 			if (!repeat && !allowText) {
 				codeText = stripIndent`
-					<PrismicLink :field="${dotPath(fieldPath)}">Link</PrismicLink>
+					<PrismicLink :field="${path}"${variant(path)}>Link</PrismicLink>
 				`;
 			} else if (!repeat && allowText) {
 				codeText = stripIndent`
-					<PrismicLink :field="${dotPath(fieldPath)}" />
+					<PrismicLink :field="${path}"${variant(path)} />
 				`;
 			} else if (repeat && !allowText) {
 				codeText = stripIndent`
-					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
-						<PrismicLink :field="link">Link</PrismicLink>
+					<template v-for="link in ${path}" :key="link.key">
+						<PrismicLink :field="link"${variant("link")}>Link</PrismicLink>
 					</template>
 				`;
 			} else if (repeat && allowText) {
 				codeText = stripIndent`
-					<template v-for="link in ${dotPath(fieldPath)}" :key="link.key">
-						<PrismicLink :field="link" />
+					<template v-for="link in ${path}" :key="link.key">
+						<PrismicLink :field="link"${variant("link")} />
 					</template>
 				`;
 			} else {

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",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"common-tags": "^1.8.2",
 		"fp-ts": "^2.13.1",

packages/adapter-sveltekit/src/hooks/snippet-read.ts

@@ -60,25 +60,31 @@ export const snippetRead: SnippetReadHook<PluginOptions> = async (
 			const repeat = data.model.config?.repeat ?? false;
 			const allowText = data.model.config?.allowText ?? false;
 
+			const allowVariants = Boolean(data.model.config?.variants);
+			const variant = (path: string) =>
+				allowVariants ? ` class={${path}.variant}` : "";
+
+			const path = dotPath(fieldPath);
+
 			let codeText;
 			if (!repeat && !allowText) {
 				codeText = stripIndent`
-					<PrismicLink field={${dotPath(fieldPath)}}>Link</PrismicLink>
+					<PrismicLink field={${path}}${variant(path)}>Link</PrismicLink>
 				`;
 			} else if (!repeat && allowText) {
 				codeText = stripIndent`
-					<PrismicLink field={${dotPath(fieldPath)}} />
+					<PrismicLink field={${path}}${variant(path)} />
 				`;
 			} else if (repeat && !allowText) {
 				codeText = stripIndent`
-					{#each ${dotPath(fieldPath)} as link (link.key)}
-						<PrismicLink field={link}>Link</PrismicLink>
+					{#each ${path} as link (link.key)}
+						<PrismicLink field={link}${variant("link")}>Link</PrismicLink>
 					{/each}
 				`;
 			} else if (repeat && allowText) {
 				codeText = stripIndent`
-					{#each ${dotPath(fieldPath)} as link (link.key)}
-						<PrismicLink field={link} />
+					{#each ${path} as link (link.key)}
+						<PrismicLink field={link}${variant("link")} />
 					{/each}
 				`;
 			} else {

packages/manager/package.json

@@ -67,8 +67,8 @@
 		"@antfu/ni": "^0.20.0",
 		"@prismicio/client": "^7.11.0",
 		"@prismicio/custom-types-client": "2.1.0",
-		"@prismicio/mocks": "2.5.0",
-		"@prismicio/types-internal": "3.2.0",
+		"@prismicio/mocks": "2.8.0",
+		"@prismicio/types-internal": "3.3.0",
 		"@segment/analytics-node": "^2.1.2",
 		"@slicemachine/plugin-kit": "workspace:*",
 		"cookie": "^1.0.1",

packages/manager/src/managers/telemetry/types.ts

@@ -205,6 +205,7 @@ type FieldAddedSegmentEvent = SegmentEvent<
 		contentType: "page type" | "custom type" | "slice";
 		allowText?: boolean;
 		repeat?: boolean;
+		variants?: string[];
 	}
 >;
 

packages/manager/test/SliceMachineManager-customTypes-readCustomType.test.ts

@@ -92,7 +92,6 @@ it("ignores plugins that implement `custom-type-library:read`", async (ctx) => {
 	const res = await manager.customTypes.readCustomType({ id: model.id });
 
 	expect(res).toStrictEqual({
-		// TODO: update prismic/mocks
 		model: { ...model, format: "custom" },
 		errors: [],
 	});

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",
 		"@size-limit/preset-small-lib": "8.2.4",
 		"@types/common-tags": "1.8.1",
 		"@types/fs-extra": "11.0.1",

packages/slice-machine/package.json

@@ -43,13 +43,13 @@
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.11.0",
-    "@prismicio/editor-fields": "0.4.59",
-    "@prismicio/editor-support": "0.4.59",
-    "@prismicio/editor-ui": "0.4.59",
+    "@prismicio/editor-fields": "0.4.60",
+    "@prismicio/editor-support": "0.4.60",
+    "@prismicio/editor-ui": "0.4.60",
     "@prismicio/mock": "0.3.3",
-    "@prismicio/mocks": "2.5.0",
+    "@prismicio/mocks": "2.8.0",
     "@prismicio/simulator": "0.1.4",
-    "@prismicio/types-internal": "3.2.0",
+    "@prismicio/types-internal": "3.3.0",
     "@radix-ui/react-hover-card": "1.0.6",
     "@radix-ui/react-tabs": "1.0.4",
     "@reach/menu-button": "0.18.0",

packages/slice-machine/src/features/customTypes/customTypesBuilder/UIDEditor.tsx

@@ -95,7 +95,11 @@ export function UIDEditor() {
           </Box>
           <DialogActions>
             <DialogCancelButton size="medium" />
-            <DialogActionButton size="medium" disabled={Boolean(error)}>
+            <DialogActionButton
+              type="submit"
+              size="medium"
+              disabled={Boolean(error)}
+            >
               Save
             </DialogActionButton>
           </DialogActions>

packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -141,6 +141,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isLoading}
                 disabled={errors && Object.keys(errors).length > 0}

packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -174,6 +174,7 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isLoading}
                 disabled={Object.keys(errors).length > 0}

packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx

@@ -97,6 +97,7 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isLoading}
                 disabled={Boolean(error)}

packages/slice-machine/src/legacy/components/Forms/RenameVariationModal/RenameVariationModal.tsx

@@ -105,6 +105,7 @@ export const RenameVariationModal: FC<RenameVariationModalProps> = ({
             <DialogActions>
               <DialogCancelButton size="medium" />
               <DialogActionButton
+                type="submit"
                 size="medium"
                 loading={isRenaming}
                 disabled={Boolean(error)}

packages/slice-machine/src/legacy/lib/builders/SliceBuilder/VariationsList/AddVariationModal.tsx

@@ -160,7 +160,9 @@ const AddVariationModal: React.FunctionComponent<{
                   <Button onClick={handleClose} color="grey">
                     Cancel
                   </Button>
-                  <Button loading={isAddingVariation}>Submit</Button>
+                  <Button type="submit" loading={isAddingVariation}>
+                    Submit
+                  </Button>
                 </Box>
               }
               close={handleClose}

packages/slice-machine/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx

@@ -25,6 +25,7 @@ const Hint: React.FC<HintProps> = ({
     if (item.value.config?.allowText ?? false)
       snippetCacheKey.push("allowText");
     if (item.value.config?.repeat ?? false) snippetCacheKey.push("repeat");
+    if (Boolean(item.value.config?.variants)) snippetCacheKey.push("variants");
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment