Merge pull request #265 from sebgroup/release/210115

Release/210115
seb-oss · Jan 15, 2021 · 7316464 · 7316464
2 parents f624f81 + 0c0d6cc
commit 7316464
Show file tree

Hide file tree

Showing 34 changed files with 988 additions and 72 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/_colors.scss b/src/_colors.scss
@@ -72,6 +72,16 @@ $vanilla-color-component-disabled-dark: $vanilla-color-grey400 !default;
 $vanilla-color-component-disabled-light: $vanilla-color-grey100 !default;
 $vanilla-color-text: $vanilla-color-text;
 
+// States
+$vanilla-color-information: $vanilla-color-grey8 !default;
+$vanilla-color-success: $vanilla-color-darkgreen2 !default;
+$vanilla-color-warning: $vanilla-color-yellow !default;
+$vanilla-color-critical: $vanilla-color-darkred1 !default;
+
+// Button
+$vanilla-color-button-sell: #d83c3c;
+$vanilla-color-button-sell-dark: #c32727;
+
 /// Returns a shade of a color
 ///
 /// @access public

diff --git a/src/_vanilla-all.scss b/src/_vanilla-all.scss
@@ -9,9 +9,12 @@
 
 // All components
 @import 'components/alerts/alert-ribbon';
+@import 'components/alerts/toast';
 @import 'components/badge/badge';
 @import 'components/buttons/button';
 @import 'components/breadcrumbs/breadcrumbs';
+@import 'components/filter/chip';
+@import 'components/filter/filter-tag';
 @import 'components/inputs/input_base';
 @import 'components/inputs/dropdown';
 @import 'components/inputs/dropdown-native';
@@ -29,6 +32,7 @@
 @import 'components/text/preamble';
 @import 'components/modals/modal-slideout';
 @import 'components/modals/modal-dialog';
+@import 'components/tooltips/contextual-help';
 @import 'components/tooltips/tooltip-all';
 @import 'components/inputs/stepper';
 @import 'components/segmented-control/segmented-control';

diff --git a/src/components/alerts/_alert-ribbon-mixins.scss b/src/components/alerts/_alert-ribbon-mixins.scss
@@ -1,5 +1,6 @@
 @import 'common';
 @import '~include-media/dist/include-media';
+@import '../buttons/button-mixins';
 
 ///
 /// @access public
@@ -62,18 +63,6 @@
   margin-right: 1em;
 }
 
-///
-/// @access public
-@mixin vanilla-alert-ribbon__link() {
-  &,
-  &:hover,
-  &:visited {
-    color: inherit;
-    text-decoration: underline;
-    font-weight: bold;
-  }
-}
-
 ///
 /// @access public
 @mixin vanilla-alert-ribbon() {
@@ -88,7 +77,7 @@
   }
 
   a {
-    @include vanilla-alert-ribbon__link();
+    @include vanilla-alert__link();
   }
 
   .fal,
@@ -100,19 +89,35 @@
   &--whisper,
   &--information {
     @include vanilla-alert--information();
+
+    button {
+      @include vanilla-button-ghost-dark();
+    }
   }
 
   &--success {
     @include vanilla-alert--success();
+
+    button {
+      @include vanilla-button-ghost-light();
+    }
   }
 
   &--talk,
   &--warning {
     @include vanilla-alert--warning();
+
+    button {
+      @include vanilla-button-ghost-dark();
+    }
   }
 
   &--shout,
   &--critical {
     @include vanilla-alert--critical();
+
+    button {
+      @include vanilla-button-ghost-light();
+    }
   }
 }
diff --git a/src/components/alerts/_common.scss b/src/components/alerts/_common.scss
@@ -4,7 +4,6 @@
 ////
 
 @import '../../variables';
-@import '../buttons/button-mixins';
 
 /////////////////////////////////////////
 /// Alert common features
@@ -13,12 +12,8 @@
 ///
 /// @access private
 @mixin vanilla-alert--information() {
-  background-color: $vanilla-color-grey8;
+  background-color: $vanilla-color-information;
   color: $vanilla-color-text;
-
-  button {
-    @include vanilla-button-ghost-dark();
-  }
 }
 
 ///
@@ -31,23 +26,15 @@
 ///
 /// @access private
 @mixin vanilla-alert--success() {
-  background-color: $vanilla-color-darkgreen2;
+  background-color: $vanilla-color-success;
   color: $vanilla-color-white;
-
-  button {
-    @include vanilla-button-ghost-light();
-  }
 }
 
 ///
 /// @access private
 @mixin vanilla-alert--warning() {
-  background-color: $vanilla-color-yellow;
+  background-color: $vanilla-color-warning;
   color: $vanilla-color-text;
-
-  button {
-    @include vanilla-button-ghost-dark();
-  }
 }
 
 ///
@@ -60,12 +47,8 @@
 ///
 /// @access private
 @mixin vanilla-alert--critical() {
-  background-color: $vanilla-color-darkred1;
+  background-color: $vanilla-color-critical;
   color: $vanilla-color-white;
-
-  button {
-    @include vanilla-button-ghost-light();
-  }
 }
 
 ///
@@ -74,3 +57,70 @@
   @warn 'vanilla-alert--shout is deprecated. Use vanilla-alert--critical instead.';
   @include vanilla-alert--critical();
 }
+
+///
+/// @access private
+@mixin vanilla-alert--states() {
+  &--information {
+    @include vanilla-alert--information();
+  }
+
+  &--success {
+    @include vanilla-alert--success();
+  }
+
+  &--warning {
+    @include vanilla-alert--warning();
+  }
+
+  &--critical {
+    @include vanilla-alert--critical();
+  }
+}
+
+///
+/// @access private
+@mixin vanilla-alert__close() {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 3rem;
+  width: 3rem;
+  font-size: 1.25rem;
+  padding: 0;
+  background-color: transparent;
+  color: inherit;
+  border-width: 0;
+  cursor: pointer;
+  outline: none;
+
+  &::after {
+    font-family: 'Font Awesome 5 Pro';
+    content: '\f00d';
+    font-weight: 300;
+    height: 1.5em;
+    width: 1.5em;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+  }
+
+  &:hover::after,
+  &:focus::after {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+
+///
+/// @access private
+@mixin vanilla-alert__link() {
+  &,
+  &:hover,
+  &:visited {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: bold;
+  }
+}
diff --git a/src/components/alerts/_toast-mixins.scss b/src/components/alerts/_toast-mixins.scss
@@ -0,0 +1,61 @@
+@import 'common';
+@import '~include-media/dist/include-media';
+
+///
+/// @access public
+@mixin vanilla-toast-base() {
+  position: relative;
+  display: flex;
+  align-items: baseline;
+  width: 22rem;
+  max-width: 22rem;
+  min-height: 3rem;
+  padding: 1rem;
+  box-shadow: 0 vanilla-px-to-em(2px) vanilla-px-to-em(6px) rgba(0, 0, 0, 0.15);
+}
+
+///
+/// @access public
+@mixin vanilla-toast__body() {
+  margin-bottom: 0;
+  padding-left: 1rem;
+  padding-right: 3rem;
+  line-height: 1.5;
+}
+
+///
+/// @access public
+@mixin vanilla-toast--timeline() {
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0.3rem;
+    background-color: rgba(0, 0, 0, 0.25);
+  }
+}
+
+///
+/// @access public
+@mixin vanilla-toast() {
+  @include vanilla-toast-base();
+  @include vanilla-alert--states();
+
+  &--timeline {
+    @include vanilla-toast--timeline();
+  }
+
+  &__body {
+    @include vanilla-toast__body();
+  }
+
+  &__close {
+    @include vanilla-alert__close();
+  }
+
+  a {
+    @include vanilla-alert__link();
+  }
+}
diff --git a/src/components/alerts/_toast.scss b/src/components/alerts/_toast.scss
@@ -0,0 +1,5 @@
+@import 'toast-mixins';
+
+.sdv-toast {
+  @include vanilla-toast();
+}
diff --git a/src/components/alerts/alert-ribbon.md b/src/components/alerts/alert-ribbon.md
@@ -6,7 +6,7 @@ guid: component-alertribbon
 ---
 
 # Usage
-The alert ribbon component has three different severity levels: whisper, talk and shout. Talk and shout messages should be displayed with the exclamation triangle icon on its left.
+The alert ribbon component has four different states: information, success, warning and critical.
 
 There are three ways to use this component.
 
@@ -23,7 +23,7 @@ These will be explained in the examples section, below the component preview.
 ## Information
 
 ```html
-<div class="sdv-alert-ribbon" role="alert">
+<div class="sdv-alert-ribbon sdv-alert-ribbon--information" role="alert">
     <i class="fas fa-info-square sdv-icon-left"></i>
     <p><strong>Information!</strong> Visste du att du kan lämna in din deklaration via din internetbank?</p>
     <button class="sdv-alert-ribbon__button">Visa hur</button>