@saasquatch/mint-components 1.3.2-12 → 1.3.2-13

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

@@ -4,8 +4,8 @@ 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) {
-  const { rewardAmount, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpiry, dateExpires, buttonText, buttonLink, loading, } = props;
   console.log({ props });
   const checkmark_circle = SVGs.checkmark_circle();
   const arrow_left_right = SVGs.arrow_left_right();
@@ -19,16 +19,28 @@ export function TaskCardView(props) {
         position: "relative",
         boxSizing: "border-box",
         minWidth: "347px",
-        background: "var(--sl-color-white)",
-        border: "1px solid var(--sl-color-gray-300)",
+        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-100)",
+      },
+      "& .title": {
+        fontSize: "var(--sl-font-size-small)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .black": {
+        color: "var(--sl-color-neutral-1000)",
+      },
     },
     Header: {
       display: "flex",
@@ -41,7 +53,6 @@ export function TaskCardView(props) {
       },
       "& .value": {
         alignSelf: "center",
-        color: "var(--sl-color-black)",
         fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         lineHeight: "100%",
@@ -50,16 +61,21 @@ export function TaskCardView(props) {
       "& .text": {
         alignSelf: "end",
         textTransform: "uppercase",
-        color: "var(--sl-color-gray-600)",
         fontSize: "var(--sl-font-size-x-small)",
         lineHeight: "var(--sl-font-size-medium)",
         marginRight: "var(--sl-spacing-xx-small)",
       },
-    },
-    Title: {
-      color: "var(--sl-color-black)",
-      fontSize: "var(--sl-font-size-small)",
-      fontWeight: "var(--sl-font-weight-semibold)",
+      "& .end": {
+        color: "var(--sl-color-warning-600)",
+        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",
@@ -71,58 +87,69 @@ export function TaskCardView(props) {
         marginTop: "auto",
         verticalAlign: "text-bottom",
         fontSize: "var(--sl-font-size-x-small)",
-        color: "var(--sl-color-gray-600)",
       },
       "& .success": {
-        color: "var(--sl-color-success-600)!important",
+        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)",
+        },
       },
-      "& sl-button.action::part(base) ": {
-        color: "var(--sl-color-white)",
-        background: "var(--sl-color-primary-500)",
-        border: "1px solid var(--sl-color-primary-500)",
-        borderRadius: "var(--sl-border-radius-medium)",
-      },
-      "& sl-button.action.completed::part(base) ": {
-        border: "1px solid var(--sl-color-gray-300)!important",
-        background: "var(--sl-color-gray-300)!important",
+      "& .neutral": {
+        color: "var(--sl-color-neutral-400)",
       },
     },
   };
   jss.setup(preset());
   const sheet = jss.createStyleSheet(style);
   const styleString = sheet.toString();
-  const showComplete = progress >= goal;
-  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
-  const taskComplete = showComplete && repeatable === false;
-  console.log({ showProgressBar, loading });
+  const showComplete = props.progress >= props.goal;
+  const repetitions = props.showProgressBar
+    ? Math.floor(props.progress / props.goal)
+    : props.progress;
+  const taskComplete = showComplete && props.repeatable === false;
+  const dateExpire = props.showExpiry && DateTime.fromISO(props.dateExpires.split("/").pop());
+  const taskExpired = props.showExpiry && DateTime.now() > dateExpire;
+  const dateExpireText = dateExpire.toLocaleString(DateTime.DATE_FULL);
+  console.log(taskExpired);
   return (h("div", { class: sheet.classes.TaskCard },
-    h("div", { class: showComplete ? "main complete" : "main" },
+    h("div", { class: taskExpired ? "main expired" : taskComplete ? "main complete" : "main" },
       h("style", { type: "text/css" }, styleString),
-      h("div", { class: sheet.classes.Header },
-        showComplete && h("span", { class: "icon" }, checkmark_circle),
-        h("span", { class: "value" }, rewardAmount),
-        h("span", { class: "text" }, rewardUnit)),
-      h("div", { class: sheet.classes.Title }, cardTitle),
-      h(Details, { description: description }),
-      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props, { complete: taskComplete }))),
-      h("div", { class: sheet.classes.Footer },
+      h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+        taskExpired && (h("div", { class: "end" },
+          " ",
+          "Ended " + dateExpireText,
+          " ")),
+        showComplete && (h("span", { class: taskExpired ? "icon neutral" : "icon" }, checkmark_circle)),
+        h("span", { class: taskExpired ? "value" : "value black" }, props.rewardAmount),
+        h("span", { class: "text" }, props.rewardUnit)))),
+      props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "0 16px" } })) : (h("div", { class: taskExpired ? "title" : "title black" }, props.cardTitle)),
+      props.loading ? (h("sl-skeleton", { style: { width: "91%", margin: "12px 16px" } })) : (h(Details, Object.assign({}, props))),
+      props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { width: "91%", margin: "0 auto" } })) : (props.showProgressBar && (h(ProgressBarView, Object.assign({}, props, { complete: taskComplete, expired: taskExpired })))),
+      h("div", { class: sheet.classes.Footer }, props.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
         h("span", { class: "text" },
-          repeatable && (h("div", null,
-            h("span", { class: repetitions > 0 ? "icon success" : "icon" }, arrow_left_right),
-            h("span", { class: repetitions > 0 ? "success" : "" },
-              "Completed ",
-              repetitions,
-              " times"))),
-          showExpiry && (h("span", null,
-            "Ends ",
-            " ",
-            dateExpires))),
-        h("sl-button", { class: taskComplete ? "action completed" : "action", size: "small", onClick: () => window.open(buttonLink), disabled: taskComplete }, buttonText)))));
+          props.repeatable && (h("div", null,
+            h("span", { class: repetitions > 0
+                ? taskExpired
+                  ? "icon neutral"
+                  : "icon success"
+                : "icon" }, arrow_left_right),
+            h("span", { class: repetitions > 0
+                ? taskExpired
+                  ? "neutral"
+                  : "success"
+                : "" }, "Completed " + repetitions + " times"))),
+          props.showExpiry && !taskExpired && (h("span", null, "Ends " + dateExpireText))),
+        h("sl-button", { class: taskComplete || taskExpired ? "action disabled" : "action", type: "primary", size: "small", onClick: () => window.open(props.buttonLink), disabled: taskComplete || taskExpired }, props.buttonText)))))));
 }
 function Details(props) {
   const style = {
@@ -137,7 +164,7 @@ function Details(props) {
         position: "absolute",
         top: "var(--sl-spacing-medium)",
         right: "var(--sl-spacing-medium)",
-        color: "var(--sl-color-gray-700)",
+        color: "var(--sl-color-neutral-700)",
         fontSize: "var(--sl-font-size-large)",
         "& :hover": {
           color: "var(--sl-color-primary-700)",
@@ -146,16 +173,21 @@ function Details(props) {
         transition: "transform var(--sl-transition-medium) ease",
       },
       "& input:checked ~ .summary": {
-        transition: "max-height var(--sl-transition-medium) ease",
+        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",
-        color: "var(--sl-color-gray-700)",
-        fontSize: "var(--sl-font-size-x-small)",
+        fontSize: "var(--sl-font-size-small)",
         maxHeight: "0px",
-        transition: "max-height var(--sl-transition-fast) ease-out",
+        transition: "all var(--sl-transition-fast) ease-out",
+        marginBottom: "var(--sl-spacing-medium)",
       },
     },
   };

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

@@ -7,6 +7,7 @@ import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
 import { TaskCardView } from "./sqm-task-card-view";
 /**
  * @uiName Task Card
+ * @uiOrder ["rewardAmount", "reward-unit", "card-title", "description", "*", "showExpiry", "dateExpires" ]
  */
 export class TaskCard {
   constructor() {
@@ -51,6 +52,12 @@ export class TaskCard {
      * @uiName Show Goal Expiry
      */
     this.showExpiry = false;
+    /**
+     * @uiName Date Goal Expires
+     * @uiWidget DateRange
+     * @uiOptions {"allowPastDates":true, "months": 1}
+     */
+    this.dateExpires = "/";
     /**
      * @uiName CTA Button Text
      */
@@ -297,7 +304,7 @@ export class TaskCard {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Date Goal Expires",
@@ -312,7 +319,8 @@ export class TaskCard {
         "text": ""
       },
       "attribute": "date-expires",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"/\""
     },
     "buttonText": {
       "type": "string",