@ebrains/components 0.6.0-alpha.0 → 0.7.0-alpha.0

package/dist/collection/eds-docs-ui/design-tokens/token-spacing/token-spacing.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TokenSpacing {
     render() {
-        return (h("div", { key: '144e643ff3f26d09b932b3bfa2086164134728c0', class: "w-full" }, h("ul", { key: '901ef03cdff10b00eb4c8bdbda083760fcde7f24', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '330a1a3bae65fde46111f2213d25e436fd2a91cf', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '1d2a762f9cf33ea03af1d63892f9ab53293ee1e7', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'adb666cc7517d3bf05d3599c75adb94833522848', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'b7b11b55a5ccc619c2aa9890d1051995ba9a22f7', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '0cf9be1778f86479eca5db5d38964cdffeb4d336', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '5327b962b290dcaf1479cee8a0ae4c85d195be6f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7ada04bb258adad1d06562a6f35d44fcfe21ab5a', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '5b50ff36cd166f19704cc431ea607fa95fdfe2aa', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '93c162e7bd651e4e7876e9098327b5d0d6a14001', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'baad427ed16e9f64f268cf4b5172426dee3fbf81', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4e9cf544dd6ef7bace03d025a887e0c21b7fe3b4', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: '64858f80ac6535ad5d1f5e0dda7ed0b4ea61c9ba', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'a5f0b462645727b11bdd874b7883cde9e3208e04', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '90fd6d72e160d5e16088c715153370b53ba07e36', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c46fbff19edc9b0389b3a3347e96846e8e01d0ea', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '0acbde0ab78642e37e25103260804a096cb9e996', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: 'cdb0d711cad94887bd001defe30f0334dd948d16', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6874126bd20267fdd9d0031002e24a71e0a39693', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8ab168cab95089dffdc8bff3b9bb2f9cb1fc3832', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '4366fbd79ce583f9399bc739da790b01759eb5ea', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'affbabf8b1d8c4abdd61f51ac12cac4c5e3460a7', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6e9eae3de01dd4ff99b19fdfc62eb4a301d5071d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '5e6788281bc9f57aab48cd768fa81fb98e1e31c3', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: '8fe02840d35475a60536f13abf97bd98cb53b07e', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '356476122714281daec61c548440aebde6539707', class: "w-full" }, h("ul", { key: '970f3773e8974095cc033f903f064184ce2efbf7', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '09633a00f33076131e1af2c84897fc5e427cb8fe', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0f6fa253191124f68f38e252cbdd816b2e6a4fed', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '3ea0d517cda698486a86d84b08638e0571a83cbd', class: "spacing-sample m-32 bg-darker" }, h("span", { key: '705336858b45b26fc7949af2c06c7aa0caf06521', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '0f6db988457ea76155bc8d0f7aa24a6a987b0faa', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '8eefc5b4f1c1decfb77d54b03ab3fd00a303142c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ee398d39118bf544bc6b02b4788b53f6625af2f8', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: 'dfc2b6c02727298e8d307c26b00c77cbad7c741d', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'f2f058f6576c56b4785675b173a5720bc8b8b5a2', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '79b1d6d5d1a5adf9168d48f21917fd5a45921d4d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '037bc78f10b1aa70d8dd658d4d0f2f5c4689b9b4', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: '44f1f4a3c85670448aa3888a28d9c977ca786f86', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '7c20e01a04b1d76d4dcffc14f4df75f5021ece20', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '07a56f648b690e078b21070a55a605c02347d609', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '231c4279bdae8065ef24fec89eecb78651e04611', class: "spacing-sample p-32 bg-darker" }, h("span", { key: 'a07ed52edd29aa0aa6f6b3f246f5a9c0ae01a1d7', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: '9d03ce15cd0d729158e95aa57cfa16ffc198d61f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '96166a0e3ecfd6c6a66c994964fa15bee8bde642', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '5ab66866c84be4bce570f0b88893b897e9055975', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '97a396c5d1411994f85e02da470c225a61ceecc3', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '73e0a494873f0223be3631e317a0de839837c6c0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'b6d16c13e18c51a9e458beb6a09ba8363016f78f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '31ecca8519713956f36adeab4ec9d948366ef60c', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: '5be84ed80ae0f13b350a69bced77af95ab9b9a12', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js

@@ -5,7 +5,7 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: 'b831c9707b00d17768f585e2015de8a7289b11d2', class: "w-full" }, h("ul", { key: '472e46f2c903597d24e8f24cf28b6f475c7d7a82', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'a3e3710a2d2f37c3da3e6c1d17565ba8a2324843', class: "w-full" }, h("ul", { key: '74e72785acae0c6f507d64f5121fee1ffdab7f49', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,

package/dist/collection/eds-docs-ui/eds-components-section/eds-components-section.js

@@ -28,7 +28,7 @@ export class EdsComponentsSection {
         }
     }
     render() {
-        return h("div", { key: '7e582a0eeafc2687229454532b5a7f66f91c1856', class: "container" }, this.renderContent());
+        return h("div", { key: '69eda93b8845c5fdf5edc0f58ede763866b5f8c7', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-components-section"; }
     static get properties() {

package/dist/collection/eds-docs-ui/eds-docs-palettes/eds-docs-palettes.js

@@ -17,7 +17,7 @@ export class EdsDocsPalettes {
         }
     }
     render() {
-        return h("div", { key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a', class: "container" }, this.renderContent());
+        return h("div", { key: '80f0922a40e212252a858b019d88f104defc2632', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-docs-palettes"; }
     static get properties() {

package/dist/collection/eds-docs-ui/eds-docs-tokens/eds-docs-tokens.js

@@ -25,7 +25,7 @@ export class EdsDocsContent {
         }
     }
     render() {
-        return h("div", { key: 'b140f7650e5e01711dc0778b04af83f9d004efc7', class: "container" }, this.renderContent());
+        return h("div", { key: 'cf676cf54781de4a4f8b75d174201d24d30d3538', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-docs-tokens"; }
     static get properties() {

package/dist/collection/eds-docs-ui/eds-frame/eds-frame.css

@@ -0,0 +1,113 @@
+.bg-inverse {
+    background-color: var(--white);
+  }
+  .min-h-156 {
+    min-height: 156px;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-full {
+    border-radius: 9999px;
+  }
+  .rounded-lg {
+    border-radius: 16px;
+  }
+  .rounded-md {
+    border-radius: 12px;
+  }
+  .border-soft {
+    border-color: rgba(0, 0, 0, .15 );
+  }
+  .border-softer {
+    border-color: rgba(0, 0, 0, .1 );
+  }
+  .border-softest {
+    border-color: rgba(0, 0, 0, .05 );
+  }
+  .effect-focus-within {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+  }
+  .effect-focus-within:focus-within {
+    outline-style: solid;
+  }
+  .relative {
+    position: relative;
+  }
+  .flex {
+    display: flex;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .border-2 {
+    border-width: 2px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .effect-height {
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      transition-property: height;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .py-8 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .px-12 {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .border-t-2 {
+    border-top-width: 2px;
+  }
+  .border {
+    border: 1px solid rgba(0, 0, 0, .1 );
+  }
+  .border-2 {
+    border: 1px solid rgba(0, 0, 0, .1 );
+  }
+  .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;
+  }
+  .ml-8 {
+    margin-left: 0.5rem;
+  }
+  .mr-8 {
+    margin-right: 0.5rem;
+  }
+  .mt-16 {
+    margin-top: 1rem;
+  }
+  

package/dist/collection/{components → eds-docs-ui}/eds-frame/eds-frame.js

@@ -21,16 +21,37 @@ export class EdsFrame {
         this.storybookUrl = undefined;
         this.storyPath = undefined;
         this.intent = 'strong';
-        this.tiny = false;
         this.size = 'auto';
-        this.bg = true;
         this.iframeError = false;
     }
+    componentWillLoad() {
+        this.checkIframeAvailability();
+    }
+    componentDidLoad() {
+        // Emit context for each eds-link element after the component is fully loaded
+        const links = this.el.querySelectorAll('eds-link');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * 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: this.frameLabel
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
     articleClasses() {
         return [
-            this.tiny ? 'min-h-120' : 'min-h-156',
-            this.bg ? 'bg-inverse' : 'bg-default',
-            'rounded border-softer effect-focus-within relative flex grow flex-col border-2',
+            'bg-inverse min-h-156 rounded border-softer effect-focus-within relative flex grow flex-col border-2',
             'w-full h-full'
         ].join(' ');
     }
@@ -59,31 +80,6 @@ export class EdsFrame {
             this.iframeError = true;
         }
     }
-    componentWillLoad() {
-        this.checkIframeAvailability();
-    }
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const links = this.el.querySelectorAll('eds-link');
-        links.forEach((link) => {
-            this.emitContext(link);
-        });
-    }
-    /**
-     * 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: this.frameLabel
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
     get storyLink() {
         return `${this.storybookUrl}/?path=/story/${this.storyPath}`;
     }
@@ -91,9 +87,20 @@ export class EdsFrame {
         return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
     }
     render() {
-        return (h("div", { key: '20786dd40414d29f98d496e29720bd78b9d7cf8e', class: this.articleClasses() }, h("div", { key: '208612330c9d2872c68aeb310e164c8a915a51ef', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'ada2a40384ffaffadc8887580aa6184422008a68', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '26a5ae1c81b60b05b6f4859ffa4dbd13bb2557f3', class: "border-softer border-t-2" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: 'e4b72fab30dcf1eeee6fdf3c63719599eafedb6d', class: this.articleClasses() }, h("div", { key: 'f8643db32120c14dd18b3d44ae530a83e81e59e0', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '7b40c644e142e6a6356e4d6a683b9c1c57104f5d', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '8a1fe80134dadd38d113968ad0c825a6f9426921', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-frame.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-frame.css"]
+        };
+    }
     static get properties() {
         return {
             "frameLabel": {
@@ -108,7 +115,7 @@ export class EdsFrame {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The label displayed at the top left of the frame."
                 },
                 "attribute": "frame-label",
                 "reflect": false
@@ -125,7 +132,7 @@ export class EdsFrame {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The label for the external link at the top right of the frame. Defaults to 'Open in Storybook'."
                 },
                 "attribute": "url-label",
                 "reflect": false,
@@ -143,7 +150,7 @@ export class EdsFrame {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The error message displayed if the iframe fails to load."
                 },
                 "attribute": "error-message",
                 "reflect": false,
@@ -161,7 +168,7 @@ export class EdsFrame {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The base URL of the Storybook instance."
                 },
                 "attribute": "storybook-url",
                 "reflect": false
@@ -178,7 +185,7 @@ export class EdsFrame {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The story path identifier used to generate the iframe URL."
                 },
                 "attribute": "story-path",
                 "reflect": false
@@ -187,38 +194,20 @@ export class EdsFrame {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline'",
-                    "resolved": "\"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'underline'",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The intent for styling the link (e.g., primary, secondary, tertiary, etc.)."
                 },
                 "attribute": "intent",
                 "reflect": false,
                 "defaultValue": "'strong'"
             },
-            "tiny": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "tiny",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -231,29 +220,11 @@ export class EdsFrame {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The size of the frame controlling its height.\nOptions: 'auto', 'sm', 'md', 'lg', 'xl'"
                 },
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'auto'"
-            },
-            "bg": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "bg",
-                "reflect": false,
-                "defaultValue": "true"
             }
         };
     }

package/dist/collection/eds-docs-ui/eds-frame/eds-frame.stories.js

@@ -0,0 +1,52 @@
+import { html } from "lit-html";
+export default {
+    title: 'Components/Frame',
+    component: 'eds-frame',
+    argTypes: {
+        frameLabel: {
+            control: 'text',
+            description: 'The label of the frame. This is displayed as the title.'
+        },
+        urlLabel: {
+            control: 'text',
+            description: 'The label for the URL link.'
+        },
+        storybookUrl: {
+            control: 'text',
+            description: 'The base URL for Storybook (e.g., https://gitlab-org.gitlab.io/gitlab-ui).'
+        },
+        storyPath: {
+            control: 'text',
+            description: 'The story path to display (e.g., base-card--default).'
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['auto', 'sm', 'md', 'lg', 'xl'],
+            description: 'Size of the frame which controls the iframe height.'
+        },
+        intent: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
+            description: 'Intent for styling the link.'
+        }
+    }
+};
+const Template = ({ frameLabel, urlLabel, storybookUrl, storyPath, intent, size }) => html `
+  <eds-frame
+    frame-label=${frameLabel}
+    url-label=${urlLabel}
+    storybook-url=${storybookUrl}
+    story-path=${storyPath}
+    intent=${intent}
+    size=${size}
+  ></eds-frame>
+`;
+export const Default = Template.bind({});
+Default.args = {
+    frameLabel: 'Default Frame',
+    urlLabel: 'Visit Storybook',
+    storybookUrl: 'https://gitlab-org.gitlab.io/gitlab-ui',
+    storyPath: 'base-card--default',
+    intent: 'primary',
+    size: 'auto'
+};

package/dist/collection/eds-docs-ui/eds-logo-variations/eds-logo-variations.js

@@ -17,7 +17,7 @@ export class EdsLogoVariations {
         }
     }
     render() {
-        return h("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
+        return h("div", { key: '0b23fee608fcbe7059fce155bd65a0c0a4d16e07', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-logo-variations"; }
     static get properties() {

package/dist/collection/eds-docs-ui/eds-svg-repository/eds-svg-repository.js

@@ -25,7 +25,7 @@ export class EdsSvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("eds-table", { key: 'a7d7fa426da72e174880a300202390c1016b74df', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
+        return (h("eds-table", { key: 'e4c454638f02e043a5ad466ee95558be8723d214', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
     static get is() { return "eds-svg-repository"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js

@@ -5,7 +5,7 @@ import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoSpace {
     render() {
-        return (h("div", { key: 'fc5040b294d45ecbf8e3ee0ab26875c63efa3625', class: "container my-20" }, h("div", { key: 'acad9c182cb46fd58f37d9195c9e20658df81767', class: "w-[300px]" }, h("div", { key: '4caac9e94b715c967958fe6bd9e5d988622c8729', class: "bg-dark" }, h("div", { key: 'd82b6156de96fd91e996c0ab775b9503395ba04f', class: "logo-container", innerHTML: vLogoMargins })))));
+        return (h("div", { key: '99d8b66bf2f31a5563ff9872077c7c3879dc8813', class: "container my-20" }, h("div", { key: '76b8453c9d261b1b4772fc7e234b415f1ae3493b', class: "w-[300px]" }, h("div", { key: '03b7569121f1c2c1f74e1117805f754c4f548a70', class: "bg-dark" }, h("div", { key: '374de6bab6ef662acc860625a21a1002e6195b6e', class: "logo-container", innerHTML: vLogoMargins })))));
     }
     static get is() { return "logo-space"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/horizontal/logo-variations-horizontal.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class LogoVariationsHorizontal {
     render() {
-        return (h("div", { key: '17506a830e62dd31e1415d2be8b4553c3068bfd0' }, h("div", { key: '4ae7fe3624155cf1b2a749bed360d8b55cd2bede', class: "container my-16" }, h("h3", { key: 'e6daae3d262a53fb374162b5e3313fa98e11bf6b', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'ab405030d5cac7ec5fe95f638dfeaa0e48f70af7', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '05441cfb40658a2bd01f7f9a8c28e28d340b6dc1', type: "no-bg", href: "#" }))), h("div", { key: '82731279160c6c666889d32f329cf8469f853783', class: "container my-16" }, h("h3", { key: '73269548408d466223d44f9293f589e7e4b99bae', class: "f-heading03" }, "Black and White Background"), h("div", { key: '1d3e89b35eca34712e184ce42ba2f7632439ce4f', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'fc59306d8098f4764ab0f72fdbb5009bea5f3c44', type: "black", href: "#" }))), h("div", { key: '355ce3ef5cbd6872ce86ec847c3394deb29f2846', class: "container my-16" }, h("h3", { key: '57adbc464a1e2f2d5818112f00149840c2c0758a', class: "f-heading03" }, "Dark Background "), h("div", { key: '84e43ad22d556672c1b0e82a9ed3e2c988649598', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '0d0d38e691d763189c88ae803f9b02523b362ff8', type: "color-white", href: "#" })))));
+        return (h("div", { key: '5eca7ecd4f36c805e14973af64b20867b0354eba' }, h("div", { key: '3896fcc0a5a184de969d521132bcac78f9372654', class: "container my-16" }, h("h3", { key: '714d83271de13b290885b365ca911ea202aab604', class: "f-heading03" }, "Coloured Background"), h("div", { key: 'c80218b00edd13614c82e41f26316efbfd8e8b4e', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '406c7fab328969d4fa7663acda6771d8c447807b', type: "no-bg", href: "#" }))), h("div", { key: '2788972ad7f53db9f2a8ab23a458055e28c657fb', class: "container my-16" }, h("h3", { key: '1abeb7a38b87517f9fa4bed9e047dfbf3ea84aa8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'af8a7938a847e36d577dea7120e97dd9cf1b4343', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: 'b8dbc675fc435a322f1b93ab14224df17ccac7d0', type: "black", href: "#" }))), h("div", { key: 'e4068eb7d86e04c6ac3da79ef44fbc577083ecee', class: "container my-16" }, h("h3", { key: '44ffa680543f41764c478e43828c86116d3dc059', class: "f-heading03" }, "Dark Background "), h("div", { key: 'ae0c8d9dc9f563af9b756f9112847bae88d82f2f', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '5f8d4e32308c9c7e9f285a39b9cbaf6cf4104ed6', type: "color-white", href: "#" })))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'fee70336cee863d905a6537392f1ddf6bda1d449' }, h("div", { key: 'f04e0928bbd1875982190f5fe685c43a0e712704', class: "container my-16" }, h("h3", { key: 'd10318ccf82f90743af6279afea3afa36ec411dc', class: "f-heading03" }, "Coloured Background"), h("div", { key: '06cca782bfc5564172c1a745652c66d5304ad9c8', class: "coloured w-[200px]" }, h("eds-logo", { key: '175bbd4acc1b184e8d372b78246524b2d4ae6758', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'a7eb431d1ee679bc8c28aed0932325c99d4e0798', class: "container my-16" }, h("h3", { key: '0a5d4e193f9b8e36c81beb5fcc81eccaa2433ee9', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'c2d6c02f46629f32155bfb0ef1eee7522cd4b6c1', class: "bg-default w-[200px]" }, h("eds-logo", { key: 'a97c323c7af4c98fab5da6721450b80e2c8d85cb', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: 'ac99317a56b7ce01f324efc3423593a20164f932', class: "container my-16" }, h("h3", { key: '908f915f49802906b1d0d5cb008ed4cdb3b5a68a', class: "f-heading03" }, "Dark Background "), h("div", { key: '94e25cd1734ec0ef18d3742f908a08ceec50aa6f', class: "w-[200px]" }, h("eds-logo", { key: '7f74de4532f6696e7168f0fc9c5dc28afed91f98', orientation: "vertical", type: "color-white", href: "#" })))));
+        return (h("div", { key: '82d99f40e7360943ca9a2df59dc8a9db4a22a83b' }, h("div", { key: '27ed1ecf7a6a161244c3b2d1c01bc5196e15caac', class: "container my-16" }, h("h3", { key: '62363c39920cefe5086a934f36dbc9a684f3984b', class: "f-heading03" }, "Coloured Background"), h("div", { key: '8577199e6f5b9c6f97afc31620513805d06e94c6', class: "coloured w-[200px]" }, h("eds-logo", { key: 'd627ea9deef5766a160e1b97f129e2b0000b1b62', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: '8d7565fa14e8eabd6e44295b530600ba20c24820', class: "container my-16" }, h("h3", { key: 'f071d16ed3f22bb58401c493594b8d919f9a5698', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'bd6abebec1b49aed0dcf5cdafda0790b137b6b3d', class: "bg-default w-[200px]" }, h("eds-logo", { key: 'be68411a8d9e75e0c78d440635631af2f449e4cf', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '2cd4a5fb78b387bfebefeb57880d308b9e3cf96b', class: "container my-16" }, h("h3", { key: 'f74c7d823aae3ed352db73ec288b32110db9867a', class: "f-heading03" }, "Dark Background "), h("div", { key: '1a47847d582e18ca35a6b3cf76bd1e21f1dbfac2', class: "w-[200px]" }, h("eds-logo", { key: 'b35710d4795dd179a9dc0c007a2a477be3891984', orientation: "vertical", type: "color-white", href: "#" })))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -5,7 +5,7 @@ import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoWrongUsage {
     render() {
-        return (h("ul", { key: '3b7b6626be122a983b8e75560519c5cf7e31140a', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: 'ec2af2fbd7ca5fe85b15be216bec42a9289b40f1', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'cef460808c414cc1a14e380d7862523e9d53b214', class: "example" }, h("div", { key: '759ea5b73ced15cf2caef3566f2f1fdeb2122612', class: "bg-dark " }, h("div", { key: '9d0b7aef45f578f1c6e0d84f80583f8116688cf7', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '223611a3bedea685dd1904922f472fee474ddf11', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '49e6907610dfaede93ddf179dafbc93f340832ec', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'f11f675e9b002bc5d571907faeabfa7c8a2ea4f4', class: "example" }, h("div", { key: 'b63ab2771e06f9d56c1ae995be5b23612b670e6e', class: "no-other-color p-16" }, h("div", { key: '91d331a3fd50976496cd9eff08e5150d5fb8c368', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: 'b34ec2c20218499972367287e730e3ea75d94bb2', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '20d1babcf42bd66e56633f78e5e7a38689b1c831', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '057c8a11c93076e2b9663baa49f101f90c3007be', class: "example" }, h("div", { key: '767471f768d48de8a230dac229f86a751590bfb6', class: "bg-light p-16" }, h("div", { key: 'd5e807d0cdea5958b0c2d93c3207924616fece63', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: 'c357e9516bb82a3f431270c56a23fd614684d126', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '789d0af543f4ccc9a270c3a332f1dcb2dc79b77f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'a5e0d0a85a4e1656a0e7d01dc41f59711971b403', class: "example" }, h("div", { key: 'a7eb16e39e2f954e42f5f8c0c2ed152fb53f7c2a', class: "bg-white p-16" }, h("div", { key: '46ec9c3b424cf4661cda4adc31989a8c355376d4', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: '2c7e8e98a0306d08f30e857e5476703993ffda2c', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '846791ec992abd3f0632070cb09d9ef3dcfa67b7', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '82fb8f93a6cb8789bf4a56e589975ad353bc88c2', class: "example" }, h("div", { key: '8c7e30c775364fa1d79b118e5aff5cd1e883101f', class: "bg-white p-16" }, h("div", { key: 'a18af5ffaba038fff7a442ab626f783a8a1f08ba', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '8ad738506d45e065ad5c96df9f5bf569a632e446', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: 'f556f0d638d48bcd95d0cc198e0408bb109cd92f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '153d0704622a633e8937bb0a481941cca7446a8f', class: "example" }, h("div", { key: 'e4d9e874f931413d924635432df55de18d329f2f', class: "bg-light p-16" }, h("div", { key: '2435bddf3af2928878338793e895cc080b7e1f7a', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '64c46cd279b062ab87ce34187bd979c58f1c9312', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'd28391400911e4b8481a707a197915d2f9fffbf2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '4aa8af822ff81bb7313145ccc24dbb79a7041f26', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '63fc69af51c57497cde82c7377dc5cc56bcd264e', class: "example" }, h("div", { key: '54029b8e273baddb810ea869b341a66f0b9a9e9a', class: "bg-accent p-16" }, h("div", { key: 'd82bbfa6ea877ec8af75230093548fffd086b1b4', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'f12f0cd6baedc08020ebd206c1c5c2fd8a6c7eda', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("ul", { key: 'bc42810801b7692a7cce35d1b3d44ae70bf79db7', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '5961e3d0148ddfdb9d77c72c5cb8dd6733cdbc1c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fe06a82d62bb7bedc6880991c45c099c1e4f913e', class: "example" }, h("div", { key: '3f851373000c1b0cb1ecf0c42add9eef09d7e969', class: "bg-dark " }, h("div", { key: '2cdcc5b3419e5a9bdfde2c6ebeeafe482b060808', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '027a7e9000a7b0e18697e1add62fb52bc340e56d', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '37821295b19c46c6bd23f75ff090f42513f2c52a', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7f4fb4c6e94d1cfa0080bf4716d386a64cc588a6', class: "example" }, h("div", { key: '9b580db406baa9ab882042693238d96db83099b1', class: "no-other-color p-16" }, h("div", { key: '6c1b3d0668acae7f1542fddbd83444c187f8f447', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '644fb68b648f330c80ff295f9a4d74924b44e5dd', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '651a9bf67507fdfe1289d1afaced18bdc739313c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '211ca59ce2d0760a752fa2fd087a43e9b61bdd9b', class: "example" }, h("div", { key: '526628247fe9587785c79bef6e16630a988a2af9', class: "bg-light p-16" }, h("div", { key: 'fd9b59d40e805902bd628a04525d27fcbe6d99b1', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '97e0a604d08be01ac7956fe284f2325a680496d2', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '23cf6c4f70ededbfd3347f31adc749e4e411c5b2', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '5d1702074e065740261bb7a86ce18139c2336dd6', class: "example" }, h("div", { key: '1b0fcc5f673339bf8ac84ed317ba4c214f5f2618', class: "bg-white p-16" }, h("div", { key: '708f276b908ee858a634034a0a9d025fe3f0515d', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'cb99b28a2154bf90565480386d8b3b67de0b76bb', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '96f8a61f549c8e83f8a81bfba629a40eb26716a9', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd1cf64b340f6551e4f4a8189c355a22e95d8b3c9', class: "example" }, h("div", { key: '264fc7c03ad4b17a9631d7ede8714f4e91aec931', class: "bg-white p-16" }, h("div", { key: 'a39c949f0b7494bfc08d689e21f84303fd9f9327', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: 'e1b264ef7f8b68fd0dd0f9271d26db65c355497b', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '3dada86d19486aefe9970a5555caa14e2abaad8f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '973e204cb94bda151712b413f38e5a03df46ffdf', class: "example" }, h("div", { key: 'cc9f9d40a9736663c426a9bea6e3060a847a9be5', class: "bg-light p-16" }, h("div", { key: '60bde7eea395d1454e2f9a47535b92752430043f', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '9469d10927d103ceb37b8b192ac220d53db06196', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a4cdf1201a61559fed04eef9c20511a242ba0306', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '6fbc736e477be9d0952053abc687e9b08dcba324', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ae655c9985d173716e6c0ff62683efa887998910', class: "example" }, h("div", { key: 'd1597bb34428986cf534ec74cedfa5656b6fe1c8', class: "bg-accent p-16" }, h("div", { key: 'ed43780afc9ae3e9f85c8168f1182be9a29b36ce', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '1232c6e2018bfc9cb6fc39d076049ce9cd949775', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
     }
     static get is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-card-section/eds-card-section.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
 /**
  * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout of 4 columns (grid-cols-4).
  * Each card within the section can display various properties such as title, description, avatar, and additional content.
@@ -21,24 +22,7 @@ export class EdsCardSection {
      * @returns {any[]} An array of parsed card objects.
      */
     get parsedCards() {
-        // If it's already an array, return it immediately.
-        if (Array.isArray(this.cards)) {
-            return this.cards;
-        }
-        if (typeof this.cards === 'object') {
-            return this.cards;
-        }
-        else if (typeof this.cards === 'string') {
-            try {
-                return JSON.parse(this.cards);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing cards prop:', e);
-                return [];
-            }
-        }
-        return [];
+        return parseData(this.cards);
     }
     /**
      * Renders the card section as a grid layout.
@@ -48,7 +32,7 @@ export class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: '6c7067186b4afd873992008311ef65434e2860ef', class: "w-full" }, h("ul", { key: '186f5dc40e4d68c7565ba104dec900c707a59bc5', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (h("section", { key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8', class: "w-full" }, h("ul", { key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
     static get is() { return "eds-card-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -25,7 +25,7 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: 'ca5d44522f94e9ea009c657c5eae6e357cd0d13a' }, h("eds-link", { key: '563a369e2ed44d08a6dd47922c1c1c888e81543a', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: '48f67648644ae9c8e645791ad3cbba5491866dc5' }, h("eds-link", { key: '50154721f0f44e811ebe362e18bcf8cfb77b8f64', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get is() { return "eds-cookies-preference"; }
     static get encapsulation() { return "shadow"; }