From c87c615b5866b8a8f361eeb0764bfdea85740e90 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 10 Oct 2023 19:37:51 +0200
Subject: 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...).
---
 .../templates/page/page-layout.stories.tsx         | 45 ++++++++++++++--------
 src/components/templates/page/page-layout.tsx      | 10 +----
 2 files changed, 31 insertions(+), 24 deletions(-)

(limited to 'src/components/templates')

diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 683b6b2..7977382 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -271,23 +271,38 @@ Post.args = {
   breadcrumb: postBreadcrumb,
   title: pageTitle,
   intro: pageIntro,
-  headerMeta: {
-    publication: { date: '2020-03-14' },
-    thematics: [
-      <Link key="cat1" href="#">
-        Cat 1
-      </Link>,
-      <Link key="cat2" href="#">
-        Cat 2
-      </Link>,
-    ],
-  },
-  footerMeta: {
-    custom: {
+  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>,
     },
-  },
+  ],
   children: (
     <>
       <Heading level={2}>Impedit commodi rerum</Heading>
@@ -357,7 +372,7 @@ export const Blog = Template.bind({});
 Blog.args = {
   breadcrumb: postsListBreadcrumb,
   title: 'Blog',
-  headerMeta: { total: posts.length },
+  headerMeta: [{ id: 'total', label: 'Total:', value: `${posts.length}` }],
   children: (
     <PostsList
       posts={posts}
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index ee3fd3a..dbac43e 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -16,7 +16,6 @@ import { Heading, Notice, type NoticeKind, Sidebar } from '../../atoms';
 import {
   Breadcrumb,
   type BreadcrumbItem,
-  type MetaData,
   PageFooter,
   type PageFooterProps,
   PageHeader,
@@ -41,13 +40,6 @@ const hasComments = (
 ): comments is SingleComment[] =>
   Array.isArray(comments) && comments.length > 0;
 
-/**
- * Check if meta properties are defined.
- *
- * @param {MetaData} meta - The metadata.
- */
-const hasMeta = (meta: MetaData) => Object.values(meta).every((value) => value);
-
 type CommentStatus = {
   isReply: boolean;
   kind: NoticeKind;
@@ -256,7 +248,7 @@ export const PageLayout: FC<PageLayoutProps> = ({
           {children}
         </div>
       )}
-      {footerMeta && hasMeta(footerMeta) ? (
+      {footerMeta?.length ? (
         <PageFooter meta={footerMeta} className={styles.footer} />
       ) : null}
       <Sidebar
-- 
cgit v1.2.3