@zonos/elements 1.0.16

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

@@ -0,0 +1,135 @@
+import { h, Host } from "@stencil/core";
+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: "http://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',
+        })));
+    }
+  }
+  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": "''"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasContent": {}
+    };
+  }
+}
+//# sourceMappingURL=zonos-banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zonos-banner.js","sourceRoot":"","sources":["../../../../src/components/common/zonos-banner/zonos-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, State } from '@stencil/core';\n\nimport { classes } from 'src/components/utils/classes';\nimport type { Color, ColorPrefix } from 'src/types/styles/Color';\n\nexport type BannerIntent = 'default' | 'error' | 'success' | 'warning' | 'info';\n\n@Component({\n  shadow: true,\n  styleUrl: 'zonos-banner.scss',\n  tag: 'zonos-banner',\n})\nexport class ZonosBanner {\n  /**\n   * Whether or not the banner is bold\n   */\n  @Prop() bannerTitle?: string;\n\n  /**\n   * Intent of the banner (success, warning, error)\n   */\n  @Prop() intent?: BannerIntent;\n\n  /**\n   * css class for the component\n   */\n  @Prop() class: string = '';\n  /**\n   * Whether or not the button has content\n   */\n  @State() hasContent: boolean = false;\n\n  /**\n   * Detect if the button has an content\n   */\n  private handleSlotChange = () => {\n    this.hasContent = true;\n  };\n\n  render() {\n    const renderContent = ({ color }: { color: ColorPrefix }) => {\n      const primaryColor = `var(--amino-${color}-800)`;\n      const secondaryColor = `var(--amino-${color}-300)`;\n\n      const [header, content] = [\n        this.bannerTitle,\n        <slot onSlotchange={this.handleSlotChange} />,\n      ].filter(Boolean);\n\n      const textColor: Color = color === 'gray' ? 'gray-1200' : `${color}-800`;\n      return (\n        <div class={classes(['zonos--container'])}>\n          <div class=\"zonos--icon-wrapper\">\n            {/* Info svg icon (couldn't use zonos-icon because \n            this component only use one icon, and only\n            need to update the color).\n            Use svg directly better in this case */}\n            <svg\n              color={primaryColor}\n              fill=\"none\"\n              height=\"20\"\n              viewBox=\"0 0 24 24\"\n              width=\"20\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                clip-rule=\"evenodd\"\n                d=\"M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Z\"\n                data-is-secondary-color=\"true\"\n                fill={secondaryColor}\n                fill-rule=\"evenodd\"\n              ></path>\n              <path\n                clip-rule=\"evenodd\"\n                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\"\n                fill=\"currentColor\"\n                fill-rule=\"evenodd\"\n              ></path>\n            </svg>\n          </div>\n          <div class=\"zonos--header-wrapper\">\n            <zonos-text color={textColor} type=\"label\" weight={600}>\n              {header}\n            </zonos-text>\n          </div>\n          {content && (\n            <div class=\"zonos--content-wrapper\">\n              <zonos-text color={textColor}>{content}</zonos-text>\n            </div>\n          )}\n        </div>\n      );\n    };\n\n    const baseClass = classes([\n      'zonos--elements zonos--banner',\n      this.class,\n      this.intent,\n    ]);\n    switch (this.intent) {\n      case 'error':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'red',\n            })}\n          </Host>\n        );\n\n      case 'info':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'blue',\n            })}\n          </Host>\n        );\n\n      case 'success':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'green',\n            })}\n          </Host>\n        );\n\n      case 'warning':\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'orange',\n            })}\n          </Host>\n        );\n      default:\n        return (\n          <Host class={baseClass}>\n            {renderContent({\n              color: 'gray',\n            })}\n          </Host>\n        );\n    }\n  }\n}\n"]}

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

@@ -0,0 +1,245 @@
+:host {
+  font-family: Inter;
+  display: block;
+}
+:host img {
+  max-width: 100%;
+}
+:host dl,
+:host dd,
+:host h1,
+:host h2,
+:host h3,
+:host h4,
+:host h5,
+:host h6,
+:host hr,
+:host figure,
+:host p,
+:host pre {
+  margin: 0;
+}
+
+/* All sets of variable are here */
+/* smooth font rendering */
+:host {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host {
+  display: inline-flex;
+}
+:host .zonos--spinner-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  background-color: var(--amino-surface-color);
+  justify-content: center;
+  border-radius: var(--amino-radius-10);
+  gap: var(--amino-space-8);
+}
+:host button {
+  display: inline-flex;
+  width: 100%;
+  position: relative;
+  outline: none;
+  font-size: 14px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 0 var(--amino-space-16);
+  background-color: var(--amino-surface-color);
+  border: none;
+  outline: 1px solid var(--amino-surface-color);
+  border-radius: var(--border-radius, var(--amino-radius-10));
+  transition: var(--amino-transition);
+  font-weight: 500;
+  user-select: none;
+  font-family: var(--amino-font-sans);
+  letter-spacing: normal;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: var(--amino-space-8) var(--amino-space-24);
+  color: var(--color, var(--amino-gray-1200));
+  /** Button size */
+}
+:host button.sm.no-background, :host button.md.no-background, :host button.lg.no-background {
+  background: none;
+  outline: none;
+}
+:host button.sm.no-padding-left, :host button.md.no-padding-left, :host button.lg.no-padding-left {
+  padding-left: 0;
+}
+:host button.sm.no-padding-right, :host button.md.no-padding-right, :host button.lg.no-padding-right {
+  padding-right: 0;
+}
+:host button[disabled] {
+  cursor: not-allowed;
+  background-color: var(--amino-gray-200);
+}
+:host button[disabled] .zonos--spinner-wrapper {
+  background-color: var(--amino-gray-200);
+}
+:host button:active {
+  transform: scale(0.99);
+}
+:host button.sm {
+  height: var(--amino-size-sm);
+  line-height: var(--amino-size-sm);
+  padding: var(--amino-space-4) var(--amino-space-8);
+}
+:host button.sm:not(.has-content).has-icon {
+  padding: 0 var(--amino-space-4);
+}
+:host button.md {
+  height: var(--amino-size-md);
+  line-height: var(--amino-size-md);
+  padding: var(--amino-space-8) var(--amino-space-16);
+}
+:host button.md:not(.has-content).has-icon {
+  padding: 0 var(--amino-space-8);
+}
+:host button.lg {
+  height: var(--amino-size-lg);
+  line-height: var(--amino-size-lg);
+  padding: var(--amino-space-12) var(--amino-space-24);
+}
+:host button.lg:not(.has-content).has-icon {
+  padding: 0 var(--amino-space-16);
+}
+:host button:not(.only-icon).has-icon {
+  gap: var(--amino-space-8);
+}
+:host button.override-background {
+  background-color: var(--background-color, var(--amino-gray-0));
+  color: var(--color, var(--amino-gray-1200));
+  outline: 1px solid var(--background-color, var(--amino-gray-0));
+}
+:host button.override-background:disabled {
+  opacity: 0.8;
+}
+:host button.override-background:not(:disabled):hover {
+  opacity: 0.9;
+}
+:host button:not(.override-background) {
+  /** Button variant */
+}
+:host button:not(.override-background).primary {
+  background: var(--amino-blue-600);
+  outline: 1px solid var(--amino-blue-600);
+  color: var(--amino-gray-0);
+}
+:host button:not(.override-background).primary:not([disabled]):hover {
+  background-image: var(--amino-button-primary-hover);
+}
+:host button:not(.override-background).primary:not([disabled]):active {
+  background: var(--amino-blue-700);
+}
+:host button:not(.override-background).primary:not([disabled]):focus {
+  box-shadow: var(--amino-focus-button);
+}
+:host button:not(.override-background).primary[disabled] {
+  background: var(--amino-blue-400);
+}
+:host button:not(.override-background).primary[disabled] .zonos--spinner-wrapper {
+  background-color: var(--amino-blue-400);
+}
+:host button:not(.override-background).primary .zonos--spinner-wrapper {
+  background-color: var(--amino-blue-600);
+}
+:host button:not(.override-background).success {
+  background: var(--amino-green-600);
+  outline: 1px solid var(--amino-green-600);
+  color: var(--amino-gray-0);
+}
+:host button:not(.override-background).success:not([disabled]):hover {
+  background-image: var(--amino-button-success-hover);
+}
+:host button:not(.override-background).success:not([disabled]):active {
+  background: var(--amino-green-700);
+}
+:host button:not(.override-background).success:not([disabled]):focus {
+  box-shadow: var(--amino-focus-button);
+}
+:host button:not(.override-background).success[disabled] {
+  background: var(--amino-green-400);
+}
+:host button:not(.override-background).success[disabled] .zonos--spinner-wrapper {
+  background-color: var(--amino-green-400);
+}
+:host button:not(.override-background).danger {
+  background: var(--amino-red-600);
+  outline: 1px solid var(--amino-red-600);
+  color: var(--amino-gray-0);
+}
+:host button:not(.override-background).danger:not([disabled]):hover {
+  background-image: var(--amino-button-danger-hover);
+}
+:host button:not(.override-background).danger:not([disabled]):active {
+  background: var(--amino-red-700);
+}
+:host button:not(.override-background).danger:not([disabled]):focus {
+  box-shadow: var(--amino-focus-button);
+}
+:host button:not(.override-background).danger[disabled] {
+  background: var(--amino-red-400);
+}
+:host button:not(.override-background).danger[disabled] .zonos--spinner-wrapper {
+  background-color: var(--amino-red-400);
+}
+:host button:not(.override-background).warning {
+  background: var(--amino-orange-600);
+  outline: 1px solid var(--amino-orange-600);
+  color: var(--amino-gray-0);
+}
+:host button:not(.override-background).warning:not([disabled]):hover {
+  background-image: var(--amino-button-warning-hover);
+}
+:host button:not(.override-background).warning:not([disabled]):active {
+  background: var(--amino-orange-700);
+}
+:host button:not(.override-background).warning:not([disabled]):focus {
+  box-shadow: var(--amino-focus-button);
+}
+:host button:not(.override-background).warning[disabled] {
+  background: var(--amino-orange-400);
+}
+:host button:not(.override-background).warning[disabled] .zonos--spinner-wrapper {
+  background-color: var(--amino-orange-400);
+}
+:host button:not(.override-background).subtle {
+  background: transparent;
+  color: var(--color);
+}
+:host button:not(.override-background).subtle:not([disabled]):hover {
+  background: var(--amino-gray-100);
+}
+:host button:not(.override-background).subtle:not([disabled]):active {
+  background: var(--amino-gray-200);
+}
+:host button:not(.override-background).subtle:focus {
+  box-shadow: var(--amino-button-focus-ring);
+}
+:host button:not(.override-background).subtle[disabled] .content {
+  opacity: 0.6;
+}
+:host button:not(.override-background).subtle[disabled] .zonos--spinner-wrapper {
+  background-color: var(--amino-gray-0);
+}
+:host button:not(.override-background).outline {
+  background: transparent;
+  outline: 1px solid var(--amino-gray-700);
+}
+:host button:not(.override-background).outline:not([disabled]):hover {
+  background-color: var(--amino-gray-100);
+}
+:host button:not(.override-background).outline:not([disabled]):active {
+  background: var(--amino-gray-200);
+}