@ebrains/components 0.0.1-alpha.0

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.stories.js

@@ -0,0 +1,31 @@
+import { html } from "lit-html";
+export default {
+    title: 'Components/Cards/Card Desc',
+    component: 'eds-card-desc',
+    argTypes: {
+        description: { control: 'text' },
+        descClass: { control: 'text' },
+        truncate: { control: 'boolean' },
+        truncateLines: { control: 'text' }
+    },
+    args: {
+        description: 'This is a sample description for the eds-card-desc component.',
+        descClass: 'f-ui-03-light',
+        truncate: true,
+        truncateLines: '3'
+    }
+};
+export const Default = {
+    render: (args) => html `
+    <eds-card-desc
+      description="${args.description}"
+      desc-class="${args.descClass}"
+      truncate="${args.truncate}"
+      truncate-lines="${args.truncateLines}"
+    ></eds-card-desc>
+  `,
+    args: {
+        description: 'This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.This is a long description that provides more detailed information without being truncated. It will display in full, regardless of its length.',
+        truncate: false
+    }
+};

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.css

@@ -0,0 +1,9 @@
+.flex {
+    display: flex;
+}
+.flex-wrap {
+    flex-wrap: wrap;
+}
+.gap-y-4 {
+    row-gap: 0.25rem;
+  }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsCardTags {
+    constructor() {
+        this.accent = false;
+        this.tags = [];
+    }
+    render() {
+        return (h("div", { key: 'b201dc6df5e809d828a055fb5f01fe798e228361', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+    }
+    static get is() { return "eds-card-tags"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-tags.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-tags.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean indicating whether the tags should be displayed with an accent style.\nIf true, tags will use the 'accent' intent; otherwise, the default intent is used."
+                },
+                "attribute": "accent",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tags": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An array of tag strings to be displayed within the card."
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.css

@@ -0,0 +1,92 @@
+a {
+    all: unset;
+    /* Reset all user-agent styles */
+    display: inline;
+    /* Reapply necessary styles */
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0
+}
+
+.f-heading-01 {
+    font-family: var(--f-heading-01-fontFamily);
+    font-weight: var(--f-heading-01-fontWeight);
+    font-size: var(--f-heading-01-fontSize);
+    line-height: var(--f-heading-01-lineHeight);
+    letter-spacing: var(--f-heading-01-letterSpacing);
+}
+
+.f-heading-02 {
+    font-family: var(--f-heading-02-fontFamily);
+    font-weight: var(--f-heading-02-fontWeight);
+    font-size: var(--f-heading-02-fontSize);
+    line-height: var(--f-heading-02-lineHeight);
+    letter-spacing: var(--f-heading-02-letterSpacing);
+}
+
+.f-heading-03 {
+    font-family: var(--f-heading-03-fontFamily);
+    font-weight: var(--f-heading-03-fontWeight);
+    font-size: var(--f-heading-03-fontSize);
+    line-height: var(--f-heading-03-lineHeight);
+    letter-spacing: var(--f-heading-03-letterSpacing);
+}
+
+.f-heading-04 {
+    font-family: var(--f-heading-04-fontFamily);
+    font-weight: var(--f-heading-04-fontWeight);
+    font-size: var(--f-heading-04-fontSize);
+    line-height: var(--f-heading-04-lineHeight);
+    letter-spacing: var(--f-heading-04-letterSpacing);
+}
+
+.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-heading-06 {
+    font-family: var(--f-heading-06-fontFamily);
+    font-weight: var(--f-heading-06-fontWeight);
+    font-size: var(--f-heading-06-fontSize);
+    line-height: var(--f-heading-06-lineHeight);
+    letter-spacing: var(--f-heading-06-letterSpacing);
+}
+
+.break-words {
+    overflow-wrap: break-word;
+}
+
+.after\:absolute::after {
+    position: absolute;
+}
+
+.after\:inset-0::after {
+    inset: 0rem;
+}
+
+.after\:z-10::after {
+    z-index: 10;
+}
+
+.after\:content-\[\'\'\]::after {
+    --tw-content: '';
+    content: var(--tw-content);
+}
+
+.focus\:outline-none:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsCardTitle {
+    constructor() {
+        this.url = undefined;
+        this.titleClass = undefined;
+        this.headingLevel = 'h3';
+        this.externalLink = false;
+        this.cardTitle = undefined;
+        this.hierarchy = true;
+    }
+    /**
+     * Dynamically generate the title class based on the heading level.
+     */
+    getTitleClass() {
+        const levelMap = this.hierarchy
+            ? {
+                h1: '05',
+                h2: '05',
+                h3: '05',
+                h4: '05',
+                h5: '05',
+                h6: '06'
+            }
+            : {
+                h1: '01',
+                h2: '02',
+                h3: '03',
+                h4: '04',
+                h5: '05',
+                h6: '06'
+            };
+        return `f-heading-${levelMap[this.headingLevel]}`;
+    }
+    /*private getTag() {
+      if (this.url) {
+        return 'a';
+      }
+      return 'span';
+    }*/
+    render() {
+        //const Tag = this.getTag();
+        const Heading = this.headingLevel;
+        return (h(Heading, { key: '8aee3bcb0e04508dd21a03ea0f695e040f37c767', class: this.getTitleClass() }, h("a", { key: 'c5fa27fe86037ed6b039c156aecdf1acc9c7c8bc', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+    }
+    static get is() { return "eds-card-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-card-title.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-card-title.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that the title should link to. If provided, the title will be rendered as an anchor (`<a>`)."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "titleClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS class applied to the title element for styling.\nThis will be dynamically set based on the heading level."
+                },
+                "attribute": "title-class",
+                "reflect": false
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading level for the title. Can be 'h2', 'h3', 'h4', 'h5', or 'h6'.\nDefault is 'h3'."
+                },
+                "attribute": "heading-level",
+                "reflect": false,
+                "defaultValue": "'h3'"
+            },
+            "externalLink": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the link should open in a new tab if the URL is provided.\nDefault is `false`."
+                },
+                "attribute": "external-link",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "cardTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text content for the title."
+                },
+                "attribute": "card-title",
+                "reflect": false
+            },
+            "hierarchy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the hierarchy is enabled.\nIf true, all headings except 'h6' map to '05', and 'h6' maps to '06'."
+                },
+                "attribute": "hierarchy",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js

@@ -0,0 +1,86 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsCardWrapper {
+    constructor() {
+        this.tiny = false;
+        this.withBg = true;
+        this.withHover = true;
+    }
+    hasSlot(name) {
+        if (name) {
+            return !!this.el.querySelector(`[slot="${name}"]`);
+        }
+        return !!this.el.querySelector(':not([slot])');
+    }
+    render() {
+        const articleClasses = [
+            this.tiny ? 'min-h-120' : 'min-h-156',
+            this.withBg ? 'bg-inverse' : 'bg-default',
+            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
+            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
+        ].join(' ');
+        return (h("article", { key: 'c52f6ad7873050c052b8c0e68b2c812d74f2ddf1', class: articleClasses }, h("slot", { key: 'dac6f9fe339c8baa191ee2fd622332ddf25ec08d' }), this.hasSlot('footer') && (h("div", { key: '301862515ba88f320d1af722bec6120bc3e7d723', class: "mt-auto" }, h("slot", { key: '85d939150663a4586934413c9965aa92a9babeef', name: "footer" })))));
+    }
+    static get is() { return "eds-card-wrapper"; }
+    static get properties() {
+        return {
+            "tiny": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should be displayed with a smaller height.\nIf true, the card will use the 'tiny' height class."
+                },
+                "attribute": "tiny",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "withBg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should have a background color.\nIf true, the card will have a background, otherwise it will not."
+                },
+                "attribute": "with-bg",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "withHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A boolean that determines whether the card should display a hover effect.\nIf true, the card will have a shadow effect and change its cursor on hover."
+                },
+                "attribute": "with-hover",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

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