@saasquatch/mint-components 1.15.0-99 → 1.15.0

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -71,7 +71,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Text color",
@@ -97,7 +97,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -114,81 +114,6 @@ export class ProgramExplainerStep {
       "attribute": "background-color",
       "reflect": false
     },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border radius",
-            "name": "uiName"
-          }, {
-            "text": "number",
-            "name": "type"
-          }],
-        "text": "Amount in pixels"
-      },
-      "attribute": "border-radius",
-      "reflect": false
-    },
-    "iconBackgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Icon Background color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }],
-        "text": ""
-      },
-      "attribute": "icon-background-color",
-      "reflect": false
-    },
-    "iconColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Icon color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }],
-        "text": ""
-      },
-      "attribute": "icon-color",
-      "reflect": false
-    },
     "imageUrl": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-program-menu/sqm-program-menu.js

@@ -4,7 +4,6 @@ import { useProgramMenu } from "./useProgramMenu";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Microsite Program Menu
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @slots [{"name":"","title":"Menu Content"}]
  * @canvasRenderer always-replace
  */

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -38,6 +38,11 @@ const style = {
     height: "100%",
     maxWidth: "335px",
   },
+  TextButton: {
+    "&::part(base)": {
+      color: "var(--sl-color-gray-600)",
+    },
+  },
   LoadingSkeleton: {
     "&::part(indicator)": {
       borderRadius: "0px !important",
@@ -88,6 +93,6 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       !hideTitle && h("span", { part: "sqm-title" }, titleText),
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
 }

package/dist/collection/components/sqm-qr-code/sqm-qr-code.js

@@ -7,7 +7,6 @@ import { QrCodeView } from "./sqm-qr-code-view";
 import { useQRCode } from "./useQRCode";
 /**
  * @uiName QR Code
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "sqb-program-section", "sqb-conditional-section"]
  * @exampleGroup Sharing
  * @example QR Code - <sqm-qr-code></sqm-qr-code>
  */

package/dist/collection/components/sqm-qr-code/useQRCode.js

@@ -39,19 +39,7 @@ export function useQRCode(props) {
     if (!shareLink)
       return;
     const getQrCode = async () => {
-      setLoading(true);
-      try {
-        const res = await fetch(`${shareLink}?qrCode&qrCodeImageFormat=svg&qrCodeQuietZoneSize=0`);
-        const blob = await res.blob();
-        const url = URL.createObjectURL(blob);
-        setQrUrl(url);
-      }
-      catch (e) {
-        setError(true);
-      }
-      finally {
-        setLoading(false);
-      }
+      setQrUrl(`${shareLink}?qrCode&qrCodeImageFormat=svg&qrCodeQuietZoneSize=0`);
     };
     getQrCode();
   }, [shareLink]);

package/dist/collection/components/sqm-radio-card/sqm-radio-card-view.js

@@ -42,8 +42,8 @@ const vanillaStyle = `
   `;
 export const RadioCardView = ({ title, icon, description, selected, }) => {
   const border = selected
-    ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
-    : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
+    ? "1px solid var(--sl-color-primary-500)"
+    : "1px solid #CACFD3";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
       border,
     } },

package/dist/collection/components/sqm-referral-card/sqm-referral-card-view.js

@@ -1,46 +1,43 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Container: {
+    borderRadius: "var(--sl-border-radius-large)",
+    color: "var(--sl-color-neutral-900)",
+    background: "var(--sl-color-neutral-0)",
+    display: "flex",
+    flexDirection: "column",
+    rowGap: "var(--sl-spacing-large)",
+  },
+  EndContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  ColumnContainer: {
+    "& p": { margin: "0" },
+    display: "grid",
+    gridAutoColumns: "minmax(0, 1fr)",
+    gridAutoFlow: "column",
+    gap: "calc(2 * var(--sl-spacing-medium))",
+    "@media (max-width: 499px)": {
+      gridAutoFlow: "unset",
+      gridAutoColumns: "unset",
+      gridTemplateColumns: "1fr",
+      border: "none",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 const vanillaStyle = `
     :host{
       display: block;   
     }
   `;
 export function ReferralCardView(props) {
-  const style = {
-    Container: {
-      borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)",
-      color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sqm-portal-background)",
-      display: "flex",
-      flexDirection: "column",
-      rowGap: "var(--sl-spacing-large)",
-    },
-    EndContainer: {
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-    },
-    ColumnContainer: {
-      "& p": { margin: "0" },
-      display: "grid",
-      gridAutoColumns: "minmax(0, 1fr)",
-      gridAutoFlow: "column",
-      gap: "calc(2 * var(--sl-spacing-medium))",
-      "@media (max-width: 499px)": {
-        gridAutoFlow: "unset",
-        gridAutoColumns: "unset",
-        gridTemplateColumns: "1fr",
-        border: "none",
-      },
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const borderColor = props.borderColor || "var(--sqm-border-color)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder
-        ? "none"
-        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
+      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,

package/dist/collection/components/sqm-referral-card/sqm-referral-card.js

@@ -4,14 +4,11 @@ import { getProps } from "../../utils/utils";
 import { ReferralCardView } from "./sqm-referral-card-view";
 import { useChildElements } from "../../tables/useChildElements";
 /**
- *
  * @uiName Referral Card
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-hero"]
- * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span", "sqm-portal-footer", "sqm-titled-section"]
  * @exampleGroup Referrals
  * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" 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> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
- * */
+ */
 export class ReferralCard {
   constructor() {
     this.ignored = true;
@@ -55,6 +52,12 @@ export class ReferralCard {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff";
     /**
      * @uiName Limit width
      * @uiType boolean
@@ -262,7 +265,7 @@ export class ReferralCard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -277,82 +280,8 @@ export class ReferralCard {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }],
-        "text": "Border color of container"
-      },
-      "attribute": "border-color",
-      "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": "Color of the text and copy icon"
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Radius",
-            "name": "uiName"
-          }, {
-            "text": "number",
-            "name": "uiType"
-          }],
-        "text": "The border radius (in pixels)"
-      },
-      "attribute": "border-radius",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"#ffffff\""
     },
     "limitWidth": {
       "type": "boolean",

package/dist/collection/components/sqm-referral-code/ReferralCode.stories.js

@@ -13,9 +13,6 @@ export const ReferralCode = () => {
 export const ShowNotificationText = () => {
   return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
 };
-export const ShowNotificationTextRed = () => {
-  return (h("sqm-referral-code", { textColor: "red", showNotificationText: true, notificationText: "You've copied this code before" }));
-};
 export const ShowNotificationTextWithButton = () => {
   return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
 };

package/dist/collection/components/sqm-referral-code/sqm-referral-code.js

@@ -7,7 +7,6 @@ import { CopyTextView } from "../views/copy-text-view";
 import { useReferralCode } from "./useReferralCode";
 /**
  * @uiName Referral Code
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span", "sqm-referral-codes"]
  * @exampleGroup Sharing
  * @example Referral Code - <sqm-referral-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" show-notification-text="true"></sqm-referral-code>
  */
@@ -44,7 +43,6 @@ export class ReferralCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -58,18 +56,8 @@ export class ReferralCode {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     * @uiGroup Style
      */
     this.buttonStyle = "icon";
-    /**
-     * The type of the button that is used (primary or secondary).
-     * @uiName Button Type
-     * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
-     * @uiGroup Style
-     */
-    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -213,9 +201,6 @@ export class ReferralCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -267,9 +252,6 @@ export class ReferralCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -277,158 +259,12 @@ export class ReferralCode {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Background color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": "Background color of share link container"
-      },
-      "attribute": "background-color",
-      "reflect": false
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": "Border color of share link container (default is set to 1px solid transparent)"
-      },
-      "attribute": "border-color",
-      "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": "Style",
-            "name": "uiGroup"
-          }],
-        "text": "Color of the text and copy icon"
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "borderRadius": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border Radius",
-            "name": "uiName"
-          }, {
-            "text": "number",
-            "name": "uiType"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": "The border radius on the share link container (in pixels)"
-      },
-      "attribute": "border-radius",
-      "reflect": false
-    },
-    "buttonType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Button Type",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"primary\", \"secondary\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Primary\", \"Secondary\"]",
-            "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": "The type of the button that is used (primary or secondary)."
-      },
-      "attribute": "button-type",
-      "reflect": false,
-      "defaultValue": "\"primary\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -467,11 +303,6 @@ function useDemoReferralCode(props) {
     notificationText: props.notificationText,
     showNotificationText: props.showNotificationText,
     isCopied: props.showNotificationText,
-    borderColor: props.borderColor,
-    backgroundColor: props.backgroundColor,
-    textColor: props.textColor,
-    borderRadius: props.borderRadius,
-    buttonType: props.buttonType,
     isUsed: false,
     rewardStatus: "AVAILABLE",
     open,

package/dist/collection/components/sqm-referral-codes/ReferralCodes.stories.js

@@ -43,12 +43,6 @@ export const WithPreviouslyCopiedCode = () => {
     shareCodeWithPreviouslyCopied("shareCodes"),
     shareButtons("shareButtons")));
 };
-export const WithPreviouslyCopiedCodeAndCustomColor = () => {
-  return (h("sqm-referral-codes", { textColor: "red" },
-    pagination("pagination"),
-    shareCodeWithPreviouslyCopied("shareCodes"),
-    shareButtons("shareButtons")));
-};
 export const Empty = () => {
   return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
     pagination("pagination"),