@hashicorp/design-system-components 0.12.13 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @hashicorp/design-system-components
 
+## 1.0.0 🎉
+
+### Major Changes
+
+This release signifies the first major release of the HashiCorp Design System. Moving forward we expect to respect [SemVer](https://semver.org/) as we make additional changes to the design system.
+
+### Minor Changes
+
+#### Stepper component
+
+- [#470](https://github.com/hashicorp/design-system/pull/470) [`96d47264`](https://github.com/hashicorp/design-system/commit/96d4726404664f301df0352a1fdbc4b6b6e9cb88) Thanks [@jorytindall](https://github.com/jorytindall)! - Added Stepper component structure and step/task components
+
+#### ButtonSet component
+* [#486](https://github.com/hashicorp/design-system/pull/486) [`3ea2ad55`](https://github.com/hashicorp/design-system/commit/3ea2ad55b2ec9c579e2154ac4bb820f06a231e9f) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new ButtonSet component to standardize button spacing
+
+#### Tag component
+- [#443](https://github.com/hashicorp/design-system/pull/443) [`7756c855`](https://github.com/hashicorp/design-system/commit/7756c8554114564eccb2b08872ceabff02351682) Thanks [@alex-ju](https://github.com/alex-ju) & [@agendelHC](https://github.com/agendelHC)! - Add tag component
+
+#### Form controls components
+
+- [#447](https://github.com/hashicorp/design-system/pull/447) [`0b1e9855`](https://github.com/hashicorp/design-system/commit/0b1e985586b8f531a6208ea5ce25ac74faa77dda) Thanks [@didoo](https://github.com/didoo)!
+
+  - Added the form **`TextInput`** controls (`Base`, `Field`)
+  - Added the form **`Textarea`** controls (`Base`, `Field`)
+  - Added the form **`Select`** controls (`Base`, `Field`)
+  - Added the form **`Checkbox`** controls (`Base`, `Field`, `Group`)
+  - Added the form **`Radio`** controls (`Base`, `Field`, `Group`)
+  - Added the form **`Toggle`** controls (`Base`, `Field`, `Group`)
+  - Added the form "base" low-level elements: **`Label`**, **`HelperText`**, **`Error`**, **`Legend`**, **`Field`**, **`Fieldset`**
+
+### Patch Changes
+
+- Updated dependencies [[`0b1e9855`](https://github.com/hashicorp/design-system/commit/0b1e985586b8f531a6208ea5ce25ac74faa77dda)]:
+  - @hashicorp/design-system-tokens@1.0.0
+
+## 0.12.15
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.10
+
+## 0.12.14
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.9
+
 ## 0.12.13
 
 ### Patch Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -76,11 +76,10 @@ The engineering checklist has six parts: creating the feature branch, component
 ### Component Creation
 
 - [ ] create new branch from main for the component (`git checkout -b USER/COMPONENT-NAME`)
-- [ ] create new component
-  - `ember generate component hds/COMPONENT-NAME/index --gc` (the component won't need to be invoked with index, it's just to put all the files in the correct place)
-  - tip: if you forget to generate the backing class (via `--gc`), you can add it with `ember generate component-class hds/COMPONENT-NAME/index`.
-  - if it's a child component, then `hds/COMPONENT_NAME/CHILD_NAME` instead of `index`
-  - tip: if you need to destroy a component and start over again, `ember destroy component hds/COMPONENT-NAME/index` will remove the component and the related files as appropriate.
+- [ ] create new component using a blueprint
+  - `ember generate hds-component COMPONENT-NAME`
+  - if it's a child component, then `hds/COMPONENT_NAME/CHILD_NAME`
+  - (Note: Many of the below mentioned files will be automatically generated.)
 - [ ] **component template**
   - use semantic HTML
   - the component should have a css class that is the same as the component (e.g. `hds/button` should have a class name of `hds-button` on the component, and additional CSS classes should start with this same class name.
@@ -140,4 +139,5 @@ Pre-review request checks:
 When ready for review:
 
 - [ ] add situationally appropriate reviewers
-- [ ] added instructions for reviewers in your PR, letting them know what kind of review you need
+- [ ] add instructions for reviewers in your PR, letting them know what kind of review you need
+- [ ] add a changelog update via [Changesets](https://github.com/changesets/changesets) if needed using the command `yarn changeset` (in the project root)

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

@@ -0,0 +1,3 @@
+<div class="hds-button-set" ...attributes>
+  {{yield}}
+</div>

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

@@ -2,6 +2,7 @@
   @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 }}
@@ -10,6 +11,7 @@
     <Hds::Form::Checkbox::Base
       class="hds-form-field__control"
       @value={{@value}}
+      name={{@name}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}

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

@@ -1,4 +1,11 @@
-<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
+<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)}}
@@ -6,7 +13,11 @@
     {{yield
       (hash
         Checkbox::Field=(component
-          "hds/form/checkbox/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+          "hds/form/checkbox/field"
+          contextualClass="hds-form-group__control-field"
+          isRequired=@isRequired
+          name=@name
+          extraAriaDescribedBy=F.ariaDescribedBy
         )
       )
     }}

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

@@ -1,4 +1,4 @@
-<div class={{this.classNames}} ...attributes>
+<div class={{this.classNames}} {{did-insert this.setAriaDescribedBy}} ...attributes>
   {{yield
     (hash
       Label=(component

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

@@ -3,18 +3,26 @@ 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';
+import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
+import { schedule } from '@ember/runloop';
 
 export const LAYOUT_TYPES = ['vertical', 'flag'];
 
 export default class HdsFormFieldIndexComponent extends Component {
-  @tracked ariaDescribedBy = getAriaDescribedBy(this);
+  @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
   @tracked descriptors = [];
 
   @action
   appendDescriptor(element) {
     this.descriptors.push(element.id);
-    this.ariaDescribedBy = getAriaDescribedBy(this);
+  }
+
+  @action
+  setAriaDescribedBy() {
+    // we schedule this afterRender to capture all descriptors registered onInsert
+    schedule('afterRender', () => {
+      setAriaDescribedBy(this);
+    });
   }
 
   /**

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

@@ -1,4 +1,4 @@
-<fieldset class={{this.classNames}} id={{this.id}} ...attributes aria-describedby={{this.ariaDescribedBy}}>
+<fieldset class={{this.classNames}} id={{this.id}} {{did-insert this.setAriaDescribedBy}} ...attributes>
   {{yield
     (hash
       Legend=(component
@@ -17,7 +17,7 @@
     )
   }}
   <div class="hds-form-group__control-fields-wrapper">
-    {{yield (hash Control=(component "hds/yield"))}}
+    {{yield (hash Control=(component "hds/yield") ariaDescribedBy=this.ariaDescribedBy)}}
   </div>
   {{yield
     (hash

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

@@ -2,16 +2,20 @@ 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';
+import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
 
 export default class HdsFormFieldsetIndexComponent extends Component {
-  @tracked ariaDescribedBy = getAriaDescribedBy(this);
+  @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
   @tracked descriptors = [];
 
   @action
   appendDescriptor(element) {
     this.descriptors.push(element.id);
-    this.ariaDescribedBy = getAriaDescribedBy(this);
+  }
+
+  @action
+  setAriaDescribedBy() {
+    setAriaDescribedBy(this);
   }
 
   /**

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

@@ -1,6 +1,6 @@
 {{#if @isOptional}}
-  <span class="hds-form-indicator hds-form-indicator--optional">(Optional)</span>
+  <span class={{this.classNames}}>(Optional)</span>
 {{/if}}
 {{#if @isRequired}}
-  <Hds::Badge class="hds-form-indicator" @size="small" @color="neutral" @text="Required" />
+  <Hds::Badge class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
 {{/if}}

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

@@ -0,0 +1,22 @@
+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');
+
+      // add typographic classes
+      classes.push('hds-typography-body-100', 'hds-font-weight-regular');
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -2,6 +2,7 @@
   @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 }}
@@ -10,6 +11,7 @@
     <Hds::Form::Radio::Base
       class="hds-form-field__control"
       @value={{@value}}
+      name={{@name}}
       ...attributes
       id={{F.id}}
       aria-describedby={{F.ariaDescribedBy}}

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

@@ -1,4 +1,11 @@
-<Hds::Form::Fieldset @layout={{@layout}} @isRequired={{@isRequired}} @isOptional={{@isOptional}} ...attributes as |F|>
+<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)}}
@@ -6,7 +13,11 @@
     {{yield
       (hash
         Radio::Field=(component
-          "hds/form/radio/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+          "hds/form/radio/field"
+          contextualClass="hds-form-group__control-field"
+          isRequired=@isRequired
+          name=@name
+          extraAriaDescribedBy=F.ariaDescribedBy
         )
       )
     }}

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

@@ -3,6 +3,7 @@
   @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 }}

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

@@ -3,6 +3,7 @@
   @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 }}

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

@@ -3,6 +3,7 @@
   @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 }}

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

@@ -2,6 +2,7 @@
   @layout="flag"
   @contextualClass={{@contextualClass}}
   @extraAriaDescribedBy={{@extraAriaDescribedBy}}
+  @id={{@id}}
   as |F|
 >
   {{! Notice: the order of the elements is not relevant here, because is controlled at "Hds::Form::Field" component level }}

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

@@ -6,7 +6,10 @@
     {{yield
       (hash
         Toggle::Field=(component
-          "hds/form/toggle/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired
+          "hds/form/toggle/field"
+          contextualClass="hds-form-group__control-field"
+          isRequired=@isRequired
+          extraAriaDescribedBy=F.ariaDescribedBy
         )
       )
     }}

package/addon/components/hds/form/utils/setAriaDescribedBy.js

@@ -0,0 +1,10 @@
+export function setAriaDescribedBy(element) {
+  // append @extraAriaDescribedBy arg, if provided
+  if (element.args.extraAriaDescribedBy) {
+    element.descriptors.push(element.args.extraAriaDescribedBy);
+  }
+
+  if (element.descriptors.length) {
+    element.ariaDescribedBy = element.descriptors.join(' ');
+  }
+}

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

@@ -0,0 +1,19 @@
+<div class={{this.classNames}} ...attributes aria-label={{@status}}>
+  <div class="hds-stepper-indicator-step__svg-hexagon">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+      <path
+        d="m3.664 6.264 6.99-4.42a2.5 2.5 0 0 1 2.67-.002l7.01 4.422A2.5 2.5 0 0 1 21.5 8.38v7.242a2.5 2.5 0 0 1-1.166 2.115l-7.01 4.422a2.5 2.5 0 0 1-2.67-.002l-6.99-4.42A2.5 2.5 0 0 1 2.5 15.623V8.377a2.5 2.5 0 0 1 1.164-2.113Z"
+        stroke-width="1"
+      ></path>
+    </svg>
+  </div>
+  <div class="hds-stepper-indicator-step__status">
+    {{#if (eq @status "processing")}}
+      <FlightIcon class="hds-stepper-indicator-step__icon" @name="loading" @size="16" />
+    {{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>
+    {{/if}}
+  </div>
+</div>

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

@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_STATUS = 'incomplete';
+export const STATUSES = ['incomplete', 'progress', 'processing', 'complete'];
+
+export default class HdsStepperIndicatorStepIndexComponent extends Component {
+  /**
+   * @param status
+   * @type {string}
+   * @default "incomplete"
+   */
+
+  get status() {
+    let { status = DEFAULT_STATUS } = this.args;
+
+    assert(
+      `@status for "Hds::Stepper::Step::Indicator" must be one of the following: ${STATUSES.join(
+        ', '
+      )}, received: ${status}`,
+      STATUSES.includes(status)
+    );
+
+    return status;
+  }
+
+  /**
+   * @param isInteractive
+   * @type {boolean}
+   * @default false
+   */
+
+  get isInteractive() {
+    return this.args.isInteractive || false;
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method IndicatorStep#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-stepper-indicator-step'];
+
+    // Based on the @status arg
+    classes.push(`hds-stepper-indicator-step--status-${this.status}`);
+
+    if (this.isInteractive) {
+      classes.push(`hds-stepper-indicator-step--is-interactive`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,3 @@
+<div class={{this.classNames}} ...attributes aria-label={{@status}}>
+  <FlightIcon class="hds-stepper-indicator-task__icon" @name={{this.iconName}} @size="16" />
+</div>

package/addon/components/hds/stepper/task/indicator.js

@@ -0,0 +1,69 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_STATUS = 'incomplete';
+export const STATUSES = ['incomplete', 'progress', 'processing', 'complete'];
+export const MAPPING_STATUS_TO_ICONS = {
+  incomplete: 'circle',
+  progress: 'circle-half',
+  processing: 'loading',
+  complete: 'check-circle',
+};
+
+export default class HdsStepperIndicatorTaskIndexComponent extends Component {
+  /**
+   * @param status
+   * @type {string}
+   * @default "incomplete"
+   */
+
+  get status() {
+    let { status = DEFAULT_STATUS } = this.args;
+
+    assert(
+      `@status for "Hds::Stepper::Task::Indicator" must be one of the following: ${STATUSES.join(
+        ', '
+      )}, received: ${status}`,
+      STATUSES.includes(status)
+    );
+
+    return status;
+  }
+
+  /**
+   * @param isInteractive
+   * @type {boolean}
+   * @default false
+   */
+
+  get isInteractive() {
+    return this.args.isInteractive || false;
+  }
+
+  /**
+   * @param iconName
+   * @type {string}
+   */
+
+  get iconName() {
+    return MAPPING_STATUS_TO_ICONS[this.status];
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method IndicatorTask#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-stepper-indicator-task'];
+
+    // Based on the @status arg
+    classes.push(`hds-stepper-indicator-task--status-${this.status}`);
+
+    if (this.isInteractive) {
+      classes.push(`hds-stepper-indicator-task--is-interactive`);
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,26 @@
+<span class={{this.classNames}} ...attributes>
+  {{#if this.onDismiss}}
+    <button class="hds-tag__dismiss" type="button" aria-label="Dismiss {{this.text}}" {{on "click" this.onDismiss}}>
+      <FlightIcon class="hds-tag__dismiss-icon" @name="x" @size="16" @isInlineBlock={{false}} />
+    </button>
+  {{/if}}
+  {{#if (or @href @route)}}
+    <Hds::Interactive
+      class="hds-tag__link"
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      @isRouteExternal={{@isRouteExternal}}
+      @href={{@href}}
+      @isHrefExternal={{@isHrefExternal}}
+    >
+      {{this.text}}
+    </Hds::Interactive>
+  {{else}}
+    <span class="hds-tag__text">
+      {{this.text}}
+    </span>
+  {{/if}}
+</span>

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

@@ -0,0 +1,76 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_COLOR = 'primary';
+export const COLORS = ['primary', 'secondary'];
+
+export default class HdsTagIndexComponent extends Component {
+  /**
+   * @param onDismiss
+   * @type {function}
+   * @default () => {}
+   */
+  get onDismiss() {
+    let { onDismiss } = this.args;
+
+    if (typeof onDismiss === 'function') {
+      return onDismiss;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the tag. If no text value is defined, an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert('@text for "Hds::Tag" must have a valid value', text !== undefined);
+
+    return text;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of link to be used; acceptable values are `primary` and `secondary`
+   */
+  get color() {
+    if (this.args.href || this.args.route) {
+      let { color = DEFAULT_COLOR } = this.args;
+      assert(
+        `@color for "Hds::Tag" must be one of the following: ${COLORS.join(
+          ', '
+        )}; received: ${color}`,
+        COLORS.includes(color)
+      );
+      return color;
+    } else if (this.args.color) {
+      assert(
+        '@color can only be applied to "Hds::Tag" along with either @href or @route',
+        this.args.href || this.args.route
+      );
+    }
+    return false;
+  }
+
+  /**
+   * 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-tag'];
+
+    // add a class based on the @color argument
+    if (this.color) {
+      classes.push(`hds-tag--color-${this.color}`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/app/components/hds/button-set/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/button-set/index';

package/app/components/hds/stepper/step/indicator.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/stepper/step/indicator';

package/app/components/hds/stepper/task/indicator.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/stepper/task/indicator';

package/app/components/hds/tag/index.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/tag/index';

package/app/styles/@hashicorp/design-system-components.scss

@@ -12,6 +12,7 @@
 @use "../components/badge-count";
 @use "../components/breadcrumb";
 @use "../components/button";
+@use "../components/button-set";
 @use "../components/card";
 @use "../components/disclosure";
 @use "../components/dropdown";
@@ -19,6 +20,8 @@
 @use "../components/icon-tile";
 @use "../components/link/inline";
 @use "../components/link/standalone";
+@use "../components/stepper";
+@use "../components/tag";
 @use "../components/toast";
 // END COMPONENT CSS FILES IMPORTS
 

package/app/styles/components/button-set.scss

@@ -0,0 +1,13 @@
+//
+// BUTTON-SET
+//
+// properties within each class are sorted alphabetically
+//
+
+.hds-button-set {
+    display: flex;
+
+    > * + * {
+        margin-left: 16px;
+    }
+}