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, 0 insertions, 69 deletions

diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
deleted file mode 100644
index b690d4c..0000000
--- a/src/components/molecules/layout/card.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '../../../../tests/utils';
-import type { MetaItemData } from '../meta-list';
-import { Card } from './card';
-
-const cover = {
-  alt: 'A picture',
-  height: 480,
-  src: 'https://picsum.photos/640/480',
-  width: 640,
-};
-
-const id = 'nam';
-
-const meta = [
-  { id: 'author', label: 'Author', value: 'Possimus' },
-  {
-    id: 'categories',
-    label: 'Categories',
-    value: [
-      { id: 'autem', value: 'Autem' },
-      { id: 'eos', value: 'Eos' },
-    ],
-  },
-] satisfies MetaItemData[];
-
-const tagline = 'Ut rerum incidunt';
-
-const title = 'Alias qui porro';
-
-const url = '/an-existing-url';
-
-describe('Card', () => {
-  it('renders a title wrapped in h2 element', () => {
-    render(<Card id={id} title={title} titleLevel={2} url={url} />);
-    expect(
-      rtlScreen.getByRole('heading', { level: 2, name: title })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a link to another page', () => {
-    render(<Card id={id} title={title} titleLevel={2} url={url} />);
-    expect(rtlScreen.getByRole('link')).toHaveAttribute('href', url);
-  });
-
-  it('renders a cover', () => {
-    render(
-      <Card id={id} title={title} titleLevel={2} url={url} cover={cover} />
-    );
-    expect(rtlScreen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
-  });
-
-  it('renders a tagline', () => {
-    render(
-      <Card id={id} title={title} titleLevel={2} url={url} tagline={tagline} />
-    );
-    expect(rtlScreen.getByText(tagline)).toBeInTheDocument();
-  });
-
-  it('renders some meta', () => {
-    render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
-
-    const metaLabels = meta.map((item) => item.label);
-
-    for (const label of metaLabels) {
-      expect(rtlScreen.getByText(label)).toBeInTheDocument();
-    }
-  });
-});