refactor(components): replace Meta component with MetaList

It removes items complexity by allowing consumers to use any label/value
association. Translations should also be defined by the consumer.
Each item can now be configured separately (borders, layout...).

1 files changed, 39 insertions, 7 deletions

diff --git a/src/components/molecules/layout/card.test.tsx b/src/components/molecules/layout/card.test.tsx
index c6498b8..b690d4c 100644
--- a/src/components/molecules/layout/card.test.tsx
+++ b/src/components/molecules/layout/card.test.tsx
@@ -1,37 +1,69 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import type { MetaItemData } from '../meta-list';
 import { Card } from './card';
-import { cover, id, meta, tagline, title, url } from './card.fixture';
+
+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(
-      screen.getByRole('heading', { level: 2, name: title })
+      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(screen.getByRole('link')).toHaveAttribute('href', 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(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
+    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(screen.getByText(tagline)).toBeInTheDocument();
+    expect(rtlScreen.getByText(tagline)).toBeInTheDocument();
   });
 
   it('renders some meta', () => {
     render(<Card id={id} title={title} titleLevel={2} url={url} meta={meta} />);
-    expect(screen.getByText(meta.author)).toBeInTheDocument();
+
+    const metaLabels = meta.map((item) => item.label);
+
+    for (const label of metaLabels) {
+      expect(rtlScreen.getByText(label)).toBeInTheDocument();
+    }
   });
 });