@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,206 @@
+.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;
+  }
+  .bg-accent {
+    background-color: var(--green-500);
+  }
+  .bg-dark {
+    background-color: var(--grey-300);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .text-default {
+    color: var(--black);
+  }
+  .text-inverse {
+    color: var(--white);
+  }
+  .p-8 {
+    padding: 0.5rem;
+  }
+  .p-16 {
+    padding: 1rem;
+  }
+
+  .f-heading-05 {
+    font-family: var(--f-heading-05-fontFamily);
+    font-weight: var(--f-heading-05-fontWeight);
+    font-size: var(--f-heading-05-fontSize);
+    line-height: var(--f-heading-05-lineHeight);
+    letter-spacing: var(--f-heading-05-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);
+  }
+  .f-ui-02-light {
+    font-family: var(--f-ui-02-light-fontFamily);
+    font-weight: var(--f-ui-02-light-fontWeight);
+    font-size: var(--f-ui-02-light-fontSize);
+    line-height: var(--f-ui-02-light-lineHeight);
+    letter-spacing: var(--f-ui-02-light-letterSpacing);
+  }
+
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+  
+  .example {
+    width: 200px;
+    text-align: center;
+    font-size: 14px;
+  }
+  
+  .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(1.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 */
+}
+.grid-layout {
+  display: grid;
+  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+  grid-gap: var(--inner-gutter);
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+@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: 900px) {
+  .lg\:order-last {
+    order: 9999;
+  }
+  .lg\:order-none {
+    order: 0;
+  }
+  .lg\:mt-0 {
+    margin-top: 0rem;
+  }
+  .lg\:flex {
+    display: flex;
+  }
+  .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;
+  }
+}
+
+@media (min-width: 750px) {
+  .md\:grid-col-span-4 {
+    --container-grid-columns: 4;
+    grid-column: span 4 / span 4;
+  }
+  .md\:grid-col-span-6 {
+    --container-grid-columns: 6;
+    grid-column: span 6 / span 6;
+  }
+}
+
+.flex-col {
+  flex-direction: column;
+}

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
+/**
+ * @internal
+ */
+export class LogoWrongUsage {
+    render() {
+        return (h("ul", { key: '0cc57b3da3fe93da5d212efe04c5276588388b3c', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '3c3ef2133b759fd191ee78a28e91219677ddf6f3', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '2a6fff275d938440878a4303968b4d9ec51d1317', class: "example" }, h("div", { key: 'bb1a5e1d55c0faf369c8f8210e07f96991d03a7e', class: "bg-dark " }, h("div", { key: 'a15bfd5f135d36f8d7e142bebddef547d03e9106', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '9e9e8c6afb8a6f232ad940869c439b5385bab7f8', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: 'a0262fc388cdb5bb479e8e19b452cb26d7ad50f4', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '38e0cae361c255a179fcd1e40034f09c7f68efdb', class: "example" }, h("div", { key: 'd86cd1dacf5be058fd7f55434c1c641975d7cff2', class: "no-other-color p-16" }, h("div", { key: 'e1bec738b42a1b7a69149cf7fab1aa83c67b71a6', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: 'fe1f4b002855fbd9c85c3964bed82f7d3e8391d2', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: '8f15d66b424bb696d11bbfd67260dab8235cca55', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '9802174be7268b50897eb8577e5f2a7e852146c9', class: "example" }, h("div", { key: 'c9004c582f5da37657181f13cf094193fd5ccd82', class: "bg-light p-16" }, h("div", { key: '0f9c62403a7e0621bc050e8682de264ea38dd252', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '2f69f536dbe34278a08e6fa8b08fec081f398a6c', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: 'a281c7860d69a146f3f9c4f747586b3720ab8c5f', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '31768e18513607222c5f6e3761137279bf915db3', class: "example" }, h("div", { key: '8a8c6db62f993ed0faf09c52af76a60aa0abe595', class: "bg-white p-16" }, h("div", { key: '8584bada781120c4e8e6f78df096e2bf146a2932', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'b39ce49cd867643dbdbd11553a842e4493d89e46', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '08f767b3c8fca22783b19abfb153b5f137cf195b', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '1d580e1a3d4b1ff8c599856ef93b8d0b15a690f3', class: "example" }, h("div", { key: 'be79457c738d824fa45f77bd5d8a6ec59144a2e6', class: "bg-white p-16" }, h("div", { key: 'b68491897de72c967d6f55e80b49ca9d38a61703', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '48a366d2ebb4692755a50e869ea14db016bbf9e0', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '90385d5ea27b23818c403afcdf4f66ab6e9ad4ee', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '092eb2ddb731efb0661d175cfd1bc9e62d0a56bf', class: "example" }, h("div", { key: '6c5193fa3e17537d7835e57b74d54502d82a4ab8', class: "bg-light p-16" }, h("div", { key: '3df00f23cfc582861a085d6c45ed749d89843701', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '915bfa520f6d489f5700bdb1e708b53e9bde589a', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'dfc1b5ba8f88c8697536aed0d1fa9693b97b655d', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: '71c7ad168cc56681f365ec7741f86ea84b196dea', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'e81d58479a79dce6264b8c9723849e97bcb4af8d', class: "example" }, h("div", { key: 'ff81ea921d7807964af169993a10d67ad6f318ed', class: "bg-accent p-16" }, h("div", { key: 'c3fb1fe5e8df1b72d853b66649b7f272858976ed', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'ed303d7fd8674a0cdc8f93a247bd81a1cbdacacb', class: "f-ui-02" }, "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/index.js

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

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

@@ -0,0 +1,153 @@
+.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-col-span-12 {
+    --container-grid-columns: 12;
+    grid-column: span 12 / span 12;
+  }
+  .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-4 {
+      --container-grid-columns: 4;
+      grid-column: span 4 / span 4;
+    }
+    .md\:grid-col-span-6 {
+      --container-grid-columns: 6;
+      grid-column: span 6 / span 6;
+    }
+    .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

@@ -0,0 +1,93 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout.
+ * Each card within the section can display various properties such as title, description, avatar, and additional content.
+ *
+ * Key Features:
+ * - Accepts a JSON string 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 = undefined;
+        this.cols = 4;
+    }
+    /**
+     * 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() {
+        try {
+            return JSON.parse(this.cards);
+        }
+        catch (e) {
+            //console.error('Error parsing links JSON', e);
+            return [];
+        }
+    }
+    /**
+     * 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: '587f8d95e27862e855a7aab3d157b3b26c12181e', class: "w-full" }, h("ul", { key: 'e655546e5e92dbbfb5640f448409584b4f83a98d', class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-12 md:grid-col-span-${this.cols} 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",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "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
+            },
+            "cols": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns to span for each card in the grid layout.\nThis value sets the column span on medium (md) and larger screen sizes.\nDefault is `4`."
+                },
+                "attribute": "cols",
+                "reflect": false,
+                "defaultValue": "4"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,74 @@
+export default {
+    title: 'Shared UI/Card Section',
+    component: 'eds-card-section',
+    argTypes: {
+        cards: {
+            control: 'text',
+            description: 'JSON string representing an array of card objects, each with properties like title, description, avatar, image, etc.'
+        },
+        cols: {
+            control: { type: 'number', min: 1, max: 12, step: 1 },
+            description: 'Number of columns to span for each card in the grid layout'
+        },
+        extraClass: {
+            control: 'text',
+            description: 'Additional CSS classes for custom styling'
+        }
+    },
+    args: {
+        cards: JSON.stringify([
+            {
+                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
+                }
+            }
+            // Additional cards can be added here
+        ]),
+        cols: 4,
+        extraClass: ''
+    },
+    parameters: {}
+};
+export const Default = {
+    render: (args) => `
+      <eds-card-section
+        cards='${args.cards}'
+        cols="${args.cols}"
+        class="${args.extraClass}"
+      ></eds-card-section>`
+};