@saasquatch/mint-components 1.3.2-1 → 1.3.2-5

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

@@ -3,9 +3,10 @@ import jss from "jss";
 import preset from "jss-preset-default";
 import { HostBlock } from "../../global/mixins";
 import * as SVGs from "./SVGs";
-// @ts-expect-error -- unused
-export function TaskCardView(props, children) {
-  const { points = 0, cardTitle = "Title Text", description = "Description Text", showProgressBar = false, progress = 0, goal = 1, repeatable = false, expire = false, dateExpire = "", buttonText = "Button Text", buttonLink = "www.example.com", } = props;
+import { ProgressBarView, } from "./progress-bar/progress-bar-view";
+export function TaskCardView(props) {
+  const { points, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpire, dateExpires, buttonText, buttonLink, loading, } = props;
+  console.log({ props });
   const checkmark_circle = SVGs.checkmark_circle();
   const arrow_left_right = SVGs.arrow_left_right();
   const style = {
@@ -48,6 +49,7 @@ export function TaskCardView(props, children) {
       },
       "& .text": {
         alignSelf: "end",
+        textTransform: "uppercase",
         color: "var(--sl-color-gray-600)",
         fontSize: "var(--sl-font-size-x-small)",
         lineHeight: "var(--sl-font-size-medium)",
@@ -60,11 +62,7 @@ export function TaskCardView(props, children) {
     },
     Footer: {
       display: "flex",
-      "& span": {
-        verticalAlign: "text-bottom",
-      },
       "& .icon": {
-        verticalAlign: "bottom",
         fontSize: "var(--sl-font-size-xx-small)",
         marginRight: "var(--sl-spacing-xx-small)",
       },
@@ -88,19 +86,18 @@ export function TaskCardView(props, children) {
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  // if showProgressBar is false: progress >= goal
-  // if true
   const showComplete = progress >= goal;
   const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
+  console.log({ showProgressBar, loading });
   return (h("div", { class: sheet.classes.TaskCard },
     h("div", { class: showComplete ? "main complete" : "main" },
       h("style", { type: "text/css" }, styleString),
       h("div", { class: sheet.classes.Header },
-        showComplete && (h("span", { class: "icon" }, checkmark_circle)),
+        showComplete && h("span", { class: "icon" }, checkmark_circle),
         h("span", { class: "value" }, points),
-        h("span", { class: "text" }, "SAASQUATCH POINTS")),
+        h("span", { class: "text" }, rewardUnit)),
       h("div", { class: sheet.classes.Title }, cardTitle),
-      showProgressBar && h(ProgressBar, Object.assign({}, props)),
+      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props))),
       h(Details, { description: description }),
       h("div", { class: sheet.classes.Footer },
         h("span", { class: "text" },
@@ -109,22 +106,17 @@ export function TaskCardView(props, children) {
             h("span", null,
               "Completed ",
               repetitions,
-              " times"),
-            h("br", null),
-            h("span", null,
-              "Earned ",
-              points * repetitions,
-              " SaaSquatch Points"))),
-          expire && (h("span", null,
-            h("br", null),
+              " times"))),
+          showExpire && (h("span", null,
             "Ends ",
             " ",
-            dateExpire))),
-        h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete }, showComplete ? "Complete" : buttonText)))));
+            dateExpires))),
+        h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete && repeatable == false }, showComplete && repeatable == false
+          ? "Task completed"
+          : buttonText)))));
 }
 function Details(props) {
   const style = {
-    HostBlock: HostBlock,
     Description: {
       "& input[type=checkbox]": {
         display: "none",
@@ -170,289 +162,3 @@ function Details(props) {
         h("sl-icon", { name: "chevron-down" })),
       h("span", { class: "summary" }, props.description))));
 }
-export function ProgressBar(props) {
-  const { goal, progress, steps, unit = "", repeatable } = props;
-  const gift1 = SVGs.gift();
-  const gift2 = SVGs.gift();
-  const gift3 = SVGs.gift();
-  // if progress and goal are not provided, there cannot be a progress bar
-  // if (!showProgressBar) return;
-  const items = [];
-  var columns = "";
-  var repetitions = Math.floor(progress / goal);
-  if (repeatable) {
-    if (steps) {
-      addStepsRepeatable();
-    }
-    else {
-      addLinearRepeatable();
-    }
-  }
-  // non repetable
-  else {
-    if (steps) {
-      addSteps();
-    }
-    else {
-      addLinear();
-    }
-  }
-  const style = {
-    HostBlock: HostBlock,
-    ProgressBar: {
-      "& .progress-bar": {
-        height: "20px",
-        marginTop: "var(--sl-spacing-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-        marginBottom: "var(--sl-spacing-large)",
-        fontSize: "var(--sl-font-size-x-small)",
-        display: "grid",
-        gridTemplateColumns: columns,
-        lineHeight: "45px",
-        userSelect: "none",
-      },
-      "& .progress-bar.repeatable-steps": {
-        marginLeft: "var(--sl-spacing-x-small)",
-      },
-      "& .filled:after": {
-        content: '""',
-        display: "flex",
-        width: "100%",
-        height: "4px",
-        borderRadius: "4px",
-        backgroundColor: "var(--sl-color-primary-500)",
-      },
-      "& .progress": {
-        display: "block",
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-      },
-      "& .progress::after": {
-        content: '""',
-        width: "12px",
-        height: "12px",
-        display: "flex",
-        backgroundColor: "var(--sl-color-primary-500)",
-        borderRadius: "50%",
-        position: "relative",
-        left: "47%",
-        top: "-85%",
-      },
-      "& .progress.bg:after": {
-        width: "0",
-        height: "0",
-        border: "none",
-      },
-      "& .empty": {
-        display: "block",
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-      },
-      "& .empty::after": {
-        content: '""',
-        width: "12px",
-        height: "12px",
-        border: "2px solid #E0E0E0",
-        margin: "-2px",
-        display: "flex",
-        backgroundColor: "white",
-        borderRadius: "50%",
-        position: "relative",
-        left: "47%",
-        top: "-85%",
-      },
-      "& .empty.bg:after": {
-        width: "0",
-        height: "0",
-        border: "none",
-      },
-      "& .remain:after": {
-        content: '""',
-        display: "flex",
-        width: "100%",
-        height: "4px",
-        borderRadius: "4px",
-        backgroundColor: "#E0E0E0",
-      },
-      "& .end.bw": {
-        filter: "grayscale(100%)",
-      },
-      "& .end.start": {
-        transform: "scale(80%)",
-        top: "-20px",
-      },
-      "& .end": {
-        textAlign: "center",
-        marginLeft: "-100px",
-        marginRight: "-100px",
-        position: "relative",
-        top: "-18px",
-        filter: goal <= progress ? "" : "grayscale(100%)",
-        zIndex: "1",
-      },
-    },
-  };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.ProgressBar },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: repetitions > 1 ? "progress-bar repeatable-steps" : "progress-bar" }, items)));
-  function addLinear() {
-    columns =
-      Math.min(Math.max(progress / goal, 0), 1) +
-        "fr 0fr " +
-        Math.min(Math.max(1 - progress / goal, 0), 1) +
-        "fr 0fr";
-    items.push(h("div", { class: "filled" }));
-    items.push(h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
-    items.push(h("div", { class: "remain" }));
-    items.push(h("div", { class: "end" }, gift1));
-  }
-  function addSteps() {
-    let step_math = steps / goal;
-    for (let i = 1; i < goal; i += steps) {
-      columns += step_math + "fr 0fr ";
-      if (i > progress) {
-        items.push(h("div", { class: "remain" }));
-        items.push(h("div", { class: "empty" }, unit + i));
-      }
-      else {
-        items.push(h("div", { class: "filled" }));
-        items.push(h("div", { class: "progress" }, unit + i));
-      }
-    }
-    columns += step_math + "fr 0fr ";
-    // reward success
-    if (goal <= progress) {
-      columns += "0fr ";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "progress bg" }, unit + goal));
-      items.push(h("div", { class: "end" }, gift1));
-    }
-    // reward fail
-    else {
-      columns += "0fr ";
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "empty bg" }, unit + goal));
-      items.push(h("div", { class: "end" }, gift1));
-    }
-  }
-  function addLinearRepeatable() {
-    let position = progress % goal;
-    let remainder = (position / goal) * 0.5;
-    let repetitions = Math.floor(progress / goal);
-    // 0 repetition
-    if (repetitions == 0) {
-      columns = remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr 0.5fr 0fr";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "end" }, gift1));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "end bw" }, gift2));
-    }
-    // single repetition
-    else if (repetitions == 1) {
-      columns =
-        "0.5fr 0fr " + remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr";
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "end" }, gift1));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal ? "progress bg" : "progress" }, unit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "end bw" }, gift2));
-    }
-    // multiple repetitions
-    else {
-      columns =
-        "0fr 0.5fr 0fr " + remainder + "fr 0fr " + (0.5 - remainder) + "fr 0fr";
-      items.push(h("div", { class: "end start" }, gift1));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: "end" }, gift2));
-      items.push(h("div", { class: "filled" }));
-      items.push(h("div", { class: progress == goal * repetitions ? "progress bg" : "progress" }, unit + progress));
-      items.push(h("div", { class: "remain" }));
-      items.push(h("div", { class: "end bw" }, gift3));
-    }
-  }
-  function addStepsRepeatable() {
-    let repetitions = Math.floor(progress / goal);
-    // no or single repetition
-    if (repetitions < 2) {
-      let step_math = steps / goal;
-      for (let i = 1; i < goal * 2 + 1; i += steps) {
-        columns += step_math + "fr 0fr ";
-        if (i > progress) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, unit + goal));
-            items.push(h("div", { class: "end bw" }, gift1));
-          }
-          else if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, unit + (goal * 2)));
-            items.push(h("div", { class: "end bw" }, gift2));
-          }
-          else {
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, unit + i));
-          }
-        }
-        else if (i == goal) {
-          columns += "0fr ";
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress bg" }, unit + i));
-          items.push(h("div", { class: "end" }, gift3));
-        }
-        else {
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress" }, unit + i));
-        }
-      }
-    }
-    // case repetition many
-    else {
-      let position = (progress % goal) + goal;
-      let step_math = steps / goal;
-      columns += "0fr 0fr ";
-      items.push(h("div", { class: "progress bg" }, unit + goal * (repetitions - 1)));
-      items.push(h("div", { class: "end start" }, gift1));
-      for (let i = 1; i < goal * 2 + 1; i += steps) {
-        columns += step_math + "fr 0fr ";
-        if (i <= goal) {
-          if (i == goal) {
-            columns += "0fr ";
-            items.push(h("div", { class: "filled" }));
-            items.push(h("div", { class: "progress bg" }, unit + (i + goal * (repetitions - 1))));
-            items.push(h("div", { class: "end" }, gift2));
-          }
-          else {
-            items.push(h("div", { class: "filled" }));
-            items.push(h("div", { class: "progress" }, unit + (i + goal * (repetitions - 1))));
-          }
-        }
-        else if (i > position) {
-          if (i == goal * 2) {
-            columns += "0fr 0fr";
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty bg" }, unit + (i + goal * (repetitions - 1))));
-            items.push(h("div", { class: "end bw" }, gift3));
-          }
-          else {
-            items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, unit + (i + goal * (repetitions - 1))));
-          }
-        }
-        else {
-          items.push(h("div", { class: "filled" }));
-          items.push(h("div", { class: "progress" }, unit + (i + goal * (repetitions - 1))));
-        }
-      }
-    }
-  }
-}

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

@@ -1,6 +1,9 @@
+import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 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";
 /**
  * @uiName Task Card
@@ -9,9 +12,13 @@ export class TaskCard {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Reward Points
+     * @uiName Reward Amount
      */
     this.points = 0;
+    /**
+     * @uiName Reward Unit
+     */
+    this.rewardUnit = "Points";
     /**
      * @uiName Title Text
      */
@@ -21,7 +28,7 @@ export class TaskCard {
      */
     this.description = "Description Text";
     /**
-     * @uiName Set Repeatable
+     * @uiName Goal Repeatable
      */
     this.repeatable = false;
     /**
@@ -29,22 +36,45 @@ export class TaskCard {
      */
     this.showProgressBar = false;
     /**
-     * @uiName Progress Bar Progress
+     * @uiName Goal Progress Source
      */
-    this.progress = 0;
+    this.progressSource = "";
     /**
-     * @uiName Progress Bar Goal
+     * @uiName Goal Completion Number
      */
     this.goal = 1;
     /**
-     * @uiName Show Expiry
+     * @uiName Progress Bar Steps
+     */
+    this.steps = false;
+    /**
+     * @uiName Show Goal Expiry
+     */
+    this.showExpire = false;
+    /**
+     * @uiName CTA Button Text
+     */
+    this.buttonText = "Complete Action";
+    /**
+     * @uiName CTA Button Link
+     */
+    this.buttonLink = "https://example.com/";
+    /**
+     * Select what type of stat to display for the goal. Manual paths are also supported.
+     *
+     * @uiWidget StatTypeSelectWidget
+     * @uiName Stat Type
+     * @uiOptions {"version": 1.1}
      */
-    this.expire = false;
+    this.statType = "/programGoals/count/Referral-Started%2Freferrals";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    return h(TaskCardView, Object.assign({}, getProps(this)));
+    const { props } = isDemo() ? useDemoBigStat(this) : useBigStat(this);
+    const { value, statvalue } = props;
+    console.log(props, isDemo());
+    return (h(TaskCardView, Object.assign({}, getProps(this), { progress: value, loading: value === undefined })));
   }
   static get is() { return "sqm-task-card"; }
   static get encapsulation() { return "shadow"; }
@@ -61,7 +91,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Points",
+            "text": "Reward Amount",
             "name": "uiName"
           }],
         "text": ""
@@ -70,6 +100,27 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "0"
     },
+    "rewardUnit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Unit",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-unit",
+      "reflect": false,
+      "defaultValue": "\"Points\""
+    },
     "cardTitle": {
       "type": "string",
       "mutable": false,
@@ -124,7 +175,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Set Repeatable",
+            "text": "Goal Repeatable",
             "name": "uiName"
           }],
         "text": ""
@@ -154,27 +205,6 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
-    "progress": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Progress Bar Progress",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "progress",
-      "reflect": false,
-      "defaultValue": "0"
-    },
     "goal": {
       "type": "number",
       "mutable": false,
@@ -187,7 +217,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Progress Bar Goal",
+            "text": "Goal Completion Number",
             "name": "uiName"
           }],
         "text": ""
@@ -197,11 +227,11 @@ export class TaskCard {
       "defaultValue": "1"
     },
     "steps": {
-      "type": "number",
+      "type": "boolean",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "boolean",
+        "resolved": "boolean",
         "references": {}
       },
       "required": false,
@@ -214,9 +244,10 @@ export class TaskCard {
         "text": ""
       },
       "attribute": "steps",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "false"
     },
-    "unit": {
+    "progressBarUnit": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -233,10 +264,10 @@ export class TaskCard {
           }],
         "text": ""
       },
-      "attribute": "unit",
+      "attribute": "progress-bar-unit",
       "reflect": false
     },
-    "expire": {
+    "showExpire": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -248,16 +279,16 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Expiry",
+            "text": "Show Goal Expiry",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "expire",
+      "attribute": "show-expire",
       "reflect": false,
       "defaultValue": "false"
     },
-    "dateExpire": {
+    "dateExpires": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -269,12 +300,12 @@ export class TaskCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Expire Date",
+            "text": "Date Goal Expires",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "date-expire",
+      "attribute": "date-expires",
       "reflect": false
     },
     "buttonText": {
@@ -289,13 +320,14 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Button Text",
+            "text": "CTA Button Text",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "button-text",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"Complete Action\""
     },
     "buttonLink": {
       "type": "string",
@@ -309,13 +341,41 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Button Link",
+            "text": "CTA Button Link",
             "name": "uiName"
           }],
         "text": ""
       },
       "attribute": "button-link",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"https://example.com/\""
+    },
+    "statType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "StatTypeSelectWidget",
+            "name": "uiWidget"
+          }, {
+            "text": "Stat Type",
+            "name": "uiName"
+          }, {
+            "text": "{\"version\": 1.1}",
+            "name": "uiOptions"
+          }],
+        "text": "Select what type of stat to display for the goal. Manual paths are also supported."
+      },
+      "attribute": "stat-type",
+      "reflect": false,
+      "defaultValue": "\"/programGoals/count/Referral-Started%2Freferrals\""
     }
   }; }
   static get states() { return {