refactor(components): extract MetaItem from MetaList

* replace `items` prop on MetaList with `children` prop: it was too
restrictive and the global options was not really useful. It is better
too give control to the consumers.

6 files changed, 79 insertions, 59 deletions

diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx
index 48c8c17..994e888 100644
--- a/src/components/molecules/layout/page-footer.stories.tsx
+++ b/src/components/molecules/layout/page-footer.stories.tsx
@@ -1,4 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Link } from '../../atoms';
+import { MetaItem, MetaList } from '../meta-list';
 import { PageFooter as PageFooterComponent } from './page-footer';
 
 /**
@@ -39,22 +41,17 @@ const Template: ComponentStory<typeof PageFooterComponent> = (args) => (
   <PageFooterComponent {...args} />
 );
 
-const meta = [
-  {
-    id: 'more-about',
-    label: 'More posts about:',
-    value: (
-      <a key="topic-1" href="#topic1">
-        Topic name
-      </a>
-    ),
-  },
-];
-
 /**
  * Page Footer Stories - With meta
  */
 export const PageFooter = Template.bind({});
 PageFooter.args = {
-  meta,
+  children: (
+    <MetaList>
+      <MetaItem
+        label="More posts about:"
+        value={<Link href="#topic1">Topic name</Link>}
+      />
+    </MetaList>
+  ),
 };
diff --git a/src/components/molecules/layout/page-footer.test.tsx b/src/components/molecules/layout/page-footer.test.tsx
index 7f0bcd5..dbd20f5 100644
--- a/src/components/molecules/layout/page-footer.test.tsx
+++ b/src/components/molecules/layout/page-footer.test.tsx
@@ -1,10 +1,10 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { PageFooter } from './page-footer';
 
 describe('PageFooter', () => {
   it('renders a footer element', () => {
     render(<PageFooter />);
-    expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('contentinfo')).toBeInTheDocument();
   });
 });
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index a93fced..e0ce2ef 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -1,12 +1,11 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Footer, type FooterProps } from '../../atoms';
-import { MetaList, type MetaItemData } from '../meta-list';
 
 export type PageFooterProps = Omit<FooterProps, 'children'> & {
   /**
-   * The footer metadata.
+   * The footer contents.
    */
-  meta?: MetaItemData[];
+  children?: ReactNode;
 };
 
 /**
@@ -14,8 +13,6 @@ export type PageFooterProps = Omit<FooterProps, 'children'> & {
  *
  * Render a footer to display page meta.
  */
-export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => (
-  <Footer {...props}>
-    {meta ? <MetaList hasInlinedValues items={meta} /> : null}
-  </Footer>
+export const PageFooter: FC<PageFooterProps> = ({ children, ...props }) => (
+  <Footer {...props}>{children}</Footer>
 );
diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx
index 54d5fe8..97eae5a 100644
--- a/src/components/molecules/layout/page-header.stories.tsx
+++ b/src/components/molecules/layout/page-header.stories.tsx
@@ -1,4 +1,5 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { MetaItem, MetaList } from '../meta-list';
 import { PageHeader } from './page-header';
 
 /**
@@ -62,32 +63,6 @@ const Template: ComponentStory<typeof PageHeader> = (args) => (
   <PageHeader {...args} />
 );
 
-const meta = [
-  { id: 'publication-date', label: 'Published on:', value: '2022-04-09' },
-  {
-    id: 'thematics',
-    label: 'Thematics:',
-    value: [
-      {
-        id: 'cat-1',
-        value: (
-          <a key="category1" href="#cat1">
-            Category 1
-          </a>
-        ),
-      },
-      {
-        id: 'cat-2',
-        value: (
-          <a key="category2" href="#cat2">
-            Category 2
-          </a>
-        ),
-      },
-    ],
-  },
-];
-
 /**
  * Page Header Stories - Default
  */
@@ -111,7 +86,33 @@ WithIntro.args = {
  */
 export const WithMeta = Template.bind({});
 WithMeta.args = {
-  meta,
+  meta: (
+    <MetaList>
+      <MetaItem isInline label="Published on:" value="2022-04-09" />
+      <MetaItem
+        isInline
+        label="Thematics:"
+        value={[
+          {
+            id: 'cat-1',
+            value: (
+              <a key="category1" href="#cat1">
+                Category 1
+              </a>
+            ),
+          },
+          {
+            id: 'cat-2',
+            value: (
+              <a key="category2" href="#cat2">
+                Category 2
+              </a>
+            ),
+          },
+        ]}
+      />
+    </MetaList>
+  ),
   title: 'Excepturi nesciunt illum',
 };
 
@@ -122,6 +123,32 @@ export const WithIntroAndMeta = Template.bind({});
 WithIntroAndMeta.args = {
   intro:
     'Minima dolor nihil. Velit atque odit totam enim. Quisquam reprehenderit ut et inventore et nihil libero exercitationem. Cumque similique magni placeat et. Et sed est cumque labore. Et quia similique.',
-  meta,
+  meta: (
+    <MetaList>
+      <MetaItem isInline label="Published on:" value="2022-04-09" />
+      <MetaItem
+        isInline
+        label="Thematics:"
+        value={[
+          {
+            id: 'cat-1',
+            value: (
+              <a key="category1" href="#cat1">
+                Category 1
+              </a>
+            ),
+          },
+          {
+            id: 'cat-2',
+            value: (
+              <a key="category2" href="#cat2">
+                Category 2
+              </a>
+            ),
+          },
+        ]}
+      />
+    </MetaList>
+  ),
   title: 'Excepturi nesciunt illum',
 };
diff --git a/src/components/molecules/layout/page-header.test.tsx b/src/components/molecules/layout/page-header.test.tsx
index 1f1a139..82aa7e1 100644
--- a/src/components/molecules/layout/page-header.test.tsx
+++ b/src/components/molecules/layout/page-header.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { PageHeader } from './page-header';
 
 const title = 'Non nemo amet';
@@ -9,11 +9,13 @@ const intro =
 describe('PageHeader', () => {
   it('renders a title', () => {
     render(<PageHeader title={title} intro={intro} />);
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent(title);
+    expect(rtlScreen.getByRole('heading', { level: 1 })).toHaveTextContent(
+      title
+    );
   });
 
   it('renders an introduction', () => {
     render(<PageHeader title={title} intro={intro} />);
-    expect(screen.getByText(intro)).toBeInTheDocument();
+    expect(rtlScreen.getByText(intro)).toBeInTheDocument();
   });
 });
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index ea0dd2c..e70d66c 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,6 +1,5 @@
 import type { FC, ReactNode } from 'react';
 import { Header, Heading } from '../../atoms';
-import { MetaList, type MetaItemData } from '../meta-list';
 import styles from './page-header.module.scss';
 
 export type PageHeaderProps = {
@@ -15,7 +14,7 @@ export type PageHeaderProps = {
   /**
    * The page metadata.
    */
-  meta?: MetaItemData[];
+  meta?: ReactNode;
   /**
    * The page title.
    */
@@ -55,9 +54,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
         <Heading className={styles.title} level={1}>
           {title}
         </Heading>
-        {meta ? (
-          <MetaList className={styles.meta} hasInlinedItems items={meta} />
-        ) : null}
+        {meta}
         {intro ? getIntro() : null}
       </div>
     </Header>