@hashicorp/design-system-components
Version:
Helios Design System Components
75 lines (72 loc) • 2.74 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import HdsIcon from '../icon/index.js';
import { HdsBadgeSizeValues, HdsBadgeTypeValues, HdsBadgeColorValues } from './types.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(HdsBadgeSizeValues);
const TYPES = Object.values(HdsBadgeTypeValues);
const COLORS = Object.values(HdsBadgeColorValues);
const DEFAULT_SIZE = HdsBadgeSizeValues.Medium;
const DEFAULT_TYPE = HdsBadgeTypeValues.Filled;
const DEFAULT_COLOR = HdsBadgeColorValues.Neutral;
class HdsBadge extends Component {
get size() {
const {
size = DEFAULT_SIZE
} = this.args;
assert(`@size for "Hds::Badge" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
return size;
}
get type() {
const {
type = DEFAULT_TYPE
} = this.args;
assert(`@type for "Hds::Badge" must be one of the following: ${TYPES.join(', ')}; received: ${type}`, TYPES.includes(type));
return type;
}
get color() {
const {
color = DEFAULT_COLOR
} = this.args;
assert(`@color for "Hds::Badge" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
return color;
}
get text() {
const {
text
} = this.args;
assert('@text for "Hds::Badge" must have a valid value', text !== undefined);
return text;
}
get isIconOnly() {
if (this.args.icon) {
return this.args.isIconOnly ?? false;
}
return false;
}
get classNames() {
const classes = ['hds-badge'];
// add a class based on the @size argument
classes.push(`hds-badge--size-${this.size}`);
// add a class based on the @type argument
classes.push(`hds-badge--type-${this.type}`);
// add a class based on the @color argument
classes.push(`hds-badge--color-${this.color}`);
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<div class={{this.classNames}} ...attributes>\n {{#if @icon}}\n <div class=\"hds-badge__icon\">\n <HdsIcon @name={{@icon}} @size=\"16\" @stretched={{true}} />\n </div>\n {{/if}}\n {{#if this.isIconOnly}}\n <span class=\"sr-only\">{{this.text}}</span>\n {{else}}\n <div class=\"hds-badge__text\">\n {{this.text}}\n </div>\n {{/if}}\n</div>", {
strictMode: true,
scope: () => ({
HdsIcon
})
}), this);
}
}
export { COLORS, DEFAULT_COLOR, DEFAULT_SIZE, DEFAULT_TYPE, SIZES, TYPES, HdsBadge as default };
//# sourceMappingURL=index.js.map