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

package/dist/collection/components/sqm-brand/sqm-brand.js

@@ -15,7 +15,7 @@ export class BrandComponent {
   }
   disconnectedCallback() { }
   render() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     function getCss(brandColor) {
       if (brandColor) {
         try {
@@ -25,11 +25,14 @@ export class BrandComponent {
       }
       return undefined;
     }
-    const css = (_a = getCss(this.brandColor)) !== null && _a !== void 0 ? _a : "";
-    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "Nunito Sans").trim() || undefined;
+    const brandingConfigFont = (_b = (_a = window.SquatchBrandingConfig) === null || _a === void 0 ? void 0 : _a.main) === null || _b === void 0 ? void 0 : _b.brandFont;
+    const css = ((_d = (_c = window.SquatchBrandingConfig) === null || _c === void 0 ? void 0 : _c.main) === null || _d === void 0 ? void 0 : _d.brandColor) ? ""
+      : (_e = getCss(this.brandColor)) !== null && _e !== void 0 ? _e : "";
+    const sanitizedFont = ((_f = this.brandFont) !== null && _f !== void 0 ? _f : "Nunito Sans").trim() || undefined;
     useEffect(() => {
-      if (!sanitizedFont) {
+      if (!sanitizedFont || brandingConfigFont) {
         // Nothing required in default case.
+        // Don't add font if it's set in the global config
         return;
       }
       const sheet = document.createElement("link");
@@ -50,6 +53,10 @@ export class BrandComponent {
            - resets css variable inheritence for fonts
           
           */
+
+          ${brandingConfigFont
+        ? ``
+        : `
           ::slotted(*) {
             --sl-font-sans: "${font}", arial;
             --sl-input-font-family: "${font}", arial;
@@ -57,6 +64,7 @@ export class BrandComponent {
             font-family:  "${font}", arial;
 			
             ${css}
+          `}
 
             --sl-focus-ring-color-primary: var(--sl-color-primary-100);
             --sl-input-border-color-focus: var(--sl-color-primary-500);

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -60,6 +60,7 @@ export class CheckboxField {
     return (h(CheckboxFieldView, { states: states, content: content, callbacks: callbacks }));
   }
   static get is() { return "sqm-checkbox-field"; }
+  static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "checkboxName": {
       "type": "string",

package/dist/collection/components/sqm-coupon-code/CouponCode.stories.js

@@ -15,10 +15,14 @@ const defaultProps = {
   inputPlaceholderText: "CODE ERROR",
   couponCodeLabel: "Your coupon code:",
   error: false,
+  buttonType: "primary",
 };
 export const CouponCode = () => {
   return h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard" });
 };
+export const CouponCodeWithSecondaryButtonType = () => {
+  return (h("sqm-coupon-code", { tooltiptext: "Copied to Clipboard", buttonType: "secondary", buttonStyle: "button-outside" }));
+};
 export const CustomTooltipText = () => {
   return h("sqm-coupon-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
 };

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

@@ -2,24 +2,24 @@ import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
 import { CopyTextView } from "../views/copy-text-view";
-const style = {
-  HostBlock: HostBlock,
-  couponCodeLabel: {
-    margin: "var(--sl-spacing-x-small) 0",
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-small)",
-  },
-};
-const vanillaStyle = `
+export function CouponCodeView(props) {
+  const error = !props.loading && props.error;
+  const style = {
+    HostBlock: HostBlock,
+    couponCodeLabel: {
+      margin: "var(--sl-spacing-x-small) 0",
+      color: props.textColor || "var(--sqm-text-subdued)",
+      fontSize: "var(--sl-font-size-small)",
+    },
+  };
+  const vanillaStyle = `
   :host{
     display: block;   
     width: 100%;
   }
 `;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function CouponCodeView(props) {
-  const error = !props.loading && props.error;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" },
       styleString,

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -31,6 +31,7 @@ export class CouponCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -44,6 +45,7 @@ export class CouponCode {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -105,6 +107,15 @@ export class CouponCode {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -206,6 +217,9 @@ export class CouponCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -257,6 +271,9 @@ export class CouponCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement."
       },
@@ -471,12 +488,158 @@ export class CouponCode {
       "reflect": false,
       "defaultValue": "\"...\""
     },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Border color of share link container"
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The border radius on the share link container (in pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "buttonType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\"",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of share link container"
+      },
+      "attribute": "background-color",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -515,6 +678,11 @@ function useDemoCouponCode(props) {
     error: false,
     couponCodePlaceholder: props.couponCodePlaceholder,
     couponCodeLabel: props.couponCodeLabel,
+    borderColor: props.borderColor,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility

package/dist/collection/components/sqm-coupon-code/useCouponCode.js

@@ -122,5 +122,6 @@ export function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
+    buttonType: props.buttonType || "primary",
   };
 }

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -3,14 +3,23 @@ import { createStyleSheet } from "../../styling/JSS";
 export function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-right": props.borderless
+          ? "none"
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
+      };
     }
     else {
-      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
+      return {
+        "border-bottom": props.borderless
+          ? "none"
+          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
+      };
     }
   };
   const style = {
     LayoutContainer: {
+      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -26,11 +35,10 @@ export function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-content-background);
+    background-color: var(--sqm-portal-background);
+    color: var(--sqm-text);
     overflow-x: clip;
-    ${props.direction === "column"
-    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
-    : ""}
+    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -14,10 +14,17 @@ import { getProps } from "../../utils/utils";
 export class DividedLayout {
   constructor() {
     /**
+     * @undocumented
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
-    this.dividerStyle = "1px solid #EAEAEA";
+    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
+    /**
+     * Background color of the divider
+     * @uiName Divider Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -92,14 +99,64 @@ export class DividedLayout {
       "optional": false,
       "docs": {
         "tags": [{
+            "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.",
+            "name": "undocumented"
+          }, {
             "text": "Border style",
             "name": "uiName"
           }],
-        "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color."
+        "text": ""
       },
       "attribute": "divider-style",
       "reflect": false,
-      "defaultValue": "\"1px solid #EAEAEA\""
+      "defaultValue": "\"var(--sqm-border-thickness) solid var(--sqm-border-color)\""
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Divider Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Background color of the divider"
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"#FFFFFF\""
+    },
+    "borderColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Divider Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Color of the divider (defaults to default text color if none is set)"
+      },
+      "attribute": "border-color",
+      "reflect": false
     }
   }; }
 }

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

@@ -32,7 +32,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, exportparts: "base: secondarybutton-base" }, text.canceltext)))));
+            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
   }
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -4,29 +4,21 @@ export default {
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },
-    h("div", null, "This is a success message.")));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };
 export const ErrorAlert = () => {
   return (h("sqm-form-message", { type: "error" },
-    h("div", null, "This is an error message")));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };
 export const WarningAlert = () => {
   return (h("sqm-form-message", { type: "warning" },
-    h("div", null, "This is an error message")));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };
 export const InfoAlert = () => {
   return (h("sqm-form-message", { type: "info" },
-    h("div", null, "This is an info message")));
-};
-export const FullStackSuccess = () => {
-  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
-    h("div", { class: "AlertContent" },
-      h("div", { part: "successalert-text" }, "Title"),
-      h("div", { part: "successalert-subtext" }, "Body text."),
-      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
-          console.log("click");
-        } }, "Primary Action"),
-      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
-          console.log("click");
-        } }, "Secondary Action"))));
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
 };

package/dist/collection/components/sqm-form-message/sqm-form-message.css

@@ -1,25 +1,64 @@
 sl-alert::part(base) {
-  border: 1px solid;
-  border-radius: 3px;
-  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.1);
+  border: var(--sqm-border-thickness) solid;
+  border-radius: var(--sqm-border-radius-normal);
+  font-family: var(--sqm-primary-font);
 }
 
 .Error::part(base) {
-  background-color: var(--sl-color-danger-100);
-  border-color: var(--sl-color-danger-200);
+  color: var(--sqm-danger-color-text);
+  background-color: var(--sqm-danger-color-background);
+  border-color: var(--sqm-danger-color-border);
+  font-size: 14px;
+}
+
+.Error::part(alert-icon) {
+  color: var(--sqm-danger-color-icon);
+  font-size: 24px;
 }
 
 .Warning::part(base) {
-  background-color: var(--sl-color-warning-100);
-  border-color: var(--sl-color-warning-200);
+  color: var(--sqm-warning-color-text);
+  background-color: var(--sqm-warning-color-background);
+  border-color: var(--sqm-warning-color-border);
+}
+
+.Warning::part(alert-icon) {
+  color: var(--sqm-warning-color-icon);
+  font-size: 24px;
 }
 
 .Success::part(base) {
-  background-color: var(--sl-color-success-100);
-  border-color: var(--sl-color-success-200);
+  color: var(--sqm-success-color-text);
+  background-color: var(--sqm-success-color-background);
+  border-color: var(--sqm-success-color-border);
+}
+
+.Success::part(alert-icon) {
+  color: var(--sqm-success-color-icon);
+  font-size: 24px;
 }
 
 .Info::part(base) {
-  background-color: var(--sl-color-primary-100);
-  border-color: var(--sl-color-primary-200);
+  color: var(--sqm-informative-color-text);
+  background-color: var(--sqm-informative-color-background);
+  border-color: var(--sqm-informative-color-border);
+}
+
+.Info::part(alert-icon) {
+  color: var(--sqm-informative-color-icon);
+  font-size: 24px;
+}
+
+::slotted(*) {
+  margin: 0;
+}
+
+::slotted(*[part=alert-title]) {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+::slotted(*[part=alert-description]),
+::slotted(*[part=erroralert-text]) {
+  font-size: 14px;
 }

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -13,22 +13,22 @@ export class FormMessage {
   render() {
     if (this.type === "error") {
       return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
+        h("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
         h("slot", null)));
     }
     else if (this.type === "info") {
       return (h("sl-alert", { exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
+        h("sl-icon", { slot: "icon", part: "alert-icon", name: `${this.icon ? this.icon : "info-circle"}` }),
         h("slot", null)));
     }
     else if (this.type === "warning") {
       return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
+        h("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
         h("slot", null)));
     }
     else {
       return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
-        h("sl-icon", { slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
+        h("sl-icon", { part: "alert-icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
         h("slot", null)));
     }
   }

package/dist/collection/components/sqm-hero/Hero.stories.js

@@ -196,3 +196,14 @@ export const MinHeight = () => {
   };
   return h(HeroView, Object.assign({}, props));
 };
+export const InstantAccessLoggedOutView = () => {
+  return (h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 2, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "var(--sqm-portal-background)", columnToHideInMobile: "primary" },
+    h("sqm-referred-registration", { slot: "secondary-column", "register-label": "Get $50 off", "padding-bottom": "small", "padding-left": "x-large", "padding-right": "x-large", "padding-top": "small" },
+      h("sqm-titled-section", { "text-align": "center", "label-margin": "small", padding: "none", slot: "top" },
+        h("h1", { slot: "label" }, "You got $50 off thanks to a friend!"),
+        h("p", { slot: "content" },
+          h("span", null, "Use this reward to get $50 off your next purchase."))),
+      h("div", { slot: "bottom" },
+        h("p", { style: { textAlign: "center" } }, "*Valid on purchases of $75 or more"),
+        h("sqm-portal-footer", { slot: "footer", "show-powered-by": "true", "padding-bottom": "none", "padding-left": "none", "padding-right": "none", "padding-top": "none", "hide-support-text": true, "terms-text": "Terms And Conditions", "terms-link": "https://example.com" })))));
+};