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.tsx24
-rw-r--r--src/components/templates/sectioned/sectioned-layout.test.tsx9
-rw-r--r--src/components/templates/sectioned/sectioned-layout.tsx8
3 files changed, 26 insertions, 15 deletions
diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx
index 9ff3b75..ce31a83 100644
--- a/src/components/templates/sectioned/sectioned-layout.stories.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx
@@ -1,5 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
import SectionedLayoutComponent from './sectioned-layout';
/**
@@ -8,7 +7,21 @@ import SectionedLayoutComponent from './sectioned-layout';
export default {
title: 'Templates/Sectioned',
component: SectionedLayoutComponent,
+ args: {
+ breadcrumbSchema: [],
+ },
argTypes: {
+ breadcrumbSchema: {
+ control: {
+ type: null,
+ },
+ description: 'The JSON schema for breadcrumb items.',
+ type: {
+ name: 'object',
+ required: true,
+ value: {},
+ },
+ },
sections: {
description: 'The different sections.',
type: {
@@ -18,15 +31,6 @@ export default {
},
},
},
- decorators: [
- (Story) => (
- <IntlProvider locale="en">
- <div id="__next">
- <Story />
- </div>
- </IntlProvider>
- ),
- ],
parameters: {
layout: 'fullscreen',
},
diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx
index 334d1cc..9b8bab5 100644
--- a/src/components/templates/sectioned/sectioned-layout.test.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.test.tsx
@@ -1,6 +1,8 @@
import { render, screen } from '@test-utils';
+import { BreadcrumbList } from 'schema-dts';
import SectionedLayout from './sectioned-layout';
+const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
const sections = [
{
title: 'Section 1',
@@ -26,7 +28,12 @@ const sections = [
describe('SectionedLayout', () => {
it('renders the correct number of section', () => {
- render(<SectionedLayout sections={sections} />);
+ render(
+ <SectionedLayout
+ breadcrumbSchema={breadcrumbSchema}
+ sections={sections}
+ />
+ );
expect(screen.getAllByRole('heading', { name: /^Section/ })).toHaveLength(
sections.length
);
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index 36ca039..58d5ad0 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -3,11 +3,11 @@ import Section, {
type SectionVariant,
} from '@components/atoms/layout/section';
import { FC } from 'react';
-import Layout from '../layout/layout';
+import Layout, { type LayoutProps } from '../layout/layout';
export type Section = Pick<SectionProps, 'content' | 'title'>;
-export type SectionedLayoutProps = {
+export type SectionedLayoutProps = Pick<LayoutProps, 'breadcrumbSchema'> & {
/**
* An array of objects describing each section.
*/
@@ -19,7 +19,7 @@ export type SectionedLayoutProps = {
*
* Render a sectioned layout.
*/
-const SectionedLayout: FC<SectionedLayoutProps> = ({ sections }) => {
+const SectionedLayout: FC<SectionedLayoutProps> = ({ sections, ...props }) => {
const getSections = (items: SectionProps[]) => {
return items.map((section, index) => {
const variant: SectionVariant = index % 2 ? 'light' : 'dark';
@@ -37,7 +37,7 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({ sections }) => {
});
};
- return <Layout>{getSections(sections)}</Layout>;
+ return <Layout {...props}>{getSections(sections)}</Layout>;
};
export default SectionedLayout;