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

4 files changed, 55 insertions, 34 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);
+  }
+}