@saasquatch/mint-components 1.5.5-1 → 1.5.5-2

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

@@ -9,72 +9,144 @@ export default {
 };
 const users = [
   {
-    firstName: "Viktor",
-    lastInitial: "V",
-    value: 82,
+    firstName: "",
+    lastInitial: "",
+    textValue: "82",
     rank: 1,
     rowNumber: 1,
   },
   {
     firstName: "MF",
     lastInitial: "D",
-    value: 73,
+    textValue: "73",
     rank: 2,
     rowNumber: 2,
   },
   {
     firstName: "Freddie",
     lastInitial: "G",
-    value: 64,
+    textValue: "64",
     rank: 3,
     rowNumber: 3,
   },
   {
     firstName: "Benny",
     lastInitial: "B",
-    value: 55,
+    textValue: "55",
     rank: 4,
     rowNumber: 4,
   },
   {
     firstName: "Mos",
     lastInitial: "D",
-    value: 46,
+    textValue: "46",
     rank: 5,
     rowNumber: 5,
   },
   {
     firstName: "Joe",
     lastInitial: "S",
-    value: 42,
+    textValue: "42",
     rank: 6,
     rowNumber: 6,
   },
   {
     firstName: "Zach",
     lastInitial: "H",
-    value: 41,
+    textValue: "41",
     rank: 7,
     rowNumber: 7,
   },
   {
     firstName: "Sarah",
     lastInitial: "S",
-    value: 39,
+    textValue: "39",
     rank: 8,
     rowNumber: 8,
   },
   {
     firstName: "James",
     lastInitial: "",
-    value: 33,
+    textValue: "33",
     rank: 9,
     rowNumber: 9,
   },
   {
     firstName: "",
     lastInitial: "J",
-    value: 29,
+    textValue: "29",
+    rank: 10,
+    rowNumber: 10,
+  },
+];
+const pointsUsers = [
+  {
+    firstName: "",
+    lastInitial: "",
+    textValue: "82 Points",
+    rank: 1,
+    rowNumber: 1,
+  },
+  {
+    firstName: "MF",
+    lastInitial: "D",
+    textValue: "73 Points",
+    rank: 2,
+    rowNumber: 2,
+  },
+  {
+    firstName: "Freddie",
+    lastInitial: "G",
+    textValue: "64 Points",
+    rank: 3,
+    rowNumber: 3,
+  },
+  {
+    firstName: "Benny",
+    lastInitial: "B",
+    textValue: "55 Points",
+    rank: 4,
+    rowNumber: 4,
+  },
+  {
+    firstName: "Mos",
+    lastInitial: "D",
+    textValue: "46 Points",
+    rank: 5,
+    rowNumber: 5,
+  },
+  {
+    firstName: "Joe",
+    lastInitial: "S",
+    textValue: "42 Points",
+    rank: 6,
+    rowNumber: 6,
+  },
+  {
+    firstName: "Zach",
+    lastInitial: "H",
+    textValue: "41 Points",
+    rank: 7,
+    rowNumber: 7,
+  },
+  {
+    firstName: "Sarah",
+    lastInitial: "S",
+    textValue: "39 Points",
+    rank: 8,
+    rowNumber: 8,
+  },
+  {
+    firstName: "James",
+    lastInitial: "",
+    textValue: "33 Points",
+    rank: 9,
+    rowNumber: 9,
+  },
+  {
+    firstName: "",
+    lastInitial: "J",
+    textValue: "29 Points",
     rank: 10,
     rowNumber: 10,
   },
@@ -83,7 +155,7 @@ const defaultStyles = {
   usersheading: "User",
   statsheading: "Referrals",
   rankheading: "Rank",
-  anonymousUser: "Anonymous User"
+  anonymousUser: "Anonymous User",
 };
 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" })),
@@ -106,10 +178,11 @@ export const Empty = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [],
+      rowNumber: 10,
       viewerRank: {
         firstName: "Kutay",
         lastInitial: "C",
-        value: 8,
+        textValue: "8",
         rowNumber: 11,
         rank: 23,
       },
@@ -131,6 +204,7 @@ export const Loading = () => {
     },
     data: {
       rankType: "rowNumber",
+      rowNumber: 10,
       leaderboard: [],
     },
     elements: {
@@ -150,11 +224,12 @@ export const One = () => {
     },
     data: {
       rankType: "rowNumber",
+      rowNumber: 1,
       leaderboard: [
         {
           firstName: "Viktor",
           lastInitial: "V",
-          value: 82,
+          textValue: "82",
           rank: 1,
           rowNumber: 1,
         },
@@ -162,7 +237,7 @@ export const One = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -184,33 +259,40 @@ export const Five = () => {
     },
     data: {
       rankType: "rowNumber",
+      rowNumber: 5,
       leaderboard: [
         {
           firstName: "Viktor",
           lastInitial: "V",
-          value: 82,
+          textValue: "82",
           rank: 1,
           rowNumber: 1,
         },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "MF",
+          lastInitial: "D",
+          textValue: "73",
+          rank: 2,
+          rowNumber: 2,
+        },
         {
           firstName: "Freddie",
           lastInitial: "G",
-          value: 64,
+          textValue: "64",
           rank: 3,
           rowNumber: 3,
         },
         {
           firstName: "Benny",
           lastInitial: "B",
-          value: 55,
+          textValue: "55",
           rank: 4,
           rowNumber: 4,
         },
         {
           firstName: "Mos",
           lastInitial: "D",
-          value: 46,
+          textValue: "46",
           rank: 5,
           rowNumber: 5,
         },
@@ -218,7 +300,7 @@ export const Five = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -229,12 +311,13 @@ export const Five = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
-export const Ten = () => {
+export const ReferralLeaderboard = () => {
   const props = {
     states: {
       loading: false,
       hasLeaders: true,
       styles: {
+        ...defaultStyles,
         rankheading: "Rank",
         usersheading: "User",
         statsheading: "Referrals",
@@ -244,10 +327,42 @@ export const Ten = () => {
     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: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        ...defaultStyles,
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Points",
+        showRank: false,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: pointsUsers,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82 Points",
         rank: 1,
         rowNumber: 1,
       },
@@ -271,10 +386,11 @@ export const TenWithRank = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -298,10 +414,11 @@ export const ViewerOutside = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Kutay",
         lastInitial: "C",
-        value: 8,
+        textValue: "8",
         rowNumber: 11,
         rank: 23,
       },
@@ -325,6 +442,7 @@ export const ViewerAnonymous = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: null,
     },
     elements: {
@@ -338,6 +456,7 @@ export const HideViewer = () => {
     states: {
       loading: false,
       hasLeaders: true,
+      rowNumber: 10,
       styles: {
         ...defaultStyles,
         showRank: true,
@@ -347,10 +466,11 @@ export const HideViewer = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: users,
+      rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rowNumber: 1,
         rank: 1,
       },

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

@@ -104,6 +104,62 @@ export const TopStartedReferrers = createHookStory(() => {
     }),
   ];
 });
+export const topPointEarners = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topPointEarners",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+    View({
+      leaderboardType: "topPointEarners",
+      rankType: "rank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+    View({
+      leaderboardType: "topPointEarners",
+      rankType: "denseRank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+    }),
+  ];
+});
+export const globalLeaderboards = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topPointEarners",
+      rankType: "rank",
+      statsheading: "Points",
+      usersheading: "Top Earners",
+      programId: "",
+    }),
+    View({
+      leaderboardType: "topStartedReferrers",
+      rankType: "rank",
+      statsheading: "Referrals",
+      programId: "",
+    }),
+    View({
+      leaderboardType: "topConvertedReferrers",
+      rankType: "rank",
+      statsheading: "Referrals",
+      programId: "",
+    }),
+  ];
+});
+export const FiveResults = createHookStory(() => {
+  setupGraphQL();
+  return [
+    View({
+      leaderboardType: "topStartedReferrers",
+      maxRows: 5,
+      statsheading: "Referrals",
+    }),
+  ];
+});
 export const EmptyLeaderboard = createHookStory(() => {
   setupOtherGraphQL();
   return [

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

@@ -84,7 +84,7 @@ export function LeaderboardView(props) {
             : user.firstName || user.lastInitial
               ? user.firstName || user.lastInitial
               : styles.anonymousUser),
-          h("td", { class: "Score" }, user.value)));
+          h("td", { class: "Score" }, user.textValue)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
         h("td", { colSpan: 100, class: "ellipses" },
@@ -97,5 +97,5 @@ export function LeaderboardView(props) {
           : ((_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.value) || "0"))))));
+        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

@@ -11,16 +11,23 @@ import { useLeaderboard } from "./useLeaderboard";
 export class Leaderboard {
   constructor() {
     /**
-     * Hide the current user's leaderboard information when they are not in the top 10
+     * Hide the viewer's leaderboard row if not in the top 10.
      *
      * @uiName Hide Viewing User
      */
     this.hideViewer = false;
     /**
-     * Title displayed for users without names
-     * @uiName Unknown User Text
+     * Text displayed for users without names in the leaderboard
+     *
+     * @uiName Anonymous User Name
      */
     this.anonymousUser = "Anonymous User";
+    /**
+     * Control the maximum amount of rows displayed on the leaderboard.
+     *
+     * @uiName Maximum Rows Number
+     */
+    this.maxRows = 10;
     this.ignored = true;
     withHooks(this);
     withShadowView(this);
@@ -35,6 +42,8 @@ export class Leaderboard {
       rankheading: this.rankheading,
       rankType: this.rankType,
       leaderboardType: this.leaderboardType,
+      maxRows: this.maxRows,
+      programId: this.programId,
       anonymousUser: this.anonymousUser,
       interval: this.interval,
       hideViewer: this.hideViewer,
@@ -49,6 +58,26 @@ export class Leaderboard {
   static get is() { return "sqm-leaderboard"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
+    "programId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Program",
+            "name": "uiName"
+          }],
+        "text": "Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is.\nIf no program ID is set or provided by context, then a global leaderboard is shown."
+      },
+      "attribute": "program-id",
+      "reflect": false
+    },
     "usersheading": {
       "type": "string",
       "mutable": false,
@@ -101,7 +130,7 @@ export class Leaderboard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Rank Heading",
+            "text": "Rank Column Heading",
             "name": "uiName"
           }],
         "text": ""
@@ -121,7 +150,7 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Leaderboard Rank",
+            "text": "Show Rank Column",
             "name": "uiName"
           }],
         "text": ""
@@ -144,7 +173,7 @@ export class Leaderboard {
             "text": "Hide Viewing User",
             "name": "uiName"
           }],
-        "text": "Hide the current user's leaderboard information when they are not in the top 10"
+        "text": "Hide the viewer's leaderboard row if not in the top 10."
       },
       "attribute": "hide-viewer",
       "reflect": false,
@@ -183,8 +212,8 @@ export class Leaderboard {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"topStartedReferrers\" | \"topConvertedReferrers\"",
-        "resolved": "\"topConvertedReferrers\" | \"topStartedReferrers\"",
+        "original": "| \"topStartedReferrers\"\n    | \"topConvertedReferrers\"\n    | \"topPointEarners\"",
+        "resolved": "\"topConvertedReferrers\" | \"topPointEarners\" | \"topStartedReferrers\"",
         "references": {}
       },
       "required": false,
@@ -197,10 +226,10 @@ export class Leaderboard {
             "text": "string",
             "name": "uiType"
           }, {
-            "text": "[\"topStartedReferrers\", \"topConvertedReferrers\"]",
+            "text": "[\"topStartedReferrers\", \"topConvertedReferrers\", \"topPointEarners\"]",
             "name": "uiEnum"
           }, {
-            "text": "[\"Top Started Referrers\", \"Top Converted Referrers\"]",
+            "text": "[\"Top Started Referrers\", \"Top Converted Referrers\", \"Top Point Earners\"]",
             "name": "uiEnumNames"
           }],
         "text": ""
@@ -220,10 +249,10 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Unknown User Text",
+            "text": "Anonymous User Name",
             "name": "uiName"
           }],
-        "text": "Title displayed for users without names"
+        "text": "Text displayed for users without names in the leaderboard"
       },
       "attribute": "anonymous-user",
       "reflect": false,
@@ -248,19 +277,40 @@ export class Leaderboard {
             "name": "uiWidget"
           }, {
             "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiWidgetOptions"
+            "name": "uiOptions"
           }],
-        "text": ""
+        "text": "Only count leaderboard activity within a given interval"
       },
       "attribute": "interval",
       "reflect": false
     },
+    "maxRows": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Maximum Rows Number",
+            "name": "uiName"
+          }],
+        "text": "Control the maximum amount of rows displayed on the leaderboard."
+      },
+      "attribute": "max-rows",
+      "reflect": false,
+      "defaultValue": "10"
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<LeaderboardViewProps>",
-        "resolved": "{ states?: { loading: boolean; hasLeaders: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; anonymousUser?: string; }; }; data?: { rankType: string; leaderboard: { value: number; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { value: number; rank: number; firstName: string; lastInitial: string; rowNumber: number; }; }; elements?: { empty: VNode; loadingstate: VNode; }; }",
+        "resolved": "{ states?: { loading: boolean; hasLeaders: 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; loadingstate: VNode; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -308,33 +358,33 @@ function useLeaderboardDemo(props) {
     {
       firstName: "Viktor",
       lastInitial: "V",
-      value: 82,
+      textValue: "82",
       rank: 1,
       rowNumber: 1,
     },
     {
       firstName: "MF",
       lastInitial: "D",
-      value: 73,
+      textValue: "73",
       rank: 2,
       rowNumber: 2,
     },
     {
       firstName: "Freddie",
       lastInitial: "G",
-      value: 64,
+      textValue: "64",
       rank: 3,
       rowNumber: 3,
     },
     {
       firstName: "Benny",
       lastInitial: "B",
-      value: 55,
+      textValue: "55",
       rank: 4,
       rowNumber: 4,
     },
     {
-      value: 46,
+      textValue: "46",
       rank: 5,
       rowNumber: 5,
     },