From 46b0c9ff2c802fcd96a11201be9a75a5f38347cf Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 14:46:12 -0700 Subject: [PATCH 01/23] Add new alert modifiers and new alert variation prototype --- src/components/alert/alert.scss | 29 +++++++++++++-- src/components/alert/alert.stories.mdx | 36 ++++++++++++++++++ src/components/alert/alert.twig | 14 ++++++- .../single-page/example/example.scss | 37 +++++++++++++++++++ .../single-page/example/example.twig | 16 ++++++++ static/media/offline.svg | 19 ++++++++++ 6 files changed, 146 insertions(+), 5 deletions(-) create mode 100644 static/media/offline.svg diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 360f1f8fe..0ae984980 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -35,10 +35,10 @@ display: grid; grid-column-gap: ms.step(1); grid-template-areas: - '. . dismiss' - '. content dismiss' - '. . dismiss'; - grid-template-columns: 0 1fr minmax(0, auto); + 'icon . dismiss' + 'icon content dismiss' + 'icon . dismiss'; + grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); grid-template-rows: ms.step(-1) minmax(0, auto) ms.step(-1); /// We only bother constraining this element when it's full-width. @@ -89,3 +89,24 @@ transform: scale(scale.$effect-shrink); } } + +.c-alert__icon { + align-items: center; + background-color: lighten(color.$base-orange, 30%); + border-bottom-left-radius: size.$border-radius-medium; + border-top-left-radius: size.$border-radius-medium; + color: color.$base-orange; + display: flex; + grid-area: icon; + justify-content: center; + width: ms.step(5); +} + +// Adds a box shadow to add the appearance of the alert floating +// above the containers below. Floating has a white background for higher +// contrast between the background and the shadow. +.c-alert__floating { + background-color: white; + box-shadow: 0 0 0 2px hsla(224, 65%, 16%, 0.2), + 4px 4px 0 2px hsla(224, 65%, 16%, 0.1); +} diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index d864274ac..31ea6f8b4 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -68,11 +68,47 @@ By default, alerts assume they'll display within page content. For alerts meant +## Icon + +An option to add an icon to the alert. You can add any icon name from our library in the `icon_name` property. Right now, the color is hardcoded to orange, but it would be nice to add more color options in the future. + + + + {(args) => template(args)} + + + +## Floating + +By adding `floating: true`, a light border and shadow will be added to the alert for a floating effect. The background is white to improve the contrast between the border, shadow and background. In the future, we could make it a possibilty to change the background color by itself. + + + + {(args) => template(args)} + + + ## Template Properties - `class` (string) +- `icon_name` (string) - `dismissable` (boolean, default `false`) - `full_width` (boolean, default `false`) +- `floating` (boolean, default `false`) - `message` (string, default `'Hello world!'`) - `tag_name` (string, default `'div'`) diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index 0614e2cbf..469c2bb7a 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -1,7 +1,19 @@ {% set tag_name = tag_name|default('div') %} -<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if class %} {{ class }}{% endif %}"> +<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %} {% if floating %} c-alert__floating {% endif %}{% if class %} {{ class }}{% endif %}">
+ {% if block('icon')|trim or icon_name %} + + {% block icon %} + {% if icon_name %} + {% include '@cloudfour/components/icon/icon.twig' with { + name: icon_name, + aria_hidden: true + } only %} + {% endif %} + {% endblock %} + + {% endif %}
{% block content %}

diff --git a/src/prototypes/single-page/example/example.scss b/src/prototypes/single-page/example/example.scss index e9afcd292..52bd41409 100644 --- a/src/prototypes/single-page/example/example.scss +++ b/src/prototypes/single-page/example/example.scss @@ -1,9 +1,46 @@ @use "../../../mixins/ms"; @use "../../../compiled/tokens/scss/size"; +@use "../../../compiled/tokens/scss/breakpoint"; + #single-page { .main-container { padding-top: ms.step(6); padding-bottom: ms.step(6); + position: relative; + } + + .alert-container { + position: absolute; + background-color: white; + box-shadow: 0 0 0 2px hsla(224,65%,16%,0.2), + 4px 4px 0 2px hsla(224,65%,16%,0.1); + top: -.5em; + left: 10%; + @media (min-width: breakpoint.$l) { + top: -1.5em; + left: 35%; + } + + .icon { + position: absolute; + left: 0; + top: 0; + width: 50px; + height: 100%; + background-color: #ffdebd; + border-top-left-radius: size.$border-radius-medium; + border-bottom-left-radius: size.$border-radius-medium; + display: flex; + justify-content: center; + align-items: center; + @media (min-width: breakpoint.$l) { + width: 60px; + } + } + + .text { + margin-left: 3em; + } } } diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig index 1317cbdf1..e71fd876e 100644 --- a/src/prototypes/single-page/example/example.twig +++ b/src/prototypes/single-page/example/example.twig @@ -39,6 +39,22 @@ {% embed '@cloudfour/objects/container/container.twig' with { class: 'o-container--prose o-container--pad main-container'} %} {% block content %} + + + {% embed '@cloudfour/components/alert/alert.twig' with { + "dismissable": true, + class: 'alert-container' + } only %} + {% block content %} +

+ +
+

+ You appear to be offline. Try again. +

+ {% endblock %} + {% endembed %} + {% embed '@cloudfour/objects/rhythm/rhythm.twig' with { class: 'o-rhythm--generous-headings' } %} {% block content %} diff --git a/static/media/offline.svg b/static/media/offline.svg new file mode 100644 index 000000000..ee3c46daa --- /dev/null +++ b/static/media/offline.svg @@ -0,0 +1,19 @@ + + + + Group 2 + Created with Sketch. + + + + + + + + + + + + + + From 707dc57b640f21316244f3ce1981a4b9aeec4afc Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 15:06:11 -0700 Subject: [PATCH 02/23] Add changeset --- .changeset/two-forks-kiss.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/two-forks-kiss.md diff --git a/.changeset/two-forks-kiss.md b/.changeset/two-forks-kiss.md new file mode 100644 index 000000000..57ba469b8 --- /dev/null +++ b/.changeset/two-forks-kiss.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Add 2 new modifiers for the alert pattern From 8714b226436d93b2350953de3dce729d0e812424 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 15:42:49 -0700 Subject: [PATCH 03/23] Update .changeset/two-forks-kiss.md Co-authored-by: Tyler Sticka --- .changeset/two-forks-kiss.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/two-forks-kiss.md b/.changeset/two-forks-kiss.md index 57ba469b8..2bd3815d6 100644 --- a/.changeset/two-forks-kiss.md +++ b/.changeset/two-forks-kiss.md @@ -2,4 +2,4 @@ '@cloudfour/patterns': minor --- -Add 2 new modifiers for the alert pattern +Add optional icon and floating modifier to the Alert component From 9d1c6a5d2a7a760d25ca4915d42a4e92a674a24b Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 15:43:14 -0700 Subject: [PATCH 04/23] Update src/components/alert/alert.stories.mdx Co-authored-by: Tyler Sticka --- src/components/alert/alert.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index 31ea6f8b4..197170d7d 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -86,7 +86,7 @@ An option to add an icon to the alert. You can add any icon name from our librar ## Floating -By adding `floating: true`, a light border and shadow will be added to the alert for a floating effect. The background is white to improve the contrast between the border, shadow and background. In the future, we could make it a possibilty to change the background color by itself. +By adding `floating: true`, a light border and shadow will be added to the alert for a floating effect. The background is white to improve the contrast between the border, shadow and background. In the future, we could make it a possibility to change the background color by itself. Date: Mon, 4 Oct 2021 15:43:24 -0700 Subject: [PATCH 05/23] Update src/components/alert/alert.twig Co-authored-by: Tyler Sticka --- src/components/alert/alert.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index 469c2bb7a..493165a71 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -1,6 +1,6 @@ {% set tag_name = tag_name|default('div') %} -<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %} {% if floating %} c-alert__floating {% endif %}{% if class %} {{ class }}{% endif %}"> +<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if floating %} c-alert--floating {% endif %}{% if class %} {{ class }}{% endif %}">
{% if block('icon')|trim or icon_name %} From 7b2c55dda859185efcaace39710bf235076e8586 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 16:37:48 -0700 Subject: [PATCH 06/23] Fix modifier notation --- src/components/alert/alert.scss | 42 ++++++++++++++++----------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 0ae984980..f748c2daf 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -48,6 +48,27 @@ } } +// Adds a box shadow to add the appearance of the alert floating +// above the containers below. Floating has a white background for higher +// contrast between the background and the shadow. +.c-alert--floating { + background-color: white; + box-shadow: 0 0 0 2px hsla(224, 65%, 16%, 0.2), + 4px 4px 0 2px hsla(224, 65%, 16%, 0.1); +} + +.c-alert--icon { + align-items: center; + background-color: lighten(color.$base-orange, 30%); + border-bottom-left-radius: size.$border-radius-medium; + border-top-left-radius: size.$border-radius-medium; + color: color.$base-orange; + display: flex; + grid-area: icon; + justify-content: center; + width: ms.step(5); +} + .c-alert__content { grid-area: content; } @@ -89,24 +110,3 @@ transform: scale(scale.$effect-shrink); } } - -.c-alert__icon { - align-items: center; - background-color: lighten(color.$base-orange, 30%); - border-bottom-left-radius: size.$border-radius-medium; - border-top-left-radius: size.$border-radius-medium; - color: color.$base-orange; - display: flex; - grid-area: icon; - justify-content: center; - width: ms.step(5); -} - -// Adds a box shadow to add the appearance of the alert floating -// above the containers below. Floating has a white background for higher -// contrast between the background and the shadow. -.c-alert__floating { - background-color: white; - box-shadow: 0 0 0 2px hsla(224, 65%, 16%, 0.2), - 4px 4px 0 2px hsla(224, 65%, 16%, 0.1); -} From 136baa3e41fe7feb0f35ab15435595e14af6f4f7 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 16:39:21 -0700 Subject: [PATCH 07/23] Change description --- src/components/alert/alert.stories.mdx | 2 +- src/components/alert/alert.twig | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index 197170d7d..38c0611f3 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -70,7 +70,7 @@ By default, alerts assume they'll display within page content. For alerts meant ## Icon -An option to add an icon to the alert. You can add any icon name from our library in the `icon_name` property. Right now, the color is hardcoded to orange, but it would be nice to add more color options in the future. +An option to add an icon to the alert. You can add any icon name from our library in the `icon_name` property. Right now, the color is hardcoded to orange to satisfy the current use case of our offline notification, but it would be nice to add more color options in the future.
{% if block('icon')|trim or icon_name %} - + {% block icon %} {% if icon_name %} {% include '@cloudfour/components/icon/icon.twig' with { From d89f3cb9f8ec9339225b3f45ba1d9a7e638a822f Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Mon, 4 Oct 2021 16:43:13 -0700 Subject: [PATCH 08/23] Utilize modifiers in prototype --- .../single-page/example/example.scss | 24 ------------------- .../single-page/example/example.twig | 7 +++--- 2 files changed, 3 insertions(+), 28 deletions(-) diff --git a/src/prototypes/single-page/example/example.scss b/src/prototypes/single-page/example/example.scss index 52bd41409..1f4b6fa7d 100644 --- a/src/prototypes/single-page/example/example.scss +++ b/src/prototypes/single-page/example/example.scss @@ -12,35 +12,11 @@ .alert-container { position: absolute; - background-color: white; - box-shadow: 0 0 0 2px hsla(224,65%,16%,0.2), - 4px 4px 0 2px hsla(224,65%,16%,0.1); top: -.5em; left: 10%; @media (min-width: breakpoint.$l) { top: -1.5em; left: 35%; } - - .icon { - position: absolute; - left: 0; - top: 0; - width: 50px; - height: 100%; - background-color: #ffdebd; - border-top-left-radius: size.$border-radius-medium; - border-bottom-left-radius: size.$border-radius-medium; - display: flex; - justify-content: center; - align-items: center; - @media (min-width: breakpoint.$l) { - width: 60px; - } - } - - .text { - margin-left: 3em; - } } } diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig index e71fd876e..2ca025a58 100644 --- a/src/prototypes/single-page/example/example.twig +++ b/src/prototypes/single-page/example/example.twig @@ -43,13 +43,12 @@ {% embed '@cloudfour/components/alert/alert.twig' with { "dismissable": true, + floating: true, + icon_name: 'bell', class: 'alert-container' } only %} {% block content %} -
- -
-

+

You appear to be offline. Try again.

{% endblock %} From afcb635dcd6a3368cf44173645a0107a5f81c6d7 Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 5 Oct 2021 09:52:28 -0700 Subject: [PATCH 09/23] Add theme support for icon modifier --- src/components/alert/alert.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index f748c2daf..3dbb3450a 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -5,6 +5,17 @@ @use '../../compiled/tokens/scss/transition'; @use '../../mixins/focus'; @use '../../mixins/ms'; +@use '../../mixins/theme'; + +@include theme.props() { + --theme-color-background-icon: #{lighten(color.$base-orange, 30%)}; + --theme-color-icon: #{color.$base-orange}; +} + +@include theme.props(dark) { + --theme-color-background-icon: #{color.$base-orange}; + --theme-color-icon: #{lighten(color.$base-orange, 30%)}; +} .c-alert { background: var(--theme-color-background-secondary); @@ -59,10 +70,10 @@ .c-alert--icon { align-items: center; - background-color: lighten(color.$base-orange, 30%); + background-color: var(--theme-color-background-icon); border-bottom-left-radius: size.$border-radius-medium; border-top-left-radius: size.$border-radius-medium; - color: color.$base-orange; + color: var(--theme-color-icon); display: flex; grid-area: icon; justify-content: center; From 7b5ae1e441e403fff3eb89876221a9ee567c6a2e Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 5 Oct 2021 10:18:50 -0700 Subject: [PATCH 10/23] Add styling note --- src/components/alert/alert.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 3dbb3450a..6bada1c07 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -68,6 +68,10 @@ 4px 4px 0 2px hsla(224, 65%, 16%, 0.1); } +/** + * 1. This number was chosen because in combination with the usual + * single-line height of the element, it makes a perfect square. + */ .c-alert--icon { align-items: center; background-color: var(--theme-color-background-icon); @@ -77,7 +81,7 @@ display: flex; grid-area: icon; justify-content: center; - width: ms.step(5); + width: ms.step(5); /* 1 */ } .c-alert__content { From 010c80e59cff60ca2d61d405efb3c22bafb062af Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 5 Oct 2021 12:16:33 -0700 Subject: [PATCH 11/23] Replace values with tokens --- src/components/alert/alert.scss | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 6bada1c07..c25f889e0 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -1,4 +1,5 @@ @use '../../compiled/tokens/scss/color'; +@use 'sass:color' as sass-color; @use '../../compiled/tokens/scss/ease'; @use '../../compiled/tokens/scss/scale'; @use '../../compiled/tokens/scss/size'; @@ -10,11 +11,13 @@ @include theme.props() { --theme-color-background-icon: #{lighten(color.$base-orange, 30%)}; --theme-color-icon: #{color.$base-orange}; + // --theme-color-text: #{color.$text-light-emphasis}; } @include theme.props(dark) { --theme-color-background-icon: #{color.$base-orange}; --theme-color-icon: #{lighten(color.$base-orange, 30%)}; + // --theme-color-text: #{color.$text-dark}; } .c-alert { @@ -63,9 +66,12 @@ // above the containers below. Floating has a white background for higher // contrast between the background and the shadow. .c-alert--floating { - background-color: white; - box-shadow: 0 0 0 2px hsla(224, 65%, 16%, 0.2), - 4px 4px 0 2px hsla(224, 65%, 16%, 0.1); + background-color: color.$text-light-emphasis; + box-shadow: 0 0 0 size.$edge-medium + sass-color.change(color.$brand-primary-darker, $alpha: 0.2), + size.$edge-large size.$edge-large 0 size.$edge-medium + sass-color.change(color.$brand-primary-darker, $alpha: 0.1); + color: color.$text-dark; } /** From 3e54a2bfd7aa6430b5acb30202ff9f864dd7263e Mon Sep 17 00:00:00 2001 From: Arianna Chau Date: Tue, 5 Oct 2021 16:45:33 -0700 Subject: [PATCH 12/23] Add themed floating variation --- src/components/alert/alert.scss | 29 +++++++++++++++++++------- src/components/alert/alert.stories.mdx | 20 ++++++++++++++++++ 2 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index c25f889e0..b9ce4db33 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -11,13 +11,11 @@ @include theme.props() { --theme-color-background-icon: #{lighten(color.$base-orange, 30%)}; --theme-color-icon: #{color.$base-orange}; - // --theme-color-text: #{color.$text-light-emphasis}; } @include theme.props(dark) { --theme-color-background-icon: #{color.$base-orange}; --theme-color-icon: #{lighten(color.$base-orange, 30%)}; - // --theme-color-text: #{color.$text-dark}; } .c-alert { @@ -66,12 +64,29 @@ // above the containers below. Floating has a white background for higher // contrast between the background and the shadow. .c-alert--floating { - background-color: color.$text-light-emphasis; - box-shadow: 0 0 0 size.$edge-medium - sass-color.change(color.$brand-primary-darker, $alpha: 0.2), + box-shadow: 0 0 0 size.$edge-medium var(--theme-color-shadow-inner), size.$edge-large size.$edge-large 0 size.$edge-medium - sass-color.change(color.$brand-primary-darker, $alpha: 0.1); - color: color.$text-dark; + var(--theme-color-shadow-outer); + @include theme.styles() { + --theme-color-shadow-inner: #{sass-color.change( + color.$brand-primary-darker, + $alpha: 0.2 + )}; + --theme-color-shadow-outer: #{sass-color.change( + color.$brand-primary-darker, + $alpha: 0.1 + )}; + } + @include theme.styles(dark) { + --theme-color-shadow-inner: #{sass-color.change( + color.$brand-primary-darker, + $alpha: 0.6 + )}; + --theme-color-shadow-outer: #{sass-color.change( + color.$brand-primary-darker, + $alpha: 0.4 + )}; + } } /** diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index 38c0611f3..c6be3daec 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -102,6 +102,26 @@ By adding `floating: true`, a light border and shadow will be added to the alert +When more contrast is desired, you may also attach a theme class to the the floating variation. In this example, the card has a class of `t-light` within a `t-dark` container: + + + + {(args) => template(args)} + + + ## Template Properties - `class` (string) From 2ab6677b0d8599203de52dd984ec426a50f76020 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Mon, 15 Nov 2021 15:04:35 -0800 Subject: [PATCH 13/23] Remove extra white space --- src/components/alert/alert.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index ecc17fa2b..234ff42b0 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -1,6 +1,6 @@ {% set tag_name = tag_name|default('div') %} -<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if floating %} c-alert--floating {% endif %}{% if class %} {{ class }}{% endif %}"> +<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}">
{% if block('icon')|trim or icon_name %} From d0cf805eb9359f7318d42d8cc7a972f70aa517d4 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 16 Nov 2021 10:30:18 -0800 Subject: [PATCH 14/23] Update alert icon class name --- src/components/alert/alert.scss | 2 +- src/components/alert/alert.twig | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 45a0a0367..b62607d87 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -83,7 +83,7 @@ * 1. This number was chosen because in combination with the usual * single-line height of the element, it makes a perfect square. */ -.c-alert--icon { +.c-alert__extra { align-items: center; background-color: var(--theme-color-background-icon); border-bottom-left-radius: size.$border-radius-medium; diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index 234ff42b0..f74511f2e 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -3,7 +3,7 @@ <{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}">
{% if block('icon')|trim or icon_name %} - + {% block icon %} {% if icon_name %} {% include '@cloudfour/components/icon/icon.twig' with { From 9bc1c86897cf616c3455360658c058293080bae0 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 16 Nov 2021 11:29:38 -0800 Subject: [PATCH 15/23] Add offline icon --- src/assets/icons/offline.svg | 14 ++++++++++++++ .../single-page/example/example.twig | 2 +- static/media/offline.svg | 19 ------------------- 3 files changed, 15 insertions(+), 20 deletions(-) create mode 100644 src/assets/icons/offline.svg delete mode 100644 static/media/offline.svg diff --git a/src/assets/icons/offline.svg b/src/assets/icons/offline.svg new file mode 100644 index 000000000..233934b60 --- /dev/null +++ b/src/assets/icons/offline.svg @@ -0,0 +1,14 @@ + + + + + + + + diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig index 2ca025a58..c6deb4e7f 100644 --- a/src/prototypes/single-page/example/example.twig +++ b/src/prototypes/single-page/example/example.twig @@ -44,7 +44,7 @@ {% embed '@cloudfour/components/alert/alert.twig' with { "dismissable": true, floating: true, - icon_name: 'bell', + icon_name: 'offline', class: 'alert-container' } only %} {% block content %} diff --git a/static/media/offline.svg b/static/media/offline.svg deleted file mode 100644 index ee3c46daa..000000000 --- a/static/media/offline.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Group 2 - Created with Sketch. - - - - - - - - - - - - - - From 1583fe7a145ca274fc66299413708b9217e72abd Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 16 Nov 2021 11:34:54 -0800 Subject: [PATCH 16/23] Remove full width modifier --- src/components/alert/alert.stories.mdx | 1 - src/components/alert/alert.twig | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index 91056f388..9c9df6437 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -125,7 +125,6 @@ When more contrast is desired, you may also attach a theme class to the the floa - `class` (string) - `icon_name` (string) - `dismissable` (boolean, default `false`) -- `full_width` (boolean, default `false`) - `floating` (boolean, default `false`) - `message` (string, default `'Hello world!'`) - `tag_name` (string, default `'div'`) diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index f74511f2e..93944d08a 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -1,6 +1,6 @@ {% set tag_name = tag_name|default('div') %} -<{{ tag_name }} class="c-alert{% if full_width %} c-alert--full-width{% endif %}{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}"> +<{{ tag_name }} class="c-alert{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}">
{% if block('icon')|trim or icon_name %} From e3989dc783c96a940b09df575adaa07ab7e9d8f0 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 16 Nov 2021 11:38:56 -0800 Subject: [PATCH 17/23] Update icon property name --- src/components/alert/alert.stories.mdx | 10 +++++----- src/components/alert/alert.twig | 6 +++--- src/prototypes/single-page/example/example.twig | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx index 9c9df6437..b43bee014 100644 --- a/src/components/alert/alert.stories.mdx +++ b/src/components/alert/alert.stories.mdx @@ -68,14 +68,14 @@ Alerts work well even when displayed at full width. Their contents will constrai ## Icon -An option to add an icon to the alert. You can add any icon name from our library in the `icon_name` property. Right now, the color is hardcoded to orange to satisfy the current use case of our offline notification, but it would be nice to add more color options in the future. +An option to add an icon to the alert. You can add any icon name from our library in the `icon` property. Right now, the color is hardcoded to orange to satisfy the current use case of our offline notification, but it would be nice to add more color options in the future. {(args) => template(args)} @@ -93,7 +93,7 @@ By adding `floating: true`, a light border and shadow will be added to the alert message: 'You appear to be offline. 🤔', dismissable: true, floating: true, - icon_name: 'bell', + icon: 'bell', }} > {(args) => template(args)} @@ -112,7 +112,7 @@ When more contrast is desired, you may also attach a theme class to the the floa message: 'You appear to be offline. 🤔', dismissable: true, floating: true, - icon_name: 'bell', + icon: 'bell', class: 't-light', }} > @@ -123,7 +123,7 @@ When more contrast is desired, you may also attach a theme class to the the floa ## Template Properties - `class` (string) -- `icon_name` (string) +- `icon` (string) - `dismissable` (boolean, default `false`) - `floating` (boolean, default `false`) - `message` (string, default `'Hello world!'`) diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index 93944d08a..c11c1c8cd 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -2,12 +2,12 @@ <{{ tag_name }} class="c-alert{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}">
- {% if block('icon')|trim or icon_name %} + {% if block('icon')|trim or icon %} {% block icon %} - {% if icon_name %} + {% if icon %} {% include '@cloudfour/components/icon/icon.twig' with { - name: icon_name, + name: icon, aria_hidden: true } only %} {% endif %} diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig index c6deb4e7f..01af95400 100644 --- a/src/prototypes/single-page/example/example.twig +++ b/src/prototypes/single-page/example/example.twig @@ -44,7 +44,7 @@ {% embed '@cloudfour/components/alert/alert.twig' with { "dismissable": true, floating: true, - icon_name: 'offline', + icon: 'offline', class: 'alert-container' } only %} {% block content %} From f22236963aa0a66d3e4f37750c17f03b02b3a6b5 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 16 Nov 2021 13:29:16 -0800 Subject: [PATCH 18/23] Update icon style on larger screens --- src/components/alert/alert.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index b62607d87..13d8dff0b 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -1,3 +1,4 @@ +@use '../../compiled/tokens/scss/breakpoint'; @use '../../compiled/tokens/scss/color'; @use 'sass:color' as sass-color; @use '../../compiled/tokens/scss/ease'; @@ -93,6 +94,14 @@ grid-area: icon; justify-content: center; width: ms.step(5); /* 1 */ + + // On large screens, when the alert content reaches it's max width and + // the icon no longer touches the edge of its container, we change the + // icon style so it's self contained. + @media (min-width: breakpoint.$xxl) { + border: ms.step(-4) solid var(--theme-color-background-secondary); + border-radius: size.$border-radius-full; + } } .c-alert__content { From 5470d78a5c47d1cc1b90b82b7563c47326a4c4f8 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Tue, 16 Nov 2021 15:25:32 -0800 Subject: [PATCH 19/23] Set icon block --- src/components/alert/alert.twig | 22 +++++++++++-------- .../single-page/example/example.twig | 2 +- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/alert/alert.twig b/src/components/alert/alert.twig index c11c1c8cd..eeb96322f 100644 --- a/src/components/alert/alert.twig +++ b/src/components/alert/alert.twig @@ -1,17 +1,21 @@ {% set tag_name = tag_name|default('div') %} +{% set _icon_block %} + {% block icon %} + {% if icon %} + {% include '@cloudfour/components/icon/icon.twig' with { + name: icon, + aria_hidden: true + } only %} + {% endif %} + {% endblock %} +{% endset %} + <{{ tag_name }} class="c-alert{% if floating %} c-alert--floating{% endif %}{% if class %} {{ class }}{% endif %}">
- {% if block('icon')|trim or icon %} + {% if _icon_block|trim is not empty %} - {% block icon %} - {% if icon %} - {% include '@cloudfour/components/icon/icon.twig' with { - name: icon, - aria_hidden: true - } only %} - {% endif %} - {% endblock %} + {{_icon_block}} {% endif %}
diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig index 01af95400..72b590ec2 100644 --- a/src/prototypes/single-page/example/example.twig +++ b/src/prototypes/single-page/example/example.twig @@ -42,7 +42,7 @@ {% embed '@cloudfour/components/alert/alert.twig' with { - "dismissable": true, + dismissable: true, floating: true, icon: 'offline', class: 'alert-container' From ddeda9c809d7043a1df2420663c03a86f82425e1 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 17 Nov 2021 08:45:45 -0800 Subject: [PATCH 20/23] Update offline icon --- src/assets/icons/offline.svg | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/assets/icons/offline.svg b/src/assets/icons/offline.svg index 233934b60..4a7b4e49a 100644 --- a/src/assets/icons/offline.svg +++ b/src/assets/icons/offline.svg @@ -1,14 +1,7 @@ - - - - - + + From 14d72160035ebe1c79a6a19048fbd7f12660c312 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 17 Nov 2021 09:44:34 -0800 Subject: [PATCH 21/23] Update offline icon --- src/assets/icons/offline.svg | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/icons/offline.svg b/src/assets/icons/offline.svg index 4a7b4e49a..b84cf5853 100644 --- a/src/assets/icons/offline.svg +++ b/src/assets/icons/offline.svg @@ -1,7 +1,7 @@ - - + + From 8cadb46781d229bd3e2fef29e82845e6cf531617 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 17 Nov 2021 10:25:48 -0800 Subject: [PATCH 22/23] Increase alert icon size --- src/components/alert/alert.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 13d8dff0b..6e9c4cf29 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -85,6 +85,7 @@ * single-line height of the element, it makes a perfect square. */ .c-alert__extra { + --icon-size: #{size.$icon-medium}; align-items: center; background-color: var(--theme-color-background-icon); border-bottom-left-radius: size.$border-radius-medium; From 41527115082286afcbe374c3c83c2ca8bb7b61a8 Mon Sep 17 00:00:00 2001 From: Danielle Romo Date: Wed, 17 Nov 2021 15:34:43 -0800 Subject: [PATCH 23/23] Update offline icon name --- src/assets/icons/{offline.svg => cloud-slash.svg} | 0 src/prototypes/single-page/example/example.twig | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/assets/icons/{offline.svg => cloud-slash.svg} (100%) diff --git a/src/assets/icons/offline.svg b/src/assets/icons/cloud-slash.svg similarity index 100% rename from src/assets/icons/offline.svg rename to src/assets/icons/cloud-slash.svg diff --git a/src/prototypes/single-page/example/example.twig b/src/prototypes/single-page/example/example.twig index 72b590ec2..7366f2876 100644 --- a/src/prototypes/single-page/example/example.twig +++ b/src/prototypes/single-page/example/example.twig @@ -44,7 +44,7 @@ {% embed '@cloudfour/components/alert/alert.twig' with { dismissable: true, floating: true, - icon: 'offline', + icon: 'cloud-slash', class: 'alert-container' } only %} {% block content %}