@saasquatch/mint-components 1.5.4-0 → 1.5.4
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 +3 -1
- package/dist/cjs/{ShadowViewAddon-a94a1ff9.js → ShadowViewAddon-19f45acf.js} +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mint-components.cjs.js +1 -1
- package/dist/cjs/sqm-big-stat_35.cjs.entry.js +41 -22
- package/dist/cjs/sqm-leaderboard-rank.cjs.entry.js +1 -0
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +38 -30
- package/dist/collection/components/sqm-leaderboard/Leaderboard.stories.js +34 -26
- package/dist/collection/components/sqm-leaderboard/UseLeaderboard.stories.js +1 -1
- package/dist/collection/components/sqm-leaderboard/sqm-leaderboard-view.js +2 -2
- package/dist/collection/components/sqm-leaderboard/sqm-leaderboard.js +29 -27
- package/dist/collection/components/sqm-leaderboard/useLeaderboard.js +26 -9
- package/dist/collection/components/sqm-leaderboard-rank/useLeaderboardRank.js +1 -0
- package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list.js +2 -2
- package/dist/esm/{ShadowViewAddon-87c6e4d6.js → ShadowViewAddon-2ebdb75f.js} +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mint-components.js +1 -1
- package/dist/esm/sqm-big-stat_35.entry.js +42 -23
- package/dist/esm/sqm-leaderboard-rank.entry.js +1 -0
- package/dist/esm/sqm-stencilbook.entry.js +38 -30
- package/dist/esm-es5/ShadowViewAddon-2ebdb75f.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mint-components.js +1 -1
- 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-1e72d54f.system.entry.js +1 -0
- 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-3cfe1db7.system.js +1 -0
- package/dist/mint-components/p-436da6b8.system.js +1 -1
- package/dist/mint-components/{p-3ad83621.entry.js → p-6528f752.entry.js} +1 -1
- package/dist/mint-components/{p-c195994f.js → p-6da6a80f.js} +1 -1
- package/dist/mint-components/p-e0cb936a.entry.js +159 -0
- package/dist/types/components/sqm-leaderboard/sqm-leaderboard-view.d.ts +2 -2
- package/dist/types/components/sqm-leaderboard/sqm-leaderboard.d.ts +15 -11
- package/dist/types/components/sqm-leaderboard/useLeaderboard.d.ts +2 -2
- package/dist/types/components.d.ts +30 -26
- package/grapesjs/grapesjs.js +1 -1
- package/package.json +1 -1
- package/dist/esm-es5/ShadowViewAddon-87c6e4d6.js +0 -1
- package/dist/mint-components/p-02b6ea85.system.js +0 -1
- package/dist/mint-components/p-798486ae.entry.js +0 -150
- package/dist/mint-components/p-a3686572.system.entry.js +0 -1
- package/dist/mint-components/p-adac1440.system.entry.js +0 -1
|
@@ -27,7 +27,7 @@ const sqmPortalContainerView = require('./sqm-portal-container-view-2d11ed71.js'
|
|
|
27
27
|
const sqmPortalProfileView = require('./sqm-portal-profile-view-b77382f6.js');
|
|
28
28
|
const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-042073ca.js');
|
|
29
29
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-cb3c9c2f.js');
|
|
30
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
30
|
+
const ShadowViewAddon = require('./ShadowViewAddon-19f45acf.js');
|
|
31
31
|
const sqmPortalSectionView = require('./sqm-portal-section-view-765aae4d.js');
|
|
32
32
|
|
|
33
33
|
/**
|
|
@@ -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,72 +1782,72 @@ const Leaderboard_stories = {
|
|
|
1782
1782
|
};
|
|
1783
1783
|
const users = [
|
|
1784
1784
|
{
|
|
1785
|
-
firstName: "
|
|
1786
|
-
lastInitial: "
|
|
1787
|
-
|
|
1785
|
+
firstName: "",
|
|
1786
|
+
lastInitial: "",
|
|
1787
|
+
textValue: "82",
|
|
1788
1788
|
rank: 1,
|
|
1789
1789
|
rowNumber: 1,
|
|
1790
1790
|
},
|
|
1791
1791
|
{
|
|
1792
1792
|
firstName: "MF",
|
|
1793
1793
|
lastInitial: "D",
|
|
1794
|
-
|
|
1794
|
+
textValue: "73",
|
|
1795
1795
|
rank: 2,
|
|
1796
1796
|
rowNumber: 2,
|
|
1797
1797
|
},
|
|
1798
1798
|
{
|
|
1799
1799
|
firstName: "Freddie",
|
|
1800
1800
|
lastInitial: "G",
|
|
1801
|
-
|
|
1801
|
+
textValue: "64",
|
|
1802
1802
|
rank: 3,
|
|
1803
1803
|
rowNumber: 3,
|
|
1804
1804
|
},
|
|
1805
1805
|
{
|
|
1806
1806
|
firstName: "Benny",
|
|
1807
1807
|
lastInitial: "B",
|
|
1808
|
-
|
|
1808
|
+
textValue: "55",
|
|
1809
1809
|
rank: 4,
|
|
1810
1810
|
rowNumber: 4,
|
|
1811
1811
|
},
|
|
1812
1812
|
{
|
|
1813
1813
|
firstName: "Mos",
|
|
1814
1814
|
lastInitial: "D",
|
|
1815
|
-
|
|
1815
|
+
textValue: "46",
|
|
1816
1816
|
rank: 5,
|
|
1817
1817
|
rowNumber: 5,
|
|
1818
1818
|
},
|
|
1819
1819
|
{
|
|
1820
1820
|
firstName: "Joe",
|
|
1821
1821
|
lastInitial: "S",
|
|
1822
|
-
|
|
1822
|
+
textValue: "42",
|
|
1823
1823
|
rank: 6,
|
|
1824
1824
|
rowNumber: 6,
|
|
1825
1825
|
},
|
|
1826
1826
|
{
|
|
1827
1827
|
firstName: "Zach",
|
|
1828
1828
|
lastInitial: "H",
|
|
1829
|
-
|
|
1829
|
+
textValue: "41",
|
|
1830
1830
|
rank: 7,
|
|
1831
1831
|
rowNumber: 7,
|
|
1832
1832
|
},
|
|
1833
1833
|
{
|
|
1834
1834
|
firstName: "Sarah",
|
|
1835
1835
|
lastInitial: "S",
|
|
1836
|
-
|
|
1836
|
+
textValue: "39",
|
|
1837
1837
|
rank: 8,
|
|
1838
1838
|
rowNumber: 8,
|
|
1839
1839
|
},
|
|
1840
1840
|
{
|
|
1841
1841
|
firstName: "James",
|
|
1842
1842
|
lastInitial: "",
|
|
1843
|
-
|
|
1843
|
+
textValue: "33",
|
|
1844
1844
|
rank: 9,
|
|
1845
1845
|
rowNumber: 9,
|
|
1846
1846
|
},
|
|
1847
1847
|
{
|
|
1848
1848
|
firstName: "",
|
|
1849
1849
|
lastInitial: "J",
|
|
1850
|
-
|
|
1850
|
+
textValue: "29",
|
|
1851
1851
|
rank: 10,
|
|
1852
1852
|
rowNumber: 10,
|
|
1853
1853
|
},
|
|
@@ -1883,7 +1883,7 @@ const Empty$1 = () => {
|
|
|
1883
1883
|
viewerRank: {
|
|
1884
1884
|
firstName: "Kutay",
|
|
1885
1885
|
lastInitial: "C",
|
|
1886
|
-
|
|
1886
|
+
textValue: "8",
|
|
1887
1887
|
rowNumber: 11,
|
|
1888
1888
|
rank: 23,
|
|
1889
1889
|
},
|
|
@@ -1930,7 +1930,7 @@ const One = () => {
|
|
|
1930
1930
|
{
|
|
1931
1931
|
firstName: "Viktor",
|
|
1932
1932
|
lastInitial: "V",
|
|
1933
|
-
|
|
1933
|
+
textValue: "82",
|
|
1934
1934
|
rank: 1,
|
|
1935
1935
|
rowNumber: 1,
|
|
1936
1936
|
},
|
|
@@ -1938,7 +1938,7 @@ const One = () => {
|
|
|
1938
1938
|
viewerRank: {
|
|
1939
1939
|
firstName: "Viktor",
|
|
1940
1940
|
lastInitial: "V",
|
|
1941
|
-
|
|
1941
|
+
textValue: "82",
|
|
1942
1942
|
rank: 1,
|
|
1943
1943
|
rowNumber: 1,
|
|
1944
1944
|
},
|
|
@@ -1965,29 +1965,35 @@ const Five = () => {
|
|
|
1965
1965
|
{
|
|
1966
1966
|
firstName: "Viktor",
|
|
1967
1967
|
lastInitial: "V",
|
|
1968
|
-
|
|
1968
|
+
textValue: "82",
|
|
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",
|
|
1976
|
-
|
|
1982
|
+
textValue: "64",
|
|
1977
1983
|
rank: 3,
|
|
1978
1984
|
rowNumber: 3,
|
|
1979
1985
|
},
|
|
1980
1986
|
{
|
|
1981
1987
|
firstName: "Benny",
|
|
1982
1988
|
lastInitial: "B",
|
|
1983
|
-
|
|
1989
|
+
textValue: "55",
|
|
1984
1990
|
rank: 4,
|
|
1985
1991
|
rowNumber: 4,
|
|
1986
1992
|
},
|
|
1987
1993
|
{
|
|
1988
1994
|
firstName: "Mos",
|
|
1989
1995
|
lastInitial: "D",
|
|
1990
|
-
|
|
1996
|
+
textValue: "46",
|
|
1991
1997
|
rank: 5,
|
|
1992
1998
|
rowNumber: 5,
|
|
1993
1999
|
},
|
|
@@ -1995,7 +2001,7 @@ const Five = () => {
|
|
|
1995
2001
|
viewerRank: {
|
|
1996
2002
|
firstName: "Viktor",
|
|
1997
2003
|
lastInitial: "V",
|
|
1998
|
-
|
|
2004
|
+
textValue: "82",
|
|
1999
2005
|
rank: 1,
|
|
2000
2006
|
rowNumber: 1,
|
|
2001
2007
|
},
|
|
@@ -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",
|
|
@@ -2025,7 +2032,7 @@ const ReferralLeaderboard = () => {
|
|
|
2025
2032
|
viewerRank: {
|
|
2026
2033
|
firstName: "Viktor",
|
|
2027
2034
|
lastInitial: "V",
|
|
2028
|
-
|
|
2035
|
+
textValue: "82",
|
|
2029
2036
|
rank: 1,
|
|
2030
2037
|
rowNumber: 1,
|
|
2031
2038
|
},
|
|
@@ -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",
|
|
@@ -2055,7 +2063,7 @@ const PointsLeaderboard = () => {
|
|
|
2055
2063
|
viewerRank: {
|
|
2056
2064
|
firstName: "Viktor",
|
|
2057
2065
|
lastInitial: "V",
|
|
2058
|
-
|
|
2066
|
+
textValue: "82",
|
|
2059
2067
|
rank: 1,
|
|
2060
2068
|
rowNumber: 1,
|
|
2061
2069
|
},
|
|
@@ -2083,7 +2091,7 @@ const TenWithRank = () => {
|
|
|
2083
2091
|
viewerRank: {
|
|
2084
2092
|
firstName: "Viktor",
|
|
2085
2093
|
lastInitial: "V",
|
|
2086
|
-
|
|
2094
|
+
textValue: "82",
|
|
2087
2095
|
rank: 1,
|
|
2088
2096
|
rowNumber: 1,
|
|
2089
2097
|
},
|
|
@@ -2111,7 +2119,7 @@ const ViewerOutside = () => {
|
|
|
2111
2119
|
viewerRank: {
|
|
2112
2120
|
firstName: "Kutay",
|
|
2113
2121
|
lastInitial: "C",
|
|
2114
|
-
|
|
2122
|
+
textValue: "8",
|
|
2115
2123
|
rowNumber: 11,
|
|
2116
2124
|
rank: 23,
|
|
2117
2125
|
},
|
|
@@ -2163,7 +2171,7 @@ const HideViewer = () => {
|
|
|
2163
2171
|
viewerRank: {
|
|
2164
2172
|
firstName: "Viktor",
|
|
2165
2173
|
lastInitial: "V",
|
|
2166
|
-
|
|
2174
|
+
textValue: "82",
|
|
2167
2175
|
rowNumber: 1,
|
|
2168
2176
|
rank: 1,
|
|
2169
2177
|
},
|
|
@@ -2359,7 +2367,7 @@ const Router = /*#__PURE__*/Object.freeze({
|
|
|
2359
2367
|
RouterPlayground: RouterPlayground
|
|
2360
2368
|
});
|
|
2361
2369
|
|
|
2362
|
-
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 |";
|
|
2370
|
+
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 |";
|
|
2363
2371
|
|
|
2364
2372
|
const LeaderboardRank_stories = {
|
|
2365
2373
|
title: "Components/Leaderboard Rank",
|
|
@@ -3055,7 +3063,7 @@ const FiveResults = createHookStory(() => {
|
|
|
3055
3063
|
return [
|
|
3056
3064
|
View$1({
|
|
3057
3065
|
leaderboardType: "topStartedReferrers",
|
|
3058
|
-
|
|
3066
|
+
maxRows: 5,
|
|
3059
3067
|
statsheading: "Referrals",
|
|
3060
3068
|
}),
|
|
3061
3069
|
];
|
|
@@ -9,72 +9,72 @@ export default {
|
|
|
9
9
|
};
|
|
10
10
|
const users = [
|
|
11
11
|
{
|
|
12
|
-
firstName: "
|
|
13
|
-
lastInitial: "
|
|
14
|
-
|
|
12
|
+
firstName: "",
|
|
13
|
+
lastInitial: "",
|
|
14
|
+
textValue: "82",
|
|
15
15
|
rank: 1,
|
|
16
16
|
rowNumber: 1,
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
firstName: "MF",
|
|
20
20
|
lastInitial: "D",
|
|
21
|
-
|
|
21
|
+
textValue: "73",
|
|
22
22
|
rank: 2,
|
|
23
23
|
rowNumber: 2,
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
firstName: "Freddie",
|
|
27
27
|
lastInitial: "G",
|
|
28
|
-
|
|
28
|
+
textValue: "64",
|
|
29
29
|
rank: 3,
|
|
30
30
|
rowNumber: 3,
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
firstName: "Benny",
|
|
34
34
|
lastInitial: "B",
|
|
35
|
-
|
|
35
|
+
textValue: "55",
|
|
36
36
|
rank: 4,
|
|
37
37
|
rowNumber: 4,
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
firstName: "Mos",
|
|
41
41
|
lastInitial: "D",
|
|
42
|
-
|
|
42
|
+
textValue: "46",
|
|
43
43
|
rank: 5,
|
|
44
44
|
rowNumber: 5,
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
firstName: "Joe",
|
|
48
48
|
lastInitial: "S",
|
|
49
|
-
|
|
49
|
+
textValue: "42",
|
|
50
50
|
rank: 6,
|
|
51
51
|
rowNumber: 6,
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
firstName: "Zach",
|
|
55
55
|
lastInitial: "H",
|
|
56
|
-
|
|
56
|
+
textValue: "41",
|
|
57
57
|
rank: 7,
|
|
58
58
|
rowNumber: 7,
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
61
|
firstName: "Sarah",
|
|
62
62
|
lastInitial: "S",
|
|
63
|
-
|
|
63
|
+
textValue: "39",
|
|
64
64
|
rank: 8,
|
|
65
65
|
rowNumber: 8,
|
|
66
66
|
},
|
|
67
67
|
{
|
|
68
68
|
firstName: "James",
|
|
69
69
|
lastInitial: "",
|
|
70
|
-
|
|
70
|
+
textValue: "33",
|
|
71
71
|
rank: 9,
|
|
72
72
|
rowNumber: 9,
|
|
73
73
|
},
|
|
74
74
|
{
|
|
75
75
|
firstName: "",
|
|
76
76
|
lastInitial: "J",
|
|
77
|
-
|
|
77
|
+
textValue: "29",
|
|
78
78
|
rank: 10,
|
|
79
79
|
rowNumber: 10,
|
|
80
80
|
},
|
|
@@ -110,7 +110,7 @@ export const Empty = () => {
|
|
|
110
110
|
viewerRank: {
|
|
111
111
|
firstName: "Kutay",
|
|
112
112
|
lastInitial: "C",
|
|
113
|
-
|
|
113
|
+
textValue: "8",
|
|
114
114
|
rowNumber: 11,
|
|
115
115
|
rank: 23,
|
|
116
116
|
},
|
|
@@ -157,7 +157,7 @@ export const One = () => {
|
|
|
157
157
|
{
|
|
158
158
|
firstName: "Viktor",
|
|
159
159
|
lastInitial: "V",
|
|
160
|
-
|
|
160
|
+
textValue: "82",
|
|
161
161
|
rank: 1,
|
|
162
162
|
rowNumber: 1,
|
|
163
163
|
},
|
|
@@ -165,7 +165,7 @@ export const One = () => {
|
|
|
165
165
|
viewerRank: {
|
|
166
166
|
firstName: "Viktor",
|
|
167
167
|
lastInitial: "V",
|
|
168
|
-
|
|
168
|
+
textValue: "82",
|
|
169
169
|
rank: 1,
|
|
170
170
|
rowNumber: 1,
|
|
171
171
|
},
|
|
@@ -192,29 +192,35 @@ export const Five = () => {
|
|
|
192
192
|
{
|
|
193
193
|
firstName: "Viktor",
|
|
194
194
|
lastInitial: "V",
|
|
195
|
-
|
|
195
|
+
textValue: "82",
|
|
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",
|
|
203
|
-
|
|
209
|
+
textValue: "64",
|
|
204
210
|
rank: 3,
|
|
205
211
|
rowNumber: 3,
|
|
206
212
|
},
|
|
207
213
|
{
|
|
208
214
|
firstName: "Benny",
|
|
209
215
|
lastInitial: "B",
|
|
210
|
-
|
|
216
|
+
textValue: "55",
|
|
211
217
|
rank: 4,
|
|
212
218
|
rowNumber: 4,
|
|
213
219
|
},
|
|
214
220
|
{
|
|
215
221
|
firstName: "Mos",
|
|
216
222
|
lastInitial: "D",
|
|
217
|
-
|
|
223
|
+
textValue: "46",
|
|
218
224
|
rank: 5,
|
|
219
225
|
rowNumber: 5,
|
|
220
226
|
},
|
|
@@ -222,7 +228,7 @@ export const Five = () => {
|
|
|
222
228
|
viewerRank: {
|
|
223
229
|
firstName: "Viktor",
|
|
224
230
|
lastInitial: "V",
|
|
225
|
-
|
|
231
|
+
textValue: "82",
|
|
226
232
|
rank: 1,
|
|
227
233
|
rowNumber: 1,
|
|
228
234
|
},
|
|
@@ -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",
|
|
@@ -252,7 +259,7 @@ export const ReferralLeaderboard = () => {
|
|
|
252
259
|
viewerRank: {
|
|
253
260
|
firstName: "Viktor",
|
|
254
261
|
lastInitial: "V",
|
|
255
|
-
|
|
262
|
+
textValue: "82",
|
|
256
263
|
rank: 1,
|
|
257
264
|
rowNumber: 1,
|
|
258
265
|
},
|
|
@@ -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",
|
|
@@ -282,7 +290,7 @@ export const PointsLeaderboard = () => {
|
|
|
282
290
|
viewerRank: {
|
|
283
291
|
firstName: "Viktor",
|
|
284
292
|
lastInitial: "V",
|
|
285
|
-
|
|
293
|
+
textValue: "82",
|
|
286
294
|
rank: 1,
|
|
287
295
|
rowNumber: 1,
|
|
288
296
|
},
|
|
@@ -310,7 +318,7 @@ export const TenWithRank = () => {
|
|
|
310
318
|
viewerRank: {
|
|
311
319
|
firstName: "Viktor",
|
|
312
320
|
lastInitial: "V",
|
|
313
|
-
|
|
321
|
+
textValue: "82",
|
|
314
322
|
rank: 1,
|
|
315
323
|
rowNumber: 1,
|
|
316
324
|
},
|
|
@@ -338,7 +346,7 @@ export const ViewerOutside = () => {
|
|
|
338
346
|
viewerRank: {
|
|
339
347
|
firstName: "Kutay",
|
|
340
348
|
lastInitial: "C",
|
|
341
|
-
|
|
349
|
+
textValue: "8",
|
|
342
350
|
rowNumber: 11,
|
|
343
351
|
rank: 23,
|
|
344
352
|
},
|
|
@@ -390,7 +398,7 @@ export const HideViewer = () => {
|
|
|
390
398
|
viewerRank: {
|
|
391
399
|
firstName: "Viktor",
|
|
392
400
|
lastInitial: "V",
|
|
393
|
-
|
|
401
|
+
textValue: "82",
|
|
394
402
|
rowNumber: 1,
|
|
395
403
|
rank: 1,
|
|
396
404
|
},
|
|
@@ -84,7 +84,7 @@ export function LeaderboardView(props) {
|
|
|
84
84
|
: user.firstName || user.lastInitial
|
|
85
85
|
? user.firstName || user.lastInitial
|
|
86
86
|
: styles.anonymousUser),
|
|
87
|
-
h("td", { class: "Score" }, user.
|
|
87
|
+
h("td", { class: "Score" }, user.textValue)));
|
|
88
88
|
}),
|
|
89
89
|
!userSeenFlag && !styles.hideViewer && (h("tr", null,
|
|
90
90
|
h("td", { colSpan: 100, class: "ellipses" },
|
|
@@ -97,5 +97,5 @@ export function LeaderboardView(props) {
|
|
|
97
97
|
: ((_g = data.viewerRank) === null || _g === void 0 ? void 0 : _g.firstName) || ((_h = data.viewerRank) === null || _h === void 0 ? void 0 : _h.lastInitial)
|
|
98
98
|
? ((_j = data.viewerRank) === null || _j === void 0 ? void 0 : _j.firstName) || ((_k = data.viewerRank) === null || _k === void 0 ? void 0 : _k.lastInitial)
|
|
99
99
|
: styles.anonymousUser),
|
|
100
|
-
h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.
|
|
100
|
+
h("td", { class: "Score" }, ((_l = data.viewerRank) === null || _l === void 0 ? void 0 : _l.textValue) || "0"))))));
|
|
101
101
|
}
|