@ebrains/components 0.9.3-beta → 1.0.0

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

@@ -115,57 +115,6 @@ export class EdsButton {
                 size: 'small'
             }
         });
-        this.iconCva = cva(['flex inline-flex items-center justify-center'], {
-            variants: {
-                size: {
-                    large: '',
-                    small: ''
-                },
-                iconPos: {
-                    left: '',
-                    right: ''
-                },
-                iconOnly: {
-                    false: '',
-                    true: ''
-                },
-                show: {
-                    false: 'opacity-0',
-                    true: ''
-                }
-            },
-            compoundVariants: [
-                {
-                    size: 'small',
-                    iconPos: 'left',
-                    class: 'mr-4',
-                    iconOnly: false
-                },
-                {
-                    size: 'small',
-                    iconPos: 'right',
-                    class: 'ml-4',
-                    iconOnly: false
-                },
-                {
-                    size: 'large',
-                    iconPos: 'left',
-                    class: 'mr-4',
-                    iconOnly: false
-                },
-                {
-                    size: 'large',
-                    iconPos: 'right',
-                    class: 'ml-4',
-                    iconOnly: false
-                }
-            ],
-            defaultVariants: {
-                iconPos: 'right',
-                size: 'small',
-                iconOnly: false
-            }
-        });
         this.parentContext = null; // Accepts the entire event detail or null
         this.label = undefined;
         this.ariaLabel = 'Button';
@@ -218,17 +167,14 @@ export class EdsButton {
             iconOnly: !this.label,
             iconSmall: this.iconSmall
         });
-        const iconClasses = this.iconCva({
-            size: this.size,
-            iconPos: this.iconPos,
-            iconOnly: !this.label,
-            show: !this.loading
-        });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: '9911991b5a3c04a8b4d5f8102967507d4c916737', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: '8f861e8a83adbd194c1d3ad00070c2621577df92', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: 'b09df86e209b75874d5b4757feb1b13434bf0192', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '1a6443b74063072fff8944aef25a6231a28340cf', class: "loader", style: {
+        return (h(ElementType, { key: 'b51281f8946bbf5a22b8fec9ec2d66ea4697bb23', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: 'c1df49fe70a7930d4c87f8130ef1102e503cd0fc', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: 'e56515527843d11be53d66aa7598fc2fdf94d054', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'a50932ac2d5db24d50a3b10a30d07043e0354c62', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
-            } }))), this.icon ? h("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));
+            } }))), this.icon ? (h("eds-icon-wrapper", { class: `
+              flex inline-flex items-center justify-center
+              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
+            `, icon: this.icon })) : null));
     }
     static get is() { return "eds-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,8 @@ export default {
     }
 };
 export const Default = (args) => `
-  <eds-button 
+  <div class="text-center">
+    <eds-button 
     label="${args.label}" 
     aria-label="${args.ariaLabel || args.label}"
     element-type="${args.elementType}"
@@ -44,4 +45,6 @@ export const Default = (args) => `
     icon-small="${args.iconSmall}"
     size="${args.size}"
   ></eds-button>
+  </div>
+  
 `;

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

@@ -1,10 +1,3 @@
-  .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);
-  }
   .f-ui-03-light {
     font-family: var(--f-ui-03-light-fontFamily);
     font-weight: var(--f-ui-03-light-fontWeight);
@@ -12,27 +5,32 @@
     line-height: var(--f-ui-03-light-lineHeight);
     letter-spacing: var(--f-ui-03-light-letterSpacing);
   }
+
   .text-light {
     color: var(--grey-700);
   }
+
   .line-clamp-1 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
+
   .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+
   .line-clamp-3 {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+
   .line-clamp-4 {
     overflow: hidden;
     display: -webkit-box;

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

@@ -13,7 +13,6 @@ import { h } from "@stencil/core";
 export class EdsCardDesc {
     constructor() {
         this.description = undefined;
-        this.descClass = 'f-ui-03-light';
         this.truncate = true;
         this.truncateLines = '3';
     }
@@ -21,7 +20,7 @@ export class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '3ea345f69bed29135df8231c79eaea0f06e813df', class: `text-light ${this.descClass}` }, h("span", { key: '99c383485ec0852be81a05fe0999cb429fee4a27', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: 'f2eec4a947de74a1e36bb13fdd2bfeb7a9f711b3', class: "text-light f-ui-03-light" }, h("span", { key: '444ffa34c3e8cac12af2f396144fd182d49c6baa', class: this.getTruncateClass() }, this.description)));
     }
     static get is() { return "eds-card-desc"; }
     static get encapsulation() { return "shadow"; }
@@ -54,24 +53,6 @@ export class EdsCardDesc {
                 "attribute": "description",
                 "reflect": false
             },
-            "descClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A custom CSS class to style the description text.\nDefault is 'f-ui-03-light'."
-                },
-                "attribute": "desc-class",
-                "reflect": false,
-                "defaultValue": "'f-ui-03-light'"
-            },
             "truncate": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -119,7 +119,7 @@
 
 .gap-x-1 {
   -moz-column-gap: 0.0625rem;
-       column-gap: 0.0625rem;
+  column-gap: 0.0625rem;
 }
 
 .gap-y-4 {
@@ -136,4 +136,13 @@
 
 .mb-12 {
   margin-bottom: 0.75rem;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.block {
+  display: block;
 }

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

@@ -86,7 +86,7 @@ export class EdsCardGeneric {
         });
     }
     render() {
-        return (h("article", { key: '440a448c841370838c0c66610bd1266b46f66541', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '292d93a9a993c6dcbfd276097a21d3984b1794c4', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '8bdcbbe2982a450843e9ada727e3f6eb62872ae1', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+        return (h("article", { key: '440a448c841370838c0c66610bd1266b46f66541', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '292d93a9a993c6dcbfd276097a21d3984b1794c4', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '40388913b1abb9308f42469956342efdbb48d508', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
     }
     static get is() { return "eds-card-generic"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-project/eds-card-project.js

@@ -56,7 +56,7 @@ export class EdsCardProject {
             this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'
         ].join(' ');
         const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
-        return (h("article", { key: '1ffb83f3e694811d5f3d4c8235c50591bca4dec5', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'e8d7f04e95722dc8ec8bcb7f90b2b8495b8c13ef', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '5ab94ee81425c5f7a143e7f1eb7981da6508e307', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'd303425849c5df81c0b72e096313a96031d1c435', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '3d4c6b9422d02e4d40d29d7875e3fc651d2f7bd4', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '2b14dee584d20e90dac0da3b93dff1dbc6f36470', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: 'cd02551d76731563ebdad89a141f70cbce5bca76', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '5b5cae3820ab870a7588d801151390be494d5c7e', class: imageClasses }, h("div", { key: 'e7bb9f3b090f5497b315a4d2495592cfbe5a4aa0', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '8fdecaed876c671a08067fdb272f4932b67ae406', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: '7a69b9f5fc30ce389267a064e82aa2cf78b676d1', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '8495c7b6655418741b1d208f06f003d4ec2eaf79', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '803b274d099072e055c484e818732a48ff27ebab', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '18b1d058c9d92e3df264c5f60cec0adc8f14f19e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '1854001686cae69c50a97ed50534ae4329d3017a', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'a5e741ce22ace338988a1a0d6f0d5c2740eb685b', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: 'c1136aef565b3a35bee7d7c254434b6c06f3cf65', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '531cb24eafadd52397a138735436e0501b45cf76', class: imageClasses }, h("div", { key: 'c692a10bfa0032d4e43fe35090e38dde3e0401f3', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '490983736b4cd9de3b2cfbafe11be15802746afe', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     static get is() { return "eds-card-project"; }
     static get properties() {

package/dist/collection/components/eds-cards/eds-card-tool/eds-card-tool.js

@@ -64,7 +64,7 @@ export class EdsCardTool {
         });
     }
     render() {
-        return (h("article", { key: '92103cb449fbdfd41adaeb29053746fb652a5203', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '8aebade7b0cfe5ac529ff552113509314ffa4061', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '38abb7a59054c6fce836322c26eab77bb508845f', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '99158cab0d83e64bf9c45e00c06572efe7328516', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+        return (h("article", { key: 'b3f0c0f3588304fb36f1c395b69b723edbfa8c95', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '12f9d1363b3d171912eb00117d99056065fbcb33', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '780c4b035e0fff1911ee4b8b04a0729cd182d877', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'a6878ba6bb2086a334282b10750234f4251c6334', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
     }
     static get is() { return "eds-card-tool"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-charts/eds-gauge/eds-gauge.css

@@ -0,0 +1,58 @@
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.inline-block {
+  display: inline-block;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.bg-inverse {
+  background-color: var(--white);
+}
+.bg-current {
+  background-color: currentColor;
+}
+.bg-dark {
+  background-color: var(--grey-300);
+}
+.bg-darker {
+  background-color: var(--grey-400);
+}
+.bg-default {
+  background-color: var(--grey-200);
+}
+.bg-strong {
+  background-color: var(--grey-700);
+}
+.bg-strongest {
+  background-color: var(--black);
+}
+.inset-0 {
+  inset: 0rem;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+.text-default {
+  color: var(--black);
+}

package/dist/collection/components/eds-charts/eds-gauge/eds-gauge.js

@@ -0,0 +1,172 @@
+import { h } from "@stencil/core";
+const BACKGROUND_VARIANTS = {
+    default: '#f2f2f2',
+    dark: '#d8d8d8',
+    strong: '#666666',
+    black: '#000000'
+};
+export class EdsGauge {
+    constructor() {
+        this.size = 100;
+        this.valueMin = 0;
+        this.valueMax = 100;
+        this.value = 60;
+        this.thickness = 0.1;
+        this.variant = 'default';
+    }
+    render() {
+        // Clamp thickness to [0,1]
+        const thicknessClamped = Math.min(Math.max(this.thickness, 0.1), 0.2);
+        // Normalize value within [valueMin, valueMax]
+        const clamped = Math.min(Math.max(this.value, this.valueMin), this.valueMax);
+        const range = this.valueMax - this.valueMin || 1;
+        const ratio = (clamped - this.valueMin) / range;
+        // Use the smaller of width/height as diameter
+        const diameter = this.size;
+        const angle = ratio * 360;
+        const ringThickness = thicknessClamped * diameter;
+        const innerDiameter = diameter - ringThickness * 2;
+        const fontSize = diameter * 0.2;
+        // Determine background color for empty portion
+        const emptyColor = BACKGROUND_VARIANTS[this.variant] || BACKGROUND_VARIANTS.default;
+        const containerStyle = {
+            width: `${diameter}px`,
+            height: `${diameter}px`,
+            background: `conic-gradient(#00e766 0deg ${angle}deg, ${emptyColor} ${angle}deg 360deg)`
+        };
+        const maskStyle = {
+            width: `${innerDiameter}px`,
+            height: `${innerDiameter}px`,
+            top: `${ringThickness}px`,
+            left: `${ringThickness}px`
+        };
+        const textStyle = {
+            fontSize: `${fontSize}px`
+        };
+        return (h("div", { key: 'a549808bcd0fc64583f90f284a7b139386e71be7', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'c3efb2d512f96e4c3a9371416c6d9bb938cab43e', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '7a6254e22240301b6716a2d6fed785196a39cdd8', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '78d8d1b7c442f75947b2813bbb569c566357c121', class: "f-body-01 text-default", style: textStyle }, clamped))));
+    }
+    static get is() { return "eds-gauge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-gauge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-gauge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter of the pie chart (pixels)"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "valueMin": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum value (gauge start)"
+                },
+                "attribute": "value-min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "valueMax": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum value (gauge end)"
+                },
+                "attribute": "value-max",
+                "reflect": false,
+                "defaultValue": "100"
+            },
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current value"
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "60"
+            },
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thickness of inner mask as fraction of radius (0.1\u20130.2). Values outside this range will be clamped."
+                },
+                "attribute": "thickness",
+                "reflect": false,
+                "defaultValue": "0.1"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'dark' | 'strong' | 'black'",
+                    "resolved": "\"black\" | \"dark\" | \"default\" | \"strong\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

package/dist/collection/components/eds-charts/eds-gauge/eds-gauge.stories.js

@@ -0,0 +1,57 @@
+export default {
+    title: 'Charts/Gauge',
+    component: 'eds-gauge',
+    argTypes: {
+        size: {
+            control: 'number',
+            description: 'Diameter of the pie chart (in pixels)'
+        },
+        valueMin: {
+            control: 'number',
+            description: 'Minimum value at the start of the gauge'
+        },
+        valueMax: {
+            control: 'number',
+            description: 'Maximum value at the end of the gauge'
+        },
+        value: {
+            control: {
+                type: 'range',
+                min: 0,
+                max: 100
+            },
+            description: 'Current value displayed by the gauge (clamped to [valueMin, valueMax])'
+        },
+        thickness: {
+            control: { type: 'range', min: 0.1, max: 0.2, step: 0.01 },
+            description: 'Thickness of the ring as a fraction of the diameter (0–0.5)'
+        },
+        variant: {
+            control: 'select',
+            options: ['default', 'dark', 'strong', 'black'],
+            description: 'Color variant for the empty portion of the ring'
+        }
+    },
+    args: {
+        size: 300,
+        valueMin: 0,
+        valueMax: 100,
+        value: 60,
+        thickness: 0.15,
+        variant: 'default'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <div class="flex items-center justify-center">
+      <eds-gauge
+        size="${args.size}"
+        value-min="${args.valueMin}"
+        value-max="${args.valueMax}"
+        value="${args.value}"
+        thickness="${args.thickness}"
+        variant="${args.variant}"
+      ></eds-gauge>
+    </div>
+  `
+};

package/dist/collection/components/eds-charts/eds-pie/eds-pie.css

@@ -0,0 +1,135 @@
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.inline-block {
+  display: inline-block;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.overflow-hidden {
+  overflow: hidden;
+}
+.bg-inverse {
+  background-color: var(--white);
+}
+.bg-current {
+  background-color: currentColor;
+}
+.bg-dark {
+  background-color: var(--grey-300);
+}
+.bg-darker {
+  background-color: var(--grey-400);
+}
+.bg-default {
+  background-color: var(--grey-200);
+}
+.bg-strong {
+  background-color: var(--grey-700);
+}
+.bg-strongest {
+  background-color: var(--black);
+}
+.inset-0 {
+  inset: 0rem;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.justify-center {
+  justify-content: center;
+}
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+.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-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);
+}
+.text-default {
+  color: var(--black);
+}
+.w-8 {
+  width: 0.5rem;
+}
+.h-8 {
+  height: 0.5rem;
+}
+.mr-4 {
+  margin-right: 0.25rem;
+}
+
+
+/* src/components/eds-pie/eds-pie.css */
+
+:host {
+  display: block;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.pie-chart {
+  overflow: visible;
+}
+
+.slice-label {
+  font-size: var(--font-size-chart-label);
+  font-weight: var(--font-weight-chart-label);
+  fill: var(--color-text);
+  pointer-events: none;
+}
+
+.legend {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 1rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  outline: none;
+}
+
+.legend-item:focus {
+  outline: 2px dashed var(--color-primary);
+}
+
+.legend-swatch {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.legend-label {
+  font-size: var(--font-size-base);
+  color: var(--color-text);
+}