@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,204 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const alertStyles = cva(['w-full bg-dark rounded-lg border-inside after:border-softest after:rounded-lg'], {
+    variants: {
+        intent: {
+            default: '',
+            warning: 'bg-warning',
+            error: 'bg-error',
+            success: 'bg-success'
+        },
+        direction: {
+            vertical: 'space-y-12',
+            horizontal: 'flex flex-row items-center justify-between gap-x-12'
+        },
+        withBtn: {
+            false: '',
+            true: ''
+        }
+    },
+    compoundVariants: [
+        {
+            direction: 'horizontal',
+            withBtn: true,
+            class: 'px-20 pr-12 py-12'
+        },
+        {
+            direction: 'horizontal',
+            withBtn: false,
+            class: 'p-20'
+        },
+        {
+            direction: 'vertical',
+            withBtn: true,
+            class: 'p-16'
+        },
+        {
+            direction: 'vertical',
+            withBtn: false,
+            class: 'px-12 py-20'
+        }
+    ],
+    defaultVariants: {
+        intent: 'default',
+        direction: 'horizontal'
+    }
+});
+/**
+ * `EdsAlert` is a versatile alert component designed for displaying contextual messages.
+ * This component offers various configuration options to support different use cases, making it ideal for notifying users of information, warnings, errors, or successes.
+ *
+ * Key features include:
+ * - Customizable alert message with different visual intents (`default`, `warning`, `error`, `success`).
+ * - Configurable layout direction (`horizontal` or `vertical`) to accommodate various design requirements.
+ * - Optional pressable element (link or button) that allows users to interact with the alert.
+ * - Emits context events to allow parent components to track alert interactions.
+ *
+ * This component is styled with predefined CSS classes to ensure consistent appearance across different alert types and layout configurations.
+ */
+export class EdsAlert {
+    constructor() {
+        this.message = undefined;
+        this.pressableLabel = undefined;
+        this.pressableUrl = undefined;
+        this.direction = 'horizontal';
+        this.intent = 'default';
+        this.withBtn = false;
+    }
+    componentWillLoad() {
+        this.withBtn = Boolean(this.pressableLabel);
+    }
+    componentDidLoad() {
+        // Query all 'eds-link' elements, including those inside shadow DOM
+        const links = this.el.shadowRoot.querySelectorAll('eds-link');
+        links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    render() {
+        return (h("div", { key: '99518cd34cbfc04691f2f827b53105ef88c03af8', class: alertStyles({
+                intent: this.intent,
+                direction: this.direction,
+                withBtn: this.withBtn
+            }), role: "alert" }, h("p", { key: '7eca97c849473bb4c8472d11243dc5eb9dded61f', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
+            (this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary" })) : null)));
+    }
+    static get is() { return "eds-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main message or text to be displayed in the alert."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "pressableLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the alert includes a pressable element, such as a button or link."
+                },
+                "attribute": "pressable-label",
+                "reflect": false
+            },
+            "pressableUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL for the pressable element if it is a link."
+                },
+                "attribute": "pressable-url",
+                "reflect": false
+            },
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The layout direction of the alert content, either 'horizontal' or 'vertical'."
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'warning' | 'error' | 'success'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual intent or style of the alert, indicating the alert type."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "withBtn": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,52 @@
+export default {
+    title: 'Components/Alert',
+    component: 'eds-alert',
+    argTypes: {
+        message: {
+            control: 'text',
+            description: 'The alert message content'
+        },
+        intent: {
+            control: 'select',
+            options: ['default', 'warning', 'error', 'success'],
+            description: 'The intent style of the alert'
+        },
+        direction: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'The layout direction of the alert content'
+        },
+        pressableLabel: {
+            control: 'text',
+            description: 'Label for the pressable element (if enabled)'
+        },
+        pressableUrl: {
+            control: 'text',
+            description: 'URL for the pressable link (only if pressable is true and URL is provided)'
+        }
+    },
+    args: {
+        message: 'This is an alert message.',
+        intent: 'default',
+        direction: 'horizontal',
+        pressableLabel: '',
+        pressableUrl: ''
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-alert 
+        message="${args.message}" 
+        intent="${args.intent}" 
+        direction="${args.direction}"
+        pressable-label="${args.pressableLabel}" 
+        pressable-url="${args.pressableUrl}">
+      </eds-alert>`,
+    args: {
+        message: 'This is an alert message.',
+        intent: 'default',
+        direction: 'horizontal',
+        pressableLabel: '',
+        pressableUrl: ''
+    }
+};

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

@@ -0,0 +1,149 @@
+.border-inside {
+    position: relative;
+
+    &::after {
+        pointer-events: none;
+    }
+
+    &::after {
+        position: absolute;
+    }
+
+    &::after {
+        inset: 0rem;
+    }
+
+    &::after {
+        z-index: 1;
+    }
+
+    &::after {
+        border-radius: 8px;
+    }
+
+    &::after {
+        border-width: 1px;
+    }
+
+    &::after {
+        border-width: 2px;
+    }
+
+    &::after {
+        border: 2px solid rgba(0, 0, 0, .1);
+    }
+
+    &::after {
+        content: '';
+    }
+}
+
+.border-inside-pill {
+    &::after {
+        border-radius: 100px;
+    }
+
+    &::after {
+        content: '';
+    }
+}
+
+.border-inside-inverse {
+    &::after {
+        border: 2px solid rgba(255, 255, 255, 0.3);
+    }
+
+    &::after {
+        content: '';
+    }
+}
+
+.aspect-1x1 {
+    aspect-ratio: 1/1;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.overflow-hidden {
+    overflow: hidden;
+}
+
+.px-4 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+}
+
+.rounded-pill {
+    border-radius: 100px;
+}
+
+.rounded-sm {
+    border-radius: 8px;
+}
+
+.rounded-xs {
+    border-radius: 4px;
+}
+
+
+.bg-dark {
+    background-color: var(--grey-300);
+}
+
+.bg-darker {
+    background-color: var(--grey-400);
+}
+
+.bg-stronger {
+    background-color: var(--grey-900);
+}
+
+.bg-strongest {
+    background-color: var(--black);
+}
+
+.text-accent {
+    color: var(--green-500);
+}
+
+.text-default {
+    color: var(--black);
+}
+
+.\!no-underline {
+    text-decoration-line: none !important;
+}
+
+.f-ui-01 {
+    font-family: var(--f-ui-01-fontFamily);
+    font-weight: var(--f-ui-01-fontWeight);
+    font-size: var(--f-ui-01-fontSize);
+    line-height: var(--f-ui-01-lineHeight);
+    letter-spacing: var(--f-ui-01-letterSpacing);
+}
+
+.w-32 {
+    width: 2rem;
+}
+
+.w-44 {
+    width: 2.75rem;
+}
+
+.w-\[54px\] {
+    width: 54px;
+}

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

@@ -0,0 +1,210 @@
+import { h } from "@stencil/core";
+import { gradientBGColorVariants } from "../../../../../../../packages/utils/src/index";
+/**
+ * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+ * This component is customizable to adapt to various styles and use cases.
+ *
+ * Key features include:
+ * - Display user initials generated from `firstName` and `lastName` or use custom initials.
+ * - Option to display a profile picture if a URL is provided.
+ * - Customizable background color, including gradient options.
+ * - Configurable shape (rounded or square) and font strength for initials.
+ *
+ * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
+ */
+export class EdsAvatar {
+    constructor() {
+        this.firstName = undefined;
+        this.lastName = undefined;
+        this.picture = undefined;
+        this.initials = undefined;
+        this.color = undefined;
+        this.rounded = false;
+        this.initialsStrong = false;
+    }
+    /**
+     * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
+     * @returns {string | undefined} Initials for display in the avatar.
+     */
+    get computedInitials() {
+        if (this.initials) {
+            return (this.initials.match(/.{1,3}/g) || [])[0] || '';
+        }
+        else if (this.firstName && this.lastName) {
+            return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
+        }
+        return undefined;
+    }
+    /**
+     * Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
+     * @returns {string} List of CSS classes to apply to the avatar container.
+     */
+    get containerClasses() {
+        return [
+            'border-inside',
+            'aspect-1x1',
+            'flex',
+            'items-center',
+            'justify-center',
+            'overflow-hidden',
+            this.picture ? '' : 'px-4',
+            this.rounded ? 'rounded-pill border-inside-pill w-32' : 'w-[54px] rounded-sm',
+            this.color ? 'border-inside-inverse' : '',
+            this.color === 'grey'
+                ? 'bg-dark'
+                : this.color && !this.picture
+                    ? gradientBGColorVariants({
+                        color: this.color,
+                        direction: 'top',
+                        pseudo: false
+                    })
+                    : !this.picture
+                        ? 'bg-strongest text-accent'
+                        : ''
+        ].join(' ');
+    }
+    /**
+     * Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
+     * @returns {JSX.Element} The rendered avatar component.
+     */
+    render() {
+        return (h("div", { key: '716279a35cc9235da991563d5f84d2dedbdae001', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+    }
+    static get is() { return "eds-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "firstName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "First name of the user for generating initials."
+                },
+                "attribute": "first-name",
+                "reflect": false
+            },
+            "lastName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Last name of the user for generating initials."
+                },
+                "attribute": "last-name",
+                "reflect": false
+            },
+            "picture": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL or path to the user's profile picture."
+                },
+                "attribute": "picture",
+                "reflect": false
+            },
+            "initials": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom initials to display if provided; otherwise, initials will be derived from `firstName` and `lastName`."
+                },
+                "attribute": "initials",
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Background color variant for the avatar, which can apply specific gradient or background colors."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag to render the avatar with rounded (pill) shape if `true`."
+                },
+                "attribute": "rounded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "initialsStrong": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the initials should use a stronger (larger) font style."
+                },
+                "attribute": "initials-strong",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,65 @@
+export default {
+    title: 'Components/Avatar',
+    component: 'eds-avatar',
+    argTypes: {
+        firstName: { control: 'text' },
+        lastName: { control: 'text' },
+        picture: { control: 'text' },
+        initials: { control: 'text' },
+        color: { control: 'text' },
+        rounded: { control: 'boolean' },
+        initialsStrong: { control: 'boolean' }
+    },
+    args: {
+        firstName: 'John',
+        lastName: 'Doe',
+        picture: '',
+        initials: '',
+        color: '',
+        rounded: false,
+        initialsStrong: false
+    }
+};
+export const Default = {
+    render: (args) => `
+        <eds-avatar 
+          first-name="${args.firstName}" 
+          last-name="${args.lastName}"
+          rounded=${args.rounded}
+        ></eds-avatar>`,
+    args: {
+        firstName: 'John',
+        lastName: 'Doe',
+        rounded: false
+    }
+};
+export const WithPicture = {
+    render: (args) => `
+        <eds-avatar 
+          first-name="${args.firstName}" 
+          last-name="${args.lastName}" 
+          picture="${args.picture}"
+          rounded=${args.rounded}
+        ></eds-avatar>`,
+    args: {
+        firstName: 'Jane',
+        lastName: 'Doe',
+        picture: 'https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200',
+        rounded: true
+    }
+};
+export const BackgroundColorVariant = {
+    render: (args) => `
+        <eds-avatar 
+          first-name="${args.firstName}" 
+          last-name="${args.lastName}" 
+          color="${args.color}"
+          rounded=${args.rounded}
+        ></eds-avatar>`,
+    args: {
+        firstName: 'Bob',
+        lastName: 'Brown',
+        color: 'grey',
+        rounded: true
+    }
+};