@saasquatch/mint-components 1.15.0-7 → 1.15.0-9

package/dist/collection/components/sqm-referral-codes/ReferralCodes.stories.js

@@ -43,6 +43,12 @@ export const WithPreviouslyCopiedCode = () => {
     shareCodeWithPreviouslyCopied("shareCodes"),
     shareButtons("shareButtons")));
 };
+export const WithPreviouslyCopiedCodeAndCustomColor = () => {
+  return (h("sqm-referral-codes", { textColor: "red" },
+    pagination("pagination"),
+    shareCodeWithPreviouslyCopied("shareCodes"),
+    shareButtons("shareButtons")));
+};
 export const Empty = () => {
   return (h("sqm-referral-codes", { demoData: { states: { ...demoData.states, noCodes: true } } },
     pagination("pagination"),

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes-view.js

@@ -1,52 +1,52 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Wrapper: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-    gap: "var(--sl-spacing-large)",
-  },
-  HeaderContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%",
-  },
-  ShareCodeContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  ShareButtonContainer: {
-    width: "100%",
-    display: "flex",
-    alignItems: "flex-start",
-    justifyContent: "center",
-    flexDirection: "column",
-  },
-  TitleText: {
-    color: "var(--sqm-text-subdued)",
-    fontSize: "var(--sl-font-size-large)",
-    margin: "0",
-  },
-};
-const vanillaStyle = `
-:host {
-  display: block;
-}
-:host([hidden]): {
-  display: none;
-}
-`;
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 export function ReferralCodesView(props) {
-  const { slots, titleText, states } = props;
+  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
+  const style = {
+    Wrapper: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+      gap: "var(--sl-spacing-large)",
+      color: textColor,
+    },
+    HeaderContainer: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+    },
+    ShareCodeContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    ShareButtonContainer: {
+      width: "100%",
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      flexDirection: "column",
+    },
+    TitleText: {
+      fontSize: "var(--sl-font-size-large)",
+      margin: "0",
+    },
+  };
+  const vanillaStyle = `
+    :host {
+      display: block;
+    }
+    :host([hidden]): {
+      display: none;
+    }
+  `;
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const getSlotContent = (states) => {
     if (states.noCodes) {
       return slots.empty;

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -77,6 +77,32 @@ export class ReferralCodes {
       "reflect": false,
       "defaultValue": "\"Start sharing\""
     },
+    "textColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Text Color",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
     "emptyStateHeaderText": {
       "type": "string",
       "mutable": false,
@@ -168,7 +194,7 @@ export class ReferralCodes {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; textColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -212,6 +238,7 @@ function LoadingRow() {
 function useDemoReferralCodes(props) {
   return deepmerge({
     titleText: props.titleText,
+    textColor: props.textColor,
     states: {
       noCodes: false,
       loading: false,

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

@@ -248,7 +248,7 @@ export class ShareCode {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The border radius on the share link container"
+        "text": "The border radius on the share link container (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false
@@ -340,12 +340,41 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"primary\""
     },
+    "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 (default is set to 1px solid transparent)"
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "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; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: 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; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -384,6 +413,7 @@ function useDemoShareCode(props) {
     backgroundColor: props.backgroundColor,
     textColor: props.textColor,
     borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
     buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,

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

@@ -31,6 +31,7 @@ export class ShareLink {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -157,6 +158,9 @@ export class ShareLink {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -214,6 +218,35 @@ export class ShareLink {
       "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 (default is set to 1px solid transparent)"
+      },
+      "attribute": "border-color",
+      "reflect": false
+    },
     "textColor": {
       "type": "string",
       "mutable": false,
@@ -264,7 +297,7 @@ export class ShareLink {
             "text": "Style",
             "name": "uiGroup"
           }],
-        "text": "The border radius on the share link container"
+        "text": "The border radius on the share link container (in pixels)"
       },
       "attribute": "border-radius",
       "reflect": false
@@ -340,7 +373,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; backgroundColor?: string; textColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: 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; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -380,7 +413,7 @@ function useDemoShareLink(props) {
     borderRadius: props.borderRadius,
     buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
-    // borderColor: props.borderColor,
+    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

package/dist/collection/components/views/copy-text-view.js

@@ -36,7 +36,7 @@ export function CopyTextView(props) {
       "&::part(base)": {
         cursor: "pointer",
         overflow: "visible",
-        borderRadius: props.borderRadius || "var(--sl-border-radius-medium)",
+        borderRadius: `${props.borderRadius}px` || "var(--sl-border-radius-medium)",
         background: props.backgroundColor || "var(--sl-color-white)",
         border: `1px solid ${props.borderColor || "transparent"}`,
       },
@@ -72,7 +72,7 @@ export function CopyTextView(props) {
     },
     notificationTextStyle: {
       margin: "0",
-      color: "var(--sl-color-neutral-500)",
+      color: "inherit",
     },
   };
   const sheet = createStyleSheet(style);

package/dist/esm/{ShadowViewAddon-7c10e0ee.js → ShadowViewAddon-ccd5586b.js}

@@ -7,7 +7,7 @@ import { l as luxonLocale } from './utils-334c1e34.js';
 import { c as createStyleSheet, j as jss, a as create } from './JSS-67b5cff8.js';
 import { a as REFERRAL_CODES_NAMESPACE, S as SET_CODE_COPIED } from './useReferralCodes-8f75921a.js';
 import { H as HostBlock, A as AuthWrapper, a as AuthColumn, b as AuthButtonsContainer, E as ErrorStyles } from './mixins-83f90fa1.js';
-import { C as CopyTextView } from './copy-text-view-717050d5.js';
+import { C as CopyTextView } from './copy-text-view-0ac6e1d1.js';
 import { u as useChildElements } from './useChildElements-7945ae56.js';
 import { l as luxon } from './luxon-8d51c92b.js';
 import { T as TextSpanView } from './sqm-text-span-view-c577cc60.js';

package/dist/esm/{copy-text-view-717050d5.js → copy-text-view-0ac6e1d1.js}

@@ -37,7 +37,7 @@ function CopyTextView(props) {
       "&::part(base)": {
         cursor: "pointer",
         overflow: "visible",
-        borderRadius: props.borderRadius || "var(--sl-border-radius-medium)",
+        borderRadius: `${props.borderRadius}px` || "var(--sl-border-radius-medium)",
         background: props.backgroundColor || "var(--sl-color-white)",
         border: `1px solid ${props.borderColor || "transparent"}`,
       },
@@ -73,7 +73,7 @@ function CopyTextView(props) {
     },
     notificationTextStyle: {
       margin: "0",
-      color: "var(--sl-color-neutral-500)",
+      color: "inherit",
     },
   };
   const sheet = createStyleSheet(style);