@ebrains/components 0.9.0-beta → 0.9.2-beta

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

@@ -1,487 +0,0 @@
-import { h } from "@stencil/core";
-import { sendAnalytics } from "../../utils/analytics";
-import { cva } from "class-variance-authority";
-/**
- * `EdsButton` is a versatile button component designed for a range of actions and interactions in applications.
- * The button offers various customization options for appearance, size, and behavior.
- *
- * Key features include:
- * - Configurable visual styles (`intent`) such as primary, secondary, and ghost.
- * - Loading state indicator and disabled state for control over user interactions.
- * - Optional icon display with customizable position and size.
- * - Support for different element types (`button` or `a`) and pill-shaped buttons.
- * - Emits a custom Matomo event when clicked for tracking interactions.
- *
- * This component is suitable for buttons, links, and other interactive elements within an interface.
- */
-export class EdsButton {
-    constructor() {
-        this.button = cva([
-            'relative inline-flex items-center',
-            'py-8',
-            'effect-focus effect-color',
-            'cursor-pointer',
-            'aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed',
-            'disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'
-        ], {
-            variants: {
-                intent: {
-                    primary: 'bg-accent border-inside hover:bg-accent-dark shadow-accent focus:shadow-none aria-disabled:shadow-none',
-                    secondary: 'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',
-                    tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
-                    ghost: 'border-inside hover:bg-darker',
-                    ghostInverse: 'border-inside hover:bg-dark'
-                },
-                loading: {
-                    true: 'pointer-events-none',
-                    false: ''
-                },
-                iconSmall: {
-                    false: '',
-                    true: ''
-                },
-                size: {
-                    small: 'h-36 f-ui-02',
-                    large: 'h-44 f-ui-01'
-                },
-                iconPos: {
-                    left: 'flex-row-reverse',
-                    right: ''
-                },
-                iconOnly: {
-                    false: '',
-                    true: ''
-                },
-                pill: {
-                    true: 'rounded-full border-inside-pill',
-                    false: 'rounded-sm'
-                }
-            },
-            compoundVariants: [
-                {
-                    size: 'small',
-                    iconOnly: true,
-                    class: 'p-8'
-                },
-                {
-                    size: 'large',
-                    iconOnly: true,
-                    class: 'p-12'
-                },
-                {
-                    size: 'small',
-                    iconOnly: false,
-                    class: 'px-12'
-                },
-                {
-                    size: 'large',
-                    iconOnly: false,
-                    class: 'px-16'
-                },
-                {
-                    iconSmall: true,
-                    iconPos: 'left',
-                    class: 'pl-4',
-                    iconOnly: false
-                },
-                {
-                    iconSmall: true,
-                    iconPos: 'right',
-                    class: 'pr-4',
-                    iconOnly: false
-                },
-                {
-                    iconSmall: true,
-                    iconPos: 'left',
-                    size: 'large',
-                    class: 'pl-8',
-                    iconOnly: false
-                },
-                {
-                    iconSmall: true,
-                    iconPos: 'right',
-                    size: 'large',
-                    class: 'pr-8',
-                    iconOnly: false
-                }
-            ],
-            defaultVariants: {
-                intent: 'secondary',
-                loading: false,
-                iconSmall: false,
-                iconPos: 'right',
-                iconOnly: false,
-                pill: false,
-                size: 'small'
-            }
-        });
-        this.iconCva = cva(['flex inline-flex items-center justify-center'], {
-            variants: {
-                size: {
-                    large: '',
-                    small: ''
-                },
-                iconPos: {
-                    left: '',
-                    right: ''
-                },
-                iconOnly: {
-                    false: '',
-                    true: ''
-                },
-                show: {
-                    false: 'opacity-0',
-                    true: ''
-                }
-            },
-            compoundVariants: [
-                {
-                    size: 'small',
-                    iconPos: 'left',
-                    class: 'mr-4',
-                    iconOnly: false
-                },
-                {
-                    size: 'small',
-                    iconPos: 'right',
-                    class: 'ml-4',
-                    iconOnly: false
-                },
-                {
-                    size: 'large',
-                    iconPos: 'left',
-                    class: 'mr-4',
-                    iconOnly: false
-                },
-                {
-                    size: 'large',
-                    iconPos: 'right',
-                    class: 'ml-4',
-                    iconOnly: false
-                }
-            ],
-            defaultVariants: {
-                iconPos: 'right',
-                size: 'small',
-                iconOnly: false
-            }
-        });
-        this.parentContext = null; // Accepts the entire event detail or null
-        this.label = undefined;
-        this.ariaLabel = 'Button';
-        this.elementType = 'button';
-        this.intent = 'secondary';
-        this.loading = false;
-        this.disabled = false;
-        this.pill = false;
-        this.icon = undefined;
-        this.size = 'small';
-        this.iconPos = 'right';
-        this.iconSmall = false;
-        this.extraClass = undefined;
-        this.triggerClick = 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'
-        });
-        // If an onClick prop is provided, call it
-        if (typeof this.triggerClick === 'function') {
-            this.triggerClick(); // Trigger the passed-in function
-        }
-    }
-    render() {
-        const classes = this.button({
-            intent: this.intent,
-            loading: this.loading,
-            iconPos: this.iconPos,
-            size: this.size,
-            pill: this.pill,
-            iconOnly: !this.label,
-            iconSmall: this.iconSmall
-        });
-        const iconClasses = this.iconCva({
-            size: this.size,
-            iconPos: this.iconPos,
-            iconOnly: !this.label,
-            show: !this.loading
-        });
-        const ElementType = this.elementType;
-        return (h(ElementType, { key: '2e5c212800b80e17830c20e2a75df524027d27b7', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: '45b1ce64e770398893b3402a539e0f3eb5130e27', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '1f627b946a17a045a415cd06f6e18e905acb4847', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '3a584192cefece3ee4a3db63d14ab87b563f358c', class: "loader", style: {
-                border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
-                borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
-            } }))), this.icon ? h("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));
-    }
-    static get is() { return "eds-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label text to be displayed inside the button."
-                },
-                "attribute": "label",
-                "reflect": false
-            },
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The accessible aria-label for the button, used when there is no visible label.\nDefault is \"Button\" to ensure icon-only buttons are announced properly."
-                },
-                "attribute": "aria-label",
-                "reflect": false,
-                "defaultValue": "'Button'"
-            },
-            "elementType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'button' | 'a'",
-                    "resolved": "\"a\" | \"button\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'."
-                },
-                "attribute": "element-type",
-                "reflect": false,
-                "defaultValue": "'button'"
-            },
-            "intent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'",
-                    "resolved": "\"ghost\" | \"ghostInverse\" | \"primary\" | \"secondary\" | \"tertiary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The visual intent or style of the button.\nOptions include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'."
-                },
-                "attribute": "intent",
-                "reflect": false,
-                "defaultValue": "'secondary'"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean indicating whether the button is in a loading state."
-                },
-                "attribute": "loading",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean indicating whether the button is disabled."
-                },
-                "attribute": "disabled",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "pill": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean to determine if the button should have a pill shape (rounded)."
-                },
-                "attribute": "pill",
-                "reflect": false,
-                "defaultValue": "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 inside the button. Assumes a string for the icon name."
-                },
-                "attribute": "icon",
-                "reflect": false
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'large'",
-                    "resolved": "\"large\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The size of the button. Options are 'small' or 'large'. Default is 'small'."
-                },
-                "attribute": "size",
-                "reflect": false,
-                "defaultValue": "'small'"
-            },
-            "iconPos": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'left' | 'right'",
-                    "resolved": "\"left\" | \"right\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The position of the icon inside the button. Options are 'left' or 'right'. Default is '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": "A boolean indicating whether a smaller icon size should be used."
-                },
-                "attribute": "icon-small",
-                "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
-            },
-            "triggerClick": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "() => void",
-                    "resolved": "() => void",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Custom click handler passed to the button."
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "parentContext",
-                "method": "handleParentContext",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

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

@@ -1,47 +0,0 @@
-export default {
-    title: 'Components/Button',
-    component: 'eds-button',
-    argTypes: {
-        label: { control: 'text' },
-        ariaLabel: { control: 'text' },
-        elementType: { control: 'select', options: ['button', 'a', 'div'] },
-        intent: { control: 'select', options: ['primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'] },
-        loading: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        pill: { control: 'boolean' },
-        icon: { control: 'text' },
-        iconPos: { control: 'select', options: ['left', 'right'] },
-        iconSmall: { control: 'boolean' },
-        size: { control: 'select', options: ['small', 'large'] },
-        triggerClick: { action: 'clicked' }
-    },
-    args: {
-        label: 'Default Button',
-        ariaLabel: 'Accessible label for the button',
-        elementType: 'button',
-        intent: 'primary',
-        loading: false,
-        disabled: false,
-        pill: false,
-        icon: '',
-        iconPos: 'right',
-        iconSmall: false,
-        size: 'large',
-        triggerClick: undefined
-    }
-};
-export const Default = (args) => `
-  <eds-button 
-    label="${args.label}" 
-    aria-label="${args.ariaLabel || args.label}"
-    element-type="${args.elementType}"
-    intent="${args.intent}"
-    loading="${args.loading}"
-    disabled="${args.disabled}"
-    pill="${args.pill}"
-    icon="${args.icon}"
-    icon-pos="${args.iconPos}"
-    icon-small="${args.iconSmall}"
-    size="${args.size}"
-  ></eds-button>
-`;

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.css

@@ -1,41 +0,0 @@
-  .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-light {
-    font-family: var(--f-ui-03-light-fontFamily);
-    font-weight: var(--f-ui-03-light-fontWeight);
-    font-size: var(--f-ui-03-light-fontSize);
-    line-height: var(--f-ui-03-light-lineHeight);
-    letter-spacing: var(--f-ui-03-light-letterSpacing);
-  }
-  .text-light {
-    color: var(--grey-700);
-  }
-  .line-clamp-1 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
-  .line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
-  .line-clamp-4 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 4;
-  }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js

@@ -1,113 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * `eds-card-desc` is a simple component that renders a card description.
- *
- * It displays a block of text with optional truncation applied using a CSS line clamp.
- * You can customize the description styling via the `descClass` property and control
- * whether or not the text is truncated and to how many lines.
- *
- */
-/**
- * @internal
- */
-export class EdsCardDesc {
-    constructor() {
-        this.description = undefined;
-        this.descClass = 'f-ui-03-light';
-        this.truncate = true;
-        this.truncateLines = '3';
-    }
-    getTruncateClass() {
-        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
-    }
-    render() {
-        return (h("p", { key: '96ba520be4ef9acf871a6e992d5ea74aaf17c962', class: `text-light ${this.descClass}` }, h("span", { key: '951358bd0c992426175e3c1b3c580f2f9be4027f', class: this.getTruncateClass() }, this.description)));
-    }
-    static get is() { return "eds-card-desc"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-card-desc.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-card-desc.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The description text to be displayed inside the card."
-                },
-                "attribute": "description",
-                "reflect": false
-            },
-            "descClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A custom CSS class to style the description text.\nDefault is 'f-ui-03-light'."
-                },
-                "attribute": "desc-class",
-                "reflect": false,
-                "defaultValue": "'f-ui-03-light'"
-            },
-            "truncate": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A boolean indicating whether the description should be truncated.\nDefault is `true`."
-                },
-                "attribute": "truncate",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "truncateLines": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The number of lines to truncate the description to.\nDefault is 3 lines."
-                },
-                "attribute": "truncate-lines",
-                "reflect": false,
-                "defaultValue": "'3'"
-            }
-        };
-    }
-}