@saasquatch/mint-components 1.5.4-0 → 1.5.4

package/dist/esm/sqm-big-stat_35.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h as h$1, c as Host } from './index-17b4da69.js'
 import { m as h, e as useEffect, k as useState, y, o as d, f as useRef, b as browser, u as useReducer } from './stencil-hooks.module-acc8a613.js';
 import { i as intl } from './global-15cdf41a.js';
 import { u as useCallback } from './use-callback-7e0bfd3b.js';
-import { j as jn, P, d as dist, i as ie, b as sn, q as qe, M, r as rn, c as dn, g as $e, E as Ee, D as De, H as He, l as ln, R as Rn, A as An } from './index.module-f5e17a4e.js';
+import { j as jn, P, d as dist, i as ie, b as sn, q as qe, M, A as An, r as rn, c as dn, g as $e, E as Ee, D as De, H as He, l as ln, R as Rn } from './index.module-f5e17a4e.js';
 import './extends-c31f1eff.js';
 import { j as jsonpointer } from './jsonpointer-388a7082.js';
 import { c as cjs } from './cjs-bdfb4486.js';
@@ -14,7 +14,7 @@ import './luxon-f44215d9.js';
 import { g as getProps, a as getMissingProps, s as sanitizeUrlPath } from './utils-d7bbb0e2.js';
 import './sqm-text-span-view-020db63f.js';
 import './sqm-portal-container-view-34f26e2a.js';
-import { c as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, C as CheckboxFieldView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-87c6e4d6.js';
+import { c as useDemoBigStat, K as useBigStat, B as BigStatView, H as autoColorScaleCss, G as CardFeedView, C as CheckboxFieldView, D as DropdownFieldView, E as EditProfileView, I as InputFieldView, M as withShadowView, L as LeaderboardView, N as NameFieldsView, e as PortalChangePasswordView, P as PortalFrameView, f as PortalLoginView, g as PortalRegisterView, R as ReferralIframeView, O as demoRewardExchange, i as RewardExchangeView, Q as pathToRegexp, b as useShareButton, S as ShareButtonView, a as ShareLinkView, u as useShareLink, d as StatContainerView, T as TaskCardView } from './ShadowViewAddon-2ebdb75f.js';
 import './sqm-portal-section-view-c8d1c727.js';
 
 const BigStat = class {
@@ -864,11 +864,16 @@ function useInputFieldDemo(props) {
 }
 
 const GET_LEADERBOARD = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+    $limit: Int!
+  ) {
     userLeaderboard(type: $type, filter: $filter) {
       dateModified
-      rows {
-        value
+      rows(limit: $limit) {
+        textValue(locale: $locale)
         firstName
         lastInitial
         rank {
@@ -881,13 +886,17 @@ const GET_LEADERBOARD = dist.gql `
   }
 `;
 const GET_RANK = dist.gql `
-  query ($type: String!, $filter: UserLeaderboardFilterInput) {
+  query (
+    $type: String!
+    $filter: UserLeaderboardFilterInput
+    $locale: RSLocale
+  ) {
     viewer {
       ... on User {
         firstName
         lastInitial
         leaderboardRank(type: $type, filter: $filter) {
-          value
+          textValue(locale: $locale)
           rank
           denseRank
           rowNumber
@@ -902,6 +911,7 @@ function useLeaderboard(props) {
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   const user = ie();
+  const locale = An();
   const variables = programId
     ? {
       type: props.leaderboardType,
@@ -909,10 +919,17 @@ function useLeaderboard(props) {
     }
     : {
       type: props.leaderboardType,
+      filter: {},
     };
   if (props.interval) {
     variables.filter["interval"] = props.interval;
   }
+  if (locale) {
+    variables["locale"] = locale;
+  }
+  if (props.maxRows > 0) {
+    variables["limit"] = props.maxRows;
+  }
   const { data: leaderboardData, loading: loadingLeaderboard } = sn(GET_LEADERBOARD, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const { data: rankData } = sn(GET_RANK, variables, !(user === null || user === void 0 ? void 0 : user.jwt));
   const leaderboardRows = (_b = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.userLeaderboard) === null || _b === void 0 ? void 0 : _b.rows;
@@ -924,7 +941,7 @@ function useLeaderboard(props) {
     return leaderboardRows === null || leaderboardRows === void 0 ? void 0 : leaderboardRows.flatMap((user) => {
       var _a, _b;
       return ({
-        value: user.value,
+        textValue: user.textValue,
         firstName: user.firstName,
         lastInitial: user.lastInitial,
         rank: (_a = user.rank) === null || _a === void 0 ? void 0 : _a[props.rankType],
@@ -933,7 +950,7 @@ function useLeaderboard(props) {
     });
   }
   const viewingUser = {
-    value: (_d = (_c = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _c === void 0 ? void 0 : _c.leaderboardRank) === null || _d === void 0 ? void 0 : _d.value,
+    textValue: (_d = (_c = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _c === void 0 ? void 0 : _c.leaderboardRank) === null || _d === void 0 ? void 0 : _d.textValue,
     firstName: (_e = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _e === void 0 ? void 0 : _e.firstName,
     lastInitial: (_f = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _f === void 0 ? void 0 : _f.lastInitial,
     rank: (_h = (_g = rankData === null || rankData === void 0 ? void 0 : rankData.viewer) === null || _g === void 0 ? void 0 : _g.leaderboardRank) === null || _h === void 0 ? void 0 : _h[props.rankType],
@@ -946,7 +963,7 @@ function useLeaderboard(props) {
       styles: props,
     },
     data: {
-      leaderboard: sortedLeaderboard === null || sortedLeaderboard === void 0 ? void 0 : sortedLeaderboard.slice(0, props.rowNumber),
+      leaderboard: sortedLeaderboard,
       rankType: props.rankType,
       viewerRank: viewingUser,
     },
@@ -961,21 +978,23 @@ const Leaderboard = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     /**
-     * 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
+     * @uiName Hide Viewing User
      */
     this.hideViewer = false;
     /**
-     * @uiName Title displayed for users without names
+     * Text displayed for users without names in the leaderboard
+     *
+     * @uiName Anonymous User Name
      */
     this.anonymousUser = "Anonymous User";
     /**
-     * The maxiumum amount of leaderboard rows displayed, minimum is 1 and maximum is 10
+     * Control the maximum amount of rows displayed on the leaderboard.
      *
-     * @uiName Max Number of Leaderboard Rows
+     * @uiName Maximum Rows Number
      */
-    this.rowNumber = 10;
+    this.maxRows = 10;
     this.ignored = true;
     h(this);
     withShadowView(this);
@@ -990,7 +1009,7 @@ const Leaderboard = class {
       rankheading: this.rankheading,
       rankType: this.rankType,
       leaderboardType: this.leaderboardType,
-      rowNumber: this.rowNumber,
+      maxRows: this.maxRows,
       programId: this.programId,
       anonymousUser: this.anonymousUser,
       interval: this.interval,
@@ -1018,33 +1037,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,
     },
@@ -6689,7 +6708,7 @@ const SqmRewardExchangeList = class {
     /**
      * @uiName Exchange button text
      */
-    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {unavailableReasonCode} }";
+    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }";
     /**
      * @uiName Choose Reward Progress Title
      */

package/dist/esm/sqm-leaderboard-rank.entry.js

@@ -33,6 +33,7 @@ function useLeaderboardRank(props) {
     }
     : {
       type: props.leaderboardType,
+      filter: {},
     };
   if (props.interval) {
     rankVariables.filter["interval"] = props.interval;

package/dist/esm/sqm-stencilbook.entry.js

@@ -23,7 +23,7 @@ import { P as PortalContainerView } from './sqm-portal-container-view-34f26e2a.j
 import { P as PortalProfileView } from './sqm-portal-profile-view-28c39970.js';
 import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-e0436989.js';
 import { P as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c489166b.js';
-import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-87c6e4d6.js';
+import { S as ShareButtonView, L as LeaderboardView, a as ShareLinkView, B as BigStatView, P as PortalFrameView, E as EditProfileView, u as useShareLink, b as useShareButton, c as useDemoBigStat, d as StatContainerView, e as PortalChangePasswordView, f as PortalLoginView, g as PortalRegisterView, T as TaskCardView, h as ProgressBarView, R as ReferralIframeView, N as NameFieldsView, C as CheckboxFieldView, D as DropdownFieldView, I as InputFieldView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as CardFeedView, H as autoColorScaleCss, J as ShadowViewAddon } from './ShadowViewAddon-2ebdb75f.js';
 import { P as PortalSectionView } from './sqm-portal-section-view-c8d1c727.js';
 
 /**
@@ -1768,7 +1768,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
   MultipleStats: MultipleStats
 });
 
-const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard supports three main cases\r\n\t- Top Started Referrers\r\n\t- Top Converted Referrers\r\n\t- Top Point Earners\r\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\r\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\r\n\r\n\tBackground: A user exists\r\n\t\tGiven a user\r\n\t\tAnd they are viewing the leaderboard\r\n\r\n\t@motivating\r\n\tScenario: The top started referrers leaderboard is displayed by default\r\n\t\tGiven a leaderboard doesn't have prop \"leaderboard-type\"\r\n\t\tAnd there are started referrals on the tenant\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the top started referrers leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Two types of referrals leaderboards can be displayed\r\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with <value>\r\n\t\tAnd there are started referrals on the tenant\r\n\t\tAnd there are started converted on the tenant\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the <referralType> leaderboard\r\n\t\tExamples:\r\n\t\t\t| value                 | referralType |\r\n\t\t\t| topStartedReferrers   | started      |\r\n\t\t\t| topConvertedReferrers | converted    |\r\n\r\n\t@motivating\r\n\tScenario: The top point earners leaderboard can be displayed\r\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\r\n\t\tAnd there are users with points\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the top point earners leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Program Context is used by default to filter leaderboard results\r\n\t\tGiven a <leaderboardType> leaderboard loaded with program context for \"my-program\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from \"my-program\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Program Id context can be overwritten with a prop\r\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from \"my-test-program\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Global leaderboard can be displayed by clearing program context\r\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\r\n\t\t#This can also be done with a program section in a similar manner\r\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see global <results>\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario: Leaderboard results are shown in descending order\r\n\t\tGiven there are leaderboard results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see up to the 10 top leaderboard results\r\n\t\tAnd leaderboard is in descending order\r\n\r\n\t@motivating\r\n\tScenario Outline: Leaderboard results can be filtered with a time interval\r\n\t\tGiven a <leaderboardType> leaderboard\r\n\t\tAnd it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Leaderboard rank type can be configured\r\n\t\tGiven a leaderboard has prop \"rank-type\" with <value>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen their leaderboard rank is their <rank>\r\n\t\tExamples:\r\n\t\t\t| value     | rank       |\r\n\t\t\t| rowNumber | row number |\r\n\t\t\t| denseRank | dense rank |\r\n\t\t\t| rank      | rank       |\r\n\r\n\t@minutia\r\n\tScenario Outline: The max number of leaderboard rows displayed can be configured\r\n\t\tGiven a leaderboard has prop \"row-number\" with <value>\r\n\t\tAnd the leaderboard has <resultCount>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see <number> rows\r\n\t\tExamples:\r\n\t\t\t| value | resultCount | number |\r\n\t\t\t|       | 10          | 10     |\r\n\t\t\t| 5     | 10          | 5      |\r\n\t\t\t| 3     | 1           | 1      |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboards with no results show an empty state\r\n\t\tGiven a leaderboard has no results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen an empty state is dislayed\r\n\t\tAnd they see an image of a leaderboard\r\n\t\tAnd below they see \"View your rank in the leaderboard\"\r\n\t\tAnd below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\r\n\t\tAnd the text is center aligned\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: A custom empty state can be provided\r\n\t\tGiven a leaderboard has no results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen the contents of the \"empty\" slot are displayed\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboard headings can be customized\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has the following props\r\n\t\t\t| prop         | value          |\r\n\t\t\t| rankheading  | Place          |\r\n\t\t\t| usersheading | Customer       |\r\n\t\t\t| statsheading | Referral Count |\r\n\t\t\t| show-rank    | true           |\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the following columns with headings\r\n\t\t\t| column | heading        |\r\n\t\t\t| rank   | Place          |\r\n\t\t\t| user   | Customer       |\r\n\t\t\t| stat   | Referral Count |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Leaderboard rank can be hidden or shown\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has prop \"show-rank\" with <propValue>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they <maySee> the rank column\r\n\t\tExamples:\r\n\t\t\t| propValue | maySee    |\r\n\t\t\t| true      | see       |\r\n\t\t\t| false     | don't see |\r\n\t\t\t|           | don't see |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\r\n\t\tGiven a user in the top 10 of the leaderboard results\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the row with their name highlighted with brand colour\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user <mayHave> completed actions counted by the leaderboard\r\n\t\tAnd they are not in the top 10 leaderboard results\r\n\t\tAnd the leaderboard has prop \"show-user\" with <value>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they <maySee> \"...\" under the top 10 leaderboard results\r\n\t\tAnd under \"...\" they <maySee> a row highlighted with brand colour\r\n\t\tAnd they <maySee> their name\r\n\t\tAnd they <maySee> their leaderboard value\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHave | value | maySee    | maySeeRank           |\r\n\t\t\t| has     | true  | see       | see their rank       |\r\n\t\t\t| hasn't  | true  | see       | don't see their rank |\r\n\t\t\t| N/A     | false | don't see | don't see their rank |\r\n\t\t\t| hasn't  |       | see       | see their rank       |\r\n\r\n\t@minutiae\r\n\tScenario: Users without names are displayed as an \"Anonymous User\"\r\n\t\tGiven a user\r\n\t\tAnd they do not have a first name\r\n\t\tAnd they do not have a last initial\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the user displayed as \"Anonymous User\"\r\n\r\n\t@minutiae\r\n\tScenario Outline: If a user only has a first or last name, then only that is displayed\r\n\t\tGiven a user\r\n\t\tAnd they only have a <name>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they only see their <name>\r\n\t\tExamples:\r\n\t\t\t| name      |\r\n\t\t\t| firstName |\r\n\t\t\t| lastName  |";
+const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard supports three main cases\r\n\t- Top Started Referrers\r\n\t- Top Converted Referrers\r\n\t- Top Point Earners\r\n\tTo display these different types of leaderboards it uses the backends pre-canned options.\r\n\tThe backend supports filtering on programId and interval, programId is sourced from program context.\r\n\r\n\tBackground: A user exists\r\n\t\tGiven a user\r\n\t\tAnd they are viewing the leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Two types of referrals leaderboards can be displayed\r\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with <value>\r\n\t\tAnd there are started referrals on the tenant\r\n\t\tAnd there are started converted on the tenant\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the referral <referralType> leaderboard\r\n\t\tExamples:\r\n\t\t\t| value                 | referralType |\r\n\t\t\t| topStartedReferrers   | started      |\r\n\t\t\t| topConvertedReferrers | converted    |\r\n\r\n\t@motivating\r\n\tScenario: The top point earners leaderboard can be displayed\r\n\t\tGiven a leaderboard has prop \"leaderboard-type\" with value \"topPointEarners\"\r\n\t\tAnd there are users with points\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the top point earners leaderboard\r\n\t\tAnd text values are displayed for point counts\r\n\r\n\t@minutia\r\n\tScenario Outline: Reward pretty value is used on the top point earners leaderboard\r\n\t\tGiven top point earners leaderboard\r\n\t\tAnd the \"POINT\" reward unit has a pretty value for the following locales\r\n\t\t\t| locale |\r\n\t\t\t| en     |\r\n\t\t\t| fr     |\r\n\t\t\t| tr     |\r\n\t\tWhen the user views the leaderboard\r\n\t\tAnd they have <locale>\r\n\t\tThen they see the translated pretty value in the stat value column\r\n\r\n\t@motivating\r\n\tScenario Outline: Program Context is used by default to filter leaderboard results\r\n\t\tGiven a <leaderboardType> leaderboard loaded with program context for \"my-program\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from \"my-program\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Program Id context can be overwritten with a prop\r\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from \"my-test-program\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Global leaderboards can be displayed by clearing program context\r\n\t\t#This is important for clients with use cases like StaffTracks global points leaderboard\r\n\t\t#This can also be done with a program section in a similar manner\r\n\t\tGiven a <leaderboardType> leaderboard has prop \"program-Id\" with value \"\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see global <results>\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario: Leaderboard results are shown in descending order\r\n\t\tGiven there are leaderboard results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see up to the 10 top leaderboard results\r\n\t\tAnd leaderboard is in descending order\r\n\r\n\t@motivating\r\n\tScenario Outline: Leaderboard results can be filtered with a time interval\r\n\t\tGiven a <leaderboardType> leaderboard\r\n\t\tAnd it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they only see <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tExamples:\r\n\t\t\t| leaderboardType       | results             |\r\n\t\t\t| topStartedReferrers   | started referrals   |\r\n\t\t\t| topConvertedReferrers | converted referrals |\r\n\t\t\t| topPointEarners       | points earned       |\r\n\r\n\t@motivating\r\n\tScenario Outline: Leaderboard rank type can be configured\r\n\t\tGiven a leaderboard has prop \"rank-type\" with <value>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen their leaderboard rank is their <rank>\r\n\t\tExamples:\r\n\t\t\t| value     | rank       |\r\n\t\t\t| rowNumber | row number |\r\n\t\t\t| denseRank | dense rank |\r\n\t\t\t| rank      | rank       |\r\n\r\n\t@minutia\r\n\tScenario Outline: The max number of leaderboard rows displayed can be configured but defaults to 10\r\n\t\tGiven a leaderboard has prop \"max-rows\" with <value>\r\n\t\tAnd the leaderboard has <resultCount>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see <number> rows\r\n\t\tExamples:\r\n\t\t\t| value | resultCount | number |\r\n\t\t\t|       | 10          | 10     |\r\n\t\t\t| 5     | 10          | 5      |\r\n\t\t\t| 3     | 1           | 1      |\r\n\t\t\t| 25    | 15          | 15     |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboards with no results show an empty state\r\n\t\tGiven a leaderboard has no results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen an empty state is dislayed\r\n\t\tAnd they see an image of a leaderboard\r\n\t\tAnd below they see \"View your rank in the leaderboard\"\r\n\t\tAnd below they see \"Be the first to refer a friend and reach the top of the leaderboard\"\r\n\t\tAnd the text is center aligned\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: A custom empty state can be provided\r\n\t\tGiven a leaderboard has no results\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen the contents of the \"empty\" slot are displayed\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: Leaderboard headings can be customized\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has the following props\r\n\t\t\t| prop         | value          |\r\n\t\t\t| rankheading  | Place          |\r\n\t\t\t| usersheading | Customer       |\r\n\t\t\t| statsheading | Referral Count |\r\n\t\t\t| show-rank    | true           |\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they see the following columns with headings\r\n\t\t\t| column | heading        |\r\n\t\t\t| rank   | Place          |\r\n\t\t\t| user   | Customer       |\r\n\t\t\t| stat   | Referral Count |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Leaderboard rank can be hidden or shown\r\n\t\tGiven a leaderboard\r\n\t\tAnd it has prop \"show-rank\" with <propValue>\r\n\t\tWhen the user views the leaderboard\r\n\t\tThen they <maySee> the rank column\r\n\t\tExamples:\r\n\t\t\t| propValue | maySee    |\r\n\t\t\t| true      | see       |\r\n\t\t\t| false     | don't see |\r\n\t\t\t|           | don't see |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Users in the top 10 of the leaderboard results see their leaderboard row highlighted\r\n\t\tGiven a user in the top 10 of the leaderboard results\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the row with their name highlighted with brand colour\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Users not in the top 10 leaderboard results can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user <mayHave> completed actions counted by the leaderboard\r\n\t\tAnd they are not in the top 10 leaderboard results\r\n\t\tAnd the leaderboard has prop \"show-user\" with <value>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they <maySee> \"...\" under the top 10 leaderboard results\r\n\t\tAnd under \"...\" they <maySee> a row highlighted with brand colour\r\n\t\tAnd they <maySee> their name\r\n\t\tAnd they <maySee> their leaderboard value\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHave | value | maySee    | maySeeRank           |\r\n\t\t\t| has     | true  | see       | see their rank       |\r\n\t\t\t| hasn't  | true  | see       | don't see their rank |\r\n\t\t\t| N/A     | false | don't see | don't see their rank |\r\n\t\t\t| hasn't  |       | see       | don't see their rank |\r\n\r\n\t@minutiae\r\n\tScenario: Users without names are displayed as an \"Anonymous User\"\r\n\t\tGiven a user\r\n\t\tAnd they do not have a first name\r\n\t\tAnd they do not have a last initial\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they see the user displayed as \"Anonymous User\"\r\n\r\n\t@minutiae\r\n\tScenario Outline: If a user only has a first or last name, then only that is displayed\r\n\t\tGiven a user\r\n\t\tAnd they only have a <name>\r\n\t\tWhen they view the leaderboard\r\n\t\tThen they only see their <name>\r\n\t\tExamples:\r\n\t\t\t| name      |\r\n\t\t\t| firstName |\r\n\t\t\t| lastName  |";
 
 const Leaderboard_stories = {
   title: "Components/Leaderboard",
@@ -1778,72 +1778,72 @@ const Leaderboard_stories = {
 };
 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,
   },
@@ -1879,7 +1879,7 @@ const Empty$1 = () => {
       viewerRank: {
         firstName: "Kutay",
         lastInitial: "C",
-        value: 8,
+        textValue: "8",
         rowNumber: 11,
         rank: 23,
       },
@@ -1926,7 +1926,7 @@ const One = () => {
         {
           firstName: "Viktor",
           lastInitial: "V",
-          value: 82,
+          textValue: "82",
           rank: 1,
           rowNumber: 1,
         },
@@ -1934,7 +1934,7 @@ const One = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -1961,29 +1961,35 @@ const Five = () => {
         {
           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,
         },
@@ -1991,7 +1997,7 @@ const Five = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -2008,6 +2014,7 @@ const ReferralLeaderboard = () => {
       loading: false,
       hasLeaders: true,
       styles: {
+        ...defaultStyles$1,
         rankheading: "Rank",
         usersheading: "User",
         statsheading: "Referrals",
@@ -2021,7 +2028,7 @@ const ReferralLeaderboard = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -2038,6 +2045,7 @@ const PointsLeaderboard = () => {
       loading: false,
       hasLeaders: true,
       styles: {
+        ...defaultStyles$1,
         rankheading: "Rank",
         usersheading: "User",
         statsheading: "Points",
@@ -2051,7 +2059,7 @@ const PointsLeaderboard = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -2079,7 +2087,7 @@ const TenWithRank = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },
@@ -2107,7 +2115,7 @@ const ViewerOutside = () => {
       viewerRank: {
         firstName: "Kutay",
         lastInitial: "C",
-        value: 8,
+        textValue: "8",
         rowNumber: 11,
         rank: 23,
       },
@@ -2159,7 +2167,7 @@ const HideViewer = () => {
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        value: 82,
+        textValue: "82",
         rowNumber: 1,
         rank: 1,
       },
@@ -2355,7 +2363,7 @@ const Router = /*#__PURE__*/Object.freeze({
   RouterPlayground: RouterPlayground
 });
 
-const scenario$5 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard Rank\r\n\r\n    The leaderboard rank components displays the current users rank on the leaderboard.\r\n\r\n    @minutiae\r\n    Scenario: Users without a rank are shown a generic message\r\n        Given a user has no rank\r\n        Then the component displays a generic message\r\n        And the message is the string from the prop \"unrankedText\"\r\n\r\n    @motivating\r\n    Scenario: Users with a rank are shown a message containing their rank\r\n        Given a user has a valid rank\r\n        And the prop \"rankText\" is an ICU message\r\n        Then the ICU message is parsed to include the user's rank\r\n        And the parsed message is displayed to the users\r\n\r\n    @motivating\r\n    Scenario Outline: Ranks from any of the three standard leaderboards can be displayed\r\n        Given a leaderboard rank component with <leaderboardType>\r\n        And a user has a valid rank\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType>\r\n        Examples:\r\n            | leaderboardType       |\r\n            | topStartedReferrers   |\r\n            | topConvertedReferrers |\r\n            | topPointEarners       |\r\n\r\n    @motivating\r\n    Scenario Outline: Program Context is used by default to filter leaderboard rank\r\n        Given a <leaderboardType> leaderboard rank component loaded with program context for \"my-program\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType> from \"my-program\"\r\n        Examples:\r\n            | leaderboardType       |\r\n            | topStartedReferrers   |\r\n            | topConvertedReferrers |\r\n            | topPointEarners       |\r\n\r\n    @motivating\r\n    Scenario Outline: Program Id context can be overwritten with a prop\r\n        Given a <leaderboardType> leaderboard has prop \"program-Id\" with value \"my-test-program\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType> from \"my-test-program\"\r\n        Examples:\r\n            | leaderboardType       | results             |\r\n            | topStartedReferrers   | started referrals   |\r\n            | topConvertedReferrers | converted referrals |\r\n            | topPointEarners       | points earned       |\r\n\r\n    @motivating\r\n    Scenario: Rank calculation is controlled by the \"rankType\" prop\r\n        Given the current user is User C\r\n        And User C has <points>\r\n        And User A has <points>\r\n        And User B has <points>\r\n        And the value of the \"rankType\" prop is <rankType>\r\n        Then the rank of the current user is <rank>\r\n        Examples:\r\n            | user   | points | rankType  | rank |\r\n            | User A | 5      | rowNumber | 3    |\r\n            | User B | 10     | rowNumber | 1    |\r\n            | User C | 10     | rowNumber | 2    |\r\n\r\n            | user   | points | rankType | rank |\r\n            | User A | 10     | rank     | 1    |\r\n            | User B | 10     | rank     | 1    |\r\n            | User C | 5      | rank     | 3    |\r\n\r\n            | user   | points | rankType  | rank |\r\n            | User A | 10     | denseRank | 1    |\r\n            | User B | 10     | denseRank | 1    |\r\n            | User C | 5      | denseRank | 2    |";
+const scenario$5 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard Rank\r\n\r\n    The leaderboard rank components displays the current users rank on the leaderboard.\r\n\r\n    @minutiae\r\n    Scenario: Users without a rank are shown a generic message\r\n        Given a user has no rank\r\n        Then the component displays a generic message\r\n        And the message is the string from the prop \"unrankedText\"\r\n\r\n    @motivating\r\n    Scenario: Users with a rank are shown a message containing their rank\r\n        Given a user has a valid rank\r\n        And the prop \"rankText\" is an ICU message\r\n        Then the ICU message is parsed to include the user's rank\r\n        And the parsed message is displayed to the users\r\n\r\n    @motivating\r\n    Scenario Outline: Ranks from any of the three standard leaderboards can be displayed\r\n        Given a leaderboard rank component with <leaderboardType>\r\n        And a user has a valid rank\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType>\r\n        Examples:\r\n            | leaderboardType       |\r\n            | topStartedReferrers   |\r\n            | topConvertedReferrers |\r\n            | topPointEarners       |\r\n\r\n    @motivating\r\n    Scenario Outline: Leaderboard rank can be filtered with a time interval\r\n        Given a leaderboard rank component with <leaderboardType>\r\n        And it has prop \"interval\" with value \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <results> from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n        Examples:\r\n            | leaderboardType       | results             |\r\n            | topStartedReferrers   | started referrals   |\r\n            | topConvertedReferrers | converted referrals |\r\n            | topPointEarners       | points earned       |\r\n\r\n    @motivating\r\n    Scenario Outline: Program Context is used by default to filter leaderboard rank\r\n        Given a <leaderboardType> leaderboard rank component loaded with program context for \"my-program\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType> from \"my-program\"\r\n        Examples:\r\n            | leaderboardType       |\r\n            | topStartedReferrers   |\r\n            | topConvertedReferrers |\r\n            | topPointEarners       |\r\n\r\n    @motivating\r\n    Scenario Outline: Program Id context can be overwritten with a prop\r\n        Given a <leaderboardType> leaderboard rank component has prop \"program-Id\" with value \"my-test-program\"\r\n        When they view the leaderboard rank component\r\n        Then they see their rank for <leaderboardType> from \"my-test-program\"\r\n        Examples:\r\n            | leaderboardType       | results             |\r\n            | topStartedReferrers   | started referrals   |\r\n            | topConvertedReferrers | converted referrals |\r\n            | topPointEarners       | points earned       |\r\n\r\n    @motivating\r\n    Scenario Outline: Global leaderboards ranks can be displayed by clearing program context\r\n        #This can also be done with a program section in a similar manner\r\n        Given a <leaderboardType> leaderboard rank component has prop \"program-Id\" with value \"\"\r\n        When they view the leaderboard rank component\r\n        Then they see global <results> rank\r\n        Examples:\r\n            | leaderboardType       | results             |\r\n            | topStartedReferrers   | started referrals   |\r\n            | topConvertedReferrers | converted referrals |\r\n            | topPointEarners       | points earned       |\r\n\r\n    @motivating\r\n    Scenario: Rank calculation is controlled by the \"rankType\" prop\r\n        Given the current user is User C\r\n        And User C has <points>\r\n        And User A has <points>\r\n        And User B has <points>\r\n        And the value of the \"rankType\" prop is <rankType>\r\n        Then the rank of the current user is <rank>\r\n        Examples:\r\n            | user   | points | rankType  | rank |\r\n            | User A | 5      | rowNumber | 3    |\r\n            | User B | 10     | rowNumber | 1    |\r\n            | User C | 10     | rowNumber | 2    |\r\n\r\n            | user   | points | rankType | rank |\r\n            | User A | 10     | rank     | 1    |\r\n            | User B | 10     | rank     | 1    |\r\n            | User C | 5      | rank     | 3    |\r\n\r\n            | user   | points | rankType  | rank |\r\n            | User A | 10     | denseRank | 1    |\r\n            | User B | 10     | denseRank | 1    |\r\n            | User C | 5      | denseRank | 2    |";
 
 const LeaderboardRank_stories = {
   title: "Components/Leaderboard Rank",
@@ -3051,7 +3059,7 @@ const FiveResults = createHookStory(() => {
   return [
     View$1({
       leaderboardType: "topStartedReferrers",
-      rowNumber: 5,
+      maxRows: 5,
       statsheading: "Referrals",
     }),
   ];