@hashicorp/design-system-components
Version:
Helios Design System Components
104 lines (101 loc) • 4.58 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { eq } from 'ember-truth-helpers';
import { HdsButtonSizeValues, HdsButtonColorValues, HdsButtonIconPositionValues } from './types.js';
import HdsInteractive from '../interactive/index.js';
import HdsIcon from '../icon/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
/**
* Copyright IBM Corp. 2021, 2025
* SPDX-License-Identifier: MPL-2.0
*/
const SIZES = Object.values(HdsButtonSizeValues);
const COLORS = Object.values(HdsButtonColorValues);
const ICON_POSITIONS = Object.values(HdsButtonIconPositionValues);
const DEFAULT_SIZE = HdsButtonSizeValues.Medium;
const DEFAULT_COLOR = HdsButtonColorValues.Primary;
const DEFAULT_ICON_POSITION = HdsButtonIconPositionValues.Leading;
class HdsButton extends Component {
get text() {
// TEST2
const {
text
} = this.args;
assert('@text for "Hds::Button" must have a valid value', text !== undefined);
return text;
}
get size() {
const {
size = DEFAULT_SIZE
} = this.args;
assert(` for "Hds::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(` for "Hds::Button" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
return color;
}
get icon() {
assert(`when the "Hds::Button" is "tertiary" an is required`, !(this.color === 'tertiary' && !this.args.icon));
return this.args.icon ?? undefined;
}
get isIconOnly() {
if (this.icon) {
return this.args.isIconOnly ?? false;
}
return false;
}
get iconPosition() {
const {
iconPosition = DEFAULT_ICON_POSITION
} = this.args;
assert(` for "Hds::Button" must be one of the following: ${ICON_POSITIONS.join(', ')}; received: ${iconPosition}`, ICON_POSITIONS.includes(iconPosition));
return iconPosition;
}
get iconSize() {
if (this.args.size === 'large') {
return '24';
} else {
return '16';
}
}
get isFullWidth() {
return this.args.isFullWidth ?? false;
}
get classNames() {
const classes = ['hds-button'];
// add a class based on the @color argument
classes.push(`hds-button--color-${this.color}`);
// add a class based on the @isFullWidth argument
if (this.isFullWidth) {
classes.push('hds-button--width-full');
}
// add a class based on isIconOnly argument
if (this.isIconOnly) {
classes.push('hds-button--is-icon-only');
}
// add a class based on the @isInline argument
if (this.args.isInline) {
classes.push('hds-button--is-inline');
}
// add a class based on the @size argument
classes.push(`hds-button--size-${this.size}`);
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<HdsInteractive class={{this.classNames}} @current-when={{@current-when}} @models={{@models}} @model={{@model}} @query={{@query}} @replace={{@replace}} @route={{@route}} @isRouteExternal={{@isRouteExternal}} @href={{@href}} @isHrefExternal={{@isHrefExternal}} ...attributes aria-label={{if this.isIconOnly this.text null}}>\n {{#if this.isIconOnly}}\n {{#if this.icon}}\n <span class=\"hds-button__icon\">\n <HdsIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\n </span>\n {{/if}}\n {{else}}\n {{#if this.icon}}\n {{#if (eq this.iconPosition \"leading\")}}\n <span class=\"hds-button__icon\">\n <HdsIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\n </span>\n <span class=\"hds-button__text\">\n {{this.text}}\n </span>\n {{else}}\n <span class=\"hds-button__text\">\n {{this.text}}\n </span>\n <span class=\"hds-button__icon\">\n <HdsIcon @name={{this.icon}} @size={{this.iconSize}} @stretched={{true}} />\n </span>\n {{/if}}\n {{else}}\n <span class=\"hds-button__text\">\n {{this.text}}\n </span>\n {{/if}}\n {{/if}}\n</HdsInteractive>", {
strictMode: true,
scope: () => ({
HdsInteractive,
HdsIcon,
eq
})
}), this);
}
}
export { COLORS, DEFAULT_COLOR, DEFAULT_ICON_POSITION, DEFAULT_SIZE, ICON_POSITIONS, SIZES, HdsButton as default };
//# sourceMappingURL=index.js.map