@hashicorp/design-system-components 0.9.0 → 0.10.0

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

@@ -1,84 +0,0 @@
-{{#if (eq this.item "title")}}
-  <li class={{this.classNames}}>
-    {{this.text}}
-  </li>
-
-{{else if (eq this.item "generic")}}
-  <li class={{this.classNames}}>
-    {{yield}}
-  </li>
-
-{{else if (eq this.item "copy-item")}}
-  <li class={{this.classNames}}>
-    {{#if @copyItemTitle}}
-      <div class="hds-dropdown-list-item__copy-item-title">{{@copyItemTitle}}</div>
-    {{/if}}
-    <button
-      type="button"
-      class="{{if @state (concat 'is-' @state)}} {{if this.isSuccess 'is-success'}}"
-      {{on "click" this.copyCode}}
-    >
-      <div class="hds-dropdown-list-item__copy-item-text">
-        {{this.text}}
-      </div>
-      <FlightIcon
-        @name="{{if this.isSuccess 'clipboard-checked' 'clipboard-copy'}}"
-        class="hds-dropdown-list-item__copy-item-icon"
-      />
-    </button>
-  </li>
-
-{{else if (eq this.item "description")}}
-  <li class={{this.classNames}}>
-    {{this.text}}
-  </li>
-
-{{else if (eq this.item "separator")}}
-  <li class={{this.classNames}} role="separator"></li>
-
-{{else if (eq this.item "interactive")}}
-  <li class={{this.classNames}}>
-    {{#if @route}}
-      <LinkTo
-        class="{{if @state (concat 'is-' @state)}}"
-        @current-when={{@current-when}}
-        @models={{hds-link-to-models @model @models}}
-        @query={{hds-link-to-query @query}}
-        @replace={{@replace}}
-        @route={{@route}}
-        ...attributes
-      >
-        {{#if @icon}}
-          <div class="hds-dropdown-list-item__interactive-icon">
-            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
-          </div>
-        {{/if}}
-        <div class="hds-dropdown-list-item__interactive-text">
-          {{this.text}}
-        </div>
-      </LinkTo>
-    {{else if @href}}
-      <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
-        {{#if this.icon}}
-          <div class="hds-dropdown-list-item__interactive-icon">
-            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
-          </div>
-        {{/if}}
-        <div class="hds-dropdown-list-item__interactive-text">
-          {{this.text}}
-        </div>
-      </a>
-    {{else}}
-      <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
-        {{#if this.icon}}
-          <div class="hds-dropdown-list-item__interactive-icon">
-            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
-          </div>
-        {{/if}}
-        <div class="hds-dropdown-list-item__interactive-text">
-          {{this.text}}
-        </div>
-      </button>
-    {{/if}}
-  </li>
-{{/if}}

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

@@ -1,120 +0,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 = 'action';
-export const DEFAULT_ITEM = 'interactive';
-export const COLORS = ['action', 'critical'];
-export const ITEMS = [
-  'copy-item',
-  'description',
-  'generic',
-  'interactive',
-  'separator',
-  'title',
-];
-
-export default class HdsDropdownListItemComponent extends Component {
-  @tracked isSuccess = this.args.isSuccess ?? false;
-
-  /**
-   * @param item
-   * @type {string}
-   * @default interactive
-   * @description Determines the type of item to show
-   */
-  get item() {
-    let { item = DEFAULT_ITEM } = this.args;
-
-    assert(
-      `@item for "Hds::Dropdown::ListItem" must be one of the following: ${ITEMS.join(
-        ', '
-      )}; received: ${item}`,
-      ITEMS.includes(item)
-    );
-
-    return item;
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the item. If no text value is defined an error will be thrown unless it is the generic or separator item type.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::ListItem" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of the item (when item is set to interactive)
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Dropdown::ListItem" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param icon
-   * @type {string}
-   * @default null
-   * @description The name of the icon to be used.
-   */
-  get icon() {
-    assert(
-      `when the "Hds::ListItem" @color is "critical" an @icon is required`,
-      !(this.color === 'critical' && !this.args.icon)
-    );
-
-    return this.args.icon ?? null;
-  }
-
-  /**
-   * 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'];
-
-    // add a class based on the @item argument
-    if (this.item) {
-      classes.push(`hds-dropdown-list-item--${this.item}`);
-    }
-
-    // add a class based on the @color argument
-    if (this.item === 'interactive') {
-      classes.push(`hds-dropdown-list-item--color-${this.color}`);
-    }
-
-    return classes.join(' ');
-  }
-
-  @action
-  copyCode() {
-    navigator.clipboard.writeText(this.args.text);
-    // this if statement resolves to [object Promise] so maybe some improvements
-    // could be made here
-    if (navigator.clipboard.readText()) {
-      this.isSuccess = true;
-    }
-  }
-}

package/addon/components/hds/dropdown/toggle-icon.hbs

@@ -1,22 +0,0 @@
-<button
-  class="hds-dropdown-toggle-icon"
-  aria-label={{this.text}}
-  ...attributes
-  {{on "click" this.onClick}}
-  type="button"
->
-  <div class="hds-dropdown-toggle-icon__wrapper">
-    {{#if @imageSrc}}
-      <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />
-    {{else}}
-      <FlightIcon @name={{this.icon}} @size="24" />
-    {{/if}}
-  </div>
-  {{#if this.hasChevron}}
-    <FlightIcon
-      @name="chevron-{{if @isOpen 'up' 'down'}}"
-      class="hds-dropdown-toggle-icon__chevron"
-      @isInlineBlock={{false}}
-    />
-  {{/if}}
-</button>