@hashicorp/design-system-components
Version:
Helios Design System Components
80 lines (77 loc) • 3.57 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { guidFor } from '@ember/object/internals';
import { HdsDropdownToggleButtonSizeValues, HdsDropdownToggleButtonColorValues } from './types.js';
import HdsBadge from '../../badge/index.js';
import HdsBadgeCount from '../../badge-count/index.js';
import HdsIcon from '../../icon/index.js';
import HdsDropdownToggleChevron from './chevron.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const DEFAULT_SIZE = HdsDropdownToggleButtonSizeValues.Medium;
const DEFAULT_COLOR = HdsDropdownToggleButtonColorValues.Primary;
const SIZES = Object.values(HdsDropdownToggleButtonSizeValues);
const COLORS = Object.values(HdsDropdownToggleButtonColorValues);
class HdsDropdownToggleButton extends Component {
_toggleButtonId = 'toggle-button-' + guidFor(this);
get text() {
const {
text
} = this.args;
assert('@text for "Hds::Dropdown::Toggle::Button" must have a valid value', text !== undefined);
return text;
}
get size() {
const {
size = DEFAULT_SIZE
} = this.args;
assert(`@size for "Hds::Dropdown::Toggle::Button" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
return size;
}
get color() {
const {
color = DEFAULT_COLOR
} = this.args;
assert(`@color for "Hds::Dropdown::Toggle::Button" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
return color;
}
get isFullWidth() {
return this.args.isFullWidth ?? false;
}
get badgeType() {
return this.color !== 'primary' ? 'inverted' : 'filled';
}
get classNames() {
const classes = ['hds-dropdown-toggle-button'];
// add a class based on the @size argument
classes.push(`hds-dropdown-toggle-button--size-${this.size}`);
// add a class based on the @color argument
classes.push(`hds-dropdown-toggle-button--color-${this.color}`);
// add a class based on the @isFullWidth argument
if (this.isFullWidth) {
classes.push('hds-dropdown-toggle-button--width-full');
}
// add a class based on the @isOpen argument
if (this.args.isOpen) {
classes.push('hds-dropdown-toggle-button--is-open');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<button class={{this.classNames}} id={{this._toggleButtonId}} ...attributes type=\"button\" aria-expanded={{if @isOpen \"true\" \"false\"}} {{@setupPrimitiveToggle}}>\n {{#if @icon}}\n <div class=\"hds-dropdown-toggle-button__icon\">\n <HdsIcon @name={{@icon}} @stretched={{true}} />\n </div>\n {{/if}}\n <div class=\"hds-dropdown-toggle-button__text\">\n {{this.text}}\n </div>\n {{#if @count}}\n <HdsBadgeCount @text={{@count}} @size=\"small\" @type={{this.badgeType}} class=\"hds-dropdown-toggle-button__count\" />\n {{/if}}\n {{#if @badge}}\n <HdsBadge @text={{@badge}} @icon={{@badgeIcon}} @size=\"small\" @type={{this.badgeType}} class=\"hds-dropdown-toggle-button__badge\" />\n {{/if}}\n <HdsDropdownToggleChevron />\n</button>", {
strictMode: true,
scope: () => ({
HdsIcon,
HdsBadgeCount,
HdsBadge,
HdsDropdownToggleChevron
})
}), this);
}
}
export { COLORS, DEFAULT_COLOR, DEFAULT_SIZE, SIZES, HdsDropdownToggleButton as default };
//# sourceMappingURL=button.js.map