@hashicorp/design-system-components 0.9.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @hashicorp/design-system-components
 
+## 0.11.0
+
+### Minor Changes
+
+- [#245](https://github.com/hashicorp/design-system/pull/245) [`c6de1018`](https://github.com/hashicorp/design-system/commit/c6de101880ec1c21971e3775e1a21b6cb9e69757) Thanks [@didoo](https://github.com/didoo)! - - Added `Alert` component
+  - Added `Toast` component
+
+### Patch Changes
+
+- [#259](https://github.com/hashicorp/design-system/pull/259) [`478b3069`](https://github.com/hashicorp/design-system/commit/478b3069e800cf2ccefba9b5475c72b024e25d16) Thanks [@didoo](https://github.com/didoo)! - - removed autofocus on first item for `Disclosure` component (and as a result also for `Breadcrumb` and `Dropdown` components)
+  - updated focus state treatment for `Dropdown` component
+
+* [#225](https://github.com/hashicorp/design-system/pull/225) [`f1f07179`](https://github.com/hashicorp/design-system/commit/f1f0717952b3e6b41676135cf00e77a6e55579ec) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - update to ember-keyboard@8.1.0 in packages/components
+
+- [#265](https://github.com/hashicorp/design-system/pull/265) [`79bc3e99`](https://github.com/hashicorp/design-system/commit/79bc3e99cd5cc6cb60fc82286d5726c0d0ffbd82) Thanks [@Dhaulagiri](https://github.com/Dhaulagiri)! - npx ember-cli-update@4.3.0 dependency updates
+
+* [#253](https://github.com/hashicorp/design-system/pull/253) [`21786983`](https://github.com/hashicorp/design-system/commit/21786983d4ebbb3f38a72d4d105504169bfeda78) Thanks [@MelSumner](https://github.com/MelSumner)! - bugfix for icon size in copy-item component
+
+## 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

package/NEW-COMPONENT-CHECKLIST.md

@@ -5,34 +5,97 @@ This is the quest issue/engineering checklist for the COMPONENT_NAME Component.
 ## Pre-Flight Checklist
 Update this list and these links as appropriate.
 
-- [Component Requirement Document (CRD)](url_here): This file should exist before any code is written.
-- [FIGMA Design](url_here): Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
-- [Design System Website](https://design-system-website.vercel.app/?path=/story/example-introduction--page) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+- [Component Audit](https://www.figma.com/file/h3LtloARmbYVwh7z6XWHVb/Component-Audits-FY23?node-id=0%3A1): This audit should be completed by ambassadors before any work gets started.
+- [Component Requirement Document (CRD)](https://docs.google.com/document/d/1kGcdfnb_z5tVUUvkSJGQPOssNd1yl2SVyd7bqk1KXII/): This file should exist before any design explorations or code is written.
+- ["System of Systems" Storybook](https://unofficial-design-system-search.vercel.app) (storybook of storybooks): use for reference, to consider existing features that we might need to replicate in the component.
+
+
+## Design Checklist
+The design checklist has 5 parts:
+1. creating the branch
+2. design explorations and iterations
+3. documentation
+4. release
+5. testing
+
+The design process is largely cyclical, so some of these steps may need to be repeated until approval.
+
+### Component Creation
+- [ ] [create a branch](https://help.figma.com/hc/en-us/articles/360063144053-Create-branches-and-merge-changes#Create_a_branch) in the [product components ui kit](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components)
+- [ ] add a new page for the component, as needed
+- [ ] copy & paste the [stickersheet template](https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/HDS-Product---Components?node-id=2279%3A26800) found in UI Helpers to the new page
+  - [ ] update the status badge to "In progress"
+  - [ ] change "{DOC TYPE}" to "STICKERSHEET"
+  - [ ] change "{Component name}" to the name of the component
+  - [ ] delete the sunset notice
+- [ ] **design**
+  - [ ] work through design explorations, providing 2-3 visual directions based on existing [foundations](https://www.figma.com/file/oQsMzMMnynfPWpMEt91OpH/HDS-Product---Foundations?node-id=2916%3A4) and patterns, as well as the findings from the audit and requirements from the CRD
+  - [ ] review with appropriate stakeholders (typically HDS designers, engineering partner, ambassadors) and iterate
+  - [ ] review for a11y considerations and iterate, as necessary
+  - [ ] review with design leadership and iterate, as necessary
+  - [ ] once approved, build out the design as a component
+    - ensure the variant and property names align with what was discussed/decided on with your engineering partner
+  - [ ] test the component with HDS designers and iterate, as necessary
+  - [ ] sync with your engineering partner (pseudo handoff)
+    - let them know it's been design approved and discuss any remaining questions (this should be an ongoing process as well)
+- [ ] **documentation**
+  - all documentation should be contained within frames so it can be easily linked to
+  - [ ] stickersheet
+    - make sure the component instances can be easily selected and other layers are locked
+  - [ ] design guidelines
+    - when complete, lock this frame
+  - [ ] figma tips, as necessary
+    - when complete, lock this frame
+  - [ ] migration details, as necessary
+    - when complete, lock this frame
+  - [ ] let your engineering partner know that design guidelines are ready to be added to the scrappy site (they will add it themselves)
+- [ ] **release**
+  - [ ] lock and hide the components leaving only the stickersheets and docs visible, and change the header's badge to Experimental
+  - [ ] add release notes to the changelog
+  - [ ] review with situationally appropriate reviewers to get final approval
+  - [ ] merge the branch
+  - [ ] publish the ui kit
+    - Important: do not communicate this release to consumers yet! (this will be done later in the process)
+- [ ] **testing**
+  - [ ] add a new page to the [playground](https://www.figma.com/file/95YqaJF4TNV72ucXbyC7A0/Playground?node-id=302%3A10) file and prepare a frame for each ambassador to test
+    - provide a variety (basic to complex) of screenshots to recreate based on real world examples from the audit
+  - [ ] test the component with ambassadors
+  - if iterations are needed, work through the process until approved (don't forget to branch!)
+- [ ] **final release**
+  - this comes after ambassadors have tested the component in Figma and no other adjustments are needed
+  - [ ] if changes were required, follow the steps under "release" again
+  - [ ] share about the release in the slack channel [#team-design-systems](https://hashicorp.slack.com/archives/C7KTUHNUS) and let consumers know that the component is available for use in Figma
+
 
 ## Engineering Checklist
 The engineering checklist has six parts: creating the feature branch, component template, component backing class, component style, tests, and documentation.
 
+### Dependency
+- Since we are trying to align the component API naming with the same terms used in the Figma file, it is likely useful to have a fairly stable Figma design before we create a component; it should definitely be finalized before the component ships, however.
+
 ### 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 +105,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 +138,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/README.md

@@ -9,8 +9,8 @@ A package containing the components for the HashiCorp Design System.
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.20 or above
-* Ember CLI v3.20 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
 * Node.js v12 or above
 
 

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

@@ -0,0 +1,35 @@
+<div class={{this.classNames}} role="alert" aria-live="polite" ...attributes>
+  {{#if this.icon}}
+    <div class="hds-alert__icon">
+      <FlightIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} @isInlineBlock={{false}} />
+    </div>
+  {{/if}}
+
+  <div class="hds-alert__content">
+    <div class="hds-alert__text">
+      {{#if @title}}
+        <div class="hds-alert__title">{{@title}}</div>
+      {{/if}}
+      {{#if @description}}
+        <div class="hds-alert__description">{{html-safe @description}}</div>
+      {{/if}}
+    </div>
+
+    <div class="hds-alert__actions">
+      {{yield
+        (hash
+          Button=(component "hds/button" size="small")
+          Link::Standalone=(component "hds/link/standalone" size="small")
+          LinkTo::Standalone=(component "hds/link-to/standalone" size="small")
+        )
+      }}
+    </div>
+    {{yield (hash Generic=(component "hds/yield"))}}
+  </div>
+
+  {{#if this.onDismiss}}
+    <button class="hds-alert__dismiss" type="button" aria-label="Dismiss" {{on "click" this.onDismiss}}>
+      <FlightIcon @name="x" @size="16" @isInlineBlock={{false}} />
+    </button>
+  {{/if}}
+</div>

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

@@ -0,0 +1,128 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const TYPES = ['page', 'inline', 'compact'];
+export const DEFAULT_COLOR = 'neutral';
+export const COLORS = [
+  'neutral',
+  'highlight',
+  'success',
+  'warning',
+  'critical',
+];
+export const MAPPING_COLORS_TO_ICONS = {
+  neutral: 'info',
+  highlight: 'info',
+  success: 'check-circle',
+  warning: 'alert-triangle',
+  critical: 'alert-diamond',
+};
+
+export default class HdsAlertIndexComponent extends Component {
+  constructor() {
+    super(...arguments);
+
+    assert(
+      `@type for "Hds::Alert" must be one of the following: ${TYPES.join(
+        ', '
+      )}; received: ${this.args.type}`,
+      TYPES.includes(this.args.type)
+    );
+  }
+
+  /**
+   * @param color
+   * @type {enum}
+   * @default neutral
+   * @description Determines the color scheme for the alert.
+   */
+  get color() {
+    let { color = DEFAULT_COLOR } = this.args;
+
+    assert(
+      `@color for "Hds::Alert" 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() {
+    let { icon } = this.args;
+
+    // If `icon` isn't passed, use the pre-defined one from `color`
+    if (icon === undefined) {
+      if (this.args.type === 'compact') {
+        // for the "compact" type by default we use filled icons
+        return `${MAPPING_COLORS_TO_ICONS[this.color]}-fill`;
+      } else {
+        // for all the other types by default we use outlined icons
+        return MAPPING_COLORS_TO_ICONS[this.color];
+      }
+      // If `icon` is set explicitly to false, user doesn't want any icon in the alert
+    } else if (icon === false) {
+      assert(
+        `@icon for "Hds::Alert" with @type "compact" is required`,
+        this.args.type !== 'compact'
+      );
+
+      return false;
+    } else {
+      // If a name for `icon` is passed, set FlightIcon to that name
+      return icon;
+    }
+  }
+
+  /**
+   * @param onDismiss
+   * @type {function}
+   * @default () => {}
+   */
+  get onDismiss() {
+    let { onDismiss } = this.args;
+
+    if (typeof onDismiss === 'function') {
+      return onDismiss;
+    } else {
+      return false;
+    }
+  }
+
+  /**
+   * @param iconSize
+   * @type {string}
+   * @description ensures that the correct icon size is used. Automatically calculated.
+   */
+  get iconSize() {
+    if (this.args.type === 'compact') {
+      return '16';
+    } else {
+      return '24';
+    }
+  }
+
+  /**
+   * Get the class names to apply to the component.
+   * @method Alert#classNames
+   * @return {string} The "class" attribute to apply to the component.
+   */
+  get classNames() {
+    let classes = ['hds-alert'];
+
+    // Add a class based on the @type argument
+    classes.push(`hds-alert--type-${this.args.type}`);
+
+    // Add a class based on the @color argument
+    classes.push(`hds-alert--color-${this.color}`);
+
+    return classes.join(' ');
+  }
+}

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

@@ -7,7 +7,7 @@
       class="hds-disclosure__content"
       {{focus-trap
         isActive=this.isActive
-        shouldSelfFocus=false
+        shouldSelfFocus=true
         focusTrapOptions=(hash clickOutsideDeactivates=this.clickOutsideDeactivates onDeactivate=this.onDeactivate)
       }}
     >

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,55 @@
+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 = 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
+  async copyCode() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
+    await navigator.clipboard.writeText(this.args.text);
+    const result = await navigator.clipboard.readText();
+
+    if (result === this.args.text) {
+      this.isSuccess = true;
+      // console.log(`result is ${result}`);
+
+      // make it fade back to the default state
+      setTimeout(() => {
+        this.isSuccess = false;
+      }, 1000);
+    }
+  }
+}

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>