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

diff --git a/src/components/molecules/card/card.test.tsx b/src/components/molecules/card/card.test.tsx
new file mode 100644
index 0000000..40a5830
--- /dev/null
+++ b/src/components/molecules/card/card.test.tsx
@@ -0,0 +1,129 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '@testing-library/react';
+import NextImage from 'next/image';
+import { Card } from './card';
+import { CardFooter } from './card-footer';
+import { CardHeader } from './card-header';
+import { CardMeta } from './card-meta';
+
+describe('Card', () => {
+  it('renders its children', () => {
+    const body = 'eveniet error voluptas';
+
+    render(<Card>{body}</Card>);
+
+    expect(rtlScreen.getByText(body)).toBeInTheDocument();
+  });
+
+  it('can render a cover in the card header', () => {
+    const altTxt = 'quo expedita eveniet';
+
+    render(
+      <Card
+        cover={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+      >
+        <CardHeader />
+      </Card>
+    );
+
+    expect(rtlScreen.getByRole('img', { name: altTxt })).toBeInTheDocument();
+  });
+
+  it('does not render a cover without card header', () => {
+    const body = 'necessitatibus maiores sed';
+    const altTxt = 'quo expedita eveniet';
+
+    render(
+      <Card
+        cover={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+      >
+        {body}
+      </Card>
+    );
+
+    expect(
+      rtlScreen.queryByRole('img', { name: altTxt })
+    ).not.toBeInTheDocument();
+  });
+
+  it('can render some meta in the card footer', () => {
+    const term = 'ut';
+    const desc = 'repudiandae';
+
+    render(
+      <Card
+        meta={<CardMeta items={[{ id: 'any', label: term, value: desc }]} />}
+      >
+        <CardFooter />
+      </Card>
+    );
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent(term);
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(desc);
+  });
+
+  it('does not render the meta without card footer', () => {
+    const body = 'rerum dolore et';
+    const term = 'ut';
+    const desc = 'repudiandae';
+
+    render(
+      <Card
+        meta={<CardMeta items={[{ id: 'any', label: term, value: desc }]} />}
+      >
+        {body}
+      </Card>
+    );
+
+    expect(
+      rtlScreen.queryByRole('term', { name: term })
+    ).not.toBeInTheDocument();
+    expect(
+      rtlScreen.queryByRole('definition', { name: desc })
+    ).not.toBeInTheDocument();
+  });
+
+  it('can render a card as link to another page', () => {
+    const body = 'Et qui harum voluptas est quos qui.';
+    const cta = 'asperiores optio incidunt';
+    const target = '#molestiae';
+
+    render(
+      <Card aria-label={cta} linkTo={target}>
+        {body}
+      </Card>
+    );
+
+    expect(rtlScreen.getByRole('link', { name: cta })).toHaveAttribute(
+      'href',
+      target
+    );
+  });
+
+  it('can render a card with centered text', () => {
+    const body = 'Et qui harum voluptas est quos qui.';
+    const label = 'asperiores optio incidunt';
+
+    render(
+      <Card aria-label={label} isCentered>
+        {body}
+      </Card>
+    );
+
+    expect(rtlScreen.getByLabelText(label)).toHaveClass('wrapper--centered');
+  });
+});