From 329e7c89bac50be9db2c6d2ec6751ab0ffad42ac Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 22 Nov 2023 18:12:32 +0100
Subject: refactor(components): replace items prop in Grid with children prop

It is easier to read and to maintain this way. The `items` prop was not
useful since we are not manipulating the items. Changes:
* extract GridItem component from Grid component
* replace `items` prop of type Array<ReactNode> with `children` prop of
type ReactNode
* remove GridItem styles
---
 src/components/molecules/grid/grid.tsx | 23 +++++++----------------
 1 file changed, 7 insertions(+), 16 deletions(-)

(limited to 'src/components/molecules/grid/grid.tsx')

diff --git a/src/components/molecules/grid/grid.tsx b/src/components/molecules/grid/grid.tsx
index ca920f8..3d0ecf1 100644
--- a/src/components/molecules/grid/grid.tsx
+++ b/src/components/molecules/grid/grid.tsx
@@ -5,18 +5,17 @@ import {
   type CSSProperties,
 } from 'react';
 import type { Spacing } from '../../../types';
-import { List, ListItem, type ListProps } from '../../atoms';
+import { List, type ListProps } from '../../atoms';
 import styles from './grid.module.scss';
 
-export type GridItem = {
-  id: string;
-  item: ReactNode;
-};
-
 export type GridProps<T extends boolean> = Omit<
   ListProps<T, false>,
   'children' | 'hideMarker' | 'isHierarchical' | 'isInline' | 'spacing'
 > & {
+  /**
+   * The grid items.
+   */
+  children: ReactNode;
   /**
    * Control the number of column.
    *
@@ -35,10 +34,6 @@ export type GridProps<T extends boolean> = Omit<
    * @default false
    */
   isCentered?: boolean;
-  /**
-   * The grid items.
-   */
-  items: GridItem[];
   /**
    * Define a fixed size for each item.
    *
@@ -67,11 +62,11 @@ export type GridProps<T extends boolean> = Omit<
 
 const GridWithRef = <T extends boolean>(
   {
+    children,
     className = '',
     col = 'auto-fit',
     gap,
     isCentered = false,
-    items,
     size,
     sizeMax,
     sizeMin,
@@ -104,11 +99,7 @@ const GridWithRef = <T extends boolean>(
       ref={ref}
       style={gridStyles}
     >
-      {items.map(({ id, item }) => (
-        <ListItem className={styles.item} key={id}>
-          {item}
-        </ListItem>
-      ))}
+      {children}
     </List>
   );
 };
-- 
cgit v1.2.3