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

diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
deleted file mode 100644
index 34fa23d..0000000
--- a/src/components/Tooltip/Tooltip.module.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.title {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  position: absolute;
-  top: calc(var(--spacing-sm) * -1);
-  left: var(--spacing-lg);
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-primary-dark);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 500;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      top: 0;
-    }
-
-    @include mix.dimensions("md") {
-      left: var(--spacing-md);
-    }
-  }
-
-  &::before {
-    content: "?";
-    padding: var(--spacing-2xs);
-    position: absolute;
-    top: fun.convert-px(-1);
-    bottom: fun.convert-px(-1);
-    right: 100%;
-    background: var(--color-primary-dark);
-    border: fun.convert-px(1) solid var(--color-primary-dark);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-    color: var(--color-fg-inverted);
-    font-weight: 600;
-  }
-}
-
-.message {
-  transition: all 0.5s ease-in-out 0;
-}
-
-.wrapper {
-  padding: 9% 6% var(--spacing-sm) 6%;
-  position: absolute;
-  bottom: 30%;
-  left: fun.convert-px(15);
-  right: fun.convert-px(15);
-  background: var(--color-bg);
-  border: fun.convert-px(2) solid var(--color-primary-dark);
-  border-radius: fun.convert-px(3);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-light);
-  transform-origin: bottom;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      overflow-y: auto;
-      top: 18%;
-    }
-
-    @include mix.dimensions("sm") {
-      bottom: unset;
-      left: fun.convert-px(15);
-      right: fun.convert-px(15);
-      top: 100%;
-      transform-origin: top;
-    }
-  }
-
-  ul,
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.hidden {
-  visibility: hidden;
-  opacity: 0;
-  transition: all 0.5s ease-in-out 0s, opacity 0.3s ease-in-out 0.2s;
-  transform: scaleY(0);
-
-  .message,
-  .title {
-    opacity: 0;
-  }
-
-  .message {
-    transition: all 0.3s ease-in-out 0s;
-  }
-
-  .title {
-    transition: all 0.2s ease-in-out 0.2s;
-  }
-}
-
-.visible {
-  visibility: visible;
-  opacity: 1;
-  transform: scaleY(1);
-  transition: all 0.8s ease-in-out 0s, opacity 0.7s ease-in-out 0.2s;
-
-  .message,
-  .title {
-    opacity: 1;
-  }
-
-  .message {
-    transition: all 0.5s ease-in-out 0.2s;
-  }
-
-  .title {
-    transition: all 0.4s ease-in-out 0s;
-  }
-}