@saasquatch/mint-components 1.15.0-8 → 1.15.0-81

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

@@ -48,6 +48,21 @@ export class PortalForgotPassword {
      * @uiName Email verification sent text
      */
     this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
+    /**
+     * @uiName Border radius
+     * @uiWidget number
+     */
+    this.borderRadius = "var(--sqm-border-radius-normal, 8px)";
+    /**
+     * @uiName Border style
+     * @uiWidget textArea
+     */
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -56,12 +71,14 @@ export class PortalForgotPassword {
       ? usePortalForgotPasswordDemo(this)
       : usePortalForgotPassword(this);
     const content = {
-      secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginText))),
       messageSlot: h("slot", { name: "messageSlot" }, this.headerText),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
       successAlertText: this.successAlertText,
+      loginText: this.loginText,
+      backgroundColor: this.backgroundColor,
+      borderRadius: this.borderRadius,
+      border: this.border,
     };
     return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
   }
@@ -245,12 +262,84 @@ export class PortalForgotPassword {
       "reflect": false,
       "defaultValue": "\"If an account with that email exists, a password reset email will be sent.\""
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #ffffff)\""
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-border-radius-normal, 8px)\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border style",
+            "name": "uiName"
+          }, {
+            "text": "textArea",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalForgotPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -286,5 +375,16 @@ function usePortalForgotPasswordDemo(props) {
     callbacks: {
       submit: async (_event) => { },
     },
+    content: {
+      secondaryButton: (h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", disabled: false, onClick: () => navigation.push(props.loginPath) }, props.loginText)),
+      messageSlot: h("span", null, props.headerText),
+      emailLabel: props.emailLabel,
+      submitLabel: props.submitLabel,
+      successAlertText: props.successAlertText,
+      loginText: props.loginText,
+      backgroundColor: props.backgroundColor,
+      borderRadius: props.borderRadius,
+      border: props.border,
+    },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }

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

@@ -1,44 +1,49 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  Frame: {
-    display: "flex",
-    "flex-direction": "column",
-    "box-sizing": "border-box",
-  },
-  FooterWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-    background: "var(--sqm-footer-background)",
-    display: "flex",
-    "justify-content": "flex-end",
-    "align-items": "center",
-    "box-sizing": "border-box",
-    "margin-top": "auto",
-  },
-  HeaderWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    "box-sizing": "border-box",
-    display: "flex",
-    "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
-    "align-items": "center",
-    "background-color": "var(--sqm-header-background)",
-    "@media screen and (max-width: 499px)": {
-      "flex-direction": "row-reverse",
+export function PortalFrameView(props, children) {
+  const { data, notFullScreen, border } = props;
+  const style = {
+    HostBlock: HostBlock,
+    Frame: {
+      display: "flex",
+      "flex-direction": "column",
+      "box-sizing": "border-box",
+      "&:nth-child(2)": {
+        background: props.backgroundColor,
+      },
+    },
+    FooterWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+      background: props.headerAndFooterBackgroundColor,
+      display: "flex",
       "justify-content": "flex-end",
-      padding: "0",
+      "align-items": "center",
+      "box-sizing": "border-box",
+      borderTop: border,
+      "margin-top": "auto",
     },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
+    HeaderWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      "box-sizing": "border-box",
+      display: "flex",
+      "justify-content": "space-between",
+      padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+      "align-items": "center",
+      borderBottom: border,
+      background: props.headerAndFooterBackgroundColor,
+      "@media screen and (max-width: 499px)": {
+        "flex-direction": "row-reverse",
+        "justify-content": "flex-end",
+        padding: "0",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.HeaderWrapper, part: "sqm-header" },

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

@@ -15,6 +15,25 @@ export class PortalFrame {
      * @undocumented
      */
     this.notFullScreen = false;
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #fff)";
+    /**
+     * Borders placed to seperate the header and footer from the body content.
+     * @uiName Border
+     * @uiType string
+     */
+    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
+    /**
+     * Background color for the header and footer.
+     * @uiName Header and Footer Background Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff)";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -23,7 +42,7 @@ export class PortalFrame {
     const headerContent = h("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (h(PortalFrameView, Object.assign({}, props),
       h("slot", null)));
   }
@@ -51,12 +70,90 @@ export class PortalFrame {
       "reflect": false,
       "defaultValue": "false"
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Borders placed to seperate the header and footer from the body content."
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
+    },
+    "headerAndFooterBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header and Footer Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Background color for the header and footer."
+      },
+      "attribute": "header-and-footer-background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff)\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalFrameViewProps>",
-        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; border?: string; headerAndFooterBackgroundColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -89,6 +186,9 @@ export class PortalFrame {
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return deepmerge({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },

package/dist/collection/components/sqm-portal-frame/usePortalFrame.js

@@ -1,5 +1,5 @@
 import { useTick } from "@saasquatch/component-boilerplate";
-export function usePortalFrame(footerContent, headerContent) {
+export function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = useTick();
   return {
     data: {
@@ -9,5 +9,8 @@ export function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }

package/dist/collection/components/sqm-portal-login/PortalLogin.stories.js

@@ -48,13 +48,18 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
-export const IsGoogle = () => (h(PortalLoginView, Object.assign({}, defaultProps, { content: {
+const googleProps = {
+  ...defaultProps,
+  content: {
     secondaryButton: (h("span", null,
       "Don't have an account?",
       " ",
       h("sl-button", { style: { width: "50px" }, size: "large", type: "text" }, "Register"))),
     googleButton: h("sl-button", null, "Sign in with Google"),
-  } })));
-export const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
-export const LoginLoading = () => h(PortalLoginView, Object.assign({}, loadingProps));
+  },
+};
+export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
+export const Text = () => h(PortalLoginView, Object.assign({}, defaultProps));
+export const IsGoogle = () => (h("sqm-portal-login", { demoData: { ...googleProps } }));
+export const LoginWithError = () => (h("sqm-portal-login", { demoData: { ...errorProps } }));
+export const LoginLoading = () => (h("sqm-portal-login", { demoData: { ...loadingProps } }));

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

@@ -10,7 +10,7 @@ const style = {
     cursor: "pointer",
     "font-size": "13px",
     "font-weight": "600",
-    color: "#AAAAAA",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
   ButtonsContainer: {

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

@@ -87,7 +87,7 @@ export class PortalLogin {
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
+        h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,

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

@@ -76,7 +76,7 @@ export function PortalProfileView(props) {
             ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
       h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
       states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
-      h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));
 }

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

@@ -10,7 +10,7 @@ import { usePortalRegister } from "./usePortalRegister";
  */
 export class PortalRegister {
   constructor() {
-    this.ignored = true;
+    this.ignored = false;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -151,7 +151,6 @@ export class PortalRegister {
     return (h(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
   }
   static get is() { return "sqm-portal-register"; }
-  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "nextPage": {
       "type": "string",

package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js

@@ -3,6 +3,7 @@ import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view
 export default {
   title: "Components/Microsite Portal Register",
 };
+// TODO: Figure out if we can delete this component and it's stories since we have a duplicate
 const defaultProps = {
   states: {
     error: "",

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

@@ -8,9 +8,11 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sqm-border-radius-normal)",
       color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sl-color-primary-50)",
+      background: props.backgroundColor || "var(--sqm-accent-color-background)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -46,7 +48,7 @@ export function ProgramExplainerStepView(props) {
       objectFit: "cover",
       userSelect: "none",
       background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sl-color-primary-500)",
+      color: props.iconColor || "var(--sqm-accent-color-icon)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",

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

@@ -115,11 +115,11 @@ export class ProgramExplainerStep {
       "reflect": false
     },
     "borderRadius": {
-      "type": "string",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -132,7 +132,7 @@ export class ProgramExplainerStep {
             "text": "number",
             "name": "type"
           }],
-        "text": ""
+        "text": "Amount in pixels"
       },
       "attribute": "border-radius",
       "reflect": false

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

@@ -89,5 +89,5 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       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: textbutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: secondarybutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }

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
-    ? "1px solid var(--sl-color-primary-500)"
-    : "1px solid #CACFD3";
+    ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)"
+    : "var(--sqm-border-thickness) solid var(--sqm-border-color)";
   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,43 +1,46 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Container: {
-    borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sqm-text)",
-    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" : "1px solid var(--sl-color-neutral-300)"}`,
+      border: `${props.hideBorder
+        ? "none"
+        : `var(--sqm-border-thickness) solid ${borderColor}`}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,