@saasquatch/mint-components 1.5.0-4 → 1.5.0-43

package/dist/collection/collection-manifest.json

@@ -3,10 +3,10 @@
     "./components/sqm-password-field/sqm-password-field.js",
     "./components/sqm-referral-table/sqm-referral-table.js",
     "./components/sqm-reward-exchange-list/sqm-reward-exchange-list.js",
-    "./components/sqm-rewards-table/sqm-rewards-table.js",
     "./components/sqm-asset-card/sqm-asset-card.js",
     "./components/sqm-big-stat/sqm-big-stat.js",
     "./components/sqm-brand/sqm-brand.js",
+    "./components/sqm-card-feed/sqm-card-feed.js",
     "./components/sqm-divided-layout/sqm-divided-layout.js",
     "./components/sqm-edit-profile/sqm-edit-profile.js",
     "./components/sqm-form-message/sqm-form-message.js",
@@ -15,6 +15,7 @@
     "./components/sqm-hook-story-container/sqm-hook-story-container.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
+    "./components/sqm-media/sqm-media.js",
     "./components/sqm-name-fields/sqm-name-fields.js",
     "./components/sqm-navigation-menu/sqm-navigation-menu.js",
     "./components/sqm-navigation-sidebar/sqm-navigation-sidebar.js",
@@ -36,6 +37,9 @@
     "./components/sqm-program-explainer/sqm-program-explainer.js",
     "./components/sqm-program-explainer-step/sqm-program-explainer-step.js",
     "./components/sqm-program-menu/sqm-program-menu.js",
+    "./components/sqm-referral-card/sqm-referral-card.js",
+    "./components/sqm-referral-card/sqm-timeline-reward.js",
+    "./components/sqm-referral-card/sqm-timeline.js",
     "./components/sqm-referral-iframe/sqm-referral-iframe.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-cell.js",
     "./components/sqm-referral-table/cells/sqm-referral-table-date-cell.js",
@@ -47,7 +51,16 @@
     "./components/sqm-referral-table/columns/sqm-referral-table-rewards-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-status-column.js",
     "./components/sqm-referral-table/columns/sqm-referral-table-user-column.js",
-    "./components/sqm-rewards-table/sqm-rewards-table-column.js",
+    "./components/sqm-refresh-button/sqm-refresh-button.js",
+    "./components/sqm-rewards-table/sqm-rewards-table.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-date-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.js",
+    "./components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-date-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-source-column.js",
+    "./components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js",
     "./components/sqm-route/sqm-route.js",
     "./components/sqm-router/sqm-router.js",
     "./components/sqm-share-button/sqm-share-button.js",
@@ -55,13 +68,13 @@
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
+    "./components/sqm-table-cell/sqm-table-cell.js",
+    "./components/sqm-table-row/sqm-table-row.js",
     "./components/sqm-task-card/sqm-task-card.js",
     "./components/sqm-text/sqm-text.js",
     "./components/sqm-text-span/sqm-text-span.js",
     "./components/sqm-titled-section/sqm-titled-section.js",
-    "./components/sqm-user-name/sqm-user-name.js",
-    "./tables/sqm-table-cell.js",
-    "./tables/sqm-table-row.js"
+    "./components/sqm-user-name/sqm-user-name.js"
   ],
   "compiler": {
     "name": "@stencil/core",
@@ -69,6 +82,35 @@
     "typescriptVersion": "4.1.3"
   },
   "collections": [],
-  "bundles": [],
+  "bundles": [
+    {
+      "components": [
+        "sqm-rewards-table",
+        "sqm-rewards-table-date-cell",
+        "sqm-rewards-table-date-column",
+        "sqm-rewards-table-reward-cell",
+        "sqm-rewards-table-reward-column",
+        "sqm-rewards-table-source-cell",
+        "sqm-rewards-table-source-column",
+        "sqm-rewards-table-status-cell",
+        "sqm-rewards-table-status-column"
+      ]
+    },
+    {
+      "components": [
+        "sqm-referral-table",
+        "sqm-referral-table-cell",
+        "sqm-referral-table-column",
+        "sqm-referral-table-date-cell",
+        "sqm-referral-table-date-column",
+        "sqm-referral-table-rewards-cell",
+        "sqm-referral-table-rewards-column",
+        "sqm-referral-table-status-cell",
+        "sqm-referral-table-status-column",
+        "sqm-referral-table-user-cell",
+        "sqm-referral-table-user-column"
+      ]
+    }
+  ],
   "global": "./global/global.js"
 }

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

@@ -1,6 +1,5 @@
 import { getAssetPath, h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 const style = {
   CardContainer: {
     "box-sizing": "border-box",
@@ -32,8 +31,7 @@ const style = {
     },
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export const AssetCardView = (props) => {
   const { text: { titleText }, imgUrl, } = props;

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

@@ -4,7 +4,7 @@ export default {
   title: "Components/Big Stat",
 };
 export const Default = () => {
-  const props = { value: 990000, statvalue: "9.900,00" };
+  const props = { value: 990000, statvalue: "9.900,00", loading: false };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
 export const LeftAlign = () => {
@@ -12,6 +12,7 @@ export const LeftAlign = () => {
     value: 500,
     statvalue: "500",
     alignment: "left",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -20,6 +21,7 @@ export const RightAlign = () => {
     value: 500,
     statvalue: "500",
     alignment: "right",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -28,6 +30,7 @@ export const FlexReverse = () => {
     value: 500,
     statvalue: "500",
     flexReverse: true,
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -37,6 +40,7 @@ export const FlexReverseRight = () => {
     statvalue: "500",
     flexReverse: true,
     alignment: "right",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -46,6 +50,7 @@ export const FlexReverseLeft = () => {
     statvalue: "500",
     flexReverse: true,
     alignment: "left",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -53,6 +58,7 @@ export const NoStatValue = () => {
   const props = {
     value: 0,
     statvalue: "...",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };
@@ -60,6 +66,7 @@ export const InvalidStatValue = () => {
   const props = {
     value: 0,
     statvalue: "!!!",
+    loading: false,
   };
   return h(BigStatView, Object.assign({}, props), "Big stat");
 };

package/dist/collection/components/sqm-big-stat/sqm-big-stat-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 BigStatView(props, children) {
   const { statvalue, flexReverse, alignment } = props;
   const style = {
@@ -27,8 +26,7 @@ export function BigStatView(props, children) {
       "text-align": alignment,
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { part: "stat-wrapper", class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),

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

@@ -100,12 +100,32 @@ export class BigStat {
       "attribute": "alignment",
       "reflect": false
     },
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program ID",
+            "name": "uiName"
+          }],
+        "text": "The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<BigStatViewProps>",
-        "resolved": "{ value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
+        "resolved": "{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: \"left\" | \"right\" | \"center\"; }",
         "references": {
           "DemoData": {
             "location": "import",

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
@@ -563,14 +563,13 @@ 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 +595,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",
       },

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

@@ -5,8 +5,8 @@ import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
 import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
  *
- * @uiName Big Stat
- * @slot the description of the component
+ * @uiName Brand Container
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
  */
 export class BrandComponent {
   constructor() {
@@ -15,7 +15,7 @@ export class BrandComponent {
   disconnectedCallback() { }
   render() {
     var _a, _b;
-    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "inherit";
+    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(() => {
@@ -29,7 +29,7 @@ export class BrandComponent {
       document.head.appendChild(sheet);
       return () => document.head.removeChild(sheet);
     }, [sanitizedFont]);
-    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "inherit";
+    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "";
     return (h(Host, null,
       h("style", null, `
           :host{
@@ -47,6 +47,9 @@ export class BrandComponent {
             font-family:  "${font}", arial;
 
             ${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);
           }`),
       h("slot", null)));
   }

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

@@ -0,0 +1,104 @@
+import { h } from "@stencil/core";
+import { CardFeedView } from "./sqm-card-feed-view";
+import { TaskCardView } from "../sqm-task-card/sqm-task-card-view";
+export default {
+  title: "Components/Card Feed",
+};
+const props = {
+  width: 347,
+  gap: 24,
+};
+const taskCardProps = {
+  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,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    showExpiry: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 1,
+    locale: "en"
+  },
+  states: { progress: 0, loading: false, loadingEvent: false },
+};
+const coupleActions = {
+  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,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    steps: true,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    showExpiry: false,
+    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 = {
+  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,
+    showProgressBar: true,
+    steps: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    progressBarUnit: "$",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    showExpiry: 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, Object.assign({}, props),
+    h(TaskCardView, Object.assign({}, taskCardProps)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, taskCardProps)))),
+    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({}, taskCardProps)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};

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" },

package/dist/collection/components/sqm-hero/sqm-hero-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";
 import { isMobile, isValidColor } from "../../utilities";
 const paddingList = [
   "var(--sl-spacing-xxx-small)",
@@ -101,8 +100,7 @@ export function HeroView(props) {
       minHeight: "100%",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
   :host{