@hashicorp/design-system-components 2.15.0 → 3.0.0

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

@@ -5,15 +5,33 @@
 
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { HdsInteractiveSignature } from '../interactive';
 
 export const DEFAULT_SIZE = 'medium';
 export const DEFAULT_COLOR = 'primary';
 export const DEFAULT_ICONPOSITION = 'leading';
-export const SIZES = ['small', 'medium', 'large'];
-export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'];
-export const ICONPOSITIONS = ['leading', 'trailing'];
+export const SIZES = ['small', 'medium', 'large'] as const;
+export const COLORS = ['primary', 'secondary', 'tertiary', 'critical'] as const;
+export const ICONPOSITIONS = ['leading', 'trailing'] as const;
+
+export type HdsButtonSize = typeof SIZES[number];
+export type HdsButtonColor = typeof COLORS[number];
+export type HdsButtonIconPosition = typeof ICONPOSITIONS[number];
+
+export interface HdsButtonSignature {
+  Args: HdsInteractiveSignature['Args'] & {
+    size?: HdsButtonSize;
+    color?: HdsButtonColor;
+    text: string;
+    icon?: string;
+    iconPosition?: HdsButtonIconPosition;
+    isIconOnly?: boolean;
+    isFullWidth?: boolean;
+  };
+  Element: HdsInteractiveSignature['Element'];
+}
 
-export default class HdsButtonIndexComponent extends Component {
+export default class HdsButtonIndexComponent extends Component<HdsButtonSignature> {
   /**
    * @param text
    * @type {string}
@@ -166,3 +184,10 @@ export default class HdsButtonIndexComponent extends Component {
     return classes.join(' ');
   }
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Hds::Button': typeof HdsButtonIndexComponent;
+    'hds/button': typeof HdsButtonIndexComponent;
+  }
+}

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

@@ -11,6 +11,6 @@
   @isIconOnly={{@isIconOnly}}
   @color="secondary"
   @iconPosition="trailing"
-  {{clipboard text=@textToCopy target=@targetToCopy container=@container onError=this.onError onSuccess=this.onSuccess}}
+  {{hds-clipboard text=@textToCopy target=@targetToCopy onSuccess=this.onSuccess onError=this.onError}}
   ...attributes
 />

package/addon/components/hds/copy/button/index.js

@@ -70,15 +70,27 @@ export default class HdsCopyButtonComponent extends Component {
   }
 
   @action
-  onSuccess() {
+  onSuccess(args) {
     this.status = 'success';
     this.resetStatusDelayed();
+
+    let { onSuccess } = this.args;
+
+    if (typeof onSuccess === 'function') {
+      onSuccess(args);
+    }
   }
 
   @action
-  onError() {
+  onError(args) {
     this.status = 'error';
     this.resetStatusDelayed();
+
+    let { onError } = this.args;
+
+    if (typeof onError === 'function') {
+      onError(args);
+    }
   }
 
   resetStatusDelayed() {

package/addon/components/hds/copy/snippet/index.hbs

@@ -5,11 +5,11 @@
 <button
   type="button"
   class={{this.classNames}}
-  {{clipboard text=@textToCopy container=@container onError=this.onError onSuccess=this.onSuccess}}
+  {{hds-clipboard text=@textToCopy onSuccess=this.onSuccess onError=this.onError}}
   ...attributes
 >
-  <span class="hds-copy-snippet__text hds-typography-code-100 {{if @isTruncated 'hds-copy-snippet__text--truncated'}}">
+  <Hds::Text::Code class="hds-copy-snippet__text" @tag="span" @size="100">
     {{@textToCopy}}
-  </span>
+  </Hds::Text::Code>
   <FlightIcon @name={{this.icon}} class="hds-copy-snippet__icon" />
 </button>

package/addon/components/hds/copy/snippet/index.js

@@ -88,6 +88,11 @@ export default class HdsCopySnippetIndexComponent extends Component {
     // add a class based on the tracked status (idle/success/error)
     classes.push(`hds-copy-snippet--status-${this.status}`);
 
+    // add a class based on the @isTruncated argument
+    if (this.isTruncated) {
+      classes.push('hds-copy-snippet--is-truncated');
+    }
+
     // add a class based on the @isFullWidth argument
     if (this.isFullWidth) {
       classes.push('hds-copy-snippet--width-full');
@@ -97,15 +102,27 @@ export default class HdsCopySnippetIndexComponent extends Component {
   }
 
   @action
-  onSuccess() {
+  onSuccess(args) {
     this.status = 'success';
     this.resetStatusDelayed();
+
+    let { onSuccess } = this.args;
+
+    if (typeof onSuccess === 'function') {
+      onSuccess(args);
+    }
   }
 
   @action
-  onError() {
+  onError(args) {
     this.status = 'error';
     this.resetStatusDelayed();
+
+    let { onError } = this.args;
+
+    if (typeof onError === 'function') {
+      onError(args);
+    }
   }
 
   resetStatusDelayed() {

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

@@ -8,10 +8,7 @@ import { action } from '@ember/object';
 import { assert } from '@ember/debug';
 
 export const DEFAULT_POSITION = 'bottom-right';
-// TODO: retire 'right' and 'left' in favor of `bottom-right` and `bottom-left` https://github.com/hashicorp/design-system/pull/1262
 export const POSITIONS = [
-  'right',
-  'left',
   'bottom-left',
   'bottom-right',
   'top-left',

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

@@ -24,11 +24,17 @@
         <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
       </div>
     {{/if}}
-    <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+    <Hds::Text::Body @tag="div" @size="200" @weight="medium" class="hds-dropdown-list-item__interactive-text">
       {{yield}}
-    </div>
+    </Hds::Text::Body>
     {{#if @count}}
-      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+      <Hds::Text::Body
+        class="hds-dropdown-list-item__count"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+        @color="faint"
+      >{{@count}}</Hds::Text::Body>
     {{/if}}
     <span class="hds-dropdown-list-item__checkmark">
       {{#if @selected}}

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

@@ -4,9 +4,13 @@
 }}
 <li class={{this.classNames}} ...attributes>
   {{#if @copyItemTitle}}
-    <div
-      class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
-    >{{@copyItemTitle}}</div>
+    <Hds::Text::Body
+      class="hds-dropdown-list-item__copy-item-title"
+      @tag="div"
+      @size="100"
+      @weight="semibold"
+      @color="faint"
+    >{{@copyItemTitle}}</Hds::Text::Body>
   {{/if}}
-  <Hds::Copy::Snippet @textToCopy={{this.text}} @isTruncated={{@isTruncated}} />
+  <Hds::Copy::Snippet @color="secondary" @textToCopy={{this.text}} @isTruncated={{this.isTruncated}} />
 </li>

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

@@ -22,6 +22,19 @@ export default class HdsDropdownListItemCopyItemComponent extends Component {
 
     return text;
   }
+
+  /**
+   * @param isTruncated
+   * @type {boolean}
+   * @default true
+   * @description Indicates that the text should be truncated instead of wrapping and using multiple lines.
+   */
+  get isTruncated() {
+    let { isTruncated = true } = this.args;
+
+    return isTruncated;
+  }
+
   /**
    * Get the class names to apply to the component.
    * @method classNames

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

@@ -2,6 +2,13 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<li class={{this.classNames}} ...attributes>
+<Hds::Text::Body
+  class="hds-dropdown-list-item hds-dropdown-list-item--variant-description"
+  @tag="li"
+  @size="100"
+  @weight="regular"
+  @color="faint"
+  ...attributes
+>
   {{this.text}}
-</li>
+</Hds::Text::Body>

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

@@ -22,22 +22,4 @@ export default class HdsDropdownListItemDescriptionComponent extends Component {
 
     return text;
   }
-
-  /**
-   * 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-description',
-    ];
-
-    // add classes for the typographic style
-    classes.push('hds-typography-body-100');
-    classes.push('hds-font-weight-regular');
-
-    return classes.join(' ');
-  }
 }

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

@@ -8,9 +8,9 @@
       <div class="hds-dropdown-list-item__interactive-icon">
         <FlightIcon @name="loading" @isInlineBlock={{false}} />
       </div>
-      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-100 hds-font-weight-regular">
+      <Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
         {{this.text}}
-      </div>
+      </Hds::Text::Body>
     </div>
   {{else}}
     <Hds::Interactive
@@ -29,9 +29,9 @@
           <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
         </div>
       {{/if}}
-      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+      <Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="div" @size="200" @weight="medium">
         {{this.text}}
-      </div>
+      </Hds::Text::Body>
     </Hds::Interactive>
   {{/if}}
 </li>

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

@@ -14,7 +14,12 @@
     <span class="hds-dropdown-list-item__text-content">{{yield}}</span>
 
     {{#if @count}}
-      <span class="hds-dropdown-list-item__count hds-typography-body-100 hds-font-weight-medium">{{@count}}</span>
+      <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/title.hbs

@@ -2,6 +2,13 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<li class={{this.classNames}} ...attributes>
+<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}}
-</li>
+</Hds::Text::Body>

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

@@ -22,22 +22,4 @@ export default class HdsDropdownListItemTitleComponent extends Component {
 
     return text;
   }
-
-  /**
-   * 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-title',
-    ];
-
-    // add classes for the typographic style
-    classes.push('hds-typography-body-100');
-    classes.push('hds-font-weight-semibold');
-
-    return classes.join(' ');
-  }
 }

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

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

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

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

package/addon/components/hds/form/error/index.hbs

@@ -4,7 +4,7 @@
 }}
 <div class={{this.classNames}} id={{this.id}} {{did-insert this.onInsert}} ...attributes>
   <FlightIcon class="hds-form-error__icon" @name="alert-diamond-fill" />
-  <div class="hds-form-error__content">
+  <Hds::Text::Body class="hds-form-error__content" @tag="div" @size="100" @weight="medium">
     {{yield (hash Message=(component "hds/form/error/message"))}}
-  </div>
+  </Hds::Text::Body>
 </div>

package/addon/components/hds/form/error/index.js

@@ -46,9 +46,6 @@ export default class HdsFormErrorIndexComponent extends Component {
   get classNames() {
     let classes = ['hds-form-error'];
 
-    // add typographic classes
-    classes.push('hds-typography-body-100', 'hds-font-weight-medium');
-
     // add a class based on the @contextualClass argument
     // notice: this will *not* be documented for public use
     // the reason for this is that the contextual component declarations don't pass attributes to the component

package/addon/components/hds/form/error/message.hbs

@@ -2,6 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<p class="hds-form-error__message" ...attributes>
+<Hds::Text::Body class="hds-form-error__message" @tag="p" @size="100" @weight="medium" ...attributes>
   {{yield}}
-</p>
+</Hds::Text::Body>

package/addon/components/hds/form/helper-text/index.hbs

@@ -2,6 +2,14 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class={{this.classNames}} id={{this.id}} {{did-insert this.onInsert}} ...attributes>
+<Hds::Text::Body
+  class={{this.classNames}}
+  @tag="div"
+  @size="100"
+  @weight="regular"
+  id={{this.id}}
+  {{did-insert this.onInsert}}
+  ...attributes
+>
   {{yield}}
-</div>
+</Hds::Text::Body>

package/addon/components/hds/form/helper-text/index.js

@@ -46,9 +46,6 @@ export default class HdsFormHelperTextIndexComponent extends Component {
   get classNames() {
     let classes = ['hds-form-helper-text'];
 
-    // add typographic classes
-    classes.push('hds-typography-body-100', 'hds-font-weight-regular');
-
     // add a class based on the @contextualClass argument
     // notice: this will *not* be documented for public use
     // the reason for this is that the contextual component declarations don't pass attributes to the component

package/addon/components/hds/form/indicator/index.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 {{#if @isOptional}}
-  <span class={{this.classNames}}>(Optional)</span>
+  <Hds::Text::Body class={{this.classNames}} tag="span" @size="100" @weight="regular">(Optional)</Hds::Text::Body>
 {{/if}}
 {{#if @isRequired}}
   &nbsp;<Hds::Badge aria-hidden="true" class={{this.classNames}} @size="small" @color="neutral" @text="Required" />

package/addon/components/hds/form/indicator/index.js

@@ -17,9 +17,6 @@ export default class HdsFormIndicatorIndexComponent extends Component {
     if (this.args.isOptional) {
       // add speficic class for "optional" indicator
       classes.push('hds-form-indicator--optional');
-
-      // add typographic classes
-      classes.push('hds-typography-body-100', 'hds-font-weight-regular');
     }
 
     return classes.join(' ');

package/addon/components/hds/form/masked-input/base.hbs

@@ -21,22 +21,20 @@
       ...attributes
     />
   {{/if}}
-  <button
-    class="hds-form-masked-input__toggle-button"
-    type="button"
-    aria-label={{this.ariaLabel}}
+  <Hds::Form::VisibilityToggle
+    @isVisible={{this.isContentMasked}}
+    @ariaLabel={{this.visibilityToggleAriaLabel}}
+    @ariaMessageText={{this.visibilityToggleAriaMessageText}}
     aria-controls={{this.id}}
-    {{on "click" this.onClickToggle}}
-  >
-    <FlightIcon @name={{if this.isMasked "eye" "eye-off"}} @size="16" @isInlineBlock={{false}} />
-    <span class="sr-only" aria-live="polite">{{this.ariaMessageText}}</span>
-  </button>
+    class="hds-form-masked-input__toggle-button"
+    {{on "click" this.onClickToggleMasking}}
+  />
   {{#if @hasCopyButton}}
     <Hds::Copy::Button
       class="hds-form-masked-input__copy-button"
       @text={{this.copyButtonText}}
       @isIconOnly={{true}}
-      @textToCopy="{{@value}}"
+      @targetToCopy="#{{this.id}}"
     />
   {{/if}}
 </div>

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

@@ -9,11 +9,11 @@ import { action } from '@ember/object';
 import { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
 
 export default class HdsFormMaskedInputBaseComponent extends Component {
-  @tracked isMasked = this.args.isMasked ?? true;
+  @tracked isContentMasked = this.args.isContentMasked ?? true;
 
   @action
-  onClickToggle() {
-    this.isMasked = !this.isMasked;
+  onClickToggleMasking() {
+    this.isContentMasked = !this.isContentMasked;
   }
 
   /**
@@ -28,10 +28,10 @@ export default class HdsFormMaskedInputBaseComponent extends Component {
    * @type {string}
    * @default 'Show masked content'
    */
-  get ariaLabel() {
-    if (this.args.ariaLabel) {
-      return this.args.ariaLabel;
-    } else if (this.isMasked) {
+  get visibilityToggleAriaLabel() {
+    if (this.args.visibilityToggleAriaLabel) {
+      return this.args.visibilityToggleAriaLabel;
+    } else if (this.isContentMasked) {
       return 'Show masked content';
     } else {
       return 'Hide masked content';
@@ -43,13 +43,13 @@ export default class HdsFormMaskedInputBaseComponent extends Component {
    * @type {string}
    * @default 'Input content is now hidden'
    */
-  get ariaMessageText() {
-    if (this.args.ariaMessageText) {
-      return this.args.ariaMessageText;
-    } else if (this.isMasked) {
-      return 'Input content is now hidden';
+  get visibilityToggleAriaMessageText() {
+    if (this.args.visibilityToggleAriaMessageText) {
+      return this.args.visibilityToggleAriaMessageText;
+    } else if (this.isContentMasked) {
+      return 'Input content is hidden';
     } else {
-      return 'Input content is now visible';
+      return 'Input content is visible';
     }
   }
 
@@ -74,7 +74,7 @@ export default class HdsFormMaskedInputBaseComponent extends Component {
   get classNames() {
     let classes = ['hds-form-masked-input'];
 
-    if (this.isMasked) {
+    if (this.isContentMasked) {
       classes.push(`hds-form-masked-input--is-masked`);
     } else {
       classes.push(`hds-form-masked-input--is-not-masked`);

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

@@ -17,7 +17,9 @@
     <Hds::Form::MaskedInput::Base
       @hasCopyButton={{@hasCopyButton}}
       @isMultiline={{@isMultiline}}
-      @isMasked={{@isMasked}}
+      @isContentMasked={{@isContentMasked}}
+      @visibilityToggleAriaLabel={{@visibilityToggleAriaLabel}}
+      @visibilityToggleAriaMessageText={{@visibilityToggleAriaMessageText}}
       @value={{@value}}
       @isInvalid={{@isInvalid}}
       @width={{@width}}

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

@@ -2,4 +2,9 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<span class="hds-form-radio-card__description hds-typography-body-100" ...attributes>{{yield}}</span>
+<Hds::Text::Body
+  class="hds-form-radio-card__description"
+  @tag="span"
+  @size="100"
+  ...attributes
+>{{yield}}</Hds::Text::Body>

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

@@ -4,7 +4,7 @@
 }}
 <Hds::Form::Fieldset
   class="hds-form-group--radio-cards"
-  @layout="horizontal"
+  @layout={{if (eq @layout "vertical") "vertical" "horizontal"}}
   @name={{@name}}
   @isRequired={{@isRequired}}
   @isOptional={{@isOptional}}
@@ -22,7 +22,6 @@
           name=@name
           alignment=@alignment
           controlPosition=@controlPosition
-          layout=@layout
           extraAriaDescribedBy=F.ariaDescribedBy
         )
       )

package/addon/components/hds/form/radio-card/index.js

@@ -12,10 +12,8 @@ import { setAriaDescribedBy } from '@hashicorp/design-system-components/utils/hd
 
 export const DEFAULT_CONTROL_POSITION = 'bottom';
 export const DEFAULT_ALIGNMENT = 'left';
-export const DEFAULT_LAYOUT = 'fluid';
 export const CONTROL_POSITIONS = ['bottom', 'left'];
 export const ALIGNMENTS = ['left', 'center'];
-export const LAYOUTS = ['fluid', 'fixed'];
 
 export default class HdsFormRadioCardIndexComponent extends Component {
   @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
@@ -71,34 +69,6 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     return alignment;
   }
 
-  /**
-   * Sets the layout of the card within the group
-   * Accepted values: fluid, fixed
-   *
-   * @param layout
-   * @type {string}
-   * @default 'fluid'
-   */
-  get layout() {
-    let { layout = DEFAULT_LAYOUT } = this.args;
-
-    assert(
-      `@layout for "Hds::Form::RadioCard" must be one of the following: ${LAYOUTS.join(
-        ', '
-      )}; received: ${layout}`,
-      LAYOUTS.includes(layout)
-    );
-
-    // if the `@layout` is set to 'fixed' we need a `@maxWidth` value to constrain the card to
-    if (layout === 'fixed') {
-      assert(
-        `@maxWidth for "Hds::Form::RadioCard" with @layout "fixed" is required`,
-        this.args.maxWidth
-      );
-    }
-    return layout;
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -113,6 +83,11 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     if (this.args.disabled) {
       classes.push('hds-form-radio-card--disabled');
     }
+    if (this.args.maxWidth) {
+      classes.push('hds-form-radio-card--has-fixed-width');
+    } else {
+      classes.push('hds-form-radio-card--has-fluid-width');
+    }
 
     // add a class based on the @controlPosition argument
     classes.push(`hds-form-radio-card--control-${this.controlPosition}`);
@@ -120,9 +95,6 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     // add a class based on the @alignment argument
     classes.push(`hds-form-radio-card--align-${this.alignment}`);
 
-    // add a class based on the @layout argument
-    classes.push(`hds-form-radio-card--layout-${this.layout}`);
-
     return classes.join(' ');
   }
 }