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

1 files changed, 9 insertions, 7 deletions

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>
   );
 };