@hashicorp/design-system-components 0.8.0 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @hashicorp/design-system-components
 
+## 0.9.2
+
+### Patch Changes
+
+- [#209](https://github.com/hashicorp/design-system/pull/209) [`6021d433`](https://github.com/hashicorp/design-system/commit/6021d43352b8e38b268b06cd98ca0c62adb14999) Thanks [@didoo](https://github.com/didoo)! - Re-ordered declarations of CSS states
+
+## 0.9.1
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.5
+
+## 0.9.0
+
+### Minor Changes
+
+- [#66](https://github.com/hashicorp/design-system/pull/66) [`29e2ce55`](https://github.com/hashicorp/design-system/commit/29e2ce55bab74cc02dd511794dfadd2b3ac40a14) Thanks [@MelSumner](https://github.com/MelSumner)! - Adds dropdown component to the design system
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @hashicorp/ember-flight-icons@2.0.4
+
 ## 0.8.0
 
 ### Minor Changes

package/NEW-COMPONENT-CHECKLIST.md

@@ -14,25 +14,27 @@ The engineering checklist has six parts: creating the feature branch, component
 
 ### Component Creation
 
-- [ ] create new branch from main for the component.
+- [ ] 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)
-  - if it's a variation on a component, then `hds/COMPONENT_NAME/VARIATION` instead of `index`
+  - `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.
 - [ ] **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.
   - add `...attributes` unless doing so would be detrimental (e.g., a parent element and child element in the same component that both have ...attributes)
 - [ ] **component class**
   - use getters (vs template conditionals or constructors, if possible)
-  - write API comments in the JS doc way (copy from an existing DS component)
-  - use the same naming as the Figma file for the components API unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in the comment.
-  - ensure that all existing functionality (from a Structure component) is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
-  - check the [design system website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) to see what kind of component functionality is being used across all products
+  - we have chosen to define the value of the `class` attribute (containing the different CSS class names) for the "root" of the element's code in the backing class, UNLESS that component only has one CSS class name.
+  - write API comments in the [JS doc](https://jsdoc.app/) format (look at existing components for examples)
+  - use the same naming as the Figma file for the components API, unless it conflicts with a pre-existing HTML attribute. If that is the case, document the difference in a comment.
+  - if there is an existing Structure component that is similar to the HDS component being created, ensure that all existing functionality is accounted for in some way. If we are not providing existing functionality at all, it should be documented (along with the reason why). If we are providing temporary functionality, explain that it's temporary and why.
   - booleans should start with a verb (is/has/etc)
-  - assertion text should match the content style of the other components.
-  - goal is a terse invocation
+  - assertions should match the content style of the other components, e.g., `'@text for "Hds::Button" must have a valid value'`,
+  - program with intent; think about the invocation for the developer who will use the component. The goal is a terse invocation, but we also want to consider the big picture. Try to get feedback when you can.
 - [ ] **component style**
-  - create `component/COMPONENT_NAME.scss` in `app/styles`
+  - create `component/COMPONENT-NAME.scss` in `app/styles`
   - add `@use` to `app/styles/@hashicorp/design-system-components.scss` (see existing code for precise syntax)
   - use design tokens wherever possible, comment where they are not
   - sizes should be in relative units
@@ -42,12 +44,18 @@ The engineering checklist has six parts: creating the feature branch, component
   - [ ] test defaults
   - [ ] try not to repeat tests (i.e., don't have to test all sizes, all colors, etc.)
   - [ ] test all accessibility attributes
+  - [ ] test assertions
 - [ ] **documentation**
   - create component page `ember generate route components/COMPONENT_NAME --dummy`
   - add link to `templates/index.hbs` page
-  - [ ] API docs
+  - [ ] Definition of component (from CRD) (this should be a paragraph under the component name, and before the first section)
+  - [ ] Component API
   - [ ] Usage
+  - [ ] Design Guidelines
   - [ ] Accessibility
+    - Conformance Rating [(internal document)](https://docs.google.com/document/d/1OjTKpQLB_wuZSVJNLbbguTzMDMYCHKhNdKQz7-Kfqic/edit#bookmark=id.v7r42vfu4pdd)
+    - Known Issues (if any)
+    - Related WCAG (pull from CRD or ask Melanie)
   - [ ] Showcase
 
 ### Component Review
@@ -69,5 +77,6 @@ Pre-review request checks:
   - Edge (once available)
 
 When ready for review:
+
 - [ ] add situationally appropriate reviewers
 - [ ] added instructions for reviewers in your PR, letting them know what kind of review you need

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

@@ -0,0 +1,27 @@
+<Hds::Disclosure class="hds-dropdown">
+  <:toggle as |t|>
+    {{yield
+      (hash
+        ToggleButton=(component "hds/dropdown/toggle-button" isOpen=t.isActive onClick=t.onClickToggle)
+        ToggleIcon=(component "hds/dropdown/toggle-icon" isOpen=t.isActive onClick=t.onClickToggle)
+      )
+    }}
+  </:toggle>
+  <:content>
+    <ul
+      class="hds-dropdown-list
+        {{if (eq @listPosition 'left') 'hds-dropdown-list--position-left' 'hds-dropdown-list--position-right'}}"
+    >
+      {{yield
+        (hash
+          CopyItem=(component "hds/dropdown/list-item" item="copy-item")
+          Description=(component "hds/dropdown/list-item" item="description")
+          Generic=(component "hds/dropdown/list-item" item="generic")
+          Interactive=(component "hds/dropdown/list-item")
+          Separator=(component "hds/dropdown/list-item" item="separator")
+          Title=(component "hds/dropdown/list-item" item="title")
+        )
+      }}
+    </ul>
+  </:content>
+</Hds::Disclosure>

package/addon/components/hds/dropdown/list-item.hbs

@@ -0,0 +1,84 @@
+{{#if (eq this.item "title")}}
+  <li class={{this.classNames}}>
+    {{this.text}}
+  </li>
+
+{{else if (eq this.item "generic")}}
+  <li class={{this.classNames}}>
+    {{yield}}
+  </li>
+
+{{else if (eq this.item "copy-item")}}
+  <li class={{this.classNames}}>
+    {{#if @copyItemTitle}}
+      <div class="hds-dropdown-list-item__copy-item-title">{{@copyItemTitle}}</div>
+    {{/if}}
+    <button
+      type="button"
+      class="{{if @state (concat 'is-' @state)}} {{if this.isSuccess 'is-success'}}"
+      {{on "click" this.copyCode}}
+    >
+      <div class="hds-dropdown-list-item__copy-item-text">
+        {{this.text}}
+      </div>
+      <FlightIcon
+        @name="{{if this.isSuccess 'clipboard-checked' 'clipboard-copy'}}"
+        class="hds-dropdown-list-item__copy-item-icon"
+      />
+    </button>
+  </li>
+
+{{else if (eq this.item "description")}}
+  <li class={{this.classNames}}>
+    {{this.text}}
+  </li>
+
+{{else if (eq this.item "separator")}}
+  <li class={{this.classNames}} role="separator"></li>
+
+{{else if (eq this.item "interactive")}}
+  <li class={{this.classNames}}>
+    {{#if @route}}
+      <LinkTo
+        class="{{if @state (concat 'is-' @state)}}"
+        @current-when={{@current-when}}
+        @models={{hds-link-to-models @model @models}}
+        @query={{hds-link-to-query @query}}
+        @replace={{@replace}}
+        @route={{@route}}
+        ...attributes
+      >
+        {{#if @icon}}
+          <div class="hds-dropdown-list-item__interactive-icon">
+            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
+          </div>
+        {{/if}}
+        <div class="hds-dropdown-list-item__interactive-text">
+          {{this.text}}
+        </div>
+      </LinkTo>
+    {{else if @href}}
+      <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
+        {{#if this.icon}}
+          <div class="hds-dropdown-list-item__interactive-icon">
+            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
+          </div>
+        {{/if}}
+        <div class="hds-dropdown-list-item__interactive-text">
+          {{this.text}}
+        </div>
+      </a>
+    {{else}}
+      <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
+        {{#if this.icon}}
+          <div class="hds-dropdown-list-item__interactive-icon">
+            <FlightIcon @name={{this.icon}} @isInlineBlock={{false}} />
+          </div>
+        {{/if}}
+        <div class="hds-dropdown-list-item__interactive-text">
+          {{this.text}}
+        </div>
+      </button>
+    {{/if}}
+  </li>
+{{/if}}

package/addon/components/hds/dropdown/list-item.js

@@ -0,0 +1,120 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export const DEFAULT_COLOR = 'action';
+export const DEFAULT_ITEM = 'interactive';
+export const COLORS = ['action', 'critical'];
+export const ITEMS = [
+  'copy-item',
+  'description',
+  'generic',
+  'interactive',
+  'separator',
+  'title',
+];
+
+export default class HdsDropdownListItemComponent extends Component {
+  @tracked isSuccess = this.args.isSuccess ?? false;
+
+  /**
+   * @param item
+   * @type {string}
+   * @default interactive
+   * @description Determines the type of item to show
+   */
+  get item() {
+    let { item = DEFAULT_ITEM } = this.args;
+
+    assert(
+      `@item for "Hds::Dropdown::ListItem" must be one of the following: ${ITEMS.join(
+        ', '
+      )}; received: ${item}`,
+      ITEMS.includes(item)
+    );
+
+    return item;
+  }
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown unless it is the generic or separator item type.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of the item (when item is set to interactive)
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Dropdown::ListItem" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param icon
+   * @type {string}
+   * @default null
+   * @description The name of the icon to be used.
+   */
+  get icon() {
+    assert(
+      `when the "Hds::ListItem" @color is "critical" an @icon is required`,
+      !(this.color === 'critical' && !this.args.icon)
+    );
+
+    return this.args.icon ?? null;
+  }
+
+  /**
+   * 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-dropdown-list-item'];
+
+    // add a class based on the @item argument
+    if (this.item) {
+      classes.push(`hds-dropdown-list-item--${this.item}`);
+    }
+
+    // add a class based on the @color argument
+    if (this.item === 'interactive') {
+      classes.push(`hds-dropdown-list-item--color-${this.color}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  @action
+  copyCode() {
+    navigator.clipboard.writeText(this.args.text);
+    // this if statement resolves to [object Promise] so maybe some improvements
+    // could be made here
+    if (navigator.clipboard.readText()) {
+      this.isSuccess = true;
+    }
+  }
+}

package/addon/components/hds/dropdown/toggle-button.hbs

@@ -0,0 +1,23 @@
+{{!
+// >>>>>>>>>>> WARNING <<<<<<<<<<
+//
+// Notice: in this component we're directly using the `Hds::Button` component
+// (and adding a specialized class for the "toggle-button" variant, see below)
+// If you need to change the styling of the `Button` component, remember that this will impact also
+// this component too.
+// If instead you need to change only the styling of the `toggle-button` component, you can do it
+// in the CSS file using the specialized class declared there.
+// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
+// the least worst option we could find to solve the problem of sharing the exact same style of the
+// `Button (primary)` with other components.
+}}
+
+<Hds::Button
+  @text={{this.text}}
+  @icon="chevron-{{if @isOpen 'up' 'down'}}"
+  @iconPosition="trailing"
+  @color={{this.color}}
+  class="hds-dropdown-toggle--with-button-component"
+  {{on "click" this.onClick}}
+  ...attributes
+/>

package/addon/components/hds/dropdown/toggle-button.js

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_COLOR = 'primary';
+export const COLORS = ['primary', 'secondary'];
+
+export default class HdsDropdownToggleButtonComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the button. If no text value is defined an error will be thrown.
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ToggleButton" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * @param color
+   * @type {string}
+   * @default primary
+   * @description Determines the color of button to be used; acceptable values are `primary` and  `secondary`
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Dropdown::ToggleButton" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * @param onClick
+   * @type {function}
+   * @default () => {}
+   */
+  get onClick() {
+    let { onClick } = this.args;
+
+    // notice: this is a guard used in case the toggle is used as standalone element (eg. in the showcase)
+    // in reality it's always used inside the Dropdown main component as yielded component, so the onClick handler is always defined
+    if (typeof onClick === 'function') {
+      return onClick;
+    } else {
+      return () => {};
+    }
+  }
+}

package/addon/components/hds/dropdown/toggle-icon.hbs

@@ -0,0 +1,22 @@
+<button
+  class="hds-dropdown-toggle-icon"
+  aria-label={{this.text}}
+  ...attributes
+  {{on "click" this.onClick}}
+  type="button"
+>
+  <div class="hds-dropdown-toggle-icon__wrapper">
+    {{#if @imageSrc}}
+      <img src={{@imageSrc}} alt="" role="presentation" height="32" width="32" />
+    {{else}}
+      <FlightIcon @name={{this.icon}} @size="24" />
+    {{/if}}
+  </div>
+  {{#if this.hasChevron}}
+    <FlightIcon
+      @name="chevron-{{if @isOpen 'up' 'down'}}"
+      class="hds-dropdown-toggle-icon__chevron"
+      @isInlineBlock={{false}}
+    />
+  {{/if}}
+</button>

package/addon/components/hds/dropdown/toggle-icon.js

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsDropdownToggleIconComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the `aria-label` applied to the toggle
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ToggleIcon" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * Indicates if a dropdown chevron icon should be displayed; should be displayed unless the "more-horizontal" icon is used.
+   *
+   * @param hasChevron
+   * @type {boolean}
+   * @default true
+   */
+  get hasChevron() {
+    return this.args.hasChevron ?? true;
+  }
+
+  /**
+   * Sets the icon name
+   *
+   * @param icon
+   * @type {string}
+   * @default user
+   */
+  get icon() {
+    return this.args.icon ?? 'user';
+  }
+
+  /**
+   * @param onClick
+   * @type {function}
+   * @default () => {}
+   */
+  get onClick() {
+    let { onClick } = this.args;
+
+    // notice: this is a guard used in case the toggle is used as standalone element (eg. in the showcase)
+    // in reality it's always used inside the Dropdown main component as yielded component, so the onClick handler is always defined
+    if (typeof onClick === 'function') {
+      return onClick;
+    } else {
+      return () => {};
+    }
+  }
+}

package/addon/components/hds/link/cta.js

@@ -112,19 +112,6 @@ export default class HdsLinkCtaComponent extends Component {
     return this.args.isFullWidth ?? false;
   }
 
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -147,4 +134,17 @@ export default class HdsLinkCtaComponent extends Component {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(el) {
+    // we need to register the element to compare it with the one that triggered the "key/space" event
+    this.el = el;
+  }
+
+  @action
+  onKeySpace(event) {
+    if (event.target === this.el) {
+      event.target.click();
+    }
+  }
 }

package/addon/components/hds/link-to/cta.js

@@ -127,19 +127,6 @@ export default class HdsLinkToCtaComponent extends Component {
     return route;
   }
 
-  @action
-  didInsert(el) {
-    // we need to register the element to compare it with the one that triggered the "key/space" event
-    this.el = el;
-  }
-
-  @action
-  onKeySpace(event) {
-    if (event.target === this.el) {
-      event.target.click();
-    }
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -162,4 +149,17 @@ export default class HdsLinkToCtaComponent extends Component {
 
     return classes.join(' ');
   }
+
+  @action
+  didInsert(el) {
+    // we need to register the element to compare it with the one that triggered the "key/space" event
+    this.el = el;
+  }
+
+  @action
+  onKeySpace(event) {
+    if (event.target === this.el) {
+      event.target.click();
+    }
+  }
 }

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

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

package/app/components/hds/dropdown/list-item.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/list-item';

package/app/components/hds/dropdown/toggle-button.js

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

package/app/components/hds/dropdown/toggle-icon.js

@@ -0,0 +1 @@
+export { default } from '@hashicorp/design-system-components/components/hds/dropdown/toggle-icon';

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

@@ -11,6 +11,7 @@
 @use "../components/button";
 @use "../components/card";
 @use "../components/disclosure";
+@use "../components/dropdown";
 @use "../components/icon-tile";
 @use "../components/link/cta";
 @use "../components/link/standalone";

package/app/styles/components/breadcrumb.scss

@@ -2,6 +2,7 @@
 // BREADCRUMB
 //
 // properties within each class are sorted alphabetically
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 //
 
@@ -75,9 +76,6 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     // notice: the text decoration is applied directly to the "text" container because of a bug in Safari (see https://github.com/hashicorp/design-system-components/issues/159)
     text-decoration-color: transparent;
 
-    // we apply the focus directly to the element, without using a pseudo-element
-    @include hds-focus-ring-basic();
-
     &:hover,
     &.is-hover {
         color: var(--token-color-palette-neutral-600);
@@ -87,6 +85,9 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
         }
     }
 
+    // we apply the focus directly to the element, without using a pseudo-element
+    @include hds-focus-ring-basic();
+
     &:active,
     &.is-active {
         color: var(--token-color-foreground-secondary);
@@ -153,25 +154,27 @@ $hds-breadcrumb-item-visual-horizontal-padding: 4px;
     padding: 0;
     width: $hds-breadcrumb-item-height;
 
-    // we apply the focus directly to the element, without using a pseudo-element
-    @include hds-focus-ring-basic();
-
     &:hover,
     &.is-hover {
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-faint);
     }
+
+    // we apply the focus directly to the element, without using a pseudo-element
+    @include hds-focus-ring-basic();
+
+    &:focus,
+    &.is-focus {
+        background-color: transparent;
+        border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
+    }
+
     &:active,
     &.is-active {
         background-color: var(--token-color-surface-interactive-active);
         border-color: var(--token-color-border-strong);
         color: var(--token-color-foreground-primary);
     }
-    &:focus,
-    &.is-focus {
-        background-color: transparent;
-        border: none; // important: we need to completely remove the border, of the inner box-shadow of the focus ring will be drawn inside the border
-    }
 }
 
 .hds-breadcrumb__truncation-content {

package/app/styles/components/button.scss

@@ -2,8 +2,7 @@
 // BUTTON COMPONENT
 //
 // properties within each class are sorted alphabetically
-// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
-// see https://github.com/hashicorp/design-system-components/issues/132
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 //
 
@@ -145,6 +144,14 @@ $size-props: (
   box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-high-contrast);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-palette-blue-300);
+    border-color: var(--token-color-palette-blue-400);
+    color: var(--token-color-foreground-high-contrast);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     background-color: var(--token-color-palette-blue-200);
@@ -163,13 +170,7 @@ $size-props: (
       top: -$shift;
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-palette-blue-300);
-    border-color: var(--token-color-palette-blue-400);
-    color: var(--token-color-foreground-high-contrast);
-    cursor: pointer;
-  }
+
   &:active,
   &.is-active {
     background-color: var(--token-color-palette-blue-400);
@@ -188,6 +189,14 @@ $size-props: (
   box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-primary);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-primary);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     background-color: var(--token-color-surface-faint);
@@ -197,13 +206,7 @@ $size-props: (
       border-color: var(--token-color-focus-action-external);
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-border-strong);
-    color: var(--token-color-foreground-primary);
-    cursor: pointer;
-  }
+
   &:active,
   &.is-active {
     background-color: var(--token-color-surface-interactive-active);
@@ -221,6 +224,14 @@ $size-props: (
   border-color: transparent;
   color: var(--token-color-foreground-action);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-surface-primary);
+    border-color: var(--token-color-border-strong);
+    color: var(--token-color-foreground-action-hover);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     border-color: var(--token-color-focus-action-internal);
@@ -229,13 +240,7 @@ $size-props: (
       border-color: var(--token-color-focus-action-external);
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-surface-primary);
-    border-color: var(--token-color-border-strong);
-    color: var(--token-color-foreground-action-hover);
-    cursor: pointer;
-  }
+
   &:active,
   &.is-active {
     background-color: var(--token-color-surface-interactive-active);
@@ -271,6 +276,14 @@ $size-props: (
   box-shadow: var(--token-elevation-low-box-shadow);
   color: var(--token-color-foreground-critical-on-surface);
 
+  &:hover,
+  &.is-hover {
+    background-color: var(--token-color-palette-red-300);
+    border-color: var(--token-color-palette-red-400);
+    color: var(--token-color-foreground-high-contrast);
+    cursor: pointer;
+  }
+
   &:focus,
   &.is-focus {
     background-color: var(--token-color-surface-critical);
@@ -280,13 +293,6 @@ $size-props: (
       border-color: var(--token-color-focus-critical-external);
     }
   }
-  &:hover,
-  &.is-hover {
-    background-color: var(--token-color-palette-red-300);
-    border-color: var(--token-color-palette-red-400);
-    color: var(--token-color-foreground-high-contrast);
-    cursor: pointer;
-  }
 
   &:active,
   &.is-active {

package/app/styles/components/dropdown.scss

@@ -0,0 +1,391 @@
+// >>>>>>>>>> WARNING <<<<<<<<<<<
+//
+// Notice: in this component we're using directly the `Hds::Button` component
+// (and adding a specialized class for the "toggle-button" variant, see below)
+// If you need to change the styling of the `Button` component, remember that this will impact also
+// this component too.
+// If instead you need to change only the styling of the `toggle-button` component, you can do it here using
+// the specialized class declared below.
+// This is NOT a standard approach that we use in the HDS design system implementation, but it's been
+// the least worst option we could find to solve the problem of sharing the exact same style of the
+// `Button (primary)` with other components.
+
+//
+// DROPDOWN 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 *;
+
+// TOGGLE/ICON
+.hds-dropdown-toggle-icon {
+  align-items: center;
+  background-color: transparent;
+  border: 1px solid transparent; // We need this to be transparent for a11y
+  border-radius: 5px;
+  display: flex;
+  height: 36px;
+  justify-content: center;
+  outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+  outline-color: transparent; // We need this to be transparent for a11y
+  padding: 1px;
+  min-width: 36px;
+
+  &:hover,  
+  &.is-hover {
+    background-color: var(--token-color-surface-interactive);
+    border-color: var(--token-color-border-strong);
+    cursor: pointer;
+  }
+
+  // this is the :focus
+  @include hds-focus-ring-with-pseudo-element($top: -1px, $right: -1px, $bottom: -1px, $left: -1px, $radius: 5px);
+
+  &:active,
+  &.is-active {
+    background-color: var(--token-color-surface-interactive-active);
+    border-color: var(--token-color-border-strong);
+  }
+}
+
+.hds-dropdown-toggle-icon__wrapper {
+  align-items: center;
+  border-radius: 3px; // 5px- 1px padding - 1px border
+  display: flex;
+  justify-content: center;
+  height: 32px;
+  padding: 1px;
+  width: 32px;
+
+  img {
+    border-radius: inherit;
+    object-fit: cover; // this will make sure it's correct even if the item isn't square
+  }
+}
+
+.hds-dropdown-toggle-icon__chevron {
+  margin-left: 0.25rem;
+}
+
+// TOGGLE/BUTTON
+.hds-dropdown-toggle--with-button-component {
+  box-shadow: none; // we override this to remove the elevation style
+
+  .hds-button__icon {
+    margin-right: -6px; // we apply a negative margin to counter the padding-right of the button and reduce the visual space between the icon and the right border
+    margin-left: 0.5rem; // this overrides the rule `.hds-button__text + .hds-button__icon`
+  }
+}
+
+
+// LIST
+// UL ELEMENT
+// GOES INSIDE HDS::DISCLOSURE's :content block
+
+.hds-dropdown-list {
+  background-color: var(--token-color-surface-primary);
+  border-radius: 6px;
+  box-shadow: var(--token-surface-high-box-shadow);
+  list-style: none;
+  margin: 0;
+  max-width: 25rem;
+  min-width: 12.5rem;
+  padding: 4px 0;
+  &.hds-dropdown-list--position-right {
+    position: absolute;
+    right: 0;
+    top: calc(100% + 0.25rem);
+    z-index: 2; // https://github.com/hashicorp/design-system/issues/114
+  }
+
+  &.hds-dropdown-list--position-left {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 0.25rem);
+    z-index: 2; // https://github.com/hashicorp/design-system/issues/114
+  }
+}
+
+// LIST > LIST-ITEM
+// HDS::DROPDOWN::LIST-ITEM
+
+.hds-dropdown-list-item--title {
+  color: var(--token-color-foreground-strong);
+  font-family: var(--token-typography-body-100-font-family);
+  font-size: var(--token-typography-body-100-font-size);
+  font-weight: var(--token-typography-font-weight-semibold);
+  line-height: var(--token-typography-body-100-line-height);
+  padding: 10px 16px 4px;
+}
+
+.hds-dropdown-list-item--generic {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.hds-dropdown-list-item--description {
+  color: var(--token-color-foreground-faint);
+  font-family: var(--token-typography-body-100-font-family);
+  font-size: var(--token-typography-body-100-font-size);
+  font-weight: var(--token-typography-font-weight-regular);
+  line-height: var(--token-typography-body-100-line-height);
+  padding: 2px 16px 4px;
+}
+
+.hds-dropdown-list-item--separator {
+  position: relative;
+  height: 4px;
+  width: 100%;
+
+  &::before {
+    position: absolute;
+    right: 6px;
+    left: 6px;
+    bottom: 0;
+    border-bottom: 1px solid var(--token-color-border-primary);
+    content: '';
+  }
+}
+
+.hds-dropdown-list-item__copy-item-title {
+  color: var(--token-color-foreground-faint);
+  font-family: var(--token-typography-body-100-font-family);
+  font-size: var(--token-typography-body-100-font-size); // 13
+  font-weight: var(--token-typography-font-weight-semibold);
+  line-height: var(--token-typography-body-100-line-height); // 18
+  padding: 2px 0 4px;
+}
+
+.hds-dropdown-list-item--copy-item {
+  padding: 10px 16px 12px;
+  width: 100%;
+
+  button { 
+    background-color: transparent;
+    border-radius: 5px;
+    border: 1px solid var(--token-color-border-primary);
+    color: var(--token-color-foreground-primary);  
+    display: flex;
+    font-family: var(--token-typography-font-stack-code);
+    justify-content: space-between;
+    padding: 12px 8px;
+    width: 100%;
+    
+    &:hover,
+    &.is-hover {
+      background-color: var(--token-color-surface-interactive-hover);
+      cursor: pointer;
+    }
+
+    @include hds-focus-ring-basic();
+    
+    &:focus,
+    &.is-focus {
+      //TODO this focus is just way too complex 
+      background-color:  var(--token-color-surface-action);
+      border-color: var(--token-color-focus-action-internal);
+    }
+    
+    &:active, 
+    &.is-active {
+      background-color: var(--token-color-surface-interactive-active);
+    }
+
+    &.is-success {
+      border-color: var(--token-color-border-success);
+      background-color: var(--token-color-surface-success);
+      
+      .hds-dropdown-list-item__copy-item-icon {
+        color: var(--token-color-foreground-success);
+      }
+    } 
+
+    .hds-dropdown-list-item__copy-item-text {
+      font-size: var(--token-typography-code-100-font-size);
+      font-weight: var(--token-typography-font-weight-regular);
+      line-height: var(--token-typography-code-100-line-height);
+      // max-width: 250px; // TODO we should be able to figure out the proportions here
+      overflow: hidden;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .hds-dropdown-list-item__copy-item-icon {
+      color: var(--token-color-foreground-action);
+      margin-left: 0.5rem;
+    }
+  }
+}
+
+.hds-dropdown-list-item--interactive {
+  position: relative;
+  isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
+  min-height: 36px;
+
+  // need to reset a few extra things to make the button visually appear the same as the links
+  // TODO this is 0.125rem taller than the link...
+  button {
+    border: 1px inset transparent; // cause of the extra height
+    background-color: transparent;
+    width: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+  }
+
+  // shared styles for links and buttons
+  a, button {
+    align-items: center;
+    display: flex;
+    outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
+    outline-color: transparent;
+    padding: 8px 10px 8px 16px;
+    text-decoration: none;
+
+    // this is used for the left "hover" indicator
+    &::before {
+      border-radius: 1px;
+      bottom: 6px;
+      content: '';
+      left: 0.25rem;
+      position: absolute;
+      top: 6px;
+      width: 2px;
+      z-index: -1;
+    }
+
+    // Notice: this is used for the active/focus states which have very specific positions
+    // and also has a background color, so we can't use the existing focus-ring mixins
+    &::after {
+      border-radius: 5px;
+      bottom: 0px;
+      content: '';
+      left: 0.625rem;
+      position: absolute;
+      right: 0.25rem;
+      z-index: -1;
+      top: 0;
+    }
+
+    // Notice: to avoid too much duplication we define two local CSS variables
+    // and define their values in the color variants below
+
+    // default focus for browsers that still rely on ":focus"
+    &:focus,
+    &.is-focus {
+      &::after {
+        background-color: var(--current-background-color);
+        box-shadow: var(--current-focus-ring-box-shadow);
+        left: 0.25rem;
+      }
+    }
+    // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
+    &:focus:not(:focus-visible) {
+      &::after {
+        box-shadow: none;
+      }
+    }
+    // set focus for browsers that support ":focus-visible"
+    &:focus-visible {
+      &::after {
+        background-color: var(--current-background-color);
+        box-shadow: var(--current-focus-ring-box-shadow);
+        left: 0.25rem;
+      }
+    }
+    // remove the focus ring on "active + focused" state (by design)
+    &:focus:active,
+    &.is-focus.is-active {
+      &::after {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.hds-dropdown-list-item__interactive-text {
+  font-family: var(--token-typography-body-200-font-family);
+  font-size: var(--token-typography-body-200-font-size);
+  font-weight: var(--token-typography-font-weight-medium);
+  line-height: var(--token-typography-body-200-line-height);
+  text-align: left; // the button element was centering text
+}
+
+.hds-dropdown-list-item__interactive-icon {
+  margin-right: 0.5rem;
+}
+
+.hds-dropdown-list-item--color-action {
+  a, button {
+    color: var(--token-color-foreground-primary);
+
+    // assign the values to the local CSS variables used above
+    &::after {
+      --current-background-color: var(--token-color-surface-action);
+      --current-focus-ring-box-shadow: var(
+        --token-focus-ring-action-box-shadow
+      );
+    }
+
+    &:hover,
+    &.is-hover {
+      color: var(--token-color-foreground-action-hover);
+      &::before {
+        background-color: currentColor;
+      }
+    }
+
+    &:active,
+    &.is-active {
+      color: var(--token-color-foreground-action-active);
+      &::before {
+        background-color: currentColor;
+      }
+      &::after {
+        background-color: var(--token-color-surface-action);
+      }
+    }
+  }
+}
+
+.hds-dropdown-list-item--color-critical {
+  a, button {
+    color: var(--token-color-foreground-critical);
+
+    // assign the values to the local CSS variables used above
+    &::after {
+      --current-background-color: var(--token-color-surface-critical);
+      --current-focus-ring-box-shadow: var(
+        --token-focus-ring-critical-box-shadow
+      );
+    }
+
+    &:hover,
+    &.is-hover {
+      color: var(
+        --token-color-palette-red-300
+      ); // TODO we need to add this token to the design system
+      &::before {
+        background-color: currentColor;
+      }
+    }
+    &:active,
+    &.is-active {
+      color: var(
+        --token-color-palette-red-400
+      ); // TODO we need to add this token to the design system
+      &::before {
+        background-color: currentColor;
+      }
+      &::after {
+        background-color: var(--token-color-surface-critical);
+      }
+    }
+  }
+}

package/app/styles/components/link/standalone.scss

@@ -2,8 +2,7 @@
 // LINK > STANDALONE COMPONENT
 //
 // properties within each class are sorted alphabetically
-// notice: pseudo-classes for the states *must* follow the order link > visited > focus > hover > active
-// see https://github.com/hashicorp/design-system-components/issues/132
+// notice: pseudo-classes for the states *must* follow the order link > visited > hover > focus > active
 //
 //
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "0.8.0",
+  "version": "0.9.2",
   "description": "HashiCorp Design System Components",
   "keywords": [
     "hashicorp",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@hashicorp/design-system-tokens": "^0.8.0",
-    "@hashicorp/ember-flight-icons": "^2.0.1",
+    "@hashicorp/ember-flight-icons": "^2.0.5",
     "ember-auto-import": "^2.2.3",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",