@hashicorp/design-system-components 3.6.0 → 4.0.0

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

@@ -1,28 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class={{this.classNames}} ...attributes>
-  <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">
-      <path
-        d="m3.664 6.264 6.99-4.42a2.5 2.5 0 0 1 2.67-.002l7.01 4.422A2.5 2.5 0 0 1 21.5 8.38v7.242a2.5 2.5 0 0 1-1.166 2.115l-7.01 4.422a2.5 2.5 0 0 1-2.67-.002l-6.99-4.42A2.5 2.5 0 0 1 2.5 15.623V8.377a2.5 2.5 0 0 1 1.164-2.113Z"
-        stroke-width="1"
-      ></path>
-    </svg>
-  </div>
-  <div class="hds-stepper-indicator-step__status">
-    {{#if (eq @status "processing")}}
-      <FlightIcon class="hds-stepper-indicator-step__icon" @name="loading" @size="16" />
-    {{else if (eq @status "complete")}}
-      <FlightIcon class="hds-stepper-indicator-step__icon" @name="check" @size="16" />
-    {{else}}
-      <Hds::Text::Body
-        class="hds-stepper-indicator-step__text"
-        @tag="span"
-        @size="100"
-        @weight="medium"
-      >{{@text}}</Hds::Text::Body>
-    {{/if}}
-  </div>
-</div>

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

@@ -1,59 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export const DEFAULT_STATUS = 'incomplete';
-export const STATUSES = ['incomplete', 'progress', 'processing', 'complete'];
-
-export default class HdsStepperIndicatorStepIndexComponent extends Component {
-  /**
-   * @param status
-   * @type {string}
-   * @default "incomplete"
-   */
-
-  get status() {
-    let { status = DEFAULT_STATUS } = this.args;
-
-    assert(
-      `@status for "Hds::Stepper::Step::Indicator" must be one of the following: ${STATUSES.join(
-        ', '
-      )}; received: ${status}`,
-      STATUSES.includes(status)
-    );
-
-    return status;
-  }
-
-  /**
-   * @param isInteractive
-   * @type {boolean}
-   * @default false
-   */
-
-  get isInteractive() {
-    return this.args.isInteractive || false;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method IndicatorStep#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-stepper-indicator-step'];
-
-    // Based on the @status arg
-    classes.push(`hds-stepper-indicator-step--status-${this.status}`);
-
-    if (this.isInteractive) {
-      classes.push(`hds-stepper-indicator-step--is-interactive`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

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

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

@@ -1,74 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export const DEFAULT_STATUS = 'incomplete';
-export const STATUSES = ['incomplete', 'progress', 'processing', 'complete'];
-export const MAPPING_STATUS_TO_ICONS = {
-  incomplete: 'circle',
-  progress: 'circle-half',
-  processing: 'loading',
-  complete: 'check-circle',
-};
-
-export default class HdsStepperIndicatorTaskIndexComponent extends Component {
-  /**
-   * @param status
-   * @type {string}
-   * @default "incomplete"
-   */
-
-  get status() {
-    let { status = DEFAULT_STATUS } = this.args;
-
-    assert(
-      `@status for "Hds::Stepper::Task::Indicator" must be one of the following: ${STATUSES.join(
-        ', '
-      )}; received: ${status}`,
-      STATUSES.includes(status)
-    );
-
-    return status;
-  }
-
-  /**
-   * @param isInteractive
-   * @type {boolean}
-   * @default false
-   */
-
-  get isInteractive() {
-    return this.args.isInteractive || false;
-  }
-
-  /**
-   * @param iconName
-   * @type {string}
-   */
-
-  get iconName() {
-    return MAPPING_STATUS_TO_ICONS[this.status];
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method IndicatorTask#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-stepper-indicator-task'];
-
-    // Based on the @status arg
-    classes.push(`hds-stepper-indicator-task--status-${this.status}`);
-
-    if (this.isInteractive) {
-      classes.push(`hds-stepper-indicator-task--is-interactive`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,78 +0,0 @@
-{{!
-  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>
-  {{else if @caption}}
-    <caption class="sr-only">{{@caption}}</caption>
-  {{/if}}
-  <thead class="hds-table__thead">
-    {{#if @columns}}
-      <Hds::Table::Tr>
-        {{#each @columns as |column|}}
-          {{#if column.isSortable}}
-            <Hds::Table::ThSort
-              @sortOrder={{if (eq column.key this.sortBy) this.sortOrder}}
-              @onClick={{fn this.setSortBy column.key}}
-              @align={{column.align}}
-              @width={{column.width}}
-            >
-              {{column.label}}
-            </Hds::Table::ThSort>
-          {{else}}
-            <Hds::Table::Th
-              @align={{column.align}}
-              @width={{column.width}}
-              @isVisuallyHidden={{column.isVisuallyHidden}}
-            >{{column.label}}</Hds::Table::Th>
-          {{/if}}
-        {{/each}}
-      </Hds::Table::Tr>
-    {{else}}
-      {{yield
-        (hash
-          Tr=(component "hds/table/tr")
-          Th=(component "hds/table/th")
-          ThSort=(component "hds/table/th-sort")
-          sortBy=this.sortBy
-          sortOrder=this.sortOrder
-          setSortBy=this.setSortBy
-        )
-        to="head"
-      }}
-    {{/if}}
-  </thead>
-  <tbody class="hds-table__tbody">
-    {{#if @columns}}
-      {{! ----------------------------------------------------------------------------------------
-        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=record
-          )
-          to="body"
-        }}
-      {{/each}}
-    {{else}}
-      {{yield
-        (hash
-          Tr=(component "hds/table/tr")
-          Th=(component "hds/table/th" scope="row")
-          Td=(component "hds/table/td" align=@align)
-          sortBy=this.sortBy
-          sortOrder=this.sortOrder
-        )
-        to="body"
-      }}
-    {{/if}}
-  </tbody>
-</table>

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

@@ -1,182 +0,0 @@
-/**
- * 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';
-import { assert } from '@ember/debug';
-
-const DENSITIES = ['short', 'medium', 'tall'];
-const DEFAULT_DENSITY = 'medium';
-const VALIGNMENTS = ['top', 'middle', 'baseline'];
-const DEFAULT_VALIGN = 'top';
-
-export default class HdsTableIndexComponent extends Component {
-  @tracked sortBy = this.args.sortBy;
-  @tracked sortOrder = this.args.sortOrder || 'asc';
-
-  /**
-   * @param getSortCriteria
-   * @type {string | function}
-   * @default sortBy:sortOrder
-   * @description Returns the sort criteria
-   */
-  get getSortCriteria() {
-    // 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 '';
-    }
-  }
-
-  /**
-   * @param isStriped
-   * @type {boolean}
-   * @default false
-   * @description Determines whether the table rows should have alternating background colors; defaults to false.
-   */
-  get isStriped() {
-    return this.args.isStriped ?? false;
-  }
-
-  /**
-   * @param isFixedLayout
-   * @type {boolean}
-   * @default false
-   * @description Determines whether the table-display should be set to fixed; meaning, the table columns are of equal width no matter the content; defaults to false.
-   */
-  get isFixedLayout() {
-    return this.args.isFixedLayout ?? false;
-  }
-
-  /**
-   * @param density
-   * @type {string}
-   * @default 'medium'
-   * @description Determines the density of the table cells; options are "short", "medium" and "tall". If no density is defined, "medium" is used.
-   */
-  get density() {
-    let { density = DEFAULT_DENSITY } = this.args;
-
-    assert(
-      `@density for "Hds::Table" must be one of the following: ${DENSITIES.join(
-        ', '
-      )}; received: ${density}`,
-      DENSITIES.includes(density)
-    );
-
-    return density;
-  }
-
-  /**
-   * @param valign
-   * @type {string}
-   * @default 'top'
-   * @description Determines the vertical alignment of the table cells; options are: "top", "middle", "baseline". If no valign is defined, "top" is used.
-   */
-  get valign() {
-    let { valign = DEFAULT_VALIGN } = this.args;
-
-    assert(
-      `@valign for "Hds::Table" must be one of the following: ${VALIGNMENTS.join(
-        ', '
-      )}; received: ${valign}`,
-      VALIGNMENTS.includes(valign)
-    );
-
-    return valign;
-  }
-
-  /**
-   * 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-table'];
-
-    // add a class based on the @isStriped argument
-    if (this.isStriped) {
-      classes.push('hds-table--striped');
-    }
-
-    // add a class based on the @isFixedLayout argument
-    if (this.isFixedLayout) {
-      classes.push('hds-table--layout-fixed');
-    }
-
-    // add a class based on the @density argument
-    if (this.density) {
-      classes.push(`hds-table--density-${this.density}`);
-    }
-
-    // add a class based on the @valign argument
-    if (this.valign) {
-      classes.push(`hds-table--valign-${this.valign}`);
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  setSortBy(column) {
-    if (this.sortBy === column) {
-      // 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';
-    }
-
-    let { onSort } = this.args;
-
-    if (typeof onSort === 'function') {
-      onSort(this.sortBy, this.sortOrder);
-    }
-  }
-}

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

@@ -1,7 +0,0 @@
-{{!
-  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,50 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-const ALIGNMENTS = ['left', 'center', 'right'];
-const DEFAULT_ALIGN = 'left';
-
-export default class HdsTableTdComponent extends Component {
-  /**
-   * @param align
-   * @type {string}
-   * @default left
-   * @description Determines the text alignment of the header or cell content. Options are: "left", "center", "right". If no align is defined, "left" is used.
-   */
-  get align() {
-    let { align = DEFAULT_ALIGN } = this.args;
-
-    assert(
-      `@align for "Hds::Table::Td" must be one of the following: ${ALIGNMENTS.join(
-        ', '
-      )}; received: ${align}`,
-      ALIGNMENTS.includes(align)
-    );
-    return align;
-  }
-
-  /**
-   * 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-table__td',
-      'hds-typography-body-200',
-      'hds-font-weight-regular',
-    ];
-
-    // add a class based on the @align argument
-    if (this.align) {
-      classes.push(`hds-table__td--text-${this.align}`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,18 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<th
-  class={{this.classNames}}
-  aria-sort={{this.ariaSort}}
-  {{style width=@width minWidth=@width}}
-  ...attributes
-  scope="col"
->
-  <button type="button" {{on "click" this.onClick}}>
-    <div class="hds-table__th-sort--button-content">
-      <span class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>
-      <FlightIcon @name={{this.icon}} />
-    </div>
-  </button>
-</th>

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

@@ -1,94 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-const NOOP = () => {};
-const ALIGNMENTS = ['left', 'center', 'right'];
-const DEFAULT_ALIGN = 'left';
-
-export default class HdsTableThSortComponent extends Component {
-  /**
-   * @param ariaSort
-   * @type {string}
-   * @private
-   * @default none
-   * @description Sets the aria-sort attribute based on the sort order defined; acceptable values are ascending, descending, none(default) and other. Authors SHOULD only apply this property to table headers or grid headers. If the property is not provided, there is no defined sort order. For each table or grid, authors SHOULD apply aria-sort to only one header at a time.
-   */
-  get ariaSort() {
-    switch (this.args.sortOrder) {
-      case 'asc':
-        return 'ascending';
-      case 'desc':
-        return 'descending';
-      default:
-        // none is the default per the spec.
-        return 'none';
-    }
-  }
-
-  /**
-   * @param icon
-   * @type {string}
-   * @private
-   * @default swap-vertical
-   * @description Determines which icon to use based on the sort order defined
-   */
-  get icon() {
-    switch (this.args.sortOrder) {
-      case 'asc':
-        return 'arrow-up';
-      case 'desc':
-        return 'arrow-down';
-      default:
-        return 'swap-vertical';
-    }
-  }
-
-  /**
-   * @param align
-   * @type {string}
-   * @default left
-   * @description Determines the text alignment of the header or cell content. Options are: "left", "center", "right". If no align is defined, "left" is used.
-   */
-  get align() {
-    let { align = DEFAULT_ALIGN } = this.args;
-
-    assert(
-      `@align for "Hds::Table" must be one of the following: ${ALIGNMENTS.join(
-        ', '
-      )}; received: ${align}`,
-      ALIGNMENTS.includes(align)
-    );
-    return align;
-  }
-
-  /**
-   * @param onClick
-   * @type {function}
-   * @default () => {}
-   */
-  get onClick() {
-    let { onClick } = this.args;
-    return onClick || 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-table__th-sort'];
-
-    // add a class based on the @align argument
-    if (this.align) {
-      classes.push(`hds-table__th-sort--text-${this.align}`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<th class={{this.classNames}} {{style width=@width minWidth=@width}} ...attributes scope={{(or @scope "col")}}>
-  {{#if @isVisuallyHidden}}
-    <span class="sr-only">{{yield}}</span>
-  {{else}}
-    {{yield}}
-  {{/if}}
-</th>

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

@@ -1,50 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-const ALIGNMENTS = ['left', 'center', 'right'];
-const DEFAULT_ALIGN = 'left';
-
-export default class HdsTableThComponent extends Component {
-  /**
-   * @param align
-   * @type {string}
-   * @default left
-   * @description Determines the text alignment of the header or cell content. Options are: "left", "center", "right". If no align is defined, "left" is used.
-   */
-  get align() {
-    let { align = DEFAULT_ALIGN } = this.args;
-
-    assert(
-      `@align for "Hds::Table::Th" must be one of the following: ${ALIGNMENTS.join(
-        ', '
-      )}; received: ${align}`,
-      ALIGNMENTS.includes(align)
-    );
-    return align;
-  }
-
-  /**
-   * 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-table__th',
-      'hds-typography-body-200',
-      'hds-font-weight-semibold',
-    ];
-
-    // add a class based on the @align argument
-    if (this.align) {
-      classes.push(`hds-table__th--text-${this.align}`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

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