@saasquatch/mint-components 1.15.0-16 → 1.15.0-18

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

@@ -74,6 +74,10 @@ export const InvalidStatValue = () => {
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
+export const CustomStyles = () => {
+  return (h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+    h("p", null, "Giftcards Earned")));
+};
 export const MultipleStats = () => {
   return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
     h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
@@ -86,3 +90,12 @@ export const MultipleStats = () => {
       h("sqm-text", null,
         h("p", null, "Points Balance")))));
 };
+export const MultipleStatsWithCustomBranding = () => {
+  return (h("sqm-stat-container", { space: "xxx-large", display: "grid", alignment: "center", "hide-border": "true" },
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Giftcards Earned")),
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Referrals")),
+    h("sqm-big-stat", { "stat-font-weight": "500", "stat-text-color": "#1ed760", "stat-font-size": "45", "description-text-color": "#121212", "description-font-size": "18", alignment: "center", "stat-type": "/integrationRewardsCountFiltered/AVAILABLE/global", "flex-reverse": true },
+      h("p", null, "Points balance"))));
+};

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

@@ -1,13 +1,13 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function BigStatView(props) {
-  const { statvalue, flexReverse, alignment } = props;
-  // Dependent on props, not feasiable to move out
+  const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;
+  // Dependent on props, not feasible to move out
   const style = {
     Container: {
       display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
+      // height: "inherit",
+      // "justify-content": "space-between",
       "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
       "align-items": `${alignment === "left"
         ? "flex-start"
@@ -16,14 +16,22 @@ export function BigStatView(props) {
           : "center"}`,
     },
     Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
+      "font-size": statFontSize
+        ? `${statFontSize}px`
+        : "var(--sl-font-size-xx-large)",
       "text-align": alignment,
+      color: statTextColor || "var(--sqm-text)",
+      lineHeight: "35px",
+      fontWeight: statFontWeight || "var(--sl-font-weight-normal)",
     },
     Description: {
-      "font-size": "var(--sl-font-size-small)",
+      "font-size": descriptionFontSize
+        ? `${descriptionFontSize}px`
+        : "var(--sl-font-size-small)",
       "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sqm-text-subdued)",
+      color: descriptionTextColor || "var(--sqm-text)",
       "text-align": alignment,
+      lineHeight: "20px",
     },
   };
   const sheet = createStyleSheet(style);

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

@@ -23,8 +23,19 @@ export class BigStat {
      *
      * @uiName Flex reverse
      * @default
+     * @uiGroup Style
      */
     this.flexReverse = false;
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     * @uiGroup Style
+     */
+    this.alignment = "center";
     this.ignored = true;
     withHooks(this);
   }
@@ -86,6 +97,9 @@ export class BigStat {
           }, {
             "text": undefined,
             "name": "default"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Controls the order of the stat value & description column"
       },
@@ -116,11 +130,15 @@ export class BigStat {
           }, {
             "text": "[\"Left\", \"Right\", \"Center\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Controls the alignment of the flexbox"
       },
       "attribute": "alignment",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"center\""
     },
     "programId": {
       "type": "string",
@@ -145,12 +163,154 @@ export class BigStat {
       "attribute": "program-id",
       "reflect": false
     },
+    "statTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the stat text"
+      },
+      "attribute": "stat-text-color",
+      "reflect": false
+    },
+    "statFontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat font size",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Font size of the stat text in pixels"
+      },
+      "attribute": "stat-font-size",
+      "reflect": false
+    },
+    "statFontWeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Stat font size",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }, {
+            "text": "[100, 200, 300, 400, 500, 600, 700, 800, 900]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Thin\", \"Extra Light\", \"Light\", \"Normal\", \"Medium\", \"Semi Bold\", \"Bold\", \"Extra Bold\", \"Heavy\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Font size of the stat text in pixels"
+      },
+      "attribute": "stat-font-weight",
+      "reflect": false
+    },
+    "descriptionTextColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description text color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the description text"
+      },
+      "attribute": "description-text-color",
+      "reflect": false
+    },
+    "descriptionFontSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Description font size",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Font size of the description text in pixels"
+      },
+      "attribute": "description-font-size",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; }",
+        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; labelSlot?: VNode; statTextColor?: string; statFontSize?: number; descriptionTextColor?: string; descriptionFontSize?: number; statFontWeight?: number; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -890,6 +890,11 @@ export function useBigStat(props) {
         flexReverse,
         alignment,
         loading: false,
+        statTextColor: props.statTextColor,
+        statFontSize: props.statFontSize,
+        descriptionTextColor: props.descriptionTextColor,
+        descriptionFontSize: props.descriptionFontSize,
+        statFontWeight: props.statFontWeight,
       },
       label: "BAD PROP TYPE",
     };
@@ -919,6 +924,11 @@ export function useBigStat(props) {
       loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
+      statTextColor: props.statTextColor,
+      statFontSize: props.statFontSize,
+      descriptionTextColor: props.descriptionTextColor,
+      descriptionFontSize: props.descriptionFontSize,
+      statFontWeight: props.statFontWeight,
     },
     label,
   };

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

@@ -13,8 +13,12 @@ export function useDemoBigStat(props) {
         value: 0,
         statvalue: "!!!",
         loading: false,
-        flexReverse: false,
-        alignment: "center",
+        flexReverse: props.flexReverse,
+        alignment: props.alignment,
+        statTextColor: props.statTextColor,
+        statFontSize: props.statFontSize,
+        descriptionTextColor: props.descriptionTextColor,
+        descriptionFontSize: props.descriptionFontSize,
       },
       label: "BAD PROP TYPE",
     };
@@ -26,8 +30,13 @@ export function useDemoBigStat(props) {
     props: deepmerge({
       statvalue: "12345",
       value: 0,
-      flexReverse: false,
-      alignment: "center",
+      flexReverse: props.flexReverse,
+      alignment: props.alignment,
+      statTextColor: props.statTextColor,
+      statFontSize: props.statFontSize,
+      descriptionTextColor: props.descriptionTextColor,
+      descriptionFontSize: props.descriptionFontSize,
+      statFontWeight: props.statFontWeight,
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),
     label: label !== null && label !== void 0 ? label : "Demo Label",
   };

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

@@ -16,7 +16,7 @@ const style = {
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function PaginationView(props) {
-  const { states, callbacks, text } = props;
+  const { states, callbacks, text, buttonType } = props;
   const { onNext, onPrev } = callbacks;
   const { currentPage, totalPages, loading } = states;
   if (totalPages === 1)
@@ -24,9 +24,9 @@ export function PaginationView(props) {
   return (h("span", { class: sheet.classes.Container, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     !loading && (h(Fragment, null,
-      h("sl-button", { onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
+      h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: onPrev, part: "sqm-pagination-button", circle: true, disabled: currentPage === 1 },
         h("sl-icon", { name: "chevron-left", label: "Previous Page" })),
       h("div", { class: sheet.classes.TextContainer }, text.paginationText))),
-    h("sl-button", { onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
+    h("sl-button", { exportparts: `base: ${props.buttonType === "primary" ? "primary" : "secondary"}button-base`, onClick: onNext, part: "sqm-pagination-button", circle: true, disabled: currentPage === totalPages },
       h("sl-icon", { name: "chevron-right", label: "Previous Page" }))));
 }

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

@@ -19,6 +19,15 @@ export class Pagination {
      * @uiName Pagination text
      */
     this.paginationText = "{currentPage} of {totalPages}";
+    /**
+     * 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 = "secondary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -52,6 +61,39 @@ export class Pagination {
       "reflect": false,
       "defaultValue": "\"{currentPage} of {totalPages}\""
     },
+    "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": "\"secondary\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -95,6 +137,7 @@ function useDemoPagination(props) {
       totalPages: 5,
       loading: false,
     },
+    buttonType: props.buttonType,
     callbacks: {
       onNext: () => setCurrentPage(currentPage + 1),
       onPrev: () => setCurrentPage(currentPage - 1),

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

@@ -8,7 +8,9 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
       color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {

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

@@ -115,11 +115,11 @@ export class ProgramExplainerStep {
       "reflect": false
     },
     "borderRadius": {
-      "type": "string",
+      "type": "number",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
@@ -132,7 +132,7 @@ export class ProgramExplainerStep {
             "text": "number",
             "name": "type"
           }],
-        "text": ""
+        "text": "Amount in pixels"
       },
       "attribute": "border-radius",
       "reflect": false

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

@@ -5,25 +5,37 @@ export function StatContainerView(props, children) {
     const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
     return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
   };
-  // Dependent on props, not feasiable to move out
+  // take alignment variable and convert it to CSS flexbox alignment
+  const alignment = props.alignment === "center"
+    ? "center"
+    : props.alignment === "right"
+      ? "flex-end"
+      : "flex-start";
+  // Dependent on props, not feasible to move out
   const style = {
     StatContainer: {
       width: "100%",
-      display: props.display || "grid",
-      "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))",
-      gap: divideSpace(),
-      // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: alignment,
+      flexDirection: "row",
+      gap: `var(--sl-spacing-${props.gap})`,
+      // Apply border styles conditionally based on the hideBorder prop
       "& > *": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "1px solid var(--sqm-text-subdued)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
         "border-right": "none",
       },
       "& > ::slotted(*)": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "1px solid var(--sqm-text-subdued)",
         "padding-right": divideSpace(),
-        height: "100%",
       },
       "& > ::slotted(*:last-child)": {
         "border-right": "none",

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

@@ -21,12 +21,29 @@ export class StatContainer {
      */
     this.space = "xxx-large";
     /**
+     * @undocumented
      * @uiName Display
      * @uiType string
      * @uiEnum ["grid", "flex"]
      * @uiEnumNames ["Grid", "Flex"]
      */
-    this.display = "grid";
+    this.display = "flex";
+    /**
+     * Controls the alignment of the flexbox
+     *
+     * @uiName Alignment
+     * @uiType string
+     * @uiEnum ["left", "right", "center"]
+     * @uiEnumNames ["Left", "Right", "Center"]
+     */
+    this.alignment = "center";
+    /**
+     * @uiName Gap
+     * @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"]
+     */
+    this.gap = "x-large";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -84,6 +101,9 @@ export class StatContainer {
       "optional": false,
       "docs": {
         "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
             "text": "Display",
             "name": "uiName"
           }, {
@@ -100,7 +120,95 @@ export class StatContainer {
       },
       "attribute": "display",
       "reflect": false,
-      "defaultValue": "\"grid\""
+      "defaultValue": "\"flex\""
+    },
+    "hideBorder": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide border",
+            "name": "uiName"
+          }, {
+            "text": "boolean",
+            "name": "uiType"
+          }],
+        "text": "Hide the seperating border between stats"
+      },
+      "attribute": "hide-border",
+      "reflect": false
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"right\" | \"center\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Alignment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"left\", \"right\", \"center\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Right\", \"Center\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": "Controls the alignment of the flexbox"
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "\"center\""
+    },
+    "gap": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Gap",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "\"x-large\""
     }
   }; }
   static get states() { return {