+ @if (showIconCard()) {
+
+
+
+ @if (headerClickable()) {
+
+ } @else {
+
+
+
+
+ }
+
+
+
+
+
+
+
+ @if (descriptionPosition() !== "start") {
+ + * Zeroheight ↗
+ */ + +export default { + title: "TEDI-Ready/Components/Cards/Accordion", + decorators: [ + moduleMetadata({ + imports: [ + AccordionComponent, + AccordionItemComponent, + IconComponent, + TextComponent, + ButtonComponent, + StatusBadgeComponent, + CheckboxComponent, + ], + providers: [{ provide: TEDI_TRANSLATION_DEFAULT_TOKEN, useValue: "en" }], + }), + ], + argTypes: { + allowMultiple: { + 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" }, + }, + }, + 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" }, + }, + }, + showSeparateTitle: { + control: "boolean", + description: + "Controls whether the title is rendered as a separate text in the accordion header.\n" + + "If false and `showExpandLabel` is true, the title is used as the expand button label.", + 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" }, + }, + }, + showDefaultExpandAction: { + 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" }, + }, + }, + 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" }, + }, + }, + headerClass: { + control: "text", + description: "Custom CSS classes for the accordion header.", + table: { + category: "Accordion Item", + type: { summary: "string" }, + }, + }, + bodyClass: { + control: "text", + description: "Custom CSS classes for the accordion body.", + table: { + category: "Accordion Item", + type: { summary: "string" }, + }, + }, + }, +} 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}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+ Description
+
+
+ Another description
+
+ ${contentExample}
+
+
+
+
+
+ ${actionButtonTemplate("selectedA", "toggleA")}
+ ${contentExample}
+
+
+
+
+
+ ${actionButtonTemplate("selectedB", "toggleB")}
+ ${contentExample}
+
+
+
+ `,
+ props: {
+ selectedA: false,
+ selectedB: true,
+ toggleA(selected: boolean) {
+ this["selectedA"] = selected;
+ },
+ toggleB(selected: boolean) {
+ this["selectedB"] = selected;
+ },
+ },
+ }),
+};
+
+export const ActionTypes: StoryObj = {
+ render: () => ({
+ template: `
+
+
+
+ `,
+ 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;
+ },
+ },
+ }),
+ parameters: {
+ a11y: {
+ config: {
+ rules: [{ id: "landmark-unique", enabled: false }],
+ },
+ },
+ },
+};
+
+export const WithIconCard: StoryObj = {
+ render: () => ({
+ template: `
+
+
+
+ ${contentExample}
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+ ${actionButtonTemplate("selectedA", "toggleA")}
+ ${contentExample}
+
+
+
+
+
+ ${actionButtonTemplate("selectedB", "toggleB")}
+ ${contentExample}
+
+
+
+
+
+
+
+ ${actionButtonTemplate("selectedC", "toggleC")}
+ ${contentExample}
+
+
+
+
+
+ ${actionButtonTemplate("selectedD", "toggleD")}
+ ${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 Customized: StoryObj = {
+ render: () => ({
+ props: {
+ selectedState: false,
+ toggleSelect(event: Event) {
+ const checkbox = event.target as HTMLInputElement;
+ this["selectedState"] = checkbox.checked;
+ },
+ },
+ template: `
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+ ${iconCardTemplate}
+ ${contentExample}
+
+
+
+
+
+
+
+ ${iconCardTemplate}
+ ${actionButtonTemplate("selectedA", "toggleA")}
+ ${contentExample}
+
+
+
+
+
+ ${iconCardTemplate}
+ ${actionButtonTemplate("selectedB", "toggleB")}
+ ${contentExample}
+
+
+
+
+
+
+
+ ${iconCardTemplate}
+ ${actionButtonTemplate("selectedC", "toggleC")}
+ ${contentExample}
+
+
+
+
+
+ ${iconCardTemplate}
+ ${actionButtonTemplate("selectedD", "toggleD")}
+ ${contentExample}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${contentExample}
+
+
+
+
+
+
+
+
+
+
+ 
+
+ mari.maasikas@gmail.com
+
+
+ Verified
+
+ ${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.
+
+ ${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.
+
+
+ ${contentExample}
+
+
+
+ `,
+ }),
+};
+
+export const AccordionBehavior: StoryObj = {
+ render: () => ({
+ template: `
+
+
+ mari.maasikas@gmail.com
+
+
+ Verified
+
+ ${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.
+
+ ${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.
+
+
+ ${contentExample}
+
+
+
+ ${contentExample}
+
+
+ ${contentExample}
+
+
+
+
+
+ ${contentExample}
+
+
+ ${contentExample}
+
+
+
+ `,
+ }),
+};
diff --git a/tedi/components/cards/accordion/accordion/accordion.component.scss b/tedi/components/cards/accordion/accordion/accordion.component.scss
new file mode 100644
index 000000000..c98fcb9b1
--- /dev/null
+++ b/tedi/components/cards/accordion/accordion/accordion.component.scss
@@ -0,0 +1,5 @@
+tedi-accordion {
+ display: flex;
+ flex-direction: column;
+ gap: var(--layout-grid-gutters-08);
+}
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 000000000..7311ea516
--- /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: `
+