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

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

@@ -1,13 +1,15 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
+import deepmerge from "deepmerge";
 import { getProps } from "../../utils/utils";
 import { useBigStat } from "../sqm-big-stat/useBigStat";
 import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
 import { TaskCardView } from "./sqm-task-card-view";
+import { useTaskCard } from "./useTaskCard";
 /**
  * @uiName Task Card
- * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab"]
+ * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
  */
 export class TaskCard {
   constructor() {
@@ -15,7 +17,7 @@ export class TaskCard {
     /**
      * @uiName Reward Amount
      */
-    this.rewardAmount = 0;
+    this.rewardAmount = "0";
     /**
      * @uiName Reward Unit
      */
@@ -27,13 +29,15 @@ export class TaskCard {
     /**
      * @uiName Description Text
      */
-    this.description = "Description Text";
+    this.description = "";
     /**
      * @uiName Goal Repeatable
      */
     this.repeatable = false;
     /**
-     * @uiName Repeat Amount (0 for no limit)
+     * The number of times a reward can be earned.  Use zero for no limit (the default).
+     *
+     * @uiName Repeat Amount
      */
     this.finite = 0;
     /**
@@ -49,15 +53,31 @@ export class TaskCard {
      */
     this.steps = false;
     /**
-     * @uiName Show Goal Expiry
+     * @uiName Progress Bar Unit
+     */
+    this.progressBarUnit = "";
+    /**
+     * @uiName Expiry Date Message
+     */
+    this.expiryMessage = "Ends {endDate}";
+    /**
+     * Shown to users before the start of the task duration.
+     *
+     * @uiName Start Date Message
      */
-    this.showExpiry = false;
+    this.startsOnMessage = "Starts {startDate}";
     /**
-     * @uiName Reward Duration
-     * @uiWidget DateRange
-     * @uiOptions {"allowPastDates":true, "months": 1}
+     * Shown to users after the end of the task duration.
+     *
+     * @uiName Ended Date Message
+     */
+    this.endedMessage = "Ended {endDate}";
+    /**
+     * Displays the amount of times that a user has completed a repeatable task.
+     *
+     * @uiName Completed Count Text
      */
-    this.rewardDuration = "/";
+    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
     /**
      * @uiName CTA Button Text
      */
@@ -82,20 +102,29 @@ export class TaskCard {
   }
   disconnectedCallback() { }
   render() {
-    const { props } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
-    const { value, statvalue } = props;
-    console.log(props, isDemo());
-    return (h(TaskCardView, Object.assign({ progress: value, loading: !isDemo() && value === undefined }, getProps(this))));
+    const { props } = isDemo()
+      ? useDemoBigStat(this)
+      : useBigStat({ ...getProps(this), programId: this.programId });
+    const { value, loading } = props;
+    const { states, callbacks } = isDemo()
+      ? useTaskCardDemo(this)
+      : useTaskCard(this);
+    return (h(TaskCardView, { callbacks: callbacks, states: {
+        loading,
+        loadingEvent: states.loadingEvent,
+        progress: value,
+        locale: states.locale,
+      }, content: { ...getProps(this) } }));
   }
   static get is() { return "sqm-task-card"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
     "rewardAmount": {
-      "type": "number",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -109,7 +138,7 @@ export class TaskCard {
       },
       "attribute": "reward-amount",
       "reflect": false,
-      "defaultValue": "0"
+      "defaultValue": "\"0\""
     },
     "rewardUnit": {
       "type": "string",
@@ -172,7 +201,7 @@ export class TaskCard {
       },
       "attribute": "description",
       "reflect": false,
-      "defaultValue": "\"Description Text\""
+      "defaultValue": "\"\""
     },
     "repeatable": {
       "type": "boolean",
@@ -207,10 +236,10 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Repeat Amount (0 for no limit)",
+            "text": "Repeat Amount",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "The number of times a reward can be earned.  Use zero for no limit (the default)."
       },
       "attribute": "finite",
       "reflect": false,
@@ -288,7 +317,7 @@ export class TaskCard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Progress Bar Unit",
@@ -297,28 +326,29 @@ export class TaskCard {
         "text": ""
       },
       "attribute": "progress-bar-unit",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"\""
     },
-    "showExpiry": {
-      "type": "boolean",
+    "expiryMessage": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Goal Expiry",
+            "text": "Expiry Date Message",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-expiry",
+      "attribute": "expiry-message",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"Ends {endDate}\""
     },
     "rewardDuration": {
       "type": "string",
@@ -344,8 +374,96 @@ export class TaskCard {
         "text": ""
       },
       "attribute": "reward-duration",
+      "reflect": false
+    },
+    "startsOnMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Start Date Message",
+            "name": "uiName"
+          }],
+        "text": "Shown to users before the start of the task duration."
+      },
+      "attribute": "starts-on-message",
+      "reflect": false,
+      "defaultValue": "\"Starts {startDate}\""
+    },
+    "displayDuration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Display Duration",
+            "name": "uiName"
+          }, {
+            "text": "DateRange",
+            "name": "uiWidget"
+          }, {
+            "text": "{\"allowPastDates\":true, \"months\": 1}",
+            "name": "uiOptions"
+          }],
+        "text": "Timeframe that the task card will be shown"
+      },
+      "attribute": "display-duration",
+      "reflect": false
+    },
+    "endedMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Ended Date Message",
+            "name": "uiName"
+          }],
+        "text": "Shown to users after the end of the task duration."
+      },
+      "attribute": "ended-message",
       "reflect": false,
-      "defaultValue": "\"/\""
+      "defaultValue": "\"Ended {endDate}\""
+    },
+    "completedText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Completed Count Text",
+            "name": "uiName"
+          }],
+        "text": "Displays the amount of times that a user has completed a repeatable task."
+      },
+      "attribute": "completed-text",
+      "reflect": false,
+      "defaultValue": "\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\""
     },
     "buttonText": {
       "type": "string",
@@ -436,9 +554,92 @@ export class TaskCard {
       "attribute": "stat-type",
       "reflect": false,
       "defaultValue": "\"/programGoals/count/Referral-Started%2Freferrals\""
+    },
+    "eventKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Event key of task card button",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "event-key",
+      "reflect": false
+    },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID override",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<TaskCardViewProps | BigStatViewProps>",
+        "resolved": "{}",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "TaskCardViewProps": {
+            "location": "import",
+            "path": "./sqm-task-card-view"
+          },
+          "BigStatViewProps": {
+            "location": "import",
+            "path": "../sqm-big-stat/sqm-big-stat-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }, {
+            "text": "object",
+            "name": "uiType"
+          }],
+        "text": ""
+      }
     }
   }; }
   static get states() { return {
     "ignored": {}
   }; }
 }
+function useTaskCardDemo(props) {
+  return deepmerge({
+    states: { loadingEvent: false, locale: "en" },
+    callbacks: {
+      sendEvent: (event) => console.log(event),
+      onClick: () => console.log("clicked"),
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-task-card/useTaskCard.js

@@ -0,0 +1,43 @@
+import { useMutation, useUserIdentity, useRefreshDispatcher, useLocale, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/stencil-hooks";
+import { gql } from "graphql-request";
+const SEND_EVENT = gql `
+  mutation taskCardEvent($userEventInput: UserEventInput!) {
+    logUserEvent(userEventInput: $userEventInput) {
+      userId
+    }
+  }
+`;
+export function useTaskCard(props) {
+  const user = useUserIdentity();
+  const locale = useLocale();
+  const [sendUserEvent, { data, loading: loadingEvent }] = useMutation(SEND_EVENT);
+  const { refresh } = useRefreshDispatcher();
+  useEffect(() => {
+    if (data) {
+      refresh();
+      openLink();
+    }
+  }, [data]);
+  function openLink() {
+    props.openNewTab
+      ? window.open(props.buttonLink)
+      : window.open(props.buttonLink, "_parent");
+  }
+  function sendEvent(eventKey) {
+    sendUserEvent({
+      userEventInput: {
+        userId: user === null || user === void 0 ? void 0 : user.id,
+        accountId: user === null || user === void 0 ? void 0 : user.accountId,
+        events: [{ key: eventKey, fields: {} }],
+      },
+    });
+  }
+  function onClick() {
+    props.eventKey ? sendEvent(props.eventKey) : openLink();
+  }
+  return {
+    states: { loadingEvent, locale },
+    callbacks: { sendEvent, onClick },
+  };
+}

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

@@ -1,52 +1,52 @@
 import { Component, h, State } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { insertCSS } from "../../insertcss";
-import debugFn from "debug";
-const debug = debugFn("sq:global");
-const textStyles = `
+// import { insertCSS } from "../../insertcss";
+// import debugFn from "debug";
+// const debug = debugFn("sq:global");
+const vanillaStyle = `
   sqm-text {
     display: block;
   }
 
   sqm-text h1 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: 600;
-    color: var(--sl-color-gray-800);
+    font-size: var(--sl-font-size-xxx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
     margin: 0;
   }
 
   sqm-text h2 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: 600;
-    color: var(--sl-color-gray-800);
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
     margin: 0;
   }
 
   sqm-text h3 {
-    font-size: var(--sl-font-size-large);
-    font-weight: 600;
-    color: var(--sl-color-gray-800);
+    font-size: var(--sl-font-size-x-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
     margin: 0;
   }
 
   sqm-text h4 {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--sl-color-gray-800);
+    font-size: var(--sl-font-size-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
     margin: 0;
   }
 
   sqm-text p {
-    font-size: var(--sl-font-size-small);
-    font-weight: 400;
-    color: var(--sl-color-gray-800);
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-800);
     margin: 0;
   }
 
   sqm-text p[light] {
-    font-size: var(--sl-font-size-x-small);
-    font-weight: 400;
-    color: var(--sl-color-gray-600);
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-600);
     margin: 0;
   }
 `;
@@ -60,15 +60,16 @@ export class Text {
   }
   disconnectedCallback() { }
   componentWillLoad() {
-    try {
-      insertCSS(textStyles);
-    }
-    catch (error) {
-      debug(error);
-    }
+    // try {
+    //   insertCSS(textStyles);
+    // } catch (error) {
+    //   debug(error);
+    // }
   }
   render() {
-    return h("slot", null);
+    return (h("div", null,
+      h("style", null, vanillaStyle),
+      h("slot", null)));
   }
   static get is() { return "sqm-text"; }
   static get states() { return {

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function TextSpanView(props, children) {
   const style = {
     p: {
@@ -40,8 +39,7 @@ export function TextSpanView(props, children) {
       margin: "0",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
     sqm-text-span {

package/dist/collection/components/sqm-timeline/SVGs.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+export const Gift = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("path", { d: "M22.5 7.5H18.6761H13.5V24H20.75C21.3023 24 21.75 23.5523 21.75 23V22.5V13.5H22.5H23C23.5523 13.5 24 13.0523 24 12.5V12V9V8.5C24 7.94772 23.5523 7.5 23 7.5H22.5Z", fill: "#F2C94C" }),
+  h("path", { d: "M2.25 22.5V23C2.25 23.5523 2.69772 24 3.25 24H10.5V7.5H6.96363H1.5H1C0.447715 7.5 0 7.94772 0 8.5V9V12V12.5C0 13.0523 0.447715 13.5 1 13.5H1.5H2.25V22.5Z", fill: "#F2C94C" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.25 13.5V15H21.75V13.5H2.25Z", fill: "#BE9720" }),
+  h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 4.06424C21 5.39348 19.0041 7.4062 18 7.5H13.5V24H10.5027V7.5H6.88188C4.8187 7.05273 3 5.46806 3 3.78109C3 2.1371 3.71404 0.835051 5.01276 0.273062C6.25382 -0.26398 7.68678 0.0304991 8.81964 0.817C10.2101 1.78237 10.9902 3.59446 11.6978 5.2384C11.7599 5.38268 11.8215 5.52566 11.8828 5.66667C11.9426 5.53298 12.0028 5.3969 12.0638 5.25912C12.7649 3.67422 13.5654 1.86488 14.9106 0.893444C16.0997 0.0347157 17.6114 -0.289736 18.9181 0.298417C20.2693 0.906596 21 2.3018 21 4.06424ZM15.9185 2.25C16.6392 1.72957 17.502 1.63518 18.2396 2.25C18.8819 2.78542 18.9162 3.03745 18.9987 3.64389L19.0133 3.75C19.0133 4.64776 18.2396 6 17.4659 6C16.9177 6 16.4871 5.99537 16.0836 5.99103C15.3479 5.98312 14.702 5.97618 13.5974 6C13.808 5.59179 13.9761 5.20003 14.1365 4.82641C14.5654 3.82715 14.9386 2.95763 15.9185 2.25ZM7.40792 2.25C7.05911 2.00783 6.25921 2.11591 5.92748 2.25945C5.65341 2.37805 5.24403 2.73987 5.24403 3.78109C5.24403 4.79286 6.88188 5.66667 6.88188 5.66667C6.88188 5.66667 8.18161 6 10.5027 6C9.71258 4.04177 8.59336 3.073 7.40792 2.25Z", fill: "#EB5757" })));
+export const Circle = () => (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("circle", { cx: "12", cy: "12", r: "9", fill: "currentColor", stroke: "currentColor", "stroke-width": "2" })));
+export const Line = () => (h("svg", { width: "4", height: "90", viewBox: "0 0 4 90", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+  h("line", { x1: "2", y1: "82", x2: "2", y2: "2", stroke: "currentColor", "stroke-width": "4", "stroke-linecap": "round" })));

package/dist/collection/components/sqm-timeline/Timeline.stories.js

@@ -0,0 +1,70 @@
+import { h } from "@stencil/core";
+import scenarioTimeline from "./sqm-timeline.feature";
+import scenarioTimelineEntry from "./sqm-timeline-entry.feature";
+const scenario = scenarioTimeline + scenarioTimelineEntry;
+export default {
+  title: "Components/Timeline",
+  parameters: {
+    scenario,
+  },
+};
+export const TimelineWith1Reward = () => {
+  return (h("div", null,
+    h("sqm-timeline", null,
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
+    h("br", null),
+    " ",
+    h("hr", null),
+    " ",
+    h("br", null),
+    h("sqm-timeline", { icon: "circle" },
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }))));
+};
+export const TimelineWith2Rewards = () => {
+  return (h("div", null,
+    h("sqm-timeline", null,
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
+    h("br", null),
+    " ",
+    h("hr", null),
+    " ",
+    h("br", null),
+    h("sqm-timeline", { icon: "circle" },
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }))));
+};
+export const TimelineWith3Rewards = () => {
+  return (h("div", null,
+    h("sqm-timeline", null,
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
+      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
+    h("br", null),
+    " ",
+    h("hr", null),
+    " ",
+    h("br", null),
+    h("sqm-timeline", { icon: "circle" },
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
+      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }))));
+};
+export const TimelineWith4Rewards = () => {
+  return (h("div", null,
+    h("sqm-timeline", null,
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
+      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
+      h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" })),
+    h("br", null),
+    " ",
+    h("hr", null),
+    " ",
+    h("br", null),
+    h("sqm-timeline", { icon: "circle" },
+      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
+      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
+      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
+      h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
+};