aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/templates')
-rw-r--r--src/components/templates/index.ts3
-rw-r--r--src/components/templates/layout/index.ts1
-rw-r--r--src/components/templates/layout/layout.stories.tsx2
-rw-r--r--src/components/templates/layout/layout.test.tsx2
-rw-r--r--src/components/templates/layout/layout.tsx50
-rw-r--r--src/components/templates/page/index.ts1
-rw-r--r--src/components/templates/page/page-layout.stories.tsx10
-rw-r--r--src/components/templates/page/page-layout.test.tsx2
-rw-r--r--src/components/templates/page/page-layout.tsx59
-rw-r--r--src/components/templates/sectioned/index.ts1
-rw-r--r--src/components/templates/sectioned/sectioned-layout.stories.tsx2
-rw-r--r--src/components/templates/sectioned/sectioned-layout.test.tsx2
-rw-r--r--src/components/templates/sectioned/sectioned-layout.tsx17
13 files changed, 75 insertions, 77 deletions
diff --git a/src/components/templates/index.ts b/src/components/templates/index.ts
new file mode 100644
index 0000000..ae34898
--- /dev/null
+++ b/src/components/templates/index.ts
@@ -0,0 +1,3 @@
+export * from './layout';
+export * from './page';
+export * from './sectioned';
diff --git a/src/components/templates/layout/index.ts b/src/components/templates/layout/index.ts
new file mode 100644
index 0000000..5d15fe1
--- /dev/null
+++ b/src/components/templates/layout/index.ts
@@ -0,0 +1 @@
+export * from './layout';
diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
index 4666b07..67ad008 100644
--- a/src/components/templates/layout/layout.stories.tsx
+++ b/src/components/templates/layout/layout.stories.tsx
@@ -1,5 +1,5 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import LayoutComponent from './layout';
+import { Layout as LayoutComponent } from './layout';
/**
* Layout - Storybook Meta
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
index 6b3818e..53d16e3 100644
--- a/src/components/templates/layout/layout.test.tsx
+++ b/src/components/templates/layout/layout.test.tsx
@@ -1,5 +1,5 @@
import { render, screen } from '../../../../tests/utils';
-import Layout from './layout';
+import { Layout } from './layout';
const body =
'Sit dolorem eveniet. Sit sit odio nemo vitae corrupti modi sint est rerum. Pariatur quidem maiores distinctio. Quia et illum aspernatur est cum.';
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index cf35b5c..beb6562 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -2,21 +2,29 @@ import Script from 'next/script';
import { FC, ReactElement, ReactNode, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import { Person, SearchAction, WebSite, WithContext } from 'schema-dts';
-import { type NextPageWithLayoutOptions } from '../../../types/app';
-import useRouteChange from '../../../utils/hooks/use-route-change';
-import useScrollPosition from '../../../utils/hooks/use-scroll-position';
-import useSettings from '../../../utils/hooks/use-settings';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Career from '../../atoms/icons/career';
-import CCBySA from '../../atoms/icons/cc-by-sa';
-import ComputerScreen from '../../atoms/icons/computer-screen';
-import Envelop from '../../atoms/icons/envelop';
-import Home from '../../atoms/icons/home';
-import PostsStack from '../../atoms/icons/posts-stack';
-import Main from '../../atoms/layout/main';
-import NoScript from '../../atoms/layout/no-script';
-import Footer, { type FooterProps } from '../../organisms/layout/footer';
-import Header, { type HeaderProps } from '../../organisms/layout/header';
+import { type NextPageWithLayoutOptions } from '../../../types';
+import {
+ useRouteChange,
+ useScrollPosition,
+ useSettings,
+} from '../../../utils/hooks';
+import {
+ ButtonLink,
+ Career,
+ CCBySA,
+ ComputerScreen,
+ Envelop,
+ Home,
+ Main,
+ NoScript,
+ PostsStack,
+} from '../../atoms';
+import {
+ Footer,
+ type FooterProps,
+ Header,
+ type HeaderProps,
+} from '../../organisms';
import photo from '/public/armand-philippot.jpg';
import styles from './layout.module.scss';
@@ -44,7 +52,7 @@ export type LayoutProps = Pick<HeaderProps, 'isHome'> & {
*
* Render the base layout used by all pages.
*/
-const Layout: FC<LayoutProps> = ({
+export const Layout: FC<LayoutProps> = ({
children,
withExtraPadding = false,
isHome,
@@ -203,14 +211,14 @@ const Layout: FC<LayoutProps> = ({
return (
<>
<Script
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
id="schema-layout"
type="application/ld+json"
- dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
/>
<Script
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(brandingSchema) }}
id="schema-branding"
type="application/ld+json"
- dangerouslySetInnerHTML={{ __html: JSON.stringify(brandingSchema) }}
/>
<noscript>
<div className={styles['noscript-spacing']}></div>
@@ -239,11 +247,11 @@ const Layout: FC<LayoutProps> = ({
</article>
</Main>
<Footer
+ backToTopClassName={backToTopClassName}
+ className={styles.footer}
copyright={copyrightData}
navItems={footerNav}
topId="top"
- backToTopClassName={backToTopClassName}
- className={styles.footer}
/>
<noscript>
<NoScript message={noScript} position="top" />
@@ -265,5 +273,3 @@ export const getLayout = (
) => {
return <Layout {...props}>{page}</Layout>;
};
-
-export default Layout;
diff --git a/src/components/templates/page/index.ts b/src/components/templates/page/index.ts
new file mode 100644
index 0000000..cdd5a64
--- /dev/null
+++ b/src/components/templates/page/index.ts
@@ -0,0 +1 @@
+export * from './page-layout';
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 5fc5063..146204e 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,14 +1,10 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import ButtonLink from '../../atoms/buttons/button-link';
-import Heading from '../../atoms/headings/heading';
-import Link from '../../atoms/links/link';
+import { ButtonLink, Heading, Link } from '../../atoms';
+import { LinksListWidget, PostsList, Sharing } from '../../organisms';
import { comments } from '../../organisms/layout/comments-list.fixture';
-import PostsList from '../../organisms/layout/posts-list';
import { posts } from '../../organisms/layout/posts-list.fixture';
-import LinksListWidget from '../../organisms/widgets/links-list-widget';
-import Sharing from '../../organisms/widgets/sharing';
import { LayoutBase } from '../layout/layout.stories';
-import PageLayoutComponent from './page-layout';
+import { PageLayout as PageLayoutComponent } from './page-layout';
/**
* PageLayout - Storybook Meta
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index 316ff58..9293c12 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -1,7 +1,7 @@
import { BreadcrumbList } from 'schema-dts';
import { render, screen } from '../../../../tests/utils';
import { comments } from '../../organisms/layout/comments-list.fixture';
-import PageLayout from './page-layout';
+import { PageLayout } from './page-layout';
const title = 'Incidunt ad earum';
const breadcrumb = [
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 6792724..3c6ff17 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -2,29 +2,26 @@ import Script from 'next/script';
import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
import { BreadcrumbList } from 'schema-dts';
-import { sendComment } from '../../../services/graphql/comments';
-import { SendCommentInput } from '../../../types/graphql/mutations';
-import useIsMounted from '../../../utils/hooks/use-is-mounted';
-import Heading from '../../atoms/headings/heading';
-import Notice, { type NoticeKind } from '../../atoms/layout/notice';
-import Sidebar from '../../atoms/layout/sidebar';
-import { MetaData } from '../../molecules/layout/meta';
-import PageFooter, {
+import { sendComment } from '../../../services/graphql';
+import { SendCommentInput } from '../../../types';
+import { useIsMounted } from '../../../utils/hooks';
+import { Heading, Notice, type NoticeKind, Sidebar } from '../../atoms';
+import {
+ Breadcrumb,
+ type BreadcrumbItem,
+ MetaData,
+ PageFooter,
type PageFooterProps,
-} from '../../molecules/layout/page-footer';
-import PageHeader, {
+ PageHeader,
type PageHeaderProps,
-} from '../../molecules/layout/page-header';
-import Breadcrumb, {
- type BreadcrumbItem,
-} from '../../molecules/nav/breadcrumb';
-import CommentForm, {
+} from '../../molecules';
+import {
+ CommentForm,
type CommentFormProps,
-} from '../../organisms/forms/comment-form';
-import CommentsList, {
+ CommentsList,
type CommentsListProps,
-} from '../../organisms/layout/comments-list';
-import TableOfContents from '../../organisms/widgets/table-of-contents';
+ TableOfContents,
+} from '../../organisms';
import styles from './page-layout.module.scss';
export type PageLayoutProps = {
@@ -91,7 +88,7 @@ export type PageLayoutProps = {
*
* Render the pages layout.
*/
-const PageLayout: FC<PageLayoutProps> = ({
+export const PageLayout: FC<PageLayoutProps> = ({
children,
allowComments = false,
bodyAttributes,
@@ -186,29 +183,29 @@ const PageLayout: FC<PageLayoutProps> = ({
return (
<>
<Script
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
id="schema-breadcrumb"
type="application/ld+json"
- dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
/>
<Breadcrumb
- items={breadcrumb}
className={styles.breadcrumb}
itemClassName={styles.breadcrumb__items}
+ items={breadcrumb}
/>
<PageHeader
- title={title}
+ className={styles.header}
intro={intro}
meta={headerMeta}
- className={styles.header}
+ title={title}
/>
{withToC && (
<Sidebar
- className={`${styles.sidebar} ${styles['sidebar--first']}`}
aria-label={intl.formatMessage({
defaultMessage: 'Table of contents sidebar',
id: 'Q+1GbT',
description: 'PageLayout: accessible name for ToC sidebar',
})}
+ className={`${styles.sidebar} ${styles['sidebar--first']}`}
>
{isMounted && bodyRef.current && (
<TableOfContents wrapper={bodyRef.current} />
@@ -217,10 +214,10 @@ const PageLayout: FC<PageLayoutProps> = ({
)}
{typeof children === 'string' ? (
<div
- ref={bodyRef}
+ {...bodyAttributes}
className={`${styles.body} ${bodyClassName}`}
dangerouslySetInnerHTML={{ __html: children }}
- {...bodyAttributes}
+ ref={bodyRef}
/>
) : (
<div ref={bodyRef} className={`${styles.body} ${bodyClassName}`}>
@@ -231,12 +228,12 @@ const PageLayout: FC<PageLayoutProps> = ({
<PageFooter meta={footerMeta} className={styles.footer} />
)}
<Sidebar
- className={`${styles.sidebar} ${styles['sidebar--last']}`}
aria-label={intl.formatMessage({
defaultMessage: 'Sidebar',
id: 'c556Qo',
description: 'PageLayout: accessible name for the sidebar',
})}
+ className={`${styles.sidebar} ${styles['sidebar--last']}`}
>
{widgets}
</Sidebar>
@@ -253,9 +250,9 @@ const PageLayout: FC<PageLayoutProps> = ({
Notice={
isReplyRef.current === true && (
<Notice
+ className={styles.notice}
kind={status}
message={statusMessage}
- className={styles.notice}
/>
)
}
@@ -280,9 +277,9 @@ const PageLayout: FC<PageLayoutProps> = ({
Notice={
isReplyRef.current === false && (
<Notice
+ className={styles.notice}
kind={status}
message={statusMessage}
- className={styles.notice}
/>
)
}
@@ -293,5 +290,3 @@ const PageLayout: FC<PageLayoutProps> = ({
</>
);
};
-
-export default PageLayout;
diff --git a/src/components/templates/sectioned/index.ts b/src/components/templates/sectioned/index.ts
new file mode 100644
index 0000000..a8c6045
--- /dev/null
+++ b/src/components/templates/sectioned/index.ts
@@ -0,0 +1 @@
+export * from './sectioned-layout';
diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx
index 689f9a7..7c97400 100644
--- a/src/components/templates/sectioned/sectioned-layout.stories.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx
@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { LayoutBase } from '../layout/layout.stories';
-import SectionedLayoutComponent from './sectioned-layout';
+import { SectionedLayout as SectionedLayoutComponent } from './sectioned-layout';
/**
* SectionedLayout - Storybook Meta
diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx
index a7f19cc..204f0d4 100644
--- a/src/components/templates/sectioned/sectioned-layout.test.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.test.tsx
@@ -1,6 +1,6 @@
import { render, screen } from '../../../../tests/utils';
import { BreadcrumbList } from 'schema-dts';
-import SectionedLayout from './sectioned-layout';
+import { SectionedLayout } from './sectioned-layout';
const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
const sections = [
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index 7fcad63..a307688 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -1,12 +1,9 @@
import Script from 'next/script';
import { FC } from 'react';
import { BreadcrumbList } from 'schema-dts';
-import Section, {
- type SectionProps,
- type SectionVariant,
-} from '../../atoms/layout/section';
+import { Section, type SectionProps, type SectionVariant } from '../../atoms';
-export type Section = Pick<SectionProps, 'content' | 'title'>;
+export type PageSection = Pick<SectionProps, 'content' | 'title'>;
export type SectionedLayoutProps = {
/**
@@ -16,7 +13,7 @@ export type SectionedLayoutProps = {
/**
* An array of objects describing each section.
*/
- sections: Section[];
+ sections: PageSection[];
};
/**
@@ -24,7 +21,7 @@ export type SectionedLayoutProps = {
*
* Render a sectioned layout.
*/
-const SectionedLayout: FC<SectionedLayoutProps> = ({
+export const SectionedLayout: FC<SectionedLayoutProps> = ({
breadcrumbSchema,
sections,
}) => {
@@ -35,9 +32,9 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({
return (
<Section
+ content={section.content}
key={`section-${index}`}
title={section.title}
- content={section.content}
variant={variant}
withBorder={!isLastSection}
/>
@@ -48,13 +45,11 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({
return (
<>
<Script
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
id="schema-breadcrumb"
type="application/ld+json"
- dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
/>
{getSections(sections)}
</>
);
};
-
-export default SectionedLayout;
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 07:16:29 +0000