@saasquatch/mint-components 1.5.4-1 → 1.5.4-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/dist/cjs/sqm-big-stat_35.cjs.entry.js +6 -1
- package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js +1 -0
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +12 -4
- package/dist/collection/components/sqm-leaderboard/Leaderboard.stories.js +11 -3
- package/dist/collection/components/sqm-leaderboard/useLeaderboard.js +6 -1
- package/dist/collection/components/sqm-leaderboard-rank/useLeaderboardRank.js +1 -0
- package/dist/esm/sqm-big-stat_35.entry.js +6 -1
- package/dist/esm/sqm-leaderboard-rank.entry.js +1 -0
- package/dist/esm/sqm-stencilbook.entry.js +12 -4
- package/dist/esm-es5/sqm-big-stat_35.entry.js +1 -1
- package/dist/esm-es5/sqm-leaderboard-rank.entry.js +1 -1
- package/dist/esm-es5/sqm-stencilbook.entry.js +1 -1
- package/dist/mint-components/mint-components.esm.js +1 -1
- package/dist/mint-components/{p-7fbf40d1.entry.js → p-11dc0927.entry.js} +1 -1
- package/dist/mint-components/p-1efb0bff.system.entry.js +1 -0
- package/dist/mint-components/{p-0141c56b.system.entry.js → p-2debe4c7.system.entry.js} +1 -1
- package/dist/mint-components/p-436da6b8.system.js +1 -1
- package/dist/mint-components/p-92b18971.system.entry.js +1 -0
- package/dist/mint-components/p-e0cb936a.entry.js +159 -0
- package/dist/mint-components/{p-2cbda314.entry.js → p-f7312392.entry.js} +1 -1
- package/package.json +1 -1
- package/dist/mint-components/p-0ab829af.system.entry.js +0 -1
- package/dist/mint-components/p-158ab9be.system.entry.js +0 -1
- package/dist/mint-components/p-e89f149a.entry.js +0 -155
package/CHANGELOG.md
CHANGED
|
@@ -890,7 +890,11 @@ const GET_LEADERBOARD = index_module.dist.gql `
|
|
|
890
890
|
}
|
|
891
891
|
`;
|
|
892
892
|
const GET_RANK = index_module.dist.gql `
|
|
893
|
-
query (
|
|
893
|
+
query (
|
|
894
|
+
$type: String!
|
|
895
|
+
$filter: UserLeaderboardFilterInput
|
|
896
|
+
$locale: RSLocale
|
|
897
|
+
) {
|
|
894
898
|
viewer {
|
|
895
899
|
... on User {
|
|
896
900
|
firstName
|
|
@@ -919,6 +923,7 @@ function useLeaderboard(props) {
|
|
|
919
923
|
}
|
|
920
924
|
: {
|
|
921
925
|
type: props.leaderboardType,
|
|
926
|
+
filter: {},
|
|
922
927
|
};
|
|
923
928
|
if (props.interval) {
|
|
924
929
|
variables.filter["interval"] = props.interval;
|
|
@@ -1772,7 +1772,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
|
|
|
1772
1772
|
MultipleStats: MultipleStats
|
|
1773
1773
|
});
|
|
1774
1774
|
|
|
1775
|
-
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
|
|
1775
|
+
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 |";
|
|
1776
1776
|
|
|
1777
1777
|
const Leaderboard_stories = {
|
|
1778
1778
|
title: "Components/Leaderboard",
|
|
@@ -1782,8 +1782,8 @@ const Leaderboard_stories = {
|
|
|
1782
1782
|
};
|
|
1783
1783
|
const users = [
|
|
1784
1784
|
{
|
|
1785
|
-
firstName: "
|
|
1786
|
-
lastInitial: "
|
|
1785
|
+
firstName: "",
|
|
1786
|
+
lastInitial: "",
|
|
1787
1787
|
textValue: "82",
|
|
1788
1788
|
rank: 1,
|
|
1789
1789
|
rowNumber: 1,
|
|
@@ -1969,7 +1969,13 @@ const Five = () => {
|
|
|
1969
1969
|
rank: 1,
|
|
1970
1970
|
rowNumber: 1,
|
|
1971
1971
|
},
|
|
1972
|
-
{
|
|
1972
|
+
{
|
|
1973
|
+
firstName: "MF",
|
|
1974
|
+
lastInitial: "D",
|
|
1975
|
+
textValue: "73",
|
|
1976
|
+
rank: 2,
|
|
1977
|
+
rowNumber: 2,
|
|
1978
|
+
},
|
|
1973
1979
|
{
|
|
1974
1980
|
firstName: "Freddie",
|
|
1975
1981
|
lastInitial: "G",
|
|
@@ -2012,6 +2018,7 @@ const ReferralLeaderboard = () => {
|
|
|
2012
2018
|
loading: false,
|
|
2013
2019
|
hasLeaders: true,
|
|
2014
2020
|
styles: {
|
|
2021
|
+
...defaultStyles$1,
|
|
2015
2022
|
rankheading: "Rank",
|
|
2016
2023
|
usersheading: "User",
|
|
2017
2024
|
statsheading: "Referrals",
|
|
@@ -2042,6 +2049,7 @@ const PointsLeaderboard = () => {
|
|
|
2042
2049
|
loading: false,
|
|
2043
2050
|
hasLeaders: true,
|
|
2044
2051
|
styles: {
|
|
2052
|
+
...defaultStyles$1,
|
|
2045
2053
|
rankheading: "Rank",
|
|
2046
2054
|
usersheading: "User",
|
|
2047
2055
|
statsheading: "Points",
|
|
@@ -9,8 +9,8 @@ export default {
|
|
|
9
9
|
};
|
|
10
10
|
const users = [
|
|
11
11
|
{
|
|
12
|
-
firstName: "
|
|
13
|
-
lastInitial: "
|
|
12
|
+
firstName: "",
|
|
13
|
+
lastInitial: "",
|
|
14
14
|
textValue: "82",
|
|
15
15
|
rank: 1,
|
|
16
16
|
rowNumber: 1,
|
|
@@ -196,7 +196,13 @@ export const Five = () => {
|
|
|
196
196
|
rank: 1,
|
|
197
197
|
rowNumber: 1,
|
|
198
198
|
},
|
|
199
|
-
{
|
|
199
|
+
{
|
|
200
|
+
firstName: "MF",
|
|
201
|
+
lastInitial: "D",
|
|
202
|
+
textValue: "73",
|
|
203
|
+
rank: 2,
|
|
204
|
+
rowNumber: 2,
|
|
205
|
+
},
|
|
200
206
|
{
|
|
201
207
|
firstName: "Freddie",
|
|
202
208
|
lastInitial: "G",
|
|
@@ -239,6 +245,7 @@ export const ReferralLeaderboard = () => {
|
|
|
239
245
|
loading: false,
|
|
240
246
|
hasLeaders: true,
|
|
241
247
|
styles: {
|
|
248
|
+
...defaultStyles,
|
|
242
249
|
rankheading: "Rank",
|
|
243
250
|
usersheading: "User",
|
|
244
251
|
statsheading: "Referrals",
|
|
@@ -269,6 +276,7 @@ export const PointsLeaderboard = () => {
|
|
|
269
276
|
loading: false,
|
|
270
277
|
hasLeaders: true,
|
|
271
278
|
styles: {
|
|
279
|
+
...defaultStyles,
|
|
272
280
|
rankheading: "Rank",
|
|
273
281
|
usersheading: "User",
|
|
274
282
|
statsheading: "Points",
|
|
@@ -23,7 +23,11 @@ const GET_LEADERBOARD = gql `
|
|
|
23
23
|
}
|
|
24
24
|
`;
|
|
25
25
|
const GET_RANK = gql `
|
|
26
|
-
query (
|
|
26
|
+
query (
|
|
27
|
+
$type: String!
|
|
28
|
+
$filter: UserLeaderboardFilterInput
|
|
29
|
+
$locale: RSLocale
|
|
30
|
+
) {
|
|
27
31
|
viewer {
|
|
28
32
|
... on User {
|
|
29
33
|
firstName
|
|
@@ -52,6 +56,7 @@ export function useLeaderboard(props) {
|
|
|
52
56
|
}
|
|
53
57
|
: {
|
|
54
58
|
type: props.leaderboardType,
|
|
59
|
+
filter: {},
|
|
55
60
|
};
|
|
56
61
|
if (props.interval) {
|
|
57
62
|
variables.filter["interval"] = props.interval;
|
|
@@ -886,7 +886,11 @@ const GET_LEADERBOARD = dist.gql `
|
|
|
886
886
|
}
|
|
887
887
|
`;
|
|
888
888
|
const GET_RANK = dist.gql `
|
|
889
|
-
query (
|
|
889
|
+
query (
|
|
890
|
+
$type: String!
|
|
891
|
+
$filter: UserLeaderboardFilterInput
|
|
892
|
+
$locale: RSLocale
|
|
893
|
+
) {
|
|
890
894
|
viewer {
|
|
891
895
|
... on User {
|
|
892
896
|
firstName
|
|
@@ -915,6 +919,7 @@ function useLeaderboard(props) {
|
|
|
915
919
|
}
|
|
916
920
|
: {
|
|
917
921
|
type: props.leaderboardType,
|
|
922
|
+
filter: {},
|
|
918
923
|
};
|
|
919
924
|
if (props.interval) {
|
|
920
925
|
variables.filter["interval"] = props.interval;
|
|
@@ -1768,7 +1768,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
|
|
|
1768
1768
|
MultipleStats: MultipleStats
|
|
1769
1769
|
});
|
|
1770
1770
|
|
|
1771
|
-
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
|
|
1771
|
+
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 |";
|
|
1772
1772
|
|
|
1773
1773
|
const Leaderboard_stories = {
|
|
1774
1774
|
title: "Components/Leaderboard",
|
|
@@ -1778,8 +1778,8 @@ const Leaderboard_stories = {
|
|
|
1778
1778
|
};
|
|
1779
1779
|
const users = [
|
|
1780
1780
|
{
|
|
1781
|
-
firstName: "
|
|
1782
|
-
lastInitial: "
|
|
1781
|
+
firstName: "",
|
|
1782
|
+
lastInitial: "",
|
|
1783
1783
|
textValue: "82",
|
|
1784
1784
|
rank: 1,
|
|
1785
1785
|
rowNumber: 1,
|
|
@@ -1965,7 +1965,13 @@ const Five = () => {
|
|
|
1965
1965
|
rank: 1,
|
|
1966
1966
|
rowNumber: 1,
|
|
1967
1967
|
},
|
|
1968
|
-
{
|
|
1968
|
+
{
|
|
1969
|
+
firstName: "MF",
|
|
1970
|
+
lastInitial: "D",
|
|
1971
|
+
textValue: "73",
|
|
1972
|
+
rank: 2,
|
|
1973
|
+
rowNumber: 2,
|
|
1974
|
+
},
|
|
1969
1975
|
{
|
|
1970
1976
|
firstName: "Freddie",
|
|
1971
1977
|
lastInitial: "G",
|
|
@@ -2008,6 +2014,7 @@ const ReferralLeaderboard = () => {
|
|
|
2008
2014
|
loading: false,
|
|
2009
2015
|
hasLeaders: true,
|
|
2010
2016
|
styles: {
|
|
2017
|
+
...defaultStyles$1,
|
|
2011
2018
|
rankheading: "Rank",
|
|
2012
2019
|
usersheading: "User",
|
|
2013
2020
|
statsheading: "Referrals",
|
|
@@ -2038,6 +2045,7 @@ const PointsLeaderboard = () => {
|
|
|
2038
2045
|
loading: false,
|
|
2039
2046
|
hasLeaders: true,
|
|
2040
2047
|
styles: {
|
|
2048
|
+
...defaultStyles$1,
|
|
2041
2049
|
rankheading: "Rank",
|
|
2042
2050
|
usersheading: "User",
|
|
2043
2051
|
statsheading: "Points",
|