@hashicorp/design-system-components 0.12.6 → 0.12.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hashicorp/design-system-components
 
+## 0.12.7
+
+### Patch Changes
+
+- [#406](https://github.com/hashicorp/design-system/pull/406) [`3c3f49b9`](https://github.com/hashicorp/design-system/commit/3c3f49b950fe7c0c9fa9732d9a8534d3b73e69fd) Thanks [@alex-ju](https://github.com/alex-ju)! - Fix badge vertical alignment
+
 ## 0.12.6
 
 ### Patch Changes

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

@@ -0,0 +1 @@
+<input type="checkbox" class={{this.classNames}} ...attributes value={{@value}} />

package/addon/components/hds/form/checkbox/base.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormCheckboxBaseComponent 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-checkbox'];
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-checkbox--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,19 @@
+<Hds::Form::Field
+  @layout="flag"
+  @contextualClass={{@contextualClass}}
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  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::Checkbox::Base
+      class="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

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

@@ -0,0 +1,9 @@
+<Hds::Form::Fieldset @layout={{@layout}} ...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 HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield
+      (hash Checkbox::Field=(component "hds/form/checkbox/field" contextualClass="hds-form-group__control-field"))
+    }}
+  </F.Control>
+</Hds::Form::Fieldset>

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

@@ -0,0 +1,6 @@
+<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">
+    {{yield (hash Message=(component "hds/form/error/message"))}}
+  </div>
+</div>

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

@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+export const ID_PREFIX = 'error-';
+
+const NOOP = () => {};
+
+export default class HdsFormErrorIndexComponent 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-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
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,3 @@
+<p class="hds-form-error__message" ...attributes>
+  {{yield}}
+</p>

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

@@ -0,0 +1,21 @@
+<div class={{this.classNames}} ...attributes>
+  {{yield (hash Label=(component "hds/form/label" controlId=this.id contextualClass="hds-form-field__label"))}}
+  {{yield
+    (hash
+      HelperText=(component
+        "hds/form/helper-text"
+        controlId=this.id
+        onInsert=this.appendDescriptor
+        contextualClass="hds-form-field__helper-text"
+      )
+    )
+  }}
+  {{yield (hash Control=(component "hds/yield") id=this.id ariaDescribedBy=this.ariaDescribedBy)}}
+  {{yield
+    (hash
+      Error=(component
+        "hds/form/error" controlId=this.id onInsert=this.appendDescriptor contextualClass="hds-form-field__error"
+      )
+    )
+  }}
+</div>

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

@@ -0,0 +1,66 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
+import { getElementId } from '../utils/getElementId';
+import { getAriaDescribedBy } from '../utils/getAriaDescribedBy';
+
+export const LAYOUT_TYPES = ['vertical', 'flag'];
+
+export default class HdsFormFieldIndexComponent extends Component {
+  @tracked ariaDescribedBy = getAriaDescribedBy(this);
+  @tracked descriptors = [];
+
+  @action
+  appendDescriptor(element) {
+    this.descriptors.push(element.id);
+    this.ariaDescribedBy = getAriaDescribedBy(this);
+  }
+
+  /**
+   * Sets the layout of the field
+   *
+   * @param layout
+   * @type {string}
+   */
+  get layout() {
+    let { layout } = this.args;
+
+    assert(
+      `@type for "Hds::Form::Field" must be one of the following: ${LAYOUT_TYPES.join(
+        ', '
+      )}, received: ${layout}`,
+      LAYOUT_TYPES.includes(layout)
+    );
+
+    return layout;
+  }
+
+  /**
+   * Calculates the unique ID to assign to the form control
+   */
+  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() {
+    let classes = [];
+
+    if (this.args.layout) {
+      classes.push(`hds-form-field--layout-${this.layout}`);
+    }
+
+    // add a class based on the @contextualClass argument
+    // notice: this will *not* be documented for public use
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,23 @@
+<fieldset class={{this.classNames}} id={{this.id}} ...attributes aria-describedby={{this.ariaDescribedBy}}>
+  {{yield (hash Legend=(component "hds/form/legend" contextualClass="hds-form-group__legend"))}}
+  {{yield
+    (hash
+      HelperText=(component
+        "hds/form/helper-text"
+        controlId=this.id
+        onInsert=this.appendDescriptor
+        contextualClass="hds-form-group__helper-text"
+      )
+    )
+  }}
+  <div class="hds-form-group__control-fields-wrapper">
+    {{yield (hash Control=(component "hds/yield"))}}
+  </div>
+  {{yield
+    (hash
+      Error=(component
+        "hds/form/error" controlId=this.id onInsert=this.appendDescriptor contextualClass="hds-form-group__error"
+      )
+    )
+  }}
+</fieldset>

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

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { getElementId } from '../utils/getElementId';
+import { getAriaDescribedBy } from '../utils/getAriaDescribedBy';
+
+export default class HdsFormFieldsetIndexComponent extends Component {
+  @tracked ariaDescribedBy = getAriaDescribedBy(this);
+  @tracked descriptors = [];
+
+  @action
+  appendDescriptor(element) {
+    this.descriptors.push(element.id);
+    this.ariaDescribedBy = getAriaDescribedBy(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(' ');
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class={{this.classNames}} id={{this.id}} {{did-insert this.onInsert}} ...attributes>
+  {{yield}}
+</div>

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

@@ -0,0 +1,56 @@
+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 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
+    if (this.args.contextualClass) {
+      classes.push(this.args.contextualClass);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,3 @@
+<label class={{this.classNames}} for={{@controlId}} ...attributes>
+  {{yield}}
+</label>

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,3 @@
+<legend class={{this.classNames}} ...attributes>
+  {{yield}}
+</legend>

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

@@ -0,0 +1,24 @@
+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/radio/base.hbs

@@ -0,0 +1 @@
+<input type="radio" class={{this.classNames}} ...attributes value={{@value}} />

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

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormRadioBaseComponent 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-radio'];
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-radio--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,19 @@
+<Hds::Form::Field
+  @layout="flag"
+  @contextualClass={{@contextualClass}}
+  @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  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
+      class="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

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

@@ -0,0 +1,7 @@
+<Hds::Form::Fieldset @layout={{@layout}} ...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 HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    {{yield (hash Radio::Field=(component "hds/form/radio/field" contextualClass="hds-form-group__control-field"))}}
+  </F.Control>
+</Hds::Form::Fieldset>

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

@@ -0,0 +1,3 @@
+<select class={{this.classNames}} {{style width=@width}} ...attributes>
+  {{yield (hash Options=(component "hds/yield"))}}
+</select>

package/addon/components/hds/form/select/base.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormSelectBaseComponent 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-select'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-200', 'hds-font-weight-regular');
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-select--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,18 @@
+<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} 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 HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::Select::Base
+      class="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      @width={{@width}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+      as |S|
+    >
+      {{yield (hash Options=S.Options)}}
+    </Hds::Form::Select::Base>
+  </F.Control>
+</Hds::Form::Field>

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

@@ -0,0 +1 @@
+<input class={{this.classNames}} {{style width=@width}} ...attributes value={{@value}} type={{this.type}} />

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

@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+// notice: we don't support all the possible HTML types, only a subset
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+export const DEFAULT_TYPE = 'text';
+export const TYPES = [
+  'text',
+  'email',
+  'password',
+  'url',
+  'search',
+  'date',
+  'time',
+];
+
+export default class HdsFormTextInputBaseComponent extends Component {
+  /**
+   * Sets the type of input
+   *
+   * @param type
+   * @type {string}
+   * @default 'text'
+   */
+  get type() {
+    let { type = DEFAULT_TYPE } = this.args;
+
+    assert(
+      `@type for "Hds::Form::TextInput" must be one of the following: ${TYPES.join(
+        ', '
+      )}, received: ${type}`,
+      TYPES.includes(type)
+    );
+
+    return type;
+  }
+
+  /**
+   * 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-text-input'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-200', 'hds-font-weight-regular');
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-text-input--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,16 @@
+<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} 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 HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::TextInput::Base
+      class="hds-form-field__control"
+      @type={{@type}}
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      @width={{@width}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

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

@@ -0,0 +1,2 @@
+{{! Notice: this is not the native HTML <textarea> but the Ember component <Textarea> }}
+<Textarea class={{this.classNames}} {{style width=@width}} ...attributes @value={{@value}} />

package/addon/components/hds/form/textarea/base.js

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+
+export default class HdsFormTextareaBaseComponent 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-textarea'];
+
+    // add typographic classes
+    classes.push('hds-typography-body-200', 'hds-font-weight-regular');
+
+    // add a class based on the @isInvalid argument
+    if (this.args.isInvalid) {
+      classes.push(`hds-form-textarea--is-invalid`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,15 @@
+<Hds::Form::Field @layout="vertical" @extraAriaDescribedBy={{@extraAriaDescribedBy}} 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 HelperText=F.HelperText Error=F.Error)}}
+  <F.Control>
+    <Hds::Form::Textarea::Base
+      class="hds-form-field__control"
+      @value={{@value}}
+      @isInvalid={{@isInvalid}}
+      @width={{@width}}
+      ...attributes
+      id={{F.id}}
+      aria-describedby={{F.ariaDescribedBy}}
+    />
+  </F.Control>
+</Hds::Form::Field>

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

@@ -0,0 +1,4 @@
+<div class={{this.classNames}}>
+  <input class="hds-form-toggle__control" type="checkbox" ...attributes value={{@value}} role="switch" />
+  <div class="hds-form-toggle__facade"></div>
+</div>