@saasquatch/mint-components 1.5.0-8 → 1.5.0-80

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

@@ -9,6 +9,7 @@ const defaultProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -25,6 +26,7 @@ const errorProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -44,6 +46,7 @@ const loadingProps = {
     loading: true,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -60,6 +63,7 @@ const slottedProps = {
     loading: false,
     confirmPassword: true,
     hideInputs: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: () => console.log("Submit!"),
@@ -86,7 +90,15 @@ export const FieldsHidden = () => {
         loading: true,
         confirmPassword: true,
         hideInputs: true,
+        loginPath: "/login",
       },
     } }));
 };
 export const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
+export const TermsAndConditions = () => (h(PortalRegisterView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    terms: (h("p", null,
+      "By signing up you agree to the",
+      " ",
+      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
+  } })));

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

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: { ...AuthWrapper, "max-width": "600px" },
@@ -29,8 +28,7 @@ sqm-portal-register {
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalRegisterView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -69,6 +67,7 @@ export function PortalRegisterView(props) {
           "Cannot be empty",
       }
         : [])))),
+      content.terms,
       h("div", { class: sheet.classes.ButtonsContainer },
         h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
         content.secondaryButton))));

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

@@ -14,6 +14,12 @@ export class PortalRegister {
      * @uiName Page navigated to after registration
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Label for email field
      */
@@ -50,6 +56,10 @@ export class PortalRegister {
      * @uiName Heading label
      */
     this.pageLabel = "Register";
+    /**
+     * @uiName Sign in button redirection path
+     */
+    this.loginPath = "/login";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -60,7 +70,8 @@ export class PortalRegister {
     const content = {
       formData: h("slot", { name: "formData" }),
       secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push("/login") }, this.loginLabel))),
+        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginLabel))),
+      terms: h("slot", { name: "terms" }),
       emailLabel: this.emailLabel,
       passwordLabel: this.passwordLabel,
       submitLabel: this.submitLabel,
@@ -93,6 +104,27 @@ export class PortalRegister {
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "redirectPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Email redirection base path",
+            "name": "uiName"
+          }],
+        "text": "The page that users are redirected to from the verification email."
+      },
+      "attribute": "redirect-path",
+      "reflect": false,
+      "defaultValue": "\"/verifyEmail\""
+    },
     "emailLabel": {
       "type": "string",
       "mutable": false,
@@ -282,12 +314,33 @@ export class PortalRegister {
       "reflect": false,
       "defaultValue": "\"Register\""
     },
+    "loginPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Sign in button redirection path",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "login-path",
+      "reflect": false,
+      "defaultValue": "\"/login\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalRegisterViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; }; content?: { formData?: any; passwordField?: any; secondaryButton?: any; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; refs?: { formRef: any; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; validationState?: FormState; enablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -325,6 +378,7 @@ function useRegisterDemo(props) {
       confirmPassword: true,
       hideInputs: props.hideInputs || false,
       customPasswordField: false,
+      loginPath: "/login",
     },
     callbacks: {
       submit: async (_event) => {

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

@@ -47,10 +47,12 @@ export function usePortalRegister(props) {
     delete formData.password;
     delete formData.confirmPassword;
     formData = { ...formData };
+    const redirectPath = props.redirectPath;
     const variables = {
       email,
       password,
       formData,
+      redirectPath,
     };
     try {
       await request(variables);
@@ -100,6 +102,7 @@ export function usePortalRegister(props) {
       validationState,
       confirmPassword: props.confirmPassword,
       hideInputs: props.hideInputs,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,

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

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
-import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { AuthButtonsContainer, AuthColumn, AuthWrapper } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -34,8 +33,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalResetPasswordView(props) {
   const { states, callbacks } = props;

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

@@ -11,9 +11,17 @@ export class PortalResetPassword {
   constructor() {
     this.ignored = true;
     /**
+     * The page that users are redirected to when the password reset succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if the reset fails due to outdated password reset attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     /**
      * @uiName Show confirm password
      */
@@ -73,12 +81,33 @@ export class PortalResetPassword {
             "text": "Next page path",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "The page that users are redirected to when the password reset succeeds."
       },
       "attribute": "next-page",
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "failedPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Failed page redirection path",
+            "name": "uiName"
+          }],
+        "text": "The page that users are redirected to if the reset fails due to outdated password reset attempt."
+      },
+      "attribute": "failed-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
     "confirmPassword": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/sqm-portal-reset-password/usePortalResetPassword.js

@@ -33,7 +33,7 @@ export function usePortalResetPassword(props) {
   };
   const failed = () => {
     navigation.push({
-      pathname: "/",
+      pathname: props.failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };

package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { AuthColumn, AuthWrapper } from "../../global/mixins";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
 const style = {
   Wrapper: AuthWrapper,
@@ -18,8 +17,7 @@ const vanillaStyle = `
   display: none;
 }
 `;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;

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

@@ -11,9 +11,17 @@ export class PortalVerifyEmail {
   constructor() {
     this.ignored = true;
     /**
+     * The page that users are redirected to when the verification succeeds.
+     *
      * @uiName Next page path
      */
     this.nextPage = "/";
+    /**
+     * The page that users are redirected to if verification fails due to outdated verification attempt.
+     *
+     * @uiName Failed page redirection path
+     */
+    this.failedPage = "/";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -41,12 +49,33 @@ export class PortalVerifyEmail {
             "text": "Next page path",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "The page that users are redirected to when the verification succeeds."
       },
       "attribute": "next-page",
       "reflect": false,
       "defaultValue": "\"/\""
     },
+    "failedPage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Failed page redirection path",
+            "name": "uiName"
+          }],
+        "text": "The page that users are redirected to if verification fails due to outdated verification attempt."
+      },
+      "attribute": "failed-page",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/sqm-portal-verify-email/usePortalVerifyEmail.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { navigation, useUserIdentity, useVerifyEmailMutation, } from "@saasquatch/component-boilerplate";
-export function usePortalVerifyEmail({ nextPage }) {
+export function usePortalVerifyEmail({ nextPage, failedPage }) {
   var _a, _b, _c, _d, _e;
   const [verified, setVerified] = useState(false);
   const [disableContinue, setDisableContinue] = useState(true);
@@ -13,7 +13,7 @@ export function usePortalVerifyEmail({ nextPage }) {
   urlParams.delete("oobCode");
   const failed = () => {
     return navigation.push({
-      pathname: "/",
+      pathname: failedPage,
       search: urlParams.toString() && "?" + urlParams.toString(),
     });
   };

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

@@ -1,49 +1,33 @@
 import { h } from "@stencil/core";
-import { ProgramExplainerView } from "./sqm-program-explainer-view";
-import { ProgramExplainerStepView } from "../sqm-program-explainer-step/sqm-program-explainer-step-view";
 export default {
   title: "Components/Program Explainer",
 };
-const props = {
-  header: "Klip Rewards",
-  cardTitle: "Earn rewards with our loyalty program",
-  description: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
-  color: "black",
-  background: "#F3F0EC",
-};
-const steps1 = {
-  cardTitle: "Invite your friends to Klip",
-  description: "Earn up to $1200 in rewards for each referral",
-  color: "white",
-  background: "#5B3EDA",
-  icon: "person-plus-fill",
-};
-const steps2 = {
-  cardTitle: "If your friend signs up for a Klip Business plan",
-  description: "Get a $50 VISA giftcard when they pay for their first month",
-  color: "black",
-  background: "#F3CC66",
-  icon: "server",
-};
-const steps3 = {
-  cardTitle: "If your friend signs up for a Klip Enterprise plan",
-  description: "Get up to $1200 in rewards - a $200 VISA giftcard when our sales team qualifies them as a good fit for Klip, and a $1000 VISA giftcard when they become a paying customer",
-  color: "black",
-  background: "#D3CCF5",
-  icon: "people-fill",
-};
 export const OneStep = () => {
-  return (h(ProgramExplainerView, Object.assign({}, props),
-    h(ProgramExplainerStepView, Object.assign({}, steps1))));
-};
-export const TwoSteps = () => {
-  return (h(ProgramExplainerView, Object.assign({}, props),
-    h(ProgramExplainerStepView, Object.assign({}, steps1)),
-    h(ProgramExplainerStepView, Object.assign({}, steps2))));
-};
-export const ThreeSteps = () => {
-  return (h(ProgramExplainerView, Object.assign({}, props),
-    h(ProgramExplainerStepView, Object.assign({}, steps1)),
-    h(ProgramExplainerStepView, Object.assign({}, steps2)),
-    h(ProgramExplainerStepView, Object.assign({}, steps3))));
-};
+  return (h("sqm-program-explainer", { header: "How it works" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
+    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
+};
+export const Custom = () => {
+  return (h("sqm-program-explainer", { header: "How it works", "text-color": "#fffc4b", "background-color": "#ff7f7f" },
+    h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Share your referral link with a friend and earn up to $1250", icon: "person-plus-fill" }),
+    h("sqm-program-explainer-step", { header: "Earn points for using Klip", description: "Complete tasks like uploading your first video or sharing videos with friends", icon: "server" }),
+    h("sqm-program-explainer-step", { header: "Redeem rewards with your points", description: "Redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America", icon: "people-fill" })));
+};
+// export const TwoSteps = () => {
+//   return (
+//     <ProgramExplainerView {...props}>
+//       <ProgramExplainerStepView {...steps1} />
+//       <ProgramExplainerStepView {...steps2} />
+//     </ProgramExplainerView>
+//   );
+// };
+// export const ThreeSteps = () => {
+//   return (
+//     <ProgramExplainerView {...props}>
+//       <ProgramExplainerStepView {...steps1} />
+//       <ProgramExplainerStepView {...steps2} />
+//       <ProgramExplainerStepView {...steps3} />
+//     </ProgramExplainerView>
+//   );
+// };

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

@@ -1,41 +1,44 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerView(props, children) {
   const style = {
     Container: {
+      color: props.textColor || "var(--sl-color-neutral-900)",
+      background: props.backgroundColor || "",
+    },
+    Header: {
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginBottom: "var(--sl-spacing-large)",
+      textAlign: "center",
+    },
+    Grid: {
       display: "flex",
-      "@media (max-width: 1024px)": {
+      flexDirection: "row",
+      gap: "var(--sl-spacing-large)",
+      "@media (max-width: 499px)": {
         flexDirection: "column",
       },
     },
-    Card: {
-      padding: "24px",
-      color: props.color,
-      background: props.background,
-    },
-    Title: {
-      fontSize: "28px",
-      lineHeight: "36px",
-      fontWeight: "700",
-    },
-    Description: {
-      fontSize: "16px",
-      lineHeight: "28px",
-      fontWeight: "400",
-      marginTop: "8px",
-    },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  console.log(props);
-  return (h("div", null,
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.Card },
-      h("div", { class: sheet.classes.Title }, props.header)),
-    h("div", { class: sheet.classes.Container }, children),
-    h("div", { class: sheet.classes.Card },
-      h("div", { class: sheet.classes.Title }, props.cardTitle),
-      h("div", { class: sheet.classes.Description }, props.description))));
+  const vanillaStyle = `
+  ::slotted(*){
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    ::slotted(*){
+      display: block;
+    }
+  }`;
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Header },
+      h("div", { class: sheet.classes.Header }, props.header)),
+    h("div", { class: sheet.classes.Grid }, children)));
 }

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

@@ -30,7 +30,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Header",
+            "text": "Header Text",
             "name": "uiName"
           }],
         "text": ""
@@ -38,7 +38,7 @@ export class ProgramExplainer {
       "attribute": "header",
       "reflect": false
     },
-    "cardTitle": {
+    "textColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -50,47 +50,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Title",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "card-title",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Description",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Color",
+            "text": "Header Text Color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -98,10 +58,10 @@ export class ProgramExplainer {
           }],
         "text": ""
       },
-      "attribute": "color",
+      "attribute": "text-color",
       "reflect": false
     },
-    "background": {
+    "backgroundColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -113,7 +73,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Background",
+            "text": "Header Background Color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -121,7 +81,7 @@ export class ProgramExplainer {
           }],
         "text": ""
       },
-      "attribute": "background",
+      "attribute": "background-color",
       "reflect": false
     }
   }; }

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

@@ -1,22 +1,10 @@
 import { h } from "@stencil/core";
-import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
 export default {
   title: "Components/Program Explainer Step",
 };
-export const Example1 = () => {
-  const props = {
-    cardTitle: "Invite your friends to Klip",
-    description: "Earn up to $1200 in rewards for each referral",
-    color: "white",
-    background: "#5B3EDA",
-    icon: "person-plus-fill",
-  };
-  return h(ProgramExplainerStepView, Object.assign({}, props));
+export const ProgramExplainerStep = () => {
+  return (h("sqm-program-explainer-step", { header: "Get up to $1250 for inviting friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", icon: "person-plus-fill" }));
+};
+export const ProgramExplainerStepCustom = () => {
+  return (h("sqm-program-explainer-step", { header: "Invite your friends to Klip", description: "Send your referral link to a friend or share it through email, Twitter, or Facebook", "image-url": "https://i.imgur.com/Uqn3aXw.png", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
 };
-// export const ActiveItem = () => {
-//   const props = {
-//     title: "hello",
-//     description: "world",
-//   };
-//   return <ProgramExplainerStepView {...props} />;
-// };