Merge branch 'spike-BUTTON-LINK-CTA-main' into spike-link-inline

# Conflicts:
#	packages/components/addon/components/hds/interactive/index.hbs
#	packages/components/app/styles/@hashicorp/design-system-components.scss
#	packages/components/tests/acceptance/percy-test.js
#	packages/components/tests/dummy/app/templates/index.hbs

packages/components/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hashicorp/design-system-components
 
+## 0.11.1
+
+### Patch Changes
+
+- [#284](https://github.com/hashicorp/design-system/pull/284) [`ba409885`](https://github.com/hashicorp/design-system/commit/ba409885468f91d659d10971fa1f34f64f57ddbc) Thanks [@alex-ju](https://github.com/alex-ju)! - Change focus management in disclosure utility component
+
+* [#289](https://github.com/hashicorp/design-system/pull/289) [`bf3a00e5`](https://github.com/hashicorp/design-system/commit/bf3a00e56989bbef92bfa355a42e5775785847a3) Thanks [@didoo](https://github.com/didoo)! - "Alert" and "Toast" components - converted "title" and "description" arguments to be contextual components
+
 ## 0.11.0
 
 ### Minor Changes

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

@@ -0,0 +1 @@
+<div class="hds-alert__description" ...attributes>{{yield}}</div>

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

@@ -7,12 +7,8 @@
 
   <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}}
+      {{yield (hash Title=(component "hds/alert/title"))}}
+      {{yield (hash Description=(component "hds/alert/description"))}}
     </div>
 
     <div class="hds-alert__actions">

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

@@ -0,0 +1 @@
+<div class="hds-alert__title" ...attributes>{{yield}}</div>

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

@@ -1,4 +1,16 @@
-<button class={{this.classNames}} ...attributes aria-label={{if this.isIconOnly this.text null}} type={{this.type}}>
+<Hds::Interactive
+  class={{this.classNames}}
+  @current-when={{@current-when}}
+  @models={{hds-link-to-models @model @models}}
+  @query={{hds-link-to-query @query}}
+  @replace={{@replace}}
+  @route={{@route}}
+  @isRouteExternal={{@isRouteExternal}}
+  @href={{@href}}
+  @isHrefExternal={{@isHrefExternal}}
+  ...attributes
+  aria-label={{if this.isIconOnly this.text null}}
+>
   {{#if this.isIconOnly}}
     <div class="hds-button__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
@@ -26,4 +38,4 @@
       </div>
     {{/if}}
   {{/if}}
-</button>
+</Hds::Interactive>

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

@@ -3,11 +3,9 @@ import { assert } from '@ember/debug';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'primary';
-export const DEFAULT_TYPE = 'button';
 export const DEFAULT_ICONPOSITION = 'leading';
 export const SIZES = ['small', 'medium', 'large'];
 export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
-export const TYPES = ['button', 'submit', 'reset'];
 export const ICONPOSITIONS = ['leading', 'trailing'];
 
 export default class HdsButtonIndexComponent extends Component {
@@ -126,25 +124,6 @@ export default class HdsButtonIndexComponent extends Component {
     }
   }
 
-  /**
-   * @param type
-   * @type {string}
-   * @default button
-   * @description The value for the button's `type` attribute. Acceptable values are `button`, `submit`, and `reset`
-   */
-  get type() {
-    let { type = DEFAULT_TYPE } = this.args;
-
-    assert(
-      `@type for "Hds::Button" must be one of the following: ${TYPES.join(
-        ', '
-      )}; received: ${type}`,
-      TYPES.includes(type)
-    );
-
-    return type;
-  }
-
   /**
    * @param isFullWidth
    * @type {boolean}

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

@@ -22,9 +22,9 @@
   {{/if}}
 {{else if @href}}
   {{#if this.isHrefExternal}}
-    <a target="_blank" rel="noopener noreferrer" ...attributes href={{@href}}>{{yield}}</a>
+    <a target="_blank" rel="noopener noreferrer" ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
   {{else}}
-    <a ...attributes href={{@href}}>{{yield}}</a>
+    <a ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
   {{/if}}
 {{else}}
   <button type="button" ...attributes>

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

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
 export default class HdsInteractiveComponent extends Component {
   /**
@@ -22,4 +23,11 @@ export default class HdsInteractiveComponent extends Component {
   get isRouteExternal() {
     return this.args.isRouteExternal ?? false;
   }
+
+  @action
+  onKeyUp(event) {
+    if (event.key === ' ' || event.code === 'Space') {
+      event.target.click();
+    }
+  }
 }