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

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

@@ -1,12 +1,20 @@
 import { h } from "@stencil/core";
+import { MatrixStory } from "./Matrix";
 import { TaskCardView } from "./sqm-task-card-view";
-import scenario from "./sqm-task-card.feature";
+import { ProgressBarView } from "./progress-bar/progress-bar-view";
+import scenarioTaskCard from "./sqm-task-card.feature";
+import scenarioProgressBar from "./progress-bar/progress-bar.feature";
+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",
@@ -14,49 +22,55 @@ const resizable = {
   height: "fit-content",
   overflow: "hidden",
 };
-export const NotRepeatable = () => {
-  const oneAction = {
-    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 = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: true,
-    showExpiry: false,
-    goal: 5,
-    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 = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    showExpiry: false,
-    goal: 500,
-    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",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+const oneAction = {
+  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: false,
+  showProgressBar: false,
+  progress: 0,
+  goal: 1,
+  buttonText: "Take survey",
+  buttonLink: "https://example.com/",
+  showExpiry: false,
+  dateExpires: null,
+  loading: false,
+};
+const coupleActions = {
+  rewardAmount: 40,
+  rewardUnit: "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/",
+  showExpiry: false,
+  dateExpires: null,
+  loading: false,
+};
+const manyActions = {
+  rewardAmount: 150,
+  rewardUnit: "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/",
+  showExpiry: false,
+  dateExpires: null,
+  loading: false,
+};
+export const TaskCardNotRepeatable = () => {
+  return (h("div", { style: storyFrame },
     h("div", { style: resizable },
       h("h4", null, "One Action"),
       h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
@@ -67,9 +81,6 @@ export const NotRepeatable = () => {
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "A Couple Actions"),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 0 })),
-      " ",
-      h("h5", null),
       h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
       " ",
       h("h5", null),
@@ -78,9 +89,6 @@ export const NotRepeatable = () => {
       h("h5", null)),
     h("div", { style: resizable },
       h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 0 })),
-      " ",
-      h("h5", null),
       h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
       " ",
       h("h5", null),
@@ -88,243 +96,180 @@ export const NotRepeatable = () => {
       " ",
       h("h5", null))));
 };
-export const NotRepeatableWithExpiry = () => {
-  const oneAction = {
-    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,
-    showExpiry: true,
-    repeatable: false,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    rewardAmount: 40,
-    rewardUnit: "Points",
-    cardTitle: "Comment on 5 articles",
-    showProgressBar: 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",
-    showExpiry: true,
-    repeatable: false,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    repeatable: false,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    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",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+export const TaskCardRepeatable = () => {
+  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, { progress: 0, repeatable: true })),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      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: 0 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
-      " ",
+      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: 0 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 230 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500, repeatable: true })),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
-      " ",
+      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 Repeatable = () => {
-  const oneAction = {
-    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 = {
-    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",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    showExpiry: false,
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    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",
-    buttonLink: "https://example.com/",
-    loading: false,
+export const TaskCardDateExpires = () => {
+  const expire = {
+    showExpiry: true,
+    dateExpires: "2021-12-01T08:00:00.000Z/2077-12-01T08:00:00.000Z",
   };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+  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 })),
+      h(TaskCardView, Object.assign({}, oneAction, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      h(TaskCardView, Object.assign({}, oneAction, expireRepeat)),
       " ",
       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, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      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({}, coupleActions, { progress: 7 })),
+      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({}, coupleActions, { progress: 10 })),
+      h(TaskCardView, Object.assign({}, oneAction, loading)),
       " ",
       h("h5", null)),
     h("div", { style: resizable },
-      h("h4", null, "Many Actions"),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      h("h4", null, "A Couple Actions"),
+      h(TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      h(TaskCardView, Object.assign({}, coupleActions, loading)),
       " ",
-      h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      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, { progress: 1000 })),
+      h(TaskCardView, Object.assign({}, manyActions, loading)),
       " ",
       h("h5", null))));
 };
-export const RepeatableWithExpiry = () => {
-  const oneAction = {
-    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,
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    showProgressBar: false,
-    loading: false,
-  };
-  const coupleActions = {
-    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",
-    showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
-  };
-  const manyActions = {
-    rewardAmount: 150,
-    rewardUnit: "Points",
-    cardTitle: "Spend $500 at our Store",
-    showProgressBar: true,
-    repeatable: true,
-    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",
+export const TaskCardExpired = () => {
+  const expire = {
     showExpiry: true,
-    dateExpires: "Nov 1, 2021",
-    buttonLink: "https://example.com/",
-    loading: false,
+    dateExpires: "2021-12-01T08:00:00.000Z/2021-12-01T08:00:00.000Z",
   };
-  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+  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 })),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, oneAction, { progress: 1 })),
+      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 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
-      " ",
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 1 }, expireRepeat)),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
-      " ",
+      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 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 }, expire)),
       " ",
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
-      " ",
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 }, expireRepeat)),
       h("h5", null),
-      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
-      " ",
+      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/progress-bar/progress-bar-view.js

@@ -3,7 +3,7 @@ import jss from "jss";
 import preset from "jss-preset-default";
 import * as SVGs from "./SVGs";
 export function ProgressBarView(props) {
-  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, } = props;
+  const { progress = 0, goal = 1, steps = false, progressBarUnit = "", repeatable = false, complete = false, expired = false, } = props;
   console.log("progress bar props", props);
   const gift1 = SVGs.gift();
   const gift2 = SVGs.gift();
@@ -32,7 +32,10 @@ export function ProgressBarView(props) {
     ProgressBar: {
       "& .progress-bar": {
         height: "15px",
-        marginTop: steps ? "var(--sl-spacing-x-medium)" : "var(--sl-spacing-large)",
+        marginTop: steps
+          ? "var(--sl-spacing-medium)"
+          : "var(--sl-spacing-large)",
+        filter: expired ? "grayscale(1)" : "",
         marginBottom: "var(--sl-spacing-xx-large)",
         marginRight: "var(--sl-spacing-x-small)",
         fontSize: "var(--sl-font-size-x-small)",
@@ -50,7 +53,9 @@ export function ProgressBarView(props) {
         width: "100%",
         height: "4px",
         borderRadius: "4px",
-        backgroundColor: complete ? "var(--sl-color-success-500)" : "var(--sl-color-primary-500)",
+        backgroundColor: complete
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-primary-500)",
       },
       "& .progress": {
         display: "block",
@@ -63,7 +68,9 @@ export function ProgressBarView(props) {
         width: "12px",
         height: "12px",
         display: "flex",
-        backgroundColor: complete ? "var(--sl-color-success-500)" : "var(--sl-color-primary-500)",
+        backgroundColor: complete
+          ? "var(--sl-color-success-500)"
+          : "var(--sl-color-primary-500)",
         borderRadius: "50%",
         position: "relative",
         left: "47%",
@@ -253,7 +260,7 @@ export function ProgressBarView(props) {
           }
           else {
             items.push(h("div", { class: "remain" }));
-            items.push(h("div", { class: "empty" }, progressBarUnit + i));
+            items.push(h("div", { class: "empty" }, i));
           }
         }
         else if (i == goal) {