@hashicorp/design-system-components 0.12.15 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @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

package/NEW-COMPONENT-CHECKLIST.md

@@ -79,6 +79,7 @@ The engineering checklist has six parts: creating the feature branch, component
 - [ ] 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.

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 }}

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

@@ -13,7 +13,11 @@
     {{yield
       (hash
         Checkbox::Field=(component
-          "hds/form/checkbox/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired name=@name
+          "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/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 }}

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

@@ -13,7 +13,11 @@
     {{yield
       (hash
         Radio::Field=(component
-          "hds/form/radio/field" contextualClass="hds-form-group__control-field" isRequired=@isRequired name=@name
+          "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;
+    }
+}

package/app/styles/components/form/select.scss

@@ -67,3 +67,34 @@
     }
   }
 }
+
+// MULTIPLE/SIZE
+
+.hds-form-select {
+  &[multiple],
+  &[size]{
+    background: none;
+
+    option {
+      border-radius: 3px;
+      margin: 2px auto;
+
+      &:hover {
+        color: var(--token-color-foreground-action);
+      }
+      &:disabled {
+        color: var(--token-color-foreground-disabled);
+      }
+      &:checked {
+        color: var(--token-color-foreground-high-contrast);
+        background: var(--token-color-palette-blue-200);
+      }
+    }
+
+    optgroup {
+      color: var(--token-color-foreground-strong);
+      font-weight: var(--token-typography-font-weight-semibold);
+      font-style: normal; // reset Firefox default
+    }
+  }
+}

package/app/styles/components/stepper/index.scss

@@ -0,0 +1,2 @@
+@use './step-indicator.scss';
+@use './task-indicator.scss';

package/app/styles/components/stepper/step-indicator.scss

@@ -0,0 +1,180 @@
+//
+// STEPPER > INDICATOR > STEP
+//
+// properties within each class are sorted alphabetically
+//
+
+$hds-stepper-indicator-step-statuses: ( "incomplete", "progress", "processing", "complete" );
+$hds-stepper-indicator-step-size: 24px;
+
+// Base stepper indicator styling
+.hds-stepper-indicator-step {
+  height: $hds-stepper-indicator-step-size;
+  position: relative;
+  width: $hds-stepper-indicator-step-size;
+}
+
+.hds-stepper-indicator-step__svg-hexagon {
+  filter: drop-shadow(0 1px 1px rgba(101, 106, 118, 0.05));
+  height: 100%;
+  width: 100%;
+  path {
+    fill: --status-fill-color;
+    stroke: --status-stroke-color;
+  }
+}
+
+.hds-stepper-indicator-step__status {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.hds-stepper-indicator-step__icon {
+  color: --status-text-color;
+  width: 12px;
+  height: 12px;
+}
+
+.hds-stepper-indicator-step__text {
+  color: --status-text-color;
+  font-family: var(--token-typography-font-stack-text);
+  font-weight: var(--token-typography-font-weight-medium);
+  font-size: 0.8125rem;
+  overflow: hidden;
+  text-align: center;
+  user-select: none;
+  white-space: nowrap;
+  width: 20px;
+}
+
+// STATUS
+
+// Non-interactive (default)
+
+// Non-interactive props that correspond with status
+$non-interactive-props: (
+  "incomplete": (
+    "text-color": var(--token-color-foreground-strong),
+    "fill-color": var(--token-color-surface-faint),
+    "stroke-color": var(--token-color-foreground-strong),
+  ),
+  "progress": (
+    "text-color": var(--token-color-foreground-high-contrast),
+    "fill-color": var(--token-color-foreground-strong),
+    "stroke-color": var(--token-color-foreground-strong),
+  ),
+  "processing": (
+    "text-color": var(--token-color-foreground-high-contrast),
+    "fill-color": var(--token-color-foreground-strong),
+    "stroke-color": var(--token-color-foreground-strong),
+  ),
+  "complete": (
+    "text-color": var(--token-color-foreground-high-contrast),
+    "fill-color": var(--token-color-foreground-strong),
+    "stroke-color": var(--token-color-foreground-strong),
+  )
+);
+
+@each $status in $hds-stepper-indicator-step-statuses {
+  // For each status of the non-interactive variant, set the text color, svg fill, and svg stroke colors based on $non-interactive-props
+  .hds-stepper-indicator-step--status-#{$status} {
+    .hds-stepper-indicator-step__status {
+      color: map-get($non-interactive-props, $status, "text-color");
+    };
+    .hds-stepper-indicator-step__svg-hexagon path {
+      fill: map-get($non-interactive-props, $status, "fill-color");
+      stroke: map-get($non-interactive-props, $status, "stroke-color");
+    }
+  }
+}
+
+// Interactive
+
+// Determine states/status and corresponding styles
+$status-props: (
+  "incomplete": (
+    "text-color-default": var(--token-color-foreground-primary),
+    "fill-color-default": var(--token-color-surface-interactive),
+    "stroke-color-default": var(--token-color-border-strong),
+    "fill-color-hover": var(--token-color-surface-interactive-hover),
+    "fill-color-active": var(--token-color-surface-interactive-active),
+  ),
+  "progress": (
+    "text-color-default": var(--token-color-foreground-high-contrast),
+    "fill-color-default": var(--token-color-palette-blue-200),
+    "stroke-color-default": var(--token-color-palette-blue-300),
+    "fill-color-hover": var(--token-color-palette-blue-300),
+    "stroke-color-hover": var(--token-color-palette-blue-400),
+    "fill-color-active": var(--token-color-palette-blue-400),
+    "stroke-color-active": var(--token-color-palette-blue-400),
+  ),
+  "processing": (
+    "text-color-default": var(--token-color-foreground-high-contrast),
+    "fill-color-default": var(--token-color-palette-blue-200),
+    "stroke-color-default": var(--token-color-palette-blue-300),
+    "fill-color-hover": var(--token-color-palette-blue-300),
+    "stroke-color-hover": var(--token-color-palette-blue-400),
+    "fill-color-active": var(--token-color-palette-blue-400),
+    "stroke-color-active": var(--token-color-palette-blue-400),
+  ),
+  "complete": (
+    "text-color-default": var(--token-color-palette-blue-200),
+    "fill-color-default": var(--token-color-palette-blue-50),
+    "stroke-color-default": var(--token-color-palette-blue-300),
+    "text-color-hover": var(--token-color-palette-blue-300),
+    "fill-color-hover": var(--token-color-palette-blue-100),
+    "stroke-color-hover": var(--token-color-palette-blue-400),
+    "text-color-active": var(--token-color-palette-blue-400),
+    "fill-color-active": var(--token-color-palette-blue-100),
+    "stroke-color-active": var(--token-color-palette-blue-400),
+  )
+);
+
+.hds-stepper-indicator-step--is-interactive {
+  cursor: pointer;
+  
+  @each $status in $hds-stepper-indicator-step-statuses {    
+    // For each status set the text, svg fill, and svg stroke color based on $status-props
+    &.hds-stepper-indicator-step--status-#{$status} {
+      .hds-stepper-indicator-step__status {
+        color: map-get($status-props, $status, "text-color-default");
+      }
+      .hds-stepper-indicator-step__svg-hexagon path {
+        fill: map-get($status-props, $status, "fill-color-default");
+        stroke: map-get($status-props, $status, "stroke-color-default");
+      }
+      
+      &:hover,
+      &.mock-hover {
+        .hds-stepper-indicator-step__status {
+          color: map-get($status-props, $status, "text-color-hover");
+        }
+        .hds-stepper-indicator-step__svg-hexagon {
+          path {
+            fill: map-get($status-props, $status, "fill-color-hover");
+            stroke: map-get($status-props, $status, "stroke-color-hover");
+          };
+        }
+      }
+      
+      &:active,
+      &.mock-active {
+        .hds-stepper-indicator-step__status {
+          color: map-get($status-props, $status, "text-color-active");
+        }
+        .hds-stepper-indicator-step__svg-hexagon {
+          path {
+            fill: map-get($status-props, $status, "fill-color-active");
+            stroke: map-get($status-props, $status, "stroke-color-active");
+          };
+        }
+      }
+    }
+  }
+}

package/app/styles/components/stepper/task-indicator.scss

@@ -0,0 +1,70 @@
+//
+// STEPPER > INDICATOR > TASK
+//
+// properties within each class are sorted alphabetically
+//
+
+$hds-stepper-indicator-task-statuses: ( "incomplete", "progress", "processing", "complete" );
+$hds-stepper-indicator-task-size: 16px;
+
+// Determine states and corresponding styles
+$status-props: (
+    "incomplete": (
+        "color-default": var(--token-color-palette-neutral-300),
+        "color-hover": var(--token-color-palette-blue-300),
+        "color-active": var(--token-color-palette-blue-400),
+    ),
+    "progress": (
+        "color-default": var(--token-color-palette-blue-200),
+        "color-hover": var(--token-color-palette-blue-300),
+        "color-active": var(--token-color-palette-blue-400),
+    ),
+    "processing": (
+        "color-default": var(--token-color-palette-blue-200),
+        "color-hover": var(--token-color-palette-blue-300),
+        "color-active": var(--token-color-palette-blue-400),
+    ),
+    "complete": (
+        "color-default": var(--token-color-palette-green-200),
+        "color-hover": var(--token-color-palette-green-300),
+        "color-active": var(--token-color-palette-green-400),
+    )
+);
+
+// Base styling for indicator::task
+.hds-stepper-indicator-task {
+    align-items: center;
+    color: var(--token-color-foreground-strong);
+    display: flex;
+    height: $hds-stepper-indicator-task-size;
+    justify-content: center;
+    position: relative;
+    width: $hds-stepper-indicator-task-size;
+}
+
+.hds-stepper-indicator-task__icon {
+    height: 12px;
+    width: 12px;
+}
+
+.hds-stepper-indicator-task--is-interactive {
+    cursor: pointer;
+
+    @each $status in $hds-stepper-indicator-task-statuses {
+        // For each status set the icon color based on the $status-props
+        &.hds-stepper-indicator-task--status-#{$status} {
+            color: map-get($status-props, $status, "color-default");
+            &:hover, 
+            &.mock-hover { 
+                color: map-get($status-props, $status, "color-hover");
+            };
+            &:active,
+            &.mock-active {
+                color: map-get($status-props, $status, "color-active");
+            };
+        }
+    }
+}
+
+
+

package/app/styles/components/tag.scss

@@ -0,0 +1,103 @@
+//
+// TAG COMPONENT
+//
+// properties within each class are sorted alphabetically
+//
+//
+
+@use "../mixins/focus-ring" as *;
+
+// we set a higher value than the line-height (~13px) to accommodate cases where the text wraps
+$hds-tag-border-radius: 50px;
+
+.hds-tag {
+  align-items: stretch;
+  background-color: var(--token-color-surface-interactive);
+  border: 1px solid var(--token-color-border-strong);
+  border-radius: $hds-tag-border-radius;
+  color: var(--token-color-foreground-primary);
+  display: inline-flex;
+  font-family: var(--token-typography-font-stack-text);
+  font-size: 0.8125rem; // 13px
+  font-weight: var(--token-typography-font-weight-medium);
+  line-height: 1rem; // 16px
+  vertical-align: middle;
+}
+
+.hds-tag__dismiss {
+  flex: 0 0 auto;
+  border-radius: inherit;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border: none; // reset default button border
+  margin: 0; // reset default button margin
+  padding: 6px 2px 6px 8px;
+}
+
+.hds-tag__dismiss-icon {
+  color: var(--token-color-foreground-primary);
+  height: 12px;
+  width: 12px;
+}
+
+.hds-tag__text,
+.hds-tag__link {
+  border-radius: inherit;
+  flex: 1 0 0;
+  padding: 3px 10px 5px 10px;
+}
+
+.hds-tag__dismiss ~ .hds-tag__text,
+.hds-tag__dismiss ~ .hds-tag__link {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: 3px 8px 5px 6px;
+}
+
+// INTERACTIVE ELEMENTS
+
+.hds-tag__dismiss,
+.hds-tag__link {
+  background-color: var(--token-color-surface-interactive);
+  cursor: pointer;
+
+  &:hover,
+  &.mock-hover {
+    background-color: var(--token-color-surface-interactive-hover);
+  }
+
+  &:active,
+  &.mock-active{
+    background-color: var(--token-color-surface-interactive-active);
+  }
+
+  &:focus,
+  &.mock-focus {
+    @include hds-focus-ring-basic();
+    z-index: 1; // ensures focus is not obscured by adjacent elements
+  }
+}
+
+// COLORS (FOR LINK)
+
+.hds-tag--color-primary {
+  .hds-tag__link {
+    color: var(--token-color-foreground-action);
+
+    &:hover,
+    &.mock-hover {
+      color: var(--token-color-foreground-action-hover);
+    }
+
+    &:active,
+    &.mock-active{
+      color: var(--token-color-foreground-action-active);
+    }
+  }
+}
+
+.hds-tag--color-secondary {
+  .hds-tag__link {
+    color: var(--token-color-foreground-strong);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.12.15",
+  "version": "1.0.0",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -34,7 +34,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^0.8.1",
+    "@hashicorp/design-system-tokens": "^1.0.0",
     "@hashicorp/ember-flight-icons": "^2.0.10",
     "ember-auto-import": "^2.4.1",
     "ember-cli-babel": "^7.26.11",

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

@@ -1,21 +0,0 @@
-export function getAriaDescribedBy(element) {
-  let ariaDescribedBy = [];
-
-  // append descriptor's IDs, if provided
-  if (element.descriptors) {
-    element.descriptors.forEach((descriptor) =>
-      ariaDescribedBy.push(descriptor)
-    );
-  }
-
-  // append @extraAriaDescribedBy arg, if provided
-  if (element.args.extraAriaDescribedBy) {
-    ariaDescribedBy.push(element.args.extraAriaDescribedBy);
-  }
-
-  if (ariaDescribedBy.length) {
-    return ariaDescribedBy.join(' ');
-  } else {
-    return null;
-  }
-}