@saasquatch/mint-components 1.6.7 → 1.6.8-1

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

@@ -72,7 +72,7 @@ export class ShareButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"facebook\"\n    | \"twitter\"\n    | \"email\"\n    | \"direct\"\n    | \"linkedin\"\n    | \"sms\"\n    | \"fbmessenger\"\n    | \"whatsapp\"\n    | \"linemessenger\"\n    | \"pinterest\"\n    | \"reminder\"\n    | \"unknown\"",
+        "original": "| \"facebook\"\r\n    | \"twitter\"\r\n    | \"email\"\r\n    | \"direct\"\r\n    | \"linkedin\"\r\n    | \"sms\"\r\n    | \"fbmessenger\"\r\n    | \"whatsapp\"\r\n    | \"linemessenger\"\r\n    | \"pinterest\"\r\n    | \"reminder\"\r\n    | \"unknown\"",
         "resolved": "\"direct\" | \"email\" | \"facebook\" | \"fbmessenger\" | \"linemessenger\" | \"linkedin\" | \"pinterest\" | \"reminder\" | \"sms\" | \"twitter\" | \"unknown\" | \"whatsapp\"",
         "references": {}
       },
@@ -95,7 +95,7 @@ export class ShareButton {
             "text": "[\"Facebook\", \"Twitter\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
             "name": "uiEnumNames"
           }],
-        "text": "The social medium to share on. Share messages and links\nwill be pulled from your program config and tagged for analytics."
+        "text": "The social medium to share on. Share messages and links\r\nwill be pulled from your program config and tagged for analytics."
       },
       "attribute": "medium",
       "reflect": false
@@ -239,7 +239,7 @@ export class ShareButton {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| \"primary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
+        "original": "| \"primary\"\r\n    | \"success\"\r\n    | \"info\"\r\n    | \"warning\"\r\n    | \"danger\"\r\n    | \"default\"\r\n    | \"text\"",
         "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
         "references": {}
       },
@@ -339,7 +339,7 @@ export class ShareButton {
             "text": "Icon",
             "name": "uiName"
           }],
-        "text": "Options available at https://shoelace.style/components/icon\n\nIcon used in button. Will try to select an icon based on the share medium if left empty."
+        "text": "Options available at https://shoelace.style/components/icon\r\n\r\nIcon used in button. Will try to select an icon based on the share medium if left empty."
       },
       "attribute": "icon",
       "reflect": false
@@ -437,7 +437,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; }",
+        "resolved": "{ loading?: boolean; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; pill?: boolean; type?: \"text\" | \"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",

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

@@ -1,23 +1,23 @@
 import { useEngagementMedium, useUserIdentity, useQuery, } from "@saasquatch/component-boilerplate";
 import { gql } from "graphql-request";
 import { useProgramId, getEnvironmentSDK, } from "@saasquatch/component-boilerplate";
-const MessageLinkQuery = gql `
-  query (
-    $programId: ID
-    $engagementMedium: UserEngagementMedium!
-    $shareMedium: ReferralShareMedium!
-  ) {
-    viewer {
-      ... on User {
-        messageLink(
-          programId: $programId
-          engagementMedium: $engagementMedium
-          shareMedium: $shareMedium
-        )
-        shareLink(programId: $programId, engagementMedium: $engagementMedium)
-      }
-    }
-  }
+const MessageLinkQuery = gql `
+  query (
+    $programId: ID
+    $engagementMedium: UserEngagementMedium!
+    $shareMedium: ReferralShareMedium!
+  ) {
+    viewer {
+      ... on User {
+        messageLink(
+          programId: $programId
+          engagementMedium: $engagementMedium
+          shareMedium: $shareMedium
+        )
+        shareLink(programId: $programId, engagementMedium: $engagementMedium)
+      }
+    }
+  }
 `;
 function NativeShare(props, directLink) {
   const title = props.sharetitle || "Share title";

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

@@ -12,6 +12,12 @@ export const ShareCode = () => {
 export const CustomTooltipText = () => {
   return h("sqm-share-code", { tooltiptext: "CUSTOM TOOLTIP TEXT" });
 };
+export const TextAlignCenter = () => {
+  return h("sqm-share-code", { textAlign: "center" });
+};
+export const CopyButton = () => {
+  return h("sqm-share-code", { isCopyIcon: false });
+};
 export const CustomTooltipDuration = () => {
-  return h("sqm-share-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" });
+  return (h("sqm-share-code", { tooltiplifespan: 5000, tooltiptext: "CUSTOM TOOLTIP TEXT" }));
 };

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

@@ -1,7 +1,7 @@
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import { isDemo } from "@saasquatch/component-boilerplate";
-import { ShareLinkView, } from "../sqm-share-link/sqm-share-link-view";
+import { CopyTextView } from "../views/copy-text-view";
 import { getProps } from "../../utils/utils";
 import { useShareCode } from "./useShareCode";
 import deepmerge from "deepmerge";
@@ -24,6 +24,18 @@ export class ShareCode {
      * @uiName Tooltip lifespan
      */
     this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName Align text
+     */
+    this.textAlign = "left";
+    /**
+     * Set copy button as icon
+     *
+     * @uiName Copy icon
+     */
+    this.isCopyIcon = true;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -32,7 +44,7 @@ export class ShareCode {
     const props = isDemo()
       ? useDemoShareCode(thisProps)
       : useShareCode(thisProps);
-    return h(ShareLinkView, Object.assign({}, props));
+    return h(CopyTextView, Object.assign({}, props));
   }
   static get is() { return "sqm-share-code"; }
   static get encapsulation() { return "shadow"; }
@@ -102,20 +114,62 @@ export class ShareCode {
       "reflect": false,
       "defaultValue": "1000"
     },
+    "textAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\"",
+        "resolved": "\"center\" | \"left\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Align text",
+            "name": "uiName"
+          }],
+        "text": "Change the text alignment"
+      },
+      "attribute": "text-align",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
+    "isCopyIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Copy icon",
+            "name": "uiName"
+          }],
+        "text": "Set copy button as icon"
+      },
+      "attribute": "is-copy-icon",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
+        "original": "DemoData<CopyTextViewProps>",
+        "resolved": "{ copyString?: string; open?: boolean; disabled?: boolean; tooltiptext?: string; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "ShareLinkViewProps": {
+          "CopyTextViewProps": {
             "location": "import",
-            "path": "../sqm-share-link/sqm-share-link-view"
+            "path": "../views/copy-text-view"
           }
         }
       },
@@ -136,15 +190,17 @@ export class ShareCode {
 }
 function useDemoShareCode(props) {
   const [open, setOpen] = useState(false);
-  const shareString = "SHARECODE001";
+  const copyString = "SHARECODE001";
   return deepmerge({
-    shareString,
+    copyString: copyString,
     tooltiptext: props.tooltiptext,
+    isCopyIcon: props.isCopyIcon,
+    textAlign: props.textAlign,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
       // Only if called from a user-initiated event
-      navigator.clipboard.writeText(shareString);
+      navigator.clipboard.writeText(copyString);
       setOpen(true);
       setTimeout(() => setOpen(false), props.tooltiplifespan);
     },

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

@@ -1,19 +1,19 @@
 import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-const MessageLinkQuery = gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        referralCode(programId: $programId)
-      }
-    }
-  }
+const MessageLinkQuery = gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        referralCode(programId: $programId)
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT = gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 export function useShareCode(props) {
   var _a, _b;
@@ -22,14 +22,14 @@ export function useShareCode(props) {
   const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
+  const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.referralCode) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = useState(false);
   function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
-    navigator.clipboard.writeText(shareString);
+    navigator.clipboard.writeText(copyString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
     sendLoadEvent({
@@ -45,5 +45,5 @@ export function useShareCode(props) {
       },
     });
   }
-  return { ...props, onClick, open, shareString };
+  return { ...props, onClick, open, copyString: copyString };
 }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ShareLinkView } from "./sqm-share-link-view";
+import { CopyTextView } from "../views/copy-text-view";
 import scenario from "./ShareLink.feature";
 export default {
   title: "Components/Share Link",
@@ -9,28 +9,34 @@ export default {
 };
 export const Default = () => {
   const props = {
-    shareString: "https://noah.example.com",
+    copyString: "https://noah.example.com",
     open: false,
     tooltiptext: "Copied!",
   };
-  return h(ShareLinkView, Object.assign({}, props));
+  return h(CopyTextView, Object.assign({}, props));
 };
 export const Tooltip = () => {
   const props = {
-    shareString: "https://noah.example.com",
+    copyString: "https://noah.example.com",
     tooltiptext: "Some text for the tooltip",
     open: true,
   };
-  return h(ShareLinkView, Object.assign({}, props));
+  return h(CopyTextView, Object.assign({}, props));
 };
 export const Disabled = () => {
   const props = {
-    shareString: "https://noah.example.com",
+    copyString: "https://noah.example.com",
     disabled: true,
     open: true,
     tooltiptext: "Copied!",
   };
-  return h(ShareLinkView, Object.assign({}, props));
+  return h(CopyTextView, Object.assign({}, props));
+};
+export const TextAlignCenter = () => {
+  return h("sqm-share-link", { textAlign: "center" });
+};
+export const CopyButton = () => {
+  return h("sqm-share-link", { isCopyIcon: false });
 };
 export const FullStack = () => {
   return h("sqm-share-link", null);

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

@@ -1,7 +1,7 @@
 import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import { ShareLinkView } from "./sqm-share-link-view";
+import { CopyTextView } from "../views/copy-text-view";
 import { useShareLink } from "./useShareLink";
 import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 export default {
@@ -39,11 +39,11 @@ export const BareBonesView = createHookStory(() => {
   return (h("div", null,
     "Sharelink:",
     " ",
-    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.shareString)));
+    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyString)));
 });
 export const RegularView = createHookStory(() => {
   setupGraphQL();
-  return (h(ShareLinkView, Object.assign({}, useShareLink({
+  return (h(CopyTextView, Object.assign({}, useShareLink({
     programId: "sam-partner-test-2",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -51,7 +51,7 @@ export const RegularView = createHookStory(() => {
 });
 export const FastTooltip = createHookStory(() => {
   setupGraphQL();
-  return (h(ShareLinkView, Object.assign({}, useShareLink({
+  return (h(CopyTextView, Object.assign({}, useShareLink({
     programId: "sam-partner-test-2",
     tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
     tooltiplifespan: 500,

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

@@ -1,7 +1,7 @@
 import { useState, withHooks } from "@saasquatch/stencil-hooks";
 import { Component, Prop, h } from "@stencil/core";
 import { isDemo } from "@saasquatch/component-boilerplate";
-import { ShareLinkView } from "./sqm-share-link-view";
+import { CopyTextView } from "../views/copy-text-view";
 import { useShareLink } from "./useShareLink";
 import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
@@ -24,6 +24,18 @@ export class ShareLink {
      * @uiName Tooltip Lifespan
      */
     this.tooltiplifespan = 1000;
+    /**
+     * Change the text alignment
+     *
+     * @uiName Align text
+     */
+    this.textAlign = "left";
+    /**
+     * Set copy button as icon
+     *
+     * @uiName Copy icon
+     */
+    this.isCopyIcon = true;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -32,7 +44,7 @@ export class ShareLink {
     const props = isDemo()
       ? useDemoShareLink(thisProps)
       : useShareLink(thisProps);
-    return h(ShareLinkView, Object.assign({}, props));
+    return h(CopyTextView, Object.assign({}, props));
   }
   static get is() { return "sqm-share-link"; }
   static get encapsulation() { return "shadow"; }
@@ -102,20 +114,62 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "1000"
     },
+    "textAlign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\"",
+        "resolved": "\"center\" | \"left\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Align text",
+            "name": "uiName"
+          }],
+        "text": "Change the text alignment"
+      },
+      "attribute": "text-align",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
+    "isCopyIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Copy icon",
+            "name": "uiName"
+          }],
+        "text": "Set copy button as icon"
+      },
+      "attribute": "is-copy-icon",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<ShareLinkViewProps>",
-        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
+        "original": "DemoData<CopyTextViewProps>",
+        "resolved": "{ copyString?: string; open?: boolean; disabled?: boolean; tooltiptext?: string; isCopyIcon?: boolean; textAlign?: \"left\" | \"center\"; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "ShareLinkViewProps": {
+          "CopyTextViewProps": {
             "location": "import",
-            "path": "./sqm-share-link-view"
+            "path": "../views/copy-text-view"
           }
         }
       },
@@ -136,15 +190,17 @@ export class ShareLink {
 }
 function useDemoShareLink(props) {
   const [open, setOpen] = useState(false);
-  const shareString = "https://www.example.com/sharelink/abc";
+  const copyString = "https://www.example.com/sharelink/abc";
   return deepmerge({
-    shareString,
+    copyString: copyString,
     tooltiptext: props.tooltiptext,
+    isCopyIcon: props.isCopyIcon,
+    textAlign: props.textAlign,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
       // Only if called from a user-initiated event
-      navigator.clipboard.writeText(shareString);
+      navigator.clipboard.writeText(copyString);
       setOpen(true);
       setTimeout(() => setOpen(false), props.tooltiplifespan);
     },

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

@@ -1,19 +1,19 @@
 import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
-const MessageLinkQuery = gql `
-  query ($programId: ID) {
-    user: viewer {
-      ... on User {
-        shareLink(programId: $programId)
-      }
-    }
-  }
+const MessageLinkQuery = gql `
+  query ($programId: ID) {
+    user: viewer {
+      ... on User {
+        shareLink(programId: $programId)
+      }
+    }
+  }
 `;
-const WIDGET_ENGAGEMENT_EVENT = gql `
-  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
-    createUserAnalyticsEvent(eventMeta: $eventMeta)
-  }
+const WIDGET_ENGAGEMENT_EVENT = gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
 `;
 export function useShareLink(props) {
   var _a, _b;
@@ -22,14 +22,14 @@ export function useShareLink(props) {
   const engagementMedium = useEngagementMedium();
   const { data } = useQuery(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
-  const shareString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
+  const copyString = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.shareLink) !== null && _b !== void 0 ? _b : 
   // Shown during loading
   "...";
   const [open, setOpen] = useState(false);
   function onClick() {
     // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
     // Only if called from a user-initiated event
-    navigator.clipboard.writeText(shareString);
+    navigator.clipboard.writeText(copyString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
     sendLoadEvent({
@@ -45,5 +45,5 @@ export function useShareLink(props) {
       },
     });
   }
-  return { ...props, onClick, open, shareString };
+  return { ...props, onClick, open, copyString: copyString };
 }

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

@@ -1,27 +1,27 @@
 import { h } from "@stencil/core";
-export const ResizerStylesheet = `
-
-:root{
-    --checker-color-1: #ffffff00;
-    --checker-color-2: #ffffff00;
-    --checker-size: 7px;
-    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
-}
-.resizer{
-    resize: horizontal;
-    border: 2px dashed gray;
-	margin: -2px;
-    padding: 12px;
-    height: fit-content;
-    overflow: hidden;
-	width: 100%;
-}
-
-.resizer{
-    background-color: var(--checker-color-2);
-    background-image: var(--checker-gradient), var(--checker-gradient);
-    background-position: 0 0, var(--checker-size) var(--checker-size);
-    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
-}
+export const ResizerStylesheet = `
+
+:root{
+    --checker-color-1: #ffffff00;
+    --checker-color-2: #ffffff00;
+    --checker-size: 7px;
+    --checker-gradient: linear-gradient(45deg, var(--checker-color-1) 25%, transparent 25%, transparent 75%, var(--checker-color-1) 75%);
+}
+.resizer{
+    resize: horizontal;
+    border: 2px dashed gray;
+	margin: -2px;
+    padding: 12px;
+    height: fit-content;
+    overflow: hidden;
+	width: 100%;
+}
+
+.resizer{
+    background-color: var(--checker-color-2);
+    background-image: var(--checker-gradient), var(--checker-gradient);
+    background-position: 0 0, var(--checker-size) var(--checker-size);
+    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
+}
 `;
 export const Resizer = (_, children) => (h("div", { class: "resizer" }, children));

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

@@ -11,34 +11,34 @@
  */
 import { autoColorScaleCss } from "./AutoColor";
 //
-export const Default = `
- // No CSS
+export const Default = `
+ // No CSS
 `;
-export const Orangey = `
-:root{
-    ${autoColorScaleCss("orange")}
-}
+export const Orangey = `
+:root{
+    ${autoColorScaleCss("orange")}
+}
 `;
-export const Netflix = `
-:root{
-    ${autoColorScaleCss("#e50914")}
-}
+export const Netflix = `
+:root{
+    ${autoColorScaleCss("#e50914")}
+}
 `;
-export const SaaSquatchCorporate = `
-:root{
-    ${autoColorScaleCss("#65bd60")}
-    --sl-font-sans: Arial;
-}
+export const SaaSquatchCorporate = `
+:root{
+    ${autoColorScaleCss("#65bd60")}
+    --sl-font-sans: Arial;
+}
 `;
-export const NYTimes = `
-:root{
-    ${autoColorScaleCss("black")}
-    --sl-font-sans: Georgia, 'Times New Roman', serif;
-}
+export const NYTimes = `
+:root{
+    ${autoColorScaleCss("black")}
+    --sl-font-sans: Georgia, 'Times New Roman', serif;
+}
 `;
-export const Klip = `
-:root{
-    ${autoColorScaleCss("#4225C4")};
-}
-
+export const Klip = `
+:root{
+    ${autoColorScaleCss("#4225C4")};
+}
+
 `;