refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
new file mode 100644
index 0000000..95f9b40
--- /dev/null
+++ b/src/components/atoms/lists/list.module.scss
@@ -0,0 +1,45 @@
+@use "@styles/abstracts/placeholders";
+
+.list {
+  margin: 0;
+
+  ::marker {
+    color: var(--color-primary-dark);
+  }
+
+  &--ordered {
+    padding: 0;
+    counter-reset: li;
+    list-style-type: none;
+  }
+
+  &--ordered &__item {
+    display: table;
+    counter-increment: li;
+
+    &::before {
+      content: counters(li, ".") ". ";
+      display: table-cell;
+      padding-right: var(--spacing-2xs);
+      color: var(--color-secondary);
+    }
+  }
+
+  &--unordered {
+    padding: 0 0 0 var(--spacing-sm);
+  }
+
+  &--flex {
+    @extend %reset-list;
+
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-sm);
+  }
+
+  &--flex &--flex {
+    display: initial;
+    position: relative;
+    top: var(--spacing-2xs);
+  }
+}