@saasquatch/mint-components 1.6.8-9 → 1.6.8

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 { CopyTextView } from "../views/copy-text-view";
+import { ShareLinkView } from "./sqm-share-link-view";
 import { useShareLink } from "./useShareLink";
 import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
@@ -24,30 +24,6 @@ export class ShareLink {
      * @uiName Tooltip Lifespan
      */
     this.tooltiplifespan = 1000;
-    /**
-     * Change the text alignment
-     *
-     * @uiName Align text
-     * @uiType string
-     * @uiEnum ["left", "center"]
-     * @uiEnumNames ["left", "center"]
-     */
-    this.textAlign = "left";
-    /**
-     * Set copy button label
-     *
-     * @uiName Copy button label
-     */
-    this.copyButtonLabel = "Copy Link";
-    /**
-     * Set the copy button style
-     *
-     * @uiName Copy button style
-     * @uiType string
-     * @uiEnum ["icon", "button inside", "button outside", "button below"]
-     * @uiEnumNames ["icon", "button inside", "button outside", "button below"]
-     */
-    this.buttonStyle = "icon";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -56,7 +32,7 @@ export class ShareLink {
     const props = isDemo()
       ? useDemoShareLink(thisProps)
       : useShareLink(thisProps);
-    return h(CopyTextView, Object.assign({}, props));
+    return h(ShareLinkView, Object.assign({}, props));
   }
   static get is() { return "sqm-share-link"; }
   static get encapsulation() { return "shadow"; }
@@ -126,101 +102,20 @@ 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": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"left\", \"center\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"left\", \"center\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Change the text alignment"
-      },
-      "attribute": "text-align",
-      "reflect": false,
-      "defaultValue": "\"left\""
-    },
-    "copyButtonLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Copy button label",
-            "name": "uiName"
-          }],
-        "text": "Set copy button label"
-      },
-      "attribute": "copy-button-label",
-      "reflect": false,
-      "defaultValue": "\"Copy Link\""
-    },
-    "buttonStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"icon\" | \"button inside\" | \"button outside\" | \"button below\"",
-        "resolved": "\"button below\" | \"button inside\" | \"button outside\" | \"icon\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Copy button style",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"icon\", \"button inside\", \"button outside\", \"button below\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"icon\", \"button inside\", \"button outside\", \"button below\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": "Set the copy button style"
-      },
-      "attribute": "copy-button-style",
-      "reflect": false,
-      "defaultValue": "\"icon\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"center\"; buttonStyle?: \"icon\" | \"button inside\" | \"button outside\" | \"button below\"; error?: boolean; errorText?: string; onClick?: () => void; }",
+        "original": "DemoData<ShareLinkViewProps>",
+        "resolved": "{ disabled?: boolean; onClick?: () => void; shareString?: string; open?: boolean; tooltiptext?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "CopyTextViewProps": {
+          "ShareLinkViewProps": {
             "location": "import",
-            "path": "../views/copy-text-view"
+            "path": "./sqm-share-link-view"
           }
         }
       },
@@ -241,18 +136,15 @@ export class ShareLink {
 }
 function useDemoShareLink(props) {
   const [open, setOpen] = useState(false);
-  const copyString = "https://www.example.com/sharelink/abc";
+  const shareString = "https://www.example.com/sharelink/abc";
   return deepmerge({
-    copyString: copyString,
+    shareString,
     tooltiptext: props.tooltiptext,
-    textAlign: props.textAlign,
-    buttonStyle: props.buttonStyle,
-    copyButtonLabel: props.copyButtonLabel,
     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(copyString);
+      navigator.clipboard.writeText(shareString);
       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 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 : 
+  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 : 
   // 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(copyString);
+    navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
     sendLoadEvent({
@@ -45,5 +45,5 @@ export function useShareLink(props) {
       },
     });
   }
-  return { ...props, onClick, open, copyString: copyString };
+  return { ...props, onClick, open, shareString };
 }

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

@@ -45,9 +45,9 @@ export function StatContainerView(props, children) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.StatFrame, part: "sqm-stat-container-frame" },
-    h("div", { class: sheet.classes.StatContainer, part: "sqm-stat-container" },
+  return (h("div", { class: sheet.classes.StatFrame },
+    h("div", { class: sheet.classes.StatContainer },
       h("style", { type: "text/css" }, styleString),
       children),
-    h("div", { class: sheet.classes.BorderFix, part: "sqm-stat-container-border" })));
+    h("div", { class: sheet.classes.BorderFix })));
 }

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")};
+}
+
 `;

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

@@ -69,10 +69,6 @@ import * as TitledSection from "../sqm-titled-section/TitledSection.stories";
 import * as Scroll from "../sqm-scroll/Scroll.stories";
 import * as Tabs from "../sqm-tabs/Tabs.stories";
 import * as ShareCode from "../sqm-share-code/ShareCode.stories";
-import * as EmailRegistration from "../views/EmailRegistration.stories";
-import * as CouponCode from "../sqm-coupon-code/CouponCode.stories";
-import * as UserIdentifier from "../sqm-user-identifier/UserIdentifier.stories";
-import * as LinkButton from "../sqm-link-button/LinkButton.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -147,10 +143,6 @@ const stories = [
   Scroll,
   Tabs,
   ShareCode,
-  CouponCode,
-  UserIdentifier,
-  LinkButton,
-  EmailRegistration,
 ];
 /**
  * For internal documentation