feat(49): status component

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);
+  }
+}

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);

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' %}
+<div {{ bem('wrapper', [], status__base_class) }}>
+  {% for type, messages in message_list %}
+    <div aria-label="{{ type }}"{{ attributes|without('aria-label') }}>
+      {% if type == 'error' %}
+        <div role="alert">
+      {% endif %}
+        {% if type %}
+          <h2 class="visually-hidden">{{ type }}</h2>
+        {% endif %}
+        <ul {{ bem('list', [], status__base_class)}}>
+          {% for message in messages %}
+            <li {{ bem(status__base_class, [type])}}>{{ message }}</li>
+          {% endfor %}
+        </ul>
+      {% if type == 'error' %}
+        </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>

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'

src/components/tokens/_tokens.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 26 Sep 2023 19:47:28 GMT
+ * Generated on Wed, 27 Sep 2023 15:20:31 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;

src/tokens/figma.tokens.json

@@ -1958,7 +1958,7 @@
             "type": "color"
           },
           "label": {
-            "value": "{color.white}",
+            "value": "#272727",
             "type": "color"
           }
         },
@@ -1988,18 +1988,14 @@
             "type": "color"
           },
           "label": {
-            "value": "{color.white}",
+            "value": "#333333",
             "type": "color"
           }
         }
       },
       "font-size": {
         "header": {
-          "value": "{font-size.h2}",
-          "type": "fontSizes"
-        },
-        "body": {
-          "value": "{font-size.body}",
+          "value": "{font-size.h5}",
           "type": "fontSizes"
         }
       }

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"
       }
     }