@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -1,63 +1,63 @@
-import { Component, h, Prop, State } from "@stencil/core";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { StatContainerView } from "./sqm-stat-container-view";
-import { getProps } from "../../utils/utils";
-/**
- * @uiName Stat Container
- */
-export class StatContainer {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Space between stats
-     * @uiType string
-     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
-     */
-    this.space = "xxx-large";
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (h(StatContainerView, Object.assign({}, getProps(this)),
-      h("slot", null)));
-  }
-  static get is() { return "sqm-stat-container"; }
-  static get encapsulation() { return "shadow"; }
-  static get properties() { return {
-    "space": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Spacing",
-        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
-        "references": {
-          "Spacing": {
-            "location": "import",
-            "path": "../../global/mixins"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Space between stats",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
-            "name": "uiEnum"
-          }],
-        "text": ""
-      },
-      "attribute": "space",
-      "reflect": false,
-      "defaultValue": "\"xxx-large\""
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { Component, h, Prop, State } from "@stencil/core";
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { StatContainerView } from "./sqm-stat-container-view";
+import { getProps } from "../../utils/utils";
+/**
+ * @uiName Stat Container
+ */
+export class StatContainer {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Space between stats
+     * @uiType string
+     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     */
+    this.space = "xxx-large";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(StatContainerView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-stat-container"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "space": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "Spacing",
+        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
+        "references": {
+          "Spacing": {
+            "location": "import",
+            "path": "../../global/mixins"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Space between stats",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "space",
+      "reflect": false,
+      "defaultValue": "\"xxx-large\""
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -1,18 +1,20 @@
-import { h } from "@stencil/core";
-import hljs from "highlight.js/lib/core";
-import gherkin from "highlight.js/lib/languages/gherkin";
-hljs.registerLanguage("gherkin", gherkin);
-export const CucumberAddon = ({ story }, children) => {
-  var _a;
-  let code = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.scenario;
-  let result;
-  try {
-    result = hljs.highlight("gherkin", code);
-  }
-  catch (e) {
-    // No scenario or invalid. Ignoring.
-  }
-  return (h("div", null,
-    result && h("pre", { innerHTML: result.value }),
-    children));
-};
+import { h } from "@stencil/core";
+import hljs from "highlight.js/lib/core";
+import gherkin from "highlight.js/lib/languages/gherkin";
+hljs.registerLanguage("gherkin", gherkin);
+export const CucumberAddon = ({ story }, children) => {
+  var _a;
+  let code = (_a = story.parent.parameters) === null || _a === void 0 ? void 0 : _a.scenario;
+  let result;
+  try {
+    result = hljs.highlight("gherkin", code);
+  }
+  catch (e) {
+    // No scenario or invalid. Ignoring.
+  }
+  return (h("div", null,
+    h("details", null,
+      h("summary", null, "Specs"),
+      result && h("pre", { innerHTML: result.value })),
+    children));
+};

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

@@ -1,19 +1,19 @@
-import { h } from "@stencil/core";
-export const HookStoryAddon = ({ story }, children) => {
-  var _a;
-  const hookStory = (_a = story.story.parameters) === null || _a === void 0 ? void 0 : _a.hookStory;
-  if (!hookStory) {
-    return children;
-  }
-  const randomInt = Math.round(Math.random() * 100000);
-  const RandomTagName = "sqm-hook-story-container-" + randomInt;
-  return (h(RandomTagName, null,
-    h("sqm-hook-story-container", { hookStory: hookStory })));
-};
-export function createHookStory(hookStory) {
-  const story = () => h("div", null);
-  story.parameters = {
-    hookStory,
-  };
-  return story;
-}
+import { h } from "@stencil/core";
+export const HookStoryAddon = ({ story }, children) => {
+  var _a;
+  const hookStory = (_a = story.story.parameters) === null || _a === void 0 ? void 0 : _a.hookStory;
+  if (!hookStory) {
+    return children;
+  }
+  const randomInt = Math.round(Math.random() * 100000);
+  const RandomTagName = "sqm-hook-story-container-" + randomInt;
+  return (h(RandomTagName, null,
+    h("sqm-hook-story-container", { hookStory: hookStory })));
+};
+export function createHookStory(hookStory) {
+  const story = () => h("div", null);
+  story.parameters = {
+    hookStory,
+  };
+  return story;
+}

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

@@ -1,110 +1,120 @@
-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 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 PortalTemplates from "../../stories/PortalTemplates.stories";
-import * as ProgramMenu from "../../stories/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 { CucumberAddon } from "./CucumberAddon";
-import { HookStoryAddon } from "./HookStoryAddon";
-import { ShadowViewAddon } from "../../ShadowViewAddon";
-const stories = [
-  ShareButton,
-  ShareLink,
-  BigStat,
-  Leaderboard,
-  LeaderboardRank,
-  UseShareLink,
-  UseShareButton,
-  UseBigStat,
-  UseEditProfile,
-  UseLeaderboard,
-  Router,
-  PortalFrame,
-  EditProfile,
-  FormMessage,
-  NewPortal,
-  SidebarItem,
-  NavigationSidebar,
-  PortalLogin,
-  PortalRegister,
-  PortalForgotPassword,
-  PortalEmailVerification,
-  PortalResetPassword,
-  PortalVerifyEmail,
-  AssetCard,
-  DividedLayout,
-  ChangePassword,
-  PortalProfile,
-  ReferralTable,
-  ReferralTableCell,
-  ReferralTableRewardsCell,
-  UserName,
-  PasswordField,
-  PortalTemplates,
-  ProgramMenu,
-  PoweredByImg,
-  PortalFooter,
-  Hero,
-  ReferralIframe,
-  NameFields,
-];
-/**
- * For internal documentation
- *
- * @undocumented
- */
-export class StencilStorybook {
-  constructor() {
-    this.ignored = true;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { class: Style, children } = useStencilbook(stories, {
-      h,
-      title: "Mint Components",
-      addons: [CucumberAddon, ShadowViewAddon, HookStoryAddon],
-    });
-    return (h(Host, { class: Style, onClick: {} }, children));
-  }
-  static get is() { return "sqm-stencilbook"; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
+import { h, Component, Host, State } from "@stencil/core";
+import { useStencilbook } from "@saasquatch/stencilbook";
+import { withHooks } from "@saasquatch/stencil-hooks";
+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 "../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 PortalTemplates from "../../stories/PortalTemplates.stories";
+import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories";
+import * as PoweredByImg from "../../stories/PoweredByImg.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";
+const stories = [
+  ShareButton,
+  ShareLink,
+  BigStat,
+  Leaderboard,
+  LeaderboardRank,
+  UseShareLink,
+  UseShareButton,
+  UseBigStat,
+  UseEditProfile,
+  UseLeaderboard,
+  Router,
+  PortalFrame,
+  EditProfile,
+  FormMessage,
+  NewPortal,
+  SidebarItem,
+  NavigationSidebar,
+  PortalLogin,
+  PortalRegister,
+  PortalForgotPassword,
+  PortalEmailVerification,
+  PortalResetPassword,
+  PortalVerifyEmail,
+  AssetCard,
+  DividedLayout,
+  ChangePassword,
+  PortalProfile,
+  ReferralTable,
+  ReferralTableCell,
+  ReferralTableRewardsCell,
+  UserName,
+  PasswordField,
+  TaskCard,
+  PortalTemplates,
+  ProgramMenu,
+  PoweredByImg,
+  PortalFooter,
+  Hero,
+  ReferralIframe,
+  NameFields,
+  RewardExchangeList,
+  UseRewardExchangeList,
+  UseTaskCard,
+  UseRewardsTable
+];
+/**
+ * For internal documentation
+ *
+ * @undocumented
+ */
+export class StencilStorybook {
+  constructor() {
+    this.ignored = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const { class: Style, children } = useStencilbook(stories, {
+      h,
+      title: "Mint Components",
+      addons: [CucumberAddon, ShadowViewAddon, HookStoryAddon],
+    });
+    return (h(Host, { class: Style, onClick: {} }, children));
+  }
+  static get is() { return "sqm-stencilbook"; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

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

@@ -0,0 +1,66 @@
+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("br", null),
+      h(Component, Object.assign({}, example)),
+      h("br", null)));
+  });
+}
+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" })));
+};