@ebrains/components 0.9.2-beta → 0.9.3-beta

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

@@ -0,0 +1,487 @@
+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: '9911991b5a3c04a8b4d5f8102967507d4c916737', "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: '8f861e8a83adbd194c1d3ad00070c2621577df92', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: 'b09df86e209b75874d5b4757feb1b13434bf0192', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '1a6443b74063072fff8944aef25a6231a28340cf', 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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,41 @@
+  .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

@@ -0,0 +1,113 @@
+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: '3ea345f69bed29135df8231c79eaea0f06e813df', class: `text-light ${this.descClass}` }, h("span", { key: '99c383485ec0852be81a05fe0999cb429fee4a27', 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'"
+            }
+        };
+    }
+}