@saasquatch/mint-components 1.15.0-4 → 1.15.0-40

package/dist/collection/components/sqm-text/sqm-text.js

@@ -1,53 +1,5 @@
-import { Component, h, State } from "@stencil/core";
+import { Component, h, Prop, State } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-    color: var(--sqm-text);
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-bold);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sqm-text);
-    margin: 0;
-  }
-`;
 /**
  * @uiName Text
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
@@ -63,11 +15,110 @@ export class Text {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
+    const vanillaStyle = `
+    sqm-text {
+      display: block;
+      color: ${this.textColor || "var(--sqm-text)"};
+    }
+
+    sqm-text h1 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xxx-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h2 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xx-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h3 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-x-large)"};
+      font-weight: var(--sl-font-weight-semibold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text h4 {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-large)"};
+      font-weight: var(--sl-font-weight-bold);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text p {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-medium)"};
+      font-weight: var(--sl-font-weight-normal);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+
+    sqm-text sub {
+      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-small)"};
+      font-weight: var(--sl-font-weight-normal);
+      color: ${this.textColor || "var(--sqm-text)"};
+      margin: 0;
+    }
+    `;
     return (h("div", null,
       h("style", null, vanillaStyle),
       h("slot", null)));
   }
   static get is() { return "sqm-text"; }
+  static get properties() { return {
+    "fontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font Size",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": "Font size in pixels"
+      },
+      "attribute": "font-size",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    }
+  }; }
   static get states() { return {
     "ignored": {}
   }; }

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,46 +1,48 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  p: {
-    "font-size": "var(--sl-font-size-small)",
-    "font-weight": "400",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  subtext: {
-    "font-size": "var(--sl-font-size-x-small)",
-    "font-weight": "400",
-    color: "var(--sl-color-gray-600)",
-    margin: "0",
-  },
-  h1: {
-    "font-size": "var(--sl-font-size-xx-large)",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  h2: {
-    "font-size": "var(--sl-font-size-x-large)",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  h3: {
-    "font-size": "var(--sl-font-size-large)",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-  h4: {
-    "font-size": "13px",
-    "font-weight": "600",
-    color: "var(--sl-color-gray-800)",
-    margin: "0",
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
+export function TextSpanView(props, children) {
+  const { type, fontSize, textColor } = props;
+  const style = {
+    p: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    subtext: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-small)",
+      "font-weight": "400",
+      color: textColor || "var(--sqm-text-subdued)",
+      margin: "0",
+    },
+    h1: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-xx-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h2: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-x-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h3: {
+      "font-size": fontSize ? `${fontSize}px` : "var(--sl-font-size-large)",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+    h4: {
+      "font-size": fontSize ? `${fontSize}px` : "13px",
+      "font-weight": "600",
+      color: textColor || "var(--sqm-text)",
+      margin: "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
     :host {
       word-wrap: break-word;
     }
@@ -48,8 +50,7 @@ const vanillaStyle = `
       display: inline;
     }
   `;
-export function TextSpanView(props, children) {
-  return (h("span", { class: sheet.classes[props.type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-text-span/sqm-text-span.js

@@ -6,7 +6,7 @@ import { TextSpanView } from "./sqm-text-span-view";
  * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"]
  * @canvasRenderer always-replace
  */
-export class Text {
+export class TextSpan {
   constructor() {
     this.ignored = true;
     withHooks(this);
@@ -14,7 +14,7 @@ export class Text {
   disconnectedCallback() { }
   componentWillLoad() { }
   render() {
-    return h(TextSpanView, { type: this.type }, this.text);
+    return (h(TextSpanView, { type: this.type, fontSize: this.fontSize, textColor: this.textColor }, this.text));
   }
   static get is() { return "sqm-text-span"; }
   static get properties() { return {
@@ -66,6 +66,55 @@ export class Text {
       },
       "attribute": "type",
       "reflect": false
+    },
+    "fontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Font Size",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": "Font size in pixels"
+      },
+      "attribute": "font-size",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-timeline/Timeline.stories.js

@@ -11,7 +11,7 @@ export default {
 export const TimelineWith1Reward = () => {
   return (h("div", null,
     h("sqm-timeline", null,
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
+      h("sqm-timeline-entry", { textColor: "red", lineColor: "red", reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
     h("br", null),
     " ",
     h("hr", null),
@@ -68,3 +68,10 @@ export const TimelineWith4Rewards = () => {
       h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
       h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
 };
+export const TimelineWithCustomColors = () => {
+  return (h("sqm-timeline", null,
+    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
+    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
+    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" })));
+};

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -1,51 +1,6 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { Circle, Gift } from "./SVGs";
-const style = {
-  TimelineReward: {
-    color: "var(--sqm-text)",
-    lineHeight: "var(--sl-line-height-dense)",
-    "& .container": {
-      display: "flex",
-    },
-    "& .line": {
-      display: "none",
-      color: "transparent",
-      userSelect: "none",
-      background: "var(--sl-color-primary-300)",
-      width: "4px",
-      borderRadius: "4px",
-      margin: "-2px",
-      position: "relative",
-      left: "12px",
-      top: "34px",
-    },
-    "& .step": {
-      display: "flex",
-    },
-    "& .icon": {
-      position: "relative",
-      top: "4px",
-      zIndex: "1",
-      color: "var(--sl-color-primary-300)",
-      marginRight: "var(--sl-spacing-large)",
-    },
-    "& .reward": {
-      marginRight: "var(--sl-spacing-x-small)",
-      fontSize: "var(--sl-font-size-x-large)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& .unit": {
-      textTransform: "uppercase",
-      fontSize: "var(--sl-font-size-small)",
-    },
-    "& .description": {
-      fontSize: "var(--sl-font-size-medium)",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 const vanillaStyle = `
 	:host{
 		display: block; 
@@ -58,6 +13,51 @@ const vanillaStyle = `
 export function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
+  const style = {
+    TimelineReward: {
+      color: props.textColor || "var(--sqm-text)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .container": {
+        display: "flex",
+      },
+      "& .line": {
+        display: "none",
+        color: "transparent",
+        userSelect: "none",
+        background: props.lineColor || "var(--sqm-accent-color-icon)",
+        width: "4px",
+        borderRadius: "4px",
+        margin: "-2px",
+        position: "relative",
+        left: "12px",
+        top: "34px",
+      },
+      "& .step": {
+        display: "flex",
+      },
+      "& .icon": {
+        position: "relative",
+        top: "4px",
+        zIndex: "1",
+        color: props.lineColor || "var(--sqm-accent-color-icon)",
+        marginRight: "var(--sl-spacing-large)",
+      },
+      "& .reward": {
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .unit": {
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-small)",
+      },
+      "& .description": {
+        fontSize: "var(--sl-font-size-medium)",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -26,6 +26,58 @@ export class TimelineReward {
   static get is() { return "sqm-timeline-entry"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "lineColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Line color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": "Color of timeline"
+      },
+      "attribute": "line-color",
+      "reflect": false
+    },
     "reward": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view.js

@@ -33,29 +33,26 @@ const style = {
     gap: "8px",
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-icon)",
     marginTop: "10px",
   },
   PageDescriptionText: {
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     fontSize: "var(--sl-font-size-medium)",
   },
   DescriptionText: {
-    color: "var(--sl-color-neutral-500)",
-  },
-  SecondaryBtn: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-800) !important",
-    },
+    color: "var(--sqm-text-subdued)",
   },
   AlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-red-100)",
-      borderTop: "none",
+      backgroundColor: "var(--sqm-danger-color-background)",
+      border: "none",
       padding: "0 16px",
+      color: "var(--sqm-danger-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-danger-500)",
+      color: "var(--sqm-danger-color-icon)",
     },
   },
   RadioContainer: {
@@ -64,12 +61,15 @@ const style = {
   },
   PartnerAlertContainer: {
     "&::part(base)": {
-      backgroundColor: "var(--sl-color-sky-100)",
+      backgroundColor: "var(--sqm-informative-color-background)",
       borderTop: "none",
       padding: "0 16px",
+      border: "none",
+      color: "var(--sqm-informative-color-text)",
+      marginBottom: "16px",
     },
     "& sl-icon::part(base)": {
-      color: "var(--sl-color-blue-500)",
+      color: "var(--sqm-informative-color-icon)",
     },
   },
   Checkbox: {
@@ -83,8 +83,8 @@ const style = {
   InputContainer: {
     padding: "16px",
     margin: "16px 0px 16px 0px",
-    borderTop: "1px solid var(--sl-color-gray-300)",
-    borderBottom: "1px solid var(--sl-color-gray-300)",
+    borderTop: "1px solid var(--sqm-border-color)",
+    borderBottom: "1px solid var(--sqm-border-color)",
     display: "flex",
     flexDirection: "column",
     width: "100%",
@@ -121,23 +121,6 @@ const style = {
     borderRadius: "50px",
     background: "var(--sl-color-gray-200)",
   },
-  InfoAlert: {
-    "&::part(base)": {
-      backgroundColor: "transparent",
-      borderTop: "none",
-      border: "none",
-    },
-    "&::part(message)": {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-start",
-      padding: "10px",
-      height: "max-content",
-    },
-    "& sl-icon::part(base)": {
-      color: "var(--sl-color-yellow-500)",
-    },
-  },
   InfoWarningIcon: {
     height: "26px",
     width: "26px",
@@ -160,20 +143,14 @@ const vanillaStyle = `
       font-weight: 600
     }
 
-    p {
-      line-height: 18px;
-      color: var(--sl-color-gray-800);
-      font-size: var(--sl-font-size-small);
-    }
-
     /* this class is dynamically applied in controller */
     .error-input::part(base) {
-      border: 1px solid var(--sl-color-danger-500);
-      border-radius: var(--sl-input-border-radius-medium);
+      border: 1px solid var(--sqm-danger-color-border);
+      border-radius: var(--sqm-input-border-radius);
     }
 
     .error-input::part(help-text) {
-      color: var(--sl-color-danger-500) !important;
+      color: var(--sqm-danger-color-text);
     }
     
   `;
@@ -271,5 +248,5 @@ export const BankingInfoFormView = (props) => {
           : slots.paymentFixedDaySelectSlot))))),
       h("div", { class: classes.BtnContainer },
         h("sl-button", { type: "primary", disabled: states.disabled || states.saveDisabled, loading: states.saveLoading, submit: true, exportparts: "base: primarybutton-base" }, text.continueButton),
-        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", class: classes.SecondaryBtn, type: "text", onClick: callbacks.onBack }, text.backButton))))));
+        !states.hideBackButton && (h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", onClick: callbacks.onBack }, text.backButton))))));
 };

package/dist/collection/components/tax-and-cash/sqm-docusign-form/docusign-iframe/DocusignIframe.js

@@ -40,7 +40,7 @@ export const DocusignExpiredView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-neutral-500)",
+          color: "var(--sqm-text)",
         }, name: "clock" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignExpired)),
@@ -55,7 +55,7 @@ export const DocusignErrorView = (props) => {
       h("sl-icon", { style: {
           width: "50px",
           height: "50px",
-          color: "var(--sl-color-gray-500)",
+          color: "var(--sqm-text)",
         }, name: "exclamation-octagon" }),
       h("div", { class: classes.MessageContainer },
         h("p", { style: { margin: "0" } }, text.docusignError)),