feat(fn): introduce fn-popover [ci visual] (#3198)

* feat(fn): pre-arrow popover stuff * feat(fn): works but there is room for refactoring [ci visual] * feat(fn): less code * feat(fn): use start and end instead of right and left [ci visual] * feat(fn): pr comments, new approach to padding [ci visual] * feat(fn): more PR comments * feat(fn): [ci visual] * feat(fn): storybook update [ci visual]
SAP · Feb 23, 2022 · 7ece5d7 · 7ece5d7
1 parent 07ffee8
commit 7ece5d7
Show file tree

Hide file tree

Showing 3 changed files with 1,621 additions and 0 deletions.
diff --git a/src/fn/fn-popover.scss b/src/fn/fn-popover.scss
@@ -0,0 +1,137 @@
+@import "./fn-settings";
+
+$block: #{$fn-namespace}-popover;
+
+$fn-popover-arrow-size: 0.75rem;
+$fn-popover-padding: 0.75rem;
+$fn-popover-button-margin: 0.375rem;
+$fn-popover-arrow-offset: -0.25rem;
+$fn-popover-arrow-margin: 1.5rem;
+$fn-popover-arrow-middle-calc: calc(50% - 0.25rem);
+
+.#{$block} {
+  @include fn-reset();
+  @include fn-flex(column);
+
+  background-color: $fn-color-white;
+  border-radius: $fn-border-radius-12;
+  padding: $fn-popover-padding;
+  position: relative;
+  filter: drop-shadow(0 0 0.125rem rgba(0, 0, 0, 0.25)) drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.25));
+
+  &--no-padding {
+    padding: 0;
+
+    .#{$block}__content {
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: $fn-border-radius-12;
+      z-index: 2;
+    }
+  }
+
+  &__title {
+    @include fn-reset();
+
+    padding: $fn-popover-padding;
+    width: 100%;
+
+    .#{$block}__text {
+      @include fn-reset();
+
+      font-size: 1.125rem;
+      font-weight: bold;
+      line-height: 1.375rem;
+
+      &--truncate {
+        @include fn-ellipsis();
+      }
+    }
+  }
+
+  &__content {
+    @include fn-reset();
+
+    padding: $fn-popover-padding;
+  }
+
+  &__button-container {
+    @include fn-reset();
+    @include fn-flex();
+    @include fn-set-margin-left(auto);
+
+    margin-top: auto;
+    padding: $fn-popover-padding $fn-popover-padding $fn-popover-button-margin;
+
+    button:not(:last-child) {
+      @include fn-set-margin-right($fn-popover-button-margin);
+    }
+  }
+
+  &__arrow {
+    @include fn-reset();
+    @include fn-set-square($fn-popover-arrow-size);
+
+    content: " ";
+    position: absolute;
+    background: $fn-color-white;
+    bottom: $fn-popover-arrow-offset;
+    transform: rotate(45deg);
+    right: $fn-popover-arrow-middle-calc;
+
+    &--bottom,
+    &--bottom-start,
+    &--bottom-end {
+      bottom: $fn-popover-arrow-offset;
+    }
+
+    &--bottom,
+    &--top {
+      right: $fn-popover-arrow-middle-calc;
+    }
+
+    &--bottom-start,
+    &--top-start {
+      right: auto;
+    }
+
+    &--bottom-end,
+    &--top-end {
+      @include fn-set-position-right($fn-popover-arrow-margin);
+    }
+
+    &--top,
+    &--top-start,
+    &--top-end {
+      top: $fn-popover-arrow-offset;
+    }
+
+    &--start,
+    &--start-top,
+    &--start-bottom {
+      @include fn-set-position-left($fn-popover-arrow-offset);
+    }
+
+    &--start,
+    &--end {
+      top: $fn-popover-arrow-middle-calc;
+    }
+
+    &--start-top,
+    &--end-top {
+      top: $fn-popover-arrow-margin;
+    }
+
+    &--start-bottom,
+    &--end-bottom {
+      bottom: $fn-popover-arrow-margin;
+    }
+
+    &--end,
+    &--end-top,
+    &--end-bottom {
+      @include fn-set-position-right($fn-popover-arrow-offset);
+    }
+  }
+}