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, diff --git a/src/_colors.scss b/src/_colors.scss index f0e0049b..8c9a898f 100644 --- 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 index e645c963..b6a3b15a 100644 --- 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 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 -