@saasquatch/mint-components 1.3.2-4 → 1.3.2-8

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

@@ -1,7 +1,11 @@
 import { h } from "@stencil/core";
-import { 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",
@@ -10,42 +14,47 @@ const resizable = {
   height: "fit-content",
   overflow: "hidden",
 };
-export const Default = () => {
-  const oneAction = {
-    points: 20,
-    cardTitle: "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",
-    buttonOnClick: () => { },
-  };
-  // @ts-ignore
-  return h(TaskCardView, null);
-};
 export const NotRepeatable = () => {
   const oneAction = {
-    points: 20,
+    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",
     goal: 1,
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
+    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",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
+    rewardUnit: "Points",
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
+    showExpiry: false,
     goal: 500,
+    repeatable: false,
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
@@ -66,13 +75,6 @@ export const NotRepeatable = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -84,46 +86,52 @@ export const NotRepeatable = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
-      " ",
       h("h5", null))));
 };
 export const NotRepeatableWithExpiry = () => {
   const oneAction = {
-    points: 20,
+    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.",
     buttonText: "Take survey",
     goal: 1,
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpiry: true,
+    repeatable: false,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
+    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.",
     buttonText: "Start reading",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpiry: true,
+    repeatable: false,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
+    rewardUnit: "Points",
+    repeatable: false,
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     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",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    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 },
@@ -144,13 +152,6 @@ export const NotRepeatableWithExpiry = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 9 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -162,36 +163,40 @@ export const NotRepeatableWithExpiry = () => {
       h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
       " ",
-      h("h5", null),
-      h("h5", null,
-        "Progress ",
-        ">",
-        " Goal"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 700 })),
-      " ",
       h("h5", null))));
 };
 export const Repeatable = () => {
   const oneAction = {
-    points: 20,
+    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.",
     buttonText: "Take survey",
     goal: 1,
     repeatable: true,
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
+    rewardUnit: "Points",
+    showExpiry: false,
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
     repeatable: 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.",
     buttonText: "Start reading",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
+    rewardUnit: "Points",
+    showExpiry: false,
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     repeatable: true,
@@ -199,6 +204,8 @@ export const Repeatable = () => {
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   return (h("div", { style: { display: "inline-flex", gap: "32px" } },
     h("div", { style: resizable },
@@ -222,18 +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(TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -248,45 +243,41 @@ 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),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
-      " ",
       h("h5", null))));
 };
 export const RepeatableWithExpiry = () => {
   const oneAction = {
-    points: 20,
+    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.",
     buttonText: "Take survey",
     goal: 1,
     repeatable: true,
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpiry: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    showProgressBar: false,
+    loading: false,
   };
   const coupleActions = {
-    points: 40,
+    rewardAmount: 40,
+    rewardUnit: "Points",
     cardTitle: "Comment on 5 articles",
     showProgressBar: true,
     repeatable: 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.",
     buttonText: "Start reading",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    showExpiry: true,
+    dateExpires: "Nov 1, 2021",
+    buttonLink: "https://example.com/",
+    loading: false,
   };
   const manyActions = {
-    points: 150,
+    rewardAmount: 150,
+    rewardUnit: "Points",
     cardTitle: "Spend $500 at our Store",
     showProgressBar: true,
     repeatable: true,
@@ -294,8 +285,10 @@ export const RepeatableWithExpiry = () => {
     unit: "$",
     description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
     buttonText: "Visit our Store",
-    expire: true,
-    dateExpire: "Nov 1, 2021",
+    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 },
@@ -319,18 +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(TaskCardView, Object.assign({}, coupleActions, { progress: 15 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 17 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 22 })),
-      " ",
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
@@ -345,155 +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),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1500 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1700 })),
-      " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 2200 })),
-      " ",
       h("h5", null))));
 };
-// export const Repeatable = () => {
-//   const oneAction = {
-//     points: 20,
-//     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",
-//     buttonOnClick: () => {},
-//   };
-//   const coupleActions = {
-//     points: 40,
-//     cardTitle: "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",
-//     buttonOnClick: () => {},
-//   };
-//   const manyActions = {
-//     points: 150,
-//     cardTitle: "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",
-//     buttonOnClick: () => {},
-//   };
-//   return (
-//     <div style={{ display: "inline-flex", gap: "32px" }}>
-//       <div style={resizable}>
-//         <h4>One Action</h4>
-//         <TaskCardView {...oneAction} /> <h5 />
-//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>A Couple Actions</h4>
-//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>Many Actions</h4>
-//         <TaskCardView {...manyActions} progress={100} /> <h5 />
-//         <TaskCardView {...manyActions} progress={500} /> <h5 />
-//         <TaskCardView {...manyActions} progress={650} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
-//       </div>
-//     </div>
-//   );
-// };
-// export const RepeatableWithExpiry = () => {
-//   const oneAction = {
-//     points: 20,
-//     cardTitle: "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",
-//     buttonOnClick: () => {},
-//   };
-//   const coupleActions = {
-//     points: 40,
-//     cardTitle: "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",
-//     buttonOnClick: () => {},
-//   };
-//   const manyActions = {
-//     points: 150,
-//     cardTitle: "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",
-//     buttonOnClick: () => {},
-//   };
-//   return (
-//     <div style={{ display: "inline-flex", gap: "32px" }}>
-//       <div style={resizable}>
-//         <h4>One Action</h4>
-//         <TaskCardView {...oneAction} /> <h5 />
-//         <TaskCardView {...oneAction} repeatable={1} complete /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>A Couple Actions</h4>
-//         <TaskCardView {...coupleActions} progress={1} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={5} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={7} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={10} /> <h5 />
-//         <TaskCardView {...coupleActions} progress={12} /> <h5 />
-//       </div>
-//       <div style={resizable}>
-//         <h4>Many Actions</h4>
-//         <TaskCardView {...manyActions} progress={100} /> <h5 />
-//         <TaskCardView {...manyActions} progress={500} /> <h5 />
-//         <TaskCardView {...manyActions} progress={650} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1000} /> <h5 />
-//         <TaskCardView {...manyActions} progress={1200} /> <h5 />
-//       </div>
-//     </div>
-//   );
-// };
-// export const ProgressBar = () => {
-//   const props = {
-//     goal: 5,
-//   };
-//   return (
-//     <div>
-//       <MatrixStory
-//         matrix={{ progress: [1, 2, 5], steps: [0, 1], repeatable: [false] }}
-//         props={props}
-//         Component={ProgressBarView}
-//       />
-//       <MatrixStory
-//         matrix={{ progress: [2, 5, 7, 12], steps: [0, 1], repeatable: [true] }}
-//         props={props}
-//         Component={ProgressBarView}
-//       />
-//     </div>
-//   );
-// };

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)" })));
+};