@saasquatch/mint-components 1.16.0-9 → 2.0.0-1

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

@@ -14,14 +14,47 @@ const style = {
   },
   RedeemBadge: {
     "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-informative-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  DangerBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-danger-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  WarningBadge: {
+    "&::part(base)": {
+      padding: "4px 8px",
       fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-warning-color-icon)",
+      color: "var(--sl-color-white)",
+    },
+  },
+  SuccessBadge: {
+    "&::part(base)": {
       padding: "4px 8px",
-      background: "var(--sl-color-blue-600)",
+      fontSize: "var(--sl-font-size-small)",
+      textAlign: "center",
+      whiteSpace: "pre-line",
+      background: "var(--sqm-success-color-icon)",
+      color: "var(--sl-color-white)",
     },
   },
   Date: {
     fontSize: "var(--sl-font-size-small)",
-    color: "var(--sl-color-neutral-500)",
+    color: "var(--sqm-text-subdued)",
     margin: "0",
   },
 };
@@ -168,11 +201,25 @@ export class RewardTableStatusCell {
       : rewardStatus === "DENIED"
         ? this.deniedText
         : null;
+    // @ts-ignore
+    const getBadgeCSSClass = (badgeType) => {
+      switch (rewardStatus) {
+        case "AVAILABLE":
+          return sheet.classes.SuccessBadge;
+        case "REDEEMED":
+        case "PAYOUT_APPROVED":
+          return sheet.classes.RedeemBadge;
+        case "PENDING":
+        case "PENDING_REVIEW":
+          return sheet.classes.WarningBadge;
+        default:
+          return sheet.classes.DangerBadge;
+      }
+    };
+    const badgeCSSClass = getBadgeCSSClass(badgeType);
     return (h("div", { style: { display: "contents" } },
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { type: badgeType, pill: true, class: rewardStatus === "REDEEMED" || rewardStatus === "PAYOUT_APPROVED"
-          ? sheet.classes.RedeemBadge
-          : sheet.classes.Badge }, statusText),
+      h("sl-badge", { type: badgeType, pill: true, class: badgeCSSClass }, statusText),
       h("p", { class: sheet.classes.Date }, fraudStatusText ||
         pendingReasons ||
         this.getPayoutStatusText(rewardStatus) ||
@@ -224,7 +271,8 @@ export class RewardTableStatusCell {
         "resolved": "Reward",
         "references": {
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },
@@ -243,7 +291,8 @@ export class RewardTableStatusCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         }
       },

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Date Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
+ * @example Date Column - <sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column>
  */
 export class RewardTableDateColumn {
   constructor() {
@@ -108,7 +108,8 @@ export class RewardTableDateColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Reward Table Customer Note Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Reward Table Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
+ * @example Customer Note Column - <sqm-rewards-table-customer-note-column column-title="Note"></sqm-rewards-table-customer-note-column>
  */
 export class RewardTableCustomerNoteColumn {
   constructor() {
@@ -69,7 +69,8 @@ export class RewardTableCustomerNoteColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -5,7 +5,7 @@ import { useRequestRerender } from "../../../tables/re-render";
  * @uiName Rewards Table Reward Column
  * @validParents ["sqm-rewards-table"]
  * @exampleGroup Rewards
- * @example Rewards Table Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
+ * @example Reward Column - <sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!"></sqm-rewards-table-reward-column>
  */
 export class RewardsTableColumn {
   constructor() {
@@ -147,7 +147,8 @@ export class RewardsTableColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -215,7 +215,8 @@ export class RewardTableUserColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -25,9 +25,9 @@ export class RewardTableStatusColumn {
      */
     this.expiryText = "Expires on ";
     /**
-     * Displayed when a reward is pending due to W9 compliance.
+     * Displayed when a reward is pending due to W-9 compliance.
      *
-     * @uiName W9 pending text
+     * @uiName W-9 pending text
      */
     this.pendingUsTax = "W-9 required";
     /**
@@ -198,10 +198,10 @@ export class RewardTableStatusColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "W9 pending text",
+            "text": "W-9 pending text",
             "name": "uiName"
           }],
-        "text": "Displayed when a reward is pending due to W9 compliance."
+        "text": "Displayed when a reward is pending due to W-9 compliance."
       },
       "attribute": "pending-us-tax",
       "reflect": false,
@@ -455,10 +455,12 @@ export class RewardTableStatusColumn {
             "location": "global"
           },
           "Reward": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           },
           "ImpactConnection": {
-            "location": "global"
+            "location": "import",
+            "path": "../../../saasquatch"
           }
         },
         "return": "Promise<any>"

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

@@ -1,6 +1,6 @@
 import { isDemo } from "@saasquatch/component-boilerplate";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
 import { Component, h, Prop } from "@stencil/core";
 import deepmerge from "deepmerge";
 import { GenericTableView, } from "../../tables/GenericTableView";
@@ -10,6 +10,7 @@ import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Reward Table
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @exampleGroup Rewards
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Reward Table - <sqm-rewards-table per-page="4" prev-label="Prev" more-label="Next" hidden-columns="0" sm-breakpoint="599" md-breakpoint="799" ><sqm-rewards-table-status-column column-title="Status" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_CANCELLED {Payout Cancelled} PAYOUT_FAILED {Payout Failed} EXPIRED {Expired} REDEEMED {Redeemed} DENIED {Denied} other {Not available} }" expiry-text="Expires on " pending-us-tax="W-9 required" pending-scheduled="Until" pending-unhandled="Fulfillment error" pending-review-text="Awaiting review" denied-text="Detected self-referral" pending-tax-review="Awaiting tax form review." pending-new-tax-form="Invalid tax form. Submit a new form to receive your rewards." pending-tax-submission="Submit your tax documents to receive your rewards." pending-partner-creation="Complete your tax and cash payout setup to receive your rewards." payout-failed="Payout failed due to a fulfillment issue and is current being retried." payout-cancelled="If you think this is a mistake, contact our Support team." payout-approved="Reward was scheduled for payment based on your settings, barring any account holds." ></sqm-rewards-table-status-column> <sqm-rewards-table-source-column column-title="Source" anonymous-user="Anonymous User" deleted-user="Deleted User" reward-exchange-text="Reward Exchange" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" ></sqm-rewards-table-source-column ><sqm-rewards-table-reward-column column-title="Reward" redeemed-text="{redeemedAmount} redeemed" available-text="{availableAmount} remaining" copy-text="Copied!" ></sqm-rewards-table-reward-column ><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven" ></sqm-rewards-table-date-column ><sqm-rewards-table-customer-note-column column-title="Note" ></sqm-rewards-table-customer-note-column ><sqm-empty slot="empty" empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png" empty-state-header="View your rewards" empty-state-text="Complete program tasks to view the details of your rewards" ></sqm-empty ></sqm-rewards-table>
@@ -234,7 +235,8 @@ export class RewardsTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "global"
+            "location": "import",
+            "path": "../../saasquatch"
           }
         }
       },

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

@@ -1,11 +1,11 @@
 import { useLocale, usePaginatedQuery, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
 import { useEffect, useReducer } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
+import debugFn from "debug";
 import { gql } from "graphql-request";
 import { useRerenderListener } from "../../tables/re-render";
 import { useChildElements } from "../../tables/useChildElements";
 import { generateUserError } from "../sqm-referral-table/useReferralTable";
-import debugFn from "debug";
 const debug = debugFn("sq:useRewardsTable");
 export const CSS_NAMESPACE = "sqm-rewards-table";
 const GET_REWARDS = gql `

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

@@ -1,6 +1,7 @@
 import { h, Component, State, Prop, Host } from "@stencil/core";
 /**
  * @uiName Route
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"]
  * @slots [{"name":"","title":"Content"}]
  */
 export class SqmRoute {

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

@@ -3,6 +3,8 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { useRouter } from "./useRouter";
 /**
  * @uiName Router
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqb-program-section", "sqb-conditional-section"]
+ * @validChildren ["sqm-route"]
  * @slots [{"name":"","title":"Routes"}]
  */
 export class SqmRouter {

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

@@ -1,23 +1,15 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import { useScroll } from "./useScroll";
-import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Scroll Button
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText
  */
 export class Scroll {
   constructor() {
     this.ignored = true;
-    /**
-     * @uiName Button type
-     * @uiType string
-     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
-     * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
-  
-     */
-    this.buttonType = "default";
     /**
      * @uiName Scroll animation style
      * @uiType string
@@ -29,103 +21,33 @@ export class Scroll {
   }
   disconnectedCallback() { }
   render() {
-    var _a;
     const { callbacks } = useScroll(this);
-    const outlineColor = (_a = this.buttonType) !== null && _a !== void 0 ? _a : "primary";
-    const style = {
-      Button: {
-        "& .outline": {
-          "&::part(base)": {
-            color: "var(--sl-color-" + outlineColor + "-500)",
-            borderColor: "var(--sl-color-" + outlineColor + "-500)",
-            backgroundColor: "transparent",
-            "&:hover": {
-              color: "var(--sl-color-primary-text)",
-              backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
-            },
-          },
-        },
-        "& .neutral": {
-          "&::part(base)": {
-            color: "var(--sl-color-primary-text)",
-            background: "var(--sl-color-neutral-500)",
-            "&:hover": {
-              opacity: "0.8",
-            },
-          },
-        },
-        "& .mobile": {
-          "@media (max-width: 499px)": {
-            width: "100%",
-          },
-        },
-      },
-    };
-    const sheet = createStyleSheet(style);
-    const styleString = sheet.toString();
-    const vanillaStyle = `
-		:host{
-			display: contents;
-		}
-		${this.mobile &&
-      `
-		@media only screen and (max-width: 499px) {
-			:host {
-				display: block;
-				width: 100%;
-			}
-		}
-	  `}
-	`;
-    let classStack = "";
-    if (this.outline && this.buttonType != "default")
-      classStack += "outline ";
-    if (this.buttonType === "neutral")
-      classStack += "neutral ";
-    if (this.mobile)
-      classStack += "mobile ";
-    return (h("div", { class: sheet.classes.Button },
-      h("style", { type: "text/css" },
-        vanillaStyle,
-        styleString),
-      h("sl-button", { type: this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack },
-        (this.iconSlot || this.iconName) && (h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })),
-        this.buttonText,
-        h("slot", null))));
+    const vanillaStyleString = `
+    *::part(secondarybutton-base),
+    sl-button[type="secondary"]::part(base) {
+      font-family: var(--sqm-primary-font);
+      background-color: var(--sqm-secondary-button-background);
+      color: var(--sqm-secondary-button-color);
+      border-color: var(--sqm-secondary-button-color-border);
+      border-radius: var(--sqm-secondary-button-radius);
+    }
+
+    *::part(secondarybutton-base):hover,
+    sl-button[type="secondary"]::part(base):hover {
+      background-color: var(--sqm-secondary-button-background-hover);
+      color: var(--sqm-secondary-button-color-hover);
+      border-color: var(--sqm-secondary-button-border-color-hover);
+    }
+  `;
+    return (h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle },
+      h("style", { type: "text/css" }, vanillaStyleString),
+      (this.iconSlot || this.iconName) && (h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })),
+      this.buttonText,
+      h("slot", null)));
   }
   static get is() { return "sqm-scroll"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "buttonType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "| \"default\"\n    | \"primary\"\n    | \"success\"\n    | \"neutral\"\n    | \"warning\"\n    | \"danger\"\n    | \"text\"",
-        "resolved": "\"danger\" | \"default\" | \"neutral\" | \"primary\" | \"success\" | \"text\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Button type",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"default\", \"primary\", \"success\", \"neutral\", \"warning\", \"danger\", \"text\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Default\", \"Primary\", \"Success\", \"Neutral\", \"Warning\", \"Danger\", \"Text\"]",
-            "name": "uiEnumNames"
-          }],
-        "text": ""
-      },
-      "attribute": "button-type",
-      "reflect": false,
-      "defaultValue": "\"default\""
-    },
     "buttonText": {
       "type": "string",
       "mutable": false,

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

@@ -44,13 +44,15 @@ export const TextStyleWithoutIcon = () => {
   const props = { medium: "facebook", type: "text", hideicon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
-export const WithCustomColors = () => {
+export const WithCustomColorsAndBranding = () => {
   const props = {
     medium: "facebook",
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
     iconslot: "prefix",
+    border: "2px solid yellow",
+    borderradius: 30,
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };

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

@@ -5,7 +5,11 @@ const medium = {
   facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
   twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
   email: { color: "#666666", text: "#fff", icon: "envelope" },
-  direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+  direct: {
+    color: "var(--sqm-primary-button-background)",
+    text: "var(--sqm-primary-button-color)",
+    icon: "send",
+  },
   linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
   sms: { color: "#34DA50", text: "#fff", icon: "chat" },
   fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
@@ -26,13 +30,9 @@ const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-	*::part(base) {
-	border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}80!important;
+	sl-button::part(base) {
+	  border: ${props.border || "none"};
+    font-family: var(--sqm-primary-font);
 
 	background: ${props.backgroundcolor
     ? props.backgroundcolor
@@ -44,24 +44,12 @@ export function ShareButtonView(props, children) {
     : props.medium
       ? medium[props.medium].text
       : ""};
-	border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+	border-radius: ${props.borderradius
+    ? props.borderradius + "px"
+    : "var(--sqm-primary-button-radius)"};
 	}
 
-	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
-	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
-    : props.medium
-      ? medium[props.medium].color
-      : ""}D1!important;
-	}
 
 	*::part(label) {
 		position: relative;
@@ -71,7 +59,7 @@ export function ShareButtonView(props, children) {
   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, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}sharebutton-base` },
+    h("sl-button", { class: sheet.classes.buttonStyle, target: props.openInSameTab ? "_self" : "_blank", loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: !props.isPlainLink ? props.onClick : undefined, href: props.isPlainLink ? props.messageLink : undefined, exportparts: `base: ${props.type}button-base` },
       !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "base: icon" })),
       !props.hidetext && children)));
 }