@hashicorp/design-system-components 0.12.6 → 0.12.9

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @hashicorp/design-system-components
 
+## 0.12.9
+
+### Patch Changes
+
+- [#418](https://github.com/hashicorp/design-system/pull/418) [`981e2bd9`](https://github.com/hashicorp/design-system/commit/981e2bd99d29398a40274d390d1885ebfcd85133) Thanks [@alex-ju](https://github.com/alex-ju)! - Determine an accessible name for `alertdialog` alerts #418
+
+* [#416](https://github.com/hashicorp/design-system/pull/416) [`824e53d1`](https://github.com/hashicorp/design-system/commit/824e53d11678a5bb2544add3d9d1b2a93f9c42c1) Thanks [@alex-ju](https://github.com/alex-ju)! - Remove stray aria-describedby in alert component
+
+- [#415](https://github.com/hashicorp/design-system/pull/415) [`c6842109`](https://github.com/hashicorp/design-system/commit/c68421094991b2d62832cb346b4cf23eca1049e4) Thanks [@didoo](https://github.com/didoo)! - Added `@levelHover` and `@levelActive` arguments to `Card::Container` component
+
+## 0.12.8
+
+### Patch Changes
+
+- [#400](https://github.com/hashicorp/design-system/pull/400) [`d87d622b`](https://github.com/hashicorp/design-system/commit/d87d622b0f1f8829a0d5e6a48cfcd8ad8ff6f425) Thanks [@alex-ju](https://github.com/alex-ju)! - Determine alert component's role based on the presence of interactive elements
+
+## 0.12.7
+
+### Patch Changes
+
+- [#406](https://github.com/hashicorp/design-system/pull/406) [`3c3f49b9`](https://github.com/hashicorp/design-system/commit/3c3f49b950fe7c0c9fa9732d9a8534d3b73e69fd) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix badge vertical alignment
+
 ## 0.12.6
 
 ### Patch Changes

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

@@ -1,4 +1,11 @@
-<div class={{this.classNames}} role="alert" aria-live="polite" ...attributes>
+<div
+  class={{this.classNames}}
+  role={{this.role}}
+  aria-live="polite"
+  aria-labelledby={{this.ariaLabelledBy}}
+  {{did-insert this.didInsert}}
+  ...attributes
+>
   {{#if this.icon}}
     <div class="hds-alert__icon">
       <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />

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

@@ -1,5 +1,8 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { assert } from '@ember/debug';
+import { guidFor } from '@ember/object/internals';
+import { tracked } from '@glimmer/tracking';
 
 export const TYPES = ['page', 'inline', 'compact'];
 export const DEFAULT_COLOR = 'neutral';
@@ -18,7 +21,14 @@ export const MAPPING_COLORS_TO_ICONS = {
   critical: 'alert-diamond',
 };
 
+const CONTENT_ELEMENT_SELECTOR = '.hds-alert__content';
+const TITLE_ELEMENT_SELECTOR = '.hds-alert__title';
+const DESCRIPTION_ELEMENT_SELECTOR = '.hds-alert__description';
+
 export default class HdsAlertIndexComponent extends Component {
+  @tracked role = 'alert';
+  @tracked ariaLabelledBy;
+
   constructor() {
     super(...arguments);
 
@@ -125,4 +135,25 @@ export default class HdsAlertIndexComponent extends Component {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(element) {
+    let actions = element.querySelectorAll(
+      `${CONTENT_ELEMENT_SELECTOR} button, ${CONTENT_ELEMENT_SELECTOR} a`
+    );
+    if (actions.length) {
+      this.role = 'alertdialog';
+    }
+
+    // `alertdialog` must have an accessible name so we use either the
+    // title or the description as label for the alert
+    let label =
+      element.querySelector(TITLE_ELEMENT_SELECTOR) ||
+      element.querySelector(DESCRIPTION_ELEMENT_SELECTOR);
+    if (label) {
+      let labelId = label.getAttribute('id') || guidFor(element);
+      label.setAttribute('id', labelId);
+      this.ariaLabelledBy = labelId;
+    }
+  }
 }

package/addon/components/hds/card/container.js

@@ -21,7 +21,7 @@ export default class HdsCardContainerComponent extends Component {
     let { level = DEFAULT_LEVEL } = this.args;
 
     assert(
-      `@level for "Hds::CardContainer" must be one of the following: ${LEVELS.join(
+      `@level for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
         ', '
       )}, received: ${level}`,
       LEVELS.includes(level)
@@ -30,6 +30,50 @@ export default class HdsCardContainerComponent extends Component {
     return level;
   }
 
+  /**
+   * Sets the "elevation" level for the component on ":hover" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelHover
+   * @type {string}
+   */
+  get levelHover() {
+    let { levelHover } = this.args;
+
+    if (levelHover) {
+      assert(
+        `@levelHover for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${levelHover}`,
+        LEVELS.includes(levelHover)
+      );
+    }
+
+    return levelHover;
+  }
+
+  /**
+   * Sets the "elevation" level for the component on ":active" state
+   * Accepted values: base, mid, high
+   *
+   * @param levelActive
+   * @type {string}
+   */
+  get levelActive() {
+    let { levelActive } = this.args;
+
+    if (levelActive) {
+      assert(
+        `@levelActive for "Hds::Card::Container" must be one of the following: ${LEVELS.join(
+          ', '
+        )}, received: ${levelActive}`,
+        LEVELS.includes(levelActive)
+      );
+    }
+
+    return levelActive;
+  }
+
   /**
    * Sets the background for the component
    * Accepted values: neutral-primary, neutral-secondary
@@ -42,7 +86,7 @@ export default class HdsCardContainerComponent extends Component {
     let { background = DEFAULT_BACKGROUND } = this.args;
 
     assert(
-      `@background for "Hds::CardContainer" must be one of the following: ${BACKGROUNDS.join(
+      `@background for "Hds::Card::Container" must be one of the following: ${BACKGROUNDS.join(
         ', '
       )}, received: ${background}`,
       BACKGROUNDS.includes(background)
@@ -63,7 +107,7 @@ export default class HdsCardContainerComponent extends Component {
     let { overflow = DEFAULT_OVERFLOW } = this.args;
 
     assert(
-      `@overflow for "Hds::CardContainer" must be one of the following: ${OVERFLOWS.join(
+      `@overflow for "Hds::Card::Container" must be one of the following: ${OVERFLOWS.join(
         ', '
       )}, received: ${overflow}`,
       OVERFLOWS.includes(overflow)
@@ -80,10 +124,26 @@ export default class HdsCardContainerComponent extends Component {
   get classNames() {
     let classes = ['hds-card__container'];
 
-    // add an "elevation" class helper based on the @level and @hasBorder arguments
+    // add "elevation" classes based on the @level and @hasBorder arguments
     classes.push(
-      `hds-${this.args.hasBorder ? 'surface' : 'elevation'}-${this.level}`
+      `hds-card__container--level-${
+        this.args.hasBorder ? 'surface' : 'elevation'
+      }-${this.level}`
     );
+    if (this.levelHover) {
+      classes.push(
+        `hds-card__container--hover-level-${
+          this.args.hasBorder ? 'surface' : 'elevation'
+        }-${this.levelHover}`
+      );
+    }
+    if (this.levelActive) {
+      classes.push(
+        `hds-card__container--active-level-${
+          this.args.hasBorder ? 'surface' : 'elevation'
+        }-${this.levelActive}`
+      );
+    }
 
     // add a class based on the @background argument
     classes.push(`hds-card__container--background-${this.background}`);

package/addon/components/hds/form/checkbox/base.hbs

@@ -0,0 +1 @@
+<input type="checkbox" class={{this.classNames}} ...attributes value={{@value}} />

package/addon/components/hds/form/checkbox/base.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormCheckboxBaseComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-checkbox'];
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-checkbox--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/checkbox/field.hbs

@@ -0,0 +1,19 @@
+<Hds::Form::Field
+  @layout="flag"
+  @contextualClass={{@contextualClass}}
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  as |F|
+>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Field" component level }}
+  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::Checkbox::Base
+      class="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

package/addon/components/hds/form/checkbox/group.hbs

@@ -0,0 +1,9 @@
+<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
+  {{yield (hash Legend=F.Legend HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield
+      (hash Checkbox::Field=(component "hds/form/checkbox/field" contextualClass="hds-form-group__control-field"))
+    }}
+  </F.Control>
+</Hds::Form::Fieldset>

package/addon/components/hds/form/error/index.hbs

@@ -0,0 +1,6 @@
+<div class={{this.classNames}} id={{this.id}} {{did-insert this.onInsert}} ...attributes>
+  <FlightIcon class="hds-form-error__icon" @name="alert-diamond-fill" />
+  <div class="hds-form-error__content">
+    {{yield (hash Message=(component "hds/form/error/message"))}}
+  </div>
+</div>

package/addon/components/hds/form/error/index.js

@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+export const ID_PREFIX = 'error-';
+
+const NOOP = () => {};
+
+export default class HdsFormErrorIndexComponent extends Component {
+  /**
+   * Determines the unique ID to assign to the element
+   * @method id
+   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
+   */
+  get id() {
+    let { controlId } = this.args;
+    if (controlId) {
+      return `${ID_PREFIX}${controlId}`;
+    }
+    return null;
+  }
+
+  /**
+   * @param onInsert
+   * @type {function}
+   * @default () => {}
+   */
+  get onInsert() {
+    let { onInsert } = this.args;
+
+    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
+    if (typeof onInsert === 'function') {
+      return onInsert;
+    } else {
+      return NOOP;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-error'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-100', 'hds-font-weight-medium');
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the contextual component declarations don't pass attributes to the component
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/error/message.hbs

@@ -0,0 +1,3 @@
+<p class="hds-form-error__message" ...attributes>
+  {{yield}}
+</p>

package/addon/components/hds/form/field/index.hbs

@@ -0,0 +1,21 @@
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash Label=(component "hds/form/label" controlId=this.id contextualClass="hds-form-field__label"))}}
+  {{yield
+    (hash
+      HelperText=(component
+        "hds/form/helper-text"
+        controlId=this.id
+        onInsert=this.appendDescriptor
+        contextualClass="hds-form-field__helper-text"
+      )
+    )
+  }}
+  {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}}
+  {{yield
+    (hash
+      Error=(component
+        "hds/form/error" controlId=this.id onInsert=this.appendDescriptor contextualClass="hds-form-field__error"
+      )
+    )
+  }}
+</div>

package/addon/components/hds/form/field/index.js

@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { getElementId } from '../utils/getElementId';
+import { getAriaDescribedBy } from '../utils/getAriaDescribedBy';
+
+export const LAYOUT_TYPES = ['vertical', 'flag'];
+
+export default class HdsFormFieldIndexComponent extends Component {
+  @tracked ariaDescribedBy = getAriaDescribedBy(this);
+  @tracked descriptors = [];
+
+  @action
+  appendDescriptor(element) {
+    this.descriptors.push(element.id);
+    this.ariaDescribedBy = getAriaDescribedBy(this);
+  }
+
+  /**
+   * Sets the layout of the field
+   *
+   * @param layout
+   * @type {string}
+   */
+  get layout() {
+    let { layout } = this.args;
+
+    assert(
+      `@type for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(
+        ', '
+      )}, received: ${layout}`,
+      LAYOUT_TYPES.includes(layout)
+    );
+
+    return layout;
+  }
+
+  /**
+   * Calculates the unique ID to assign to the form control
+   */
+  get id() {
+    return getElementId(this);
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = [];
+
+    if (this.args.layout) {
+      classes.push(`hds-form-field--layout-${this.layout}`);
+    }
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/fieldset/index.hbs

@@ -0,0 +1,23 @@
+<fieldset class={{this.classNames}} id={{this.id}} ...attributes aria-describedby={{this.ariaDescribedBy}}>
+  {{yield (hash Legend=(component "hds/form/legend" contextualClass="hds-form-group__legend"))}}
+  {{yield
+    (hash
+      HelperText=(component
+        "hds/form/helper-text"
+        controlId=this.id
+        onInsert=this.appendDescriptor
+        contextualClass="hds-form-group__helper-text"
+      )
+    )
+  }}
+  <div class="hds-form-group__control-fields-wrapper">
+    {{yield (hash Control=(component "hds/yield"))}}
+  </div>
+  {{yield
+    (hash
+      Error=(component
+        "hds/form/error" controlId=this.id onInsert=this.appendDescriptor contextualClass="hds-form-group__error"
+      )
+    )
+  }}
+</fieldset>

package/addon/components/hds/form/fieldset/index.js

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { getElementId } from '../utils/getElementId';
+import { getAriaDescribedBy } from '../utils/getAriaDescribedBy';
+
+export default class HdsFormFieldsetIndexComponent extends Component {
+  @tracked ariaDescribedBy = getAriaDescribedBy(this);
+  @tracked descriptors = [];
+
+  @action
+  appendDescriptor(element) {
+    this.descriptors.push(element.id);
+    this.ariaDescribedBy = getAriaDescribedBy(this);
+  }
+
+  /**
+   * Sets the layout of the group
+   *
+   * @param layout
+   * @type {enum}
+   * @default 'vertical'
+   */
+  get layout() {
+    return this.args.layout ?? 'vertical';
+  }
+
+  /**
+   * Calculates the unique ID to assign to the fieldset
+   */
+  get id() {
+    return getElementId(this);
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    // we just need a class for the layout
+    let classes = ['hds-form-group'];
+
+    // add a class based on the @layout argument
+    classes.push(`hds-form-group--layout-${this.layout}`);
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/helper-text/index.hbs

@@ -0,0 +1,3 @@
+<div class={{this.classNames}} id={{this.id}} {{did-insert this.onInsert}} ...attributes>
+  {{yield}}
+</div>

package/addon/components/hds/form/helper-text/index.js

@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+export const ID_PREFIX = 'helper-text-';
+
+const NOOP = () => {};
+
+export default class HdsFormHelperTextIndexComponent extends Component {
+  /**
+   * Determines the unique ID to assign to the element
+   * @method id
+   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
+   */
+  get id() {
+    let { controlId } = this.args;
+    if (controlId) {
+      return `${ID_PREFIX}${controlId}`;
+    }
+    return null;
+  }
+
+  /**
+   * @param onInsert
+   * @type {function}
+   * @default () => {}
+   */
+  get onInsert() {
+    let { onInsert } = this.args;
+
+    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
+    if (typeof onInsert === 'function') {
+      return onInsert;
+    } else {
+      return NOOP;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-helper-text'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-100', 'hds-font-weight-regular');
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the contextual component declarations don't pass attributes to the component
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/label/index.hbs

@@ -0,0 +1,3 @@
+<label class={{this.classNames}} for={{@controlId}} ...attributes>
+  {{yield}}
+</label>

package/addon/components/hds/form/label/index.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormLabelIndexComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-label'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the contextual component declarations don't pass attributes to the component
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/legend/index.hbs

@@ -0,0 +1,3 @@
+<legend class={{this.classNames}} ...attributes>
+  {{yield}}
+</legend>

package/addon/components/hds/form/legend/index.js

@@ -0,0 +1,24 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormLegendIndexComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-legend'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    // the reason for this is that the contextual component declarations don't pass attributes to the component
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/radio/base.hbs

@@ -0,0 +1 @@
+<input type="radio" class={{this.classNames}} ...attributes value={{@value}} />

package/addon/components/hds/form/radio/base.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormRadioBaseComponent extends Component {
+  /**
+   * Get the class names to apply to the component.
+   * @method classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-form-radio'];
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-radio--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/form/radio/field.hbs

@@ -0,0 +1,19 @@
+<Hds::Form::Field
+  @layout="flag"
+  @contextualClass={{@contextualClass}}
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  as |F|
+>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Field" component level }}
+  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::Radio::Base
+      class="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

package/addon/components/hds/form/radio/group.hbs

@@ -0,0 +1,7 @@
+<Hds::Form::Fieldset @layout={{@layout}} ...attributes as |F|>
+  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
+  {{yield (hash Legend=F.Legend HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield (hash Radio::Field=(component "hds/form/radio/field" contextualClass="hds-form-group__control-field"))}}
+  </F.Control>
+</Hds::Form::Fieldset>

package/addon/components/hds/form/select/base.hbs

@@ -0,0 +1,3 @@
+<select class={{this.classNames}} {{style width=@width}} ...attributes>
+  {{yield (hash Options=(component "hds/yield"))}}
+</select>