@hashicorp/design-system-components
Version:
Helios Design System Components
102 lines (99 loc) • 4.29 kB
JavaScript
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { guidFor } from '@ember/object/internals';
import { hash } from '@ember/helper';
import { HdsAccordionSizeValues, HdsAccordionForceStateValues, HdsAccordionTypeValues, HdsAccordionItemTitleTagValues } from '../types.js';
import HdsAccordionItemButton from './button.js';
import HdsTextBody from '../../text/body.js';
import HdsDisclosurePrimitive from '../../disclosure-primitive/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(HdsAccordionSizeValues);
const DEFAULT_SIZE = HdsAccordionSizeValues.Medium;
const TYPES = Object.values(HdsAccordionTypeValues);
const DEFAULT_TYPE = HdsAccordionTypeValues.Card;
const TEXT_SIZE_MAP = {
small: 100,
medium: 200,
large: 300
};
class HdsAccordionItem extends Component {
_titleId = 'title-' + guidFor(this);
get ariaLabelledBy() {
if (!this.args.ariaLabel) {
return this._titleId;
}
return undefined;
}
get containsInteractive() {
return this.args.containsInteractive ?? false;
}
get toggleTextSize() {
const size = this.args.size ?? DEFAULT_SIZE;
return TEXT_SIZE_MAP[size];
}
get size() {
const {
size = DEFAULT_SIZE
} = this.args;
assert(` for "Hds::Accordion::Item" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
return size;
}
get isOpen() {
if (this.args.isOpen || this.args.forceState === HdsAccordionForceStateValues.Open) {
return true;
} else {
return false;
}
}
get type() {
const {
type = DEFAULT_TYPE
} = this.args;
assert(` for "Hds::Accordion::Item" must be one of the following: ${TYPES.join(', ')}; received: ${type}`, TYPES.includes(type));
return type;
}
get titleTag() {
return this.args.titleTag ?? HdsAccordionItemTitleTagValues.Div;
}
get classNames() {
const classes = ['hds-accordion-item'];
// add a class based on the @isOpen argument
if (this.args.isOpen) {
classes.push('hds-accordion-item--is-open');
}
// add a class based on the @isStatic argument
if (this.args.isStatic) {
classes.push('hds-accordion-item--is-static');
}
// add a class based on the @size argument
classes.push(`hds-accordion-item--size-${this.size}`);
// add a class based on the @type argument
classes.push(`hds-accordion-item--type-${this.type}`);
if (this.containsInteractive) {
// Entire accordion item including the chevron is interactive:
classes.push('hds-accordion-item--contains-interactive');
} else {
// Only chevron is interactive:
classes.push('hds-accordion-item--does-not-contain-interactive');
}
return classes.join(' ');
}
static {
setComponentTemplate(precompileTemplate("<HdsDisclosurePrimitive class={{this.classNames}} @isOpen={{this.isOpen}} @onClickToggle={{@onClickToggle}} ...attributes>\n <:toggle as |t|>\n <div class=\"hds-accordion-item__toggle\">\n <HdsAccordionItemButton @isOpen={{t.isOpen}} @onClickToggle={{t.onClickToggle}} @contentId={{t.contentId}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{this.ariaLabelledBy}} @size={{this.size}} @parentContainsInteractive={{this.containsInteractive}} />\n\n <HdsTextBody @tag={{this.titleTag}} @size={{this.toggleTextSize}} @weight=\"semibold\" @color=\"strong\" id={{this._titleId}} class=\"hds-accordion-item__toggle-content\">\n {{yield to=\"toggle\"}}\n </HdsTextBody>\n </div>\n </:toggle>\n\n <:content as |c|>\n <HdsTextBody class=\"hds-accordion-item__content\" @tag=\"div\" @size=\"200\" @weight=\"regular\" @color=\"primary\">\n {{yield (hash close=c.close) to=\"content\"}}\n </HdsTextBody>\n </:content>\n</HdsDisclosurePrimitive>", {
strictMode: true,
scope: () => ({
HdsDisclosurePrimitive,
HdsAccordionItemButton,
HdsTextBody,
hash
})
}), this);
}
}
export { DEFAULT_SIZE, DEFAULT_TYPE, SIZES, TYPES, HdsAccordionItem as default };
//# sourceMappingURL=index.js.map