@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/collection/components/eds-table/eds-table.stories.js

@@ -0,0 +1,99 @@
+export default {
+    title: 'Components/Table',
+    component: 'eds-table',
+    argTypes: {
+        data: {
+            control: 'object',
+            description: 'Data array to display in the table'
+        },
+        config: {
+            control: 'object',
+            description: 'Column configurations (hiding and formatting)'
+        },
+        endpoint: {
+            control: 'text',
+            description: 'API endpoint to fetch data from'
+        },
+        rowsPerPage: {
+            control: { type: 'number' },
+            description: 'Number of rows displayed per page'
+        },
+        paginationEnabled: {
+            control: { type: 'boolean' },
+            description: 'Toggle pagination on or off'
+        },
+        searchEnabled: {
+            control: { type: 'boolean' },
+            description: 'Enable search input for filtering'
+        },
+        columnSize: { control: 'select', options: ['default', 'medium', 'large'] }
+    },
+    args: {
+        data: [
+            { Property: 'username', Type: 'string', Required: 'Yes' },
+            { Property: 'password', Type: 'string', Required: 'Yes' },
+            { Property: 'email', Type: 'string', Required: 'Yes' }
+        ],
+        config: {
+            Required: { hidden: true },
+            Type: { format: 'uppercase' },
+            Property: { format: 'code' }
+        },
+        rowsPerPage: 5,
+        paginationEnabled: true,
+        searchEnabled: true,
+        columnSize: 'default'
+    }
+};
+// Sample data for the table
+const sampleData = [
+    { name: 'Alice', age: 25, occupation: 'Engineer' },
+    { name: 'Bob', age: 30, occupation: 'Designer' },
+    { name: 'Charlie', age: 35, occupation: 'Manager' },
+    { name: 'Daisy', age: 28, occupation: 'Developer' },
+    { name: 'Edward', age: 40, occupation: 'Architect' },
+    { name: 'Fiona', age: 22, occupation: 'Analyst' },
+    { name: 'George', age: 29, occupation: 'Technician' },
+    { name: 'Hannah', age: 31, occupation: 'Scientist' },
+    { name: 'Ian', age: 27, occupation: 'Developer' },
+    { name: 'Jackie', age: 33, occupation: 'Consultant' }
+];
+export const Default = {
+    render: (args) => `
+    <eds-table
+      table-data='${JSON.stringify(args.data)}'
+      config='${JSON.stringify(args.config)}'
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      endpoint="${args.endpoint || ''}"
+      column-size="${args.columnSize}"
+    ></eds-table>
+  `,
+    args: {
+        data: sampleData,
+        config: {
+            name: { format: 'bold' },
+            occupation: { format: 'uppercase' }
+        },
+        rowsPerPage: 5,
+        paginationEnabled: true,
+        searchEnabled: true,
+        endpoint: '', // Leave empty for manual data entry
+        columnSize: 'default'
+    }
+};
+export const WithEndpoint = {
+    render: (args) => `
+    <eds-table 
+      endpoint="${args.endpoint}"
+      rows-per-page="${args.rowsPerPage}"
+      pagination-enabled="${args.paginationEnabled}"
+      search-enabled="${args.searchEnabled}"
+      host-width="600"
+      column-size="${args.columnSize}"
+    ></eds-table>`,
+    args: {
+        endpoint: 'http://127.0.0.1:5001/api/catalogue'
+    }
+};

package/dist/collection/components/eds-tag/eds-tag.css

@@ -0,0 +1,101 @@
+  .f-ui-01 {
+    font-family: var(--f-ui-01-fontFamily);
+    font-weight: var(--f-ui-01-fontWeight);
+    font-size: var(--f-ui-01-fontSize);
+    line-height: var(--f-ui-01-lineHeight);
+    letter-spacing: var(--f-ui-01-letterSpacing);
+  }
+  .f-ui-03 {
+    font-family: var(--f-ui-03-fontFamily);
+    font-weight: var(--f-ui-03-fontWeight);
+    font-size: var(--f-ui-03-fontSize);
+    line-height: var(--f-ui-03-lineHeight);
+    letter-spacing: var(--f-ui-03-letterSpacing);
+  }
+  .f-ui-05 {
+    font-family: var(--f-ui-05-fontFamily);
+    font-weight: var(--f-ui-05-fontWeight);
+    font-size: var(--f-ui-05-fontSize);
+    line-height: var(--f-ui-05-lineHeight);
+    letter-spacing: var(--f-ui-05-letterSpacing);
+  }
+  .py-1 {
+    padding-top: 0.0625rem;
+    padding-bottom: 0.0625rem;
+  }
+  .py-2 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  .py-3 {
+    padding-top: 0.1875rem;
+    padding-bottom: 0.1875rem;
+  }
+  .py-4 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .px-2 {
+    padding-left: 0.125rem;
+    padding-right: 0.125rem;
+  }
+  .px-3 {
+    padding-left: 0.1875rem;
+    padding-right: 0.1875rem;
+  }
+  .px-4 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .px-5 {
+    padding-left: 0.3125rem;
+    padding-right: 0.3125rem;
+  }
+  .px-6 {
+    padding-left: 0.375rem;
+    padding-right: 0.375rem;
+  }
+  .border-2 {
+    border-width: 2px;
+  }
+  .rounded-pill {
+    border-radius: 100px;
+  }
+  .border-default {
+    border: 2px solid var(--black);
+  }
+  .text-inverse {
+    color: var(--white);
+  }
+  .bg-accent {
+    background-color: var(--green-500);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .text-\[\#0034CB\] {
+    --tw-text-opacity: 1;
+    color: rgb(0 52 203 / var(--tw-text-opacity));
+  }
+  .border-\[\#0034CB\] {
+    --tw-border-opacity: 1;
+    border: 2px solid rgb(0 52 203 / var(--tw-border-opacity));
+  }
+  .text-light {
+    color: var(--grey-700);
+  }
+  .bg-strongest-soft {
+    background-color: rgba(0, 0, 0, .05);
+  }
+  .border-transparent {
+    border-color: var(--transparent);
+  }
+  .border-inverse {
+    border-color: var(--white);
+  }
+  .bg-inverse {
+    background-color: var(--white);
+  }
+  .text-lighter {
+    color: var(--grey-600);
+  }

package/dist/collection/components/eds-tag/eds-tag.js

@@ -0,0 +1,110 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+// Define the CVA for the tag styles
+const tagStyles = cva(['border-2 rounded-pill'], // Base classes
+{
+    variants: {
+        intent: {
+            primary: 'border-accent bg-accent',
+            default: 'border-default',
+            strong: 'text-inverse bg-strongest border-default',
+            accent: 'text-[#0034CB] border-[#0034CB]',
+            weak: 'text-light bg-strongest-soft border-transparent',
+            inverse: 'border-inverse text-inverse',
+            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+        },
+        size: {
+            small: 'f-ui-05 py-2 px-4', // smaller padding
+            medium: 'f-ui-03 py-3 px-5', // moderate padding
+            large: 'f-ui-01 py-4 px-6' // larger padding
+        }
+    },
+    defaultVariants: {
+        intent: 'default',
+        size: 'small'
+    }
+});
+/**
+ * `EdsTag` is a stylized label component designed to display short, categorical information.
+ * It supports multiple visual styles defined by the `intent` prop and three sizes.
+ */
+export class EdsTag {
+    constructor() {
+        this.label = undefined;
+        this.intent = 'default';
+        this.size = 'small';
+    }
+    render() {
+        const classes = tagStyles({ intent: this.intent, size: this.size });
+        return h("span", { key: '4531e69a8dce962b77107b2da984aeae6ba4b4c4', class: classes }, this.label);
+    }
+    static get is() { return "eds-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to be displayed inside the tag."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong'",
+                    "resolved": "\"accent\" | \"default\" | \"inverse\" | \"inverse-strong\" | \"strong\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual style or intent of the tag."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tag: small, medium, or large."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'small'"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-tag/eds-tag.stories.js

@@ -0,0 +1,34 @@
+export default {
+    title: 'Components/Tag',
+    component: 'eds-tag',
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label text for the tag'
+        },
+        intent: {
+            control: 'select',
+            options: ['primary', 'default', 'strong', 'accent', 'weak', 'inverse', 'inverse-strong'],
+            description: 'The visual intent style for the tag'
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium', 'large'],
+            description: 'The size of the tag: small (f-ui-05), medium (f-ui-03), or large (f-ui-01)'
+        }
+    },
+    args: {
+        label: 'Default Tag',
+        intent: 'default',
+        size: 'small'
+    },
+    parameters: {}
+};
+export const Default = {
+    render: (args) => `<eds-tag label="${args.label}" intent="${args.intent}" size="${args.size}"></eds-tag>`,
+    args: {
+        label: 'Default Tag',
+        intent: 'default',
+        size: 'small'
+    }
+};