@saasquatch/mint-components 1.5.0-2 → 1.5.0-23

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

@@ -2,9 +2,9 @@ import { isDemo } from "@saasquatch/component-boilerplate";
 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 { RewardsTableView } from "./sqm-rewards-table-view";
+import { CSS_NAMESPACE, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Rewards Table
  */
@@ -18,8 +18,12 @@ 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 = 499;
+    /** @uiName Hide Columns (Mobile View)  */
+    this.mdBreakpoint = 999;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -29,7 +33,7 @@ export class RewardsTable {
     const { states, data, callbacks, elements } = isDemo()
       ? useRewardsTableDemo(this)
       : useRewardsTable(this, empty, loading);
-    return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
+    return (h(RewardsTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-rewards-table"; }
   static get encapsulation() { return "shadow"; }
@@ -138,41 +142,83 @@ 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": "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": "499"
+    },
+    "mdBreakpoint": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
         "references": {}
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Show Referred by user in table",
+            "text": "Hide Columns (Mobile View)",
             "name": "uiName"
           }],
         "text": ""
       },
-      "attribute": "show-referrer",
+      "attribute": "md-breakpoint",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "999"
     },
     "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; }; }",
+        "original": "DemoData<RewardsTableViewProps>",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; tabletBreakpoint: number; phoneBreakpoint: number; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
             "path": "../../global/demo"
           },
-          "GenericTableViewProps": {
+          "RewardsTableViewProps": {
             "location": "import",
-            "path": "../../tables/GenericTableView"
+            "path": "./sqm-rewards-table-view"
           }
         }
       },

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,
+      phoneBreakpoint: props.smBreakpoint,
+      tabletBreakpoint: 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

@@ -2,18 +2,26 @@ import { h, Host } from "@stencil/core";
 import jss from "jss";
 import preset from "jss-preset-default";
 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: "block",
+    },
+  };
+  jss.setup(preset());
+  const sheet = jss.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-stencilbook/AutoColor.js

@@ -1,54 +1,49 @@
-import chroma from "chroma-js";
-/**
- * Generated a Shoelace color scale css string from a base color
- *
- * @param color
- * @param name
- * @returns
- */
-export function autoColorScaleCss(color, name = "primary") {
-  if (!chroma.valid(color)) {
-    return "";
+import { ColorError, guard, hsla, parseToHsla } from "color2k";
+const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const lScale = [
+  0.95,
+  0.86,
+  0.76,
+  0.66,
+  0.56,
+  0.46,
+  0.39,
+  0.32,
+  0.25,
+  0.18,
+  0.15,
+];
+// https://github.com/ricokahler/color2k/blob/main/src/parseToRgba.ts
+const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+function niceParseToHsla(color) {
+  const normalizedColor = color.trim();
+  const hslaMatch = hslaRegex.exec(normalizedColor);
+  if (hslaMatch) {
+    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
+    if (guard(0, 100, s) !== s)
+      throw new ColorError(color);
+    if (guard(0, 100, l) !== l)
+      throw new ColorError(color);
+    return [h, s, l, a || 1];
   }
-  const { scale, colorScale } = makeColorScale(color);
-  return scale
-    .map((color, index) => `--sl-color-${name}-${colorScale[index]}: ${chroma(color).hex()};`)
-    .join("\n");
+  // Warning -- converts to RGB first, so is lossy
+  return parseToHsla(color);
+}
+function generateScale(color, name = "primary") {
+  const [h, s, l, a] = niceParseToHsla(color);
+  return lScale
+    .map((l) => hsla(h, s, l, a))
+    .map((color, index) => {
+    return `--sl-color-${name}-${colorScale[index]}: ${color};\n`;
+  });
 }
 /**
- * Generate a Shoelace color scale style objects from a base color
+ * Generated a Shoelace color scale css string from a base color
  *
  * @param color
  * @param name
  * @returns
  */
-export function autoColorScaleStyleObject(color, name = "primary") {
-  if (!chroma.valid(color)) {
-    return {};
-  }
-  const { scale, colorScale } = makeColorScale(color);
-  return scale.reduce((agg, color, index) => ({
-    ...agg,
-    [`--sl-color-${name}-${colorScale[index]}`]: `${chroma(color).hex()};`,
-  }), { color: "blue", "--sl-color-primary-50": "#eaffea;" });
-}
-function makeColorScale(color) {
-  const colorScale = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-  const hex = chroma(color).hex();
-  const scale = chroma
-    .scale([
-    chroma(hex).luminance(0.95),
-    chroma(hex).luminance(0.84),
-    chroma(hex).luminance(0.73),
-    chroma(hex).luminance(0.62),
-    chroma(hex).luminance(0.49),
-    chroma(hex).luminance(0.35),
-    chroma(hex).luminance(0.23),
-    chroma(hex).luminance(0.15),
-    chroma(hex).luminance(0.1),
-    chroma(hex).luminance(0.05),
-    chroma(hex).luminance(0.02),
-  ])
-    .colors(colorScale.length);
-  return { scale, colorScale };
+export function autoColorScaleCss(color, name = "primary") {
+  return generateScale(color, name).join("\n");
 }

package/dist/collection/components/sqm-stencilbook/Themes.js

@@ -26,7 +26,7 @@ export const Netflix = `
 `;
 export const SaaSquatchCorporate = `
 :root{
-    ${autoColorScaleCss("green")}
+    ${autoColorScaleCss("#65bd60")}
     --sl-font-sans: Arial;
 }
 `;
@@ -38,15 +38,7 @@ export const NYTimes = `
 `;
 export const Klip = `
 :root{
-	--sl-color-primary-50: #E8E5F8;
-    --sl-color-primary-100: #C6BEED;
-    --sl-color-primary-200: #A192E2;
-    --sl-color-primary-300: #7B66D6;
-    --sl-color-primary-400: #5E46CD;
-    --sl-color-primary-500: #4225C4;
-    --sl-color-primary-600: #3C21BE;
-    --sl-color-primary-700: #331BB6;
-    --sl-color-primary-800: #2B16AF;
-    --sl-color-primary-900: #1D0DA2;
+    ${autoColorScaleCss("#4225C4")};
 }
+
 `;

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

@@ -48,6 +48,8 @@ import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeL
 import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
 import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
 import * as BrandStories from "../sqm-brand/SqmBrand.stories";
+import * as CardFeed from "../sqm-card-feed/CardFeed.stories";
+import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -100,7 +102,9 @@ const stories = [
   UseRewardsTable,
   ProgramExplainer,
   ProgramExplainerStep,
-  BrandStories
+  BrandStories,
+  CardFeed,
+  PortalContainer
 ];
 /**
  * For internal documentation

package/dist/collection/components/sqm-task-card/TaskCard.stories.js

@@ -38,7 +38,11 @@ const oneAction = {
   openNewTab: false,
   showExpiry: false,
   rewardDuration: null,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const coupleActions = {
@@ -55,8 +59,12 @@ const coupleActions = {
   buttonLink: "https://example.com/",
   openNewTab: false,
   showExpiry: false,
+  completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 const manyActions = {
@@ -65,6 +73,7 @@ const manyActions = {
   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,
   progress: 100,
   goal: 500,
@@ -75,6 +84,9 @@ const manyActions = {
   showExpiry: false,
   rewardDuration: null,
   loading: false,
+  expiryMessage: "Ends {endDate}",
+  startsOnMessage: "Starts {startDate}",
+  endedMessage: "Ended {endDate}",
   finite: 0,
 };
 export const TaskCard = () => {

package/dist/collection/components/sqm-task-card/progress-bar/SVGs.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export const gift = () => {
+export const Gift = () => {
   return (h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     h("path", { d: "M15 5H12.4508H9V16H13.5C14.0523 16 14.5 15.5523 14.5 15V9H15C15.5523 9 16 8.55228 16 8V6C16 5.44772 15.5523 5 15 5Z", fill: "#F2C94C" }),
     h("path", { d: "M1.5 9V15C1.5 15.5523 1.94772 16 2.5 16H7V5H4.64242H1C0.447715 5 0 5.44772 0 6V8C0 8.55228 0.447715 9 1 9H1.5Z", fill: "#F2C94C" }),