@saasquatch/mint-components 1.15.0-98 → 1.16.0-0

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

@@ -1,52 +1,52 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
+const style = {
+  Wrapper: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+    gap: "var(--sl-spacing-large)",
+  },
+  HeaderContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+  },
+  ShareCodeContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  ShareButtonContainer: {
+    width: "100%",
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  TitleText: {
+    color: "var(--sl-color-neutral-700)",
+    fontSize: "var(--sl-font-size-large)",
+    margin: "0",
+  },
+};
+const vanillaStyle = `
+:host {
+  display: block;
+}
+:host([hidden]): {
+  display: none;
+}
+`;
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 export function ReferralCodesView(props) {
-  const { slots, titleText, states, textColor = "var(--sqm-text-subdued)", } = props;
-  const style = {
-    Wrapper: {
-      width: "100%",
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      flexDirection: "column",
-      gap: "var(--sl-spacing-large)",
-      color: textColor,
-    },
-    HeaderContainer: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      width: "100%",
-    },
-    ShareCodeContainer: {
-      width: "100%",
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      flexDirection: "column",
-    },
-    ShareButtonContainer: {
-      width: "100%",
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      flexDirection: "column",
-    },
-    TitleText: {
-      fontSize: "var(--sl-font-size-large)",
-      margin: "0",
-    },
-  };
-  const vanillaStyle = `
-    :host {
-      display: block;
-    }
-    :host([hidden]): {
-      display: none;
-    }
-  `;
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
+  const { slots, titleText, states } = props;
   const getSlotContent = (states) => {
     if (states.noCodes) {
       return slots.empty;

package/dist/collection/components/sqm-referral-codes/sqm-referral-codes.js

@@ -7,7 +7,6 @@ import { ReferralCodesView, } from "./sqm-referral-codes-view";
 import { useReferralCodes } from "./useReferralCodes";
 /**
  * @uiName Promo Codes
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqb-program-section","sqb-conditional-section"]
  * @slots [{"name":"", "title":"Promo Codes Content"}]
  * @exampleGroup Sharing
  * @example Promo Codes - <sqm-referral-codes><sqm-pagination slot="pagination"></sqm-pagination><sqm-referral-code slot="shareCodes" show-notification-text="true"></sqm-referral-code><sqm-portal-container gap="small" slot="shareButtons"><sqm-share-button medium="email">Share via email</sqm-share-button><sqm-share-button medium="fbmessenger">Share on Facebook</sqm-share-button><sqm-share-button medium="whatsapp">Share on WhatsApp</sqm-share-button></sqm-portal-container></sqm-referral-codes>
@@ -77,32 +76,6 @@ export class ReferralCodes {
       "reflect": false,
       "defaultValue": "\"Start sharing\""
     },
-    "textColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Text Color",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": ""
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
     "emptyStateHeaderText": {
       "type": "string",
       "mutable": false,
@@ -194,7 +167,7 @@ export class ReferralCodes {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ReferralCodesViewProps>",
-        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; textColor?: string; }",
+        "resolved": "{ states?: { noCodes: boolean; loading: boolean; }; slots?: { shareButtons: VNode; shareCodes: VNode; pagination: VNode; empty: VNode; loading: VNode; }; titleText?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -238,7 +211,6 @@ function LoadingRow() {
 function useDemoReferralCodes(props) {
   return deepmerge({
     titleText: props.titleText,
-    textColor: props.textColor,
     states: {
       noCodes: false,
       loading: false,

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { Converted as ConvertedStatus, DateCell, Denied as DeniedStatus, InProgress, PendingReview as PendingReviewStatus, Pending as PendingStatus, } from "./ReferralTableCell.stories";
-import { AvailableNoExpiry, Denied, PayoutCancelled, PayoutFailed, PayoutSent, PendingNewTaxForm, PendingNoUnpend, PendingPartnerCreation, PendingReview, PendingTaxReview, PendingTaxSubmission, Redeemed, } from "./ReferralTableRewardsCell.stories";
+import { AvailableNoExpiry, PendingNoUnpend, Redeemed, Denied, PendingReview, PayoutSent, PayoutFailed, PendingNewTaxForm, PendingPartnerCreation, PendingTaxReview, PendingTaxSubmission, PayoutCancelled, } from "./ReferralTableRewardsCell.stories";
+import { DateCell, PendingReview as PendingReviewStatus, Pending as PendingStatus, Denied as DeniedStatus, Converted as ConvertedStatus, InProgress, } from "./ReferralTableCell.stories";
 import scenario from "./referral-table.feature";
 export default {
   title: "Components/Referral Table",

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

@@ -27,7 +27,9 @@ export class ReferralTableRewardsCell {
         "flex-wrap": "wrap",
       },
       Details: {
+        "padding-bottom": "var(--sl-spacing-small)",
         "max-width": "500px",
+        // "padding-right": "var(--sl-spacing-x-small)",
         "&::part(header)": {
           padding: "var(--sl-spacing-x-small)",
           cursor: `${this.hideDetails ? "default" : "pointer"}`,
@@ -36,7 +38,6 @@ export class ReferralTableRewardsCell {
           padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
         },
         "&::part(base)": {
-          border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
           opacity: "1",
         },
         "&::part(summary-icon)": {
@@ -44,6 +45,7 @@ export class ReferralTableRewardsCell {
         },
         "&::part(summary-icon[open])": {
           transform: "rotate(-90deg)",
+          background: "red",
         },
       },
       BadgeContainer: {
@@ -54,64 +56,23 @@ export class ReferralTableRewardsCell {
       BoldText: {
         "font-weight": "var(--sl-font-weight-semibold)",
       },
-      RedeemBadge: {
+      StatusBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
           textAlign: "center",
           maxWidth: "170px",
           whiteSpace: "pre-line",
-          background: "var(--sqm-informative-color-icon)",
-          color: "var(--sl-color-white)",
         },
       },
-      DangerBadge: {
-        paddingLeft: "var(--sl-spacing-xxx-small)",
-        "&::part(base)": {
-          textAlign: "center",
-          maxWidth: "170px",
-          whiteSpace: "pre-line",
-          background: "var(--sqm-danger-color-icon)",
-          color: "var(--sl-color-white)",
-        },
-      },
-      WarningBadge: {
-        paddingLeft: "var(--sl-spacing-xxx-small)",
-        "&::part(base)": {
-          textAlign: "center",
-          maxWidth: "170px",
-          whiteSpace: "pre-line",
-          background: "var(--sqm-warning-color-icon)",
-          color: "var(--sl-color-white)",
-        },
-      },
-      SuccessBadge: {
+      RedeemBadge: {
         paddingLeft: "var(--sl-spacing-xxx-small)",
         "&::part(base)": {
-          textAlign: "center",
-          maxWidth: "170px",
-          whiteSpace: "pre-line",
-          background: "var(--sqm-success-color-icon)",
-          color: "var(--sl-color-white)",
+          background: "var(--sl-color-blue-600)",
         },
       },
     };
     const sheet = createStyleSheet(style);
     const styleString = sheet.toString();
-    const getBadgeCSSClass = (badgeType) => {
-      switch (badgeType) {
-        case "primary":
-          return sheet.classes.RedeemBadge;
-        case "danger":
-          return sheet.classes.DangerBadge;
-        case "success":
-          return sheet.classes.SuccessBadge;
-        case "warning":
-        case "info":
-          return sheet.classes.WarningBadge;
-        default:
-          return sheet.classes.WarningBadge;
-      }
-    };
     const getState = (reward, taxConnection) => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
       const possibleStates = [
@@ -154,7 +115,9 @@ export class ReferralTableRewardsCell {
           if (!((_k = taxConnection === null || taxConnection === void 0 ? void 0 : taxConnection.publisher) === null || _k === void 0 ? void 0 : _k.currentTaxDocument))
             return "PENDING_TAX_SUBMISSION";
           const status = taxConnection.publisher.currentTaxDocument.status;
-          if (status === "INACTIVE")
+          if (status === "INACTIVE" ||
+            status === "INVALID_W9_ELECTRONIC_DOCUMENT" ||
+            status === "INVALID_W9_ELECTRONIC_DOCUMENT_CHECK_INTERNAL")
             return "PENDING_NEW_TAX_FORM";
           if (status === "NOT_VERIFIED")
             return "PENDING_TAX_REVIEW";
@@ -218,14 +181,20 @@ export class ReferralTableRewardsCell {
           h(TextSpanView, { type: "p" },
             h("span", { part: "sqm-cell-value", class: sheet.classes.BoldText }, reward.prettyValue)),
           h("div", { class: sheet.classes.BadgeContainer },
-            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, intl.formatMessage({
+            state === "PENDING" && reward.dateScheduledFor ? (h("sl-badge", { class: slBadgeType === "primary"
+                ? sheet.classes.RedeemBadge
+                : sheet.classes.StatusBadge, type: slBadgeType, pill: true }, intl.formatMessage({
               id: "pendingForText",
               defaultMessage: this.pendingForText,
             }, {
               status: badgeText,
               date: getTimeDiff(reward.dateScheduledFor),
-            }))) : (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: slBadgeType, pill: true }, badgeText)),
-            reward.dateExpires && state === "AVAILABLE" && (h("sl-badge", { class: getBadgeCSSClass(slBadgeType), type: "info", pill: true },
+            }))) : (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 },
               this.expiringText,
               ` ${getTimeDiff(reward.dateExpires)}`)))),
         h("div", null,
@@ -312,8 +281,7 @@ export class ReferralTableRewardsCell {
         "resolved": "Reward[]",
         "references": {
           "Reward": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         }
       },
@@ -332,8 +300,7 @@ export class ReferralTableRewardsCell {
         "resolved": "ImpactConnection",
         "references": {
           "ImpactConnection": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         }
       },

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

@@ -1,62 +1,23 @@
 import { Component, h, Prop } from "@stencil/core";
 import { createStyleSheet } from "../../../styling/JSS";
 const style = {
-  SubText: {
-    fontSize: "var(--sl-font-size-small)",
-    color: "var(--sqm-text-subdued)",
-    margin: "0",
-  },
-  RedeemBadge: {
+  Badge: {
     "&::part(base)": {
       fontSize: "var(--sl-font-size-small)",
       padding: "4px 8px",
-      textAlign: "center",
-      maxWidth: "170px",
       whiteSpace: "pre-line",
-      background: "var(--sqm-informative-color-icon)",
-      color: "var(--sl-color-white)",
     },
   },
-  DangerBadge: {
-    "&::part(base)": {
-      fontSize: "var(--sl-font-size-small)",
-      padding: "4px 8px",
-      textAlign: "center",
-      maxWidth: "170px",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-danger-color-icon)",
-      color: "var(--sl-color-white)",
-    },
-  },
-  WarningBadge: {
-    "&::part(base)": {
-      fontSize: "var(--sl-font-size-small)",
-      padding: "4px 8px",
-      textAlign: "center",
-      maxWidth: "170px",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-warning-color-icon)",
-      color: "var(--sl-color-white)",
-    },
-  },
-  SuccessBadge: {
-    "&::part(base)": {
-      fontSize: "var(--sl-font-size-small)",
-      padding: "4px 8px",
-      textAlign: "center",
-      maxWidth: "170px",
-      whiteSpace: "pre-line",
-      background: "var(--sqm-success-color-icon)",
-      color: "var(--sl-color-white)",
-    },
+  SubText: {
+    fontSize: "var(--sl-font-size-small)",
+    color: "var(--sl-color-neutral-500)",
+    margin: "0",
   },
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export class ReferralTableStatusCell {
   render() {
-    const sheet = createStyleSheet(style);
-    const styleString = sheet.toString();
     const getBadgeType = (fraudStatus) => {
       if (fraudStatus === "PENDING")
         return "warning";
@@ -66,24 +27,9 @@ export class ReferralTableStatusCell {
         return "success";
       return "warning";
     };
-    const getBadgeCSSClass = (badgeType) => {
-      switch (badgeType) {
-        case "primary":
-          return sheet.classes.RedeemBadge;
-        case "danger":
-          return sheet.classes.DangerBadge;
-        case "success":
-          return sheet.classes.SuccessBadge;
-        case "warning":
-        case "info":
-          return sheet.classes.WarningBadge;
-        default:
-          return sheet.classes.WarningBadge;
-      }
-    };
     return (h("div", null,
       h("style", { type: "text/css" }, styleString),
-      h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: getBadgeCSSClass(getBadgeType(this.fraudStatus)) }, this.statusText),
+      h("sl-badge", { pill: true, type: getBadgeType(this.fraudStatus), class: sheet.classes.Badge }, this.statusText),
       this.statusSubText ? (h("p", { class: sheet.classes.SubText }, this.statusSubText)) : null));
   }
   static get is() { return "sqm-referral-table-status-cell"; }
@@ -114,8 +60,7 @@ export class ReferralTableStatusCell {
         "resolved": "\"APPROVED\" | \"DENIED\" | \"PENDING\"",
         "references": {
           "FraudStatus": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         }
       },

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

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

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

@@ -128,8 +128,7 @@ export class ReferralTableDateColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"
@@ -167,8 +166,7 @@ export class ReferralTableDateColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

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

@@ -306,12 +306,10 @@ export class ReferralTableRewardsColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           },
           "ImpactConnection": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"
@@ -349,8 +347,7 @@ export class ReferralTableRewardsColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

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

@@ -243,12 +243,10 @@ export class ReferralTableStatusColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           },
           "FraudStatus": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"
@@ -286,8 +284,7 @@ export class ReferralTableStatusColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

package/dist/collection/components/sqm-referral-table/columns/sqm-referral-table-user-column.js

@@ -153,8 +153,7 @@ export class ReferralTableUserColumn {
             "location": "global"
           },
           "Referral": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"
@@ -192,8 +191,7 @@ export class ReferralTableUserColumn {
             "location": "global"
           },
           "Referrer": {
-            "location": "import",
-            "path": "../../../saasquatch"
+            "location": "global"
           }
         },
         "return": "Promise<any>"

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

@@ -10,8 +10,6 @@ import mockReferralData from "./mockReferralData";
 import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
- * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"]
  * @exampleGroup Referrals
  * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}]
  * @example Referral Table - <sqm-referral-table per-page="4" hidden-columns="2" more-label="Next" prev-label="Prev" sm-breakpoint="599" md-breakpoint="799" > <sqm-referral-table-user-column column-title="Customer" anonymous-user="Anonymous User" deleted-user="Deleted User" ></sqm-referral-table-user-column> <sqm-referral-table-rewards-column column-title="Rewards" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} PENDING_REVIEW {Pending} PAYOUT_APPROVED {Payout Approved} PAYOUT_FAILED {Payout Failed} PAYOUT_CANCELLED {Payout Cancelled} PENDING_TAX_REVIEW {Pending} PENDING_NEW_TAX_FORM {Pending} PENDING_TAX_SUBMISSION {Pending} PENDING_PARTNER_CREATION {Pending} DENIED {Denied} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} PENDING_REVIEW {Pending since} PAYOUT_APPROVED {Reward approved for payout and was scheduled for payment based on your settings.} PAYOUT_FAILED {Payout failed due to a fulfillment issue and is currently being retried.} PAYOUT_CANCELLED {If you think this is a mistake, contact our Support team.} 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} DENIED {Denied on} EXPIRED {Reward expired on} other {Not available} }" fuel-tank-text="Your code is" reward-received-text="Reward received on" expiring-text="Expiring in" pending-for-text="{status} for {date}" denied-help-text="Contact support if you think this is a mistake." ></sqm-referral-table-rewards-column> <sqm-referral-table-date-column column-title="Date converted" date-shown="dateConverted" ></sqm-referral-table-date-column> <sqm-referral-table-status-column column-title="Status" converted-status-text="Converted" in-progress-status-text="In Progress" pending-review-status-text="Pending" denied-status-text="Denied" pending-review-status-sub-text="Awaiting review" denied-status-sub-text="Detected self-referral" ></sqm-referral-table-status-column> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_referral2.png" empty-state-header="View your referral details" empty-state-text="Refer a friend to view the status of your referrals and rewards earned" slot="empty" ></sqm-empty> </sqm-referral-table>
@@ -272,8 +270,7 @@ export class ReferralTable {
             "path": "../../tables/GenericTableView"
           },
           "Referral": {
-            "location": "import",
-            "path": "../../saasquatch"
+            "location": "global"
           }
         }
       },

package/dist/collection/components/sqm-referred-registration/sqm-referred-registration.js

@@ -6,10 +6,9 @@ import { useInstantAccessRegistration } from "../sqm-instant-access-registration
 import { EmailRegistrationView, } from "../views/email-registration-view";
 /**
  * @uiName Instant Access Friend Registration
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
- * @example Friend Registration - <sqm-referred-registration></sqm-referred-registration>
+ * @example Instant Access Friend Registration - <sqm-referred-registration></sqm-referred-registration>
  * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
  */
 export class ReferredRegistration {
@@ -110,6 +109,13 @@ export class ReferredRegistration {
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.paddingLeft = "large";
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiGroup Card style
+     * @uiType string
+     */
+    this.backgroundColor = "#ffffff";
     /**
      * @undocumented
      * @uiType boolean
@@ -558,7 +564,8 @@ export class ReferredRegistration {
         "text": ""
       },
       "attribute": "background-color",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"#ffffff\""
     },
     "includeCookies": {
       "type": "boolean",

package/dist/collection/components/sqm-reward-exchange-list/RewardExchangeList.stories.js

@@ -8,24 +8,24 @@ export default {
     scenario,
   },
 };
-const StoryBase = (props) => {
+const StoryBase = (props) => () => {
   return h(RewardExchangeView, Object.assign({}, props));
 };
-export const ChooseReward = () => StoryBase(Data.rewardExchange);
-export const CustomErrorMessage = () => StoryBase(Data.rewardExchangeCustomErrorMsg);
-export const LongTextRewardExhange = () => StoryBase(Data.rewardExchangeLongText);
-export const ChooseRewardSelected = () => StoryBase(Data.rewardExchangeSelected);
-export const ChooseAmount = () => StoryBase(Data.chooseAmountFixed);
-export const ChooseAmountNoDescription = () => StoryBase(Data.chooseAmountFixedNoDescription);
-export const ChooseAmountVariableAndStepped = () => StoryBase(Data.chooseAmountVariable);
-export const ChooseAmountVariableAndSteppedNoDescription = () => StoryBase(Data.chooseAmountVariableNoDescription);
-export const chooseAmountVariableAndSteppedDisabled = () => StoryBase(Data.chooseAmountVariableDisabled);
-export const chooseAmountVariableAndSteppedUnavailable = () => StoryBase(Data.chooseAmountVariableUnavailable);
-export const Confirm = () => StoryBase(Data.confirmFixed);
-export const ConfirmVariableAndStepped = () => StoryBase(Data.confirmVariable);
-export const RedemptionError = () => StoryBase(Data.redemptionError);
-export const QueryError = () => StoryBase(Data.queryError);
-export const SuccessPromo = () => StoryBase(Data.success);
-export const SuccessVariableAndStepped = () => StoryBase(Data.successVariable);
-export const Loading = () => StoryBase(Data.loading);
-export const Empty = () => StoryBase(Data.empty);
+export const ChooseReward = StoryBase(Data.rewardExchange);
+export const CustomErrorMessage = StoryBase(Data.rewardExchangeCustomErrorMsg);
+export const LongTextRewardExhange = StoryBase(Data.rewardExchangeLongText);
+export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected);
+export const ChooseAmount = StoryBase(Data.chooseAmountFixed);
+export const ChooseAmountNoDescription = StoryBase(Data.chooseAmountFixedNoDescription);
+export const ChooseAmountVariableAndStepped = StoryBase(Data.chooseAmountVariable);
+export const ChooseAmountVariableAndSteppedNoDescription = StoryBase(Data.chooseAmountVariableNoDescription);
+export const chooseAmountVariableAndSteppedDisabled = StoryBase(Data.chooseAmountVariableDisabled);
+export const chooseAmountVariableAndSteppedUnavailable = StoryBase(Data.chooseAmountVariableUnavailable);
+export const Confirm = StoryBase(Data.confirmFixed);
+export const ConfirmVariableAndStepped = StoryBase(Data.confirmVariable);
+export const RedemptionError = StoryBase(Data.redemptionError);
+export const QueryError = StoryBase(Data.queryError);
+export const SuccessPromo = StoryBase(Data.success);
+export const SuccessVariableAndStepped = StoryBase(Data.successVariable);
+export const Loading = StoryBase(Data.loading);
+export const Empty = StoryBase(Data.empty);