@saasquatch/mint-components 1.10.1 → 1.10.2-11

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

@@ -8,6 +8,7 @@ import { LeaderboardViewProps } from "./sqm-leaderboard-view";
  * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/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 Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topConvertedReferrers" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/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 Points Earned Leaderboard - <sqm-leaderboard usersheading="Name" statsheading="Points" rank-type="rank" leaderboard-type="topPointEarners" rankheading="Rank" show-rank="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/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 Anonymous Leaderboard - <div style="display: flex; align-items: flex-start; justify-content: center; width: 100%; gap: 50px;"><div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; max-width: 30%;"><sqm-image width="70%" alignment="center" image-url="https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png"></sqm-image><h2 style="margin: auto;">Top Performers</h2><p style="margin: 0;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" statsheading="Referrals" rank-type="rank" leaderboard-type="topStartedReferrers" rankheading="Rank" show-rank="true" hide-names="true" hide-viewer="true"><sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644360953/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></div>
  * @featureTooltip <div>Motivate your participants by gamifying your program. Contact <a href="mailto:saasquatch-support%40impact.com?subject=Next steps for Leaderboards feature&body=Hi Support Team, %0D%0A%0D%0A I am interested in learning more about how Leaderboards can support the growth of our referral program. Please connect me with a program strategy manager to discuss this feature further, and determine the next steps.%0D%0A%0D%0A%0D%0AThank you,%0D%0A[Add your name here]">Support</a> to upgrade your plan and add a leaderboard.</div>
  */
 export declare class Leaderboard {
@@ -35,6 +36,16 @@ export declare class Leaderboard {
    * @uiName Show leaderboard rank
    */
   showRank: boolean;
+  /**
+   * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
+   *
+   * @uiName Width
+   */
+  width: string;
+  /**
+   * @uiName Rank Suffix
+   */
+  rankSuffix: string;
   /**
    * Hide the viewer's leaderboard row if not in the top results.
    *
@@ -42,10 +53,17 @@ export declare class Leaderboard {
    * @default
    */
   hideViewer: boolean;
+  /**
+   * Hide the Names of users to protect personal identifiable information
+   *
+   * @uiName Hide users names
+   * @default
+   */
+  hideNames: boolean;
   /**
    * Hides the leaderboard if user is on Essentials plan
    *
-   * @uiName Hide viewing user
+   * @uiName Hide leaderboard for essentials user
    * @default
    */
   isEssentials?: boolean;

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

@@ -7,6 +7,9 @@ export interface LeaderboardProps {
   anonymousUser?: string;
   showRank?: boolean;
   hideViewer?: boolean;
+  hideNames?: boolean;
+  width?: string;
+  rankSuffix?: string;
   rankType: "rowNumber" | "rank" | "denseRank";
   leaderboardType: "topStartedReferrers" | "topConvertedReferrers" | "topPointEarners";
   maxRows: number;

package/dist/types/components.d.ts

@@ -932,6 +932,11 @@ export namespace Components {
           * @uiName Minimum height
          */
         "minHeight"?: string;
+        /**
+          * (Optional) Constrains the width of the image. Can be a pixel value or a percentage i.e. "500px", "33%", etc.
+          * @uiName Width
+         */
+        "width"?: string;
     }
     interface SqmIndirectTaxForm {
         /**
@@ -1317,6 +1322,12 @@ export namespace Components {
           * @uiType object
          */
         "demoData"?: DemoData<LeaderboardViewProps>;
+        /**
+          * Hide the Names of users to protect personal identifiable information
+          * @uiName Hide users names
+          * @default
+         */
+        "hideNames": boolean;
         /**
           * Hide the viewer's leaderboard row if not in the top results.
           * @uiName Hide viewing user
@@ -1331,7 +1342,7 @@ export namespace Components {
         "interval": string;
         /**
           * Hides the leaderboard if user is on Essentials plan
-          * @uiName Hide viewing user
+          * @uiName Hide leaderboard for essentials user
           * @default
          */
         "isEssentials"?: boolean;
@@ -1356,6 +1367,10 @@ export namespace Components {
           * @uiWidget programSelector
          */
         "programId"?: string;
+        /**
+          * @uiName Rank Suffix
+         */
+        "rankSuffix": string;
         /**
           * @uiName Rank type
           * @uiType string
@@ -1379,6 +1394,11 @@ export namespace Components {
           * @uiName User column heading
          */
         "usersheading": string;
+        /**
+          * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
+          * @uiName Width
+         */
+        "width": string;
     }
     interface SqmLeaderboardRank {
         /**
@@ -6742,6 +6762,11 @@ declare namespace LocalJSX {
           * @uiName Minimum height
          */
         "minHeight"?: string;
+        /**
+          * (Optional) Constrains the width of the image. Can be a pixel value or a percentage i.e. "500px", "33%", etc.
+          * @uiName Width
+         */
+        "width"?: string;
     }
     interface SqmIndirectTaxForm {
         /**
@@ -7121,6 +7146,12 @@ declare namespace LocalJSX {
           * @uiType object
          */
         "demoData"?: DemoData<LeaderboardViewProps>;
+        /**
+          * Hide the Names of users to protect personal identifiable information
+          * @uiName Hide users names
+          * @default
+         */
+        "hideNames"?: boolean;
         /**
           * Hide the viewer's leaderboard row if not in the top results.
           * @uiName Hide viewing user
@@ -7135,7 +7166,7 @@ declare namespace LocalJSX {
         "interval"?: string;
         /**
           * Hides the leaderboard if user is on Essentials plan
-          * @uiName Hide viewing user
+          * @uiName Hide leaderboard for essentials user
           * @default
          */
         "isEssentials"?: boolean;
@@ -7160,6 +7191,10 @@ declare namespace LocalJSX {
           * @uiWidget programSelector
          */
         "programId"?: string;
+        /**
+          * @uiName Rank Suffix
+         */
+        "rankSuffix"?: string;
         /**
           * @uiName Rank type
           * @uiType string
@@ -7183,6 +7218,11 @@ declare namespace LocalJSX {
           * @uiName User column heading
          */
         "usersheading"?: string;
+        /**
+          * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
+          * @uiName Width
+         */
+        "width"?: string;
     }
     interface SqmLeaderboardRank {
         /**