@ebrains/components 0.9.1-beta → 0.9.2-beta

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.css

@@ -1,240 +0,0 @@
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.bg-accent {
-  background-color: var(--green-500);
-}
-
-.bg-dark {
-  background-color: var(--grey-300);
-}
-
-.bg-strongest {
-  background-color: var(--black);
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-default {
-  color: var(--black);
-}
-
-.text-inverse {
-  color: var(--white);
-}
-
-.p-8 {
-  padding: 0.5rem;
-}
-
-.p-16 {
-  padding: 1rem;
-}
-
-.logo {
-  width: 100%;
-  height: auto;
-}
-
-.bg-dark {
-  background-color: #333;
-}
-
-.bg-light {
-  background-color: #f3f3f3;
-}
-
-.bg-white {
-  background-color: white;
-}
-
-/* Wrong Usage: Non-brand colors */
-.non-brand-color {
-  fill: purple;
-  /* Non-brand color */
-}
-
-/* Wrong Usage: Distorted logo */
-.distorted {
-  transform: scaleX(0.5);
-}
-
-/* Wrong Usage: Adding effects */
-.effects {
-  filter: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));
-}
-
-/* Wrong Usage: Rotated logo */
-.rotated {
-  transform: rotate(15deg);
-}
-
-.no-other-bg-color {
-  background-color: var(--purple-200);
-}
-
-.no-other-color {
-  color: var(--red-700);
-}
-
-/* Wrong Usage: Applying outlines */
-.outlined {
-  stroke: red;
-  /* Outline color */
-  stroke-width: 2px;
-  /* Thickness of the outline */
-  fill: none;
-  /* Remove the fill to emphasize the outline */
-}
-
-/* Wrong Usage: Changing the font */
-.custom-font {
-  font-family: 'Comic Sans MS', cursive;
-  /* An incorrect font choice */
-  font-size: 20px;
-  /* Modify font size */
-  color: #333;
-  /* Incorrect text color */
-}
-
-.container {
-  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.container>* {
-  --container-outer-gutter: 0;
-  --breakout-container-outer-gutter: 0;
-}
-
-.grid-layout {
-  --grid-columns: 6;
-  display: grid;
-  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
-  grid-gap: var(--inner-gutter);
-}
-
-.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
-  border-bottom-width: 1px;
-}
-
-.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
-  inset-inline-start: calc(var(--inner-gutter) / -2);
-  inset-inline-end: calc(var(--inner-gutter) / -2);
-}
-
-.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
-  inset-inline-start: 0;
-}
-
-.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
-  inset-inline-end: 0;
-}
-
-.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
-  border-bottom-width: 0;
-}
-
-.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
-  border-bottom-width: 0;
-}
-
-.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
-  border-inline-end-width: 1px;
-}
-
-.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
-  border-inline-end-width: 0;
-}
-
-.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
-  top: 0;
-}
-
-.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
-  bottom: 0;
-}
-
-.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
-  bottom: 0;
-}
-
-.grid-col-span-6 {
-  --container-grid-columns: 6;
-  grid-column: span 6 / span 6;
-}
-
-.gap-y-8 {
-  row-gap: 0.5rem;
-}
-
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.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);
-}
-
-@media (min-width: 750px) {
-  .md\:grid-col-span-3 {
-    --container-grid-columns: 3;
-    grid-column: span 3 / span 3;
-  }
-
-  .md\:gap-y-12 {
-    row-gap: 0.75rem;
-  }
-}
-
-@media (min-width: 900px) {
-  .lg\:gap-y-16 {
-    row-gap: 1rem;
-  }
-
-  .lg\:grid-col-span-3 {
-    --container-grid-columns: 3;
-    grid-column: span 3 / span 3;
-  }
-}
-
-@media (min-width: 1024px) {
-  .xl\:grid-col-span-3 {
-    --container-grid-columns: 3;
-    grid-column: span 3 / span 3;
-  }
-}
-
-@media (min-width: 1280px) {
-  .xxl\:grid-col-span-2 {
-    --container-grid-columns: 2;
-    grid-column: span 2 / span 2;
-  }
-
-  .xxl\:grid-col-span-3 {
-    --container-grid-columns: 3;
-    grid-column: span 3 / span 3;
-  }
-}

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -1,22 +0,0 @@
-import { h } from "@stencil/core";
-import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
-/**
- * @internal
- */
-export class LogoWrongUsage {
-    render() {
-        return (h("div", { key: '3abc03c4b2592a3138a60c80c390ff12ac79c92e', class: "container" }, h("ul", { key: 'be3a492fe05ef05b96bfc66833f7ac30d596cf7c', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '60f3aa76849d2793907b27ad6ed0584f27896dc1', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '7c0c0f86de1354651d42f11c865ea4e68d7fd5f6', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '6c1e0b7bc964a2b062ddd539f740622ed5cf9ef8', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '4dbf231814d5994d3075ca55b8a18006eb3b487e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'ee1964d4fe1390daa4c3446370d6efd183ec80e2', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: '509d867602f88bfd2ce5030e78005eb96993e22b', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '40b486fdcf816d6cc3943b3444014a145798889f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'cc64549a8aaf14eac2ed57543ca7bbca39fd7686', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: 'e8fdc70352a2084d5bc7255059addb232f055f63', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '375278f35b81a58f00f0a5702d156774b8d5f5a0', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4c4d4f2e3a8b4111b2f444a744f366c276f1869f', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: 'c3bf1ab4f4244a345ab5babbce4f4de78b696ac6', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: '5fe3b28dba45127dc391d8101402834f09a61976', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'e4e36e3539813527c339e0e46a66661d8d9fd412', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '6d48a5cc5a0917047ba8377da80a24f42d3d16d1', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '9e55f909b1fc0fcbc9b3a1e6d57257f4972f7632', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'c1867f7232957dc5022936f2174039e4d02e6ad7', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'd0769904f374ae87e5e283135854dbfb7b448663', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '0955a1f0e63fdc260e990ce995f8d1e1546bfdf4', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4f9ad9e2a5d3ba7125284b1657db0cad282480ce', class: "mx-auto" }, h("div", { key: 'd1a2ef07750991919768bd699a8e8c2cd2801254', class: "bg-accent p-16" }, h("div", { key: '291732a9a1463be409989c10def40eafb4e89ee2', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'b9946ad16af5c474a06179be04966dfaba6c81c3', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
-    }
-    static get is() { return "logo-wrong-usage"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["logo-wrong-usage.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["logo-wrong-usage.css"]
-        };
-    }
-}

package/dist/collection/eds-docs-ui/svg-repository/svg-repository.css

@@ -1,5 +0,0 @@
-:host, .full-width {
-    display: block;
-    width: 100%;
-  }
-  

package/dist/collection/index.js

@@ -1 +0,0 @@
-export * from './components';

package/dist/collection/shared-ui/eds-card-section/eds-card-section.css

@@ -1,249 +0,0 @@
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.grid-layout {
-  display: grid;
-  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
-  grid-gap: var(--inner-gutter);
-}
-
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.grid-cols-4[class*="grid-line-x"][class*="grid-line-x"] > *:nth-child(n)::before {
-  border-bottom-width: 1px;
-}
-.grid-cols-4[class*="grid-line-xfull"] > *:nth-child(n)::before {
-  inset-inline-start: calc(var(--inner-gutter) / -2);
-  inset-inline-end: calc(var(--inner-gutter) / -2);
-}
-.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1)::before {
-  inset-inline-start: 0;
-}
-.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+4)::before {
-  inset-inline-end: 0;
-}
-.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4)::before {
-  border-bottom-width: 0;
-}
-.grid-cols-4[class*="grid-line-x"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ *::before {
-  border-bottom-width: 0;
-}
-.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(n)::after {
-  border-inline-end-width: 1px;
-}
-.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+4)::after {
-  border-inline-end-width: 0;
-}
-.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(-n+4)::after {
-  top: 0;
-}
-.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4)::after {
-  bottom: 0;
-}
-.grid-cols-4[class*="grid-line-y"][class*="grid-line-y"] > *:nth-child(4n+1):nth-last-child(-n+4) ~ li::after {
-  bottom: 0;
-}
-
-.grid-col-span-4 {
-  --container-grid-columns: 4;
-  grid-column: span 4 / span 4;
-}
-
-.gap-y-4 {
-  row-gap: 0.25rem;
-}
-
-.gap-y-8 {
-  row-gap: 0.5rem;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.inline {
-  display: inline;
-}
-
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-@media (min-width: 750px) {
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
-  .md\:gap-y-12 {
-    row-gap: 0.75rem;
-  }
-
-  .md\:pt-28 {
-    padding-top: 1.75rem;
-  }
-
-}
-
-@media (min-width: 750px) {
-  .md\:grid-col-span-1 {
-    --container-grid-columns: 1;
-    grid-column: span 1 / span 1;
-  }
-
-  .md\:grid-col-span-2 {
-    --container-grid-columns: 2;
-    grid-column: span 2 / span 2;
-  }
-
-  .md\:grid-col-span-3 {
-    --container-grid-columns: 3;
-    grid-column: span 3 / span 3;
-  }
-
-  .md\:grid-col-span-4 {
-    --container-grid-columns: 4;
-    grid-column: span 4 / span 4;
-  }
-
-  .md\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-
-  .cols-container>.md\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-
-  .md\:w-10-cols>* {
-    --container-grid-columns: 10;
-  }
-}
-
-@media (min-width: 900px) {
-  .lg\:grid-col-span-5 {
-    --container-grid-columns: 5;
-    grid-column: span 5 / span 5;
-  }
-
-  .lg\:grid-col-span-6 {
-    --container-grid-columns: 6;
-    grid-column: span 6 / span 6;
-  }
-
-  .lg\:grid-col-start-7 {
-    grid-column-start: 7;
-  }
-
-  .lg\:w-8-cols {
-    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-
-  .cols-container>.lg\:w-8-cols {
-    width: calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-
-  .lg\:w-8-cols>* {
-    --container-grid-columns: 8;
-  }
-
-  .lg\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-
-  .cols-container>.lg\:w-10-cols {
-    width: calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))));
-  }
-
-  .lg\:w-10-cols>* {
-    --container-grid-columns: 10;
-  }
-}
-
-@media (min-width: 900px) {
-  .lg\:order-last {
-    order: 9999;
-  }
-
-  .lg\:order-none {
-    order: 0;
-  }
-
-  .lg\:mt-0 {
-    margin-top: 0rem;
-  }
-
-  .lg\:block {
-    display: block;
-  }
-
-  .lg\:flex {
-    display: flex;
-  }
-
-  .lg\:hidden {
-    display: none;
-  }
-
-  .lg\:w-\[150px\] {
-    width: 150px;
-  }
-
-  .lg\:w-auto {
-    width: auto;
-  }
-
-  .lg\:max-w-\[720px\] {
-    max-width: 720px;
-  }
-
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-
-  .lg\:flex-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  .lg\:gap-y-16 {
-    row-gap: 1rem;
-  }
-
-  .lg\:px-28 {
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
-  }
-
-  .lg\:\!pl-12 {
-    padding-left: 0.75rem !important;
-  }
-
-  .lg\:\!pr-12 {
-    padding-right: 0.75rem !important;
-  }
-}

package/dist/collection/shared-ui/eds-card-section/eds-card-section.js

@@ -1,95 +0,0 @@
-import { h } from "@stencil/core";
-import { parseData } from "../../utils/sharedUtils";
-/**
- * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout of 4 columns (grid-cols-4).
- * Each card within the section can display various properties such as title, description, avatar, and additional content.
- *
- * Key Features:
- * - Accepts a JSON string or array of card objects, each defining its properties like title, description, avatar, tags, URL, and image.
- * - Configurable grid layout with adjustable column span for each card, optimizing display on different screen sizes.
- *
- * This component is ideal for displaying a structured section of cards with varying content in a responsive grid format.
- */
-export class EdsCardSection {
-    constructor() {
-        this.cards = [];
-        this.occupyCols = 1;
-    }
-    /**
-     * Parses the `cards` JSON string prop into an array of card objects.
-     * If parsing fails, returns an empty array.
-     *
-     * @returns {any[]} An array of parsed card objects.
-     */
-    get parsedCards() {
-        return parseData(this.cards);
-    }
-    /**
-     * Renders the card section as a grid layout.
-     * Each parsed card object is mapped to an `<eds-card-generic>` component,
-     * displaying card details such as title, description, avatar, etc.
-     *
-     * @returns {JSX.Element} The rendered section containing a list of cards.
-     */
-    render() {
-        return (h("section", { key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8', class: "w-full" }, h("ul", { key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
-    }
-    static get is() { return "eds-card-section"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-card-section.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-card-section.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "cards": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | Card[]",
-                    "resolved": "Card[] | string",
-                    "references": {
-                        "Card": {
-                            "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/shared-ui/eds-card-section/eds-card-section.tsx",
-                            "id": "../../../packages/components/src/shared-ui/eds-card-section/eds-card-section.tsx::Card"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "JSON string representing an array of card objects.\nEach card object can contain properties like `title`, `description`, `avatar`, `headingLevel`, `tags`, `url`, `bg`, `tiny`, and `image`.\n\nExample:\n```json\n'[{\"title\": \"Card Title\", \"description\": \"Description\", \"avatar\": \"/path/to/avatar.jpg\", \"url\": \"http://example.com\"}]'\n```"
-                },
-                "attribute": "cards",
-                "reflect": false,
-                "defaultValue": "[]"
-            },
-            "occupyCols": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "1 | 2 | 3 | 4",
-                    "resolved": "1 | 2 | 3 | 4",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Number of columns to span for each card in the grid layout four.\nThis value sets the column span on medium (md) and larger screen sizes.\nDefault is `1`."
-                },
-                "attribute": "occupy-cols",
-                "reflect": false,
-                "defaultValue": "1"
-            }
-        };
-    }
-}

package/dist/collection/shared-ui/eds-card-section/eds-card-section.stories.js

@@ -1,71 +0,0 @@
-export default {
-    title: 'Shared UI/Card Section',
-    component: 'eds-card-section',
-    argTypes: {
-        cards: {
-            control: 'object',
-            description: 'Representing an array of card objects, each with properties like title, description, avatar, image, etc.'
-        },
-        occupyCols: {
-            control: { type: 'number', min: 1, max: 12, step: 1 },
-            description: 'Number of columns to span for each card in the grid layout'
-        }
-    },
-    args: {
-        cards: [
-            {
-                title: 'The Future of AI in Healthcare',
-                description: 'Explore how AI is transforming the healthcare industry with cutting-edge technologies and research.',
-                url: '#',
-                avatar: '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',
-                shortAbbreviation: 'AI',
-                headingLevel: 'h2',
-                tags: 'Technology,AI,Healthcare',
-                tiny: false,
-                bg: true,
-                withHover: true,
-                image: {
-                    src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
-                    alt: 'EBRAINS Bernstein Conference',
-                    srcset: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 720w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1080w, https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg 1440w',
-                    sizes: '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw',
-                    width: 400,
-                    height: 300,
-                    lazyload: true
-                }
-            },
-            {
-                title: 'The Future of AI in Healthcare',
-                description: 'Explore how AI is transforming the healthcare industry with cutting-edge technologies and research.',
-                url: '#',
-                avatar: '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',
-                shortAbbreviation: 'AI',
-                headingLevel: 'h2',
-                tags: 'Tech',
-                tiny: false,
-                bg: false,
-                withHover: false,
-                image: {
-                    src: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
-                    alt: 'EBRAINS Bernstein Conference',
-                    width: 400,
-                    height: 300,
-                    lazyload: true
-                }
-            }
-        ],
-        occupyCols: 4
-    },
-    parameters: {}
-};
-// Variant: Passing cards as an array of objects via property binding
-export const Default = {
-    render: (args) => {
-        const cardSection = document.createElement('eds-card-section');
-        // Pass the array and other args as properties
-        cardSection.cards = args.cards;
-        cardSection.occupyCols = args.occupyCols;
-        cardSection.className = args.extraClass;
-        return cardSection;
-    }
-};