@saasquatch/mint-components 1.5.6-4 → 1.6.0-0

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

@@ -3,13 +3,11 @@ import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Rewards Table Reward Column
- * @validParents ["sqm-rewards-table"]
- * @exampleGroup Rewards
  */
 export class RewardsTableColumn {
   constructor() {
     /**
-     * @uiName Reward Column Title
+     * @uiName Reward column title
      */
     this.columnTitle = "Reward";
     /**
@@ -57,7 +55,7 @@ export class RewardsTableColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Column Title",
+            "text": "Reward column title",
             "name": "uiName"
           }],
         "text": ""

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

@@ -3,8 +3,6 @@ import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Reward Table Source Column
- * @validParents ["sqm-rewards-table"]
- * @exampleGroup Rewards
  */
 export class RewardTableUserColumn {
   constructor() {
@@ -13,19 +11,15 @@ export class RewardTableUserColumn {
      */
     this.columnTitle = "Source";
     /**
-     * Name displayed for unknown users
-     *
-     * @uiName Anonymous User Text
+     * @uiName Name displayed for anonymous users
      */
     this.anonymousUser = "Anonymous User";
     /**
-     * Name displayed for deleted users
-     *
-     * @uiName Deleted User Text
+     * @uiName Name displayed for deleted users
      */
     this.deletedUser = "Deleted User";
     /**
-     * @uiName Reward Exchange Label
+     * @uiName Reward Exchange label
      */
     this.rewardExchangeText = "Reward Exchange";
     /**
@@ -94,10 +88,10 @@ export class RewardTableUserColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Anonymous User Text",
+            "text": "Name displayed for anonymous users",
             "name": "uiName"
           }],
-        "text": "Name displayed for unknown users"
+        "text": ""
       },
       "attribute": "anonymous-user",
       "reflect": false,
@@ -115,10 +109,10 @@ export class RewardTableUserColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Deleted User Text",
+            "text": "Name displayed for deleted users",
             "name": "uiName"
           }],
-        "text": "Name displayed for deleted users"
+        "text": ""
       },
       "attribute": "deleted-user",
       "reflect": false,
@@ -136,7 +130,7 @@ export class RewardTableUserColumn {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Exchange Label",
+            "text": "Reward Exchange label",
             "name": "uiName"
           }],
         "text": ""

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

@@ -3,8 +3,6 @@ import { Component, h, Host, Method, Prop } from "@stencil/core";
 import { useRequestRerender } from "../../../tables/re-render";
 /**
  * @uiName Reward Table Status Column
- * @validParents ["sqm-rewards-table"]
- * @exampleGroup Rewards
  */
 export class RewardTableStatusColumn {
   constructor() {

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

@@ -10,8 +10,6 @@ import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Reward Table
- * @exampleGroup Rewards
- * @slot [{"name":"", "title":"Table Row"}]
  */
 export class RewardsTable {
   constructor() {

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

@@ -25,7 +25,7 @@ export class SqmRoute {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Navigation Path Name",
+            "text": "Navigation path name",
             "name": "uiName"
           }],
         "text": ""

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

@@ -4,8 +4,6 @@ import { useScroll } from "./useScroll";
 import { createStyleSheet } from "../../styling/JSS";
 /**
  * @uiName Scroll
- * @exampleGroup Common Components
- * @slot [{"name":"", "title":"Button Content"}]
  */
 export class Scroll {
   constructor() {

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

@@ -7,19 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Button
- * @slot [{"name":"", "title":"Button Content"}]
  * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
- * @exampleGroup Sharing
- * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
- * @example Twitter Share Button - <sqm-share-button medium="twitter">Share via Tweet</sqm-share-button>
- * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
- * @example Web Share Sheet Share Button - <sqm-share-button medium="direct">Share</sqm-share-button>
- * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
- * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
- * @example Facebook Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
- * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
- * @example Line Messenger Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
- * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
  */
 export class ShareButton {
   constructor() {
@@ -38,11 +26,11 @@ export class ShareButton {
      */
     this.iconslot = "prefix";
     /**
-     * @uiName Hide Icon
+     * @uiName Hide the icon
      */
     this.hideicon = false;
     /**
-     * @uiName Hide Text
+     * @uiName Hide the text
      */
     this.hidetext = false;
     withHooks(this);
@@ -126,10 +114,10 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Border Radius",
+            "text": "Configure border radius with pixel amount",
             "name": "uiName"
           }],
-        "text": "Configure border radius with pixel amount"
+        "text": ""
       },
       "attribute": "borderradius",
       "reflect": false
@@ -146,7 +134,7 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Button Background Color",
+            "text": "Button background color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -169,7 +157,7 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Button Text Color",
+            "text": "Button text color",
             "name": "uiName"
           }, {
             "text": "color",
@@ -192,7 +180,7 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Display Pill",
+            "text": "Display as pill",
             "name": "uiName"
           }],
         "text": ""
@@ -321,10 +309,10 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Icon",
+            "text": "Icon used in button. Will try to select an icon based on the share medium if left empty.",
             "name": "uiName"
           }],
-        "text": "Options available at https://shoelace.style/components/icon\n\nIcon used in button. Will try to select an icon based on the share medium if left empty."
+        "text": "Options available at https://shoelace.style/components/icon"
       },
       "attribute": "icon",
       "reflect": false
@@ -341,7 +329,7 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Icon",
+            "text": "Hide the icon",
             "name": "uiName"
           }],
         "text": ""
@@ -362,7 +350,7 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide Text",
+            "text": "Hide the text",
             "name": "uiName"
           }],
         "text": ""
@@ -383,10 +371,10 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Share Title",
+            "text": "Title used for native sharing (mobile only)",
             "name": "uiName"
           }],
-        "text": "Title used for native sharing (mobile only)"
+        "text": ""
       },
       "attribute": "sharetitle",
       "reflect": false
@@ -403,10 +391,10 @@ export class ShareButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Share Text",
+            "text": "Text used for native sharing (mobile only)",
             "name": "uiName"
           }],
-        "text": "Text used for native sharing (mobile only)"
+        "text": ""
       },
       "attribute": "sharetext",
       "reflect": false

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

@@ -5,16 +5,16 @@ import { ShareLinkView, } from "../sqm-share-link/sqm-share-link-view";
 import { getProps } from "../../utils/utils";
 import { useShareCode } from "./useShareCode";
 import deepmerge from "deepmerge";
+const DEFAULT_TOOLTIP_LIFESPAN = 1000;
 /**
  * @uiName Share Code
- * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
  */
 export class ShareCode {
   constructor() {
     /**
-     * This is shown after someone has successfully copied the code to the clipboard.
+     * This is shown after someone has successfully copied the cpde to the clipboard.
      *
-     * @uiName Tooltip Text
+     * @uiName Tooltip text
      */
     this.tooltiptext = "Copied to Clipboard";
     /**
@@ -22,7 +22,7 @@ export class ShareCode {
      *
      * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = 1000;
+    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -68,10 +68,10 @@ export class ShareCode {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tooltip Text",
+            "text": "Tooltip text",
             "name": "uiName"
           }],
-        "text": "This is shown after someone has successfully copied the code to the clipboard."
+        "text": "This is shown after someone has successfully copied the cpde to the clipboard."
       },
       "attribute": "tooltip-text",
       "reflect": false,
@@ -96,7 +96,7 @@ export class ShareCode {
       },
       "attribute": "tooltip-lifespan",
       "reflect": false,
-      "defaultValue": "1000"
+      "defaultValue": "DEFAULT_TOOLTIP_LIFESPAN"
     },
     "demoData": {
       "type": "unknown",

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

@@ -5,24 +5,24 @@ import { ShareLinkView } from "./sqm-share-link-view";
 import { useShareLink } from "./useShareLink";
 import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
+const DEFAULT_TOOLTIP_LIFESPAN = 1000;
 /**
  * @uiName Share Link
- * @example Share Link - <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-link>
  */
 export class ShareLink {
   constructor() {
     /**
      * This is shown after someone has successfully copied the link to the clipboard.
      *
-     * @uiName Tooltip Text
+     * @uiName Tooltip text
      */
     this.tooltiptext = "Copied to Clipboard";
     /**
      * The number of milliseconds that the tooltip will appear for
      *
-     * @uiName Tooltip Lifespan
+     * @uiName Tooltip lifespan
      */
-    this.tooltiplifespan = 1000;
+    this.tooltiplifespan = DEFAULT_TOOLTIP_LIFESPAN;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -68,7 +68,7 @@ export class ShareLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tooltip Text",
+            "text": "Tooltip text",
             "name": "uiName"
           }],
         "text": "This is shown after someone has successfully copied the link to the clipboard."
@@ -89,14 +89,14 @@ export class ShareLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tooltip Lifespan",
+            "text": "Tooltip lifespan",
             "name": "uiName"
           }],
         "text": "The number of milliseconds that the tooltip will appear for"
       },
       "attribute": "tooltip-lifespan",
       "reflect": false,
-      "defaultValue": "1000"
+      "defaultValue": "DEFAULT_TOOLTIP_LIFESPAN"
     },
     "demoData": {
       "type": "unknown",

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -4,15 +4,12 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
- * @slots [{"name":"","title":"Stats"}]
- * @exampleGroup Statistics
- * @example Container with Three Stats - <sqm-stat-container space="xxx-large" display="flex"><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global">Giftcards Earned</sqm-big-stat><sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount">Referrals</sqm-big-stat></sqm-stat-container>
  */
 export class StatContainer {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Space Between Stats
+     * @uiName Space between stats
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
@@ -52,7 +49,7 @@ export class StatContainer {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Space Between Stats",
+            "text": "Space between stats",
             "name": "uiName"
           }, {
             "text": "string",

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

@@ -2,10 +2,6 @@ import { Component, h, Prop } from "@stencil/core";
 import { TabView } from "./sqm-tab-view";
 /**
  * @uiName Tab
- * @slot [{"name":"", "title":"Tab Content"}]
- * @validParents ["sqm-tabs"]
- * @exampleGroup Layout
- * @example Tab - <sqm-tab header="Example">This is an example tab. Add your own content here.</sqm-tab>
  */
 export class Tab {
   render() {

package/dist/collection/components/sqm-tabs/Tabs.stories.js

@@ -17,8 +17,7 @@ export const ManyTabs = () => (h("div", { style: { maxWidth: "700px", margin: "a
      <sqm-tabs>
         <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
-        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab> 
-        <sqm-tab header="General">This is the general tab</sqm-tab>
+        <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>        <sqm-tab header="General">This is the general tab</sqm-tab>
         <sqm-tab header="Custom">This is the custom tab</sqm-tab>
         <sqm-tab header="Advanced">This is the advanced tab</sqm-tab>
         <sqm-tab header="General">This is the general tab</sqm-tab>

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

@@ -5,11 +5,6 @@ import { TabsView } from "./sqm-tabs-view";
 import { useTabs } from "./useTabs";
 /**
  * @uiName Tab Group
- * @slot [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
- * @exampleGroup Layout
- * @example Generic Tab Group - <sqm-tabs><sqm-tab header="Tab 1">This is the first tab</sqm-tab><sqm-tab header="Tab 2">This is the second tab</sqm-tab><sqm-tab header="Tab 3">This is the third tab</sqm-tab></sqm-tabs>
- * @example Referral Tab Group - <sqm-tabs><sqm-tab header="Leaderboard"><sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topStartedReferrers" show-rank anonymous-user="Anonymous User"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard"></sqm-empty></sqm-leaderboard></sqm-tab><sqm-tab header="Referral history"><sqm-referral-table><sqm-referral-table-user-column column-title="User" anonymous-user="Anonymous User" deleted-user="Deleted User"></sqm-referral-table-user-column><sqm-referral-table-status-column column-title="Referral status" converted-status-text="Converted" in-progress-status-text="In Progress"></sqm-referral-table-status-column><sqm-referral-table-rewards-column column-title="Rewards" expiring-text="Expiring in" fuel-tank-text="Your code is" pending-for-text="{status} for {date}" reward-received-text="Reward received on" status-long-text="{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} other {Not available} }" status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-referral-table-rewards-column><sqm-referral-table-date-column column-title="Date referred" date-shown="dateReferralStarted"></sqm-referral-table-date-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"></sqm-empty></sqm-referral-table></sqm-tab></sqm-tabs>
- * @example Loyalty Tab Group - <sqm-tabs placement="top"> <sqm-tab header="Leaderboard"> <sqm-leaderboard usersheading="Users" statsheading="Points Earned" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topPointEarners" show-rank anonymous-user="Anonymous User" > <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to earn points and reach the top of the leaderboard" ></sqm-empty ></sqm-leaderboard> </sqm-tab> <sqm-tab header="Reward history"> <sqm-rewards-table ><sqm-rewards-table-reward-column available-text="{availableAmount} remaining" column-title="Reward" copy-text="Copied!" redeemed-text="{redeemedAmount} redeemed" > </sqm-rewards-table-reward-column> <sqm-rewards-table-source-column anonymous-user="Anonymous User" column-title="Source" deleted-user="Deleted User" referral-text="{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}" reward-exchange-text="Reward Exchange" reward-source-text="{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}" > </sqm-rewards-table-source-column><sqm-rewards-table-status-column column-title="Status" expiry-text="Expires on " status-text="{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }"></sqm-rewards-table-status-column><sqm-rewards-table-date-column column-title="Date received" date-shown="dateGiven"></sqm-rewards-table-date-column><sqm-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="Refer friends and complete tasks to view the details of your rewards"></sqm-empty></sqm-rewards-table></sqm-tab><sqm-tab header="Redeem"><sqm-reward-exchange-list back-text="Back" button-text="Exchange Rewards" cancel-text="Cancel" choose-amount-title="Select" choose-reward-title="Rewards" confirmation-title="Confirm" continue-text="Continue" continue-to-confirmation-text="Continue to confirmation" done-text="Done" reward-title="Choose a reward" not-available-error="{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }" not-enough-error="Not enough {sourceUnit} to redeem for this reward" query-error="Unable to load reward exchange list. Please try again" redeem-text="Redeem" redeem-title="Confirm and redeem" redemption-error="An error occured trying to redeem this reward. Please try again" redemption-success-text="Redeemed {sourceValue} for {destinationValue}" select-text="Select amount to receive" source-amount-message="{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}" tooltiptext="Copied" reward-name-title="Reward" reward-amount-title="Reward Amount" cost-title="Cost to Redeem" reward-redeemed-text="Reward redeemed" skeleton-card-num="8" promo-code="Promo Code" tooltip-text="Copied!"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png" empty-state-header="Redeem rewards" empty-state-text="Use your points to redeem rewards once they become available"></sqm-empty></sqm-reward-exchange-list></sqm-tab></sqm-tabs>
  */
 export class Tabs {
   constructor() {