@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-cards/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/components/eds-cards/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: '4b30b9eb2585350196efa901f5b36d903e43af4d', class: "w-full" }, h("ul", { key: 'ab51c67c0f4095e70be1b1c2fdf9975726b50760', 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/components/eds-cards/eds-card-section/eds-card-section.tsx",
-                            "id": "../../../packages/components/src/components/eds-cards/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/components/eds-cards/eds-card-section/eds-card-section.stories.js

@@ -1,71 +0,0 @@
-export default {
-    title: 'Components/Cards/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;
-    }
-};

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

@@ -1,103 +0,0 @@
-.h-auto {
-    height: auto;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .\!min-h-20 {
-    min-height: 1.25rem !important;
-  }
-  .min-h-120 {
-    min-height: 120px;
-  }
-  .min-h-156 {
-    min-height: 156px;
-  }
-  .bg-default {
-    background-color: var(--grey-200);
-  }
-  .bg-inverse {
-    background-color: var(--white);
-  }
-  .effect-shadow {
-    transition-property: box-shadow;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  }
-  .hover\:shadow-hover:hover {
-    --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);
-    --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  }
-  .cursor-pointer {
-    cursor: pointer;
-  }
-  .border-soft {
-    border-color: rgba(0, 0, 0, .15 );
-  }
-  .border-softer {
-    border: 2px solid rgba(0, 0, 0, .1 );
-  }
-  .effect-focus-within {
-    outline-width: 3px;
-    outline-offset: 2px;
-    outline-color: var(--green-500);
-  }
-  .effect-focus-within:focus-within {
-    outline-style: solid;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .absolute {
-    position: absolute;
-  }
-  .relative {
-    position: relative;
-  }
-  .inline {
-    display: inline;
-  }
-  .flex {
-    display: flex;
-  }
-  .inline-flex {
-    display: inline-flex;
-  }
-  .grow {
-    flex-grow: 1;
-  }
-  .flex-col {
-    flex-direction: column;
-  }
-  .rounded-lg {
-    border-radius: 16px;
-  }
-  .border-2 {
-    border-width: 2px;
-  }
-  .p-12 {
-    padding: 0.75rem;
-  }
-  .p-16 {
-    padding: 1rem;
-  }
-  .mt-6 {
-    margin-top: 0.375rem;
-  }
-  .mt-8 {
-    margin-top: 0.5rem;
-  }
-  .gap-y-4 {
-    row-gap: 0.25rem;
-  }
-  .order-first {
-    order: -9999;
-  }
-  .mb-10 {
-    margin-bottom: 0.625rem;
-  }
-  .mb-12 {
-    margin-bottom: 0.75rem;
-  }