diff --git a/packages/components/addon/components/hds/dropdown/list-item.hbs b/packages/components/addon/components/hds/dropdown/list-item.hbs new file mode 100644 index 0000000000..928a14c297 --- /dev/null +++ b/packages/components/addon/components/hds/dropdown/list-item.hbs @@ -0,0 +1,48 @@ +{{#if (eq this.item "heading")}} +
  • + {{@text}} +
    • + +{{else if (eq this.item "help-text")}} +
  • + {{@text}} +
    • + +{{else if (eq this.item "separator")}} + + +{{else if (eq this.item "copy-item")}} + {{! TODO!! add the copy-item element here }} +
  • + copy item will go here +
    • + +{{else if (eq this.item "link")}} +
  • + {{#if @route}} + {{! // TODO consider approach }} + + {{#if @icon}} +
    + +
    + {{/if}} +
    + {{@text}} +
    +     + {{else}} + + {{#if @icon}} +
    + +
    + {{/if}} +
    + {{@text}} +
    +     + {{/if}} +
    • + +{{/if}} \ No newline at end of file diff --git a/packages/components/addon/components/hds/dropdown/list-item.js b/packages/components/addon/components/hds/dropdown/list-item.js new file mode 100644 index 0000000000..e34ff4cf6a --- /dev/null +++ b/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(' '); + } +} diff --git a/packages/components/addon/components/hds/dropdown/toggle-button.hbs b/packages/components/addon/components/hds/dropdown/toggle-button.hbs index 753b0992a5..677652dfee 100644 --- a/packages/components/addon/components/hds/dropdown/toggle-button.hbs +++ b/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. diff --git a/packages/components/addon/components/hds/dropdown/toggle-more.hbs b/packages/components/addon/components/hds/dropdown/toggle-overflow.hbs similarity index 100% rename from packages/components/addon/components/hds/dropdown/toggle-more.hbs rename to packages/components/addon/components/hds/dropdown/toggle-overflow.hbs diff --git a/packages/components/addon/components/hds/dropdown/toggle-more.js b/packages/components/addon/components/hds/dropdown/toggle-overflow.js similarity index 80% rename from packages/components/addon/components/hds/dropdown/toggle-more.js rename to packages/components/addon/components/hds/dropdown/toggle-overflow.js index fbbb5eacc7..fabb40ac62 100644 --- a/packages/components/addon/components/hds/dropdown/toggle-more.js +++ b/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(' '); } diff --git a/packages/components/addon/components/hds/dropdown/toggle-user.hbs b/packages/components/addon/components/hds/dropdown/toggle-user.hbs index c9baeb0ff7..9a6b74b1fe 100644 --- a/packages/components/addon/components/hds/dropdown/toggle-user.hbs +++ b/packages/components/addon/components/hds/dropdown/toggle-user.hbs @@ -1,11 +1,11 @@