@saasquatch/mint-components 1.3.3-7 → 1.5.0-1

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

@@ -0,0 +1,412 @@
+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 = {
+  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,
+};
+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",
+  };
+  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 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      " ",
+      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("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { 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("h5", null),
+      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: 1, repeatable: true })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7, repeatable: true })),
+      h("h5", null),
+      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: 100, repeatable: true })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650, repeatable: true })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000, repeatable: true })),
+      h("h5", null))));
+};
+export const TaskCardRepeatableFinite = () => {
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 2, repeatable: true, finite: 2 })),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 2, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10, repeatable: true, finite: 2 })),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 12, repeatable: true, finite: 3 })),
+      h("h5", null),
+      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({}, 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({}, 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, expireRepeat)),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, expireRepeat)),
+      " ",
+      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({}, 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 = {
+    showExpiry: true,
+    rewardDuration: DateTime.now().plus({ days: 1 }).toISO() +
+      "/" +
+      DateTime.now().plus({ days: 2 }).toISO(),
+  };
+  const expireRepeat = { ...expire, repeatable: true };
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
+      h("h5", null))));
+};
+export const TaskCardEnded = () => {
+  const expire = {
+    showExpiry: true,
+    rewardDuration: DateTime.now().minus({ days: 2 }).toISO() +
+      "/" +
+      DateTime.now().minus({ days: 1 }).toISO(),
+  };
+  const expireRepeat = { ...expire, repeatable: true };
+  return (h("div", { style: storyFrame },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expireRepeat)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 }, expireRepeat)),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expireRepeat)),
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expireRepeat)),
+      h("h5", null))));
+};
+export const 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 })));
+};

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

@@ -0,0 +1,41 @@
+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";
+export default {
+  title: "Hooks / useTaskCard",
+};
+function setupGraphQL() {
+  const id = "sam+klip@saasquat.ch";
+  const accountId = id;
+  const programId = "klip-referral-program";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a74miwdpofztj",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: JWT,
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const TaskCard = createHookStory(() => {
+  setupGraphQL();
+  const props = {
+    listType: "",
+    render: () => { },
+    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 }));
+});

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+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" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9V10H14.5V9H1.5Z", fill: "#BE9720" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.70949C14 3.59565 12.6694 4.93746 12 5H9V16H7.00179V5H4.58792C3.21247 4.70182 2 3.64537 2 2.52072C2 1.42474 2.47603 0.556701 3.34184 0.182041C4.16921 -0.175986 5.12452 0.0203328 5.87976 0.544666C6.80676 1.18825 7.32679 2.3963 7.79856 3.49226C7.83996 3.58845 7.88099 3.68378 7.9219 3.77778C7.96173 3.68865 8.00186 3.59793 8.0425 3.50608C8.50995 2.44948 9.04359 1.24325 9.9404 0.59563C10.7332 0.0231438 11.741 -0.193157 12.6121 0.198945C13.5129 0.604397 14 1.53453 14 2.70949ZM10.6123 1.5C11.0928 1.15305 11.668 1.09012 12.1597 1.5C12.5879 1.85694 12.6108 2.02497 12.6658 2.42926L12.6755 2.5C12.6755 3.09851 12.1597 4 11.6439 4C11.2785 4 10.9914 3.99691 10.7224 3.99402C10.2319 3.98875 9.80131 3.98412 9.06496 4C9.20533 3.72786 9.31743 3.46669 9.42434 3.21761C9.71026 2.55143 9.95907 1.97176 10.6123 1.5ZM4.93861 1.5C4.70607 1.33855 4.17281 1.4106 3.95166 1.5063C3.76894 1.58537 3.49602 1.82658 3.49602 2.52072C3.49602 3.19524 4.58792 3.77778 4.58792 3.77778C4.58792 3.77778 5.45441 4 7.00179 4C6.47506 2.69451 5.7289 2.04867 4.93861 1.5Z", fill: "#EB5757" })));
+};