@hashicorp/design-system-components 3.6.0 → 4.0.0

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

@@ -1,47 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{! template-lint-disable no-invalid-role }}
-<div
-  class="hds-tabs"
-  {{did-insert this.didInsert}}
-  {{did-update this.didUpdateSelectedTabIndex this.selectedTabIndex}}
-  {{did-update this.didUpdateSelectedTabId this.selectedTabId}}
-  {{did-update this.didUpdateParentVisibility @isParentVisible}}
-  ...attributes
->
-  <div class="hds-tabs__tablist-wrapper">
-    <ul class="hds-tabs__tablist" role="tablist">
-      {{yield
-        (hash
-          Tab=(component
-            "hds/tabs/tab"
-            didInsertNode=this.didInsertTab
-            didUpdateNode=this.didUpdateTab
-            willDestroyNode=this.willDestroyTab
-            tabIds=this.tabIds
-            selectedTabIndex=this.selectedTabIndex
-            onClick=this.onClick
-            onKeyUp=this.onKeyUp
-          )
-        )
-      }}
-      <li class="hds-tabs__tab-indicator" role="presentation"></li>
-    </ul>
-  </div>
-
-  {{yield
-    (hash
-      Panel=(component
-        "hds/tabs/panel"
-        didInsertNode=this.didInsertPanel
-        willDestroyNode=this.willDestroyPanel
-        tabIds=this.tabIds
-        panelIds=this.panelIds
-        selectedTabIndex=this.selectedTabIndex
-      )
-    )
-  }}
-</div>
-{{! template-lint-enable no-invalid-role }}

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

@@ -1,211 +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, warn } from '@ember/debug';
-import { next, schedule } from '@ember/runloop';
-
-export default class HdsTabsIndexComponent extends Component {
-  @tracked tabNodes = [];
-  @tracked tabIds = [];
-  @tracked panelNodes = [];
-  @tracked panelIds = [];
-  @tracked _selectedTabIndex = this.args.selectedTabIndex ?? 0;
-  @tracked selectedTabId;
-  @tracked isControlled;
-
-  constructor() {
-    super(...arguments);
-
-    // this is to determine if the "selected" tab logic is controlled in the consumers' code or is maintained as an internal state
-    this.isControlled = this.args.selectedTabIndex !== undefined;
-  }
-
-  get selectedTabIndex() {
-    if (this.isControlled) {
-      return this.args.selectedTabIndex;
-    } else {
-      return this._selectedTabIndex;
-    }
-  }
-
-  set selectedTabIndex(value) {
-    if (this.isControlled) {
-      // noop
-    } else {
-      this._selectedTabIndex = value;
-    }
-  }
-
-  @action
-  didInsert() {
-    assert(
-      'The number of Tabs must be equal to the number of Panels',
-      this.tabNodes.length === this.panelNodes.length
-    );
-
-    if (this.selectedTabId) {
-      this.selectedTabIndex = this.tabIds.indexOf(this.selectedTabId);
-    }
-
-    schedule('afterRender', () => {
-      this.setTabIndicator();
-    });
-  }
-
-  @action
-  didUpdateSelectedTabIndex() {
-    schedule('afterRender', () => {
-      this.setTabIndicator();
-    });
-  }
-
-  @action
-  didUpdateSelectedTabId() {
-    // if the selected tab is set dynamically (eg. in a `each` loop)
-    // the `Tab` nodes will be re-inserted/rendered, which means the `this.selectedTabId` variable changes
-    // but the parent `Tabs` component has already been rendered/inserted but doesn't re-render
-    // so the value of the `selectedTabIndex` is not updated, unless we trigger a recalculation
-    // using the `did-update` modifier that checks for changes in the `this.selectedTabId` variable
-    if (this.selectedTabId) {
-      this.selectedTabIndex = this.tabIds.indexOf(this.selectedTabId);
-    }
-  }
-
-  @action
-  didUpdateParentVisibility() {
-    schedule('afterRender', () => {
-      this.setTabIndicator();
-    });
-  }
-
-  @action
-  didInsertTab(element, isSelected) {
-    this.tabNodes = [...this.tabNodes, element];
-    this.tabIds = [...this.tabIds, element.id];
-    if (isSelected) {
-      this.selectedTabId = element.id;
-    }
-  }
-
-  @action
-  didUpdateTab(tabIndex, isSelected) {
-    if (isSelected) {
-      this.selectedTabIndex = tabIndex;
-    }
-    this.setTabIndicator();
-  }
-
-  @action
-  willDestroyTab(element) {
-    this.tabNodes = this.tabNodes.filter((node) => node.id !== element.id);
-    this.tabIds = this.tabIds.filter((tabId) => tabId !== element.id);
-  }
-
-  @action
-  didInsertPanel(element, panelId) {
-    this.panelNodes = [...this.panelNodes, element];
-    this.panelIds = [...this.panelIds, panelId];
-  }
-
-  @action
-  willDestroyPanel(element) {
-    this.panelNodes = this.panelNodes.filter((node) => node.id !== element.id);
-    this.panelIds = this.panelIds.filter((panelId) => panelId !== element.id);
-  }
-
-  @action
-  onClick(event, tabIndex) {
-    this.selectedTabIndex = tabIndex;
-    this.setTabIndicator();
-
-    // invoke the callback function if it's provided as argument
-    if (typeof this.args.onClickTab === 'function') {
-      this.args.onClickTab(event, tabIndex);
-    }
-  }
-
-  @action
-  onKeyUp(tabIndex, event) {
-    const leftArrow = 37;
-    const rightArrow = 39;
-    const enterKey = 13;
-    const spaceKey = 32;
-
-    if (event.keyCode === rightArrow) {
-      const nextTabIndex = (tabIndex + 1) % this.tabIds.length;
-      this.focusTab(nextTabIndex, event);
-    } else if (event.keyCode === leftArrow) {
-      const prevTabIndex =
-        (tabIndex + this.tabIds.length - 1) % this.tabIds.length;
-      this.focusTab(prevTabIndex, event);
-    } else if (event.keyCode === enterKey || event.keyCode === spaceKey) {
-      this.selectedTabIndex = tabIndex;
-    }
-    // scroll selected tab into view (it may be out of view when activated using a keyboard with `prev/next`)
-    this.tabNodes[this.selectedTabIndex].parentNode.scrollIntoView({
-      behavior: 'smooth',
-      block: 'nearest',
-      inline: 'nearest',
-    });
-  }
-
-  // Focus tab for keyboard & mouse navigation:
-  focusTab(tabIndex, e) {
-    e.preventDefault();
-    this.tabNodes[tabIndex].focus();
-  }
-
-  setSelectedPanelFocus(tabIndex, e) {
-    e.preventDefault();
-    this.panelNodes[tabIndex].focus();
-  }
-
-  setTabIndicator() {
-    next(() => {
-      const tabElem = this.tabNodes[this.selectedTabIndex];
-
-      if (tabElem) {
-        const tabsParentElem = tabElem.closest('.hds-tabs__tablist');
-
-        // this condition is `null` if any of the parents has `display: none`
-        if (tabElem.parentNode.offsetParent) {
-          const tabLeftPos = tabElem.parentNode.offsetLeft;
-          const tabWidth = tabElem.parentNode.offsetWidth;
-
-          // Set CSS custom properties for indicator
-          tabsParentElem.style.setProperty(
-            '--indicator-left-pos',
-            tabLeftPos + 'px'
-          );
-          tabsParentElem.style.setProperty(
-            '--indicator-width',
-            tabWidth + 'px'
-          );
-        }
-      } else {
-        let message;
-        message +=
-          '"Hds::Tabs" has tried to set the indicator for an element that doesn\'t exist';
-        if (this.tabNodes.length === 0) {
-          message +=
-            ' (the array `this.tabNodes` is empty, there are no tabs, probably already destroyed)';
-        } else {
-          message += ` (the value ${
-            this.selectedTabIndex
-          } of \`this.selectedTabIndex\` is out of bound for the array \`this.tabNodes\`, whose index range is [0 - ${
-            this.tabNodes.length - 1
-          }])`;
-        }
-        // https://api.emberjs.com/ember/5.3/classes/@ember%2Fdebug/methods/warn?anchor=warn
-        warn(message, true, {
-          id: 'hds-debug.tabs.setTabIndicator-tabElem-not-available',
-        });
-      }
-    });
-  }
-}

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

@@ -1,16 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<section
-  class="hds-tabs__panel"
-  ...attributes
-  role="tabpanel"
-  id={{this.panelId}}
-  hidden={{not this.isVisible}}
-  aria-labelledby={{this.coupledTabId}}
-  {{did-insert this.didInsertNode}}
-  {{will-destroy this.willDestroyNode}}
->
-  {{yield (hash isVisible=this.isVisible)}}
-</section>

package/addon/components/hds/tabs/panel.js

@@ -1,59 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
-
-export default class HdsTabsPanelComponent extends Component {
-  /**
-   * Generate a unique ID for the Panel
-   * @return {string}
-   */
-  panelId = 'panel-' + guidFor(this);
-
-  get nodeIndex() {
-    return this.args.panelIds
-      ? this.args.panelIds.indexOf(this.panelId)
-      : undefined;
-  }
-
-  /**
-   * Check the condition if the panel is visible (because the coupled/associated tab is selected) or not
-   * @returns {boolean}
-   */
-  get isVisible() {
-    return this.nodeIndex === this.args.selectedTabIndex;
-  }
-
-  /**
-   * Get the ID of the tab coupled/associated with the panel (it's used by the `aria-labelledby` attribute)
-   * @returns string}
-   */
-  get coupledTabId() {
-    return this.nodeIndex !== undefined
-      ? this.args.tabIds[this.nodeIndex]
-      : undefined;
-  }
-
-  @action
-  didInsertNode(element) {
-    let { didInsertNode } = this.args;
-
-    if (typeof didInsertNode === 'function') {
-      this.elementId = element.id;
-      didInsertNode(element, this.elementId);
-    }
-  }
-
-  @action
-  willDestroyNode(element) {
-    let { willDestroyNode } = this.args;
-
-    if (typeof willDestroyNode === 'function') {
-      willDestroyNode(element);
-    }
-  }
-}

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

@@ -1,31 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{! template-lint-disable require-context-role no-invalid-role }}
-<li class={{this.classNames}} ...attributes role="presentation">
-  <button
-    class="hds-tabs__tab-button hds-typography-body-200 hds-font-weight-medium"
-    role="tab"
-    type="button"
-    id={{this.tabId}}
-    aria-selected={{if this.isSelected "true" "false"}}
-    tabindex={{unless this.isSelected "-1"}}
-    {{did-insert this.didInsertNode @isSelected}}
-    {{did-update this.didUpdateNode @count @isSelected}}
-    {{will-destroy this.willDestroyNode}}
-    {{on "click" this.onClick}}
-    {{on "keyup" this.onKeyUp}}
-  >
-    {{#if @icon}}
-      <FlightIcon @name={{@icon}} class="hds-tabs__tab-icon" role="presentation" />
-    {{/if}}
-
-    {{yield}}
-
-    {{#if @count}}
-      <Hds::BadgeCount @text={{@count}} @size="small" class="hds-tabs__tab-count" role="presentation" />
-    {{/if}}
-  </button>
-</li>
-{{! template-lint-enable require-context-role no-invalid-role }}

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

@@ -1,98 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { guidFor } from '@ember/object/internals';
-import { action } from '@ember/object';
-
-export default class HdsTabsTabComponent extends Component {
-  /**
-   * Generate a unique ID for the Tab
-   * @return {string}
-   */
-  tabId = 'tab-' + guidFor(this);
-
-  get nodeIndex() {
-    return this.args.tabIds ? this.args.tabIds.indexOf(this.tabId) : undefined;
-  }
-
-  /**
-   * Determine if the tab is the selected tab
-   * @return {boolean}
-   * @default false (1st tab is selected by default)
-   */
-  get isSelected() {
-    return (
-      this.nodeIndex !== undefined &&
-      this.nodeIndex === this.args.selectedTabIndex
-    );
-  }
-
-  @action
-  didInsertNode(element, positional) {
-    let { didInsertNode } = this.args;
-
-    const isSelected = positional[0];
-
-    if (typeof didInsertNode === 'function') {
-      didInsertNode(element, isSelected);
-    }
-  }
-
-  @action
-  didUpdateNode() {
-    let { didUpdateNode } = this.args;
-
-    if (typeof didUpdateNode === 'function') {
-      didUpdateNode(this.nodeIndex, this.args.isSelected);
-    }
-  }
-
-  @action
-  willDestroyNode(element) {
-    let { willDestroyNode } = this.args;
-
-    if (typeof willDestroyNode === 'function') {
-      willDestroyNode(element);
-    }
-  }
-
-  @action
-  onClick(event) {
-    let { onClick } = this.args;
-
-    if (typeof onClick === 'function') {
-      onClick(event, this.nodeIndex);
-    } else {
-      return false;
-    }
-  }
-
-  @action
-  onKeyUp(event) {
-    let { onKeyUp } = this.args;
-
-    if (typeof onKeyUp === 'function') {
-      onKeyUp(this.nodeIndex, event);
-    } else {
-      return false;
-    }
-  }
-
-  /**
-   * 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-tabs__tab'];
-
-    if (this.isSelected) {
-      classes.push(`hds-tabs__tab--is-selected`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,30 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Body class={{this.classNames}} @tag="span" @size="100" @weight="medium" @color="primary" ...attributes>
-  {{#if this.onDismiss}}
-    <button class="hds-tag__dismiss" type="button" aria-label={{this.ariaLabel}} {{on "click" this.onDismiss}}>
-      <FlightIcon class="hds-tag__dismiss-icon" @name="x" @size="16" @isInlineBlock={{false}} />
-    </button>
-  {{/if}}
-  {{#if (or @href @route)}}
-    <Hds::Interactive
-      class="hds-tag__link"
-      @current-when={{@current-when}}
-      @models={{hds-link-to-models @model @models}}
-      @query={{hds-link-to-query @query}}
-      @replace={{@replace}}
-      @route={{@route}}
-      @isRouteExternal={{@isRouteExternal}}
-      @href={{@href}}
-      @isHrefExternal={{@isHrefExternal}}
-    >
-      {{this.text}}
-    </Hds::Interactive>
-  {{else}}
-    <span class="hds-tag__text">
-      {{this.text}}
-    </span>
-  {{/if}}
-</Hds::Text::Body>

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

@@ -1,91 +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_COLOR = 'primary';
-export const COLORS = ['primary', 'secondary'];
-
-export default class HdsTagIndexComponent extends Component {
-  /**
-   * @param onDismiss
-   * @type {function}
-   * @default () => {}
-   */
-  get onDismiss() {
-    let { onDismiss } = this.args;
-
-    if (typeof onDismiss === 'function') {
-      return onDismiss;
-    } else {
-      return false;
-    }
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the tag. If no text value is defined, an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert('@text for "Hds::Tag" must have a valid value', text !== undefined);
-
-    return text;
-  }
-
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Dismiss'
-   */
-  get ariaLabel() {
-    let tagAriaLabel = this.args.ariaLabel ?? 'Dismiss';
-    return tagAriaLabel + ' ' + this.args.text;
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
-   */
-  get color() {
-    if (this.args.href || this.args.route) {
-      let { color = DEFAULT_COLOR } = this.args;
-      assert(
-        `@color for "Hds::Tag" must be one of the following: ${COLORS.join(
-          ', '
-        )}; received: ${color}`,
-        COLORS.includes(color)
-      );
-      return color;
-    } else if (this.args.color) {
-      assert(
-        '@color can only be applied to "Hds::Tag" along with either @href or @route',
-        this.args.href || this.args.route
-      );
-    }
-    return false;
-  }
-
-  /**
-   * 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-tag'];
-
-    // add a class based on the @color argument
-    if (this.color) {
-      classes.push(`hds-tag--color-${this.color}`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text
-  @group="body"
-  @size={{this.size}}
-  @weight={{this.weight}}
-  @align={{@align}}
-  @color={{@color}}
-  @tag={{@tag}}
-  ...attributes
->{{yield}}</Hds::Text>

package/addon/components/hds/text/body.js

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-// notice: only some combinations of size + font-weight are allowed (per design specs)
-// see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=1262%3A9192
-
-export const DEFAULT_SIZE = '200';
-export const AVAILABLE_SIZES = [300, 200, 100];
-
-export const DEFAULT_WEIGHT = 'regular';
-export const AVAILABLE_WEIGHTS_PER_SIZE = {
-  300: ['regular', 'medium', 'semibold'],
-  200: ['regular', 'medium', 'semibold'],
-  100: ['regular', 'medium', 'semibold'],
-};
-
-export default class HdsTextBodyComponent extends Component {
-  /**
-   * Sets the "size" for the text
-   * Accepted values: see AVAILABLE_SIZES
-   *
-   * @type {string}
-   *
-   * @param size
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    // let's be a bit forgiving with the consumers
-    if (typeof size === 'string') {
-      size = parseInt(size, 10);
-    }
-
-    assert(
-      `@size for "Hds::Text::Body" must be one of the following: ${AVAILABLE_SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      AVAILABLE_SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the "weight" for the text
-   * Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
-   *
-   * @type {string}
-   *
-   * @param variant
-   */
-  get weight() {
-    let { weight = DEFAULT_WEIGHT } = this.args;
-
-    const availableWeights = AVAILABLE_WEIGHTS_PER_SIZE[this.size];
-
-    assert(
-      `@weight for "Hds::Text::Body" with @size=${
-        this.size
-      } must be one of the following: ${availableWeights.join(
-        ', '
-      )}; received: ${weight}`,
-      availableWeights.includes(weight)
-    );
-
-    return weight;
-  }
-}

package/addon/components/hds/text/code.hbs

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text
-  @group="code"
-  @size={{this.size}}
-  @weight={{this.weight}}
-  @align={{@align}}
-  @color={{@color}}
-  @tag={{@tag}}
-  ...attributes
->{{yield}}</Hds::Text>