@ebrains/components 0.9.0-beta → 0.9.2-beta

package/dist/collection/shared-ui/eds-frame/eds-frame.js

@@ -1,234 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * `EdsFrame` is a versatile iframe container component that can display external content
- * such as Storybook previews or other embedded resources. It includes customizable labels,
- * sizing, error handling, and an optional link to the external content.
- *
- * Key Features:
- * - Displays an iframe with customizable dimensions (`auto`, `small`, `medium`, `large`).
- * - Optional link (`urlLink`) that directs to the content in a new tab.
- * - Handles loading errors gracefully by displaying a fallback message.
- * - Emits a `matomoEvent` with category and context information on click.
- * - Configurable appearance with intent (`primary`, `secondary`, etc.) and background options.
- *
- * Ideal for showcasing embedded content within an application, especially when previewing external resources.
- */
-/**
- * @internal
- */
-export class EdsFrame {
-    constructor() {
-        this.frameLabel = undefined;
-        this.frameSrc = undefined;
-        this.urlLabel = 'Open';
-        this.errorMessage = 'Could not load the requested content. Please check the URL or try again later.';
-        this.url = undefined;
-        this.intent = 'strong';
-        this.size = 'auto';
-        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 [
-            'bg-inverse min-h-156 rounded border-softer effect-focus-within relative flex grow flex-col border-2',
-            'w-full h-auto'
-        ].join(' ');
-    }
-    getFrameHeight() {
-        switch (this.size) {
-            case 'sm':
-                return '100px';
-            case 'md':
-                return '200px';
-            case 'lg':
-                return '400px';
-            case 'xl':
-                return '700px';
-            default:
-                return 'auto';
-        }
-    }
-    async checkIframeAvailability() {
-        try {
-            const response = await fetch(this.frameSrc, { method: 'GET' });
-            if (!response.ok) {
-                throw new Error('Failed to load');
-            }
-        }
-        catch (error) {
-            this.iframeError = true;
-        }
-    }
-    render() {
-        return (h("div", { key: 'b26229611868992daf5f4ca5037e1e10b2540ee5', class: this.articleClasses() }, h("div", { key: '4cf9ff78b27ce7f88db50feccc9d267c2e727a2c', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'bf2c1607d3fcbbf152691ec4e6134e737f6d1082', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: 'd9f059766c509d7325ea734c63e29d7995cc8065', 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": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label displayed at the top left of the frame."
-                },
-                "attribute": "frame-label",
-                "reflect": false
-            },
-            "frameSrc": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The frame src url to be displayed."
-                },
-                "attribute": "frame-src",
-                "reflect": false
-            },
-            "urlLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The label for the external link at the top right of the frame. Defaults to 'Open'."
-                },
-                "attribute": "url-label",
-                "reflect": false,
-                "defaultValue": "'Open'"
-            },
-            "errorMessage": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The error message displayed if the iframe fails to load."
-                },
-                "attribute": "error-message",
-                "reflect": false,
-                "defaultValue": "'Could not load the requested content. Please check the URL or try again later.'"
-            },
-            "url": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The base URL of the external reference."
-                },
-                "attribute": "url",
-                "reflect": false
-            },
-            "intent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'underline'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The intent for styling the link (e.g., primary, secondary, tertiary, etc.)."
-                },
-                "attribute": "intent",
-                "reflect": false,
-                "defaultValue": "'strong'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'auto' | 'sm' | 'md' | 'lg' | 'xl'",
-                    "resolved": "\"auto\" | \"lg\" | \"md\" | \"sm\" | \"xl\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The size of the frame controlling its height.\nOptions: 'auto', 'sm', 'md', 'lg', 'xl'"
-                },
-                "attribute": "size",
-                "reflect": false,
-                "defaultValue": "'auto'"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "iframeError": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-}

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

@@ -1,52 +0,0 @@
-import { html } from "lit-html";
-export default {
-    title: 'Shared Ui/Frame',
-    component: 'eds-frame',
-    argTypes: {
-        frameLabel: {
-            control: 'text',
-            description: 'The label of the frame. This is displayed as the title.'
-        },
-        frameSrc: {
-            control: 'text',
-            description: 'The source of the frame.'
-        },
-        urlLabel: {
-            control: 'text',
-            description: 'The label for the URL link.'
-        },
-        url: {
-            control: 'text',
-            description: 'The base URL for the reference (e.g., https://gitlab-org.gitlab.io/gitlab-ui).'
-        },
-        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, frameSrc, urlLabel, url, intent, size }) => html `
-  <eds-frame
-    frame-label=${frameLabel}
-    frame-src=${frameSrc}
-    url-label=${urlLabel}
-    url=${url}
-    intent=${intent}
-    size=${size}
-  ></eds-frame>
-`;
-export const Default = Template.bind({});
-Default.args = {
-    frameLabel: 'Default Frame',
-    frameSrc: 'https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-accordion--docs',
-    urlLabel: 'Visit Storybook',
-    url: 'https://gitlab-org.gitlab.io/gitlab-ui',
-    intent: 'primary',
-    size: 'xl'
-};

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.css

@@ -1,120 +0,0 @@
-.bg-default {
-    background-color: var(--grey-200);
-  }
-  .bg-darker {
-    background-color: var(--grey-400);
-  }
-  .bg-inverse {
-    background-color: var(--white);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .fixed {
-    position: fixed;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .relative {
-    position: relative;
-  }
-  .sticky {
-    position: sticky;
-  }
-  .inset-0 {
-    inset: 0rem;
-  }
-  .z-\[999999\] {
-    z-index: 999999;
-  }
-  .overflow-y-scroll {
-    overflow-y: scroll;
-  }
-  .flex {
-    display: flex;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .min-h-full {
-    min-height: 100%;
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .w-full {
-    width: 100%;
-  }
-  .top-0 {
-    top: 0rem;
-  }
-  .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .mt-auto {
-    margin-top: auto;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .justify-between {
-    justify-content: space-between;
-  }
-  .mr-auto {
-    margin-right: auto;
-  }
-  .w-\[200px\] {
-    width: 200px;
-  }
-  .h-\[85px\] {
-    height: 85px;
-  }
-  .px-16 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  .py-16 {
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-  }
-  .mt-28 {
-    margin-top: 1.75rem;
-  }
-  .gap-y-8 {
-    row-gap: 0.5rem;
-  }
-  .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);
-  }
-  .effect-focus {
-    outline-width: 3px;
-    outline-offset: 2px;
-    outline-color: var(--green-500);
-  }
-  .rounded-xs {
-    border-radius: 4px;
-  }
-  .f-heading-02 {
-    font-family: var(--f-heading-02-fontFamily);
-    font-weight: var(--f-heading-02-fontWeight);
-    font-size: var(--f-heading-02-fontSize);
-    line-height: var(--f-heading-02-lineHeight);
-    letter-spacing: var(--f-heading-02-letterSpacing);
-  }
-  .hover\:text-lighter:hover {
-    color: var(--grey-600);
-  }
-  .w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -1,192 +0,0 @@
-import { h } from "@stencil/core";
-import { parseData } from "../../utils/sharedUtils";
-/**
- * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
- * It provides a responsive, full-window overlay menu with navigation links and additional options.
- * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
- *
- * ## Key Features
- *
- * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
- * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
- * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
- * - **Footer Integration**: Optionally displays social links and a customizable footer section within the fullscreen menu.
- */
-export class EdsFullscreenMenu {
-    constructor() {
-        this.links = undefined;
-        this.menuLinks = undefined;
-        this.homeUrl = '/';
-        this.inverseHeader = false;
-        this.isMenuOpen = false;
-    }
-    /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
-     */
-    handleToggleMenu(event) {
-        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
-    }
-    /** Opens the menu */
-    openMenu() {
-        this.isMenuOpen = true;
-    }
-    /** Closes the menu */
-    closeMenu() {
-        this.isMenuOpen = false;
-        this.menuClose.emit();
-    }
-    // Lifecycle method to add the resize event listener when component loads
-    componentDidLoad() {
-        window.addEventListener('resize', this.handleResize.bind(this));
-    }
-    // Lifecycle method to remove the resize event listener when component unloads
-    disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize.bind(this));
-    }
-    // Function to close the menu if screen width is larger than a defined breakpoint (1024px)
-    handleResize() {
-        if (window.innerWidth >= 1024) {
-            this.isMenuOpen = false;
-        }
-    }
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
-     */
-    get parsedLinks() {
-        return parseData(this.links);
-    }
-    /**
-     * Parses the `menuLinks` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `menuLinks` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed menu link objects
-     */
-    get parsedMenuLinks() {
-        return parseData(this.menuLinks);
-    }
-    render() {
-        return this.isMenuOpen ? (h("div", { class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" }))))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
-    }
-    static get is() { return "eds-fullscreen-menu"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-fullscreen-menu.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-fullscreen-menu.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "links": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
-                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the links for primary navigation.\nEach link should include `label`, `url`, and optionally an `icon`."
-                },
-                "attribute": "links",
-                "reflect": false
-            },
-            "menuLinks": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the extra menu links a user wants for smaill screens navigation.\nEach link should include `label`, `url`."
-                },
-                "attribute": "menu-links",
-                "reflect": false
-            },
-            "homeUrl": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "home-url",
-                "reflect": false,
-                "defaultValue": "'/'"
-            },
-            "inverseHeader": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "inverse-header",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isMenuOpen": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "menuClose",
-                "name": "menuClose",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event to signal menu open/close actions"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "toggleMenu",
-                "method": "handleToggleMenu",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.stories.js

@@ -1,77 +0,0 @@
-export default {
-    title: 'Shared UI/Header/Fullscreen Menu',
-    // We set a primary component here for documentation purposes.
-    // (Note: The story renders both eds-header and eds-fullscreen-menu.)
-    component: 'eds-fullscreen-menu',
-    argTypes: {
-        menuEnabled: {
-            control: 'boolean',
-            description: 'Enable menu toggle in the header',
-            defaultValue: true
-        },
-        headerLinks: {
-            control: 'object',
-            description: 'An array of link objects for the header navigation',
-            defaultValue: [
-                { label: 'About', url: '#' },
-                { label: 'Focus Areas', url: '#' },
-                { label: 'News & Events', url: '#' },
-                { label: 'Contact', url: '#' }
-            ]
-        },
-        menuLinks: {
-            control: 'object',
-            description: 'An array of link objects for the fullscreen menu',
-            defaultValue: [
-                { label: 'About', url: '#' },
-                { label: 'Focus Areas', url: '#' },
-                { label: 'News & Events', url: '#' },
-                { label: 'Contact', url: '#' }
-            ]
-        }
-    }
-};
-const Template = (args) => {
-    // Create a container element to host both components
-    const container = document.createElement('div');
-    container.style.position = 'relative'; // ensure proper stacking context
-    // Create an informational paragraph
-    const infoMessage = document.createElement('p');
-    infoMessage.textContent = 'Change the window width to see the menu burger. Then click on it to see the content';
-    infoMessage.style.fontFamily = 'sans-serif';
-    infoMessage.style.margin = '1rem 0';
-    infoMessage.style.fontWeight = 'bold';
-    // Append the info message to the container
-    container.appendChild(infoMessage);
-    // Render the header using property binding for the links by passing a JSON string.
-    // (You can update your components to also accept objects directly if desired.)
-    container.innerHTML += `
-      <eds-header
-        menu-enabled="${args.menuEnabled}"
-        links='${JSON.stringify(args.headerLinks)}'
-      ></eds-header>
-      <eds-fullscreen-menu
-        links='${JSON.stringify(args.menuLinks)}'
-      ></eds-fullscreen-menu>
-    `;
-    // Optionally, you might add some inline styling or scripts to simulate the header’s menu toggle behavior.
-    // For example, if your header emits an event when the menu toggle is clicked, you can listen for that event
-    // and programmatically show/hide the fullscreen menu. That logic would be implemented in your component.
-    return container;
-};
-export const Default = Template.bind({});
-Default.args = {
-    menuEnabled: true,
-    headerLinks: [
-        { label: 'About', url: '#' },
-        { label: 'Focus Areas', url: '#' },
-        { label: 'News & Events', url: '#' },
-        { label: 'Contact', url: '#' }
-    ],
-    menuLinks: [
-        { label: 'About', url: '#' },
-        { label: 'Focus Areas', url: '#' },
-        { label: 'News & Events', url: '#' },
-        { label: 'Contact', url: '#' }
-    ]
-};