@saasquatch/mint-components 1.15.0-5 → 1.15.0-51

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -24,15 +24,30 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
+// TODO: Figure out hover and active states
+// *::part(base):hover {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
+// *::part(base):focus {
+// 	border-color: ${
+//     props.backgroundcolor
+//       ? props.backgroundcolor
+//       : props.medium
+//       ? medium[props.medium].color
+//       : ""
+//   }!important;
+// }
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+	
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -47,21 +62,7 @@ export function ShareButtonView(props, children) {
 	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -71,7 +72,7 @@ export function ShareButtonView(props, children) {
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
-    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }

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

@@ -15,12 +15,12 @@ import deepmerge from "deepmerge";
  * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
  * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
  * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
+ * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
  * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
  * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
+ * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
  * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
+ * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
  * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {
@@ -28,8 +28,8 @@ export class ShareButton {
     /**
      * @uiType string
      * @uiName Button style
-     * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
-     * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
      */
     this.type = "default";
     /**
@@ -41,11 +41,13 @@ export class ShareButton {
     this.iconslot = "prefix";
     /**
      * @uiName Hide icon
+     * @uiGroup Style
      * @default
      */
     this.hideicon = false;
     /**
      * @uiName Hide text
+     * @uiGroup Style
      * @default
      */
     this.hidetext = false;
@@ -148,6 +150,9 @@ export class ShareButton {
         "tags": [{
             "text": "Border radius",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Configure border radius with pixel amount"
       },
@@ -174,12 +179,38 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
       "attribute": "backgroundcolor",
       "reflect": false
     },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": ""
+      },
+      "attribute": "border",
+      "reflect": false
+    },
     "textcolor": {
       "type": "string",
       "mutable": false,
@@ -200,6 +231,9 @@ export class ShareButton {
           }, {
             "text": "color",
             "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -220,6 +254,9 @@ export class ShareButton {
         "tags": [{
             "text": "Display pill",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -250,8 +287,8 @@ export class ShareButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"primary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
-        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
+        "original": "| \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
+        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text\" | \"warning\"",
         "references": {}
       },
       "required": false,
@@ -264,10 +301,10 @@ export class ShareButton {
             "text": "Button style",
             "name": "uiName"
           }, {
-            "text": "[\"primary\" , \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
+            "text": "[\"primary\", \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Primary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
+            "text": "[\"Primary\", \"Secondary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
             "name": "uiEnumNames"
           }],
         "text": ""
@@ -299,6 +336,9 @@ export class ShareButton {
           }, {
             "text": "[\"Small\", \"Medium\", \"Large\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -369,6 +409,9 @@ export class ShareButton {
         "tags": [{
             "text": "Hide icon",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -393,6 +436,9 @@ export class ShareButton {
         "tags": [{
             "text": "Hide text",
             "name": "uiName"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }, {
             "text": undefined,
             "name": "default"
@@ -490,7 +536,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"primary\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
+        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; border?: string; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"default\" | \"danger\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -32,6 +32,7 @@ export class ShareCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -45,8 +46,18 @@ export class ShareCode {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
+    /**
+     * 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";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -148,6 +159,9 @@ export class ShareCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -155,6 +169,90 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"left\""
     },
+    "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
+    },
+    "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
+    },
     "copyButtonLabel": {
       "type": "string",
       "mutable": false,
@@ -199,6 +297,9 @@ export class ShareCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -206,12 +307,74 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "\"icon\""
     },
+    "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\""
+    },
+    "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; 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",
@@ -247,6 +410,11 @@ function useDemoShareCode(props) {
     textAlign: props.textAlign,
     copyButtonLabel: props.copyButtonLabel,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    borderColor: props.borderColor,
+    buttonType: props.buttonType,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

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

@@ -64,6 +64,18 @@ export const CopyButtonBelow = () => {
     buttonStyle: "button-below",
   })));
 };
+export const CustomStyles = () => {
+  const props = {
+    copyString: "https://noah.example.com",
+    open: false,
+    tooltiptext: "Copied!",
+    backgroundColor: "#1ed760",
+    borderRadius: "30px",
+    textColor: "#121212",
+    buttonType: "primary",
+  };
+  return h(CopyTextView, Object.assign({}, props));
+};
 export const FullStack = () => {
   return h("sqm-share-link", null);
 };