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.",
         },
       },
     },

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,130 @@
+<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>
+
+  @if (expanded()) {
+    <div
+      [ngClass]="bodyClasses()"
+      [id]="bodyId"
+      role="region"
+      [attr.aria-labelledby]="headerId"
+    >
+      <ng-content></ng-content>
+    </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 (showDefaultTitle()) {
+          <span tedi-text color="secondary" modifiers="normal">
+            {{ 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()"
+    >
+      <span>
+        {{ (showExpandLabel() ? expandLabel() : "") | tediTranslate }}
+      </span>
+      <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"
+    >
+      {{ 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--expanded]="expanded()"
+  />
+</ng-template>

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

@@ -0,0 +1,175 @@
+.tedi-accordion__item {
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: auto 1fr;
+  align-items: stretch;
+
+  &--selected {
+    border: 1px solid var(--card-border-selected);
+    border-radius: var(--card-radius-rounded);
+
+    .tedi-accordion__header,
+    .tedi-accordion__body,
+    [tedi-accordion-icon-card] {
+      border: transparent;
+    }
+
+    .tedi-accordion__header,
+    .tedi-accordion__body {
+      &--with-icon-card {
+        border-left: 1px solid var(--card-border-primary);
+      }
+    }
+
+    .tedi-accordion__header {
+      &--expanded {
+        border-bottom: 1px solid var(--card-border-primary);
+      }
+    }
+  }
+}
+
+.tedi-accordion__header-row {
+  display: flex;
+  grid-row: 1;
+  grid-column: 2;
+  align-items: stretch;
+}
+
+.tedi-accordion__header {
+  position: relative;
+  display: flex;
+  flex: 1;
+  gap: var(--layout-grid-gutters-16);
+  align-items: center;
+  align-self: stretch;
+  padding: var(--card-padding-md-default);
+  background: var(--card-background-primary);
+  border: 1px solid var(--card-border-primary);
+  border-radius: var(--card-radius-rounded);
+
+  &--expanded {
+    border-radius: var(--card-radius-rounded) var(--card-radius-rounded) 0 0;
+  }
+
+  &--expanded.tedi-accordion__header--with-icon-card {
+    border-radius: 0 var(--card-radius-rounded) 0 0;
+  }
+
+  &--with-icon-card {
+    border-radius: var(--card-radius-sharp) var(--card-radius-rounded)
+      var(--card-radius-rounded) var(--card-radius-sharp);
+  }
+
+  &--hoverable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--general-surface-hover);
+    }
+
+    &:active {
+      background: var(--general-surface-brand-tertiary);
+    }
+
+    &:focus-visible {
+      z-index: 1;
+      outline: none;
+      background: var(--card-background-primary);
+      border: 1px solid var(--card-border-primary);
+      box-shadow:
+        0 0 0 1px var(--tedi-neutral-100),
+        0 0 0 3px var(--tedi-primary-500);
+    }
+  }
+}
+
+.tedi-accordion__body {
+  grid-row: 2;
+  grid-column: 2;
+  padding: var(--card-padding-md-default);
+  background: var(--card-background-primary);
+  border: 1px solid var(--card-border-primary);
+  border-top: none;
+  border-radius: 0 0 var(--card-radius-rounded) var(--card-radius-rounded);
+
+  &--with-icon-card {
+    border-radius: 0 0 var(--card-radius-rounded) 0;
+  }
+}
+
+.tedi-accordion__icon--expanded {
+  transform: rotate(180deg);
+}
+
+.tedi-accordion__start {
+  display: flex;
+  flex: 1;
+  gap: var(--layout-grid-gutters-08);
+  align-items: center;
+  min-width: 0;
+}
+
+[tedi-accordion-icon-card] {
+  display: inline-flex;
+  grid-row: 1 / span 2;
+  grid-column: 1;
+  gap: var(--layout-grid-gutters-08);
+  align-items: flex-start;
+  align-self: stretch;
+  justify-content: flex-end;
+  padding: var(--card-padding-md-default);
+  background: var(--card-background-secondary);
+  border: 1px solid var(--card-border-primary);
+  border-right: none;
+  border-radius: var(--card-radius-rounded) var(--card-radius-sharp)
+    var(--card-radius-sharp) var(--card-radius-rounded);
+}
+
+.tedi-accordion__title {
+  display: flex;
+  gap: var(--layout-grid-gutters-08);
+
+  &--main {
+    display: flex;
+    gap: inherit;
+  }
+
+  &--with-description,
+  &:has([tedi-accordion-start-description]) {
+    flex-direction: column;
+    gap: 0;
+    align-items: flex-start;
+  }
+
+  &--grow {
+    flex: 1;
+    justify-content: space-between;
+  }
+}
+
+.tedi-accordion__toggle-button {
+  display: flex;
+  padding: 0;
+  font-size: var(--body-regular-size);
+  background: transparent;
+  border: transparent;
+}
+
+.tedi-accordion__expand-indicator {
+  display: flex;
+  align-items: center;
+  color: var(--accordion-action-color);
+
+  tedi-icon {
+    color: inherit;
+  }
+
+  &--with-label {
+    tedi-icon {
+      margin-left: var(--button-sm-inner-spacing);
+      font-size: var(--tedi-size-02);
+      line-height: inherit;
+    }
+  }
+}