@hashicorp/design-system-components 3.6.0 → 4.0.0

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

@@ -1,146 +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_TYPE = 'filled';
-export const DEFAULT_COLOR = 'neutral';
-export const SIZES = ['small', 'medium', 'large'];
-export const TYPES = ['filled', 'inverted', 'outlined'];
-export const COLORS = [
-  'neutral',
-  'neutral-dark-mode',
-  'highlight',
-  'success',
-  'warning',
-  'critical',
-];
-
-export default class HdsBadgeIndexComponent extends Component {
-  /**
-   * Sets the size for the component
-   * Accepted values: small, medium, large
-   *
-   * @param size
-   * @type {string}
-   * @default 'medium'
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Badge" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the type of the component
-   * Accepted values: filled, inverted, outlined
-   *
-   * @param type
-   * @type {string}
-   * @default 'filled'
-   */
-  get type() {
-    let { type = DEFAULT_TYPE } = this.args;
-
-    assert(
-      `@type for "Hds::Badge" must be one of the following: ${TYPES.join(
-        ', '
-      )}; received: ${type}`,
-      TYPES.includes(type)
-    );
-
-    return type;
-  }
-
-  /**
-   * Sets the color scheme for the component
-   * Accepted values: neutral, neutral-dark-mode, highlight, success, warning, critical
-   *
-   * @param color
-   * @type {string}
-   * @default 'neutral'
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Badge" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the badge. If `isIconOnly` is set to `true`, the text will be visually hidden but still available to assistive technology. If no text value is defined, an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Badge" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * Sets the icon name if there is one
-   *
-   * @param icon
-   * @type {string|null}
-   * @default null
-   */
-  get icon() {
-    return this.args.icon ?? null;
-  }
-
-  /**
-   * @param isIconOnly
-   * @type {boolean}
-   * @default false
-   * @description Indicates if the badge will only contain an icon; component will also ensure that accessible text is still applied to the component.
-   */
-  get isIconOnly() {
-    if (this.icon) {
-      return this.args.isIconOnly ?? false;
-    }
-    return false;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method Badge#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-badge'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-badge--size-${this.size}`);
-
-    // add a class based on the @type argument
-    classes.push(`hds-badge--type-${this.type}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-badge--color-${this.color}`);
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/badge-count/index.hbs

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

package/addon/components/hds/badge-count/index.js

@@ -1,99 +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_TYPE = 'filled';
-export const DEFAULT_COLOR = 'neutral';
-export const SIZES = ['small', 'medium', 'large'];
-export const TYPES = ['filled', 'inverted', 'outlined'];
-export const COLORS = ['neutral', 'neutral-dark-mode'];
-
-export default class HdsBadgeCountIndexComponent extends Component {
-  /**
-   * Sets the size for the component
-   * Accepted sizes: small, medium, large
-   *
-   * @param size
-   * @type {string}
-   * @default 'medium'
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::BadgeCount" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the type of the component
-   * Accepted values: filled, inverted, outlined
-   *
-   * @param type
-   * @type {string}
-   * @default 'filled'
-   */
-  get type() {
-    let { type = DEFAULT_TYPE } = this.args;
-
-    assert(
-      `@type for "Hds::BadgeCount" must be one of the following: ${TYPES.join(
-        ', '
-      )}; received: ${type}`,
-      TYPES.includes(type)
-    );
-
-    return type;
-  }
-
-  /**
-   * Sets the color scheme for the component
-   * Accepted colors: neutral, neutral-dark-mode
-   *
-   * @param color
-   * @type {string}
-   * @default 'neutral'
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::BadgeCount" 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 BadgeCount#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-badge-count'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-badge-count--size-${this.size}`);
-
-    // add a class based on the @type argument
-    classes.push(`hds-badge-count--type-${this.type}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-badge-count--color-${this.color}`);
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,9 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<nav class={{this.classNames}} aria-label={{this.ariaLabel}} ...attributes>
-  <ol class="hds-breadcrumb__list" {{did-insert this.didInsert}}>
-    {{yield}}
-  </ol>
-</nav>

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

@@ -1,59 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-const NOOP = () => {};
-
-export default class HdsBreadcrumbComponent extends Component {
-  /**
-   * @param onDidInsert
-   * @type {function}
-   * @default () => {}
-   */
-  get didInsert() {
-    let { didInsert } = this.args;
-
-    if (typeof didInsert === 'function') {
-      return didInsert;
-    } else {
-      return NOOP;
-    }
-  }
-
-  /**
-   * @param itemsCanWrap
-   * @type {boolean}
-   * @default true
-   */
-  get itemsCanWrap() {
-    return this.args.itemsCanWrap ?? true;
-  }
-
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'breadcrumbs'
-   */
-  get ariaLabel() {
-    return this.args.ariaLabel ?? 'breadcrumbs';
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method Breadcrumb#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-breadcrumb'];
-
-    // add a class based on the @itemsCanWrap argument
-    if (this.itemsCanWrap) {
-      classes.push('hds-breadcrumb--items-can-wrap');
-    }
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/breadcrumb/item.hbs

@@ -1,50 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<li class="hds-breadcrumb__item" style={{this.itemStyle}} ...attributes>
-  {{#if @current}}
-    <div class="hds-breadcrumb__current">
-      {{#if @icon}}
-        <div class="hds-breadcrumb__icon">
-          <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
-        </div>
-      {{/if}}
-      <span class="hds-breadcrumb__text">{{@text}}</span>
-    </div>
-  {{else}}
-    {{#if @isRouteExternal}}
-      <LinkToExternal
-        class="hds-breadcrumb__link"
-        @current-when={{@current-when}}
-        @models={{hds-link-to-models @model @models}}
-        @query={{hds-link-to-query @query}}
-        @replace={{@replace}}
-        @route={{@route}}
-      >
-        {{#if @icon}}
-          <div class="hds-breadcrumb__icon">
-            <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
-          </div>
-        {{/if}}
-        <span class="hds-breadcrumb__text">{{@text}}</span>
-      </LinkToExternal>
-    {{else}}
-      <LinkTo
-        class="hds-breadcrumb__link"
-        @current-when={{@current-when}}
-        @models={{hds-link-to-models @model @models}}
-        @query={{hds-link-to-query @query}}
-        @replace={{@replace}}
-        @route={{@route}}
-      >
-        {{#if @icon}}
-          <div class="hds-breadcrumb__icon">
-            <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
-          </div>
-        {{/if}}
-        <span class="hds-breadcrumb__text">{{@text}}</span>
-      </LinkTo>
-    {{/if}}
-  {{/if}}
-</li>

package/addon/components/hds/breadcrumb/item.js

@@ -1,55 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/template';
-import { assert } from '@ember/debug';
-
-export default class HdsBreadcrumbItemComponent extends Component {
-  /**
-   * @param maxWidth
-   * @type {string}
-   * @default undefined
-   * @description A parameter that can be applied to an "item" to limit its max-width
-   */
-  get maxWidth() {
-    let { maxWidth } = this.args;
-
-    if (maxWidth) {
-      assert(
-        `@maxWidth for "Hds::Breadcrumb::Item" must be a size as number in 'px' or in 'em' (eg. '200px' or '24em'); received: ${maxWidth}`,
-        maxWidth.match(/^\d+(px|em)$/)
-      );
-
-      return maxWidth;
-    } else {
-      return undefined;
-    }
-  }
-
-  /**
-   * Get the inline style to apply to the item.
-   * @method BreadcrumbItem#itemStyle
-   * @return {string} The "style" attribute to apply to the item.
-   */
-  get itemStyle() {
-    if (this.maxWidth) {
-      return htmlSafe(`max-width: ${this.maxWidth}`);
-    } else {
-      return undefined;
-    }
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method BreadcrumbItem#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-breadcrumb__item'];
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/breadcrumb/truncation.hbs

@@ -1,26 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<li class="hds-breadcrumb__item hds-breadcrumb__item--is-truncation" ...attributes>
-  <Hds::MenuPrimitive>
-    <:toggle as |t|>
-      <button
-        type="button"
-        class="hds-breadcrumb__truncation-toggle"
-        aria-label={{this.ariaLabel}}
-        aria-expanded={{if t.isOpen "true" "false"}}
-        {{on "click" t.onClickToggle}}
-      >
-        <FlightIcon @name="more-horizontal" @size="16" @isInlineBlock={{false}} />
-      </button>
-    </:toggle>
-    <:content>
-      <div class="hds-breadcrumb__truncation-content">
-        <ol class="hds-breadcrumb__sublist">
-          {{yield}}
-        </ol>
-      </div>
-    </:content>
-  </Hds::MenuPrimitive>
-</li>

package/addon/components/hds/breadcrumb/truncation.js

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

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

@@ -1,45 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Interactive
-  class={{this.classNames}}
-  @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
-  aria-label={{if this.isIconOnly this.text null}}
->
-  {{#if this.isIconOnly}}
-    <span class="hds-button__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </span>
-  {{else}}
-    {{#if this.icon}}
-      {{#if (eq this.iconPosition "leading")}}
-        <span class="hds-button__icon">
-          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-        </span>
-        <span class="hds-button__text">
-          {{this.text}}
-        </span>
-      {{else}}
-        <span class="hds-button__text">
-          {{this.text}}
-        </span>
-        <span class="hds-button__icon">
-          <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-        </span>
-      {{/if}}
-    {{else}}
-      <span class="hds-button__text">
-        {{this.text}}
-      </span>
-    {{/if}}
-  {{/if}}
-</Hds::Interactive>