[SPIKE] "Alert" component - actions implementation

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

@@ -0,0 +1,82 @@
+<div class={{this.classNames}} ...attributes role="alert">
+  {{#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}}
+      />
+    </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">{{@description}}</div>
+      {{/if}}
+    </div>
+
+    {{#if @actions}}
+      <div class="hds-alert__actions">
+        {{#each @actions as |action|}}
+          <div class="hds-alert__action">
+            {{#if (eq action.element "button")}}
+              <Hds::Button
+                @icon={{action.icon}}
+                @iconPosition={{action.iconPosition}}
+                @text={{action.text}}
+                @color={{action.color}}
+                {{!
+                TODO: here we're assuming that all the buttons in the alert actions are small
+                      we have to discuss with CVeight what are the "defaults" and locked props we want here
+              }}
+                @size="small"
+              />
+            {{/if}}
+            {{#if (eq action.element "link-to")}}
+              <Hds::LinkTo::Standalone
+                @icon={{action.icon}}
+                @iconPosition={{action.iconPosition}}
+                @text={{action.text}}
+                @color={{action.color}}
+                @route="components.alert"
+                {{!
+                TODO: here we're assuming that all the links in the alert actions are small
+                      we have to discuss with CVeight what are the "defaults" and locked props we want here
+              }}
+                @size="small"
+              />
+            {{/if}}
+            {{#if (eq action.element "link")}}
+              <Hds::Link::Standalone
+                @icon={{action.icon}}
+                @iconPosition={{action.iconPosition}}
+                @text={{action.text}}
+                @color={{action.color}}
+                @href="#"
+                {{!
+                TODO: here we're assuming that all the links in the alert actions are small
+                      we have to discuss with CVeight what are the "defaults" and locked props we want here
+              }}
+                @size="small"
+              />
+            {{/if}}
+          </div>
+        {{/each}}
+      </div>
+    {{/if}}
+    {{#if (has-block "actions")}}
+      <div class="hds-alert__actions">
+        {{yield to="actions"}}
+      </div>
+    {{/if}}
+
+  </div>
+</div>

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

@@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsAlertIndexComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      `you need to pass @title or @description to the "Hds::Alert" component`,
+      !(this.args.title === undefined && this.args.description === undefined)
+    );
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    return this.args.icon ?? null;
+  }
+
+  /**
+   * 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;
+  }
+}

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/styles/@hashicorp/design-system-components.scss

@@ -3,6 +3,7 @@
 @use "helpers/elevation";
 @use "helpers/focus-ring";
 
+@use "../components/alert";
 @use "../components/badge";
 @use "../components/badge-count";
 @use "../components/breadcrumb";

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

@@ -0,0 +1,42 @@
+//
+// ALERT
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+.hds-alert {
+  background-color: var(--token-color-surface-warning);
+  padding: 1.25rem; // 20px
+  display: flex;
+  align-content: flex-start;
+}
+
+.hds-alert__icon {
+  margin-right: 0.75rem; // 12px
+}
+
+.hds-alert__text {
+  color: var(--token-color-foreground-warning-on-surface);
+  font-family: var(--token-typography-body-200-font-family);
+}
+
+.hds-alert__title {
+  font-weight: var(--token-typography-font-weight-semibold);
+}
+
+.hds-alert__title + .hds-alert__description {
+  margin-top: 0.75rem; // 12px
+}
+
+.hds-alert__actions {
+  align-items: center;
+  display: flex;
+  margin-top: 1rem; // 16px
+}
+
+.hds-alert__action {
+  & + & {
+    margin-left: 1rem; // 16px
+  }
+}

packages/components/tests/dummy/app/router.js

@@ -15,6 +15,7 @@ Router.map(function () {
     this.route('focus-ring');
   });
   this.route('components', function () {
+    this.route('alert');
     this.route('badge');
     this.route('breadcrumb');
     this.route('button');

packages/components/tests/dummy/app/templates/components/alert.hbs

@@ -0,0 +1,170 @@
+{{page-title "Alert component"}}
+
+<h2 class="dummy-h2">Alert</h2>
+
+<section>
+  <h3 class="dummy-h3">Scratch reference links</h3>
+  <p>Alert types coming soon:
+    <code class="dummy-code">Hds::Alert::FullWidth</code>,
+    <code class="dummy-code">Hds::Alert::Inline</code>, and
+    <code class="dummy-code">Hds::Alert::Toast</code>.
+  </p>
+  <ul class="dummy-paragraph">
+    <li>
+      <a href="https://docs.google.com/document/d/1MC0MTm8-0F26s6Y-gou_RsMj6rtKS6jC-eM7rmruqLY/edit#heading=h.gjdgxs">
+        WIP Alert Component Requirement Document (CRD)
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/branch/Ru0h1oqy6r7SeGxwtQ6085/HDS-Product---Components-%5BWIP%5D?node-id=4023%3A15691"
+      >
+        WIP Figma file
+      </a>
+    </li>
+  </ul>
+</section>
+
+<section>
+  <h3 class="dummy-h3">Component API</h3>
+  <p class="dummy-paragraph">Here is the API for the component:</p>
+  <dl class="dummy-component-props">
+    <dt>color <code>enum</code></dt>
+    <dd>
+      <p><code class="dummy-code">color</code>
+        results in a default
+        <code class="dummy-code">icon</code>, which
+        <strong>can</strong>
+        be overriden.
+        <code class="dummy-code">color</code>
+        sets the color scheme for background, border,
+        <code class="dummy-code">title</code>, and
+        <code class="dummy-code">description</code>, which
+        <strong>cannot</strong>
+        be overriden.
+      </p>
+      <p>Acceptable values:</p>
+      <ol>
+        <li>critical</li>
+        <li>warning</li>
+        <li class="default">neutral</li>
+        <li>highlight</li>
+        <li>success</li>
+      </ol>
+    </dd>
+
+    <dt class="dummy-indent">icon <code>string</code></dt>
+    <dd class="dummy-indent">
+      <p>Shows an icon in the alert. Optional parameter.</p>
+      <p>Acceptable value:</p>
+      <p>Any
+        <a href="https://flight-hashicorp.vercel.app/" target="_blank" rel="noopener noreferrer">
+          Flight icon</a>
+        name.
+      </p>
+    </dd>
+
+    <dt>title <code>string</code></dt>
+    <dd>
+      <p>
+        The title text in the alert.
+        <code class="dummy-code">title</code>
+        <strong>and/or</strong>
+        <code class="dummy-code">description</code>
+        is required.
+      </p>
+    </dd>
+
+    <dt>description <code>string</code></dt>
+    <dd>
+      <p>The description text in the alert.
+        <code class="dummy-code">description</code>
+        <strong>and/or</strong>
+        <code class="dummy-code">title</code>
+        is required.</p>
+    </dd>
+
+    <dt>isDismissible <code>boolean</code></dt>
+    <p>The alert can be dismissed by the user. This parameter has some accessibility considerations for
+      <code class="dummy-code">Hds::Alert::Toast</code>
+      (<code class="dummy-code">role="alertdialog"</code>).
+    </p>
+    <dd>
+      <p>Acceptable values:</p>
+      <ol>
+        <li class="default">true</li>
+        <li>false</li>
+      </ol>
+    </dd>
+
+    <dt>hasActions <code>boolean</code></dt>
+    <p>The alert has content below the
+      <code class="dummy-code">title</code>
+      and
+      <code class="dummy-code">description</code>, such as an
+      <code class="dummy-code">Hds::Button</code>
+      and an
+      <code class="dummy-code">Hds::LinkTo::Standalone</code>.
+    </p>
+    <dd>
+      <p>Acceptable values:</p>
+      <ol>
+        <li>true</li>
+        <li class="default">false</li>
+      </ol>
+    </dd>
+
+    <dt>“splattributes”</dt>
+    <dd>
+      <p><code class="dummy-code">...attributes</code> spreading is supported on this component.</p>
+    </dd>
+  </dl>
+</section>
+
+<section>
+  <h3 class="dummy-h3">Temporary scratch showcase</h3>
+  <Hds::Alert
+    @icon="alert-triangle"
+    @title="Alert w/title & description"
+    @description="Your Intention settings are currently set to default allow. This
+      means that this view will show connections to every service in your
+      cluster. We recommend changing your Intention settings to default deny and
+      creating specific Intentions for upstream and downstream services for this
+      view to be useful."
+  />
+  <br />
+  <Hds::Alert @icon="alert-triangle" @description="Description only please" />
+  <br />
+  <Hds::Alert
+    @icon="alert-triangle"
+    @title="Really long title, yet no description. Your Intention settings are currently set to default allow. This
+      means that this view will show connections to every service in your
+      cluster. We recommend changing your Intention settings to default deny and
+      creating specific Intentions for upstream and downstream services for this
+      view to be useful."
+  />
+  <br />
+  Below alert with no title, no description does not appear (see error in console):
+  <Hds::Alert @icon="meh" />
+  <br />
+</section>
+
+<section>
+  <h3 class="dummy-h3">How to use</h3>
+</section>
+
+<section>
+  <h3 class="dummy-h3">Design guidelines</h3>
+</section>
+
+<section data-test-percy>
+  <h3 class="dummy-h3">Showcase</h3>
+  <h4 class="dummy-h4">Content</h4>
+
+  <h4 class="dummy-h4">Size</h4>
+
+  <h4 class="dummy-h4">Type</h4>
+
+  <h4 class="dummy-h4">Color:</h4>
+
+</section>

packages/components/tests/dummy/app/templates/index.hbs

@@ -32,6 +32,11 @@
   Components:
 </h2>
 <ol>
+  <li class="dummy-paragraph">
+    <LinkTo @route="components.alert">
+      Alert
+    </LinkTo>
+  </li>
   <li class="dummy-paragraph">
     <LinkTo @route="components.badge">
       Badge