From 886a7abc558cc6e4a1e95e09f55f129269688b3a Mon Sep 17 00:00:00 2001 From: Amanda Luker Date: Fri, 22 Sep 2023 17:56:27 -0500 Subject: [PATCH 1/6] feat(49): status component --- src/components/status/_status.scss | 32 ++++++++++++++++++ src/components/status/status.stories.js | 10 ++++++ src/components/status/status.twig | 44 +++++++++++++++++++++++++ src/components/status/status.yml | 11 +++++++ 4 files changed, 97 insertions(+) create mode 100644 src/components/status/_status.scss create mode 100644 src/components/status/status.stories.js create mode 100644 src/components/status/status.twig create mode 100644 src/components/status/status.yml diff --git a/src/components/status/_status.scss b/src/components/status/_status.scss new file mode 100644 index 0000000..1c0977b --- /dev/null +++ b/src/components/status/_status.scss @@ -0,0 +1,32 @@ +.status__list { + @include list-reset; + + margin-bottom: var(--spacing-lg); +} + +.status { + display: block; + margin-bottom: var(--spacing-md); + padding: var(--spacing-lg); + text-align: center; + + &--info { + background-color: var(--status-color-info-bg); + color: var(--status-color-info-label); + } + + &--danger { + background-color: var(--status-color-danger-bg); + color: var(--status-color-danger-label); + } + + &--success { + background-color: var(--status-color-success-bg); + color: var(--status-color-success-label); + } + + &--warning { + background-color: var(--status-color-warning-bg); + color: var(--status-color-warning-label); + } +} diff --git a/src/components/status/status.stories.js b/src/components/status/status.stories.js new file mode 100644 index 0000000..9adc676 --- /dev/null +++ b/src/components/status/status.stories.js @@ -0,0 +1,10 @@ +import status from './status.twig'; + +import statusData from './status.yml'; + +/** + * Storybook Definition. + */ +export default { title: 'Components/Status' }; + +export const statusExamples = () => status(statusData); diff --git a/src/components/status/status.twig b/src/components/status/status.twig new file mode 100644 index 0000000..6c79022 --- /dev/null +++ b/src/components/status/status.twig @@ -0,0 +1,44 @@ +{# +/** + * @file + * Theme override for status messages. + * + * Displays status, error, and warning messages, grouped by type. + * + * An invisible heading identifies the messages for assistive technology. + * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html + * for info. + * + * Add an ARIA label to the contentinfo area so that assistive technology + * user agents will better describe this landmark. + * + * Available variables: + * - message_list: List of messages to be displayed, grouped by type. + * - status_headings: List of all status types. + * - display: (optional) May have a value of 'status' or 'error' when only + * displaying messages of that specific type. + * - attributes: HTML attributes for the element, including: + * - class: HTML classes. + */ +#} +{% set status__base_class = 'status' %} +
+ {% for type, messages in message_list %} +
+ {% if type == 'error' %} +
+ {% endif %} + {% if type %} + + {% endif %} +
    + {% for message in messages %} +
  • {{ message }}
    • + {% endfor %} +
+ {% if type == 'error' %} +
+ {% endif %} +
+ {% endfor %} +
diff --git a/src/components/status/status.yml b/src/components/status/status.yml new file mode 100644 index 0000000..86f9208 --- /dev/null +++ b/src/components/status/status.yml @@ -0,0 +1,11 @@ +presentational: TRUE +attributes: '' +message_list: + info: + message: 'This is an info message' + danger: + message: 'This is a danger message' + success: + message: 'This is a success message' + warning: + message: 'This is a warning message' From eecebd35d24f4a42763a46deab7aa347eb426fa8 Mon Sep 17 00:00:00 2001 From: mndonx Date: Tue, 26 Sep 2023 19:50:44 +0000 Subject: [PATCH 2/6] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index f3bda54..1f871ad 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Sep 2023 21:25:45 GMT + * Generated on Tue, 26 Sep 2023 19:50:42 GMT */ :root { From 3184460c6076954bab7ddfb2d2715d40239b120a Mon Sep 17 00:00:00 2001 From: Randy Oest Date: Wed, 27 Sep 2023 11:13:03 -0400 Subject: [PATCH 3/6] Update status tokens --- src/tokens/figma.tokens.json | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index 2ed0e23..d366cd3 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -1995,11 +1995,7 @@ }, "font-size": { "header": { - "value": "{font-size.h2}", - "type": "fontSizes" - }, - "body": { - "value": "{font-size.body}", + "value": "{font-size.h5}", "type": "fontSizes" } } From a7e40eca20fa946d103105c0672ee73d561d757b Mon Sep 17 00:00:00 2001 From: Randy Oest Date: Wed, 27 Sep 2023 11:15:32 -0400 Subject: [PATCH 4/6] Status tokens --- src/tokens/figma.tokens.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tokens/figma.tokens.json b/src/tokens/figma.tokens.json index d366cd3..76b3619 100644 --- a/src/tokens/figma.tokens.json +++ b/src/tokens/figma.tokens.json @@ -1958,7 +1958,7 @@ "type": "color" }, "label": { - "value": "{color.white}", + "value": "#272727", "type": "color" } }, @@ -1988,7 +1988,7 @@ "type": "color" }, "label": { - "value": "{color.white}", + "value": "#333333", "type": "color" } } From 23c812e41f4d473931d03efb04be31a9388a0069 Mon Sep 17 00:00:00 2001 From: Randy Oest Date: Wed, 27 Sep 2023 11:18:17 -0400 Subject: [PATCH 5/6] feat(49): process tokens --- src/components/tokens/_tokens.scss | 9 ++++----- src/tokens/transformed.tokens.json | 10 +++------- 2 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index 1f871ad..c4a82b4 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 26 Sep 2023 19:50:42 GMT + * Generated on Wed, 27 Sep 2023 15:17:18 GMT */ :root { @@ -33,15 +33,14 @@ --table-color-header-icon: #9ce1ff; --table-color-border: #d4d7d8; --status-color-info-bg: #16bdde; - --status-color-info-label: #ffffff; + --status-color-info-label: #272727; --status-color-danger-bg: #BD1919; --status-color-danger-label: #ffffff; --status-color-success-bg: #337B32; --status-color-success-label: #ffffff; --status-color-warning-bg: #F6C40F; - --status-color-warning-label: #ffffff; - --status-font-size-header: 37; - --status-font-size-body: 18; + --status-color-warning-label: #333333; + --status-font-size-header: 21; --selectdropdown-color-label: #00202e; --selectdropdown-color-label-disabled: #a9afb1; --selectdropdown-color-button-fill: #ffffff; diff --git a/src/tokens/transformed.tokens.json b/src/tokens/transformed.tokens.json index 9cab2a1..ba7c5c0 100644 --- a/src/tokens/transformed.tokens.json +++ b/src/tokens/transformed.tokens.json @@ -158,7 +158,7 @@ "type": "color" }, "label": { - "value": "#ffffff", + "value": "#272727", "type": "color" } }, @@ -188,18 +188,14 @@ "type": "color" }, "label": { - "value": "#ffffff", + "value": "#333333", "type": "color" } } }, "font-size": { "header": { - "value": 37, - "type": "fontSizes" - }, - "body": { - "value": 18, + "value": 21, "type": "fontSizes" } } From 5fbb0a8d8fea736095b7fcb50c4c25e746830218 Mon Sep 17 00:00:00 2001 From: amazingrando Date: Wed, 27 Sep 2023 15:20:32 +0000 Subject: [PATCH 6/6] feat: create tokens --- src/components/tokens/_tokens.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/_tokens.scss b/src/components/tokens/_tokens.scss index c4a82b4..6f04190 100644 --- a/src/components/tokens/_tokens.scss +++ b/src/components/tokens/_tokens.scss @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Wed, 27 Sep 2023 15:17:18 GMT + * Generated on Wed, 27 Sep 2023 15:20:31 GMT */ :root {