@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

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

@@ -7,15 +7,24 @@ import { getProps } from "../../utils/utils";
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
+ * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section", "sqm-divided-layout"]
+ * @exampleGroup Layout
  * @slots [{"name":"", "title":"Layout Content"}]
  */
 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 Background Color
+     * @uiWidget color
+     */
+    this.backgroundColor = "#FFFFFF";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -90,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": "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": "Border 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: defaultbutton-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-empty/sqm-empty-view.js

@@ -8,7 +8,7 @@ export function EmptyStateView(props) {
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, intl.formatMessage({
+        h("p", { part: "description-text" }, intl.formatMessage({
           id: "emptyStateText",
           defaultMessage: emptyStateText,
         }, {

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: "default", exportparts: "base: defaultbutton-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 #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 #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 #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 #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", { id: "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"}` }),
+      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
+        h("sl-icon", { id: "icon", slot: "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", { id: "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", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
         h("slot", null)));
     }
   }

package/dist/collection/components/sqm-header-logo/sqm-header-logo.js

@@ -2,6 +2,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Host, Prop } from "@stencil/core";
 /**
  * @uiName Header Logo
+ * @validParents ["sqm-portal-frame","div","sqm-brand"]
  */
 export class HeroImage {
   constructor() {

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)", "column-to-hide-in-mobile": "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" })))));
+};

package/dist/collection/components/sqm-hero/sqm-hero-view.js

@@ -23,11 +23,12 @@ const parseBackground = (provided_bg) => {
     }
   }
   else {
-    return "";
+    return "var(--sqm-portal-background)";
   }
 };
 export function HeroView(props) {
   const { states, content } = props;
+  const { secondaryBackground = "var(--sqm-portal-background)" } = states;
   const getVertivalPadding = (size, half) => {
     const sizes = {
       small: 7,
@@ -35,10 +36,10 @@ export function HeroView(props) {
       large: 9,
     };
     var index = sizes[size];
-    if (isMobile(767)) {
+    if (isMobile(650)) {
       index = index - 2;
     }
-    else if (isMobile(1023)) {
+    else if (isMobile(767)) {
       index = index - 1;
     }
     return half ? paddingList[index - 2] : paddingList[index];
@@ -58,7 +59,7 @@ export function HeroView(props) {
   const style = {
     TwoColumnContainer: {
       display: "flex",
-      "@media screen and (max-width: 1023px)": {
+      "@media screen and (max-width: 650px)": {
         flexDirection: states.wrapDirection == "wrap-reverse" ? "column-reverse" : "column",
         justfiyContent: "center",
       },
@@ -82,12 +83,15 @@ export function HeroView(props) {
         background: `no-repeat center/cover ${parseBackground(states.background)}`,
       },
       "&:last-of-type": {
-        background: `no-repeat center/cover ${parseBackground(states.secondaryBackground)}`,
+        background: `no-repeat center/cover ${parseBackground(secondaryBackground)}`,
       },
-      "@media screen and (min-width: 1023px)": { flex: "1 1 0" },
+      "@media screen and (min-width: 650px)": { flex: "1 1 0" },
       minHeight: `${states.minHeight}px`,
       display: "block",
     },
+    HideColumn: {
+      "@media screen and (max-width: 650px)": { display: "none" },
+    },
     SingleColumnContainer: {
       background: `no-repeat center/cover ${parseBackground(states.background)}`,
       minHeight: `${states.minHeight}px`,
@@ -125,6 +129,10 @@ export function HeroView(props) {
       vanillaStyle,
       styleString),
     states.columns == 2 ? (h("div", { class: sheet.classes.TwoColumnContainer, part: "sqm-two-col-container" },
-      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.primaryColumn),
-      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
+      h("div", { part: "sqm-two-col-primary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "primary"
+          ? sheet.classes.HideColumn
+          : ""}` }, content.primaryColumn),
+      h("div", { part: "sqm-two-col-secondary-col", class: `${sheet.classes.ColumnWrapper} ${sheet.classes.ColumnPadding} ${states.columnToHideInMobile === "secondary"
+          ? sheet.classes.HideColumn
+          : ""}` }, content.secondaryColumn))) : (h("div", { part: "sqm-single-col", class: `${sheet.classes.SingleColumnContainer} ${sheet.classes.ColumnPadding}` }, content.primaryColumn))));
 }

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

@@ -4,6 +4,7 @@ import { HeroView } from "./sqm-hero-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Hero Layout
+ * @validParents ["sqm-portal-container","sqm-brand","div", "template", "sqb-auth-template-switch", "div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
  * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" min-height="0" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
  * @exampleGroup Layout
@@ -24,12 +25,12 @@ export class Hero {
      */
     this.minHeight = 200;
     /**
-     * Can be an image url, colour or Shoelace variable.
+     * Add an image or select a color. Recommended image aspect ratio of 4:5
      *
      * @uiName Background
      * @uiWidget Background
      */
-    this.background = "var(--sl-color-gray-50)";
+    this.background = "#f9fafb";
     /**
      * @uiName Padding size
      * @uiEnum ["none", "small", "medium","large"]
@@ -44,6 +45,13 @@ export class Hero {
      * @uiEnumNames ["Wrap", "Wrap Reverse"]
      */
     this.wrapDirection = "wrap";
+    /**
+     * Can only be used when two columns are present
+     * @uiName Hide the column in mobile view
+     * @uiEnum ["primary", "secondary", "null"]
+     * @uiEnumNames ["Primary", "Secondary", "None"]
+     */
+    this.columnToHideInMobile = null;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -127,11 +135,11 @@ export class Hero {
             "text": "Background",
             "name": "uiWidget"
           }],
-        "text": "Can be an image url, colour or Shoelace variable."
+        "text": "Add an image or select a color. Recommended image aspect ratio of 4:5"
       },
       "attribute": "background",
       "reflect": false,
-      "defaultValue": "\"var(--sl-color-gray-50)\""
+      "defaultValue": "\"#f9fafb\""
     },
     "paddingSize": {
       "type": "string",
@@ -209,6 +217,33 @@ export class Hero {
       "attribute": "wrap-direction",
       "reflect": false,
       "defaultValue": "\"wrap\""
+    },
+    "columnToHideInMobile": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"primary\" | \"secondary\" | null",
+        "resolved": "\"primary\" | \"secondary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide the column in mobile view",
+            "name": "uiName"
+          }, {
+            "text": "[\"primary\", \"secondary\", \"null\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\", \"None\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Can only be used when two columns are present"
+      },
+      "attribute": "column-to-hide-in-mobile",
+      "reflect": false,
+      "defaultValue": "null"
     }
   }; }
 }

package/dist/collection/components/sqm-hero-image/sqm-hero-image-view.js

@@ -12,7 +12,7 @@ export function HeroImageView(props, children) {
         width: "100%",
         height: "100%",
         position: "absolute",
-        background: props.overlayColor || "var(--sl-color-primary-900)",
+        background: props.overlayColor || "var(--sl-color-black)",
         opacity: props.overlayOpacity,
       },
     },
@@ -38,7 +38,7 @@ export function HeroImageView(props, children) {
         props.paddingImage +
         "))",
       textAlign: "center",
-      color: props.textColor || "var(--sl-color-neutral-0)",
+      color: props.textColor || "var(--sqm-text)",
       lineHeight: "var(--sl-line-height-dense)",
       "@media (max-width: 599px)": {
         padding: "var(--sl-spacing-" + props.paddingText + ")",
@@ -49,7 +49,7 @@ export function HeroImageView(props, children) {
       background: props.backgroundColor || "",
       flexDirection: props.imagePos === "right" ? "row-reverse" : "row",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       "& .image-area": {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
@@ -96,6 +96,9 @@ export function HeroImageView(props, children) {
       marginTop: "var(--sl-spacing-medium)",
       "&::part(base)": {
         padding: "0 var(--sl-spacing-x-large)",
+        color: "var(--sqm-primary-button-color)",
+        backgroundColor: "var(--sqm-primary-button-background)",
+        border: "var(--sqm-primary-button-color-border)",
       },
       "@media (max-width: 599px)": {
         width: "100%",
@@ -119,7 +122,7 @@ export function HeroImageView(props, children) {
       h("div", { class: sheet.classes.Overlay, part: "sqm-overlay" },
         props.header && (h("div", { class: sheet.classes.Header }, props.header)),
         props.description && (h("div", { class: sheet.classes.Description }, props.description)),
-        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", onClick: () => props.buttonNewTab
+        props.buttonText && (h("sl-button", { class: sheet.classes.Button, type: "primary", exportparts: `base: ${props.buttonType}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));