@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.js

@@ -0,0 +1,338 @@
+import { parseData } from "../../../utils/sharedUtils";
+import { sendAnalytics } from "../../../utils/analytics";
+import { h } from "@stencil/core";
+/**
+ * `EdsCardGeneric` is a versatile card component designed to display rich content such as titles, descriptions, images, and tags.
+ * The card supports various visual configurations, including hover effects, background styling, and compact layout options.
+ *
+ * Key features include:
+ * - A customizable title with an optional link.
+ * - Display of images, avatars, or initials based on the available content.
+ * - Optional description, tag display, and hover effects for interactive use.
+ * - Integration with Matomo analytics, emitting a custom event when the card is clicked.
+ *
+ * This component is ideal for use in interfaces where structured card-like display elements are needed.
+ */
+export class EdsCardGeneric {
+    constructor() {
+        this.parentContext = null; // Accepts the entire event detail or null
+        this.cardTitle = undefined;
+        this.url = undefined;
+        this.description = undefined;
+        this.image = undefined;
+        this.avatar = undefined;
+        this.shortAbbreviation = undefined;
+        this.headingLevel = 'h3';
+        this.tags = [];
+        this.tiny = false;
+        this.bg = true;
+        this.withHover = true;
+        this.hierarchy = true;
+        this.parsedImage = null;
+    }
+    componentWillLoad() {
+        if (this.image) {
+            try {
+                if (typeof this.image === 'object') {
+                    // If image is already an object, assign it directly
+                    this.parsedImage = this.image;
+                }
+                else if (typeof this.image === 'string') {
+                    // If image is a string, try to parse it
+                    this.parsedImage = JSON.parse(this.image);
+                }
+            }
+            catch (error) {
+                // eslint-disable-next-line
+                console.error('Error parsing image prop:', error);
+                this.parsedImage = {}; // Assign a fallback empty object in case of an error
+            }
+        }
+    }
+    handleParentContext(event) {
+        if (event.target !== this.el) {
+            // Ignore the event if it's not targeted at this specific instance
+            return;
+        }
+        //console.log(event.detail);
+        this.parentContext = event.detail;
+        event.stopPropagation();
+    }
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags() {
+        return parseData(this.tags);
+    }
+    articleClasses() {
+        return [
+            this.description ? (this.tiny ? 'min-h-120' : 'min-h-156') : 'h-auto',
+            this.bg ? 'bg-inverse' : 'bg-default',
+            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
+            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
+        ].join(' ');
+    }
+    handleClick() {
+        var _a;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: this.parentContext,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (h("article", { key: '440a448c841370838c0c66610bd1266b46f66541', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '292d93a9a993c6dcbfd276097a21d3984b1794c4', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '8bdcbbe2982a450843e9ada727e3f6eb62872ae1', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+    }
+    static get is() { return "eds-card-generic"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-generic.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-generic.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the card. This is required and displayed prominently."
+                },
+                "attribute": "card-title",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that the card title links to. If provided, the title becomes a clickable link."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text displayed within the card."
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "image": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The image associated with the card. Can be passed as an object with image attributes."
+                },
+                "attribute": "image",
+                "reflect": false
+            },
+            "avatar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL or path to the avatar image. Used as a fallback when no card image is available."
+                },
+                "attribute": "avatar",
+                "reflect": false
+            },
+            "shortAbbreviation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Short abbreviation or initials for displaying when no image or avatar is provided."
+                },
+                "attribute": "short-abbreviation",
+                "reflect": false
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading level for the card title, such as 'h1', 'h2', etc.\nDefault is 'h3'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h3'"
+            },
+            "tags": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Tag[]",
+                    "resolved": "Tag[] | string",
+                    "references": {
+                        "Tag": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-cards/eds-card-generic/eds-card-generic.tsx",
+                            "id": "../../../packages/components/src/components/eds-cards/eds-card-generic/eds-card-generic.tsx::Tag"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tags related to the card content."
+                },
+                "attribute": "tags",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "tiny": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should be displayed with a smaller height.\nIf true, the card will use the 'tiny' height class."
+                },
+                "attribute": "tiny",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should have a background color.\nIf true, the card will have a background, otherwise it will not."
+                },
+                "attribute": "bg",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "withHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should display a hover effect.\nIf true, the card will have a shadow effect and change its cursor on hover."
+                },
+                "attribute": "with-hover",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "hierarchy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the hierarchy is enabled.\nIf true, all headings except 'h6' map to '05', and 'h6' maps to '06'."
+                },
+                "attribute": "hierarchy",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "parsedImage": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "parentContext",
+                "method": "handleParentContext",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/eds-cards/eds-card-generic/eds-card-generic.stories.js

@@ -0,0 +1,133 @@
+export default {
+    title: 'Components/Cards/Generic',
+    component: 'eds-card-generic',
+    argTypes: {
+        cardTitle: {
+            control: 'text',
+            description: 'The title of the card.'
+        },
+        url: {
+            control: 'text',
+            description: 'URL that the card title links to, if provided.'
+        },
+        description: {
+            control: 'text',
+            description: 'Description text displayed within the card.'
+        },
+        image: {
+            control: 'object',
+            description: 'Image object with attributes for the card image.'
+        },
+        avatar: {
+            control: 'text',
+            description: 'URL or path to the avatar image.'
+        },
+        shortAbbreviation: {
+            control: 'text',
+            description: 'Short abbreviation or initials to display when no image or avatar is available.'
+        },
+        headingLevel: {
+            control: 'select',
+            options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            description: 'Heading level for the card title.'
+        },
+        tags: {
+            control: 'object',
+            description: 'Array of tag objects related to the card content.'
+        },
+        tiny: {
+            control: 'boolean',
+            description: 'Determines if the card should have a smaller height.'
+        },
+        bg: {
+            control: 'boolean',
+            description: 'Determines if the card should have a background color.'
+        },
+        withHover: {
+            control: 'boolean',
+            description: 'Determines if the card should display a hover effect.'
+        },
+        hierarchy: {
+            control: 'boolean',
+            description: 'Determines if the headings hierarchy should be followed.'
+        }
+    },
+    args: {
+        cardTitle: 'Sample Card Title',
+        url: '#',
+        description: 'This is a sample description for the card.',
+        headingLevel: 'h3',
+        tags: [
+            { label: 'docs', style: 'accent' },
+            { label: 'guideline', style: 'default' },
+            { label: 'read', style: 'weak' },
+            { label: 'important', style: 'strong' }
+        ],
+        tiny: true,
+        bg: true,
+        withHover: true,
+        hierarchy: true
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-card-generic
+        card-title="${args.cardTitle}"
+        url="${args.url || ''}"
+        description="${args.description || ''}"
+        image='${args.image ? JSON.stringify(args.image) : ''}'
+        avatar="${args.avatar || ''}"
+        short-abbreviation="${args.shortAbbreviation || ''}"
+        heading-level="${args.headingLevel}"
+        tags='${JSON.stringify(args.tags)}'
+        tiny="${args.tiny}"
+        bg="${args.bg}"
+        with-hover="${args.withHover}"
+        hierarchy="${args.hierarchy}">
+      </eds-card-generic>`,
+    args: {
+        cardTitle: 'Default Card',
+        description: 'This card displays the default setup and allows playing with controls.'
+    }
+};
+export const WithImageAndTags = {
+    render: (args) => `
+      <eds-card-generic
+        card-title="${args.cardTitle}"
+        url="${args.url || ''}"
+        description="${args.description || ''}"
+        image='${args.image ? JSON.stringify(args.image) : ''}'
+        avatar="${args.avatar || ''}"
+        short-abbreviation="${args.shortAbbreviation || ''}"
+        heading-level="${args.headingLevel}"
+        tags='${JSON.stringify(args.tags)}'
+        tiny="${args.tiny}"
+        bg="${args.bg}"
+        with-hover="${args.withHover}"
+        hierarchy="${args.hierarchy}">
+      </eds-card-generic>
+      
+      <div class="mt-32">
+        <span>To try out the avatar propery use this example:</span>
+        <eds-code-block 
+          code="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" 
+          language="url"
+        ></eds-code-block>
+      </div>
+      `,
+    args: {
+        cardTitle: 'Card with Image and Tags',
+        description: 'This card showcases an image and tags together.',
+        image: {
+            src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+            alt: 'Placeholder Image',
+            width: '400',
+            height: '300'
+        },
+        tags: [
+            { label: 'conference', style: 'accent' },
+            { label: 'AI', style: 'default' },
+            { label: 'research', style: 'strong' }
+        ]
+    }
+};