@saasquatch/mint-components 1.3.2-2 → 1.3.2-20

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

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

@@ -0,0 +1,370 @@
+import { h } from "@stencil/core";
+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, expired = false, finite = 0, } = props;
+  //   console.log("progress bar props", props);
+  const gift1 = SVGs.gift();
+  const gift2 = SVGs.gift();
+  const gift3 = SVGs.gift();
+  var items = [];
+  var columns = "";
+  if (repeatable) {
+    if (steps) {
+      addStepsRepeatable();
+    }
+    else {
+      addLinearRepeatable();
+    }
+  }
+  // non repeatable
+  else {
+    if (steps) {
+      addSteps();
+    }
+    else {
+      addLinear();
+    }
+  }
+  const style = {
+    ProgressBar: {
+      marginTop: steps ? "calc(-1*var(--sl-spacing-x-small))" : "",
+      "& .progress-bar": {
+        height: "0",
+        marginTop: steps
+          ? "var(--sl-spacing-medium)"
+          : "var(--sl-spacing-large)",
+        filter: expired ? "grayscale(1)" : "",
+        marginBottom: "var(--sl-spacing-xxx-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+        fontSize: "var(--sl-font-size-x-small)",
+        display: "grid",
+        gridTemplateColumns: columns,
+        lineHeight: "45px",
+        userSelect: "none",
+      },
+      "& .progress-bar.repeatable-steps": {
+        marginLeft: "var(--sl-spacing-x-small)",
+      },
+      "& .filled:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "var(--sl-color-primary-300)",
+      },
+      "& .progress": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .progress::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        display: "flex",
+        backgroundColor: "var(--sl-color-primary-300)",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .progress.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .progress.top": {
+        position: "relative",
+        top: "-40px",
+      },
+      "& .progress.top:after": {
+        top: "-16%",
+      },
+      "& .empty": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .empty::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        border: "2px solid #E0E0E0",
+        margin: "-2px",
+        display: "flex",
+        backgroundColor: "white",
+        borderRadius: "50%",
+        position: "relative",
+        left: "47%",
+        top: "-85%",
+      },
+      "& .empty.bg:after": {
+        width: "0",
+        height: "0",
+        border: "none",
+      },
+      "& .remain:after": {
+        content: '""',
+        display: "flex",
+        width: "100%",
+        height: "4px",
+        borderRadius: "4px",
+        backgroundColor: "#E0E0E0",
+      },
+      "& .gift.bw": {
+        filter: "grayscale(100%)",
+      },
+      "& .gift.start": {
+        transform: "scale(80%)",
+        top: "-20px",
+      },
+      "& .gift": {
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+        position: "relative",
+        display: "list-item",
+        listStyleType: "none",
+        top: "-18px",
+        filter: goal <= progress ? "" : "grayscale(100%)",
+        zIndex: "1",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.ProgressBar },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: (!Boolean(finite) && progress >= 2 * goal) ||
+        (Boolean(finite) && progress > 2 * goal)
+        ? "progress-bar repeatable-steps"
+        : "progress-bar" }, items)));
+  function clamp(x, min, max) {
+    return Math.min(Math.max(x, min), max);
+  }
+  function addLinear() {
+    const ratio = progress / goal;
+    columns =
+      clamp(ratio, 0, 1) + "fr 0fr " + clamp(1 - ratio, 0, 1) + "fr 0fr 0fr";
+    items.push(h("div", { class: "filled" }));
+    items.push(h("div", { class: clamp(progress, 0, goal) == goal ? "progress top bg" : "progress top" }, clamp(progress, 0, goal) == goal
+      ? ""
+      : progressBarUnit + clamp(progress, 0, goal)));
+    items.push(h("div", { class: "remain" }));
+    items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+    items.push(h("div", { class: "gift" }, gift1));
+  }
+  function addSteps() {
+    let ratio = 1 / goal;
+    for (let i = 1; i < goal; i++) {
+      columns += ratio + "fr 0fr ";
+      if (i > progress) {
+        items.push(h("div", { class: "remain" }));
+        items.push(h("div", { class: "empty" }, i));
+      }
+      else {
+        items.push(h("div", { class: "filled" }));
+        items.push(h("div", { class: "progress" }, i));
+      }
+    }
+    columns += ratio + "fr 0fr ";
+    // reward success
+    if (goal <= progress) {
+      columns += "0fr ";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, goal));
+      items.push(h("div", { class: "gift" }, gift1));
+    }
+    // reward fail
+    else {
+      columns += "0fr ";
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "empty bg" }, goal));
+      items.push(h("div", { class: "gift" }, gift1));
+    }
+  }
+  function addLinearRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    let ratio = ((progress % goal) / goal) * 0.5;
+    // 0 repetition
+    if (repetitions == 0) {
+      columns = ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr 0.5fr 0fr 0fr";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+      items.push(h("div", { class: "gift bw" }, gift2));
+    }
+    // single repetition
+    else if (repetitions == 1) {
+      columns =
+        "0.5fr 0fr 0fr " + ratio + "fr 0fr " + (0.5 - ratio) + "fr 0fr 0fr";
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal));
+      items.push(h("div", { class: "gift" }, gift1));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal ? "progress top bg" : "progress top" }, progress == goal ? "" : progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * 2));
+      items.push(h("div", { class: "gift bw" }, gift2));
+    }
+    // finite repetition hit
+    else if (finite && repetitions >= finite) {
+      if (repetitions > 2) {
+        items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 2)));
+        items.push(h("div", { class: "gift start" }, gift1));
+        columns = "0fr 0fr 0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+      }
+      else {
+        columns = "0.5fr 0fr 0fr 0.5fr 0fr 0fr";
+      }
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (finite - 1)));
+      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * finite));
+      items.push(h("div", { class: "gift" }, gift3));
+    }
+    // multiple repetitions
+    else {
+      columns =
+        "0fr 0fr 0.5fr 0fr 0fr " +
+          ratio +
+          "fr 0fr " +
+          (0.5 - ratio) +
+          "fr 0fr 0fr";
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions - 1)));
+      items.push(h("div", { class: "gift start" }, gift1));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * repetitions));
+      items.push(h("div", { class: "gift" }, gift2));
+      items.push(h("div", { class: "filled" }));
+      items.push(h("div", { class: progress == goal * repetitions ? "progress top bg" : "progress top" }, progress == goal * repetitions ? "" : progressBarUnit + progress));
+      items.push(h("div", { class: "remain" }));
+      items.push(h("div", { class: "progress bg" }, progressBarUnit + goal * (repetitions + 1)));
+      items.push(h("div", { class: "gift bw" }, gift3));
+    }
+  }
+  function addStepsRepeatable() {
+    let repetitions = Math.floor(progress / goal);
+    // no or single repetition
+    if (repetitions < 2) {
+      let ratio = 1 / goal;
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i > progress) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, goal));
+            items.push(h("div", { class: "gift bw" }, gift1));
+          }
+          else if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, goal * 2));
+            items.push(h("div", { class: "gift bw" }, gift2));
+          }
+          else {
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty" }, i));
+          }
+        }
+        else if (i == goal) {
+          columns += "0fr ";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, i));
+          items.push(h("div", { class: "gift" }, gift3));
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i));
+        }
+      }
+    }
+    // finite repetition hit
+    else if (finite && repetitions >= finite) {
+      let ratio = 1 / goal;
+      if (repetitions > 2) {
+        columns += "0fr 0fr ";
+        items.push(h("div", { class: "progress bg" }, goal * (finite - 2)));
+        items.push(h("div", { class: "gift start" }, gift1));
+      }
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i > progress) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
+            items.push(h("div", { class: "gift bw" }, gift1));
+          }
+        }
+        else if (i == goal) {
+          columns += "0fr ";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, goal * (finite - 1)));
+          items.push(h("div", { class: "gift" }, gift2));
+        }
+        else if (i == goal * 2) {
+          columns += "0fr 0fr";
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress bg" }, goal * finite));
+          items.push(h("div", { class: "gift" }, gift3));
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i + goal * (finite - 2)));
+        }
+      }
+    }
+    // case repetition many
+    else {
+      let position = (progress % goal) + goal;
+      let ratio = 1 / goal;
+      columns += "0fr 0fr ";
+      items.push(h("div", { class: "progress bg" }, goal * (repetitions - 1)));
+      items.push(h("div", { class: "gift start" }, gift1));
+      for (let i = 1; i < goal * 2 + 1; i++) {
+        columns += ratio + "fr 0fr ";
+        if (i <= goal) {
+          if (i == goal) {
+            columns += "0fr ";
+            items.push(h("div", { class: "filled" }));
+            items.push(h("div", { class: "progress bg" }, i + goal * (repetitions - 1)));
+            items.push(h("div", { class: "gift" }, gift2));
+          }
+          else {
+            items.push(h("div", { class: "filled" }));
+            items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+          }
+        }
+        else if (i > position) {
+          if (i == goal * 2) {
+            columns += "0fr 0fr";
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty bg" }, i + goal * (repetitions - 1)));
+            items.push(h("div", { class: "gift bw" }, gift3));
+          }
+          else {
+            items.push(h("div", { class: "remain" }));
+            items.push(h("div", { class: "empty" }, i + goal * (repetitions - 1)));
+          }
+        }
+        else {
+          items.push(h("div", { class: "filled" }));
+          items.push(h("div", { class: "progress" }, i + goal * (repetitions - 1)));
+        }
+      }
+    }
+  }
+}