@saasquatch/mint-components 1.5.6-6 → 1.5.6-7

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

@@ -2,7 +2,7 @@ import { Component, h, Host, Prop } from "@stencil/core";
 import { EmptyStateView } from "./sqm-empty-view";
 /**
  * @uiName Empty State Content
- * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard", "sqm-reward-exchange-list"]
+ * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
  */
 export class HeroImage {
   render() {

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

@@ -7,7 +7,7 @@ import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useLeaderboard } from "./useLeaderboard";
 /**
  * @uiName Leaderboard
- * @slot [{"name":"empty", "title":"Empty State"}]
+ * @slots [{"name":"empty", "title":"Empty State"}]
  * @exampleGroup Leaderboards
  * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topConvertedReferrers" 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>
  * @example Referral Started 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>

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer.js

@@ -5,8 +5,8 @@ import { ProgramExplainerView } from "./sqm-program-explainer-view";
 /**
  * @uiName Program Explainer
  * @exampleGroup Common Components
- * @slot [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
- * @examples Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
+ * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
+ * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
  */
 export class ProgramExplainer {
   constructor() {

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

@@ -5,7 +5,7 @@ import { ReferralCardView } from "./sqm-referral-card-view";
 /**
  * @uiName Referral Card
  * @exampleGroup Referrals
- * @slots [{"name":"left","title":"Left Content"},{"name":"right","title":"Right Content"}]
+ * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
  */
 export class ReferralCard {

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

@@ -11,6 +11,7 @@ import { tryMethod, useReferralTable } from "./useReferralTable";
 /**
  * @uiName Referral Table
  * @exampleGroup Referrals
+ * Dont forget about loading and empty slots
  * @slots [{"name":"", "title":"Table Row"}]
  */
 export class ReferralTable {

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

@@ -11,6 +11,7 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
  * @uiName Reward Table
  * @exampleGroup Rewards
+ * Dont forget about loading and empty slots
  * @slots [{"name":"", "title":"Table Row"}]
  */
 export class RewardsTable {

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

@@ -3,7 +3,7 @@ import { Component, h, Prop, State } from "@stencil/core";
 import { useScroll } from "./useScroll";
 import { createStyleSheet } from "../../styling/JSS";
 /**
- * @uiName Scroll
+ * @uiName Scroll Button
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText

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

@@ -4,7 +4,7 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
- * @slots [{"name":"","title":"Stats"}]
+ * @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>
  */

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

@@ -5,7 +5,7 @@ import { useChildElements } from "../../tables/useChildElements";
  * @uiName Program Timeline
  * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
  * @exampleGroup Common Components
- * @examples Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
+ * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
 */
 export class Timeline {
   constructor() {

package/dist/types/components/sqm-empty/sqm-empty.d.ts

@@ -1,6 +1,6 @@
 /**
  * @uiName Empty State Content
- * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard", "sqm-reward-exchange-list"]
+ * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard","sqm-reward-exchange-list"]
  */
 export declare class HeroImage {
   /**

package/dist/types/components/sqm-leaderboard/sqm-leaderboard.d.ts

@@ -2,7 +2,7 @@ import { DemoData } from "../../global/demo";
 import { LeaderboardViewProps } from "./sqm-leaderboard-view";
 /**
  * @uiName Leaderboard
- * @slot [{"name":"empty", "title":"Empty State"}]
+ * @slots [{"name":"empty", "title":"Empty State"}]
  * @exampleGroup Leaderboards
  * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topConvertedReferrers" 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>
  * @example Referral Started 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>

package/dist/types/components/sqm-program-explainer/sqm-program-explainer.d.ts

@@ -1,8 +1,8 @@
 /**
  * @uiName Program Explainer
  * @exampleGroup Common Components
- * @slot [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
- * @examples Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
+ * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}]
+ * @example Program Explainer - <sqm-program-explainer header="How it works"><sqm-program-explainer-step description="Complete tasks like uploading your first video or sharing videos with friends" header="Earn points" icon="cash-stack" text-color="#000000"></sqm-program-explainer-step><sqm-program-explainer-step description="Use your points and redeem rewards like one free month of Enterprise or a visa giftcard" header="Redeem rewards" icon="people" text-color="#000000"></sqm-program-explainer-step></sqm-program-explainer>
  */
 export declare class ProgramExplainer {
   ignored: boolean;

package/dist/types/components/sqm-referral-card/sqm-referral-card.d.ts

@@ -1,7 +1,7 @@
 /**
  * @uiName Referral Card
  * @exampleGroup Referrals
- * @slots [{"name":"left","title":"Left Content"},{"name":"right","title":"Right Content"}]
+ * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"}]
  * @example Referral Card - <sqm-referral-card vertical-alignment="start"> <sqm-portal-container gap="large" slot="left" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text >They’ll get a $50 credit towards a new account and you’ll get: </sqm-text> <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="Your friend purchases a Business plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry> </sqm-timeline> </sqm-portal-container> <sqm-portal-container gap="large" slot="right" direction="column" display="grid" max-width="100%" padding="none" > <sqm-text>Choose how you want to share: </sqm-text> <sqm-text> <sub>Your unique referral link:</sub> <sqm-share-link tooltip-text="Copied to Clipboard" tooltip-lifespan="1000" > </sqm-share-link> </sqm-text> <sqm-portal-container gap="x-small" direction="column" display="grid" max-width="100%" padding="none" > <sqm-share-button medium="email" icon-slot="prefix" size="medium" type="default" > Share via email </sqm-share-button> <sqm-share-button medium="linkedin" icon-slot="prefix" size="medium" type="default" > Share on LinkedIn </sqm-share-button> <sqm-share-button medium="twitter" icon-slot="prefix" size="medium" type="default" > Share on Twitter </sqm-share-button> </sqm-portal-container> </sqm-portal-container> </sqm-referral-card>
  */
 export declare class ReferralCard {

package/dist/types/components/sqm-referral-table/sqm-referral-table.d.ts

@@ -3,6 +3,7 @@ import { GenericTableViewProps } from "../../tables/GenericTableView";
 /**
  * @uiName Referral Table
  * @exampleGroup Referrals
+ * Dont forget about loading and empty slots
  * @slots [{"name":"", "title":"Table Row"}]
  */
 export declare class ReferralTable {

package/dist/types/components/sqm-rewards-table/sqm-rewards-table.d.ts

@@ -3,6 +3,7 @@ import { GenericTableViewProps } from "../../tables/GenericTableView";
 /**
  * @uiName Reward Table
  * @exampleGroup Rewards
+ * Dont forget about loading and empty slots
  * @slots [{"name":"", "title":"Table Row"}]
  */
 export declare class RewardsTable {

package/dist/types/components/sqm-scroll/sqm-scroll.d.ts

@@ -1,5 +1,5 @@
 /**
- * @uiName Scroll
+ * @uiName Scroll Button
  * @exampleGroup Common Components
  * @slots [{"name":"", "title":"Button Content"}]
  * @slotEditor richText

package/dist/types/components/sqm-stat-container/sqm-stat-container.d.ts

@@ -1,7 +1,7 @@
 import { Spacing } from "../../global/mixins";
 /**
  * @uiName Stat Container
- * @slots [{"name":"","title":"Stats"}]
+ * @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>
  */

package/dist/types/components/sqm-timeline/sqm-timeline.d.ts

@@ -2,7 +2,7 @@
  * @uiName Program Timeline
  * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
  * @exampleGroup Common Components
- * @examples Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
+ * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
 */
 export declare class Timeline {
   ignored: boolean;