@saasquatch/mint-components 1.5.0-0 → 1.5.0-101

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

@@ -11,7 +11,7 @@ const debugQuery = (query, variables, getStat) => {
     console.error("issue getting stat:", res);
   }
   const stat = getStat(res);
-  return stat;
+  return { ...stat, loading: res.loading };
 };
 const referralsCountQuery = (programId, 
 // locale
@@ -310,6 +310,7 @@ const rewardsRedeemedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyRedeemedCredit
@@ -352,6 +353,7 @@ const rewardsAssignedQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAssignedCredit
@@ -394,6 +396,7 @@ const rewardsAvailableQuery = (programId, locale, type, unit, global = "") => {
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue
@@ -442,6 +445,7 @@ const rewardsBalanceQuery = (programId, locale, type, unit, format = "prettyValu
             rewardBalanceDetails(
               programId: $programId
               filter: { type_eq: $type, unit_eq: $unit }
+              locale: $locale
             ) {
               ... on CreditRewardBalance {
                 prettyAvailableValue(formatType: $format)
@@ -563,14 +567,19 @@ export const StatPaths = [
 export const StatPatterns = StatPaths.map((pattern) => pathToRegexp(pattern.route));
 export function useBigStat(props) {
   var _a;
-  const { statType, flexReverse, alignment } = props;
-  const programId = useProgramId();
+  const { statType, flexReverse, alignment, programId = useProgramId(), } = props;
   const locale = useLocale();
   const userIdent = useUserIdentity();
   const re = useMemo(() => StatPatterns.find((re) => re.exec(statType)), [statType]);
   if (!(re === null || re === void 0 ? void 0 : re.exec(statType))) {
     return {
-      props: { value: 0, statvalue: "!!!", flexReverse, alignment },
+      props: {
+        value: 0,
+        statvalue: "!!!",
+        flexReverse,
+        alignment,
+        loading: false,
+      },
       label: "BAD PROP TYPE",
     };
   }
@@ -596,6 +605,7 @@ export function useBigStat(props) {
     props: {
       value: stat === null || stat === void 0 ? void 0 : stat.value,
       statvalue: (_a = stat === null || stat === void 0 ? void 0 : stat.statvalue) !== null && _a !== void 0 ? _a : LOADING,
+      loading: stat === null || stat === void 0 ? void 0 : stat.loading,
       flexReverse,
       alignment,
     },

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

@@ -9,6 +9,7 @@ export function useDemoBigStat(props) {
       props: {
         value: 0,
         statvalue: "!!!",
+        loading: false,
         flexReverse: false,
         alignment: "center",
       },
@@ -21,6 +22,7 @@ export function useDemoBigStat(props) {
   return {
     props: deepmerge({
       statvalue: "12345",
+      value: 0,
       flexReverse: false,
       alignment: "center",
     }, props.demoData || {}, { arrayMerge: (_, a) => a }),

package/dist/collection/components/sqm-brand/SqmBrand.stories.js

@@ -0,0 +1,112 @@
+import { h } from "@stencil/core";
+import scenario from "./sqm-brand.feature";
+export default {
+  title: "Components/Brand",
+  parameters: {
+    scenario,
+  },
+};
+const SampleComponents = () => (h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
+  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h("sl-button", { type: "default" }, "Default"),
+    h("sl-button", { type: "primary" }, "Primary"),
+    h("sl-button", { type: "success" }, "Success"),
+    h("sl-button", { type: "neutral" }, "Neutral"),
+    h("sl-button", { type: "warning" }, "Warning"),
+    h("sl-button", { type: "danger" }, "Danger")),
+  h("div", { style: { display: "flex", gap: "5px", padding: "5px" } },
+    h("sl-badge", { type: "primary" }, "Primary"),
+    h("sl-badge", { type: "success" }, "Success"),
+    h("sl-badge", { type: "neutral" }, "Neutral"),
+    h("sl-badge", { type: "warning" }, "Warning"),
+    h("sl-badge", { type: "danger" }, "Danger")),
+  h("div", { class: "color-palette" },
+    h("div", { class: "color-palette__name" },
+      "Primary",
+      h("br", null),
+      h("code", null,
+        "--sl-color-primary-",
+        h("em", null, `{n}`))),
+    h("div", { style: { display: "flex", gap: "5px" } },
+      h(ColorSwatch, { depth: 50 }),
+      h(ColorSwatch, { depth: 100 }),
+      h(ColorSwatch, { depth: 200 }),
+      h(ColorSwatch, { depth: 300 }),
+      h(ColorSwatch, { depth: 400 }),
+      h(ColorSwatch, { depth: 500 }),
+      h(ColorSwatch, { depth: 600 }),
+      h(ColorSwatch, { depth: 700 }),
+      h(ColorSwatch, { depth: 800 }),
+      h(ColorSwatch, { depth: 900 }),
+      h(ColorSwatch, { depth: 950 })))));
+export const Examples = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#00FF00" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#0000FF" },
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-color": "#000000" },
+      h(SampleComponents, null))));
+};
+export const Nested = () => {
+  return (h("div", null,
+    "Default ",
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-color": "#FF0000" },
+      "Red:",
+      h(SampleComponents, null),
+      h("sqm-brand", { "brand-color": "#00FF00" },
+        "Green:",
+        h(SampleComponents, null),
+        h("sqm-brand", { "brand-color": "#0000FF" },
+          "Blue:",
+          h(SampleComponents, null),
+          h("sqm-brand", { "brand-color": "#000000" },
+            "Black:",
+            h(SampleComponents, null)))))));
+};
+function ColorSwatch({ depth }) {
+  return (h("div", { style: {
+      backgroundColor: `var(--sl-color-primary-${depth})`,
+      color: `var(--sl-color-neutral-${1000 - depth})`,
+      width: "50px",
+      height: "50px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+    } }, depth));
+}
+export const Fonts = () => {
+  return (h("div", null,
+    h(SampleComponents, null),
+    h("sqm-brand", { "brand-font": "Roboto" },
+      "Roboto",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Open Sans" },
+      "Open Sans",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Lato" },
+      "Lato",
+      h(SampleComponents, null)),
+    h("sqm-brand", { "brand-font": "Oswald" },
+      "Oswald",
+      h(SampleComponents, null))));
+};
+export const Background = () => {
+  return (h("div", null,
+    h("sqm-brand", { background: "#FF0000" },
+      h("sqm-portal-container", null,
+        h(SampleComponents, null))),
+    h("sqm-brand", { background: "#00FF00" },
+      h("sqm-portal-container", null,
+        h(SampleComponents, null))),
+    h("sqm-brand", { background: "#0000FF" },
+      h("sqm-portal-container", null,
+        h(SampleComponents, null))),
+    h("sqm-brand", { background: "#000000" },
+      h("sqm-portal-container", null,
+        h(SampleComponents, null)))));
+};

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

@@ -0,0 +1,127 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { Component, h, Host, Prop } from "@stencil/core";
+import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
+import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
+/**
+ *
+ * @uiName Brand Container
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
+ */
+export class BrandComponent {
+  constructor() {
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    var _a, _b;
+    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "#FFF";
+    const css = autoColorScaleCss(brandColor);
+    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "").trim() || undefined;
+    useEffect(() => {
+      if (!sanitizedFont) {
+        // Nothing required in default case.
+        return;
+      }
+      const sheet = document.createElement("link");
+      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("rel", "stylesheet");
+      document.head.appendChild(sheet);
+      return () => document.head.removeChild(sheet);
+    }, [sanitizedFont]);
+    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "";
+    return (h(Host, null,
+      h("style", null, `
+          :host{
+            display: contents;
+          }
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
+          ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+			
+            ${this.brandColor && css}
+            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+            --sl-input-border-color-focus: var(--sl-color-primary-500);
+            --sl-color-primary-hue: var(--sl-color-primary-500);
+			--sqm-portal-background: ${this.background || "transparent"};
+          }`),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-brand"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "brandColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "Controls the primary brand color used in the Mint Components library. Note that this\r\ndoes not affect vanilla components or other component libraries."
+      },
+      "attribute": "brand-color",
+      "reflect": false
+    },
+    "brandFont": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Font",
+            "name": "uiName"
+          }],
+        "text": "The brand font that you want to use"
+      },
+      "attribute": "brand-font",
+      "reflect": false
+    },
+    "background": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Page Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }],
+        "text": "The background color for the portal"
+      },
+      "attribute": "background",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/sqm-card-feed/CardFeed.stories.js

@@ -0,0 +1,232 @@
+import { h } from "@stencil/core";
+import { CardFeedView } from "./sqm-card-feed-view";
+import { TaskCardView } from "../sqm-task-card/sqm-task-card-view";
+import scenario from "./sqm-card-feed.feature";
+export default {
+  title: "Components/Card Feed",
+  parameters: {
+    scenario,
+  },
+};
+const oneAction = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    rewardAmount: "20",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: false,
+    steps: false,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    rewardDuration: null,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 1,
+    locale: "en",
+  },
+  states: {
+    progress: 0,
+    loading: false,
+    loadingEvent: false,
+  },
+};
+const coupleActions = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    rewardAmount: "40",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Comment on 5 articles",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: true,
+    steps: true,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 5,
+    locale: "en",
+  },
+  states: {
+    progress: 1,
+    loading: false,
+    loadingEvent: false,
+  },
+};
+const manyActions = {
+  callbacks: {
+    sendEvent: () => void 0,
+    onClick: () => void 0,
+  },
+  content: {
+    rewardAmount: "150",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Spend $500 at our Store",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    showProgressBar: true,
+    steps: false,
+    progressBarUnit: "$",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 500,
+    locale: "en",
+  },
+  states: { progress: 100, loading: false, loadingEvent: false },
+};
+export const TaskCardGrid = () => {
+  return (h(CardFeedView, { width: 347, gap: 24 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridHighGap = () => {
+  return (h(CardFeedView, { width: 400, gap: 150 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridLowGap = () => {
+  return (h(CardFeedView, { width: 400, gap: 12 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridHighWidth = () => {
+  return (h(CardFeedView, { width: 1000, gap: 24 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const TaskCardGridLowWidth = () => {
+  return (h(CardFeedView, { width: 250, gap: 24 },
+    h(TaskCardView, Object.assign({}, oneAction)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, oneAction)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};
+export const CardFeedGeneric = () => {
+  return (h(CardFeedView, { width: 300, gap: 24 },
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER"),
+    h("div", { style: {
+        padding: "100px",
+        border: "1px dashed black",
+        background: "#eee",
+        display: "inline-block",
+      } }, "PLACEHOLDER")));
+};

package/dist/collection/components/sqm-card-feed/sqm-card-feed-view.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container }, children)));
+}

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -0,0 +1,79 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { CardFeedView } from "./sqm-card-feed-view";
+/**
+ * @uiName Card Feed
+ */
+export class CardFeed {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(CardFeedView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-card-feed"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "347"
+    },
+    "gap": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Gap",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
@@ -43,8 +42,7 @@ export function DividedLayoutView(props, children) {
     ${hostStyle}
   }
   `;
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.LayoutContainer },
     h("style", { type: "text/css" },