feat(accordion): add accordion tedi-ready component #262

.storybook/preview.tsx

@@ -78,6 +78,7 @@ const preview: Preview = {
           <Subtitle />
           <Description />
           <Primary />
+          <Description of="story" />
           <Controls />
           <Stories includePrimary={false} />
         </>
@@ -106,16 +107,16 @@ const preview: Preview = {
           description: "TEDI-ready",
         },
         partiallyTediReady: {
-          background: '#9bbb5f',
-          color: '#fff',
+          background: "#9bbb5f",
+          color: "#fff",
           description:
-            'This component lacks some TEDI-Ready functionality, e.g it may rely on another component that has not yet been developed',
+            "This component lacks some TEDI-Ready functionality, e.g it may rely on another component that has not yet been developed",
         },
         mobileViewDifference: {
-          background: '#99BDDA',
-          color: '#000',
+          background: "#99BDDA",
+          color: "#000",
           description:
-            'This component has a different layout on mobile. Use the mobile breakpoint or resize the browser window to review the mobile design.',
+            "This component has a different layout on mobile. Use the mobile breakpoint or resize the browser window to review the mobile design.",
         },
       },
     },

community/components/cards/accordion/accordion.stories.ts

@@ -39,6 +39,11 @@ export default {
       ],
     }),
   ],
+  parameters: {
+    status: {
+      type: ["deprecated", "existsInTediReady"],
+    },
+  },
 } as Meta<AccordionComponent>;
 
 type AccordionStory = StoryObj<AccordionComponent>;

community/components/cards/accordion/accordion/accordion.component.ts

@@ -8,6 +8,9 @@ import {
 } from "@angular/core";
 import { AccordionItemComponent } from "../accordion-item/accordion-item.component";
 
+/**
+ * @deprecated Use Accordion from TEDI-ready instead. This component will be removed from future versions.
+ */
 @Component({
   selector: "tedi-accordion",
   standalone: true,

package.json

@@ -32,7 +32,7 @@
     "ngx-float-ui": "^19.0.1 || ^20.0.0"
   },
   "dependencies": {
-    "@tedi-design-system/core": "^3.0.1"
+    "@tedi-design-system/core": "^3.1.0"
   },
   "devDependencies": {
     "@angular-devkit/core": "19.2.15",

tedi/components/cards/accordion/accordion-item/accordion-item.component.html

@@ -0,0 +1,144 @@
+<div
+  class="tedi-accordion__item"
+  [class.tedi-accordion__item--selected]="selected()"
+  [class.tedi-accordion__item--expanded]="expanded()"
+>
+  @if (showIconCard()) {
+    <ng-content select="[tedi-accordion-icon-card]"></ng-content>
+  }
+
+  <div class="tedi-accordion__header-row">
+    @if (headerClickable()) {
+      <button
+        [id]="headerId"
+        type="button"
+        [ngClass]="headerClasses()"
+        (click)="toggle()"
+        [attr.aria-expanded]="expanded()"
+        [attr.aria-controls]="bodyId"
+      >
+        <ng-container *ngTemplateOutlet="headerContent"></ng-container>
+      </button>
+    } @else {
+      <div [id]="headerId" [ngClass]="headerClasses()">
+        <ng-container *ngTemplateOutlet="headerContent"></ng-container>
+      </div>
+    }
+  </div>
+
+  <div
+    [ngClass]="bodyClasses()"
+    [id]="bodyId"
+    [attr.role]="expanded() ? 'region' : null"
+    [attr.aria-labelledby]="headerId"
+    [attr.aria-hidden]="!expanded()"
+    [attr.inert]="!expanded() ? '' : null"
+  >
+    <div class="tedi-accordion__body--inner">
+      <ng-content></ng-content>
+    </div>
+  </div>
+</div>
+
+<ng-template #headerContent>
+  <div class="tedi-accordion__start">
+    <ng-content select="[tedi-accordion-start-action]"></ng-content>
+
+    <ng-content select="[tedi-accordion-start-before-title]"></ng-content>
+
+    <span
+      class="tedi-accordion__title"
+      [class.tedi-accordion__title--with-description]="description()"
+      [class.tedi-accordion__title--grow]="titleLayout() === 'fill'"
+    >
+      <span class="tedi-accordion__title--main">
+        @if (showStartExpandAction()) {
+          <ng-container *ngTemplateOutlet="collapseButton"></ng-container>
+        }
+
+        @if (showSeparateTitle()) {
+          <span
+            tedi-text
+            color="secondary"
+            modifiers="normal"
+            [id]="headerId + '-title'"
+            [attr.aria-hidden]="hideTitleFromSR() ? 'true' : null"
+          >
+            {{ title() | tediTranslate }}
+          </span>
+        }
+      </span>
+
+      @if (descriptionPosition() !== "end") {
+        <ng-content select="[tedi-accordion-start-description]"></ng-content>
+
+        @if (description(); as desc) {
+          <span tedi-text color="tertiary" modifiers="normal">
+            {{ desc | tediTranslate }}
+          </span>
+        }
+      }
+    </span>
+
+    <ng-content select="[tedi-accordion-start-after-title]"></ng-content>
+  </div>
+
+  @if (descriptionPosition() !== "start") {
+    <ng-content select="[tedi-accordion-end-description]"></ng-content>
+
+    @if (description(); as desc) {
+      <span tedi-text color="tertiary" modifiers="small">
+        {{ desc | tediTranslate }}
+      </span>
+    }
+  }
+
+  @if (showEndExpandAction()) {
+    <ng-container *ngTemplateOutlet="collapseButton"></ng-container>
+  }
+
+  <ng-content select="[tedi-accordion-end-action]"></ng-content>
+</ng-template>
+
+<ng-template #collapseButton>
+  @if (headerClickable()) {
+    <div
+      tedi-text
+      modifiers="normal"
+      class="tedi-accordion__expand-indicator"
+      [class.tedi-accordion__expand-indicator--with-label]="showExpandLabel()"
+    >
+      {{ (showExpandLabel() ? expandLabel() : "") | tediTranslate }}
+      <ng-container *ngTemplateOutlet="expandIcon"></ng-container>
+    </div>
+  } @else {
+    <button
+      type="button"
+      class="tedi-accordion__toggle-button"
+      tedi-link
+      [underline]="false"
+      (click)="toggle()"
+      [attr.aria-expanded]="expanded()"
+      [attr.aria-controls]="bodyId"
+      [attr.aria-label]="
+        !showExpandLabel() ? (expandLabel() | tediTranslate) : null
+      "
+      [attr.aria-labelledby]="headerId + '-title'"
+    >
+      @if (showExpandLabel()) {
+        {{ (showSeparateTitle() ? expandLabel() : title()) | tediTranslate }}
+      }
+      <ng-container *ngTemplateOutlet="expandIcon"></ng-container>
+    </button>
+  }
+</ng-template>
+
+<ng-template #expandIcon>
+  <tedi-icon
+    aria-hidden="true"
+    name="expand_more"
+    class="tedi-accordion__icon"
+    [class.tedi-accordion__icon--expanded]="expanded()"
+    [class.tedi-accordion__icon--no-label]="!showExpandLabel()"
+  />
+</ng-template>