+Zeroheight ↗
+ +### Slots + +| Selector | Description | +|----------|------------| +| \`[tedi-accordion-start-action]\` | Custom actions at the start of the header. | +| \`[tedi-accordion-start-before-title]\` | Custom elements before the title. | +| \`[tedi-accordion-start-after-title]\` | Custom elements after the title. | +| \`[tedi-accordion-end-action]\` | Custom actions at the end of the header. | +| \`[tedi-accordion-start-description]\` | Custom description content rendered below the title. | +| \`[tedi-accordion-end-description]\` | Custom description content rendered at the end of the header. | +| \`[tedi-accordion-icon-card]\` | Template for rendering the icon card layout. | + `, + }, + }, + }, + argTypes: { + multiple: { + control: "boolean", + description: "Whether multiple accordion items can be opened at once.", + table: { + category: "Accordion", + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + }, + headerClickable: { + control: "boolean", + description: + "Defines whether the entire header acts as the toggle trigger.\n\n" + + "`true` (default): clicking anywhere on the header toggles the item.\n\n" + + "`false`: the header does not toggle automatically. You must provide a custom toggle control inside the header (e.g. button or link).", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "true" }, + }, + }, + title: { + control: "text", + description: "The title of the accordion item.", + table: { + category: "Accordion Item", + type: { summary: "string" }, + defaultValue: { summary: "Title" }, + }, + }, + titleLayout: { + control: "radio", + options: ["hug", "fill"], + description: + "Controls how the title stretches.\n\n" + + "`hug`: wraps tightly around content.\n\n" + + "`fill`: expands to available space and pushes trailing elements to the end.", + table: { + category: "Accordion Item", + type: { summary: "'hug' | 'fill'" }, + defaultValue: { summary: "hug" }, + }, + }, + showDefaultTitle: { + control: "boolean", + description: + "Controls whether the default title text is rendered inside the header.", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "true" }, + }, + }, + openLabel: { + control: "text", + description: "Label for the open action.", + table: { + category: "Accordion Item", + type: { summary: "string" }, + defaultValue: { summary: "open" }, + }, + }, + closeLabel: { + control: "text", + description: "Label for the close action.", + table: { + category: "Accordion Item", + type: { summary: "string" }, + defaultValue: { summary: "close" }, + }, + }, + showExpandLabel: { + control: "boolean", + description: "Whether to show the expand/collapse labels.", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "true" }, + }, + }, + showExpandIcon: { + control: "boolean", + description: + "Whether to show the default expand/collapse icon. If false, you can add your own expand icon with slots.", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "true" }, + }, + }, + expandActionPosition: { + control: "radio", + options: ["start", "end"], + description: "Position of the expand/collapse action.", + table: { + category: "Accordion Item", + type: { summary: "'start' | 'end'" }, + defaultValue: { summary: "end" }, + }, + }, + defaultExpanded: { + control: "boolean", + description: + "Whether the accordion item is initially expanded or collapsed.", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + }, + description: { + control: "text", + description: + "The description text of the accordion item. If you need to have different descriptions, use slots.", + table: { + category: "Accordion Item", + type: { summary: "string" }, + defaultValue: { summary: "" }, + }, + }, + descriptionPosition: { + control: "radio", + options: ["start", "end", "both"], + description: "Position of the description text.", + table: { + category: "Accordion Item", + type: { summary: "'start' | 'end' | 'both'" }, + defaultValue: { summary: "start" }, + }, + }, + showIconCard: { + control: "boolean", + description: "Whether to show the icon card.", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + }, + selected: { + control: "boolean", + description: + "Whether the accordion item is selected. Applies a visual 'selected' state to the accordion item.", + table: { + category: "Accordion Item", + type: { summary: "boolean" }, + defaultValue: { summary: "false" }, + }, + }, + }, +} as Meta; + +const contentExample = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt +ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco +laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in +voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat +non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`; + +const iconCardTemplate = ` + +
+
+
+ ${contentExample}
+
+
+
+
+
+ Approved
+ ${contentExample}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+ Description
+
+
+
+ Another description
+
+
+
+
+
+
+ ${actionButtonTemplate("selectedA", "toggleA")}
+ ${contentExample}
+
+
+
+
+
+ ${actionButtonTemplate("selectedB", "toggleB")}
+ ${contentExample}
+
+
+
+
+
+ 
+
+ ${contentExample}
+
+
+
+ `,
+ props: {
+ selectedA: false,
+ selectedB: true,
+ toggleA(selected: boolean) {
+ this["selectedA"] = selected;
+ },
+ toggleB(selected: boolean) {
+ this["selectedB"] = selected;
+ },
+ },
+ }),
+};
+
+export const HeaderWithBody: StoryObj = {
+ render: () => ({
+ template: `
+
+
+
+ ${contentExample}
+
+
+ `,
+ props: {
+ selectedA: false,
+ selectedB: false,
+ selectedC: true,
+ selectedD: true,
+
+ toggleA(selected: boolean) {
+ this["selectedA"] = selected;
+ },
+ toggleB(selected: boolean) {
+ this["selectedB"] = selected;
+ },
+ toggleC(selected: boolean) {
+ this["selectedC"] = selected;
+ },
+ toggleD(selected: boolean) {
+ this["selectedD"] = selected;
+ },
+ },
+ }),
+};
+
+export const AccordionWithIconCard: StoryObj = {
+ render: () => ({
+ template: `
+
+
+
+ ${contentExample}
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+ ${contentExample}
+ ${actionButtonTemplate("selectedA", "toggleA")}
+
+
+
+
+
+ ${contentExample}
+ ${actionButtonTemplate("selectedB", "toggleB")}
+
+
+
+
+
+
+
+ ${contentExample}
+ ${actionButtonTemplate("selectedC", "toggleC")}
+
+
+
+
+
+ ${contentExample}
+ ${actionButtonTemplate("selectedD", "toggleD")}
+
+
+
+
+
+ `,
+ props: {
+ selectedA: false,
+ selectedB: false,
+ selectedC: true,
+ selectedD: true,
+
+ toggleA(selected: boolean) {
+ this["selectedA"] = selected;
+ },
+ toggleB(selected: boolean) {
+ this["selectedB"] = selected;
+ },
+ toggleC(selected: boolean) {
+ this["selectedC"] = selected;
+ },
+ toggleD(selected: boolean) {
+ this["selectedD"] = selected;
+ },
+ },
+ }),
+};
diff --git a/tedi/components/cards/accordion/accordion/accordion.component.spec.ts b/tedi/components/cards/accordion/accordion/accordion.component.spec.ts
new file mode 100644
index 00000000..1797de0f
--- /dev/null
+++ b/tedi/components/cards/accordion/accordion/accordion.component.spec.ts
@@ -0,0 +1,99 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component } from "@angular/core";
+
+import { AccordionComponent } from "./accordion.component";
+import { AccordionItemComponent } from "../accordion-item/accordion-item.component";
+import { By } from "@angular/platform-browser";
+import { TEDI_TRANSLATION_DEFAULT_TOKEN } from "../../../../tokens/translation.token";
+
+@Component({
+ standalone: true,
+ imports: [AccordionComponent, AccordionItemComponent],
+ template: `
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+ ${actionButtonTemplate("selectedA", "toggleA")}
+
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+ ${actionButtonTemplate("selectedB", "toggleB")}
+
+
+
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+ ${actionButtonTemplate("selectedC", "toggleC")}
+
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+ ${actionButtonTemplate("selectedD", "toggleD")}
+
+
+
+