From 2ee62c89dd81a7a8d946837a940ef17992b6e9e1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 12 Dec 2020 01:45:49 +0000 Subject: [PATCH 01/13] chore(deps): bump ini from 1.3.5 to 1.3.8 Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8. - [Release notes](https://github.com/isaacs/ini/releases) - [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.8) Signed-off-by: dependabot[bot] --- package-lock.json | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index be84acad..814cf400 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8535,12 +8535,6 @@ "dev": true, "optional": true }, - "ini": { - "version": "1.3.5", - "bundled": true, - "dev": true, - "optional": true - }, "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, @@ -10318,9 +10312,9 @@ "dev": true }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "inquirer": { @@ -14818,11 +14812,6 @@ "bundled": true, "dev": true }, - "ini": { - "version": "1.3.5", - "bundled": true, - "dev": true - }, "init-package-json": { "version": "1.10.3", "bundled": true, From 081a739d47faed48b7cb3fc75838e95f4ab9959f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20R=C3=A5gmo?= Date: Wed, 16 Dec 2020 13:25:04 +0100 Subject: [PATCH 02/13] fix(datepicker): include button and dropdown styles fix #217 --- src/components/datepicker/_datepicker.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/datepicker/_datepicker.scss b/src/components/datepicker/_datepicker.scss index 3a2d63ba..eb8e52f1 100644 --- a/src/components/datepicker/_datepicker.scss +++ b/src/components/datepicker/_datepicker.scss @@ -5,6 +5,8 @@ //// @import './datepicker-mixins'; +@import '../buttons/button'; +@import '../inputs/dropdown'; @include _vanilla-exports('vanilla-datepicker') { .sdv-datepicker { From 8ea212160f3011e4f04a6104981f389bb7855f5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20R=C3=A5gmo?= Date: Thu, 17 Dec 2020 14:27:31 +0100 Subject: [PATCH 03/13] fix(progress-bar): add color parameter fix #127 --- .../progress-bars/_progress-bar-mixins.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/progress-bars/_progress-bar-mixins.scss b/src/components/progress-bars/_progress-bar-mixins.scss index 846c86e5..b47ddd08 100644 --- a/src/components/progress-bars/_progress-bar-mixins.scss +++ b/src/components/progress-bars/_progress-bar-mixins.scss @@ -14,13 +14,13 @@ $vanilla-progressbar-keyframes: 'sdv-progressbar-loading' !default; /// Mixes in progress bar styles /// /// @access public -@mixin vanilla-progress-bar() { +@mixin vanilla-progress-bar($color: $vanilla-color-green) { appearance: none; // Clear style height: vanilla-px-to-rem(5); width: 100%; position: relative; overflow: hidden; - color: $vanilla-color-green; // IE fallback for ::-ms-fill + color: $color; // IE fallback for ::-ms-fill border-width: 0; // Firefox adds border background-color: $vanilla-color-grey8; @@ -31,7 +31,7 @@ $vanilla-progressbar-keyframes: 'sdv-progressbar-loading' !default; left: -200px; width: 200px; height: vanilla-px-to-rem(5); - background-color: $vanilla-color-green; + background-color: $color; animation: #{$vanilla-progressbar-keyframes} 2s linear infinite; } @@ -83,21 +83,21 @@ $vanilla-progressbar-keyframes: 'sdv-progressbar-loading' !default; } /// @access public -@mixin vanilla-progress-bar--determinate() { +@mixin vanilla-progress-bar--determinate($color: $vanilla-color-green) { &::before { content: none; } // Progress &::-webkit-progress-value { - background-color: $vanilla-color-green; + background-color: $color; } &::-moz-progress-bar { - background-color: $vanilla-color-green; + background-color: $color; } &::-ms-fill { - background-color: $vanilla-color-green; + background-color: $color; } } From 750f212d11b557a64c2d0e73af7c3dfbd1d39251 Mon Sep 17 00:00:00 2001 From: S2141C Date: Fri, 18 Dec 2020 16:21:02 +0100 Subject: [PATCH 04/13] feat(contextual-help-button): add component fix #194 --- src/_vanilla-all.scss | 1 + .../tooltips/_contextual-help-mixins.scss | 29 ++++++++ src/components/tooltips/_contextual-help.scss | 7 ++ src/components/tooltips/contextual-help.md | 71 +++++++++++++++++++ 4 files changed, 108 insertions(+) create mode 100644 src/components/tooltips/_contextual-help-mixins.scss create mode 100644 src/components/tooltips/_contextual-help.scss create mode 100644 src/components/tooltips/contextual-help.md diff --git a/src/_vanilla-all.scss b/src/_vanilla-all.scss index e645c963..be508795 100644 --- a/src/_vanilla-all.scss +++ b/src/_vanilla-all.scss @@ -29,6 +29,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/tooltips/_contextual-help-mixins.scss b/src/components/tooltips/_contextual-help-mixins.scss new file mode 100644 index 00000000..bdfa7ae2 --- /dev/null +++ b/src/components/tooltips/_contextual-help-mixins.scss @@ -0,0 +1,29 @@ +//// +/// Mixins for Contextual Help Button +/// @group Component +/// @author SEB Design Library +//// + +@import '../../colors'; +@import '../../variables'; + +@mixin vanilla-contextual-help() { + font-size: 1em; + border-width: 0; + height: 2em; + width: 2em; + padding: 0; + background-color: transparent; + position: relative; + cursor: help; + + &::after { + font-family: 'Font Awesome 5 Pro'; + content: '\f2fd'; + font-size: 1em; + font-weight: 300; + color: $vanilla-color-darkblue2; + position: relative; + top: vanilla-px-to-em(1px); + } +} diff --git a/src/components/tooltips/_contextual-help.scss b/src/components/tooltips/_contextual-help.scss new file mode 100644 index 00000000..0beaae24 --- /dev/null +++ b/src/components/tooltips/_contextual-help.scss @@ -0,0 +1,7 @@ +@import 'contextual-help-mixins'; + +@include _vanilla-exports('vanilla-contextual-help') { + .sdv-contextual-help { + @include vanilla-contextual-help(); + } +} diff --git a/src/components/tooltips/contextual-help.md b/src/components/tooltips/contextual-help.md new file mode 100644 index 00000000..47b888fe --- /dev/null +++ b/src/components/tooltips/contextual-help.md @@ -0,0 +1,71 @@ +--- +title: Contextual Help Button +componentid: component-contextual-help +variantid: default +guid: component-contextual-help-default +--- + +# Usage + +Import classes: + +```scss +@import 'vanilla/components/tooltips/contextual-help'; +``` + +:::componentpreview + +## Default + +```html +
+ +
+ +``` + +## Input + +```html +
+ + + + + + +
+``` + +## Table + +```html +
+ + + + + + + + + + + + + +
Skuld 1 000 000 kr
Amortering 2%5 500 kr
Räntekostnad 2 340 kr
+
+``` + +::: From 2bb5b33b5840a00ed74e53a4619e81256c5300b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20R=C3=A5gmo?= Date: Thu, 17 Dec 2020 13:49:15 +0100 Subject: [PATCH 05/13] feat(toast): add toast alert --- src/_colors.scss | 6 + src/_vanilla-all.scss | 1 + .../alerts/_alert-ribbon-mixins.scss | 31 +++-- src/components/alerts/_common.scss | 92 ++++++++++--- src/components/alerts/_toast-mixins.scss | 61 +++++++++ src/components/alerts/_toast.scss | 5 + src/components/alerts/alert-ribbon.md | 4 +- src/components/alerts/toast.md | 129 ++++++++++++++++++ src/components/badge/_badge-mixins.scss | 8 +- 9 files changed, 297 insertions(+), 40 deletions(-) create mode 100644 src/components/alerts/_toast-mixins.scss create mode 100644 src/components/alerts/_toast.scss create mode 100644 src/components/alerts/toast.md diff --git a/src/_colors.scss b/src/_colors.scss index f0e0049b..6a34ff67 100644 --- a/src/_colors.scss +++ b/src/_colors.scss @@ -72,6 +72,12 @@ $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; + /// Returns a shade of a color /// /// @access public diff --git a/src/_vanilla-all.scss b/src/_vanilla-all.scss index e645c963..863e3211 100644 --- a/src/_vanilla-all.scss +++ b/src/_vanilla-all.scss @@ -9,6 +9,7 @@ // All components @import 'components/alerts/alert-ribbon'; +@import 'components/alerts/toast'; @import 'components/badge/badge'; @import 'components/buttons/button'; @import 'components/breadcrumbs/breadcrumbs'; diff --git a/src/components/alerts/_alert-ribbon-mixins.scss b/src/components/alerts/_alert-ribbon-mixins.scss index c42a3590..ae2d22a9 100644 --- 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 index 39077fcc..fdcea6e7 100644 --- 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 new file mode 100644 index 00000000..9c0e3dbb --- /dev/null +++ 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 new file mode 100644 index 00000000..592755f7 --- /dev/null +++ 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 index 0d0235e8..583c4e1d 100644 --- 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 -