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, 3 insertions, 19 deletions

diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
index 3f62502..2180de4 100644
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -1,4 +1,4 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { LinksListWidget } from './links-list-widget';
 
 /**
@@ -8,7 +8,7 @@ export default {
   title: 'Organisms/Widgets/LinksList',
   component: LinksListWidget,
   args: {
-    kind: 'unordered',
+    isOrdered: false,
   },
   argTypes: {
     className: {
@@ -32,21 +32,6 @@ export default {
         value: {},
       },
     },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The list kind: either ordered or unordered.',
-      options: ['ordered', 'unordered'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'unordered' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
     level: {
       control: {
         type: 'number',
@@ -105,7 +90,6 @@ const items = [
 export const Unordered = Template.bind({});
 Unordered.args = {
   items,
-  kind: 'unordered',
   level: 2,
   title: 'A list of links',
 };
@@ -115,8 +99,8 @@ Unordered.args = {
  */
 export const Ordered = Template.bind({});
 Ordered.args = {
+  isOrdered: true,
   items,
-  kind: 'ordered',
   level: 2,
   title: 'A list of links',
 };