@saasquatch/mint-components 1.6.2-17 → 1.6.2-18

package/dist/collection/components/sqm-program-menu/useProgramMenu.js

@@ -1,33 +1,33 @@
-import { useProgramId, useTick, useHost } from '@saasquatch/component-boilerplate';
-import { useRef, useEffect } from '@saasquatch/universal-hooks';
-import debugFn from 'debug';
-const debug = debugFn('sq:useProgramMenu');
-const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
-export function useProgramMenu(props) {
-  const programId = useProgramId();
-  const host = useHost();
-  debug({ programId, props });
-  const ref = useRef();
-  const [, rerender] = useTick();
-  useEffect(() => {
-    var _a;
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
-      const programId = e.detail.item.value;
-      // setProgramId(programId);
-      host.dispatchEvent(new CustomEvent(UPDATE_PROGRAM_EVENT, {
-        detail: programId,
-        bubbles: true,
-        composed: true,
-      }));
-    });
-  }, [ref.current]);
-  return {
-    data: {
-      programId,
-    },
-    callbacks: {
-      rerender,
-    },
-    ref,
-  };
-}
+import { useProgramId, useTick, useHost } from '@saasquatch/component-boilerplate';
+import { useRef, useEffect } from '@saasquatch/universal-hooks';
+import debugFn from 'debug';
+const debug = debugFn('sq:useProgramMenu');
+const UPDATE_PROGRAM_EVENT = 'sq:update-program-id';
+export function useProgramMenu(props) {
+  const programId = useProgramId();
+  const host = useHost();
+  debug({ programId, props });
+  const ref = useRef();
+  const [, rerender] = useTick();
+  useEffect(() => {
+    var _a;
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('sl-select', (e) => {
+      const programId = e.detail.item.value;
+      // setProgramId(programId);
+      host.dispatchEvent(new CustomEvent(UPDATE_PROGRAM_EVENT, {
+        detail: programId,
+        bubbles: true,
+        composed: true,
+      }));
+    });
+  }, [ref.current]);
+  return {
+    data: {
+      programId,
+    },
+    callbacks: {
+      rerender,
+    },
+    ref,
+  };
+}

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -1,79 +1,79 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-referral-card.feature";
-export default {
-  title: "Components/Referral Card",
-  parameters: {
-    scenario,
-  },
-};
-const media = (slot) => {
-  return (h("sqm-portal-container", { gap: "large", slot: slot },
-    h("sqm-hero-image", { header: "Get rewarded when your friend uses Klip", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000227/squatch-assets/IqB7GeS.png" })));
-};
-const sharebutton = (slot) => {
-  return (h("sqm-portal-container", { gap: "large", slot: slot },
-    h("sqm-text", null, "Choose how you want to share:"),
-    h("sqm-text", null,
-      h("sub", null, "Your unique referral link:"),
-      h("sqm-share-code", null)),
-    h("sqm-portal-container", { gap: "x-small" },
-      h("sqm-share-button", { medium: "email" }, "Share via email"),
-      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
-      h("sqm-share-button", { medium: "twitter" }, "Tweet about us"))));
-};
-const timeline = (slot, count) => {
-  return (h("sqm-timeline", { slot: slot, icon: "circle" },
-    count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
-    count > 1 && (h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
-    count > 2 && (h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
-    count > 3 && (h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
-};
-export const ImageAndShareButtons = () => {
-  return (h("sqm-referral-card", null,
-    media("left"),
-    sharebutton("right")));
-};
-export const TimelineAndShareButtons = () => {
-  return (h("sqm-referral-card", null,
-    timeline("left", 3),
-    sharebutton("right")));
-};
-export const StartAlignment = () => {
-  return (h("sqm-referral-card", { "vertical-alignment": "start" },
-    timeline("left", 4),
-    sharebutton("right")));
-};
-export const CenterAlignment = () => {
-  return (h("sqm-referral-card", { "vertical-alignment": "center" },
-    timeline("left", 4),
-    sharebutton("right")));
-};
-export const EndAlignment = () => {
-  return (h("sqm-referral-card", { "vertical-alignment": "end" },
-    timeline("left", 4),
-    sharebutton("right")));
-};
-export const FlippedSlots = () => {
-  return (h("sqm-referral-card", null,
-    timeline("right", 3),
-    sharebutton("left")));
-};
-export const ReferralCardGeneric = () => {
-  return (h("sqm-referral-card", { "vertical-alignment": "center" },
-    h("sqm-portal-container", { slot: "left", gap: "x-small" },
-      h("div", { style: {
-          padding: "100px",
-          border: "1px dashed black",
-          background: "#eee",
-          color: "#333",
-          textAlign: "center",
-        } }, "PLACEHOLDER")),
-    h("sqm-portal-container", { slot: "right", gap: "x-small" },
-      h("div", { style: {
-          padding: "100px",
-          border: "1px dashed black",
-          background: "#eee",
-          color: "#333",
-          textAlign: "center",
-        } }, "PLACEHOLDER"))));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-referral-card.feature";
+export default {
+  title: "Components/Referral Card",
+  parameters: {
+    scenario,
+  },
+};
+const media = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-hero-image", { header: "Get rewarded when your friend uses Klip", "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1644000227/squatch-assets/IqB7GeS.png" })));
+};
+const sharebutton = (slot) => {
+  return (h("sqm-portal-container", { gap: "large", slot: slot },
+    h("sqm-text", null, "Choose how you want to share:"),
+    h("sqm-text", null,
+      h("sub", null, "Your unique referral link:"),
+      h("sqm-share-code", null)),
+    h("sqm-portal-container", { gap: "x-small" },
+      h("sqm-share-button", { medium: "email" }, "Share via email"),
+      h("sqm-share-button", { medium: "facebook" }, "Share on Facebook"),
+      h("sqm-share-button", { medium: "twitter" }, "Tweet about us"))));
+};
+const timeline = (slot, count) => {
+  return (h("sqm-timeline", { slot: slot, icon: "circle" },
+    count > 0 && (h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
+    count > 1 && (h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
+    count > 2 && (h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
+    count > 3 && (h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
+};
+export const ImageAndShareButtons = () => {
+  return (h("sqm-referral-card", null,
+    media("left"),
+    sharebutton("right")));
+};
+export const TimelineAndShareButtons = () => {
+  return (h("sqm-referral-card", null,
+    timeline("left", 3),
+    sharebutton("right")));
+};
+export const StartAlignment = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "start" },
+    timeline("left", 4),
+    sharebutton("right")));
+};
+export const CenterAlignment = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "center" },
+    timeline("left", 4),
+    sharebutton("right")));
+};
+export const EndAlignment = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "end" },
+    timeline("left", 4),
+    sharebutton("right")));
+};
+export const FlippedSlots = () => {
+  return (h("sqm-referral-card", null,
+    timeline("right", 3),
+    sharebutton("left")));
+};
+export const ReferralCardGeneric = () => {
+  return (h("sqm-referral-card", { "vertical-alignment": "center" },
+    h("sqm-portal-container", { slot: "left", gap: "x-small" },
+      h("div", { style: {
+          padding: "100px",
+          border: "1px dashed black",
+          background: "#eee",
+          color: "#333",
+          textAlign: "center",
+        } }, "PLACEHOLDER")),
+    h("sqm-portal-container", { slot: "right", gap: "x-small" },
+      h("div", { style: {
+          padding: "100px",
+          border: "1px dashed black",
+          background: "#eee",
+          color: "#333",
+          textAlign: "center",
+        } }, "PLACEHOLDER"))));
+};

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

@@ -1,56 +1,56 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Container: {
-    display: "flex",
-    color: "var(--sl-color-neutral-900)",
-    background: "var(--sl-color-neutral-0)",
-    "& .left": {
-      boxSizing: "border-box",
-      width: "50%",
-      padding: "var(--sl-spacing-large)",
-      paddingRight: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        padding: "0",
-        marginBottom: "var(--sl-spacing-xx-large)",
-      },
-    },
-    "& .right": {
-      boxSizing: "border-box",
-      width: "50%",
-      padding: "var(--sl-spacing-large)",
-      paddingLeft: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        padding: "0",
-      },
-    },
-    border: "1px solid var(--sl-color-neutral-300)",
-    borderRadius: "var(--sl-border-radius-large)",
-    "@media (max-width: 499px)": {
-      flexDirection: "column",
-      border: "none",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-    :host{
-      display: block;   
-    }
-  `;
-export function ReferralCardView(props) {
-  return (h("div", null,
-    h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    h("div", { class: sheet.classes.Container },
-      h("div", { class: "left", style: {
-          alignSelf: props.verticalAlignment,
-        } }, props.slots.left),
-      h("div", { class: "right", style: {
-          alignSelf: props.verticalAlignment,
-        } }, props.slots.right))));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Container: {
+    display: "flex",
+    color: "var(--sl-color-neutral-900)",
+    background: "var(--sl-color-neutral-0)",
+    "& .left": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingRight: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        padding: "0",
+        marginBottom: "var(--sl-spacing-xx-large)",
+      },
+    },
+    "& .right": {
+      boxSizing: "border-box",
+      width: "50%",
+      padding: "var(--sl-spacing-large)",
+      paddingLeft: "var(--sl-spacing-medium)",
+      "@media (max-width: 499px)": {
+        width: "100%",
+        padding: "0",
+      },
+    },
+    border: "1px solid var(--sl-color-neutral-300)",
+    borderRadius: "var(--sl-border-radius-large)",
+    "@media (max-width: 499px)": {
+      flexDirection: "column",
+      border: "none",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+export function ReferralCardView(props) {
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container },
+      h("div", { class: "left", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.left),
+      h("div", { class: "right", style: {
+          alignSelf: props.verticalAlignment,
+        } }, props.slots.right))));
+}

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

@@ -1,69 +1,69 @@
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import { getProps } from "../../utils/utils";
-import { ReferralCardView } from "./sqm-referral-card-view";
-/**
- * @uiName Referral Card
- * @exampleGroup Referrals
- * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"}]
- * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
- */
-export class ReferralCard {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Vertical Aligment
-     * @uiType string
-     * @uiEnum ["start", "center", "end"]
-     * @uiEnumNames ["Top", "Center", "Bottom"]
-     */
-    this.verticalAlignment = "start";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const slots = {
-      left: h("slot", { name: "left" }),
-      right: h("slot", { name: "right" }),
-    };
-    return (h(ReferralCardView, Object.assign({}, getProps(this), { slots: slots }),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-referral-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "verticalAlignment": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"start\" | \"center\" | \"end\"",
-        "resolved": "\"center\" | \"end\" | \"start\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Vertical Aligment",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"start\", \"center\", \"end\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Top\", \"Center\", \"Bottom\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "vertical-alignment",
-      "reflect": false,
-      "defaultValue": "\"start\""
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ReferralCardView } from "./sqm-referral-card-view";
+/**
+ * @uiName Referral Card
+ * @exampleGroup Referrals
+ * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"}]
+ * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
+ */
+export class ReferralCard {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Vertical Aligment
+     * @uiType string
+     * @uiEnum ["start", "center", "end"]
+     * @uiEnumNames ["Top", "Center", "Bottom"]
+     */
+    this.verticalAlignment = "start";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const slots = {
+      left: h("slot", { name: "left" }),
+      right: h("slot", { name: "right" }),
+    };
+    return (h(ReferralCardView, Object.assign({}, getProps(this), { slots: slots }),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-referral-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "verticalAlignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"start\" | \"center\" | \"end\"",
+        "resolved": "\"center\" | \"end\" | \"start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Vertical Aligment",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"start\", \"center\", \"end\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Top\", \"Center\", \"Bottom\"]",
+            "name": "uiEnumNames"
+          }],
+        "text": ""
+      },
+      "attribute": "vertical-alignment",
+      "reflect": false,
+      "defaultValue": "\"start\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-referral-iframe/ReferralIframe.stories.js

@@ -1,29 +1,29 @@
-import { h } from "@stencil/core";
-import { ReferralIframeView, } from "./sqm-referral-iframe-view";
-import scenario from "../sqm-referral-iframe/sqm-referral-iframe.feature";
-export default {
-  title: "Components/Referral Iframe",
-  parameters: {
-    scenario,
-  },
-};
-const props = {
-  data: {
-    shareCode: "BOBBYREFER",
-  },
-  states: {
-    content: {
-      iframeSrc: "https://example.com",
-      iframeHeight: "100%",
-      iframeWidth: "100%",
-    },
-  },
-};
-export const ReferralIframe = () => {
-  return (h("div", { style: { width: "1000px", height: "1000px" } },
-    h(ReferralIframeView, Object.assign({}, props))));
-};
-export const ReferralIframeError = () => {
-  return (h("div", { style: { width: "1000px", height: "1000px" } },
-    h("sqm-referral-iframe", null)));
-};
+import { h } from "@stencil/core";
+import { ReferralIframeView, } from "./sqm-referral-iframe-view";
+import scenario from "../sqm-referral-iframe/sqm-referral-iframe.feature";
+export default {
+  title: "Components/Referral Iframe",
+  parameters: {
+    scenario,
+  },
+};
+const props = {
+  data: {
+    shareCode: "BOBBYREFER",
+  },
+  states: {
+    content: {
+      iframeSrc: "https://example.com",
+      iframeHeight: "100%",
+      iframeWidth: "100%",
+    },
+  },
+};
+export const ReferralIframe = () => {
+  return (h("div", { style: { width: "1000px", height: "1000px" } },
+    h(ReferralIframeView, Object.assign({}, props))));
+};
+export const ReferralIframeError = () => {
+  return (h("div", { style: { width: "1000px", height: "1000px" } },
+    h("sqm-referral-iframe", null)));
+};

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

@@ -1,29 +1,29 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function ReferralIframeView(props) {
-  const { states, data } = props;
-  const { content } = states;
-  // dependent on props
-  const style = {
-    Container: {
-      position: "relative",
-      width: content.iframeWidth,
-      height: content.iframeHeight,
-    },
-    IFrame: {
-      position: "absolute",
-      width: "100%",
-      height: "100%",
-      border: "0",
-      top: "0",
-      left: "0",
-      right: "0",
-    },
-  };
-  // JSS config
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function ReferralIframeView(props) {
+  const { states, data } = props;
+  const { content } = states;
+  // dependent on props
+  const style = {
+    Container: {
+      position: "relative",
+      width: content.iframeWidth,
+      height: content.iframeHeight,
+    },
+    IFrame: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      border: "0",
+      top: "0",
+      left: "0",
+      right: "0",
+    },
+  };
+  // JSS config
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("iframe", { class: sheet.classes.IFrame, src: `${content.iframeSrc}?rsCode=${data.shareCode}` })));
+}