refactor(components): rewrite Card component

* make the component more generic
* merge `<Summary />` and `<Comment />` styles into card component
to avoid repeating the same structure
* remove most of the props to use composition

However the CSS is a bit complex because of the two variants...

Also, the component should be refactored when the CSS pseudo-class
`:has` has enough support: the provider and the `cover` and `meta`
props should be removed.

1 files changed, 53 insertions, 39 deletions

diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 4fe7632..0c95f90 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -3,16 +3,18 @@ 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 {
-  ButtonLink,
-  Heading,
-  type HeadingLevel,
-  Icon,
-  Link,
-  Figure,
-  Time,
-} from '../../atoms';
-import { MetaList, type MetaItemData } from '../../molecules';
+  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'>;
@@ -56,6 +58,14 @@ export const Summary: FC<SummaryProps> = ({
   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>',
@@ -182,40 +192,44 @@ export const Summary: FC<SummaryProps> = ({
   };
 
   return (
-    <article className={styles.wrapper}>
-      {meta.cover ? (
-        <Figure>
-          <NextImage {...meta.cover} className={styles.cover} />
-        </Figure>
-      ) : null}
-      <header className={styles.header}>
-        <Link href={url} className={styles.link}>
-          <Heading level={titleLevel} className={styles.title}>
-            {title}
-          </Heading>
-        </Link>
-      </header>
-      <div className={styles.body}>
+    <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 }}
         />
-        <ButtonLink className={styles['read-more']} 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>
-      </div>
-      <footer className={styles.footer}>
-        <MetaList className={styles.meta} items={getMetaItems()} />
-      </footer>
-    </article>
+      </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>
   );
 };