refactor(components): replace Summary component with PostPreview

* rename component to PostPreview because Summary is an HTML element
and it could lead to confusion
* replace `title` and `titleLevel` with `heading` and `headingLvl`
because `title` is a native attribute
* rename `intro` prop to `excerpt`
* extract `cover` from `meta` prop
* rewrite meta type
* extract meta logic into a new component

8 files changed, 39 insertions, 545 deletions

diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts
index 86670e3..552ed27 100644
--- a/src/components/organisms/layout/index.ts
+++ b/src/components/organisms/layout/index.ts
@@ -3,4 +3,3 @@ export * from './comments-list';
 export * from './no-results';
 export * from './overview';
 export * from './posts-list';
-export * from './summary';
diff --git a/src/components/organisms/layout/posts-list.fixture.ts b/src/components/organisms/layout/posts-list.fixture.tsx
index dfb0d97..e1f7a95 100644
--- a/src/components/organisms/layout/posts-list.fixture.ts
+++ b/src/components/organisms/layout/posts-list.fixture.tsx
@@ -1,4 +1,5 @@
-import type { Post } from './posts-list';
+import NextImage from 'next/image';
+import type { PostData } from './posts-list';
 
 export const introPost1 =
   '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.';
@@ -16,46 +17,46 @@ export const cover = {
   width: 640,
 };
 
-export const posts: Post[] = [
+export const posts: PostData[] = [
   {
-    intro: introPost1,
+    cover: <NextImage {...cover} />,
+    excerpt: introPost1,
     id: 'post-1',
     meta: {
-      cover,
-      dates: { publication: '2022-02-26' },
+      publicationDate: '2022-02-26',
       wordsCount: introPost1.split(' ').length,
       thematics: [
         { id: 1, name: 'Cat 1', url: '#' },
         { id: 2, name: 'Cat 2', url: '#' },
       ],
-      commentsCount: 1,
+      comments: { count: 1, postHeading: 'Ratione velit fuga' },
     },
-    title: 'Ratione velit fuga',
+    heading: 'Ratione velit fuga',
     url: '#',
   },
   {
-    intro: introPost2,
+    excerpt: introPost2,
     id: 'post-2',
     meta: {
-      dates: { publication: '2022-02-20' },
+      publicationDate: '2022-02-20',
       wordsCount: introPost2.split(' ').length,
       thematics: [{ id: 2, name: 'Cat 2', url: '#' }],
-      commentsCount: 0,
+      comments: { count: 0, postHeading: 'Debitis laudantium laudantium' },
     },
-    title: 'Debitis laudantium laudantium',
+    heading: 'Debitis laudantium laudantium',
     url: '#',
   },
   {
-    intro: introPost3,
+    cover: <NextImage {...cover} />,
+    excerpt: introPost3,
     id: 'post-3',
     meta: {
-      cover,
-      dates: { publication: '2021-12-20' },
+      publicationDate: '2021-12-20',
       wordsCount: introPost3.split(' ').length,
       thematics: [{ id: 1, name: 'Cat 1', url: '#' }],
-      commentsCount: 3,
+      comments: { count: 3, postHeading: 'Quaerat ut corporis' },
     },
-    title: 'Quaerat ut corporis',
+    heading: 'Quaerat ut corporis',
     url: '#',
   },
 ];
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 36d3c87..40306a6 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -17,18 +17,30 @@ import {
   type RenderPaginationItemAriaLabel,
   type RenderPaginationLink,
 } from '../nav';
+import {
+  PostPreview,
+  type PostPreviewMetaData,
+  type PostPreviewProps,
+} from '../post-preview';
 import { NoResults } from './no-results';
 import styles from './posts-list.module.scss';
-import { Summary, type SummaryProps } from './summary';
 
-export type Post = Omit<SummaryProps, 'titleLevel'> & {
+export type PostData = Pick<
+  PostPreviewProps,
+  'cover' | 'excerpt' | 'heading' | 'url'
+> & {
   /**
    * The post id.
    */
   id: string | number;
+  /**
+   * The post meta.
+   */
+  meta: PostPreviewMetaData &
+    Required<Pick<PostPreviewMetaData, 'publicationDate'>>;
 };
 
-export type YearCollection = Record<string, Post[]>;
+export type YearCollection = Record<string, PostData[]>;
 
 export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
   /**
@@ -54,7 +66,7 @@ export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
   /**
    * The posts data.
    */
-  posts: Post[];
+  posts: PostData[];
   /**
    * Determine if the load more button should be visible.
    */
@@ -72,14 +84,14 @@ export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
 /**
  * Create a collection of posts sorted by year.
  *
- * @param {Posts[]} data - A collection of posts.
+ * @param {PostData[]} data - A collection of posts.
  * @returns {YearCollection} The posts sorted by year.
  */
-const sortPostsByYear = (data: Post[]): YearCollection => {
+const sortPostsByYear = (data: PostData[]): YearCollection => {
   const yearCollection: Partial<YearCollection> = {};
 
   data.forEach((post) => {
-    const postYear = new Date(post.meta.dates.publication)
+    const postYear = new Date(post.meta.publicationDate)
       .getFullYear()
       .toString();
     yearCollection[postYear] = [...(yearCollection[postYear] ?? []), post];
@@ -116,12 +128,12 @@ export const PostsList: FC<PostsListProps> = ({
   /**
    * Retrieve the list of posts.
    *
-   * @param {Posts[]} allPosts - A collection fo posts.
+   * @param {PostData[]} allPosts - A collection fo posts.
    * @param {HeadingLevel} [headingLevel] - The posts heading level (hn).
    * @returns {JSX.Element} The list of posts.
    */
   const getList = (
-    allPosts: Post[],
+    allPosts: PostData[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => (
     <List
@@ -136,7 +148,7 @@ export const PostsList: FC<PostsListProps> = ({
       {allPosts.map(({ id, ...post }) => (
         <Fragment key={id}>
           <ListItem className={styles.item}>
-            <Summary {...post} titleLevel={headingLevel} />
+            <PostPreview {...post} headingLvl={headingLevel} />
           </ListItem>
           {id === lastPostId && (
             <ListItem>
diff --git a/src/components/organisms/layout/summary.fixture.ts b/src/components/organisms/layout/summary.fixture.ts
deleted file mode 100644
index 6f90b4a..0000000
--- a/src/components/organisms/layout/summary.fixture.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SummaryMeta } from './summary';
-
-export const cover = {
-  alt: 'A cover',
-  height: 480,
-  src: 'https://picsum.photos/640/480',
-  width: 640,
-};
-
-export const intro =
-  'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.';
-
-export const meta: SummaryMeta = {
-  dates: { publication: '2022-04-11' },
-  wordsCount: intro.split(' ').length,
-  thematics: [
-    { id: 1, name: 'Cat 1', url: '#' },
-    { id: 2, name: 'Cat 2', url: '#' },
-  ],
-  commentsCount: 1,
-};
-
-export const title = 'Odio odit necessitatibus';
-
-export const url = '#';
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
deleted file mode 100644
index 6e0af6a..0000000
--- a/src/components/organisms/layout/summary.module.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-@use "../../../styles/abstracts/placeholders";
-
-.wrapper {
-  &:hover {
-    .icon {
-      :global {
-        animation: pulse 1.5s ease-in-out 0.2s infinite;
-      }
-    }
-  }
-}
-
-.title {
-  font-size: var(--font-size-2xl);
-}
-
-.intro {
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  :global {
-    a {
-      @extend %link;
-
-      &[hreflang],
-      &.download,
-      &.external {
-        @extend %link-with-icon;
-      }
-
-      &[hreflang] {
-        @extend %link-with-lang;
-      }
-
-      &[hreflang]:not(.download, .external) {
-        --is-icon-hidden: "";
-      }
-
-      &.download {
-        @extend %download-link;
-      }
-
-      &.external {
-        @extend %external-link;
-      }
-
-      &.download,
-      &.external {
-        &:not([hreflang]) {
-          --is-lang-hidden: "";
-        }
-      }
-
-      &.external.download {
-        @extend %external-download-link;
-      }
-    }
-  }
-}
-
-:global([data-theme="light"]) {
-  :local {
-    .intro {
-      :global {
-        a {
-          &.download {
-            @extend %light-download-link;
-          }
-
-          &.external {
-            @extend %light-external-link;
-          }
-        }
-      }
-    }
-  }
-}
-
-:global([data-theme="dark"]) {
-  :local {
-    .intro {
-      :global {
-        a {
-          &.download {
-            @extend %dark-download-link;
-          }
-
-          &.external {
-            @extend %dark-external-link;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
deleted file mode 100644
index fe8b704..0000000
--- a/src/components/organisms/layout/summary.stories.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Summary } from './summary';
-import { cover, intro, meta } from './summary.fixture';
-
-/**
- * Summary - Storybook Meta
- */
-export default {
-  title: 'Organisms/Layout/Summary',
-  component: Summary,
-  args: {
-    titleLevel: 2,
-  },
-  argTypes: {
-    cover: {
-      description: 'The cover data.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'object',
-        required: false,
-        value: {},
-      },
-    },
-    excerpt: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page excerpt.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    meta: {
-      description: 'The page metadata.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page title',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    titleLevel: {
-      control: {
-        type: 'number',
-        min: 1,
-        max: 6,
-      },
-      description: 'The page title level (hn)',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 2 },
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    url: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Summary>;
-
-const Template: ComponentStory<typeof Summary> = (args) => (
-  <Summary {...args} />
-);
-
-/**
- * Summary Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  intro,
-  meta,
-  title: 'Odio odit necessitatibus',
-  url: '#',
-};
-
-/**
- * Summary Stories - With cover
- */
-export const WithCover = Template.bind({});
-WithCover.args = {
-  intro,
-  meta: { ...meta, cover },
-  title: 'Odio odit necessitatibus',
-  url: '#',
-};
diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx
deleted file mode 100644
index 3e58e9a..0000000
--- a/src/components/organisms/layout/summary.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Summary } from './summary';
-import { cover, intro, meta, title, url } from './summary.fixture';
-
-describe('Summary', () => {
-  it('renders a title wrapped in a h2 element', () => {
-    render(
-      <Summary
-        intro={intro}
-        meta={meta}
-        title={title}
-        titleLevel={2}
-        url={url}
-      />
-    );
-    expect(
-      screen.getByRole('heading', { level: 2, name: title })
-    ).toBeInTheDocument();
-  });
-
-  it('renders an excerpt', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(intro)).toBeInTheDocument();
-  });
-
-  it('renders a cover', () => {
-    render(
-      <Summary
-        intro={intro}
-        meta={{ ...meta, cover }}
-        title={title}
-        url={url}
-      />
-    );
-    expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
-  });
-
-  it('renders a link to the full post', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(screen.getByRole('link', { name: title })).toBeInTheDocument();
-  });
-
-  it('renders a read more link', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(
-      screen.getByRole('link', { name: `Read more about ${title}` })
-    ).toBeInTheDocument();
-  });
-
-  it('renders some meta', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(meta.thematics![0].name)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
deleted file mode 100644
index 0c95f90..0000000
--- a/src/components/organisms/layout/summary.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import NextImage, { type ImageProps as NextImageProps } from 'next/image';
-import type { FC, ReactNode } from 'react';
-import { useIntl } from 'react-intl';
-import type { Article, Meta as MetaType } from '../../../types';
-import { useReadingTime } from '../../../utils/hooks';
-import { ButtonLink, type HeadingLevel, Icon, Link, Time } from '../../atoms';
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardCover,
-  CardFooter,
-  CardHeader,
-  CardMeta,
-  CardTitle,
-  type MetaItemData,
-} from '../../molecules';
-import styles from './summary.module.scss';
-
-export type Cover = Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
-
-export type SummaryMeta = Pick<
-  MetaType<'article'>,
-  | 'author'
-  | 'commentsCount'
-  | 'cover'
-  | 'dates'
-  | 'thematics'
-  | 'topics'
-  | 'wordsCount'
->;
-
-export type SummaryProps = Pick<Article, 'intro' | 'title'> & {
-  /**
-   * The post metadata.
-   */
-  meta: SummaryMeta;
-  /**
-   * The heading level (hn).
-   */
-  titleLevel?: HeadingLevel;
-  /**
-   * The post url.
-   */
-  url: string;
-};
-
-/**
- * Summary component
- *
- * Render a page summary.
- */
-export const Summary: FC<SummaryProps> = ({
-  intro,
-  meta,
-  title,
-  titleLevel = 2,
-  url,
-}) => {
-  const intl = useIntl();
-  const figureLabel = intl.formatMessage(
-    {
-      defaultMessage: '{title} cover',
-      description: 'Summary: figure (cover) accessible name',
-      id: 'RNVe1W',
-    },
-    { title }
-  );
-  const readMore = intl.formatMessage(
-    {
-      defaultMessage: 'Read more<a11y> about {title}</a11y>',
-      description: 'Summary: read more link',
-      id: 'Zpgv+f',
-    },
-    {
-      title,
-      a11y: (chunks: ReactNode) => (
-        // eslint-disable-next-line react/jsx-no-literals -- SR class allowed
-        <span className="screen-reader-text">{chunks}</span>
-      ),
-    }
-  );
-  const readingTime = useReadingTime(meta.wordsCount, true);
-
-  const getMetaItems = (): MetaItemData[] => {
-    const summaryMeta: MetaItemData[] = [
-      {
-        id: 'publication-date',
-        label: intl.formatMessage({
-          defaultMessage: 'Published on:',
-          description: 'Summary: publication date label',
-          id: 'TvQ2Ee',
-        }),
-        value: <Time date={meta.dates.publication} />,
-      },
-    ];
-
-    if (meta.dates.update && meta.dates.update !== meta.dates.publication)
-      summaryMeta.push({
-        id: 'update-date',
-        label: intl.formatMessage({
-          defaultMessage: 'Updated on:',
-          description: 'Summary: update date label',
-          id: 'f0Z/Po',
-        }),
-        value: <Time date={meta.dates.update} />,
-      });
-
-    summaryMeta.push({
-      id: 'reading-time',
-      label: intl.formatMessage({
-        defaultMessage: 'Reading time:',
-        description: 'Summary: reading time label',
-        id: 'tyzdql',
-      }),
-      value: readingTime,
-    });
-
-    if (meta.author)
-      summaryMeta.push({
-        id: 'author',
-        label: intl.formatMessage({
-          defaultMessage: 'Written by:',
-          description: 'Summary: author label',
-          id: 'r/6HOI',
-        }),
-        value: meta.author.name,
-      });
-
-    if (meta.thematics)
-      summaryMeta.push({
-        id: 'thematics',
-        label: intl.formatMessage({
-          defaultMessage: 'Thematics:',
-          description: 'Summary: thematics label',
-          id: 'bk0WOp',
-        }),
-        value: meta.thematics.map((thematic) => {
-          return {
-            id: `thematic-${thematic.id}`,
-            value: <Link href={thematic.url}>{thematic.name}</Link>,
-          };
-        }),
-      });
-
-    if (meta.topics)
-      summaryMeta.push({
-        id: 'topics',
-        label: intl.formatMessage({
-          defaultMessage: 'Topics:',
-          description: 'Summary: topics label',
-          id: 'yIZ+AC',
-        }),
-        value: meta.topics.map((topic) => {
-          return {
-            id: `topic-${topic.id}`,
-            value: <Link href={topic.url}>{topic.name}</Link>,
-          };
-        }),
-      });
-
-    if (meta.commentsCount !== undefined) {
-      const commentsCount = intl.formatMessage(
-        {
-          defaultMessage:
-            '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
-          description: 'Summary: comments count',
-          id: 'ye/vlA',
-        },
-        {
-          a11y: (chunks: ReactNode) => (
-            <span className="screen-reader-text">{chunks}</span>
-          ),
-          commentsCount: meta.commentsCount,
-          title,
-        }
-      );
-      summaryMeta.push({
-        id: 'comments-count',
-        label: intl.formatMessage({
-          defaultMessage: 'Comments:',
-          description: 'Summary: comments label',
-          id: 'bfPp0g',
-        }),
-        value: (
-          <Link href={`${url}#comments`}>{commentsCount as JSX.Element}</Link>
-        ),
-      });
-    }
-
-    return summaryMeta;
-  };
-
-  return (
-    <Card
-      className={styles.wrapper}
-      cover={
-        meta.cover ? (
-          <CardCover aria-label={figureLabel} hasBorders>
-            <NextImage {...meta.cover} />
-          </CardCover>
-        ) : undefined
-      }
-      meta={<CardMeta items={getMetaItems()} />}
-    >
-      <CardHeader>
-        <CardTitle className={styles.title} level={titleLevel}>
-          <Link href={url}>{title}</Link>
-        </CardTitle>
-      </CardHeader>
-      <CardBody>
-        <div
-          className={styles.intro}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: intro }}
-        />
-      </CardBody>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to={url}>
-            {readMore}
-            <Icon
-              aria-hidden={true}
-              className={styles.icon}
-              // eslint-disable-next-line react/jsx-no-literals -- Direction allowed
-              orientation="right"
-              // eslint-disable-next-line react/jsx-no-literals -- Shape allowed
-              shape="arrow"
-            />
-          </ButtonLink>
-        </CardActions>
-      </CardFooter>
-    </Card>
-  );
-};