Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
May 17, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
01474c9
doc(examples): Update examples with groups in slices
xrutayisire May 17, 2024
980a74d
Update naming for group field in examples
xrutayisire May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions examples/custom-slicezone-props/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
];

Expand All @@ -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>
);
};
Expand Down
2 changes: 1 addition & 1 deletion examples/custom-slicezone-props/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
"@prismicio/react": "../../src"
},
"devDependencies": {
"@prismicio/client": "^7.1.0"
"@prismicio/client": "^7.5.0"
}
}
28 changes: 19 additions & 9 deletions examples/custom-slicezone-props/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion examples/router-link/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
20 changes: 0 additions & 20 deletions examples/router-link/types.ts
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion examples/with-global-configuration/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
20 changes: 0 additions & 20 deletions examples/with-global-configuration/types.ts
View file
Open in desktop

This file was deleted.

48 changes: 26 additions & 22 deletions examples/with-typescript/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}>;
}
>
>
>;
}>;
Expand Down
2 changes: 1 addition & 1 deletion examples/with-typescript/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
"@prismicio/react": "../../src"
},
"devDependencies": {
"@prismicio/client": "^7.1.0"
"@prismicio/client": "^7.5.0"
}
}
Loading