@saasquatch/mint-components 1.3.2-0 → 1.3.2-12

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

@@ -1,8 +1,11 @@
 import { h } from "@stencil/core";
-import { MatrixStory } from "./Matrix";
-import { ProgressBar as ProgressBarView, TaskCardView, } from "./sqm-task-card-view";
+import { TaskCardView } from "./sqm-task-card-view";
+import scenario from "./sqm-task-card.feature";
 export default {
-  title: "Components/Task Card",
+  title: "Components/Task Card/",
+  parameters: {
+    scenario,
+  },
 };
 const resizable = {
   width: "347px",
@@ -13,57 +16,72 @@ const resizable = {
 };
 export const NotRepeatable = () => {
   const oneAction = {
-    points: 20,
-    title: "Complete a survey",
+    rewardAmount: 20,
+    showExpiry: false,
+    rewardUnit: "Points",
+    cardTitle: "Complete a survey",
+    repeatable: false,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Take survey",
-    onClick: () => { },
+    goal: 1,
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
-    title: "Comment on 5 articles",
-    progress: 1,
+    rewardAmount: 40,
+    rewardUnit: "Points",
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
+    showExpiry: false,
     goal: 5,
-    steps: 1,
+    repeatable: false,
+    steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    onClick: () => { },
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
-    title: "Spend $500 at our Store",
-    progress: 230,
+    rewardAmount: 150,
+    rewardUnit: "Points",
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
+    showExpiry: false,
     goal: 500,
-    unit: "$",
+    repeatable: false,
+    progressBarUnit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    onClick: () => { },
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction)),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { complete: true })),
+      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)),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
       " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      h("h5", null,
-        "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(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
       " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
@@ -72,60 +90,75 @@ export const NotRepeatable = () => {
 };
 export const NotRepeatableWithExpiry = () => {
   const oneAction = {
-    points: 20,
-    title: "Complete a survey",
+    rewardAmount: 20,
+    rewardUnit: "Points",
+    cardTitle: "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: () => { },
+    goal: 1,
+    showExpiry: true,
+    repeatable: false,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
-    title: "Comment on 5 articles",
-    progress: 1,
+    rewardAmount: 40,
+    rewardUnit: "Points",
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
     goal: 5,
-    steps: 1,
+    steps: true,
     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: () => { },
+    showExpiry: true,
+    repeatable: false,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
-    title: "Spend $500 at our Store",
-    progress: 230,
+    rewardAmount: 150,
+    rewardUnit: "Points",
+    repeatable: false,
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
     goal: 500,
-    unit: "$",
+    progressBarUnit: "$",
     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: () => { },
+    showExpiry: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction)),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { complete: true })),
+      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)),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
       " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      h("h5", null,
-        "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(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
       " ",
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
@@ -134,40 +167,53 @@ export const NotRepeatableWithExpiry = () => {
 };
 export const Repeatable = () => {
   const oneAction = {
-    points: 20,
-    title: "Complete a survey",
+    rewardAmount: 20,
+    rewardUnit: "Points",
+    showExpiry: false,
+    cardTitle: "Complete a survey",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
-    repeatable: 0,
     buttonText: "Take survey",
-    onClick: () => { },
+    goal: 1,
+    repeatable: true,
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
-    title: "Comment on 5 articles",
-    goal: 5,
-    steps: 1,
+    rewardAmount: 40,
+    rewardUnit: "Points",
+    showExpiry: false,
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
     repeatable: true,
+    goal: 5,
+    steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    onClick: () => { },
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
-    title: "Spend $500 at our Store",
-    goal: 500,
+    rewardAmount: 150,
+    rewardUnit: "Points",
+    showExpiry: false,
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
     repeatable: true,
-    unit: "$",
+    goal: 500,
+    progressBarUnit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    onClick: () => { },
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction)),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { repeatable: 1, complete: true })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
       " ",
       h("h5", null)),
     h("div", { style: resizable },
@@ -183,9 +229,6 @@ export const Repeatable = () => {
       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"),
@@ -200,50 +243,60 @@ export const Repeatable = () => {
       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",
+    rewardAmount: 20,
+    rewardUnit: "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: 0,
     buttonText: "Take survey",
-    onClick: () => { },
+    goal: 1,
+    repeatable: true,
+    showExpiry: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
-    title: "Comment on 5 articles",
-    expire: "Nov 30, 2021",
-    goal: 5,
-    steps: 1,
+    rewardAmount: 40,
+    rewardUnit: "Points",
+    cardTitle: "Comment on 5 articles",
+    showProgressBar: true,
     repeatable: true,
+    goal: 5,
+    steps: true,
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Start reading",
-    onClick: () => { },
+    showExpiry: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
-    title: "Spend $500 at our Store",
-    expire: "Nov 30, 2021",
-    goal: 500,
+    rewardAmount: 150,
+    rewardUnit: "Points",
+    cardTitle: "Spend $500 at our Store",
+    showProgressBar: true,
     repeatable: true,
-    unit: "$",
+    goal: 500,
+    progressBarUnit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    onClick: () => { },
+    showExpiry: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
-      h(TaskCardView, Object.assign({}, oneAction)),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { repeatable: 1, complete: true })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
       " ",
       h("h5", null)),
     h("div", { style: resizable },
@@ -259,9 +312,6 @@ export const RepeatableWithExpiry = () => {
       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"),
@@ -276,16 +326,5 @@ export const RepeatableWithExpiry = () => {
       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 })));
-};

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,7 @@
+import { h } from "@stencil/core";
+export const gift = () => {
+  return (h("svg", { width: 16, height: 16, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { d: "M15 5H9v11h4.5a1 1 0 001-1V9h.5a1 1 0 001-1V6a1 1 0 00-1-1zM1.5 9v6a1 1 0 001 1H7V5H1a1 1 0 00-1 1v2a1 1 0 001 1h.5z", fill: "var(--sl-color-primary-200)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.5 9v1h13V9h-13z", fill: "var(--sl-color-primary-300)" }),
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M14 2.71c0 .886-1.33 2.227-2 2.29H9v11H7.002V5H4.588C3.212 4.702 2 3.645 2 2.52 2 1.426 2.476.558 3.342.183 4.169-.176 5.125.02 5.88.545c.927.643 1.447 1.851 1.919 2.947l.123.286.12-.272C8.51 2.45 9.045 1.243 9.94.596c.793-.573 1.801-.79 2.672-.397.9.405 1.388 1.336 1.388 2.51zM10.612 1.5c.48-.347 1.056-.41 1.548 0 .428.357.45.525.506.93l.01.07c0 .599-.516 1.5-1.032 1.5-.366 0-.653-.003-.922-.006-.49-.005-.92-.01-1.657.006.14-.272.252-.533.36-.782.285-.667.534-1.246 1.187-1.718zm-5.673 0c-.233-.161-.766-.09-.987.006-.183.08-.456.32-.456 1.015 0 .674 1.092 1.257 1.092 1.257S5.454 4 7.002 4c-.527-1.305-1.273-1.951-2.063-2.5z", fill: "var(--sl-color-primary-600)" })));
+};