@saasquatch/mint-components 1.3.1-6 → 1.3.2-10

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

@@ -0,0 +1,311 @@
+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, complete = false, } = props;
+  console.log("progress bar props", props);
+  const gift1 = SVGs.gift();
+  const gift2 = SVGs.gift();
+  const gift3 = SVGs.gift();
+  var items = [];
+  var columns = "";
+  var repetitions = Math.floor(progress / goal);
+  if (repeatable) {
+    if (steps) {
+      addStepsRepeatable();
+    }
+    else {
+      addLinearRepeatable();
+    }
+  }
+  // non repeatable
+  else {
+    if (steps) {
+      addSteps();
+    }
+    else {
+      addLinear();
+    }
+  }
+  const style = {
+    ProgressBar: {
+      "& .progress-bar": {
+        height: "15px",
+        marginTop: steps ? "var(--sl-spacing-x-medium)" : "var(--sl-spacing-large)",
+        marginBottom: "var(--sl-spacing-xx-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: complete ? "var(--sl-color-success-500)" : "var(--sl-color-primary-500)",
+      },
+      "& .progress": {
+        display: "block",
+        textAlign: "center",
+        marginLeft: "-100px",
+        marginRight: "-100px",
+      },
+      "& .progress::after": {
+        content: '""',
+        width: "12px",
+        height: "12px",
+        display: "flex",
+        backgroundColor: complete ? "var(--sl-color-success-500)" : "var(--sl-color-primary-500)",
+        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: repetitions > 1 ? "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" }, 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));
+    }
+    // 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" }, progressBarUnit + 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));
+        }
+      }
+    }
+    // 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)));
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import { h } from "@stencil/core";
+import { MatrixStory } from "../Matrix";
+import { ProgressBarView } from "./progress-bar-view";
+import scenario from "./progress-bar.feature";
+export default {
+  title: "Components/Task Card Progress Bar",
+  parameters: {
+    scenario,
+  },
+};
+export const Default = () => {
+  return h(ProgressBarView, 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/sqm-task-card-view.js

@@ -0,0 +1,173 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { HostBlock } from "../../global/mixins";
+import * as SVGs from "./SVGs";
+import { ProgressBarView, } from "./progress-bar/progress-bar-view";
+export function TaskCardView(props) {
+  const { rewardAmount, cardTitle, description, showProgressBar, progress = 0, goal, rewardUnit, repeatable, showExpiry, dateExpires, buttonText, buttonLink, loading, } = props;
+  console.log({ props });
+  const checkmark_circle = SVGs.checkmark_circle();
+  const arrow_left_right = SVGs.arrow_left_right();
+  const style = {
+    HostBlock: HostBlock,
+    TaskCard: {
+      "& .main > div": {
+        margin: "var(--sl-spacing-medium)",
+      },
+      "& .main": {
+        position: "relative",
+        boxSizing: "border-box",
+        minWidth: "347px",
+        background: "var(--sl-color-white)",
+        border: "1px solid var(--sl-color-gray-300)",
+        borderRadius: "var(--sl-border-radius-medium)",
+        fontSize: "var(--sl-font-size-small)",
+        lineHeight: "var(--sl-line-height-dense)",
+      },
+      "& .main.complete": {
+        background: "var(--sl-color-success-50)",
+        borderColor: "var(--sl-color-success-700)",
+      },
+    },
+    Header: {
+      display: "flex",
+      "& .icon": {
+        alignSelf: "center",
+        lineHeight: "0",
+        color: "var(--sl-color-success-700)",
+        fontSize: "var(--sl-font-size-large)",
+        marginRight: "var(--sl-spacing-x-small)",
+      },
+      "& .value": {
+        alignSelf: "center",
+        color: "var(--sl-color-black)",
+        fontSize: "var(--sl-font-size-x-large)",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        lineHeight: "100%",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        alignSelf: "end",
+        textTransform: "uppercase",
+        color: "var(--sl-color-gray-600)",
+        fontSize: "var(--sl-font-size-x-small)",
+        lineHeight: "var(--sl-font-size-medium)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+    },
+    Title: {
+      color: "var(--sl-color-black)",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    Footer: {
+      display: "flex",
+      "& .icon": {
+        fontSize: "var(--sl-font-size-xx-small)",
+        marginRight: "var(--sl-spacing-xx-small)",
+      },
+      "& .text": {
+        marginTop: "auto",
+        verticalAlign: "text-bottom",
+        fontSize: "var(--sl-font-size-x-small)",
+        color: "var(--sl-color-gray-600)",
+      },
+      "& .success": {
+        color: "var(--sl-color-success-600)!important",
+        fontWeight: "var(--sl-font-weight-semibold)",
+      },
+      "& .action": {
+        marginTop: "auto",
+        marginLeft: "auto",
+      },
+      "& sl-button.action::part(base) ": {
+        color: "var(--sl-color-white)",
+        background: "var(--sl-color-primary-500)",
+        border: "1px solid var(--sl-color-primary-500)",
+        borderRadius: "var(--sl-border-radius-medium)",
+      },
+      "& sl-button.action.completed::part(base) ": {
+        border: "1px solid var(--sl-color-gray-300)!important",
+        background: "var(--sl-color-gray-300)!important",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const showComplete = progress >= goal;
+  const repetitions = showProgressBar ? Math.floor(progress / goal) : progress;
+  const taskComplete = showComplete && repeatable === false;
+  console.log({ showProgressBar, loading });
+  return (h("div", { class: sheet.classes.TaskCard },
+    h("div", { class: showComplete ? "main complete" : "main" },
+      h("style", { type: "text/css" }, styleString),
+      h("div", { class: sheet.classes.Header },
+        showComplete && h("span", { class: "icon" }, checkmark_circle),
+        h("span", { class: "value" }, rewardAmount),
+        h("span", { class: "text" }, rewardUnit)),
+      h("div", { class: sheet.classes.Title }, cardTitle),
+      h(Details, { description: description }),
+      showProgressBar && loading ? (h("sl-skeleton", { style: { width: "98%", margin: "0 auto" } })) : (showProgressBar && h(ProgressBarView, Object.assign({}, props, { complete: taskComplete }))),
+      h("div", { class: sheet.classes.Footer },
+        h("span", { class: "text" },
+          repeatable && (h("div", null,
+            h("span", { class: repetitions > 0 ? "icon success" : "icon" }, arrow_left_right),
+            h("span", { class: repetitions > 0 ? "success" : "" },
+              "Completed ",
+              repetitions,
+              " times"))),
+          showExpiry && (h("span", null,
+            "Ends ",
+            " ",
+            dateExpires))),
+        h("sl-button", { class: taskComplete ? "action completed" : "action", size: "small", onClick: () => window.open(buttonLink), disabled: taskComplete }, buttonText)))));
+}
+function Details(props) {
+  const style = {
+    Description: {
+      "& input[type=checkbox]": {
+        display: "none",
+      },
+      "& input:checked ~ .details": {
+        transform: "rotate(-180deg)",
+      },
+      "& .details": {
+        position: "absolute",
+        top: "var(--sl-spacing-medium)",
+        right: "var(--sl-spacing-medium)",
+        color: "var(--sl-color-gray-700)",
+        fontSize: "var(--sl-font-size-large)",
+        "& :hover": {
+          color: "var(--sl-color-primary-700)",
+        },
+        transformOrigin: "50% 37%",
+        transition: "transform var(--sl-transition-medium) ease",
+      },
+      "& input:checked ~ .summary": {
+        transition: "max-height var(--sl-transition-medium) ease",
+        maxHeight: "300px",
+      },
+      "& .summary": {
+        display: "block",
+        overflow: "hidden",
+        color: "var(--sl-color-gray-700)",
+        fontSize: "var(--sl-font-size-x-small)",
+        maxHeight: "0px",
+        transition: "max-height var(--sl-transition-fast) ease-out",
+      },
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.createStyleSheet(style);
+  const styleString = sheet.toString();
+  const rid = Math.random().toString(36).slice(2);
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("span", { class: sheet.classes.Description },
+      h("input", { type: "checkbox", id: "details-" + rid }),
+      h("label", { class: "details", htmlFor: "details-" + rid },
+        h("sl-icon", { name: "chevron-down" })),
+      h("span", { class: "summary" }, props.description))));
+}