@saasquatch/mint-components 1.15.0-3 → 1.15.0-30

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)))));
+            }, 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

@@ -23,7 +23,7 @@ export const FullStackSuccess = () => {
     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: () => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", onClick: () => {
           console.log("click");
         } }, "Primary Action"),
       h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {

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

@@ -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 + ")",
@@ -119,7 +119,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 === "primary" ? "primary" : "secondary"}button-base`, onClick: () => props.buttonNewTab
             ? window.open(props.buttonLink)
             : window.open(props.buttonLink, "_parent") }, props.buttonText)),
         children && children)));

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

@@ -13,6 +13,7 @@ export class HeroImage {
   constructor() {
     /**
      * @uiName Overlay opacity
+     * @uiGroup Style
      */
     this.overlayOpacity = "0.75";
     /**
@@ -20,11 +21,13 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      * @uiEnumNames ["Overlay", "Two-column"]
+     * @uiGroup Style
      */
     this.layout = "overlay";
     /**
      * @uiName Image percentage
      * @uiType number
+     * @uiGroup Style
      */
     this.imagePercentage = 50;
     /**
@@ -32,6 +35,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.imagePos = "center";
     /**
@@ -39,6 +43,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["top", "bottom"]
      * @uiEnumNames ["Top", "Bottom"]
+     * @uiGroup Style
      */
     this.imageMobilePos = "top";
     /**
@@ -51,6 +56,7 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     * @uiGroup Style
      */
     this.paddingText = "xxxx-large";
     /**
@@ -58,8 +64,18 @@ export class HeroImage {
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+     * @uiGroup Style
      */
     this.paddingImage = "none";
+    /**
+     * 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() { }
@@ -116,6 +132,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -136,6 +155,9 @@ export class HeroImage {
         "tags": [{
             "text": "Overlay opacity",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -163,6 +185,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -189,6 +214,9 @@ export class HeroImage {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -218,6 +246,9 @@ export class HeroImage {
           }, {
             "text": "[\"Overlay\", \"Two-column\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -242,6 +273,9 @@ export class HeroImage {
           }, {
             "text": "number",
             "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -272,6 +306,9 @@ export class HeroImage {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -302,6 +339,9 @@ export class HeroImage {
           }, {
             "text": "[\"Top\", \"Bottom\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -444,6 +484,9 @@ export class HeroImage {
           }, {
             "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -479,12 +522,48 @@ export class HeroImage {
           }, {
             "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "padding-image",
       "reflect": false,
       "defaultValue": "\"none\""
+    },
+    "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\""
     }
   }; }
 }

package/dist/collection/components/sqm-leaderboard/Leaderboard.stories.js

@@ -368,6 +368,43 @@ export const ReferralLeaderboard = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const ReferralLeaderboardWithCustomStyles = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        ...defaultStyles,
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+        textColor: "white",
+        borderColor: "white",
+        background: "slateblue",
+        borderRadius: 18,
+        viewingUserHighlightColor: "yellow",
+        viewingUserHighlightTextColor: "slateblue",
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: users,
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        textValue: "82",
+        rank: 1,
+        rowNumber: 1,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
 export const ReferralLeaderboardWithMaxWidth = () => {
   const props = {
     states: {

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

@@ -1,65 +1,70 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { intl } from "../../global/global";
-const style = {
-  Leaderboard: {
-    "& table": {
-      width: "100%",
-      borderCollapse: "collapse",
-    },
-    "& th": {
-      textAlign: "left",
-      padding: "var(--sl-spacing-medium)",
-      paddingTop: "0",
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-semibold)",
-    },
-    "& tr:not(:first-child)": {
-      borderTop: "1px solid var(--sl-color-neutral-200)",
-    },
-    "& td": {
-      fontSize: "var(--sl-font-size-medium)",
-      fontWeight: "var(--sl-font-weight-normal)",
-    },
-    "& .ellipses": {
-      textAlign: "left",
-      padding: "0",
-      color: "var(--sl-color-neutral-500)",
-      paddingLeft: "25%",
-    },
-    "& .highlight": {
-      background: "var(--sl-color-primary-50)",
-    },
-    "& td, th": {
-      color: "var(--sl-color-gray-800)",
-      padding: "var(--sl-spacing-medium)",
-    },
-    "& .User": {
-      width: "100%",
-    },
-    "& .Score": {
-      width: "auto",
-      whiteSpace: "nowrap",
-    },
-    "& .Rank": {
-      whiteSpace: "nowrap",
-    },
-    "& .fullWidth": {
-      width: "100%",
+export function LeaderboardView(props) {
+  var _a, _b, _c;
+  const { states, data, elements } = props;
+  const { styles } = states;
+  const style = {
+    Leaderboard: {
+      "& table": {
+        width: "100%",
+        borderCollapse: "collapse",
+        background: styles.background || "transparent",
+        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
+      },
+      "& th": {
+        textAlign: "left",
+        padding: "var(--sl-spacing-medium)",
+        paddingTop: "0",
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& tr:not(:first-child)": {
+        borderTop: `1px solid ${styles.borderColor || "var(--sl-color-neutral-200)"}`,
+      },
+      "& td": {
+        fontSize: "var(--sl-font-size-medium)",
+        fontWeight: "var(--sl-font-weight-normal)",
+      },
+      "& .ellipses": {
+        textAlign: "left",
+        padding: "0",
+        color: styles.textColor || "var(--sqm-text)",
+        paddingLeft: "25%",
+      },
+      "& .highlight": {
+        background: styles.viewingUserHighlightColor || "var(--sl-color-primary-200)",
+        "& td, th": {
+          color: styles.viewingUserHighlightTextColor || "var(--sqm-text)",
+        },
+      },
+      "& td, th": {
+        color: styles.textColor || "var(--sqm-text)",
+        padding: "var(--sl-spacing-medium)",
+      },
+      "& .User": {
+        width: "100%",
+      },
+      "& .Score": {
+        width: "auto",
+        whiteSpace: "nowrap",
+      },
+      "& .Rank": {
+        whiteSpace: "nowrap",
+      },
+      "& .fullWidth": {
+        width: "100%",
+      },
     },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const vanillaStyle = `
   :host{
     display: block;
   }
 `;
-export function LeaderboardView(props) {
-  var _a, _b, _c;
-  const { states, data, elements } = props;
-  const { styles } = states;
   if (states.isEssentials) {
     return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
   }