@saasquatch/mint-components 1.5.0-113 → 1.5.0-114

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

@@ -11,7 +11,7 @@ require('./extends-08099afd.js');
 require('./cjs-1066ec21.js');
 require('./mixins-7b7c59fe.js');
 const JSS = require('./JSS-c65a40f1.js');
-const GenericTableView = require('./GenericTableView-f947b749.js');
+const GenericTableView = require('./GenericTableView-a69fddb5.js');
 const luxon = require('./luxon-59ca7d19.js');
 require('./utils-01dbfd4a.js');
 require('./sqm-text-span-view-f101dedf.js');
@@ -29,7 +29,7 @@ const sqmPortalProfileView = require('./sqm-portal-profile-view-72c40619.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-1fdc957e.js');
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-4c78e231.js');
 const sqmStatContainerView = require('./sqm-stat-container-view-8aaf6cb8.js');
-const ShadowViewAddon = require('./ShadowViewAddon-79dd6c07.js');
+const ShadowViewAddon = require('./ShadowViewAddon-b0dc2cbf.js');
 const sqmPortalSectionView = require('./sqm-portal-section-view-186a5f7e.js');
 
 /**
@@ -1457,11 +1457,11 @@ const ShareButton_stories = {
   },
 };
 const WithIconPrefix = () => {
-  const props = { medium: "whatsapp", iconslot: "prefix" };
+  const props = { medium: "whatsapp", iconSlot: "prefix" };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconSuffix = () => {
-  const props = { medium: "whatsapp", iconslot: "suffix" };
+  const props = { medium: "whatsapp", iconSlot: "suffix" };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithIconOverride = () => {
@@ -1479,15 +1479,15 @@ const TextStyle = () => {
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutIcon = () => {
-  const props = { medium: "facebook", hideicon: true };
+  const props = { medium: "facebook", hideIcon: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithoutText = () => {
-  const props = { medium: "facebook", hidetext: true };
+  const props = { medium: "facebook", hideText: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const TextStyleWithoutIcon = () => {
-  const props = { medium: "facebook", type: "text", hideicon: true };
+  const props = { medium: "facebook", type: "text", hideIcon: true };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Share");
 };
 const WithCustomColors = () => {
@@ -1496,7 +1496,7 @@ const WithCustomColors = () => {
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
-    iconslot: "prefix",
+    iconSlot: "prefix",
   };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -1504,8 +1504,8 @@ const WithCustomBorderRadius = () => {
   const props = {
     medium: "facebook",
     type: "text",
-    borderradius: 8,
-    iconslot: "prefix",
+    borderRadius: 8,
+    iconSlot: "prefix",
   };
   return index.h(ShadowViewAddon.ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -1760,7 +1760,7 @@ const BigStat = /*#__PURE__*/Object.freeze({
   InvalidStatValue: InvalidStatValue
 });
 
-const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard displays the top referrers along with their scores\r\n\r\n\t@motivating\r\n\tScenario Outline: The leaderboard can be for referrals started or converted\r\n\t\tGiven a leaderboard is configured with \"leaderboard-type\" <value>\r\n\t\tAnd a user with started referrals\r\n\t\tAnd a user with converted referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen then only <referralType> referrals are counted in the 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\t\t\t|                       | started      |\r\n\r\n\t@motivating\r\n\tScenario: If there are any users with referrals the leaderboard is shown\r\n\t\tGiven there is aleast one user\r\n\t\tThen the leaderboard displays up to 10 top referrers\r\n\t\tAnd leaderboard is ordered by the referrers score in descending ordered\r\n\t\tAnd in the case of a tie the rows are ordered alphabetically\r\n\r\n\t@motivating\r\n\tScenario: The leaderboard can filter referrals within an time interval\r\n\t\tGiven a leaderboard is configured with \"interval\" \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tAnd a user with referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen only referrals from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\" are counted in the leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Rank Type can be configured\r\n\t\tGiven a leaderboard is configured with \"rank-type\" <value>\r\n\t\tAnd a user\r\n\t\tWhen they view 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\t\t\t|           | row number |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: An empty state is displayed if no users\r\n\t\tGiven a user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view 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 user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view 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\tAnd a user\r\n\t\tWhen they view 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: 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\tAnd a user\r\n\t\tWhen they view 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 referrers see their leaderboard row highlighted\r\n\t\tGiven a user\r\n\t\tAnd they are in the top 10 referrers\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 referrers can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user\r\n\t\tAnd they <mayHmayHaveReferralave>\r\n\t\tAnd they are not in the top 10 referrers\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 referrers\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 referral count\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHaveReferral      | value | maySee    | maySeeRank           |\r\n\t\t\t| have referrals       | true  | see       | see their rank       |\r\n\t\t\t| don't have referrals | true  | see       | don't see their rank |\r\n\t\t\t|                      | false | don't see | don't see their rank |\r\n\t\t\t| have referrals       |       | 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\"";
+const scenario$4 = "@owner:noah\r\n@author:noah\r\nFeature: Leaderboard\r\n\r\n\tThe leaderboard displays the top referrers along with their scores\r\n\r\n\t@motivating\r\n\tScenario Outline: The leaderboard can be for referrals started or converted\r\n\t\tGiven a leaderboard is configured with \"leaderboard-type\" <value>\r\n\t\tAnd a user with started referrals\r\n\t\tAnd a user with converted referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen then only <referralType> referrals are counted in the 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\t\t\t|                       | started      |\r\n\r\n\t@motivating\r\n\tScenario: If there are any users with referrals the leaderboard is shown\r\n\t\tGiven there is aleast one user\r\n\t\tThen the leaderboard displays up to 10 top referrers\r\n\t\tAnd leaderboard is ordered by the referrers score in descending ordered\r\n\r\n\t@motivating\r\n\tScenario: The leaderboard can filter referrals within an time interval\r\n\t\tGiven a leaderboard is configured with \"interval\" \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\"\r\n\t\tAnd a user with referrals\r\n\t\tWhen they view the leaderboard\r\n\t\tThen only referrals from within \"2021-11-02T07:00:00.000Z/2021-11-07T07:00:00.000Z\" are counted in the leaderboard\r\n\r\n\t@motivating\r\n\tScenario Outline: Rank Type can be configured\r\n\t\tGiven a leaderboard is configured with \"rank-type\" <value>\r\n\t\tAnd a user\r\n\t\tWhen they view 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\t\t\t|           | row number |\r\n\r\n\t@minutiae\r\n\t@ui\r\n\tScenario: An empty state is displayed if no users\r\n\t\tGiven a user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view 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 user\r\n\t\tBut no users have made any referrals\r\n\t\tWhen they view 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\tAnd a user\r\n\t\tWhen they view 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: 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\tAnd a user\r\n\t\tWhen they view 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 referrers see their leaderboard row highlighted\r\n\t\tGiven a user\r\n\t\tAnd they are in the top 10 referrers\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 referrers can see their progress at the bottom of the leaderboard\r\n\t\tGiven a user\r\n\t\tAnd they <mayHmayHaveReferralave>\r\n\t\tAnd they are not in the top 10 referrers\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 referrers\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 referral count\r\n\t\tAnd they <maySeeRank>\r\n\t\tExamples:\r\n\t\t\t| mayHaveReferral      | value | maySee    | maySeeRank           |\r\n\t\t\t| have referrals       | true  | see       | see their rank       |\r\n\t\t\t| don't have referrals | true  | see       | don't see their rank |\r\n\t\t\t|                      | false | don't see | don't see their rank |\r\n\t\t\t| have referrals       |       | 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\"";
 
 const Leaderboard_stories = {
   title: "Components/Leaderboard",
@@ -2665,7 +2665,7 @@ function setupGraphQL$3() {
   }, []);
 }
 const View = (statType, format) => {
-  console.log(`View("${statType}") - CALLED`);
+  //   console.log(`View("${statType}") - CALLED`);
   setupGraphQL$3();
   return (index.h("div", null,
     index.h("b", null, "Stat format:"),
@@ -2873,7 +2873,7 @@ const View$1 = (overrideProps) => {
     ...overrideProps,
   };
   const { leaderboardType, rankType } = props;
-  console.log(`View("${leaderboardType}") - CALLED`, { ...props });
+  //   console.log(`View("${leaderboardType}") - CALLED`, { ...props });
   return (index.h("div", { style: { marginBottom: "20px" } },
     index.h("sqm-divided-layout", { direction: "row" },
       index.h("div", { style: { padding: "10px" } },
@@ -2955,7 +2955,7 @@ const DemoHookEmpty = createHookStory(() => {
           anonymousUser: "Anonymous User",
           showRank: true,
         },
-      }
+      },
     } },
     index.h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
 });
@@ -5523,7 +5523,7 @@ const FullRewardsTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        hiddenColumns: "",
+        hiddenColumns: "1",
         mdBreakpoint: 899,
         smBreakpoint: 599,
       },
@@ -5805,7 +5805,7 @@ function cartesian(...args) {
 
 const scenarioTaskCard = "@author:derek\r\n@owner:kutay\r\nFeature: Task Card\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: A header, body title and a CTA button are always displayed\r\n\t\tGiven the Task Card is configured with the following props\r\n\t\t\t| prop         | value             |\r\n\t\t\t| rewardAmount | \"40\"              |\r\n\t\t\t| rewardUnit   | \"Points\"          |\r\n\t\t\t| cardTitle    | Complete a survey |\r\n\t\t\t| buttonText   | Take Survey       |\r\n\t\tWhen a user views the Task Card\r\n\t\tThen they see \"40 Points\" as the heading\r\n\t\tAnd the \"40\" is bolded\r\n\t\tAnd they see \"Complete a survey\" bolded in the body\r\n\t\tAnd a details icon in the top right hand corner\r\n\t\tAnd a button with text \"Take Survey\" in the bottom right hand corner\r\n\t\tWhen they click the button\r\n\t\tThen they are redirected to \"example.com\" in a new window\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: A Task Card description can be included but is not required\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <descriptionPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tThen they <maySee> a chevron icon in the top right\r\n\t\tWhen they attempt to click the chevron\r\n\t\tThen they <maySee> the card description\r\n\t\tExamples:\r\n\t\t\t| descriptionPropValue             | maySee    |\r\n\t\t\t| This is my task card description | see       |\r\n\t\t\t|                                  | don't see |\r\n\r\n\t@motivating\r\n\tScenario Outline: CTA links can open in a new tab or the same tab\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <openNewTabPropValue>\r\n\t\tWhen a user views the Task card\r\n\t\tAnd they click on the CTA\r\n\t\tThen they are redirected to the CTA link in <tab>\r\n\t\tExamples:\r\n\t\t\t| openNewTabPropValue | tab          |\r\n\t\t\t| true                | a new tab    |\r\n\t\t\t| false               | the same tab |\r\n\t\t\t| N/A                 | the same tab |\r\n\r\n\t@minutae\r\n\t@ui\r\n\tScenario: A loading state is displayed while the Task Card is loading\r\n\t\tGiven a Task Card component\r\n\t\tWhen a user views the Task Card\r\n\t\tThen a loading state is displayed\r\n\t\tWhen the Task Card has loaded\r\n\t\tThen the loading state disapears\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The Progress Bar can be shown or hidden but is hidden by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <showProgressBarPropValue>\r\n\t\tWhen a user views the Task Card\r\n\t\tThen the progress bar <mayBe> displayed\r\n\t\tExamples:\r\n\t\t\t| showProgressBarPropValue | mayBe |\r\n\t\t\t| true                     | is    |\r\n\t\t\t| false                    | isn't |\r\n\t\t\t| N/A                      | isn't |\r\n\r\n\t@motivating\r\n\tScenario: Clicking the CTA Button can trigger an event to be sent and refresh the widget\r\n\t\tGiven a Task card\r\n\t\tAnd it is configured to send an \"test\" event\r\n\t\tWhen a user views the Task card\r\n\t\tAnd clicks on the CTA\r\n\t\tThen a \"test\" event is sent to SSQT on the users behalf\r\n\t\tAnd the contents of the widget the card is dislayed within are refreshed\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Tasks can be repeatable or one-time only but are one-time only by default\r\n\t\tGiven a Task Card\r\n\t\tAnd it has <repeatablePropValue>\r\n\t\tAnd a user who has already completed the task\r\n\t\tWhen they view the Task Card\r\n\t\tThen they see a brand colour checkmark icon beside the card heading\r\n\t\tAnd the card <mayBe> brand colour\r\n\t\tAnd the CTA button <mayBe> disabled\r\n\t\tAnd the CTA button <mayBe> grey\r\n\t\tExamples:\r\n\t\t\t| repeatablePropValue | mayBe |\r\n\t\t\t| true                | isn't |\r\n\t\t\t| false               | is    |\r\n\t\t\t| N/A                 | is    |\r\n\r\n\t@motivating\r\n\tScenario Outline: Display duration hides or shows a task\r\n\t\tGiven a Task Card\r\n\t\tAnd it has a \"display-duration\" interval\r\n\t\tWhen a user views the Card on <day>\r\n\t\tThen card <mayBeHidden>\r\n\t\tExamples:\r\n\t\t\t| day                       | mayBeHidden   |\r\n\t\t\t| a day before the interval | is hidden     |\r\n\t\t\t| a day during the interval | is not hidden |\r\n\t\t\t| a day after the interval  | is hidden     |\r\n\r\n\t@motivating\r\n\tScenario: Task Expiries can be configured and disable the CTA after the expiry\r\n\t\tGiven a Task Card\r\n\t\tAnd it has an \"reward-duration\" interval\r\n\t\tWhen a user views the card on <day>\r\n\t\tThen the card <mayBeDisabled>\r\n\t\tAnd it <mayHaveAlert>\r\n\t\tAnd it <mayHaveExpiryText> on the bottom left hand side of the card\r\n\t\tExamples:\r\n\t\t\t| day                              | mayBeDisabled  | mayHaveAlert                                                      | mayHaveExpiryText                                   |\r\n\t\t\t| a day before the expiry interval | is disabled    | has alert stating the month, date, year and time the task starts  | doesn't have expiry text                            |\r\n\t\t\t| a day during the expiry interval | isn't disabled | doesn't have an alert                                             | has the month, date, year and time the task expires |\r\n\t\t\t| a day after the expiry interval  | is disabled    | has alert stating the month, date, year and time the task expired | doesn't have expiry text                            |\r\n\r\n\t@motivating\r\n\tScenario Outline: Task Card dates support localization\r\n\t\tGiven a Task Card\r\n\t\tAnd it's configured with a expiry duration interval\r\n\t\tWhen a user with <locale> views the task card <atTime>\r\n\t\tThen they <seeDate> translated for <locale>\r\n\t\tExamples:\r\n\t\t\t| atTime              | locale | seeDate         |\r\n\t\t\t| before the interval | en     | Task Start Date |\r\n\t\t\t| during the interval | en     | Task End Date   |\r\n\t\t\t| after the interval  | en     | Task Ended Date |\r\n\t\t\t| before the interval | fr     | Task Start Date |\r\n\t\t\t| during the interval | fr     | Task End Date   |\r\n\t\t\t| after the interval  | fr     | Task Ended Date |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: A task completion count is displayed for repeatable tasks\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for a repeatable task\r\n\t\tAnd has it has <goalValue>\r\n\t\tAnd a user with <userGoalProgress>\r\n\t\tWhen the user views the task card\r\n\t\tThen they see a repeat icon\r\n\t\tAnd the <text> in the bottom left hand corner\r\n\t\tAnd the <text> is brand colour\r\n\t\tExamples:\r\n\t\t\t| goalValue | userGoalProgress | text              |\r\n\t\t\t| 2         | 0                | Completed 0 times |\r\n\t\t\t| 2         | 1                | Completed 0 times |\r\n\t\t\t| 2         | 2                | Completed 1 times |\r\n\t\t\t| 2         | 4                | Completed 2 times |\r\n\r\n\t@motivating\r\n\tScenario Outline: The source of a user's progress can be a custom field or a program goal\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured <progressSourcePath>\r\n\t\tWhen a user views the Task card\r\n\t\tThen the value at <progressSourcePath> is used to benchmark their progress against the \"Goal Completion Count\"\r\n\t\tExamples:\r\n\t\t\t| progressSourcePath                               |\r\n\t\t\t| /customFields/activityCount                      |\r\n\t\t\t| /customFields/purchaseTotal                      |\r\n\t\t\t| /programGoals/count%2FComment-on-Article         |\r\n\t\t\t| /programGoals/count/Referral-Started%2Freferrals |\r\n\r\n\t@motivating\r\n\tScenario Outline: The users completion of a goal is calculated by the Goal Completion Number\r\n\t\tGiven a Task Card\r\n\t\tAnd it is configured for <goalValue>\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen they are shown to have <progressValue> towards <goalValue>\r\n\t\tWhen their progress grows larger than <goalValue>\r\n\t\tThen the task is marked as completed\r\n\t\tExamples:\r\n\t\t\t| goalValue | progressValue |\r\n\t\t\t| 1         | 0             |\r\n\t\t\t| 10        | 9             |\r\n\t\t\t| 5         | 2             |\r\n\r\n\t@motivating\r\n\tScenario: The Goal Completion Number defaults to 1\r\n\t\tGiven a Task Card without a configured \"goal\" value\r\n\t\tAnd a user who has <progressValue>\r\n\t\tWhen they view the Task Card\r\n\t\tThen it <mayBe> marked as completed\r\n\t\tExamples:\r\n\t\t\t| progressValue | mayBe |\r\n\t\t\t| 0             | isn't |\r\n\t\t\t| 1             | is    |\r\n\t\t\t| 2             | is    |";
 
-const scenarioProgressBar = "@author:kutay\r\n@owner:kutay\r\nFeature: Task Card Progress Bar\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\r\n\t\tGiven a Task Card component\r\n\t\tAnd the users progress is <progress>\r\n\t\tAnd the task goal is \"500\"\r\n\t\tAnd the task is not repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"500\" with <unit> below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | unit | color |\r\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"5\" below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | color |\r\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"500\"\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\r\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\r\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the first <icon1> is <color1>\r\n\t\tAnd the second <icon2> is <color2>\r\n\t\tAnd the third <icon3> is <color3>\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\r\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
+const scenarioProgressBar = "@author:kutay\r\n@owner:kutay\r\nFeature: The progress bar can be shown as a continuous line with progress and end goal. \r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar displays a continuous bar with the goal represented by a present\r\n\t\tGiven a Task Card component\r\n\t\tAnd the users progress is <progress>\r\n\t\tAnd the task goal is \"500\"\r\n\t\tAnd the task is not repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> on the right\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"500\" with <unit> below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | unit | color |\r\n\t\t\t| 0        | ●――――――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 100      | ―――●―――――――――――――――🎁 | $    | no    |\r\n\t\t\t| 500      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 650      | ―――――――――――――――――――🎁 | $    | yes   |\r\n\t\t\t| 1200     | ―――――――――――――――――――🎁 | $    | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The progress bar can be displayed with steps instead of a continuous line\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tAnd the gift icon has <color>\r\n\t\tAnd the gift icon shows \"5\" below\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar           | color |\r\n\t\t\t| 0        | ―――○―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 1        | ―――●―――○―――○―――○―――🎁 | no    |\r\n\t\t\t| 5        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 7        | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\t\t\t| 12       | ―――●―――●―――●―――●―――🎁 | yes   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The continuous progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"500\"\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> shows <progress> with <unit> to the right\r\n\t\tAnd the first <icon1> is <color1> with <text1> displayed below\r\n\t\tAnd the second <icon2> is <color2> with <text2> displayed below\r\n\t\tAnd the third <icon3> is <color3> with <text3> displayed below\r\n\t\tAnd the circle on the progress bar is brand colour\r\n\t\tAnd the line behind the circle is brand colour\r\n\t\tAnd the line infront of the circle is grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar          | unit | icon1 | color1   | text1 | icon2 | color2    | text 2 | icon3 | color3    | text 3 |\r\n\t\t\t| 250      | ――――●――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | greyscale | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 500      | ―――――――――🎁―――――――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 750      | ―――――――――🎁―――●―――🎁 | $    | NA    | NA       | NA    | gift  | colorful  | 500    | gift  | greyscale | 1000   |\r\n\t\t\t| 1000     | 🎁―――――――🎁―――――――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\t\t\t| 1250     | 🎁―――――――🎁―――●―――🎁 | $    | gift  | colorful | 500   | gift  | colorful  | 1000   | gift  | greyscale | 1500   |\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: The stepped progress bar will continue to progress for repeatable rewards\r\n\t\tGiven a Task Card component\r\n\t\tAnd the user progress is <progress>\r\n\t\tAnd the goal is \"5\"\r\n\t\tAnd steps are enabled\r\n\t\tAnd it is repeatable\r\n\t\tThen I have <progressBar>\r\n\t\tAnd the <progressBar> has incrementing steps up to \"5\" in increments of 1\r\n\t\tAnd the first <icon1> is <color1>\r\n\t\tAnd the second <icon2> is <color2>\r\n\t\tAnd the third <icon3> is <color3>\r\n\t\tAnd the steps behind the users progress are brand colour\r\n\t\tAnd the steps infront of the users progress are grey\r\n\t\tExamples:\r\n\t\t\t| progress | progressBar              | icon1 | color1   | icon2 | color2    | icon3 | color3    |\r\n\t\t\t| 0        | ―――○―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 1        | ―――●―○―○―○―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | greyscale | gift  | greyscale |\r\n\t\t\t| 5        | ―――●―●―●―●―🎁―○―○―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 7        | ―――●―●―●―●―🎁―●―●―○―○―🎁 | NA    | NA       | gift  | colorful  | gift  | greyscale |\r\n\t\t\t| 12       | 🎁―●―●―●―●―🎁―●―●―○―○―🎁 | gift  | colorful | gift  | colorful  | gift  | greyscale |";
 
 const ResizerStylesheet = `
 
@@ -10369,7 +10369,7 @@ const rewardsData$1 = {
   id: "61c100117a82a376d8804166",
   type: "CREDIT",
   value: 19,
-  unit: "TESTUNIT",
+  unit: "Points",
   name: null,
   dateGiven: 1640038417468,
   meta: { message: "***CUSTOMER NOTE MESSAGE***" },
@@ -10401,7 +10401,7 @@ const RewardsCellCreditSingle = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...singleRedeemed } }));
 };
 const RewardsCellCreditFull = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "19 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1 }, availableText: "{availableAmount} remaining" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -10410,16 +10410,16 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditPartial = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "10 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial }, availableText: "{availableAmount} remaining" }));
 };
 const RewardsCellCreditCancelled = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...cancelled }, redeemedText: "0 Points redeemed" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...cancelled }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 const RewardsCellCreditExpired = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...expired }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 const RewardsCellCreditPending = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...partial, ...pending }, availableText: "9 Points redeemed" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...pending }, availableText: "{availableAmount} remaining" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -10429,7 +10429,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 const RewardsCellCreditRedeemed = () => {
-  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "0 Points remaining" }));
+  return (index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...empty }, availableText: "{availableAmount} remaining" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Point",
@@ -10441,7 +10441,7 @@ const longName = {
 };
 const RewardsCellCreditLong = () => {
   return (index.h("div", { style: { maxWidth: "222px" } },
-    index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web remaining" })));
+    index.h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData$1, ...longName }, availableText: "{availableAmount} remaining" })));
 };
 const RewardsCellNonCredit = () => {
   return (index.h("sqm-rewards-table-reward-cell", { reward: {
@@ -10456,7 +10456,7 @@ const RewardsCellFueltank = () => {
       type: "FUELTANK",
       prettyValue: "Fueltank Reward",
       fuelTankCode: "AFUELTANKCODE",
-    }, fueltankText: "Your code:", copyText: "Copied" }));
+    }, copyText: "Copied" }));
 };
 const RewardsCellFueltankLong = () => {
   return (index.h("div", { style: { maxWidth: "222px" } },
@@ -10465,7 +10465,7 @@ const RewardsCellFueltankLong = () => {
         type: "FUELTANK",
         prettyValue: "Long Fueltank Reward",
         fuelTankCode: "AFUELTANKCODE123456789123456789123456789123456789",
-      }, fueltankText: "Your code:", copyText: "Copied" })));
+      }, copyText: "Copied" })));
 };
 const SourceCellManual = () => {
   return (index.h("sqm-rewards-table-source-cell", { reward: rewardsData$1, rewardSourceText: "Manual" }));
@@ -10660,7 +10660,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
   EmptyCell: EmptyCell$2
 });
 
-const scenario$p = "@owner:sam\r\n@author:sam\r\nFeature: Rewards Table\r\n\r\n    Shows a list of rewards as a table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no rewards\r\n        Given a user with rewards\r\n        When they view the reward table\r\n        Then no rewards are displayed\r\n        And they see an image with a user icon\r\n        And \"View your rewards\" in bold\r\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no rewards\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward table\r\n        Then they see the custom empty state\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: The loading state is shown while rewards are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\r\n        Given the user has <number of rewards>\r\n        And the table is configured to show <page limit> rewards per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of rewards\r\n        And the pagination button to go to the previous page is disabled on the first page of rewards\r\n        Examples:\r\n            | number of rewards | page limit | number of pages |\r\n            | 0                 | 4          | 1               |\r\n            | 1                 | 4          | 1               |\r\n            | 3                 | 4          | 1               |\r\n            | 5                 | 4          | 2               |\r\n            | 42                | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"899px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"634px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the reward table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile\r\n        Given a reward table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with rewards\r\n        When they view the reward table\r\n        And their window size is below the tablet breakpoint\r\n        Then reward cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only rewards from the program with \"program-id\" are shown\r\n\r\n    @landmine\r\n    Scenario: Classic program rewards can't be filtered for\r\n        There is no easy way for the backend to filter for \"classic\" programs,\r\n        since it only allows filtering my \"programId: null\"\r\n        and that returns manual rewards and reward exchanges\r\n\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then there is an error shown\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"show-labels\" set to false\r\n        Then the table is displayed without column headings";
+const scenario$p = "@owner:sam\r\n@author:sam\r\nFeature: Rewards Table\r\n\r\n    Shows a list of rewards as a table\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The empty state is shown if there are no rewards\r\n        Given a user with rewards\r\n        When they view the reward table\r\n        Then no rewards are displayed\r\n        And they see an image with a user icon\r\n        And \"View your rewards\" in bold\r\n        And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\r\n        And the pagination buttons are disabled\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: A custom empty state can be provided\r\n        Given a user with no rewards\r\n        And a custom empty state has been supplied in the \"empty\" slot\r\n        When they view the reward table\r\n        Then they see the custom empty state\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: The loading state is shown while rewards are loading\r\n        Given the table is loading\r\n        Then the loading state is shown in the table\r\n        And a custom loading state can be supplied in the \"loading\" slot\r\n        And the pagination buttons are disabled\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\r\n        Given the user has <number of rewards>\r\n        And the table is configured to show <page limit> rewards per page\r\n        Then the table will have <number of pages> page(s)\r\n        And pagination buttons will allow users to navigate between pages\r\n        And the pagination button to go to the next page is disabled on the last page of rewards\r\n        And the pagination button to go to the previous page is disabled on the first page of rewards\r\n        Examples:\r\n            | number of rewards | page limit | number of pages |\r\n            | 0                 | 4          | 1               |\r\n            | 1                 | 4          | 1               |\r\n            | 3                 | 4          | 1               |\r\n            | 5                 | 4          | 2               |\r\n            | 42                | 4          | 11              |\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: The table converts to a card view on tablet and mobile window sizes\r\n        Given a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"899px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"634px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario: Table and Mobile beakpoints can be configured\r\n        Given the reward table has been configured with the following props\r\n            | prop         | value |\r\n            | smBreakpoint | 599   |\r\n            | mdBreakpoint | 799   |\r\n        And a user with rewards\r\n        When they view the table\r\n        And their window size is smaller than \"799px\"\r\n        Then rewards are displayed as cards\r\n        And they are in two columns\r\n        When their window size is smaller than \"599px\"\r\n        Then the rewards are displayed as cards in a singular column\r\n\r\n    @motivating\r\n    @ui\r\n    Scenario Outline: By default the first column heading is hidden in mobile\r\n        Given a reward table with 4 columns\r\n        And prop \"hidden-columns\" with <hideColumnValue>\r\n        And a user with rewards\r\n        When they view the reward table\r\n        And their window size is below the tablet breakpoint\r\n        Then reward cards are displayed\r\n        And the titles of <columnsArehidden> within the card\r\n        Examples:\r\n            | hideColumnValue | columnsArehidden                    |\r\n            |                 | the first column                    |\r\n            | 0,1,2           | the first, second and third columns |\r\n            | 3               | the fourth column                   |\r\n\r\n    @motivating\r\n    Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\r\n        Given the table is configured with \"program-id\"\r\n        Then only rewards from the program with \"program-id\" are shown\r\n\r\n    @landmine\r\n    Scenario: When a `classic` program Id is set then any reward without a programId is shown\r\n        There is no easy way for the backend to filter for \"classic\" programs,\r\n        thus we are filtering for rewards without programId's.\r\n\r\n        Given the \"program-id\" of the table is set to \"classic\"\r\n        Then rewards from classic programs are shown\r\n        And manual rewards are shown\r\n\r\n    @minutae\r\n    @ui\r\n    Scenario: Column heading can be hidden\r\n        Given the table is configured with \"show-labels\" set to false\r\n        Then the table is displayed without column headings";
 
 const RewardsTable_stories = {
   title: "Components/Rewards Table",
@@ -11438,7 +11438,7 @@ const Scroll_stories = {
 };
 const ScrollTag = () => {
   return (index.h("div", { style: { position: "relative", height: "2000px" } },
-    index.h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll" }),
+    index.h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll", "scroll-animation": "smooth" }),
     index.h("div", { style: { position: "absolute", bottom: "0" } },
       index.h("sqm-text", { slot: "label" },
         index.h("h3", null, "Earn more rewards"),
@@ -11446,7 +11446,15 @@ const ScrollTag = () => {
 };
 const ScrollId = () => {
   return (index.h("div", { style: { position: "relative", height: "2000px" } },
-    index.h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id" }),
+    index.h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "smooth" }),
+    index.h("div", { style: { position: "absolute", bottom: "0" } },
+      index.h("sqm-text", { slot: "label", id: "my-id" },
+        index.h("h3", null, "Earn more rewards"),
+        index.h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+const ScrollAutoAnimation = () => {
+  return (index.h("div", { style: { position: "relative", height: "2000px" } },
+    index.h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "auto" }),
     index.h("div", { style: { position: "absolute", bottom: "0" } },
       index.h("sqm-text", { slot: "label", id: "my-id" },
         index.h("h3", null, "Earn more rewards"),
@@ -11454,7 +11462,7 @@ const ScrollId = () => {
 };
 const ScrollTabGroup = () => {
   return (index.h("div", { style: { position: "relative", height: "2000px" } },
-    index.h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3" }),
+    index.h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3", "scroll-animation": "smooth" }),
     index.h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
               <sqm-tabs>
               <sqm-tab header="Leaderboard">
@@ -11543,12 +11551,9 @@ const ShoelaceProps = () => {
     index.h("br", null),
     " ",
     index.h("hr", null),
-    index.h("h3", null, "Caret:"),
-    index.h("sqm-scroll", { caret: true }, "Button"),
-    index.h("br", null),
-    " ",
-    index.h("hr", null),
     index.h("h3", null, "Icon:"),
+    index.h("sqm-scroll", { "button-type": "primary", iconName: "facebook" }, "Icon Name"),
+    index.h("br", null),
     index.h("sqm-scroll", { iconName: "gear", iconSlot: "prefix" }, "Icon Slot Prefix"),
     index.h("br", null),
     index.h("sqm-scroll", { iconName: "gear", iconSlot: "suffix" }, "Icon Slot Suffix"),
@@ -11565,22 +11570,8 @@ const ShoelaceProps = () => {
     index.h("br", null),
     " ",
     index.h("hr", null),
-    index.h("h3", null, "Disabled:"),
-    index.h("sqm-scroll", { disabled: true }, "Button"),
-    index.h("br", null),
-    " ",
-    index.h("hr", null),
-    index.h("h3", null, "Link:"),
-    index.h("sqm-scroll", { href: "https://example.com/" }, "Link"),
-    index.h("br", null),
-    index.h("sqm-scroll", { href: "https://example.com/", target: "_self" }, "Same Window"),
-    index.h("br", null),
-    index.h("sqm-scroll", { href: "/assets/images/wordmark.svg", download: "shoelace.svg" }, "Download"),
-    index.h("br", null),
-    " ",
-    index.h("hr", null),
     index.h("h3", null, "Mobile Friendly:"),
-    index.h("sqm-scroll", { "mobile-friendly": true }, "Button"),
+    index.h("sqm-scroll", { mobile: true }, "Button"),
     index.h("br", null),
     " ",
     index.h("hr", null)));
@@ -11591,6 +11582,7 @@ const Scroll = /*#__PURE__*/Object.freeze({
   'default': Scroll_stories,
   ScrollTag: ScrollTag,
   ScrollId: ScrollId,
+  ScrollAutoAnimation: ScrollAutoAnimation,
   ScrollTabGroup: ScrollTabGroup,
   ScrollTabGroupInner: ScrollTabGroupInner,
   ShoelaceProps: ShoelaceProps

package/dist/collection/components/sqm-big-stat/UseBigStat.stories.js

@@ -31,7 +31,7 @@ function setupGraphQL() {
   }, []);
 }
 const View = (statType, format) => {
-  console.log(`View("${statType}") - CALLED`);
+  //   console.log(`View("${statType}") - CALLED`);
   setupGraphQL();
   return (h("div", null,
     h("b", null, "Stat format:"),

package/dist/collection/components/sqm-big-stat/useBigStat.js

@@ -38,7 +38,7 @@ _, status) => {
     `, { queryFilter }, (res) => {
     var _a, _b, _c, _d, _e, _f, _g;
     return ({
-      value: (_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount,
+      value: ((_c = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.viewer) === null || _b === void 0 ? void 0 : _b.referrals) === null || _c === void 0 ? void 0 : _c.totalCount) || 0,
       statvalue: (_g = (_f = (_e = (_d = res.data) === null || _d === void 0 ? void 0 : _d.viewer) === null || _e === void 0 ? void 0 : _e.referrals) === null || _f === void 0 ? void 0 : _f.totalCount) === null || _g === void 0 ? void 0 : _g.toString(),
     });
   });

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

@@ -64,7 +64,7 @@ const View = (overrideProps) => {
     ...overrideProps,
   };
   const { leaderboardType, rankType } = props;
-  console.log(`View("${leaderboardType}") - CALLED`, { ...props });
+  //   console.log(`View("${leaderboardType}") - CALLED`, { ...props });
   return (h("div", { style: { marginBottom: "20px" } },
     h("sqm-divided-layout", { direction: "row" },
       h("div", { style: { padding: "10px" } },
@@ -146,7 +146,7 @@ export const DemoHookEmpty = createHookStory(() => {
           anonymousUser: "Anonymous User",
           showRank: true,
         },
-      }
+      },
     } },
     h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", "empty-state-header": "View your rank in the leaderboard", "empty-state-text": "Be the first to refer a friend and reach the top of the leaderboard" })));
 });

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

@@ -52,10 +52,6 @@ export function LeaderboardView(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const { states, data, elements } = props;
   const { styles } = states;
-  console.log("LEADER", props);
-  console.log(styles);
-  console.log("hideViewer", styles.hideViewer);
-  console.log(!styles.hideViewer);
   if (states.loading)
     return (h("div", { class: sheet.classes.Leaderboard },
       h("style", { type: "text/css" },
@@ -91,7 +87,6 @@ export function LeaderboardView(props) {
           h("td", { class: "Score" }, user.value)));
       }),
       !userSeenFlag && !styles.hideViewer && (h("tr", null,
-        console.log("res", !userSeenFlag && !styles.hideViewer),
         h("td", { colSpan: 100, class: "ellipses" },
           h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
       !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },

package/dist/collection/components/sqm-referral-table/ReferralTable.stories.js

@@ -488,7 +488,7 @@ export const FullRewardsTable = () => {
           prevLabel: "Prev",
           moreLabel: "View More",
         },
-        hiddenColumns: "",
+        hiddenColumns: "1",
         mdBreakpoint: 899,
         smBreakpoint: 599,
       },

package/dist/collection/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.js

@@ -116,7 +116,6 @@ export class ReferralTableRewardsCell {
       }, {
         status: state,
       });
-      const rid = Math.random().toString(36).slice(2);
       return (h("sl-details", { class: sheet.classes.Details, disabled: this.hideDetails },
         h("style", { type: "text/css" }, styleString),
         h("div", { slot: "summary", class: sheet.classes.DetailsContainer },

package/dist/collection/components/sqm-rewards-table/RewardsTableCell.stories.js

@@ -14,7 +14,7 @@ const rewardsData = {
   id: "61c100117a82a376d8804166",
   type: "CREDIT",
   value: 19,
-  unit: "TESTUNIT",
+  unit: "Points",
   name: null,
   dateGiven: 1640038417468,
   meta: { message: "***CUSTOMER NOTE MESSAGE***" },
@@ -46,7 +46,7 @@ export const RewardsCellCreditSingle = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...singleRedeemed } }));
 };
 export const RewardsCellCreditFull = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "19 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData }, availableText: "{availableAmount} remaining" }));
 };
 const partial = {
   prettyAvailableValue: "10 Points",
@@ -55,16 +55,16 @@ const partial = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditPartial = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "10 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial }, availableText: "{availableAmount} remaining" }));
 };
 export const RewardsCellCreditCancelled = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...cancelled }, redeemedText: "0 Points redeemed" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...cancelled }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 export const RewardsCellCreditExpired = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...expired }, redeemedText: "9 Points redeemed" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...expired }, redeemedText: "{redeemedAmount} redeemed" }));
 };
 export const RewardsCellCreditPending = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...partial, ...pending }, availableText: "9 Points redeemed" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...pending }, availableText: "{availableAmount} remaining" }));
 };
 const empty = {
   prettyAvailableValue: "0 Points",
@@ -74,7 +74,7 @@ const empty = {
   dateRedeemed: 1640038417468,
 };
 export const RewardsCellCreditRedeemed = () => {
-  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "0 Points remaining" }));
+  return (h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...empty }, availableText: "{availableAmount} remaining" }));
 };
 const singleRedeemed = {
   prettyValue: "1 Point",
@@ -86,7 +86,7 @@ const longName = {
 };
 export const RewardsCellCreditLong = () => {
   return (h("div", { style: { maxWidth: "222px" } },
-    h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "19 Points with a really really super duper longest name ever in the world wide web remaining" })));
+    h("sqm-rewards-table-reward-cell", { reward: { ...rewardsData, ...longName }, availableText: "{availableAmount} remaining" })));
 };
 export const RewardsCellNonCredit = () => {
   return (h("sqm-rewards-table-reward-cell", { reward: {
@@ -101,7 +101,7 @@ export const RewardsCellFueltank = () => {
       type: "FUELTANK",
       prettyValue: "Fueltank Reward",
       fuelTankCode: "AFUELTANKCODE",
-    }, fueltankText: "Your code:", copyText: "Copied" }));
+    }, copyText: "Copied" }));
 };
 export const RewardsCellFueltankLong = () => {
   return (h("div", { style: { maxWidth: "222px" } },
@@ -110,7 +110,7 @@ export const RewardsCellFueltankLong = () => {
         type: "FUELTANK",
         prettyValue: "Long Fueltank Reward",
         fuelTankCode: "AFUELTANKCODE123456789123456789123456789123456789",
-      }, fueltankText: "Your code:", copyText: "Copied" })));
+      }, copyText: "Copied" })));
 };
 export const SourceCellManual = () => {
   return (h("sqm-rewards-table-source-cell", { reward: rewardsData, rewardSourceText: "Manual" }));

package/dist/collection/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.js

@@ -86,17 +86,16 @@ export class RewardTableRewardsCell {
       if (reward.type === "FUELTANK") {
         return (h("div", { class: sheet.classes.Fueltank },
           reward.prettyValue,
-          h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) },
+          reward.fuelTankCode && (h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) },
             h("sl-tooltip", { trigger: "click", placement: "top", distance: 5, skidding: 11, content: this.copyText, "onSl-show": (e) => setTimeout(() => e.path[0].hide(), 1000) },
               h("span", { class: "text" }, reward.fuelTankCode),
               h("span", { class: "icon" },
-                h("sl-icon", { name: "files" }))))));
+                h("sl-icon", { name: "files" })))))));
       }
       if (reward.type === "CREDIT" && !singleReward) {
-        const progress = Math.round(((parseFloat(reward.prettyValueNumber) -
-          parseFloat(reward.prettyRedeemedNumber)) /
-          parseFloat(reward.prettyValueNumber)) *
-          100);
+        const remainingValue = parseFloat(reward.prettyValueNumber) -
+          parseFloat(reward.prettyRedeemedNumber);
+        const progress = Math.round((remainingValue / parseFloat(reward.prettyValueNumber)) * 100);
         const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
           reward.statuses.includes("CANCELLED") ? (h("div", null, intl.formatMessage({
           id: "redeemedText",
@@ -107,7 +106,9 @@ export class RewardTableRewardsCell {
           id: "availableText",
           defaultMessage: this.availableText,
         }, {
-          availableAmount: reward.prettyAvailableValue,
+          availableAmount: reward.statuses.includes("PENDING")
+            ? reward.prettyAssignedCredit
+            : reward.prettyAvailableValue,
         })));
         const style = {
           Progress: {
@@ -214,23 +215,6 @@ export class RewardTableRewardsCell {
       "attribute": "available-text",
       "reflect": false
     },
-    "fueltankText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "fueltank-text",
-      "reflect": false
-    },
     "copyText": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.js

@@ -18,10 +18,6 @@ export class RewardsTableColumn {
      * @uiName Remaining Amount Text
      */
     this.availableText = "{availableAmount} remaining";
-    /**
-     * @uiName Fuel Tank Text
-     */
-    this.fueltankText = "Your code:";
     /**
      * @uiName Copied Fuel Tank Text
      */
@@ -30,7 +26,7 @@ export class RewardsTableColumn {
   }
   disconnectedCallback() { }
   async renderCell(data, locale) {
-    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, fueltankText: this.fueltankText, locale: locale }));
+    return (h("sqm-rewards-table-reward-cell", { reward: data === null || data === void 0 ? void 0 : data[0], redeemedText: this.redeemedText, availableText: this.availableText, copyText: this.copyText, locale: locale }));
   }
   async renderLabel() {
     return this.columnTitle;
@@ -105,27 +101,6 @@ export class RewardsTableColumn {
       "reflect": false,
       "defaultValue": "\"{availableAmount} remaining\""
     },
-    "fueltankText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Fuel Tank Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "fueltank-text",
-      "reflect": false,
-      "defaultValue": "\"Your code:\""
-    },
     "copyText": {
       "type": "string",
       "mutable": false,