@hashicorp/design-system-components 1.5.1 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @hashicorp/design-system-components
 
+## 1.5.2
+
+### Patch Changes
+
+- [#1036](https://github.com/hashicorp/design-system/pull/1036) [`b1756288e`](https://github.com/hashicorp/design-system/commit/b1756288e907dd36784fd33921e016d99a1b3417) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Update design system name to Helios
+
+* [#971](https://github.com/hashicorp/design-system/pull/971) [`fa819fedf`](https://github.com/hashicorp/design-system/commit/fa819fedf22b2dee45e8ee1119b98099f5402524) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix repetitive required field indicator for screen readers
+
+- [#1130](https://github.com/hashicorp/design-system/pull/1130) [`34fb0fe18`](https://github.com/hashicorp/design-system/commit/34fb0fe18895e59676fb208dc6025d2d15353336) Thanks [@MelSumner](https://github.com/MelSumner)! - Moves icon and count inside of tab (button element) for WCAG conformance
+
+* [#1157](https://github.com/hashicorp/design-system/pull/1157) [`39b645296`](https://github.com/hashicorp/design-system/commit/39b64529645110c0980c253c2e01099e2b585bc0) Thanks [@MelSumner](https://github.com/MelSumner)! - Fixes malformed CSS classes in table component
+
+- [#1080](https://github.com/hashicorp/design-system/pull/1080) [`1dde47948`](https://github.com/hashicorp/design-system/commit/1dde47948ef2aa2400e8f39e49e060d7507db037) Thanks [@didoo](https://github.com/didoo)! - Added `onSort` callback to `Hds::Table` component
+
+* [#1127](https://github.com/hashicorp/design-system/pull/1127) [`4eaf727e7`](https://github.com/hashicorp/design-system/commit/4eaf727e7b9ac732c1cc5a053d9e5a4b636ffc78) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds missing aria-label to breadcrumb truncation toggle for WCAG conformance.
+
+* Updated dependencies [[`b1756288e`](https://github.com/hashicorp/design-system/commit/b1756288e907dd36784fd33921e016d99a1b3417)]:
+  - @hashicorp/design-system-tokens@1.3.1
+
 ## 1.5.1
 
 ### Patch Changes

package/README.md

@@ -1,7 +1,7 @@
 design-system-components
 ==============================================================================
 
-A package containing the components for the HashiCorp Design System.
+A package containing the components for the Helios Design System.
 
 [![npm version](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-components.svg)](https://badge.fury.io/js/%40hashicorp%2Fdesign-system-components)
 

package/addon/components/hds/breadcrumb/truncation.hbs

@@ -4,6 +4,7 @@
       <button
         type="button"
         class="hds-breadcrumb__truncation-toggle"
+        aria-label="show more"
         aria-expanded={{if t.isOpen "true" "false"}}
         {{on "click" t.onClickToggle}}
       >

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

@@ -1,6 +1,6 @@
 {{#if @isOptional}}
-  <span class={{this.classNames}}>(Optional)</span>
+  <span aria-hidden="true" class={{this.classNames}}>(Optional)</span>
 {{/if}}
 {{#if @isRequired}}
-  &nbsp;<Hds::Badge class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
+  &nbsp;<Hds::Badge aria-hidden="true" class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
 {{/if}}

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

@@ -1,4 +1,3 @@
-{{! template-lint-disable no-invalid-interactive }}
 <dialog
   class={{this.classNames}}
   ...attributes

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

@@ -117,5 +117,11 @@ export default class HdsTableIndexComponent extends Component {
     }
     // we should allow the user to define a custom value here (e.g., for i18n) - tracked with HDS-965
     this.sortedMessageText = `Sorted by ${this.sortBy} ${this.sortOrder}ending`;
+
+    let { onSort } = this.args;
+
+    if (typeof onSort === 'function') {
+      onSort(this.sortBy, this.sortOrder);
+    }
   }
 }

package/addon/components/hds/table/td.js

@@ -37,7 +37,7 @@ export default class HdsTableTdComponent extends Component {
 
     // add a class based on the @align argument
     if (this.align) {
-      classes.push(`.hds-table__td--text-${this.align}`);
+      classes.push(`hds-table__td--text-${this.align}`);
     }
 
     return classes.join(' ');

package/addon/components/hds/table/th-sort.js

@@ -73,7 +73,7 @@ export default class HdsTableThSortComponent extends Component {
 
     // add a class based on the @align argument
     if (this.align) {
-      classes.push(`.hds-table__th-sort--text-${this.align}`);
+      classes.push(`hds-table__th-sort--text-${this.align}`);
     }
 
     return classes.join(' ');

package/addon/components/hds/table/th.js

@@ -37,7 +37,7 @@ export default class HdsTableThComponent extends Component {
 
     // add a class based on the @align argument
     if (this.align) {
-      classes.push(`.hds-table__th--text-${this.align}`);
+      classes.push(`hds-table__th--text-${this.align}`);
     }
 
     return classes.join(' ');

package/addon/components/hds/tabs/tab.hbs

@@ -1,9 +1,5 @@
 {{! template-lint-disable require-context-role no-invalid-role }}
 <li class={{this.classNames}} ...attributes role="presentation">
-  {{#if @icon}}
-    <FlightIcon @name={{@icon}} class="hds-tabs__tab-icon" />
-  {{/if}}
-
   <button
     class="hds-tabs__tab-button hds-typography-body-200 hds-font-weight-medium"
     role="tab"
@@ -16,10 +12,14 @@
     {{on "click" this.onClick}}
     {{on "keyup" this.onKeyUp}}
   >
+    {{#if @icon}}
+      <FlightIcon @name={{@icon}} class="hds-tabs__tab-icon" role="presentation" />
+    {{/if}}
+
     {{yield}}
-  </button>
 
-  {{#if @count}}
-    <Hds::BadgeCount @text={{@count}} @size="small" class="hds-tabs__tab-count" />
-  {{/if}}
+    {{#if @count}}
+      <Hds::BadgeCount @text={{@count}} @size="small" class="hds-tabs__tab-count" role="presentation" />
+    {{/if}}
+  </button>
 </li>

package/app/styles/components/tabs.scss

@@ -66,8 +66,9 @@
     $bottom: var(--token-tabs-tab-focus-inset),
     $left: var(--token-tabs-tab-focus-inset),
   );
-
   position: static;
+  display: flex;
+  align-items: center;
   padding: 0;
   color: inherit;
   background-color: transparent;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.5.1",
-  "description": "HashiCorp Design System Components",
+  "version": "1.5.2",
+  "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
+    "helios",
     "design system",
     "components",
     "ember-addon"
@@ -36,7 +37,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.3.0",
+    "@hashicorp/design-system-tokens": "^1.3.1",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
     "ember-auto-import": "^2.4.2",
@@ -58,7 +59,7 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.16.0",
+    "@percy/cli": "^1.17.0",
     "@percy/ember": "^4.0.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",

package/vercel.json

@@ -0,0 +1,13 @@
+{
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers" : [
+        {
+          "key" : "X-Robots-Tag",
+          "value" : "none"
+        }
+      ]
+    }
+  ]
+}