@hashicorp/design-system-components 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hashicorp/design-system-components
 
+## 1.8.1
+
+### Patch Changes
+
+- [#1260](https://github.com/hashicorp/design-system/pull/1260) [`8eb0d1ff6`](https://github.com/hashicorp/design-system/commit/8eb0d1ff63248fe049962192190480a7fe6fdef9) Thanks [@didoo](https://github.com/didoo)! - Added `@ember/render-modifiers` as explicit dependency
+
+- [#1256](https://github.com/hashicorp/design-system/pull/1256) [`451d98842`](https://github.com/hashicorp/design-system/commit/451d98842474dad2b3f3a6ad38c813e9d92d0f1d) Thanks [@alex-ju](https://github.com/alex-ju)! - Make the `Disclosure` mechanism more resilient
+
 ## 1.8.0
 
 ### Minor Changes

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

@@ -30,10 +30,9 @@ export default class HdsDisclosureComponent extends Component {
 
   @action
   onFocusOut(event) {
-    if (
-      !event.relatedTarget || // click or tap a non-related target (e.g. outside the element)
-      !this.element.contains(event.relatedTarget) // move focus to a target outside the element
-    ) {
+    // due to inconsitent implementation of relatedTarget across browsers we use the activeElement as a fallback
+    // if the related target is not part of the disclosed content we close the disclosed container
+    if (!this.element.contains(event.relatedTarget || document.activeElement)) {
       this.close();
     }
   }

package/addon/components/hds/side-nav/header.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-side-nav-header" ...attributes>
   <div class="hds-side-nav-header__logo">
     {{yield to="logo"}}

package/addon/components/hds/side-nav/home-link.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <Hds::Interactive
   class="hds-side-nav__home-link"
   @current-when={{@current-when}}
@@ -9,6 +14,7 @@
   @href={{@href}}
   @isHrefExternal={{@isHrefExternal}}
   ...attributes
+  aria-label={{this.ariaLabel}}
 >
   <FlightIcon @name={{@icon}} @color={{@color}} @stretched={{true}} />
 </Hds::Interactive>

package/addon/components/hds/side-nav/home-link.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsSideNavHomeLinkComponent extends Component {
+  /**
+   * @param ariaLabel
+   * @type {string}
+   * @description The value of `aria-label`
+   */
+  get ariaLabel() {
+    let { ariaLabel } = this.args;
+
+    assert(
+      '@ariaLabel for "Hds::SideNav::HomeLink" must have a valid value',
+      ariaLabel !== undefined
+    );
+
+    return ariaLabel;
+  }
+}

package/addon/components/hds/side-nav/icon-button.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <Hds::Interactive
   class="hds-side-nav__icon-button"
   @current-when={{@current-when}}

package/addon/components/hds/side-nav/list/back-link.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <Hds::SideNav::List::Item>
   <Hds::Interactive
     class="hds-side-nav__list-item-link hds-side-nav__list-item-link--back-link"

package/addon/components/hds/side-nav/list/index.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <nav class="hds-side-nav__list-wrapper" ...attributes>
   <ul class="hds-side-nav__list" role="list">
     {{yield

package/addon/components/hds/side-nav/list/item.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <li class="hds-side-nav__list-item" ...attributes>
   {{yield}}
 </li>

package/addon/components/hds/side-nav/list/link.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <Hds::SideNav::List::Item>
   <Hds::Interactive
     class="hds-side-nav__list-item-link {{if @isActive 'active'}}"

package/addon/components/hds/side-nav/list/title.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <Hds::SideNav::List::Item>
   <div class="hds-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold" ...attributes>{{~yield~}}</div>
 </Hds::SideNav::List::Item>

package/addon/components/hds/side-nav/wrapper.hbs

@@ -1,3 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
 <div class="hds-side-nav__wrapper" ...attributes>
   <div class="hds-side-nav__wrapper-header">
     {{yield to="header"}}

package/app/components/hds/side-nav/header.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/header';

package/app/components/hds/side-nav/home-link.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/home-link';

package/app/components/hds/side-nav/icon-button.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/icon-button';

package/app/components/hds/side-nav/list/back-link.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/back-link';

package/app/components/hds/side-nav/list/index.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/index';

package/app/components/hds/side-nav/list/item.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/item';

package/app/components/hds/side-nav/list/link.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/link';

package/app/components/hds/side-nav/list/title.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/list/title';

package/app/components/hds/side-nav/wrapper.js

@@ -1 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export { default } from '@hashicorp/design-system-components/components/hds/side-nav/wrapper';

package/app/styles/components/side-nav.scss

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 //
 // SIDE-NAV
 //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -37,6 +37,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
+    "@ember/render-modifiers": "^2.0.5",
     "@hashicorp/design-system-tokens": "^1.4.1",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
@@ -60,7 +61,7 @@
     "@embroider/test-setup": "^2.0.2",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.20.1",
+    "@percy/cli": "^1.21.0",
     "@percy/ember": "^4.2.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
@@ -99,7 +100,7 @@
     "stylelint": "^14.16.1",
     "stylelint-config-rational-order": "^0.1.2",
     "stylelint-config-standard-scss": "^5.0.0",
-    "webpack": "^5.75.0"
+    "webpack": "^5.76.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"