@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -1,60 +1,72 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerStepView(props) {
   const style = {
     Container: {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      height: "444px",
       color: props.color,
       background: props.background,
-      padding: "24px",
-      "@media (max-width: 1024px)": {
+      padding: "var(--sl-spacing-large)",
+      //   paddingBottom: "var(--sl-spacing-xxx-large)",
+      "@media (max-width: 499px)": {
         flexDirection: "row",
         width: "auto",
-        height: "auto",
+        paddingBottom: "var(--sl-spacing-large)",
       },
     },
-    Logo: {},
     Text: {
-      "@media (max-width: 1024px)": {
-        marginLeft: "24px",
+      "@media (max-width: 499px)": {
+        marginLeft: "var(--sl-spacing-large)",
       },
     },
     Title: {
-      fontSize: "16px",
-      fontWeight: "var(--sl-font-weight-bold)",
       textTransform: "uppercase",
-      lineHeight: "24px",
-      marginTop: "24px",
-      "@media (max-width: 1024px)": {
+      fontSize: "var(--sl-font-size-medium)",
+      fontWeight: "var(--sl-font-weight-bold)",
+      lineHeight: "var(--sl-line-height-dense)",
+      marginTop: "var(--sl-spacing-large)",
+      "@media (max-width: 499px)": {
         margin: "0",
       },
     },
     Description: {
-      fontSize: "16px",
-      lineHeight: "28px",
-      marginTop: "12px",
-      "@media (max-width: 1024px)": {
-        marginTop: "8px",
+      fontSize: "var(--sl-font-size-medium)",
+      marginTop: "var(--sl-spacing-small)",
+      "@media (max-width: 499px)": {
+        marginTop: "var(--sl-spacing-x-small)",
       },
     },
+    Icon: {
+      width: "64px",
+      height: "64px",
+      borderRadius: "100%",
+      background: "#F4F5F7",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "26px",
+      textAlign: "center",
+      lineHeight: "72px",
+    },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
+  const vanillaStyle = `
+  :host{
+    display: flex;
+    width: 100%;
+  }
+  @media (max-width: 499px) {
+    :host{
+      display: block;
+    }
+  }`;
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.Logo },
-      h("div", { style: {
-          width: "64px",
-          height: "64px",
-          borderRadius: "100%",
-          background: "white",
-        } })),
+    h("div", null,
+      h("div", { class: sheet.classes.Icon },
+        h("sl-icon", { name: props.icon }))),
     h("div", { class: sheet.classes.Text },
-      h("div", { class: sheet.classes.Title }, props.title),
+      h("div", { class: sheet.classes.Title }, props.cardTitle),
       h("div", { class: sheet.classes.Description }, props.description))));
 }

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -16,7 +16,7 @@ export class ProgramExplainerStep {
   static get is() { return "sqm-program-explainer-step"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "title": {
+    "cardTitle": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -33,7 +33,7 @@ export class ProgramExplainerStep {
           }],
         "text": ""
       },
-      "attribute": "title",
+      "attribute": "card-title",
       "reflect": false
     },
     "description": {
@@ -70,6 +70,9 @@ export class ProgramExplainerStep {
         "tags": [{
             "text": "Color",
             "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
           }],
         "text": ""
       },
@@ -95,6 +98,26 @@ export class ProgramExplainerStep {
       },
       "attribute": "background",
       "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Icon",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/components/sqm-referral-iframe/sqm-referral-iframe-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 ReferralIframeView(props) {
   const { states, data } = props;
   const { content } = states;
@@ -21,8 +20,7 @@ export function ReferralIframeView(props) {
     },
   };
   // JSS config
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.Container },
     h("style", { type: "text/css" }, styleString),

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ReferralTableView } from "./sqm-referral-table-view";
+import { GenericTableView } from "../../tables/GenericTableView";
 import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
 export default {
   title: "Components/Referral Table",
@@ -33,6 +33,7 @@ const baseReward = {
   dateScheduledFor: 1628146800000,
   dateExpires: 1629010800000,
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",
@@ -78,7 +79,8 @@ const simpleUserTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -86,7 +88,9 @@ const simpleUserTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -128,13 +132,17 @@ const hideLabelProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
 };
 const customButtonProps = {
   states: {
     hasPrev: true,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -142,13 +150,17 @@ const customButtonProps = {
       prevLabel: "CUSTOM PREVIOUS TEXT",
       moreLabel: "CUSTOM NEXT TEXT",
     },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
 };
 const longCellTextTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -156,7 +168,9 @@ const longCellTextTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -217,7 +231,8 @@ const longColumnTextTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -225,7 +240,9 @@ const longColumnTextTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -286,7 +303,8 @@ const fullUserTableProps = {
   states: {
     hasPrev: false,
     hasNext: true,
-    loading: false,
+    show: "rows",
+    namespace: "sqm-referral-table",
   },
   data: {
     textOverrides: {
@@ -294,7 +312,9 @@ const fullUserTableProps = {
       prevLabel: "Prev",
       moreLabel: "View More",
     },
-    referralData: [],
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
   },
   callbacks: {
     prevPage: () => console.log("Prev"),
@@ -352,29 +372,30 @@ const fullUserTableProps = {
   },
 };
 export const SimpleUserTable = () => {
-  return h(ReferralTableView, Object.assign({}, simpleUserTableProps));
+  return h(GenericTableView, Object.assign({}, simpleUserTableProps));
 };
 export const HiddenLabelsTable = () => {
-  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
+  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
 };
 export const CustomButtonTextTable = () => {
-  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
+  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
 };
 export const FullUserTable = () => {
-  return h(ReferralTableView, Object.assign({}, fullUserTableProps));
+  return h(GenericTableView, Object.assign({}, fullUserTableProps));
 };
 export const LongCellTextTable = () => {
-  return h(ReferralTableView, Object.assign({}, longCellTextTableProps));
+  return h(GenericTableView, Object.assign({}, longCellTextTableProps));
 };
 export const LongColumnTextTable = () => {
-  return h(ReferralTableView, Object.assign({}, longColumnTextTableProps));
+  return h(GenericTableView, Object.assign({}, longColumnTextTableProps));
 };
 export const EmptyTable = () => {
   return (h("sqm-referral-table", { demoData: {
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: false,
+        show: "empty",
+        namespace: "sqm-referral-table",
       },
       data: {
         textOverrides: {
@@ -382,7 +403,9 @@ export const EmptyTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        referralData: [],
+        hiddenColumns: "",
+        mdBreakpoint: 899,
+        smBreakpoint: 599,
       },
       elements: {
         emptyElement: emptyElement,
@@ -397,7 +420,8 @@ export const LoadingTable = () => {
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: true,
+        show: "loading",
+        namespace: "sqm-referral-table",
       },
       data: {
         textOverrides: {
@@ -405,7 +429,9 @@ export const LoadingTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        referralData: [],
+        hiddenColumns: "",
+        mdBreakpoint: 899,
+        smBreakpoint: 599,
       },
       elements: {
         emptyElement: emptyElement,
@@ -420,7 +446,8 @@ export const FullRewardsTable = () => {
       states: {
         hasPrev: false,
         hasNext: false,
-        loading: false,
+        show: "rows",
+        namespace: "sqm-referral-table",
       },
       data: {
         textOverrides: {
@@ -428,7 +455,9 @@ export const FullRewardsTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        referralData: [],
+        hiddenColumns: "",
+        mdBreakpoint: 899,
+        smBreakpoint: 599,
       },
       elements: {
         emptyElement: emptyElement,

package/dist/collection/components/sqm-referral-table/ReferralTableCell.stories.js

@@ -33,6 +33,7 @@ const rewardsData = {
   dateScheduledFor: 1628146800000,
   dateExpires: 1629010800000,
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

package/dist/collection/components/sqm-referral-table/ReferralTableRewardsCell.stories.js

@@ -13,6 +13,7 @@ const baseReward = {
   dateScheduledFor: getDays(),
   dateExpires: getMonths(),
   dateCancelled: 134400,
+  dateRedeemed: 0,
   fuelTankCode: "ABC",
   fuelTankType: "Code",
   currency: "null",

package/dist/collection/components/sqm-referral-table/UseReferralTable.stories.js

@@ -0,0 +1,44 @@
+import { setProgramId } from "@saasquatch/component-boilerplate";
+import { setUserIdentity, } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+export default {
+  title: "Hooks / useReferralTable",
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const ReferralTable = createHookStory(() => {
+  setupGraphQL();
+  setProgramId("sam-partner-test-2");
+  const props = {
+    listType: "",
+    render: () => { },
+    disconnectedCallback: () => { },
+    ignored: true,
+  };
+  return (h("sqm-referral-table", null,
+    h("sqm-referral-table-user-column", null),
+    h("sqm-referral-table-status-column", null),
+    h("sqm-referral-table-date-column", null),
+    h("sqm-referral-table-rewards-column", null)));
+});

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-date-cell.js

@@ -1,7 +1,6 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
+import { Component, Prop, State } from "@stencil/core";
 import { DateTime } from "luxon";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
 export class ReferralTableDateCell {
   constructor() {
     this.ignored = true;
@@ -14,7 +13,7 @@ export class ReferralTableDateCell {
     const date = !this.date
       ? "-"
       : (_a = DateTime.fromMillis(this.date)) === null || _a === void 0 ? void 0 : _a.toLocaleString(DateTime.DATE_MED);
-    return h(TextSpanView, { type: "p" }, date);
+    return date;
   }
   static get is() { return "sqm-referral-table-date-cell"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -1,8 +1,7 @@
 import { Component, h, Prop } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
 import { DateTime } from "luxon";
 import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { createStyleSheet } from "../../../styling/JSS";
 export class ReferralTableRewardsCell {
   render() {
     const style = {
@@ -17,7 +16,7 @@ export class ReferralTableRewardsCell {
       Details: {
         "padding-bottom": "var(--sl-spacing-small)",
         "max-width": "500px",
-        "padding-right": "var(--sl-spacing-x-small)",
+        // "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
           cursor: `${this.hideDetails ? "default" : "pointer"}`,
@@ -43,9 +42,14 @@ export class ReferralTableRewardsCell {
       StatusBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
       },
+      RedeemBadge: {
+        paddingLeft: "var(--sl-spacing-xxx-small)",
+        "&::part(base)": {
+          background: "var(--sl-color-blue-600)",
+        },
+      },
     };
-    jss.setup(preset());
-    const sheet = jss.createStyleSheet(style);
+    const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
     const getState = (states) => {
       const possibleStates = [
@@ -90,8 +94,14 @@ export class ReferralTableRewardsCell {
           h(TextSpanView, { type: "p" },
             h("span", { class: sheet.classes.BoldText }, reward.prettyValue)),
           h("div", { class: sheet.classes.BadgeContainer },
-            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: sheet.classes.StatusBadge, type: slBadgeType, pill: true }, `${badgeText} for ${getTimeDiff(reward.dateScheduledFor)}`)) : (h("sl-badge", { class: sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
-            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: sheet.classes.StatusBadge, type: "info", pill: true }, `Expiring in ${getTimeDiff(reward.dateExpires)}`)))),
+            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, `${badgeText} for ${getTimeDiff(reward.dateScheduledFor)}`)) : (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, badgeText)),
+            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: "info", pill: true }, `Expiring in ${getTimeDiff(reward.dateExpires)}`)))),
         h("div", null,
           reward.dateGiven && (h("div", null,
             h(TextSpanView, { type: "p" },
@@ -120,10 +130,9 @@ export class ReferralTableRewardsCell {
               " ",
               h("span", { class: sheet.classes.BoldText }, DateTime.fromMillis(reward.dateExpires).toLocaleString(DateTime.DATE_MED))))),
           reward.fuelTankCode && (h("div", null,
-            h(TextSpanView, { type: "p" },
-              "Your code is",
-              " ",
-              h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode)))))));
+            "Your code is",
+            " ",
+            h("span", { class: sheet.classes.BoldText }, reward.fuelTankCode))))));
     });
   }
   static get is() { return "sqm-referral-table-rewards-cell"; }

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-status-cell.js

@@ -1,7 +1,20 @@
 import { Component, h, Prop } from "@stencil/core";
+import { createStyleSheet } from "../../../styling/JSS";
 export class ReferralTableStatusCell {
   render() {
-    return (h("sl-badge", { type: this.converted ? "success" : "warning", pill: true }, this.statusText));
+    const style = {
+      Badge: {
+        "&::part(base)": {
+          fontSize: "var(--sl-font-size-small)",
+          padding: "4px 8px",
+        },
+      },
+    };
+    const sheet = createStyleSheet(style);
+    const styleString = sheet.toString();
+    return (h("div", null,
+      h("style", { type: "text/css" }, styleString),
+      h("sl-badge", { pill: true, type: this.converted ? "success" : "warning", class: sheet.classes.Badge }, this.statusText)));
   }
   static get is() { return "sqm-referral-table-status-cell"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-user-cell.js

@@ -1,8 +1,7 @@
-import { Component, h, Prop } from "@stencil/core";
-import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view";
+import { Component, Prop } from "@stencil/core";
 export class ReferralTableUserCell {
   render() {
-    return h(TextSpanView, { type: "p" }, this.name);
+    return this.name;
   }
   static get is() { return "sqm-referral-table-user-cell"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/sqm-referral-table/sqm-referral-table-view.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { gap } from "../../global/mixins";
 const style = {
   THead: {
@@ -25,8 +24,7 @@ const style = {
     ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ReferralTableView(props) {
   var _a, _b;
@@ -43,9 +41,7 @@ export function ReferralTableView(props) {
         : !((_a = elements === null || elements === void 0 ? void 0 : elements.rows) === null || _a === void 0 ? void 0 : _a.length) && !((_b = data.referralData) === null || _b === void 0 ? void 0 : _b.length)
           ? elements.emptyElement
           : rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
-              borderTop: `${!data.textOverrides.showLabels && i === 0
-                ? "none"
-                : ""}`,
+              borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
             h(TextSpanView, { type: "p" }, cell))))))))),
     h("div", { class: sheet.classes.ButtonContainer, part: "sqm-referral-table-button-wrapper" },