@saasquatch/mint-components 1.3.2-2 → 1.3.2-20

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

@@ -1,7 +1,21 @@
 import { h } from "@stencil/core";
-import { TaskCardView, } from "./sqm-task-card-view";
+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",
+  title: "Components/Task Card/",
+  parameters: {
+    scenario,
+  },
+};
+const storyFrame = {
+  display: "inline-flex",
+  gap: "32px",
 };
 const resizable = {
   width: "347px",
@@ -10,44 +24,103 @@ const resizable = {
   height: "fit-content",
   overflow: "hidden",
 };
-export const Default = () => {
-  const oneAction = {
-    points: 20,
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    buttonOnClick: () => { },
-  };
-  // @ts-ignore
-  return h(TaskCardView, null);
+const oneAction = {
+  rewardAmount: 20,
+  rewardUnit: "SaaSquatch Points",
+  cardTitle: "Complete a survey",
+  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+  repeatable: false,
+  showProgressBar: false,
+  progress: 0,
+  goal: 1,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  openNewTab: false,
+  showExpiry: false,
+  rewardDuration: null,
+  loading: false,
+  finite: 0,
 };
-export const NotRepeatable = () => {
-  const oneAction = {
-    points: 20,
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-  };
-  const coupleActions = {
-    points: 40,
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    goal: 5,
-    steps: 1,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-  };
-  const manyActions = {
-    points: 150,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
+const coupleActions = {
+  rewardAmount: 40,
+  rewardUnit: "SaaSquatch Points",
+  cardTitle: "Comment on 5 articles",
+  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+  repeatable: false,
+  showProgressBar: true,
+  steps: true,
+  progress: 1,
+  goal: 5,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  openNewTab: false,
+  showExpiry: false,
+  rewardDuration: null,
+  loading: false,
+  finite: 0,
+};
+const manyActions = {
+  rewardAmount: 150,
+  rewardUnit: "SaaSquatch Points",
+  cardTitle: "Spend $500 at our Store",
+  description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+  repeatable: false,
+  showProgressBar: true,
+  progress: 100,
+  goal: 500,
+  progressBarUnit: "$",
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  openNewTab: false,
+  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",
   };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+  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 },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
       h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
@@ -58,442 +131,282 @@ export const NotRepeatable = () => {
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
-      h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
       " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
-      h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
       " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
-      " ",
       h("h5", null))));
 };
-export const NotRepeatableWithExpiry = () => {
-  const oneAction = {
-    points: 20,
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    expire: true,
-    dateExpire: "Nov 1, 2021",
-  };
-  const coupleActions = {
-    points: 40,
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    goal: 5,
-    steps: 1,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
-  };
-  const manyActions = {
-    points: 150,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+export const TaskCardRepeatable = () => {
+  return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true })),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true })),
       " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
       h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true })),
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true })),
       h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
       h("h5", null))));
 };
-export const Repeatable = () => {
-  const oneAction = {
-    points: 20,
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    repeatable: true,
-  };
-  const coupleActions = {
-    points: 40,
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 5,
-    steps: 1,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-  };
-  const manyActions = {
-    points: 150,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+export const TaskCardRepeatableFinite = () => {
+  return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
+      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(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 2, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12, repeatable: true, finite: 3 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 15, repeatable: true, finite: 3 })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 200, repeatable: true, finite: 2 })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, 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: 1200, repeatable: true, finite: 3 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500, repeatable: true, finite: 3 })),
+      h("h5", null))));
+};
+export const TaskCardEndDate = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: DateTime.now().minus({ days: 1 }).toISO() +
+      "/" +
+      DateTime.now().plus({ days: 1 }).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, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
+      h(TaskCardView, Object.assign({}, oneAction, expireRepeat)),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
+      h(TaskCardView, Object.assign({}, coupleActions, expireRepeat)),
       " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      h(TaskCardView, Object.assign({}, manyActions, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      h(TaskCardView, Object.assign({}, manyActions, expireRepeat)),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      h("h5", null))));
+};
+export const TaskCardLoading = () => {
+  const loading = { loading: true };
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      h(TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
+      h(TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
+      h(TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       h("h5", null))));
 };
-export const RepeatableWithExpiry = () => {
-  const oneAction = {
-    points: 20,
-    cardTitle: "Complete a survey",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Take survey",
-    goal: 1,
-    repeatable: true,
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+export const TaskCardNotStarted = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: DateTime.now().plus({ days: 1 }).toISO() +
+      "/" +
+      DateTime.now().plus({ days: 2 }).toISO(),
   };
-  const coupleActions = {
-    points: 40,
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 5,
-    steps: 1,
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Start reading",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
-  };
-  const manyActions = {
-    points: 150,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    goal: 500,
-    unit: "$",
-    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    buttonText: "Visit our Store",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+  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 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      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 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      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({}, coupleActions, { progress: 10 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
+      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 },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
       " ",
       h("h5", null)),
     h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
+      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: 1500 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
       h("h5", null))));
 };
-// export const Repeatable = () => {
-//   const oneAction = {
-//     points: 20,
-//     cardTitle: "Complete a survey",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     repeatable: 0,
-//     buttonText: "Take survey",
-//     buttonOnClick: () => {},
-//   };
-//   const coupleActions = {
-//     points: 40,
-//     cardTitle: "Comment on 5 articles",
-//     goal: 5,
-//     steps: 1,
-//     repeatable: true,
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Start reading",
-//     buttonOnClick: () => {},
-//   };
-//   const manyActions = {
-//     points: 150,
-//     cardTitle: "Spend $500 at our Store",
-//     goal: 500,
-//     repeatable: true,
-//     unit: "$",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Visit our Store",
-//     buttonOnClick: () => {},
-//   };
-//   return (
-//     <div style={{ display: "inline-flex", gap: "32px" }}>
-//       <div style={resizable}>
-//         <h4>One Action</h4>
-//         <TaskCardView {...oneAction} /> <h5 />
-//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>A Couple Actions</h4>
-//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>Many Actions</h4>
-//         <TaskCardView {...manyActions} progress={100} /> <h5 />
-//         <TaskCardView {...manyActions} progress={500} /> <h5 />
-//         <TaskCardView {...manyActions} progress={650} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
-//       </div>
-//     </div>
-//   );
-// };
-// export const RepeatableWithExpiry = () => {
-//   const oneAction = {
-//     points: 20,
-//     cardTitle: "Complete a survey",
-//     expire: "Nov 30, 2021",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     repeatable: 0,
-//     buttonText: "Take survey",
-//     buttonOnClick: () => {},
-//   };
-//   const coupleActions = {
-//     points: 40,
-//     cardTitle: "Comment on 5 articles",
-//     expire: "Nov 30, 2021",
-//     goal: 5,
-//     steps: 1,
-//     repeatable: true,
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Start reading",
-//     buttonOnClick: () => {},
-//   };
-//   const manyActions = {
-//     points: 150,
-//     cardTitle: "Spend $500 at our Store",
-//     expire: "Nov 30, 2021",
-//     goal: 500,
-//     repeatable: true,
-//     unit: "$",
-//     description:
-//       "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-//     buttonText: "Visit our Store",
-//     buttonOnClick: () => {},
-//   };
-//   return (
-//     <div style={{ display: "inline-flex", gap: "32px" }}>
-//       <div style={resizable}>
-//         <h4>One Action</h4>
-//         <TaskCardView {...oneAction} /> <h5 />
-//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>A Couple Actions</h4>
-//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>Many Actions</h4>
-//         <TaskCardView {...manyActions} progress={100} /> <h5 />
-//         <TaskCardView {...manyActions} progress={500} /> <h5 />
-//         <TaskCardView {...manyActions} progress={650} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
-//       </div>
-//     </div>
-//   );
-// };
-// export const ProgressBar = () => {
-//   const props = {
-//     goal: 5,
-//   };
-//   return (
-//     <div>
-//       <MatrixStory
-//         matrix={{ progress: [1, 2, 5], steps: [0, 1], repeatable: [false] }}
-//         props={props}
-//         Component={ProgressBarView}
-//       />
-//       <MatrixStory
-//         matrix={{ progress: [2, 5, 7, 12], steps: [0, 1], repeatable: [true] }}
-//         props={props}
-//         Component={ProgressBarView}
-//       />
-//     </div>
-//   );
-// };
+export const ProgressBar = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [-100, 0, 100, 500, 1000] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarSteps = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    progressBarUnit: "$",
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [-1, 0, 1, 5, 7] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarRepeatable = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+    repeatable: true,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarStepsRepeatable = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    progressBarUnit: "$",
+    repeatable: true,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+};