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

package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js

@@ -1,45 +1,51 @@
 import { h, Component, Host, State } from "@stencil/core";
 import { useStencilbook } from "@saasquatch/stencilbook";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import * as ShareButton from "../../stories/ShareButton.stories";
-import * as ShareLink from "../../stories/ShareLink.stories";
-import * as BigStat from "../../stories/BigStat.stories";
-import * as Leaderboard from "../../stories/Leaderboard.stories";
-import * as Router from "../../stories/Router.stories";
-import * as LeaderboardRank from "../../stories/LeaderboardRank.stories";
-import * as PortalFrame from "../../stories/PortalFrame.stories";
-import * as EditProfile from "../../stories/EditProfileForm.stories";
-import * as UseShareLink from "../../stories/UseShareLink.stories";
-import * as UseShareButton from "../../stories/UseShareButton.stories";
-import * as UseBigStat from "../../stories/UseBigStat.stories";
-import * as UseEditProfile from "../../stories/UseEditProfile.stories";
-import * as UseLeaderboard from "../../stories/UseLeaderboard.stories";
-import * as FormMessage from "../../stories/FormMessage.stories";
+import * as ShareButton from "../sqm-share-button/ShareButton.stories";
+import * as ShareLink from "../sqm-share-link/ShareLink.stories";
+import * as BigStat from "../sqm-big-stat/BigStat.stories";
+import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories";
+import * as Router from "../sqm-router/Router.stories";
+import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories";
+import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories";
+import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories";
+import * as UseShareLink from "../sqm-share-link/UseShareLink.stories";
+import * as UseShareButton from "../sqm-share-button/UseShareButton.stories";
+import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories";
+import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories";
+import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories";
+import * as FormMessage from "../sqm-form-message/FormMessage.stories";
+import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories";
+import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories";
+import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories";
 import * as NewPortal from "../../stories/NewPortal.stories";
-import * as SidebarItem from "../../stories/SidebarItem.stories";
-import * as NavigationSidebar from "../../stories/NavigationSidebar.stories";
-import * as PortalLogin from "../../stories/PortalLogin.stories";
-import * as PortalRegister from "../../stories/PortalRegister.stories";
-import * as PortalForgotPassword from "../../stories/PortalForgotPassword.stories";
-import * as PortalEmailVerification from "../../stories/PortalEmailVerification.stories";
-import * as PortalResetPassword from "../../stories/PortalResetPassword.stories";
-import * as PortalVerifyEmail from "../../stories/PortalVerifyEmail.stories";
-import * as AssetCard from "../../stories/AssetCard.stories";
-import * as DividedLayout from "../../stories/DividedLayout.stories";
-import * as ChangePassword from "../../stories/ChangePassword.stories";
-import * as PortalProfile from "../../stories/PortalProfile.stories";
-import * as ReferralTable from "../../stories/ReferralTable.stories";
-import * as ReferralTableCell from "../../stories/ReferralTableCell.stories";
-import * as ReferralTableRewardsCell from "../../stories/ReferralTableRewardsCell.stories";
-import * as UserName from "../../stories/UserName.stories";
-import * as PasswordField from "../../stories/PasswordField.stories";
+import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories";
+import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories";
+import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories";
+import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories";
+import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories";
+import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories";
+import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories";
+import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories";
+import * as AssetCard from "../sqm-asset-card/AssetCard.stories";
+import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories";
+import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories";
+import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories";
+import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories";
+import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories";
+import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories";
+import * as UserName from "../sqm-user-name/UserName.stories";
+import * as PasswordField from "../sqm-password-field/PasswordField.stories";
+import * as TaskCard from "../sqm-task-card/TaskCard.stories";
+import * as TaskCardProgressBar from "../sqm-task-card/progress-bar/progress-bar.stories";
 import * as PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../../stories/ProgramMenu.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
 import * as PoweredByImg from "../../stories/PoweredByImg.stories";
-import * as PortalFooter from "../../stories/PortalFooter.stories";
-import * as Hero from "../../stories/Hero.stories";
-import * as ReferralIframe from "../../stories/ReferralIframe.stories";
-import * as NameFields from "../../stories/NameFields.stories";
+import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories";
+import * as Hero from "../sqm-hero/Hero.stories";
+import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories";
+import * as NameFields from "../sqm-name-fields/NameFields.stories";
+import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
 import { ShadowViewAddon } from "../../ShadowViewAddon";
@@ -76,6 +82,8 @@ const stories = [
   ReferralTableRewardsCell,
   UserName,
   PasswordField,
+  TaskCard,
+  TaskCardProgressBar,
   PortalTemplates,
   ProgramMenu,
   PoweredByImg,
@@ -83,6 +91,10 @@ const stories = [
   Hero,
   ReferralIframe,
   NameFields,
+  RewardExchangeList,
+  UseRewardExchangeList,
+  UseTaskCard,
+  UseRewardsTable
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/Matrix.js

@@ -0,0 +1,63 @@
+import { h } from "@stencil/core";
+/**
+ * Displays a cartesian product of the input props
+ *
+ * @returns
+ */
+export function MatrixStory({ matrix, props, Component, }) {
+  const propMatrix = Object.keys(matrix).map((propKey) => {
+    const propValues = matrix[propKey];
+    return propValues.map((val) => {
+      return {
+        [propKey]: val,
+      };
+    });
+  });
+  const combinations = cartesian(...propMatrix);
+  const propsCombinations = combinations.map((combo) => {
+    return combo.reduce((props, prop) => {
+      return {
+        ...props,
+        ...prop,
+      };
+    }, {});
+  });
+  return propsCombinations.map((combo) => {
+    const example = { ...props, ...combo };
+    return (h("div", null,
+      h(PropsTable, { values: example }),
+      h("hr", null),
+      h(Component, Object.assign({}, example))));
+  });
+}
+function PropsTable({ values }) {
+  return (h("table", null,
+    h("tbody", null, Object.keys(values).map((key) => {
+      return (h("tr", null,
+        h("th", null, key),
+        h("td", null, JSON.stringify(values[key]))));
+    }))));
+}
+/**
+ * Source: https://stackoverflow.com/questions/15298912/javascript-generating-combinations-from-n-arrays-with-m-elements
+ *
+ * TODO: Could replace with a fork of https://www.npmjs.com/package/cartesian
+ *
+ * @param args - an array of arrays
+ * @returns combinations of the elements in those array
+ */
+function cartesian(...args) {
+  var r = [], max = args.length - 1;
+  function helper(arr, i) {
+    for (var j = 0, l = args[i].length; j < l; j++) {
+      var a = arr.slice(0); // clone arr
+      a.push(args[i][j]);
+      if (i == max)
+        r.push(a);
+      else
+        helper(a, i + 1);
+    }
+  }
+  helper([], 0);
+  return r;
+}

package/dist/collection/components/sqm-task-card/SVGs.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+export const checkmark_circle = () => {
+  return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" },
+    h("path", { fill: "currentColor", "fill-rule": "evenodd", d: "M1.636 9a7.364 7.364 0 1114.728 0A7.364 7.364 0 011.636 9zM9 0a9 9 0 100 18A9 9 0 009 0zm5.192 6.266a.982.982 0 00-1.548-1.208l-4.787 6.137-2.58-2.58a.982.982 0 00-1.39 1.388l3.367 3.366a.982.982 0 001.468-.09l5.47-7.013z", "clip-rule": "evenodd" })));
+};
+export const arrow_left_right = () => {
+  return (h("svg", { width: 11, height: 12, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.265 2.789a.346.346 0 000-.489L8.066.101a.346.346 0 10-.489.489l1.61 1.609H2.073a.691.691 0 00-.69.691v1.728a.346.346 0 00.69 0V2.89h7.114L7.577 4.5a.346.346 0 10.49.488l2.198-2.2zM.101 9.21a.346.346 0 000 .489l2.2 2.199a.346.346 0 00.488-.489l-1.61-1.609h7.114c.382 0 .691-.31.691-.691V7.382a.346.346 0 00-.691 0V9.11H1.18L2.789 7.5a.346.346 0 10-.489-.488l-2.199 2.2z", fill: "currentColor" })));
+};

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

@@ -0,0 +1,330 @@
+import { h } from "@stencil/core";
+import { TaskCardView } from "./sqm-task-card-view";
+import scenario from "./sqm-task-card.feature";
+export default {
+  title: "Components/Task Card/",
+  parameters: {
+    scenario,
+  },
+};
+const resizable = {
+  width: "347px",
+  minWidth: "347px",
+  resize: "horizontal",
+  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" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      h("h5", null),
+      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, { 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)),
+    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),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      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" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      h("h5", null),
+      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, { 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)),
+    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),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      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,
+  };
+  return (h("div", { style: { display: "inline-flex", gap: "32px" } },
+    h("div", { style: resizable },
+      h("h4", null, "One Action"),
+      h(TaskCardView, Object.assign({}, oneAction, { progress: 0 })),
+      " ",
+      h("h5", null),
+      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, { progress: 1 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      " ",
+      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",
+    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, { progress: 0 })),
+      " ",
+      h("h5", null),
+      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, { progress: 1 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 5 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 7 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, coupleActions, { progress: 10 })),
+      " ",
+      h("h5", null)),
+    h("div", { style: resizable },
+      h("h4", null, "Many Actions"),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 100 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 500 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 650 })),
+      " ",
+      h("h5", null),
+      h(TaskCardView, Object.assign({}, manyActions, { progress: 1000 })),
+      " ",
+      h("h5", null))));
+};

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