@saasquatch/mint-components 1.3.3-6 → 1.5.0-0

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

@@ -1,9 +1,11 @@
 import { h } from "@stencil/core";
-import { MatrixStory } from "./Matrix";
+import { MatrixStory } from "../sqm-stencilbook/Matrix";
 import { TaskCardView } from "./sqm-task-card-view";
 import { ProgressBarView } from "./progress-bar/progress-bar-view";
 import scenarioTaskCard from "./sqm-task-card.feature";
 import scenarioProgressBar from "./progress-bar/progress-bar.feature";
+import { DateTime } from "luxon";
+import { Resizer } from "../sqm-stencilbook/Resizer";
 const scenario = scenarioTaskCard + scenarioProgressBar;
 export default {
   title: "Components/Task Card/",
@@ -37,6 +39,7 @@ const oneAction = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  finite: 0,
 };
 const coupleActions = {
   rewardAmount: 40,
@@ -54,6 +57,7 @@ const coupleActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  finite: 0,
 };
 const manyActions = {
   rewardAmount: 150,
@@ -71,6 +75,49 @@ const manyActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  finite: 0,
+};
+export const TaskCard = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
+  };
+  const expireRepeat = { ...expire, repeatable: true };
+  return (h("div", { style: storyFrame },
+    h(Resizer, null,
+      h("h4", null, "Not Repeatable"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 }))),
+    h(Resizer, null,
+      h("h4", null, "Repeatable"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 2, repeatable: true })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true }))),
+    h(Resizer, null,
+      h("h4", null, "Complete"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }))),
+    h(Resizer, null,
+      h("h4", null, "Unavailable"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 3 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 250 }, expireRepeat)))));
 };
 export const TaskCardNotRepeatable = () => {
   return (h("div", { style: storyFrame },
@@ -130,10 +177,51 @@ export const TaskCardRepeatable = () => {
       h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
       h("h5", null))));
 };
+export const TaskCardRepeatableFinite = () => {
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true, finite: 2 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true, finite: 2 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 2, repeatable: true, finite: 2 })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 950, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1300, repeatable: true, finite: 3 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500, repeatable: true, finite: 3 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 3 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 4 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 2500, repeatable: true, finite: 5 })),
+      h("h5", null))));
+};
 export const TaskCardEndDate = () => {
   const expire = {
     showExpiry: true,
-    rewardDuration: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
+    rewardDuration: DateTime.now().minus({ days: 1 }).toISO() +
+      "/" +
+      DateTime.now().plus({ days: 1 }).toISO(),
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (h("div", { style: storyFrame },
@@ -190,10 +278,60 @@ export const TaskCardLoading = () => {
       " ",
       h("h5", null))));
 };
-export const TaskCardUnavailable = () => {
+export const TaskCardNotStarted = () => {
   const expire = {
     showExpiry: true,
-    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
+    rewardDuration: DateTime.now().plus({ days: 1 }).toISO() +
+      "/" +
+      DateTime.now().plus({ days: 2 }).toISO(),
+  };
+  const expireRepeat = { ...expire, repeatable: true };
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
+      h("h5", null))));
+};
+export const TaskCardEnded = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: DateTime.now().minus({ days: 2 }).toISO() +
+      "/" +
+      DateTime.now().minus({ days: 1 }).toISO(),
   };
   const expireRepeat = { ...expire, repeatable: true };
   return (h("div", { style: storyFrame },

package/dist/collection/components/sqm-task-card/progress-bar/SVGs.js

@@ -1,7 +1,8 @@
 import { h } from "@stencil/core";
 export const gift = () => {
-  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
-    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+  return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
+    h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#EB5757" })));
 };

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

@@ -3,14 +3,13 @@ import jss from "jss";
 import preset from "jss-preset-default";
 import * as SVGs from "./SVGs";
 export function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, } = props;
-  console.log("progress bar props", props);
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, expired = false, finite = 0, } = props;
+  //   console.log("progress bar props", props);
   const gift1 = SVGs.gift();
   const gift2 = SVGs.gift();
   const gift3 = SVGs.gift();
   var items = [];
   var columns = "";
-  var repetitions = Math.floor(progress / goal);
   if (repeatable) {
     if (steps) {
       addStepsRepeatable();
@@ -31,12 +30,12 @@ export function ProgressBarView(props) {
   const style = {
     ProgressBar: {
       "& .progress-bar": {
-        height: "15px",
+        height: "0",
         marginTop: steps
           ? "var(--sl-spacing-medium)"
           : "var(--sl-spacing-large)",
         filter: expired ? "grayscale(1)" : "",
-        marginBottom: "var(--sl-spacing-xx-large)",
+        marginBottom: "var(--sl-spacing-xxx-large)",
         marginRight: "var(--sl-spacing-x-small)",
         fontSize: "var(--sl-font-size-x-small)",
         display: "grid",
@@ -141,7 +140,10 @@ export function ProgressBarView(props) {
   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)));
+    h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
+        (Boolean(finite) && progress > 2 * goal)
+        ? "progress-bar repeatable-steps"
+        : "progress-bar" }, items)));
   function clamp(x, min, max) {
     return Math.min(Math.max(x, min), max);
   }
@@ -214,6 +216,23 @@ export function ProgressBarView(props) {
       items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
       items.push(h("div", { class: "gift bw" }, gift2));
     }
+    // finite repetition hit
+    else if (finite && repetitions >= finite) {
+      if (repetitions > 2) {
+        items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
+        items.push(h("div", { class: "gift start" }, gift1));
+        columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+      }
+      else {
+        columns = "0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+      }
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
+      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
+      items.push(h("div", { class: "gift" }, gift3));
+    }
     // multiple repetitions
     else {
       columns =

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

@@ -6,29 +6,27 @@ import * as SVGs from "./SVGs";
 import { ProgressBarView, } from "./progress-bar/progress-bar-view";
 import { DateTime } from "luxon";
 export function TaskCardView(props) {
-  console.log({ props });
+  //   console.log({ props });
   const checkmark_circle = SVGs.checkmark_circle();
+  const checkmark_filled = SVGs.checkmark_filled();
   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)",
+        border: "1px solid var(--sl-color-neutral-200)",
+        borderRadius: "var(--sl-border-radius-large)",
         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)",
+        background: "var(--sl-color-primary-50)",
+        borderColor: "var(--sl-color-primary-500)",
       },
       "& .main.expired": {
         color: "var(--sl-color-neutral-400)",
@@ -37,17 +35,30 @@ export function TaskCardView(props) {
       "& .title": {
         fontSize: "var(--sl-font-size-small)",
         fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-950)",
+      },
+      "& .container": {
+        margin: "var(--sl-spacing-medium)",
       },
-      "& .black": {
-        color: "var(--sl-color-neutral-1000)",
+      "& .container.subdued": {
+        opacity: "0.66",
       },
+      "& .container > div": {
+        margin: "var(--sl-spacing-medium) 0",
+      },
+    },
+    Expired: {
+      margin: "var(--sl-spacing-medium)",
+      marginBottom: "calc(var(--sl-spacing-x-small)*-1)",
+      color: "var(--sl-color-warning-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
     },
     Header: {
       display: "flex",
       "& .icon": {
         alignSelf: "center",
         lineHeight: "0",
-        color: "var(--sl-color-success-700)",
+        color: "var(--sl-color-primary-400)",
         fontSize: "var(--sl-font-size-large)",
         marginRight: "var(--sl-spacing-x-small)",
       },
@@ -55,6 +66,7 @@ export function TaskCardView(props) {
         alignSelf: "center",
         fontSize: "var(--sl-font-size-x-large)",
         fontWeight: "var(--sl-font-weight-semibold)",
+        color: "var(--sl-color-neutral-950)",
         lineHeight: "100%",
         marginRight: "var(--sl-spacing-xx-small)",
       },
@@ -62,6 +74,7 @@ export function TaskCardView(props) {
         alignSelf: "end",
         textTransform: "uppercase",
         fontSize: "var(--sl-font-size-x-small)",
+        color: "var(--sl-color-neutral-950)",
         lineHeight: "var(--sl-font-size-medium)",
         marginRight: "var(--sl-spacing-xx-small)",
       },
@@ -70,9 +83,6 @@ export function TaskCardView(props) {
         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)",
       },
@@ -82,6 +92,7 @@ export function TaskCardView(props) {
       "& .icon": {
         fontSize: "var(--sl-font-size-xx-small)",
         marginRight: "var(--sl-spacing-xx-small)",
+        verticalAlign: "bottom",
       },
       "& .text": {
         marginTop: "auto",
@@ -89,7 +100,7 @@ export function TaskCardView(props) {
         fontSize: "var(--sl-font-size-x-small)",
       },
       "& .success": {
-        color: "var(--sl-color-success-600)",
+        color: "var(--sl-color-primary-500)",
         fontWeight: "var(--sl-font-weight-semibold)",
       },
       "& .action": {
@@ -100,6 +111,10 @@ export function TaskCardView(props) {
           borderRadius: "var(--sl-border-radius-medium)",
         },
         "&.disabled::part(base)": {
+          border: "1px solid var(--sl-color-primary-400)",
+          background: "var(--sl-color-primary-400)",
+        },
+        "&.neutral::part(base)": {
           border: "1px solid var(--sl-color-neutral-400)",
           background: "var(--sl-color-neutral-400)",
         },
@@ -119,8 +134,11 @@ export function TaskCardView(props) {
   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);
+  const taskComplete = (showComplete && props.repeatable === false) ||
+    (props.finite && props.progress >= props.finite * props.goal);
+  const taskEnded = props.showExpiry && dateEnd <= dateToday;
+  const taskNotStarted = props.showExpiry && dateToday <= dateStart;
+  const taskUnavailable = taskEnded || taskNotStarted;
   return (h("div", { class: sheet.classes.TaskCard },
     h("div", { class: taskUnavailable
         ? "main expired"
@@ -128,34 +146,43 @@ export function TaskCardView(props) {
           ? "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)))))));
+      taskUnavailable && (h("div", { class: sheet.classes.Expired }, taskEnded
+        ? "Ended " + dateEnd.toLocaleString(DateTime.DATE_MED)
+        : "Starts " + dateStart.toLocaleString(DateTime.DATE_MED))),
+      h("div", { class: taskComplete || taskUnavailable ? "container subdued" : "container" },
+        h("div", { class: sheet.classes.Header }, props.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
+          showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
+          h("span", { class: taskUnavailable ? "value black" : "value black" }, props.rewardAmount),
+          h("span", { class: "text" }, props.rewardUnit)))),
+        props.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: taskUnavailable ? "title black" : "title black" }, props.cardTitle)),
+        props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (h(Details, Object.assign({}, props))),
+        props.showProgressBar && props.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (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" } })) : (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 " +
+                (props.finite
+                  ? Math.min(repetitions, props.finite)
+                  : repetitions) +
+                (props.finite ? "/" + props.finite : "") +
+                " times"))),
+            props.showExpiry && !taskUnavailable && (h("span", null, "Ends " + dateEnd.toLocaleString(DateTime.DATE_FULL)))),
+          h("sl-button", { class: taskUnavailable
+              ? "action neutral"
+              : taskComplete
+                ? "action disabled"
+                : "action", type: "primary", size: "small", onClick: () => props.openNewTab
+              ? window.open(props.buttonLink)
+              : window.open(props.buttonLink, "_parent"), disabled: taskComplete || taskUnavailable }, props.buttonText))))))));
 }
 function Details(props) {
   const style = {
@@ -182,10 +209,10 @@ function Details(props) {
         transition: "all var(--sl-transition-medium) ease",
         maxHeight: "300px",
         marginBottom: props.steps
-          ? "var(--sl-spacing-large)"
+          ? "var(--sl-spacing-x-large)"
           : props.showProgressBar
             ? "var(--sl-spacing-xx-large)"
-            : "var(--sl-spacing-large)",
+            : "var(--sl-spacing-x-large)",
       },
       "& .summary": {
         display: "block",

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

@@ -7,7 +7,7 @@ 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"]
+ * @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"]
  */
 export class TaskCard {
   constructor() {
@@ -32,6 +32,10 @@ export class TaskCard {
      * @uiName Goal Repeatable
      */
     this.repeatable = false;
+    /**
+     * @uiName Repeat Amount (0 for no limit)
+     */
+    this.finite = 0;
     /**
      * @uiName Show Progress Bar
      */
@@ -191,6 +195,27 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
+    "finite": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Repeat Amount (0 for no limit)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "finite",
+      "reflect": false,
+      "defaultValue": "0"
+    },
     "showProgressBar": {
       "type": "boolean",
       "mutable": false,

package/dist/esm/{ShadowViewAddon-2338f393.js → ShadowViewAddon-a3f510db.js}

@@ -1,5 +1,5 @@
 import { h, g as getElement } from './index-17b4da69.js';
-import { d as dist, M, T, e as en } from './index.module-9b5bb6a2.js';
+import { d as dist, M, T, e as en } from './index.module-90d2c3ad.js';
 
 function LeaderboardView(props) {
   var _a;

package/dist/esm/{global-0e81c5e6.js → global-90da933f.js}

@@ -1,5 +1,5 @@
 import { g as getAugmentedNamespace, c as createCommonjsModule, a as commonjsGlobal, b as browser, l as l$1 } from './extends-3a3f9fe2.js';
-import { s as src, m as memoize, S } from './index.module-9b5bb6a2.js';
+import { s as src, m as memoize, S } from './index.module-90d2c3ad.js';
 
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {