@saasquatch/mint-components 1.5.0-13 → 1.5.0-17

package/dist/cjs/{sqm-program-explainer-step-view-54424840.js → sqm-program-explainer-step-view-17c5e99d.js}

@@ -13,14 +13,14 @@ function ProgramExplainerStepView(props) {
       background: props.background,
       padding: "var(--sl-spacing-large)",
       paddingBottom: "var(--sl-spacing-xxx-large)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
         paddingBottom: "var(--sl-spacing-large)",
       },
     },
     Text: {
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         marginLeft: "var(--sl-spacing-large)",
       },
     },
@@ -30,14 +30,14 @@ function ProgramExplainerStepView(props) {
       fontWeight: "var(--sl-font-weight-bold)",
       lineHeight: "var(--sl-line-height-dense)",
       marginTop: "var(--sl-spacing-large)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         margin: "0",
       },
     },
     Description: {
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         marginTop: "var(--sl-spacing-x-small)",
       },
     },

package/dist/cjs/sqm-program-explainer-step.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-54424840.js');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-17c5e99d.js');
 
 const ProgramExplainerStep = class {
   constructor(hostRef) {

package/dist/cjs/{sqm-program-explainer-view-db516613.js → sqm-program-explainer-view-d516c9df.js}

@@ -8,7 +8,7 @@ function ProgramExplainerView(props, children) {
     Container: {
       display: "flex",
       flexDirection: "row",
-      "@media (max-width: 768px)": {
+      "@media (max-width: 499px)": {
         flexDirection: "column",
       },
     },
@@ -40,7 +40,7 @@ function ProgramExplainerView(props, children) {
     display: flex;
     width: 100%;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 499px) {
     ::slotted(*){
       display: block;
     }

package/dist/cjs/sqm-program-explainer.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-b0129cd6.js');
 const _extends = require('./extends-0302d27d.js');
 require('./jss-preset-default.esm-6304d24f.js');
 const utils = require('./utils-95e5317c.js');
-const sqmProgramExplainerView = require('./sqm-program-explainer-view-db516613.js');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-d516c9df.js');
 
 const ProgramExplainer = class {
   constructor(hostRef) {

package/dist/cjs/{useDemoBigStat-5f770877.js → useDemoBigStat-49cd314a.js}

@@ -895,8 +895,7 @@ const StatPaths = [
 const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = index_module.M();
+  const { statType, flexReverse, alignment, programId = index_module.M(), } = props;
   const locale = index_module.R();
   const userIdent = index_module.ne();
   const re = _extends.useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -100,6 +100,26 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }],
+        "text": "The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -563,8 +563,7 @@ export const StatPaths = [
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = useProgramId();
+  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
   const locale = useLocale();
   const userIdent = useUserIdentity();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);

package/dist/collection/components/sqm-card-feed/CardFeed.stories.js

@@ -6,7 +6,7 @@ export default {
 };
 const props = {
   width: 347,
-  gap: "xx-large",
+  gap: 24,
 };
 const taskCardProps = {
   rewardAmount: "20",
@@ -16,6 +16,7 @@ const taskCardProps = {
   repeatable: false,
   showProgressBar: false,
   progress: 0,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   goal: 1,
   buttonText: "Take survey",
   buttonLink: "https://example.com/",
@@ -23,6 +24,9 @@ const taskCardProps = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const coupleActions = {
@@ -32,6 +36,7 @@ const coupleActions = {
   description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
   repeatable: false,
   showProgressBar: true,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   steps: true,
   progress: 1,
   goal: 5,
@@ -41,6 +46,9 @@ const coupleActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const manyActions = {
@@ -51,6 +59,7 @@ const manyActions = {
   repeatable: false,
   showProgressBar: true,
   progress: 100,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   goal: 500,
   progressBarUnit: "$",
   buttonText: "Take survey",
@@ -59,6 +68,9 @@ const manyActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 export const TaskCardGrid = () => {

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

@@ -1,14 +1,15 @@
 import { h } from "@stencil/core";
+import "@appnest/masonry-layout";
 import jss from "jss";
 import preset from "jss-preset-default";
 export function CardFeedView(props, children) {
   const style = {
     Container: {
-      columnGap: "var(--sl-spacing-" + props.gap + ")",
+      columnGap: props.gap + "px",
       columnWidth: props.width + "px",
       "& > div": {
-        display: "inline-block!important",
-        marginBottom: "var(--sl-spacing-" + props.gap + ")",
+        //   display: "inline-block!important",
+        marginBottom: "24px",
       },
     },
   };
@@ -18,15 +19,11 @@ export function CardFeedView(props, children) {
   console.log(props);
   const vanillaStyle = `
 	::slotted(*){
-		display: block!important;
-		margin-bottom: var(--sl-spacing-` +
-    props.gap +
-    `);
+		// display: block!important;
+		margin-bottom: ${props.gap}px;
 	}
   `;
   return (h("div", null,
-    h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
+    h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.Container }, children)));
 }

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

@@ -13,11 +13,10 @@ export class CardFeed {
      */
     this.width = 347;
     /**
-     * @uiName Horizontal Gap
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiName Column Gap
+     * @uiType number
      */
-    this.gap = "xx-large";
+    this.gap = 24;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -50,31 +49,28 @@ export class CardFeed {
       "defaultValue": "347"
     },
     "gap": {
-      "type": "string",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Horizontal Gap",
+            "text": "Column Gap",
             "name": "uiName"
           }, {
-            "text": "string",
+            "text": "number",
             "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
           }],
         "text": ""
       },
       "attribute": "gap",
       "reflect": false,
-      "defaultValue": "\"xx-large\""
+      "defaultValue": "24"
     }
   }; }
   static get states() { return {

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

@@ -9,9 +9,19 @@ export default {
 export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
   h("sqm-portal-container", null,
     h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
-    h("div", { style: { background: "blue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
+    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
 export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
   h("sqm-portal-container", { direction: "row", "min-width": "160px" },
     h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
     h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
     h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { direction: "row", minWidth: "160px", maxWidth: "50%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
+export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
+  h("sqm-portal-container", { direction: "row", maxWidth: "100%" },
+    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
+    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Tweet about us"),
+    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));

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

@@ -10,12 +10,13 @@ export function PortalContainerView(props, children) {
         : "100%",
       "grid-gap": `var(--sl-spacing-${props.gap})`,
       padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+      maxWidth: props.maxWidth ? props.maxWidth : "",
     },
   };
   const vanillaStyle = `
   :host{
     width: 100%;
-    display: "block";
+    display: block;
   }`;
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);

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

@@ -20,6 +20,10 @@ export class PortalContainer {
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
     this.gap = "xxx-large";
+    /**
+     * @uiName Maximum width
+     */
+    this.maxWidth = "100%";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -139,6 +143,27 @@ export class PortalContainer {
       },
       "attribute": "min-width",
       "reflect": false
+    },
+    "maxWidth": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Maximum width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "max-width",
+      "reflect": false,
+      "defaultValue": "\"100%\""
     }
   }; }
   static get states() { return {

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

@@ -10,6 +10,12 @@ import { usePortalEmailVerification } from "./usePortalEmailVerification";
 export class PortalEmailVerification {
   constructor() {
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the verification email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/verifyEmail";
     /**
      * @uiName Email verification header text
      */
@@ -34,6 +40,27 @@ export class PortalEmailVerification {
   static get is() { return "sqm-portal-email-verification"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "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\""
+    },
     "emailVerificationHeader": {
       "type": "string",
       "mutable": false,

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

@@ -14,7 +14,8 @@ export function usePortalEmailVerification(props) {
       return;
     setError("");
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email, urlParams, redirectPath };
     await request(variables);
   };
   useEffect(() => {

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

@@ -12,6 +12,7 @@ const defaultProps = {
     error: "",
     loading: false,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -26,6 +27,7 @@ const errorProps = {
     error: "Something went wrong. Please try again.",
     loading: false,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -40,6 +42,7 @@ const loadingProps = {
     error: "",
     loading: true,
     success: false,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -54,6 +57,7 @@ const successProps = {
     error: "",
     loading: false,
     success: true,
+    loginPath: "/login",
   },
   callbacks: {
     submit: async (e) => await e,

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

@@ -10,6 +10,12 @@ import { usePortalForgotPassword } from "./usePortalForgotPassword";
 export class PortalForgotPassword {
   constructor() {
     this.ignored = true;
+    /**
+     * The page that users are redirected to from the password reset email.
+     *
+     * @uiName Email redirection base path
+     */
+    this.redirectPath = "/resetPassword";
     /**
      * @uiName Email label
      */
@@ -18,16 +24,20 @@ export class PortalForgotPassword {
      * @uiName Password reset button text
      */
     this.submitLabel = "Request Password Reset";
+    /**
+     * @uiName Routing path to login page
+     */
+    this.loginPath = "/login";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
     const { states, callbacks } = isDemo()
       ? usePortalForgotPasswordDemo(this)
-      : usePortalForgotPassword();
+      : usePortalForgotPassword(this);
     const content = {
       secondaryButton: (h("slot", { name: "secondaryButton" },
-        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push("/login") }, "Sign In"))),
+        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, "Sign In"))),
       messageSlot: (h("slot", { name: "messageSlot" }, "Enter your email below to receive a password reset link.")),
       emailLabel: this.emailLabel,
       submitLabel: this.submitLabel,
@@ -37,6 +47,27 @@ export class PortalForgotPassword {
   static get is() { return "sqm-portal-forgot-password"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "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 password reset email."
+      },
+      "attribute": "redirect-path",
+      "reflect": false,
+      "defaultValue": "\"/resetPassword\""
+    },
     "emailLabel": {
       "type": "string",
       "mutable": false,
@@ -79,12 +110,33 @@ export class PortalForgotPassword {
       "reflect": false,
       "defaultValue": "\"Request Password Reset\""
     },
+    "loginPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Routing path to login page",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "login-path",
+      "reflect": false,
+      "defaultValue": "\"/login\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalForgotPasswordViewProps>",
-        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }",
+        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; }; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -1,7 +1,7 @@
 import jsonpointer from "jsonpointer";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 import { useRequestPasswordResetEmailMutation } from "@saasquatch/component-boilerplate";
-export function usePortalForgotPassword() {
+export function usePortalForgotPassword(props) {
   var _a, _b, _c, _d;
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState("");
@@ -15,7 +15,8 @@ export function usePortalForgotPassword() {
       jsonpointer.set(formData, key, value);
     });
     const urlParams = nextPage ? { nextPage } : null;
-    const variables = { email: formData.email, urlParams };
+    const redirectPath = props.redirectPath;
+    const variables = { email: formData.email, urlParams, redirectPath };
     await request(variables);
   };
   useEffect(() => {
@@ -34,6 +35,7 @@ export function usePortalForgotPassword() {
       loading,
       error: ((_d = (_c = (_b = errors === null || errors === void 0 ? void 0 : errors.response) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.message) || error,
       success,
+      loginPath: props.loginPath,
     },
     callbacks: {
       submit,

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

@@ -7,6 +7,8 @@ const defaultProps = {
   states: {
     error: "",
     loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -17,6 +19,8 @@ const errorProps = {
   states: {
     error: "Something went wrong. Please try again.",
     loading: false,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,
@@ -27,6 +31,8 @@ const loadingProps = {
   states: {
     error: "",
     loading: true,
+    forgotPasswordPath: "/forgotPassword",
+    registerPath: "/register",
   },
   callbacks: {
     submit: async (e) => await e,