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

diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
new file mode 100644
index 0000000..86b4924
--- /dev/null
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -0,0 +1,91 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.item {
+  --btn-size: #{fun.convert-px(65)};
+
+  display: flex;
+  position: relative;
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      justify-content: flex-end;
+    }
+
+    @include mix.dimensions("md") {
+      justify-content: flex-end;
+    }
+  }
+}
+
+.modal {
+  position: absolute;
+  top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs)));
+  transition: all 0.8s ease-in-out 0s, background 0s;
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "sm") {
+      position: fixed;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+
+.label {
+  --draw-border-thickness: #{fun.convert-px(4)};
+  --draw-border-color1: var(--color-primary-light);
+  --draw-border-color2: var(--color-primary-lighter);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      border-radius: fun.convert-px(5);
+    }
+  }
+
+  &:hover {
+    @extend %draw-borders;
+  }
+
+  &:active {
+    --draw-border-color1: var(--color-primary-dark);
+    --draw-border-color2: var(--color-primary-light);
+
+    @extend %draw-borders;
+  }
+}
+
+.checkbox {
+  position: absolute;
+  top: calc(var(--btn-size) / 2);
+  left: calc(var(--btn-size) / 2);
+  opacity: 0;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    ~ .label {
+      @extend %draw-borders;
+    }
+  }
+
+  &:not(:checked) {
+    ~ .modal {
+      opacity: 0;
+      visibility: hidden;
+
+      @include mix.media("screen") {
+        @include mix.dimensions(null, "sm") {
+          transform: translateX(-100vw);
+        }
+
+        @include mix.dimensions("sm") {
+          transform: perspective(#{fun.convert-px(400)})
+            translate3d(0, 0, #{fun.convert-px(-400)});
+          transform-origin: 100% -50%;
+        }
+      }
+    }
+  }
+}