@ebrains/react 0.4.0-alpha.0 → 0.5.0-alpha.0

package/correct-use-of-colors.entry.esm.js

@@ -42,13 +42,13 @@ const CorrectUseOfColors = class {
   }
   render() {
     return h("div", {
-      key: '33f38f14e5b6e7271ae26608fb1a1ed0c7930c7c',
+      key: '58274bc750821893f1ff6db6af0c92557e2037dc',
       class: "container"
     }, h("p", {
-      key: '4857375e983add7d8e5e0a0d9896641774be018e',
+      key: 'f16ae70777dc595edb9f8ef20df33721816a472a',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: '1c6bd69472074babf8f830fdba9be31e73afcd88',
+      key: 'c98c49daddf43987002dd69ab1c00dffbae5e69a',
       label: "primary",
       size: "small",
       intent: "blueish",
@@ -56,7 +56,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: 'ae3429fadbea001f01731d3c15f28865d668a50a',
+      key: 'e466f6f7e05f68896114551f59673c707d5fd30f',
       label: "support",
       size: "small",
       intent: "blueish",
@@ -64,13 +64,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: 'd8c6b9ab88abbf6194a4fb26120244982b59c2c4',
+      key: '32dfc27beebbbab3949c7695293800a2ff552ceb',
       class: "flex"
     }, h("div", {
-      key: 'fc7f854940caabb9e032999f51732b64555e96e7',
+      key: 'e01d74cf63c84f66d868e180589b45cbc59ebff7',
       class: "w-full"
     }, h("ul", {
-      key: '99c6a2e47c683ac38f2a14feec80177c0cf1c174',
+      key: '162e9c5ed57689a94c5c59e2664bba2adfcd60fc',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, primary.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -80,10 +80,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '91048e89cff083356c589c0f1bfecdd482e0c797',
+      key: 'bb71abb645789030487eccdd0abaf9b223c12ec8',
       class: "w-full"
     }, h("ul", {
-      key: '6ee69388227089a5224a6d249c8e1eea4efde128',
+      key: 'f85702460f89881d6b8642decad848affdc7002f',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -93,10 +93,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     })))))), h("p", {
-      key: 'c0a8e42942f2655648aa2ec3ce74bbf8d043ba63',
+      key: '7b5b8b9c0013a91c97f24c239bde32a727695707',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: '3f272298bcd7d0e6ad791edc408ef636349fbf7d',
+      key: '81dc2c31eb283a2f64a1fd32329b35b1d04afc12',
       label: "purple",
       size: "small",
       intent: "blueish",
@@ -104,7 +104,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '9a0b28f388483944aa4b053b9f8e807c1383431e',
+      key: 'd90877918d973595a7b8bdacd6bb80f1f04cab5b',
       label: "support",
       size: "small",
       intent: "blueish",
@@ -112,13 +112,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: '27ab1cdb936918fafe122c5a569c83322043bb79',
+      key: '81cf06bb6932b2120b210e7d1ee9d556cedc949b',
       class: "flex"
     }, h("div", {
-      key: '037b9916ff3a3e8c2e9db64b650d44a57aedbcf9',
+      key: '2cc1571fe83620fcfa8f961af93b7b0e8e970eb2',
       class: "w-full"
     }, h("ul", {
-      key: '60f4f6290b31a29852fb934c678edcaa61c8e930',
+      key: 'b6b1f7f874dbd8784a0253187438c2eb6282a815',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, purple.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -128,10 +128,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '36397292a31417703736b3be5b77e17241675dd9',
+      key: '49a874de125699d800aee6256bb5b3bf9a0bf907',
       class: "w-full"
     }, h("ul", {
-      key: '20a9e6bb396c184c2718a18554eb1b4828817379',
+      key: '10d41b5ab948c87c8db43fbddefbe3453c5384a9',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -141,10 +141,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     })))))), h("p", {
-      key: '0b89819b9fce1dff39b06b70873d651b7a1c84ac',
+      key: 'bc7c40435b87cd31b5bbb2315b3f50fa88b5bafb',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: '9b3e7d46ac8116ff5f47f895bb06e89cd49c4e03',
+      key: 'd5a9f4c30d9108bd8c8207ee0130a15b9c7ff53f',
       label: "blue",
       size: "small",
       intent: "blueish",
@@ -152,7 +152,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '94c3384e546bcae55d5634064a37436b4cdaab0f',
+      key: '35c2440f2c606cd4e8e69b33850ca908f6f36a4a',
       label: "support",
       size: "small",
       intent: "blueish",
@@ -160,13 +160,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: '7e3fe503559fa6865b824fd7f93dfdf8ed368f34',
+      key: 'cf9dde65d107b20c67e0036e891ad37c1d685477',
       class: "flex"
     }, h("div", {
-      key: '4ed98a3b92ba8b73e3cd67dec625b4b8dfb34ee1',
+      key: '807350f20ee902df273ce35c217bcaa134502d13',
       class: "w-full"
     }, h("ul", {
-      key: '0ccfd018568eb834ae05771976122736f5944205',
+      key: '8198d1e59cb9477978a0b78714e7884a75ce52c0',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, blue.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -176,10 +176,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: 'd2cef9f5bd8ce7fb103e22a8964cee88853c1162',
+      key: 'ed4f89cd3d5544a199d0a516e23ee877c16dad6a',
       class: "w-full"
     }, h("ul", {
-      key: '24301ce590bd1530316f351202bd76fafaa7dda5',
+      key: '47f8617629f34252b2d533f5932dd14b9117f601',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -189,10 +189,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     })))))), h("p", {
-      key: '748852527301ab6465b593f5f271dc6dcef9d198',
+      key: '7b99385726cda59f07b66ff99e050588d5778421',
       class: "f-body-01"
     }, "This guide demonstrates the correct usage of the", h("eds-link", {
-      key: 'f035467c04170412a1b06f05b8675b6be57e8aa2',
+      key: 'f3719f08484d40ceb9ece89474f473cf9e44ee53',
       label: "redish",
       size: "small",
       intent: "blueish",
@@ -200,7 +200,7 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#primary-palette",
       "extra-class": "inline-block ml-4"
     }), "and", h("eds-link", {
-      key: '6e4eb577c6582a160b8282b54a6edfc58f20926b',
+      key: 'f1ee0fbf78a5da5f6a7a0836f63cc3312f68a547',
       label: "support",
       size: "small",
       intent: "blueish",
@@ -208,13 +208,13 @@ const CorrectUseOfColors = class {
       url: "../color-palette/#support-palette",
       "extra-class": "inline-block ml-4"
     }), "color palettes."), h("div", {
-      key: '9209fd1ab3092cd21dd81a3328171c8de4fb8bca',
+      key: '833dcd6ad96a0c36a127c5384d0858b879bf0b05',
       class: "flex"
     }, h("div", {
-      key: 'dc71b931a70fbd31a4f72814b23a1d97933bc721',
+      key: 'cf1297f1dfed3e70c184cdb3f4e116292ce1e57f',
       class: "w-full"
     }, h("ul", {
-      key: 'd3f6f25439b6fbc8e8c08b39bf46de9ce52482fa',
+      key: '9d8d9e0f78348cee56f6c91b3289a90f25c088e4',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, red.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
@@ -224,10 +224,10 @@ const CorrectUseOfColors = class {
         backgroundColor: color.background
       }
     }))))), h("div", {
-      key: '78d64d48a72836043c53e485269402bf566a5d98',
+      key: '836dfd427a087ee512970bf52ee0612a24cfaa72',
       class: "w-full"
     }, h("ul", {
-      key: '6eb824d03f4d0e2d3966963c899473e242b31dc6',
+      key: '08e2b7603c2c093b2bd8931d1993aca89801ad1d',
       class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, support.map(color => h("li", {
       class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"

package/eds-accordion.entry.esm.js

@@ -0,0 +1,126 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsAccordionCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.min-h-36{min-height:2.25rem}.min-h-44{min-height:2.75rem}.min-h-56{min-height:3.5rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.relative{position:relative}.absolute{position:absolute}.inset-x-16{left:1rem;right:1rem}.top-16{top:1rem}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-md{border-radius:12px}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-light{color:var(--grey-700)}.z-1{z-index:1}.z-10{z-index:10}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.h-0{height:0rem}.h-auto{height:auto}.pt-20{padding-top:1.25rem}.overflow-hidden{overflow:hidden}.grid{display:grid}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-16{padding:1rem}.ml-auto{margin-left:auto}.mr-auto{margin-right:auto}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.text-left{text-align:left}.text-center{text-align:center}";
+const EdsAccordionStyle0 = edsAccordionCss;
+const EdsAccordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.accordionChange = createEvent(this, "accordionChange", 7);
+    /**
+     * Handles the click event on the accordion header to toggle expansion.
+     * Toggles the `isExpanded` state and emits the `accordionChange` event.
+     */
+    this.handleClick = () => {
+      var _a;
+      this.isExpanded = !this.isExpanded;
+      this.accordionChange.emit(this.isExpanded);
+      this.setPanelHeight();
+      sendAnalytics({
+        category: 'ui-component',
+        parentContext: null,
+        tag: this.el.tagName.toLowerCase(),
+        name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+        action: this.isExpanded ? 'expanded' : 'collapsed'
+      });
+    };
+    /**
+     * Calculates and sets the panel height based on the content height
+     * and adjusts based on the `shortContent` and `isExpanded` states.
+     */
+    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;
+      }
+    };
+    this.title = undefined;
+    this.description = undefined;
+    this.switchBg = true;
+    this.expanded = false;
+    this.clampText = true;
+    this.minHeightContent = false;
+    this.isExpanded = this.expanded;
+    this.panelHeight = 0;
+    this.shortContent = false;
+  }
+  /**
+   * 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);
+  }
+  /**
+   * 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() {
+    const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
+    return h("div", {
+      key: '00bd9a34ceb469bef74c827bd1f48bf3d4b545b6',
+      ref: el => this.wrapperRef = el,
+      class: `container 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' : ''} 
+          ${minHeightContentClass}`
+    }, h("h3", {
+      key: 'ab6a953797e0a8379a01a9a2f00a4988d4fc8357',
+      class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1"
+    }, this.title), h("div", {
+      key: 'cfd6f4ad2ec5e412cdf2348d188dfcf90770012d',
+      class: "ml-auto"
+    }, h("eds-button", {
+      key: 'beaee69d610727b397645fc0a507b234003fde5e',
+      id: "toggleAccordion",
+      intent: "tertiary",
+      "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 outline-none focus:outline-none`,
+      onClick: this.handleClick,
+      icon: "chevron-down"
+    })), h("div", {
+      key: '795f14c0930a0b0862a86451cc7b7e807cb79c37',
+      class: `w-full`
+    }, this.description ? h("span", {
+      class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
+    }, this.description) : null, h("section", {
+      key: '28f6cba233cdee58743faaacc992bf7497c2ff2e',
+      id: "accordionSection",
+      role: "region",
+      "aria-labelledby": "accordionHeader",
+      "aria-hidden": !this.isExpanded,
+      class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`,
+      style: {
+        height: this.isExpanded ? 'auto' : '0'
+      }
+    }, h("div", {
+      key: '939e442c55babfd3f1750d20d9b95f664c3a67c8',
+      ref: el => this.childContentRef = el,
+      class: `accordion-content effect-color pt-20`,
+      "aria-hidden": !this.isExpanded
+    }, h("span", {
+      key: '648d16ed84cb3da227a10e6370004c6479789aed',
+      class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
+    }, h("slot", {
+      key: '90ca94f15e408b4b05c0eac4bd20fa21766cbb19'
+    }))))));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsAccordion.style = EdsAccordionStyle0;
+
+export { EdsAccordion as eds_accordion };