@ebrains/components 0.9.2-beta → 0.9.3-beta

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("div", { key: '29efde52c2dd279e53de859e2d55f13ef456fbb7', class: "container" }, h("ul", { key: '47ec32e39e00a93c9fd0ee9353d2e87a5530d937', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '0890b62f9594e3533c9373d7dd69c9a523459d2d', 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: '29ab45edf20e7e5a5e09ba2b885ab728b20e03ea', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '9ef9b01748e1ba30658714883b0997578c8b5e65', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '86e3b5b446bec5b603a4805dfbd0178db38c9e7a', 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: 'a4162957d768f7cc4a2ed37ea54936deb51b5139', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'e191bfc6f34d3abb9932f0ee1a292a1ef2c014e4', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '2ff5502d05c7250a96e713ae9262e196713972a0', 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: '7fd6ae31c854500d409c1a7ded46701fd3594048', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: '1ba0aa443e530fabe50a1c35424dbff92af91b26', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: 'd559f9daac4e6c9aaa4aede80674dcc8e08de6ca', 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: '8a055314d4e27ff21d1cc549015c99bb9e902701', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '89f33c8671e0fd28c5af8b043ac272bad057bb09', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'cebc53c3b9587b6d7716024a1a918981091336d7', 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: '5174d83109b26e78025e8423f7d8efb23645fcfe', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '11ad5211fe42aac40850750430f09fdf90ab7550', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: 'a9d64273d612e625507e118e1eb026e46dbb2327', 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: '23b94e3540210c8167250a3ea949811e38a4c54e', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: '3540516d624e796c46ad8dde67c9894a12c46139', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '5b727526d27d8451eaed5fdcfcbc6c5fb63d47bf', 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: '3db0e0d743e3c4ea7de0d7acd9bd352bc13c884a', class: "mx-auto" }, h("div", { key: '813f12df22dc5216791bd7f830e487f7c7067a1d', class: "bg-accent p-16" }, h("div", { key: 'd0d7436a198169184ccf797fa9ab04502b629ab0', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'ef6e1a7df5f3d5ea40b4ea9ca39461da0413ba5c', 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

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

package/dist/{components/svg-repository.entry.js → collection/eds-docs-ui/svg-repository/svg-repository.js}

@@ -1,12 +1,9 @@
-import { r as registerInstance, h, g as getElement } from './index-9d277061.js';
-import { L as svgs } from './index-7281d120.js';
-
-const svgRepositoryCss = ":host,.full-width{display:block;width:100%}";
-
-const SvgRepository = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
+import { h } from "@stencil/core";
+import * as svgs from "../../../../../../../packages/svgs/src/index";
+/**
+ * @internal
+ */
+export class SvgRepository {
     // Convert SVG data to a format usable by `eds-table`
     getSvgData() {
         return Object.entries(svgs)
@@ -28,10 +25,19 @@ const SvgRepository = class {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: 'f9b58e4ab1104753ef5e26fa70af162d9e5ddb1c', class: "full-width" }, h("eds-table", { key: 'fe21b6043cc0fc6f96cb8359f3e7ace75d3f4639', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: '337ffab9c7167da8c4e7300297faf0e7dd5886e0', class: "full-width" }, h("eds-table", { key: '686e28e32060b5b4f72769744569460555466bb9', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+    }
+    static get is() { return "svg-repository"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["svg-repository.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["svg-repository.css"]
+        };
     }
-    get hostEl() { return getElement(this); }
-};
-SvgRepository.style = svgRepositoryCss;
-
-export { SvgRepository as svg_repository };
+    static get elementRef() { return "hostEl"; }
+}

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,249 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,71 @@
+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;
+    }
+};

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

@@ -0,0 +1,86 @@
+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: 'ce716958892ee4d324efeb2399885c13d63ff0bb' }, h("eds-link", { key: 'de191023658c2f4c59144d334075d8e1f4fa6133', 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 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'
+    }
+};