@hashicorp/design-system-components 3.6.0 → 4.0.0

package/addon/components/hds/icon-tile/index.js

@@ -1,189 +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 = 'neutral';
-export const SIZES = ['small', 'medium', 'large'];
-export const PRODUCTS = [
-  'boundary',
-  'consul',
-  'hcp',
-  'nomad',
-  'packer',
-  'terraform',
-  'vagrant',
-  'vault',
-  'vault-secrets',
-  'vault-radar',
-  'waypoint',
-];
-export const COLORS = ['neutral', ...PRODUCTS];
-
-export default class HdsIconTileIndexComponent 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::IconTile" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the color scheme for the component
-   * Accepted values: see THE COLORS LIST
-   *
-   * @param color
-   * @type {string}
-   * @default 'neutral'
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    // if it's a "logo" then we overwrite any @color parameter passed
-    // and just use the product "brand" color
-    if (this.logo) {
-      color = this.logo;
-    }
-
-    assert(
-      `@color for "Hds::IconTile" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * Sets the icon name (one of the FlightIcons)
-   *
-   * @param icon
-   * @type {string|null}
-   * @default null
-   */
-  get icon() {
-    if (this.args.logo) {
-      // for the logo version we use the colored versions directly
-      return `${this.args.logo}-color`;
-    } else if (this.args.icon) {
-      return this.args.icon;
-    } else {
-      return null;
-    }
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 16
-   * @description ensures that the correct icon size is used. Automatically calculated.
-   */
-  get iconSize() {
-    if (this.args.size === 'small') {
-      return '16';
-    } else {
-      return '24';
-    }
-  }
-
-  /**
-   * Sets the logo name if there is one
-   *
-   * @param logo
-   * @type {string|null}
-   * @default null
-   */
-  get logo() {
-    let { logo } = this.args;
-
-    if (logo) {
-      assert(
-        `@logo for "Hds::IconTile" must be one of the following: ${PRODUCTS.join(
-          ', '
-        )}; received: ${logo}`,
-        PRODUCTS.includes(logo)
-      );
-    }
-
-    return logo ?? null;
-  }
-
-  /**
-   * We need to differentiate between a logo and an icon
-   * @method IconTile#entity
-   * @return {string} The kind of entity we're dealing with ("logo" or "icon")
-   */
-  get entity() {
-    let entity;
-
-    assert(
-      `you can't pass both @logo and @icon properties to the "Hds::IconTile" component`,
-      !(this.args.logo && this.args.icon)
-    );
-
-    assert(
-      `you need to pass @logo or @icon to the "Hds::IconTile" component`,
-      !(this.args.logo === undefined && this.args.icon === undefined)
-    );
-
-    if (this.args.logo) {
-      entity = 'logo';
-    }
-    if (this.args.icon) {
-      entity = 'icon';
-    }
-
-    return entity;
-  }
-
-  /**
-   * Sets the "secondary" icon name (one of the FlightIcons)
-   *
-   * @param iconSecondary
-   * @type {string|null}
-   * @default null
-   */
-  get iconSecondary() {
-    return this.args.iconSecondary ?? null;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method IconTile#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  // hds-icon-tile {{this.entityClass}} {{this.sizeClass}} {{this.colorClass}}"
-  get classNames() {
-    let classes = ['hds-icon-tile'];
-
-    // add a class based on its entity argument
-    classes.push(`hds-icon-tile--${this.entity}`);
-
-    // add a class based on the @size argument
-    classes.push(`hds-icon-tile--size-${this.size}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-icon-tile--color-${this.color}`);
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,32 +0,0 @@
-{{! IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) }}
-{{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
-{{! NOTICE: we can't support the direct use of the "href" HTML attribute via ...attributes in the <a> elements, because we need to rely on the "@href" Ember argument to differentiate between different types of generated output }}
-{{~#if @route~}}
-  {{~#if this.isRouteExternal~}}
-    <LinkToExternal
-      @current-when={{@current-when}}
-      @models={{hds-link-to-models @model @models}}
-      @query={{hds-link-to-query @query}}
-      @replace={{@replace}}
-      @route={{@route}}
-      ...attributes
-    >{{yield}}</LinkToExternal>
-  {{~else~}}
-    <LinkTo
-      @current-when={{@current-when}}
-      @models={{hds-link-to-models @model @models}}
-      @query={{hds-link-to-query @query}}
-      @replace={{@replace}}
-      @route={{@route}}
-      ...attributes
-    >{{yield}}</LinkTo>
-  {{~/if~}}
-{{~else if @href~}}
-  {{~#if this.isHrefExternal~}}
-    <a target="_blank" rel="noopener noreferrer" ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
-  {{~else~}}
-    <a ...attributes href={{@href}} {{on "keyup" this.onKeyUp}}>{{yield}}</a>
-  {{~/if~}}
-{{~else~}}
-  <button type="button" ...attributes>{{yield}}</button>
-{{~/if~}}

package/addon/components/hds/interactive/index.ts

@@ -1,63 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-
-export interface HdsInteractiveSignature {
-  Args: {
-    href?: string;
-    isHrefExternal?: boolean;
-    isRouteExternal?: boolean;
-    route?: unknown;
-    models?: unknown;
-    model?: unknown;
-    query?: unknown;
-    'current-when'?: unknown;
-    replace?: unknown;
-  };
-  Blocks: {
-    default: [];
-  };
-  Element: HTMLAnchorElement | HTMLButtonElement;
-}
-
-export default class HdsInteractiveIndexComponent extends Component<HdsInteractiveSignature> {
-  /**
-   * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
-   *
-   * @param isHrefExternal
-   * @type boolean
-   * @default true
-   */
-  get isHrefExternal() {
-    return this.args.isHrefExternal ?? true;
-  }
-
-  /**
-   * Determines if a @route value is "external" (uses the LinkToExternal component instead of LinkTo)
-   *
-   * @param isRouteExternal
-   * @type boolean
-   * @default false
-   */
-  get isRouteExternal() {
-    return this.args.isRouteExternal ?? false;
-  }
-
-  @action
-  onKeyUp(event: KeyboardEvent) {
-    if (event.key === ' ' || event.code === 'Space') {
-      (event.target as HTMLElement).click();
-    }
-  }
-}
-
-declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry {
-    'Hds::Interactive': typeof HdsInteractiveIndexComponent;
-    'hds/interactive': typeof HdsInteractiveIndexComponent;
-  }
-}

package/addon/components/hds/link/inline.hbs

@@ -1,22 +0,0 @@
-{{! IMPORTANT: we removed the newlines before/after the yield to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/231#issuecomment-1123502499) }}
-{{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember becomes visible in the link (being an inline element) - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
-<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
->{{#if (and @icon (eq this.iconPosition "leading"))~}}
-    <span class="hds-link-inline__icon hds-link-inline__icon--leading">
-      <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
-    </span>
-  {{~/if~}}{{yield}}{{~#if (and @icon (eq this.iconPosition "trailing"))~}}
-    <span class="hds-link-inline__icon hds-link-inline__icon--trailing">
-      <FlightIcon @name={{@icon}} @size="16" @stretched={{true}} />
-    </span>
-  {{~/if}}</Hds::Interactive>

package/addon/components/hds/link/inline.js

@@ -1,76 +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_ICONPOSITION = 'trailing';
-export const DEFAULT_COLOR = 'primary';
-export const ICONPOSITIONS = ['leading', 'trailing'];
-export const COLORS = ['primary', 'secondary'];
-
-export default class HdsLinkInlineComponent extends Component {
-  constructor() {
-    super(...arguments);
-    if (!(this.args.href || this.args.route)) {
-      assert('@href or @route must be defined for <Hds::Link::Inline>');
-    }
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Link::Inline" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param iconPosition
-   * @type {string}
-   * @default leading
-   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
-   */
-  get iconPosition() {
-    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
-
-    assert(
-      `@iconPosition for "Hds::Link::Inline" must be one of the following: ${ICONPOSITIONS.join(
-        ', '
-      )}; received: ${iconPosition}`,
-      ICONPOSITIONS.includes(iconPosition)
-    );
-
-    return iconPosition;
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method LinkInline#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-link-inline'];
-
-    // add a class based on the @color argument
-    classes.push(`hds-link-inline--color-${this.color}`);
-
-    // add a class based on the @iconPosition argument
-    classes.push(`hds-link-inline--icon-${this.iconPosition}`);
-
-    return classes.join(' ');
-  }
-}

package/addon/components/hds/link/standalone.hbs

@@ -1,28 +0,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
->
-  {{#if (eq this.iconPosition "leading")}}
-    <span class="hds-link-standalone__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </span>
-    <span class="hds-link-standalone__text">
-      {{this.text}}
-    </span>
-  {{else}}
-    <span class="hds-link-standalone__text">
-      {{this.text}}
-    </span>
-    <span class="hds-link-standalone__icon">
-      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />
-    </span>
-  {{/if}}
-</Hds::Interactive>

package/addon/components/hds/link/standalone.js

@@ -1,147 +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_ICONPOSITION = 'leading';
-export const DEFAULT_COLOR = 'primary';
-export const DEFAULT_SIZE = 'medium';
-export const ICONPOSITIONS = ['leading', 'trailing'];
-export const COLORS = ['primary', 'secondary'];
-export const SIZES = ['small', 'medium', 'large'];
-
-export default class HdsLinkStandaloneComponent extends Component {
-  constructor() {
-    super(...arguments);
-    if (!(this.args.href || this.args.route)) {
-      assert('@href or @route must be defined for <Hds::Link::Standalone>');
-    }
-  }
-
-  /**
-   * @param text
-   * @type {string}
-   * @description The text of the link. If no text value is defined an error will be thrown.
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::Link::Standalone" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  /**
-   * @param color
-   * @type {string}
-   * @default primary
-   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
-   */
-  get color() {
-    let { color = DEFAULT_COLOR } = this.args;
-
-    assert(
-      `@color for "Hds::Link::Standalone" must be one of the following: ${COLORS.join(
-        ', '
-      )}; received: ${color}`,
-      COLORS.includes(color)
-    );
-
-    return color;
-  }
-
-  /**
-   * @param icon
-   * @type {string|null}
-   * @default null
-   * @description The name of the icon to be used. An icon name must be defined.
-   */
-  get icon() {
-    let { icon } = this.args;
-
-    assert(
-      '@icon for "Hds::Link::Standalone" must have a valid value',
-      icon !== undefined
-    );
-
-    return icon;
-  }
-
-  /**
-   * @param iconPosition
-   * @type {string}
-   * @default leading
-   * @description Positions the icon before or after the text; allowed values are `leading` or `trailing`
-   */
-  get iconPosition() {
-    let { iconPosition = DEFAULT_ICONPOSITION } = this.args;
-
-    assert(
-      `@iconPosition for "Hds::Link::Standalone" must be one of the following: ${ICONPOSITIONS.join(
-        ', '
-      )}; received: ${iconPosition}`,
-      ICONPOSITIONS.includes(iconPosition)
-    );
-
-    return iconPosition;
-  }
-
-  /**
-   * @param size
-   * @type {string}
-   * @default medium
-   * @description The size of the standalone link; acceptable values are `small`, `medium`, and `large`
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    assert(
-      `@size for "Hds::Link::Standalone" must be one of the following: ${SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * @param iconSize
-   * @type {string}
-   * @default 16
-   * @description ensures that the correct icon size is used. Automatically calculated.
-   */
-  get iconSize() {
-    if (this.args.size === 'large') {
-      return '24';
-    } else {
-      return '16';
-    }
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method LinkStandalone#classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    let classes = ['hds-link-standalone'];
-
-    // add a class based on the @size argument
-    classes.push(`hds-link-standalone--size-${this.size}`);
-
-    // add a class based on the @color argument
-    classes.push(`hds-link-standalone--color-${this.color}`);
-
-    // add a class based on the @iconPosition argument
-    classes.push(`hds-link-standalone--icon-position-${this.iconPosition}`);
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,22 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{! template-lint-disable no-invalid-interactive }}
-<div
-  class="hds-menu-primitive"
-  ...attributes
-  {{did-insert this.didInsert}}
-  {{on "focusout" this.onFocusOut}}
-  {{on "keyup" this.onKeyUp}}
->
-  <div class="hds-menu-primitive__toggle" tabindex="-1">
-    {{yield (hash onClickToggle=this.onClickToggle isOpen=this.isOpen) to="toggle"}}
-  </div>
-  {{#if this.isOpen}}
-    <div class="hds-menu-primitive__content" tabindex="-1">
-      {{yield (hash close=this.close) to="content"}}
-    </div>
-  {{/if}}
-</div>
-{{! template-lint-enable no-invalid-interactive }}

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

@@ -1,59 +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 HdsMenuPrimitiveComponent extends Component {
-  @tracked isOpen; // notice: if in the future we need to add a "@isOpen" prop to control the status from outside (eg to have the MenuPrimitive opened on render) just add  "this.args.isOpen" here to initalize the variable
-  @tracked toggleRef;
-
-  @action
-  didInsert(element) {
-    this.element = element;
-  }
-
-  @action
-  onClickToggle(event) {
-    // we store a reference to the DOM node that has the "onClickToggle" event associated with it
-    if (!this.toggleRef) {
-      this.toggleRef = event.currentTarget;
-    }
-    this.isOpen = !this.isOpen;
-    // we explicitly apply a focus state to the toggle element to overcome a bug in WebKit (see https://github.com/hashicorp/design-system/commit/40cd7f6b3cb15c45f9a1235fafd0fb3ed58e6e62)
-    this.toggleRef.focus();
-  }
-
-  @action
-  onFocusOut(event) {
-    // due to inconsistent implementation of relatedTarget across browsers we use the activeElement as a fallback
-    // if the related target is not part of the disclosed content we close the disclosed container
-    if (!this.element.contains(event.relatedTarget || document.activeElement)) {
-      this.close();
-    }
-  }
-
-  @action
-  onKeyUp(event) {
-    if (event.key === 'Escape') {
-      this.close();
-      this.toggleRef.focus();
-    }
-  }
-
-  @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/modal/body.hbs

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

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

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

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

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