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

2 files changed, 17 insertions, 43 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;
 
     & & {
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;