diff options
Diffstat (limited to 'src/components/templates')
4 files changed, 76 insertions, 64 deletions
diff --git a/src/components/templates/sectioned/sectioned-layout.fixtures.tsx b/src/components/templates/sectioned/sectioned-layout.fixtures.tsx new file mode 100644 index 0000000..0da8e7d --- /dev/null +++ b/src/components/templates/sectioned/sectioned-layout.fixtures.tsx @@ -0,0 +1,59 @@ +/* eslint-disable react/jsx-no-literals */ +import { Heading } from '../../atoms'; +import type { PageSection } from './sectioned-layout'; + +export const sections: PageSection[] = [ + { + id: 'section-1', + children: ( + <> + <Heading level={2}>Section 1</Heading> + <div> + Qui suscipit ea et aut dicta. Quia ut dignissimos. Sapiente beatae + voluptatem quis et. Nemo vitae magni. Nihil iste officia est sed esse + molestiae doloribus. Quia temporibus nobis ea fuga quis incidunt + doloribus eaque. + </div> + </> + ), + }, + { + id: 'section-2', + children: ( + <> + <Heading level={2}>Section 2</Heading> + <div> + Reprehenderit aut magnam ut quos. Voluptatibus beatae et. Earum non + atque voluptatum illum rem distinctio repellat. + </div> + </> + ), + }, + { + id: 'section-3', + children: ( + <> + <Heading level={2}>Section 3</Heading> + <div> + Placeat rem dolores dolore illum earum officia dolore. Ut est ducimus. + Officia eveniet pariatur ut laboriosam voluptatibus aut doloremque + natus quis. + </div> + </> + ), + }, + { + id: 'section-4', + children: ( + <> + <Heading level={2}>Section 4</Heading> + <div> + Vitae facere ipsa eum sunt debitis veritatis dolorem labore qui. + Dolores recusandae omnis aut. Repudiandae quia neque porro in + blanditiis. A atque minima fugit. Totam quidem voluptas natus velit + at. + </div> + </> + ), + }, +]; diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx index 7c97400..0336b7a 100644 --- a/src/components/templates/sectioned/sectioned-layout.stories.tsx +++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx @@ -1,6 +1,7 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; import { LayoutBase } from '../layout/layout.stories'; import { SectionedLayout as SectionedLayoutComponent } from './sectioned-layout'; +import { sections } from './sectioned-layout.fixtures'; /** * SectionedLayout - Storybook Meta @@ -48,29 +49,6 @@ const Template: ComponentStory<typeof SectionedLayoutComponent> = (args) => ( <SectionedLayoutComponent {...args} /> ); -const sections = [ - { - title: 'Section 1', - content: - 'Qui suscipit ea et aut dicta. Quia ut dignissimos. Sapiente beatae voluptatem quis et. Nemo vitae magni. Nihil iste officia est sed esse molestiae doloribus. Quia temporibus nobis ea fuga quis incidunt doloribus eaque.', - }, - { - title: 'Section 2', - content: - 'Reprehenderit aut magnam ut quos. Voluptatibus beatae et. Earum non atque voluptatum illum rem distinctio repellat.', - }, - { - title: 'Section 3', - content: - 'Placeat rem dolores dolore illum earum officia dolore. Ut est ducimus. Officia eveniet pariatur ut laboriosam voluptatibus aut doloremque natus quis.', - }, - { - title: 'Section 4', - content: - 'Vitae facere ipsa eum sunt debitis veritatis dolorem labore qui. Dolores recusandae omnis aut. Repudiandae quia neque porro in blanditiis. A atque minima fugit. Totam quidem voluptas natus velit at.', - }, -]; - /** * Sectioned Layout Stories - Default */ diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx index 2370337..372b0fb 100644 --- a/src/components/templates/sectioned/sectioned-layout.test.tsx +++ b/src/components/templates/sectioned/sectioned-layout.test.tsx @@ -1,31 +1,10 @@ import { describe, expect, it } from '@jest/globals'; -import { BreadcrumbList } from 'schema-dts'; -import { render, screen } from '../../../../tests/utils'; +import type { BreadcrumbList } from 'schema-dts'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { SectionedLayout } from './sectioned-layout'; +import { sections } from './sectioned-layout.fixtures'; const breadcrumbSchema: BreadcrumbList['itemListElement'][] = []; -const sections = [ - { - title: 'Section 1', - content: - 'Qui suscipit ea et aut dicta. Quia ut dignissimos. Sapiente beatae voluptatem quis et. Nemo vitae magni. Nihil iste officia est sed esse molestiae doloribus. Quia temporibus nobis ea fuga quis incidunt doloribus eaque.', - }, - { - title: 'Section 2', - content: - 'Reprehenderit aut magnam ut quos. Voluptatibus beatae et. Earum non atque voluptatum illum rem distinctio repellat.', - }, - { - title: 'Section 3', - content: - 'Placeat rem dolores dolore illum earum officia dolore. Ut est ducimus. Officia eveniet pariatur ut laboriosam voluptatibus aut doloremque natus quis.', - }, - { - title: 'Section 4', - content: - 'Vitae facere ipsa eum sunt debitis veritatis dolorem labore qui. Dolores recusandae omnis aut. Repudiandae quia neque porro in blanditiis. A atque minima fugit. Totam quidem voluptas natus velit at.', - }, -]; describe('SectionedLayout', () => { it('renders the correct number of section', () => { @@ -35,8 +14,8 @@ describe('SectionedLayout', () => { sections={sections} /> ); - expect(screen.getAllByRole('heading', { name: /^Section/ })).toHaveLength( - sections.length - ); + expect( + rtlScreen.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 a307688..6d58e83 100644 --- a/src/components/templates/sectioned/sectioned-layout.tsx +++ b/src/components/templates/sectioned/sectioned-layout.tsx @@ -1,9 +1,9 @@ import Script from 'next/script'; -import { FC } from 'react'; -import { BreadcrumbList } from 'schema-dts'; +import type { FC } from 'react'; +import type { BreadcrumbList } from 'schema-dts'; import { Section, type SectionProps, type SectionVariant } from '../../atoms'; -export type PageSection = Pick<SectionProps, 'content' | 'title'>; +export type PageSection = Required<Pick<SectionProps, 'children' | 'id'>>; export type SectionedLayoutProps = { /** @@ -25,27 +25,23 @@ export const SectionedLayout: FC<SectionedLayoutProps> = ({ breadcrumbSchema, sections, }) => { - const getSections = (items: SectionProps[]) => { - return items.map((section, index) => { + const getSections = (items: PageSection[]) => + items.map((section, index) => { const variant: SectionVariant = index % 2 ? 'light' : 'dark'; const isLastSection = index === items.length - 1; return ( - <Section - content={section.content} - key={`section-${index}`} - title={section.title} - variant={variant} - withBorder={!isLastSection} - /> + <Section hasBorder={!isLastSection} key={section.id} variant={variant}> + {section.children} + </Section> ); }); - }; return ( <> <Script dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} + // eslint-disable-next-line react/jsx-no-literals -- Id allowed. id="schema-breadcrumb" type="application/ld+json" /> |