Alert (Page) and Alert (Inline)

packages/components/addon/components/hds/alert/index.hbs

@@ -1,23 +1,32 @@
 <div class={{this.classNames}} ...attributes role="alert">
-  {{#if @icon}}
+  {{#if this.icon}}
     <div class="hds-alert__icon">
-      <FlightIcon
-        @name={{this.icon}}
-        @size="24"
-        {{! TODO: Replace w/dynamic color, once color prop implemented }}
-        @color="var(--token-color-foreground-warning-on-surface)"
-        @isInlineBlock={{false}}
-      />
+      <FlightIcon @name={{this.icon}} @size="24" @isInlineBlock={{false}} />
     </div>
   {{/if}}
 
-  <div class="hds-alert__text">
-    {{#if @title}}
-      <div class="hds-alert__title">{{@title}}</div>
-    {{/if}}
+  <div class="hds-alert__content">
+    <div class="hds-alert__text">
+      {{#if @title}}
+        <div class="hds-alert__title">{{@title}}</div>
+      {{/if}}
+      {{#if @description}}
+        <div class="hds-alert__description">{{html-safe @description}}</div>
+      {{/if}}
+    </div>
 
-    {{#if @description}}
-      <div class="hds-alert__description">{{html-safe @description}}</div>
+    {{#if (has-block "actions")}}
+      {{! IMPORTANT: don't change the formatting or it will add empty space inside the element (we're using ":empty" in CSS to hide it when it's empty!) }}
+      <div class="hds-alert__actions">
+        {{yield
+          (hash
+            Button=(component "hds/button")
+            Link::Standalone=(component "hds/link/standalone")
+            LinkTo::Standalone=(component "hds/link-to/standalone")
+          )
+          to="actions"
+        }}
+      </div>
     {{/if}}
   </div>
 </div>

packages/components/addon/components/hds/alert/index.js

@@ -1,6 +1,24 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+export const DEFAULT_TYPE = 'page';
+export const TYPES = ['page', 'inline', 'compact', 'toast'];
+export const DEFAULT_COLOR = 'neutral';
+export const COLORS = [
+  'neutral',
+  'highlight',
+  'success',
+  'warning',
+  'critical',
+];
+export const MAPPING_COLORS_TO_ICONS = {
+  critical: 'alert-octagon',
+  warning: 'alert-triangle',
+  neutral: 'info',
+  highlight: 'info',
+  success: 'check-circle',
+};
+
 export default class HdsAlertIndexComponent extends Component {
   constructor() {
     super(...arguments);
@@ -11,26 +29,79 @@ export default class HdsAlertIndexComponent extends Component {
     );
   }
 
+  /**
+   * @param type
+   * @type {enum}
+   * @default page
+   * @description Determines the type of the alert.
+   */
+  get type() {
+    let { type = DEFAULT_TYPE } = this.args;
+
+    assert(
+      `@type for "Hds::Alert" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${type}`,
+      TYPES.includes(type)
+    );
+
+    return type;
+  }
+
+  /**
+   * @param color
+   * @type {enum}
+   * @default neutral
+   * @description Determines the color scheme for the alert.
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Alert" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
   /**
    * @param icon
    * @type {string}
    * @default null
    * @description The name of the icon to be used.
    */
   get icon() {
-    return this.args.icon ?? null;
+    let { icon } = this.args;
+
+    // If `icon` isn't passed, use the pre-defined one from `color`
+    if (icon === undefined) {
+      return MAPPING_COLORS_TO_ICONS[this.color];
+      // If `icon` is set explicitly to false, user doesn't want any icon in the alert
+    } else if (icon === false) {
+      return false;
+    } else {
+      // If a name for `icon` is passed, set FlightIcon to that name
+      return icon;
+    }
   }
 
   /**
    * Get the class names to apply to the component.
    * @method Alert#classNames
    * @return {string} The "class" attribute to apply to the component.
    */
-  // "hds-alert"
   get classNames() {
     let classes = ['hds-alert'];
 
-    // TODO: Add type classes, once type implemented
-    return classes;
+    // Add a class based on the @type argument
+    classes.push(`hds-alert--type-${this.type}`);
+
+    // Add a class based on the @color argument
+    classes.push(`hds-alert--color-${this.color}`);
+
+    return classes.join(' ');
   }
 }

packages/components/app/styles/components/alert.scss

@@ -7,9 +7,8 @@
 
 .hds-alert {
   align-content: flex-start;
-  background-color: var(--token-color-surface-warning);
   display: flex;
-  padding: 1.25rem; // 20px
+  padding: 1rem; // 16px
 }
 
 .hds-alert__icon {
@@ -27,12 +26,12 @@
   font-weight: var(--token-typography-font-weight-semibold);
 }
 
-
 .hds-alert__description {
   font-weight: var(--token-typography-font-weight-regular);
+  color: var(--token-color-foreground-primary);
 
   .hds-alert__title + & {
-    margin-top: 0.75rem; // 12px
+    margin-top: 0.25rem; // 4px
   }
 
   strong {
@@ -46,7 +45,7 @@
   // Notice: in the future this may become a "Link::Inline" component (for now we declare the styles directly here)
   a {
     color: var(--token-color-foreground-action);
-    // at the moment the "focus" state is not well defined in design (the one that is in Figma does not work) so we just apply a simple color to the default outline
+    // At the moment the "focus" state is not well defined in design (the one that is in Figma does not work) so we just apply a simple color to the default outline
     outline-color: var(--token-color-focus-action-external);
 
     &:hover {
@@ -58,3 +57,109 @@
     }
   }
 }
+
+//
+// COLOR & TYPE
+//
+.hds-alert--color-neutral {
+  background-color: var(--token-color-surface-faint);
+
+  &.hds-alert--type-page {
+    box-shadow: 0px 1px 0px 0px var(--token-color-palette-alpha-300);
+  }
+
+  &.hds-alert--type-inline { 
+    border-color: var(--token-color-border-strong);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-primary);
+  }
+}
+
+.hds-alert--color-highlight {
+  background-color: var(--token-color-surface-highlight);
+
+  &.hds-alert--type-page {
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-highlight);
+  }
+
+  &.hds-alert--type-inline { 
+    border-color: var(--token-color-border-highlight);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-highlight-on-surface);
+  }
+}
+
+.hds-alert--color-success {
+  background-color: var(--token-color-surface-success);
+
+  &.hds-alert--type-page {
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-success);
+  }
+
+  &.hds-alert--type-inline { 
+    border-color: var(--token-color-border-success);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-success-on-surface);
+  }
+}
+
+.hds-alert--color-warning {
+  background-color: var(--token-color-surface-warning);
+
+  &.hds-alert--type-page {
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-warning);
+  }
+
+  &.hds-alert--type-inline { 
+    border-color: var(--token-color-border-warning);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-warning-on-surface);
+  }
+}
+
+.hds-alert--color-critical {
+  background-color: var(--token-color-surface-critical);
+
+  &.hds-alert--type-page {
+    box-shadow: 0px 1px 0px 0px var(--token-color-border-critical);
+  }
+
+  &.hds-alert--type-inline { 
+    border-color: var(--token-color-border-critical);
+  }
+
+  .hds-alert__icon, .hds-alert__title {
+    color: var(--token-color-foreground-critical-on-surface);
+  } 
+}
+
+.hds-alert--type-inline {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 6px;
+}
+
+//
+// ACTIONS
+//
+.hds-alert__actions {
+  align-items: center;
+  display: flex;
+  margin-top: 1rem; // 16px
+
+  > * + * {
+    margin-left: 1rem; // 16px
+  }
+
+  &:empty {
+    display: none;
+  }
+}

packages/components/tests/acceptance/percy-test.js

@@ -19,6 +19,9 @@ module('Acceptance | Percy test', function (hooks) {
     await visit('/foundations/focus-ring');
     await percySnapshot('FocusRing');
 
+    await visit('/components/alert');
+    await percySnapshot('Alert');
+
     await visit('/components/badge');
     await percySnapshot('Badge');
 

packages/components/tests/dummy/app/components/dummy-placeholder/index.js

@@ -11,7 +11,7 @@ export default class DummyPlaceholderIndexComponent extends Component {
   get width() {
     let { width = '100%' } = this.args;
 
-    if (typeof width === 'string' && width.match(/[\d]+/)) {
+    if (typeof width === 'string' && width.match(/^[\d]+$/)) {
       width = `${parseInt(width, 10)}px`;
     }
 
@@ -28,7 +28,7 @@ export default class DummyPlaceholderIndexComponent extends Component {
   get height() {
     let { height = '100%' } = this.args;
 
-    if (typeof height === 'string' && height.match(/[\d]+/)) {
+    if (typeof height === 'string' && height.match(/^[\d]+$/)) {
       height = `${parseInt(height, 10)}px`;
     }
 

packages/components/tests/dummy/app/styles/app.scss

@@ -3,6 +3,7 @@
 
 @import "./_typography";
 
+@import "./pages/db-alert";
 @import "./pages/db-badge";
 @import "./pages/db-breadcrumb";
 @import "./pages/db-button";
@@ -208,7 +209,6 @@ body.dummy-app {
     border-color: #f5c6cb;
 }
 
-
 // Percy (percySnapshot) doesn't allow to target specific DOM elements, so we have to "blacklist" the elements
 // that we want to exclude from the snapshots using their own "Percy-specific CSS".
 // see: https://docs.percy.io/docs/percy-specific-css#section-hiding-regions-with-percy-specific-css

packages/components/tests/dummy/app/styles/components/dummy-component-props.scss

@@ -6,6 +6,10 @@
     line-height: 1.2;
     max-width: 64rem;
 
+    .dummy-indent {
+        margin-left: 30px;            
+    }
+
     dt {
         color: #1F69FF;
         font-size: 1rem;

packages/components/tests/dummy/app/styles/pages/db-alert.scss

@@ -0,0 +1,15 @@
+// ALERT
+
+.dummy-alert-sample-custom-actions__actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.dummy-alert-sample-custom-actions__text {
+    @include dummyFontFamily();
+    @include dummyFontSize(0.8rem);
+    display: block;
+    color: #999;
+    margin-top: 1rem;
+}