@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/collection/components/eds-link/eds-link.js

@@ -0,0 +1,492 @@
+import { sendAnalytics } from "../../utils/analytics";
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+// Define the CVA for link styles
+const linkStyles = cva([
+    'relative inline-flex justify-center items-center py-8 rounded-sm',
+    'effect-color effect-focus aria-disabled:text-lightest',
+    'aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent'
+], {
+    variants: {
+        intent: {
+            primary: [
+                'border-inside bg-accent hover:bg-accent-dark',
+                'shadow-accent focus:shadow-none aria-disabled:shadow-none'
+            ],
+            secondary: ['border-inside border-inside-inverse bg-strongest hover:bg-strong-dark text-inverse'],
+            tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
+            ghost: ['border-inside hover:bg-darker'],
+            strong: [
+                '!px-0 !py-4 !min-h-20',
+                'before:opacity-0 effect-opacity',
+                'hover:before:opacity-100 focus-visible:before:opacity-0',
+                'aria-disabled:bg-transparent aria-disabled:text-light'
+                // aria-disabled:line-through
+            ],
+            weak: [
+                '!px-0 !py-4 !min-h-20',
+                'text-light hover:text-default',
+                'before:opacity-0 effect-opacity',
+                'hover:before:opacity-100 focus-visible:before:!opacity-0',
+                'aria-disabled:bg-transparent aria-disabled:text-light'
+                // aria-disabled:line-through
+            ],
+            inverse: [
+                '!px-0 !py-4 !min-h-20',
+                'text-inverse',
+                'effect-bg-behind-link before:bg-inverse-softer before:opacity-0 effect-opacity',
+                'hover:before:opacity-100 focus-visible:before:!opacity-0',
+                'aria-disabled:bg-transparent'
+                // aria-disabled:line-through
+            ],
+            blueish: [
+                '!px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4',
+                'effect-focus focus-visible:rounded-xs',
+                'hover:no-underline',
+                'aria-disabled:bg-transparent aria-disabled:no-underline'
+                //aria-disabled:line-through
+            ],
+            underline: [
+                'decoration-accent underline underline-offset-4 !px-0 !py-0',
+                'hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0'
+            ]
+        },
+        iconSmall: {
+            true: '',
+            false: ''
+        },
+        isActive: {
+            true: '',
+            false: ''
+        },
+        hasIcon: {
+            true: '',
+            false: ''
+        },
+        size: {
+            underline: 'f-body-02 ',
+            small: 'min-h-36 f-ui-02 px-12',
+            large: 'min-h-44 f-ui-01 px-16'
+        }
+    },
+    compoundVariants: [
+        {
+            iconSmall: true,
+            size: 'small',
+            class: 'pr-4'
+        },
+        {
+            iconSmall: true,
+            size: 'large',
+            class: 'pr-8'
+        },
+        { intent: 'blueish', hasIcon: true, class: '-mr-4 -top-1' },
+        { intent: 'underline', hasIcon: true, class: '-mr-4 -top-1' },
+        // Active state
+        {
+            intent: 'primary',
+            isActive: true,
+            class: '!bg-accent-dark'
+        },
+        {
+            intent: 'secondary',
+            isActive: true,
+            class: '!bg-strong-dark'
+        },
+        {
+            intent: 'tertiary',
+            isActive: true,
+            class: '!bg-darker'
+        },
+        {
+            intent: 'ghost',
+            isActive: true,
+            class: '!bg-darker'
+        },
+        {
+            intent: 'strong',
+            isActive: true,
+            class: 'before:!opacity-100'
+        },
+        {
+            intent: 'weak',
+            isActive: true,
+            class: 'before:!opacity-100'
+        },
+        {
+            intent: 'inverse',
+            isActive: true,
+            class: 'before:!opacity-100'
+        }
+    ],
+    defaultVariants: {
+        //intent: 'primary',
+        isActive: false,
+        iconSmall: false,
+        size: 'small',
+        hasIcon: false
+    }
+});
+/**
+ * `EdsLink` is a versatile link component offering different styles and behaviors.
+ *
+ * Key Features:
+ * - Customizable visual styles with options for various intents (e.g., primary, secondary, ghost, etc.) and sizes.
+ * - Supports icons, including positioning for small icons alongside text labels.
+ * - Configurable for internal and external links, with options for download and disabled states.
+ * - Emits a custom `matomoEvent` for tracking user interactions.
+ *
+ * This component is designed for flexible navigation and styling, making it suitable for a range of UI needs.
+ */
+export class EdsLink {
+    constructor() {
+        this.parentContext = null; // Accepts the entire event detail or null
+        this.label = undefined;
+        this.intent = undefined;
+        this.icon = undefined;
+        this.iconPos = 'right';
+        this.iconSmall = false;
+        this.size = 'small';
+        this.external = false;
+        this.current = false;
+        this.download = false;
+        this.url = undefined;
+        this.ariaLabel = undefined;
+        this.disabled = false;
+        this.hideLabelOnSmallScreen = false;
+        this.extraClass = undefined;
+    }
+    handleParentContext(event) {
+        if (event.target !== this.el) {
+            // Ignore the event if it's not targeted at this specific instance
+            return;
+        }
+        this.parentContext = event.detail;
+        event.stopPropagation();
+    }
+    handleClick(event) {
+        var _a, _b;
+        if (this.disabled) {
+            // Prevent navigation if the link is disabled
+            event.preventDefault();
+            return;
+        }
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: this.parentContext,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || ((_b = this.ariaLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    getLinkSize() {
+        return this.size;
+    }
+    renderLeftIcon() {
+        if (this.icon && this.iconPos === 'left') {
+            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+              flex inline-flex items-center justify-center
+              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
+            `, icon: this.icon })));
+        }
+        return null;
+    }
+    renderRightIcon() {
+        if (this.icon && this.iconPos === 'right') {
+            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+              flex inline-flex items-center justify-center
+              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
+            `, icon: this.icon })));
+        }
+        return null;
+    }
+    render() {
+        // If the link is disabled, use a <span>; otherwise, use an <a> element.
+        const ComponentType = this.disabled ? 'span' : 'a';
+        const classes = linkStyles({
+            intent: this.intent,
+            size: this.getLinkSize(),
+            iconSmall: this.iconSmall,
+            isActive: this.current,
+            hasIcon: !!this.icon
+        });
+        // If no visible label is provided, ensure ariaLabel is set.
+        const computedAriaLabel = this.ariaLabel || this.label || 'link';
+        const labelClasses = this.hideLabelOnSmallScreen
+            ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
+            : '';
+        return (h(ComponentType, { key: '761ada887164cf469c685196d40dd9931a4db099', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'cdb706513c559552f7cdf0fdaf5b74aac0709f0f', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '8104cef2a013b4bfcbd7a1b2dced4d40594633b6', class: labelClasses }, this.label), this.renderRightIcon())));
+    }
+    static get is() { return "eds-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-link.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The text label for the link."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'ghost'\n    | 'strong'\n    | 'weak'\n    | 'inverse'\n    | 'underline'\n    | 'blueish'",
+                    "resolved": "\"blueish\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual style intent of the link.\nOptions: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'."
+                },
+                "attribute": "intent",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon name to be displayed alongside the label."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconPos": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon position to be displayed alongside the label - left or right."
+                },
+                "attribute": "icon-pos",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "iconSmall": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies if the icon is small.\nDefaults to false."
+                },
+                "attribute": "icon-small",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'large'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the link. Options are 'small' or 'large'."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'small'"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the link points to an external URL.\nDefaults to false."
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "current": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the link is the current/active one.\nDefaults to false."
+                },
+                "attribute": "current",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "download": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the link will initiate a file download.\nDefaults to false."
+                },
+                "attribute": "download",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL the link points to."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The aria-label for accessibility."
+                },
+                "attribute": "aria-label",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the link is disabled. If true, the link will be rendered as a span.\nDefaults to false."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideLabelOnSmallScreen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the label will be hidden on smaller screens."
+                },
+                "attribute": "hide-label-on-small-screen",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "extraClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "extra-class",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "parentContext",
+                "method": "handleParentContext",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/eds-link/eds-link.stories.js

@@ -0,0 +1,86 @@
+export default {
+    title: 'Components/Link',
+    component: 'eds-link',
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label for the link'
+        },
+        intent: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline', 'blueish'],
+            description: 'The intent style of the link'
+        },
+        icon: {
+            control: 'text',
+            description: 'The icon to be displayed next to the label'
+        },
+        iconSmall: {
+            control: 'boolean',
+            description: 'If true, the icon will be small'
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'large'],
+            description: 'The size of the link'
+        },
+        external: {
+            control: 'boolean',
+            description: 'If true, marks the link as external'
+        },
+        current: {
+            control: 'boolean',
+            description: 'If true, marks the link as the current active link'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'If true, disables the link'
+        },
+        url: {
+            control: 'text',
+            description: 'The URL for the link'
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'ARIA label for accessibility'
+        },
+        download: {
+            control: 'boolean',
+            description: 'If true, adds the download attribute to the link'
+        }
+    },
+    args: {
+        label: 'Click Me',
+        intent: 'primary',
+        size: 'large',
+        icon: '',
+        iconSmall: false,
+        external: false,
+        current: false,
+        disabled: false,
+        url: 'https://example.com',
+        ariaLabel: 'Link to example',
+        download: false
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-link
+      label="${args.label}"
+      intent="${args.intent}"
+      size="${args.size}"
+      icon="${args.icon}"
+      icon-small="${args.iconSmall}"
+      external="${args.external}"
+      current="${args.current}"
+      disabled="${args.disabled}"
+      url="${args.url}"
+      aria-label="${args.ariaLabel}"
+      download="${args.download}">
+    </eds-link>`,
+    args: {
+        label: 'Click Me',
+        intent: 'primary',
+        url: 'https://example.com'
+    }
+};

package/dist/collection/components/eds-logo/eds-logo.css

@@ -0,0 +1,47 @@
+.w-\[130px\] {
+  width: 130px;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
+.text-current {
+  color: currentColor;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+.h-full {
+  height: 100%;
+}
+.w-full {
+  width: 100%;
+}
+.flex {
+  display: flex;
+}
+.inline-flex {
+  display: inline-flex;
+}
+
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+
+@media (min-width: 900px) {
+  .lg\:w-\[150px\] {
+    width: 150px;
+  }
+}