@saasquatch/mint-components 1.6.6-6 → 1.6.6

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

@@ -1,437 +1,437 @@
-import { h } from "@stencil/core";
-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/",
-  parameters: {
-    scenario,
-  },
-};
-const storyFrame = {
-  display: "inline-flex",
-  gap: "32px",
-};
-const resizable = {
-  width: "347px",
-  minWidth: "347px",
-  resize: "horizontal",
-  height: "fit-content",
-  overflow: "hidden",
-};
-const oneAction = {
-  callbacks: {
-    sendEvent: () => void 0,
-    onClick: () => void 0,
-  },
-  content: {
-    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,
-    steps: false,
-    buttonText: "Take survey",
-    buttonLink: "https://example.com/",
-    openNewTab: false,
-    rewardDuration: null,
-    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
-    expiryMessage: "Ends {endDate}",
-    startsOnMessage: "Starts {startDate}",
-    endedMessage: "Ended {endDate}",
-    finite: 0,
-    goal: 1,
-    locale: "en",
-  },
-  states: {
-    progress: 0,
-    loading: false,
-    loadingEvent: false,
-  },
-};
-const coupleActions = {
-  callbacks: {
-    sendEvent: () => void 0,
-    onClick: () => void 0,
-  },
-  content: {
-    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,
-    buttonText: "Take survey",
-    buttonLink: "https://example.com/",
-    openNewTab: false,
-    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
-    rewardDuration: null,
-    expiryMessage: "Ends {endDate}",
-    startsOnMessage: "Starts {startDate}",
-    endedMessage: "Ended {endDate}",
-    finite: 0,
-    goal: 5,
-    locale: "en",
-  },
-  states: {
-    progress: 1,
-    loading: false,
-    loadingEvent: false,
-  },
-};
-const manyActions = {
-  callbacks: {
-    sendEvent: () => void 0,
-    onClick: () => void 0,
-  },
-  content: {
-    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,
-    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
-    showProgressBar: true,
-    steps: false,
-    progressBarUnit: "$",
-    buttonText: "Take survey",
-    buttonLink: "https://example.com/",
-    openNewTab: false,
-    rewardDuration: null,
-    expiryMessage: "Ends {endDate}",
-    startsOnMessage: "Starts {startDate}",
-    endedMessage: "Ended {endDate}",
-    finite: 0,
-    goal: 500,
-    locale: "en",
-  },
-  states: { progress: 100, loading: false, loadingEvent: false },
-};
-export const TaskCard = () => {
-  const expire = {
-    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, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
-    h(Resizer, null,
-      h("h4", null, "Repeatable"),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
-    h(Resizer, null,
-      h("h4", null, "Complete"),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
-    h(Resizer, null,
-      h("h4", null, "Unavailable"),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, 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, { states: { ...oneAction.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
-      h("h5", null))));
-};
-export const TaskCardRepeatable = () => {
-  return (h("div", { style: storyFrame },
-    h("div", { style: resizable },
-      h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 1 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
-      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, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 2 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
-      h("h5", null))));
-};
-export const TaskCardEndDate = () => {
-  const expire = {
-    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, { content: { ...oneAction.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat }, states: { ...oneAction.states, progress: 1 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
-      h("h5", null))));
-};
-export const TaskCardLoading = () => {
-  const loading = {
-    states: { loading: true, progress: 0, loadingEvent: false },
-  };
-  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({}, oneAction, loading)),
-      " ",
-      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({}, coupleActions, loading)),
-      " ",
-      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, loading)),
-      " ",
-      h("h5", null))));
-};
-export const TaskCardNotStarted = () => {
-  const expire = {
-    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, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
-      h("h5", null))));
-};
-export const TaskCardEnded = () => {
-  const expire = {
-    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, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
-      h("h5", null)),
-    h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
-      h("h5", null))));
-};
-export const ProgressBar = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarSteps = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarRepeatable = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-    repeatable: true,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarStepsRepeatable = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-    repeatable: true,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarFinite = () => {
-  const props = {
-    progress: 0,
-    goal: 500,
-    progressBarUnit: "$",
-    repeatable: true,
-    finite: 2,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
-};
-export const ProgressBarStepsFinite = () => {
-  const props = {
-    progress: 0,
-    steps: true,
-    goal: 5,
-    repeatable: true,
-    finite: 2,
-  };
-  return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: ProgressBarView })));
-};
+import { h } from "@stencil/core";
+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/",
+  parameters: {
+    scenario,
+  },
+};
+const storyFrame = {
+  display: "inline-flex",
+  gap: "32px",
+};
+const resizable = {
+  width: "347px",
+  minWidth: "347px",
+  resize: "horizontal",
+  height: "fit-content",
+  overflow: "hidden",
+};
+const oneAction = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    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,
+    steps: false,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    rewardDuration: null,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 1,
+    locale: "en",
+  },
+  states: {
+    progress: 0,
+    loading: false,
+    loadingEvent: false,
+  },
+};
+const coupleActions = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    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,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 5,
+    locale: "en",
+  },
+  states: {
+    progress: 1,
+    loading: false,
+    loadingEvent: false,
+  },
+};
+const manyActions = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    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,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    showProgressBar: true,
+    steps: false,
+    progressBarUnit: "$",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 500,
+    locale: "en",
+  },
+  states: { progress: 100, loading: false, loadingEvent: false },
+};
+export const TaskCard = () => {
+  const expire = {
+    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, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
+    h(Resizer, null,
+      h("h4", null, "Repeatable"),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
+    h(Resizer, null,
+      h("h4", null, "Complete"),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
+    h(Resizer, null,
+      h("h4", null, "Unavailable"),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, 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, { states: { ...oneAction.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
+      h("h5", null))));
+};
+export const TaskCardRepeatable = () => {
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 1 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
+      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, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 2 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
+      h("h5", null))));
+};
+export const TaskCardEndDate = () => {
+  const expire = {
+    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, { content: { ...oneAction.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat }, states: { ...oneAction.states, progress: 1 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
+      h("h5", null))));
+};
+export const TaskCardLoading = () => {
+  const loading = {
+    states: { loading: true, progress: 0, loadingEvent: false },
+  };
+  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({}, oneAction, loading)),
+      " ",
+      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({}, coupleActions, loading)),
+      " ",
+      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, loading)),
+      " ",
+      h("h5", null))));
+};
+export const TaskCardNotStarted = () => {
+  const expire = {
+    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, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
+      h("h5", null))));
+};
+export const TaskCardEnded = () => {
+  const expire = {
+    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, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
+      h("h5", null))));
+};
+export const ProgressBar = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarSteps = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarRepeatable = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+    repeatable: true,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarStepsRepeatable = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    repeatable: true,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarFinite = () => {
+  const props = {
+    progress: 0,
+    goal: 500,
+    progressBarUnit: "$",
+    repeatable: true,
+    finite: 2,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarStepsFinite = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    repeatable: true,
+    finite: 2,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: ProgressBarView })));
+};