aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/atoms/layout/section.test.tsx18
-rw-r--r--src/components/atoms/layout/section.tsx54
-rw-r--r--src/components/atoms/layout/section/index.ts1
-rw-r--r--src/components/atoms/layout/section/section.module.scss (renamed from src/components/atoms/layout/section.module.scss)12
-rw-r--r--src/components/atoms/layout/section/section.stories.tsx (renamed from src/components/atoms/layout/section.stories.tsx)71
-rw-r--r--src/components/atoms/layout/section/section.test.tsx27
-rw-r--r--src/components/atoms/layout/section/section.tsx50
-rw-r--r--src/components/templates/sectioned/sectioned-layout.fixtures.tsx59
-rw-r--r--src/components/templates/sectioned/sectioned-layout.stories.tsx26
-rw-r--r--src/components/templates/sectioned/sectioned-layout.test.tsx33
-rw-r--r--src/components/templates/sectioned/sectioned-layout.tsx22
-rw-r--r--src/pages/index.tsx29
12 files changed, 197 insertions, 205 deletions
diff --git a/src/components/atoms/layout/section.test.tsx b/src/components/atoms/layout/section.test.tsx
deleted file mode 100644
index 6a2805d..0000000
--- a/src/components/atoms/layout/section.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Section } from './section';
-
-const title = 'Section title';
-const content = 'Section content.';
-
-describe('Section', () => {
- it('renders a title (h2)', () => {
- render(<Section title={title} content={content} />);
- expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(title);
- });
-
- it('renders a content', () => {
- render(<Section title={title} content={content} />);
- expect(screen.getByText(content)).toBeInTheDocument();
- });
-});
diff --git a/src/components/atoms/layout/section.tsx b/src/components/atoms/layout/section.tsx
deleted file mode 100644
index 107e80a..0000000
--- a/src/components/atoms/layout/section.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
-import { Heading } from '../headings';
-import styles from './section.module.scss';
-
-export type SectionVariant = 'dark' | 'light';
-
-export type SectionProps = Omit<
- HTMLAttributes<HTMLElement>,
- 'children' | 'content'
-> & {
- /**
- * The section content.
- */
- content: ReactNode | ReactNode[];
- /**
- * The section title.
- */
- title: string;
- /**
- * The section variant.
- */
- variant?: SectionVariant;
- /**
- * Add a border at the bottom of the section. Default: true.
- */
- withBorder?: boolean;
-};
-
-/**
- * Section component
- *
- * Render a section element.
- */
-export const Section: FC<SectionProps> = ({
- className = '',
- content,
- title,
- variant = 'dark',
- withBorder = true,
- ...props
-}) => {
- const borderClass = withBorder ? styles[`wrapper--borders`] : '';
- const variantClass = styles[`wrapper--${variant}`];
- const sectionClass = `${styles.wrapper} ${borderClass} ${variantClass} ${className}`;
-
- return (
- <section {...props} className={sectionClass}>
- <Heading level={2} className={styles.title}>
- {title}
- </Heading>
- <div className={styles.body}>{content}</div>
- </section>
- );
-};
diff --git a/src/components/atoms/layout/section/index.ts b/src/components/atoms/layout/section/index.ts
new file mode 100644
index 0000000..2786cf0
--- /dev/null
+++ b/src/components/atoms/layout/section/index.ts
@@ -0,0 +1 @@
+export * from './section';
diff --git a/src/components/atoms/layout/section.module.scss b/src/components/atoms/layout/section/section.module.scss
index 8a33848..771b8e3 100644
--- a/src/components/atoms/layout/section.module.scss
+++ b/src/components/atoms/layout/section/section.module.scss
@@ -1,9 +1,10 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/placeholders";
+@use "../../../../styles/abstracts/functions" as fun;
+@use "../../../../styles/abstracts/placeholders";
.wrapper {
@extend %grid;
+ row-gap: var(--spacing-sm);
padding: var(--spacing-md) 0;
&--borders {
@@ -17,9 +18,8 @@
&--light {
background: var(--color-bg);
}
-}
-.body,
-.title {
- grid-column: 2;
+ > * {
+ grid-column: 2;
+ }
}
diff --git a/src/components/atoms/layout/section.stories.tsx b/src/components/atoms/layout/section/section.stories.tsx
index 8ab2729..0a3388b 100644
--- a/src/components/atoms/layout/section.stories.tsx
+++ b/src/components/atoms/layout/section/section.stories.tsx
@@ -1,4 +1,5 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Heading } from '../../headings';
import { Section } from './section';
/**
@@ -8,41 +9,29 @@ export default {
title: 'Atoms/Layout/Section',
component: Section,
args: {
- variant: 'dark',
- withBorder: true,
+ hasBorder: true,
+ variant: 'light',
},
argTypes: {
- className: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the section element.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- content: {
- control: {
- type: 'text',
- },
+ children: {
description: 'The section content.',
type: {
- name: 'string',
+ name: 'function',
required: true,
},
},
- title: {
+ hasBorder: {
control: {
- type: 'text',
+ type: 'boolean',
+ },
+ description: 'Add a border at the bottom of the section.',
+ table: {
+ category: 'Styles',
+ defaultValue: { summary: false },
},
- description: 'The section title.',
type: {
- name: 'string',
- required: true,
+ name: 'boolean',
+ required: false,
},
},
variant: {
@@ -60,20 +49,6 @@ export default {
required: false,
},
},
- withBorder: {
- control: {
- type: 'boolean',
- },
- description: 'Add a border at the bottom of the section.',
- table: {
- category: 'Styles',
- defaultValue: { summary: true },
- },
- type: {
- name: 'boolean',
- required: false,
- },
- },
},
} as ComponentMeta<typeof Section>;
@@ -86,8 +61,12 @@ const Template: ComponentStory<typeof Section> = (args) => (
*/
export const Light = Template.bind({});
Light.args = {
- title: 'A title',
- content: 'The content.',
+ children: (
+ <>
+ <Heading level={2}>A section title</Heading>
+ <div>The body</div>
+ </>
+ ),
variant: 'light',
};
@@ -96,7 +75,11 @@ Light.args = {
*/
export const Dark = Template.bind({});
Dark.args = {
- title: 'A title',
- content: 'The content.',
+ children: (
+ <>
+ <Heading level={2}>A section title</Heading>
+ <div>The body</div>
+ </>
+ ),
variant: 'dark',
};
diff --git a/src/components/atoms/layout/section/section.test.tsx b/src/components/atoms/layout/section/section.test.tsx
new file mode 100644
index 0000000..85305c0
--- /dev/null
+++ b/src/components/atoms/layout/section/section.test.tsx
@@ -0,0 +1,27 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import { Section } from './section';
+
+const content = 'Section content.';
+
+describe('Section', () => {
+ it('renders its body', () => {
+ render(<Section>{content}</Section>);
+ expect(rtlScreen.getByText(content)).toBeInTheDocument();
+ });
+
+ it('renders a section with border', () => {
+ render(<Section hasBorder>{content}</Section>);
+ expect(rtlScreen.getByText(content)).toHaveClass('wrapper--borders');
+ });
+
+ it('renders a light section', () => {
+ render(<Section variant="light">{content}</Section>);
+ expect(rtlScreen.getByText(content)).toHaveClass('wrapper--light');
+ });
+
+ it('renders a dark section', () => {
+ render(<Section variant="dark">{content}</Section>);
+ expect(rtlScreen.getByText(content)).toHaveClass('wrapper--dark');
+ });
+});
diff --git a/src/components/atoms/layout/section/section.tsx b/src/components/atoms/layout/section/section.tsx
new file mode 100644
index 0000000..63c658a
--- /dev/null
+++ b/src/components/atoms/layout/section/section.tsx
@@ -0,0 +1,50 @@
+import {
+ forwardRef,
+ type ForwardRefRenderFunction,
+ type HTMLAttributes,
+ type ReactNode,
+} from 'react';
+import styles from './section.module.scss';
+
+export type SectionVariant = 'dark' | 'light';
+
+export type SectionProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+ /**
+ * The section content.
+ */
+ children: ReactNode | ReactNode[];
+ /**
+ * Add a border at the bottom of the section.
+ *
+ * @default false
+ */
+ hasBorder?: boolean;
+ /**
+ * The section variant.
+ *
+ * @default 'light'
+ */
+ variant?: SectionVariant;
+};
+
+const SectionWithRef: ForwardRefRenderFunction<HTMLElement, SectionProps> = (
+ { children, className = '', hasBorder = false, variant = 'light', ...props },
+ ref
+) => {
+ const borderClass = hasBorder ? styles[`wrapper--borders`] : '';
+ const variantClass = styles[`wrapper--${variant}`];
+ const sectionClass = `${styles.wrapper} ${borderClass} ${variantClass} ${className}`;
+
+ return (
+ <section {...props} className={sectionClass} ref={ref}>
+ {children}
+ </section>
+ );
+};
+
+/**
+ * Section component
+ *
+ * Render a section element with a heading and a body.
+ */
+export const Section = forwardRef(SectionWithRef);
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"
/>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 816e44e..c06fb7e 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,7 +2,7 @@ import type { MDXComponents } from 'mdx/types';
import type { GetStaticProps } from 'next';
import Head from 'next/head';
import Script from 'next/script';
-import { type FC, type ReactNode, isValidElement } from 'react';
+import type { FC } from 'react';
import { useIntl } from 'react-intl';
import FeedIcon from '../assets/images/icon-feed.svg';
import {
@@ -226,24 +226,15 @@ const StyledColumns = (props: ColumnsProps) => (
* @param {ReactNode[]} obj.children - The section body.
* @returns {JSX.Element} A section element.
*/
-const getSection = ({
+const HomePageSection: FC<SectionProps> = ({
children,
+ hasBorder = true,
variant,
-}: {
- children: ReactNode[];
- variant: SectionProps['variant'];
-}): JSX.Element => {
- const [headingEl, ...content] = children;
-
- return (
- <Section
- className={styles.section}
- content={content}
- title={isValidElement(headingEl) ? headingEl.props.children : ''}
- variant={variant}
- />
- );
-};
+}) => (
+ <Section className={styles.section} hasBorder={hasBorder} variant={variant}>
+ {children}
+ </Section>
+);
type HomeProps = {
recentPosts: ArticleCard[];
@@ -277,7 +268,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
});
const listClass = `${styles.list} ${styles['list--cards']}`;
- return <CardsList items={posts} titleLevel={3} className={listClass} />;
+ return <CardsList className={listClass} items={posts} titleLevel={3} />;
};
const components: MDXComponents = {
@@ -289,7 +280,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
LibreLinks,
MoreLinks,
RecentPosts: getRecentPosts,
- Section: getSection,
+ Section: HomePageSection,
ShaarliLink,
};
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-26 23:06:42 +0000