@ebrains/components 0.5.0-alpha.0 → 0.6.0-alpha.0

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

@@ -1,153 +1,249 @@
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
 .w-full {
-    width: 100%;
+  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;
   }
-  .grid-layout {
-    display: grid;
-    grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
-    grid-gap: var(--inner-gutter);
+
+  .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;
   }
-  .grid-col-span-12 {
-    --container-grid-columns: 12;
-    grid-column: span 12 / span 12;
+
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
-  .gap-y-4 {
-    row-gap: 0.25rem;
+
+  .md\:grid-col-span-4 {
+    --container-grid-columns: 4;
+    grid-column: span 4 / span 4;
   }
-  .gap-y-8 {
-    row-gap: 0.5rem;
+
+  .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))));
   }
 
-  .flex-row {
-    flex-direction: row;
+  .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;
   }
-  .flex-row-reverse {
-    flex-direction: row-reverse;
+
+  .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))));
   }
-  .flex-col {
-    flex-direction: column;
+
+  .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))));
   }
-  .inline {
-    display: inline;
+
+  .lg\:w-10-cols>* {
+    --container-grid-columns: 10;
+  }
+}
+
+@media (min-width: 900px) {
+  .lg\:order-last {
+    order: 9999;
   }
-  .flex {
+
+  .lg\:order-none {
+    order: 0;
+  }
+
+  .lg\:mt-0 {
+    margin-top: 0rem;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\: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;
-    }
-  }
+
+  .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,10 +1,10 @@
 import { h } from "@stencil/core";
 /**
- * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout.
+ * `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 of card objects, each defining its properties like title, description, avatar, tags, URL, and image.
+ * - 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.
@@ -12,7 +12,7 @@ import { h } from "@stencil/core";
 export class EdsCardSection {
     constructor() {
         this.cards = [];
-        this.cols = 4;
+        this.occupyCols = 1;
     }
     /**
      * Parses the `cards` JSON string prop into an array of card objects.
@@ -48,7 +48,7 @@ export class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: '1f221e1ec7c3cdd0e3aed18f6f930c2c5456c64b', class: "w-full" }, h("ul", { key: '36f984994bb2dc247475c20422f7e6e7da7d058d', 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 })))))));
+        return (h("section", { key: '6c7067186b4afd873992008311ef65434e2860ef', class: "w-full" }, h("ul", { key: '186f5dc40e4d68c7565ba104dec900c707a59bc5', 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"; }
@@ -88,23 +88,23 @@ export class EdsCardSection {
                 "reflect": false,
                 "defaultValue": "[]"
             },
-            "cols": {
+            "occupyCols": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "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.\nThis value sets the column span on medium (md) and larger screen sizes.\nDefault is `4`."
+                    "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": "cols",
+                "attribute": "occupy-cols",
                 "reflect": false,
-                "defaultValue": "4"
+                "defaultValue": "1"
             }
         };
     }

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

@@ -6,7 +6,7 @@ export default {
             control: 'object',
             description: 'Representing an array of card objects, each with properties like title, description, avatar, image, etc.'
         },
-        cols: {
+        occupyCols: {
             control: { type: 'number', min: 1, max: 12, step: 1 },
             description: 'Number of columns to span for each card in the grid layout'
         },
@@ -69,7 +69,7 @@ export const Default = {
         const cardSection = document.createElement('eds-card-section');
         // Pass the array and other args as properties
         cardSection.cards = args.cards;
-        cardSection.cols = args.cols;
+        cardSection.occupyCols = args.occupyCols;
         cardSection.className = args.extraClass;
         return cardSection;
     }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsCookiesPreference {
+    constructor() {
+        this.buttonText = 'Cookies Preferences';
+        this.intent = undefined;
+        this.showMatomoNotice = false;
+        this.noticeKey = 0;
+    }
+    /**
+     * Always shows the eds-matomo-notice popup.
+     * Every click removes the "matomo-deferred" key and forces a remount.
+     */
+    toggleCookiesPopup() {
+        // Remove the key from session storage so that the notice will run its checks (or be forced to show)
+        sessionStorage.removeItem('matomo-deferred');
+        if (this.showMatomoNotice) {
+            // Force a remount by changing the key
+            this.noticeKey = this.noticeKey + 1;
+        }
+        else {
+            this.showMatomoNotice = true;
+        }
+    }
+    render() {
+        return (h("div", { key: 'ca5d44522f94e9ea009c657c5eae6e357cd0d13a' }, h("eds-link", { key: '563a369e2ed44d08a6dd47922c1c1c888e81543a', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+    }
+    static get is() { return "eds-cookies-preference"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-cookies-preference.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-cookies-preference.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to display on the cookies preference button."
+                },
+                "attribute": "button-text",
+                "reflect": false,
+                "defaultValue": "'Cookies Preferences'"
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'primary'\n    | 'secondary'\n    | 'tertiary'\n    | 'ghost'\n    | 'strong'\n    | 'weak'\n    | 'inverse'\n    | 'underline'\n    | 'blueish'",
+                    "resolved": "\"blueish\" | \"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual intent or style of the button."
+                },
+                "attribute": "intent",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showMatomoNotice": {},
+            "noticeKey": {}
+        };
+    }
+}

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.st.js

@@ -0,0 +1,31 @@
+export default {
+    title: 'Shared Ui/Cookies Preference',
+    component: 'eds-cookies-preference',
+    argTypes: {
+        buttonText: {
+            control: 'text',
+            description: 'Text to display on the cookies preference button.'
+        },
+        intent: {
+            control: 'select',
+            options: ['primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'],
+            description: 'The visual intent or style of the button.'
+        }
+    },
+    args: {
+        buttonText: 'Cookies Preferences',
+        intent: 'ghostInverse'
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-cookies-preference 
+        button-text="${args.buttonText}"
+        intent="${args.intent}">
+      </eds-cookies-preference>
+    `,
+    args: {
+        buttonText: 'Cookies Preferences',
+        intent: 'ghostInverse'
+    }
+};