@saasquatch/mint-components 1.6.3-3 → 1.6.3-5
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/dist/cjs/{sqm-portal-email-verification-view-4419779f.js → sqm-portal-email-verification-view-bb8f5aa0.js} +8 -4
- package/dist/cjs/sqm-portal-email-verification.cjs.entry.js +7 -18
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +21 -21
- package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification-view.js +8 -4
- package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js +5 -5
- package/dist/collection/components/sqm-portal-email-verification/usePortalEmailVerification.js +3 -14
- package/dist/esm/{sqm-portal-email-verification-view-c181c9ff.js → sqm-portal-email-verification-view-0170c6d1.js} +8 -4
- package/dist/esm/sqm-portal-email-verification.entry.js +7 -18
- package/dist/esm/sqm-stencilbook.entry.js +21 -21
- package/dist/esm-es5/{sqm-portal-email-verification-view-c181c9ff.js → sqm-portal-email-verification-view-0170c6d1.js} +1 -1
- package/dist/esm-es5/sqm-portal-email-verification.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-07c6faa1.system.js +1 -0
- package/dist/mint-components/p-2e308c1b.system.js +1 -1
- package/dist/mint-components/p-3f96e1c4.entry.js +1 -0
- package/dist/mint-components/p-3fff79f3.system.entry.js +1 -0
- package/dist/mint-components/p-514e7691.entry.js +9 -0
- package/dist/mint-components/p-62ed88a1.js +1 -0
- package/dist/mint-components/{p-01848cdc.system.entry.js → p-6451e5af.system.entry.js} +1 -1
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/package.json +1 -1
- package/dist/mint-components/p-103274ca.system.entry.js +0 -1
- package/dist/mint-components/p-329f2ebe.entry.js +0 -9
- package/dist/mint-components/p-459c3a9c.js +0 -1
- package/dist/mint-components/p-aa5c7bc5.entry.js +0 -1
- package/dist/mint-components/p-ca97933a.system.js +0 -1
|
@@ -16,7 +16,7 @@ import { H as HeroView } from './sqm-hero-view-1904c178.js';
|
|
|
16
16
|
import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-10657658.js';
|
|
17
17
|
import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-a5b72846.js';
|
|
18
18
|
import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-d6b9f5d0.js';
|
|
19
|
-
import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-
|
|
19
|
+
import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-0170c6d1.js';
|
|
20
20
|
import { a as PoweredByImg$1, P as PortalFooterView } from './sqm-portal-footer-view-360cfd92.js';
|
|
21
21
|
import { P as PortalForgotPasswordView } from './sqm-portal-forgot-password-view-b69c81b1.js';
|
|
22
22
|
import { P as PortalContainerView } from './sqm-portal-container-view-21bd84e0.js';
|
|
@@ -1442,7 +1442,7 @@ var _createEmotion = createEmotion({
|
|
|
1442
1442
|
|
|
1443
1443
|
function i$1(){return (i$1=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r]);}return n}).apply(this,arguments)}function s(n,t){return t||(t=n.slice(0)),n.raw=t,n}var a$1,l,u,c$1=css(a$1||(a$1=s(['\n width: 100vw;\n height: 100vh;\n\n .story-book-outer-div {\n .story-div {\n font-family: "Arial", sans-serif;\n font-size: 12px;\n }\n padding-bottom: 500px;\n }\n\n .story-div {\n position: fixed;\n box-sizing: border-box;\n top: 0;\n width: 250px;\n height: 100vh;\n z-index: 999;\n overflow-y: scroll;\n background: white;\n margin-bottom: 32px;\n }\n\n .header {\n padding: 24px 0 16px 16px;\n margin-bottom: 24px;\n color: white;\n background: #333;\n cursor: pointer;\n\n h2 {\n letter-spacing: 3px;\n font-weight: 400;\n }\n }\n\n .parentStoryList {\n list-style: none;\n padding-left: 16px;\n\n summary {\n margin-bottom: 4px;\n }\n }\n .parentStory {\n cursor: pointer;\n }\n .parentStory.selected {\n font-weight: bold;\n }\n\n .subStory {\n font-size: 12px;\n cursor: pointer;\n line-height: 1.5em;\n margin-top: 4px;\n\n a {\n display: block;\n padding: 4px 4px 4px 16px;\n }\n }\n .subStory:hover {\n background-color: #eee;\n }\n .subStory.selected {\n background-color: lightgreen;\n }\n\n .component {\n padding: 24px 16px;\n }\n\n h4.group-header {\n margin: 8px 0;\n text-transform: uppercase;\n font-weight: 600;\n font-size: 14px;\n color: #575757;\n }\n\n .group-wrapper {\n margin-bottom: 24px;\n }\n\n .dynamic-display-wrapper {\n position: fixed;\n display: flex;\n flex-direction: column;\n bottom: 0;\n left: 100%;\n padding: 16px;\n z-index: 1000;\n background: white;\n transform: translateX(-100%);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n\n & > :not(:first-child) {\n margin-top: 12px;\n }\n\n p {\n font-size: 12px;\n margin: 0;\n padding: 0;\n }\n\n .button-wrapper {\n display: flex;\n\n & > :not(:first-child) {\n margin-left: 12px;\n }\n }\n\n & button {\n border: 1px solid #eaeaea;\n background: white;\n border-radius: 4px;\n color: #777;\n padding: 4px 12px;\n justify-content: center;\n align-items: center;\n text-align: center;\n\n &.active {\n background: #555;\n border-color: #555;\n color: white;\n }\n }\n }\n'])));function p$1(n,t){var o,r=t.story.title.split("/"),e=r[1]?r[0]:"_";return i$1({},n,((o={})[e]=[].concat(n[e]||[],[{story:i$1({},t.story,{title:r[1]||r[0]}),subs:t.subs}]).sort(function(n,t){return n.story.title.localeCompare(t.story.title)}),o))}function d$1(n){return {story:n.default,subs:function(n,t){if(null==n)return {};var o,r,e={},i=Object.keys(n);for(r=0;r<i.length;r++)t.indexOf(o=i[r])>=0||(e[o]=n[o]);return e}(n,["default"])}}function f(a,f){var b=f.h,y=void 0===b?h:b,g=f.title,m=void 0===g?"Stencilbook":g,x=f.homepage,h$1=void 0===x?y("h3",null,"Select a story!"):x,v=f.addons,k=void 0===v?[]:v,w=useMemo(function(){return a.map(d$1).reduce(p$1,{_:[]})},a),S=useState(void 0),C=S[0],z=S[1],O=null==C?void 0:C.key,j=useState("desktop"),T=j[0],_=j[1],B=useState(!0),D=B[0],L=B[1],N=useState(!1),q=N[0],A=N[1],M=function(){return y("div",{class:"dynamic-display-wrapper"},y("div",{class:"button-wrapper"},y("button",{class:"desktop"===T?"active":"",onClick:function(){return _("desktop")}},"Desktop"),y("button",{class:"tablet"===T?"active":"",onClick:function(){return _("tablet")}},"Tablet"),y("button",{class:"mobile"===T?"active":"",onClick:function(){return _("mobile")}},"Mobile")),y("p",null,"Note: Currently doesn't test breakpoints, use the native tester for now"),y("hr",null),y("button",{class:q?"active":"",onClick:function(){return A(function(n){return !n})}},"Toggle Dark Background"),y("hr",null),y("button",{class:D?"active":"",onClick:function(){return L(function(n){return !n})}},"Toggle Sidebar"))},P="mobile"===T?"375px":"tablet"===T?"768px":"1124px",V=css(l||(l=s(["\n max-width: ",";\n margin-left: ",";\n "])),P,D?"250px":"0px"),X=css(u||(u=s(["\n display: none;\n "])));document.body.style.backgroundColor=q?"#232323":"#fafafa";var E=function(n){var t=n.selected,o=k.reduce(function(n,o){return function(){return y(o,{story:i$1({},t)},y(n,null))}},null==t?void 0:t.story);return y(o,null)},F=function(){return y("div",{class:"story-book-outer-div"},y("div",{class:"story-div "+(D?"":X)},y("div",{class:"header",onClick:function(){z(void 0);}},y("h2",null,m)),y("ul",{class:"parentStoryList"},Object.keys(w).sort().map(function(n){return y("div",{class:"group-wrapper"},"_"!==n&&y("h4",{class:"group-header"},n),w[n].map(function(t){return y("li",{class:"parentStory"},y("details",{style:{marginBottom:"10px"}},y("summary",{style:{outline:"none"}},t.story.title),t.subs&&Object.keys(t.subs).map(function(o){var e=n+"/"+o,i=t.subs[o],s=i.storyName||lodash_startcase(o);return y("div",{class:"subStory "+(O===e?"selected":"")},y("a",{onClick:function(){return function(n,t,o,r){z({key:t,story:n,parent:o,label:r});}(i,e,t.story,s)}},s))})))}))}))),y(M,null),y("div",{class:"component "+V},!O&&h$1,O&&y("div",null,y("h3",null,C.label),y(E,{selected:C}))))};return {class:c$1,children:y(F,null),View:F,selected:C}}
|
|
1444
1444
|
|
|
1445
|
-
const scenario = "@author:noah\r\n@owner:noah\r\nFeature: Share Button\r\n\r\n The share button redirects users to a platform where they can share their referral link\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: Share button displays for various platforms\r\n Given the share button's medium prop is \"<medium>\"\r\n And the button's child is text saying \"BUTTON_TEXT\"\r\n When the share button is rendered\r\n Then the button has text \"BUTTON_TEXT\"\r\n And the button is <colour>\r\n And it displays an <icon> beside the text\r\n And clicking the button redirects to an appropriate link\r\n Examples:\r\n | medium | colour | icon |\r\n | facebook | #1877f2 | facebook logo |\r\n | twitter | #1da1f2 | twitter logo |\r\n | email | #666666 | envelope |\r\n | direct | brand colour | paper plane |\r\n | linkedin | #0077b5 | linkedIn logo |\r\n | sms | #34DA50 | chat bubble |\r\n | fbmessenger | #0084ff | messenger logo |\r\n | whatsapp | #25d366 | whatsapp logo |\r\n | linemessenger | #00B300 | linemessenger logo |\r\n | pinterest | #e60023 | pinterest logo |\r\n\r\n @
|
|
1445
|
+
const scenario = "@author:noah\r\n@owner:noah\r\nFeature: Share Button\r\n\r\n The share button redirects users to a platform where they can share their referral link\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: Share button displays for various platforms\r\n Given the share button's medium prop is \"<medium>\"\r\n And the button's child is text saying \"BUTTON_TEXT\"\r\n When the share button is rendered\r\n Then the button has text \"BUTTON_TEXT\"\r\n And the button is <colour>\r\n And it displays an <icon> beside the text\r\n And clicking the button redirects to an appropriate link\r\n Examples:\r\n | medium | colour | icon |\r\n | facebook | #1877f2 | facebook logo |\r\n | twitter | #1da1f2 | twitter logo |\r\n | email | #666666 | envelope |\r\n | direct | brand colour | paper plane |\r\n | linkedin | #0077b5 | linkedIn logo |\r\n | sms | #34DA50 | chat bubble |\r\n | fbmessenger | #0084ff | messenger logo |\r\n | whatsapp | #25d366 | whatsapp logo |\r\n | linemessenger | #00B300 | linemessenger logo |\r\n | pinterest | #e60023 | pinterest logo |\r\n\r\n @minutia\r\n @ui\r\n Scenario Outline: Default icons can be overwritten\r\n Given a share button for any medium with <iconPropValue>\r\n When the share button is rendered\r\n Then it displays a <iconPropValue> instead of the share mediums default icon\r\n Examples:\r\n | iconPropValue |\r\n | basket |\r\n | bluetooth |\r\n | bandaid |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: Default share medium colours can be overwritten\r\n Given a share button for any medium with <backgroundColourPropValue>\r\n When the share button is rendered\r\n Then the share button is <backgroundColourPropValue>\r\n Examples:\r\n | backgroundColourPropValue |\r\n | blue |\r\n | black |\r\n | green |\r\n\r\n @minutia\r\n @ui\r\n Scenario Outline: Share medium icons and text can be hidden\r\n Given a share button with <prop> <value>\r\n When the share button is rendered\r\n Then <element> is hidden\r\n Examples:\r\n | prop | value | element |\r\n | hideicon | true | icon |\r\n | hidetext | true | text |\r\n\r\n @minutia\r\n @ui\r\n Scenario Outline: Icons can be on either side of the text\r\n Given a share button with <iconslotPropValue>\r\n When the share button is rendered\r\n Then the icon is displayed to the <direction> of the text\r\n Examples:\r\n | iconslotPropValue | direction |\r\n | suffix | right |\r\n | prefix | left |\r\n | prefix | left |\r\n\r\n @minutia\r\n Scenario: Unsupported browsers hide native share buttons\r\n Given the share button's medium prop is \"direct\"\r\n And your browser does not support the Web Share API\r\n Then the share button is hidden\r\n\r\n @minutia\r\n Scenario: SMS share buttons are hidden on non Android and iOS devices\r\n Given the share button's medium is \"sms\"\r\n And the share button is being viewed on a device which is not an Android or iOS device\r\n Then the share button is hidden\r\n\r\n @motivating\r\n Scenario: Facebook share buttons uses SquatchAndroid sharing features\r\n Given the share button's medium is \"facebook\"\r\n And the share button is being viewed in a web view with the SquatchAndroid API\r\n And the Facebook app is available\r\n Then tapping the share button opens the phone's Facebook app\r\n And a share activity is opened with the share link prefilled\r\n\r\n @motivating\r\n Scenario: SquatchAndroid falls back to the Facebook website if no app is available\r\n Given the share button's medium is \"facebook\"\r\n And the share button is being viewed in a web view with the SquatchAndroid API\r\n And the Facebook app is not available\r\n Then tapping the share button opens the the Facebook mobile site in the device's browser\r\n And a share activity is opened with the share link prefilled\r\n\r\n @minutia\r\n Scenario: A supplied program ID is used if available\r\n Given the program id is supplied to the component in the \"programId\" prop\r\n Then the program ID in the \"programId\" prop is used to retrieve share links\r\n\r\n @minutia\r\n Scenario: The program ID is automatically fetched from context\r\n Given the program id is not supplied to the component in the \"programId\" prop\r\n Then the program ID is retrieved from context";
|
|
1446
1446
|
|
|
1447
1447
|
const ShareButton_stories = {
|
|
1448
1448
|
title: "Components/Share Button",
|
|
@@ -1620,7 +1620,7 @@ const EmptyState = /*#__PURE__*/Object.freeze({
|
|
|
1620
1620
|
SlottedIntoComponent: SlottedIntoComponent
|
|
1621
1621
|
});
|
|
1622
1622
|
|
|
1623
|
-
const scenario$2 = "@author:johan\r\n@owner:johan\r\nFeature: Share Link\r\n\r\n The share link component is a box that allows users to see and copy their share link for a given program\r\n\r\n Background: Environment\r\n Given there is a valid program ID in the environment\r\n And there is a valid user ID and account ID in the environment\r\n\r\n @motivating\r\n Scenario: A Users sharelink can be copied to their clipboard\r\n Given tooltipText is \"hello tooltip\"\r\n When the component renders\r\n Then there is a textbox with the user's share link\r\n When the clipboard icon is clicked\r\n Then the link is copied to clipboard\r\n And a tooltip appears for ~1 second\r\n\r\n @
|
|
1623
|
+
const scenario$2 = "@author:johan\r\n@owner:johan\r\nFeature: Share Link\r\n\r\n The share link component is a box that allows users to see and copy their share link for a given program\r\n\r\n Background: Environment\r\n Given there is a valid program ID in the environment\r\n And there is a valid user ID and account ID in the environment\r\n\r\n @motivating\r\n Scenario: A Users sharelink can be copied to their clipboard\r\n Given tooltipText is \"hello tooltip\"\r\n When the component renders\r\n Then there is a textbox with the user's share link\r\n When the clipboard icon is clicked\r\n Then the link is copied to clipboard\r\n And a tooltip appears for ~1 second\r\n\r\n @minutia\r\n Scenario: Tooltip lifespan defaults to 2000\r\n Given the tooltip's lifespan is set to 2000\r\n And there is tooltip text\r\n When the component renders\r\n And the clipboard icon is clicked\r\n Then a tooltip appears for ~2 seconds\r\n\r\n @minutia\r\n Scenario: Demo\r\n Given isDemo() returns true\r\n Then the share link is \"https://www.example.com/sharelink/abc\"\r\n And the component won't be interactive\r\n And the tooltip is hidden\r\n\r\n @minutia\r\n Scenario: Program ID can be sourced from prop\r\n Given the programId prop is set to \"program-a\"\r\n And window.widgetIdent.programId is set to \"program-b\"\r\n When the component renders\r\n Then the share link is for \"program-a\"\r\n\r\n @minutia\r\n Scenario: Program ID can be sourced from window\r\n Given the programId prop is unset\r\n And window.widgetIdent.programId is set to \"program-b\"\r\n When the component renders\r\n Then the share link is for \"program-b\"\r\n\r\n @minutia\r\n Scenario: An analytic event is fired when a user copies their sharelink\r\n Given a user viewing the share link component\r\n And the component is rendered for \"program-a\"\r\n When they click to copy their link\r\n Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\r\n And it is for \"program-a\"\r\n And it has share medium \"DIRECT\"\r\n";
|
|
1624
1624
|
|
|
1625
1625
|
const ShareLink_stories = {
|
|
1626
1626
|
title: "Components/Share Link",
|
|
@@ -1666,7 +1666,7 @@ const ShareLink = /*#__PURE__*/Object.freeze({
|
|
|
1666
1666
|
FullStack: FullStack
|
|
1667
1667
|
});
|
|
1668
1668
|
|
|
1669
|
-
const scenario$3 = "@author:sam\r\n@owner:sam\r\nFeature: Big Stat\r\n\r\n Big stat is a component for displaying a statistic as a large number with a label\r\n\r\n @minutae\r\n Scenario: Demo hook retrieves label using stat pattern\r\n Given isDemo() returns true\r\n And the component renders with props:\r\n | type |\r\n | /referralsCount |\r\n Then the label is: \"REFERRALS - COUNT\"\r\n And the value is: \"12345\"\r\n\r\n @minutae\r\n Scenario: Demo hook falls back to default label on invalid path\r\n Given isDemo() returns true\r\n And the component renders with props:\r\n | type |\r\n | a bad path |\r\n Then the label is: \"Demo Label\"\r\n And the value is: \"12345\"\r\n\r\n @motivating\r\n Scenario: Displays error on unrecognized path\r\n Given isDemo() returns false\r\n And the component renders with props:\r\n | type |\r\n | /(doesNotExistNopeNotHere) |\r\n Then the label is: \"BAD PROP TYPE\"\r\n And the value is: \"!!!\"\r\n\r\n @motivating\r\n Scenario Outline: Label displays correctly\r\n Given the type prop is set to <type>\r\n When the component renders\r\n Then the label is <label>\r\n Given isDemo() returns true\r\n When the component renders\r\n Then the label is <inferredLabel>\r\n Examples:\r\n | path | label | inferredLabel |\r\n | rewardsAssigned | Rewards Earned | Rewards Assigned |\r\n | rewardsRedeemed | Rewards Paid | Rewards Redeemed |\r\n | rewardsAvailable | Rewards Available | Rewards Available |\r\n | referralsCount | Referrals - Count | Referrals Count |\r\n | referralsMonth | Referrals - This Month | Referrals Month |\r\n | referralsWeek | Referrals - This Week | Referrals Week |\r\n | rewardsCount | Rewards - Count | Rewards Count |\r\n | rewardsMonth | Rewards - This Month | Rewards Month |\r\n | rewardsWeek | Rewards - This Week | Rewards Week |\r\n | rewardBalance | Balance - Credit Earned | Reward Balance |\r\n | customField | Custom Fields | Custom Fields |\r\n | programGoals | Program Goals | Program Goals |\r\n\r\n @motivating\r\n Scenario: Display user's credit\r\n Given isDemo() returns false\r\n And the user has earned 34 COFFEE from the program\r\n And the component renders with props:\r\n | type |\r\n | /rewardBalance/CREDIT/COFFEE/prettyValue |\r\n Then the label is: \"Balance - Credit Earned\"\r\n And the value is: \"34 COFFEE\"\r\n\r\n @minutae\r\n Scenario: Memoizes most recent query\r\n Given isDemo() returns false\r\n And the component's type prop is set to a variable named PATH\r\n And PATH is \"/referralsWeek\"\r\n Then the component shows a loading state before showing the result\r\n When the component reloads given some external reload\r\n Then the component doesn't show a loading state\r\n When PATH is set to \"/rewardsWeek\"\r\n Then the component shows a loading state before showing the result\r\n When PATH is set to \"/referralsWeek\"\r\n Then the component shows a loading state before showing the result\r\n\r\n @motivating\r\n Scenario: Stat has a loading state\r\n Given isDemo() returns false\r\n And the component's stat type prop is valid\r\n When the component renders\r\n Then The stat value displays \"...\"\r\n And when the stat query is completed\r\n And the stat value displays a value\r\n\r\n @motivating\r\n Scenario Outline: Program Goal stat requires metricType and goalId\r\n Given the statType prop is <statType>\r\n When the component renders\r\n Then the label is <label>\r\n And the stat value is <InvalidStatValue>\r\n Examples:\r\n | statType | label | InvalidStatValue |\r\n | /programGoals | BAD PROP TYPE | true |\r\n | /programGoals/count | BAD PROP TYPE | true |\r\n | /programGoals/conversionCount | BAD PROP TYPE | true |\r\n | /programGoals/My-Goal | BAD PROP TYPE | true |\r\n | /programGoals/count/My-Goal | Program Goals | false |\r\n | /programGoals/conversionCount/My-Goal | Program Goals | false |\r\n\r\n @motivating\r\n Scenario Outline: rewardCountFiltered supports many formats\r\n Given the statType begins with \"/rewardCountFiltered\"\r\n When the component renders with <statType>\r\n Then the stat <mayRender> a value\r\n Examples:\r\n | statType | mayRender |\r\n | /rewardsCountFiltered | renders |\r\n | /rewardsCountFiltered/COFFEE | doesn't render |\r\n | /rewardsCountFiltered/global | renders |\r\n | /rewardsCountFiltered/INTEGRATION | renders |\r\n | /rewardsCountFiltered/INTEGRATION/global | renders |\r\n | /rewardsCountFiltered/PCT_DISCOUNT | renders |\r\n | /rewardsCountFiltered/PCT_DISCOUNT/global | renders |\r\n | /rewardsCountFiltered/CREDIT | renders |\r\n | /rewardsCountFiltered/CREDIT/COFFEE | renders |\r\n | /rewardsCountFiltered/CREDIT/global | renders |\r\n | /rewardsCountFiltered/CREDIT/COFFEE/PENDING | renders |\r\n | /rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD/global | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global | renders |\r\n\r\n @motivating\r\n Scenario Outline: Program Goals and Reward units with currencies must be encoded\r\n Given the statType is <statType>\r\n When the stat is queried\r\n Then the stat is filtered by <decodedFilter>\r\n And a value <mayBe> rendered\r\n Examples:\r\n | statType | decodedFilter | may |\r\n | /rewardBalance/CREDIT/COFFEE | COFFEE | is |\r\n | /rewardBalance/CREDIT/CENTS | CENTS | is |\r\n | /rewardBalance/CREDIT/COFFEE%2FUSD | COFFEE/USD | is |\r\n | /rewardBalance/CREDIT/COFFEE/USD | COFFEE | is |\r\n | /rewardBalance/CREDIT/CASH | CASH | is |\r\n | /rewardBalance/CREDIT/CASH/USD | CASH | is |\r\n | /rewardBalance/CREDIT/CASH%2FUSD | CASH/USD | is |\r\n | /programGoals/count/My-Goal | My-Goal | is |\r\n | /programGoals/count/My-Goal/referrals | | isn't |\r\n | /programGoals/count/My-Goal%2Freferrals | My-Goal/referrals | is |\r\n\r\n @motivating\r\n Scenario Outline: User custom fields can be queried\r\n Given the StatType is <statType>\r\n When the stat is queried\r\n Then the value matches that of the users <customField>\r\n Examples:\r\n | statType | customField |\r\n | /customFields/videosShared | videosShared |\r\n | /customFields/totalPurchaseCount | totalPurchaseCount |\r\n\r\n @motivating\r\n Scenario Outline: Some stats can use a global value instead of filtered by program\r\n Given the stat <statName>\r\n Then the global value <mayBe> available\r\n Examples:\r\n | statName | mayBe |\r\n | referralsCount | isn't |\r\n | referralsMonth | isn't |\r\n | referralsWeek | isn't |\r\n | rewardsCount | is |\r\n | rewardsCountFiltered | is |\r\n | integrationRewardsCountFiltered | is |\r\n | rewardsMonth | is |\r\n | rewardsWeek | is |\r\n | rewardsAssigned | is |\r\n | rewardsRedeemed | is |\r\n | rewardsAvailable | is |\r\n | rewardBalance | is |\r\n\r\n @motivating\r\n Scenario Outline: referralsCount stat can be filtered by Converted and Started\r\n Given statType prop is <statType>\r\n Then the stat returned has a <filter>\r\n Examples:\r\n | statType | filter |\r\n | /referralsCount | { programId_eq: programId } |\r\n | /referralsCount/converted | { programId_eq: programId, dateConverted_exists: true } |\r\n | /referralsCount/started | { programId_eq: programId, dateConverted_exists: false } |\r\n\r\n @motivating\r\n Scenario: Program context is used by default to source the programId used for queries\r\n Given a valid \"statType\"\r\n And its not a global stat\r\n And the stat is loaded in an environment for \"program-a\"\r\n And the \"program-id\" prop is not used\r\n When the stat is queried\r\n Then the query is filtered by \"{ programId_eq: 'program-a' }\"\r\n And only results from \"program-a\" are returned\r\n\r\n @motivating\r\n Scenario Outline: ProgramId can be specified to overwrite the program context default\r\n Given a valid \"statType\"\r\n And its not a global stat\r\n And the \"program-id\" prop has <value>\r\n When the stat is queried\r\n Then the query has a <filter>\r\n And only results from <value> are returned\r\n Examples:\r\n | value | filter |\r\n | program-b | { programId_eq: \"program-b\" } |\r\n | program-c | { programId_eq: \"program-c\" } |";
|
|
1669
|
+
const scenario$3 = "@author:sam\r\n@owner:sam\r\nFeature: Big Stat\r\n\r\n Big stat is a component for displaying a statistic as a large number with a label\r\n\r\n @minutia\r\n Scenario: Demo hook retrieves label using stat pattern\r\n Given isDemo() returns true\r\n And the component renders with props:\r\n | type |\r\n | /referralsCount |\r\n Then the label is: \"REFERRALS - COUNT\"\r\n And the value is: \"12345\"\r\n\r\n @minutia\r\n Scenario: Demo hook falls back to default label on invalid path\r\n Given isDemo() returns true\r\n And the component renders with props:\r\n | type |\r\n | a bad path |\r\n Then the label is: \"Demo Label\"\r\n And the value is: \"12345\"\r\n\r\n @motivating\r\n Scenario: Displays error on unrecognized path\r\n Given isDemo() returns false\r\n And the component renders with props:\r\n | type |\r\n | /(doesNotExistNopeNotHere) |\r\n Then the label is: \"BAD PROP TYPE\"\r\n And the value is: \"!!!\"\r\n\r\n @motivating\r\n Scenario Outline: Label displays correctly\r\n Given the type prop is set to <type>\r\n When the component renders\r\n Then the label is <label>\r\n Given isDemo() returns true\r\n When the component renders\r\n Then the label is <inferredLabel>\r\n Examples:\r\n | path | label | inferredLabel |\r\n | rewardsAssigned | Rewards Earned | Rewards Assigned |\r\n | rewardsRedeemed | Rewards Paid | Rewards Redeemed |\r\n | rewardsAvailable | Rewards Available | Rewards Available |\r\n | referralsCount | Referrals - Count | Referrals Count |\r\n | referralsMonth | Referrals - This Month | Referrals Month |\r\n | referralsWeek | Referrals - This Week | Referrals Week |\r\n | rewardsCount | Rewards - Count | Rewards Count |\r\n | rewardsMonth | Rewards - This Month | Rewards Month |\r\n | rewardsWeek | Rewards - This Week | Rewards Week |\r\n | rewardBalance | Balance - Credit Earned | Reward Balance |\r\n | customField | Custom Fields | Custom Fields |\r\n | programGoals | Program Goals | Program Goals |\r\n\r\n @motivating\r\n Scenario: Display user's credit\r\n Given isDemo() returns false\r\n And the user has earned 34 COFFEE from the program\r\n And the component renders with props:\r\n | type |\r\n | /rewardBalance/CREDIT/COFFEE/prettyValue |\r\n Then the label is: \"Balance - Credit Earned\"\r\n And the value is: \"34 COFFEE\"\r\n\r\n @minutia\r\n Scenario: Memoizes most recent query\r\n Given isDemo() returns false\r\n And the component's type prop is set to a variable named PATH\r\n And PATH is \"/referralsWeek\"\r\n Then the component shows a loading state before showing the result\r\n When the component reloads given some external reload\r\n Then the component doesn't show a loading state\r\n When PATH is set to \"/rewardsWeek\"\r\n Then the component shows a loading state before showing the result\r\n When PATH is set to \"/referralsWeek\"\r\n Then the component shows a loading state before showing the result\r\n\r\n @motivating\r\n Scenario: Stat has a loading state\r\n Given isDemo() returns false\r\n And the component's stat type prop is valid\r\n When the component renders\r\n Then The stat value displays \"...\"\r\n And when the stat query is completed\r\n And the stat value displays a value\r\n\r\n @motivating\r\n Scenario Outline: Program Goal stat requires metricType and goalId\r\n Given the statType prop is <statType>\r\n When the component renders\r\n Then the label is <label>\r\n And the stat value is <InvalidStatValue>\r\n Examples:\r\n | statType | label | InvalidStatValue |\r\n | /programGoals | BAD PROP TYPE | true |\r\n | /programGoals/count | BAD PROP TYPE | true |\r\n | /programGoals/conversionCount | BAD PROP TYPE | true |\r\n | /programGoals/My-Goal | BAD PROP TYPE | true |\r\n | /programGoals/count/My-Goal | Program Goals | false |\r\n | /programGoals/conversionCount/My-Goal | Program Goals | false |\r\n\r\n @motivating\r\n Scenario Outline: rewardCountFiltered supports many formats\r\n Given the statType begins with \"/rewardCountFiltered\"\r\n When the component renders with <statType>\r\n Then the stat <mayRender> a value\r\n Examples:\r\n | statType | mayRender |\r\n | /rewardsCountFiltered | renders |\r\n | /rewardsCountFiltered/COFFEE | doesn't render |\r\n | /rewardsCountFiltered/global | renders |\r\n | /rewardsCountFiltered/INTEGRATION | renders |\r\n | /rewardsCountFiltered/INTEGRATION/global | renders |\r\n | /rewardsCountFiltered/PCT_DISCOUNT | renders |\r\n | /rewardsCountFiltered/PCT_DISCOUNT/global | renders |\r\n | /rewardsCountFiltered/CREDIT | renders |\r\n | /rewardsCountFiltered/CREDIT/COFFEE | renders |\r\n | /rewardsCountFiltered/CREDIT/global | renders |\r\n | /rewardsCountFiltered/CREDIT/COFFEE/PENDING | renders |\r\n | /rewardsCountFiltered/CREDIT/COFFEE/AVAILABLE | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD/global | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING | renders |\r\n | /rewardsCountFiltered/CREDIT/CASH%2FUSD/PENDING/global | renders |\r\n\r\n @motivating\r\n Scenario Outline: Program Goals and Reward units with currencies must be encoded\r\n Given the statType is <statType>\r\n When the stat is queried\r\n Then the stat is filtered by <decodedFilter>\r\n And a value <mayBe> rendered\r\n Examples:\r\n | statType | decodedFilter | may |\r\n | /rewardBalance/CREDIT/COFFEE | COFFEE | is |\r\n | /rewardBalance/CREDIT/CENTS | CENTS | is |\r\n | /rewardBalance/CREDIT/COFFEE%2FUSD | COFFEE/USD | is |\r\n | /rewardBalance/CREDIT/COFFEE/USD | COFFEE | is |\r\n | /rewardBalance/CREDIT/CASH | CASH | is |\r\n | /rewardBalance/CREDIT/CASH/USD | CASH | is |\r\n | /rewardBalance/CREDIT/CASH%2FUSD | CASH/USD | is |\r\n | /programGoals/count/My-Goal | My-Goal | is |\r\n | /programGoals/count/My-Goal/referrals | | isn't |\r\n | /programGoals/count/My-Goal%2Freferrals | My-Goal/referrals | is |\r\n\r\n @motivating\r\n Scenario Outline: User custom fields can be queried\r\n Given the StatType is <statType>\r\n When the stat is queried\r\n Then the value matches that of the users <customField>\r\n Examples:\r\n | statType | customField |\r\n | /customFields/videosShared | videosShared |\r\n | /customFields/totalPurchaseCount | totalPurchaseCount |\r\n\r\n @motivating\r\n Scenario Outline: Some stats can use a global value instead of filtered by program\r\n Given the stat <statName>\r\n Then the global value <mayBe> available\r\n Examples:\r\n | statName | mayBe |\r\n | referralsCount | isn't |\r\n | referralsMonth | isn't |\r\n | referralsWeek | isn't |\r\n | rewardsCount | is |\r\n | rewardsCountFiltered | is |\r\n | integrationRewardsCountFiltered | is |\r\n | rewardsMonth | is |\r\n | rewardsWeek | is |\r\n | rewardsAssigned | is |\r\n | rewardsRedeemed | is |\r\n | rewardsAvailable | is |\r\n | rewardBalance | is |\r\n\r\n @motivating\r\n Scenario Outline: referralsCount stat can be filtered by Converted and Started\r\n Given statType prop is <statType>\r\n Then the stat returned has a <filter>\r\n Examples:\r\n | statType | filter |\r\n | /referralsCount | { programId_eq: programId } |\r\n | /referralsCount/converted | { programId_eq: programId, dateConverted_exists: true } |\r\n | /referralsCount/started | { programId_eq: programId, dateConverted_exists: false } |\r\n\r\n @motivating\r\n Scenario: Program context is used by default to source the programId used for queries\r\n Given a valid \"statType\"\r\n And its not a global stat\r\n And the stat is loaded in an environment for \"program-a\"\r\n And the \"program-id\" prop is not used\r\n When the stat is queried\r\n Then the query is filtered by \"{ programId_eq: 'program-a' }\"\r\n And only results from \"program-a\" are returned\r\n\r\n @motivating\r\n Scenario Outline: ProgramId can be specified to overwrite the program context default\r\n Given a valid \"statType\"\r\n And its not a global stat\r\n And the \"program-id\" prop has <value>\r\n When the stat is queried\r\n Then the query has a <filter>\r\n And only results from <value> are returned\r\n Examples:\r\n | value | filter |\r\n | program-b | { programId_eq: \"program-b\" } |\r\n | program-c | { programId_eq: \"program-c\" } |";
|
|
1670
1670
|
|
|
1671
1671
|
const BigStat_stories = {
|
|
1672
1672
|
title: "Components/Big Stat",
|
|
@@ -4167,7 +4167,7 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
|
|
|
4167
4167
|
TermsAndConditions: TermsAndConditions
|
|
4168
4168
|
});
|
|
4169
4169
|
|
|
4170
|
-
const scenario$6 = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n @motivating\r\n Scenario: Users can request to reset their password\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email is sent\r\n Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n @motivating\r\n Scenario: Users are notified if sending their password reset email fails\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email fails to send\r\n Then the user does not receive a password reset email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n @landmine\r\n Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n Given the user entered an email address that is not associated to an accoun\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n But no email is sent\r\n And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n @motivating\r\n Scenario: Users can resend password reset email\r\n Given a user had previously requested to reset their password\r\n When they enter their email address\r\n And that email address is linked to a previously created account\r\n And they click \"Reset Password\"\r\n Then the user receives a second password reset email\r\n And a success banner is shown stating that their email was sent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they request a password reset email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /resetPassword |\r\n | has | /resetMyPassword | /resetMyPassword |\r\n\r\n @
|
|
4170
|
+
const scenario$6 = "@author:derek\r\n@owner:ian\r\nFeature: Forgot Password\r\n\r\n @motivating\r\n Scenario: Users can request to reset their password\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email is sent\r\n Then a confirmation banner is shown stating a password reset email was sent\r\n\r\n @motivating\r\n Scenario: Users are notified if sending their password reset email fails\r\n Given a user enters their email address\r\n And that email address is linked to a previously created account\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n When the password reset email fails to send\r\n Then the user does not receive a password reset email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n @landmine\r\n Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\r\n Given the user entered an email address that is not associated to an accoun\r\n When they click \"Reset Password\"\r\n Then the button enters a loading state\r\n But no email is sent\r\n And a success banner is shown stating a password reset email was sent if the given email was associated to an account\r\n\r\n @motivating\r\n Scenario: Users can resend password reset email\r\n Given a user had previously requested to reset their password\r\n When they enter their email address\r\n And that email address is linked to a previously created account\r\n And they click \"Reset Password\"\r\n Then the user receives a second password reset email\r\n And a success banner is shown stating that their email was sent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they request a password reset email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /resetPassword |\r\n | has | /resetMyPassword | /resetMyPassword |\r\n\r\n @minutia\r\n Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\r\n Given a user viewing the password reset component\r\n And the component <mayHave> \"login-path\" with <value>\r\n Then they see a \"Sign In\" text button\r\n When they click \"Sign In\"\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /login |\r\n | has | /signin | /signin |";
|
|
4171
4171
|
|
|
4172
4172
|
const PortalForgotPassword_stories = {
|
|
4173
4173
|
title: "Components/Portal Forgot Password",
|
|
@@ -4249,7 +4249,7 @@ const PortalForgotPassword = /*#__PURE__*/Object.freeze({
|
|
|
4249
4249
|
ForgotPasswordSuccess: ForgotPasswordSuccess
|
|
4250
4250
|
});
|
|
4251
4251
|
|
|
4252
|
-
const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n @
|
|
4252
|
+
const scenario$7 = "@author:derek\r\n@owner:ian\r\nFeature: Email Verification\r\n\r\n @minutia\r\n Scenario: User's redirected from registration can re-send their verification email\r\n Given a user has registered\r\n And they have been sent a verification email\r\n When they are redirected to the email verification page\r\n Then a message is displayed\r\n And it reflects that a email has been sent to their email\r\n But they can still re-send the email\r\n When they click to \"Resend-Email\"\r\n Then they receive a verification email\r\n\r\n @motivating\r\n Scenario: Users are notified if sending the email verification message fails\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n When they click to \"Resend-Email\"\r\n Then the button enters a loading state\r\n When an error occurs trying to send the verification email\r\n Then the user does not receive a verification email\r\n And an error banner is shown stating that they should try again\r\n\r\n @motivating\r\n Scenario: Users are notified if sending the email verification message succeeds\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n When they click to \"Resend-Email\"\r\n Then the button enters a loading state\r\n When the email verification message sends\r\n Then the user receives a verification email\r\n And a success banner is shown stating that their email was resent\r\n\r\n @motivating\r\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/verifyEmail\"\r\n Given a user viewing the email verification component\r\n And they have an email stored in session data from registration\r\n And the component <mayHave> \"redirect-path\" with <value>\r\n When they resend their verification email\r\n And they click the link in the email\r\n Then they are redirected to <redirectPath>\r\n Examples:\r\n | mayHave | value | redirectPath |\r\n | doesn't have | N/A | /verifyEmail |\r\n | has | /verifyMyEmail | /verifyMyEmail |\r\n\r\n @motivating\r\n Scenario: Verification status is refetched on refresh\r\n Given a user viewing the email verification component\r\n And they verified their account on another device\r\n And the local storage verification state is outdated\r\n When they refresh the page the component is on\r\n Then their verification status is re-queried\r\n And the local storage managed identity state is updated\r\n And they are redirected to the components \"redirectPath\"\r\n\r\n @motivating\r\n Scenario: Verification status is refetched every 10 seconds\r\n Given a user viewing the email verification component\r\n Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n And the time counts down from 10 to 0\r\n When the counter hits 0\r\n Then their verification status is re-queried\r\n And the text displays a spinner where the \"in {seconds}\" text was\r\n When they verify their account on another device\r\n And the count down hits 0 again from 10\r\n Then their verification status is re-queried\r\n And the local storage managed identity state is updated\r\n And they are redirected to the components \"redirectPath\"\r\n\r\n @minutia\r\n Scenario Outline: Verification refetch text is customizable\r\n Given the email verication has prop \"verification-status-message\" with <verificationPropValue>\r\n And has prop \"verification-loading-message\" with <loadingPropValue>\r\n And a user viewing the component\r\n When it is counting down\r\n Then they see <verificationTextValue>\r\n When it is refetching their verification status\r\n Examples:\r\n | verificationPropValue | verificationTextValue | loadingPropValue | loadingTextValue |\r\n | N/A | Check verification status: in {countdown} | N/A | Check verification status: |\r\n | {countdown} seconds till verification refresh | {countdown} seconds till verification refresh | Checking verification status | Checking verification status |\r\n\r\n\r\n @landmine\r\n # See https://stackoverflow.com/questions/67979609/how-to-prevent-timer-from-being-throttled-by-chrome-when-my-webpage-in-backgroun\r\n Scenario: 10 second countdown pauses when tab is switched\r\n Given a user viewing the email verification component\r\n Then they see text \"Check verification status: in 10\" below the re-send verification button\r\n And the time counts down from 10 to 7\r\n And the user changes to a different tab for 3 seconds\r\n When the user goes back to the verification tab\r\n Then the countdown is 6\r\n When the countdown continues down to 3\r\n Then the refresh timer is triggered\r\n And the countdown is reset to 10\r\n";
|
|
4253
4253
|
|
|
4254
4254
|
const PortalEmailVerification_stories = {
|
|
4255
4255
|
title: "Components/Portal Email Verification",
|
|
@@ -5324,7 +5324,7 @@ const ReferralTableRewardsCell = /*#__PURE__*/Object.freeze({
|
|
|
5324
5324
|
tenRewardsCell: tenRewardsCell
|
|
5325
5325
|
});
|
|
5326
5326
|
|
|
5327
|
-
const scenario$c = "@owner:sam\r\n@author:sam\r\nFeature: Referral Table\r\n\r\n The Referral table component shows users a list of their referrals. The referral table it's self can be customized\r\n with a collection of columns.\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state is shown if there are no referrals\r\n Given a user with no referrals\r\n When they view the referral table\r\n Then no referrals are displayed\r\n And they see an image with a user icon\r\n And \"View your referral details\" in bold\r\n And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\r\n And the pagination buttons are disabled\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state image and text are customizable\r\n Given the referral table has 'sqm-empty' as a child with the following props\r\n | prop | value |\r\n | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\r\n | empty-state-header | View your referral history |\r\n | empty-state-text | See your previous referrals and what you earned! |\r\n And a user with no referrals\r\n When they view the referral table\r\n Then they see no referrals\r\n And they see the SaaSquatch logo\r\n And \"View your referral history\" in bold\r\n And \"See your previous referrals and what you earned!\" below the bolded text\r\n\r\n @
|
|
5327
|
+
const scenario$c = "@owner:sam\r\n@author:sam\r\nFeature: Referral Table\r\n\r\n The Referral table component shows users a list of their referrals. The referral table it's self can be customized\r\n with a collection of columns.\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state is shown if there are no referrals\r\n Given a user with no referrals\r\n When they view the referral table\r\n Then no referrals are displayed\r\n And they see an image with a user icon\r\n And \"View your referral details\" in bold\r\n And \"Track the status of your referrals and rewards earned by referring friends\" below the bolded text\r\n And the pagination buttons are disabled\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state image and text are customizable\r\n Given the referral table has 'sqm-empty' as a child with the following props\r\n | prop | value |\r\n | empty-state-imgage | https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png |\r\n | empty-state-header | View your referral history |\r\n | empty-state-text | See your previous referrals and what you earned! |\r\n And a user with no referrals\r\n When they view the referral table\r\n Then they see no referrals\r\n And they see the SaaSquatch logo\r\n And \"View your referral history\" in bold\r\n And \"See your previous referrals and what you earned!\" below the bolded text\r\n\r\n @minutia\r\n @ui\r\n Scenario: A custom empty state can be provided\r\n Given a user with no referrals\r\n And a custom empty state has been supplied in the \"empty\" slot\r\n When they view the referral table\r\n Then they see the custom empty state\r\n\r\n @motivating\r\n @ui\r\n Scenario: The loading state is shown while referrals 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 referrals exceeds the per page limit\r\n Given the user has <number of referrals>\r\n And the table is configured to show <page limit> referrals 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 referrals\r\n And the pagination button to go to the previous page is disabled on the first page of referrals\r\n Examples:\r\n | number of referrals | 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 referrals\r\n When they view the table\r\n And their window size is smaller than \"799px\"\r\n Then referrals 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 referrals 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 referral 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 referrals\r\n When they view the table\r\n And their window size is smaller than \"799px\"\r\n Then referrals 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 referrals 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, but others can be hidden\r\n Given a referral table with 4 columns\r\n And prop \"hidden-columns\" with <hideColumnValue>\r\n And a user with referrals\r\n When they view the referral table\r\n And their window size is below the tablet breakpoint\r\n Then referral 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: The use who referred the current user can be shown in the table\r\n Given the table is configured with <showReferrer> set to true\r\n And the current user was referrered by <referrer>\r\n Then the first table row on the first page of the table is for <referrer>\r\n\r\n @motivating\r\n Scenario: Only referrals 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 referrals from the program with \"program-id\" are shown\r\n\r\n @motivating\r\n Scenario: Classic program shows only classic referrals\r\n Given the \"program-id\" of the table is set to \"classic\"\r\n Then only classic referrals are shown in the table\r\n\r\n @minutia\r\n @ui\r\n Scenario: Column heading can be hidden\r\n Given the table is configured with \"hide-labels\" set to \"true\"\r\n Then the table is displayed without column headings";
|
|
5328
5328
|
|
|
5329
5329
|
const ReferralTable_stories = {
|
|
5330
5330
|
title: "Components/Referral Table",
|
|
@@ -6098,7 +6098,7 @@ function cartesian(...args) {
|
|
|
6098
6098
|
return r;
|
|
6099
6099
|
}
|
|
6100
6100
|
|
|
6101
|
-
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@
|
|
6101
|
+
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@minutia\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 |";
|
|
6102
6102
|
|
|
6103
6103
|
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 |";
|
|
6104
6104
|
|
|
@@ -9596,7 +9596,7 @@ const EditProfileReadme = "# sqm-portal-profile\r\n\r\n\r\n\r\n<!-- Auto Generat
|
|
|
9596
9596
|
|
|
9597
9597
|
const ResetPasswordReadme = "# sqm-portal-reset-password\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| --------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |\r\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\r\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `\"Confirm Password\"` |\r\n| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `\"Continue\"` |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; reset: boolean; confirmPassword: boolean; oobCodeValidating: boolean; oobCodeValid: boolean; passwordDemoData?: PasswordFieldViewDemoProps; content: { passwordResetHeader: string; resetPasswordHeader: string; continueButtonText: string; resetPasswordButtonText: string; confirmPasswordFieldLabel: string; passwordFieldLabel: string; }; }; }` | `undefined` |\r\n| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `\"/\"` |\r\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `\"/\"` |\r\n| `passwordFieldLabel` | `password-field-label` | | `string` | `\"New Password\"` |\r\n| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `\"Password reset\"` |\r\n| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `\"Reset Password\"` |\r\n| `resetPasswordHeader` | `reset-password-header` | | `string` | `\"Reset your password\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n- [sqm-password-field](../sqm-password-field)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-reset-password --> sqm-form-message\r\n sqm-portal-reset-password --> sqm-password-field\r\n style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
9598
9598
|
|
|
9599
|
-
const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; }; }` | `undefined` |\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\n| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `\"
|
|
9599
|
+
const EmailVerificationReadme = "# sqm-portal-email-verification\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ---------------------------- | ------------------------------ | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; isVerified?: boolean; loadingVerification?: boolean; countdown?: number; }; content?: { email: string; verifyMessage: string; emailVerificationHeader: string; resendEmailButtonText: string; verificationStatusMessage?: string; verificationLoadingMessage?: string; }; }` | `undefined` |\r\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\r\n| `redirectPath` | `redirect-path` | Redirect participants to this page from their verification email. | `string` | `\"/verifyEmail\"` |\r\n| `resendEmailButtonText` | `resend-email-button-text` | | `string` | `\"Re-send Email\"` |\r\n| `verificationLoadingMessage` | `verification-loading-message` | | `string` | `\"Check verification status:\"` |\r\n| `verificationStatusMessage` | `verification-status-message` | | `string` | `\"Check verification status: in {countdown}\"` |\r\n| `verifyMessage` | `verify-message` | | `string` | `\"A verification email was sent to {email}. Please verify your email to continue to the portal. Resending an email will invalidate the previous email.\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-email-verification --> sqm-form-message\r\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
9600
9600
|
|
|
9601
9601
|
const EmailVerifiedReadme = "# sqm-portal-verify-email\r\n\r\n\r\n\r\n<!-- Auto Generated Below -->\r\n\r\n\r\n## Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| ------------ | ------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |\r\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; verified: boolean; }; data?: { oobCode: string; }; }` | `undefined` |\r\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\r\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\r\n\r\n\r\n## Dependencies\r\n\r\n### Depends on\r\n\r\n- [sqm-form-message](../sqm-form-message)\r\n\r\n### Graph\r\n```mermaid\r\ngraph TD;\r\n sqm-portal-verify-email --> sqm-form-message\r\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\r\n```\r\n\r\n----------------------------------------------\r\n\r\n*Built with [StencilJS](https://stenciljs.com/)*\r\n";
|
|
9602
9602
|
|
|
@@ -10023,7 +10023,7 @@ const Hero = /*#__PURE__*/Object.freeze({
|
|
|
10023
10023
|
TwoColumnLoginWithImgElement: TwoColumnLoginWithImgElement
|
|
10024
10024
|
});
|
|
10025
10025
|
|
|
10026
|
-
const scenario$h = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n Background: A user is logged in\r\n Given there is a logged in user\r\n\r\n @motivating\r\n Scenario: Referral code is passed to the iframe as a query parameter\r\n Given the \"iframe-src\" is \"https://example.com\"\r\n And the user has navigated to \"/refer\"\r\n And the user's referral code is \"BOBBYREFER\"\r\n When the iframe content is loaded\r\n Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n @ui\r\n Scenario Outline: The height and width of the iFrame can be controlled via props\r\n Given the \"iframe-src\" is \"https://example.com\"\r\n And the iframe content is 1000x1000\r\n And the \"iframe-height\" is set to <heightValue>\r\n And the \"iframe-width\" is set to <widthValue>\r\n Then the content of the iframe will be displayed with scrollbars\r\n And the dimension of the iFrame displayed will be 500x500\r\n When the \"iframe-height\" is set to <heightValue>\r\n And the \"iframe-width\" is set to <widthValue>\r\n Then the full content of the iframe will be displayed on the page\r\n And the dimension of the iFrame displayed will be 1000x1000\r\n Examples:\r\n | heightValue | widthValue |\r\n | 500px | 500px |\r\n | 50% | 50% |\r\n\r\n @
|
|
10026
|
+
const scenario$h = "@owner:sam\r\n@author:sam\r\n\r\nFeature: Referral Iframe\r\n\r\n Used to provide an external form for submitting referral leads using the current user's referral code\r\n\r\n Background: A user is logged in\r\n Given there is a logged in user\r\n\r\n @motivating\r\n Scenario: Referral code is passed to the iframe as a query parameter\r\n Given the \"iframe-src\" is \"https://example.com\"\r\n And the user has navigated to \"/refer\"\r\n And the user's referral code is \"BOBBYREFER\"\r\n When the iframe content is loaded\r\n Then the iframe url will be \"https://example.com?rsCode=BOBBYREFER\"\r\n\r\n @ui\r\n Scenario Outline: The height and width of the iFrame can be controlled via props\r\n Given the \"iframe-src\" is \"https://example.com\"\r\n And the iframe content is 1000x1000\r\n And the \"iframe-height\" is set to <heightValue>\r\n And the \"iframe-width\" is set to <widthValue>\r\n Then the content of the iframe will be displayed with scrollbars\r\n And the dimension of the iFrame displayed will be 500x500\r\n When the \"iframe-height\" is set to <heightValue>\r\n And the \"iframe-width\" is set to <widthValue>\r\n Then the full content of the iframe will be displayed on the page\r\n And the dimension of the iFrame displayed will be 1000x1000\r\n Examples:\r\n | heightValue | widthValue |\r\n | 500px | 500px |\r\n | 50% | 50% |\r\n\r\n @minutia\r\n Scenario Outline: The iFrame will fail fast if a iFrame source isn't provided\r\n Given \"iframe-src\" <mayBeAnAttribute>\r\n And it <mayHaveValue>\r\n When a user views the referral iFrame component\r\n Then an alert with an error message is displayed in place of the iFrame\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information will be displayed\r\n | component being used |\r\n | missing attribute(s) |\r\n\r\n Examples:\r\n | mayBeAnAttribute | mayHaveValue |\r\n | is not an attribute | N/A |\r\n | is an attribute | \"\" |\r\n | is an attribute | |";
|
|
10027
10027
|
|
|
10028
10028
|
const ReferralIframe_stories = {
|
|
10029
10029
|
title: "Components/Referral Iframe",
|
|
@@ -10106,7 +10106,7 @@ const NameFields$1 = /*#__PURE__*/Object.freeze({
|
|
|
10106
10106
|
NameFieldsWithErrors: NameFieldsWithErrors
|
|
10107
10107
|
});
|
|
10108
10108
|
|
|
10109
|
-
const scenario$j = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n Background: A user is on the portal registration page\r\n Given a user is viewing the \"/register\"\r\n And \"/register\" contains the registration form\r\n And the registration form has the following fields\r\n | fields |\r\n | first name |\r\n | last name |\r\n | email |\r\n | password |\r\n | checkbox |\r\n\r\n @motivating\r\n Scenario: Checkbox is required by default\r\n Given the user is filling out the registration form\r\n And the name fields have valid input\r\n And the email field has valid input\r\n And the password field has valid input\r\n And the checkbox is not checked\r\n When they try to register\r\n Then the checkbox is highlighted in red\r\n And the error message says \"Must be checked\"\r\n\r\n @landmine\r\n Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n Given the register form has the following html\r\n \"\"\"\r\n <sqm-portal-register>\r\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n <sqm-checkbox-field\r\n slot=\"formData\"\r\n checkbox-label=\"I am not a robot\"\r\n error-message=\"Cannot be a robot\"\r\n checkbox-name=\"isHuman\"\r\n ></sqm-checkbox-field>\r\n <div slot=\"terms\">\r\n <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n </div>\r\n </sqm-portal-register>\r\n \"\"\"\r\n And the checkboxes are checked\r\n When the user tries to register\r\n Then the form is submitted\r\n But no field with key \"isHuman\" is included in the form data\r\n\r\n @motivating\r\n Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n Given the register form has the following html\r\n \"\"\"\r\n <sqm-portal-register>\r\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n <sqm-checkbox-field\r\n slot=\"formData\"\r\n checkbox-label=\"I am not a robot\"\r\n error-message=\"Cannot be a robot\"\r\n checkbox-name=\"isHuman\"\r\n ></sqm-checkbox-field>\r\n <div slot=\"terms\">\r\n <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n </div>\r\n </sqm-portal-register>\r\n \"\"\"\r\n And the checkboxes are not checked\r\n When the user tries to register\r\n Then both checkboxes are bordered in red\r\n And the checkboxes have different error messages\r\n When the user checks the boxes\r\n And tries to register\r\n Then the form is submitted\r\n And the following fields are included in the form data\r\n | feilds |\r\n | isHuman |\r\n | myCheckbox |\r\n\r\n @motivating\r\n Scenario: Checkboxes can be optional\r\n Given the register form has the following html\r\n \"\"\"\r\n <sqm-portal-register>\r\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n <sqm-checkbox-field\r\n slot=\"formData\"\r\n checkbox-label=\"I am not a robot\"\r\n checkbox-optional=\"true\"\r\n checkbox-name=\"isHuman\"\r\n />\r\n </sqm-portal-register>\r\n \"\"\"\r\n And the checkbox is not checked\r\n When the user tries to register\r\n Then there is no error for the checkbox\r\n\r\n @
|
|
10109
|
+
const scenario$j = "@owner:sam\r\n@author:sam\r\nFeature: Checkbox Field\r\n\r\n Field to be used to be used as a checkbox during registration. A motivating use case is to use this component as a terms\r\n and conditions field, to sastisfy legal requirements that a customer might have for their end users.\r\n\r\n Background: A user is on the portal registration page\r\n Given a user is viewing the \"/register\"\r\n And \"/register\" contains the registration form\r\n And the registration form has the following fields\r\n | fields |\r\n | first name |\r\n | last name |\r\n | email |\r\n | password |\r\n | checkbox |\r\n\r\n @motivating\r\n Scenario: Checkbox is required by default\r\n Given the user is filling out the registration form\r\n And the name fields have valid input\r\n And the email field has valid input\r\n And the password field has valid input\r\n And the checkbox is not checked\r\n When they try to register\r\n Then the checkbox is highlighted in red\r\n And the error message says \"Must be checked\"\r\n\r\n @landmine\r\n Scenario: Checkboxes with the same \"checkbox-name\" are not submitted in the form data\r\n Given the register form has the following html\r\n \"\"\"\r\n <sqm-portal-register>\r\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n <sqm-checkbox-field\r\n slot=\"formData\"\r\n checkbox-label=\"I am not a robot\"\r\n error-message=\"Cannot be a robot\"\r\n checkbox-name=\"isHuman\"\r\n ></sqm-checkbox-field>\r\n <div slot=\"terms\">\r\n <sqm-checkbox-field checkbox-name=\"isHuman\"></sqm-checkbox-field>\r\n </div>\r\n </sqm-portal-register>\r\n \"\"\"\r\n And the checkboxes are checked\r\n When the user tries to register\r\n Then the form is submitted\r\n But no field with key \"isHuman\" is included in the form data\r\n\r\n @motivating\r\n Scenario: Multiple checkboxes need different \"checkbox-name\" values\r\n Given the register form has the following html\r\n \"\"\"\r\n <sqm-portal-register>\r\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n <sqm-checkbox-field\r\n slot=\"formData\"\r\n checkbox-label=\"I am not a robot\"\r\n error-message=\"Cannot be a robot\"\r\n checkbox-name=\"isHuman\"\r\n ></sqm-checkbox-field>\r\n <div slot=\"terms\">\r\n <sqm-checkbox-field checkbox-name=\"myCheckbox\"></sqm-checkbox-field>\r\n </div>\r\n </sqm-portal-register>\r\n \"\"\"\r\n And the checkboxes are not checked\r\n When the user tries to register\r\n Then both checkboxes are bordered in red\r\n And the checkboxes have different error messages\r\n When the user checks the boxes\r\n And tries to register\r\n Then the form is submitted\r\n And the following fields are included in the form data\r\n | feilds |\r\n | isHuman |\r\n | myCheckbox |\r\n\r\n @motivating\r\n Scenario: Checkboxes can be optional\r\n Given the register form has the following html\r\n \"\"\"\r\n <sqm-portal-register>\r\n <sqm-name-fields slot=\"formData\"></sqm-name-fields>\r\n <sqm-checkbox-field\r\n slot=\"formData\"\r\n checkbox-label=\"I am not a robot\"\r\n checkbox-optional=\"true\"\r\n checkbox-name=\"isHuman\"\r\n />\r\n </sqm-portal-register>\r\n \"\"\"\r\n And the checkbox is not checked\r\n When the user tries to register\r\n Then there is no error for the checkbox\r\n\r\n @minutia\r\n Scenario Outline: Validation error message is configurable\r\n The error message string is evaluated as an ICU string, but currently is provided no context\r\n Given the checkbox is required\r\n And the checkbox has prop \"error-message\" with <propValue>\r\n When the user tries to register\r\n But they havent checked the checkbox\r\n Then they see <errorMessage> below\r\n Examples:\r\n | propValue | errorMessage |\r\n | | Must be checked |\r\n | My Custom Message | My Custom Message |\r\n\r\n @motivating\r\n Scenario Outline: Checkbox text and link are configurable\r\n Given the checkbox has the following prop values\r\n | prop | value |\r\n | checkbox-label | <labelText> |\r\n | checkbox-label-link | <labelLink> |\r\n | checkbox-label-link-text | <labelLinkText> |\r\n When the user views the checkbox\r\n Then they see <text>\r\n And when they click <labelLinkText> they are redirected to <labelLink>\r\n #First example below is the defaults set by the controller\r\n Examples:\r\n | labelText | labelLinkText | labelLink | text |\r\n | By signing up you agree to the {labelLink} | Terms and Conditions | https://example.com | By signing up you agree to the Terms and Conditions |\r\n | Read our {labelLink} before registration | Terms of Service | https://example.com/terms | Read our Terms of Service before registration |\r\n | By registering you agree to our terms and conditions | N/A | N/A | By registering you agree to our terms and conditions |\r\n\r\n @motivating\r\n Scenario: The form field name attribute is configurable\r\n Given the checkbox has prop \"checkbox-name\" with value \"myCheckBox\"\r\n When the user checks the box\r\n And they register\r\n Then the boolean value of the checkbox is submitted under \"myCheckBox\" field\r\n\r\n @minutia\r\n Scenario Outline: The checkbox field component fails fast if a checkbox name isn't provided\r\n Given the checkbox <mayHave> prop \"checkbox-name\"\r\n And it <mayHavePropValue>\r\n When a user views the checkbox\r\n Then an alert with an error message is displayed in place of the checkbox\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information is displayed\r\n | information |\r\n | component being used |\r\n | missing attribute(s) |\r\n Examples:\r\n | mayBeAnAttribute | mayHavePropValue |\r\n | doesn't have | N/A |\r\n | has | \"\" |\r\n | has | |";
|
|
10110
10110
|
|
|
10111
10111
|
const CheckboxField_stories = {
|
|
10112
10112
|
title: "Components/Checkbox Field",
|
|
@@ -10400,7 +10400,7 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
|
|
|
10400
10400
|
MissingName: MissingName$1
|
|
10401
10401
|
});
|
|
10402
10402
|
|
|
10403
|
-
const scenario$k = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n This component is used as a custom registration field during registration. The field can be text,\r\n a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n through the Managed Identity Service and upserted on the user after registration.\r\n\r\n Background: A user exists and is viewing the hosted portal registration\r\n Given a user is viewing \"/register\"\r\n And \"/register\" contains the registration form\r\n And the registration form has a custom input field\r\n\r\n @motivating\r\n Scenario Outline: Input fields are required by default but can be optional\r\n Given the input has prop \"field-optional\" with <value>\r\n And the input is empty\r\n When the user tries to register\r\n Then the input <mayBe> highlighted in red\r\n And an error message <mayAppear> in red below\r\n And form submission <mayBe> blocked\r\n Examples:\r\n | value | mayBe | mayAppear |\r\n | false | is | appears |\r\n | | is | appears |\r\n | true | isn't | doesn't appear |\r\n\r\n @motivating\r\n Scenario: Input field labels are configurable\r\n Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n When the user views the registration form\r\n Then they see the input field\r\n And it has label \"My Custom Input\" above the input\r\n\r\n @
|
|
10403
|
+
const scenario$k = "@author:derek\r\n@owner:derek\r\nFeature: Form Input Field\r\n\r\n This component is used as a custom registration field during registration. The field can be text,\r\n a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\r\n through the Managed Identity Service and upserted on the user after registration.\r\n\r\n Background: A user exists and is viewing the hosted portal registration\r\n Given a user is viewing \"/register\"\r\n And \"/register\" contains the registration form\r\n And the registration form has a custom input field\r\n\r\n @motivating\r\n Scenario Outline: Input fields are required by default but can be optional\r\n Given the input has prop \"field-optional\" with <value>\r\n And the input is empty\r\n When the user tries to register\r\n Then the input <mayBe> highlighted in red\r\n And an error message <mayAppear> in red below\r\n And form submission <mayBe> blocked\r\n Examples:\r\n | value | mayBe | mayAppear |\r\n | false | is | appears |\r\n | | is | appears |\r\n | true | isn't | doesn't appear |\r\n\r\n @motivating\r\n Scenario: Input field labels are configurable\r\n Given the input has prop \"field-label\" with value \"My Custom Input\"\r\n When the user views the registration form\r\n Then they see the input field\r\n And it has label \"My Custom Input\" above the input\r\n\r\n @minutia\r\n Scenario Outline: The validation error message is configurable\r\n The error message string is evaluated as an ICU string, but currently is provided no context\r\n Given the input is required\r\n And it has prop \"error-message\" with <value>\r\n When the user tries to register\r\n But they haven't filled in the input\r\n Then they see <errorMessage> below\r\n Examples:\r\n | value | errorMessage |\r\n | | Cannot be empty |\r\n | My Custom Message | My Custom Message |\r\n\r\n @motivating\r\n Scenario: Form data attribute name is configurable\r\n Given the input has prop \"field-name\" with value \"myCustomField\"\r\n When the user types \"testing testing\" into the input\r\n And they register\r\n Then \"testing testing\" is submitted under \"myCustomField\" in the form data\r\n\r\n @motivating\r\n Scenario Outline: The input field is a text input by default\r\n Given the input <mayHave> prop \"field-type\" with <value>\r\n When the user views the input field\r\n Then it is a text input\r\n Examples:\r\n | mayHave | value |\r\n | has | text |\r\n | doesn't have | |\r\n\r\n @motivating\r\n Scenario: Date type inputs are supported\r\n Given the input has prop \"field-type\" \"date\"\r\n When the user views the input field\r\n Then they see \"mm/dd/yyyy\" as a placeholder\r\n And they see a calendar icon on the right\r\n When they start typing a date\r\n Then it maintains the \"mm/dd/yyyy\" format\r\n When they click the calendar icon\r\n Then a dropdown appears\r\n And they see a calendar\r\n When they select a date\r\n Then it is applied to the input\r\n\r\n @landmine\r\n Scenario: The clear text button in the date picker does not clear the date\r\n Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\r\n Given the input has prop \"field-type\" \"date\"\r\n And the user has entered a date\r\n When they click the calendar icon\r\n And click the 'clear' text button\r\n Then their selected date is not cleared\r\n\r\n @motivating\r\n Scenario: Phone number type inputs are supported\r\n Given the input has prop \"field-type\" with value \"tel\"\r\n When the user starts typing a phone number in the input\r\n Then it is formatted into the following form \"(XXX) XXX-XXXX\"\r\n When they pre-fix their phone number with a \"1\"\r\n Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\r\n\r\n @landmine\r\n Scenario: Telephone formatting is removed after 10 numbers\r\n Given a user using a phone number input field\r\n And they entered their 10 character phone number\r\n And it was not prefixed with a 1\r\n When they add another character\r\n Then the formatting is removed\r\n\r\n @landmine\r\n Scenario Outline: Input values are always recorded as strings in the form data\r\n Given the input has prop \"field-type\" with <value>\r\n And it has a \"field-name\"\r\n When the user inputs <formInput>\r\n And they register\r\n Then <formData> is recorded in the form data as a string\r\n Examples:\r\n | value | formInput | formData |\r\n | text | Hello there | Hello there |\r\n | date | 05/07/2021 | 2021-05-07 |\r\n | tel | (250) 234-9877 | (250) 234-9877 |\r\n\r\n @minutia\r\n Scenario Outline: The input field component fails fast if a field name isn't provided\r\n Given the input <mayHave> prop \"field-name\"\r\n And it <mayHavePropValue>\r\n When a user views the input\r\n Then an alert with an error message is displayed in place of the input\r\n And it has a details section\r\n When \"More details\" is clicked\r\n Then the following information is displayed\r\n | information |\r\n | component being used |\r\n | missing attribute(s) |\r\n Examples:\r\n | mayBeAnAttribute | mayHavePropValue |\r\n | doesn't have | N/A |\r\n | has | \"\" |\r\n | has | |";
|
|
10404
10404
|
|
|
10405
10405
|
const InputField_stories = {
|
|
10406
10406
|
title: "Components/Input Field",
|
|
@@ -10585,7 +10585,7 @@ const UseInputField = /*#__PURE__*/Object.freeze({
|
|
|
10585
10585
|
MissingName: MissingName$2
|
|
10586
10586
|
});
|
|
10587
10587
|
|
|
10588
|
-
const scenario$l = "@author:derek\r\n@owner:derek\r\nFeature: Reward Exchange List\r\n\r\n The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\r\n It populates a list from the reward exchange rules set up on a given tenant.\r\n\r\n Background:\r\n Given a tenant with reward exchange rules\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state is shown if there are no visible exchanges\r\n Given a user with no visible exchanges\r\n When they view the reward exchange\r\n Then no exchange options are displayed\r\n And they see an image of a present\r\n And \"Redeem Rewards\" in bold\r\n And \"Use your points to redeem rewards once they become available\" 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 visible exchanges\r\n And a custom empty state has been supplied in the \"empty\" slot\r\n When they view the reward exchange\r\n Then they see the custom empty state\r\n\r\n @motivating\r\n @ui\r\n Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\r\n Given a user\r\n When they load the reward exchange list\r\n Then they see a loading Skeleton\r\n And it has 8 skeleton cards\r\n When the reward exchange rules have loaded\r\n Then the skeleton is replaced with reward exchange options\r\n\r\n @motivating\r\n Scenario: An error banner appears when the reward exchange list fails to load\r\n Given a user trying to view the reward exchange list\r\n But it fails to load\r\n Then an error banner is displayed\r\n And it displays \"Unable to load reward exchange list. Please try again\"\r\n\r\n @motivating\r\n @ui\r\n Scenario: The exchange progress bar progresses through the exchange process\r\n Given a user who is eligible for the tenants reward exchange rules\r\n When they view the reward exchange list\r\n Then the process bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with green outline, white fill and number 1 in green |\r\n | Step 2 `Select` title in grey |\r\n | Step 2 circle with grey fill and number 2 in white |\r\n | Step 3 `Confirm` title in grey |\r\n | Step 3 circle with grey fill and number 3 in white |\r\n | lines between all steps are greyed out |\r\n When they continue to the selection page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with green outline, white fill and number 2 in green |\r\n | Step 3 `Confirm` title in grey |\r\n | Step 3 circle with grey fill and number 3 in white |\r\n | Green line between step 1 and 2 |\r\n | Grey line between step 2 and 3 |\r\n When they continue to the confirmation page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with white checkmark and green fill |\r\n | Step 3 `Confirm` title in black |\r\n | Step 3 circle with green outline, white fill and number 3 in green |\r\n | Green line between all steps |\r\n When they continue to the redemption page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with white checkmark and green fill |\r\n | Step 3 `Confirm` title in black |\r\n | Step 3 circle with white checkmark and green fill |\r\n | Green line between all steps |\r\n\r\n @motivating\r\n Scenario: Users must choose a reward exchange option to continue to the selection page\r\n Given a user who is eligible for the tenants reward exchange rules\r\n When they view the reward exchange list\r\n Then the 'Continue' button is disabled\r\n When they select a reward exchange card\r\n Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\r\n And the continue button is no longer disabled\r\n When they click \"Continue\"\r\n Then they are brought to the selection page\r\n\r\n @motivating\r\n @ui\r\n Scenario: Reward exchange rule names and images are used in the reward exchange cards\r\n Given a tenant reward exchange rule\r\n And it has name \"My Visa Exchange Rule\"\r\n And it has an image\r\n When a user views the reward exchange list\r\n Then they see a exchange card with title \"My Visa Exchange Rule\"\r\n And the exchange image on the left hand side of the card\r\n\r\n @motivating\r\n Scenario Outline: Reward exchange source values are displayed on reward exchange cards\r\n Given a <type> reward exchange rule\r\n When a user views the reward exchange list\r\n Then they see <text> under the name on the exchange option cards\r\n And the pretty values are localized to a user locale\r\n Examples:\r\n | type | text |\r\n | FIXED_GLOBAL_REWARD | the exchange source pretty value |\r\n | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n | VARIABLE_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n | VARIABLE_CREDIT_REWARD | the exchange source min pretty value to the source max pretty value |\r\n\r\n @motivating\r\n Scenario Outline: Reward exchange cards can display customized error messages\r\n Given a reward exchange rule\r\n And it has <availabilityPredicate>\r\n And the reward exchange list has prop \"not-available-error\" with <value>\r\n When the user views the reward exchange list\r\n Then the card for the reward exchange rule is disabled\r\n And <message> is displayed\r\n Examples:\r\n | availabilityPredicate | value | message |\r\n | 'champion' in user.segments ? \"NOT_CHAMPION\" : true | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} } | Sorry must be a champion! |\r\n | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\r\n\r\n @motivating\r\n Scenario: Exchange options are disabled if they put a user over the W9 limit\r\n Given a user who is approaching their W9 limit\r\n And a reward exchange rule\r\n And its destination reward has a US taxable value that would put the user over their limit\r\n When they view the reward exchange list\r\n Then the reward exchange card is disabled\r\n And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\r\n And the text is orange\r\n And the icon is orange\r\n\r\n @motivating\r\n Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\r\n Given a <type> reward exchange rule\r\n But the user lacks enough credit to exchange for it\r\n When they view the reward exchange list\r\n Then the reward exchange card is disabled\r\n And a <text> error message is displayed on to the right of a exclamation triangle icon\r\n And the text is orange\r\n And the icon is orange\r\n Examples:\r\n | type | text |\r\n | FIXED_GLOBAL_REWARD | {prettySourceValue} required |\r\n | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n | VARIABLE_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n | VARIABLE_CREDIT_REWARD | {prettySourceMinValue} required |\r\n\r\n @motivating\r\n Scenario: Users can go back to the Rewards page from the Select page\r\n Given a user viewing the Select page\r\n Then they see a \"Cancel\" text button\r\n And a \"Continue to confirmation\" brand colour button in the bottom right corner\r\n When they click \"Cancel\"\r\n Then they return to the Rewards page\r\n\r\n @motivating\r\n Scenario: Users can go back to the Select Page from the Confirm page\r\n Given a user viewing the Confirm page\r\n Then they see a \"Back\" text button\r\n And a \"Redeem\" brand colour button in the bottom right corner\r\n When they click \"Back\"\r\n Then they return to the Select Page\r\n\r\n @motivating\r\n Scenario: Reward rules with visibility predicates that evaluates to false are not shown\r\n Given a tenant reward exchange rule with visibility predicates that evaluates to false\r\n When a user views the reward exchange list\r\n Then they do not see the card for that reward exchange rule\r\n\r\n @motivating\r\n Scenario Outline: Users can choose their reward option for variable rewards on the Select page\r\n Given a <type> exchange rule\r\n And it has the following fields\r\n | fields |\r\n | name |\r\n | description |\r\n | image |\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see the exchange rule image on the left hand side\r\n And on the right hand side they see the following in this order from top to bottom\r\n | elements |\r\n | exchange name |\r\n | exchange description |\r\n | select list with all exchange options using pretty values, destination reward above source reward |\r\n Examples:\r\n | type |\r\n | STEPPED_FIXED_GLOBAL_REWARD |\r\n | VARIABLE_GLOBAL_REWARD |\r\n | VARIABLE_CREDIT_REWARD |\r\n\r\n @motivating\r\n Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\r\n Given a \"FIXED_GLOBAL_REWARD\" exchange rule\r\n And it has the following fields\r\n | fields |\r\n | name |\r\n | description |\r\n | image |\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see the exchange rule image on the left hand side\r\n And on the right hand side they see the following in this order from top to bottom\r\n | elements |\r\n | exchange name |\r\n | exchange source pretty value displayed in brand colour |\r\n | exchange description |\r\n\r\n @motivating\r\n Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\r\n Given a <type> exchange rule\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see a drop down with all the reward exchange selections\r\n When they click on the drop down\r\n But they are not eligible for all of the exchanges options <dueToReason>\r\n Then the ineligble options are disabled\r\n And under the source value is <text>\r\n Examples:\r\n | type | dueToReason | text |\r\n | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | VARIABLE_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | VARIABLE_CREDIT_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | STEPPED_FIXED_GLOBAL_REWARD | W9 | US Tax Limit |\r\n | VARIABLE_GLOBAL_REWARD | W9 | US Tax Limit |\r\n | VARIABLE_CREDIT_REWARD | W9 | US Tax Limit |\r\n\r\n @motivating\r\n Scenario Outline: The Confirm page allows users to view their exchange before committing\r\n Given a <type> exchange rule\r\n When a user views the reward exchange list\r\n And they select the exchange\r\n And they progress to Confirm page\r\n Then they see a row with title \"Reward\"\r\n And it contains the exchange name\r\n And it contains the exchange image\r\n And they <maySee> a row with title \"Reward Amount\"\r\n And it <mayContain> <amountTitle>\r\n And they see a row with title \"Cost to Redeem\"\r\n And it contains the source reward pretty value in bolded text\r\n Examples:\r\n | type | maySee | mayContain | amountTitle |\r\n | FIXED_GLOBAL_REWARD | don't | doesn't contain | N/A |\r\n | VARIABLE_GLOBAL_REWARD | see | contains | the pretty destination value |\r\n | STEPPED_FIXED_GLOBAL_REWARD | see | contains | the pretty destination value |\r\n | VARIABLE_CREDIT_REWARD | see | contains | the pretty destination value |\r\n\r\n @motivating\r\n Scenario: An error banner is displayed if an error occurs during redemeption\r\n Given a user has selected a reward to exchange\r\n And is on the confirmation page\r\n When they click \"Redeem\"\r\n But an error occurs\r\n Then an error banner appears\r\n And it contains details about the error\r\n And the reward exchange is not completed\r\n\r\n @motivating\r\n Scenario: Confetti is displayed when a reward exchange succeeds\r\n Given a user has selected a reward to exchange\r\n And they are on the confirmation page\r\n When they click \"Redeem\"\r\n And the exchange is successful\r\n Then they see confetti centered on the success page\r\n And they see text describing what they exchanged for their new reward\r\n And they see a \"Done\" brand colour button\r\n When they click \"Done\"\r\n Then they see the Rewards page\r\n\r\n @motivating\r\n Scenario: Fuel tank codes are shown when a reward exchange succeeds\r\n Given a user has selected to exchange for a fuel tank reward\r\n When they complete the reward exchange\r\n And are on the success page\r\n Then they see a textbox with their fuel tank code\r\n And a clipboard icon\r\n When they click the clipboard icon\r\n Then their fuel tank code is copied to their clipboard\r\n\r\n @motivating\r\n Scenario Outline: Users can exchange for any type of reward\r\n Given a <type> reward exchange rule for a <reward>\r\n And a user who has enough source credit to exchange for the reward\r\n When they go through the exchange flow\r\n And exchange for their reward\r\n Then their credit is exchanged for the <reward>\r\n Examples:\r\n | type | reward |\r\n | FIXED_GLOBAL_REWARD | gift card |\r\n | FIXED_GLOBAL_REWARD | fuel tank code |\r\n | FIXED_GLOBAL_REWARD | discount |\r\n | FIXED_GLOBAL_REWARD | credit reward |\r\n | STEPPED_FIXED_GLOBAL_REWARD | gift card |\r\n | STEPPED_FIXED_GLOBAL_REWARD | discount |\r\n | STEPPED_FIXED_GLOBAL_REWARD | credit reward |\r\n | VARIABLE_GLOBAL_REWARD | gift card |\r\n | VARIABLE_GLOBAL_REWARD | discount |\r\n | VARIABLE_GLOBAL_REWARD | credit reward |\r\n | VARIABLE_CREDIT_REWARD | credit reward |";
|
|
10588
|
+
const scenario$l = "@author:derek\r\n@owner:derek\r\nFeature: Reward Exchange List\r\n\r\n The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\r\n It populates a list from the reward exchange rules set up on a given tenant.\r\n\r\n Background:\r\n Given a tenant with reward exchange rules\r\n\r\n @motivating\r\n @ui\r\n Scenario: The empty state is shown if there are no visible exchanges\r\n Given a user with no visible exchanges\r\n When they view the reward exchange\r\n Then no exchange options are displayed\r\n And they see an image of a present\r\n And \"Redeem Rewards\" in bold\r\n And \"Use your points to redeem rewards once they become available\" below the bolded text\r\n And the pagination buttons are disabled\r\n\r\n @minutia\r\n @ui\r\n Scenario: A custom empty state can be provided\r\n Given a user with no visible exchanges\r\n And a custom empty state has been supplied in the \"empty\" slot\r\n When they view the reward exchange\r\n Then they see the custom empty state\r\n\r\n @motivating\r\n @ui\r\n Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\r\n Given a user\r\n When they load the reward exchange list\r\n Then they see a loading Skeleton\r\n And it has 8 skeleton cards\r\n When the reward exchange rules have loaded\r\n Then the skeleton is replaced with reward exchange options\r\n\r\n @motivating\r\n Scenario: An error banner appears when the reward exchange list fails to load\r\n Given a user trying to view the reward exchange list\r\n But it fails to load\r\n Then an error banner is displayed\r\n And it displays \"Unable to load reward exchange list. Please try again\"\r\n\r\n @motivating\r\n @ui\r\n Scenario: The exchange progress bar progresses through the exchange process\r\n Given a user who is eligible for the tenants reward exchange rules\r\n When they view the reward exchange list\r\n Then the process bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with green outline, white fill and number 1 in green |\r\n | Step 2 `Select` title in grey |\r\n | Step 2 circle with grey fill and number 2 in white |\r\n | Step 3 `Confirm` title in grey |\r\n | Step 3 circle with grey fill and number 3 in white |\r\n | lines between all steps are greyed out |\r\n When they continue to the selection page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with green outline, white fill and number 2 in green |\r\n | Step 3 `Confirm` title in grey |\r\n | Step 3 circle with grey fill and number 3 in white |\r\n | Green line between step 1 and 2 |\r\n | Grey line between step 2 and 3 |\r\n When they continue to the confirmation page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with white checkmark and green fill |\r\n | Step 3 `Confirm` title in black |\r\n | Step 3 circle with green outline, white fill and number 3 in green |\r\n | Green line between all steps |\r\n When they continue to the redemption page\r\n Then the progress bar displays the following elements\r\n | elements |\r\n | Step 1 `Rewards` title in black |\r\n | Step 1 circle with white checkmark and green fill |\r\n | Step 2 `Select` title in black |\r\n | Step 2 circle with white checkmark and green fill |\r\n | Step 3 `Confirm` title in black |\r\n | Step 3 circle with white checkmark and green fill |\r\n | Green line between all steps |\r\n\r\n @motivating\r\n Scenario: Users must choose a reward exchange option to continue to the selection page\r\n Given a user who is eligible for the tenants reward exchange rules\r\n When they view the reward exchange list\r\n Then the 'Continue' button is disabled\r\n When they select a reward exchange card\r\n Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\r\n And the continue button is no longer disabled\r\n When they click \"Continue\"\r\n Then they are brought to the selection page\r\n\r\n @motivating\r\n @ui\r\n Scenario: Reward exchange rule names and images are used in the reward exchange cards\r\n Given a tenant reward exchange rule\r\n And it has name \"My Visa Exchange Rule\"\r\n And it has an image\r\n When a user views the reward exchange list\r\n Then they see a exchange card with title \"My Visa Exchange Rule\"\r\n And the exchange image on the left hand side of the card\r\n\r\n @motivating\r\n Scenario Outline: Reward exchange source values are displayed on reward exchange cards\r\n Given a <type> reward exchange rule\r\n When a user views the reward exchange list\r\n Then they see <text> under the name on the exchange option cards\r\n And the pretty values are localized to a user locale\r\n Examples:\r\n | type | text |\r\n | FIXED_GLOBAL_REWARD | the exchange source pretty value |\r\n | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n | VARIABLE_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\r\n | VARIABLE_CREDIT_REWARD | the exchange source min pretty value to the source max pretty value |\r\n\r\n @motivating\r\n Scenario Outline: Reward exchange cards can display customized error messages\r\n Given a reward exchange rule\r\n And it has <availabilityPredicate>\r\n And the reward exchange list has prop \"not-available-error\" with <value>\r\n When the user views the reward exchange list\r\n Then the card for the reward exchange rule is disabled\r\n And <message> is displayed\r\n Examples:\r\n | availabilityPredicate | value | message |\r\n | 'champion' in user.segments ? \"NOT_CHAMPION\" : true | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} } | Sorry must be a champion! |\r\n | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\r\n\r\n @motivating\r\n Scenario: Exchange options are disabled if they put a user over the W9 limit\r\n Given a user who is approaching their W9 limit\r\n And a reward exchange rule\r\n And its destination reward has a US taxable value that would put the user over their limit\r\n When they view the reward exchange list\r\n Then the reward exchange card is disabled\r\n And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\r\n And the text is orange\r\n And the icon is orange\r\n\r\n @motivating\r\n Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\r\n Given a <type> reward exchange rule\r\n But the user lacks enough credit to exchange for it\r\n When they view the reward exchange list\r\n Then the reward exchange card is disabled\r\n And a <text> error message is displayed on to the right of a exclamation triangle icon\r\n And the text is orange\r\n And the icon is orange\r\n Examples:\r\n | type | text |\r\n | FIXED_GLOBAL_REWARD | {prettySourceValue} required |\r\n | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n | VARIABLE_GLOBAL_REWARD | {prettySourceMinValue} required |\r\n | VARIABLE_CREDIT_REWARD | {prettySourceMinValue} required |\r\n\r\n @motivating\r\n Scenario: Users can go back to the Rewards page from the Select page\r\n Given a user viewing the Select page\r\n Then they see a \"Cancel\" text button\r\n And a \"Continue to confirmation\" brand colour button in the bottom right corner\r\n When they click \"Cancel\"\r\n Then they return to the Rewards page\r\n\r\n @motivating\r\n Scenario: Users can go back to the Select Page from the Confirm page\r\n Given a user viewing the Confirm page\r\n Then they see a \"Back\" text button\r\n And a \"Redeem\" brand colour button in the bottom right corner\r\n When they click \"Back\"\r\n Then they return to the Select Page\r\n\r\n @motivating\r\n Scenario: Reward rules with visibility predicates that evaluates to false are not shown\r\n Given a tenant reward exchange rule with visibility predicates that evaluates to false\r\n When a user views the reward exchange list\r\n Then they do not see the card for that reward exchange rule\r\n\r\n @motivating\r\n Scenario Outline: Users can choose their reward option for variable rewards on the Select page\r\n Given a <type> exchange rule\r\n And it has the following fields\r\n | fields |\r\n | name |\r\n | description |\r\n | image |\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see the exchange rule image on the left hand side\r\n And on the right hand side they see the following in this order from top to bottom\r\n | elements |\r\n | exchange name |\r\n | exchange description |\r\n | select list with all exchange options using pretty values, destination reward above source reward |\r\n Examples:\r\n | type |\r\n | STEPPED_FIXED_GLOBAL_REWARD |\r\n | VARIABLE_GLOBAL_REWARD |\r\n | VARIABLE_CREDIT_REWARD |\r\n\r\n @motivating\r\n Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\r\n Given a \"FIXED_GLOBAL_REWARD\" exchange rule\r\n And it has the following fields\r\n | fields |\r\n | name |\r\n | description |\r\n | image |\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see the exchange rule image on the left hand side\r\n And on the right hand side they see the following in this order from top to bottom\r\n | elements |\r\n | exchange name |\r\n | exchange source pretty value displayed in brand colour |\r\n | exchange description |\r\n\r\n @motivating\r\n Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\r\n Given a <type> exchange rule\r\n When a user views the reward exchange list\r\n And they progress to the Select page for this exchange\r\n Then they see a drop down with all the reward exchange selections\r\n When they click on the drop down\r\n But they are not eligible for all of the exchanges options <dueToReason>\r\n Then the ineligble options are disabled\r\n And under the source value is <text>\r\n Examples:\r\n | type | dueToReason | text |\r\n | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | VARIABLE_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | VARIABLE_CREDIT_REWARD | due to insufficent source value | {prettySourceValue} required |\r\n | STEPPED_FIXED_GLOBAL_REWARD | W9 | US Tax Limit |\r\n | VARIABLE_GLOBAL_REWARD | W9 | US Tax Limit |\r\n | VARIABLE_CREDIT_REWARD | W9 | US Tax Limit |\r\n\r\n @motivating\r\n Scenario Outline: The Confirm page allows users to view their exchange before committing\r\n Given a <type> exchange rule\r\n When a user views the reward exchange list\r\n And they select the exchange\r\n And they progress to Confirm page\r\n Then they see a row with title \"Reward\"\r\n And it contains the exchange name\r\n And it contains the exchange image\r\n And they <maySee> a row with title \"Reward Amount\"\r\n And it <mayContain> <amountTitle>\r\n And they see a row with title \"Cost to Redeem\"\r\n And it contains the source reward pretty value in bolded text\r\n Examples:\r\n | type | maySee | mayContain | amountTitle |\r\n | FIXED_GLOBAL_REWARD | don't | doesn't contain | N/A |\r\n | VARIABLE_GLOBAL_REWARD | see | contains | the pretty destination value |\r\n | STEPPED_FIXED_GLOBAL_REWARD | see | contains | the pretty destination value |\r\n | VARIABLE_CREDIT_REWARD | see | contains | the pretty destination value |\r\n\r\n @motivating\r\n Scenario: An error banner is displayed if an error occurs during redemeption\r\n Given a user has selected a reward to exchange\r\n And is on the confirmation page\r\n When they click \"Redeem\"\r\n But an error occurs\r\n Then an error banner appears\r\n And it contains details about the error\r\n And the reward exchange is not completed\r\n\r\n @motivating\r\n Scenario: Confetti is displayed when a reward exchange succeeds\r\n Given a user has selected a reward to exchange\r\n And they are on the confirmation page\r\n When they click \"Redeem\"\r\n And the exchange is successful\r\n Then they see confetti centered on the success page\r\n And they see text describing what they exchanged for their new reward\r\n And they see a \"Done\" brand colour button\r\n When they click \"Done\"\r\n Then they see the Rewards page\r\n\r\n @motivating\r\n Scenario: Fuel tank codes are shown when a reward exchange succeeds\r\n Given a user has selected to exchange for a fuel tank reward\r\n When they complete the reward exchange\r\n And are on the success page\r\n Then they see a textbox with their fuel tank code\r\n And a clipboard icon\r\n When they click the clipboard icon\r\n Then their fuel tank code is copied to their clipboard\r\n\r\n @motivating\r\n Scenario Outline: Users can exchange for any type of reward\r\n Given a <type> reward exchange rule for a <reward>\r\n And a user who has enough source credit to exchange for the reward\r\n When they go through the exchange flow\r\n And exchange for their reward\r\n Then their credit is exchanged for the <reward>\r\n Examples:\r\n | type | reward |\r\n | FIXED_GLOBAL_REWARD | gift card |\r\n | FIXED_GLOBAL_REWARD | fuel tank code |\r\n | FIXED_GLOBAL_REWARD | discount |\r\n | FIXED_GLOBAL_REWARD | credit reward |\r\n | STEPPED_FIXED_GLOBAL_REWARD | gift card |\r\n | STEPPED_FIXED_GLOBAL_REWARD | discount |\r\n | STEPPED_FIXED_GLOBAL_REWARD | credit reward |\r\n | VARIABLE_GLOBAL_REWARD | gift card |\r\n | VARIABLE_GLOBAL_REWARD | discount |\r\n | VARIABLE_GLOBAL_REWARD | credit reward |\r\n | VARIABLE_CREDIT_REWARD | credit reward |";
|
|
10589
10589
|
|
|
10590
10590
|
const RewardExchangeList_stories = {
|
|
10591
10591
|
title: "Components/Reward Exchange List",
|
|
@@ -10721,7 +10721,7 @@ const ProgramExplainerStep$1 = /*#__PURE__*/Object.freeze({
|
|
|
10721
10721
|
ProgramExplainerStepCustom: ProgramExplainerStepCustom
|
|
10722
10722
|
});
|
|
10723
10723
|
|
|
10724
|
-
const scenario$o = "@author:derek\r\n@owner:logan\r\nFeature: Brand Configuration\r\n\r\n\t@motivating\r\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\r\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable | value |\r\n\t\t\t| --sl-color-primary-50 | hsla(251, 68%, 95%, 1) |\r\n\t\t\t| --sl-color-primary-100 | hsla(251, 68%, 86%, 1) |\r\n\t\t\t| --sl-color-primary-200 | hsla(251, 68%, 76%, 1) |\r\n\t\t\t| --sl-color-primary-300 | hsla(251, 68%, 66%, 1) |\r\n\t\t\t| --sl-color-primary-400 | hsla(251, 68%, 56%, 1) |\r\n\t\t\t| --sl-color-primary-500 | hsla(251, 68%, 46%, 1) |\r\n\t\t\t| --sl-color-primary-600 | hsla(251, 68%, 39%, 1) |\r\n\t\t\t| --sl-color-primary-700 | hsla(251, 68%, 32%, 1) |\r\n\t\t\t| --sl-color-primary-800 | hsla(251, 68%, 25%, 1) |\r\n\t\t\t| --sl-color-primary-900 | hsla(251, 68%, 18%, 1) |\r\n\t\t\t| --sl-color-primary-950 | hsla(251, 68%, 15%, 1) |\r\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\r\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\r\n\t\t\t| --sl-color-primary-hue | var(--sl-color-primary-500) |\r\n\t\tAnd they are applied to the children components\r\n\t\tBut they are not applied to any components outside of the brand component\r\n\t\tAnd they are not applied to any vanilla components\r\n\r\n\t@
|
|
10724
|
+
const scenario$o = "@author:derek\r\n@owner:logan\r\nFeature: Brand Configuration\r\n\r\n\t@motivating\r\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\r\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable | value |\r\n\t\t\t| --sl-color-primary-50 | hsla(251, 68%, 95%, 1) |\r\n\t\t\t| --sl-color-primary-100 | hsla(251, 68%, 86%, 1) |\r\n\t\t\t| --sl-color-primary-200 | hsla(251, 68%, 76%, 1) |\r\n\t\t\t| --sl-color-primary-300 | hsla(251, 68%, 66%, 1) |\r\n\t\t\t| --sl-color-primary-400 | hsla(251, 68%, 56%, 1) |\r\n\t\t\t| --sl-color-primary-500 | hsla(251, 68%, 46%, 1) |\r\n\t\t\t| --sl-color-primary-600 | hsla(251, 68%, 39%, 1) |\r\n\t\t\t| --sl-color-primary-700 | hsla(251, 68%, 32%, 1) |\r\n\t\t\t| --sl-color-primary-800 | hsla(251, 68%, 25%, 1) |\r\n\t\t\t| --sl-color-primary-900 | hsla(251, 68%, 18%, 1) |\r\n\t\t\t| --sl-color-primary-950 | hsla(251, 68%, 15%, 1) |\r\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\r\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\r\n\t\t\t| --sl-color-primary-hue | var(--sl-color-primary-500) |\r\n\t\tAnd they are applied to the children components\r\n\t\tBut they are not applied to any components outside of the brand component\r\n\t\tAnd they are not applied to any vanilla components\r\n\r\n\t@minutia\r\n\tScenario Outline: The brand colour can be hex, HSL or rgb\r\n\t\tGiven a brand component with \"brand-color\" <colour>\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the colour is used to create a brand palete\r\n\t\tAnd it is applied to the children components\r\n\t\tExamples:\r\n\t\t\t| colour |\r\n\t\t\t| #4225c4 |\r\n\t\t\t| rgb(66, 37, 196) |\r\n\t\t\t| hsl(251, 68%, 46%) |\r\n\t\t\t| hsla(251, 68%, 46%, 1) |\r\n\r\n\t@motivating\r\n\tScenario: The brand component can apply a brand font to children components\r\n\t\tGiven a brand component with \"brand-font\" \"Nunito Sans\"\r\n\t\tAnd it is wrapping several mint components\r\n\t\tWhen a user views the children components\r\n\t\tThen the following css variables are set\r\n\t\t\t| variable | value |\r\n\t\t\t| --sl-font-sans | \"Nunito Sans\", arial |\r\n\t\t\t| --sl-input-font-family | \"Nunito Sans\", arial |\r\n\t\t\t| --sl-tooltip-font-family | \"Nunito Sans\", arial |\r\n\t\t\t| font-family | \"Nunito Sans\", arial |\r\n\t\tAnd they are applied to the children components\r\n\t\tAnd the children component's text is \"Nunito Sans\"";
|
|
10725
10725
|
|
|
10726
10726
|
const SqmBrand_stories = {
|
|
10727
10727
|
title: "Components/Brand",
|
|
@@ -11069,7 +11069,7 @@ const CardFeed = /*#__PURE__*/Object.freeze({
|
|
|
11069
11069
|
CardFeedGeneric: CardFeedGeneric
|
|
11070
11070
|
});
|
|
11071
11071
|
|
|
11072
|
-
const scenario$q = "@author:kutay\r\n@owner:noah\r\nFeature: Portal Container\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Horizontal content overflows, but does not stretch\r\n\t\tGiven there are two element in the container\r\n\t\tAnd the first is small\r\n\t\tAnd the second would stretch the container wider than it's parent\r\n\t\tThen the second one is clipped\r\n\t\tAnd the first one doesn't stretch\r\n\r\n\t@landmine\r\n\t@ui\r\n\tScenario: `max-width` is required for displaying as a row\r\n\t\tGiven I have `direction` to \"row\"\r\n\t\tAnd I have not set a `max-width`\r\n\t\tThen it displays as a column\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content padding can be customized\r\n\t\tGiven prop \"padding\" has <value>\r\n\t\tThen <padding> is applied to content\r\n\r\n\t\tExamples:\r\n\t\t\t| value | padding |\r\n\t\t\t| none | no padding |\r\n\t\t\t| xxx-small | xxx-small |\r\n\t\t\t| xx-small | xx-small |\r\n\t\t\t| x-small | x-small |\r\n\t\t\t| small | small |\r\n\t\t\t| medium | medium |\r\n\t\t\t| large | large |\r\n\t\t\t| x-large | x-large |\r\n\t\t\t| xx-large | xx-large |\r\n\t\t\t| xxx-large | xxx-large |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A | no padding |\r\n\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Gap between content elements can be customized\r\n\t\tGiven prop \"gap\" has <value>\r\n\t\tThen <gap> is applied to elements between content\r\n\r\n\t\tExamples:\r\n\t\t\t| value | gap |\r\n\t\t\t| none | no padding |\r\n\t\t\t| xxx-small | xxx-small |\r\n\t\t\t| xx-small | xx-small |\r\n\t\t\t| x-small | x-small |\r\n\t\t\t| small | small |\r\n\t\t\t| medium | medium |\r\n\t\t\t| large | large |\r\n\t\t\t| x-large | x-large |\r\n\t\t\t| xx-large | xx-large |\r\n\t\t\t| xxx-large | xxx-large |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A | no padding |\r\n\r\n\t@
|
|
11072
|
+
const scenario$q = "@author:kutay\r\n@owner:noah\r\nFeature: Portal Container\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario: Horizontal content overflows, but does not stretch\r\n\t\tGiven there are two element in the container\r\n\t\tAnd the first is small\r\n\t\tAnd the second would stretch the container wider than it's parent\r\n\t\tThen the second one is clipped\r\n\t\tAnd the first one doesn't stretch\r\n\r\n\t@landmine\r\n\t@ui\r\n\tScenario: `max-width` is required for displaying as a row\r\n\t\tGiven I have `direction` to \"row\"\r\n\t\tAnd I have not set a `max-width`\r\n\t\tThen it displays as a column\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content padding can be customized\r\n\t\tGiven prop \"padding\" has <value>\r\n\t\tThen <padding> is applied to content\r\n\r\n\t\tExamples:\r\n\t\t\t| value | padding |\r\n\t\t\t| none | no padding |\r\n\t\t\t| xxx-small | xxx-small |\r\n\t\t\t| xx-small | xx-small |\r\n\t\t\t| x-small | x-small |\r\n\t\t\t| small | small |\r\n\t\t\t| medium | medium |\r\n\t\t\t| large | large |\r\n\t\t\t| x-large | x-large |\r\n\t\t\t| xx-large | xx-large |\r\n\t\t\t| xxx-large | xxx-large |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A | no padding |\r\n\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Gap between content elements can be customized\r\n\t\tGiven prop \"gap\" has <value>\r\n\t\tThen <gap> is applied to elements between content\r\n\r\n\t\tExamples:\r\n\t\t\t| value | gap |\r\n\t\t\t| none | no padding |\r\n\t\t\t| xxx-small | xxx-small |\r\n\t\t\t| xx-small | xx-small |\r\n\t\t\t| x-small | x-small |\r\n\t\t\t| small | small |\r\n\t\t\t| medium | medium |\r\n\t\t\t| large | large |\r\n\t\t\t| x-large | x-large |\r\n\t\t\t| xx-large | xx-large |\r\n\t\t\t| xxx-large | xxx-large |\r\n\t\t\t| xxxx-large | xxxx-large |\r\n\t\t\t| N/A | no padding |\r\n\r\n\t@minutia\r\n\t@ui\r\n\tScenario: Content can be center aligned in horizontal view\r\n\t\tGiven I have supplied the prop \"center\"\r\n\t\tThen the content is center aligned\r\n\r\n\t@minutia\r\n\t@ui\r\n\tScenario: Content in the last row can span full width with display in horizontal view\r\n\t\tGiven I have `display` to \"flex\"\r\n\t\tThen the content is full width on the last row\r\n\r\n\t@motivating\r\n\t@ui\r\n\tScenario Outline: Content can be aligned along the x-axis \r\n\t\tGiven prop \"justify-content\" has <value>\r\n\t\tThen content within the container is aligned <alignment>\r\n\r\n\t\tExamples:\r\n\t\t\t| value | alignment |\r\n\t\t\t| none | no alignment |\r\n\t\t\t| start | to the start |\r\n\t\t\t| center | to the center |\r\n\t\t\t| end | to the end |\r\n\t\t\t| space-between | with space between |\r\n\t\t\t| space-around | with space around |\r\n\t\t\t| space-evenly | with space evenly |";
|
|
11073
11073
|
|
|
11074
11074
|
const PortalContainer_stories = {
|
|
11075
11075
|
title: "Components/Portal Container",
|
|
@@ -11212,9 +11212,9 @@ const scenario1 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Date C
|
|
|
11212
11212
|
|
|
11213
11213
|
const scenario2 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table reward Column\r\n\r\n Shows the exact reward\r\n\r\n Background:\r\n Given the reward column is included in the reward table\r\n And rewards with translations exist\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The title of the reward column is configurable\r\n Given the \"column-title\" prop is set to <value>\r\n Then the reward column is shown with <columnTitle>\r\n Examples:\r\n | value | columnTitle |\r\n | Reward | |\r\n | My column title | My column title |\r\n\r\n @motivating\r\n Scenario: The reward column displays the prettyValue of the reward given\r\n Given a user with a reward\r\n When they view the rewards table\r\n Then they see the name of their reward in the reward column\r\n And the name is the prettyValue translated for the users locale\r\n\r\n @motivating\r\n @ui\r\n Scenario: The reward column displays an availability bar if the reward is redeemable\r\n Given a user with a <status> credit reward of <value>\r\n But the user has <redeemedAmount>\r\n When they view the rewards table\r\n Then the reward column displays <value>\r\n And under it displays an availability bar with <percentage> filled\r\n And under it displays <availabilityText>\r\n Examples:\r\n | status | value | percentage | availableAmount | availabilityText |\r\n | AVAILABLE | 10 Points | 100% | 10 Points | 10 Points remaining |\r\n | AVAILABLE | 10 Points | 90% | 9 Points | 9 Points remaining |\r\n | AVAILABLE | 10 Points | 10% | 1 Point | 1 Point remaining |\r\n | PENDING | 10 Points | 100% | 10 Points | 10 Points remaining |\r\n | PENDING | 10 Points | 90% | 9 Points | 9 Points remaining |\r\n | PENDING | 10 Points | 10% | 1 Point | 1 Point remaining |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The reward column displays an availability bar if the reward was redeemable but had been cancelled or expired\r\n Given a user with a credit reward of <value>\r\n And the reward has <status>\r\n But the user has <redeemedAmount>\r\n When they view the rewards table\r\n When they view the rewards table\r\n Then the reward column displays <value>\r\n And under it displays an availability bar with <percentage> filled\r\n And under it displays <redeemedText>\r\n Examples:\r\n | status | value | percentage | redeemedAmount | redeemedText |\r\n | EXPIRED | 10 Points | 100% | 0 Point | 0 Point redeemed |\r\n | EXPIRED | 10 Points | 80% | 2 Point | 2 Point redeemed |\r\n | CANCELLED | 10 Points | 100% | 0 Point | 0 Point redeemed |\r\n | CANCELLED | 10 Points | 20% | 8 Point | 8 Point redeemed |\r\n\r\n @motivating\r\n @ui\r\n Scenario: The reward column doesn't display the availability bar if the reward is not redeemable\r\n Given a user with a non credit reward\r\n When they view the rewards table\r\n Then they see the name of the reward\r\n But they do not see the availablity bar\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The reward column doesn't display the availability bar if the reward is only 1 reward unit\r\n Given a user with a credit reward for 1 of a reward unit\r\n And it has <status>\r\n When they view the rewards table\r\n Then they see the name of the reward\r\n But they do not see the availablity bar\r\n Examples:\r\n | status |\r\n | AVAILABLE |\r\n | PENDING |\r\n | EXPIRED |\r\n | CANCELLED |\r\n\r\n @motivating\r\n @ui\r\n Scenario: The reward column doesn't display the availability bar for redeemed credit rewards\r\n Given a user with a \"REDEEMED\" credit reward\r\n When they view the rewards table\r\n Then they see the name of the reward\r\n But they do not see the availablity bar\r\n\r\n @motivating\r\n @ui\r\n Scenario: Users can copy their fuel tank codes\r\n Given a user with a fuel tank reward\r\n When they view the rewards table\r\n Then they see their fuel tank reward\r\n And they see their fuel tank code bolded in blue\r\n When they click on their code\r\n Then a tool tip appears saying it has been copied to their clipboard\r\n And their code is copied to their clipboard";
|
|
11214
11214
|
|
|
11215
|
-
const scenario3 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Status Column\r\n\r\n Shows the status of each reward\r\n\r\n Background:\r\n Given the status column is included in the reward table\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The title of the status column is configurable\r\n Given the \"column-title\" prop is set to <value>\r\n Then the status column is shown with <columnTitle>\r\n Examples:\r\n | value | columnTitle |\r\n | Status | |\r\n | My column title | My column title |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The status column displays the status of each reward\r\n Given a user\r\n And they have a <status> reward\r\n When they view the reward table\r\n Then the status of their reward is displayed in <pillColour> pill with <text>\r\n Examples:\r\n | status | text | pillColour |\r\n | AVAILABLE | Available | Green |\r\n | CANCELLED | Cancelled | Red |\r\n | PENDING | Pending | Orange |\r\n | EXPIRED | Expired | Red |\r\n | REDEEMED | Redeemed | Blue |\r\n\r\n @motivating\r\n Scenario Outline: Reward status related information is displayed under status pills\r\n Given a user\r\n And they have a <reward>\r\n When they view the reward table\r\n Then they see their reward\r\n And under the pill is <text>\r\n And the date is localized to the users locale\r\n Examples:\r\n | reward | text |\r\n | available reward with an expiry date | localized expiry date in format \"Month-Day-Year\" |\r\n | redeemed reward | localized redemption date in format \"Month-Day-Year\" |\r\n | expired reward | localized expired date in format \"Month-Day-Year\" |\r\n | cancelled reward | localized cancelled date in format \"Month-Day-Year\" |\r\n | pending reward with a end date | localized pending for date in format \"Month-Day-Year\" |\r\n | pending reward due to W9 | W-9 required |\r\n | pending reward due to fufillment error | Fulfillment error |\r\n\r\n @motivating\r\n Scenario Outline: Statuses can be customized\r\n Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent}}\"\r\n And a user\r\n And they have a <status> reward\r\n When they view the reward table\r\n Then the status of their reward is displayed in <pillColour> pill with <text>\r\n Examples:\r\n | status | text | pillColour |\r\n | AVAILABLE | Redeem me! | Green |\r\n | CANCELLED | Unavailable | Red |\r\n | PENDING | Coming soon! | Orange |\r\n | EXPIRED | Past due | Red |\r\n | REDEEMED | Spent | Blue |\r\n\r\n @
|
|
11215
|
+
const scenario3 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Status Column\r\n\r\n Shows the status of each reward\r\n\r\n Background:\r\n Given the status column is included in the reward table\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The title of the status column is configurable\r\n Given the \"column-title\" prop is set to <value>\r\n Then the status column is shown with <columnTitle>\r\n Examples:\r\n | value | columnTitle |\r\n | Status | |\r\n | My column title | My column title |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The status column displays the status of each reward\r\n Given a user\r\n And they have a <status> reward\r\n When they view the reward table\r\n Then the status of their reward is displayed in <pillColour> pill with <text>\r\n Examples:\r\n | status | text | pillColour |\r\n | AVAILABLE | Available | Green |\r\n | CANCELLED | Cancelled | Red |\r\n | PENDING | Pending | Orange |\r\n | EXPIRED | Expired | Red |\r\n | REDEEMED | Redeemed | Blue |\r\n\r\n @motivating\r\n Scenario Outline: Reward status related information is displayed under status pills\r\n Given a user\r\n And they have a <reward>\r\n When they view the reward table\r\n Then they see their reward\r\n And under the pill is <text>\r\n And the date is localized to the users locale\r\n Examples:\r\n | reward | text |\r\n | available reward with an expiry date | localized expiry date in format \"Month-Day-Year\" |\r\n | redeemed reward | localized redemption date in format \"Month-Day-Year\" |\r\n | expired reward | localized expired date in format \"Month-Day-Year\" |\r\n | cancelled reward | localized cancelled date in format \"Month-Day-Year\" |\r\n | pending reward with a end date | localized pending for date in format \"Month-Day-Year\" |\r\n | pending reward due to W9 | W-9 required |\r\n | pending reward due to fufillment error | Fulfillment error |\r\n\r\n @motivating\r\n Scenario Outline: Statuses can be customized\r\n Given the \"status-text\" prop is \"{status, select, AVAILABLE {Redeem me!} CANCELLED {Unavailable} PENDING {Coming soon!} EXPIRED {Past due} REDEEMED {Spent}}\"\r\n And a user\r\n And they have a <status> reward\r\n When they view the reward table\r\n Then the status of their reward is displayed in <pillColour> pill with <text>\r\n Examples:\r\n | status | text | pillColour |\r\n | AVAILABLE | Redeem me! | Green |\r\n | CANCELLED | Unavailable | Red |\r\n | PENDING | Coming soon! | Orange |\r\n | EXPIRED | Past due | Red |\r\n | REDEEMED | Spent | Blue |\r\n\r\n @minutia\r\n @ui\r\n Scenario: Expiry status date text can be configured\r\n Given the \"expiry-text\" prop has <value>\r\n And a user with an available reward with an expiry date\r\n When they view the reward table\r\n Then they see <text> under the Available Status pill\r\n Examples:\r\n | value | text |\r\n | | Expires on <EXPIRY DATE> |\r\n | Redeem before | Redeem before <EXPIRY DATE> |";
|
|
11216
11216
|
|
|
11217
|
-
const scenario4 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Source Column\r\n\r\n Shows the source of each reward\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The title of the source column is configurable\r\n Given the \"column-title\" prop is set to <value>\r\n Then the source column is shown with <columnTitle>\r\n Examples:\r\n | value | columnTitle |\r\n | Source | |\r\n | My column title | My column title |\r\n\r\n @motivating\r\n @ui\r\n Scenario: The source column displays manual if the reward is caused by a manual action\r\n Given a user with a \"MANUAL\" reward\r\n When they view the rewards table\r\n Then the source of their reward is displayed as \"Manual\"\r\n\r\n @motivating\r\n @ui\r\n Scenario: The source column displays the program name if the reward is caused automatically by a program\r\n Given a user with a \"AUTOMATED\" program reward\r\n And the program has name \"Loyalty Program\"\r\n When they view the rewards table\r\n Then the source of their reward is displayed as \"Loyalty Program\"\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\r\n Given the \"reward-exchange-text\" prop is <propValue>\r\n And a user with a \"MANUAL\" reward\r\n But it was created by a reward exchange\r\n Then they view the rewards table\r\n Then the source displays <exchangeText>\r\n And under it displays the following\r\n | prettyRedeemedCredit → prettyValue |\r\n Examples:\r\n | propValue | exchangeText |\r\n | | Reward Exchange |\r\n | Exchanged | Exchanged |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays customizable referral information if the reward is from a referral\r\n Given the \"reward-source-text\" prop is <propValue>\r\n And a user with a referral reward\r\n And that reward has <rewardSource>\r\n When they view the rewards table\r\n Then then source displays <referralText>\r\n And under it displays the full name of the <referralUser>\r\n Examples:\r\n | propValue | rewardSource | referralText | referralUser |\r\n | | REFERRED | Referred by | referrer user |\r\n | | FRIEND_SIGNUP | Referral to | referred user |\r\n | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED | Referred you | referrer user |\r\n | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\r\n Given a user with a referral reward\r\n And referral user exists\r\n And referral user has <name>\r\n But referral user has no <otherName>\r\n When they view the rewards table\r\n Then referral user's name is displayed as <name>\r\n Examples:\r\n | name | otherName |\r\n | first.name | last.name |\r\n | last.name | first.name |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\r\n Given a user with a referral reward\r\n And that reward has <rewardSource>\r\n And the <referralUser> has no first name\r\n And the <referralUser> has no last name\r\n When they view the rewards table\r\n Then then source displays <sourceText>\r\n And under it displays \"Anonymous User\"\r\n Examples:\r\n | rewardSource | referralUser | sourceText |\r\n | FRIEND_SIGNUP | referrer | Referral to |\r\n | REFERRED | referred user | Referred by |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\r\n Given a user with a referral reward\r\n And that reward has <rewardSource>\r\n But <referral> user was deleted\r\n When they view the rewards table\r\n Then the source displays <sourceText>\r\n And under it displays \"Deleted User\"\r\n Examples:\r\n | rewardSource | referral | sourceText |\r\n | \"FRIEND_SIGNUP\" | referrer | Referral to |\r\n | \"REFERRED\" | referred | Referred by |\r\n\r\n @
|
|
11217
|
+
const scenario4 = "@author:derek\r\n@owner:derek\r\nFeature: Reward Table Source Column\r\n\r\n Shows the source of each reward\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The title of the source column is configurable\r\n Given the \"column-title\" prop is set to <value>\r\n Then the source column is shown with <columnTitle>\r\n Examples:\r\n | value | columnTitle |\r\n | Source | |\r\n | My column title | My column title |\r\n\r\n @motivating\r\n @ui\r\n Scenario: The source column displays manual if the reward is caused by a manual action\r\n Given a user with a \"MANUAL\" reward\r\n When they view the rewards table\r\n Then the source of their reward is displayed as \"Manual\"\r\n\r\n @motivating\r\n @ui\r\n Scenario: The source column displays the program name if the reward is caused automatically by a program\r\n Given a user with a \"AUTOMATED\" program reward\r\n And the program has name \"Loyalty Program\"\r\n When they view the rewards table\r\n Then the source of their reward is displayed as \"Loyalty Program\"\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\r\n Given the \"reward-exchange-text\" prop is <propValue>\r\n And a user with a \"MANUAL\" reward\r\n But it was created by a reward exchange\r\n Then they view the rewards table\r\n Then the source displays <exchangeText>\r\n And under it displays the following\r\n | prettyRedeemedCredit → prettyValue |\r\n Examples:\r\n | propValue | exchangeText |\r\n | | Reward Exchange |\r\n | Exchanged | Exchanged |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays customizable referral information if the reward is from a referral\r\n Given the \"reward-source-text\" prop is <propValue>\r\n And a user with a referral reward\r\n And that reward has <rewardSource>\r\n When they view the rewards table\r\n Then then source displays <referralText>\r\n And under it displays the full name of the <referralUser>\r\n Examples:\r\n | propValue | rewardSource | referralText | referralUser |\r\n | | REFERRED | Referred by | referrer user |\r\n | | FRIEND_SIGNUP | Referral to | referred user |\r\n | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED | Referred you | referrer user |\r\n | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\r\n Given a user with a referral reward\r\n And referral user exists\r\n And referral user has <name>\r\n But referral user has no <otherName>\r\n When they view the rewards table\r\n Then referral user's name is displayed as <name>\r\n Examples:\r\n | name | otherName |\r\n | first.name | last.name |\r\n | last.name | first.name |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\r\n Given a user with a referral reward\r\n And that reward has <rewardSource>\r\n And the <referralUser> has no first name\r\n And the <referralUser> has no last name\r\n When they view the rewards table\r\n Then then source displays <sourceText>\r\n And under it displays \"Anonymous User\"\r\n Examples:\r\n | rewardSource | referralUser | sourceText |\r\n | FRIEND_SIGNUP | referrer | Referral to |\r\n | REFERRED | referred user | Referred by |\r\n\r\n @motivating\r\n @ui\r\n Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\r\n Given a user with a referral reward\r\n And that reward has <rewardSource>\r\n But <referral> user was deleted\r\n When they view the rewards table\r\n Then the source displays <sourceText>\r\n And under it displays \"Deleted User\"\r\n Examples:\r\n | rewardSource | referral | sourceText |\r\n | \"FRIEND_SIGNUP\" | referrer | Referral to |\r\n | \"REFERRED\" | referred | Referred by |\r\n\r\n @minutia\r\n @ui\r\n Scenario Outline: Name fallbacks for referral users without names are customizable\r\n Given <prop> with <value>\r\n And a user with a referral reward\r\n But the referral user <hadAction>\r\n When they view the rewards table\r\n Then the source displays <value> as the referral user\r\n Examples:\r\n | prop | value | hadAction |\r\n | deleted-user | Former Customer | was deleted |\r\n | anonymous-user | Nameless User | had first and last name deleted |\r\n\r\n @motivating\r\n Scenario Outline: Source text can be customized\r\n Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\r\n And a user with a <rewardSource> reward\r\n When they view the rewards table\r\n Then the source is <sourceText>\r\n Examples:\r\n | rewardSource | sourceText |\r\n | MANUAL | Support |\r\n | AUTOMATED | Loyalty Program |";
|
|
11218
11218
|
|
|
11219
11219
|
const scenario$r = scenario1 + scenario2 + scenario3 + scenario4;
|
|
11220
11220
|
const RewardsTableCell_stories = {
|
|
@@ -11518,7 +11518,7 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
|
|
|
11518
11518
|
EmptyCell: EmptyCell$2
|
|
11519
11519
|
});
|
|
11520
11520
|
|
|
11521
|
-
const scenario$s = "@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 @
|
|
11521
|
+
const scenario$s = "@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 @minutia\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 @minutia\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 \"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: 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 @minutia\r\n @ui\r\n Scenario: Column heading can be hidden\r\n Given the table is configured with \"hide-labels\" set to \"true\"\r\n Then the table is displayed without column headings";
|
|
11522
11522
|
|
|
11523
11523
|
const RewardsTable_stories = {
|
|
11524
11524
|
title: "Components/Rewards Table",
|
|
@@ -12056,7 +12056,7 @@ const Image$1 = /*#__PURE__*/Object.freeze({
|
|
|
12056
12056
|
MinimumHeight: MinimumHeight
|
|
12057
12057
|
});
|
|
12058
12058
|
|
|
12059
|
-
const scenario$x = "@author:derek\r\n@owner:noah\r\nFeature: Titled Section\r\n\r\n Background: The titled section has a label and content\r\n Given a titled section\r\n And it has a label\r\n And it has content in the content slot\r\n\r\n @motivating\r\n @ui\r\n Scenario: Text alignment defaults to left align but can be configured\r\n Given the titled section has \"text-align\" <textAlignPropValue>\r\n When a user views the titled section\r\n Then the text in the label is <aligned>\r\n And the text in the content is <aligned>\r\n Examples:\r\n | textAlignPropValue | aligned |\r\n | center | center |\r\n | left | left |\r\n | right | right |\r\n | | left |\r\n\r\n @
|
|
12059
|
+
const scenario$x = "@author:derek\r\n@owner:noah\r\nFeature: Titled Section\r\n\r\n Background: The titled section has a label and content\r\n Given a titled section\r\n And it has a label\r\n And it has content in the content slot\r\n\r\n @motivating\r\n @ui\r\n Scenario: Text alignment defaults to left align but can be configured\r\n Given the titled section has \"text-align\" <textAlignPropValue>\r\n When a user views the titled section\r\n Then the text in the label is <aligned>\r\n And the text in the content is <aligned>\r\n Examples:\r\n | textAlignPropValue | aligned |\r\n | center | center |\r\n | left | left |\r\n | right | right |\r\n | | left |\r\n\r\n @minutia\r\n @ui\r\n Scenario: Label margin is configurable\r\n Given the titled section has \"label-margin\" <marginPropValue>\r\n When a user views the titled section\r\n Then <marginPropValue> margin is between the label and content\r\n Examples:\r\n | marginPropValue | margin |\r\n | none | no |\r\n | xxx-small | xxx-small |\r\n | xx-small | xx-small |\r\n | x-small | x-small |\r\n | small | small |\r\n | medium | medium |\r\n | large | large |\r\n | x-large | x-large |\r\n | xx-large | xx-large |\r\n | xxx-large | xxx-large |\r\n | xxxx-large | xxxx-large |\r\n | | no |\r\n\r\n @minutia\r\n @ui\r\n Scenario Outline: Titled section padding is configurable\r\n Given the titled section has \"padding\" <paddingPropValue>\r\n When a user views the titled section\r\n Then <paddingPropValue> padding is applied around the titled section\r\n Examples:\r\n | paddingPropValue | padding |\r\n | none | no |\r\n | xxx-small | xxx-small |\r\n | xx-small | xx-small |\r\n | x-small | x-small |\r\n | small | small |\r\n | medium | medium |\r\n | large | large |\r\n | x-large | x-large |\r\n | xx-large | xx-large |\r\n | xxx-large | xxx-large |\r\n | xxxx-large | xxxx-large |\r\n | | no |";
|
|
12060
12060
|
|
|
12061
12061
|
const TitledSection_stories = {
|
|
12062
12062
|
title: "Components/Titled Section",
|
|
@@ -12457,7 +12457,7 @@ const Scroll = /*#__PURE__*/Object.freeze({
|
|
|
12457
12457
|
ShoelaceProps: ShoelaceProps
|
|
12458
12458
|
});
|
|
12459
12459
|
|
|
12460
|
-
const scenario$y = "@author:Zach\r\n@owner:Zach\r\nFeature: Tabs\r\n\r\n The Tabs takes in the Tab component as children and maps through to display their header and content.\r\n\r\n Background: A user on the portal is viewing the widget\r\n Given a user viewing the Tabs component\r\n\r\n @motivating\r\n Scenario: Content inside the active tab is shown\r\n Given the header is set to <tabHeader>\r\n And the content inside is <tabContent>\r\n And the user has clicked <tabHeader>\r\n Then the <tabContent> is shown\r\n Examples:\r\n | tabHeader | tabContent |\r\n | Settings | This is the settings tab |\r\n | General | This is the general tab |\r\n | History | This is the history tab |\r\n\r\n @motivating\r\n @ui\r\n Scenario: The placement of the tabs is configurable\r\n Given The placement prop has been passed a valid <placement>\r\n Then tabs are placed on the <placementResult>\r\n Examples:\r\n | placement | placementResult |\r\n | | top of the content |\r\n | left | left hand side of the content |\r\n | right | right hand side of the content |\r\n | bottom | bottom of the content |\r\n\r\n\r\n @
|
|
12460
|
+
const scenario$y = "@author:Zach\r\n@owner:Zach\r\nFeature: Tabs\r\n\r\n The Tabs takes in the Tab component as children and maps through to display their header and content.\r\n\r\n Background: A user on the portal is viewing the widget\r\n Given a user viewing the Tabs component\r\n\r\n @motivating\r\n Scenario: Content inside the active tab is shown\r\n Given the header is set to <tabHeader>\r\n And the content inside is <tabContent>\r\n And the user has clicked <tabHeader>\r\n Then the <tabContent> is shown\r\n Examples:\r\n | tabHeader | tabContent |\r\n | Settings | This is the settings tab |\r\n | General | This is the general tab |\r\n | History | This is the history tab |\r\n\r\n @motivating\r\n @ui\r\n Scenario: The placement of the tabs is configurable\r\n Given The placement prop has been passed a valid <placement>\r\n Then tabs are placed on the <placementResult>\r\n Examples:\r\n | placement | placementResult |\r\n | | top of the content |\r\n | left | left hand side of the content |\r\n | right | right hand side of the content |\r\n | bottom | bottom of the content |\r\n\r\n\r\n @minutia\r\n @ui\r\n Scenario Outline: Tabs are setup to use the brand color\r\n Given the brand color is set to darkblue\r\n Then the text inside the active tab is darkblue\r\n And the underline of the active tab is darkblue\r\n\r\n @ui\r\n Scenario: Tabs are responsive\r\n Given the user is on a mobile device\r\n When there are more tabs than the horizontal space allows for\r\n Then clickable arrows appear on the left and right of the tabs\r\n And the tabs are scrollable\r\n\r\n @landmine\r\n Scenario: Program section cannot be used inside of tabs\r\n Given a tabs component\r\n And tab containing a program section with program-id \"test123\"\r\n And the program section wraps a component using program context\r\n When the tabs component is rendered\r\n Then the \"sq:program-id\" event listener for the program section is removed\r\n And the component does not use program-id \"test123\" to source its data\r\n And falls back to the global program id";
|
|
12461
12461
|
|
|
12462
12462
|
const Tabs_stories = {
|
|
12463
12463
|
title: "Components/Tabs",
|
|
@@ -12962,7 +12962,7 @@ const Tabs = /*#__PURE__*/Object.freeze({
|
|
|
12962
12962
|
RightTabs: RightTabs
|
|
12963
12963
|
});
|
|
12964
12964
|
|
|
12965
|
-
const scenario$z = "@author:johan\r\n@owner:johan\r\nFeature: Share Code\r\n\r\n The share code component is a box that allows users to see and copy their referral code for a given program\r\n \r\n Background: Environment\r\n Given there is a valid program ID in the environment\r\n And there is a valid user ID and account ID in the environment\r\n\r\n @motivating\r\n Scenario: A Users referral code can be copied to their clipboard\r\n Given tooltiptext is \"hello tooltip\"\r\n When the component renders\r\n Then there is a textbox with the user's share link\r\n When the clipboard icon is clicked\r\n Then the link is copied to clipboard\r\n And a tooltip will appear for ~1 second\r\n\r\n @
|
|
12965
|
+
const scenario$z = "@author:johan\r\n@owner:johan\r\nFeature: Share Code\r\n\r\n The share code component is a box that allows users to see and copy their referral code for a given program\r\n \r\n Background: Environment\r\n Given there is a valid program ID in the environment\r\n And there is a valid user ID and account ID in the environment\r\n\r\n @motivating\r\n Scenario: A Users referral code can be copied to their clipboard\r\n Given tooltiptext is \"hello tooltip\"\r\n When the component renders\r\n Then there is a textbox with the user's share link\r\n When the clipboard icon is clicked\r\n Then the link is copied to clipboard\r\n And a tooltip will appear for ~1 second\r\n\r\n @minutia\r\n Scenario: Tooltip lifespan defaults to 2000\r\n Given the tooltip's lifespan is set to 2000\r\n And there is tooltip text\r\n When the component renders\r\n And the clipboard icon is clicked\r\n Then a tooltip will appear for ~2 seconds\r\n\r\n @minutia\r\n Scenario: Demo\r\n Given isDemo() returns true\r\n Then the share link is \"https://www.example.com/sharelink/abc\"\r\n And the component won't be interactive\r\n And the tooltip is hidden\r\n\r\n @minutia\r\n Scenario: Program ID can be sourced from prop\r\n Given the programId prop is set to \"program-a\"\r\n And window.widgetIdent.programId is set to \"program-b\"\r\n When the component renders\r\n Then the share link is for \"program-a\"\r\n\r\n @minutia\r\n Scenario: Program ID can be sourced from window\r\n Given the programId prop is unset\r\n And window.widgetIdent.programId is set to \"program-b\"\r\n When the component renders\r\n Then the share link is for \"program-b\"\r\n\r\n @minutia\r\n Scenario: An analytic event is fired when a user copies their code\r\n Given a user viewing the share code component\r\n And the component is rendered for \"program-a\"\r\n When they click to copy their code\r\n Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\r\n And it is for \"program-a\"\r\n And it has share medium \"DIRECT\"\r\n";
|
|
12966
12966
|
|
|
12967
12967
|
const ShareCode_stories = {
|
|
12968
12968
|
title: "Components/Share Code",
|