@saasquatch/mint-components 1.6.1-7 → 1.6.1

package/dist/collection/components/sqm-big-stat/BigStat.stories.js

@@ -1,88 +1,88 @@
-import { h } from "@stencil/core";
-import { BigStatView } from "./sqm-big-stat-view";
-import scenario from "./BigStat.feature";
-export default {
-  title: "Components/Big Stat",
-  parameters: {
-    scenario,
-  },
-};
-export const Default = () => {
-  const props = { value: 990000, statvalue: "9.900,00", loading: false };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const LeftAlign = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    alignment: "left",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const RightAlign = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    alignment: "right",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverse = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    flexReverse: true,
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverseRight = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    flexReverse: true,
-    alignment: "right",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const FlexReverseLeft = () => {
-  const props = {
-    value: 500,
-    statvalue: "500",
-    flexReverse: true,
-    alignment: "left",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const NoStatValue = () => {
-  const props = {
-    value: 0,
-    statvalue: "...",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const InvalidStatValue = () => {
-  const props = {
-    value: 0,
-    statvalue: "!!!",
-    loading: false,
-  };
-  return h(BigStatView, Object.assign({}, props), "Big stat");
-};
-export const MultipleStats = () => {
-  return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
-    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
-      h("sqm-text", null,
-        h("p", null, "Rewards Redeemed"))),
-    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
-      h("sqm-text", null,
-        h("p", null, "Rewards Redeemed"))),
-    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
-      h("sqm-text", null,
-        h("p", null, "Points Balance")))));
-};
+import { h } from "@stencil/core";
+import { BigStatView } from "./sqm-big-stat-view";
+import scenario from "./BigStat.feature";
+export default {
+  title: "Components/Big Stat",
+  parameters: {
+    scenario,
+  },
+};
+export const Default = () => {
+  const props = { value: 990000, statvalue: "9.900,00", loading: false };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const LeftAlign = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    alignment: "left",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const RightAlign = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    alignment: "right",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverse = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverseRight = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    alignment: "right",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const FlexReverseLeft = () => {
+  const props = {
+    value: 500,
+    statvalue: "500",
+    flexReverse: true,
+    alignment: "left",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const NoStatValue = () => {
+  const props = {
+    value: 0,
+    statvalue: "...",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const InvalidStatValue = () => {
+  const props = {
+    value: 0,
+    statvalue: "!!!",
+    loading: false,
+  };
+  return h(BigStatView, Object.assign({}, props), "Big stat");
+};
+export const MultipleStats = () => {
+  return (h("sqm-stat-container", { space: "xxx-large", display: "flex" },
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
+      h("sqm-text", null,
+        h("p", null, "Rewards Redeemed"))),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
+      h("sqm-text", null,
+        h("p", null, "Rewards Redeemed"))),
+    h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
+      h("sqm-text", null,
+        h("p", null, "Points Balance")))));
+};

package/dist/collection/components/sqm-big-stat/UseBigStat.stories.js

@@ -1,113 +1,113 @@
-import { h } from "@stencil/core";
-import { BigStatView } from "./sqm-big-stat-view";
-import { useDemoBigStat } from "./useDemoBigStat";
-import { useState } from "@saasquatch/stencil-hooks";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-export default {
-  title: "Hooks / useBigStat",
-};
-function setupGraphQL() {
-  const id = "nynellie";
-  const accountId = id;
-  const programId = "ny-post-referrals";
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a7yoz8854cf6x",
-    appDomain: "https://staging.referralsaasquatch.com",
-    programId,
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-}
-const View = (statType, format, label) => {
-  //   console.log(`View("${statType}") - CALLED`);
-  setupGraphQL();
-  return (h("div", null,
-    h("b", null, "Stat format:"),
-    h("pre", null, format),
-    h("br", null),
-    h("b", null, "Stat selected:"),
-    " ",
-    h("pre", { style: { color: "green" } }, statType),
-    h("sqm-big-stat", { "stat-type": statType }, label)));
-};
-const DemoView = () => {
-  const [type, setType] = useState("/someRandomThing/with/someArguments/1234");
-  const { props, label } = useDemoBigStat({
-    statType: type,
-    render: () => { },
-    disconnectedCallback: () => { },
-    ignored: true,
-  });
-  return (h("div", null,
-    h("div", null,
-      "Stat type:",
-      " ",
-      h("input", { style: { width: "300px" }, type: "text", value: type, onInput: (e) => setType(e.target.value) })),
-    h("hr", null),
-    h("div", null,
-      h(BigStatView, Object.assign({}, props), label))));
-};
-export const Demo = createHookStory(DemoView);
-export const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
-export const referralsConvertedCount = createHookStory(() => {
-  return View("/referralsCount/converted", "/(referralsCount)/:status?");
-});
-export const referralsStartedCount = createHookStory(() => {
-  return View("/referralsCount/started", "/(referralsCount)/:status?");
-});
-export const ReferralsMonth = createHookStory(() => View("/referralsMonth", "/(referralsMonth)"));
-export const ReferralsWeek = createHookStory(() => View("/referralsWeek", "/(referralsWeek)"));
-export const RewardsCount = createHookStory(() => View("/rewardsCount", "/(rewardsCount)/:global?"));
-export const GlobalRewardsCount = createHookStory(() => View("/rewardsCount/global", "/(rewardsCount)/:global"));
-export const GlobalRewardsCountFiltered = createHookStory(() => View("/rewardsCountFiltered/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountPctDiscount = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountPctDiscountPending = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const RewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalPendingRewardsCount = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const RewardsAvailableCount = createHookStory(() => View("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountByIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const GlobalRewardsCountByPendingIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
-export const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth)/:global?"));
-export const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
-export const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
-export const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
-export const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/COFFEE", "/(rewardsRedeemed)/:statType/:unit/:global?"));
-export const RewardsAvailable = createHookStory(() => View("/rewardsAvailable/CREDIT/COFFEE", "/(rewardsAvailable)/:statType/:unit/:global?"));
-export const RewardsAvailableWithSlash = createHookStory(() => View("/rewardsAvailable/CREDIT/CASH%2FUSD", "/(rewardsAvailable)/:statType/:unit/:global?"));
-export const RewardBalance = createHookStory(() => View("/rewardBalance/CREDIT/COFFEE/prettyValue", "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?"));
-export const RewardBalanceCashUSD = createHookStory(() => {
-  const unit = encodeURIComponent("CASH/USD");
-  return View(`/rewardBalance/CREDIT/${unit}/prettyValue`, "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?");
-});
-export const ProgramGoals = createHookStory(() => {
-  const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
-  return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
-});
-export const CustomField = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField");
-});
-export const CustomFieldWithLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", h("sqm-text", null, "Thing Count"));
-});
-export const CustomFieldWithEmptyLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", "   ");
-});
-export const CustomFieldWithEmptySpaceLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", "\n   ");
-});
-export const CustomFieldWithTextLabel = createHookStory(() => {
-  return View(`/customFields/thingCount`, "/(customFields)/:customField", "Thing Count");
-});
+import { h } from "@stencil/core";
+import { BigStatView } from "./sqm-big-stat-view";
+import { useDemoBigStat } from "./useDemoBigStat";
+import { useState } from "@saasquatch/stencil-hooks";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+export default {
+  title: "Hooks / useBigStat",
+};
+function setupGraphQL() {
+  const id = "nynellie";
+  const accountId = id;
+  const programId = "ny-post-referrals";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a7yoz8854cf6x",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6Im55bmVsbGllIiwiaWQiOiJueW5lbGxpZSJ9fQ.3KV974VPLgk4tD8LQfJTi4IPkKCmnaB8w48HzVJYDuI",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+}
+const View = (statType, format, label) => {
+  //   console.log(`View("${statType}") - CALLED`);
+  setupGraphQL();
+  return (h("div", null,
+    h("b", null, "Stat format:"),
+    h("pre", null, format),
+    h("br", null),
+    h("b", null, "Stat selected:"),
+    " ",
+    h("pre", { style: { color: "green" } }, statType),
+    h("sqm-big-stat", { "stat-type": statType }, label)));
+};
+const DemoView = () => {
+  const [type, setType] = useState("/someRandomThing/with/someArguments/1234");
+  const { props, label } = useDemoBigStat({
+    statType: type,
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  });
+  return (h("div", null,
+    h("div", null,
+      "Stat type:",
+      " ",
+      h("input", { style: { width: "300px" }, type: "text", value: type, onInput: (e) => setType(e.target.value) })),
+    h("hr", null),
+    h("div", null,
+      h(BigStatView, Object.assign({}, props), label))));
+};
+export const Demo = createHookStory(DemoView);
+export const ReferralsCount = createHookStory(() => View("/referralsCount", "/(referralsCount)/:status?"));
+export const referralsConvertedCount = createHookStory(() => {
+  return View("/referralsCount/converted", "/(referralsCount)/:status?");
+});
+export const referralsStartedCount = createHookStory(() => {
+  return View("/referralsCount/started", "/(referralsCount)/:status?");
+});
+export const ReferralsMonth = createHookStory(() => View("/referralsMonth", "/(referralsMonth)"));
+export const ReferralsWeek = createHookStory(() => View("/referralsWeek", "/(referralsWeek)"));
+export const RewardsCount = createHookStory(() => View("/rewardsCount", "/(rewardsCount)/:global?"));
+export const GlobalRewardsCount = createHookStory(() => View("/rewardsCount/global", "/(rewardsCount)/:global"));
+export const GlobalRewardsCountFiltered = createHookStory(() => View("/rewardsCountFiltered/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountPctDiscount = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountPctDiscountPending = createHookStory(() => View("/rewardsCountFiltered/PCT_DISCOUNT/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const RewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountByUnit = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalPendingRewardsCount = createHookStory(() => View("/rewardsCountFiltered/CREDIT/COFFEE/PENDING/global", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const RewardsAvailableCount = createHookStory(() => View("/rewardsCountFiltered/AVAILABLE", "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountByIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/AVAILABLE/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const GlobalRewardsCountByPendingIntegration = createHookStory(() => View("/integrationRewardsCountFiltered/PENDING/global", "/(integrationRewardsCountFiltered)/:format([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?"));
+export const RewardsMonth = createHookStory(() => View("/rewardsMonth", "/(rewardsMonth)/:global?"));
+export const RewardsWeek = createHookStory(() => View("/rewardsWeek", "/(rewardsWeek)/:global?"));
+export const RewardsAssigned = createHookStory(() => View("/rewardsAssigned/CREDIT/COFFEE", "/(rewardsAssigned)/:statType/:unit/:global?"));
+export const RewardsAssignedCashUSD = createHookStory(() => View("/rewardsAssigned/CREDIT/CASH%2FUSD", "/(rewardsAssigned)/:statType/:unit/:global?"));
+export const RewardsRedeemed = createHookStory(() => View("/rewardsRedeemed/CREDIT/COFFEE", "/(rewardsRedeemed)/:statType/:unit/:global?"));
+export const RewardsAvailable = createHookStory(() => View("/rewardsAvailable/CREDIT/COFFEE", "/(rewardsAvailable)/:statType/:unit/:global?"));
+export const RewardsAvailableWithSlash = createHookStory(() => View("/rewardsAvailable/CREDIT/CASH%2FUSD", "/(rewardsAvailable)/:statType/:unit/:global?"));
+export const RewardBalance = createHookStory(() => View("/rewardBalance/CREDIT/COFFEE/prettyValue", "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?"));
+export const RewardBalanceCashUSD = createHookStory(() => {
+  const unit = encodeURIComponent("CASH/USD");
+  return View(`/rewardBalance/CREDIT/${unit}/prettyValue`, "/(rewardBalance)/:statType/:unit/:format([prettyValue|value]*)?/:global?");
+});
+export const ProgramGoals = createHookStory(() => {
+  const dummy = encodeURIComponent("Paid-Member-Goal/referrals");
+  return View(`/programGoals/count/${dummy}`, "/(programGoals)/:metricType/:goalId");
+});
+export const CustomField = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField");
+});
+export const CustomFieldWithLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", h("sqm-text", null, "Thing Count"));
+});
+export const CustomFieldWithEmptyLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "   ");
+});
+export const CustomFieldWithEmptySpaceLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "\n   ");
+});
+export const CustomFieldWithTextLabel = createHookStory(() => {
+  return View(`/customFields/thingCount`, "/(customFields)/:customField", "Thing Count");
+});

package/dist/collection/components/sqm-big-stat/sqm-big-stat-view.js

@@ -1,36 +1,36 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function BigStatView(props) {
-  const { statvalue, flexReverse, alignment } = props;
-  // Dependent on props, not feasiable to move out
-  const style = {
-    Container: {
-      display: "flex",
-      height: "inherit",
-      "justify-content": "space-between",
-      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
-      "align-items": `${alignment === "left"
-        ? "flex-start"
-        : alignment === "right"
-          ? "flex-end"
-          : "center"}`,
-    },
-    Stat: {
-      "font-size": "var(--sl-font-size-x-large)",
-      "text-align": alignment,
-    },
-    Description: {
-      "font-size": "var(--sl-font-size-small)",
-      "font-weight": "var(--sl-font-weight-normal)",
-      color: "var(--sl-color-gray-600)",
-      "text-transform": "uppercase",
-      "text-align": alignment,
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
-    h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function BigStatView(props) {
+  const { statvalue, flexReverse, alignment } = props;
+  // Dependent on props, not feasiable to move out
+  const style = {
+    Container: {
+      display: "flex",
+      height: "inherit",
+      "justify-content": "space-between",
+      "flex-direction": `${flexReverse ? "column-reverse" : "column"}`,
+      "align-items": `${alignment === "left"
+        ? "flex-start"
+        : alignment === "right"
+          ? "flex-end"
+          : "center"}`,
+    },
+    Stat: {
+      "font-size": "var(--sl-font-size-x-large)",
+      "text-align": alignment,
+    },
+    Description: {
+      "font-size": "var(--sl-font-size-small)",
+      "font-weight": "var(--sl-font-weight-normal)",
+      color: "var(--sl-color-gray-600)",
+      "text-transform": "uppercase",
+      "text-align": alignment,
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { part: "stat-value", class: sheet.classes.Stat }, statvalue),
+    h("div", { part: "stat-description", class: sheet.classes.Description }, props.labelSlot)));
+}