@saasquatch/mint-components 1.6.8-9 → 1.6.9

package/dist/collection/components/sqm-popup-container/sqm-popup-container.js

@@ -37,7 +37,7 @@ export class PopupContainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Powered By",
+            "text": "Show powered by",
             "name": "uiName"
           }],
         "text": "Show Powered By SaaSquatch link"
@@ -57,7 +57,7 @@ export class PopupContainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Close Button",
+            "text": "Show close button",
             "name": "uiName"
           }],
         "text": "Display a close button on the popup"
@@ -77,7 +77,7 @@ export class PopupContainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Close Button Text",
+            "text": "Close button text",
             "name": "uiName"
           }],
         "text": "Text inside the close button"
@@ -97,7 +97,7 @@ export class PopupContainer {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Embed Padding",
+            "text": "Embed padding",
             "name": "uiName"
           }, {
             "text": "string",
@@ -126,7 +126,7 @@ export class PopupContainer {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Popup Padding",
+            "text": "Popup padding",
             "name": "uiName"
           }, {
             "text": "string",

package/dist/collection/components/sqm-portal-change-password/sqm-portal-change-password.js

@@ -12,48 +12,48 @@ export class PortalChangePassword {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Change Password Modal Header
+     * @uiName Change password modal header
      */
     this.modalChangePasswordHeader = "Change Password";
     /**
      * Found in modal
      *
-     * @uiName Cancel Button Text
+     * @uiName Cancel button text
      */
     this.cancelText = "Cancel";
     /**
      * Found in modal
      *
-     * @uiName Change Password Button Text
+     * @uiName Change password button text
      */
     this.changePasswordButtonText = "Change Password";
     /**
      * Found in modal
      *
-     * @uiName New Password Field Label
+     * @uiName New password field label
      */
     this.passwordFieldLabel = "New Password";
     /**
      * Found in modal
      *
-     * @uiName Confirm Password Label
+     * @uiName Confirm password Label
      */
     this.confirmPasswordFieldLabel = "Confirm New Password";
     /**
      * Successful password change message
      *
-     * @uiName Successful Password Change Message
+     * @uiName Successful password change message
      * @uiWidget textArea
      */
     this.successMessage = "Your password has been updated.";
     /**
      * Portal change password section header
      *
-     * @uiName Change Password Header
+     * @uiName Change password header
      */
     this.portalChangePasswordHeader = "Password";
     /**
-     * @uiName Change Password Button Text
+     * @uiName Change password button text
      */
     this.portalChangePasswordButtonText = "Change your password...";
     withHooks(this);
@@ -80,7 +80,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Change Password Modal Header",
+            "text": "Change password modal header",
             "name": "uiName"
           }],
         "text": ""
@@ -101,7 +101,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Cancel Button Text",
+            "text": "Cancel button text",
             "name": "uiName"
           }],
         "text": "Found in modal"
@@ -122,7 +122,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Change Password Button Text",
+            "text": "Change password button text",
             "name": "uiName"
           }],
         "text": "Found in modal"
@@ -143,7 +143,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "New Password Field Label",
+            "text": "New password field label",
             "name": "uiName"
           }],
         "text": "Found in modal"
@@ -164,7 +164,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Confirm Password Label",
+            "text": "Confirm password Label",
             "name": "uiName"
           }],
         "text": "Found in modal"
@@ -185,7 +185,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Successful Password Change Message",
+            "text": "Successful password change message",
             "name": "uiName"
           }, {
             "text": "textArea",
@@ -209,7 +209,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Change Password Header",
+            "text": "Change password header",
             "name": "uiName"
           }],
         "text": "Portal change password section header"
@@ -230,7 +230,7 @@ export class PortalChangePassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Change Password Button Text",
+            "text": "Change password button text",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-portal-container/PortalContainer.stories.js

@@ -117,3 +117,15 @@ export const End = () => {
             h("p", null, "Points Balance")))),
       h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
 };
+export const BackgroundColor = () => {
+  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start", "background-color": "red" },
+      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+          h("sqm-text", null,
+            h("p", null, "Rewards Redeemed"))),
+        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+          h("sqm-text", null,
+            h("p", null, "Points Balance")))),
+      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
+};

package/dist/collection/components/sqm-portal-container/sqm-portal-container-view.js

@@ -14,6 +14,7 @@ export function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
+      backgroundColor: props.backgroundColor || "transparent",
     },
   };
   const vanillaStyle = `
@@ -23,7 +24,7 @@ export function PortalContainerView(props, children) {
   }`;
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container, part: 'sqm-base' },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-portal-container/sqm-portal-container.js

@@ -37,6 +37,13 @@ export class PortalContainer {
      * @uiName Maximum width
      */
     this.maxWidth = "100%";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiGroup Card style
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff00";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -158,7 +165,7 @@ export class PortalContainer {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Minimum Width",
+            "text": "Minimum width",
             "name": "uiName"
           }],
         "text": ""
@@ -208,7 +215,7 @@ export class PortalContainer {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Justify Content",
+            "text": "Justify content",
             "name": "uiName"
           }, {
             "text": "string",
@@ -258,13 +265,43 @@ export class PortalContainer {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Center Content",
+            "text": "Center content",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "center",
       "reflect": false
+    },
+    "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": "Card style",
+            "name": "uiGroup"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"#ffffff00\""
     }
   }; }
   static get states() { return {

package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js

@@ -13,30 +13,30 @@ export class PortalEmailVerification {
     /**
      * Redirect participants to this page from their verification email.
      *
-     * @uiName Email Redirect
+     * @uiName Email redirect
      * @uiWidget pageSelect
      */
     this.redirectPath = "/verifyEmail";
     /**
-     * @uiName Email Verification Header Text
+     * @uiName Email verification header text
      */
     this.emailVerificationHeader = "Verify your email";
     /**
-     * @uiName Re-send Email Button Text
+     * @uiName Re-send email button text
      */
     this.resendEmailButtonText = "Re-send Email";
     /**
-     * @uiName Email Verification Body Text
+     * @uiName Email verification body text
      * @uiWidget textArea
      */
     this.verifyMessage = "A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.";
     /**
-     * @uiName Email Verification Status Text
+     * @uiName Email verification status text
      * @uiWidget textArea
      */
     this.verificationStatusMessage = "Checking verification status in {countdown}";
     /**
-     * @uiName Email Verification Checking Text
+     * @uiName Email verification checking text
      * @uiWidget textArea
      */
     this.verificationLoadingMessage = "Checking verification status";
@@ -64,7 +64,7 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Redirect",
+            "text": "Email redirect",
             "name": "uiName"
           }, {
             "text": "pageSelect",
@@ -88,7 +88,7 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Verification Header Text",
+            "text": "Email verification header text",
             "name": "uiName"
           }],
         "text": ""
@@ -109,7 +109,7 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Re-send Email Button Text",
+            "text": "Re-send email button text",
             "name": "uiName"
           }],
         "text": ""
@@ -130,7 +130,7 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Verification Body Text",
+            "text": "Email verification body text",
             "name": "uiName"
           }, {
             "text": "textArea",
@@ -154,7 +154,7 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Verification Status Text",
+            "text": "Email verification status text",
             "name": "uiName"
           }, {
             "text": "textArea",
@@ -178,7 +178,7 @@ export class PortalEmailVerification {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Email Verification Checking Text",
+            "text": "Email verification checking text",
             "name": "uiName"
           }, {
             "text": "textArea",

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer-view.js

@@ -50,7 +50,7 @@ export function PortalFooterView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container, part: "sqm-footer-container" },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-portal-footer/sqm-portal-footer.js

@@ -9,46 +9,50 @@ export class PortalFooter {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Hide the support text
+     * @uiName Hide support message
      */
     this.hideSupportText = false;
     /**
-     * @uiName Support Email
+     * @uiName Support email
      */
     this.supportEmail = "support@example.com";
     /**
-     * @uiName Support Text
+     * @uiName Support message
      * @uiWidget textArea
      */
     this.supportText = "For program support, contact {email}";
     /**
-     * @uiName Hide Powered By SaaSquatch
+     * @uiName Hide powered by SaaSquatch
      */
     this.hidePoweredBy = false;
     /**
-     * @uiName Powered By Link
+     * @uiName Powered By link
      */
-    this.poweredByLink = "https://saasquatch.com";
+    this.poweredByLink = "https://www.saasquatch.com/?utm_source=app&utm_medium=user-widget&utm_campaign=referral-widget";
     /**
-     * @uiName Padding Top
+     * @uiName Top padding
+     * @uiGroup Padding
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingTop = "large";
     /**
-     * @uiName Padding Right
+     * @uiName Right padding
+     * @uiGroup Padding
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingRight = "large";
     /**
-     * @uiName Padding Bottom
+     * @uiName Bottom padding
+     * @uiGroup Padding
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingBottom = "large";
     /**
-     * @uiName Padding Left
+     * @uiName Left padding
+     * @uiGroup Padding
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
@@ -75,7 +79,7 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Hide the support text",
+            "text": "Hide support message",
             "name": "uiName"
           }],
         "text": ""
@@ -96,7 +100,7 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Support Email",
+            "text": "Support email",
             "name": "uiName"
           }],
         "text": ""
@@ -117,7 +121,7 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Support Text",
+            "text": "Support message",
             "name": "uiName"
           }, {
             "text": "textArea",
@@ -141,7 +145,7 @@ export class PortalFooter {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Terms and Conditions Link",
+            "text": "Terms and conditions link",
             "name": "uiName"
           }],
         "text": ""
@@ -161,7 +165,7 @@ export class PortalFooter {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Terms and Conditions Text",
+            "text": "Terms and conditions text",
             "name": "uiName"
           }],
         "text": ""
@@ -181,7 +185,7 @@ export class PortalFooter {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "FAQ Link",
+            "text": "FAQ link",
             "name": "uiName"
           }],
         "text": ""
@@ -201,7 +205,7 @@ export class PortalFooter {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "FAQ Text",
+            "text": "FAQ text",
             "name": "uiName"
           }],
         "text": ""
@@ -221,7 +225,7 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Hide Powered By SaaSquatch",
+            "text": "Hide powered by SaaSquatch",
             "name": "uiName"
           }],
         "text": ""
@@ -242,14 +246,14 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Powered By Link",
+            "text": "Powered By link",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "powered-by-link",
       "reflect": false,
-      "defaultValue": "\"https://saasquatch.com\""
+      "defaultValue": "\"https://www.saasquatch.com/?utm_source=app&utm_medium=user-widget&utm_campaign=referral-widget\""
     },
     "paddingTop": {
       "type": "string",
@@ -263,8 +267,11 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Top",
+            "text": "Top padding",
             "name": "uiName"
+          }, {
+            "text": "Padding",
+            "name": "uiGroup"
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
@@ -290,8 +297,11 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Right",
+            "text": "Right padding",
             "name": "uiName"
+          }, {
+            "text": "Padding",
+            "name": "uiGroup"
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
@@ -317,8 +327,11 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Bottom",
+            "text": "Bottom padding",
             "name": "uiName"
+          }, {
+            "text": "Padding",
+            "name": "uiGroup"
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
@@ -344,8 +357,11 @@ export class PortalFooter {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Left",
+            "text": "Left padding",
             "name": "uiName"
+          }, {
+            "text": "Padding",
+            "name": "uiGroup"
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"

package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.js

@@ -23,7 +23,7 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalForgotPasswordView(props) {
   const { states, callbacks, content } = props;
-  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-forgot-password-container" },
+  return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),