@hashicorp/design-system-components 3.6.0 → 4.1.0

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

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

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

@@ -1,37 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<li class={{this.classNames}}>
-  {{#if @isLoading}}
-    <div class="hds-dropdown-list-item__interactive-loading-wrapper" ...attributes>
-      <div class="hds-dropdown-list-item__interactive-icon">
-        <FlightIcon @name="loading" @isInlineBlock={{false}} />
-      </div>
-      <Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
-        {{this.text}}
-      </Hds::Text::Body>
-    </div>
-  {{else}}
-    <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}}
-      ...attributes
-    >
-      {{#if @icon}}
-        <span class="hds-dropdown-list-item__interactive-icon">
-          <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
-        </span>
-      {{/if}}
-      <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
-        {{this.text}}
-      </Hds::Text::Body>
-    </Hds::Interactive>
-  {{/if}}
-</li>

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

@@ -1,64 +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 = 'action';
-export const COLORS = ['action', 'critical'];
-
-export default class HdsDropdownListItemInteractiveComponent 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::Interactive" 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::Interactive" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * 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-interactive',
-    ];
-
-    // add a class based on the @color argument
-    classes.push(`hds-dropdown-list-item--color-${this.color}`);
-
-    return classes.join(' ');
-  }
-}

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

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

package/addon/components/hds/dropdown/list-item/radio.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 HdsDropdownListItemRadioComponent extends Component {
-  /**
-   * Determines the unique ID to assign to the radio control
-   */
-  get id() {
-    return getElementId(this);
-  }
-}

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

@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<li
-  class="hds-dropdown-list-item hds-dropdown-list-item--variant-separator"
-  aria-hidden="true"
-  role="separator"
-  ...attributes
-></li>

package/addon/components/hds/dropdown/list-item/title.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-title"
-  @tag="li"
-  @size="100"
-  @weight="semibold"
-  @color="strong"
-  ...attributes
->
-  {{this.text}}
-</Hds::Text::Body>

package/addon/components/hds/dropdown/list-item/title.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 HdsDropdownListItemTitleComponent 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::Title" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-}

package/addon/components/hds/dropdown/toggle/button.hbs

@@ -1,38 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<button
-  class={{this.classNames}}
-  ...attributes
-  type="button"
-  aria-expanded={{if @isOpen "true" "false"}}
-  {{on "click" this.onClick}}
->
-  {{#if @icon}}
-    <div class="hds-dropdown-toggle-button__icon">
-      <FlightIcon @name={{@icon}} @stretched={{true}} />
-    </div>
-  {{/if}}
-  <div class="hds-dropdown-toggle-button__text">
-    {{this.text}}
-  </div>
-  {{#if @count}}
-    <Hds::BadgeCount
-      @text={{@count}}
-      @size="small"
-      @type={{this.badgeType}}
-      class="hds-dropdown-toggle-button__count"
-    />
-  {{/if}}
-  {{#if @badge}}
-    <Hds::Badge
-      @text={{@badge}}
-      @icon={{@badgeIcon}}
-      @size="small"
-      @type={{this.badgeType}}
-      class="hds-dropdown-toggle-button__badge"
-    />
-  {{/if}}
-  <Hds::Dropdown::Toggle::Chevron />
-</button>

package/addon/components/hds/dropdown/toggle/button.js

@@ -1,134 +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_SIZE = 'medium';
-export const DEFAULT_COLOR = 'primary';
-export const SIZES = ['small', 'medium'];
-export const COLORS = ['primary', 'secondary'];
-
-const NOOP = () => {};
-
-export default class HdsDropdownToggleButtonComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the button. If no text value is defined an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::Toggle::Button" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the button; acceptable values are `small` and `medium`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Dropdown::Toggle::Button" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @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::Dropdown::Toggle::Button" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param isFullWidth
-   * @type {boolean}
-   * @default false
-   * @description Indicates that a button should take up the full width of the parent container. The default is false.
-   */
-  get isFullWidth() {
-    return this.args.isFullWidth ?? false;
-  }
-
-  /**
-   * @param onClick
-   * @type {function}
-   * @default () => {}
-   */
-  get onClick() {
-    let { onClick } = this.args;
-
-    // notice: this is a guard used in case the toggle is used as standalone element (eg. in the showcase)
-    // in reality it's always used inside the Dropdown main component as yielded component, so the onClick handler is always defined
-    if (typeof onClick === 'function') {
-      return onClick;
-    } else {
-      return NOOP;
-    }
-  }
-
-  /**
-   * @param badgeType
-   * @type {string}
-   * @default 'filled'
-   * @description ensures that the correct Badge/BadgeCount type is used to meet contrast requirements
-   */
-  get badgeType() {
-    return this.color !== 'primary' ? 'inverted' : 'filled';
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method ToggleButton#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-dropdown-toggle-button'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-dropdown-toggle-button--size-${this.size}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-dropdown-toggle-button--color-${this.color}`);
-
-    // add a class based on the @isFullWidth argument
-    if (this.isFullWidth) {
-      classes.push('hds-dropdown-toggle-button--width-full');
-    }
-
-    // add a class based on the @isOpen argument
-    if (this.args.isOpen) {
-      classes.push('hds-dropdown-toggle-button--is-open');
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/dropdown/toggle/chevron.hbs

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<div class="hds-dropdown-toggle-chevron">
-  <FlightIcon @name="chevron-down" @isInlineBlock={{false}} />
-</div>

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

@@ -1,23 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<button
-  class={{this.classNames}}
-  aria-label={{this.text}}
-  ...attributes
-  aria-expanded={{if @isOpen "true" "false"}}
-  {{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 if @icon}}
-      <FlightIcon @name={{@icon}} @size={{this.iconSize}} />
-    {{/if}}
-  </div>
-  {{#if this.hasChevron}}
-    <Hds::Dropdown::Toggle::Chevron />
-  {{/if}}
-</button>

package/addon/components/hds/dropdown/toggle/icon.js

@@ -1,119 +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_SIZE = 'medium';
-export const SIZES = ['small', 'medium'];
-
-const NOOP = () => {};
-
-export default class HdsDropdownToggleIconComponent extends Component {
-  constructor() {
-    super(...arguments);
-    if (!(this.args.icon || this.args.imageSrc)) {
-      assert(
-        '@icon or @imageSrc must be defined for "Hds::Dropdown::Toggle::Icon"'
-      );
-    }
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the `aria-label` applied to the toggle
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Dropdown::Toggle::Icon" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the button; acceptable values are `small` and `medium`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Dropdown::Toggle::Icon" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 24
-   * @description ensures that the correct icon size is used
-   */
-  get iconSize() {
-    if (this.args.size === 'small') {
-      return '16';
-    } else {
-      return '24';
-    }
-  }
-
-  /**
-   * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
-   *
-   * @param hasChevron
-   * @type {boolean}
-   * @default true
-   */
-  get hasChevron() {
-    return this.args.hasChevron ?? true;
-  }
-
-  /**
-   * @param onClick
-   * @type {function}
-   * @default () => {}
-   */
-  get onClick() {
-    let { onClick } = this.args;
-
-    // notice: this is a guard used in case the toggle is used as standalone element (eg. in the showcase)
-    // in reality it's always used inside the Dropdown main component as yielded component, so the onClick handler is always defined
-    if (typeof onClick === 'function') {
-      return onClick;
-    } else {
-      return NOOP;
-    }
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method ToggleIcon#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-dropdown-toggle-icon'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-dropdown-toggle-icon--size-${this.size}`);
-
-    // add a class based on the @isOpen argument
-    if (this.args.isOpen) {
-      classes.push('hds-dropdown-toggle-icon--is-open');
-    }
-
-    return classes.join(' ');
-  }
-}

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

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

package/addon/components/hds/flyout/description.hbs

@@ -1,7 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text::Body class="hds-flyout__description" @tag="div" @size="200" @color="primary" ...attributes>
-  {{yield}}
-</Hds::Text::Body>

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

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

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

@@ -1,18 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class="hds-flyout__header" ...attributes>
-  {{#if @icon}}
-    <FlightIcon class="hds-flyout__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />
-  {{/if}}
-  <Hds::Text::Display class="hds-flyout__title" @tag="div" @size="300" @weight="semibold" id={{@id}}>
-    {{#if @tagline}}
-      <Hds::Text::Body class="hds-flyout__tagline" @tag="div" @size="100" @weight="regular" @color="faint">
-        {{@tagline}}
-      </Hds::Text::Body>
-    {{/if}}
-    {{yield}}
-  </Hds::Text::Display>
-  <Hds::DismissButton class="hds-flyout__dismiss" {{on "click" @onDismiss}} />
-</div>

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

@@ -1,20 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<dialog
-  class={{this.classNames}}
-  ...attributes
-  aria-labelledby={{this.id}}
-  {{did-insert this.didInsert}}
-  {{will-destroy this.willDestroyNode}}
-  {{focus-trap isActive=this.isOpen focusTrapOptions=(hash onDeactivate=this.onDismiss clickOutsideDeactivates=true)}}
->
-  {{yield (hash Header=(component "hds/flyout/header" id=this.id onDismiss=this.onDismiss))}}
-  {{yield (hash Description=(component "hds/flyout/description"))}}
-  {{yield (hash Body=(component "hds/flyout/body"))}}
-  {{yield (hash Footer=(component "hds/flyout/footer" onDismiss=this.onDismiss))}}
-</dialog>
-{{#if this.isOpen}}
-  <div class="hds-flyout__overlay"></div>
-{{/if}}