Design/error alert

.changeset/nervous-glasses-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add new Error alert, sad face emoji for the Error alert. There has also been new color tokens added, and a new Status section for those colors.

src/components/alert/alert.scss

@@ -149,3 +149,10 @@
     transform: scale(scale.$effect-shrink);
   }
 }
+
+.c-alert__error {
+  .c-alert__extra {
+    background-color: color.$status-error-light;
+    color: color.$status-error-dark;
+  }
+}

src/components/alert/alert.stories.mdx

@@ -65,6 +65,29 @@ Alerts work well even when displayed at full width. Their contents will constrai
   </Story>
 </Canvas>
 
+<!-- TODO: Right now the icon needs to be set to the sad emoji.
+// As of right now, I don't know how to automatically add the icon on it's own.
+// That is a created issue but not a launch blocker.
+ -->
+
+## Error
+
+The class `c-alert__error` will override the orange default color and make the icon and background red. As of right now, the icon needs to be set to `sad-emoji`. An issue has been created to add it automatically.
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      message: 'Oops! Something went wrong',
+      dismissable: true,
+      class: 'c-alert__error',
+      icon: 'sad-emoji',
+    }}
+  >
+    {(args) => template(args)}
+  </Story>
+</Canvas>
+
 ## Icon
 
 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.

src/design/colors.stories.mdx

@@ -125,3 +125,20 @@ We design and build with accessibility in mind. Color contrast for text should m
     colors={[colors.text.action.value]}
   />
 </ColorPalette>
+
+## Status Colors
+
+Includes colors that can reflect the status of elements.
+
+<ColorPalette>
+  <ColorItem
+    title="$status-error-dark"
+    subtitle="For errors, intended to be used for the foreground"
+    colors={[colors.status.error_dark.value]}
+  />
+  <ColorItem
+    title="$status-error-light"
+    subtitle="For erros, intended for backgrounds"
+    colors={[colors.status.error_light.value]}
+  />
+</ColorPalette>

src/tokens/color/status.json

@@ -0,0 +1,12 @@
+{
+  "color": {
+    "status": {
+      "error_dark": {
+        "value": "#b50000"
+      },
+      "error_light": {
+        "value": "#ffbdbd"
+      }
+    }
+  }
+}