@hashicorp/design-system-components 0.12.8 → 0.12.9

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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

@@ -1,11 +1,18 @@
-<div class={{this.classNames}} role={{this.role}} aria-live="polite" aria-describedby="content" ...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}} />
     </div>
   {{/if}}
 
-  <div class="hds-alert__content" {{did-insert this.didInsertContent}}>
+  <div class="hds-alert__content">
     <div class="hds-alert__text">
       {{yield (hash Title=(component "hds/alert/title"))}}
       {{yield (hash Description=(component "hds/alert/description"))}}

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

@@ -1,6 +1,7 @@
 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'];
@@ -20,8 +21,13 @@ 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);
@@ -131,10 +137,23 @@ export default class HdsAlertIndexComponent extends Component {
   }
 
   @action
-  didInsertContent(element) {
-    let actions = element.querySelectorAll('button, a');
+  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/app/styles/components/card/container.scss

@@ -6,6 +6,7 @@
 //
 
 
+$hds-card-container-style: ( 'surface', 'elevation' );
 $hds-card-container-levels: ( 'base', 'mid', 'high' );
 
 $hds-card-container-border-radius: 6px;
@@ -16,6 +17,30 @@ $hds-card-container-border-radius: 6px;
   position: relative;
 }
 
+// LEVEL (elevation style as "drop" + "border" shadow effects)
+
+@each $style in $hds-card-container-style {
+  // IMPORTANT: we need to keep separate loops, because we want the "hover" state
+  // to override the "rest" state, and the "active" state to override the "hover" state
+  // so the order of the declaration matters, they need to be one group after another group
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--level-#{$style}-#{$level} {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--hover-level-#{$style}-#{$level}:hover,
+    .hds-card__container--hover-level-#{$style}-#{$level}.mock-hover {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+  @each $level in $hds-card-container-levels {
+    .hds-card__container--active-level-#{$style}-#{$level}:active,
+    .hds-card__container--active-level-#{$style}-#{$level}.mock-active {
+      box-shadow: var(--token-#{$style}-#{$level}-box-shadow);
+    }
+  }
+}
 
 // BACKGROUND
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",