From 87f012d90d1769d87b5f14b02af6b02bddd27120 Mon Sep 17 00:00:00 2001
From: Arianna Chau <ariannapikachau@gmail.com>
Date: Tue, 19 Jul 2022 14:38:56 -0700
Subject: [PATCH] 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 <tyler@cloudfour.com>

* 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 <tyler@cloudfour.com>
---
 .changeset/nervous-glasses-sparkle.md  |  5 +++++
 src/assets/icons/confused-face.svg     |  5 +++++
 src/components/alert/alert.scss        |  9 +++++++++
 src/components/alert/alert.stories.mdx | 18 ++++++++++++++++++
 src/design/colors.stories.mdx          | 15 +++++++++++++++
 src/tokens/color/status.json           | 12 ++++++++++++
 6 files changed, 64 insertions(+)
 create mode 100644 .changeset/nervous-glasses-sparkle.md
 create mode 100644 src/assets/icons/confused-face.svg
 create mode 100644 src/tokens/color/status.json

diff --git a/.changeset/nervous-glasses-sparkle.md b/.changeset/nervous-glasses-sparkle.md
new file mode 100644
index 000000000..9120c785c
--- /dev/null
+++ 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
new file mode 100644
index 000000000..14cd07604
--- /dev/null
+++ b/src/assets/icons/confused-face.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M18.9339,18.1287c-1.075-.7925-2.2961-1.3658-3.5935-1.6872-1.2974-.3215-2.6457-.3848-3.968-.1862-1.3223,.1985-2.59255,.6549-3.73836,1.3432-1.14581,.6883-2.14469,1.5949-2.93961,2.6682" fill="none" stroke-linecap="round" stroke-width="2"/>
+  <ellipse cx="5.45391" cy="7.13555" rx="2.45391" ry="3.13555"/>
+  <ellipse cx="18.5461" cy="7.13555" rx="2.45391" ry="3.13555"/>
+</svg>
diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss
index 7ef035fc6..16d0659a6 100644
--- 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
index b46362ccf..33bd6ed3d 100644
--- 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
index 1cfdb214f..06f55a248 100644
--- 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
new file mode 100644
index 000000000..255d64ca9
--- /dev/null
+++ b/src/tokens/color/status.json
@@ -0,0 +1,12 @@
+{
+  "color": {
+    "status": {
+      "error_dark": {
+        "value": "#bc1919"
+      },
+      "error_light": {
+        "value": "#ffcaca"
+      }
+    }
+  }
+}