@hashicorp/design-system-components 1.6.1 → 1.7.0

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

@@ -1 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <input type="radio" class="hds-form-radio" ...attributes value={{@value}} />

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Field
   @layout="flag"
   @contextualClass={{@contextualClass}}

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Fieldset
   @layout={{@layout}}
   @name={{@name}}

package/addon/components/hds/form/radio-card/description.hbs

@@ -1 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <span class="hds-form-radio-card__description hds-typography-body-100" ...attributes>{{yield}}</span>

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Fieldset
   class="hds-form-group--radio-cards"
   @layout="horizontal"

package/addon/components/hds/form/radio-card/index.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <label class={{this.classNames}} {{did-insert this.setAriaDescribedBy}} {{style maxWidth=@maxWidth}}>
   <span class="hds-form-radio-card__content">
     {{yield (hash Icon=(component "flight-icon" size="24" isInlineBlock=false))}}

package/addon/components/hds/form/radio-card/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';

package/addon/components/hds/form/radio-card/label.hbs

@@ -1 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <span class="hds-form-radio-card__label hds-typography-display-300 hds-font-weight-bold" ...attributes>{{yield}}</span>

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <select class={{this.classNames}} {{style width=@width}} ...attributes>
   {{yield (hash Options=(component "hds/yield"))}}
 </select>

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsFormSelectBaseComponent extends Component {

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Field
   @layout="vertical"
   @extraAriaDescribedBy={{@extraAriaDescribedBy}}

package/addon/components/hds/form/text-input/base.hbs

@@ -1 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <input class={{this.classNames}} {{style width=@width}} ...attributes value={{@value}} type={{this.type}} />

package/addon/components/hds/form/text-input/base.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

package/addon/components/hds/form/text-input/field.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Field
   @layout="vertical"
   @extraAriaDescribedBy={{@extraAriaDescribedBy}}

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

@@ -1,2 +1,6 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 {{! Notice: this is not the native HTML <textarea> but the Ember component <Textarea> }}
 <Textarea class={{this.classNames}} {{style width=@width height=@height}} rows="4" ...attributes @value={{@value}} />

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsFormTextareaBaseComponent extends Component {

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Field
   @layout="vertical"
   @extraAriaDescribedBy={{@extraAriaDescribedBy}}

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class={{this.classNames}}>
   <input class="hds-form-toggle__control" type="checkbox" ...attributes value={{@value}} role="switch" />
   <div class="hds-form-toggle__facade"></div>

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsFormToggleBaseComponent extends Component {

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Field
   @layout="flag"
   @contextualClass={{@contextualClass}}

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...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 isRequired=F.isRequired isOptional=F.isOptional)}}

package/addon/components/hds/form/utils/getElementId.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import { guidFor } from '@ember/object/internals';
 
 export function getElementId(element) {

package/addon/components/hds/form/utils/setAriaDescribedBy.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export function setAriaDescribedBy(element) {
   // append @extraAriaDescribedBy arg, if provided
   if (element.args.extraAriaDescribedBy) {

package/addon/components/hds/icon-tile/index.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class={{this.classNames}} aria-hidden="true" ...attributes>
   {{#if @icon}}
     <div class="hds-icon-tile__icon">

package/addon/components/hds/icon-tile/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 

package/addon/components/hds/link/inline.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

package/addon/components/hds/link/standalone.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-modal__body" ...attributes>
   {{yield}}
 </div>

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-modal__footer" ...attributes>
   {{yield (hash close=@onDismiss)}}
 </div>

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-modal__header" ...attributes>
   {{#if @icon}}
     <FlightIcon class="hds-modal__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <dialog
   class={{this.classNames}}
   ...attributes

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';

package/addon/components/hds/pagination/compact/index.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-pagination" ...attributes>
   <nav class="hds-pagination-nav" aria-label="Pagination navigation">
     <Hds::Pagination::Nav::Arrow

package/addon/components/hds/pagination/compact/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';

package/addon/components/hds/pagination/info/index.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-pagination-info hds-typography-body-100 hds-font-weight-medium" ...attributes>
   {{@itemsRangeStart}}–{{@itemsRangeEnd}}
   {{#if this.showTotalItems}}

package/addon/components/hds/pagination/info/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 
 export default class HdsPaginationInfoComponent extends Component {

package/addon/components/hds/pagination/nav/arrow.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 {{#if @disabled}}
   <Hds::Interactive class={{this.classNames}} aria-label={{this.content.ariaLabel}} disabled={{true}} ...attributes>
     <FlightIcon @name={{this.content.icon}} />

package/addon/components/hds/pagination/nav/arrow.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';

package/addon/components/hds/pagination/nav/ellipsis.hbs

@@ -1 +1,5 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-pagination-nav__ellipsis" ...attributes>...</div>

package/addon/components/hds/pagination/nav/number.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <Hds::Interactive
   class={{this.classNames}}
   @route={{@route}}

package/addon/components/hds/pagination/nav/number.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';

package/addon/components/hds/pagination/numbered/index.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-pagination" ...attributes>
   {{#if this.showInfo}}
     <Hds::Pagination::Info
@@ -58,6 +62,7 @@
   {{#if this.showSizeSelector}}
     <Hds::Pagination::SizeSelector
       @pageSizes={{this.pageSizes}}
+      @label={{@sizeSelectorLabel}}
       @selectedSize={{this.currentPageSize}}
       @onChange={{this.onPageSizeChange}}
     />

package/addon/components/hds/pagination/numbered/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';

package/addon/components/hds/pagination/size-selector/index.hbs

@@ -1,5 +1,11 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class="hds-pagination-size-selector" ...attributes>
-  <label class="hds-typography-body-100 hds-font-weight-medium" for={{this.SizeSelectorId}}>Items per page</label>
+  <label class="hds-typography-body-100 hds-font-weight-medium" for={{this.SizeSelectorId}}>
+    {{this.label}}
+  </label>
   <Hds::Form::Select::Base id={{this.SizeSelectorId}} {{on "change" this.onChange}} as |S|>
     <S.Options>
       {{#each this.pageSizes as |size|}}

package/addon/components/hds/pagination/size-selector/index.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { guidFor } from '@ember/object/internals';
@@ -45,6 +50,18 @@ export default class HdsPaginationSizeSelectorComponent extends Component {
     return selectedSize;
   }
 
+  /**
+   * @param label
+   * @type string
+   * @default "Items per page"
+   * @description The label text for the select
+   */
+  get label() {
+    let { label = 'Items per page' } = this.args;
+
+    return label;
+  }
+
   @action
   onChange(e) {
     let { onChange } = this.args;

package/addon/components/hds/stepper/step/indicator.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class={{this.classNames}} ...attributes aria-label={{@status}}>
   <div class="hds-stepper-indicator-step__svg-hexagon">
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">

package/addon/components/hds/stepper/step/indicator.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

package/addon/components/hds/stepper/task/indicator.hbs

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <div class={{this.classNames}} ...attributes aria-label={{@status}}>
   <FlightIcon class="hds-stepper-indicator-task__icon" @name={{this.iconName}} @size="16" />
 </div>

package/addon/components/hds/stepper/task/indicator.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <table class={{this.classNames}} ...attributes>
   {{#if @columns}}
     <caption class="sr-only" aria-live="polite">{{@caption}} {{this.sortedMessageText}}</caption>
@@ -10,8 +14,7 @@
         {{#each @columns as |column|}}
           {{#if column.isSortable}}
             <Hds::Table::ThSort
-              @isSorted={{eq column.key this.sortBy}}
-              @sortOrder={{this.sortOrder}}
+              @sortOrder={{if (eq column.key this.sortBy) this.sortOrder}}
               @onClick={{fn this.setSortBy column.key}}
               @align={{column.align}}
               @width={{column.width}}
@@ -32,13 +35,18 @@
   </thead>
   <tbody class="hds-table__tbody">
     {{#if @columns}}
-      {{#each (sort-by this.getSortCriteria @model) as |data|}}
+      {{! ----------------------------------------------------------------------------------------
+        IMPORTANT: we loop on the `model` array and for each record
+        we yield the Tr/Td/Th elements _and_ the record itself as `data`
+        this means the consumer will *have to* use the `data` key to access it in their template
+      -------------------------------------------------------------------------------------------- }}
+      {{#each (sort-by this.getSortCriteria @model) key=this.identityKey as |record|}}
         {{yield
           (hash
             Tr=(component "hds/table/tr")
             Th=(component "hds/table/th" scope="row")
             Td=(component "hds/table/td" align=@align)
-            data=data
+            data=record
           )
           to="body"
         }}

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
@@ -11,10 +16,61 @@ const DEFAULT_VALIGN = 'top';
 export default class HdsTableIndexComponent extends Component {
   @tracked sortBy = this.args.sortBy;
   @tracked sortOrder = this.args.sortOrder || 'asc';
-  @tracked sortedMessageText = '';
 
+  /**
+   * @param getSortCriteria
+   * @type {string | function}
+   * @default sortBy:sortOrder
+   * @description Returns the sort criteria
+   */
   get getSortCriteria() {
-    return `${this.sortBy}:${this.sortOrder}`;
+    // get the current column
+    const currentColumn = this.args?.columns?.find(
+      (column) => column.key === this.sortBy
+    );
+    if (
+      // check if there is a custom sorting function associated with the current `sortBy` column (we assume the column has `isSortable`)
+      currentColumn?.sortingFunction &&
+      typeof currentColumn.sortingFunction === 'function'
+    ) {
+      return currentColumn.sortingFunction;
+    } else {
+      // otherwise fallback to the default format "sortBy:sortOrder"
+      return `${this.sortBy}:${this.sortOrder}`;
+    }
+  }
+
+  /**
+   * @param identityKey
+   * @type {string}
+   * @default '@identity'
+   * @description Returns the key to use for the table rows to provide more granular control. If no identityKey is defined, Ember's default `@identity` is used. See https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/each?anchor=each
+   * this would be relevant for any table that would have data that could update or change, i.e., polling.
+   */
+  get identityKey() {
+    // we have to provide a way for the consumer to pass undefined because Ember tries to interpret undefined as missing an arg and therefore falls back to the default
+    if (this.args.identityKey === 'none') {
+      return undefined;
+    } else {
+      return this.args.identityKey ?? '@identity';
+    }
+  }
+
+  /**
+   * @param sortedMessageText
+   * @type {string}
+   * @default ''
+   * @description Returns the text to display in the sorted message. If no text is defined, the default text is used.
+   */
+  get sortedMessageText() {
+    if (this.args.sortedMessageText) {
+      return this.args.sortedMessageText;
+    } else if (this.sortBy && this.sortOrder) {
+      // we should allow the user to define a custom value here (e.g., for i18n) - tracked with HDS-965
+      return `Sorted by ${this.sortBy} ${this.sortOrder}ending`;
+    } else {
+      return '';
+    }
   }
 
   /**
@@ -109,14 +165,13 @@ export default class HdsTableIndexComponent extends Component {
   @action
   setSortBy(column) {
     if (this.sortBy === column) {
-      //invert the sort order
+      // check to see if the column is already sorted and invert the sort order if so
       this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
     } else {
+      // otherwise, set the sort order to ascending
       this.sortBy = column;
       this.sortOrder = 'asc';
     }
-    // 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;
 

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <td class={{this.classNames}} ...attributes>
   {{yield}}
 </td>

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

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 

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

@@ -1,3 +1,7 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
 <th class={{this.classNames}} aria-sort={{this.ariaSort}} {{style width=@width}} ...attributes scope="col">
   <button type="button" {{on "click" this.onClick}}>
     <div class="hds-table__th-sort--button-content">