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

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js

@@ -0,0 +1,142 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { useRequestRerender } from "../../../tables/re-render";
+/**
+ * @uiName Reward Table Status Column
+ */
+export class RewardTableStatusColumn {
+  constructor() {
+    /**
+     * @uiName Column Title
+     */
+    this.columnTitle = "Status";
+    /**
+     * @uiName Reward Status Text
+     */
+    this.statusText = "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }";
+    /**
+     * @uiName Expired Status Text
+     */
+    this.expiryText = "Expires on ";
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  async renderCell(data) {
+    const rewardData = data === null || data === void 0 ? void 0 : data[0];
+    return (h("sqm-rewards-table-status-cell", { statusText: this.statusText, reward: rewardData, expiryText: this.expiryText }));
+  }
+  async renderLabel() {
+    return this.columnTitle;
+  }
+  render() {
+    useRequestRerender([this.columnTitle]);
+    return h(Host, { style: { display: "none" } });
+  }
+  static get is() { return "sqm-rewards-table-status-column"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Title",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "column-title",
+      "reflect": false,
+      "defaultValue": "\"Status\""
+    },
+    "statusText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Reward Status Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "status-text",
+      "reflect": false,
+      "defaultValue": "\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\""
+    },
+    "expiryText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Expired Status Text",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "expiry-text",
+      "reflect": false,
+      "defaultValue": "\"Expires on \""
+    }
+  }; }
+  static get methods() { return {
+    "renderCell": {
+      "complexType": {
+        "signature": "(data: Reward[]) => Promise<any>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "Reward": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<any>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    },
+    "renderLabel": {
+      "complexType": {
+        "signature": "() => Promise<string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,96 @@
+import { h } from "@stencil/core";
+import { gap } from "../../global/mixins";
+import { createStyleSheet } from "../../styling/JSS";
+export function RewardsTableView(props) {
+  const { states, data, callbacks, elements } = props;
+  const { columns, rows } = elements;
+  const { show } = states;
+  const hiddenCols = data.hiddenColumns.split(",").map(Number);
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
+  const tablet = "@media (min-width: " +
+    data.smBreakpoint +
+    "px) and (max-width: " +
+    data.mdBreakpoint +
+    "px)";
+  const style = {
+    Table: {
+      borderCollapse: "collapse",
+      width: "100%",
+      "& th": {
+        paddingBottom: "var(--sl-spacing-small)",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-normal)",
+      },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+      },
+      [mobile]: {
+        "& thead": {
+          display: "none",
+        },
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          color: "var(--sl-color-neutral-500)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "& td": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          borderTop: "none",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-medium)",
+          "&:first-child": {
+            textAlign: "left",
+          },
+          "&:before": {
+            content: "attr(data-label)",
+          },
+          "&:last-child": {
+            marginBottom: "0",
+          },
+          "&.hidden:before": {
+            content: "none",
+          },
+        },
+      },
+      [tablet]: {
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
+      },
+    },
+    ButtonContainer: {
+      display: "flex",
+      "justify-content": "flex-end",
+      "margin-top": "var(--sl-spacing-small)",
+      ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", null,
+    h("style", { type: "text/css" }, styleString),
+    h("table", { class: sheet.classes.Table },
+      data.textOverrides.showLabels && (h("thead", null,
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", null, column)))))),
+      h("tbody", null,
+        show === "loading" && elements.loadingElement,
+        show === "empty" && elements.emptyElement,
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { style: {
+            borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
+          }, part: "table-row" }, row.map((cell, j) => (h("td", { class: hiddenCols.includes(j) ? "hidden" : "", "data-label": columns[j] + ":" }, cell))))))))),
+    h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+}

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -3,8 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
-import { EmptySlot, LoadingSlot, EmptySkeleton, LoadingSkeleton } from "../../tables/TableSlots";
-import { useRewardsTable, CSS_NAMESPACE } from "./useRewardsTable";
+import { EmptySkeleton, EmptySlot, LoadingSkeleton, LoadingSlot, } from "../../tables/TableSlots";
+import { CSS_NAMESPACE, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Rewards Table
  */
@@ -18,13 +18,19 @@ export class RewardsTable {
     this.prevLabel = "Prev";
     /** @uiName View More button text  */
     this.moreLabel = "Next";
-    /** @uiName Show Referred by user in table  */
-    this.showReferrer = false;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.hiddenColumns = "0";
+    /** @uiName Hide Columns (Mobile View)  */
+    this.smBreakpoint = 599;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 899;
+    /** @uiName Empty State Text  */
+    this.emptyStateText = "No Rewards Yet";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = h(EmptySlot, { label: "No Rewards Yet" });
+    const empty = h(EmptySlot, { label: this.emptyStateText });
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useRewardsTableDemo(this)
@@ -138,33 +144,96 @@ export class RewardsTable {
       "reflect": false,
       "defaultValue": "\"Next\""
     },
-    "showReferrer": {
-      "type": "boolean",
+    "hiddenColumns": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Show Referred by user in table",
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "hidden-columns",
+      "reflect": false,
+      "defaultValue": "\"0\""
+    },
+    "smBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "sm-breakpoint",
+      "reflect": false,
+      "defaultValue": "599"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Hide Columns (Mobile View)",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "md-breakpoint",
+      "reflect": false,
+      "defaultValue": "899"
+    },
+    "emptyStateText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty State Text",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-referrer",
+      "attribute": "empty-state-text",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "\"No Rewards Yet\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<GenericTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",

package/dist/collection/components/sqm-rewards-table/useRewardsTable.js

@@ -32,9 +32,40 @@ const GET_REWARDS = gql `
             fuelTankType
             currency
             prettyValue
+            prettyValueNumber: prettyValue(formatType: NUMBER_FORMATTED)
+            prettyAvailableNumber: prettyAvailableValue(
+              formatType: NUMBER_FORMATTED
+            )
+            prettyRedeemedNumber: prettyRedeemedCredit(
+              formatType: NUMBER_FORMATTED
+            )
             statuses
             globalRewardKey
             programRewardKey
+            rewardSource
+            prettyRedeemedCredit
+            prettyAssignedCredit
+            prettyAvailableValue
+            exchangedRewardRedemptionTransaction {
+              id
+              creditRedeemed
+              prettyRedeemedCredit
+              unit
+              dateRedeemed
+            }
+            referral {
+              id
+              referrerUser {
+                id
+                firstName
+                lastName
+              }
+              referredUser {
+                id
+                firstName
+                lastName
+              }
+            }
             rewardRedemptionTransactions {
               data {
                 exchangedRewards {
@@ -131,6 +162,9 @@ export function useRewardsTable(props, emptyElement, loadingElement) {
         prevLabel: props.prevLabel,
         moreLabel: props.moreLabel,
       },
+      hiddenColumns: props.hiddenColumns,
+      smBreakpoint: props.smBreakpoint,
+      mdBreakpoint: props.mdBreakpoint,
     },
     elements: {
       columns: content.columns,
@@ -166,12 +200,7 @@ async function tryMethod(c, callback) {
   catch (e) {
     // renderLabel did not return a promise, so this method probably doesn't exist
     // therefore, we IGNORE the label
-    if (callback.name === "renderReferrerCell") {
-      console.error("column does not have a renderReferrerCell method.");
-    }
-    else {
-      console.error("label promise failed", e);
-    }
+    console.error("label promise failed", e);
     return h("span", null);
   }
   try {

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -4,7 +4,7 @@ export default {
   title: "Components/Share Button",
 };
 export const WithIcon = () => {
-  const props = { medium: "facebook", iconslot: "suffix" };
+  const props = { medium: "whatsapp", iconslot: "suffix" };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithIconOverride = () => {
@@ -35,6 +35,27 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
+export const WithCustomColors = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    iconslot: "prefix",
+  };
+  return h(ShareButtonView, Object.assign({}, props), "Facebook");
+};
+export const WithCustomBorderRadius = () => {
+  const props = {
+    medium: "facebook",
+    type: "text",
+    backgroundcolor: "#3b5998",
+    textcolor: "#fff",
+    borderradius: 8,
+    iconslot: "prefix",
+  };
+  return h(ShareButtonView, Object.assign({}, props), "Facebook");
+};
 export const FullStackIcon = () => {
   return (h("div", null,
     h("sqm-share-button", { medium: "facebook", iconslot: "prefix" },

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -1,19 +1,28 @@
 import { h, Host } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  buttonStyle: {
-    display: "block",
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
 export function ShareButtonView(props, children) {
+  const vanillaStyle = `
+    *::part(base) {
+      background: ${props.backgroundcolor ? props.backgroundcolor : ""};
+      color: ${props.textcolor ? props.textcolor : ""};
+      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+    }
+  `;
+  const style = {
+    HostBlock: HostBlock,
+    buttonStyle: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      lineHeight: "0",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
+    h("style", { type: "text/css" }, vanillaStyle),
     h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot, name: props.icon ? props.icon : props.medium, exportparts: "icon" })),
       !props.hidetext && children)));

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -101,6 +101,66 @@ export class ShareButton {
       "attribute": "program-id",
       "reflect": false
     },
+    "borderradius": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Configure border radius with pixel amount",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "borderradius",
+      "reflect": false
+    },
+    "backgroundcolor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button background color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "backgroundcolor",
+      "reflect": false
+    },
+    "textcolor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Button text color",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "textcolor",
+      "reflect": false
+    },
     "pill": {
       "type": "boolean",
       "mutable": false,
@@ -334,7 +394,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; }",
+        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -363,16 +423,8 @@ export class ShareButton {
 }
 function useDemoShareButton(props) {
   return deepmerge({
-    medium: props.medium,
+    ...props,
     loading: false,
-    disabled: props.disabled,
-    pill: props.pill,
-    type: props.type,
-    size: props.size,
-    hideicon: props.hideicon,
-    hidetext: props.hidetext,
-    iconslot: props.iconslot,
-    icon: props.icon,
     hide: false,
     onClick: () => {
       // TODO: Provide visual feedback

package/dist/collection/components/sqm-share-link/sqm-share-link-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 { HostBlock } from "../../global/mixins";
 const style = {
   HostBlock: HostBlock,
@@ -8,8 +7,7 @@ const style = {
     "&::part(base)": { background: "white", opacity: "1", cursor: "pointer" },
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ShareLinkView(props) {
   return (h("div", null,

package/dist/collection/components/sqm-stat-container/sqm-stat-container-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 StatContainerView(props, children) {
   const divideSpace = () => {
     const spaceValue = getComputedStyle(document.documentElement).getPropertyValue(`--sl-spacing-${props.space}`);
@@ -26,7 +25,7 @@ export function StatContainerView(props, children) {
         height: "100%",
       },
       "& > ::slotted(*:last-child)": {
-        "border-right": "1px solid #ffffff",
+        "border-right": "none",
       },
     },
     StatFrame: {
@@ -38,8 +37,7 @@ export function StatContainerView(props, children) {
       "margin-left": "-1px",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.StatFrame },
     h("div", { class: sheet.classes.StatContainer },