@ebrains/components 2.4.0 → 3.0.0

package/dist/types/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.d.ts

@@ -6,16 +6,6 @@ export declare class EdsCardTitle {
      * The URL that the title should link to. If provided, the title will be rendered as an anchor (`<a>`).
      */
     url?: string;
-    /**
-     * The CSS class applied to the title element for styling.
-     * This will be dynamically set based on the heading level.
-     */
-    titleClass: string;
-    /**
-     * The heading level for the title. Can be 'h2', 'h3', 'h4', 'h5', or 'h6'.
-     * Default is 'h3'.
-     */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
      * Indicates whether the link should open in a new tab if the URL is provided.
      * Default is `false`.
@@ -24,15 +14,13 @@ export declare class EdsCardTitle {
     /**
      * The text content for the title.
      */
-    cardTitle: string;
-    /**
-     * Indicates whether the hierarchy is enabled.
-     * If true, all headings except 'h6' map to '05', and 'h6' maps to '06'.
-     */
-    hierarchy: boolean;
+    title: string;
+    intent: 'primary' | 'secondary' | 'inverse' | 'dark';
     /**
-     * Dynamically generate the title class based on the heading level.
+     * The size of the title text. Controls the heading level and font size.
+     * Default is 'large' (f-heading-03).
      */
+    size: 'display' | 'xlarge' | 'large' | 'medium' | 'small';
     private getTitleClass;
     render(): any;
 }

package/dist/types/components/eds-cards/eds-card-cta/eds-card-cta.d.ts

@@ -0,0 +1,64 @@
+export interface CtaLink {
+    label: string;
+    url: string;
+}
+/**
+ * `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 declare class EdsCardCta {
+    /**
+     * The main title text (supports HTML for line breaks)
+     */
+    title: string;
+    /**
+     * The description text below the title
+     */
+    description: string;
+    /**
+     * Text for the primary action button
+     */
+    primaryButtonText: string;
+    /**
+     * URL for the primary action button
+     */
+    primaryButtonUrl?: string;
+    /**
+     * Text for the secondary action button
+     */
+    secondaryButtonText?: string;
+    /**
+     * URL for the secondary action button
+     */
+    secondaryButtonUrl?: string;
+    /**
+     * Footer links as JSON string or array of link objects
+     * Example: [{"label": "GitLab Repository", "url": "#"}, {"label": "Storybook", "url": "#"}]
+     */
+    links: string | CtaLink[];
+    /**
+     * Visual variant: 'default' for brand-black background, 'inverse' for white background
+     */
+    variant: 'default' | 'inverse';
+    /**
+     * Reference to the host element
+     */
+    el: HTMLElement;
+    /**
+     * Parse the links prop into an array
+     */
+    get parsedLinks(): CtaLink[];
+    private handlePrimaryClick;
+    private handleSecondaryClick;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-cta/eds-card-cta.stories.d.ts

@@ -0,0 +1,76 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        primaryButtonText: {
+            control: string;
+            description: string;
+        };
+        primaryButtonUrl: {
+            control: string;
+            description: string;
+        };
+        secondaryButtonText: {
+            control: string;
+            description: string;
+        };
+        secondaryButtonUrl: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        links: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+        primaryButtonText: string;
+        primaryButtonUrl: string;
+        secondaryButtonText: string;
+        secondaryButtonUrl: string;
+        variant: string;
+        links: any[];
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Inverse: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        links: {
+            label: string;
+            url: string;
+        }[];
+    };
+};
+export declare const WithLinks: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        primaryButtonText: string;
+        primaryButtonUrl: string;
+        links: {
+            label: string;
+            url: string;
+        }[];
+    };
+};

package/dist/types/components/eds-cards/eds-card-feature/eds-card-feature.d.ts

@@ -0,0 +1,43 @@
+import { IconName } from '../../../utils/icons';
+/**
+ * `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 declare class EdsCardFeature {
+    /**
+     * The icon to display at the top of the card
+     */
+    icon?: IconName;
+    /**
+     * The title of the feature
+     */
+    title: string;
+    /**
+     * The description text
+     */
+    description: string;
+    /**
+     * Optional URL for "Learn more" link
+     */
+    url?: string;
+    /**
+     * Optional link text (defaults to "Learn more")
+     */
+    linkText: string;
+    /**
+     * Visual variant: 'default' for light text on dark background, 'inverse' for dark text on light background
+     */
+    variant: 'default' | 'inverse';
+    /**
+     * Reference to the host element
+     */
+    el: HTMLElement;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-feature/eds-card-feature.stories.d.ts

@@ -0,0 +1,53 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        icon: {
+            control: string;
+            description: string;
+        };
+        url: {
+            control: string;
+            description: string;
+        };
+        linkText: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+        icon: string;
+        url: string;
+        linkText: string;
+        variant: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Inverse: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        icon: string;
+    };
+};
+export declare const Grid: {
+    render: () => string;
+};

package/dist/types/components/eds-cards/eds-card-generic/eds-card-generic.d.ts

@@ -1,6 +1,6 @@
+import { IconName } from '../../../utils/icons';
 export interface Tag {
     label: string;
-    style: 'accent' | 'default' | 'weak' | 'strong';
     size: 'small' | 'medium' | 'large';
 }
 /**
@@ -19,7 +19,7 @@ export declare class EdsCardGeneric {
     /**
      * The title of the card. This is required and displayed prominently.
      */
-    cardTitle: string;
+    title: string;
     /**
      * The URL that the card title links to. If provided, the title becomes a clickable link.
      */
@@ -28,56 +28,25 @@ export declare class EdsCardGeneric {
      * The description text displayed within the card.
      */
     description?: string;
-    /**
-     * The image associated with the card. Can be passed as an object with image attributes.
-     */
-    image?: any;
-    /**
-     * The URL or path to the avatar image. Used as a fallback when no card image is available.
-     */
-    avatar?: string;
-    /**
-     * Short abbreviation or initials for displaying when no image or avatar is provided.
-     */
-    shortAbbreviation?: string;
-    /**
-     * The heading level for the card title, such as 'h1', 'h2', etc.
-     * Default is 'h3'.
-     */
-    headingLevel: string;
     /**
      * Tags related to the card content.
      */
     tags: string | Tag[];
+    intent: 'primary' | 'secondary' | 'inverse' | 'dark';
     /**
-     * A boolean that determines whether the card should be displayed with a smaller height.
-     * If true, the card will use the 'tiny' height class.
-     */
-    tiny: boolean;
-    /**
-     * A boolean that determines whether the card should have a background color.
-     * If true, the card will have a background, otherwise it will not.
+     * Optional icon name to display at the top of the card (instead of an image).
      */
-    bg: boolean;
+    icon?: IconName;
     /**
-     * A boolean that determines whether the card should display a hover effect.
-     * If true, the card will have a shadow effect and change its cursor on hover.
+     * The size of the title text. Controls the heading level and font size.
+     * Default is 'large' (f-heading-03).
      */
-    withHover: boolean;
-    /**
-     * Indicates whether the hierarchy is enabled.
-     * If true, all headings except 'h6' map to '05', and 'h6' maps to '06'.
-     */
-    hierarchy: boolean;
+    titleSize: 'display' | 'xlarge' | 'large' | 'medium' | 'small';
     /**
      * Reference to the host element.
      */
     el: HTMLElement;
-    /**
-     * Parsed image object derived from the `image` prop.
-     * @type {object}
-     */
-    parsedImage: any;
+    isHovered: boolean;
     componentWillLoad(): void;
     private parentContext;
     handleParentContext(event: CustomEvent): void;
@@ -89,6 +58,9 @@ export declare class EdsCardGeneric {
      */
     get parsedTags(): any[];
     articleClasses(): string;
+    getLearnMoreColor(): "text-inverse" | "text-default";
     private handleClick;
+    private handleMouseEnter;
+    private handleMouseLeave;
     render(): any;
 }

package/dist/types/components/eds-cards/eds-card-generic/eds-card-generic.stories.d.ts

@@ -2,11 +2,7 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        cardTitle: {
-            control: string;
-            description: string;
-        };
-        url: {
+        title: {
             control: string;
             description: string;
         };
@@ -14,81 +10,84 @@ declare const _default: {
             control: string;
             description: string;
         };
-        image: {
+        intent: {
             control: string;
-            description: string;
+            options: string[];
         };
-        avatar: {
+        url: {
             control: string;
             description: string;
         };
-        shortAbbreviation: {
+        icon: {
             control: string;
             description: string;
         };
-        headingLevel: {
+        titleSize: {
             control: string;
             options: string[];
-            description: string;
         };
         tags: {
             control: string;
             description: string;
         };
-        tiny: {
-            control: string;
-            description: string;
-        };
-        bg: {
-            control: string;
-            description: string;
-        };
-        withHover: {
-            control: string;
-            description: string;
-        };
-        hierarchy: {
-            control: string;
-            description: string;
-        };
     };
     args: {
-        cardTitle: string;
+        title: string;
         url: string;
+        intent: string;
         description: string;
-        headingLevel: string;
+        titleSize: string;
         tags: {
             label: string;
-            style: string;
+            intent: string;
+            size: string;
         }[];
-        tiny: boolean;
-        bg: boolean;
-        withHover: boolean;
-        hierarchy: boolean;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
     args: {
-        cardTitle: string;
+        title: string;
         description: string;
     };
 };
-export declare const WithImageAndTags: {
+export declare const Primary: {
     render: (args: any) => string;
     args: {
-        cardTitle: string;
+        title: string;
+        description: string;
+        tags: {
+            label: string;
+            intent: string;
+            size: string;
+        }[];
+    };
+};
+export declare const Inverse: {
+    render: (args: any) => string;
+    args: {
+        title: string;
         description: string;
-        image: {
-            src: string;
-            alt: string;
-            width: string;
-            height: string;
-        };
         tags: {
             label: string;
-            style: string;
+            intent: string;
+            size: string;
         }[];
     };
 };
+export declare const Dark: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        tags: {
+            label: string;
+            intent: string;
+            size: string;
+        }[];
+    };
+};
+export declare const Grid: {
+    render: () => string;
+};

package/dist/types/components/eds-cards/eds-card-hero/eds-card-hero.d.ts

@@ -0,0 +1,54 @@
+export interface HeroTag {
+    label: string;
+}
+/**
+ * `EdsCardHero` is a floating card component designed for hero sections with label, title, description, and tags.
+ *
+ * Key features:
+ * - Small uppercase label (e.g., "DATA MANAGEMENT")
+ * - Large, lightweight title
+ * - Description text
+ * - Multiple tags at the bottom
+ * - Floating animation effects
+ * - Hover effects with border glow
+ *
+ * This component is ideal for hero sections, landing pages, and feature highlights.
+ */
+export declare class EdsCardHero {
+    /**
+     * The small label displayed at the top (e.g., "DATA MANAGEMENT", "BRAIN ATLASES")
+     */
+    category: string;
+    /**
+     * The main title of the card
+     */
+    title: string;
+    /**
+     * The description text
+     */
+    description?: string;
+    /**
+     * Tags to display at the bottom of the card
+     * Can be a JSON string or array of tag objects
+     */
+    tags: string | HeroTag[];
+    /**
+     * Optional URL to link the card to
+     */
+    url?: string;
+    /**
+     * Visual variant: 'default' for light text on dark background, 'inverse' for dark text on light background
+     */
+    variant: 'default' | 'inverse';
+    /**
+     * Reference to the host element
+     */
+    el: HTMLElement;
+    private parentContext;
+    /**
+     * Parse the tags prop into an array
+     */
+    get parsedTags(): HeroTag[];
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-hero/eds-card-hero.stories.d.ts

@@ -0,0 +1,65 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+            description: string;
+        };
+        category: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        url: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        tags: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        title: string;
+        category: string;
+        description: string;
+        url: string;
+        variant: string;
+        tags: {
+            label: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Inverse: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        category: string;
+        description: string;
+        tags: {
+            label: string;
+        }[];
+    };
+};
+export declare const WithoutDescription: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        category: string;
+        tags: {
+            label: string;
+        }[];
+    };
+};

package/dist/types/components/eds-cards/eds-card-stat/eds-card-stat.d.ts

@@ -0,0 +1,41 @@
+/**
+ * `EdsCardStat` is a card component designed to display statistics with a large number, label, and description.
+ *
+ * Key features:
+ * - Large prominent number display (e.g., "44+", "100%", "AA")
+ * - Label describing the statistic
+ * - Optional description for additional context
+ * - Hover effects with animated top border
+ * - Support for optional links
+ *
+ * This component is ideal for dashboards, landing pages, and any interface displaying key metrics.
+ */
+export declare class EdsCardStat {
+    /**
+     * The main statistic number or value to display (e.g., "44+", "100%", "AA")
+     */
+    number: string;
+    /**
+     * The label describing the statistic
+     */
+    label: string;
+    /**
+     * Optional description providing additional context
+     */
+    description?: string;
+    /**
+     * Optional URL to link the card to
+     */
+    url?: string;
+    /**
+     * Visual variant: 'default' for light text on dark background, 'inverse' for dark text on light background
+     */
+    variant: 'default' | 'inverse';
+    /**
+     * Reference to the host element
+     */
+    el: HTMLElement;
+    private parentContext;
+    private handleClick;
+    render(): any;
+}