@ebrains/components 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,77 @@
+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: '#' }
+    ]
+};

package/dist/collection/shared-ui/eds-header/eds-header.css

@@ -0,0 +1,184 @@
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.bg-inverse {
+  background-color: var(--white);
+}
+
+.bg-dark {
+  background-color: var(--grey-300);
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.h-\[85px\] {
+  height: 85px;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.top-1\/2 {
+  top: 50%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.hidden {
+  display: none;
+}
+
+.gap-x-2 {
+  -moz-column-gap: 0.125rem;
+  column-gap: 0.125rem;
+}
+
+.after\:effect-opacity::after {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.\!text-current {
+  color: currentColor !important;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.after\:\!border-transparent::after {
+  border-color: var(--transparent) !important;
+}
+
+.hover\:after\:\!border-transparent:hover::after {
+  border-color: var(--transparent) !important;
+}
+
+.after\:opacity-0::after {
+  opacity: 0;
+}
+
+.hover\:after\:opacity-100:hover::after {
+  opacity: 1;
+}
+
+.px-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 750px) {
+  .md\:flex {
+    display: flex;
+  }
+
+  .md\:hidden {
+    display: none;
+  }
+}

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

@@ -0,0 +1,183 @@
+import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
+/**
+ * `EdsHeader` is a header component designed for the EBRAINS platform.
+ * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
+ *
+ * Key Features:
+ * - **Logo Link**: Includes a logo that links to the homepage or a specified URL.
+ * - **Primary Navigation**: Displays an array of navigation links for core platform sections.
+ * - **User Authentication Integration**: Supports Keycloak for login and logout, displaying user authentication options when enabled.
+ * - **Mobile-Friendly Menu**: Offers a collapsible mobile menu with additional links, enhancing navigation for smaller screens.
+ * - **Event-Driven Menu Toggle**: Emits a toggle event to handle opening and closing of a fullscreen menu in sync with other components.
+ *
+ * This component is well-suited for creating a unified header across the platform with seamless integration of navigation, authentication, and responsive design elements.
+ */
+export class EdsHeader {
+    constructor() {
+        this.homeUrl = '/';
+        this.links = undefined;
+        this.headerVariant = 'default';
+        this.menuEnabled = false;
+        this.isMenuOpen = false;
+        this.isUserMenuOpen = false;
+        this.isAuthenticated = false;
+    }
+    onAuthStatusChanged(event) {
+        var _a;
+        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+    }
+    componentDidLoad() {
+        const links = this.hostEl.querySelectorAll('eds-link');
+        links.forEach((link) => this.emitContext(link));
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: { componentName: this.hostEl.tagName.toLowerCase(), identifier: null }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    handleToggleMenu() {
+        this.toggleheadermenu.emit(!this.isMenuOpen);
+    }
+    toggleUserMenu() {
+        this.isUserMenuOpen = !this.isUserMenuOpen;
+    }
+    get parsedLinks() {
+        return parseData(this.links);
+    }
+    render() {
+        // Define classes based on headerVariant
+        const variantClasses = {
+            default: 'text-default bg-dark',
+            inverse: 'text-default bg-inverse',
+            strong: 'text-inverse bg-strongest'
+        };
+        const classes = variantClasses[this.headerVariant] || variantClasses.default;
+        // Logo color variant: default and inverse use 'color', strong uses 'color-white'
+        const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
+        return (h("header", { key: '3c6ae4789993e140ee8a00e7f32c8ff3a2793b87', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'a406f073ae110622ad8930c61438b46d16553362', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '19c91de446b76f76e97f160c0af538db2637ffdc', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '921c87b668b25abc8117014880c9669a96c04122', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'b0de4a0eaafb7409eeedc77104b39fed8a55441b', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '2b3d292703b8b7083a7ae1dcfbefbd091d5a744b' }), this.menuEnabled && (h("div", { key: '10d16f0f0ecdc450acf900dd8d7d7b439deb8dcd', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '2e62e0a57bf008d0e566988011beab9a09f7774d', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+    }
+    static get is() { return "eds-header"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-header.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-header.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "homeUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the home logo link.\nThis is the default URL that the logo points to."
+                },
+                "attribute": "home-url",
+                "reflect": true,
+                "defaultValue": "'/'"
+            },
+            "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
+            },
+            "headerVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse' | 'strong'",
+                    "resolved": "\"default\" | \"inverse\" | \"strong\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header style variant: determines text and background colors.\n- \"default\": text-default on bg-dark\n- \"inverse\": text-default on bg-inverse\n- \"strong\": text-inverse on bg-strongest"
+                },
+                "attribute": "header-variant",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "menuEnabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header.\nRequires the <eds-fullscreen-menu> to properly work."
+                },
+                "attribute": "menu-enabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMenuOpen": {},
+            "isUserMenuOpen": {},
+            "isAuthenticated": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "toggleheadermenu",
+                "name": "toggleheadermenu",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event to signal toggle menu action"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "authStatusChanged",
+                "method": "onAuthStatusChanged",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,42 @@
+export default {
+    title: 'Shared Ui/Header/Main',
+    component: 'eds-header',
+    argTypes: {
+        homeUrl: {
+            control: 'text',
+            description: 'URL for the home logo link.'
+        },
+        links: {
+            control: 'object',
+            description: 'An array of link objects for the header navigation'
+        },
+        menuEnabled: {
+            control: 'boolean',
+            description: 'Shows/hides burger menu on small screens.'
+        },
+        headerVariant: {
+            control: { type: 'select' },
+            options: ['default', 'inverse', 'strong'],
+            description: 'The header variant'
+        }
+    },
+    args: {
+        homeUrl: '/',
+        links: [
+            { label: 'About', url: '#' },
+            { label: 'Focus Areas', url: '#' },
+            { label: 'News & Events', url: '#' },
+            { label: 'Contact', url: '#' }
+        ],
+        menuEnabled: false,
+        headerVariant: 'default'
+    }
+};
+export const Default = (args) => `
+    <eds-header
+      home-url="${args.homeUrl}"
+      links='${JSON.stringify(args.links)}'
+      menu-enabled="${args.menuEnabled}"
+      header-variant="${args.headerVariant}"
+    ></eds-header>
+  `;

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.css

@@ -0,0 +1,109 @@
+.fixed {
+    position: fixed;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.w-full {
+    width: 100%;
+}
+
+.bottom-0 {
+    bottom: 0rem;
+}
+
+.bottom-4 {
+    bottom: 0.25rem;
+}
+
+.p-4 {
+    padding: 0.25rem;
+}
+
+.p-6 {
+    padding: 0.375rem;
+}
+
+.p-8 {
+    padding: 0.5rem;
+}
+
+.z-10 {
+    z-index: 10;
+}
+
+.z-\[999999\] {
+    z-index: 999999;
+}
+
+.left-0 {
+    left: 0rem;
+}
+
+.left-1\/2 {
+    left: 50%;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+.-translate-x-1\/2 {
+    --tw-translate-x: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\/2 {
+    --tw-translate-y: -50%;
+    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.flex {
+    display: flex;
+}
+
+.gap-12 {
+    gap: 0.75rem;
+}
+
+.gap-20 {
+    gap: 1.25rem;
+}
+
+.gap-4 {
+    gap: 0.25rem;
+}
+
+@media (min-width: 750px) {
+    .md\:left-1\/2 {
+      left: 50%;
+    }
+    .md\:flex {
+      display: flex;
+    }
+    .md\:hidden {
+      display: none;
+    }
+    .md\:-translate-x-1\/2 {
+      --tw-translate-x: -50%;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    }
+    .md\:-translate-y-1\/2 {
+      --tw-translate-y: -50%;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    }
+  }