Design/error alert (#1937)

* Add error alert and status color section * Add changeset * Change SVG, documentation and add CSS custom properties * Update src/design/colors.stories.mdx Co-authored-by: Tyler Sticka <[email protected]> * Change size of icon Edit changeset message Move content around Delete comments in json file * Add clearer description * Nest c-alert--error class within c-alert__extra class. Co-authored-by: Tyler Sticka <[email protected]>
cloudfour · Jul 19, 2022 · 87f012d · 87f012d
1 parent 3da5b7f
commit 87f012d
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 0 deletions.
diff --git a/.changeset/nervous-glasses-sparkle.md b/.changeset/nervous-glasses-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add new error modifier for the Alert component, confused face icon, and status color design tokens.
diff --git a/src/assets/icons/confused-face.svg b/src/assets/icons/confused-face.svg
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
@@ -16,11 +16,15 @@
       $lightness: 30%
     )};
   --theme-color-icon: #{color.$base-orange};
+  --theme-color-icon-error: #{color.$status-error-dark};
+  --theme-color-background-icon-error: #{color.$status-error-light};
 }
 
 @include theme.props(dark) {
   --theme-color-background-icon: #{color.$base-orange};
   --theme-color-icon: #{sass-color.adjust(color.$base-orange, $lightness: 30%)};
+  --theme-color-icon-error: #{color.$status-error-light};
+  --theme-color-background-icon-error: #{color.$status-error-dark};
 }
 
 .c-alert {
@@ -106,6 +110,11 @@
     border: ms.step(-4) solid var(--theme-color-background-secondary);
     border-radius: size.$border-radius-full;
   }
+
+  .c-alert--error & {
+    background-color: var(--theme-color-background-icon-error);
+    color: var(--theme-color-icon-error);
+  }
 }
 
 .c-alert__content {

diff --git a/src/components/alert/alert.stories.mdx b/src/components/alert/alert.stories.mdx
@@ -144,6 +144,24 @@ An option to add an icon to the alert. You can add any icon name from our librar
   </Story>
 </Canvas>
 
+## Error
+
+The modifier class `c-alert--error` will override the orange default color and make the icon and background red.
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      message: 'Oops! Something went wrong.',
+      dismissable: true,
+      class: 'c-alert--error',
+      icon: 'confused-face',
+    }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
 ## 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 possibility to change the background color by itself.

diff --git a/src/design/colors.stories.mdx b/src/design/colors.stories.mdx
@@ -125,3 +125,18 @@ We design and build with accessibility in mind. Color contrast for text should m
     colors={[colors.text.action.value]}
   />
 </ColorPalette>
+
+## Status Colors
+
+These colors help communicate the status of elements, for example an icon accompanying an error message.
+
+<ColorPalette>
+  <ColorItem
+    title="$status-error-dark"
+    colors={[colors.status.error_dark.value]}
+  />
+  <ColorItem
+    title="$status-error-light"
+    colors={[colors.status.error_light.value]}
+  />
+</ColorPalette>
diff --git a/src/tokens/color/status.json b/src/tokens/color/status.json
@@ -0,0 +1,12 @@
+{
+  "color": {
+    "status": {
+      "error_dark": {
+        "value": "#bc1919"
+      },
+      "error_light": {
+        "value": "#ffcaca"
+      }
+    }
+  }
+}