From 4f768afe543bbf9e1857c41d03804f8e37ab3512 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 21:29:45 +0200
Subject: refactor(components): rewrite List component

* change `items` prop to children
* replace `kind` prop with `isHierarchical`, `isOrdered` & `isInline` props
* add `hideMarker` prop
* add `spacing` prop to control item spacing
* move lists styles to Sass placeholders to avoid repeats because of
headless WordPress
---
 src/components/organisms/images/gallery.module.scss |  2 --
 src/components/organisms/images/gallery.stories.tsx |  4 ++--
 src/components/organisms/images/gallery.tsx         | 16 +++++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'src/components/organisms/images')

diff --git a/src/components/organisms/images/gallery.module.scss b/src/components/organisms/images/gallery.module.scss
index f4faa63..31960a4 100644
--- a/src/components/organisms/images/gallery.module.scss
+++ b/src/components/organisms/images/gallery.module.scss
@@ -2,8 +2,6 @@
 @use "../../../styles/abstracts/placeholders";
 
 .wrapper {
-  @extend %reset-list;
-
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: var(--spacing-sm);
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index 8b68777..5005ed8 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ResponsiveImage } from '../../molecules';
 import { Gallery } from './gallery';
 
@@ -37,7 +37,7 @@ export default {
 const image = {
   alt: 'Modi provident omnis',
   height: 480,
-  src: 'http://placeimg.com/640/480/fashion',
+  src: 'http://picsum.photos/640/480',
   width: 640,
 };
 
diff --git a/src/components/organisms/images/gallery.tsx b/src/components/organisms/images/gallery.tsx
index ae773f6..b35acfe 100644
--- a/src/components/organisms/images/gallery.tsx
+++ b/src/components/organisms/images/gallery.tsx
@@ -1,7 +1,9 @@
-import { Children, FC, ReactElement } from 'react';
-import { type ResponsiveImageProps } from '../../molecules';
+import { Children, type FC, type ReactElement } from 'react';
+import { List, ListItem } from '../../atoms';
+import type { ResponsiveImageProps } from '../../molecules';
 import styles from './gallery.module.scss';
 
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
 export type GalleryColumn = 2 | 3 | 4;
 
 export type GalleryProps = {
@@ -24,10 +26,10 @@ export const Gallery: FC<GalleryProps> = ({ children, columns }) => {
   const columnsClass = `wrapper--${columns}-columns`;
 
   return (
-    <ul className={`${styles.wrapper} ${styles[columnsClass]}`}>
-      {Children.map(children, (child) => {
-        return <li className={styles.item}>{child}</li>;
-      })}
-    </ul>
+    <List className={`${styles.wrapper} ${styles[columnsClass]}`} hideMarker>
+      {Children.map(children, (child) => (
+        <ListItem className={styles.item}>{child}</ListItem>
+      ))}
+    </List>
   );
 };
-- 
cgit v1.2.3