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

8 files changed, 72 insertions, 142 deletions

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 76fdbd6..c978f96 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -3,4 +3,4 @@
 @forward "./placeholders/clearfix";
 @forward "./placeholders/headings";
 @forward "./placeholders/layout";
-@forward "./placeholders/list";
+@forward "./placeholders/lists";
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 49e8e26..c8ce857 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -164,7 +164,7 @@ $icon-sizes: ();
 $spacing_ratio: get-ratio("golden-number");
 $spacing_base: $spacing_ratio * 1rem;
 
-$spacing_levels: "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl";
+$spacing_levels: "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl";
 
 // We start with 2xs spacing, so it needs to be less than the base.
 $spacing_current: math.div($spacing_base, $spacing_ratio * 3);
diff --git a/src/styles/abstracts/placeholders/_list.scss b/src/styles/abstracts/placeholders/_list.scss
deleted file mode 100644
index 85e8386..0000000
--- a/src/styles/abstracts/placeholders/_list.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/// List Reset
-%reset-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    margin-bottom: 0;
-  }
-}
-
-/// Ordered List Reset
-%reset-ordered-list {
-  @extend %reset-list;
-
-  li {
-    display: list-item;
-    counter-increment: none;
-
-    &::before {
-      display: none;
-    }
-  }
-}
-
-/// Display an inline list with flexbox
-%flex-list {
-  @extend %reset-list;
-
-  display: flex;
-  flex-flow: row wrap;
-}
diff --git a/src/styles/abstracts/placeholders/_lists.scss b/src/styles/abstracts/placeholders/_lists.scss
new file mode 100644
index 0000000..8a6b1d9
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_lists.scss
@@ -0,0 +1,53 @@
+%reset-list {
+  margin: 0;
+  padding: 0;
+
+  ::marker {
+    color: var(--color-primary-dark);
+  }
+}
+
+%regular-list {
+  @extend %reset-list;
+
+  list-style-position: inside;
+
+  ul,
+  ol {
+    margin-block-start: var(--itemSpacing);
+    padding-inline-start: var(--spacing-sm);
+  }
+}
+
+%hierarchical-list {
+  @extend %reset-list;
+
+  counter-reset: item;
+
+  > li {
+    display: table;
+    counter-increment: item;
+
+    &::before {
+      content: counters(item, ".") ". ";
+      display: table-cell;
+      padding-inline-end: var(--spacing-2xs);
+      color: var(--color-secondary);
+    }
+  }
+}
+
+%inline-list {
+  @extend %reset-list;
+
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--itemSpacing, 0);
+  list-style-position: inside;
+}
+
+%list-item {
+  &:not(:last-child) {
+    margin-block-end: var(--itemSpacing);
+  }
+}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 11b506f..c98533e 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -9,67 +9,6 @@ small {
   font-size: var(--font-size-sm);
 }
 
-ol {
-  list-style-type: none;
-  counter-reset: li;
-  padding: 0;
-
-  > li {
-    display: table;
-    counter-increment: li;
-
-    &::before {
-      content: counters(li, ".") ". ";
-      color: var(--color-secondary);
-      display: table-cell;
-      padding-right: var(--spacing-2xs);
-    }
-  }
-
-  li ol > li::before {
-    content: counters(li, ".") ". ";
-  }
-}
-
-ul,
-ol {
-  li {
-    margin-bottom: var(--spacing-2xs);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  ::marker {
-    color: var(--color-primary-dark);
-  }
-}
-
-ul {
-  padding-left: var(--spacing-sm);
-}
-
-dl {
-  display: flex;
-  flex-flow: row wrap;
-  gap: var(--spacing-2xs);
-}
-
-ul,
-ol,
-dl {
-  margin: var(--spacing-sm) 0;
-
-  & & {
-    margin: var(--spacing-2xs) 0 0;
-  }
-
-  ::marker {
-    color: var(--color-primary-dark);
-  }
-}
-
 a {
   background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
     0 0 / 100% 201% no-repeat;
diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss
index 24fc1eb..5c2848e 100644
--- a/src/styles/pages/Page.module.scss
+++ b/src/styles/pages/Page.module.scss
@@ -25,10 +25,6 @@
   text-align: center;
 }
 
-.list {
-  @extend %reset-ordered-list;
-}
-
 li.item {
   margin: 0 0 var(--spacing-md) 0;
   border-bottom: fun.convert-px(1) solid var(--color-border);
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;
 
     & & {
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index 6a847b1..f23be05 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -9,7 +9,8 @@
     position: relative;
     border: fun.convert-px(1) solid var(--color-border-dark);
     border-left: fun.convert-px(5) solid var(--color-border-dark);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
+    box-shadow:
+      fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
         var(--color-shadow),
       fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) 0
         var(--color-shadow);
@@ -94,8 +95,6 @@
     gap: var(--spacing-sm);
 
     .blocks-gallery-grid {
-      @extend %reset-list;
-
       grid-column: 1 / -1;
       grid-row: 1 / -1;
       display: grid;
@@ -110,7 +109,8 @@
 
       a {
         display: block;
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+        box-shadow:
+          0 0 fun.convert-px(1) 0 var(--color-shadow),
           fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
             var(--color-shadow-light),
           fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
@@ -119,7 +119,8 @@
         &:hover,
         &:focus {
           transform: scale(1.05);
-          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+          box-shadow:
+            0 0 fun.convert-px(1) 0 var(--color-shadow),
             fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
               var(--color-shadow-light),
             fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
@@ -132,7 +133,8 @@
 
         &:active {
           transform: scale(0.95);
-          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+          box-shadow:
+            0 0 fun.convert-px(1) 0 var(--color-shadow),
             fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
               var(--color-shadow-light),
             0 0 0 0 var(--color-shadow-light);
@@ -141,6 +143,7 @@
       }
     }
 
+    // cSpell:ignore aligncenter
     &.aligncenter {
       .blocks-gallery-grid {
         align-items: center;