[SPIKE] "Alert" component - actions implementation

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

@@ -0,0 +1,87 @@
+<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|}}
+          {{#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}}
+        {{/each}}
+      </div>
+    {{/if}}
+
+    {{! 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!) }}
+    {{#if (has-block "actions")}}
+      <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

@@ -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,44 @@
+//
+// 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
+
+  > * + * {
+    margin-left: 1rem; // 16px
+  }
+
+  &:empty {
+    display: none;
+  }
+}

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/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/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";

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;
+}