@hashicorp/design-system-components 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @hashicorp/design-system-components
 
+## 1.3.0
+
+### Minor Changes
+
+- [#548](https://github.com/hashicorp/design-system/pull/548) [`5d1e2cb4`](https://github.com/hashicorp/design-system/commit/5d1e2cb4f953bfbe55ae1fa8a675903712a66a1c) Thanks [@KristinLBradley](https://github.com/KristinLBradley)! - Add new Tabs component
+
+### Patch Changes
+
+- [#618](https://github.com/hashicorp/design-system/pull/618) [`11d39410`](https://github.com/hashicorp/design-system/commit/11d39410c40725ff34a291e17eac3f8f8321c659) Thanks [@alex-ju](https://github.com/alex-ju)! - Update `ember` to `4.7.0`
+
+* [#660](https://github.com/hashicorp/design-system/pull/660) [`4d0826a6`](https://github.com/hashicorp/design-system/commit/4d0826a6df220031b36f4918c5c5365012672c27) Thanks [@alex-ju](https://github.com/alex-ju)! - Update the `Hds::Button` style when rendered as a link
+
+- [#638](https://github.com/hashicorp/design-system/pull/638) [`90182235`](https://github.com/hashicorp/design-system/commit/901822353453e98c914c8d57e523d64b32a23f75) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - explicitly add ember-style-modifiers as a dependency
+
+* [#636](https://github.com/hashicorp/design-system/pull/636) [`27a283a5`](https://github.com/hashicorp/design-system/commit/27a283a52c2828b32c282401f91df9bd929f9dda) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - Add copyright notice to license file
+
+* Updated dependencies [[`a079992f`](https://github.com/hashicorp/design-system/commit/a079992fbbed11812fcf4cdd4409a00fa2d246f1), [`11d39410`](https://github.com/hashicorp/design-system/commit/11d39410c40725ff34a291e17eac3f8f8321c659), [`27a283a5`](https://github.com/hashicorp/design-system/commit/27a283a52c2828b32c282401f91df9bd929f9dda), [`ecbe26df`](https://github.com/hashicorp/design-system/commit/ecbe26df6bdbaf7b4f00c70d016eead0da9168f0)]:
+  - @hashicorp/design-system-tokens@1.2.0
+  - @hashicorp/ember-flight-icons@3.0.1
+
+## 1.2.0
+
+### Minor Changes
+
+- [#576](https://github.com/hashicorp/design-system/pull/576) [`ab821911`](https://github.com/hashicorp/design-system/commit/ab821911e8d7f99b2b70e41e06f3fe8f681f9c8f) Thanks [@alex-ju](https://github.com/alex-ju)! - Add `RadioCard` component
+
+### Patch Changes
+
+- [#586](https://github.com/hashicorp/design-system/pull/586) [`55ec4246`](https://github.com/hashicorp/design-system/commit/55ec424615505733159ac420284c47758f0667a3) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - make ember-truth-helpers a dependency
+
+- Updated dependencies [[`55f38cb3`](https://github.com/hashicorp/design-system/commit/55f38cb3a30a6edf8854e53ce3642270fe00efdc), [`258c06d9`](https://github.com/hashicorp/design-system/commit/258c06d952d41696bb8c5b4bab19eb46e4612cdc)]:
+  - @hashicorp/ember-flight-icons@3.0.0
+  - @hashicorp/design-system-tokens@1.1.0
+
 ## 1.1.0
 
 ### Minor Changes

package/HOW-TO-TEST-A-COMPONENT-IN-CLOUD-UI.md

@@ -0,0 +1,54 @@
+# How to test a component in Cloud UI
+
+To test a new component (or a component that has been modified) using your local environment as source for the `@hashicorp/design-system-components` package, you have to follow a few steps.
+
+## Prepare the Cloud UI project
+
+For simplicity, you will need three CLI/terminal windows/tabs opened.
+
+In in the first terminal window go the folder containing your local version of the https://github.com/hashicorp/cloud-ui/ codebase:
+
+- go to the root of the project
+  - eg. `cd ~/path-to/your-local/hashicorp/cloud-ui`
+- run `rm -fr node_modules/` to start from a blank slate
+- run `yarn` to make sure all the packages are installed
+
+## Replace the installed `@hashicorp/design-system-components` package in Cloud UI with the local one
+
+In the second terminal window:
+
+- run `cd ~/path-to/your-local/hashicorp/cloud-ui/node_modules/@hashicorp` to go in the folder containing the `@hashicorp` packages
+- run `ls -la` to check that the folder `design-system-components` is present
+- run `rm -fr design-system-components` to remove (recursively) the folder with the published version of the `@hashicorp/design-system-components` package
+
+Now you have to create a symlink between the folder containing your local code for the `design-system-components` and the folder you have just removed:
+
+In the third terminal window:
+
+- go in the folder containing the https://github.com/hashicorp/design-system codebase
+  - eg. `cd ~/path-to/your-local/hashicorp/design-system/packages/components/`
+- run `pwd` and copy the full path to this folder
+  - eg. `/Users/mynamesurname/src/hashicorp/design-system/packages/components`
+
+Go back to the second terminal window:
+
+- run `pwd` and make sure you're still in the `node_modules/@hashicorp` folder of the Cloud UI repo
+- run `ln -s [full-path-to-your-local-components-folder] design-system-components` to create a symbolic link [**IMPORTANT**: you need to set `design-system-components` and not just `components` as target folder name, because that's the name expected by `yarn` (same as the folder you deleted one moment ago)]
+  - eg. `ln -s /Users/mynamesurname/src/hashicorp/design-system/packages/components design-system-components`
+
+**IMPORTANT**: if you have a new version of the design tokens package that needs to be included as well for your component to work, you will need to do the same process to symlink the local folder of the **compiled** design tokens with the one expected in the Cloud UI `node_modules` folder
+
+- eg. `rm -fr design-system-tokens` + `ln -s /Users/mynamesurname/src/hashicorp/design-system/packages/tokens design-system-tokens`
+
+In the first terminal window (you should be be in the Cloud UI root):
+- run `yarn start` to launch the compilation of the Cloud UI project and start the local webserver
+- visit the URL that appears in the command line at the end of the build (typically http://localhost:4200/ but you can specify a different port using the command `yarn start --port NNNN`)
+
+Everything should work and you should be able to do whatever you need to do in the Cloud UI codebase using your local HDS components (eg testing a new component, or checking the impact of a change in an existing one).
+
+**Don't forget**: once you've finished, it is better to reset the state of the Cloud UI project, to make sure that if you're doing some other tests not involving HDS components, you're using the actual code that a user will see in production:
+
+- go to the `node_modules/@hashicorp` folder of the Cloud UI repo
+- run `rm design-system-components` (no need for the `-fr` option, it's a symlink file not a folder)
+- go to the root of the Cloud UI project
+- run `yarn` to reinstall all the missing packages (including `@hashicorp/design-system-components` from NPM)

package/LICENSE.md

@@ -1,3 +1,5 @@
+Copyright (c) 2021 HashiCorp, Inc
+
 Mozilla Public License Version 2.0
 ==================================
 

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

@@ -0,0 +1 @@
+<span class="hds-form-radio-card__description hds-typography-body-100" ...attributes>{{yield}}</span>

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

@@ -0,0 +1,26 @@
+<Hds::Form::Fieldset
+  class="hds-form-group--radio-cards"
+  @layout="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

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

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

@@ -0,0 +1,90 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+import { setAriaDescribedBy } from '../utils/setAriaDescribedBy';
+import { schedule } from '@ember/runloop';
+
+export const DEFAULT_CONTROL_POSITION = 'bottom';
+export const DEFAULT_ALIGNMENT = 'left';
+export const CONTROL_POSITIONS = ['bottom', 'left'];
+export const ALIGNMENTS = ['left', 'center'];
+
+export default class HdsFormRadioCardIndexComponent extends Component {
+  @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
+  @tracked descriptors = [];
+
+  @action
+  setAriaDescribedBy() {
+    // we schedule this afterRender to capture all descriptors registered onInsert
+    schedule('afterRender', () => {
+      setAriaDescribedBy(this);
+    });
+  }
+
+  /**
+   * Sets the position of the control
+   * Accepted values: buttom, left
+   *
+   * @param type
+   * @type {string}
+   * @default 'bottom'
+   */
+  get controlPosition() {
+    let { controlPosition = DEFAULT_CONTROL_POSITION } = this.args;
+
+    assert(
+      `@controlPosition for "Hds::Form::RadioCard" must be one of the following: ${CONTROL_POSITIONS.join(
+        ', '
+      )}; received: ${controlPosition}`,
+      CONTROL_POSITIONS.includes(controlPosition)
+    );
+
+    return controlPosition;
+  }
+
+  /**
+   * Sets the alignment of the content
+   * Accepted values: left, center
+   *
+   * @param alignnment
+   * @type {string}
+   * @default 'left'
+   */
+  get alignment() {
+    let { alignment = DEFAULT_ALIGNMENT } = this.args;
+
+    assert(
+      `@alignment for "Hds::Form::RadioCard" must be one of the following: ${ALIGNMENTS.join(
+        ', '
+      )}; received: ${alignment}`,
+      ALIGNMENTS.includes(alignment)
+    );
+
+    return alignment;
+  }
+
+  /**
+   * 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-card'];
+
+    if (this.args.checked) {
+      classes.push('hds-form-radio-card--checked');
+    }
+    if (this.args.disabled) {
+      classes.push('hds-form-radio-card--disabled');
+    }
+
+    // add a class based on the @controlPosition argument
+    classes.push(`hds-form-radio-card--control-${this.controlPosition}`);
+
+    // add a class based on the @alignment argument
+    classes.push(`hds-form-radio-card--align-${this.alignment}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1 @@
+<span class="hds-form-radio-card__label hds-typography-display-300 hds-font-weight-bold" ...attributes>{{yield}}</span>

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

@@ -0,0 +1,33 @@
+{{! template-lint-disable no-invalid-role }}
+<div class="hds-tabs" {{did-insert this.didInsert}} ...attributes>
+  <div class="hds-tabs__tablist-wrapper">
+    <ul class="hds-tabs__tablist" role="tablist">
+      {{yield
+        (hash
+          Tab=(component
+            "hds/tabs/tab"
+            didInsertNode=this.didInsertTab
+            tabIds=this.tabIds
+            panelIds=this.panelIds
+            selectedTabIndex=this.selectedTabIndex
+            onClick=this.onClick
+            onKeyUp=this.onKeyUp
+          )
+        )
+      }}
+      <li class="hds-tabs__tab-indicator" role="presentation"></li>
+    </ul>
+  </div>
+
+  {{yield
+    (hash
+      Panel=(component
+        "hds/tabs/panel"
+        didInsertNode=this.didInsertPanel
+        tabIds=this.tabIds
+        panelIds=this.panelIds
+        selectedTabIndex=this.selectedTabIndex
+      )
+    )
+  }}
+</div>

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

@@ -0,0 +1,107 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { assert } from '@ember/debug';
+
+export default class HdsTabsIndexComponent extends Component {
+  @tracked tabNodes = [];
+  @tracked tabIds = [];
+  @tracked panelNodes = [];
+  @tracked panelIds = [];
+  @tracked selectedTabIndex;
+
+  @action
+  didInsert() {
+    // default starting tab index
+    let initialTabIndex = 0;
+    let selectedCount = 0;
+
+    this.tabNodes.forEach((tabElement, index) => {
+      if (tabElement.hasAttribute('data-is-selected')) {
+        initialTabIndex = index;
+        selectedCount++;
+      }
+    });
+    this.selectedTabIndex = initialTabIndex;
+    this.setTabIndicator(initialTabIndex);
+
+    assert('Only one tab may use isSelected argument', selectedCount <= 1);
+
+    assert(
+      'The number of Tabs must be equal to the number of Panels',
+      this.tabNodes.length === this.panelNodes.length
+    );
+  }
+
+  @action
+  didInsertTab(element) {
+    this.tabNodes = [...this.tabNodes, element];
+    this.tabIds = [...this.tabIds, element.id];
+  }
+
+  @action
+  didInsertPanel(panelId, element) {
+    this.panelNodes = [...this.panelNodes, element];
+    this.panelIds = [...this.panelIds, panelId];
+  }
+
+  @action
+  onClick(tabIndex, event) {
+    this.selectedTabIndex = tabIndex;
+    this.setTabIndicator(tabIndex);
+
+    // Scroll Tab into view if it's out of view
+    this.tabNodes[tabIndex].parentNode.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'nearest',
+    });
+
+    // invoke the callback function if it's provided as argument
+    if (typeof this.args.onClickTab === 'function') {
+      this.args.onClickTab(event);
+    }
+  }
+
+  @action
+  onKeyUp(tabIndex, e) {
+    const leftArrow = 37;
+    const rightArrow = 39;
+    const enterKey = 13;
+    const spaceKey = 32;
+
+    if (e.keyCode === rightArrow) {
+      const nextTabIndex = (tabIndex + 1) % this.tabIds.length;
+      this.focusTab(nextTabIndex, e);
+    } else if (e.keyCode === leftArrow) {
+      const prevTabIndex =
+        (tabIndex + this.tabIds.length - 1) % this.tabIds.length;
+      this.focusTab(prevTabIndex, e);
+    } else if (e.keyCode === enterKey || e.keyCode === spaceKey) {
+      this.selectedTabIndex = tabIndex;
+    }
+  }
+
+  // Focus tab for keyboard & mouse navigation:
+  focusTab(tabIndex, e) {
+    e.preventDefault();
+    this.tabNodes[tabIndex].focus();
+  }
+
+  setSelectedPanelFocus(tabIndex, e) {
+    e.preventDefault();
+    this.panelNodes[tabIndex].focus();
+  }
+
+  setTabIndicator(tabIndex) {
+    const tabElem = this.tabNodes[tabIndex];
+    const tabsParentElem = tabElem.closest('.hds-tabs');
+
+    const tabLeftPos = tabElem.parentNode.offsetLeft;
+    const tabWidth = tabElem.parentNode.offsetWidth;
+
+    // Set CSS custom properties for indicator
+    tabsParentElem.style.setProperty('--indicator-left-pos', tabLeftPos + 'px');
+    tabsParentElem.style.setProperty('--indicator-width', tabWidth + 'px');
+  }
+}

package/addon/components/hds/tabs/panel.hbs

@@ -0,0 +1,11 @@
+<section
+  class="hds-tabs__panel"
+  ...attributes
+  role="tabpanel"
+  aria-labelledby={{this.tabId}}
+  id={{this.panelId}}
+  hidden={{(not this.isSelected)}}
+  {{did-insert this.didInsertNode}}
+>
+  {{yield}}
+</section>

package/addon/components/hds/tabs/panel.js

@@ -0,0 +1,40 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+
+export default class HdsTabsIndexComponent extends Component {
+  /**
+   * Generates a unique ID for the Panel
+   *
+   * @param panelId
+   */
+  panelId = 'panel-' + guidFor(this);
+
+  @cached
+  get nodeIndex() {
+    return this.args.panelIds
+      ? this.args.panelIds.indexOf(this.panelId)
+      : undefined;
+  }
+
+  get tabId() {
+    return this.nodeIndex !== undefined
+      ? this.args.tabIds[this.nodeIndex]
+      : undefined;
+  }
+
+  get isSelected() {
+    return this.nodeIndex === this.args.selectedTabIndex;
+  }
+
+  @action
+  didInsertNode(element) {
+    let { didInsertNode } = this.args;
+
+    if (typeof didInsertNode === 'function') {
+      this.elementId = element.id;
+      didInsertNode(this.elementId, ...arguments);
+    }
+  }
+}

package/addon/components/hds/tabs/tab.hbs

@@ -0,0 +1,25 @@
+{{! template-lint-disable require-context-role no-invalid-role }}
+<li class={{this.classNames}} ...attributes role="presentation">
+  {{#if @icon}}
+    <FlightIcon @name={{@icon}} class="hds-tabs__tab-icon" />
+  {{/if}}
+
+  <button
+    class="hds-tabs__tab-button hds-typography-body-200 hds-font-weight-medium"
+    role="tab"
+    type="button"
+    id={{this.tabId}}
+    aria-selected={{this.isSelected}}
+    tabindex={{unless this.isSelected "-1"}}
+    data-is-selected={{this.isInitialTab}}
+    {{did-insert this.didInsertNode}}
+    {{on "click" this.onClick}}
+    {{on "keyup" this.onKeyUp}}
+  >
+    {{yield}}
+  </button>
+
+  {{#if @count}}
+    <Hds::BadgeCount @text={{@count}} @size="small" class="hds-tabs__tab-count" />
+  {{/if}}
+</li>

package/addon/components/hds/tabs/tab.js

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { action } from '@ember/object';
+
+export default class HdsTabsIndexComponent extends Component {
+  /**
+   * Generates a unique ID for the Tab
+   *
+   * @param tabId
+   */
+  tabId = 'tab-' + guidFor(this);
+
+  @cached
+  get nodeIndex() {
+    return this.args.tabIds ? this.args.tabIds.indexOf(this.tabId) : undefined;
+  }
+
+  get panelId() {
+    return this.nodeIndex !== undefined
+      ? this.args.panelIds[this.nodeIndex]
+      : undefined;
+  }
+
+  /**
+   * @param isSelected
+   * @type {boolean}
+   * @default false (1st tab is selected by default)
+   * @description Determines if the tab is the selected tab
+   */
+  get isSelected() {
+    return (
+      this.nodeIndex !== undefined &&
+      this.nodeIndex === this.args.selectedTabIndex
+    );
+  }
+
+  get isInitialTab() {
+    let { isSelected } = this.args;
+    return isSelected;
+  }
+
+  @action
+  didInsertNode() {
+    let { didInsertNode } = this.args;
+
+    if (typeof didInsertNode === 'function') {
+      didInsertNode(...arguments);
+    }
+  }
+
+  @action
+  onClick() {
+    let { onClick } = this.args;
+
+    if (typeof onClick === 'function') {
+      onClick(this.nodeIndex, ...arguments);
+    } else {
+      return false;
+    }
+  }
+
+  @action
+  onKeyUp() {
+    let { onKeyUp } = this.args;
+
+    if (typeof onKeyUp === 'function') {
+      onKeyUp(this.nodeIndex, ...arguments);
+    } else {
+      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-tabs__tab'];
+
+    if (this.isSelected) {
+      classes.push(`hds-tabs__tab--is-selected`);
+    }
+
+    return classes.join(' ');
+  }
+}

package/app/components/hds/form/radio-card/description.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/radio-card/description';

package/app/components/hds/form/radio-card/group.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/radio-card/group';

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

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

package/app/components/hds/form/radio-card/label.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/form/radio-card/label';

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

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

package/app/components/hds/tabs/panel.js

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

package/app/components/hds/tabs/tab.js

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

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

@@ -20,9 +20,9 @@
 @use "../components/empty-state";
 @use "../components/form"; // multiple components
 @use "../components/icon-tile";
-@use "../components/link/inline";
-@use "../components/link/standalone";
+@use "../components/link"; // multiple components
 @use "../components/stepper";
+@use "../components/tabs";
 @use "../components/tag";
 @use "../components/toast";
 // END COMPONENT CSS FILES IMPORTS

package/app/styles/components/alert.scss

@@ -1,8 +1,5 @@
 //
-// ALERT
-//
-// properties within each class are sorted alphabetically
-//
+// ALERT COMPONENT
 //
 
 @use "../mixins/focus-ring" as *;

package/app/styles/components/avatar.scss

@@ -1,7 +1,5 @@
 //
-// AVATAR
-//
-// properties within each class are sorted alphabetically
+// AVATAR COMPONENT
 //
 
 .hds-avatar {

package/app/styles/components/badge-count.scss

@@ -1,7 +1,5 @@
 //
-// BADGE-COUNT
-//
-// properties within each class are sorted alphabetically
+// BADGE-COUNT COMPONENT
 //
 
 @use "sass:math";

package/app/styles/components/badge.scss

@@ -1,8 +1,5 @@
 //
-// BADGE
-//
-// properties within each class are sorted alphabetically
-//
+// BADGE COMPONENT
 //
 
 $hds-badge-types: ( "flat","inverted","outlined" );

package/app/styles/components/breadcrumb.scss

@@ -1,10 +1,8 @@
 //
-// BREADCRUMB
+// BREADCRUMB COMPONENT
 //
-// properties within each class are sorted alphabetically
 // notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
-//
 
 @use "../mixins/focus-ring" as *;
 

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

@@ -1,7 +1,5 @@
 //
-// BUTTON-SET
-//
-// properties within each class are sorted alphabetically
+// BUTTON-SET COMPONENT
 //
 
 .hds-button-set {