@saasquatch/mint-components 1.5.0-0 → 1.5.0-4

package/dist/cjs/sqm-program-explainer-step-view-74863815.js

@@ -0,0 +1,70 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+
+function ProgramExplainerStepView(props) {
+  const style = {
+    Container: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "444px",
+      color: props.color,
+      background: props.background,
+      padding: "24px",
+      "@media (max-width: 1024px)": {
+        flexDirection: "row",
+        width: "auto",
+        height: "auto",
+      },
+    },
+    Logo: {},
+    Text: {
+      "@media (max-width: 1024px)": {
+        marginLeft: "24px",
+      },
+    },
+    Title: {
+      fontSize: "16px",
+      fontWeight: "var(--sl-font-weight-bold)",
+      textTransform: "uppercase",
+      lineHeight: "24px",
+      marginTop: "24px",
+      "@media (max-width: 1024px)": {
+        margin: "0",
+      },
+    },
+    Description: {
+      fontSize: "16px",
+      lineHeight: "28px",
+      marginTop: "12px",
+      "@media (max-width: 1024px)": {
+        marginTop: "8px",
+      },
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  return (index.h("div", { class: sheet.classes.Container },
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: sheet.classes.Logo },
+      index.h("div", { style: {
+          width: "64px",
+          height: "64px",
+          borderRadius: "100%",
+          background: "#F4F5F7",
+          color: "var(--sl-color-primary-400)",
+          textAlign: "center",
+          lineHeight: "72px",
+        } },
+        index.h("div", { style: { fontSize: "26px" } },
+          index.h("sl-icon", { name: props.icon })))),
+    index.h("div", { class: sheet.classes.Text },
+      index.h("div", { class: sheet.classes.Title }, props.title),
+      index.h("div", { class: sheet.classes.Description }, props.description))));
+}
+
+exports.ProgramExplainerStepView = ProgramExplainerStepView;

package/dist/cjs/sqm-program-explainer-step.cjs.entry.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const _extends = require('./extends-0302d27d.js');
+require('./jss-preset-default.esm-6304d24f.js');
+const utils = require('./utils-95e5317c.js');
+const sqmProgramExplainerStepView = require('./sqm-program-explainer-step-view-74863815.js');
+
+const ProgramExplainerStep = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return index.h(sqmProgramExplainerStepView.ProgramExplainerStepView, Object.assign({}, utils.getProps(this)));
+  }
+};
+
+exports.sqm_program_explainer_step = ProgramExplainerStep;

package/dist/cjs/sqm-program-explainer-view-afed92f5.js

@@ -0,0 +1,45 @@
+'use strict';
+
+const index = require('./index-b0129cd6.js');
+const jssPresetDefault_esm = require('./jss-preset-default.esm-6304d24f.js');
+
+function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      "@media (max-width: 1024px)": {
+        flexDirection: "column",
+      },
+    },
+    Card: {
+      padding: "24px",
+      color: props.color,
+      background: props.background,
+    },
+    Title: {
+      fontSize: "28px",
+      lineHeight: "36px",
+      fontWeight: "700",
+    },
+    Description: {
+      fontSize: "16px",
+      lineHeight: "28px",
+      fontWeight: "400",
+      marginTop: "8px",
+    },
+  };
+  jssPresetDefault_esm.jss.setup(jssPresetDefault_esm.create());
+  const sheet = jssPresetDefault_esm.jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  return (index.h("div", null,
+    index.h("style", { type: "text/css" }, styleString),
+    index.h("div", { class: sheet.classes.Card },
+      index.h("div", { class: sheet.classes.Title }, props.header)),
+    index.h("div", { class: sheet.classes.Container }, children),
+    index.h("div", { class: sheet.classes.Card },
+      index.h("div", { class: sheet.classes.Title }, props.title),
+      index.h("div", { class: sheet.classes.Description }, props.description))));
+}
+
+exports.ProgramExplainerView = ProgramExplainerView;

package/dist/cjs/sqm-program-explainer.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b0129cd6.js');
+const _extends = require('./extends-0302d27d.js');
+require('./jss-preset-default.esm-6304d24f.js');
+const utils = require('./utils-95e5317c.js');
+const sqmProgramExplainerView = require('./sqm-program-explainer-view-afed92f5.js');
+
+const ProgramExplainer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ignored = true;
+    _extends.h$1(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (index.h(sqmProgramExplainerView.ProgramExplainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
+  }
+};
+
+exports.sqm_program_explainer = ProgramExplainer;

package/dist/cjs/sqm-share-code.cjs.entry.js

@@ -21,11 +21,18 @@ const MessageLinkQuery = index_module.dist.gql `
     }
   }
 `;
+const WIDGET_ENGAGEMENT_EVENT = index_module.dist.gql `
+  mutation loadEvent($eventMeta: UserAnalyticsEvent!) {
+    createUserAnalyticsEvent(eventMeta: $eventMeta)
+  }
+`;
 function useShareCode(props) {
   var _a, _b;
   const programId = index_module.M();
   const user = index_module.T();
+  const engagementMedium = index_module.x();
   const { data } = index_module.en(MessageLinkQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  const [sendLoadEvent] = index_module.be(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 : 
   // Shown during loading
   "...";
@@ -36,6 +43,18 @@ function useShareCode(props) {
     navigator.clipboard.writeText(shareString);
     setOpen(true);
     setTimeout(() => setOpen(false), props.tooltiplifespan);
+    sendLoadEvent({
+      eventMeta: {
+        programId,
+        id: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        type: "USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT",
+        meta: {
+          engagementMedium,
+          shareMedium: "DIRECT",
+        },
+      },
+    });
   }
   return { ...props, onClick, open, shareString };
 }

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
+    "./components/sqm-brand/sqm-brand.js",
     "./components/sqm-divided-layout/sqm-divided-layout.js",
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-form-message/sqm-form-message.js",
@@ -32,6 +33,8 @@
     "./components/sqm-portal-register/sqm-portal-register.js",
     "./components/sqm-portal-reset-password/sqm-portal-reset-password.js",
     "./components/sqm-portal-verify-email/sqm-portal-verify-email.js",
+    "./components/sqm-program-explainer/sqm-program-explainer.js",
+    "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",

package/dist/collection/components/sqm-brand/SqmBrand.stories.js

@@ -0,0 +1,93 @@
+import { h } from "@stencil/core";
+export default {
+  title: "Components/Brand",
+};
+const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
+  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h("sl-button", { type: "default" }, "Default"),
+    h("sl-button", { type: "primary" }, "Primary"),
+    h("sl-button", { type: "success" }, "Success"),
+    h("sl-button", { type: "neutral" }, "Neutral"),
+    h("sl-button", { type: "warning" }, "Warning"),
+    h("sl-button", { type: "danger" }, "Danger")),
+  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h("sl-badge", { type: "primary" }, "Primary"),
+    h("sl-badge", { type: "success" }, "Success"),
+    h("sl-badge", { type: "neutral" }, "Neutral"),
+    h("sl-badge", { type: "warning" }, "Warning"),
+    h("sl-badge", { type: "danger" }, "Danger")),
+  h("div", { class: "color-palette" },
+    h("div", { class: "color-palette__name" },
+      "Primary",
+      h("br", null),
+      h("code", null,
+        "--sl-color-primary-",
+        h("em", null, `{n}`))),
+    h("div", { style: { display: "flex", gap: "5px" } },
+      h(ColorSwatch, { depth: 50 }),
+      h(ColorSwatch, { depth: 100 }),
+      h(ColorSwatch, { depth: 200 }),
+      h(ColorSwatch, { depth: 300 }),
+      h(ColorSwatch, { depth: 400 }),
+      h(ColorSwatch, { depth: 500 }),
+      h(ColorSwatch, { depth: 600 }),
+      h(ColorSwatch, { depth: 700 }),
+      h(ColorSwatch, { depth: 800 }),
+      h(ColorSwatch, { depth: 900 }),
+      h(ColorSwatch, { depth: 950 })))));
+export const Examples = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#00FF00" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#0000FF" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#000000" },
+      h(SampleComponents, null))));
+};
+export const Nested = () => {
+  return (h("div", null,
+    "Default ",
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      "Red:",
+      h(SampleComponents, null),
+      h("sqm-brand", { "brand-color": "#00FF00" },
+        "Green:",
+        h(SampleComponents, null),
+        h("sqm-brand", { "brand-color": "#0000FF" },
+          "Blue:",
+          h(SampleComponents, null),
+          h("sqm-brand", { "brand-color": "#000000" },
+            "Black:",
+            h(SampleComponents, null)))))));
+};
+function ColorSwatch({ depth }) {
+  return (h("div", { style: {
+      backgroundColor: `var(--sl-color-primary-${depth})`,
+      color: `var(--sl-color-neutral-${1000 - depth})`,
+      width: "50px",
+      height: "50px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    } }, depth));
+}
+export const Fonts = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-font": "Roboto" },
+      "Roboto",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Open Sans" },
+      "Open Sans",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Lato" },
+      "Lato",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Oswald" },
+      "Oswald",
+      h(SampleComponents, null))));
+};

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

@@ -0,0 +1,97 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { Component, h, Host, Prop } from "@stencil/core";
+import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
+import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
+/**
+ *
+ * @uiName Big Stat
+ * @slot the description of the component
+ */
+export class BrandComponent {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a, _b;
+    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "inherit";
+    const css = autoColorScaleCss(brandColor);
+    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "").trim() || undefined;
+    useEffect(() => {
+      if (!sanitizedFont) {
+        // Nothing required in default case.
+        return;
+      }
+      const sheet = document.createElement("link");
+      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("rel", "stylesheet");
+      document.head.appendChild(sheet);
+      return () => document.head.removeChild(sheet);
+    }, [sanitizedFont]);
+    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "inherit";
+    return (h(Host, null,
+      h("style", null, `
+          :host{
+            display: contents;
+          }
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
+          ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+
+            ${css}
+          }`),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-brand"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "brandColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Color",
+            "name": "uiName"
+          }],
+        "text": "Controls the primary brand color used in the Mint Components library. Note that this\r\ndoes not affect vanilla components or other component libraries."
+      },
+      "attribute": "brand-color",
+      "reflect": false
+    },
+    "brandFont": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Font",
+            "name": "uiName"
+          }],
+        "text": "The brand font that you want to use"
+      },
+      "attribute": "brand-font",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-program-explainer/ProgramExplainer.stories.js

@@ -0,0 +1,49 @@
+import { h } from "@stencil/core";
+import { ProgramExplainerView } from "./sqm-program-explainer-view";
+import { ProgramExplainerStepView } from "../sqm-program-explainer-step/sqm-program-explainer-step-view";
+export default {
+  title: "Components/Program Explainer",
+};
+const props = {
+  header: "Klip Rewards",
+  title: "Earn rewards with our loyalty program",
+  description: "Earn points by completing tasks like uploading your first video or sharing videos with friends. Use your points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America.",
+  color: "black",
+  background: "#F3F0EC",
+};
+const steps1 = {
+  title: "Invite your friends to Klip",
+  description: "Earn up to $1200 in rewards for each referral",
+  color: "white",
+  background: "#5B3EDA",
+  icon: "person-plus-fill",
+};
+const steps2 = {
+  title: "If your friend signs up for a Klip Business plan",
+  description: "Get a $50 VISA giftcard when they pay for their first month",
+  color: "black",
+  background: "#F3CC66",
+  icon: "server",
+};
+const steps3 = {
+  title: "If your friend signs up for a Klip Enterprise plan",
+  description: "Get up to $1200 in rewards - a $200 VISA giftcard when our sales team qualifies them as a good fit for Klip, and a $1000 VISA giftcard when they become a paying customer",
+  color: "black",
+  background: "#D3CCF5",
+  icon: "people-fill",
+};
+export const OneStep = () => {
+  return (h(ProgramExplainerView, Object.assign({}, props),
+    h(ProgramExplainerStepView, Object.assign({}, steps1))));
+};
+export const TwoSteps = () => {
+  return (h(ProgramExplainerView, Object.assign({}, props),
+    h(ProgramExplainerStepView, Object.assign({}, steps1)),
+    h(ProgramExplainerStepView, Object.assign({}, steps2))));
+};
+export const ThreeSteps = () => {
+  return (h(ProgramExplainerView, Object.assign({}, props),
+    h(ProgramExplainerStepView, Object.assign({}, steps1)),
+    h(ProgramExplainerStepView, Object.assign({}, steps2)),
+    h(ProgramExplainerStepView, Object.assign({}, steps3))));
+};

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+export function ProgramExplainerView(props, children) {
+  const style = {
+    Container: {
+      display: "flex",
+      "@media (max-width: 1024px)": {
+        flexDirection: "column",
+      },
+    },
+    Card: {
+      padding: "24px",
+      color: props.color,
+      background: props.background,
+    },
+    Title: {
+      fontSize: "28px",
+      lineHeight: "36px",
+      fontWeight: "700",
+    },
+    Description: {
+      fontSize: "16px",
+      lineHeight: "28px",
+      fontWeight: "400",
+      marginTop: "8px",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.Card },
+      h("div", { class: sheet.classes.Title }, props.header)),
+    h("div", { class: sheet.classes.Container }, children),
+    h("div", { class: sheet.classes.Card },
+      h("div", { class: sheet.classes.Title }, props.title),
+      h("div", { class: sheet.classes.Description }, props.description))));
+}

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -0,0 +1,131 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { ProgramExplainerView } from "./sqm-program-explainer-view";
+/**
+ * @uiName Program Explainer
+ */
+export class ProgramExplainer {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(ProgramExplainerView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-program-explainer"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "title": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "title",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Description",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": ""
+      },
+      "attribute": "background",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-program-explainer-step/ProgramExplainerStep.stories.js

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view";
+export default {
+  title: "Components/Program Explainer Step",
+};
+export const Example1 = () => {
+  const props = {
+    title: "Invite your friends to Klip",
+    description: "Earn up to $1200 in rewards for each referral",
+    color: "white",
+    background: "#5B3EDA",
+    icon: "person-plus-fill",
+  };
+  return h(ProgramExplainerStepView, Object.assign({}, props));
+};
+// export const ActiveItem = () => {
+//   const props = {
+//     title: "hello",
+//     description: "world",
+//   };
+//   return <ProgramExplainerStepView {...props} />;
+// };