diff options
Diffstat (limited to 'src/components/molecules/layout')
6 files changed, 79 insertions, 59 deletions
diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx index 48c8c17..994e888 100644 --- a/src/components/molecules/layout/page-footer.stories.tsx +++ b/src/components/molecules/layout/page-footer.stories.tsx @@ -1,4 +1,6 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Link } from '../../atoms'; +import { MetaItem, MetaList } from '../meta-list'; import { PageFooter as PageFooterComponent } from './page-footer'; /** @@ -39,22 +41,17 @@ const Template: ComponentStory<typeof PageFooterComponent> = (args) => ( <PageFooterComponent {...args} /> ); -const meta = [ - { - id: 'more-about', - label: 'More posts about:', - value: ( - <a key="topic-1" href="#topic1"> - Topic name - </a> - ), - }, -]; - /** * Page Footer Stories - With meta */ export const PageFooter = Template.bind({}); PageFooter.args = { - meta, + children: ( + <MetaList> + <MetaItem + label="More posts about:" + value={<Link href="#topic1">Topic name</Link>} + /> + </MetaList> + ), }; diff --git a/src/components/molecules/layout/page-footer.test.tsx b/src/components/molecules/layout/page-footer.test.tsx index 7f0bcd5..dbd20f5 100644 --- a/src/components/molecules/layout/page-footer.test.tsx +++ b/src/components/molecules/layout/page-footer.test.tsx @@ -1,10 +1,10 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { PageFooter } from './page-footer'; describe('PageFooter', () => { it('renders a footer element', () => { render(<PageFooter />); - expect(screen.getByRole('contentinfo')).toBeInTheDocument(); + expect(rtlScreen.getByRole('contentinfo')).toBeInTheDocument(); }); }); diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx index a93fced..e0ce2ef 100644 --- a/src/components/molecules/layout/page-footer.tsx +++ b/src/components/molecules/layout/page-footer.tsx @@ -1,12 +1,11 @@ -import type { FC } from 'react'; +import type { FC, ReactNode } from 'react'; import { Footer, type FooterProps } from '../../atoms'; -import { MetaList, type MetaItemData } from '../meta-list'; export type PageFooterProps = Omit<FooterProps, 'children'> & { /** - * The footer metadata. + * The footer contents. */ - meta?: MetaItemData[]; + children?: ReactNode; }; /** @@ -14,8 +13,6 @@ export type PageFooterProps = Omit<FooterProps, 'children'> & { * * Render a footer to display page meta. */ -export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => ( - <Footer {...props}> - {meta ? <MetaList hasInlinedValues items={meta} /> : null} - </Footer> +export const PageFooter: FC<PageFooterProps> = ({ children, ...props }) => ( + <Footer {...props}>{children}</Footer> ); diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx index 54d5fe8..97eae5a 100644 --- a/src/components/molecules/layout/page-header.stories.tsx +++ b/src/components/molecules/layout/page-header.stories.tsx @@ -1,4 +1,5 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { MetaItem, MetaList } from '../meta-list'; import { PageHeader } from './page-header'; /** @@ -62,32 +63,6 @@ const Template: ComponentStory<typeof PageHeader> = (args) => ( <PageHeader {...args} /> ); -const meta = [ - { id: 'publication-date', label: 'Published on:', value: '2022-04-09' }, - { - id: 'thematics', - label: 'Thematics:', - value: [ - { - id: 'cat-1', - value: ( - <a key="category1" href="#cat1"> - Category 1 - </a> - ), - }, - { - id: 'cat-2', - value: ( - <a key="category2" href="#cat2"> - Category 2 - </a> - ), - }, - ], - }, -]; - /** * Page Header Stories - Default */ @@ -111,7 +86,33 @@ WithIntro.args = { */ export const WithMeta = Template.bind({}); WithMeta.args = { - meta, + meta: ( + <MetaList> + <MetaItem isInline label="Published on:" value="2022-04-09" /> + <MetaItem + isInline + label="Thematics:" + value={[ + { + id: 'cat-1', + value: ( + <a key="category1" href="#cat1"> + Category 1 + </a> + ), + }, + { + id: 'cat-2', + value: ( + <a key="category2" href="#cat2"> + Category 2 + </a> + ), + }, + ]} + /> + </MetaList> + ), title: 'Excepturi nesciunt illum', }; @@ -122,6 +123,32 @@ export const WithIntroAndMeta = Template.bind({}); WithIntroAndMeta.args = { intro: 'Minima dolor nihil. Velit atque odit totam enim. Quisquam reprehenderit ut et inventore et nihil libero exercitationem. Cumque similique magni placeat et. Et sed est cumque labore. Et quia similique.', - meta, + meta: ( + <MetaList> + <MetaItem isInline label="Published on:" value="2022-04-09" /> + <MetaItem + isInline + label="Thematics:" + value={[ + { + id: 'cat-1', + value: ( + <a key="category1" href="#cat1"> + Category 1 + </a> + ), + }, + { + id: 'cat-2', + value: ( + <a key="category2" href="#cat2"> + Category 2 + </a> + ), + }, + ]} + /> + </MetaList> + ), title: 'Excepturi nesciunt illum', }; diff --git a/src/components/molecules/layout/page-header.test.tsx b/src/components/molecules/layout/page-header.test.tsx index 1f1a139..82aa7e1 100644 --- a/src/components/molecules/layout/page-header.test.tsx +++ b/src/components/molecules/layout/page-header.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; +import { render, screen as rtlScreen } from '../../../../tests/utils'; import { PageHeader } from './page-header'; const title = 'Non nemo amet'; @@ -9,11 +9,13 @@ const intro = describe('PageHeader', () => { it('renders a title', () => { render(<PageHeader title={title} intro={intro} />); - expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(title); + expect(rtlScreen.getByRole('heading', { level: 1 })).toHaveTextContent( + title + ); }); it('renders an introduction', () => { render(<PageHeader title={title} intro={intro} />); - expect(screen.getByText(intro)).toBeInTheDocument(); + expect(rtlScreen.getByText(intro)).toBeInTheDocument(); }); }); diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx index ea0dd2c..e70d66c 100644 --- a/src/components/molecules/layout/page-header.tsx +++ b/src/components/molecules/layout/page-header.tsx @@ -1,6 +1,5 @@ import type { FC, ReactNode } from 'react'; import { Header, Heading } from '../../atoms'; -import { MetaList, type MetaItemData } from '../meta-list'; import styles from './page-header.module.scss'; export type PageHeaderProps = { @@ -15,7 +14,7 @@ export type PageHeaderProps = { /** * The page metadata. */ - meta?: MetaItemData[]; + meta?: ReactNode; /** * The page title. */ @@ -55,9 +54,7 @@ export const PageHeader: FC<PageHeaderProps> = ({ <Heading className={styles.title} level={1}> {title} </Heading> - {meta ? ( - <MetaList className={styles.meta} hasInlinedItems items={meta} /> - ) : null} + {meta} {intro ? getIntro() : null} </div> </Header> |