@hashicorp/design-system-components 3.5.0 → 4.0.0

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

@@ -1,76 +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 { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
-import { setAriaDescribedBy } from '@hashicorp/design-system-components/utils/hds-set-aria-described-by';
-
-export default class HdsFormFieldsetIndexComponent extends Component {
-  @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
-  @tracked descriptors = [];
-
-  @action
-  appendDescriptor(element) {
-    this.descriptors.push(element.id);
-  }
-
-  @action
-  setAriaDescribedBy() {
-    setAriaDescribedBy(this);
-  }
-
-  /**
-   * Sets the layout of the group
-   *
-   * @param layout
-   * @type {enum}
-   * @default 'vertical'
-   */
-  get layout() {
-    return this.args.layout ?? 'vertical';
-  }
-
-  /**
-   * Calculates the unique ID to assign to the fieldset
-   */
-  get id() {
-    return getElementId(this);
-  }
-
-  /**
-   * Get the class names to apply to the component.
-   * @method classNames
-   * @return {string} The "class" attribute to apply to the component.
-   */
-  get classNames() {
-    // we just need a class for the layout
-    let classes = ['hds-form-group'];
-
-    // add a class based on the @layout argument
-    classes.push(`hds-form-group--layout-${this.layout}`);
-
-    return classes.join(' ');
-  }
-
-  /**
-   * @param isRequired
-   * @type {boolean}
-   * @default false
-   */
-  get isRequired() {
-    return this.args.isRequired || false;
-  }
-
-  /**
-   * @param isOptional
-   * @type {boolean}
-   * @default false
-   */
-  get isOptional() {
-    return this.args.isOptional || false;
-  }
-}

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

@@ -1,6 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<input class="hds-form-file-input hds-typography-body-200" ...attributes type="file" />

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

@@ -1,24 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Form::Field
-  @layout="vertical"
-  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
-  @isRequired={{@isRequired}}
-  @isOptional={{@isOptional}}
-  @id={{@id}}
-  as |F|
->
-  {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
-  <F.Control>
-    <Hds::Form::FileInput::Base
-      required={{@isRequired}}
-      ...attributes
-      id={{F.id}}
-      aria-describedby={{F.ariaDescribedBy}}
-    />
-  </F.Control>
-</Hds::Form::Field>

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

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

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

@@ -1,58 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-export const ID_PREFIX = 'helper-text-';
-
-const NOOP = () => {};
-
-export default class HdsFormHelperTextIndexComponent extends Component {
-  /**
-   * Determines the unique ID to assign to the element
-   * @method id
-   * @return {(string|null)} The "id" attribute to apply to the element or null, if no controlId is provided
-   */
-  get id() {
-    let { controlId } = this.args;
-    if (controlId) {
-      return `${ID_PREFIX}${controlId}`;
-    }
-    return null;
-  }
-
-  /**
-   * @param onInsert
-   * @type {function}
-   * @default () => {}
-   */
-  get onInsert() {
-    let { onInsert } = this.args;
-
-    // notice: this is a guard used to prevent triggering an error when the component is used as standalone element
-    if (typeof onInsert === 'function') {
-      return onInsert;
-    } else {
-      return NOOP;
-    }
-  }
-
-  /**
-   * 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-form-helper-text'];
-
-    // 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
-    if (this.args.contextualClass) {
-      classes.push(this.args.contextualClass);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-{{#if @isOptional}}
-  <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" />
-{{/if}}

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

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsFormIndicatorIndexComponent extends Component {
-  /**
-   * 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-form-indicator'];
-
-    if (this.args.isOptional) {
-      // add speficic class for "optional" indicator
-      classes.push('hds-form-indicator--optional');
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<label class={{this.classNames}} for={{@controlId}} ...attributes>
-  {{yield}}
-  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
-</label>

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

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsFormLabelIndexComponent extends Component {
-  /**
-   * 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-form-label'];
-
-    // add typographic classes
-    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');
-
-    // 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
-    if (this.args.contextualClass) {
-      classes.push(this.args.contextualClass);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,8 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<legend class={{this.classNames}} ...attributes>
-  {{yield}}
-  <Hds::Form::Indicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />
-</legend>

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

@@ -1,29 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-
-export default class HdsFormLegendIndexComponent extends Component {
-  /**
-   * 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-form-legend'];
-
-    // add typographic classes
-    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');
-
-    // 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
-    if (this.args.contextualClass) {
-      classes.push(this.args.contextualClass);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,40 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<div class={{this.classNames}} {{style width=@width}}>
-  {{#if @isMultiline}}
-    <Hds::Form::Textarea::Base
-      class="hds-form-masked-input__control"
-      @value={{@value}}
-      @isInvalid={{@isInvalid}}
-      @height={{@height}}
-      id={{this.id}}
-      ...attributes
-    />
-  {{else}}
-    <Hds::Form::TextInput::Base
-      class="hds-form-masked-input__control"
-      @value={{@value}}
-      @isInvalid={{@isInvalid}}
-      id={{this.id}}
-      ...attributes
-    />
-  {{/if}}
-  <Hds::Form::VisibilityToggle
-    @isVisible={{this.isContentMasked}}
-    @ariaLabel={{this.visibilityToggleAriaLabel}}
-    @ariaMessageText={{this.visibilityToggleAriaMessageText}}
-    aria-controls={{this.id}}
-    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}}
-      @targetToCopy="#{{this.id}}"
-    />
-  {{/if}}
-</div>

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

@@ -1,85 +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 { getElementId } from '@hashicorp/design-system-components/utils/hds-get-element-id';
-
-export default class HdsFormMaskedInputBaseComponent extends Component {
-  @tracked isContentMasked = this.args.isContentMasked ?? true;
-
-  @action
-  onClickToggleMasking() {
-    this.isContentMasked = !this.isContentMasked;
-  }
-
-  /**
-   * Calculates the unique ID to assign to the form control
-   */
-  get id() {
-    return getElementId(this);
-  }
-
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Show masked content'
-   */
-  get visibilityToggleAriaLabel() {
-    if (this.args.visibilityToggleAriaLabel) {
-      return this.args.visibilityToggleAriaLabel;
-    } else if (this.isContentMasked) {
-      return 'Show masked content';
-    } else {
-      return 'Hide masked content';
-    }
-  }
-
-  /**
-   * @param ariaMessageText
-   * @type {string}
-   * @default '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 visible';
-    }
-  }
-
-  /**
-   * @param copyButtonText
-   * @type {string}
-   * @default 'Copy masked content'
-   */
-  get copyButtonText() {
-    if (this.args.copyButtonText) {
-      return this.args.copyButtonText;
-    } else {
-      return 'Copy masked content';
-    }
-  }
-
-  /**
-   * 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-form-masked-input'];
-
-    if (this.isContentMasked) {
-      classes.push(`hds-form-masked-input--is-masked`);
-    } else {
-      classes.push(`hds-form-masked-input--is-not-masked`);
-    }
-
-    return classes.join(' ');
-  }
-}

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

@@ -1,33 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Form::Field
-  @layout="vertical"
-  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
-  @isRequired={{@isRequired}}
-  @isOptional={{@isOptional}}
-  @id={{@id}}
-  as |F|
->
-  {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error CharacterCount=F.CharacterCount)}}
-  <F.Control>
-    <Hds::Form::MaskedInput::Base
-      @hasCopyButton={{@hasCopyButton}}
-      @isMultiline={{@isMultiline}}
-      @isContentMasked={{@isContentMasked}}
-      @visibilityToggleAriaLabel={{@visibilityToggleAriaLabel}}
-      @visibilityToggleAriaMessageText={{@visibilityToggleAriaMessageText}}
-      @value={{@value}}
-      @isInvalid={{@isInvalid}}
-      @width={{@width}}
-      @height={{@height}}
-      @id={{F.id}}
-      required={{@isRequired}}
-      ...attributes
-      aria-describedby={{F.ariaDescribedBy}}
-    />
-  </F.Control>
-</Hds::Form::Field>

package/addon/components/hds/form/radio/base.hbs

@@ -1,5 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<input type="radio" class="hds-form-radio" ...attributes value={{@value}} />

package/addon/components/hds/form/radio/field.hbs

@@ -1,24 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Form::Field
-  @layout="flag"
-  @contextualClass={{@contextualClass}}
-  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
-  @id={{@id}}
-  as |F|
->
-  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Field" component level }}
-  {{yield (hash Label=F.Label HelperText=F.HelperText Error=F.Error)}}
-  <F.Control>
-    <Hds::Form::Radio::Base
-      @value={{@value}}
-      name={{@name}}
-      required={{@isRequired}}
-      ...attributes
-      id={{F.id}}
-      aria-describedby={{F.ariaDescribedBy}}
-    />
-  </F.Control>
-</Hds::Form::Field>

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

@@ -1,29 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Form::Fieldset
-  @layout={{@layout}}
-  @name={{@name}}
-  @isRequired={{@isRequired}}
-  @isOptional={{@isOptional}}
-  ...attributes
-  as |F|
->
-  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
-  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
-  <F.Control>
-    {{yield
-      (hash
-        Radio::Field=(component
-          "hds/form/radio/field"
-          contextualClass="hds-form-group__control-field"
-          isRequired=@isRequired
-          name=@name
-          extraAriaDescribedBy=F.ariaDescribedBy
-        )
-      )
-    }}
-  </F.Control>
-</Hds::Form::Fieldset>

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

@@ -1,10 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<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

@@ -1,30 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<Hds::Form::Fieldset
-  class="hds-form-group--radio-cards"
-  @layout={{if (eq @layout "vertical") "vertical" "horizontal"}}
-  @name={{@name}}
-  @isRequired={{@isRequired}}
-  @isOptional={{@isOptional}}
-  ...attributes
-  as |F|
->
-  {{! Notice: the order of the elements is not relevant here, because it's controlled at "Hds::Form::Fieldset" component level }}
-  {{yield (hash Legend=F.Legend isRequired=F.isRequired isOptional=F.isOptional)}}
-  {{yield (hash HelperText=F.HelperText Error=F.Error)}}
-  <F.Control>
-    {{yield
-      (hash
-        RadioCard=(component
-          "hds/form/radio-card"
-          name=@name
-          alignment=@alignment
-          controlPosition=@controlPosition
-          extraAriaDescribedBy=F.ariaDescribedBy
-        )
-      )
-    }}
-  </F.Control>
-</Hds::Form::Fieldset>

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

@@ -1,24 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-<label class={{this.classNames}} {{did-insert this.setAriaDescribedBy}} {{style maxWidth=@maxWidth}}>
-  <span class="hds-form-radio-card__content">
-    {{yield (hash Icon=(component "flight-icon" size="24" isInlineBlock=false))}}
-    {{yield (hash Label=(component "hds/form/radio-card/label"))}}
-    {{yield (hash Badge=(component "hds/badge"))}}
-    {{yield (hash Description=(component "hds/form/radio-card/description"))}}
-    {{yield (hash Generic=(component "hds/yield"))}}
-  </span>
-  <span class="hds-form-radio-card__control-wrapper">
-    <Hds::Form::Radio::Base
-      class="hds-form-radio-card__control"
-      @value={{@value}}
-      name={{@name}}
-      checked={{@checked}}
-      disabled={{@disabled}}
-      aria-describedby={{this.ariaDescribedBy}}
-      ...attributes
-    />
-  </span>
-</label>