@hashicorp/design-system-components 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @hashicorp/design-system-components
 
+## 0.10.0
+
+### Minor Changes
+
+- [#200](https://github.com/hashicorp/design-system/pull/200) [`a8072537`](https://github.com/hashicorp/design-system/commit/a8072537542791398d375cde4a7a85c2955c66da) Thanks [@didoo](https://github.com/didoo)! - Updated Dropdown component:
+
+  - added chevron animation for `toggle` elements
+  - fixed issue with `list-item/interactive` height
+  - added handling of dynamic `width` for the list
+  - exposed an `onClose` event
+  - removed the default icon for `toggle/icon`
+  - removed icon requirement from the `critical` list item
+  - updated the documentation and integration tests
+  - some code refactorings, reorganizations and cleanups
+
+## 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

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/disclosure/index.js

@@ -38,6 +38,10 @@ export default class HdsDisclosureComponent extends Component {
       this.isActive = false;
       // we need to reset this check
       this.isToggleClicked = false;
+      // we call the "onClose" callback if it exists (and is a function)
+      if (this.args.onClose && typeof this.args.onClose === 'function') {
+        this.args.onClose();
+      }
     }
   }
 }

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

@@ -1,25 +1,22 @@
-<Hds::Disclosure class="hds-dropdown">
+<Hds::Disclosure class="hds-dropdown" @onClose={{@onClose}} ...attributes>
   <: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)
+        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'}}"
-    >
+    <ul class={{this.listClassNames}} {{style width=@width}}>
       {{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")
+          CopyItem=(component "hds/dropdown/list-item/copy-item")
+          Description=(component "hds/dropdown/list-item/description")
+          Generic=(component "hds/dropdown/list-item/generic")
+          Interactive=(component "hds/dropdown/list-item/interactive")
+          Separator=(component "hds/dropdown/list-item/separator")
+          Title=(component "hds/dropdown/list-item/title")
         )
       }}
     </ul>

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

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_POSITION = 'right';
+export const POSITIONS = ['right', 'left'];
+
+export default class HdsDropdownIndexComponent extends Component {
+  /**
+   * @param listPosition
+   * @type {string}
+   * @default primary
+   * @description Determines the position of the "list"
+   */
+  get listPosition() {
+    let { listPosition = DEFAULT_POSITION } = this.args;
+
+    assert(
+      `@listPosition for "Hds::Dropdown::Index" must be one of the following: ${POSITIONS.join(
+        ', '
+      )}; received: ${listPosition}`,
+      POSITIONS.includes(listPosition)
+    );
+
+    return listPosition;
+  }
+
+  /**
+   * Get the class names to apply to the "list"
+   * @method DropdownIndex#listClassNames
+   * @return {string} The "class" attribute to apply to the "list" element
+   */
+  get listClassNames() {
+    let classes = ['hds-dropdown-list'];
+
+    // add a class based on the @listPosition argument
+    classes.push(`hds-dropdown-list--position-${this.listPosition}`);
+
+    // add a class based on the @width argument
+    if (this.args.width) {
+      classes.push('hds-dropdown-list--fixed-width');
+    }
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,20 @@
+<li class={{this.classNames}} ...attributes>
+  {{#if @copyItemTitle}}
+    <div
+      class="hds-dropdown-list-item__copy-item-title hds-typography-body-100 hds-font-weight-semibold"
+    >{{@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 hds-typography-code-100">
+      {{this.text}}
+    </div>
+    <FlightIcon
+      @name="{{if this.isSuccess 'clipboard-checked' 'clipboard-copy'}}"
+      class="hds-dropdown-list-item__copy-item-icon"
+    />
+  </button>
+</li>

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

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class HdsDropdownListItemCopyItemComponent extends Component {
+  @tracked isSuccess = this.args.isSuccess ?? false;
+
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::CopyItem" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * 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',
+      'hds-dropdown-list-item--copy-item',
+    ];
+
+    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/list-item/description.hbs

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

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

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsDropdownListItemDescriptionComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::Description" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * 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',
+      'hds-dropdown-list-item--description',
+    ];
+
+    // add classes for the typographic style
+    classes.push('hds-typography-body-100');
+    classes.push('hds-font-weight-regular');
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1,3 @@
+<li class="hds-dropdown-list-item hds-dropdown-list-item--generic" ...attributes>
+  {{yield}}
+</li>

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

@@ -0,0 +1,44 @@
+<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={{@icon}} @isInlineBlock={{false}} />
+        </div>
+      {{/if}}
+      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+        {{this.text}}
+      </div>
+    </LinkTo>
+  {{else if @href}}
+    <a target="_blank" rel="noopener noreferrer" href={{@href}} class="{{if @state (concat 'is-' @state)}}">
+      {{#if @icon}}
+        <div class="hds-dropdown-list-item__interactive-icon">
+          <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+        </div>
+      {{/if}}
+      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+        {{this.text}}
+      </div>
+    </a>
+  {{else}}
+    <button class="{{if @state (concat 'is-' @state)}}" type="button" ...attributes>
+      {{#if @icon}}
+        <div class="hds-dropdown-list-item__interactive-icon">
+          <FlightIcon @name={{@icon}} @isInlineBlock={{false}} />
+        </div>
+      {{/if}}
+      <div class="hds-dropdown-list-item__interactive-text hds-typography-body-200 hds-font-weight-medium">
+        {{this.text}}
+      </div>
+    </button>
+  {{/if}}
+</li>

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

@@ -0,0 +1,59 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_COLOR = 'action';
+export const COLORS = ['action', 'critical'];
+
+export default class HdsDropdownListItemInteractiveComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::Interactive" 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::Interactive" must be one of the following: ${COLORS.join(
+        ', '
+      )}; received: ${color}`,
+      COLORS.includes(color)
+    );
+
+    return color;
+  }
+
+  /**
+   * 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',
+      'hds-dropdown-list-item--interactive',
+    ];
+
+    // add a class based on the @color argument
+    classes.push(`hds-dropdown-list-item--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -0,0 +1 @@
+<li class="hds-dropdown-list-item hds-dropdown-list-item--separator" role="separator" ...attributes></li>

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

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

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

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export default class HdsDropdownListItemTitleComponent extends Component {
+  /**
+   * @param text
+   * @type {string}
+   * @description The text of the item. If no text value is defined an error will be thrown
+   */
+  get text() {
+    let { text } = this.args;
+
+    assert(
+      '@text for "Hds::Dropdown::ListItem::Title" must have a valid value',
+      text !== undefined
+    );
+
+    return text;
+  }
+
+  /**
+   * 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', 'hds-dropdown-list-item--title'];
+
+    // add classes for the typographic style
+    classes.push('hds-typography-body-100');
+    classes.push('hds-font-weight-semibold');
+
+    return classes.join(' ');
+  }
+}

package/addon/components/hds/dropdown/{toggle-button.hbs → toggle/button.hbs}

@@ -13,11 +13,11 @@
 }}
 
 <Hds::Button
+  class={{this.classNames}}
   @text={{this.text}}
-  @icon="chevron-{{if @isOpen 'up' 'down'}}"
+  @icon="chevron-down"
   @iconPosition="trailing"
   @color={{this.color}}
-  class="hds-dropdown-toggle--with-button-component"
-  {{on "click" this.onClick}}
   ...attributes
+  {{on "click" this.onClick}}
 />

package/addon/components/hds/dropdown/{toggle-button.js → toggle/button.js}

@@ -4,6 +4,8 @@ import { assert } from '@ember/debug';
 export const DEFAULT_COLOR = 'primary';
 export const COLORS = ['primary', 'secondary'];
 
+const NOOP = () => {};
+
 export default class HdsDropdownToggleButtonComponent extends Component {
   /**
    * @param text
@@ -14,7 +16,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     let { text } = this.args;
 
     assert(
-      '@text for "Hds::Dropdown::ToggleButton" must have a valid value',
+      '@text for "Hds::Dropdown::Toggle::Button" must have a valid value',
       text !== undefined
     );
 
@@ -31,7 +33,7 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     let { color = DEFAULT_COLOR } = this.args;
 
     assert(
-      `@color for "Hds::Dropdown::ToggleButton" must be one of the following: ${COLORS.join(
+      `@color for "Hds::Dropdown::Toggle::Button" must be one of the following: ${COLORS.join(
         ', '
       )}; received: ${color}`,
       COLORS.includes(color)
@@ -53,7 +55,23 @@ export default class HdsDropdownToggleButtonComponent extends Component {
     if (typeof onClick === 'function') {
       return onClick;
     } else {
-      return () => {};
+      return NOOP;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method ToggleButton#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-dropdown-toggle-button'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-dropdown-toggle-button--is-open');
     }
+
+    return classes.join(' ');
   }
 }

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

@@ -0,0 +1,12 @@
+<button class={{this.classNames}} 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 if @icon}}
+      <FlightIcon @name={{@icon}} @size="24" />
+    {{/if}}
+  </div>
+  {{#if this.hasChevron}}
+    <FlightIcon @name="chevron-down" class="hds-dropdown-toggle-icon__chevron" @isInlineBlock={{false}} />
+  {{/if}}
+</button>

package/addon/components/hds/dropdown/{toggle-icon.js → toggle/icon.js}

@@ -1,7 +1,17 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 
+const NOOP = () => {};
 export default class HdsDropdownToggleIconComponent extends Component {
+  constructor() {
+    super(...arguments);
+    if (!(this.args.icon || this.args.imageSrc)) {
+      assert(
+        '@icon or @imageSrc must be defined for "Hds::Dropdown::Toggle::Icon"'
+      );
+    }
+  }
+
   /**
    * @param text
    * @type {string}
@@ -11,7 +21,7 @@ export default class HdsDropdownToggleIconComponent extends Component {
     let { text } = this.args;
 
     assert(
-      '@text for "Hds::Dropdown::ToggleIcon" must have a valid value',
+      '@text for "Hds::Dropdown::Toggle::Icon" must have a valid value',
       text !== undefined
     );
 
@@ -29,17 +39,6 @@ export default class HdsDropdownToggleIconComponent extends Component {
     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}
@@ -53,7 +52,23 @@ export default class HdsDropdownToggleIconComponent extends Component {
     if (typeof onClick === 'function') {
       return onClick;
     } else {
-      return () => {};
+      return NOOP;
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method ToggleIcon#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-dropdown-toggle-icon'];
+
+    // add a class based on the @isOpen argument
+    if (this.args.isOpen) {
+      classes.push('hds-dropdown-toggle-icon--is-open');
     }
+
+    return classes.join(' ');
   }
 }

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

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

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

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

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

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

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

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

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

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

package/app/components/hds/dropdown/{toggle-icon.js → list-item/title.js}

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

package/app/components/hds/dropdown/{toggle-button.js → toggle/button.js}

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

package/app/components/hds/dropdown/{list-item.js → toggle/icon.js}

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