summaryrefslogtreecommitdiffstats
path: root/src/components/templates/sectioned
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/templates/sectioned')
-rw-r--r--src/components/templates/sectioned/sectioned-layout.stories.tsx8
-rw-r--r--src/components/templates/sectioned/sectioned-layout.tsx25
2 files changed, 29 insertions, 4 deletions
diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx
index ce31a83..689f9a7 100644
--- a/src/components/templates/sectioned/sectioned-layout.stories.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx
@@ -1,4 +1,5 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { LayoutBase } from '../layout/layout.stories';
import SectionedLayoutComponent from './sectioned-layout';
/**
@@ -31,6 +32,13 @@ export default {
},
},
},
+ decorators: [
+ (Story) => (
+ <LayoutBase {...LayoutBase.args}>
+ <Story />
+ </LayoutBase>
+ ),
+ ],
parameters: {
layout: 'fullscreen',
},
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index 58d5ad0..f91c354 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -2,12 +2,17 @@ import Section, {
type SectionProps,
type SectionVariant,
} from '@components/atoms/layout/section';
+import Script from 'next/script';
import { FC } from 'react';
-import Layout, { type LayoutProps } from '../layout/layout';
+import { BreadcrumbList } from 'schema-dts';
export type Section = Pick<SectionProps, 'content' | 'title'>;
-export type SectionedLayoutProps = Pick<LayoutProps, 'breadcrumbSchema'> & {
+export type SectionedLayoutProps = {
+ /**
+ * The breadcrumb JSON schema.
+ */
+ breadcrumbSchema: BreadcrumbList['itemListElement'][];
/**
* An array of objects describing each section.
*/
@@ -19,7 +24,10 @@ export type SectionedLayoutProps = Pick<LayoutProps, 'breadcrumbSchema'> & {
*
* Render a sectioned layout.
*/
-const SectionedLayout: FC<SectionedLayoutProps> = ({ sections, ...props }) => {
+const SectionedLayout: FC<SectionedLayoutProps> = ({
+ breadcrumbSchema,
+ sections,
+}) => {
const getSections = (items: SectionProps[]) => {
return items.map((section, index) => {
const variant: SectionVariant = index % 2 ? 'light' : 'dark';
@@ -37,7 +45,16 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({ sections, ...props }) => {
});
};
- return <Layout {...props}>{getSections(sections)}</Layout>;
+ return (
+ <>
+ <Script
+ id="schema-breadcrumb"
+ type="application/ld+json"
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+ />
+ {getSections(sections)}
+ </>
+ );
};
export default SectionedLayout;