@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,164 @@
+import { h } from "@stencil/core";
+import { toast } from "../../utils/toastManager";
+import { matomoOptIn } from "../../../../../../../packages/utils/src/index";
+/**
+ * A Stencil component for displaying a Matomo analytics consent notice.
+ * Provides users with the option to opt in or opt out of anonymous analytics.
+ */
+export class EdsMatomoNotice {
+    constructor() {
+        this.title = 'Analytics Consent';
+        this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
+        this.showNotice = true;
+    }
+    /**
+     * Lifecycle method called before the component is rendered.
+     * Checks for the presence of the "mtm_consent" cookie to determine
+     * if the notice should be displayed.
+     */
+    componentWillLoad() {
+        this.checkConsentCookie();
+    }
+    /**
+     * Lifecycle method called after the component has been rendered.
+     * Emits `parentContext` events for each `eds-button` in the shadow DOM.
+     */
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((b) => {
+            this.emitContext(b);
+        });
+    }
+    /**
+     * Emits a custom `parentContext` event for a given button element.
+     * This can be used to provide context information about the component.
+     *
+     * @param linkElement - The button 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);
+    }
+    /**
+     * Checks if the Matomo "mtm_consent" cookie exists in the browser.
+     * If the cookie is found, the notice is hidden.
+     */
+    checkConsentCookie() {
+        const consentCookie = document.cookie.split('; ').find((row) => row.startsWith('mtm_consent='));
+        //this.showNotice = !consentCookie;
+        const sessionDeferred = sessionStorage.getItem('matomo-deferred');
+        this.showNotice = !consentCookie && !sessionDeferred;
+    }
+    /**
+     * Handles user consent for analytics tracking.
+     * Calls the `matomoOptIn` utility and shows a success toast notification.
+     */
+    optInAnalytics() {
+        matomoOptIn();
+        toast.show('You have opted in to analytics.', 'success');
+        this.hideNotice();
+    }
+    /**
+     * Handles user opt-out from analytics tracking.
+     * Calls the `matomoOptOut` utility and shows a warning toast notification.
+     
+    private optOutAnalytics() {
+      matomoOptOut();
+      toast.show('You have opted out of analytics.', 'warning');
+      this.hideNotice();
+    }*/
+    /**
+     * Handles "Ask me later" action by storing a session storage entry
+     * and hiding the notice for the rest of the session.
+     */
+    deferDecision() {
+        sessionStorage.setItem('matomo-deferred', 'true');
+        toast.show('You can decide later.', 'warning');
+        this.hideNotice();
+    }
+    /**
+     * Hides the notice by updating the `showNotice` state.
+     */
+    hideNotice() {
+        this.showNotice = false;
+    }
+    /**
+     * Renders the Matomo consent notice with user options.
+     * Includes an accordion for the description and two buttons for user consent.
+     */
+    render() {
+        if (!this.showNotice) {
+            return null;
+        }
+        return (h("div", { class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.description, switchBg: true, expanded: true }, h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "Yes, I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() })))));
+    }
+    static get is() { return "eds-matomo-notice"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-matomo-notice.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-matomo-notice.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'Analytics Consent'"
+                        }],
+                    "text": "The title displayed in the notice."
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "'Analytics Consent'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'"
+                        }],
+                    "text": "The description displayed in the notice.\nExplains the purpose of collecting analytics data."
+                },
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showNotice": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.stories.js

@@ -0,0 +1,34 @@
+export default {
+    title: 'Shared UI/Matomo Notice',
+    component: 'eds-matomo-notice',
+    argTypes: {
+        title: {
+            control: 'text',
+            description: 'The title displayed in the notice.'
+        },
+        description: {
+            control: 'text',
+            description: 'The description explaining the purpose of collecting analytics data.'
+        },
+        showNotice: {
+            control: 'boolean',
+            description: 'Controls whether the notice is displayed.'
+        }
+    },
+    args: {
+        title: 'Analytics Consent',
+        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-matomo-notice 
+        title="${args.title}" 
+        description="${args.description}">
+      </eds-matomo-notice>
+    `,
+    args: {
+        title: 'Analytics Consent',
+        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
+    }
+};

package/dist/collection/shared-ui/eds-social-networks/eds-social-network.css

@@ -0,0 +1,124 @@
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+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;
+}
+
+.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);
+}
+
+.f-ui-02-light {
+    font-family: var(--f-ui-02-light-fontFamily);
+    font-weight: var(--f-ui-02-light-fontWeight);
+    font-size: var(--f-ui-02-light-fontSize);
+    line-height: var(--f-ui-02-light-lineHeight);
+    letter-spacing: var(--f-ui-02-light-letterSpacing);
+}
+
+.f-ui-03 {
+    font-family: var(--f-ui-03-fontFamily);
+    font-weight: var(--f-ui-03-fontWeight);
+    font-size: var(--f-ui-03-fontSize);
+    line-height: var(--f-ui-03-lineHeight);
+    letter-spacing: var(--f-ui-03-letterSpacing);
+}
+
+.mt-12 {
+    margin-top: 0.75rem;
+}
+
+.mt-16 {
+    margin-top: 1rem;
+}
+
+.inline {
+    display: inline;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.gap-4 {
+    gap: 0.25rem;
+}
+
+.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);
+}
+
+.text-light {
+    color: var(--grey-700);
+}
+
+.text-lighter {
+    color: var(--grey-600);
+}
+
+.hover\:text-default:hover {
+    color: var(--black);
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.rounded-sm {
+    border-radius: 8px;
+}

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+/**
+ * Component representing a list of social network links for EBRAINS.
+ * Each link directs users to EBRAINS' profiles on various social networks.
+ */
+export class EdsSocialNetwork {
+    constructor() {
+        /**
+         * Array of social network objects, each containing label, URL, and icon.
+         * These are used to render the social network links.
+         *
+         * @private
+         * @type {SocialNetworks[]}
+         */
+        this.socialNetworks = [
+            {
+                label: 'Twitter',
+                url: 'https://twitter.com/ebrains_eu',
+                icon: 'twitter'
+            },
+            {
+                label: 'Linkedin',
+                url: 'https://www.linkedin.com/company/ebrains-eu/about/',
+                icon: 'linkedin'
+            },
+            {
+                label: 'Facebook',
+                url: 'https://www.facebook.com/people/Ebrains_eu/100046659909324/',
+                icon: 'facebook'
+            },
+            {
+                label: 'Youtube',
+                url: 'https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ',
+                icon: 'youtube'
+            },
+            {
+                label: 'Mastodon',
+                url: 'https://mastodon.social/@ebrains',
+                icon: 'mastodon'
+            },
+            {
+                label: 'Bluesky',
+                url: 'https://bsky.app/profile/ebrains.bsky.social',
+                icon: 'bluesky'
+            }
+        ];
+        this.title = 'Follow EBRAINS to keep up-to-date';
+    }
+    /**
+     * Renders the component's HTML structure with links to EBRAINS social profiles.
+     * Each social network link uses the `eds-link` component with specific classes and styles.
+     *
+     * @returns {JSX.Element} The rendered JSX for the component.
+     */
+    render() {
+        return (h("div", { key: 'f9096e036107d0b61ac3351194dbcb1747637707' }, h("p", { key: 'c40797bdc36e4e9349005e0e6de2ee0a49c511a4', class: "f-ui-02" }, this.title), h("ul", { key: '62eb31dc0ce98e3c536985d193472443275f3129', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+    }
+    static get is() { return "eds-social-networks"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-social-network.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-social-network.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Social Network custom title to display"
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "'Follow EBRAINS to keep up-to-date'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,213 @@
+import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+/**
+ * `EdsTabs` is a tabs component that renders a navigational tab bar.
+ * Each tab can be configured with various properties such as label, URL, active state, and more.
+ * It includes interactive features like handling tab clicks, scrolling to the active tab,
+ * and emitting events for tab changes and analytics tracking.
+ *
+ * This component is ideal for building a customizable tab navigation system with accessibility features
+ * and is designed to fit seamlessly into any layout.
+ */
+export class EdsTabs {
+    constructor() {
+        // cva configuration
+        this.tabCva = cva([
+            'relative px-16 py-12',
+            'f-ui-03 whitespace-nowrap',
+            'effect-color',
+            'focus-visible:text-default hover:text-default',
+            'border-2',
+            "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0",
+            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+        ], {
+            variants: {
+                position: {
+                    left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
+                    right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
+                    center: '',
+                    first: 'rounded-t-lg'
+                },
+                active: {
+                    false: 'text-lighter bg-dark hover:bg-darker border-softest',
+                    true: [
+                        'bg-default text-default z-99',
+                        'rounded-t-lg',
+                        "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",
+                        'border-[#d2d2d2]'
+                    ]
+                }
+            }
+        });
+        this.id = undefined;
+        this.navAriaLabel = 'Tabs';
+        this.tabs = undefined;
+        this.parsedTabs = [];
+        this.activeIndex = -1;
+    }
+    componentWillLoad() {
+        this.parseTabs();
+        this.setActiveIndex();
+        this.tabChange.emit({ tabId: this.id, index: 0 });
+    }
+    parseTabs() {
+        try {
+            this.parsedTabs = JSON.parse(this.tabs);
+        }
+        catch (error) {
+            //console.error('Invalid JSON format for tabs:', error);
+            this.parsedTabs = [];
+        }
+    }
+    componentDidLoad() {
+        this.scrollToActiveTab();
+    }
+    setActiveIndex() {
+        this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
+    }
+    scrollToActiveTab() {
+        var _a;
+        const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
+        if (activeTab) {
+            setTimeout(() => {
+                activeTab.scrollIntoView({
+                    inline: 'center',
+                    block: 'nearest'
+                });
+            }, 316);
+        }
+    }
+    getTabOptions(active, index) {
+        const position = active
+            ? 'center'
+            : this.activeIndex === -1 && index === 0
+                ? 'first'
+                : index < this.activeIndex
+                    ? 'left'
+                    : 'right';
+        return Object.assign({ class: this.tabCva({
+                active,
+                position
+            }), style: {
+                zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+            } }, (active ? { 'data-tab-active': 'true' } : {}));
+    }
+    handleTabClick(index, tabLabel) {
+        // Update the active index and set all tabs' active state accordingly
+        this.activeIndex = index;
+        this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
+        this.tabChange.emit({ tabId: this.id, index: index, name: tabLabel });
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (h("div", { key: '826fb378cc685039ef3dad47d927ec0398606c9b', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '7065bfd5e3dad0386af8bf5741a6517c5cf73db4', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '41b08427b7c265c70ad506e87733592b28addeda', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+            //const TabComponent = tab.active ? 'span' : 'a';
+            const tabProps = this.getTabOptions(tab.active, index);
+            return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));
+        })))));
+    }
+    static get is() { return "eds-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Tabs identifier"
+                },
+                "attribute": "id",
+                "reflect": false
+            },
+            "navAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the navigation"
+                },
+                "attribute": "nav-aria-label",
+                "reflect": false,
+                "defaultValue": "'Tabs'"
+            },
+            "tabs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "JSON string for tabs data"
+                },
+                "attribute": "tabs",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedTabs": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabChange",
+                "name": "tabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ tabId: string; index: number; name?: string }",
+                    "resolved": "{ tabId: string; index: number; name?: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "tabs",
+                "methodName": "parseTabs"
+            }];
+    }
+}

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

@@ -0,0 +1,49 @@
+export default {
+    title: 'Shared Ui/Tabs',
+    component: 'eds-tabs',
+    argTypes: {
+        tabs: {
+            control: 'text',
+            defaultValue: JSON.stringify([
+                { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
+                { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
+                {
+                    label: 'Settings',
+                    url: '#',
+                    active: false,
+                    ariaLabel: 'Settings Tab'
+                }
+            ])
+        }
+    }
+};
+const Template = (args) => `
+    <eds-tabs 
+      tabs='${args.tabs}'
+    ></eds-tabs>
+  `;
+export const Default = Template.bind({});
+Default.args = {
+    tabs: JSON.stringify([
+        { label: 'Home', url: '#', active: true, ariaLabel: 'Home Tab' },
+        { label: 'Profile', url: '#', active: false, ariaLabel: 'Profile Tab' },
+        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
+    ])
+};
+export const ProfileActive = Template.bind({});
+ProfileActive.args = {
+    tabs: JSON.stringify([
+        { label: 'Home', url: '#', active: false, ariaLabel: 'Home Tab' },
+        { label: 'Profile', url: '#', active: true, ariaLabel: 'Profile Tab' },
+        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
+    ])
+};
+export const CustomTabs = Template.bind({});
+CustomTabs.args = {
+    tabs: JSON.stringify([
+        { label: 'Dashboard', url: '#', active: true, ariaLabel: 'Dashboard Tab' },
+        { label: 'Reports', url: '#', active: false, ariaLabel: 'Reports Tab' },
+        { label: 'Analytics', url: '#', active: false, ariaLabel: 'Analytics Tab' },
+        { label: 'Settings', url: '#', active: false, ariaLabel: 'Settings Tab' }
+    ])
+};