@saasquatch/mint-components 1.10.3 → 1.11.0-1

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

@@ -6,7 +6,7 @@ import { CardFeedView } from "./sqm-card-feed-view";
  * @uiName Card Feed
  * @slots [{"name":"","title":"Cards"}]
  * @exampleGroup Rewards
- * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
+ * @example Task Card Feed - <sqm-card-feed gap="24" width="347"> <sqm-task-card reward-amount="20" goal="1" card-title="Complete a Survey" description="Fill out our NPS survey and get 20 points for giving us honest feedback." button-text="Take survey" reward-unit="Points" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on Twitter" description="Earn 50 points when you follow us on Twitter!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}" > </sqm-task-card> <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}" > </sqm-task-card> </sqm-card-feed>
  */
 export class CardFeed {
   constructor() {

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

@@ -37,8 +37,8 @@ export const SlottedIntoComponent = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [],
-      rowNumber: 10,
       showUser: true,
+      rowNumber: 10,
       userRank: {
         firstName: "Kutay",
         lastInitial: "C",

package/dist/collection/components/sqm-image/sqm-image-view.js

@@ -11,7 +11,7 @@ export function ImageView(props) {
     },
     Image: {
       minHeight: props.minHeight || "100%",
-      width: props.width || "100%",
+      width: "100%",
       maxWidth: "max-content",
       objectFit: "cover",
     },

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

@@ -126,26 +126,6 @@ export class Image {
       },
       "attribute": "min-height",
       "reflect": false
-    },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Width",
-            "name": "uiName"
-          }],
-        "text": "(Optional) Constrains the width of the image. Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc."
-      },
-      "attribute": "width",
-      "reflect": false
     }
   }; }
 }

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

@@ -81,8 +81,8 @@ const users = [
 ];
 const pointsUsers = [
   {
-    firstName: "Tom",
-    lastInitial: "Smith",
+    firstName: "",
+    lastInitial: "",
     textValue: "82 Points",
     rank: 1,
     rowNumber: 1,
@@ -156,13 +156,18 @@ const defaultStyles = {
   statsheading: "Referrals",
   rankheading: "Rank",
   anonymousUser: "Anonymous User",
-  viewingUserText: "You",
-  rankSuffix: "{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}",
 };
 const link = h("a", null, "Support");
 const tag = "Contact" + link + "about upgrading your plan";
 const defaultElements = {
   empty: (h("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" })),
+  essentials: (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" })),
+  loadingstate: (h("slot", { name: "loading" },
+    h("table", null, [...Array(10)].map(() => {
+      return (h("tr", null,
+        h("td", null,
+          h("sl-skeleton", null))));
+    })))),
 };
 export const Empty = () => {
   const props = {
@@ -191,10 +196,11 @@ export const Empty = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const Loading = () => {
+export const Essentials = () => {
   const props = {
     states: {
-      loading: true,
+      loading: false,
+      isEssentials: true,
       hasLeaders: false,
       styles: {
         ...defaultStyles,
@@ -202,8 +208,15 @@ export const Loading = () => {
     },
     data: {
       rankType: "rowNumber",
-      rowNumber: 10,
       leaderboard: [],
+      rowNumber: 10,
+      viewerRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        textValue: "8",
+        rowNumber: 11,
+        rank: 23,
+      },
     },
     elements: {
       ...defaultElements,
@@ -211,11 +224,10 @@ export const Loading = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const Essentials = () => {
+export const Loading = () => {
   const props = {
     states: {
-      loading: false,
-      isEssentials: true,
+      loading: true,
       hasLeaders: false,
       styles: {
         ...defaultStyles,
@@ -223,15 +235,8 @@ export const Essentials = () => {
     },
     data: {
       rankType: "rowNumber",
-      leaderboard: [],
       rowNumber: 10,
-      viewerRank: {
-        firstName: "Kutay",
-        lastInitial: "C",
-        textValue: "8",
-        rowNumber: 11,
-        rank: 23,
-      },
+      leaderboard: [],
     },
     elements: {
       ...defaultElements,
@@ -368,38 +373,6 @@ export const ReferralLeaderboard = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const ReferralLeaderboardWithMaxWidth = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        ...defaultStyles,
-        rankheading: "Rank",
-        usersheading: "User",
-        statsheading: "Referrals",
-        showRank: false,
-        maxWidth: "300px",
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: users,
-      rowNumber: 10,
-      viewerRank: {
-        firstName: "Viktor",
-        lastInitial: "V",
-        textValue: "82",
-        rank: 1,
-        rowNumber: 1,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};
 export const PointsLeaderboard = () => {
   const props = {
     states: {
@@ -478,7 +451,7 @@ export const ViewerOutside = () => {
         lastInitial: "C",
         textValue: "8",
         rowNumber: 11,
-        rank: 24,
+        rank: 23,
       },
     },
     elements: {
@@ -509,33 +482,6 @@ export const ViewerAnonymous = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const HideNamesWithViewerOutside = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: true,
-      styles: {
-        ...defaultStyles,
-        showRank: true,
-        hideNames: true,
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: users,
-      rowNumber: 10,
-      viewerRank: {
-        textValue: "8",
-        rowNumber: 11,
-        rank: 42,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};
 export const HideViewer = () => {
   const props = {
     states: {
@@ -566,55 +512,3 @@ export const HideViewer = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const HideNames = () => {
-  const props = {
-    states: {
-      loading: false,
-      hasLeaders: true,
-      rowNumber: 10,
-      styles: {
-        ...defaultStyles,
-        showRank: true,
-        hideNames: true,
-      },
-    },
-    data: {
-      rankType: "rowNumber",
-      leaderboard: users,
-      rowNumber: 10,
-      viewerRank: {
-        firstName: "Viktor",
-        lastInitial: "V",
-        textValue: "82",
-        rowNumber: 1,
-        rank: 1,
-      },
-    },
-    elements: {
-      ...defaultElements,
-    },
-  };
-  return h(LeaderboardView, Object.assign({}, props));
-};
-export const LeaderboardWithNoNamesAndGraphic = () => {
-  return (h("div", { style: {
-      display: "flex",
-      alignItems: "flex-start",
-      justifyContent: "center",
-      width: "100%",
-      gap: "50px",
-    } },
-    h("div", { style: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "10px",
-        maxWidth: "30%",
-      } },
-      h("sqm-image", { width: "70%", alignment: "center", imageUrl: "https://res.cloudinary.com/saasquatch-staging/image/upload/v1729728469/Leaderboard_image_z87lsm.png" }),
-      h("h2", { style: { margin: "auto" } }, " Top Performers"),
-      h("p", { style: { margin: "0" } }, "The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!")),
-    h("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" },
-      h("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" }))));
-};

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-import { intl } from "../../global/global";
 const style = {
   Leaderboard: {
     "& table": {
@@ -22,10 +21,9 @@ const style = {
       fontWeight: "var(--sl-font-weight-normal)",
     },
     "& .ellipses": {
-      textAlign: "left",
+      textAlign: "center",
       padding: "0",
       color: "var(--sl-color-neutral-500)",
-      paddingLeft: "25%",
     },
     "& .highlight": {
       background: "var(--sl-color-primary-50)",
@@ -41,12 +39,6 @@ const style = {
       width: "auto",
       whiteSpace: "nowrap",
     },
-    "& .Rank": {
-      whiteSpace: "nowrap",
-    },
-    "& .fullWidth": {
-      width: "100%",
-    },
   },
 };
 const sheet = createStyleSheet(style);
@@ -57,74 +49,56 @@ const vanillaStyle = `
   }
 `;
 export function LeaderboardView(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.isEssentials) {
-    return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
-  }
-  if (states.loading) {
-    return (h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
+  if (states.loading)
+    return (h("div", { class: sheet.classes.Leaderboard },
       h("style", { type: "text/css" },
         styleString,
         vanillaStyle),
-      h("table", null, [...Array(10)].map(() => {
-        return (h("tr", null,
-          h("td", null,
-            h("sl-skeleton", null))));
-      }))));
-  }
+      elements.loadingstate));
+  if (states.isEssentials)
+    return elements.essentials;
   if (!states.hasLeaders)
     return elements.empty;
   let userSeenFlag = false;
-  const getUsersName = (user) => {
-    if (!user.firstName && !user.lastInitial)
-      return styles.anonymousUser;
-    const { firstName, lastInitial } = user;
-    if (firstName && lastInitial)
-      return `${firstName} ${lastInitial}`;
-    if (firstName || lastInitial)
-      return firstName || lastInitial;
-    return styles.anonymousUser;
-  };
-  const getRankCellText = (userRank, isViewingUsersRow) => {
-    if (!userRank) {
-      return styles.hideNames ? `${styles.viewingUserText}` : "-";
-    }
-    const viewingUserText = ` - ${styles.viewingUserText}`;
-    return styles.rankSuffix
-      ? intl.formatMessage({
-        id: "rank",
-        defaultMessage: styles.rankSuffix,
-      }, {
-        rank: userRank,
-      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
-      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
-  };
-  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
+  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
+    h("div", null, "Leaderboards"),
     h("table", { part: "sqm-table" },
       h("tr", null,
-        styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
-        !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
+        styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+        h("th", { class: "User" }, styles.usersheading),
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
         var _a, _b;
         if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
           userSeenFlag = true;
-        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
-        return (h("tr", { class: isViewingUsersRow ? "highlight" : "" },
-          styles.showRank && (h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
-          !styles.hideNames && h("td", { class: "User" }, getUsersName(user)),
+        return (h("tr", { class: !styles.hideViewer &&
+            user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber)
+            ? "highlight"
+            : "" },
+          styles.showRank && h("td", { class: "Rank" }, user.rank),
+          h("td", { class: "User" }, user.firstName && user.lastInitial
+            ? user.firstName + " " + user.lastInitial
+            : user.firstName || user.lastInitial
+              ? user.firstName || user.lastInitial
+              : styles.anonymousUser),
           h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
         h("td", { colSpan: 100, class: "ellipses" },
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
-        styles.showRank && (h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
-        !styles.hideNames && (h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
-        h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
+        styles.showRank && (h("td", { class: "Rank" }, ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank) || "-")),
+        h("td", { class: "User" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.firstName) && ((_d = data.viewerRank) === null || _d === void 0 ? void 0 : _d.lastInitial)
+          ? ((_e = data.viewerRank) === null || _e === void 0 ? void 0 : _e.firstName) +
+            " " + ((_f = data.viewerRank) === null || _f === void 0 ? void 0 : _f.lastInitial)
+          : ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
+            ? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
+            : styles.anonymousUser),
+        h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
 }

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

@@ -10,20 +10,13 @@ import { useLeaderboard } from "./useLeaderboard";
  * @slots [{"name":"empty", "title":"Empty State"}]
  * @requiredFeatures ["LEADERBOARDS"]
  * @exampleGroup Leaderboard
- * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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; text-align: center;">The leaderboard highlights the top performers in real-time. Stay motivated, stay competitive!</p></div><sqm-leaderboard width="300px" usersheading="Referrer" rank-suffix="{rank, selectordinal, one {#st} two {#nd} few {#rd} other {#th}}" 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>
+ * @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>
  * @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 class Leaderboard {
   constructor() {
-    /**
-     * Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.)
-     *
-     * @uiName Width
-     */
-    this.width = "100%";
     /**
      * Hide the viewer's leaderboard row if not in the top results.
      *
@@ -32,16 +25,12 @@ export class Leaderboard {
      */
     this.hideViewer = false;
     /**
-     * @uiName Viewing user text
-     */
-    this.viewingUserText = "You";
-    /**
-     * Hide the Names of users to protect personal identifiable information
+     * Hides the leaderboard if user is on Essentials plan
      *
-     * @uiName Hide users names
+     * @uiName Hide viewing user
      * @default
      */
-    this.hideNames = false;
+    this.isEssentials = false;
     /**
      * Title displayed for users without names
      * @uiName Unknown user text
@@ -61,6 +50,8 @@ export class Leaderboard {
   render() {
     const props = {
       empty: h(EmptySlot, null),
+      essentials: h(EssentialsSlot, null),
+      loadingstate: h(LoadingSlot, null),
       usersheading: this.usersheading,
       statsheading: this.statsheading,
       rankheading: this.rankheading,
@@ -71,11 +62,8 @@ export class Leaderboard {
       anonymousUser: this.anonymousUser,
       interval: this.interval,
       hideViewer: this.hideViewer,
-      viewingUserText: this.viewingUserText,
-      hideNames: this.hideNames,
       showRank: this.showRank,
-      rankSuffix: this.rankSuffix,
-      width: this.width,
+      isEssentials: this.isEssentials,
     };
     const demoProps = { ...props, demoData: this.demoData };
     const viewprops = isDemo()
@@ -189,47 +177,6 @@ export class Leaderboard {
       "attribute": "show-rank",
       "reflect": false
     },
-    "width": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Width",
-            "name": "uiName"
-          }],
-        "text": "Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. \"500px\", \"33%\", etc.)"
-      },
-      "attribute": "width",
-      "reflect": false,
-      "defaultValue": "\"100%\""
-    },
-    "rankSuffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Rank Suffix",
-            "name": "uiName"
-          }],
-        "text": "A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., \"st\" for 1st, \"nd\" for 2nd, \"rd\" for 3rd, and \"th\" for all others)."
-      },
-      "attribute": "rank-suffix",
-      "reflect": false
-    },
     "hideViewer": {
       "type": "boolean",
       "mutable": false,
@@ -254,28 +201,7 @@ export class Leaderboard {
       "reflect": false,
       "defaultValue": "false"
     },
-    "viewingUserText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Viewing user text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "viewing-user-text",
-      "reflect": false,
-      "defaultValue": "\"You\""
-    },
-    "hideNames": {
+    "isEssentials": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -284,18 +210,18 @@ export class Leaderboard {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
-            "text": "Hide users names",
+            "text": "Hide viewing user",
             "name": "uiName"
           }, {
             "text": undefined,
             "name": "default"
           }],
-        "text": "Hide the Names of users to protect personal identifiable information"
+        "text": "Hides the leaderboard if user is on Essentials plan"
       },
-      "attribute": "hide-names",
+      "attribute": "is-essentials",
       "reflect": false,
       "defaultValue": "false"
     },
@@ -433,7 +359,7 @@ export class Leaderboard {
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; essentials: VNode; loadingstate: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -467,6 +393,18 @@ function EmptySlot() {
   return (h("slot", { name: "empty" },
     h("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" })));
 }
+function EssentialsSlot() {
+  return (h("slot", { name: "essentials" },
+    h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support", "missing-feature": "Leaderboards" })));
+}
+function LoadingSlot() {
+  return (h("slot", { name: "loading" },
+    h("table", null, [...Array(10)].map(() => {
+      return (h("tr", null,
+        h("td", null,
+          h("sl-skeleton", null))));
+    }))));
+}
 function useLeaderboardDemo(props) {
   var _a, _b;
   const data = ((_b = (_a = props.demoData) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.leaderboard) || [
@@ -522,10 +460,6 @@ function useLeaderboardDemo(props) {
           : "Anonymous User",
         showRank: props.showRank,
         hideViewer: props.hideViewer,
-        viewingUserText: props.viewingUserText,
-        hideNames: props.hideNames,
-        rankSuffix: props.rankSuffix,
-        width: props.width,
       },
     },
     data: {
@@ -534,6 +468,8 @@ function useLeaderboardDemo(props) {
     },
     elements: {
       empty: h(EmptySlot, null),
+      essentials: h(EssentialsSlot, null),
+      loadingstate: h(LoadingSlot, null),
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }