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

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -8,6 +8,7 @@ import { useShareLink } from "./useShareLink";
 /**
  * @uiName Share Link
  * @exampleGroup Sharing
+ * @validParents ["sqm-portal-container", "sqm-titled-section", "div","sqm-hero","sqm-referral-card","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
  * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export class ShareLink {
@@ -31,19 +32,30 @@ export class ShareLink {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
      * @uiName Copy button label
      */
     this.copyButtonLabel = "Copy Link";
+    /**
+     * The type of the button that is used (primary or secondary).
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     /**
      * Set the copy button style and placement
      *
-     * @uiName Style
+     * @uiName Button style
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     withHooks(this);
@@ -147,6 +159,9 @@ export class ShareLink {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -175,6 +190,152 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"Copy Link\""
     },
+    "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
+    },
+    "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 that is used (primary or secondary)."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
     "buttonStyle": {
       "type": "string",
       "mutable": false,
@@ -187,7 +348,7 @@ export class ShareLink {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Style",
+            "text": "Button style",
             "name": "uiName"
           }, {
             "text": "string",
@@ -198,6 +359,9 @@ export class ShareLink {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -210,7 +374,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; 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; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: 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",
@@ -240,12 +404,18 @@ export class ShareLink {
 function useDemoShareLink(props) {
   const [open, setOpen] = useState(false);
   const copyString = "https://www.example.com/sharelink/abc";
+  console.log("Demo props", props);
   return deepmerge({
     copyString: copyString,
     tooltiptext: props.tooltiptext,
     textAlign: props.textAlign,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
+    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

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"
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
       },
       "& > :last-child": {
         "border-right": "none",
       },
       "& > ::slotted(*)": {
-        "border-right": "1px solid #EAEAEA",
+        "border-right": props.hideBorder
+          ? "none"
+          : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
         "padding-right": divideSpace(),
-        height: "100%",
       },
       "& > ::slotted(*:last-child)": {
         "border-right": "none",
@@ -38,7 +50,7 @@ export function StatContainerView(props, children) {
       display: "flex",
     },
     BorderFix: {
-      "border-right": "1px solid transparent",
+      "border-right": "var(--sqm-border-thickness) solid transparent",
       width: "0px",
       "margin-left": "-1px",
     },

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

@@ -4,6 +4,8 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"]
+ * @validChildren ["sqm-big-stat"]
  * @slots [{"name":"", "title":"Stats"}]
  * @exampleGroup Statistics
  * @example Container with Three Stats - <sqm-stat-container space="xxx-large" display="flex"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global"><p>Points Balance</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global"><p>Giftcards Earned</p></sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount"><p>Referrals</p></sqm-big-stat></sqm-stat-container>
@@ -19,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() { }
@@ -82,6 +101,9 @@ export class StatContainer {
       "optional": false,
       "docs": {
         "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
             "text": "Display",
             "name": "uiName"
           }, {
@@ -98,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 {

package/dist/collection/components/sqm-stencilbook/BrandSelector.js

@@ -0,0 +1,198 @@
+import { Component, h, Host, State } from "@stencil/core";
+import * as Themes from "./Themes";
+const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
+const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
+export class SqmBrandSelector {
+  constructor() {
+    this.selectedBrand = "Netflix";
+    this.brands = [
+      {
+        name: "Netflix",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803365/netflix_ftjbrr.png",
+      },
+      {
+        name: "Amazon",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803366/amazon_mc22fr.png",
+      },
+      {
+        name: "Spotify",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803510/spotify_j5qi1r.png",
+      },
+      {
+        name: "Google",
+        logoUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
+      },
+    ];
+    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+    const initialBrandName = storedBrand;
+    this.selectedBrand = initialBrandName;
+    // Initialize window.SquatchBrandingConfig based on the loaded brand
+    const initialConfig = Themes[initialBrandName] || Themes.Netflix;
+    window.SquatchBrandingConfig = initialConfig;
+    const event = new CustomEvent("brandingConfigUpdated", {
+      detail: window.SquatchBrandingConfig,
+    });
+    window.dispatchEvent(event);
+  }
+  componentDidLoad() {
+    const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+    const initialBrandName = storedBrand;
+    this.selectedBrand = initialBrandName;
+  }
+  disconnectedCallback() { }
+  updateBrand(brandName) {
+    this.selectedBrand = brandName;
+    const configToSet = Themes[brandName] || Themes.Netflix;
+    const brandConfigString = JSON.stringify(configToSet);
+    localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName);
+    localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString);
+    window.SquatchBrandingConfig = configToSet;
+    window.location.reload();
+    const event = new CustomEvent("brandingConfigUpdated", {
+      detail: window.SquatchBrandingConfig,
+    });
+    window.dispatchEvent(event);
+  }
+  render() {
+    return (h(Host, null,
+      h("style", null, `
+          @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+          :host {
+            display: block; /* Ensure the custom element itself is a block-level element */
+            font-family: 'Inter', sans-serif;
+          }
+
+          .card-container {
+            background-color: #fff !important; 
+            border-radius: 18px; 
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); 
+            width: 100%;
+            max-width: 350px;
+            overflow: hidden;
+            padding: 10px;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            z-index: 999999;
+            border: 1px solid #ccc;
+            margin: 10px;
+          }
+
+          .card-heading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding-bottom: 10px;
+            color: black;
+            margin: 0;
+            font-size: 16px;
+          }
+
+          .segmented-control-container {
+            display: flex;
+            background-color: #e5e7eb !important; 
+            border-radius: 9999px; 
+            padding: 0.25rem; 
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 28rem;
+            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); 
+          }
+
+          .brand-segment {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+            padding: 0px 8px; 
+            cursor: pointer;
+            transition: all 300ms ease-in-out;
+            border-radius: 9999px;
+            color: #4b5563; 
+            cursor: pointer;
+          }
+
+          .brand-segment:hover {
+            background-color: #f3f4f6 !important;
+          }
+
+          .brand-segment.active {
+            background-color: #fff !important;
+            color: #1f2937; 
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+          }
+
+          .brand-logo {
+            height: 40px;
+            width: 40px; 
+            object-fit: contain;
+          }
+
+          .brand-name {
+            font-size: 0.75rem; 
+            line-height: 1rem; 
+            font-weight: 600; 
+            color: #4b5563;
+          }
+
+          .brand-segment.active .brand-name {
+            color: #1f2937; 
+          }
+
+          .content-area {
+            padding: 2rem; 
+          }
+
+          .selected-text {
+            color: #4b5563; 
+            text-align: center;
+            font-size: 1.125rem; 
+            line-height: 1.75rem; 
+          }
+
+          .selected-brand-name {
+            font-weight: 700; /* font-bold */
+            color: #6d28d9; /* text-purple-700 */
+          }
+
+          .dynamic-content-box {
+            margin-top: 1.5rem; /* mt-6 */
+            padding: 1rem; /* p-4 */
+            background-color: #f9fafb; /* bg-gray-50 */
+            border-radius: 0.5rem; /* rounded-lg */
+            color: #374151; /* text-gray-700 */
+            font-size: 0.875rem; /* text-sm */
+            line-height: 1.25rem; /* text-sm */
+            font-style: italic;
+          }
+
+          /* Responsive adjustments for smaller screens if needed */
+          @media (max-width: 640px) {
+              .segmented-control-container {
+                  max-width: 100%; /* Allows it to take full width on small screens */
+                  padding: 0.15rem; /* Slightly less padding */
+              }
+              .brand-segment {
+                  padding-left: 0.5rem;
+                  padding-right: 0.5rem;
+              }
+              .brand-logo {
+                  height: 1.8rem; /* Slightly smaller on mobile */
+              }
+          }
+          `),
+      h("div", { class: "card-container" },
+        h("h2", { class: "card-heading" }, "Select Branding"),
+        h("div", { class: "segmented-control-container" }, this.brands.map((brand) => (h("div", { key: brand.name, class: `brand-segment ${this.selectedBrand === brand.name ? "active" : ""}`, onClick: () => this.updateBrand(brand.name) },
+          h("img", { src: brand.logoUrl, alt: `${brand.name} Logo`, class: "brand-logo", onError: (e) => {
+              e.target.src =
+                "https://placehold.co/80x40/cccccc/000000?text=Logo";
+            } }))))))));
+  }
+  static get is() { return "sqm-brand-selector"; }
+  static get states() { return {
+    "selectedBrand": {}
+  }; }
+}