@ebrains/components 2.4.0 → 3.0.0

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

@@ -0,0 +1,217 @@
+import { parseData } from "../../../utils/sharedUtils";
+import { h } from "@stencil/core";
+/**
+ * `EdsCardCta` is a call-to-action card component with title, description, action buttons, and footer links.
+ *
+ * Key features:
+ * - Large title with line breaks
+ * - Description text
+ * - Primary and secondary action buttons
+ * - Footer links in a row
+ * - Animated rotating radial gradient background
+ * - Green border with hover effects
+ * - Variant support (default/inverse)
+ *
+ * This component is ideal for landing pages, campaign sections, and conversion-focused layouts.
+ */
+export class EdsCardCta {
+    constructor() {
+        this.handlePrimaryClick = () => {
+            if (this.primaryButtonUrl) {
+                window.location.href = this.primaryButtonUrl;
+            }
+        };
+        this.handleSecondaryClick = () => {
+            if (this.secondaryButtonUrl) {
+                window.location.href = this.secondaryButtonUrl;
+            }
+        };
+        this.title = undefined;
+        this.description = undefined;
+        this.primaryButtonText = 'Get Started';
+        this.primaryButtonUrl = undefined;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonUrl = undefined;
+        this.links = [];
+        this.variant = 'default';
+    }
+    /**
+     * Parse the links prop into an array
+     */
+    get parsedLinks() {
+        return parseData(this.links);
+    }
+    render() {
+        const containerClasses = [
+            'cta-container',
+            `cta-container-${this.variant}`
+        ].join(' ');
+        // Determine button and link intents based on variant
+        const primaryButtonIntent = this.variant === 'default' ? 'brandInverse' : 'brand';
+        const secondaryButtonIntent = this.variant === 'default' ? 'secondaryInverse' : 'secondary';
+        const linkIntent = this.variant === 'default' ? 'cta' : 'underline';
+        return (h("div", { key: 'ee2163e6096ad05dc55ac40c6626236723a23b72', class: containerClasses }, h("div", { key: 'f51481133015ef5eafce48bab525cf166c000e3a', class: "cta-content" }, h("h2", { key: '577441d8bc7cb4c906408faf995e106ef2779e8b', class: "cta-title", innerHTML: this.title }), h("p", { key: 'b8cbcf891b95f82c3dd57f1db9335f55c1d7162c', class: "cta-description" }, this.description), h("div", { key: 'f167262a521b9e15176a4fc65e3e45a8cf24feb1', class: "cta-actions" }, h("eds-button", { key: 'f2c092d340996c87864677f94d979fe6317ef6d7', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (h("eds-button", { key: 'de0fe98dab48b2ab4b78a637915df48c930c4b54', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick }))), this.parsedLinks && this.parsedLinks.length > 0 && (h("div", { key: '842a6e794364fb50829ad422fc7699527b17e918', class: "cta-links" }, this.parsedLinks.map((link, index) => (h("eds-link", { key: index, label: link.label, url: link.url, intent: linkIntent }))))))));
+    }
+    static get is() { return "eds-card-cta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-cta.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-cta.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main title text (supports HTML for line breaks)"
+                },
+                "attribute": "title",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text below the title"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "primaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the primary action button"
+                },
+                "attribute": "primary-button-text",
+                "reflect": false,
+                "defaultValue": "'Get Started'"
+            },
+            "primaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the primary action button"
+                },
+                "attribute": "primary-button-url",
+                "reflect": false
+            },
+            "secondaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for the secondary action button"
+                },
+                "attribute": "secondary-button-text",
+                "reflect": false
+            },
+            "secondaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL for the secondary action button"
+                },
+                "attribute": "secondary-button-url",
+                "reflect": false
+            },
+            "links": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | CtaLink[]",
+                    "resolved": "CtaLink[] | string",
+                    "references": {
+                        "CtaLink": {
+                            "location": "local",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-cards/eds-card-cta/eds-card-cta.tsx",
+                            "id": "../../../packages/components/src/components/eds-cards/eds-card-cta/eds-card-cta.tsx::CtaLink"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer links as JSON string or array of link objects\nExample: [{\"label\": \"GitLab Repository\", \"url\": \"#\"}, {\"label\": \"Storybook\", \"url\": \"#\"}]"
+                },
+                "attribute": "links",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default' for brand-black background, 'inverse' for white background"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,77 @@
+export default {
+    title: 'Components/Cards/CTA',
+    component: 'eds-card-cta',
+    argTypes: {
+        title: { control: 'text', description: 'Main title text.' },
+        description: { control: 'text', description: 'Description text below the title.' },
+        primaryButtonText: { control: 'text', description: 'Text for the primary button.' },
+        primaryButtonUrl: { control: 'text', description: 'URL for the primary button.' },
+        secondaryButtonText: { control: 'text', description: 'Text for the secondary button.' },
+        secondaryButtonUrl: { control: 'text', description: 'URL for the secondary button.' },
+        variant: { control: 'select', options: ['default', 'inverse'] },
+        links: { control: 'object', description: 'Footer links array.' }
+    },
+    args: {
+        title: 'Ready to Get Started?',
+        description: 'Join the EBRAINS community and start building accessible, performant applications.',
+        primaryButtonText: 'Get Started',
+        primaryButtonUrl: '#',
+        secondaryButtonText: 'Learn More',
+        secondaryButtonUrl: '#',
+        variant: 'default',
+        links: []
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-card-cta
+      title="${args.title}"
+      description="${args.description}"
+      primary-button-text="${args.primaryButtonText}"
+      primary-button-url="${args.primaryButtonUrl || ''}"
+      secondary-button-text="${args.secondaryButtonText || ''}"
+      secondary-button-url="${args.secondaryButtonUrl || ''}"
+      variant="${args.variant}"
+      links='${JSON.stringify(args.links)}'>
+    </eds-card-cta>`
+};
+export const Inverse = {
+    render: (args) => `
+    <eds-card-cta
+      title="${args.title}"
+      description="${args.description}"
+      primary-button-text="${args.primaryButtonText}"
+      primary-button-url="${args.primaryButtonUrl || ''}"
+      secondary-button-text="${args.secondaryButtonText || ''}"
+      secondary-button-url="${args.secondaryButtonUrl || ''}"
+      variant="inverse"
+      links='${JSON.stringify(args.links)}'>
+    </eds-card-cta>`,
+    args: {
+        title: 'Start Contributing',
+        description: 'Help shape the future of EBRAINS documentation and components.',
+        links: [{ label: 'GitLab', url: '#' }, { label: 'Documentation', url: '#' }]
+    }
+};
+export const WithLinks = {
+    render: (args) => `
+    <eds-card-cta
+      title="${args.title}"
+      description="${args.description}"
+      primary-button-text="${args.primaryButtonText}"
+      primary-button-url="${args.primaryButtonUrl || ''}"
+      variant="${args.variant}"
+      links='${JSON.stringify(args.links)}'>
+    </eds-card-cta>`,
+    args: {
+        title: 'Explore Resources',
+        description: 'Access documentation, tools, and community resources.',
+        primaryButtonText: 'Browse Docs',
+        primaryButtonUrl: '#',
+        links: [
+            { label: 'Components', url: '#' },
+            { label: 'Foundations', url: '#' },
+            { label: 'Accessibility', url: '#' }
+        ]
+    }
+};

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

@@ -0,0 +1,108 @@
+/* Ensure cards fill grid cell height */
+:host {
+  display: flex;
+  height: 100%;
+}
+
+.feature-card {
+  height: auto;
+  border-radius: 16px;
+  padding: 1.5rem;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/* Default variant - brand-black background with white text */
+.feature-card-default {
+  background: var(--brand-black);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.feature-card-default:hover {
+  background: var(--brand-black);
+  border-color: rgba(0, 255, 157, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card-default .feature-title {
+  color: var(--white);
+}
+
+.feature-card-default .feature-description {
+  color: var(--grey-light);
+}
+
+/* Inverse variant - white background with dark text */
+.feature-card-inverse {
+  background: var(--white);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.feature-card-inverse:hover {
+  background: var(--white);
+  border-color: rgba(0, 255, 157, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.feature-card-inverse .feature-title {
+  color: var(--brand-black);
+}
+
+.feature-card-inverse .feature-description {
+  color: var(--grey-dark);
+}
+
+.feature-icon {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 255, 157, 0.1);
+  border-radius: 12px;
+  color: var(--brand-green);
+  flex-shrink: 0;
+}
+
+/* Inverse variant - darker icon color */
+.feature-card-inverse .feature-icon {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--brand-black);
+}
+
+.feature-title {
+  font-family: 'Inter', var(--f-heading-fontFamily);
+  font-weight: 300;
+  font-size: 1.25rem;
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+
+.feature-description {
+  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  flex-grow: 1;
+}
+
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .feature-card {
+    padding: 2rem;
+  }
+
+  .feature-icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 1.25rem;
+  }
+
+  .feature-title {
+    font-size: 1.125rem;
+  }
+}

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

@@ -0,0 +1,156 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsCardFeature` is a card component designed to showcase features with an icon, title, description, and optional link.
+ *
+ * Key features:
+ * - Icon at the top in a colored background box
+ * - Title and description
+ * - Optional "Learn more" link with arrow
+ * - Hover effects with background color change and border glow
+ *
+ * This component is ideal for feature grids, service listings, and capability showcases.
+ */
+export class EdsCardFeature {
+    constructor() {
+        this.icon = undefined;
+        this.title = undefined;
+        this.description = undefined;
+        this.url = undefined;
+        this.linkText = 'Learn more';
+        this.variant = 'default';
+    }
+    render() {
+        const cardClasses = [
+            'feature-card',
+            `feature-card-${this.variant}`
+        ].join(' ');
+        return (h("div", { key: '315904b024e86403b00c9f0e3ebb93dafba08fa8', class: cardClasses }, this.icon && (h("div", { key: 'e0891b38e8321130471ae1422c96fbfe7662b01f', class: "feature-icon" }, h("eds-icon-wrapper", { key: '768b355daebf53d69a54166525c193505dc44d67', name: this.icon, size: 24 }))), h("h3", { key: 'e2486793198e51e518f24beab609a3d0186902d4', class: "feature-title" }, this.title), h("p", { key: '4d66d673b5733c96312cde5e1c3fd64cced5d95a', class: "feature-description" }, this.description), this.url && (h("eds-link", { key: 'e9123234265f259fb9b61172f2e79c7aba5f82b4', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
+    }
+    static get is() { return "eds-card-feature"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-feature.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-feature.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The icon to display at the top of the card"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title of the feature"
+                },
+                "attribute": "title",
+                "reflect": false
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text"
+                },
+                "attribute": "description",
+                "reflect": false
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional URL for \"Learn more\" link"
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "linkText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional link text (defaults to \"Learn more\")"
+                },
+                "attribute": "link-text",
+                "reflect": false,
+                "defaultValue": "'Learn more'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default' for light text on dark background, 'inverse' for dark text on light background"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

@@ -0,0 +1,55 @@
+export default {
+    title: 'Components/Cards/Feature',
+    component: 'eds-card-feature',
+    argTypes: {
+        title: { control: 'text', description: 'Title of the feature.' },
+        description: { control: 'text', description: 'Description text.' },
+        icon: { control: 'text', description: 'Icon name displayed at the top.' },
+        url: { control: 'text', description: 'URL for the learn more link.' },
+        linkText: { control: 'text', description: 'Text for the link.' },
+        variant: { control: 'select', options: ['default', 'inverse'] }
+    },
+    args: {
+        title: 'Accessibility',
+        description: 'WCAG 2.1 AA compliant with keyboard navigation and screen reader support.',
+        icon: 'checkmark',
+        url: '#',
+        linkText: 'Learn more',
+        variant: 'default'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <eds-card-feature
+      title="${args.title}"
+      description="${args.description}"
+      icon="${args.icon || ''}"
+      url="${args.url || ''}"
+      link-text="${args.linkText}"
+      variant="${args.variant}">
+    </eds-card-feature>`
+};
+export const Inverse = {
+    render: (args) => `
+    <eds-card-feature
+      title="${args.title}"
+      description="${args.description}"
+      icon="${args.icon || ''}"
+      url="${args.url || ''}"
+      link-text="${args.linkText}"
+      variant="inverse">
+    </eds-card-feature>`,
+    args: {
+        title: 'Analytics',
+        description: 'Built-in Matomo integration for privacy-respecting usage tracking.',
+        icon: 'analytics'
+    }
+};
+export const Grid = {
+    render: () => `
+    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;">
+      <eds-card-feature title="Components" description="44+ production-ready web components." icon="template" url="#" variant="default"></eds-card-feature>
+      <eds-card-feature title="Design Tokens" description="Consistent colors, typography, and spacing." icon="settings" url="#" variant="default"></eds-card-feature>
+      <eds-card-feature title="Icons" description="IBM Carbon icon library integration." icon="image" url="#" variant="default"></eds-card-feature>
+    </div>`
+};