Dropdown component, list items

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

@@ -0,0 +1,48 @@
+{{#if (eq this.item "heading")}}
+ <li class={{this.classNames}}>
+ {{@text}}
+ </li>
+
+{{else if (eq this.item "help-text")}}
+ <li class={{this.classNames}}>
+ {{@text}}
+ </li>
+
+{{else if (eq this.item "separator")}}
+ <li class={{this.classNames}} role="separator"></li>
+
+{{else if (eq this.item "copy-item")}}
+ {{! TODO!! add the copy-item element here }}
+ <li class={{this.classNames}}>
+ copy item will go here
+ </li>
+
+{{else if (eq this.item "link")}}
+ <li class={{this.classNames}}>
+ {{#if @route}}
+ {{! // TODO consider approach }}
+ <LinkTo @route={{@route}} class="is-{{@state}}">
+ {{#if @icon}}
+ <div class="hds-dropdown-list-item__link-icon">
+ <FlightIcon @name={{@icon}} />
+ </div>
+ {{/if}}
+ <div class="hds-dropdown-list-item__link-text">
+ {{@text}}
+ </div>
+ </LinkTo>
+ {{else}}
+ <a target="_blank" rel="noopener noreferrer" href={{@href}} class="is-{{@state}}">
+ {{#if @icon}}
+ <div class="hds-dropdown-list-item__link-icon">
+ <FlightIcon @name={{@icon}} />
+ </div>
+ {{/if}}
+ <div class="hds-dropdown-list-item__link_text">
+ {{@text}}
+ </div>
+ </a>
+ {{/if}}
+ </li>
+
+{{/if}}

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

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+import { assert } from '@ember/debug';
+
+export const DEFAULT_COLOR = 'action';
+export const DEFAULT_ITEM = 'link';
+export const COLORS = ['action', 'critical'];
+export const ITEMS = ['heading', 'help-text', 'separator', 'copy-item', 'link'];
+
+export default class HdsDropdownListItemComponent 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" must have a valid value',
+ text !== undefined
+ );
+
+ return text;
+ }
+
+ /**
+ * @param color
+ * @type {string}
+ * @default primary
+ * @description Determines the color of the item
+ */
+ 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;
+ }
+
+ /**
+ * TODO if color is critical, it MUST have an icon
+ */
+
+ /**
+ * @param item
+ * @type {string}
+ * @default link
+ * @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;
+ }
+
+ /**
+ * 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 === 'link' && this.color) {
+ classes.push(`hds-dropdown-list-item--color-${this.color}`);
+ }
+
+ return classes.join(' ');
+ }
+}

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

@@ -1,11 +1,7 @@
 {{!
-// ██ ██ █████ ██████ ███ ██ ██ ███ ██ ██████
-// ██ ██ ██ ██ ██ ██ ████ ██ ██ ████ ██ ██
-// ██ █ ██ ███████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ███
-// ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
-// ███ ███ ██ ██ ██ ██ ██ ████ ██ ██ ████ ██████
+// >>>>>>>>>>> WARNING <<<<<<<<<<
 //
-// Notice: in this component we're using directly the `Hds::Button` component
+// 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.

packages/components/addon/components/hds/dropdown/toggle-more.js → packages/components/addon/components/hds/dropdown/toggle-overflow.js

@@ -4,7 +4,7 @@ import { assert } from '@ember/debug';
 export const DEFAULT_SIZE = 'medium';
 export const SIZES = ['medium', 'small'];
 
-export default class HdsDropdownToggleMoreComponent extends Component {
+export default class HdsDropdownToggleOverflowComponent extends Component {
  /**
  * @param text
  * @type {string}
@@ -14,7 +14,7 @@ export default class HdsDropdownToggleMoreComponent extends Component {
  let { text } = this.args;
 
  assert(
- '@text for "Hds::Dropdown::ToggleMore" must have a valid value',
+ '@text for "Hds::Dropdown::ToggleOverflow" must have a valid value',
  text !== undefined
  );
 
@@ -31,7 +31,7 @@ export default class HdsDropdownToggleMoreComponent extends Component {
  let { size = DEFAULT_SIZE } = this.args;
 
  assert(
- `@size for "Hds::Dropdown::ToggleMore" must be one of the following: ${SIZES.join(
+ `@size for "Hds::Dropdown::ToggleOverflow" must be one of the following: ${SIZES.join(
  ', '
  )}; received: ${size}`,
  SIZES.includes(size)
@@ -66,10 +66,10 @@ export default class HdsDropdownToggleMoreComponent extends Component {
  * @return {string} The "class" attribute to apply to the component.
  */
  get classNames() {
- let classes = ['hds-dropdown-toggle', 'hds-dropdown-toggle--more'];
+ let classes = ['hds-dropdown-toggle-overflow'];
 
  // add a class based on the @size argument
- classes.push(`hds-dropdown-toggle--size-${this.size}`);
+ classes.push(`hds-dropdown-toggle-overflow--size-${this.size}`);
 
  return classes.join(' ');
  }

packages/components/addon/components/hds/dropdown/toggle-user.hbs

@@ -1,11 +1,11 @@
 <button
  class={{this.classNames}}
- ...attributes
  aria-label={{@text}}
  type="button"
  disabled={{if this.isDisabled "disabled" null}}
+ ...attributes
 >
- <div class="hds-dropdown-toggle__user">
+ <div class="hds-dropdown-toggle-user__avatar">
  {{#if @avatarUrl}}
  <img src={{@avatarUrl}} alt="" role="presentation" height="32" width="32" />
  {{else}}

packages/components/addon/components/hds/dropdown/toggle-user.js

@@ -34,7 +34,7 @@ export default class HdsDropdownToggleUserComponent extends Component {
  * @return {string} The "class" attribute to apply to the component.
  */
  get classNames() {
- let classes = ['hds-dropdown-toggle', 'hds-dropdown-toggle--user'];
+ let classes = ['hds-dropdown-toggle-user'];
 
  return classes.join(' ');
  }

packages/components/app/components/hds/disclosure/toggle.js → packages/components/app/components/hds/dropdown/list-item.js

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

packages/components/app/components/hds/dropdown/toggle-more.js → packages/components/app/components/hds/dropdown/toggle-overflow.js

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