@saasquatch/mint-components 1.6.8-9 → 1.6.9

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

@@ -13,48 +13,48 @@ export class PortalResetPassword {
     /**
      * Redirect participants to this page when they successfully reset their password.
      *
-     * @uiName Successful Reset Redirect
+     * @uiName Successful reset redirect
      * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
      * Redirect participants to this page if password reset fails due to an outdated reset attempt.
      *
-     * @uiName Failed Reset Redirect
+     * @uiName Failed reset redirect
      * @uiWidget pageSelect
      */
     this.failedPage = "/";
     /**
-     * @uiName Show Confirm Password Field
+     * @uiName Show confirm password field
      */
     this.confirmPassword = false;
     /**
-     * @uiName Reset Password Header Text
+     * @uiName Reset password header text
      */
     this.resetPasswordHeader = "Reset your password";
     /**
      * Displayed after a successful password reset.
      *
-     * @uiName Successful Password Reset Text
+     * @uiName Successful password reset text
      * @uiWidget textArea
      */
     this.passwordResetHeader = "Password reset";
     /**
-     * @uiName Password Reset Button Text
+     * @uiName Password reset button text
      */
     this.resetPasswordButtonText = "Reset Password";
     /**
      * Button text displayed after a successful password reset.
      *
-     * @uiName Continue Button Text
+     * @uiName Continue button text
      */
     this.continueButtonText = "Continue";
     /**
-     * @uiName Password Confirmation Field Label
+     * @uiName Password confirmation field label
      */
     this.confirmPasswordFieldLabel = "Confirm Password";
     /**
-     * @uiName Password Field Label
+     * @uiName Password field label
      */
     this.passwordFieldLabel = "New Password";
     withHooks(this);
@@ -81,7 +81,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Successful Reset Redirect",
+            "text": "Successful reset redirect",
             "name": "uiName"
           }, {
             "text": "pageSelect",
@@ -105,7 +105,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Failed Reset Redirect",
+            "text": "Failed reset redirect",
             "name": "uiName"
           }, {
             "text": "pageSelect",
@@ -129,7 +129,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Confirm Password Field",
+            "text": "Show confirm password field",
             "name": "uiName"
           }],
         "text": ""
@@ -150,7 +150,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reset Password Header Text",
+            "text": "Reset password header text",
             "name": "uiName"
           }],
         "text": ""
@@ -171,7 +171,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Successful Password Reset Text",
+            "text": "Successful password reset text",
             "name": "uiName"
           }, {
             "text": "textArea",
@@ -195,7 +195,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Password Reset Button Text",
+            "text": "Password reset button text",
             "name": "uiName"
           }],
         "text": ""
@@ -216,7 +216,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Continue Button Text",
+            "text": "Continue button text",
             "name": "uiName"
           }],
         "text": "Button text displayed after a successful password reset."
@@ -237,7 +237,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Password Confirmation Field Label",
+            "text": "Password confirmation field label",
             "name": "uiName"
           }],
         "text": ""
@@ -258,7 +258,7 @@ export class PortalResetPassword {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Password Field Label",
+            "text": "Password field label",
             "name": "uiName"
           }],
         "text": ""

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

@@ -22,7 +22,7 @@ const styleString = sheet.toString();
 export function PortalVerifyEmailView(props) {
   const { states, data, callbacks } = props;
   if (states.verified) {
-    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-portal-verify-email-container" },
+    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" },
         vanillaStyle,
         styleString),
@@ -32,7 +32,7 @@ export function PortalVerifyEmailView(props) {
       h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, "Continue")));
   }
   if (states.error || !data.oobCode) {
-    return (h("div", { class: sheet.classes.Wrapper },
+    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
       h("style", { type: "text/css" }, styleString),
       h(TextSpanView, { type: "h3" }, "Verify your email"),
       h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },

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

@@ -13,14 +13,14 @@ export class PortalVerifyEmail {
     /**
      * Redirect participants to this page when they successfully verify their email.
      *
-     * @uiName Successful Verification Redirect
+     * @uiName Successful verification redirect
      * @uiWidget pageSelect
      */
     this.nextPage = "/";
     /**
      * Redirect participants to this page if verification fails due to an outdated verification attempt.
      *
-     * @uiName Failed Verification Redirect
+     * @uiName Failed verification redirect
      * @uiWidget pageSelect
      */
     this.failedPage = "/";
@@ -48,7 +48,7 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Successful Verification Redirect",
+            "text": "Successful verification redirect",
             "name": "uiName"
           }, {
             "text": "pageSelect",
@@ -72,7 +72,7 @@ export class PortalVerifyEmail {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Failed Verification Redirect",
+            "text": "Failed verification redirect",
             "name": "uiName"
           }, {
             "text": "pageSelect",

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

@@ -34,11 +34,11 @@ export function ProgramExplainerView(props, children) {
       display: block;
     }
   }`;
-  return (h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-container" },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
     h("div", { class: sheet.classes.Header },
-      h("div", { class: sheet.classes.Header, part: "sqm-program-explainer-header" }, props.header)),
-    h("div", { class: sheet.classes.Grid, part: "sqm-program-explainer-grid-container" }, children)));
+      h("div", { class: sheet.classes.Header, part: "sqm-header" }, props.header)),
+    h("div", { class: sheet.classes.Grid, part: "sqm-grid-container" }, children)));
 }

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

@@ -33,7 +33,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Header Text",
+            "text": "Header text",
             "name": "uiName"
           }],
         "text": ""
@@ -53,7 +53,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Header Text Color",
+            "text": "Header text color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -79,7 +79,7 @@ export class ProgramExplainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Header Background Color",
+            "text": "Header background color",
             "name": "uiName"
           }, {
             "text": "color",

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

@@ -61,11 +61,11 @@ export function ProgramExplainerStepView(props) {
       display: block;
     }
   }`;
-  return (h("div", { class: sheet.classes.Container, part: "sqm-program-explainer-step-container" },
+  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl, part: "sqm-program-explainer-step-media" })) : (h("div", { class: sheet.classes.Media, part: "sqm-program-explainer-step-media" },
+    h("div", null, props.imageUrl ? (h("img", { class: sheet.classes.Media, src: props.imageUrl, part: "sqm-media" })) : (h("div", { class: sheet.classes.Media, part: "sqm-media" },
       h("sl-icon", { name: props.icon })))),
     h("div", { class: sheet.classes.Text },
-      h("div", { class: sheet.classes.Header, part: "sqm-program-explainer-step-header" }, props.header),
-      h("div", { class: sheet.classes.Description, part: "sqm-program-explainer-step-description" }, props.description))));
+      h("div", { class: sheet.classes.Header, part: "sqm-header" }, props.header),
+      h("div", { class: sheet.classes.Description, part: "sqm-description" }, props.description))));
 }

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

@@ -74,7 +74,7 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Text Color",
+            "text": "Text color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -100,7 +100,7 @@ export class ProgramExplainerStep {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Background Color",
+            "text": "Background color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -126,7 +126,7 @@ export class ProgramExplainerStep {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Image Url",
+            "text": "Image URL",
             "name": "uiName"
           }, {
             "text": "imageUpload",

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -33,6 +33,11 @@ export const ImageAndShareButtons = () => {
     media("left"),
     sharebutton("right")));
 };
+export const LimitWidth = () => {
+  return (h("sqm-referral-card", { limitWidth: true },
+    media("left"),
+    sharebutton("right")));
+};
 export const TimelineAndShareButtons = () => {
   return (h("sqm-referral-card", null,
     timeline("left", 3),
@@ -58,6 +63,12 @@ export const FlippedSlots = () => {
     timeline("right", 3),
     sharebutton("left")));
 };
+export const NoLeft = () => {
+  return h("sqm-referral-card", null, timeline("right", 3));
+};
+export const NoRight = () => {
+  return h("sqm-referral-card", null, sharebutton("left"));
+};
 export const WithHeader = () => {
   return (h("sqm-referral-card", null,
     h("h3", { slot: "header" }, "Header slot content"),
@@ -70,6 +81,18 @@ export const WithFooter = () => {
     sharebutton("left"),
     h("sqm-portal-footer", { slot: "footer" })));
 };
+export const NoBorder = () => {
+  return (h("sqm-referral-card", { "hide-border": "true" },
+    timeline("right", 3),
+    sharebutton("left"),
+    h("sqm-portal-footer", { slot: "footer" })));
+};
+export const BackgroundColor = () => {
+  return (h("sqm-referral-card", { "background-color": "aquamarine" },
+    timeline("right", 3),
+    sharebutton("left"),
+    h("sqm-portal-footer", { slot: "footer" })));
+};
 export const ReferralCardGeneric = () => {
   return (h("sqm-referral-card", { "vertical-alignment": "center" },
     h("sqm-portal-container", { slot: "left", gap: "x-small" },

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

@@ -2,40 +2,28 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 const style = {
   Container: {
-    border: "1px solid var(--sl-color-neutral-300)",
     borderRadius: "var(--sl-border-radius-large)",
     color: "var(--sl-color-neutral-900)",
     background: "var(--sl-color-neutral-0)",
+    display: "flex",
+    flexDirection: "column",
+    rowGap: "var(--sl-spacing-large)",
   },
   EndContainer: {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    padding: "0 var(--sl-spacing-large)",
   },
   ColumnContainer: {
     "& p": { margin: "0" },
-    display: "flex",
-    "& .left": {
-      boxSizing: "border-box",
-      width: "50%",
-      padding: "var(--sl-spacing-large)",
-      paddingRight: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-      },
-    },
-    "& .right": {
-      boxSizing: "border-box",
-      width: "50%",
-      padding: "var(--sl-spacing-large)",
-      paddingLeft: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-      },
-    },
+    display: "grid",
+    gridAutoColumns: "minmax(0, 1fr)",
+    gridAutoFlow: "column",
+    gap: "calc(2 * var(--sl-spacing-medium))",
     "@media (max-width: 499px)": {
-      flexDirection: "column",
+      gridAutoFlow: "unset",
+      gridAutoColumns: "unset",
+      gridTemplateColumns: "1fr",
       border: "none",
     },
   },
@@ -48,17 +36,24 @@ const vanillaStyle = `
     }
   `;
 export function ReferralCardView(props) {
-  return (h("div", { part: "sqm-referral-card-container", class: sheet.classes.Container },
+  return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
+      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
+      "padding-top": `var(--sl-spacing-${props.paddingTop})`,
+      "padding-right": `var(--sl-spacing-${props.paddingRight})`,
+      "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,
+      "padding-left": `var(--sl-spacing-${props.paddingLeft})`,
+      backgroundColor: props.backgroundColor,
+      maxWidth: `${props.limitWidth ? "600px" : "none"}`,
+      margin: `${props.limitWidth ? "auto" : "none"}`,
+    } },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: sheet.classes.EndContainer }, props.slots.header),
-    h("div", { part: "sqm-columns", class: sheet.classes.ColumnContainer },
-      h("div", { class: "left", style: {
-          alignSelf: props.verticalAlignment,
-        } }, props.slots.left),
-      h("div", { class: "right", style: {
-          alignSelf: props.verticalAlignment,
-        } }, props.slots.right)),
-    h("div", { class: sheet.classes.EndContainer }, props.slots.footer)));
+    props.hasHeader && (h("div", { class: sheet.classes.EndContainer }, props.slots.header)),
+    h("div", { part: "sqm-column-container", class: sheet.classes.ColumnContainer, style: {
+        alignItems: props.verticalAlignment,
+      } },
+      props.slots.left,
+      props.slots.right),
+    props.hasFooter && (h("div", { class: sheet.classes.EndContainer }, props.slots.footer))));
 }