@ebrains/components 2.4.0 → 3.0.0

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

@@ -1,7 +1,17 @@
+.h-300 {
+  height: 300px;
+}
+
 .h-auto {
   height: auto;
 }
 
+/* Ensure cards fill grid cell height */
+:host {
+  display: flex;
+  height: 100%;
+}
+
 .h-full {
   height: 100%;
 }
@@ -18,14 +28,26 @@
   min-height: 156px;
 }
 
+.bg-dark {
+  background-color: var(--grey-light);
+}
+
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-inverse {
   background-color: var(--white);
 }
 
+.bg-accent {
+  background-color: var(--brand-green);
+}
+
+.bg-strongest {
+  background-color: var(--brand-black);
+}
+
 .effect-shadow {
   transition-property: box-shadow;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -43,18 +65,22 @@
   cursor: pointer;
 }
 
+.cursor-default {
+  cursor: default;
+}
+
 .border-soft {
   border-color: rgba(0, 0, 0, .15);
 }
 
 .border-softer {
-  border: 2px solid rgba(0, 0, 0, .1);
+  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 
 .effect-focus-within:focus-within {
@@ -97,12 +123,16 @@
   flex-direction: column;
 }
 
+.rounded-sm {
+  border-radius: 8px;
+}
+
 .rounded-lg {
   border-radius: 16px;
 }
 
 .border-2 {
-  border-width: 2px;
+  border-width: 1px;
 }
 
 .p-12 {
@@ -126,10 +156,19 @@
   column-gap: 0.0625rem;
 }
 
+.gap-x-4 {
+  -moz-column-gap: 0.25rem;
+  column-gap: 0.25rem;
+}
+
 .gap-y-4 {
   row-gap: 0.25rem;
 }
 
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
 .order-first {
   order: -9999;
 }
@@ -153,4 +192,66 @@
 
 .block {
   display: block;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.rounded-t-lg {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.mt-auto {
+  margin-top: auto;
+}
+
+.pt-16 {
+  padding-top: 1rem;
+}
+
+.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);
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+/* Icon wrapper for feature cards */
+.card-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem 1rem 0.5rem 1rem;
+}
+
+/* Text color variants */
+.text-inverse {
+  color: var(--white);
+}
+
+.text-default {
+  color: var(--brand-black);
 }

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

@@ -16,39 +16,16 @@ import { h } from "@stencil/core";
 export class EdsCardGeneric {
     constructor() {
         this.parentContext = null; // Accepts the entire event detail or null
-        this.cardTitle = undefined;
+        this.title = 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
-            }
-        }
+        this.intent = 'secondary';
+        this.icon = undefined;
+        this.titleSize = 'large';
+        this.isHovered = false;
     }
+    componentWillLoad() { }
     handleParentContext(event) {
         if (event.target !== this.el) {
             // Ignore the event if it's not targeted at this specific instance
@@ -67,25 +44,50 @@ export class EdsCardGeneric {
         return parseData(this.tags);
     }
     articleClasses() {
+        let bgClass = 'bg-strongest';
+        if (this.intent === 'primary') {
+            bgClass = 'bg-accent';
+        }
+        else if (this.intent === 'inverse') {
+            bgClass = 'bg-inverse';
+        }
+        else if (this.intent === 'dark') {
+            bgClass = 'bg-dark';
+        }
+        const interactionClasses = this.url
+            ? 'cursor-pointer effect-shadow hover:shadow-hover'
+            : 'cursor-default';
         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'
+            'h-auto',
+            bgClass,
+            interactionClasses,
+            'border-softer effect-focus-within relative flex grow flex-col rounded-sm border-2'
         ].join(' ');
     }
+    getLearnMoreColor() {
+        if (this.intent === 'secondary') {
+            return 'text-inverse';
+        }
+        return 'text-default';
+    }
     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()) || '',
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
             action: 'click'
         });
     }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
     render() {
-        return (h("article", { key: '76e77261a0c6e0c506fe7600d31a492808293d27', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'ca26508b05a31310df7fc0c3fa5769f7947e80fc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), h("div", { key: '00ba325e6a0093cb2be35854f2bcb579ad4eb35b', class: "mt-8 mb-8" }, this.description && h("eds-card-desc", { key: '2d775f772092b7873dd1eabc7c3e8606dded0c47', "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'e51237f8196212715d1d97ae1e6bfc2625573cb3', 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, size: tag.size })))), ' '));
+        return (h("article", { key: 'eb4b42dccca0fb46bc8e51e1b6873e118796647b', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (h("div", { key: '229f7daab8d8560092eb94e664c73c306b2fec19', class: "card-icon-wrapper" }, h("eds-icon-wrapper", { key: 'c4b76bdff72dcbe7d98a7dfea71ca8693c00094e', name: this.icon, size: 32 }))), h("div", { key: '45d3a9d83cf92137485bae5248c55edb56c58671', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '101676ed06f29e985c6bf11620a56660360ace57', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.intent, label: tag.label, size: tag.size }))))), h("eds-card-title", { key: 'c901580eca3a3b8ce4c26e1c9ce5d0f9b7a11ed6', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (h("div", { key: '618be209087536eee2fdfd3eaa1595c6fe6d0176', class: "mt-8" }, this.description && (h("eds-card-desc", { key: '1aa3ea97c4371ea7510ad47e364cea27e1de0482', "truncate-lines": "3", description: this.description, intent: this.intent })))), h("slot", { key: '3086eeeeb29bb82d927ab82e6ce98664118b0193', name: "card" }), this.url && (h("div", { key: 'f1f73a07002f7d82daa0b68b15d7c5cddba9c730', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, h("span", { key: '86fd1e428f6553b74aa634359fad7ba3ce590844', class: "f-ui-01" }, "Learn more"), h("eds-icon-wrapper", { key: 'f955e10355e2726052cd2d34d888ea0effd2b362', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
     }
     static get is() { return "eds-card-generic"; }
     static get encapsulation() { return "shadow"; }
@@ -101,7 +103,7 @@ export class EdsCardGeneric {
     }
     static get properties() {
         return {
-            "cardTitle": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -115,7 +117,7 @@ export class EdsCardGeneric {
                     "tags": [],
                     "text": "The title of the card. This is required and displayed prominently."
                 },
-                "attribute": "card-title",
+                "attribute": "title",
                 "reflect": false
             },
             "url": {
@@ -152,75 +154,6 @@ export class EdsCardGeneric {
                 "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,
@@ -230,7 +163,7 @@ export class EdsCardGeneric {
                     "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",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/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"
                         }
                     }
@@ -245,83 +178,70 @@ export class EdsCardGeneric {
                 "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",
+            "intent": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'primary' | 'secondary' | 'inverse' | 'dark'",
+                    "resolved": "\"dark\" | \"inverse\" | \"primary\" | \"secondary\"",
                     "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."
+                    "text": ""
                 },
-                "attribute": "bg",
+                "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "'secondary'"
             },
-            "withHover": {
-                "type": "boolean",
+            "icon": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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."
+                    "text": "Optional icon name to display at the top of the card (instead of an image)."
                 },
-                "attribute": "with-hover",
-                "reflect": false,
-                "defaultValue": "true"
+                "attribute": "icon",
+                "reflect": false
             },
-            "hierarchy": {
-                "type": "boolean",
+            "titleSize": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'display' | 'xlarge' | 'large' | 'medium' | 'small'",
+                    "resolved": "\"display\" | \"large\" | \"medium\" | \"small\" | \"xlarge\"",
                     "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'."
+                    "text": "The size of the title text. Controls the heading level and font size.\nDefault is 'large' (f-heading-03)."
                 },
-                "attribute": "hierarchy",
+                "attribute": "title-size",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "'large'"
             }
         };
     }
     static get states() {
         return {
-            "parsedImage": {}
+            "isHovered": {}
         };
     }
     static get elementRef() { return "el"; }