@hashicorp/design-system-components 3.6.0 → 4.0.0

package/addon/components/hds/copy/button/index.js

@@ -1,103 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export const DEFAULT_SIZE = 'medium';
-export const SIZES = ['small', 'medium'];
-export const DEFAULT_ICON = 'clipboard-copy';
-export const SUCCESS_ICON = 'clipboard-checked';
-export const ERROR_ICON = 'clipboard-x';
-export const DEFAULT_STATUS = 'idle';
-
-export default class HdsCopyButtonComponent extends Component {
-  @tracked status = DEFAULT_STATUS;
-  @tracked timer;
-
-  /**
-   * @param icon
-   * @type {string}
-   * @description The icon to be displayed for each status; automatically calculated based on the tracked property `status`.
-   */
-  get icon() {
-    let icon = DEFAULT_ICON;
-    if (this.status === 'success') {
-      icon = SUCCESS_ICON;
-    } else if (this.status === 'error') {
-      icon = ERROR_ICON;
-    }
-    return icon;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the copy/button; acceptable values are `small` and `medium`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Copy::Button" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method CopyButton#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-copy-button'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-button--size-${this.size}`);
-
-    classes.push(`hds-copy-button--status-${this.status}`);
-
-    return classes.join(' ');
-  }
-
-  @action
-  onSuccess(args) {
-    this.status = 'success';
-    this.resetStatusDelayed();
-
-    let { onSuccess } = this.args;
-
-    if (typeof onSuccess === 'function') {
-      onSuccess(args);
-    }
-  }
-
-  @action
-  onError(args) {
-    this.status = 'error';
-    this.resetStatusDelayed();
-
-    let { onError } = this.args;
-
-    if (typeof onError === 'function') {
-      onError(args);
-    }
-  }
-
-  resetStatusDelayed() {
-    clearTimeout(this.timer);
-    // make it fade back to the default state
-    this.timer = setTimeout(() => {
-      this.status = DEFAULT_STATUS;
-    }, 1500);
-  }
-}

package/addon/components/hds/copy/snippet/index.hbs

@@ -1,15 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<button
-  type="button"
-  class={{this.classNames}}
-  {{hds-clipboard text=@textToCopy onSuccess=this.onSuccess onError=this.onError}}
-  ...attributes
->
-  <Hds::Text::Code class="hds-copy-snippet__text" @tag="span" @size="100">
-    {{@textToCopy}}
-  </Hds::Text::Code>
-  <FlightIcon @name={{this.icon}} class="hds-copy-snippet__icon" />
-</button>

package/addon/components/hds/copy/snippet/index.js

@@ -1,135 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export const DEFAULT_COLOR = 'primary';
-export const COLORS = ['primary', 'secondary'];
-export const DEFAULT_ICON = 'clipboard-copy';
-export const SUCCESS_ICON = 'clipboard-checked';
-export const ERROR_ICON = 'clipboard-x';
-export const DEFAULT_STATUS = 'idle';
-
-export default class HdsCopySnippetIndexComponent extends Component {
-  @tracked status = DEFAULT_STATUS;
-  @tracked timer;
-
-  /**
-   * @param icon
-   * @type {string}
-   * @default DEFAULT_ICON
-   * @description Determines the icon to be used, based on the success state. Note that this is auto-tracked because it depends on a tracked property (status).
-   */
-  get icon() {
-    let icon = DEFAULT_ICON;
-    if (this.status === 'success') {
-      icon = SUCCESS_ICON;
-    } else if (this.status === 'error') {
-      icon = ERROR_ICON;
-    }
-    return icon;
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of button to be used; acceptable values are `primary` and `secondary`
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Copy::Snippet" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param isFullWidth
-   * @type {boolean}
-   * @default false
-   * @description Indicates that the component should take up the full width of the parent container.
-   */
-  get isFullWidth() {
-    return this.args.isFullWidth ?? false;
-  }
-
-  /**
-   * @param isTruncated
-   * @type {boolean}
-   * @default false
-   * @description Indicates that the component should be truncated instead of wrapping text and using multiple lines.
-   */
-  get isTruncated() {
-    return this.args.isTruncated ?? false;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method CopySnippet#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-copy-snippet'];
-
-    // add a class based on the @color argument
-    classes.push(`hds-copy-snippet--color-${this.color}`);
-
-    // add a class based on the tracked status (idle/success/error)
-    classes.push(`hds-copy-snippet--status-${this.status}`);
-
-    // add a class based on the @isTruncated argument
-    if (this.isTruncated) {
-      classes.push('hds-copy-snippet--is-truncated');
-    }
-
-    // add a class based on the @isFullWidth argument
-    if (this.isFullWidth) {
-      classes.push('hds-copy-snippet--width-full');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  onSuccess(args) {
-    this.status = 'success';
-    this.resetStatusDelayed();
-
-    let { onSuccess } = this.args;
-
-    if (typeof onSuccess === 'function') {
-      onSuccess(args);
-    }
-  }
-
-  @action
-  onError(args) {
-    this.status = 'error';
-    this.resetStatusDelayed();
-
-    let { onError } = this.args;
-
-    if (typeof onError === 'function') {
-      onError(args);
-    }
-  }
-
-  resetStatusDelayed() {
-    clearTimeout(this.timer);
-    // make it fade back to the default state
-    this.timer = setTimeout(() => {
-      this.status = DEFAULT_STATUS;
-    }, 1500);
-  }
-}

package/addon/components/hds/disclosure-primitive/index.hbs

@@ -1,14 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-disclosure-primitive" ...attributes>
-  <div class="hds-disclosure-primitive__toggle">
-    {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
-  </div>
-  {{#if this.isOpen}}
-    <div class="hds-disclosure-primitive__content">
-      {{yield (hash close=this.close) to="content"}}
-    </div>
-  {{/if}}
-</div>

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

@@ -1,30 +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 { schedule } from '@ember/runloop';
-
-export default class HdsDisclosurePrimitiveComponent extends Component {
-  @tracked isOpen = this.args.isOpen ?? false;
-
-  @action
-  onClickToggle() {
-    this.isOpen = !this.isOpen;
-  }
-
-  @action
-  close() {
-    // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
-    schedule('afterRender', () => {
-      this.isOpen = false;
-      // we call the "onClose" callback if it exists (and is a function)
-      if (this.args.onClose && typeof this.args.onClose === 'function') {
-        this.args.onClose();
-      }
-    });
-  }
-}

package/addon/components/hds/dismiss-button/index.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<button class="hds-dismiss-button" type="button" aria-label={{this.ariaLabel}} ...attributes>
-  <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
-</button>

package/addon/components/hds/dismiss-button/index.js

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsDismissButtonIndexComponent extends Component {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Dismiss'
-   */
-  get ariaLabel() {
-    return this.args.ariaLabel ?? 'Dismiss';
-  }
-}

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-dropdown__footer {{if @hasDivider 'hds-dropdown__footer--with-divider'}}" ...attributes>
-  {{yield}}
-</div>

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-dropdown__header {{if @hasDivider 'hds-dropdown__header--with-divider'}}" ...attributes>
-  {{yield}}
-</div>

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

@@ -1,36 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::MenuPrimitive class={{this.classNames}} @onClose={{@onClose}} ...attributes>
-  <:toggle as |t|>
-    {{yield
-      (hash
-        ToggleButton=(component "hds/dropdown/toggle/button" isOpen=t.isOpen onClick=t.onClickToggle)
-        ToggleIcon=(component "hds/dropdown/toggle/icon" isOpen=t.isOpen onClick=t.onClickToggle)
-      )
-    }}
-  </:toggle>
-  <:content as |c|>
-    <div class={{this.classNamesContent}} {{style width=@width max-height=@height}}>
-      {{yield (hash Header=(component "hds/dropdown/header"))}}
-      <ul class="hds-dropdown__list" {{did-insert this.didInsertList}}>
-        {{yield
-          (hash
-            close=c.close
-            Checkbox=(component "hds/dropdown/list-item/checkbox")
-            Checkmark=(component "hds/dropdown/list-item/checkmark")
-            CopyItem=(component "hds/dropdown/list-item/copy-item")
-            Description=(component "hds/dropdown/list-item/description")
-            Generic=(component "hds/dropdown/list-item/generic")
-            Interactive=(component "hds/dropdown/list-item/interactive")
-            Radio=(component "hds/dropdown/list-item/radio")
-            Separator=(component "hds/dropdown/list-item/separator")
-            Title=(component "hds/dropdown/list-item/title")
-          )
-        }}
-      </ul>
-      {{yield (hash close=c.close Footer=(component "hds/dropdown/footer"))}}
-    </div>
-  </:content>
-</Hds::MenuPrimitive>

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

@@ -1,80 +0,0 @@
-/**
- * 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';
-
-export const DEFAULT_POSITION = 'bottom-right';
-export const POSITIONS = [
-  'bottom-left',
-  'bottom-right',
-  'top-left',
-  'top-right',
-];
-
-export default class HdsDropdownIndexComponent extends Component {
-  /**
-   * @param listPosition
-   * @type {string}
-   * @default bottom-right
-   * @description Determines the position of the "list"
-   */
-  get listPosition() {
-    let { listPosition = DEFAULT_POSITION } = this.args;
-
-    assert(
-      `@listPosition for "Hds::Dropdown::Index" must be one of the following: ${POSITIONS.join(
-        ', '
-      )}; received: ${listPosition}`,
-      POSITIONS.includes(listPosition)
-    );
-
-    return listPosition;
-  }
-
-  /**
-   * Get the class names to apply to the element
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the root element
-   */
-  get classNames() {
-    let classes = ['hds-dropdown'];
-
-    // add a class based on the @isInline argument
-    if (this.args.isInline) {
-      classes.push('hds-dropdown--is-inline');
-    }
-
-    return classes.join(' ');
-  }
-
-  /**
-   * Get the class names to apply to the content
-   * @method classNamesContent
-   * @return {string} The "class" attribute to apply to the disclosed content
-   */
-  get classNamesContent() {
-    let classes = ['hds-dropdown__content'];
-
-    // add a class based on the @listPosition argument
-    classes.push(`hds-dropdown__content--position-${this.listPosition}`);
-
-    // add a class based on the @width argument
-    if (this.args.width) {
-      classes.push('hds-dropdown__content--fixed-width');
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  didInsertList(element) {
-    let checkmarkItems = element.querySelectorAll(`[role="option"]`);
-    if (checkmarkItems.length) {
-      element.setAttribute('role', 'listbox');
-    }
-  }
-}

package/addon/components/hds/dropdown/list-item/checkbox.hbs

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<li class="hds-dropdown-list-item hds-dropdown-list-item--variant-checkbox">
-  <label class="hds-dropdown-list-item__label hds-typography-body-200" for={{this.id}}>
-    <Hds::Form::Checkbox::Base class="hds-dropdown-list-item__control" id={{this.id}} @value={{@value}} ...attributes />
-    {{#if @icon}}
-      <span class="hds-dropdown-list-item__icon">
-        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-      </span>
-    {{/if}}
-    <span class="hds-dropdown-list-item__text-content">{{yield}}</span>
-
-    {{#if @count}}
-      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
-    {{/if}}
-  </label>
-</li>

package/addon/components/hds/dropdown/list-item/checkbox.js

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
-
-export default class HdsDropdownListItemCheckboxComponent extends Component {
-  /**
-   * Determines the unique ID to assign to the checkbox control
-   */
-  get id() {
-    return getElementId(this);
-  }
-}

package/addon/components/hds/dropdown/list-item/checkmark.hbs

@@ -1,46 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-{{! template-lint-disable no-invalid-role require-context-role require-presentational-children }}
-<li class={{this.classNames}} role="none">
-  <Hds::Interactive
-    @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}}
-    class="hds-dropdown-list-item__interactive"
-    ...attributes
-    role="option"
-    aria-selected={{if @selected "true" "false"}}
-  >
-    {{#if @icon}}
-      <span class="hds-dropdown-list-item__interactive-icon">
-        <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-      </span>
-    {{/if}}
-    <Hds::Text::Body @tag="span" @size="200" @weight="medium" class="hds-dropdown-list-item__interactive-text">
-      {{yield}}
-    </Hds::Text::Body>
-    {{#if @count}}
-      <Hds::Text::Body
-        class="hds-dropdown-list-item__count"
-        @tag="span"
-        @size="100"
-        @weight="medium"
-        @color="faint"
-      >{{@count}}</Hds::Text::Body>
-    {{/if}}
-    <span class="hds-dropdown-list-item__checkmark">
-      {{#if @selected}}
-        <FlightIcon class="hds-dropdown-list-item__checkmark-icon" @name="check" @isInlineBlock={{false}} />
-      {{/if}}
-    </span>
-  </Hds::Interactive>
-</li>
-{{! template-lint-enable no-invalid-role require-context-role require-presentational-children }}

package/addon/components/hds/dropdown/list-item/checkmark.js

@@ -1,28 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsDropdownListItemCheckmarkComponent extends Component {
-  /**
-   * 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-dropdown-list-item',
-      'hds-dropdown-list-item--color-action',
-      'hds-dropdown-list-item--variant-checkmark',
-    ];
-
-    // add a class based on the @selected argument
-    if (this.args.selected) {
-      classes.push('hds-dropdown-list-item--variant-checkmark-selected');
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/dropdown/list-item/copy-item.hbs

@@ -1,16 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<li class={{this.classNames}} ...attributes>
-  {{#if @copyItemTitle}}
-    <Hds::Text::Body
-      class="hds-dropdown-list-item__copy-item-title"
-      @tag="div"
-      @size="100"
-      @weight="semibold"
-      @color="faint"
-    >{{@copyItemTitle}}</Hds::Text::Body>
-  {{/if}}
-  <Hds::Copy::Snippet @color="secondary" @textToCopy={{this.text}} @isTruncated={{this.isTruncated}} />
-</li>

package/addon/components/hds/dropdown/list-item/copy-item.js

@@ -1,51 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export default class HdsDropdownListItemCopyItemComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the item. If no text value is defined an error will be thrown
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::ListItem::CopyItem" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param isTruncated
-   * @type {boolean}
-   * @default true
-   * @description Indicates that the text should be truncated instead of wrapping and using multiple lines.
-   */
-  get isTruncated() {
-    let { isTruncated = true } = this.args;
-
-    return isTruncated;
-  }
-
-  /**
-   * 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-dropdown-list-item',
-      'hds-dropdown-list-item--variant-copy-item',
-    ];
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/dropdown/list-item/description.hbs

@@ -1,14 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Body
-  class="hds-dropdown-list-item hds-dropdown-list-item--variant-description"
-  @tag="li"
-  @size="100"
-  @weight="regular"
-  @color="faint"
-  ...attributes
->
-  {{this.text}}
-</Hds::Text::Body>

package/addon/components/hds/dropdown/list-item/description.js

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export default class HdsDropdownListItemDescriptionComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the item. If no text value is defined an error will be thrown
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::ListItem::Description" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-}