@hashicorp/design-system-components 3.6.0 → 4.1.0

package/addon/components/hds/text/code.js

@@ -1,73 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-// notice: only some combinations of size + font-weight are allowed (per design specs)
-// see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=1262%3A9192
-
-export const DEFAULT_SIZE = '200';
-export const AVAILABLE_SIZES = [300, 200, 100];
-
-export const DEFAULT_WEIGHT = 'regular';
-export const AVAILABLE_WEIGHTS_PER_SIZE = {
-  300: ['regular', 'bold'],
-  200: ['regular', 'bold'],
-  100: ['regular', 'bold'],
-};
-
-export default class HdsTextCodeComponent extends Component {
-  /**
-   * Sets the "size" for the text
-   * Accepted values: see AVAILABLE_SIZES
-   *
-   * @type {string}
-   *
-   * @param size
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    // let's be a bit forgiving with the consumers
-    if (typeof size === 'string') {
-      size = parseInt(size, 10);
-    }
-
-    assert(
-      `@size for "Hds::Text::Code" must be one of the following: ${AVAILABLE_SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      AVAILABLE_SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the "weight" for the text
-   * Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
-   *
-   * @type {string}
-   *
-   * @param variant
-   */
-  get weight() {
-    let { weight = DEFAULT_WEIGHT } = this.args;
-
-    const availableWeights = AVAILABLE_WEIGHTS_PER_SIZE[this.size];
-
-    assert(
-      `@weight for "Hds::Text::Code" with @size=${
-        this.size
-      } must be one of the following: ${availableWeights.join(
-        ', '
-      )}; received: ${weight}`,
-      availableWeights.includes(weight)
-    );
-
-    return weight;
-  }
-}

package/addon/components/hds/text/display.hbs

@@ -1,13 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Text
-  @group="display"
-  @size={{this.size}}
-  @weight={{this.weight}}
-  @align={{@align}}
-  @color={{@color}}
-  @tag={{@tag}}
-  ...attributes
->{{yield}}</Hds::Text>

package/addon/components/hds/text/display.js

@@ -1,85 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-// notice: only some combinations of size + font-weight are allowed (per design specs)
-// see: https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=1262%3A9192
-
-export const DEFAULT_SIZE = '200';
-export const AVAILABLE_SIZES = [500, 400, 300, 200, 100];
-
-export const DEFAULT_WEIGHTS_PER_SIZE = {
-  500: ['bold'],
-  400: ['semibold'],
-  300: ['semibold'],
-  200: ['semibold'],
-  100: ['medium'],
-};
-export const AVAILABLE_WEIGHTS_PER_SIZE = {
-  500: ['bold'],
-  400: ['medium', 'semibold', 'bold'],
-  300: ['medium', 'semibold', 'bold'],
-  200: ['semibold'],
-  100: ['medium'],
-};
-
-export default class HdsTextDisplayComponent extends Component {
-  /**
-   * Sets the "size" for the text
-   * Accepted values: see AVAILABLE_SIZES
-   *
-   * @type {string}
-   *
-   * @param size
-   */
-  get size() {
-    let { size = DEFAULT_SIZE } = this.args;
-
-    // let's be a bit forgiving with the consumers
-    if (typeof size === 'string') {
-      size = parseInt(size, 10);
-    }
-
-    assert(
-      `@size for "Hds::Text::Display" must be one of the following: ${AVAILABLE_SIZES.join(
-        ', '
-      )}; received: ${size}`,
-      AVAILABLE_SIZES.includes(size)
-    );
-
-    return size;
-  }
-
-  /**
-   * Sets the "weight" for the text
-   * Accepted values: see AVAILABLE_WEIGHTS_PER_SIZE
-   *
-   * @type {string}
-   *
-   * @param variant
-   */
-  get weight() {
-    let { weight } = this.args;
-
-    if (weight) {
-      const availableWeights = AVAILABLE_WEIGHTS_PER_SIZE[this.size];
-      assert(
-        `@weight for "Hds::Text::Display" with @size=${
-          this.size
-        } must be one of the following: ${availableWeights.join(
-          ', '
-        )}; received: ${weight}`,
-        availableWeights.includes(weight)
-      );
-    } else {
-      // use the default (first item in the array)
-      weight = DEFAULT_WEIGHTS_PER_SIZE[this.size];
-    }
-
-    return weight;
-  }
-}

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

@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{! IMPORTANT: we removed any extra newlines before/after the `let` to reduce the issues with unexpected whitespaces (see https://github.com/hashicorp/design-system/pull/1652) }}
-{{#let (element this.componentTag) as |Tag|}}<Tag
-    class={{this.classNames}}
-    {{style color=this.customColor}}
-    ...attributes
-  >{{yield}}</Tag>{{/let}}

package/addon/components/hds/text/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 AVAILABLE_ALIGNS = ['left', 'center', 'right'];
-
-export const AVAILABLE_COLORS = [
-  'primary',
-  'strong',
-  'faint',
-  'disabled',
-  'high-contrast',
-  'action',
-  'action-hover',
-  'action-active',
-  'highlight',
-  'highlight-on-surface',
-  'highlight-high-contrast',
-  'success',
-  'success-on-surface',
-  'success-high-contrast',
-  'warning',
-  'warning-on-surface',
-  'warning-high-contrast',
-  'critical',
-  'critical-on-surface',
-  'critical-high-contrast',
-];
-
-export default class HdsTextIndexComponent extends Component {
-  /**
-   * Get a tag to render based on the `@tag` argument passed or the value of `this.size` (via mapping)
-   *
-   * @method #componentTag
-   * @return {string} The html tag to use in the dynamic render of the component
-   */
-  get componentTag() {
-    let { tag = 'span' } = this.args;
-
-    return tag;
-  }
-
-  /**
-   * Sets the "variant" (style) for the text
-   * Accepted values: see AVAILABLE_VARIANTS
-   *
-   * @type {string}
-   *
-   * @param variant
-   */
-  get variant() {
-    let { group, size } = this.args;
-
-    // notice: for performance reasons we don't do any other extra check on these values
-    // we assume they've already been validated by the "parent" components
-    return `${group}-${size}`;
-  }
-
-  /**
-   * Sets the alignment of the text
-   * Accepted values: see AVAILABLE_ALIGNS
-   *
-   * @param align
-   * @type {string}
-   */
-  get align() {
-    let { align } = this.args;
-
-    if (align) {
-      assert(
-        `@align for "Hds::Text" must be one of the following: ${AVAILABLE_ALIGNS.join(
-          ', '
-        )}; received: ${align}`,
-        AVAILABLE_ALIGNS.includes(align)
-      );
-    }
-
-    return align;
-  }
-
-  /**
-   * Sets the color of the text as pre-defined value
-   * Accepted values: see AVAILABLE_COLORS
-   *
-   * @param color
-   * @type {string}
-   */
-  get predefinedColor() {
-    let { color } = this.args;
-
-    if (AVAILABLE_COLORS.includes(color)) {
-      return color;
-    } else {
-      return undefined;
-    }
-  }
-
-  /**
-   * Sets the color of the text as custom value (via inline style)
-   *
-   * @param color
-   * @type {string}
-   */
-  get customColor() {
-    let { color } = this.args;
-
-    if (!AVAILABLE_COLORS.includes(color)) {
-      return color;
-    } else {
-      return undefined;
-    }
-  }
-
-  /**
-   * 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-text'];
-
-    // add a (helper) class based on the "group + size" variant
-    classes.push(`hds-typography-${this.variant}`);
-
-    // add a (helper) class based on the @weight argument
-    if (this.args.weight) {
-      classes.push(`hds-font-weight-${this.args.weight}`);
-    }
-
-    // add a class based on the @align argument
-    if (this.align) {
-      classes.push(`hds-text--align-${this.align}`);
-    }
-
-    // add a (helper) class based on the @color argument (if pre-defined)
-    if (this.predefinedColor) {
-      classes.push(`hds-foreground-${this.predefinedColor}`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,17 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Alert
-  class="hds-toast"
-  @type="inline"
-  @color={{@color}}
-  @icon={{@icon}}
-  @onDismiss={{@onDismiss}}
-  ...attributes
-  as |A|
->
-  {{yield
-    (hash Title=A.Title Description=A.Description Button=A.Button Link::Standalone=A.Link::Standalone Generic=A.Generic)
-  }}
-</Hds::Alert>

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

@@ -1,11 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<button
-  type="button"
-  class={{this.classNames}}
-  {{hds-tooltip this.text options=this.options}}
-  ...attributes
->{{~yield~}}</button>

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

@@ -1,86 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import { assert } from '@ember/debug';
-
-export const PLACEMENTS = [
-  'top',
-  'top-start',
-  'top-end',
-  'right',
-  'right-start',
-  'right-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'left',
-  'left-start',
-  'left-end',
-];
-
-export default class HdsTooltipIndexComponent extends Component {
-  /**
-   * @param text
-   * @type {string}
-   * @description text content for tooltip
-   */
-  get text() {
-    let { text } = this.args;
-
-    assert(
-      '@text for "Hds::TooltipButton" must have a valid value',
-      text !== undefined
-    );
-
-    return text;
-  }
-
-  get options() {
-    let { placement } = this.args;
-
-    assert(
-      '@placement for "Hds::TooltipButton" must have a valid value',
-      placement == undefined || PLACEMENTS.includes(placement)
-    );
-
-    return {
-      ...this.args.extraTippyOptions,
-      // takes string
-      placement: placement,
-      // takes array of 2 numbers (skidding, distance): array(0, 0)
-      offset: this.args.offset,
-    };
-  }
-
-  /**
-   * @param isInline
-   * @type {boolean}
-   * @default true
-   * @description sets display for the button
-   */
-  get isInline() {
-    let { isInline = true } = this.args;
-    return isInline;
-  }
-
-  /**
-   * 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-tooltip-button'];
-
-    // add a class based on the @isInline argument
-    if (this.isInline) {
-      classes.push('hds-tooltip-button--is-inline');
-    } else {
-      classes.push('hds-tooltip-button--is-block');
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,6 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{! template-lint-disable no-yield-only }}
-{{yield}}

package/addon/helpers/hds-link-to-models.js

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { helper } from '@ember/component/helper';
-import { assert } from '@ember/debug';
-
-/*
- * This helper can be used to support both @model and @models arguments when wrapping
- * the `<LinkTo>` component without it triggering assertions or having to use the component helper.
- *
- * The result of this helper should be passed into the `@models` argument of the `<LinkTo>` component:
- *
- * ```hbs
- * <LinkTo @models={{hds-link-to-models @model @models}} />
- * ```
- */
-
-export function hdsLinkToModels([model, models]) {
-  assert(
-    'You cannot provide both the `@model` and `@models` arguments to the component.',
-    !model || !models
-  );
-
-  if (model) {
-    return [model];
-  } else if (models) {
-    return models;
-  } else {
-    return [];
-  }
-}
-
-export default helper(hdsLinkToModels);

package/addon/helpers/hds-link-to-query.js

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { helper } from '@ember/component/helper';
-
-/*
- * This helper can be used to safely pass a @query argument to the `<LinkTo>` component
- * without the risk of triggering an assertion if the argument is undefined
- *
- * The result of this helper should be passed into the `@query` argument of the `<LinkTo>` component:
- *
- * ```hbs
- * <LinkTo @query={{hds-link-to-query @query}} />
- * ```
- */
-
-// this is a workaround for https://github.com/emberjs/ember.js/issues/19693
-// don't remove until we drop support for ember 3.27 and 3.28
-
-export function hdsLinkToQuery([query]) {
-  return query ?? {};
-}
-
-export default helper(hdsLinkToQuery);

package/addon/modifiers/hds-clipboard.js

@@ -1,163 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { modifier } from 'ember-modifier';
-import { assert, warn } from '@ember/debug';
-
-export const getTextToCopy = (text) => {
-  let textToCopy;
-
-  if (text) {
-    if (typeof text === 'string') {
-      textToCopy = text;
-    } else if (
-      // context: https://github.com/hashicorp/design-system/pull/1564
-      typeof text === 'number' ||
-      typeof text === 'bigint'
-    ) {
-      textToCopy = text.toString();
-    } else {
-      assert(
-        `\`hds-clipboard\` modifier - \`text\` argument must be a string - provided: ${typeof text}`
-      );
-    }
-  }
-  return textToCopy;
-};
-
-export const getTargetElement = (target) => {
-  let targetElement;
-  if (typeof target === 'string') {
-    targetElement = document.querySelector(target);
-
-    if (!targetElement) {
-      console.error(
-        '`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string',
-        targetElement
-      );
-      return;
-    }
-  } else if (target instanceof Node && target.nodeType === Node.ELEMENT_NODE) {
-    targetElement = target;
-  } else {
-    if (target instanceof NodeList) {
-      assert(
-        '`hds-clipboard` modifier - `target` argument must be a string or a DOM node - provided: a list of DOM nodes'
-      );
-    } else {
-      assert(
-        `\`hds-clipboard\` modifier - \`target\` argument must be a string or a DOM node - provided: ${typeof target}`
-      );
-    }
-  }
-  return targetElement;
-};
-
-export const getTextToCopyFromTargetElement = (targetElement) => {
-  let textToCopy;
-  if (
-    targetElement instanceof Node &&
-    targetElement.nodeType === Node.ELEMENT_NODE
-  ) {
-    if (
-      targetElement instanceof HTMLInputElement || // targetElement.nodeName === 'INPUT' ||
-      targetElement instanceof HTMLTextAreaElement || // targetElement.nodeName === 'TEXTAREA' ||
-      targetElement instanceof HTMLSelectElement // targetElement.nodeName === 'SELECT'
-    ) {
-      textToCopy = targetElement.value;
-    } else {
-      // simplest approach
-      textToCopy = targetElement.innerText;
-
-      // approach based on text selection (left for backup just in case)
-      // var selection = window.getSelection();
-      // var range = document.createRange();
-      // selection.removeAllRanges();
-      // range.selectNodeContents(targetElement);
-      // selection.addRange(range);
-      // textToCopy = selection.toString();
-      // selection.removeAllRanges();
-    }
-  }
-  return textToCopy;
-};
-
-export const writeTextToClipboard = async (textToCopy) => {
-  // finally copy the text to the clipboard using the Clipboard API
-  // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
-  if (textToCopy) {
-    try {
-      // notice: the "clipboard-write" permission is granted automatically to pages when they are in the active tab
-      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write
-      await navigator.clipboard.writeText(textToCopy);
-      // DEBUG uncomment this for easy debugging
-      // console.log('success', textToCopy);
-      return true;
-    } catch (error) {
-      // clipboard write failed
-      // this probably never happens (see comment above) or happens only for very old browsers that don't for which `navigator.clipboard` is undefined
-      warn('copy action failed, please check your browser‘s permissions', {
-        id: 'hds-clipboard.write-text-to-clipboard.catch-error',
-      });
-      return false;
-    }
-  } else {
-    return false;
-  }
-};
-
-export const copyToClipboard = async (text, target) => {
-  let textToCopy;
-
-  if (text) {
-    textToCopy = getTextToCopy(text);
-  } else if (target) {
-    const targetElement = getTargetElement(target);
-    textToCopy = getTextToCopyFromTargetElement(targetElement);
-  } else {
-    assert(
-      '`hds-clipboard` modifier - either a `text` or a `target` argument is required'
-    );
-  }
-  const success = await writeTextToClipboard(textToCopy);
-  return success;
-};
-
-// Notice: we use a function-based modifier here instead of a class-based one
-// because it's quite simple in its logic, and doesn't require injecting services
-// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
-
-export default modifier((element, positional, named) => {
-  assert(
-    '`hds-clipboard` modifier - the modifier must be applied to an element',
-    element
-  );
-
-  const { text, target, onSuccess, onError } = named;
-
-  const onClick = async (event) => {
-    const trigger = event.currentTarget;
-    const success = await copyToClipboard(text, target);
-
-    // fire the `onSuccess/onError` callbacks (if provided)
-    if (success) {
-      if (typeof onSuccess === 'function') {
-        onSuccess({ trigger, text, target });
-      }
-    } else {
-      if (typeof onError === 'function') {
-        onError({ trigger, text, target });
-      }
-    }
-  };
-
-  // add the "onClick" event listener to the element
-  element.addEventListener('click', onClick);
-
-  // this (teardown) function is run when the element is removed
-  return () => {
-    element.removeEventListener('click', onClick);
-  };
-});