@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -25,200 +25,217 @@ const resizable = {
   overflow: "hidden",
 };
 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,
+  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 = {
-  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,
+  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 = {
-  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,
+  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 = {
-    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(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 }))),
+      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, { progress: 2, repeatable: true })),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true }))),
+      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, { progress: 1 })),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }))),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
     h(Resizer, null,
       h("h4", null, "Unavailable"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 3 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 250 }, expireRepeat)))));
+      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, { progress: 0 })),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
-      " ",
+      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, { progress: 1 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
+      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, { progress: 230 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
+      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, { progress: 0, repeatable: true })),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true })),
-      " ",
+      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, { progress: 1, repeatable: true })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true })),
+      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, { progress: 100, repeatable: true })),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true })),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true })),
+      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
+      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, { progress: 0, repeatable: true, finite: 2 })),
-      " ",
+      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, { progress: 1, repeatable: true, finite: 2 })),
-      " ",
+      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, { progress: 2, repeatable: true, finite: 2 })),
-      " ",
+      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("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(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true, finite: 2 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 950, repeatable: true, finite: 2 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true, finite: 2 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1300, repeatable: true, finite: 3 })),
+      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, { progress: 1500, repeatable: true, finite: 3 })),
+      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, { progress: 2500, repeatable: true, finite: 3 })),
+      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, { progress: 2500, repeatable: true, finite: 4 })),
+      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, { progress: 2500, repeatable: true, finite: 5 })),
+      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 = {
-    showExpiry: true,
     rewardDuration: DateTime.now().minus({ days: 1 }).toISO() +
       "/" +
       DateTime.now().plus({ days: 1 }).toISO(),
@@ -227,31 +244,33 @@ export const TaskCardEndDate = () => {
   return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, expireRepeat)),
-      " ",
+      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({}, coupleActions, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, expireRepeat)),
-      " ",
+      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({}, manyActions, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, expireRepeat)),
-      " ",
+      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 = { loading: true };
+  const loading = {
+    states: { loading: true, progress: 0, loadingEvent: false },
+  };
   return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
@@ -280,7 +299,6 @@ export const TaskCardLoading = () => {
 };
 export const TaskCardNotStarted = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: DateTime.now().plus({ days: 1 }).toISO() +
       "/" +
       DateTime.now().plus({ days: 2 }).toISO(),
@@ -289,46 +307,37 @@ export const TaskCardNotStarted = () => {
   return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
-      " ",
+      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, { progress: 1 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
+      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, { progress: 100 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       h("h5", null))));
 };
 export const TaskCardEnded = () => {
   const expire = {
-    showExpiry: true,
     rewardDuration: DateTime.now().minus({ days: 2 }).toISO() +
       "/" +
       DateTime.now().minus({ days: 1 }).toISO(),
@@ -337,41 +346,33 @@ export const TaskCardEnded = () => {
   return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
-      " ",
+      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
-      " ",
+      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, { progress: 1 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
+      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, { progress: 100 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
+      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
       h("h5", null))));
 };
 export const ProgressBar = () => {
@@ -381,7 +382,7 @@ export const ProgressBar = () => {
     progressBarUnit: "$",
   };
   return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [-100, 0, 100, 500, 1000] }, props: props, Component: ProgressBarView })));
+    h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
 };
 export const ProgressBarSteps = () => {
   const props = {
@@ -391,7 +392,7 @@ export const ProgressBarSteps = () => {
     progressBarUnit: "$",
   };
   return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [-1, 0, 1, 5, 7] }, props: props, Component: ProgressBarView })));
+    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
 };
 export const ProgressBarRepeatable = () => {
   const props = {
@@ -401,7 +402,7 @@ export const ProgressBarRepeatable = () => {
     repeatable: true,
   };
   return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
+    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
 };
 export const ProgressBarStepsRepeatable = () => {
   const props = {
@@ -412,5 +413,17 @@ export const ProgressBarStepsRepeatable = () => {
     repeatable: true,
   };
   return (h("div", null,
-    h(MatrixStory, { matrix: { progress: [1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
+};
+export const ProgressBarStepsRepeatableFinite = () => {
+  const props = {
+    progress: 0,
+    steps: true,
+    goal: 5,
+    progressBarUnit: "$",
+    repeatable: true,
+    finite: 2,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: ProgressBarView })));
 };

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

@@ -2,7 +2,7 @@ import { setUserIdentity } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
 import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJhY2NvdW50SWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCJ9fQ.FMNZ6oajyr6SiCcRqKKdyPqvNTvWROQ60MKAyfvWGfc";
+const JWT = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbStrbGlwQHNhYXNxdWF0LmNoIiwiaWQiOiJzYW0ra2xpcEBzYWFzcXVhdC5jaCIsImVtYWlsIjoic2FtK2tsaXBAc2Fhc3F1YXQuY2giLCJsb2NhbGUiOiJlbiJ9fQ.a2nYYrSJ81FHXlCU-Sqp_-wquQizinHBhzwzULDzimg";
 export default {
   title: "Hooks / useTaskCard",
 };
@@ -37,5 +37,31 @@ export const TaskCard = createHookStory(() => {
     disconnectedCallback: () => { },
     ignored: true,
   };
-  return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true }));
+  return (h("sqm-task-card", { "card-title": "Comment on 5 articles", "button-text": "Start reading", goal: 5, steps: true, "show-progress-bar": true, "event-key": "testEvent", "open-new-tab": true }));
+});
+export const TaskCardFeed = createHookStory(() => {
+  setupGraphQL();
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-card-feed", null,
+    h("sqm-task-card", { "reward-amount": "75", "card-title": "Refer a Friend", description: "Invite a friend to Klip and get 75 points when they signup for a free trial or contact our us about an enterprise license.", "button-text": "Start referring", "button-link": "https://klip-staging.vercel.app/app/klip-rewards", goal: 1, repeatable: true, "completed-text": "", demoData: "", "ended-message": "", "event-key": "", "expiry-message": "", "progress-bar-unit": "", "reward-duration": "2022-01-04T08:00:00.000Z/2022-01-20T08:00:00.000Z", "reward-unit": "", "starts-on-message": "", "stat-type": "", "display-duration": "2022-01-04T08:00:00.000Z/2022-01-05T08:00:00.000Z" }),
+    h("sqb-program-section", { "program-id": "klip-loyalty" },
+      h("sqm-task-card", { "reward-amount": "50", "card-title": "Follow Us on Twitter", description: "Earn 50 points when you follow us on Twitter!", "button-text": "Follow", "button-link": "https://twitter.com/", goal: 1, "stat-type": "/programGoals/count/Follow-on-Social-Media", "open-new-tab": "true", "event-key": "socialFollow" })),
+    h("sqm-task-card", { "reward-amount": "250", goal: 500, "show-progress-bar": "true", "card-title": "Spend $500 on Klip Products", description: "Earn 250 points when you spend $500 or more on Klip products.", "button-text": "See plans", "button-link": "https://klip-staging.vercel.app/app/plans", "stat-type": "/customFields/purchaseTotal", "open-new-tab": "false" }),
+    h("sqb-program-section", { "program-id": "klip-loyalty" },
+      h("sqm-task-card", { "reward-amount": "25", goal: 1, "card-title": "Upload Your First Video", description: "Earn 25 points for exploring the Klip platform when you upload your first video.", "button-text": "Upload", "button-link": "https://klip-staging.vercel.app/app", "stat-type": "/programGoals/count/Record-First-Video", "open-new-tab": "false" })),
+    h("sqm-task-card", { "reward-amount": "100", goal: 5, repeatable: true, "show-progress-bar": "true", steps: true, "card-title": "Share 5 Videos", description: "Earn 100 points for collaborating each time you share 5 videos.", "button-text": "Share", "button-link": "https://klip-staging.vercel.app/app", "stat-type": "/customFields/videosShared", "open-new-tab": "false" }),
+    h("sqb-program-section", { "program-id": "klip-loyalty" },
+      h("sqm-task-card", { "reward-amount": "1", "reward-unit": "Free Month", goal: 1, "card-title": "Upgrade Your Plan", description: "Buy a Business or Enterprise plan and get 1 free month of Klip for being a committed customer.", "button-text": "Upgrade", "button-link": "https://klip-staging.vercel.app/app/plans", "stat-type": "/programGoals/count/Upgrade-Plan", "open-new-tab": "false" })),
+    h("sqm-task-card", { "reward-amount": "200", goal: 5, "show-progress-bar": "", "card-title": "Purchase 5 Seats", description: "Earn 200 points when you expand your Klip Team by purchasing 5 or more seats.", "button-text": "Purchase seats", "button-link": "https://klip-staging.vercel.app/app/plans", "stat-type": "/customFields/seatCount" }),
+    h("sqm-task-card", { "reward-amount": "250", goal: 1, "show-progress-bar": "", "card-title": "Upload 1 Hour of Video", description: "Record and upload an hour of video and get 250 points for being a super user.", "button-text": "Upload", "button-link": "https://klip-staging.vercel.app/app", "stat-type": "/customFields/videoHoursCount", "progress-bar-unit": "", "reward-unit": "Points" }),
+    h("sqb-program-section", { "program-id": "klip-loyalty" },
+      h("sqm-task-card", { "reward-amount": "100", goal: 1, "card-title": "Complete an NPS Survey", description: "Fill out our NPS survey and get 100 points for giving us honest feedback. Be sure to use your Klip account email when completing the survey.", "button-text": "Complete survey", "button-link": "https://y5tqgj96plv.typeform.com/to/p6N7lHUk", "stat-type": "/programGoals/count/NPS-Survey", "reward-unit": "Points", "open-new-tab": "true" })),
+    h("sqb-conditional-section", { condition: "'champion' in user.segments" },
+      h("sqb-program-section", { "program-id": "klip-loyalty" },
+        h("sqm-task-card", { "reward-amount": "$100", goal: 1, "card-title": "Complete a Case Study", description: "Write a Klip case study and earn a $100 Visa Gift Card for letting us know how Klip has helped your team succeed.", "button-text": "Complete case study", "button-link": "https://y5tqgj96plv.typeform.com/to/CPhkFBBW", "stat-type": "/programGoals/count/Case-Study", "reward-unit": "Visa Gift Card", "open-new-tab": "true" })))));
 });

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const gift = () => {
+export const Gift = () => {
   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" }),