From 73f94705dc583e968114e5a09e85979448f3412b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 7 Jun 2022 16:02:21 +0200
Subject: chore(cards): use post title as link label

---
 src/components/molecules/layout/card.fixture.tsx | 19 +++++++++
 src/components/molecules/layout/card.stories.tsx | 51 +++++++++++++-----------
 src/components/molecules/layout/card.test.tsx    | 33 +++++----------
 src/components/molecules/layout/card.tsx         | 14 ++++++-
 4 files changed, 69 insertions(+), 48 deletions(-)
 create mode 100644 src/components/molecules/layout/card.fixture.tsx

(limited to 'src/components/molecules')

diff --git a/src/components/molecules/layout/card.fixture.tsx b/src/components/molecules/layout/card.fixture.tsx
new file mode 100644
index 0000000..f96cc43
--- /dev/null
+++ b/src/components/molecules/layout/card.fixture.tsx
@@ -0,0 +1,19 @@
+export const cover = {
+  alt: 'A picture',
+  height: 480,
+  src: 'http://placeimg.com/640/480',
+  width: 640,
+};
+
+export const id = 'nam';
+
+export const meta = {
+  author: 'Possimus',
+  thematics: ['Autem', 'Eos'],
+};
+
+export const tagline = 'Ut rerum incidunt';
+
+export const title = 'Alias qui porro';
+
+export const url = '/an-existing-url';
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 0ad42c0..87051a9 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Card from './card';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 /**
  * Card - Storybook Meta
@@ -47,6 +48,16 @@ export default {
         required: false,
       },
     },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'The card id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     meta: {
       description: 'The card metadata (a publication date for example).',
       table: {
@@ -108,25 +119,15 @@ export default {
 
 const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
 
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const meta = {
-  thematics: ['Autem', 'Eos'],
-};
-
 /**
  * Card Stories - Default
  */
 export const Default = Template.bind({});
 Default.args = {
-  title: 'Veritatis dicta quod',
+  id,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -135,9 +136,10 @@ Default.args = {
 export const WithCover = Template.bind({});
 WithCover.args = {
   cover,
-  title: 'Veritatis dicta quod',
+  id,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -145,10 +147,11 @@ WithCover.args = {
  */
 export const WithMeta = Template.bind({});
 WithMeta.args = {
+  id,
   meta,
-  title: 'Veritatis dicta quod',
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -156,10 +159,11 @@ WithMeta.args = {
  */
 export const WithTagline = Template.bind({});
 WithTagline.args = {
-  tagline: 'Ullam accusantium ipsa',
-  title: 'Veritatis dicta quod',
+  id,
+  tagline,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
 
 /**
@@ -168,9 +172,10 @@ WithTagline.args = {
 export const WithAll = Template.bind({});
 WithAll.args = {
   cover,
+  id,
   meta,
-  tagline: 'Ullam accusantium ipsa',
-  title: 'Veritatis dicta quod',
+  tagline,
+  title,
   titleLevel: 2,
-  url: '#',
+  url,
 };
diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index d481f6c..1023aeb 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,49 +1,36 @@
 import { render, screen } from '@tests/utils';
 import Card from './card';
-
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const meta = {
-  author: 'Possimus',
-  thematics: ['Autem', 'Eos'],
-};
-
-const tagline = 'Ut rerum incidunt';
-
-const title = 'Alias qui porro';
-
-const url = '/an-existing-url';
+import { cover, id, meta, tagline, title, url } from './card.fixture';
 
 describe('Card', () => {
   it('renders a title wrapped in h2 element', () => {
-    render(<Card title={title} titleLevel={2} url={url} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} />);
     expect(
       screen.getByRole('heading', { level: 2, name: title })
     ).toBeInTheDocument();
   });
 
   it('renders a link to another page', () => {
-    render(<Card title={title} titleLevel={2} url={url} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} />);
     expect(screen.getByRole('link')).toHaveAttribute('href', url);
   });
 
   it('renders a cover', () => {
-    render(<Card title={title} titleLevel={2} url={url} cover={cover} />);
+    render(
+      <Card id={id} title={title} titleLevel={2} url={url} cover={cover} />
+    );
     expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
   });
 
   it('renders a tagline', () => {
-    render(<Card title={title} titleLevel={2} url={url} tagline={tagline} />);
+    render(
+      <Card id={id} title={title} titleLevel={2} url={url} tagline={tagline} />
+    );
     expect(screen.getByText(tagline)).toBeInTheDocument();
   });
 
   it('renders some meta', () => {
-    render(<Card title={title} titleLevel={2} url={url} meta={meta} />);
+    render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
     expect(screen.getByText(meta.author)).toBeInTheDocument();
   });
 });
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 7bbd040..c48bc18 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -21,6 +21,10 @@ export type CardProps = {
    * The cover fit. Default: cover.
    */
   coverFit?: ResponsiveImageProps['objectFit'];
+  /**
+   * The card id.
+   */
+  id: string;
   /**
    * The card meta.
    */
@@ -52,6 +56,7 @@ const Card: FC<CardProps> = ({
   className = '',
   cover,
   coverFit = 'cover',
+  id,
   meta,
   tagline,
   title,
@@ -59,7 +64,11 @@ const Card: FC<CardProps> = ({
   url,
 }) => {
   return (
-    <ButtonLink target={url} className={`${styles.wrapper} ${className}`}>
+    <ButtonLink
+      aria-labelledby={`${id}-heading`}
+      target={url}
+      className={`${styles.wrapper} ${className}`}
+    >
       <article className={styles.article}>
         <header className={styles.header}>
           {cover && (
@@ -71,8 +80,9 @@ const Card: FC<CardProps> = ({
           )}
           <Heading
             alignment="center"
-            level={titleLevel}
             className={styles.title}
+            id={`${id}-heading`}
+            level={titleLevel}
           >
             {title}
           </Heading>
-- 
cgit v1.2.3