@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

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

@@ -0,0 +1,211 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { HostBlock } from "../../global/mixins";
+import * as SVGs from "./SVGs";
+import { ProgressBarView, } from "./progress-bar/progress-bar-view";
+import { DateTime } from "luxon";
+export function TaskCardView(props) {
+  console.log({ props });
+  const checkmark_circle = SVGs.checkmark_circle();
+  const arrow_left_right = SVGs.arrow_left_right();
+  const style = {
+    HostBlock: HostBlock,
+    TaskCard: {
+      "& .main > div": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .main": {
+        position: "relative",
+        boxSizing: "border-box",
+        minWidth: "347px",
+        background: "var(--sl-color-neutral-0)",
+        border: "1px solid var(--sl-color-neutral-300)",
+        borderRadius: "var(--sl-border-radius-medium)",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+        color: "var(--sl-color-neutral-600)",
+      },
+      "& .main.complete": {
+        background: "var(--sl-color-success-50)",
+        borderColor: "var(--sl-color-success-700)",
+      },
+      "& .main.expired": {
+        color: "var(--sl-color-neutral-400)",
+        background: "var(--sl-color-neutral-50)",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-small)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .black": {
+        color: "var(--sl-color-neutral-1000)",
+      },
+    },
+    Header: {
+      display: "flex",
+      "& .icon": {
+        alignSelf: "center",
+        lineHeight: "0",
+        color: "var(--sl-color-success-700)",
+        fontSize: "var(--sl-font-size-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+      },
+      "& .value": {
+        alignSelf: "center",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        lineHeight: "100%",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        alignSelf: "end",
+        textTransform: "uppercase",
+        fontSize: "var(--sl-font-size-x-small)",
+        lineHeight: "var(--sl-font-size-medium)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .end": {
+        color: "var(--sl-color-warning-500)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        marginBottom: "var(--sl-spacing-xx-small)",
+      },
+      "& .black": {
+        color: "var(--sl-color-neutral-1000)",
+      },
+      "& .neutral": {
+        color: "var(--sl-color-neutral-400)",
+      },
+    },
+    Footer: {
+      display: "flex",
+      "& .icon": {
+        fontSize: "var(--sl-font-size-xx-small)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        marginTop: "auto",
+        verticalAlign: "text-bottom",
+        fontSize: "var(--sl-font-size-x-small)",
+      },
+      "& .success": {
+        color: "var(--sl-color-success-600)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .action": {
+        marginTop: "auto",
+        marginLeft: "auto",
+        "&::part(base)": {
+          color: "var(--sl-color-neutral-0)",
+          borderRadius: "var(--sl-border-radius-medium)",
+        },
+        "&.disabled::part(base)": {
+          border: "1px solid var(--sl-color-neutral-400)",
+          background: "var(--sl-color-neutral-400)",
+        },
+      },
+      "& .neutral": {
+        color: "var(--sl-color-neutral-400)",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const showComplete = props.progress >= props.goal;
+  const repetitions = props.showProgressBar
+    ? Math.floor(props.progress / props.goal)
+    : props.progress;
+  const dateStart = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[0]);
+  const dateEnd = props.showExpiry && DateTime.fromISO(props.rewardDuration.split("/")[1]);
+  const dateToday = DateTime.now();
+  const taskComplete = showComplete && props.repeatable === false;
+  const taskUnavailable = props.showExpiry && (dateEnd < dateToday || dateToday < dateStart);
+  return (h("div", { class: sheet.classes.TaskCard },
+    h("div", { class: taskUnavailable
+        ? "main expired"
+        : taskComplete
+          ? "main complete"
+          : "main" },
+      h("style", { type: "text/css" }, styleString),
+      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0", height: "12px" } })) : (h("div", null,
+        taskUnavailable && (h("div", { class: "end" }, "Available " +
+          dateStart.toLocaleString(DateTime.DATE_MED).split(",")[0] +
+          " - " +
+          dateEnd.toLocaleString(DateTime.DATE_MED).split(",")[0])),
+        showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, checkmark_circle)),
+        h("span", { class: taskUnavailable ? "value" : "value black" }, props.rewardAmount),
+        h("span", { class: "text" }, props.rewardUnit)))),
+      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px", height: "12px" } })) : (h("div", { class: taskUnavailable ? "title" : "title black" }, props.cardTitle)),
+      props.loading ? (h("sl-skeleton", { style: { margin: "12px 16px", height: "12px" } })) : (h(Details, Object.assign({}, props))),
+      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "0 16px", height: "12px" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskUnavailable })))),
+      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto", height: "12px" } })) : (h("div", { style: { display: "contents" } },
+        h("span", { class: "text" },
+          props.repeatable && (h("div", null,
+            h("span", { class: repetitions > 0
+                ? taskUnavailable
+                  ? "icon neutral"
+                  : "icon success"
+                : "icon" }, arrow_left_right),
+            h("span", { class: repetitions > 0
+                ? taskUnavailable
+                  ? "neutral"
+                  : "success"
+                : "" }, "Completed " + repetitions + " times"))),
+          props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
+        h("sl-button", { class: taskComplete || taskUnavailable ? "action disabled" : "action", type: "primary", size: "small", onClick: () => props.openNewTab
+            ? window.open(props.buttonLink)
+            : window.open(props.buttonLink, "_self"), disabled: taskComplete || taskUnavailable }, props.buttonText)))))));
+}
+function Details(props) {
+  const style = {
+    Description: {
+      "& input[type=checkbox]": {
+        display: "none",
+      },
+      "& input:checked ~ .details": {
+        transform: "rotate(-180deg)",
+      },
+      "& .details": {
+        position: "absolute",
+        top: "var(--sl-spacing-medium)",
+        right: "var(--sl-spacing-medium)",
+        color: "var(--sl-color-neutral-700)",
+        fontSize: "var(--sl-font-size-large)",
+        "& :hover": {
+          color: "var(--sl-color-primary-700)",
+        },
+        transformOrigin: "50% 37%",
+        transition: "transform var(--sl-transition-medium) ease",
+      },
+      "& input:checked ~ .summary": {
+        transition: "all var(--sl-transition-medium) ease",
+        maxHeight: "300px",
+        marginBottom: props.steps
+          ? "var(--sl-spacing-large)"
+          : props.showProgressBar
+            ? "var(--sl-spacing-xx-large)"
+            : "var(--sl-spacing-large)",
+      },
+      "& .summary": {
+        display: "block",
+        overflow: "hidden",
+        fontSize: "var(--sl-font-size-small)",
+        maxHeight: "0px",
+        transition: "all var(--sl-transition-fast) ease-out",
+        marginBottom: "var(--sl-spacing-medium)",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const rid = Math.random().toString(36).slice(2);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("span", { class: sheet.classes.Description },
+      h("input", { type: "checkbox", id: "details-" + rid }),
+      h("label", { class: "details", htmlFor: "details-" + rid },
+        h("sl-icon", { name: "chevron-down" })),
+      h("span", { class: "summary" }, props.description))));
+}

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

@@ -0,0 +1,419 @@
+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
+ * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab"]
+ */
+export class TaskCard {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Reward Amount
+     */
+    this.rewardAmount = 0;
+    /**
+     * @uiName Reward Unit
+     */
+    this.rewardUnit = "Points";
+    /**
+     * @uiName Title Text
+     */
+    this.cardTitle = "Title Text";
+    /**
+     * @uiName Description Text
+     */
+    this.description = "Description Text";
+    /**
+     * @uiName Goal Repeatable
+     */
+    this.repeatable = false;
+    /**
+     * @uiName Show Progress Bar
+     */
+    this.showProgressBar = false;
+    /**
+     * @uiName Goal Completion Number
+     */
+    this.goal = 1;
+    /**
+     * @uiName Progress Bar Steps
+     */
+    this.steps = false;
+    /**
+     * @uiName Show Goal Expiry
+     */
+    this.showExpiry = false;
+    /**
+     * @uiName Reward Duration
+     * @uiWidget DateRange
+     * @uiOptions {"allowPastDates":true, "months": 1}
+     */
+    this.rewardDuration = "/";
+    /**
+     * @uiName CTA Button Text
+     */
+    this.buttonText = "Complete Action";
+    /**
+     * @uiName CTA Button Link
+     */
+    this.buttonLink = "https://example.com/";
+    /**
+     * @uiName CTA Button Link Open in New Tab
+     */
+    this.openNewTab = false;
+    /**
+     * Select what type of stat to display for the goal. Manual paths are also supported.
+     *
+     * @uiWidget StatTypeSelectWidget
+     * @uiName Goal Progress Source
+     * @uiOptions {"version": 1.1}
+     */
+    this.statType = "/programGoals/count/Referral-Started%2Freferrals";
+    withHooks(this);
+  }
+  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))));
+  }
+  static get is() { return "sqm-task-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "rewardAmount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Amount",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-amount",
+      "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,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Title Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "card-title",
+      "reflect": false,
+      "defaultValue": "\"Title Text\""
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Description Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false,
+      "defaultValue": "\"Description Text\""
+    },
+    "repeatable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Goal Repeatable",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "repeatable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showProgressBar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show Progress Bar",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-progress-bar",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "goal": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Goal Completion Number",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "goal",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "steps": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Progress Bar Steps",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "steps",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "progressBarUnit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Progress Bar Unit",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "progress-bar-unit",
+      "reflect": false
+    },
+    "showExpiry": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Show Goal Expiry",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "show-expiry",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "rewardDuration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Duration",
+            "name": "uiName"
+          }, {
+            "text": "DateRange",
+            "name": "uiWidget"
+          }, {
+            "text": "{\"allowPastDates\":true, \"months\": 1}",
+            "name": "uiOptions"
+          }],
+        "text": ""
+      },
+      "attribute": "reward-duration",
+      "reflect": false,
+      "defaultValue": "\"/\""
+    },
+    "buttonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "CTA Button Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-text",
+      "reflect": false,
+      "defaultValue": "\"Complete Action\""
+    },
+    "buttonLink": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "CTA Button Link",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "button-link",
+      "reflect": false,
+      "defaultValue": "\"https://example.com/\""
+    },
+    "openNewTab": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "CTA Button Link Open in New Tab",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "open-new-tab",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "statType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "StatTypeSelectWidget",
+            "name": "uiWidget"
+          }, {
+            "text": "Goal Progress Source",
+            "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 {
+    "ignored": {}
+  }; }
+}