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, 8 deletions

diff --git a/src/components/organisms/widgets/social-media.tsx b/src/components/organisms/widgets/social-media.tsx
index 40513f8..f9dea58 100644
--- a/src/components/organisms/widgets/social-media.tsx
+++ b/src/components/organisms/widgets/social-media.tsx
@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { SocialLink, type SocialLinkProps } from '../../atoms';
+import type { FC } from 'react';
+import { List, ListItem, SocialLink, type SocialLinkProps } from '../../atoms';
 import { Widget, type WidgetProps } from '../../molecules';
 import styles from './social-media.module.scss';
 
@@ -21,17 +21,18 @@ export const SocialMedia: FC<SocialMediaProps> = ({ media, ...props }) => {
    * @param {SocialMedia[]} links - An array of social media name and url.
    * @returns {JSX.Element[]} The social links.
    */
-  const getItems = (links: Media[]): JSX.Element[] => {
-    return links.map((link, index) => (
-      <li key={`media-${index}`}>
+  const getItems = (links: Media[]): JSX.Element[] =>
+    links.map((link, index) => (
+      <ListItem key={`media-${index}`}>
         <SocialLink name={link.name} url={link.url} />
-      </li>
+      </ListItem>
     ));
-  };
 
   return (
     <Widget expanded={true} {...props}>
-      <ul className={styles.list}>{getItems(media)}</ul>
+      <List className={styles.list} hideMarker isInline spacing="xs">
+        {getItems(media)}
+      </List>
     </Widget>
   );
 };