doc(examples): Update examples with groups in slices (#203)

prismicio · May 17, 2024 · 9ab1725 · 9ab1725
1 parent d7f196f
commit 9ab1725
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 75 deletions.
diff --git a/examples/custom-slicezone-props/index.tsx b/examples/custom-slicezone-props/index.tsx
@@ -15,21 +15,37 @@ import { HeroSlice, ExampleSliceZone } from "./types";
 // is a Prismic document and `body` is a Slice Zone.
 const slices: ExampleSliceZone = [
 	{
+		id: "1",
 		slice_type: "hero",
 		slice_label: null,
+		variation: "default",
 		primary: {
 			heading: "Lorem ipsum",
 			buttonText: "Lorem ipsum",
+			cards: [
+				{
+					title: "Lorem ipsum 1",
+					content: "Lorem ipsum dolor sit amet",
+				},
+				{
+					title: "Lorem ipsum 2",
+					content: "Lorem ipsum dolor sit amet",
+				},
+			],
 		},
 		items: [],
+		version: "1",
 	},
 	{
+		id: "2",
 		slice_type: "call_to_action",
 		slice_label: null,
+		variation: "default",
 		primary: {
 			text: "Lorem ipsum dolor sit amet",
 		},
 		items: [],
+		version: "2",
 	},
 ];
 
@@ -40,6 +56,12 @@ const HeroSlice = ({ slice }: SliceComponentProps<HeroSlice>) => {
 		<section>
 			<h1>{slice.primary.heading}</h1>
 			<button>{slice.primary.buttonText}</button>
+			{slice.primary.cards.map((card, index) => (
+				<div key={index}>
+					<h2>{card.title}</h2>
+					<p>{card.content}</p>
+				</div>
+			))}
 		</section>
 	);
 };

diff --git a/examples/custom-slicezone-props/package.json b/examples/custom-slicezone-props/package.json
@@ -4,6 +4,6 @@
 		"@prismicio/react": "../../src"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.1.0"
+		"@prismicio/client": "^7.5.0"
 	}
 }
diff --git a/examples/custom-slicezone-props/types.ts b/examples/custom-slicezone-props/types.ts
@@ -1,18 +1,28 @@
 import * as prismic from "@prismicio/client";
 
-export type HeroSlice = prismic.Slice<
+export type HeroSlice = prismic.SharedSlice<
 	"hero",
-	{
-		heading: prismic.KeyTextField;
-		buttonText: prismic.KeyTextField;
-	}
+	prismic.SharedSliceVariation<
+		"default",
+		{
+			heading: prismic.KeyTextField;
+			buttonText: prismic.KeyTextField;
+			cards: prismic.GroupField<{
+				title: prismic.KeyTextField;
+				content: prismic.KeyTextField;
+			}>;
+		}
+	>
 >;
 
-export type CallToActionSlice = prismic.Slice<
+export type CallToActionSlice = prismic.SharedSlice<
 	"call_to_action",
-	{
-		text: prismic.KeyTextField;
-	}
+	prismic.SharedSliceVariation<
+		"default",
+		{
+			text: prismic.KeyTextField;
+		}
+	>
 >;
 
 export type Slices = HeroSlice | CallToActionSlice;

diff --git a/examples/router-link/package.json b/examples/router-link/package.json
@@ -5,7 +5,7 @@
 		"react-router-dom": "^5.2.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.1.0",
+		"@prismicio/client": "^7.5.0",
 		"@types/react-router-dom": "^5.1.8"
 	}
 }
diff --git a/examples/router-link/types.ts b/examples/router-link/types.ts
diff --git a/examples/with-global-configuration/package.json b/examples/with-global-configuration/package.json
@@ -5,7 +5,7 @@
 		"react-router-dom": "^5.2.0"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.1.0",
+		"@prismicio/client": "^7.5.0",
 		"@types/react-router-dom": "^5.1.8"
 	}
 }
diff --git a/examples/with-global-configuration/types.ts b/examples/with-global-configuration/types.ts
diff --git a/examples/with-typescript/index.tsx b/examples/with-typescript/index.tsx
@@ -11,34 +11,38 @@ type PageDocument = prismic.PrismicDocumentWithUID<{
 		link: prismic.LinkField;
 	}>;
 
-	// Each Slice in a Slice Zone can be typed using `prismic.Slice`
+	// Each Slice in a Slice Zone can be typed using `prismic.SharedSlice`
 	slices: prismic.SliceZone<
-		| prismic.Slice<
+		| prismic.SharedSlice<
 				// Slice type
 				"hero",
-				// Primary/non-repeatable fields
-				{
-					heading: prismic.TitleField;
-					body: prismic.RichTextField;
-				},
-				// Item/repeatable fields
-				{
-					buttonText: prismic.KeyTextField;
-					buttonLink: prismic.LinkField;
-				}
+				prismic.SharedSliceVariation<
+					"default",
+					// Fields
+					{
+						heading: prismic.KeyTextField;
+						body: prismic.RichTextField;
+						buttons: prismic.GroupField<{
+							label: prismic.KeyTextField;
+							link: prismic.LinkField;
+						}>;
+					}
+				>
 		  >
-		| prismic.Slice<
+		| prismic.SharedSlice<
 				// Slice type
 				"call_to_action",
-				// Primary/non-repeatable fields
-				{
-					text: prismic.RichTextField;
-				},
-				// Item/repeatable fields
-				{
-					buttonText: prismic.KeyTextField;
-					buttonLink: prismic.LinkField;
-				}
+				prismic.SharedSliceVariation<
+					"default",
+					// Fields
+					{
+						text: prismic.RichTextField;
+						buttons: prismic.GroupField<{
+							label: prismic.KeyTextField;
+							link: prismic.LinkField;
+						}>;
+					}
+				>
 		  >
 	>;
 }>;

diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
@@ -4,6 +4,6 @@
 		"@prismicio/react": "../../src"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.1.0"
+		"@prismicio/client": "^7.5.0"
 	}
 }