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.

3 files changed, 51 insertions, 93 deletions

diff --git a/src/components/molecules/meta-list/meta-list.stories.tsx b/src/components/molecules/meta-list/meta-list.stories.tsx
index 463ec96..d73c5b9 100644
--- a/src/components/molecules/meta-list/meta-list.stories.tsx
+++ b/src/components/molecules/meta-list/meta-list.stories.tsx
@@ -1,6 +1,7 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Link } from '../../atoms';
-import { type MetaItemData, MetaList } from './meta-list';
+import { MetaItem } from './meta-item';
+import { MetaList } from './meta-list';
 
 /**
  * MetaList - Storybook Meta
@@ -24,7 +25,7 @@ const Template: ComponentStory<typeof MetaList> = (args) => (
   <MetaList {...args} />
 );
 
-const items: MetaItemData[] = [
+const items = [
   { id: 'comments', label: 'Comments', value: 'No comments.' },
   {
     id: 'category',
@@ -57,7 +58,7 @@ const items: MetaItemData[] = [
  */
 export const Default = Template.bind({});
 Default.args = {
-  items,
+  children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />),
 };
 
 /**
@@ -65,6 +66,6 @@ Default.args = {
  */
 export const Inlined = Template.bind({});
 Inlined.args = {
+  children: items.map(({ id, ...item }) => <MetaItem key={id} {...item} />),
   isInline: true,
-  items,
 };
diff --git a/src/components/molecules/meta-list/meta-list.test.tsx b/src/components/molecules/meta-list/meta-list.test.tsx
index cc4d2fa..e4e2860 100644
--- a/src/components/molecules/meta-list/meta-list.test.tsx
+++ b/src/components/molecules/meta-list/meta-list.test.tsx
@@ -1,31 +1,44 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '@testing-library/react';
-import { type MetaItemData, MetaList } from './meta-list';
+import { MetaItem } from './meta-item';
+import { MetaList } from './meta-list';
 
 describe('MetaList', () => {
   it('renders a list of meta items', () => {
-    const items: MetaItemData[] = [
+    const items = [
       { id: 'item1', label: 'Item 1', value: 'Value 1' },
       { id: 'item2', label: 'Item 2', value: 'Value 2' },
       { id: 'item3', label: 'Item 3', value: 'Value 3' },
       { id: 'item4', label: 'Item 4', value: 'Value 4' },
     ];
 
-    render(<MetaList items={items} />);
+    render(
+      <MetaList>
+        {items.map(({ id, ...item }) => (
+          <MetaItem key={id} {...item} />
+        ))}
+      </MetaList>
+    );
 
     expect(rtlScreen.getAllByRole('term')).toHaveLength(items.length);
     expect(rtlScreen.getAllByRole('definition')).toHaveLength(items.length);
   });
 
   it('can render a centered list of meta items', () => {
-    const items: MetaItemData[] = [
+    const items = [
       { id: 'item1', label: 'Item 1', value: 'Value 1' },
       { id: 'item2', label: 'Item 2', value: 'Value 2' },
       { id: 'item3', label: 'Item 3', value: 'Value 3' },
       { id: 'item4', label: 'Item 4', value: 'Value 4' },
     ];
 
-    render(<MetaList isCentered items={items} />);
+    render(
+      <MetaList isCentered>
+        {items.map(({ id, ...item }) => (
+          <MetaItem key={id} {...item} />
+        ))}
+      </MetaList>
+    );
 
     const terms = rtlScreen.getAllByRole('term');
 
@@ -33,47 +46,23 @@ describe('MetaList', () => {
   });
 
   it('can render an inlined list of meta items', () => {
-    const items: MetaItemData[] = [
+    const items = [
       { id: 'item1', label: 'Item 1', value: 'Value 1' },
       { id: 'item2', label: 'Item 2', value: 'Value 2' },
       { id: 'item3', label: 'Item 3', value: 'Value 3' },
       { id: 'item4', label: 'Item 4', value: 'Value 4' },
     ];
 
-    render(<MetaList isInline items={items} />);
+    render(
+      <MetaList isInline>
+        {items.map(({ id, ...item }) => (
+          <MetaItem key={id} {...item} />
+        ))}
+      </MetaList>
+    );
 
     const terms = rtlScreen.getAllByRole('term');
 
     expect(terms[0].parentElement?.parentElement).toHaveClass('list--inlined');
   });
-
-  it('can render a list of meta items with bordered values', () => {
-    const items: MetaItemData[] = [
-      { id: 'item1', label: 'Item 1', value: 'Value 1' },
-      { id: 'item2', label: 'Item 2', value: 'Value 2' },
-      { id: 'item3', label: 'Item 3', value: 'Value 3' },
-      { id: 'item4', label: 'Item 4', value: 'Value 4' },
-    ];
-
-    render(<MetaList hasBorderedValues items={items} />);
-
-    const terms = rtlScreen.getAllByRole('term');
-
-    expect(terms[0].parentElement).toHaveClass('item--bordered-values');
-  });
-
-  it('can render a list of meta items with inlined values', () => {
-    const items: MetaItemData[] = [
-      { id: 'item1', label: 'Item 1', value: 'Value 1' },
-      { id: 'item2', label: 'Item 2', value: 'Value 2' },
-      { id: 'item3', label: 'Item 3', value: 'Value 3' },
-      { id: 'item4', label: 'Item 4', value: 'Value 4' },
-    ];
-
-    render(<MetaList hasInlinedValues items={items} />);
-
-    const terms = rtlScreen.getAllByRole('term');
-
-    expect(terms[0].parentElement).toHaveClass('item--inlined-values');
-  });
 });
diff --git a/src/components/molecules/meta-list/meta-list.tsx b/src/components/molecules/meta-list/meta-list.tsx
index 288fd9a..c19f0fd 100644
--- a/src/components/molecules/meta-list/meta-list.tsx
+++ b/src/components/molecules/meta-list/meta-list.tsx
@@ -1,54 +1,32 @@
-import { type ForwardRefRenderFunction, forwardRef } from 'react';
+import {
+  type ForwardRefRenderFunction,
+  forwardRef,
+  type ReactNode,
+} from 'react';
 import { DescriptionList, type DescriptionListProps } from '../../atoms';
-import { MetaItem, type MetaItemProps } from './meta-item';
 import styles from './meta-list.module.scss';
 
-export type MetaItemData = Pick<
-  MetaItemProps,
-  | 'hasBorderedValues'
-  | 'hasInlinedValues'
-  | 'isCentered'
-  | 'isInline'
-  | 'label'
-  | 'value'
+export type MetaListProps = Omit<
+  DescriptionListProps,
+  'children' | 'spacing'
 > & {
-  id: string;
+  /**
+   * The meta items.
+   */
+  children: ReactNode;
+  /**
+   * Should the meta be centered?
+   *
+   * @default false
+   */
+  isCentered?: boolean;
 };
 
-export type MetaListProps = Omit<DescriptionListProps, 'children' | 'spacing'> &
-  Pick<MetaItemProps, 'hasBorderedValues' | 'hasInlinedValues'> & {
-    /**
-     * Should the items be inlined?
-     *
-     * @default false
-     */
-    hasInlinedItems?: boolean;
-    /**
-     * Should the meta be centered?
-     *
-     * @default false
-     */
-    isCentered?: boolean;
-    /**
-     * The meta items.
-     */
-    items: MetaItemData[];
-  };
-
 const MetaListWithRef: ForwardRefRenderFunction<
   HTMLDListElement,
   MetaListProps
 > = (
-  {
-    className = '',
-    hasBorderedValues = false,
-    hasInlinedItems = false,
-    hasInlinedValues = false,
-    isCentered = false,
-    isInline = false,
-    items,
-    ...props
-  },
+  { children, className = '', isCentered = false, isInline = false, ...props },
   ref
 ) => {
   const listClass = [
@@ -60,17 +38,7 @@ const MetaListWithRef: ForwardRefRenderFunction<
 
   return (
     <DescriptionList {...props} className={listClass} ref={ref}>
-      {items.map(({ id, ...item }) => (
-        <MetaItem
-          hasBorderedValues={hasBorderedValues}
-          hasInlinedValues={hasInlinedValues}
-          isCentered={isCentered}
-          isInline={hasInlinedItems}
-          // Each item should be able to override the global settings.
-          {...item}
-          key={id}
-        />
-      ))}
+      {children}
     </DescriptionList>
   );
 };