"Alert" + "Toast" components - Finalize implementation in code (feature branch)

.changeset/stale-teachers-flash.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+- Added `Alert` component
+- Added `Toast` component

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

@@ -0,0 +1,35 @@
+<div class={{this.classNames}} role="alert" ...attributes>
+  {{#if this.icon}}
+    <div class="hds-alert__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />
+    </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>
+
+    <div class="hds-alert__actions">
+      {{yield
+        (hash
+          Button=(component "hds/button" size="small")
+          Link::Standalone=(component "hds/link/standalone" size="small")
+          LinkTo::Standalone=(component "hds/link-to/standalone" size="small")
+        )
+      }}
+    </div>
+    {{yield (hash Generic=(component "hds/yield"))}}
+  </div>
+
+  {{#if this.onDismiss}}
+    <button class="hds-alert__dismiss" type="button" aria-label="Dismiss" {{on "click" this.onDismiss}}>
+      <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
+    </button>
+  {{/if}}
+</div>

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

@@ -0,0 +1,128 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const TYPES = ['page', 'inline', 'compact'];
+export const DEFAULT_COLOR = 'neutral';
+export const COLORS = [
+  'neutral',
+  'highlight',
+  'success',
+  'warning',
+  'critical',
+];
+export const MAPPING_COLORS_TO_ICONS = {
+  neutral: 'info',
+  highlight: 'info',
+  success: 'check-circle',
+  warning: 'alert-triangle',
+  critical: 'alert-diamond',
+};
+
+export default class HdsAlertIndexComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      `@type for "Hds::Alert" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${this.args.type}`,
+      TYPES.includes(this.args.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() {
+    let { icon } = this.args;
+
+    // If `icon` isn't passed, use the pre-defined one from `color`
+    if (icon === undefined) {
+      if (this.args.type === 'compact') {
+        // for the "compact" type by default we use filled icons
+        return `${MAPPING_COLORS_TO_ICONS[this.color]}-fill`;
+      } else {
+        // for all the other types by default we use outlined icons
+        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) {
+      assert(
+        `@icon for "Hds::Alert" with @type "compact" is required`,
+        this.args.type !== 'compact'
+      );
+
+      return false;
+    } else {
+      // If a name for `icon` is passed, set FlightIcon to that name
+      return icon;
+    }
+  }
+
+  /**
+   * @param onDismiss
+   * @type {function}
+   * @default () => {}
+   */
+  get onDismiss() {
+    let { onDismiss } = this.args;
+
+    if (typeof onDismiss === 'function') {
+      return onDismiss;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.type === 'compact') {
+      return '16';
+    } else {
+      return '24';
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Alert#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-alert'];
+
+    // Add a class based on the @type argument
+    classes.push(`hds-alert--type-${this.args.type}`);
+
+    // Add a class based on the @color argument
+    classes.push(`hds-alert--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,15 @@
+<Hds::Alert
+  class="hds-toast"
+  @type="inline"
+  @color={{@color}}
+  @icon={{@icon}}
+  @title={{@title}}
+  @description={{@description}}
+  @onDismiss={{@onDismiss}}
+  ...attributes
+  as |A|
+>
+  {{yield
+    (hash Button=A.Button Link::Standalone=A.Link::Standalone LinkTo::Standalone=A.LinkTo::Standalone Generic=A.Generic)
+  }}
+</Hds::Alert>

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

@@ -0,0 +1,3 @@
+<div ...attributes>
+  {{yield}}
+</div>

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

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/alert/index';

packages/components/app/components/hds/toast/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/toast/index';

packages/components/app/components/hds/yield/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/yield/index';

packages/components/app/styles/@hashicorp/design-system-components.scss

@@ -5,6 +5,7 @@
 @use "helpers/focus-ring";
 @use "helpers/typography";
 
+@use "../components/alert";
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/breadcrumb";
@@ -15,6 +16,7 @@
 @use "../components/icon-tile";
 @use "../components/link/cta";
 @use "../components/link/standalone";
+@use "../components/toast";
 
 .sr-only {
 	border: 0 !important;