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, 53 insertions, 0 deletions

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);
+  }
+}