@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

package/dist/collection/components/sqm-task-card/useTaskCard.js

@@ -36,8 +36,18 @@ export function useTaskCard(props) {
   function onClick() {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
   }
+  const styles = {
+    card: {
+      backgroundColor: props.backgroundColor,
+      textColor: props.textColor,
+      borderColor: props.borderColor,
+      borderRadius: props.borderRadius,
+      buttonType: props.buttonType,
+    },
+  };
   return {
     states: { loadingEvent, locale },
+    styles,
     callbacks: { sendEvent, onClick },
   };
 }

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

@@ -0,0 +1,12 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Text",
+};
+export const PurpleText = () => {
+  return (h("sqm-text", { textColor: "slateblue" },
+    h("p", null, "This is the text component")));
+};
+export const CustomFontSize = () => {
+  return (h("sqm-text", { fontSize: 36 },
+    h("p", null, "This is the text component")));
+};

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

@@ -1,54 +1,8 @@
-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;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-bold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    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", "sqm-titled-section"]
  * @slots [{"name":"", "title":"Text"}]
  * @slotEditor richText
  * @canvasRenderer always-replace
@@ -61,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

@@ -3,9 +3,10 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { TextSpanView } from "./sqm-text-span-view";
 /**
  * @uiName Text Span
+ * @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);
@@ -13,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 {
@@ -65,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(--sl-color-neutral-900)",
-    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/sqm-timeline/sqm-timeline.js

@@ -3,10 +3,12 @@ import { Component, h, Prop, State } from "@stencil/core";
 import { useChildElements } from "../../tables/useChildElements";
 /**
  * @uiName Program Timeline
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-timeline-entry"]
  * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
  * @exampleGroup Common Components
  * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
-*/
+ */
 export class Timeline {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-titled-section/sqm-titled-section.js

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { PortalSectionView } from "./sqm-portal-section-view";
 /**
  * @uiName Titled Section
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-hero","sqm-tab", "sqm-referred-registration", "sqb-program-section","sqb-conditional-section", "sqm-instant-access-registration", "sqm-referral-card"]
+ * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-user-name"]
  * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}]
  * @exampleGroup Layout
  * @example Titled Section - <sqm-titled-section text-align="center" label-margin="small" padding="none"><div slot="label"><h2>Section Label</h2></div><div slot="content"><p>Add your section content here!</p></div></sqm-titled-section>

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification-view.js

@@ -26,6 +26,9 @@ const style = {
   },
   CodeInput: {
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -35,6 +38,9 @@ const style = {
   CodeInputError: {
     ...ErrorStyles,
     maxWidth: "40px",
+    "&::part(base)": {
+      borderRadius: "4px !important",
+    },
     "&::part(input)": {
       margin: "0",
       padding: "0 var(--sl-input-spacing-small)",
@@ -42,7 +48,7 @@ const style = {
     },
   },
   ErrorText: {
-    color: "var(--sl-color-danger-500)",
+    color: "var(--sqm-danger-color-text)",
     fontSize: "var(--sl-font-size-small)",
     margin: "0",
   },
@@ -85,7 +91,11 @@ export function WidgetCodeVerificationView(props) {
     id: "resendCodeText",
     defaultMessage: text.resendCodeText,
   }, {
-    resendCodeLink: (h("a", { href: "", style: { textDecoration: "none" }, onClick: (e) => {
+    resendCodeLink: (h("a", { href: "", style: {
+        textDecoration: "underline",
+        color: "inherit",
+        cursor: "pointer",
+      }, onClick: (e) => {
         e.preventDefault();
         callbacks.resendEmail();
       } }, text.resendCodeLabel)),

package/dist/collection/components/sqm-widget-verification/sqm-code-verification/sqm-code-verification.js

@@ -3,9 +3,9 @@ import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { getProps } from "../../../utils/utils";
+import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
 import { useWidgetCodeVerification } from "./useCodeVerification";
-import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
 export class WidgetCodeVerification {
   constructor() {
     /**
@@ -283,10 +283,10 @@ function useDemoWidgetCodeVerification(props) {
   const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
   return deepmerge({
     states: {
+      initialiseLoading: false,
       loading: false,
       email: "test@example.com",
       emailResent,
-      resendError: false,
       verifyFailed: false,
     },
     refs: {