@saasquatch/mint-components 1.3.1-7 → 1.3.2-0

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

@@ -0,0 +1,291 @@
+import { h } from "@stencil/core";
+import { MatrixStory } from "./Matrix";
+import { ProgressBar as ProgressBarView, TaskCardView, } from "./sqm-task-card-view";
+export default {
+  title: "Components/Task Card",
+};
+const resizable = {
+  width: "347px",
+  minWidth: "347px",
+  resize: "horizontal",
+  height: "fit-content",
+  overflow: "hidden",
+};
+export const NotRepeatable = () => {
+  const oneAction = {
+    points: 20,
+    title: "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",
+    onClick: () => { },
+  };
+  const coupleActions = {
+    points: 40,
+    title: "Comment on 5 articles",
+    progress: 1,
+    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",
+    onClick: () => { },
+  };
+  const manyActions = {
+    points: 150,
+    title: "Spend $500 at our Store",
+    progress: 230,
+    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",
+    onClick: () => { },
+  };
+  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { complete: true })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      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)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      h("h5", null))));
+};
+export const NotRepeatableWithExpiry = () => {
+  const oneAction = {
+    points: 20,
+    title: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    expire: "Nov 30, 2021",
+    buttonText: "Take survey",
+    onClick: () => { },
+  };
+  const coupleActions = {
+    points: 40,
+    title: "Comment on 5 articles",
+    progress: 1,
+    goal: 5,
+    steps: 1,
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    expire: "Nov 30, 2021",
+    buttonText: "Start reading",
+    onClick: () => { },
+  };
+  const manyActions = {
+    points: 150,
+    title: "Spend $500 at our Store",
+    progress: 230,
+    goal: 500,
+    unit: "$",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    expire: "Nov 30, 2021",
+    buttonText: "Visit our Store",
+    onClick: () => { },
+  };
+  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { complete: true })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      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)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      h("h5", null))));
+};
+export const Repeatable = () => {
+  const oneAction = {
+    points: 20,
+    title: "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",
+    onClick: () => { },
+  };
+  const coupleActions = {
+    points: 40,
+    title: "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",
+    onClick: () => { },
+  };
+  const manyActions = {
+    points: 150,
+    title: "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",
+    onClick: () => { },
+  };
+  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { repeatable: 1, complete: true })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
+      " ",
+      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("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
+      " ",
+      h("h5", null))));
+};
+export const RepeatableWithExpiry = () => {
+  const oneAction = {
+    points: 20,
+    title: "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",
+    onClick: () => { },
+  };
+  const coupleActions = {
+    points: 40,
+    title: "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",
+    onClick: () => { },
+  };
+  const manyActions = {
+    points: 150,
+    title: "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",
+    onClick: () => { },
+  };
+  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { repeatable: 1, complete: true })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12 })),
+      " ",
+      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("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1200 })),
+      " ",
+      h("h5", null))));
+};
+export const ProgressBar = () => {
+  const props = {
+    goal: 5,
+  };
+  return (h("div", null,
+    h(MatrixStory, { matrix: { progress: [1, 2, 5], steps: [0, 1], repeatable: [false] }, props: props, Component: ProgressBarView }),
+    h(MatrixStory, { matrix: { progress: [2, 5, 7, 12], steps: [0, 1], repeatable: [true] }, props: props, Component: ProgressBarView })));
+};