@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-accordion/eds-accordion.js

@@ -2,22 +2,13 @@ import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 /**
  * `EdsAccordion` is a flexible, interactive component for expanding and collapsing content sections.
- * It features a customizable header, optional description, and content area that can be dynamically expanded.
- * This component supports a range of configurations, including background toggling, minimum height adjustments,
- * and various styles to suit different layouts and display requirements.
+ * It features a customizable header with optional icon, description, and content area.
  *
- * It includes an optional button or link element within the header, which can be customized for additional interactions.
+ * Supports two visual variants (`default` and `inverse`) matching the card design system,
+ * with hover effects, smooth CSS-driven expand/collapse animation, and optional icon display.
  *
- * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent components
- * to track its open/close status.
- *
- * Key features include:
- * - Header with customizable title
- * - Expandable/collapsible content section
- * - Background color switch on expand and hover
- * - Compact layout option with reduced header height
- * - Adjustable content height and text clamping
- * - Emitted events for tracking changes in expansion state and context
+ * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent
+ * components to track its open/close status.
  */
 export class EdsAccordion {
     constructor() {
@@ -28,8 +19,8 @@ export class EdsAccordion {
         this.handleClick = () => {
             var _a;
             this.isExpanded = !this.isExpanded;
+            this.toggleIcon = this.isExpanded ? 'chevron-down' : 'chevron-right';
             this.accordion.emit(this.isExpanded);
-            this.setPanelHeight();
             sendAnalytics({
                 category: 'ui-component',
                 parentContext: null,
@@ -39,55 +30,30 @@ export class EdsAccordion {
             });
         };
         /**
-         * Calculates and sets the panel height based on the content height
-         * and adjusts based on the `shortContent` and `isExpanded` states.
+         * Handles keyboard activation on the header (Enter and Space keys).
          */
-        this.setPanelHeight = () => {
-            if (this.childContentRef) {
-                this.shortContent =
-                    this.wrapperRef.scrollWidth > 830 && !this.description
-                        ? this.childContentRef.scrollHeight <= 80
-                        : this.childContentRef.scrollHeight <= 20;
-                this.panelHeight = this.isExpanded && !this.shortContent ? this.childContentRef.scrollHeight : 0;
-            }
-            if (this.headerRef) {
-                this.headerHeight = this.headerRef.scrollHeight - 30;
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleClick();
             }
         };
         this.heading = undefined;
         this.description = undefined;
+        this.variant = 'inverse';
+        this.icon = undefined;
         this.switchBg = true;
         this.expanded = false;
         this.clampText = true;
-        this.buttonIntent = 'tertiary';
         this.isExpanded = this.expanded;
-        this.panelHeight = 0;
-        this.shortContent = false;
-        this.headerHeight = 0;
-    }
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
-    componentDidLoad() {
-        this.setPanelHeight();
-        window.addEventListener('resize', this.setPanelHeight);
+        this.toggleIcon = this.expanded ? 'chevron-down' : 'chevron-right';
     }
-    /**
-     * Lifecycle method that cleans up the resize event listener when the component is removed.
-     */
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.setPanelHeight);
-    }
-    /**
-     * Renders the accordion structure, including header, content, description, and any slotted content.
-     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
-     */
     render() {
-        return (h("div", { key: '095474500f7c60f20e4d737188001d2f3084dbcc', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
-          ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
-          ${this.switchBg ? 'hover:bg-inverse' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: 'f090fbe3632df8302046f1178e82b8affc4cc821', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0a30ab8c27cadbb342fc57f6393111c84f10a664', class: "ml-auto" }, h("eds-button", { key: '01f4658df8181b63b71a2e0d2a67e8f8b58efbb7', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '9f3b5a0e425c2dffe3b6fe40fa33b020d64256d8', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '414735d7d982de76d8a1b8db24aa9a569eba37c7', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '11097a0646b18f728af494c14aa4cc0e5335defe', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '88414c40490aa77166d23868f16556b9356279a7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '8070a7676ca8fba065f813852a2e0cf4146f3374' })))))));
+        const cardClasses = [
+            'accordion-card',
+            `accordion-card-${this.variant}`
+        ].join(' ');
+        return (h("div", { key: 'e9f44914fce505b97f90415ed72f322ff09fcee7', class: cardClasses }, h("div", { key: 'd4c6ec563b66b14fc74bc872c953bd9e3e501a85', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (h("div", { key: '9c365bc15aeec93ccc2021206e72e457a2032265', class: "accordion-icon" }, h("eds-icon-wrapper", { key: '73742a6cb431342c62e1fd5661c39927dcb57bef', name: this.icon, size: 24 }))), h("div", { key: '1ba17b07eedccb135dc5138ace783ea211b75d52', class: "accordion-header-text" }, h("h3", { key: 'd8c34e66195fbe2863736d39f5a9e8276f30252a', class: "accordion-title" }, this.heading), this.description && (h("p", { key: 'c24a3614a3f2d1bcd29a39cbd3384c25c1c50e47', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), h("eds-icon-wrapper", { key: 'deecdbb3c0ec32079b3b913ed7976ae813b9468a', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), h("section", { key: 'f3767c81d79e2681c6317e3268cf1c966fba6bc2', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, h("div", { key: '08ce9281f2e7fc858f30d0b7c0da0b0739824193', class: "accordion-panel-inner" }, h("div", { key: 'c9cdc6312fa279d1c1ee5753c7038b0a9ce3c624', class: "accordion-content" }, h("slot", { key: 'aaec055131ce2ae7830aecfc2fc6ace50f05ded1' }))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -132,11 +98,52 @@ export class EdsAccordion {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional description displayed above the main content"
+                    "text": "Optional description displayed below the title in the header"
                 },
                 "attribute": "description",
                 "reflect": false
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default' for dark background, 'inverse' for light background"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inverse'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon displayed in the header"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
             "switchBg": {
                 "type": "boolean",
                 "mutable": false,
@@ -148,8 +155,11 @@ export class EdsAccordion {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the background color on expand and hover"
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `variant` prop instead. Kept for backward compatibility."
+                        }],
+                    "text": ""
                 },
                 "attribute": "switch-bg",
                 "reflect": false,
@@ -185,41 +195,18 @@ export class EdsAccordion {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Clamps the text when the accordion is collapsed to prevent overflow"
+                    "text": "Clamps the description text when the accordion is collapsed to prevent overflow"
                 },
                 "attribute": "clamp-text",
                 "reflect": false,
                 "defaultValue": "true"
-            },
-            "buttonIntent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'secondary' | 'tertiary' | 'ghost'",
-                    "resolved": "\"ghost\" | \"secondary\" | \"tertiary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'tertiary'"
-                        }],
-                    "text": "Intent/style of the toggle button.\nOptions: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'"
-                },
-                "attribute": "button-intent",
-                "reflect": false,
-                "defaultValue": "'tertiary'"
             }
         };
     }
     static get states() {
         return {
             "isExpanded": {},
-            "panelHeight": {},
-            "shortContent": {},
-            "headerHeight": {}
+            "toggleIcon": {}
         };
     }
     static get events() {

package/dist/collection/components/eds-accordion/eds-accordion.stories.js

@@ -8,11 +8,16 @@ export default {
         },
         description: {
             control: 'text',
-            description: 'Optional description displayed above the main content'
+            description: 'Optional description displayed below the title in the header'
         },
-        switchBg: {
-            control: 'boolean',
-            description: 'Toggles the background color on expand and hover'
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'inverse'],
+            description: 'Visual variant: default (dark bg) or inverse (light bg)'
+        },
+        icon: {
+            control: 'text',
+            description: 'Optional icon name displayed in the header'
         },
         expanded: {
             control: 'boolean',
@@ -20,26 +25,15 @@ export default {
         },
         clampText: {
             control: 'boolean',
-            description: 'Clamps the text when the accordion is collapsed to prevent overflow'
-        },
-        minHeightContent: {
-            control: 'boolean',
-            description: 'Applies a minimum height to the content area for consistent spacing'
-        },
-        buttonIntent: {
-            control: 'select',
-            options: ['secondary', 'tertiary', 'ghost'],
-            description: 'Visual style intent of the toggle button.'
+            description: 'Clamps the description text when collapsed to prevent overflow'
         }
     },
     args: {
         title: 'Accordion Title',
-        description: 'An optional description above the main content.',
-        switchBg: true,
+        description: 'An optional description below the title.',
+        variant: 'inverse',
         expanded: false,
-        clampText: true,
-        minHeightContent: true,
-        buttonIntent: 'tertiary'
+        clampText: true
     }
 };
 export const Default = {
@@ -47,35 +41,95 @@ export const Default = {
     <eds-accordion
       title="${args.title}"
       description="${args.description}"
-      switch-bg="${args.switchBg}"
+      variant="${args.variant}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      expanded="${args.expanded}"
+      clamp-text="${args.clampText}"
+    >
+      This is the main content of the accordion. It can be expanded or collapsed.
+    </eds-accordion>
+  `
+};
+export const DefaultVariant = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="default"
       expanded="${args.expanded}"
       clamp-text="${args.clampText}"
-      min-height-content="${args.minHeightContent}"
-      button-intent="${args.buttonIntent}"
     >
-    This is the main content of the accordion. It can be expanded or collapsed.
+      This is the main content of the accordion on a dark background.
     </eds-accordion>
   `,
     args: {
-        title: 'Accordion Title',
-        description: 'An optional description above the main content.',
-        switchBg: true,
-        expanded: false,
-        clampText: true,
-        minHeightContent: true,
-        buttonIntent: 'tertiary'
+        title: 'Dark Variant Accordion',
+        description: 'This accordion uses the default (dark) variant matching the card design system.'
     }
 };
-export const SlotComponent = {
+export const WithIcon = {
     render: (args) => `
     <eds-accordion
       title="${args.title}"
       description="${args.description}"
-      switch-bg="${args.switchBg}"
+      variant="default"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      expanded="${args.expanded}"
+      clamp-text="${args.clampText}"
+    >
+      Content with an icon in the header on a dark background.
+    </eds-accordion>
+  `,
+    args: {
+        title: 'Accordion with Icon',
+        description: 'Features an icon in the header area.',
+        icon: 'checkmark'
+    }
+};
+export const WithIconInverse = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="inverse"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      expanded="${args.expanded}"
+      clamp-text="${args.clampText}"
+    >
+      Content with an icon in the header on a light background.
+    </eds-accordion>
+  `,
+    args: {
+        title: 'Accordion with Icon (Inverse)',
+        description: 'Features an icon in the header area on a light background.',
+        icon: 'settings'
+    }
+};
+export const Expanded = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="${args.variant}"
+      expanded="true"
+      clamp-text="${args.clampText}"
+    >
+      This accordion starts in the expanded state.
+    </eds-accordion>
+  `,
+    args: {
+        title: 'Expanded Accordion',
+        description: 'This accordion is expanded by default.'
+    }
+};
+export const WithSlotComponent = {
+    render: (args) => `
+    <eds-accordion
+      title="${args.title}"
+      description="${args.description}"
+      variant="${args.variant}"
       expanded="true"
       clamp-text="${args.clampText}"
-      min-height-content="${args.minHeightContent}"
-      button-intent="${args.buttonIntent}"
     >
       <eds-alert
         message="This is a slot component"
@@ -86,12 +140,7 @@ export const SlotComponent = {
     </eds-accordion>
   `,
     args: {
-        title: 'Accordion Title',
-        description: 'An optional description above the main content.',
-        switchBg: true,
-        expanded: false,
-        clampText: true,
-        minHeightContent: true,
-        buttonIntent: 'tertiary'
+        title: 'Accordion with Slotted Component',
+        description: 'Demonstrates slotted content inside the accordion.'
     }
 };