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.

2 files changed, 46 insertions, 43 deletions

diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 2b44933..6dcbeea 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,5 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ButtonLink, Heading, Link } from '../../atoms';
+import { MetaItem, MetaList } from '../../molecules';
 import { LinksWidget, PostsList, SharingWidget } from '../../organisms';
 import { LayoutBase } from '../layout/layout.stories';
 import { PageLayout as PageLayoutComponent } from './page-layout';
@@ -270,38 +271,41 @@ Post.args = {
   breadcrumb: postBreadcrumb,
   title: pageTitle,
   intro: pageIntro,
-  headerMeta: [
-    { id: 'publication-date', label: 'Published on:', value: '2020-03-14' },
-    {
-      id: 'thematics',
-      label: 'Thematics:',
-      value: [
-        {
-          id: 'cat-1',
-          value: (
-            <Link key="cat1" href="#">
-              Cat 1
-            </Link>
-          ),
-        },
-        {
-          id: 'cat-2',
-          value: (
-            <Link key="cat2" href="#">
-              Cat 2
-            </Link>
-          ),
-        },
-      ],
-    },
-  ],
-  footerMeta: [
-    {
-      id: 'read-more',
-      label: 'Read more about:',
-      value: <ButtonLink to="#">Topic 1</ButtonLink>,
-    },
-  ],
+  headerMeta: (
+    <MetaList>
+      <MetaItem isInline label="Published on:" value="2020-03-14" />
+      <MetaItem
+        isInline
+        label="Thematic:"
+        value={[
+          {
+            id: 'cat-1',
+            value: (
+              <Link key="cat1" href="#">
+                Cat 1
+              </Link>
+            ),
+          },
+          {
+            id: 'cat-2',
+            value: (
+              <Link key="cat2" href="#">
+                Cat 2
+              </Link>
+            ),
+          },
+        ]}
+      />
+    </MetaList>
+  ),
+  footerMeta: (
+    <MetaList>
+      <MetaItem
+        label="Read more about:"
+        value={<ButtonLink to="#">Topic 1</ButtonLink>}
+      />
+    </MetaList>
+  ),
   children: (
     <>
       <Heading level={2}>Impedit commodi rerum</Heading>
@@ -497,7 +501,11 @@ export const Blog = Template.bind({});
 Blog.args = {
   breadcrumb: postsListBreadcrumb,
   title: 'Blog',
-  headerMeta: [{ id: 'total', label: 'Total:', value: `${posts.length}` }],
+  headerMeta: (
+    <MetaList>
+      <MetaItem isInline label="Total:" value={`${posts.length}`} />
+    </MetaList>
+  ),
   children: <PostsList posts={posts} sortByYear />,
   widgets: [
     <LinksWidget
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index db71e07..75d308e 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -12,12 +12,7 @@ import { sendComment } from '../../../services/graphql';
 import type { SendCommentInput } from '../../../types';
 import { useHeadingsTree } from '../../../utils/hooks';
 import { Heading, Sidebar } from '../../atoms';
-import {
-  PageFooter,
-  type PageFooterProps,
-  PageHeader,
-  type PageHeaderProps,
-} from '../../molecules';
+import { PageFooter, PageHeader, type PageHeaderProps } from '../../molecules';
 import {
   CommentForm,
   CommentsList,
@@ -61,11 +56,11 @@ export type PageLayoutProps = {
   /**
    * The footer metadata.
    */
-  footerMeta?: PageFooterProps['meta'];
+  footerMeta?: ReactNode;
   /**
    * The header metadata.
    */
-  headerMeta?: PageHeaderProps['meta'];
+  headerMeta?: ReactNode;
   /**
    * The page id.
    */
@@ -240,8 +235,8 @@ export const PageLayout: FC<PageLayoutProps> = ({
           {children}
         </div>
       )}
-      {footerMeta?.length ? (
-        <PageFooter meta={footerMeta} className={styles.footer} />
+      {footerMeta ? (
+        <PageFooter className={styles.footer}>{footerMeta}</PageFooter>
       ) : null}
       <Sidebar
         aria-label={intl.formatMessage({