Add link variant code snippets for next

prismicio · Dec 18, 2024 · ce28dca · ce28dca
1 parent fe30507
commit ce28dca
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/packages/adapter-next/src/hooks/snippet-read.ts b/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 = `{${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 = `{${path}.map((link) => (
+  <PrismicNextLink 
+    key={link.key}
+    field={link}${variant("link", "\n    ")}
+  />
+))}`;
 			} else {
 				throw new Error("Invalid configuration.");
 			}

diff --git a/packages/slice-machine/src/legacy/lib/builders/common/Zone/Card/components/Hints/index.tsx b/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