@zonos/elements 1.2.3 → 1.2.4-alpha.1

package/dist/collection/components/common/zonos-badge/zonos-badge.js

@@ -1,191 +1,194 @@
 import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosBadge {
-  constructor() {
-    this.bold = false;
-    this.color = 'gray';
-    this.icon = undefined;
-    this.iconRight = false;
-    this.size = 'default';
-    this.rounded = false;
-    this.class = '';
-  }
-  render() {
-    return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]) }, h("div", { class: classes([
-        'zonos--badge-content',
-        this.color,
-        this.rounded && 'rounded',
-        this.iconRight && 'icon-right',
-        this.size,
-        this.bold && 'bold',
-      ]) }, this.icon, h("p", null, h("slot", null)))));
-  }
-  static get is() { return "zonos-badge"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-badge.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-badge.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "bold": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Whether or not the badge is bold"
-        },
-        "attribute": "bold",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ColorPrefix",
-          "resolved": "\"blue\" | \"cyan\" | \"glass\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\"",
-          "references": {
-            "ColorPrefix": {
-              "location": "import",
-              "path": "src/types/styles/Color",
-              "id": "src/types/styles/Color.ts::ColorPrefix"
+    constructor() {
+        this.bold = false;
+        this.color = 'gray';
+        this.icon = undefined;
+        this.iconRight = false;
+        this.size = 'default';
+        this.rounded = false;
+        this.class = '';
+    }
+    render() {
+        return (h(Host, { class: classes(['zonos--elements zonos--badge', this.class]), style: {
+                '--font-family': zonosStoreFontFamily(),
+            } }, h("div", { class: classes([
+                'zonos--badge-content',
+                this.color,
+                this.rounded && 'rounded',
+                this.iconRight && 'icon-right',
+                this.size,
+                this.bold && 'bold',
+            ]) }, this.icon, h("zonos-text", null, h("slot", null)))));
+    }
+    static get is() { return "zonos-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bold": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the badge is bold"
+                },
+                "attribute": "bold",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ColorPrefix",
+                    "resolved": "\"blue\" | \"cyan\" | \"glass\" | \"gray\" | \"green\" | \"orange\" | \"purple\" | \"red\"",
+                    "references": {
+                        "ColorPrefix": {
+                            "location": "import",
+                            "path": "src/types/styles/Color",
+                            "id": "src/types/styles/Color.ts::ColorPrefix"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "24"
+                        }],
+                    "text": "The size of the badge"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'gray'"
+            },
+            "icon": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLZonosIconElement",
+                    "resolved": "HTMLZonosIconElement | undefined",
+                    "references": {
+                        "HTMLZonosIconElement": {
+                            "location": "global",
+                            "id": "global::HTMLZonosIconElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "The icon element to display"
+                }
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Position the icon to the right when icon is specified"
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'default'",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'default'"
+                        }],
+                    "text": "The size of the badge"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether or not the badge is rounded"
+                },
+                "attribute": "rounded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "css class for the component"
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "24"
-            }],
-          "text": "The size of the badge"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'gray'"
-      },
-      "icon": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLZonosIconElement",
-          "resolved": "HTMLZonosIconElement | undefined",
-          "references": {
-            "HTMLZonosIconElement": {
-              "location": "global",
-              "id": "global::HTMLZonosIconElement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "The icon element to display"
-        }
-      },
-      "iconRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Position the icon to the right when icon is specified"
-        },
-        "attribute": "icon-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'default'",
-          "resolved": "\"default\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "'default'"
-            }],
-          "text": "The size of the badge"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "rounded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Whether or not the badge is rounded"
-        },
-        "attribute": "rounded",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "class": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "css class for the component"
-        },
-        "attribute": "class",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
+        };
+    }
 }

package/dist/collection/components/common/zonos-banner/zonos-banner.css

@@ -1,7 +1,10 @@
 :host {
-  font-family: Inter;
+  font-family: var(--font-family, Inter), Inter;
   display: block;
 }
+:host * {
+  font-family: var(--font-family, Inter), Inter;
+}
 :host img {
   max-width: 100%;
 }

package/dist/collection/components/common/zonos-banner/zonos-banner.js

@@ -1,134 +1,146 @@
 import { h, Host } from "@stencil/core";
+import { zonosStoreFontFamily } from "../../store/zonosStore";
 import { classes } from "../../utils/classes";
 export class ZonosBanner {
-  constructor() {
-    /**
-     * Detect if the button has an content
-     */
-    this.handleSlotChange = () => {
-      this.hasContent = true;
-    };
-    this.bannerTitle = undefined;
-    this.intent = undefined;
-    this.class = '';
-    this.hasContent = false;
-  }
-  render() {
-    const renderContent = ({ color }) => {
-      const primaryColor = `var(--amino-${color}-800)`;
-      const secondaryColor = `var(--amino-${color}-300)`;
-      const [header, content] = [
-        this.bannerTitle,
-        h("slot", { onSlotchange: this.handleSlotChange }),
-      ].filter(Boolean);
-      const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
-      return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
-    };
-    const baseClass = classes([
-      'zonos--elements zonos--banner',
-      this.class,
-      this.intent,
-    ]);
-    switch (this.intent) {
-      case 'error':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'red',
-        })));
-      case 'info':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'blue',
-        })));
-      case 'success':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'green',
-        })));
-      case 'warning':
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'orange',
-        })));
-      default:
-        return (h(Host, { class: baseClass }, renderContent({
-          color: 'gray',
-        })));
+    constructor() {
+        /**
+         * Detect if the button has an content
+         */
+        this.handleSlotChange = () => {
+            this.hasContent = true;
+        };
+        this.bannerTitle = undefined;
+        this.intent = undefined;
+        this.class = '';
+        this.hasContent = false;
     }
-  }
-  static get is() { return "zonos-banner"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["zonos-banner.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["zonos-banner.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "bannerTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether or not the banner is bold"
-        },
-        "attribute": "banner-title",
-        "reflect": false
-      },
-      "intent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "BannerIntent",
-          "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined",
-          "references": {
-            "BannerIntent": {
-              "location": "local",
-              "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-banner/zonos-banner.tsx",
-              "id": "src/components/common/zonos-banner/zonos-banner.tsx::BannerIntent"
+    render() {
+        const renderContent = ({ color }) => {
+            const primaryColor = `var(--amino-${color}-800)`;
+            const secondaryColor = `var(--amino-${color}-300)`;
+            const [header, content] = [
+                this.bannerTitle,
+                h("slot", { onSlotchange: this.handleSlotChange }),
+            ].filter(Boolean);
+            const textColor = color === 'gray' ? 'gray-1200' : `${color}-800`;
+            return (h("div", { class: classes(['zonos--container']) }, h("div", { class: "zonos--icon-wrapper" }, h("svg", { color: primaryColor, fill: "none", height: "20", viewBox: "0 0 24 24", width: "20", xmlns: "https://www.w3.org/2000/svg" }, h("path", { "clip-rule": "evenodd", d: "M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z", "data-is-secondary-color": "true", fill: secondaryColor, "fill-rule": "evenodd" }), h("path", { "clip-rule": "evenodd", d: "M12 6.99a1 1 0 0 1 1 1V8a1 1 0 1 1-2 0v-.01a1 1 0 0 1 1-1ZM12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1Z", fill: "currentColor", "fill-rule": "evenodd" }))), h("div", { class: "zonos--header-wrapper" }, h("zonos-text", { color: textColor, type: "label", weight: 600 }, header)), content && (h("div", { class: "zonos--content-wrapper" }, h("zonos-text", { color: textColor }, content)))));
+        };
+        const baseClass = classes([
+            'zonos--elements zonos--banner',
+            this.class,
+            this.intent,
+        ]);
+        const font = zonosStoreFontFamily();
+        switch (this.intent) {
+            case 'error':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'red',
+                })));
+            case 'info':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'blue',
+                })));
+            case 'success':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'green',
+                })));
+            case 'warning':
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'orange',
+                })));
+            default:
+                return (h(Host, { class: baseClass, style: {
+                        '--font-family': font,
+                    } }, renderContent({
+                    color: 'gray',
+                })));
+        }
+    }
+    static get is() { return "zonos-banner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["zonos-banner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["zonos-banner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bannerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether or not the banner is bold"
+                },
+                "attribute": "banner-title",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BannerIntent",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined",
+                    "references": {
+                        "BannerIntent": {
+                            "location": "local",
+                            "path": "/home/runner/work/zonos-elements/zonos-elements/src/components/common/zonos-banner/zonos-banner.tsx",
+                            "id": "src/components/common/zonos-banner/zonos-banner.tsx::BannerIntent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Intent of the banner (success, warning, error)"
+                },
+                "attribute": "intent",
+                "reflect": false
+            },
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "css class for the component"
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Intent of the banner (success, warning, error)"
-        },
-        "attribute": "intent",
-        "reflect": false
-      },
-      "class": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "css class for the component"
-        },
-        "attribute": "class",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasContent": {}
-    };
-  }
+        };
+    }
+    static get states() {
+        return {
+            "hasContent": {}
+        };
+    }
 }