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

diff --git a/src/styles/pages/partials/_article-lists.scss b/src/styles/pages/partials/_article-lists.scss
index c0084b0..e872d3c 100644
--- a/src/styles/pages/partials/_article-lists.scss
+++ b/src/styles/pages/partials/_article-lists.scss
@@ -1,39 +1,15 @@
-@mixin styles {
-  ol {
-    padding: 0;
-    list-style-type: none;
-    counter-reset: li;
-
-    > li {
-      display: table;
-      counter-increment: li;
+@use "../../../styles/abstracts/placeholders";
 
-      &::before {
-        content: counters(li, ".") ". ";
-        display: table-cell;
-        padding-right: var(--spacing-2xs);
-        color: var(--color-secondary);
-      }
-    }
-
-    li ol > li::before {
-      content: counters(li, ".") ". ";
-    }
-  }
-
-  ul,
-  ol {
-    li:not(:last-child) {
-      margin-bottom: var(--spacing-2xs);
-    }
+@mixin styles {
+  ol,
+  ul {
+    @extend %regular-list;
 
-    ::marker {
-      color: var(--color-primary-dark);
-    }
+    margin: var(--spacing-sm) 0;
   }
 
-  ul {
-    padding-left: var(--spacing-sm);
+  li {
+    @extend %list-item;
   }
 
   dl {
@@ -41,11 +17,6 @@
     flex-flow: row wrap;
     gap: var(--spacing-2xs);
     width: fit-content;
-  }
-
-  ul,
-  ol,
-  dl {
     margin: var(--spacing-sm) 0;
 
     & & {