@hashicorp/design-system-components 2.15.0 → 3.0.1

package/addon/components/hds/form/radio-card/label.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<span class="hds-form-radio-card__label hds-typography-display-300 hds-font-weight-bold" ...attributes>{{yield}}</span>
+<Hds::Text::Display
+  class="hds-form-radio-card__label"
+  @tag="span"
+  @size="300"
+  @weight="bold"
+  ...attributes
+>{{yield}}</Hds::Text::Display>

package/addon/components/hds/form/text-input/base.js

@@ -57,6 +57,11 @@ export default class HdsFormTextInputBaseComponent extends Component {
       classes.push(`hds-form-text-input--is-invalid`);
     }
 
+    // add a class based on the @hasVisibilityToggle argument
+    if (this.args.hasVisibilityToggle) {
+      classes.push(`hds-form-text-input--has-visibility-toggle`);
+    }
+
     // add a class based on the @isLoading argument
     if (this.args.isLoading) {
       classes.push(`hds-form-text-input--is-loading`);

package/addon/components/hds/form/text-input/field.hbs

@@ -14,16 +14,28 @@
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
   {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
-    <Hds::Form::TextInput::Base
-      @type={{@type}}
-      @value={{@value}}
-      @isInvalid={{@isInvalid}}
-      @width={{@width}}
-      @isLoading={{@isLoading}}
-      required={{@isRequired}}
-      ...attributes
-      id={{F.id}}
-      aria-describedby={{F.ariaDescribedBy}}
-    />
+    <div class="hds-form-text-input__wrapper" {{style width=@width}}>
+      <Hds::Form::TextInput::Base
+        @type={{this.type}}
+        @value={{@value}}
+        @isInvalid={{@isInvalid}}
+        @isLoading={{@isLoading}}
+        @hasVisibilityToggle={{this.showVisibilityToggle}}
+        required={{@isRequired}}
+        ...attributes
+        id={{F.id}}
+        aria-describedby={{F.ariaDescribedBy}}
+      />
+      {{#if this.showVisibilityToggle}}
+        <Hds::Form::VisibilityToggle
+          @isVisible={{this.isPasswordMasked}}
+          @ariaLabel={{this.visibilityToggleAriaLabel}}
+          @ariaMessageText={{this.visibilityToggleAriaMessageText}}
+          aria-controls={{F.id}}
+          class="hds-form-text-input__visibility-toggle"
+          {{on "click" this.onClickTogglePasswordReadability}}
+        />
+      {{/if}}
+    </div>
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/text-input/field.js

@@ -0,0 +1,59 @@
+/**
+ * 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';
+
+export default class HdsFormTextInputFieldComponent extends Component {
+  @tracked isPasswordMasked = true;
+  @tracked hasVisibilityToggle = this.args.hasVisibilityToggle ?? true;
+  @tracked type = this.args.type ?? 'text';
+
+  /**
+   * @param showVisibilityToggle
+   * @type {boolean}
+   * @default false
+   */
+  get showVisibilityToggle() {
+    return this.args.type === 'password' && this.hasVisibilityToggle;
+  }
+
+  /**
+   * @param visibilityToggleAriaLabel
+   * @type {string}
+   * @default 'Show password'
+   */
+  get visibilityToggleAriaLabel() {
+    if (this.args.visibilityToggleAriaLabel) {
+      return this.args.visibilityToggleAriaLabel;
+    } else if (this.isPasswordMasked) {
+      return 'Show password';
+    } else {
+      return 'Hide password';
+    }
+  }
+
+  /**
+   * @param visibilityToggleAriaMessageText
+   * @type {string}
+   * @default 'Password is now hidden'
+   */
+  get visibilityToggleAriaMessageText() {
+    if (this.args.visibilityToggleAriaMessageText) {
+      return this.args.visibilityToggleAriaMessageText;
+    } else if (this.isPasswordMasked) {
+      return 'Password is hidden';
+    } else {
+      return 'Password is visible';
+    }
+  }
+
+  @action
+  onClickTogglePasswordReadability() {
+    this.isPasswordMasked = !this.isPasswordMasked;
+    this.type = this.isPasswordMasked ? 'password' : 'text';
+  }
+}

package/addon/components/hds/form/visibility-toggle/index.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<button class="hds-form-visibility-toggle" type="button" aria-label={{@ariaLabel}} ...attributes>
+  <FlightIcon @name={{if @isVisible "eye" "eye-off"}} @size="16" @isInlineBlock={{false}} />
+  <span class="sr-only" aria-live="polite">{{@ariaMessageText}}</span>
+</button>

package/addon/components/hds/interactive/{index.js → index.ts}

@@ -6,7 +6,25 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-export default class HdsInteractiveComponent extends Component {
+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")
    *
@@ -30,9 +48,16 @@ export default class HdsInteractiveComponent extends Component {
   }
 
   @action
-  onKeyUp(event) {
+  onKeyUp(event: KeyboardEvent) {
     if (event.key === ' ' || event.code === 'Space') {
-      event.target.click();
+      (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/modal/header.hbs

@@ -6,13 +6,13 @@
   {{#if @icon}}
     <FlightIcon class="hds-modal__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />
   {{/if}}
-  <div class="hds-modal__title hds-typography-display-300 hds-font-weight-semibold" id={{@id}}>
+  <Hds::Text::Display class="hds-modal__title" @tag="div" @size="300" @weight="semibold" id={{@id}}>
     {{#if @tagline}}
-      <div class="hds-modal__tagline hds-typography-body-100 hds-font-weight-regular">
+      <Hds::Text::Body class="hds-modal__tagline" @tag="div" @size="100" @weight="regular">
         {{@tagline}}
-      </div>
+      </Hds::Text::Body>
     {{/if}}
     {{yield}}
-  </div>
+  </Hds::Text::Display>
   <Hds::DismissButton class="hds-modal__dismiss" {{on "click" @onDismiss}} />
 </div>

package/addon/components/hds/page-header/description.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<p class="hds-foreground-primary hds-typography-body-200 hds-page-header__description" ...attributes>{{yield}}</p>
+<Hds::Text::Body
+  class="hds-page-header__description"
+  @tag="p"
+  @size="200"
+  @color="primary"
+  ...attributes
+>{{yield}}</Hds::Text::Body>

package/addon/components/hds/page-header/subtitle.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<p class="hds-foreground-faint hds-typography-body-200 hds-page-header__subtitle" ...attributes>{{yield}}</p>
+<Hds::Text::Body
+  class="hds-page-header__subtitle"
+  @tag="p"
+  @size="200"
+  @color="faint"
+  ...attributes
+>{{yield}}</Hds::Text::Body>

package/addon/components/hds/page-header/title.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<h1 class="hds-foreground-strong hds-typography-display-500 hds-page-header__title" ...attributes>{{yield}}</h1>
+<Hds::Text::Display
+  class="hds-page-header__title"
+  @tag="h1"
+  @size="500"
+  @color="strong"
+  ...attributes
+>{{yield}}</Hds::Text::Display>

package/addon/components/hds/pagination/info/index.hbs

@@ -2,10 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-pagination-info hds-typography-body-100 hds-font-weight-medium" ...attributes>
+<Hds::Text::Body class="hds-pagination-info" @tag="div" @size="100" @weight="medium" ...attributes>
   {{@itemsRangeStart}}–{{@itemsRangeEnd}}
   {{#if this.showTotalItems}}
     of
     {{@totalItems}}
   {{/if}}
-</div>
+</Hds::Text::Body>

package/addon/components/hds/pagination/nav/arrow.hbs

@@ -6,9 +6,15 @@
   <Hds::Interactive class={{this.classNames}} aria-label={{this.content.ariaLabel}} disabled={{true}} ...attributes>
     <FlightIcon @name={{this.content.icon}} />
     {{#if this.showLabel}}
-      <span class="hds-pagination-nav__arrow-label" aria-hidden="true">
+      <Hds::Text::Body
+        class="hds-pagination-nav__arrow-label"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+        aria-hidden="true"
+      >
         {{this.content.label}}
-      </span>
+      </Hds::Text::Body>
     {{/if}}
   </Hds::Interactive>
 {{else}}
@@ -24,9 +30,15 @@
   >
     <FlightIcon @name={{this.content.icon}} />
     {{#if this.showLabel}}
-      <span class="hds-pagination-nav__arrow-label" aria-hidden="true">
+      <Hds::Text::Body
+        class="hds-pagination-nav__arrow-label"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+        aria-hidden="true"
+      >
         {{this.content.label}}
-      </span>
+      </Hds::Text::Body>
     {{/if}}
   </Hds::Interactive>
 {{/if}}

package/addon/components/hds/pagination/nav/arrow.js

@@ -61,8 +61,6 @@ export default class HdsPaginationControlArrowComponent extends Component {
       'hds-pagination-nav__control',
       'hds-pagination-nav__arrow',
       `hds-pagination-nav__arrow--direction-${this.args.direction}`,
-      'hds-typography-body-100',
-      'hds-font-weight-medium',
     ];
 
     return classes.join(' ');

package/addon/components/hds/pagination/nav/number.hbs

@@ -12,5 +12,6 @@
   ...attributes
   aria-current={{if @isSelected "page" null}}
 >
-  <span class="sr-only">page </span>{{this.page}}
+  <Hds::Text::Body @tag="span" @size="100" @weight="medium"><span class="sr-only">page
+    </span>{{this.page}}</Hds::Text::Body>
 </Hds::Interactive>

package/addon/components/hds/pagination/nav/number.js

@@ -25,12 +25,7 @@ export default class HdsPaginationControlNumberComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = [
-      'hds-pagination-nav__control',
-      'hds-pagination-nav__number',
-      'hds-typography-body-100',
-      'hds-font-weight-medium"',
-    ];
+    let classes = ['hds-pagination-nav__control', 'hds-pagination-nav__number'];
 
     if (this.args.isSelected) {
       classes.push(`hds-pagination-nav__number--is-selected`);

package/addon/components/hds/side-nav/list/index.hbs

@@ -4,7 +4,7 @@
 }}
 
 <nav class="hds-side-nav__list-wrapper" ...attributes>
-  {{yield (hash extraBefore=(component "hds/yield"))}}
+  {{yield (hash ExtraBefore=(component "hds/yield"))}}
   <ul class="hds-side-nav__list" role="list">
     {{yield
       (hash
@@ -15,5 +15,5 @@
       )
     }}
   </ul>
-  {{yield (hash extraAfter=(component "hds/yield"))}}
+  {{yield (hash ExtraAfter=(component "hds/yield"))}}
 </nav>

package/addon/components/hds/stepper/step/indicator.hbs

@@ -17,7 +17,12 @@
     {{else if (eq @status "complete")}}
       <FlightIcon class="hds-stepper-indicator-step__icon" @name="check" @size="16" />
     {{else}}
-      <span class="hds-stepper-indicator-step__text">{{@text}}</span>
+      <Hds::Text::Body
+        class="hds-stepper-indicator-step__text"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+      >{{@text}}</Hds::Text::Body>
     {{/if}}
   </div>
 </div>

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

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<span class={{this.classNames}} ...attributes>
+<Hds::Text::Body class={{this.classNames}} @tag="span" @size="100" @weight="medium" @color="primary" ...attributes>
   {{#if this.onDismiss}}
     <button class="hds-tag__dismiss" type="button" aria-label={{this.ariaLabel}} {{on "click" this.onDismiss}}>
       <FlightIcon class="hds-tag__dismiss-icon" @name="x" @size="16" @isInlineBlock={{false}} />
@@ -27,4 +27,4 @@
       {{this.text}}
     </span>
   {{/if}}
-</span>
+</Hds::Text::Body>

package/addon/modifiers/hds-clipboard.js

@@ -0,0 +1,163 @@
+/**
+ * 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);
+  };
+});

package/addon/template-registry.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type HdsButtonIndexComponent from '@hashicorp/design-system-components/components/hds/button';
+import type HdsInteractiveIndexComponent from '@hashicorp/design-system-components/components/hds/interactive';
+
+export default interface HdsComponentsRegistry {
+  HdsButtonComponent: typeof HdsButtonIndexComponent;
+  HdsInteractiveComponent: typeof HdsInteractiveIndexComponent;
+}

package/app/components/hds/form/visibility-toggle/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/form/visibility-toggle/index';

package/app/modifiers/hds-clipboard.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/modifiers/hds-clipboard';

package/app/styles/components/button.scss

@@ -64,6 +64,8 @@
 
 .hds-button__text {
   flex: 1 0 0;
+  // <button> and <a> elements have different intrinsic text alignments, so we need to normalize it
+  text-align: center;
 }
 
 

package/app/styles/components/copy/snippet.scss

@@ -15,11 +15,8 @@
   gap: 8px;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   padding: 6px 4px;
-  white-space: normal;
   text-align: left;
-  overflow-wrap: anywhere;
   border: 1px solid transparent;
   border-radius: 5px;
   cursor: pointer;
@@ -27,11 +24,12 @@
 
 .hds-copy-snippet--color-primary {
   color: var(--token-color-foreground-action);
-  background-color: var(--token-color-surface-interactive);
+  background-color: transparent;
 
   &:hover,
   &.mock-hover {
     color: var(--token-color-foreground-action-hover);
+    background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
   }
 
@@ -41,14 +39,19 @@
     background-color: var(--token-color-surface-interactive-active);
     border-color: var(--token-color-border-strong);
   }
+
+  &:focus {
+    background-color: transparent;
+  }
 }
 
 .hds-copy-snippet--color-secondary {
   color: var(--token-color-foreground-primary);
-  background-color: var(--token-color-surface-interactive);
+  background-color: transparent;
 
   &:hover,
   &.mock-hover {
+    background-color: var(--token-color-surface-interactive);
     border-color: var(--token-color-border-strong);
   }
 
@@ -76,12 +79,16 @@
 }
 
 .hds-copy-snippet--status-success {
+  background-color: var(--token-color-surface-interactive);
+
   .hds-copy-snippet__icon {
     color: var(--token-color-foreground-success);
   }
 }
 
 .hds-copy-snippet--status-error {
+  background-color: var(--token-color-surface-interactive);
+
   .hds-copy-snippet__icon {
     color: var(--token-color-foreground-critical);
   }
@@ -89,7 +96,6 @@
 
 .hds-copy-snippet__text {
   flex: 1 0 0;
-  max-width: calc(100% - 24px);
 }
 
 .hds-copy-snippet__icon {
@@ -97,15 +103,17 @@
 }
 
 .hds-copy-snippet--width-full {
-  justify-content: center;
+  width: 100%;
+  max-width: 100%;
+}
+
+.hds-copy-snippet--is-truncated {
+  width: 100%;
+  max-width: 100%;
 
   .hds-copy-snippet__text {
-    flex: 0 0 auto;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
 }
-
-.hds-copy-snippet__text--truncated {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}