Skip to content

Commit

Permalink
merged component code
Browse files Browse the repository at this point in the history
  • Loading branch information
@zamoore
zamoore committed Aug 22, 2024
1 parent 831787d commit 334767f
Show file tree
Hide file tree
Showing 4 changed files with 216 additions and 47 deletions.
12 changes: 10 additions & 2 deletions packages/components/src/components/hds/dropdown/list-item/interactive.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@
<FlightIcon @name="loading" @isInlineBlock={{false}} />
</div>
<Hds::Text::Body @tag="div" @size="100" @weight="regular" class="hds-dropdown-list-item__interactive-text">
{{this.text}}
{{#if (has-block)}}
{{yield (hash Badge=(component "hds/badge" size="small"))}}
{{else}}
{{this.text}}
{{/if}}
</Hds::Text::Body>
</div>
{{else}}
Expand All @@ -30,7 +34,11 @@
</span>
{{/if}}
<Hds::Text::Body class="hds-dropdown-list-item__interactive-text" @tag="span" @size="200" @weight="medium">
{{this.text}}
{{#if (has-block)}}
{{yield (hash Badge=(component "hds/badge" size="small"))}}
{{else}}
{{this.text}}
{{/if}}
</Hds::Text::Body>
{{#if @trailingIcon}}
<span class="hds-dropdown-list-item__interactive-icon hds-dropdown-list-item__interactive-icon--trailing">
Expand Down
51 changes: 34 additions & 17 deletions packages/components/src/components/hds/dropdown/list-item/interactive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
*/

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { assert, deprecate } from '@ember/debug';

import { HdsDropdownListItemInteractiveColorValues } from './types.ts';

import type { FlightIconSignature } from '@hashicorp/ember-flight-icons/components/flight-icon';
import type { HdsInteractiveSignature } from '../../interactive';
import type { HdsDropdownListItemInteractiveColors } from './types.ts';
import type { ComponentLike } from '@glint/template';
import type { HdsBadgeSignature } from '../../badge/index.ts';

export const DEFAULT_COLOR = HdsDropdownListItemInteractiveColorValues.Action;
export const COLORS: string[] = Object.values(
Expand All @@ -25,15 +27,41 @@ export interface HdsDropdownListItemInteractiveSignature {
text: string;
trailingIcon?: FlightIconSignature['Args']['name'];
};
Blocks: {
default?: [
{
Badge?: ComponentLike<HdsBadgeSignature>;
},
];
};
Element: HTMLDivElement | HdsInteractiveSignature['Element'];
}

export default class HdsDropdownListItemInteractiveComponent extends Component<HdsDropdownListItemInteractiveSignature> {
/**
* @param text
* @type {string}
* @description The text of the item. If no text value is defined an error will be thrown
*/
constructor(
owner: unknown,
args: HdsDropdownListItemInteractiveSignature['Args']
) {
super(owner, args);

if (args.text !== undefined) {
deprecate(
'The `@text` argument for "Hds::Dropdown::ListItem::Interactive" has been deprecated. Please put text in the yielded block.',
false,
{
id: 'hds.dropdown.list-item.interactive',
until: '5.0.0',
url: '',
for: '@hashicorp/design-system-components',
since: {
available: '4.10.0',
enabled: '5.0.0',
},
}
);
}
}

get text(): string {
const { text } = this.args;

Expand All @@ -45,12 +73,6 @@ export default class HdsDropdownListItemInteractiveComponent extends Component<H
return text;
}

/**
* @param color
* @type {string}
* @default primary
* @description Determines the color of the item (when item is set to interactive)
*/
get color(): HdsDropdownListItemInteractiveColors {
const { color = DEFAULT_COLOR } = this.args;

Expand All @@ -64,11 +86,6 @@ export default class HdsDropdownListItemInteractiveComponent extends Component<H
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(): string {
const classes = [
'hds-dropdown-list-item',
Expand Down
160 changes: 133 additions & 27 deletions showcase/app/templates/components/dropdown.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,25 @@
<div class="shw-component-dropdown-display-sample">
<Hds::Dropdown @listPosition="bottom-left" as |D|>
<D.ToggleButton @color="secondary" @text="Menu" />
<D.Interactive @href="#" @text="Create" />
<D.Interactive @href="#" @text="Edit" />
<D.Interactive @href="#">
Create
</D.Interactive>
<D.Interactive @href="#">
Edit
</D.Interactive>
</Hds::Dropdown>
</div>
</SF.Item>
<SF.Item @label="Inline">
<div class="shw-component-dropdown-display-sample">
<Hds::Dropdown @listPosition="bottom-left" @isInline={{true}} as |D|>
<D.ToggleButton @color="secondary" @text="Menu" />
<D.Interactive @href="#" @text="Create" />
<D.Interactive @href="#" @text="Edit" />
<D.Interactive @href="#">
Create
</D.Interactive>
<D.Interactive @href="#">
Edit
</D.Interactive>
</Hds::Dropdown>
</div>
</SF.Item>
Expand Down Expand Up @@ -422,7 +430,9 @@
<Shw::Label>Default ⇒ <code>&lt;button&gt;</code></Shw::Label>
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @text="Lorem ipsum dolor" />
<Hds::Dropdown::ListItem::Interactive>
Lorem ipsum dolor
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -433,7 +443,9 @@
<code>&lt;a&gt;</code></Shw::Label>
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @href="/" @text="Lorem ipsum dolor" />
<Hds::Dropdown::ListItem::Interactive @href="/">
Lorem ipsum dolor
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -446,7 +458,9 @@
<code>&lt;a&gt;</code></Shw::Label>
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @route="components.dropdown" @text="Lorem ipsum dolor" />
<Hds::Dropdown::ListItem::Interactive @route="components.dropdown">
Lorem ipsum dolor
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -458,32 +472,94 @@
<SF.Item @label="No icon (default)">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @text="Basic" />
<Hds::Dropdown::ListItem::Interactive>
Basic
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Leading icon">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @icon="settings" @text="Settings" />
<Hds::Dropdown::ListItem::Interactive @icon="settings">
Settings
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Trailing icon">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link" @text="Documentation" />
<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link">
Documentation
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Leading + Trailing icons">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive
@icon="terraform-color"
@trailingIcon="external-link"
@text="Terraform"
/>
<Hds::Dropdown::ListItem::Interactive @icon="terraform-color" @trailingIcon="external-link">
Terraform
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
</Shw::Flex>

<Shw::Text::H4>Badge</Shw::Text::H4>

<Shw::Flex as |SF|>
<SF.Item @label="No icon (default)">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive as |I|>
With badge
<I.Badge @text="Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Leading icon">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @icon="settings" as |I|>
With leading icon
<I.Badge @text="Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Trailing icon">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @trailingIcon="external-link" as |I|>
With trailing icon
<I.Badge @text="Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Leading + Trailing icon">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @icon="settings" @trailingIcon="external-link" as |I|>
With leading + trailing icons
<I.Badge @text="Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
</Shw::Flex>

<Shw::Flex as |SF|>
<SF.Item @label="With long content that might push the badge down">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @icon="settings" @trailingIcon="external-link" as |I|>
Lorem ipsum dolor sit amet, consectetur adipisici tempor incidunt ut labore et dolore
<I.Badge @text="Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -495,14 +571,18 @@
<SF.Item @label="Action (default)">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @icon="settings" @text="Lorem ipsum dolor" @color="action" />
<Hds::Dropdown::ListItem::Interactive @icon="settings" @color="action">
Lorem ipsum dolor
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
<SF.Item @label="Critical">
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
<Hds::Dropdown::ListItem::Interactive @icon="trash" @text="Lorem ipsum dolor" @color="critical" />
<Hds::Dropdown::ListItem::Interactive @icon="trash" @color="critical">
Lorem ipsum dolor
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -518,10 +598,18 @@
<div class="hds-dropdown__content">
<ul class="hds-dropdown__list">
{{#each @model.ITEM_STATES as |state|}}
<Hds::Dropdown::ListItem::Interactive @text={{state}} @color={{color}} mock-state-value={{state}} />
<Hds::Dropdown::ListItem::Interactive @color={{color}} mock-state-value={{state}}>
{{state}}
</Hds::Dropdown::ListItem::Interactive>
{{/each}}
<Hds::Dropdown::ListItem::Separator />
<Hds::Dropdown::ListItem::Interactive @text="loading" @color={{color}} @isLoading={{true}} />
<Hds::Dropdown::ListItem::Interactive @color={{color}} @isLoading={{true}}>
Loading
</Hds::Dropdown::ListItem::Interactive>
<Hds::Dropdown::ListItem::Interactive @color={{color}} @isLoading={{true}} as |I|>
Loading
<I.Badge @text="With Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -531,18 +619,30 @@
{{#each @model.ITEM_STATES as |state|}}
<Hds::Dropdown::ListItem::Interactive
@icon={{if (eq color "critical") "trash" "settings"}}
@text="{{state}} with icon"
@color={{color}}
mock-state-value={{state}}
/>
>
{{state}}
with icon
</Hds::Dropdown::ListItem::Interactive>
{{/each}}
<Hds::Dropdown::ListItem::Separator />
<Hds::Dropdown::ListItem::Interactive
@icon={{if (eq color "critical") "trash" "settings"}}
@text="loading with icon"
@color={{color}}
@isLoading={{true}}
/>
>
loading with icon
</Hds::Dropdown::ListItem::Interactive>
<Hds::Dropdown::ListItem::Interactive
@icon={{if (eq color "critical") "trash" "settings"}}
@color={{color}}
@isLoading={{true}}
as |I|
>
Loading
<I.Badge @text="With Badge" />
</Hds::Dropdown::ListItem::Interactive>
</ul>
</div>
</SF.Item>
Expand All @@ -552,10 +652,12 @@
{{#each @model.ITEM_STATES as |state|}}
<Hds::Dropdown::ListItem::Interactive
@icon={{if (eq color "critical") "trash" "settings"}}
@text="{{state}} with a longer text string that may wrap since max-width is defined on the container"
@color={{color}}
mock-state-value={{state}}
/>
>
{{state}}
with a longer text string that may wrap since max-width is defined on the container
</Hds::Dropdown::ListItem::Interactive>
{{/each}}
</ul>
</div>
Expand Down Expand Up @@ -1428,8 +1530,12 @@
<div class="shw-component-dropdown-fixed-height-container">
<Hds::Dropdown @listPosition="bottom-left" @width="200px" as |D|>
<D.ToggleButton @color="secondary" @text="Menu" />
<D.Interactive @href="#" @text="Lorem ipsum dolor sit amet" />
<D.Interactive @href="#" @text="Consectetur adipisicing elit" />
<D.Interactive @href="#">
Lorem ipsum dolor sit amet
</D.Interactive>
<D.Interactive @href="#">
Consectetur adipisicing elit
</D.Interactive>
</Hds::Dropdown>
</div>
</SG.Item>
Expand Down
Loading

0 comments on commit 334767f

Please sign in to comment.