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

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";
+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 = {
@@ -18,15 +19,27 @@ export function TaskCardView(props, children) {
         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-primary-50)",
-        borderColor: "var(--sl-color-primary-700)",
+        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: {
@@ -34,13 +47,12 @@ export function TaskCardView(props, children) {
       "& .icon": {
         alignSelf: "center",
         lineHeight: "0",
-        color: "var(--sl-color-primary-700)",
+        color: "var(--sl-color-success-700)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
       "& .value": {
         alignSelf: "center",
-        color: "var(--sl-color-black)",
         fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
         lineHeight: "100%",
@@ -48,83 +60,99 @@ export function TaskCardView(props, children) {
       },
       "& .text": {
         alignSelf: "end",
-        color: "var(--sl-color-gray-600)",
+        textTransform: "uppercase",
         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)",
+      "& .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",
-      "& span": {
-        verticalAlign: "text-bottom",
-      },
       "& .icon": {
-        verticalAlign: "bottom",
         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)",
-        color: "var(--sl-color-gray-600)",
+      },
+      "& .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)",
+        },
       },
-      "& 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)",
+      "& .neutral": {
+        color: "var(--sl-color-neutral-400)",
       },
     },
   };
   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;
+  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" }, points),
-        h("span", { class: "text" }, "SAASQUATCH POINTS")),
-      h("div", { class: sheet.classes.Title }, cardTitle),
-      showProgressBar && h(ProgressBar, Object.assign({}, props)),
-      h(Details, { description: description }),
-      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: "icon" }, arrow_left_right),
-            h("span", null,
-              "Completed ",
-              repetitions,
-              " times"),
-            h("br", null),
-            h("span", null,
-              "Earned ",
-              points * repetitions,
-              " SaaSquatch Points"))),
-          expire && (h("span", null,
-            h("br", null),
-            "Ends ",
-            " ",
-            dateExpire))),
-        h("sl-button", { class: "action", size: "small", onClick: () => alert(buttonLink), disabled: showComplete }, showComplete ? "Complete" : 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 = {
-    HostBlock: HostBlock,
     Description: {
       "& input[type=checkbox]": {
         display: "none",
@@ -136,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)",
@@ -145,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)",
       },
     },
   };
@@ -170,289 +203,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))));
-        }
-      }
-    }
-  }
-}