@ebrains/react 0.0.1-alpha.0 → 0.2.0-alpha.0

package/copy-03b72cb6.esm.js

@@ -0,0 +1,5 @@
+const copy = `<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
+</svg>`;
+
+export { copy as c };

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

@@ -0,0 +1,243 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const primary = [{
+  background: '#9CE142'
+}, {
+  background: '#00C959'
+}, {
+  background: '#00A595'
+}];
+const support = [{
+  background: '#141414'
+}, {
+  background: '#383838'
+}, {
+  background: '#CCCCCC'
+}, {
+  background: '#E6E6E6'
+}, {
+  background: '#FFFFFF'
+}];
+const blue = [{
+  background: '#3FA9F5'
+}, {
+  background: '#0644F4'
+}];
+const purple = [{
+  background: '#C461FF'
+}, {
+  background: '#5D3DF9'
+}];
+const red = [{
+  background: '#FFA543'
+}, {
+  background: '#FF4D68'
+}];
+const CorrectUseOfColors = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("div", {
+      key: 'c200227a9e2f169d0aa287867fbb8e37950ba1fc',
+      class: "container"
+    }, h("p", {
+      key: '8fb2fee0b58ee6ad9386bd7ab9b7defe77bf0ea8',
+      class: "f-body-01"
+    }, "This guide demonstrates the correct usage of the", h("eds-link", {
+      key: '779695d669a2dcea9dfa02ad98afbbbb40fd1c60',
+      label: "primary",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#primary-palette",
+      "extra-class": "inline-block"
+    }), "and", h("eds-link", {
+      key: '9adae0aedf1121fcae938fea0a190a4c6d919615',
+      label: "support",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#support-palette",
+      "extra-class": "inline-block"
+    }), "color palettes."), h("div", {
+      key: 'ba6f9af827fc2d961d3bbe6e525f322a1cd1915a',
+      class: "flex"
+    }, h("div", {
+      key: 'c7c0375674e317e44501061074498a4d61061815',
+      class: "w-full"
+    }, h("ul", {
+      key: '3b47359203802b385a3ebfb3112d358860bb3aef',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }))))), h("div", {
+      key: '4762b034c77712345d8dccbad21d670e0e4b00b8',
+      class: "w-full"
+    }, h("ul", {
+      key: '4378c6902da37592f8a793e106a43ddee1ef93c4',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    })))))), h("p", {
+      key: 'fbc81d54d8b403928b8ed06313b3c8cc43ed94ea',
+      class: "f-body-01"
+    }, "This guide demonstrates the correct usage of the", h("eds-link", {
+      key: '3cebed0ccba94099b7c7434009317ac5f2bd0b4c',
+      label: "purple",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#primary-palette",
+      "extra-class": "inline-block"
+    }), "and", h("eds-link", {
+      key: '022ecd8aee653634c17289be36406a57c50870e2',
+      label: "support",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#support-palette",
+      "extra-class": "inline-block"
+    }), "color palettes."), h("div", {
+      key: '199e32e4956d061d8900905ff5bb5f5de3e241aa',
+      class: "flex"
+    }, h("div", {
+      key: 'ff328c18717b9e8e59a556f1158d20c1ee81e7d8',
+      class: "w-full"
+    }, h("ul", {
+      key: 'e01f03ac9c1926e545cb7eed8bda7bbac85ec1df',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }))))), h("div", {
+      key: '9c916943b14e9c30dc4c378cd1f17e01898c07ba',
+      class: "w-full"
+    }, h("ul", {
+      key: 'f4ed3a0dbf49acf1f9377b88974a95aad039786e',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    })))))), h("p", {
+      key: '4639f1444d9623cba363eeb5c2d8d31c878df248',
+      class: "f-body-01"
+    }, "This guide demonstrates the correct usage of the", h("eds-link", {
+      key: '06f173575af08f66a54cbecda06d8c8571831e14',
+      label: "blue",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#primary-palette",
+      "extra-class": "inline-block"
+    }), "and", h("eds-link", {
+      key: '27190261ee2836060d3a82ff8b1e99cf2a3a4418',
+      label: "support",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#support-palette",
+      "extra-class": "inline-block"
+    }), "color palettes."), h("div", {
+      key: '56b46450301b6ff4971d3d0a8db82e4490926a7d',
+      class: "flex"
+    }, h("div", {
+      key: '149dfb6f4888042bc3bc0155e13f0546619d0407',
+      class: "w-full"
+    }, h("ul", {
+      key: '170c840e01c036180d14b4ad3ff05a91d0d2a294',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }))))), h("div", {
+      key: '7bf3c17e287839feb7de1f9efb025468b6be01d5',
+      class: "w-full"
+    }, h("ul", {
+      key: '0933b22c83b1146fd3df7872168c46696612ee6f',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    })))))), h("p", {
+      key: '13d3cc503cec5ff8368bb067669fd40c39474ad9',
+      class: "f-body-01"
+    }, "This guide demonstrates the correct usage of the", h("eds-link", {
+      key: '3d56221761895007dca7959d41dc9c2de7d5bee9',
+      label: "redish",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#primary-palette",
+      "extra-class": "inline-block"
+    }), "and", h("eds-link", {
+      key: '816bfadc9f98d2f2ac59bc14df8d4160d89116b3',
+      label: "support",
+      size: "small",
+      intent: "ghost",
+      icon: "arrow-right",
+      url: "../color-palette/#support-palette",
+      "extra-class": "inline-block"
+    }), "color palettes."), h("div", {
+      key: 'b6eab4a5bb07fd34b59c0e9460ad4aab06e424f6',
+      class: "flex"
+    }, h("div", {
+      key: 'd2779763b7a8ac3b9d718cb2c98dcfeb6b81e311',
+      class: "w-full"
+    }, h("ul", {
+      key: '269881df5e4209d3670ceae03c37182d5d17fe7f',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    }))))), h("div", {
+      key: 'e014acde3e2676f4db049bd1df3f49fb68953470',
+      class: "w-full"
+    }, h("ul", {
+      key: '6881842a8f199741784d1a1382353ff271869ee0',
+      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"
+    }, h("div", {
+      class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16",
+      style: {
+        backgroundColor: color.background
+      }
+    })))))));
+  }
+};
+
+export { CorrectUseOfColors as correct_use_of_colors };

package/eds-accordion.entry.esm.js

@@ -0,0 +1,132 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.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 = () => {
+      this.isExpanded = !this.isExpanded;
+      this.accordionChange.emit(this.isExpanded);
+      this.setPanelHeight();
+    };
+    /**
+     * 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();
+    // Emit context for each eds-link element after the component is fully loaded
+    const btn = this.el.shadowRoot.querySelector('eds-button');
+    this.emitContext(btn);
+    window.addEventListener('resize', this.setPanelHeight);
+  }
+  /**
+   * Emits a custom event called `parentContext` for a given link element.
+   * This event provides context information about the breadcrumb component.
+   *
+   * @param linkElement - The link element to which the event will be dispatched.
+   */
+  emitContext(linkElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    linkElement.dispatchEvent(event);
+  }
+  /**
+   * 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: '1f8ea188c4b39f6d1a8d10cdbf43d3df88d1281f',
+      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: '4490bdc1a18b99850e8db8ae1c38fcb37912ec0d',
+      class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1"
+    }, this.title), h("div", {
+      key: '82df433a9cc6805a735300fd1bb52f41c639c992',
+      class: "ml-auto"
+    }, h("eds-button", {
+      key: '9965d5eecfa02fbea08c23c44d325417767f6495',
+      id: "accordionId",
+      intent: "tertiary",
+      "aria-expanded": this.isExpanded || this.shortContent,
+      "aria-controls": "accordionId",
+      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: '7ab8d2d07d55fa05c5e5647d1d00d1165f0d40ce',
+      class: `w-full`
+    }, this.description ? h("span", {
+      class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}`
+    }, this.description) : null, h("section", {
+      key: 'cb122dd5433d7012cba6f3769f79e92a155c45d7',
+      id: "sectionId",
+      "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: '0c2e1d9b38f21f0cb7f50aa3923edcc448418e3f',
+      ref: el => this.childContentRef = el,
+      class: `accordion-content effect-color pt-20`,
+      "aria-hidden": !this.isExpanded
+    }, h("span", {
+      key: 'd119c88d54e8d5e83d4cc3d4d16d1cd53d689bc7',
+      class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}`
+    }, h("slot", {
+      key: 'b2a6917ec65bc808389a2d1c77cd1183f00cbaa1'
+    }))))));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsAccordion.style = EdsAccordionStyle0;
+
+export { EdsAccordion as eds_accordion };