@saasquatch/mint-components 1.15.0-99 → 1.15.0

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

@@ -48,21 +48,6 @@ 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() { }
@@ -71,14 +56,12 @@ 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 }));
   }
@@ -262,84 +245,12 @@ 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?: { messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -375,16 +286,5 @@ 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,49 +1,44 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-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",
+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",
       "justify-content": "flex-end",
-      "align-items": "center",
-      "box-sizing": "border-box",
-      borderTop: border,
-      "margin-top": "auto",
+      padding: "0",
     },
-    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();
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function PortalFrameView(props, children) {
+  const { data, notFullScreen } = props;
   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,25 +15,6 @@ 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() { }
@@ -42,7 +23,7 @@ export class PortalFrame {
     const headerContent = h("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent, this);
+      : usePortalFrame(footerContent, headerContent);
     return (h(PortalFrameView, Object.assign({}, props),
       h("slot", null)));
   }
@@ -70,90 +51,12 @@ 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; }; backgroundColor?: string; notFullScreen?: boolean; border?: string; headerAndFooterBackgroundColor?: string; }",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -186,9 +89,6 @@ 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, props) {
+export function usePortalFrame(footerContent, headerContent) {
   const [, rerender] = useTick();
   return {
     data: {
@@ -9,8 +9,5 @@ export function usePortalFrame(footerContent, headerContent, props) {
     callbacks: {
       rerender,
     },
-    backgroundColor: props.backgroundColor,
-    border: props.border,
-    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }

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

@@ -48,18 +48,13 @@ const loadingProps = {
     pageLabel: "Sign in to your account",
   },
 };
-const googleProps = {
-  ...defaultProps,
-  content: {
+export const Default = () => (h("sqm-portal-login", { demoData: { ...defaultProps } }));
+export const IsGoogle = () => (h(PortalLoginView, Object.assign({}, 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 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 } }));
+  } })));
+export const LoginWithError = () => h(PortalLoginView, Object.assign({}, errorProps));
+export const LoginLoading = () => h(PortalLoginView, Object.assign({}, 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: "var(--sqm-text-subdued)",
+    color: "#AAAAAA",
     margin: "0",
   },
   ButtonsContainer: {

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

@@ -7,7 +7,6 @@ import { usePortalLogin } from "./usePortalLogin";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Microsite Login
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "template"]
  */
 export class PortalLogin {
   constructor() {
@@ -87,7 +86,7 @@ export class PortalLogin {
       googleButton: null,
       secondaryButton: (h("slot", { name: "secondaryButton" },
         h("style", null, styleString),
-        h("sl-button", { exportparts: "base: secondarybutton-base", type: "text", disabled: states.loading, onClick: () => navigation.push(states.registerPath) }, this.registerLabel))),
+        h("sl-button", { 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-logout/sqm-portal-logout.js

@@ -4,7 +4,6 @@ import { Component, Prop, State } from "@stencil/core";
 import { usePortalLogout } from "./usePortalLogout";
 /**
  * @uiName Microsite Logout
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  * @compatibility Built for instant access
  */
 export class PortalLogout {

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", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+      h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));
 }

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

@@ -7,7 +7,6 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 import deepmerge from "deepmerge";
 /**
  * @uiName Microsite Participant Profile
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"]
  */
 export class PortalProfile {
   constructor() {

package/dist/collection/components/sqm-portal-protected-route/sqm-portal-protected-route.js

@@ -4,7 +4,6 @@ import { h, Component, Prop, State, Host } from "@stencil/core";
 import { usePortalProtectedRoute } from "./usePortalProtectedRoute";
 /**
  * @uiName Microsite Protected Route
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template", "sqb-program-section", "sqb-conditional-section"]
  * @slots [{"name":"","title":"Route Content"}]
  */
 export class PortalProtectedRoute {

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

@@ -6,11 +6,12 @@ import { PortalRegisterView, } from "./sqm-portal-register-view";
 import { usePortalRegister } from "./usePortalRegister";
 /**
  * @uiName Microsite Registration
+ * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
  */
 export class PortalRegister {
   constructor() {
-    this.ignored = false;
+    this.ignored = true;
     /**
      * Redirect participants to this page from their verification email
      *
@@ -151,6 +152,7 @@ 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,7 +3,6 @@ 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-portal-registration-form/sqm-portal-registration-form.js

@@ -6,6 +6,7 @@ import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view
 import { usePortalRegistrationForm } from "./usePortalRegistrationForm";
 /**
  * @uiName Microsite Registration
+ * @canvasRenderer always-replace
  * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"},{"name":"emailOptIn","title":"Email Opt-in Fields"}]
  */
 export class PortalRegistrationForm {

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

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sqm-text)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
       background: props.backgroundColor || "",
     },
     Header: {

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

@@ -4,8 +4,6 @@ import { getProps } from "../../utils/utils";
 import { ProgramExplainerView } from "./sqm-program-explainer-view";
 /**
  * @uiName Program Explainer
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
- * @validChildren ["sqm-program-explainer-step"]
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
  * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Explore and use our product while earning points in the process!" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>

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

@@ -8,11 +8,8 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius
-        ? `${props.borderRadius}px`
-        : "var(--sqm-border-radius-normal)",
-      color: props.textColor || "var(--sqm-text)",
-      background: props.backgroundColor || "var(--sqm-accent-color-background)",
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
@@ -25,7 +22,6 @@ export function ProgramExplainerStepView(props) {
       },
     },
     Header: {
-      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-bold)",
       marginTop: "var(--sl-spacing-x-large)",
@@ -34,7 +30,6 @@ export function ProgramExplainerStepView(props) {
       },
     },
     Description: {
-      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
       "@media (max-width: 499px)": {
@@ -47,14 +42,11 @@ export function ProgramExplainerStepView(props) {
       borderRadius: "100%",
       objectFit: "cover",
       userSelect: "none",
-      background: props.iconBackgroundColor || "var(--sl-color-white)",
-      color: props.iconColor || "var(--sqm-accent-color-icon)",
+      background: "#FFF",
+      color: "var(--sl-color-primary-300)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
     },
   };
   const sheet = createStyleSheet(style);