From 94a8e31f25ed3d92f9eb808e3264bd4ac8c039c7 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 21 Apr 2022 18:12:29 +0200 Subject: chore: add a PostsList component --- .../organisms/layout/posts-list.stories.tsx | 181 +++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 src/components/organisms/layout/posts-list.stories.tsx (limited to 'src/components/organisms/layout/posts-list.stories.tsx') diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx new file mode 100644 index 0000000..783d333 --- /dev/null +++ b/src/components/organisms/layout/posts-list.stories.tsx @@ -0,0 +1,181 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import PostsList, { type Post } from './posts-list'; + +/** + * PostsList - Storybook Meta + */ +export default { + title: 'Organisms/Layout/PostsList', + component: PostsList, + args: { + byYear: false, + }, + argTypes: { + byYear: { + control: { + type: 'boolean', + }, + description: 'True to display the posts by year.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + posts: { + description: 'The posts data.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + titleLevel: { + control: { + type: 'number', + min: 1, + max: 6, + }, + description: 'The title level (hn).', + table: { + category: 'Options', + defaultValue: { summary: 2 }, + }, + type: { + name: 'number', + required: false, + }, + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const posts: Post[] = [ + { + excerpt: + 'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.', + id: 'post-1', + meta: { + publication: { + name: 'Published on:', + value: '2022-02-26T00:42:02', + }, + readingTime: { name: 'Reading time:', value: '5 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 1 + , + + Cat 2 + , + ], + }, + comments: { name: 'Comments:', value: '1 comment' }, + }, + title: 'Ratione velit fuga', + url: '#', + cover: { + alt: 'cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, + }, + }, + { + excerpt: + 'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.', + id: 'post-2', + meta: { + publication: { + name: 'Published on:', + value: '2022-02-20T10:40:00', + }, + readingTime: { name: 'Reading time:', value: '8 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 2 + , + ], + }, + comments: { name: 'Comments:', value: '0 comments' }, + }, + title: 'Debitis laudantium laudantium', + url: '#', + }, + { + excerpt: + 'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.', + id: 'post-3', + meta: { + publication: { + name: 'Published on:', + value: '2021-12-20T15:12:02', + }, + readingTime: { name: 'Reading time:', value: '3 minutes' }, + categories: { + name: 'Categories:', + value: [ + + Cat 1 + , + ], + }, + comments: { name: 'Comments:', value: '3 comments' }, + }, + title: 'Quaerat ut corporis', + url: '#', + cover: { + alt: 'cover', + height: 480, + src: 'http://placeimg.com/640/480', + width: 640, + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, + }, + }, +]; + +/** + * PostsList Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + posts, +}; + +/** + * PostsList Stories - By years + */ +export const ByYears = Template.bind({}); +ByYears.args = { + posts, + byYear: true, +}; + +/** + * PostsList Stories - No results + */ +export const NoResults = Template.bind({}); +NoResults.args = { + posts: [], +}; -- cgit v1.2.3 From 8a6f09b564d5d2f02d0a2605f6b52070a910aaa3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 25 Apr 2022 12:57:12 +0200 Subject: chore: add a PageLayout component --- src/components/atoms/layout/sidebar.module.scss | 5 + src/components/atoms/layout/sidebar.tsx | 6 +- src/components/molecules/layout/meta.module.scss | 17 + src/components/molecules/layout/meta.tsx | 14 +- .../molecules/nav/breadcrumb.stories.tsx | 13 + src/components/molecules/nav/breadcrumb.tsx | 22 +- .../organisms/layout/comment.stories.tsx | 10 - src/components/organisms/layout/header.module.scss | 2 +- .../organisms/layout/posts-list.module.scss | 11 +- .../organisms/layout/posts-list.stories.tsx | 7 + .../organisms/layout/summary.module.scss | 2 + src/components/templates/layout/layout.module.scss | 1 - .../templates/page/page-layout.module.scss | 85 ++++ .../templates/page/page-layout.stories.tsx | 520 +++++++++++++++++++++ src/components/templates/page/page-layout.test.tsx | 90 ++++ src/components/templates/page/page-layout.tsx | 166 +++++++ src/styles/abstracts/_placeholders.scss | 1 + src/styles/abstracts/placeholders/_layout.scss | 25 + src/utils/helpers/format.ts | 28 +- src/utils/hooks/use-is-mounted.tsx | 19 + 20 files changed, 1019 insertions(+), 25 deletions(-) create mode 100644 src/components/molecules/layout/meta.module.scss create mode 100644 src/components/templates/page/page-layout.module.scss create mode 100644 src/components/templates/page/page-layout.stories.tsx create mode 100644 src/components/templates/page/page-layout.test.tsx create mode 100644 src/components/templates/page/page-layout.tsx create mode 100644 src/styles/abstracts/placeholders/_layout.scss create mode 100644 src/utils/hooks/use-is-mounted.tsx (limited to 'src/components/organisms/layout/posts-list.stories.tsx') diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/layout/sidebar.module.scss index da2acbe..5d36f18 100644 --- a/src/components/atoms/layout/sidebar.module.scss +++ b/src/components/atoms/layout/sidebar.module.scss @@ -5,3 +5,8 @@ margin-top: fun.convert-px(-2); } } + +.body { + position: sticky; + top: var(--spacing-xs); +} diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx index 194ed9f..d13cc0d 100644 --- a/src/components/atoms/layout/sidebar.tsx +++ b/src/components/atoms/layout/sidebar.tsx @@ -18,7 +18,11 @@ export type SidebarProps = { * Render an aside element. */ const Sidebar: FC = ({ children, className = '' }) => { - return ; + return ( + + ); }; export default Sidebar; diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss new file mode 100644 index 0000000..f7cc55b --- /dev/null +++ b/src/components/molecules/layout/meta.module.scss @@ -0,0 +1,17 @@ +@use "@styles/abstracts/mixins" as mix; + +.list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + + @include mix.media("screen") { + @include mix.dimensions("sm") { + display: flex; + flex-flow: column nowrap; + } + } +} + +.value { + word-break: break-all; +} diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx index fcce473..d05396e 100644 --- a/src/components/molecules/layout/meta.tsx +++ b/src/components/molecules/layout/meta.tsx @@ -3,6 +3,7 @@ import DescriptionList, { type DescriptionListItem, } from '@components/atoms/lists/description-list'; import { FC, ReactNode } from 'react'; +import styles from './meta.module.scss'; export type MetaItem = { /** @@ -23,7 +24,7 @@ export type MetaProps = { /** * Set additional classnames to the meta wrapper. */ - className?: string; + className?: DescriptionListProps['className']; /** * The meta data. */ @@ -43,7 +44,7 @@ export type MetaProps = { * * Renders the page metadata. */ -const Meta: FC = ({ data, ...props }) => { +const Meta: FC = ({ className, data, ...props }) => { /** * Transform the metadata to description list item format. * @@ -68,7 +69,14 @@ const Meta: FC = ({ data, ...props }) => { return listItems; }; - return ; + return ( + + ); }; export default Meta; diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx index 500ae6c..e26b480 100644 --- a/src/components/molecules/nav/breadcrumb.stories.tsx +++ b/src/components/molecules/nav/breadcrumb.stories.tsx @@ -22,6 +22,19 @@ export default { required: false, }, }, + itemClassName: { + control: { + type: 'text', + }, + table: { + category: 'Styles', + }, + description: 'Set additional classnames to the breadcrumb items.', + type: { + name: 'string', + required: false, + }, + }, items: { description: 'The breadcrumb items.', type: { diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx index 6dc86a0..d184d65 100644 --- a/src/components/molecules/nav/breadcrumb.tsx +++ b/src/components/molecules/nav/breadcrumb.tsx @@ -26,6 +26,10 @@ export type BreadcrumbProps = { * Set additional classnames to the nav element. */ className?: string; + /** + * Set additional classnames to the breadcrumb items. + */ + itemClassName?: string; /** * The breadcrumb items */ @@ -37,9 +41,19 @@ export type BreadcrumbProps = { * * Render a breadcrumb navigation. */ -const Breadcrumb: FC = ({ items, ...props }) => { +const Breadcrumb: FC = ({ + itemClassName = '', + items, + ...props +}) => { const intl = useIntl(); + const ariaLabel = intl.formatMessage({ + defaultMessage: 'Breadcrumb', + description: 'Breadcrumb: an accessible name for the breadcrumb nav.', + id: '28nnDY', + }); + /** * Retrieve the breadcrumb list items. * @@ -49,12 +63,12 @@ const Breadcrumb: FC = ({ items, ...props }) => { const getListItems = (list: BreadcrumbItem[]): JSX.Element[] => { return list.map((item, index) => { const isLastItem = index === list.length - 1; - const itemClassnames = isLastItem + const itemStyles = isLastItem ? `${styles.item} screen-reader-text` : styles.item; return ( -
  • +
  • {isLastItem ? item.name : {item.name}}
    • ); @@ -96,7 +110,7 @@ const Breadcrumb: FC = ({ items, ...props }) => { type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> -