refactor(components): merge HeadingButton and Widget components

The HeadingButton component was only used inside Widget component and
it is not very useful on its own so I merge the two components in a
new Collapsible component.

1 files changed, 0 insertions, 65 deletions

diff --git a/src/components/molecules/layout/widget.module.scss b/src/components/molecules/layout/widget.module.scss
deleted file mode 100644
index 1a601e5..0000000
--- a/src/components/molecules/layout/widget.module.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/mixins" as mix;
-
-.widget {
-  display: flex;
-  flex-flow: column;
-
-  &__header {
-    z-index: 2;
-    background: var(--color-bg);
-  }
-
-  &__body {
-    position: relative;
-  }
-
-  &--has-borders & {
-    &__body {
-      border: fun.convert-px(2) solid var(--color-primary-dark);
-    }
-  }
-
-  &--collapsed & {
-    &__body {
-      max-height: 0;
-      margin: 0;
-      visibility: hidden;
-      opacity: 0;
-      overflow: hidden;
-      border: 0 solid transparent;
-      transition: all 0.1s linear 0.3s,
-        max-height 0.5s cubic-bezier(0, 1, 0, 1) 0s, margin 0.3s ease-in-out 0s;
-    }
-  }
-
-  &--expanded#{&}--has-scroll {
-    @include mix.media("screen") {
-      @include mix.dimensions("lg") {
-        max-height: 95vh;
-
-        .widget__body {
-          overflow: hidden;
-        }
-
-        &:hover,
-        &:focus-within {
-          .widget__body {
-            overflow-y: auto;
-          }
-        }
-      }
-    }
-  }
-
-  &--expanded & {
-    &__body {
-      max-height: 10000px; // needs a fixed value for transition.
-      margin: var(--spacing-sm) 0;
-      opacity: 1;
-      visibility: visible;
-      transition: all 0.5s ease-in-out 0s, border 0s linear 0s,
-        max-height 0.6s ease-in-out 0s;
-    }
-  }
-}