@saasquatch/mint-components 1.13.2 → 1.13.3
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/{ShadowViewAddon-cf0ee0a0.js → ShadowViewAddon-14a02da4.js} +133 -98
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mint-components.cjs.js +1 -1
- package/dist/cjs/{sqm-big-stat_39.cjs.entry.js → sqm-big-stat_41.cjs.entry.js} +220 -2
- package/dist/cjs/sqm-portal-email-verification.cjs.entry.js +1 -1
- package/dist/cjs/sqm-portal-forgot-password.cjs.entry.js +1 -1
- package/dist/cjs/sqm-portal-google-registration-form.cjs.entry.js +1 -1
- package/dist/cjs/{sqm-portal-registration-form-view-ebf355a6.js → sqm-portal-registration-form-view-637a4bf4.js} +1 -0
- package/dist/cjs/sqm-portal-registration-form.cjs.entry.js +2 -1
- package/dist/cjs/sqm-portal-reset-password.cjs.entry.js +1 -1
- package/dist/cjs/sqm-portal-verify-email.cjs.entry.js +1 -1
- package/dist/cjs/sqm-stencilbook.cjs.entry.js +469 -381
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/sqm-checkbox-field/CheckboxField.stories.js +1 -1
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field-view.js +6 -15
- package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js +5 -5
- package/dist/collection/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.js +11 -0
- package/dist/collection/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.js +129 -0
- package/dist/collection/components/sqm-portal-change-marketing/ChangeMarketing.stories.js +54 -0
- package/dist/collection/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.js +47 -0
- package/dist/collection/components/sqm-portal-change-marketing/sqm-portal-change-marketing.js +217 -0
- package/dist/collection/components/sqm-portal-change-marketing/usePortalChangeMarketing.js +115 -0
- package/dist/collection/components/sqm-portal-email-verification/sqm-portal-email-verification.js +3 -3
- package/dist/collection/components/sqm-portal-forgot-password/sqm-portal-forgot-password.js +3 -3
- package/dist/collection/components/sqm-portal-google-registration-form/sqm-portal-google-registration-form.js +2 -2
- package/dist/collection/components/sqm-portal-login/sqm-portal-login.js +3 -3
- package/dist/collection/components/sqm-portal-registration-form/PortalRegistrationForm.stories.js +4 -0
- package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form-view.js +1 -0
- package/dist/collection/components/sqm-portal-registration-form/sqm-portal-registration-form.js +3 -2
- package/dist/collection/components/sqm-portal-reset-password/sqm-portal-reset-password.js +3 -3
- package/dist/collection/components/sqm-portal-verify-email/sqm-portal-verify-email.js +3 -3
- package/dist/collection/components/sqm-stencilbook/sqm-stencilbook.js +6 -0
- package/dist/esm/{ShadowViewAddon-fd07e6e1.js → ShadowViewAddon-23a6afab.js} +133 -99
- package/dist/esm/loader.js +1 -1
- package/dist/esm/mint-components.js +1 -1
- package/dist/esm/{sqm-big-stat_39.entry.js → sqm-big-stat_41.entry.js} +219 -3
- package/dist/esm/sqm-portal-email-verification.entry.js +1 -1
- package/dist/esm/sqm-portal-forgot-password.entry.js +1 -1
- package/dist/esm/sqm-portal-google-registration-form.entry.js +1 -1
- package/dist/esm/{sqm-portal-registration-form-view-32c4b488.js → sqm-portal-registration-form-view-3c1f6000.js} +1 -0
- package/dist/esm/sqm-portal-registration-form.entry.js +2 -1
- package/dist/esm/sqm-portal-reset-password.entry.js +1 -1
- package/dist/esm/sqm-portal-verify-email.entry.js +1 -1
- package/dist/esm/sqm-stencilbook.entry.js +469 -381
- package/dist/esm-es5/ShadowViewAddon-23a6afab.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mint-components.js +1 -1
- package/dist/esm-es5/sqm-big-stat_41.entry.js +1 -0
- package/dist/esm-es5/sqm-portal-google-registration-form.entry.js +1 -1
- package/dist/esm-es5/{sqm-portal-registration-form-view-32c4b488.js → sqm-portal-registration-form-view-3c1f6000.js} +1 -1
- package/dist/esm-es5/sqm-portal-registration-form.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-01010af0.entry.js +258 -0
- package/dist/mint-components/{p-079405ff.entry.js → p-0d2d0b6d.entry.js} +1 -1
- package/dist/mint-components/p-33ed6f1c.system.entry.js +1 -0
- package/dist/mint-components/p-37996351.system.js +1 -1
- package/dist/mint-components/p-38b5f028.system.entry.js +1 -0
- package/dist/mint-components/p-7e7cbccf.system.js +1 -0
- package/dist/mint-components/{p-e6045498.entry.js → p-7f80a9d7.entry.js} +1 -1
- package/dist/mint-components/{p-793d2130.js → p-91ab3da1.js} +1 -1
- package/dist/mint-components/{p-51d3cde7.system.entry.js → p-9386ad84.system.entry.js} +1 -1
- package/dist/mint-components/{p-54adee71.system.entry.js → p-9bfd9bed.system.entry.js} +1 -1
- package/dist/mint-components/p-d3d74266.js +394 -0
- package/dist/mint-components/{p-bb0f585c.system.js → p-e5d0375e.system.js} +1 -1
- package/dist/mint-components/p-f2cc6a6f.entry.js +9 -0
- package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field-view.d.ts +1 -1
- package/dist/types/components/sqm-checkbox-field/sqm-checkbox-field.d.ts +4 -4
- package/dist/types/components/sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories.d.ts +8 -0
- package/dist/types/components/sqm-marketing-emails-checkbox/sqm-marketing-emails-checkbox.d.ts +27 -0
- package/dist/types/components/sqm-portal-change-marketing/ChangeMarketing.stories.d.ts +8 -0
- package/dist/types/components/sqm-portal-change-marketing/sqm-portal-change-marketing-view.d.ts +28 -0
- package/dist/types/components/sqm-portal-change-marketing/sqm-portal-change-marketing.d.ts +39 -0
- package/dist/types/components/sqm-portal-change-marketing/usePortalChangeMarketing.d.ts +3 -0
- package/dist/types/components/sqm-portal-email-verification/sqm-portal-email-verification.d.ts +1 -1
- package/dist/types/components/sqm-portal-forgot-password/sqm-portal-forgot-password.d.ts +1 -1
- package/dist/types/components/sqm-portal-login/sqm-portal-login.d.ts +1 -1
- package/dist/types/components/sqm-portal-registration-form/PortalRegistrationForm.stories.d.ts +1 -0
- package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form-view.d.ts +1 -0
- package/dist/types/components/sqm-portal-registration-form/sqm-portal-registration-form.d.ts +1 -1
- package/dist/types/components/sqm-portal-reset-password/sqm-portal-reset-password.d.ts +1 -1
- package/dist/types/components/sqm-portal-verify-email/sqm-portal-verify-email.d.ts +1 -1
- package/dist/types/components.d.ts +130 -13
- package/docs/docs.docx +0 -0
- package/docs/raisins.json +1 -1
- package/grapesjs/grapesjs.js +1 -1
- package/package.json +1 -1
- package/dist/esm-es5/ShadowViewAddon-fd07e6e1.js +0 -1
- package/dist/esm-es5/sqm-big-stat_39.entry.js +0 -1
- package/dist/mint-components/p-57e2c2fa.system.js +0 -1
- package/dist/mint-components/p-87d385d8.entry.js +0 -241
- package/dist/mint-components/p-abedbbf3.system.entry.js +0 -1
- package/dist/mint-components/p-bc83460e.system.entry.js +0 -1
- package/dist/mint-components/p-d12fc50f.js +0 -394
- package/dist/mint-components/p-da932ca2.entry.js +0 -9
- package/dist/types/global/android.d.ts +0 -7
- package/dist/types/global/demo.d.ts +0 -2
- package/dist/types/stories/features.d.ts +0 -4
- package/dist/types/stories/templates.d.ts +0 -4
|
@@ -27,12 +27,12 @@ const sqmPortalEmailVerificationView = require('./sqm-portal-email-verification-
|
|
|
27
27
|
const sqmPortalForgotPasswordView = require('./sqm-portal-forgot-password-view-78f19ef9.js');
|
|
28
28
|
const sqmPortalLoginView = require('./sqm-portal-login-view-761a4d8e.js');
|
|
29
29
|
const sqmBaseRegistrationFormView = require('./sqm-base-registration-form-view-8a2c8763.js');
|
|
30
|
-
const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-
|
|
30
|
+
const sqmPortalRegistrationFormView = require('./sqm-portal-registration-form-view-637a4bf4.js');
|
|
31
31
|
const sqmPortalProfileView = require('./sqm-portal-profile-view-33164798.js');
|
|
32
32
|
require('./utilities-78f5e169.js');
|
|
33
33
|
const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-fe602822.js');
|
|
34
34
|
const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-7b678f34.js');
|
|
35
|
-
const ShadowViewAddon = require('./ShadowViewAddon-
|
|
35
|
+
const ShadowViewAddon = require('./ShadowViewAddon-14a02da4.js');
|
|
36
36
|
const sqmPortalContainerView = require('./sqm-portal-container-view-4f15143a.js');
|
|
37
37
|
const sqmInvoiceTableView = require('./sqm-invoice-table-view-baded4af.js');
|
|
38
38
|
|
|
@@ -4104,7 +4104,7 @@ const promoCodeReferralWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\
|
|
|
4104
4104
|
|
|
4105
4105
|
const loyaltyWidget = "<sqm-brand brand-color=\"#4225c4\" brand-font=\"Nunito Sans\">\n <sqm-portal-container\n direction=\"column\"\n padding=\"small\"\n gap=\"xxxx-large\"\n display=\"grid\"\n max-width=\"100%\"\n background-color=\"#ffffff\"\n >\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xxx-large\"\n display=\"grid\"\n max-width=\"100%\"\n >\n <sqm-hero-image\n image-url=\"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"\n header=\"MyCompany Rewards\"\n description=\"Complete tasks to earn rewards\"\n layout=\"overlay\"\n padding-image=\"xxxx-large\"\n padding-text=\"xxx-large\"\n image-pos=\"center\"\n overlay-color=\"#5e5669\"\n overlay-opacity=\"0.9\"\n >\n </sqm-hero-image>\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xxx-large\"\n max-width=\"770px\"\n center\n display=\"grid\"\n >\n <sqm-program-explainer header=\"How it works\">\n <sqm-program-explainer-step\n description=\"Complete tasks like uploading your first video or sharing videos with friends\"\n header=\"Earn points for using our product\"\n icon=\"cash-stack\"\n text-color=\"#000000\"\n >\n </sqm-program-explainer-step>\n <sqm-program-explainer-step\n description=\"Redeem rewards like one free month of Enterprise or two plane tickets to anywhere in North America\"\n header=\"Redeem rewards with your points\"\n icon=\"people\"\n text-color=\"#000000\"\n >\n </sqm-program-explainer-step>\n </sqm-program-explainer>\n <sqm-portal-container\n center\n direction=\"row\"\n display=\"flex\"\n justify-content=\"space-between\"\n gap=\"xxx-large\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <sqm-stat-container space=\"xxx-large\" display=\"flex\">\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardsRedeemed/CREDIT/POINTS\"\n >\n <p>Points Redeemed</p>\n </sqm-big-stat>\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardBalance/CREDIT/POINT/value/global\"\n >\n <p>Points Balance</p>\n </sqm-big-stat>\n </sqm-stat-container>\n </sqm-portal-container>\n <sqm-portal-container\n direction=\"column\"\n padding=\"none\"\n gap=\"xx-large\"\n display=\"grid\"\n max-width=\"100%\"\n >\n <sqm-titled-section\n label-margin=\"small\"\n padding=\"none\"\n text-align=\"center\"\n >\n <h3 slot=\"label\">Earn points</h3>\n </sqm-titled-section>\n <sqm-card-feed gap=\"24\" width=\"347\">\n <sqm-task-card\n reward-amount=\"20\"\n goal=\"1\"\n card-title=\"Complete a Survey\"\n description=\"Fill out our NPS survey and get 20 points for giving us honest feedback.\"\n button-text=\"Take survey\"\n reward-unit=\"Points\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n finite=\"0\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n <sqm-task-card\n reward-amount=\"250\"\n goal=\"500\"\n show-progress-bar\n card-title=\"Spend $500\"\n description=\"Earn 250 points when you spend $500 or more.\"\n button-text=\"See plans\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n progress-bar-unit=\"$\"\n finite=\"0\"\n reward-unit=\"Points\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n <sqm-task-card\n goal=\"1\"\n reward-amount=\"50\"\n card-title=\"Follow Us on X\"\n description=\"Earn 50 points when you Follow Us on X!\"\n button-text=\"Follow\"\n button-link=\"https://twitter.com/\"\n open-new-tab=\"true\"\n event-key=\"socialFollow\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n finite=\"0\"\n reward-unit=\"Points\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n <sqm-task-card\n reward-amount=\"1\"\n reward-unit=\"Free Month\"\n goal=\"1\"\n card-title=\"Upgrade Your Plan\"\n description=\"Receive one free month for being a committed customer when you upgrade your plan.\"\n button-text=\"Upgrade\"\n completed-text=\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\"\n ended-message=\"Ended {endDate}\"\n expiry-message=\"Ends {endDate}\"\n open-new-tab=\"false\"\n finite=\"0\"\n starts-on-message=\"Starts {startDate}\"\n >\n </sqm-task-card>\n </sqm-card-feed>\n <sqm-portal-container\n gap=\"large\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n >\n <sqm-titled-section\n padding=\"none\"\n text-align=\"center\"\n label-margin=\"xx-small\"\n >\n <h3 slot=\"label\">Reward History</h3>\n </sqm-titled-section>\n <sqm-rewards-table\n per-page=\"4\"\n hidden-columns=\"0\"\n more-label=\"Next\"\n prev-label=\"Prev\"\n sm-breakpoint=\"599\"\n md-breakpoint=\"799\"\n >\n <sqm-rewards-table-reward-column\n available-text=\"{availableAmount} remaining\"\n column-title=\"Reward\"\n copy-text=\"Copied!\"\n redeemed-text=\"{redeemedAmount} redeemed\"\n >\n </sqm-rewards-table-reward-column>\n <sqm-rewards-table-source-column\n anonymous-user=\"Anonymous User\"\n column-title=\"Source\"\n deleted-user=\"Deleted User\"\n referral-text=\"{rewardSource, select, FRIEND_SIGNUP {Referral to} REFERRED {Referred by} other {}}\"\n reward-exchange-text=\"Reward Exchange\"\n reward-source-text=\"{rewardSource, select, MANUAL {Manual} AUTOMATED {{programName}} other {}}\"\n >\n </sqm-rewards-table-source-column>\n <sqm-rewards-table-status-column\n column-title=\"Status\"\n expiry-text=\"Expires on \"\n status-text=\"{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }\"\n >\n </sqm-rewards-table-status-column>\n <sqm-rewards-table-date-column\n column-title=\"Date received\"\n date-shown=\"dateGiven\"\n >\n </sqm-rewards-table-date-column>\n <sqm-empty\n slot=\"empty\"\n empty-state-image=\"https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_reward2.png\"\n empty-state-header=\"View your rewards\"\n empty-state-text=\"Refer friends and complete tasks to view the details of your rewards\"\n >\n </sqm-empty>\n </sqm-rewards-table>\n </sqm-portal-container>\n </sqm-portal-container>\n <sqm-portal-footer\n support-email=\"support@example.com\"\n terms-link=\"https:\\/\\/example.com\"\n faq-link=\"https:\\/\\/example.com\"\n terms-text=\"Terms And Conditions\"\n faq-text=\"FAQ\"\n show-powered-by=\"true\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n ></sqm-portal-footer>\n </sqm-portal-container>\n </sqm-portal-container>\n </sqm-portal-container>\n</sqm-brand>\n";
|
|
4106
4106
|
|
|
4107
|
-
const instantAccessReferrerShareWidget = "<sqm-hero\n background=\"https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png\"\n columns=\"2\"\n padding-size=\"medium\"\n wrap-direction=\"wrap\"\n secondary-background=\"#FFFFFF\"\n min-height=\"200\"\n ><sqm-referral-card\n vertical-alignment=\"start\"\n slot=\"secondary-column\"\n padding-bottom=\"small\"\n padding-left=\"x-large\"\n padding-right=\"x-large\"\n padding-top=\"small\"\n >\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"none\"\n padding=\"none\"\n slot=\"header\"\n ><h1 slot=\"label\">Invite your friends to unlock rewards!</h1>\n <p slot=\"content\">\n They’ll get a $50 credit towards a new account and\n you’ll get a $50 in credit for each friend you refer.\n </p></sqm-titled-section\n >\n <sqm-portal-container\n gap=\"small\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n slot=\"left\"\n >\n <p style=\"margin: 0\">Choose how you want to share:</p>\n <sqm-share-link\n tooltip-text=\"Copied to Clipboard\"\n tooltip-lifespan=\"1000\"\n >\n </sqm-share-link>\n <sqm-share-button\n medium=\"email\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Share via email\n </sqm-share-button>\n <sqm-share-button\n medium=\"linkedin\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Share on LinkedIn\n </sqm-share-button>\n <sqm-share-button\n medium=\"twitter\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Post about us on X\n </sqm-share-button> </sqm-portal-container\n ><sqm-portal-container\n display=\"flex\"\n slot=\"footer\"\n gap=\"small\"\n justify-content=\"center\"\n >\n <sqm-logout-current-user\n user-identification-text=\"{email}\"\n switch-user-link=\"#\"\n switch-user-text=\"not you?\"\n ></sqm-logout-current-user>\n <sqm-portal-footer\n support-email=\"support@example.com\"\n show-powered-by=\"true\"\n padding-bottom=\"x-small\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n hide-support-text\n terms-text=\"Terms And Conditions\"\n terms-link=\"https://example.com\"\n ></sqm-portal-footer></sqm-portal-container\n ></sqm-referral-card>\n</sqm-hero>\n";
|
|
4107
|
+
const instantAccessReferrerShareWidget = "<sqm-hero\n background=\"https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png\"\n columns=\"2\"\n padding-size=\"medium\"\n wrap-direction=\"wrap\"\n secondary-background=\"#FFFFFF\"\n min-height=\"200\"\n ><sqm-referral-card\n vertical-alignment=\"start\"\n slot=\"secondary-column\"\n padding-bottom=\"small\"\n padding-left=\"x-large\"\n padding-right=\"x-large\"\n padding-top=\"small\"\n >\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"none\"\n padding=\"none\"\n slot=\"header\"\n ><h1 slot=\"label\">Invite your friends to unlock rewards!</h1>\n <p slot=\"content\">\n They’ll get a $50 credit towards a new account and\n you’ll get a $50 in credit for each friend you refer.\n </p></sqm-titled-section\n >\n <sqm-portal-container\n gap=\"small\"\n direction=\"column\"\n display=\"grid\"\n max-width=\"100%\"\n padding=\"none\"\n slot=\"left\"\n >\n <p style=\"margin: 0\">Choose how you want to share:</p>\n <sqm-share-link\n tooltip-text=\"Copied to Clipboard\"\n tooltip-lifespan=\"1000\"\n >\n </sqm-share-link>\n <sqm-share-button\n medium=\"email\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Share via email\n </sqm-share-button>\n <sqm-share-button\n medium=\"linkedin\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Share on LinkedIn\n </sqm-share-button>\n <sqm-share-button\n medium=\"twitter\"\n icon-slot=\"prefix\"\n size=\"medium\"\n type=\"default\"\n >\n Post about us on X\n </sqm-share-button> </sqm-portal-container\n ><sqm-portal-container\n display=\"flex\"\n slot=\"footer\"\n gap=\"small\"\n justify-content=\"center\"\n >\n <sqm-logout-current-user\n user-identification-text=\"{email}\"\n switch-user-link=\"#\"\n switch-user-text=\"not you?\"\n email-error-text=\"Error fetching email\"\n ></sqm-logout-current-user>\n <sqm-portal-footer\n support-email=\"support@example.com\"\n show-powered-by=\"true\"\n padding-bottom=\"x-small\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n hide-support-text\n terms-text=\"Terms And Conditions\"\n terms-link=\"https://example.com\"\n ></sqm-portal-footer></sqm-portal-container\n ></sqm-referral-card>\n</sqm-hero>\n";
|
|
4108
4108
|
|
|
4109
4109
|
const instantAccessFriendCouponWidget = "<sqm-hero\n background=\"https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png\"\n columns=\"2\"\n padding-size=\"medium\"\n wrap-direction=\"wrap\"\n secondary-background=\"#FFFFFF\"\n>\n <sqm-referral-card\n vertical-alignment=\"start\"\n padding-bottom=\"small\"\n padding-left=\"x-large\"\n padding-right=\"x-large\"\n padding-top=\"small\"\n slot=\"secondary-column\"\n >\n <sqm-portal-container\n gap=\"large\"\n direction=\"column\"\n display=\"flex\"\n justify-content=\"center\"\n max-width=\"100%\"\n padding=\"none\"\n slot=\"header\"\n >\n <sqm-titled-section\n text-align=\"center\"\n label-margin=\"xxx-small\"\n padding=\"none\"\n >\n <h1 slot=\"label\">You got $50 off thanks to a friend!</h1>\n <p slot=\"content\">\n <span> Use this reward to get $50 off your next purchase. </span>\n </p>\n </sqm-titled-section>\n\n <sqm-coupon-code copy-button-style=\"button-outside\"></sqm-coupon-code>\n </sqm-portal-container>\n\n <sqm-portal-footer\n slot=\"footer\"\n show-powered-by=\"true\"\n padding-bottom=\"none\"\n padding-left=\"none\"\n padding-right=\"none\"\n padding-top=\"none\"\n hide-support-text\n terms-text=\"Terms And Conditions\"\n terms-link=\"https://example.com\"\n ></sqm-portal-footer>\n </sqm-referral-card>\n</sqm-hero>\n";
|
|
4110
4110
|
|
|
@@ -7475,6 +7475,126 @@ const PortalRegister = /*#__PURE__*/Object.freeze({
|
|
|
7475
7475
|
TermsAndConditions: TermsAndConditions
|
|
7476
7476
|
});
|
|
7477
7477
|
|
|
7478
|
+
const PortalRegistrationForm_stories = {
|
|
7479
|
+
title: "Components/Microsite Portal Register",
|
|
7480
|
+
};
|
|
7481
|
+
const defaultProps$4 = {
|
|
7482
|
+
states: {
|
|
7483
|
+
error: "",
|
|
7484
|
+
loading: false,
|
|
7485
|
+
confirmPassword: true,
|
|
7486
|
+
hideInputs: false,
|
|
7487
|
+
loginPath: "/login",
|
|
7488
|
+
},
|
|
7489
|
+
callbacks: {
|
|
7490
|
+
submit: () => console.log("Submit!"),
|
|
7491
|
+
inputFunction: () => { },
|
|
7492
|
+
},
|
|
7493
|
+
refs: {
|
|
7494
|
+
formRef: {},
|
|
7495
|
+
},
|
|
7496
|
+
content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
|
|
7497
|
+
};
|
|
7498
|
+
const errorProps$2 = {
|
|
7499
|
+
states: {
|
|
7500
|
+
error: "Something went wrong. Please try again.",
|
|
7501
|
+
loading: false,
|
|
7502
|
+
confirmPassword: true,
|
|
7503
|
+
hideInputs: false,
|
|
7504
|
+
loginPath: "/login",
|
|
7505
|
+
},
|
|
7506
|
+
callbacks: {
|
|
7507
|
+
submit: () => console.log("Submit!"),
|
|
7508
|
+
inputFunction: () => { },
|
|
7509
|
+
},
|
|
7510
|
+
refs: {
|
|
7511
|
+
formRef: {},
|
|
7512
|
+
},
|
|
7513
|
+
content: {
|
|
7514
|
+
pageLabel: "Register",
|
|
7515
|
+
confirmPasswordLabel: "Confirm Password",
|
|
7516
|
+
},
|
|
7517
|
+
};
|
|
7518
|
+
const loadingProps$2 = {
|
|
7519
|
+
states: {
|
|
7520
|
+
error: "",
|
|
7521
|
+
loading: true,
|
|
7522
|
+
confirmPassword: true,
|
|
7523
|
+
hideInputs: false,
|
|
7524
|
+
loginPath: "/login",
|
|
7525
|
+
},
|
|
7526
|
+
callbacks: {
|
|
7527
|
+
submit: () => console.log("Submit!"),
|
|
7528
|
+
inputFunction: () => { },
|
|
7529
|
+
},
|
|
7530
|
+
refs: {
|
|
7531
|
+
formRef: {},
|
|
7532
|
+
},
|
|
7533
|
+
content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
|
|
7534
|
+
};
|
|
7535
|
+
const slottedProps$1 = {
|
|
7536
|
+
states: {
|
|
7537
|
+
error: "",
|
|
7538
|
+
loading: false,
|
|
7539
|
+
confirmPassword: true,
|
|
7540
|
+
hideInputs: false,
|
|
7541
|
+
loginPath: "/login",
|
|
7542
|
+
},
|
|
7543
|
+
callbacks: {
|
|
7544
|
+
submit: () => console.log("Submit!"),
|
|
7545
|
+
inputFunction: () => { },
|
|
7546
|
+
},
|
|
7547
|
+
refs: {
|
|
7548
|
+
formRef: {},
|
|
7549
|
+
},
|
|
7550
|
+
content: {
|
|
7551
|
+
pageLabel: "Register",
|
|
7552
|
+
confirmPasswordLabel: "Confirm Password",
|
|
7553
|
+
formData: (index.h("div", null,
|
|
7554
|
+
index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
|
|
7555
|
+
index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
|
|
7556
|
+
},
|
|
7557
|
+
};
|
|
7558
|
+
const Default$5 = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4));
|
|
7559
|
+
const RegisterWithError$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$2)));
|
|
7560
|
+
const RegisterLoading$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$2)));
|
|
7561
|
+
const FieldsHidden$1 = () => {
|
|
7562
|
+
return (index.h("sqm-portal-register", { demoData: {
|
|
7563
|
+
states: {
|
|
7564
|
+
error: "",
|
|
7565
|
+
loading: true,
|
|
7566
|
+
registrationFormState: {},
|
|
7567
|
+
confirmPassword: true,
|
|
7568
|
+
hideInputs: true,
|
|
7569
|
+
loginPath: "/login",
|
|
7570
|
+
},
|
|
7571
|
+
} }));
|
|
7572
|
+
};
|
|
7573
|
+
const SlottedInputs$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
|
|
7574
|
+
const RegisterWithMarketingEmailsCheckbox = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
|
|
7575
|
+
...defaultProps$4.content,
|
|
7576
|
+
emailOptIn: (index.h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
|
|
7577
|
+
} })));
|
|
7578
|
+
const TermsAndConditions$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$4, { content: {
|
|
7579
|
+
...defaultProps$4.content,
|
|
7580
|
+
terms: (index.h("p", null,
|
|
7581
|
+
"By signing up you agree to the",
|
|
7582
|
+
" ",
|
|
7583
|
+
index.h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
|
|
7584
|
+
} })));
|
|
7585
|
+
|
|
7586
|
+
const PortalRegistrationForm = /*#__PURE__*/Object.freeze({
|
|
7587
|
+
__proto__: null,
|
|
7588
|
+
'default': PortalRegistrationForm_stories,
|
|
7589
|
+
Default: Default$5,
|
|
7590
|
+
RegisterWithError: RegisterWithError$1,
|
|
7591
|
+
RegisterLoading: RegisterLoading$1,
|
|
7592
|
+
FieldsHidden: FieldsHidden$1,
|
|
7593
|
+
SlottedInputs: SlottedInputs$1,
|
|
7594
|
+
RegisterWithMarketingEmailsCheckbox: RegisterWithMarketingEmailsCheckbox,
|
|
7595
|
+
TermsAndConditions: TermsAndConditions$1
|
|
7596
|
+
});
|
|
7597
|
+
|
|
7478
7598
|
const scenario$6 = "@author:derek\n@owner:ian\nFeature: Forgot Password\n\n @motivating\n Scenario: Users can request to reset their password\n Given a user enters their email address\n And that email address is linked to a previously created account\n When they click \"Reset Password\"\n Then the button enters a loading state\n When the password reset email is sent\n Then a confirmation banner is shown stating a password reset email was sent\n\n @motivating\n Scenario: Users are notified if sending their password reset email fails\n Given a user enters their email address\n And that email address is linked to a previously created account\n When they click \"Reset Password\"\n Then the button enters a loading state\n When the password reset email fails to send\n Then the user does not receive a password reset email\n And an error banner is shown stating that they should try again\n\n @motivating\n @landmine\n Scenario: If the input email is not associated to an account a success banner is shown but an email is not be sent\n Given the user entered an email address that is not associated to an accoun\n When they click \"Reset Password\"\n Then the button enters a loading state\n But no email is sent\n And a success banner is shown stating a password reset email was sent if the given email was associated to an account\n\n @motivating\n Scenario: Users can resend password reset email\n Given a user had previously requested to reset their password\n When they enter their email address\n And that email address is linked to a previously created account\n And they click \"Reset Password\"\n Then the user receives a second password reset email\n And a success banner is shown stating that their email was sent\n\n @motivating\n Scenario Outline: The email link can be configured to redirect users to a specific base path but defaults to \"/resetPassword\"\n Given a user viewing the password reset component\n And the component <mayHave> \"redirect-path\" with <value>\n When they request a password reset email\n And they click the link in the email\n Then they are redirected to <redirectPath>\n Examples:\n | mayHave | value | redirectPath |\n | doesn't have | N/A | /resetPassword |\n | has | /resetMyPassword | /resetMyPassword |\n\n @minutia\n Scenario Outline: Navigation back to the login page can be customized but defaults to \"/login\"\n Given a user viewing the password reset component\n And the component <mayHave> \"login-path\" with <value>\n Then they see a \"Sign In\" text button\n When they click \"Sign In\"\n Then they are redirected to <redirectPath>\n Examples:\n | mayHave | value | redirectPath |\n | doesn't have | N/A | /login |\n | has | /signin | /signin |";
|
|
7479
7599
|
|
|
7480
7600
|
const PortalForgotPassword_stories = {
|
|
@@ -7483,7 +7603,7 @@ const PortalForgotPassword_stories = {
|
|
|
7483
7603
|
scenario: scenario$6,
|
|
7484
7604
|
},
|
|
7485
7605
|
};
|
|
7486
|
-
const defaultProps$
|
|
7606
|
+
const defaultProps$5 = {
|
|
7487
7607
|
states: {
|
|
7488
7608
|
error: "",
|
|
7489
7609
|
loading: false,
|
|
@@ -7498,7 +7618,7 @@ const defaultProps$4 = {
|
|
|
7498
7618
|
messageSlot: "Enter your email below to receive a password reset link.",
|
|
7499
7619
|
},
|
|
7500
7620
|
};
|
|
7501
|
-
const errorProps$
|
|
7621
|
+
const errorProps$3 = {
|
|
7502
7622
|
states: {
|
|
7503
7623
|
error: "Something went wrong. Please try again.",
|
|
7504
7624
|
loading: false,
|
|
@@ -7513,7 +7633,7 @@ const errorProps$2 = {
|
|
|
7513
7633
|
messageSlot: "Enter your email below to receive a password reset link.",
|
|
7514
7634
|
},
|
|
7515
7635
|
};
|
|
7516
|
-
const loadingProps$
|
|
7636
|
+
const loadingProps$3 = {
|
|
7517
7637
|
states: {
|
|
7518
7638
|
error: "",
|
|
7519
7639
|
loading: true,
|
|
@@ -7543,15 +7663,15 @@ const successProps = {
|
|
|
7543
7663
|
messageSlot: "Enter your email below to receive a password reset link.",
|
|
7544
7664
|
},
|
|
7545
7665
|
};
|
|
7546
|
-
const Default$
|
|
7547
|
-
const ForgotPasswordWithError = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, errorProps$
|
|
7548
|
-
const ForgotPasswordLoading = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, loadingProps$
|
|
7666
|
+
const Default$6 = () => index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, defaultProps$5));
|
|
7667
|
+
const ForgotPasswordWithError = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, errorProps$3)));
|
|
7668
|
+
const ForgotPasswordLoading = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, loadingProps$3)));
|
|
7549
7669
|
const ForgotPasswordSuccess = () => (index.h(sqmPortalForgotPasswordView.PortalForgotPasswordView, Object.assign({}, successProps)));
|
|
7550
7670
|
|
|
7551
7671
|
const PortalForgotPassword = /*#__PURE__*/Object.freeze({
|
|
7552
7672
|
__proto__: null,
|
|
7553
7673
|
'default': PortalForgotPassword_stories,
|
|
7554
|
-
Default: Default$
|
|
7674
|
+
Default: Default$6,
|
|
7555
7675
|
ForgotPasswordWithError: ForgotPasswordWithError,
|
|
7556
7676
|
ForgotPasswordLoading: ForgotPasswordLoading,
|
|
7557
7677
|
ForgotPasswordSuccess: ForgotPasswordSuccess
|
|
@@ -7584,12 +7704,12 @@ const defaultStates = {
|
|
|
7584
7704
|
loadingVerification: false,
|
|
7585
7705
|
countdown: 10,
|
|
7586
7706
|
};
|
|
7587
|
-
const defaultProps$
|
|
7707
|
+
const defaultProps$6 = {
|
|
7588
7708
|
states: defaultStates,
|
|
7589
7709
|
callbacks: defaultCallbacks,
|
|
7590
7710
|
content: defaultContent,
|
|
7591
7711
|
};
|
|
7592
|
-
const errorProps$
|
|
7712
|
+
const errorProps$4 = {
|
|
7593
7713
|
states: {
|
|
7594
7714
|
...defaultStates,
|
|
7595
7715
|
error: "Something went wrong. Please try again.",
|
|
@@ -7597,7 +7717,7 @@ const errorProps$3 = {
|
|
|
7597
7717
|
callbacks: defaultCallbacks,
|
|
7598
7718
|
content: defaultContent,
|
|
7599
7719
|
};
|
|
7600
|
-
const loadingProps$
|
|
7720
|
+
const loadingProps$4 = {
|
|
7601
7721
|
states: {
|
|
7602
7722
|
...defaultStates,
|
|
7603
7723
|
loading: true,
|
|
@@ -7622,16 +7742,16 @@ const loadingVerificationProps = {
|
|
|
7622
7742
|
callbacks: defaultCallbacks,
|
|
7623
7743
|
content: defaultContent,
|
|
7624
7744
|
};
|
|
7625
|
-
const Default$
|
|
7626
|
-
const EmailVerificationWithError = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$
|
|
7627
|
-
const EmailVerificationLoading = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingProps$
|
|
7745
|
+
const Default$7 = () => index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, defaultProps$6));
|
|
7746
|
+
const EmailVerificationWithError = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, errorProps$4)));
|
|
7747
|
+
const EmailVerificationLoading = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingProps$4)));
|
|
7628
7748
|
const EmailVerificationCheckingVerification = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, loadingVerificationProps)));
|
|
7629
7749
|
const EmailVerificationSuccess = () => (index.h(sqmPortalEmailVerificationView.PortalEmailVerificationView, Object.assign({}, successProps$1)));
|
|
7630
7750
|
|
|
7631
7751
|
const PortalEmailVerification = /*#__PURE__*/Object.freeze({
|
|
7632
7752
|
__proto__: null,
|
|
7633
7753
|
'default': PortalEmailVerification_stories,
|
|
7634
|
-
Default: Default$
|
|
7754
|
+
Default: Default$7,
|
|
7635
7755
|
EmailVerificationWithError: EmailVerificationWithError,
|
|
7636
7756
|
EmailVerificationLoading: EmailVerificationLoading,
|
|
7637
7757
|
EmailVerificationCheckingVerification: EmailVerificationCheckingVerification,
|
|
@@ -7646,7 +7766,7 @@ const PortalResetPassword_stories = {
|
|
|
7646
7766
|
scenario: scenario$8,
|
|
7647
7767
|
},
|
|
7648
7768
|
};
|
|
7649
|
-
const defaultProps$
|
|
7769
|
+
const defaultProps$7 = {
|
|
7650
7770
|
states: {
|
|
7651
7771
|
error: "",
|
|
7652
7772
|
loading: false,
|
|
@@ -7692,7 +7812,7 @@ const defaultPropsNoConfirm = {
|
|
|
7692
7812
|
failed: () => console.log("failed"),
|
|
7693
7813
|
},
|
|
7694
7814
|
};
|
|
7695
|
-
const errorProps$
|
|
7815
|
+
const errorProps$5 = {
|
|
7696
7816
|
states: {
|
|
7697
7817
|
error: "Something went wrong. Please try again.",
|
|
7698
7818
|
loading: false,
|
|
@@ -7715,7 +7835,7 @@ const errorProps$4 = {
|
|
|
7715
7835
|
failed: () => console.log("failed"),
|
|
7716
7836
|
},
|
|
7717
7837
|
};
|
|
7718
|
-
const loadingProps$
|
|
7838
|
+
const loadingProps$5 = {
|
|
7719
7839
|
states: {
|
|
7720
7840
|
error: "",
|
|
7721
7841
|
loading: true,
|
|
@@ -7784,17 +7904,17 @@ const validatingCodeProps = {
|
|
|
7784
7904
|
failed: () => console.log("failed"),
|
|
7785
7905
|
},
|
|
7786
7906
|
};
|
|
7787
|
-
const Default$
|
|
7907
|
+
const Default$8 = () => index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultProps$7));
|
|
7788
7908
|
const DefaultWithoutConfirmField = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
|
|
7789
|
-
const ResetPasswordWithError = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, errorProps$
|
|
7790
|
-
const ResetPasswordLoading = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, loadingProps$
|
|
7909
|
+
const ResetPasswordWithError = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, errorProps$5)));
|
|
7910
|
+
const ResetPasswordLoading = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, loadingProps$5)));
|
|
7791
7911
|
const ResetPasswordSuccess = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, successProps$2)));
|
|
7792
7912
|
const CodeValidating = () => (index.h(sqmPortalResetPasswordView.PortalResetPasswordView, Object.assign({}, validatingCodeProps)));
|
|
7793
7913
|
|
|
7794
7914
|
const PortalResetPassword = /*#__PURE__*/Object.freeze({
|
|
7795
7915
|
__proto__: null,
|
|
7796
7916
|
'default': PortalResetPassword_stories,
|
|
7797
|
-
Default: Default$
|
|
7917
|
+
Default: Default$8,
|
|
7798
7918
|
DefaultWithoutConfirmField: DefaultWithoutConfirmField,
|
|
7799
7919
|
ResetPasswordWithError: ResetPasswordWithError,
|
|
7800
7920
|
ResetPasswordLoading: ResetPasswordLoading,
|
|
@@ -7810,7 +7930,7 @@ const PortalVerifyEmail_stories = {
|
|
|
7810
7930
|
scenario: scenario$9,
|
|
7811
7931
|
},
|
|
7812
7932
|
};
|
|
7813
|
-
const errorProps$
|
|
7933
|
+
const errorProps$6 = {
|
|
7814
7934
|
states: {
|
|
7815
7935
|
error: "Something went wrong. Please try again.",
|
|
7816
7936
|
loading: false,
|
|
@@ -7844,7 +7964,7 @@ const verifiedProps = {
|
|
|
7844
7964
|
},
|
|
7845
7965
|
content: {},
|
|
7846
7966
|
};
|
|
7847
|
-
const EmailVerificationWithError$1 = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, errorProps$
|
|
7967
|
+
const EmailVerificationWithError$1 = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, errorProps$6)));
|
|
7848
7968
|
const EmailVerificationSuccess$1 = () => (index.h(sqmPortalVerifyEmailView.PortalVerifyEmailView, Object.assign({}, verifiedProps)));
|
|
7849
7969
|
|
|
7850
7970
|
const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
|
|
@@ -7857,7 +7977,7 @@ const PortalVerifyEmail = /*#__PURE__*/Object.freeze({
|
|
|
7857
7977
|
const AssetCard_stories = {
|
|
7858
7978
|
title: "Components/Asset Card",
|
|
7859
7979
|
};
|
|
7860
|
-
const Default$
|
|
7980
|
+
const Default$9 = () => {
|
|
7861
7981
|
const props = {
|
|
7862
7982
|
text: { titleText: "Marketing Banner" },
|
|
7863
7983
|
imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png",
|
|
@@ -7885,7 +8005,7 @@ const CardWithNoImg = () => {
|
|
|
7885
8005
|
const AssetCard = /*#__PURE__*/Object.freeze({
|
|
7886
8006
|
__proto__: null,
|
|
7887
8007
|
'default': AssetCard_stories,
|
|
7888
|
-
Default: Default$
|
|
8008
|
+
Default: Default$9,
|
|
7889
8009
|
CardWithLongText: CardWithLongText,
|
|
7890
8010
|
CardWithNoImg: CardWithNoImg
|
|
7891
8011
|
});
|
|
@@ -7974,7 +8094,7 @@ const ChangePassword_stories = {
|
|
|
7974
8094
|
scenario: scenario$a,
|
|
7975
8095
|
},
|
|
7976
8096
|
};
|
|
7977
|
-
const defaultProps$
|
|
8097
|
+
const defaultProps$8 = {
|
|
7978
8098
|
states: {
|
|
7979
8099
|
open: false,
|
|
7980
8100
|
loading: false,
|
|
@@ -8018,7 +8138,7 @@ const openProps = {
|
|
|
8018
8138
|
submit: (e) => console.log("Submit", e),
|
|
8019
8139
|
},
|
|
8020
8140
|
};
|
|
8021
|
-
const errorProps$
|
|
8141
|
+
const errorProps$7 = {
|
|
8022
8142
|
states: {
|
|
8023
8143
|
open: true,
|
|
8024
8144
|
loading: false,
|
|
@@ -8062,7 +8182,7 @@ const passwordErrorProps = {
|
|
|
8062
8182
|
submit: (e) => console.log("Submit", e),
|
|
8063
8183
|
},
|
|
8064
8184
|
};
|
|
8065
|
-
const loadingProps$
|
|
8185
|
+
const loadingProps$6 = {
|
|
8066
8186
|
states: {
|
|
8067
8187
|
open: true,
|
|
8068
8188
|
loading: true,
|
|
@@ -8106,17 +8226,17 @@ const successProps$3 = {
|
|
|
8106
8226
|
submit: (e) => console.log("Submit", e),
|
|
8107
8227
|
},
|
|
8108
8228
|
};
|
|
8109
|
-
const Default$
|
|
8229
|
+
const Default$a = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, defaultProps$8));
|
|
8110
8230
|
const Open = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, openProps));
|
|
8111
|
-
const Error$2 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, errorProps$
|
|
8231
|
+
const Error$2 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, errorProps$7));
|
|
8112
8232
|
const PaswordError = () => (index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, passwordErrorProps)));
|
|
8113
|
-
const Loading$1 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps$
|
|
8233
|
+
const Loading$1 = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, loadingProps$6));
|
|
8114
8234
|
const Success = () => index.h(ShadowViewAddon.PortalChangePasswordView, Object.assign({}, successProps$3));
|
|
8115
8235
|
|
|
8116
8236
|
const ChangePassword = /*#__PURE__*/Object.freeze({
|
|
8117
8237
|
__proto__: null,
|
|
8118
8238
|
'default': ChangePassword_stories,
|
|
8119
|
-
Default: Default$
|
|
8239
|
+
Default: Default$a,
|
|
8120
8240
|
Open: Open,
|
|
8121
8241
|
Error: Error$2,
|
|
8122
8242
|
PaswordError: PaswordError,
|
|
@@ -8124,10 +8244,72 @@ const ChangePassword = /*#__PURE__*/Object.freeze({
|
|
|
8124
8244
|
Success: Success
|
|
8125
8245
|
});
|
|
8126
8246
|
|
|
8247
|
+
const ChangeMarketing_stories = {
|
|
8248
|
+
title: "Components/Change Marketing Emails Status",
|
|
8249
|
+
};
|
|
8250
|
+
const defaultProps$9 = {
|
|
8251
|
+
states: {
|
|
8252
|
+
success: false,
|
|
8253
|
+
loading: false,
|
|
8254
|
+
submitDisabled: false,
|
|
8255
|
+
formState: {
|
|
8256
|
+
marketingEmailOptIn: false,
|
|
8257
|
+
errors: null,
|
|
8258
|
+
error: "",
|
|
8259
|
+
},
|
|
8260
|
+
user: {
|
|
8261
|
+
id: "zach",
|
|
8262
|
+
accountId: "zach",
|
|
8263
|
+
marketingEmailOptIn: false,
|
|
8264
|
+
},
|
|
8265
|
+
text: {
|
|
8266
|
+
emailPreferencesHeader: "Email preferences",
|
|
8267
|
+
marketingCheckboxLabel: "I want to receive marketing emails and promotions for this referral program from impact.com",
|
|
8268
|
+
submitChangeButtonText: "Save",
|
|
8269
|
+
successMessage: "Opt-in preference has been changed.",
|
|
8270
|
+
},
|
|
8271
|
+
},
|
|
8272
|
+
callbacks: {
|
|
8273
|
+
onSubmit: (props) => console.log(props),
|
|
8274
|
+
setChecked: (value) => console.log(value),
|
|
8275
|
+
},
|
|
8276
|
+
};
|
|
8277
|
+
const Default$b = () => {
|
|
8278
|
+
return index.h("sqm-portal-change-marketing", null);
|
|
8279
|
+
};
|
|
8280
|
+
const Loading$2 = () => {
|
|
8281
|
+
return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: { ...defaultProps$9.states, loading: true } })));
|
|
8282
|
+
};
|
|
8283
|
+
const Error$3 = () => {
|
|
8284
|
+
return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
|
|
8285
|
+
...defaultProps$9.states,
|
|
8286
|
+
formState: {
|
|
8287
|
+
...defaultProps$9.states.formState,
|
|
8288
|
+
errors: { error: true },
|
|
8289
|
+
error: "An error string",
|
|
8290
|
+
},
|
|
8291
|
+
} })));
|
|
8292
|
+
};
|
|
8293
|
+
const Success$1 = () => {
|
|
8294
|
+
return (index.h(ShadowViewAddon.ChangeMarktingView, Object.assign({}, defaultProps$9, { states: {
|
|
8295
|
+
...defaultProps$9.states,
|
|
8296
|
+
success: true,
|
|
8297
|
+
} })));
|
|
8298
|
+
};
|
|
8299
|
+
|
|
8300
|
+
const ChangeMarketing = /*#__PURE__*/Object.freeze({
|
|
8301
|
+
__proto__: null,
|
|
8302
|
+
'default': ChangeMarketing_stories,
|
|
8303
|
+
Default: Default$b,
|
|
8304
|
+
Loading: Loading$2,
|
|
8305
|
+
Error: Error$3,
|
|
8306
|
+
Success: Success$1
|
|
8307
|
+
});
|
|
8308
|
+
|
|
8127
8309
|
const PortalProfile_stories = {
|
|
8128
8310
|
title: "Components/Microsite Profile",
|
|
8129
8311
|
};
|
|
8130
|
-
const defaultProps$
|
|
8312
|
+
const defaultProps$a = {
|
|
8131
8313
|
states: {
|
|
8132
8314
|
success: false,
|
|
8133
8315
|
loading: false,
|
|
@@ -8199,7 +8381,7 @@ const noCountry = {
|
|
|
8199
8381
|
onChange: (e) => console.log(e),
|
|
8200
8382
|
},
|
|
8201
8383
|
};
|
|
8202
|
-
const loadingProps$
|
|
8384
|
+
const loadingProps$7 = {
|
|
8203
8385
|
states: {
|
|
8204
8386
|
success: false,
|
|
8205
8387
|
loading: true,
|
|
@@ -8271,7 +8453,7 @@ const disabledProps = {
|
|
|
8271
8453
|
onChange: (e) => console.log(e),
|
|
8272
8454
|
},
|
|
8273
8455
|
};
|
|
8274
|
-
const errorProps$
|
|
8456
|
+
const errorProps$8 = {
|
|
8275
8457
|
states: {
|
|
8276
8458
|
success: false,
|
|
8277
8459
|
loading: false,
|
|
@@ -8343,22 +8525,22 @@ const successProps$4 = {
|
|
|
8343
8525
|
onChange: (e) => console.log(e),
|
|
8344
8526
|
},
|
|
8345
8527
|
};
|
|
8346
|
-
const Default$
|
|
8528
|
+
const Default$c = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, defaultProps$a));
|
|
8347
8529
|
const DefaultNoCountry = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, noCountry));
|
|
8348
|
-
const Loading$
|
|
8530
|
+
const Loading$3 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, loadingProps$7));
|
|
8349
8531
|
const Disabled$1 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, disabledProps));
|
|
8350
|
-
const Error$
|
|
8351
|
-
const Success$
|
|
8532
|
+
const Error$4 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, errorProps$8));
|
|
8533
|
+
const Success$2 = () => index.h(sqmPortalProfileView.PortalProfileView, Object.assign({}, successProps$4));
|
|
8352
8534
|
|
|
8353
8535
|
const PortalProfile = /*#__PURE__*/Object.freeze({
|
|
8354
8536
|
__proto__: null,
|
|
8355
8537
|
'default': PortalProfile_stories,
|
|
8356
|
-
Default: Default$
|
|
8538
|
+
Default: Default$c,
|
|
8357
8539
|
DefaultNoCountry: DefaultNoCountry,
|
|
8358
|
-
Loading: Loading$
|
|
8540
|
+
Loading: Loading$3,
|
|
8359
8541
|
Disabled: Disabled$1,
|
|
8360
|
-
Error: Error$
|
|
8361
|
-
Success: Success$
|
|
8542
|
+
Error: Error$4,
|
|
8543
|
+
Success: Success$2
|
|
8362
8544
|
});
|
|
8363
8545
|
|
|
8364
8546
|
const column = "@author:noah\n@owner:noah\nFeature: Referral Table User Column\n\n Shows the same custom content for each referral\n\n Background:\n Given the column in included in the referral table\n\n @motivating\n Scenario: The title of the date column is configurable\n Given the \"column-title\" prop is set to \"My column title\"\n Then the date column is shown with \"My column title\"\n\n @motivating\n Scenario: The same custom content is shown for each referral\n Given there is at least one referral\n Then for each referral custom content is shown\n And the custom content is provided as slot content";
|
|
@@ -10135,7 +10317,7 @@ const dashboardTemplate = "<sqm-portal-container direction=\"column\" padding=\"
|
|
|
10135
10317
|
|
|
10136
10318
|
const leadSubmitTemplate = "<sqm-referral-iframe></sqm-referral-iframe>\n";
|
|
10137
10319
|
|
|
10138
|
-
const editProfileTemplate = "<sqm-portal-protected-route\n require-email-verification=\"true\"\n redirect-to=\"/login\"\n redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n";
|
|
10320
|
+
const editProfileTemplate = "<sqm-portal-protected-route\n require-email-verification=\"true\"\n redirect-to=\"/login\"\n redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-profile></sqm-portal-profile> </sqm-portal-container\n><sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-change-password></sqm-portal-change-password>\n</sqm-portal-container>\n<sqm-portal-container direction=\"column\" gap=\"xxx-large\">\n <sqm-portal-change-marketing></sqm-portal-change-marketing>\n</sqm-portal-container>\n";
|
|
10139
10321
|
|
|
10140
10322
|
const activityTemplate = "<sqm-portal-protected-route\n require-email-verification=\"true\"\n redirect-to=\"/login\"\n redirect-to-unverified=\"/emailVerification\"\n></sqm-portal-protected-route>\n<sqm-portal-container direction=\"column\" padding=\"xxx-large\" gap=\"xxx-large\">\n <sqm-text> <h1>Activity</h1></sqm-text>\n <sqm-stat-container space=\"xxxx-large\"\n ><sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/referralsCount\"\n ><sqm-text><p>Referrals</p></sqm-text></sqm-big-stat\n >\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardsCountFiltered/AVAILABLE\"\n ><sqm-text><p>Rewards Earned</p></sqm-text></sqm-big-stat\n >\n <sqm-big-stat\n flex-reverse=\"true\"\n alignment=\"left\"\n stat-type=\"/rewardBalance/CREDIT/CENTS\"\n ><sqm-text><p>Reward Balance</p></sqm-text></sqm-big-stat\n >\n </sqm-stat-container>\n <sqm-referral-table>\n <sqm-referral-table-user-column></sqm-referral-table-user-column>\n <sqm-referral-table-rewards-column></sqm-referral-table-rewards-column>\n <sqm-referral-table-status-column></sqm-referral-table-status-column>\n <sqm-referral-table-date-column\n column-title=\"Referred\"\n date-shown=\"dateReferralStarted\"\n ></sqm-referral-table-date-column> </sqm-referral-table\n></sqm-portal-container>\n";
|
|
10141
10323
|
|
|
@@ -10161,17 +10343,17 @@ const LoginReadme = "# sqm-portal-login\n\n\n\n<!-- Auto Generated Below -->\n\n
|
|
|
10161
10343
|
|
|
10162
10344
|
const ReferralIframeReadme = "# sqm-referral-iframe\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------- | --------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------- |\n| `demoData` | -- | | `{ states?: { content: { iframeSrc: string; iframeHeight: string; iframeWidth: string; }; }; data?: { shareCode: string; }; }` | `undefined` |\n| `iframeHeight` | `iframe-height` | Define the height of the iframe with any valid CSS height value. Example: 100px, 5rem, or auto. | `string` | `\"100%\"` |\n| `iframeSrc` | `iframe-src` | URL of iframe to display | `string` | `undefined` |\n| `iframeWidth` | `iframe-width` | Define the width of the iframe with any valid CSS width value. Example: 100px, 5rem, or auto. | `string` | `\"100%\"` |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-stencilbook --> sqm-referral-iframe\n style sqm-referral-iframe fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10163
10345
|
|
|
10164
|
-
const ForgotPasswordReadme = "# sqm-portal-forgot-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
10346
|
+
const ForgotPasswordReadme = "# sqm-portal-forgot-password\n\n\n\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; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }` | `undefined` |\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\n| `headerText` | `header-text` | | `string` | `\"Enter your email below to receive a password reset link.\"` |\n| `loginPath` | `login-path` | | `string` | `\"/login\"` |\n| `loginText` | `login-text` | | `string` | `\"Sign In\"` |\n| `networkErrorMessage` | `network-error-message` | Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page. | `string` | `\"An error occurred while loading this page. Please refresh the page.\"` |\n| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string` | `\"/resetPassword\"` |\n| `submitLabel` | `submit-label` | | `string` | `\"Request Password Reset\"` |\n| `successAlertText` | `success-alert-text` | | `string` | `\"If an account with that email exists, a password reset email will be sent.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-forgot-password --> sqm-form-message\n style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10165
10347
|
|
|
10166
10348
|
const RegisterReadme = "# sqm-portal-register\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\n| `confirmPasswordLabel` | `confirm-password-label` | | `string` | `\"Confirm Password\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }` | `undefined` |\n| `disablePasswordValidation` | `disable-password-validation` | | `boolean` | `false` |\n| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `\"Password must meet the following requirements:\"` |\n| `emailLabel` | `email-label` | | `string` | `\"Email\"` |\n| `hasErrorText` | `has-error-text` | | `string` | `\"contain at least 1 number or symbol\"` |\n| `hideInputs` | `hide-inputs` | Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes \"email\" and \"password\" for this form to succeed. | `boolean` | `false` |\n| `invalidEmailErrorMessage` | `invalid-email-error-message` | The message to be displayed when the email used is invalid or blocked. | `string` | `\"Must be a valid email address\"` |\n| `loginLabel` | `login-label` | | `string` | `\"Sign in\"` |\n| `loginPath` | `login-path` | Redirect participants to this page after clicking the login button. | `string` | `\"/login\"` |\n| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `\"contain at least 1 lowercase character\"` |\n| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `\"Password has met all requirements\"` |\n| `minErrorText` | `min-error-text` | | `string` | `\"be a minimum of 8 characters\"` |\n| `networkErrorMessage` | `network-error-message` | The message to be displayed when a the form submission fails unexpectedly. | `string` | `\"Network request failed.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page from their verification email | `string` | `\"/\"` |\n| `pageLabel` | `page-label` | | `string` | `\"Register\"` |\n| `passwordLabel` | `password-label` | | `string` | `\"Password\"` |\n| `passwordMismatchErrorMessage` | `password-mismatch-error-message` | The message to be displayed when password inputs do not match. | `string` | `\"Passwords do not match.\"` |\n| `redirectPath` | `redirect-path` | The page that participants are redirected to from the verification email. | `string` | `\"/verifyEmail\"` |\n| `requiredFieldErrorMessage` | `required-field-error-message` | The message to be displayed when a required field is not filled. | `string` | `\"Cannot be empty\"` |\n| `submitLabel` | `submit-label` | | `string` | `\"Register\"` |\n| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `\"contain at least 1 uppercase character\"` |\n\n\n## Dependencies\n\n### Used by\n\n - [sqm-stencilbook](../sqm-stencilbook)\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-register --> sqm-form-message\n sqm-portal-register --> sqm-password-field\n sqm-stencilbook --> sqm-portal-register\n style sqm-portal-register fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10167
10349
|
|
|
10168
10350
|
const EditProfileReadme = "# sqm-portal-profile\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ------------------------ | --------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |\n| `countrytext` | `countrytext` | | `string` | `\"Country\"` |\n| `demoData` | -- | | `{ states?: { success: boolean; loading: boolean; submitDisabled: boolean; showCountry: boolean; formState: { country: string; firstName: string; lastName: string; errors: any; error: string; }; user: { id: string; accountId: string; firstName: string; lastName: string; email: string; countryCode: string; }; text: { firstnametext: string; lastnametext: string; emailtext: string; countrytext: string; editProfileHeader: string; editProfileSubHeader: string; submitChangeButtonText: string; submissionSuccessText?: string; fieldEmptyText?: string; }; }; }` | `undefined` |\n| `editProfileHeader` | `edit-profile-header` | | `string` | `\"Edit your profile\"` |\n| `editProfileSubHeader` | `edit-profile-sub-header` | | `string` | `\"Personal Information\"` |\n| `emailtext` | `emailtext` | | `string` | `\"Email\"` |\n| `fieldEmptyText` | `field-empty-text` | | `string` | `\"Field is required\"` |\n| `firstnametext` | `firstnametext` | | `string` | `\"First Name\"` |\n| `formErrorText` | `form-error-text` | | `string` | `\"Please correct the errors below to update your profile.\"` |\n| `hideCountry` | `hide-country` | | `boolean` | `false` |\n| `lastnametext` | `lastnametext` | | `string` | `\"Last Name\"` |\n| `networkRequestMessage` | `network-request-message` | | `string` | `\"An error occurred while loading this page. Please refresh the page.\"` |\n| `submissionSuccessText` | `submission-success-text` | | `string` | `\"Your profile has been successfully updated.\"` |\n| `submitChangeButtonText` | `submit-change-button-text` | | `string` | `\"Submit Changes\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-profile --> sqm-form-message\n style sqm-portal-profile fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10169
10351
|
|
|
10170
|
-
const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------------- | --------------------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `codeInvalidText` | `code-invalid-text` | | `string` | `\"The password reset code is invalid or has expired, please try again.\"` |\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `\"Confirm Password\"` |\n| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `\"Continue\"` |\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; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; resetSuccessText?: string; passwordMismatchText?: string; codeInvalidText?: string; }; }; }` | `undefined` |\n| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `\"Password must meet the following requirements:\"` |\n| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `\"/\"` |\n| `hasErrorText` | `has-error-text` | | `string` | `\"contain at least 1 number or symbol\"` |\n| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `\"contain at least 1 lowercase character\"` |\n| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `\"Password has met all requirements\"` |\n| `minErrorText` | `min-error-text` | | `string` | `\"be a minimum of 8 characters\"` |\n| `networkErrorMessage` | `network-error-message` | | `string` | `\"An error occurred while resetting your password. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `\"/\"` |\n| `passwordFieldLabel` | `password-field-label` | | `string` | `\"New Password\"` |\n| `passwordMismatchText` | `password-mismatch-text` | | `string` | `\"Passwords do not match.\"` |\n| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `\"Password reset\"` |\n| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `\"Reset Password\"` |\n| `resetPasswordHeader` | `reset-password-header` | | `string` | `\"Reset your password\"` |\n| `resetSuccessText` | `reset-success-text` | | `string` | `\"Your password has been reset and you are being redirected. If you are not redirected, please click Continue.\"` |\n| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `\"contain at least 1 uppercase character\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-reset-password --> sqm-form-message\n sqm-portal-reset-password --> sqm-password-field\n style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10352
|
+
const ResetPasswordReadme = "# sqm-portal-reset-password\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `codeInvalidText` | `code-invalid-text` | | `string` | `\"The password reset code is invalid or has expired, please try again.\"` |\n| `confirmPassword` | `confirm-password` | | `boolean` | `false` |\n| `confirmPasswordFieldLabel` | `confirm-password-field-label` | | `string` | `\"Confirm Password\"` |\n| `continueButtonText` | `continue-button-text` | Button text displayed after a successful password reset. | `string` | `\"Continue\"` |\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; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; resetSuccessText?: string; passwordMismatchText?: string; codeInvalidText?: string; }; }; }` | `undefined` |\n| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `\"Password must meet the following requirements:\"` |\n| `failedPage` | `failed-page` | Redirect participants to this page if password reset fails due to an outdated reset attempt. | `string` | `\"/\"` |\n| `hasErrorText` | `has-error-text` | | `string` | `\"contain at least 1 number or symbol\"` |\n| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `\"contain at least 1 lowercase character\"` |\n| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `\"Password has met all requirements\"` |\n| `minErrorText` | `min-error-text` | | `string` | `\"be a minimum of 8 characters\"` |\n| `networkErrorMessage` | `network-error-message` | Displayed when the password reset fails due to a network error. The participant can try refreshing the page. | `string` | `\"An error occurred while resetting your password. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully reset their password. | `string` | `\"/\"` |\n| `passwordFieldLabel` | `password-field-label` | | `string` | `\"New Password\"` |\n| `passwordMismatchText` | `password-mismatch-text` | | `string` | `\"Passwords do not match.\"` |\n| `passwordResetHeader` | `password-reset-header` | Displayed after a successful password reset. | `string` | `\"Password reset\"` |\n| `resetPasswordButtonText` | `reset-password-button-text` | | `string` | `\"Reset Password\"` |\n| `resetPasswordHeader` | `reset-password-header` | | `string` | `\"Reset your password\"` |\n| `resetSuccessText` | `reset-success-text` | | `string` | `\"Your password has been reset and you are being redirected. If you are not redirected, please click Continue.\"` |\n| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `\"contain at least 1 uppercase character\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n- [sqm-password-field](../sqm-password-field)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-reset-password --> sqm-form-message\n sqm-portal-reset-password --> sqm-password-field\n style sqm-portal-reset-password fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10171
10353
|
|
|
10172
|
-
const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
10354
|
+
const EmailVerificationReadme = "# sqm-portal-email-verification\n\n\n\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; verificationResentMessage?: string; }; }` | `undefined` |\n| `emailVerificationHeader` | `email-verification-header` | | `string` | `\"Verify your email\"` |\n| `networkErrorMessage` | `network-error-message` | Displayed when your verification email fails to send due to a network error. The participant can try refreshing the page. | `string` | `\"An error occurred while verifying your password. Please refresh the page.\"` |\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` | `\"Checking verification status\"` |\n| `verificationResentMessage` | `verification-resent-message` | | `string` | `\"Your verification email has been resent successfully\"` |\n| `verificationStatusMessage` | `verification-status-message` | | `string` | `\"Checking verification status in {countdown}\"` |\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.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-email-verification --> sqm-form-message\n style sqm-portal-email-verification fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10173
10355
|
|
|
10174
|
-
const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description
|
|
10356
|
+
const EmailVerifiedReadme = "# sqm-portal-verify-email\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| `continueText` | `continue-text` | | `string` | `\"Continue\"` |\n| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; }; data?: { oobCode: string; }; content?: { verifySuccessText?: string; verifyEmailText?: string; verifyInvalidText?: string; continueText?: string; }; }` | `undefined` |\n| `failedPage` | `failed-page` | Redirect participants to this page if verification fails due to an outdated verification attempt. | `string` | `\"/\"` |\n| `networkErrorMessage` | `network-error-message` | Displayed when the email verification fails due to a network error. The participant can try refreshing the page. | `string` | `\"An error occurred while verifying your email. Please refresh the page and try again.\"` |\n| `nextPage` | `next-page` | Redirect participants to this page when they successfully verify their email. | `string` | `\"/\"` |\n| `verifyEmailText` | `verify-email-text` | | `string` | `\"Verify your email\"` |\n| `verifyInvalidText` | `verify-invalid-text` | | `string` | `\"The email verification code is invalid or has expired, please try again.\"` |\n| `verifySuccessText` | `verify-success-text` | | `string` | `\"Your email has been verified and you are being redirected. If you are not redirected, please click Continue.\"` |\n\n\n## Dependencies\n\n### Depends on\n\n- [sqm-form-message](../sqm-form-message)\n\n### Graph\n```mermaid\ngraph TD;\n sqm-portal-verify-email --> sqm-form-message\n style sqm-portal-verify-email fill:#f9f,stroke:#333,stroke-width:4px\n```\n\n----------------------------------------------\n\n*Built with [StencilJS](https://stenciljs.com/)*\n";
|
|
10175
10357
|
|
|
10176
10358
|
const PortalTemplates_stories = {
|
|
10177
10359
|
title: "Templates / Microsite",
|
|
@@ -10332,7 +10514,7 @@ const ProgramMenu = /*#__PURE__*/Object.freeze({
|
|
|
10332
10514
|
const PoweredByImg_stories = {
|
|
10333
10515
|
title: "Powered By",
|
|
10334
10516
|
};
|
|
10335
|
-
const Default$
|
|
10517
|
+
const Default$d = () => {
|
|
10336
10518
|
return index.h(ShadowViewAddon.PoweredByImg, null);
|
|
10337
10519
|
};
|
|
10338
10520
|
const CustomColor = () => {
|
|
@@ -10345,7 +10527,7 @@ const CustomWidthAndHeight = () => {
|
|
|
10345
10527
|
const PoweredByImg = /*#__PURE__*/Object.freeze({
|
|
10346
10528
|
__proto__: null,
|
|
10347
10529
|
'default': PoweredByImg_stories,
|
|
10348
|
-
Default: Default$
|
|
10530
|
+
Default: Default$d,
|
|
10349
10531
|
CustomColor: CustomColor,
|
|
10350
10532
|
CustomWidthAndHeight: CustomWidthAndHeight
|
|
10351
10533
|
});
|
|
@@ -10358,7 +10540,7 @@ const PortalFooter_stories = {
|
|
|
10358
10540
|
scenario: scenario$f,
|
|
10359
10541
|
},
|
|
10360
10542
|
};
|
|
10361
|
-
const defaultProps$
|
|
10543
|
+
const defaultProps$b = {
|
|
10362
10544
|
supportEmail: "support@example.com",
|
|
10363
10545
|
supportText: "For program support, contact {email}",
|
|
10364
10546
|
hidePoweredBy: false,
|
|
@@ -10368,12 +10550,12 @@ const defaultProps$9 = {
|
|
|
10368
10550
|
paddingBottom: "large",
|
|
10369
10551
|
paddingLeft: "large",
|
|
10370
10552
|
};
|
|
10371
|
-
const DefaultFooter = () => index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$
|
|
10372
|
-
const FooterWithTerms = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$
|
|
10373
|
-
const FooterWithFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$
|
|
10374
|
-
const FooterWithTermsAndFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$
|
|
10375
|
-
const FooterNoPoweredBy = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$
|
|
10376
|
-
const FooterNoSupportText = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$
|
|
10553
|
+
const DefaultFooter = () => index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b));
|
|
10554
|
+
const FooterWithTerms = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
|
|
10555
|
+
const FooterWithFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { faqLink: "https://example.com", faqText: "FAQ" })));
|
|
10556
|
+
const FooterWithTermsAndFAQ = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
|
|
10557
|
+
const FooterNoPoweredBy = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hidePoweredBy: true })));
|
|
10558
|
+
const FooterNoSupportText = () => (index.h(ShadowViewAddon.PortalFooterView, Object.assign({}, defaultProps$b, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", hideSupportText: true })));
|
|
10377
10559
|
|
|
10378
10560
|
const PortalFooter = /*#__PURE__*/Object.freeze({
|
|
10379
10561
|
__proto__: null,
|
|
@@ -10655,7 +10837,7 @@ const props$1 = {
|
|
|
10655
10837
|
},
|
|
10656
10838
|
},
|
|
10657
10839
|
};
|
|
10658
|
-
const errorProps$
|
|
10840
|
+
const errorProps$9 = {
|
|
10659
10841
|
states: {
|
|
10660
10842
|
registrationFormState: {
|
|
10661
10843
|
validationErrors: {
|
|
@@ -10673,7 +10855,7 @@ const NameFields = () => {
|
|
|
10673
10855
|
return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, props$1));
|
|
10674
10856
|
};
|
|
10675
10857
|
const NameFieldsWithErrors = () => {
|
|
10676
|
-
return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, errorProps$
|
|
10858
|
+
return index.h(ShadowViewAddon.NameFieldsView, Object.assign({}, errorProps$9));
|
|
10677
10859
|
};
|
|
10678
10860
|
|
|
10679
10861
|
const NameFields$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -10691,7 +10873,7 @@ const CheckboxField_stories = {
|
|
|
10691
10873
|
scenario: scenario$j,
|
|
10692
10874
|
},
|
|
10693
10875
|
};
|
|
10694
|
-
const defaultProps$
|
|
10876
|
+
const defaultProps$c = {
|
|
10695
10877
|
states: {
|
|
10696
10878
|
registrationFormState: {
|
|
10697
10879
|
validationErrors: {},
|
|
@@ -10699,7 +10881,7 @@ const defaultProps$a = {
|
|
|
10699
10881
|
checked: false,
|
|
10700
10882
|
},
|
|
10701
10883
|
content: {
|
|
10702
|
-
checkboxName: "
|
|
10884
|
+
checkboxName: "terms",
|
|
10703
10885
|
checkboxLabel: "By signing up you agree to the {labelLink}",
|
|
10704
10886
|
checkboxLabelLink: "https://example.com",
|
|
10705
10887
|
checkboxLabelLinkText: "Terms and Conditions",
|
|
@@ -10732,35 +10914,35 @@ const defaultRegisterProps = {
|
|
|
10732
10914
|
invalidEmailErrorMessage: "Must be a valid email address",
|
|
10733
10915
|
},
|
|
10734
10916
|
};
|
|
10735
|
-
const Default$
|
|
10736
|
-
const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$
|
|
10737
|
-
...defaultProps$
|
|
10917
|
+
const Default$e = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c))));
|
|
10918
|
+
const DefaultChecked = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
|
|
10919
|
+
...defaultProps$c.states,
|
|
10738
10920
|
checked: true,
|
|
10739
10921
|
} }))));
|
|
10740
|
-
const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$
|
|
10741
|
-
...defaultProps$
|
|
10922
|
+
const CustomLabel = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { content: {
|
|
10923
|
+
...defaultProps$c.content,
|
|
10742
10924
|
checkboxLabel: "I Agree",
|
|
10743
10925
|
} }))));
|
|
10744
|
-
const Error$
|
|
10745
|
-
...defaultProps$
|
|
10926
|
+
const Error$5 = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
|
|
10927
|
+
...defaultProps$c.states,
|
|
10746
10928
|
registrationFormState: {
|
|
10747
10929
|
validationErrors: {
|
|
10748
10930
|
agree: "Must be checked",
|
|
10749
10931
|
},
|
|
10750
10932
|
},
|
|
10751
10933
|
} }))));
|
|
10752
|
-
const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$
|
|
10753
|
-
...defaultProps$
|
|
10934
|
+
const CustomError = createHookStory(() => (index.h(ShadowViewAddon.CheckboxFieldView, Object.assign({}, defaultProps$c, { states: {
|
|
10935
|
+
...defaultProps$c.states,
|
|
10754
10936
|
registrationFormState: {
|
|
10755
10937
|
validationErrors: {
|
|
10756
10938
|
agree: "Must be checked",
|
|
10757
10939
|
},
|
|
10758
10940
|
},
|
|
10759
10941
|
}, content: {
|
|
10760
|
-
...defaultProps$
|
|
10942
|
+
...defaultProps$c.content,
|
|
10761
10943
|
errorMessage: "This checkbox must be checked to continue",
|
|
10762
10944
|
} }))));
|
|
10763
|
-
const TermsAndConditions$
|
|
10945
|
+
const TermsAndConditions$2 = createHookStory(() => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps, {
|
|
10764
10946
|
//@ts-ignore
|
|
10765
10947
|
content: {
|
|
10766
10948
|
...defaultRegisterProps.content,
|
|
@@ -10787,16 +10969,34 @@ const TermsAndConditionsLongCustomLabel = createHookStory(() => (index.h(ShadowV
|
|
|
10787
10969
|
const CheckboxField = /*#__PURE__*/Object.freeze({
|
|
10788
10970
|
__proto__: null,
|
|
10789
10971
|
'default': CheckboxField_stories,
|
|
10790
|
-
Default: Default$
|
|
10972
|
+
Default: Default$e,
|
|
10791
10973
|
DefaultChecked: DefaultChecked,
|
|
10792
10974
|
CustomLabel: CustomLabel,
|
|
10793
|
-
Error: Error$
|
|
10975
|
+
Error: Error$5,
|
|
10794
10976
|
CustomError: CustomError,
|
|
10795
|
-
TermsAndConditions: TermsAndConditions$
|
|
10977
|
+
TermsAndConditions: TermsAndConditions$2,
|
|
10796
10978
|
TermsAndConditionsCustomLabel: TermsAndConditionsCustomLabel,
|
|
10797
10979
|
TermsAndConditionsLongCustomLabel: TermsAndConditionsLongCustomLabel
|
|
10798
10980
|
});
|
|
10799
10981
|
|
|
10982
|
+
const scenario$k = "@owner:zach\n@author:zach\nFeature: Marketing Emails Checkbox\n\n A checkbox that is used to opt in for marketing emails.\n\n Background: The microsite registration form contains a marketing emails checkbox\n\n Scenario: The registration form can be configured to include a marketing emails checkbox\n Given a user is viewing the \"/register\"\n And \"/register\" contains the registration form\n And they have added a marketing emails checkbox to the form in the content editor\n Then the registration form has the following fields\n | fields |\n | first name |\n | last name |\n | email |\n | password |\n | Marketing Emails Checkbox |\n\n\n Scenario: The user can opt in to marketing emails\n Given the user is filling out the registration form\n And the fields have valid input\n And the marketing emails checkbox is checked\n When they try to register\n Then the form is submitted\n And there are no errors\n And the \"marketingEmailOptIn\" value is set to true\n And the user is opted in to marketing emails\n\n\n @motivating\n Scenario: Checkbox is optional by default\n Given the user is filling out the registration form\n And the name fields have valid input\n And the email field has valid input\n And the password field has valid input\n And the checkbox is not checked\n When they try to register\n Then the form is submitted\n And there is no error for the checkbox\n\n Scenario: The form field name is provided by default\n Given the customer has added a marketing emails checkbox to their registration form\n Then the field name is automatically set to \"marketingEmailOptIn\"\n And the name is not configurable";
|
|
10983
|
+
|
|
10984
|
+
const MarketingEmailsCheckbox_stories = {
|
|
10985
|
+
title: "Components/Marketing Emails Checkbox",
|
|
10986
|
+
parameters: {
|
|
10987
|
+
scenario: scenario$k,
|
|
10988
|
+
},
|
|
10989
|
+
};
|
|
10990
|
+
const Default$f = () => {
|
|
10991
|
+
return index.h("sqm-marketing-emails-checkbox", null);
|
|
10992
|
+
};
|
|
10993
|
+
|
|
10994
|
+
const MarketingEmailsCheckbox = /*#__PURE__*/Object.freeze({
|
|
10995
|
+
__proto__: null,
|
|
10996
|
+
'default': MarketingEmailsCheckbox_stories,
|
|
10997
|
+
Default: Default$f
|
|
10998
|
+
});
|
|
10999
|
+
|
|
10800
11000
|
const UseCheckboxField_stories = {
|
|
10801
11001
|
title: "Hooks / useCheckboxField",
|
|
10802
11002
|
parameters: {
|
|
@@ -10826,7 +11026,7 @@ function setupGraphQL$9() {
|
|
|
10826
11026
|
}, []);
|
|
10827
11027
|
return { id, accountId };
|
|
10828
11028
|
}
|
|
10829
|
-
const TermsAndConditions$
|
|
11029
|
+
const TermsAndConditions$3 = createHookStory(() => {
|
|
10830
11030
|
setupGraphQL$9();
|
|
10831
11031
|
return (index.h("sqm-portal-register", null,
|
|
10832
11032
|
index.h("div", { slot: "terms" },
|
|
@@ -10864,7 +11064,7 @@ const MissingName = createHookStory(() => {
|
|
|
10864
11064
|
const UseCheckboxField = /*#__PURE__*/Object.freeze({
|
|
10865
11065
|
__proto__: null,
|
|
10866
11066
|
'default': UseCheckboxField_stories,
|
|
10867
|
-
TermsAndConditions: TermsAndConditions$
|
|
11067
|
+
TermsAndConditions: TermsAndConditions$3,
|
|
10868
11068
|
TermsAndConditionsWithLabel: TermsAndConditionsWithLabel,
|
|
10869
11069
|
MultipleCheckboxes: MultipleCheckboxes,
|
|
10870
11070
|
OptionalCheckboxes: OptionalCheckboxes,
|
|
@@ -10874,7 +11074,7 @@ const UseCheckboxField = /*#__PURE__*/Object.freeze({
|
|
|
10874
11074
|
const DropdownField_stories = {
|
|
10875
11075
|
title: "Components/Dropdown Field",
|
|
10876
11076
|
};
|
|
10877
|
-
const defaultProps$
|
|
11077
|
+
const defaultProps$d = {
|
|
10878
11078
|
states: {
|
|
10879
11079
|
registrationFormState: {},
|
|
10880
11080
|
},
|
|
@@ -10889,24 +11089,24 @@ const defaultProps$b = {
|
|
|
10889
11089
|
],
|
|
10890
11090
|
},
|
|
10891
11091
|
};
|
|
10892
|
-
const Default$
|
|
10893
|
-
const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$
|
|
10894
|
-
...defaultProps$
|
|
11092
|
+
const Default$g = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d))));
|
|
11093
|
+
const CustomLabel$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
|
|
11094
|
+
...defaultProps$d.content,
|
|
10895
11095
|
dropdownLabel: "Pick your favorite",
|
|
10896
11096
|
} }))));
|
|
10897
|
-
const Error$
|
|
10898
|
-
...defaultProps$
|
|
11097
|
+
const Error$6 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { states: {
|
|
11098
|
+
...defaultProps$d.states,
|
|
10899
11099
|
registrationFormState: {
|
|
10900
11100
|
validationErrors: {
|
|
10901
11101
|
options: "Must select an option",
|
|
10902
11102
|
},
|
|
10903
11103
|
},
|
|
10904
11104
|
} }))));
|
|
10905
|
-
const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$
|
|
10906
|
-
...defaultProps$
|
|
11105
|
+
const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFieldView, Object.assign({}, defaultProps$d, { content: {
|
|
11106
|
+
...defaultProps$d.content,
|
|
10907
11107
|
errorMessage: "An option must be selected to continue",
|
|
10908
11108
|
}, states: {
|
|
10909
|
-
...defaultProps$
|
|
11109
|
+
...defaultProps$d.states,
|
|
10910
11110
|
registrationFormState: {
|
|
10911
11111
|
validationErrors: {
|
|
10912
11112
|
options: "Must select an option",
|
|
@@ -10917,9 +11117,9 @@ const CustomError$1 = createHookStory(() => (index.h(ShadowViewAddon.DropdownFie
|
|
|
10917
11117
|
const DropdownField = /*#__PURE__*/Object.freeze({
|
|
10918
11118
|
__proto__: null,
|
|
10919
11119
|
'default': DropdownField_stories,
|
|
10920
|
-
Default: Default$
|
|
11120
|
+
Default: Default$g,
|
|
10921
11121
|
CustomLabel: CustomLabel$1,
|
|
10922
|
-
Error: Error$
|
|
11122
|
+
Error: Error$6,
|
|
10923
11123
|
CustomError: CustomError$1
|
|
10924
11124
|
});
|
|
10925
11125
|
|
|
@@ -10982,15 +11182,15 @@ const UseDropdownField = /*#__PURE__*/Object.freeze({
|
|
|
10982
11182
|
MissingName: MissingName$1
|
|
10983
11183
|
});
|
|
10984
11184
|
|
|
10985
|
-
const scenario$
|
|
11185
|
+
const scenario$l = "@author:derek\n@owner:derek\nFeature: Form Input Field\n\n This component is used as a custom registration field during registration. The field can be text,\n a date or phone number. A motivating use case is to ask for a users company name, this value would then be mapped\n through the Managed Identity Service and upserted on the user after registration.\n\n Background: A user exists and is viewing the hosted portal registration\n Given a user is viewing \"/register\"\n And \"/register\" contains the registration form\n And the registration form has a custom input field\n\n @motivating\n Scenario Outline: Input fields are required by default but can be optional\n Given the input has prop \"field-optional\" with <value>\n And the input is empty\n When the user tries to register\n Then the input <mayBe> highlighted in red\n And an error message <mayAppear> in red below\n And form submission <mayBe> blocked\n Examples:\n | value | mayBe | mayAppear |\n | false | is | appears |\n | | is | appears |\n | true | isn't | doesn't appear |\n\n @motivating\n Scenario: Input field labels are configurable\n Given the input has prop \"field-label\" with value \"My Custom Input\"\n When the user views the registration form\n Then they see the input field\n And it has label \"My Custom Input\" above the input\n\n @minutia\n Scenario Outline: The validation error message is configurable\n The error message string is evaluated as an ICU string, but currently is provided no context\n Given the input is required\n And it has prop \"error-message\" with <value>\n When the user tries to register\n But they haven't filled in the input\n Then they see <errorMessage> below\n Examples:\n | value | errorMessage |\n | | Cannot be empty |\n | My Custom Message | My Custom Message |\n\n @motivating\n Scenario: Form data attribute name is configurable\n Given the input has prop \"field-name\" with value \"myCustomField\"\n When the user types \"testing testing\" into the input\n And they register\n Then \"testing testing\" is submitted under \"myCustomField\" in the form data\n\n @motivating\n Scenario Outline: The input field is a text input by default\n Given the input <mayHave> prop \"field-type\" with <value>\n When the user views the input field\n Then it is a text input\n Examples:\n | mayHave | value |\n | has | text |\n | doesn't have | |\n\n @motivating\n Scenario: Date type inputs are supported\n Given the input has prop \"field-type\" \"date\"\n When the user views the input field\n Then they see \"mm/dd/yyyy\" as a placeholder\n And they see a calendar icon on the right\n When they start typing a date\n Then it maintains the \"mm/dd/yyyy\" format\n When they click the calendar icon\n Then a dropdown appears\n And they see a calendar\n When they select a date\n Then it is applied to the input\n\n @landmine\n Scenario: The clear text button in the date picker does not clear the date\n Due to an incompatibility between our shoelace version and the browser, the clear funtionality is not supported currently\n Given the input has prop \"field-type\" \"date\"\n And the user has entered a date\n When they click the calendar icon\n And click the 'clear' text button\n Then their selected date is not cleared\n\n @motivating\n Scenario: Phone number type inputs are supported\n Given the input has prop \"field-type\" with value \"tel\"\n When the user starts typing a phone number in the input\n Then it is formatted into the following form \"(XXX) XXX-XXXX\"\n When they pre-fix their phone number with a \"1\"\n Then it is formatted into the following form \"1 (XXX) XXX-XXXX\"\n\n @landmine\n Scenario: Telephone formatting is removed after 10 numbers\n Given a user using a phone number input field\n And they entered their 10 character phone number\n And it was not prefixed with a 1\n When they add another character\n Then the formatting is removed\n\n @landmine\n Scenario Outline: Input values are always recorded as strings in the form data\n Given the input has prop \"field-type\" with <value>\n And it has a \"field-name\"\n When the user inputs <formInput>\n And they register\n Then <formData> is recorded in the form data as a string\n Examples:\n | value | formInput | formData |\n | text | Hello there | Hello there |\n | date | 05/07/2021 | 2021-05-07 |\n | tel | (250) 234-9877 | (250) 234-9877 |\n\n @minutia\n Scenario Outline: The input field component fails fast if a field name isn't provided\n Given the input <mayHave> prop \"field-name\"\n And it <mayHavePropValue>\n When a user views the input\n Then an alert with an error message is displayed in place of the input\n And it has a details section\n When \"More details\" is clicked\n Then the following information is displayed\n | information |\n | component being used |\n | missing attribute(s) |\n Examples:\n | mayBeAnAttribute | mayHavePropValue |\n | doesn't have | N/A |\n | has | \"\" |\n | has | |";
|
|
10986
11186
|
|
|
10987
11187
|
const InputField_stories = {
|
|
10988
11188
|
title: "Components/Input Field",
|
|
10989
11189
|
parameters: {
|
|
10990
|
-
scenario: scenario$
|
|
11190
|
+
scenario: scenario$l,
|
|
10991
11191
|
},
|
|
10992
11192
|
};
|
|
10993
|
-
const defaultProps$
|
|
11193
|
+
const defaultProps$e = {
|
|
10994
11194
|
states: {
|
|
10995
11195
|
registrationFormState: {
|
|
10996
11196
|
validationErrors: {},
|
|
@@ -11027,21 +11227,21 @@ const defaultRegisterProps$1 = {
|
|
|
11027
11227
|
invalidEmailErrorMessage: "Must be a valid email address",
|
|
11028
11228
|
},
|
|
11029
11229
|
};
|
|
11030
|
-
const Default$
|
|
11031
|
-
const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$
|
|
11032
|
-
const Error$
|
|
11033
|
-
...defaultProps$
|
|
11230
|
+
const Default$h = () => index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e));
|
|
11231
|
+
const CustomLabel$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: { ...defaultProps$e.content, fieldLabel: "My Label" } })));
|
|
11232
|
+
const Error$7 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { states: {
|
|
11233
|
+
...defaultProps$e.states,
|
|
11034
11234
|
registrationFormState: {
|
|
11035
11235
|
validationErrors: {
|
|
11036
11236
|
field: "Cannot be empty",
|
|
11037
11237
|
},
|
|
11038
11238
|
},
|
|
11039
11239
|
} })));
|
|
11040
|
-
const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$
|
|
11041
|
-
...defaultProps$
|
|
11240
|
+
const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
|
|
11241
|
+
...defaultProps$e.content,
|
|
11042
11242
|
errorMessage: "A value must be entered to continue",
|
|
11043
11243
|
}, states: {
|
|
11044
|
-
...defaultProps$
|
|
11244
|
+
...defaultProps$e.states,
|
|
11045
11245
|
registrationFormState: {
|
|
11046
11246
|
validationErrors: {
|
|
11047
11247
|
field: "Cannot be empty",
|
|
@@ -11049,27 +11249,27 @@ const CustomError$2 = () => (index.h(ShadowViewAddon.InputFieldView, Object.assi
|
|
|
11049
11249
|
},
|
|
11050
11250
|
} })));
|
|
11051
11251
|
const DateType = () => {
|
|
11052
|
-
return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$
|
|
11053
|
-
...defaultProps$
|
|
11252
|
+
return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
|
|
11253
|
+
...defaultProps$e.content,
|
|
11054
11254
|
fieldLabel: "Date",
|
|
11055
11255
|
fieldType: "date",
|
|
11056
11256
|
} })));
|
|
11057
11257
|
};
|
|
11058
11258
|
const TelType = () => {
|
|
11059
|
-
return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$
|
|
11060
|
-
...defaultProps$
|
|
11259
|
+
return (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
|
|
11260
|
+
...defaultProps$e.content,
|
|
11061
11261
|
fieldLabel: "Phone Number",
|
|
11062
11262
|
fieldType: "tel",
|
|
11063
11263
|
} })));
|
|
11064
11264
|
};
|
|
11065
11265
|
const RegistrationField = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
|
|
11066
11266
|
...defaultRegisterProps$1.content,
|
|
11067
|
-
formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$
|
|
11267
|
+
formData: index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e)),
|
|
11068
11268
|
} })));
|
|
11069
11269
|
const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegisterView, Object.assign({}, defaultRegisterProps$1, { content: {
|
|
11070
11270
|
...defaultRegisterProps$1.content,
|
|
11071
|
-
formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$
|
|
11072
|
-
...defaultProps$
|
|
11271
|
+
formData: (index.h(ShadowViewAddon.InputFieldView, Object.assign({}, defaultProps$e, { content: {
|
|
11272
|
+
...defaultProps$e.content,
|
|
11073
11273
|
fieldLabel: "Data",
|
|
11074
11274
|
} }))),
|
|
11075
11275
|
} })));
|
|
@@ -11077,9 +11277,9 @@ const RegistrationFieldCustomLabel = () => (index.h(ShadowViewAddon.PortalRegist
|
|
|
11077
11277
|
const InputField = /*#__PURE__*/Object.freeze({
|
|
11078
11278
|
__proto__: null,
|
|
11079
11279
|
'default': InputField_stories,
|
|
11080
|
-
Default: Default$
|
|
11280
|
+
Default: Default$h,
|
|
11081
11281
|
CustomLabel: CustomLabel$2,
|
|
11082
|
-
Error: Error$
|
|
11282
|
+
Error: Error$7,
|
|
11083
11283
|
CustomError: CustomError$2,
|
|
11084
11284
|
DateType: DateType,
|
|
11085
11285
|
TelType: TelType,
|
|
@@ -11090,7 +11290,7 @@ const InputField = /*#__PURE__*/Object.freeze({
|
|
|
11090
11290
|
const UseInputField_stories = {
|
|
11091
11291
|
title: "Hooks / useInputField",
|
|
11092
11292
|
parameters: {
|
|
11093
|
-
scenario: scenario$
|
|
11293
|
+
scenario: scenario$l,
|
|
11094
11294
|
},
|
|
11095
11295
|
};
|
|
11096
11296
|
function setupGraphQL$b() {
|
|
@@ -11172,12 +11372,12 @@ const UseInputField = /*#__PURE__*/Object.freeze({
|
|
|
11172
11372
|
MissingName: MissingName$2
|
|
11173
11373
|
});
|
|
11174
11374
|
|
|
11175
|
-
const scenario$l = "@author:derek\n@owner:derek\nFeature: Reward Exchange List\n\n The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\n It populates a list from the reward exchange rules set up on a given tenant.\n\n Background:\n Given a tenant with reward exchange rules\n\n @motivating\n @ui\n Scenario: The empty state is shown if there are no visible exchanges\n Given a user with no visible exchanges\n When they view the reward exchange\n Then no exchange options are displayed\n And they see an image of a present\n And \"Redeem Rewards\" in bold\n And \"Use your points to redeem rewards once they become available\" below the bolded text\n And the pagination buttons are disabled\n\n @minutia\n @ui\n Scenario: A custom empty state can be provided\n Given a user with no visible exchanges\n And a custom empty state has been supplied in the \"empty\" slot\n When they view the reward exchange\n Then they see the custom empty state\n\n @motivating\n @ui\n Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\n Given a user\n When they load the reward exchange list\n Then they see a loading Skeleton\n And it has 8 skeleton cards\n When the reward exchange rules have loaded\n Then the skeleton is replaced with reward exchange options\n\n @motivating\n Scenario: An error banner appears when the reward exchange list fails to load\n Given a user trying to view the reward exchange list\n But it fails to load\n Then an error banner is displayed\n And it displays \"Unable to load reward exchange list. Please try again\"\n\n @motivating\n @ui\n Scenario: The exchange progress bar progresses through the exchange process\n Given a user who is eligible for the tenants reward exchange rules\n When they view the reward exchange list\n Then the process bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with green outline, white fill and number 1 in green |\n | Step 2 `Select` title in grey |\n | Step 2 circle with grey fill and number 2 in white |\n | Step 3 `Confirm` title in grey |\n | Step 3 circle with grey fill and number 3 in white |\n | lines between all steps are greyed out |\n When they continue to the selection page\n Then the progress bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with white checkmark and green fill |\n | Step 2 `Select` title in black |\n | Step 2 circle with green outline, white fill and number 2 in green |\n | Step 3 `Confirm` title in grey |\n | Step 3 circle with grey fill and number 3 in white |\n | Green line between step 1 and 2 |\n | Grey line between step 2 and 3 |\n When they continue to the confirmation page\n Then the progress bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with white checkmark and green fill |\n | Step 2 `Select` title in black |\n | Step 2 circle with white checkmark and green fill |\n | Step 3 `Confirm` title in black |\n | Step 3 circle with green outline, white fill and number 3 in green |\n | Green line between all steps |\n When they continue to the redemption page\n Then the progress bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with white checkmark and green fill |\n | Step 2 `Select` title in black |\n | Step 2 circle with white checkmark and green fill |\n | Step 3 `Confirm` title in black |\n | Step 3 circle with white checkmark and green fill |\n | Green line between all steps |\n\n @motivating\n Scenario: Users must choose a reward exchange option to continue to the selection page\n Given a user who is eligible for the tenants reward exchange rules\n When they view the reward exchange list\n Then the 'Continue' button is disabled\n When they select a reward exchange card\n Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\n And the continue button is no longer disabled\n When they click \"Continue\"\n Then they are brought to the selection page\n\n @motivating\n @ui\n Scenario: Reward exchange rule names and images are used in the reward exchange cards\n Given a tenant reward exchange rule\n And it has name \"My Visa Exchange Rule\"\n And it has an image\n When a user views the reward exchange list\n Then they see a exchange card with title \"My Visa Exchange Rule\"\n And the exchange image on the left hand side of the card\n\n @motivating\n Scenario Outline: Reward exchange source values are displayed on reward exchange cards\n Given a <type> reward exchange rule\n When a user views the reward exchange list\n Then they see <text> under the name on the exchange option cards\n And the pretty values are localized to a user locale\n Examples:\n | type | text |\n | FIXED_GLOBAL_REWARD | the exchange source pretty value |\n | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\n | VARIABLE_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\n | VARIABLE_CREDIT_REWARD | the exchange source min pretty value to the source max pretty value |\n\n @motivating\n Scenario Outline: Reward exchange cards can display customized error messages\n Given a reward exchange rule\n And it has <availabilityPredicate>\n And the reward exchange list has prop \"not-available-error\" with <value>\n When the user views the reward exchange list\n Then the card for the reward exchange rule is disabled\n And <message> is displayed\n Examples:\n | availabilityPredicate | value | message |\n | 'champion' in user.segments ? \"NOT_CHAMPION\" : true | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} } | Sorry must be a champion! |\n | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\n\n @motivating\n Scenario: Exchange options are disabled if they put a user over the W9 limit\n Given a user who is approaching their W9 limit\n And a reward exchange rule\n And its destination reward has a US taxable value that would put the user over their limit\n When they view the reward exchange list\n Then the reward exchange card is disabled\n And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\n And the text is orange\n And the icon is orange\n\n @motivating\n Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\n Given a <type> reward exchange rule\n But the user lacks enough credit to exchange for it\n When they view the reward exchange list\n Then the reward exchange card is disabled\n And a <text> error message is displayed on to the right of a exclamation triangle icon\n And the text is orange\n And the icon is orange\n Examples:\n | type | text |\n | FIXED_GLOBAL_REWARD | {prettySourceValue} required |\n | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\n | VARIABLE_GLOBAL_REWARD | {prettySourceMinValue} required |\n | VARIABLE_CREDIT_REWARD | {prettySourceMinValue} required |\n\n @motivating\n Scenario: Users can go back to the Rewards page from the Select page\n Given a user viewing the Select page\n Then they see a \"Cancel\" text button\n And a \"Continue to confirmation\" brand colour button in the bottom right corner\n When they click \"Cancel\"\n Then they return to the Rewards page\n\n @motivating\n Scenario: Users can go back to the Select Page from the Confirm page\n Given a user viewing the Confirm page\n Then they see a \"Back\" text button\n And a \"Redeem\" brand colour button in the bottom right corner\n When they click \"Back\"\n Then they return to the Select Page\n\n @motivating\n Scenario: Reward rules with visibility predicates that evaluates to false are not shown\n Given a tenant reward exchange rule with visibility predicates that evaluates to false\n When a user views the reward exchange list\n Then they do not see the card for that reward exchange rule\n\n @motivating\n Scenario Outline: Users can choose their reward option for variable rewards on the Select page\n Given a <type> exchange rule\n And it has the following fields\n | fields |\n | name |\n | description |\n | image |\n When a user views the reward exchange list\n And they progress to the Select page for this exchange\n Then they see the exchange rule image on the left hand side\n And on the right hand side they see the following in this order from top to bottom\n | elements |\n | exchange name |\n | exchange description |\n | select list with all exchange options using pretty values, destination reward above source reward |\n Examples:\n | type |\n | STEPPED_FIXED_GLOBAL_REWARD |\n | VARIABLE_GLOBAL_REWARD |\n | VARIABLE_CREDIT_REWARD |\n\n @motivating\n Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\n Given a \"FIXED_GLOBAL_REWARD\" exchange rule\n And it has the following fields\n | fields |\n | name |\n | description |\n | image |\n When a user views the reward exchange list\n And they progress to the Select page for this exchange\n Then they see the exchange rule image on the left hand side\n And on the right hand side they see the following in this order from top to bottom\n | elements |\n | exchange name |\n | exchange source pretty value displayed in brand colour |\n | exchange description |\n\n @motivating\n Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\n Given a <type> exchange rule\n When a user views the reward exchange list\n And they progress to the Select page for this exchange\n Then they see a drop down with all the reward exchange selections\n When they click on the drop down\n But they are not eligible for all of the exchanges options <dueToReason>\n Then the ineligble options are disabled\n And under the source value is <text>\n Examples:\n | type | dueToReason | text |\n | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\n | VARIABLE_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\n | VARIABLE_CREDIT_REWARD | due to insufficent source value | {prettySourceValue} required |\n | STEPPED_FIXED_GLOBAL_REWARD | W9 | US Tax Limit |\n | VARIABLE_GLOBAL_REWARD | W9 | US Tax Limit |\n | VARIABLE_CREDIT_REWARD | W9 | US Tax Limit |\n\n @motivating\n Scenario Outline: The Confirm page allows users to view their exchange before committing\n Given a <type> exchange rule\n When a user views the reward exchange list\n And they select the exchange\n And they progress to Confirm page\n Then they see a row with title \"Reward\"\n And it contains the exchange name\n And it contains the exchange image\n And they <maySee> a row with title \"Reward Amount\"\n And it <mayContain> <amountTitle>\n And they see a row with title \"Cost to Redeem\"\n And it contains the source reward pretty value in bolded text\n Examples:\n | type | maySee | mayContain | amountTitle |\n | FIXED_GLOBAL_REWARD | don't | doesn't contain | N/A |\n | VARIABLE_GLOBAL_REWARD | see | contains | the pretty destination value |\n | STEPPED_FIXED_GLOBAL_REWARD | see | contains | the pretty destination value |\n | VARIABLE_CREDIT_REWARD | see | contains | the pretty destination value |\n\n @motivating\n Scenario: An error banner is displayed if an error occurs during redemeption\n Given a user has selected a reward to exchange\n And is on the confirmation page\n When they click \"Redeem\"\n But an error occurs\n Then an error banner appears\n And it contains details about the error\n And the reward exchange is not completed\n\n @motivating\n Scenario: Confetti is displayed when a reward exchange succeeds\n Given a user has selected a reward to exchange\n And they are on the confirmation page\n When they click \"Redeem\"\n And the exchange is successful\n Then they see confetti centered on the success page\n And they see text describing what they exchanged for their new reward\n And they see a \"Done\" brand colour button\n When they click \"Done\"\n Then they see the Rewards page\n\n @motivating\n Scenario: Fuel tank codes are shown when a reward exchange succeeds\n Given a user has selected to exchange for a fuel tank reward\n When they complete the reward exchange\n And are on the success page\n Then they see a textbox with their fuel tank code\n And a clipboard icon\n When they click the clipboard icon\n Then their fuel tank code is copied to their clipboard\n\n @motivating\n Scenario Outline: Users can exchange for any type of reward\n Given a <type> reward exchange rule for a <reward>\n And a user who has enough source credit to exchange for the reward\n When they go through the exchange flow\n And exchange for their reward\n Then their credit is exchanged for the <reward>\n Examples:\n | type | reward |\n | FIXED_GLOBAL_REWARD | gift card |\n | FIXED_GLOBAL_REWARD | fuel tank code |\n | FIXED_GLOBAL_REWARD | discount |\n | FIXED_GLOBAL_REWARD | credit reward |\n | STEPPED_FIXED_GLOBAL_REWARD | gift card |\n | STEPPED_FIXED_GLOBAL_REWARD | discount |\n | STEPPED_FIXED_GLOBAL_REWARD | credit reward |\n | VARIABLE_GLOBAL_REWARD | gift card |\n | VARIABLE_GLOBAL_REWARD | discount |\n | VARIABLE_GLOBAL_REWARD | credit reward |\n | VARIABLE_CREDIT_REWARD | credit reward |";
|
|
11375
|
+
const scenario$m = "@author:derek\n@owner:derek\nFeature: Reward Exchange List\n\n The Reward Exchange List gives end users the power to exchange their rewards for other rewards.\n It populates a list from the reward exchange rules set up on a given tenant.\n\n Background:\n Given a tenant with reward exchange rules\n\n @motivating\n @ui\n Scenario: The empty state is shown if there are no visible exchanges\n Given a user with no visible exchanges\n When they view the reward exchange\n Then no exchange options are displayed\n And they see an image of a present\n And \"Redeem Rewards\" in bold\n And \"Use your points to redeem rewards once they become available\" below the bolded text\n And the pagination buttons are disabled\n\n @minutia\n @ui\n Scenario: A custom empty state can be provided\n Given a user with no visible exchanges\n And a custom empty state has been supplied in the \"empty\" slot\n When they view the reward exchange\n Then they see the custom empty state\n\n @motivating\n @ui\n Scenario: A Loading Skeleton is displayed when the reward exchange rules are loading\n Given a user\n When they load the reward exchange list\n Then they see a loading Skeleton\n And it has 8 skeleton cards\n When the reward exchange rules have loaded\n Then the skeleton is replaced with reward exchange options\n\n @motivating\n Scenario: An error banner appears when the reward exchange list fails to load\n Given a user trying to view the reward exchange list\n But it fails to load\n Then an error banner is displayed\n And it displays \"Unable to load reward exchange list. Please try again\"\n\n @motivating\n @ui\n Scenario: The exchange progress bar progresses through the exchange process\n Given a user who is eligible for the tenants reward exchange rules\n When they view the reward exchange list\n Then the process bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with green outline, white fill and number 1 in green |\n | Step 2 `Select` title in grey |\n | Step 2 circle with grey fill and number 2 in white |\n | Step 3 `Confirm` title in grey |\n | Step 3 circle with grey fill and number 3 in white |\n | lines between all steps are greyed out |\n When they continue to the selection page\n Then the progress bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with white checkmark and green fill |\n | Step 2 `Select` title in black |\n | Step 2 circle with green outline, white fill and number 2 in green |\n | Step 3 `Confirm` title in grey |\n | Step 3 circle with grey fill and number 3 in white |\n | Green line between step 1 and 2 |\n | Grey line between step 2 and 3 |\n When they continue to the confirmation page\n Then the progress bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with white checkmark and green fill |\n | Step 2 `Select` title in black |\n | Step 2 circle with white checkmark and green fill |\n | Step 3 `Confirm` title in black |\n | Step 3 circle with green outline, white fill and number 3 in green |\n | Green line between all steps |\n When they continue to the redemption page\n Then the progress bar displays the following elements\n | elements |\n | Step 1 `Rewards` title in black |\n | Step 1 circle with white checkmark and green fill |\n | Step 2 `Select` title in black |\n | Step 2 circle with white checkmark and green fill |\n | Step 3 `Confirm` title in black |\n | Step 3 circle with white checkmark and green fill |\n | Green line between all steps |\n\n @motivating\n Scenario: Users must choose a reward exchange option to continue to the selection page\n Given a user who is eligible for the tenants reward exchange rules\n When they view the reward exchange list\n Then the 'Continue' button is disabled\n When they select a reward exchange card\n Then the card is outlined in brand colour with a brand colour cirlcular check box icon in the top right\n And the continue button is no longer disabled\n When they click \"Continue\"\n Then they are brought to the selection page\n\n @motivating\n @ui\n Scenario: Reward exchange rule names and images are used in the reward exchange cards\n Given a tenant reward exchange rule\n And it has name \"My Visa Exchange Rule\"\n And it has an image\n When a user views the reward exchange list\n Then they see a exchange card with title \"My Visa Exchange Rule\"\n And the exchange image on the left hand side of the card\n\n @motivating\n Scenario Outline: Reward exchange source values are displayed on reward exchange cards\n Given a <type> reward exchange rule\n When a user views the reward exchange list\n Then they see <text> under the name on the exchange option cards\n And the pretty values are localized to a user locale\n Examples:\n | type | text |\n | FIXED_GLOBAL_REWARD | the exchange source pretty value |\n | STEPPED_FIXED_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\n | VARIABLE_GLOBAL_REWARD | the exchange source min pretty value to the source max pretty value |\n | VARIABLE_CREDIT_REWARD | the exchange source min pretty value to the source max pretty value |\n\n @motivating\n Scenario Outline: Reward exchange cards can display customized error messages\n Given a reward exchange rule\n And it has <availabilityPredicate>\n And the reward exchange list has prop \"not-available-error\" with <value>\n When the user views the reward exchange list\n Then the card for the reward exchange rule is disabled\n And <message> is displayed\n Examples:\n | availabilityPredicate | value | message |\n | 'champion' in user.segments ? \"NOT_CHAMPION\" : true | {unavailableReasonCode, select, NOT_CHAMPION {Sorry must be a champion!} other {unavailableReasonCode} } | Sorry must be a champion! |\n | user.customFields.purchaseCount < 10 ? \"MORE_PURCHASE\" : true | {unavailableReasonCode, select, MORE_PURCHASE {Complete 10 purchases to unlock} other {unavailableReasonCode} } | Complete 10 purchases to unlock |\n\n @motivating\n Scenario: Exchange options are disabled if they put a user over the W9 limit\n Given a user who is approaching their W9 limit\n And a reward exchange rule\n And its destination reward has a US taxable value that would put the user over their limit\n When they view the reward exchange list\n Then the reward exchange card is disabled\n And a \"US Tax Limit\" error message is displayed on to the right of a exclamation triangle icon\n And the text is orange\n And the icon is orange\n\n @motivating\n Scenario Outline: Exchange options are disabled if a users lacks enough credit to redeem\n Given a <type> reward exchange rule\n But the user lacks enough credit to exchange for it\n When they view the reward exchange list\n Then the reward exchange card is disabled\n And a <text> error message is displayed on to the right of a exclamation triangle icon\n And the text is orange\n And the icon is orange\n Examples:\n | type | text |\n | FIXED_GLOBAL_REWARD | {prettySourceValue} required |\n | STEPPED_FIXED_GLOBAL_REWARD | {prettySourceMinValue} required |\n | VARIABLE_GLOBAL_REWARD | {prettySourceMinValue} required |\n | VARIABLE_CREDIT_REWARD | {prettySourceMinValue} required |\n\n @motivating\n Scenario: Users can go back to the Rewards page from the Select page\n Given a user viewing the Select page\n Then they see a \"Cancel\" text button\n And a \"Continue to confirmation\" brand colour button in the bottom right corner\n When they click \"Cancel\"\n Then they return to the Rewards page\n\n @motivating\n Scenario: Users can go back to the Select Page from the Confirm page\n Given a user viewing the Confirm page\n Then they see a \"Back\" text button\n And a \"Redeem\" brand colour button in the bottom right corner\n When they click \"Back\"\n Then they return to the Select Page\n\n @motivating\n Scenario: Reward rules with visibility predicates that evaluates to false are not shown\n Given a tenant reward exchange rule with visibility predicates that evaluates to false\n When a user views the reward exchange list\n Then they do not see the card for that reward exchange rule\n\n @motivating\n Scenario Outline: Users can choose their reward option for variable rewards on the Select page\n Given a <type> exchange rule\n And it has the following fields\n | fields |\n | name |\n | description |\n | image |\n When a user views the reward exchange list\n And they progress to the Select page for this exchange\n Then they see the exchange rule image on the left hand side\n And on the right hand side they see the following in this order from top to bottom\n | elements |\n | exchange name |\n | exchange description |\n | select list with all exchange options using pretty values, destination reward above source reward |\n Examples:\n | type |\n | STEPPED_FIXED_GLOBAL_REWARD |\n | VARIABLE_GLOBAL_REWARD |\n | VARIABLE_CREDIT_REWARD |\n\n @motivating\n Scenario: Users who selected a fixed exchange rule see exchange information on the Select page\n Given a \"FIXED_GLOBAL_REWARD\" exchange rule\n And it has the following fields\n | fields |\n | name |\n | description |\n | image |\n When a user views the reward exchange list\n And they progress to the Select page for this exchange\n Then they see the exchange rule image on the left hand side\n And on the right hand side they see the following in this order from top to bottom\n | elements |\n | exchange name |\n | exchange source pretty value displayed in brand colour |\n | exchange description |\n\n @motivating\n Scenario Outline: Users selection variable rewards can only select rewards they are eligible to exchange for\n Given a <type> exchange rule\n When a user views the reward exchange list\n And they progress to the Select page for this exchange\n Then they see a drop down with all the reward exchange selections\n When they click on the drop down\n But they are not eligible for all of the exchanges options <dueToReason>\n Then the ineligble options are disabled\n And under the source value is <text>\n Examples:\n | type | dueToReason | text |\n | STEPPED_FIXED_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\n | VARIABLE_GLOBAL_REWARD | due to insufficent source value | {prettySourceValue} required |\n | VARIABLE_CREDIT_REWARD | due to insufficent source value | {prettySourceValue} required |\n | STEPPED_FIXED_GLOBAL_REWARD | W9 | US Tax Limit |\n | VARIABLE_GLOBAL_REWARD | W9 | US Tax Limit |\n | VARIABLE_CREDIT_REWARD | W9 | US Tax Limit |\n\n @motivating\n Scenario Outline: The Confirm page allows users to view their exchange before committing\n Given a <type> exchange rule\n When a user views the reward exchange list\n And they select the exchange\n And they progress to Confirm page\n Then they see a row with title \"Reward\"\n And it contains the exchange name\n And it contains the exchange image\n And they <maySee> a row with title \"Reward Amount\"\n And it <mayContain> <amountTitle>\n And they see a row with title \"Cost to Redeem\"\n And it contains the source reward pretty value in bolded text\n Examples:\n | type | maySee | mayContain | amountTitle |\n | FIXED_GLOBAL_REWARD | don't | doesn't contain | N/A |\n | VARIABLE_GLOBAL_REWARD | see | contains | the pretty destination value |\n | STEPPED_FIXED_GLOBAL_REWARD | see | contains | the pretty destination value |\n | VARIABLE_CREDIT_REWARD | see | contains | the pretty destination value |\n\n @motivating\n Scenario: An error banner is displayed if an error occurs during redemeption\n Given a user has selected a reward to exchange\n And is on the confirmation page\n When they click \"Redeem\"\n But an error occurs\n Then an error banner appears\n And it contains details about the error\n And the reward exchange is not completed\n\n @motivating\n Scenario: Confetti is displayed when a reward exchange succeeds\n Given a user has selected a reward to exchange\n And they are on the confirmation page\n When they click \"Redeem\"\n And the exchange is successful\n Then they see confetti centered on the success page\n And they see text describing what they exchanged for their new reward\n And they see a \"Done\" brand colour button\n When they click \"Done\"\n Then they see the Rewards page\n\n @motivating\n Scenario: Fuel tank codes are shown when a reward exchange succeeds\n Given a user has selected to exchange for a fuel tank reward\n When they complete the reward exchange\n And are on the success page\n Then they see a textbox with their fuel tank code\n And a clipboard icon\n When they click the clipboard icon\n Then their fuel tank code is copied to their clipboard\n\n @motivating\n Scenario Outline: Users can exchange for any type of reward\n Given a <type> reward exchange rule for a <reward>\n And a user who has enough source credit to exchange for the reward\n When they go through the exchange flow\n And exchange for their reward\n Then their credit is exchanged for the <reward>\n Examples:\n | type | reward |\n | FIXED_GLOBAL_REWARD | gift card |\n | FIXED_GLOBAL_REWARD | fuel tank code |\n | FIXED_GLOBAL_REWARD | discount |\n | FIXED_GLOBAL_REWARD | credit reward |\n | STEPPED_FIXED_GLOBAL_REWARD | gift card |\n | STEPPED_FIXED_GLOBAL_REWARD | discount |\n | STEPPED_FIXED_GLOBAL_REWARD | credit reward |\n | VARIABLE_GLOBAL_REWARD | gift card |\n | VARIABLE_GLOBAL_REWARD | discount |\n | VARIABLE_GLOBAL_REWARD | credit reward |\n | VARIABLE_CREDIT_REWARD | credit reward |";
|
|
11176
11376
|
|
|
11177
11377
|
const RewardExchangeList_stories = {
|
|
11178
11378
|
title: "Components/Reward Exchange List",
|
|
11179
11379
|
parameters: {
|
|
11180
|
-
scenario: scenario$
|
|
11380
|
+
scenario: scenario$m,
|
|
11181
11381
|
},
|
|
11182
11382
|
};
|
|
11183
11383
|
const StoryBase = (props) => () => {
|
|
@@ -11199,7 +11399,7 @@ const RedemptionError = StoryBase(ShadowViewAddon.redemptionError);
|
|
|
11199
11399
|
const QueryError = StoryBase(ShadowViewAddon.queryError);
|
|
11200
11400
|
const SuccessPromo = StoryBase(ShadowViewAddon.success);
|
|
11201
11401
|
const SuccessVariableAndStepped = StoryBase(ShadowViewAddon.successVariable);
|
|
11202
|
-
const Loading$
|
|
11402
|
+
const Loading$4 = StoryBase(ShadowViewAddon.loading);
|
|
11203
11403
|
const Empty$2 = StoryBase(ShadowViewAddon.empty);
|
|
11204
11404
|
|
|
11205
11405
|
const RewardExchangeList = /*#__PURE__*/Object.freeze({
|
|
@@ -11221,16 +11421,16 @@ const RewardExchangeList = /*#__PURE__*/Object.freeze({
|
|
|
11221
11421
|
QueryError: QueryError,
|
|
11222
11422
|
SuccessPromo: SuccessPromo,
|
|
11223
11423
|
SuccessVariableAndStepped: SuccessVariableAndStepped,
|
|
11224
|
-
Loading: Loading$
|
|
11424
|
+
Loading: Loading$4,
|
|
11225
11425
|
Empty: Empty$2
|
|
11226
11426
|
});
|
|
11227
11427
|
|
|
11228
|
-
const scenario$
|
|
11428
|
+
const scenario$n = "@author:derek\n@owner:derek\nFeature: Program Explainer\n\n @motivating\n @ui\n Scenario Outline: The program explainer wraps program explainer steps and aligns them\n Given a program explainer component\n And it has <number> program explainer steps as components\n When a user views the program explainer\n Then they see <number> steps aligned horizontally\n And they have equal height/width\n And equal padding in between\n When they are viewed on a screen smaller than 500px\n Then the steps stack vertically with equal padding in between\n And they have equal width\n But height may vary\n Examples:\n | number |\n | 2 |\n | 3 |\n | 4 |\n\n @motivating\n @ui\n Scenario: The program explainer displays a section header\n Given a program explainer step with props\n | prop | value |\n | header | My Header |\n And it has program explainer steps as children\n When a user views the program explainer\n Then they see \"My Header\" centered above the explainer steps\n\n @motivating\n @ui\n Scenario: Colours are customizable\n Given a program explainer with props\n | prop | value |\n | text-color | purple |\n | background-color | grey |\n When a user views the program explainer\n Then the header is purple\n And the background between steos is grey\n";
|
|
11229
11429
|
|
|
11230
11430
|
const ProgramExplainer_stories = {
|
|
11231
11431
|
title: "Components/Program Explainer",
|
|
11232
11432
|
parameters: {
|
|
11233
|
-
scenario: scenario$
|
|
11433
|
+
scenario: scenario$n,
|
|
11234
11434
|
},
|
|
11235
11435
|
};
|
|
11236
11436
|
const OneStep = () => {
|
|
@@ -11286,12 +11486,12 @@ const ProgramExplainer = /*#__PURE__*/Object.freeze({
|
|
|
11286
11486
|
ProgramExplainerGeneric: ProgramExplainerGeneric
|
|
11287
11487
|
});
|
|
11288
11488
|
|
|
11289
|
-
const scenario$
|
|
11489
|
+
const scenario$o = "@author:derek\n@owner:derek\nFeature: Program Explainer Step\n\n @motivating\n @ui\n Scenario: The program explainer step displays a icon, header and description\n Given a program explainer step with props\n | prop | value |\n | header | My Header |\n | description | My program explainer description |\n | icon | person-plus-fill |\n When a user views the explainer step\n Then they see an person icon with a + in the top left hand corner\n And the icon is weight 300 brand colour\n And below they see \"My Header\" in large bold font\n And below they see \"My program explainer description\" in medium font\n And the step background colour is weight 50 brand colour\n\n @motivating\n @ui\n Scenario: The program explainer can display an image in place of an icon\n Given a program explainer\n And it has an \"image-url\" prop with a value of a valid url to an image\n When a user views the explainer step\n Then the image is displayed in place of an incon in the top left hand corner\n\n @motivating\n @ui\n Scenario: Colours are customizable\n Given a program explainer step with props\n | prop | value |\n | text-color | purple |\n | background-color | grey |\n When a user views the explainer step\n Then they see the step background is grey\n And the header text is purple\n And the description text is purple\n";
|
|
11290
11490
|
|
|
11291
11491
|
const ProgramExplainerStep_stories = {
|
|
11292
11492
|
title: "Components/Program Explainer Step",
|
|
11293
11493
|
parameters: {
|
|
11294
|
-
scenario: scenario$
|
|
11494
|
+
scenario: scenario$o,
|
|
11295
11495
|
},
|
|
11296
11496
|
};
|
|
11297
11497
|
const ProgramExplainerStep = () => {
|
|
@@ -11308,12 +11508,12 @@ const ProgramExplainerStep$1 = /*#__PURE__*/Object.freeze({
|
|
|
11308
11508
|
ProgramExplainerStepCustom: ProgramExplainerStepCustom
|
|
11309
11509
|
});
|
|
11310
11510
|
|
|
11311
|
-
const scenario$
|
|
11511
|
+
const scenario$p = "@author:derek\n@owner:logan\nFeature: Brand Configuration\n\n\t@motivating\n\tScenario: The brand components creates a colour pallet from a brand colour and applies it to children\n\t\tGiven a brand component with \"brand-color\" \"#4225c4\"\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the following css variables are set\n\t\t\t| variable | value |\n\t\t\t| --sl-color-primary-50 | hsla(251, 68%, 95%, 1) |\n\t\t\t| --sl-color-primary-100 | hsla(251, 68%, 86%, 1) |\n\t\t\t| --sl-color-primary-200 | hsla(251, 68%, 76%, 1) |\n\t\t\t| --sl-color-primary-300 | hsla(251, 68%, 66%, 1) |\n\t\t\t| --sl-color-primary-400 | hsla(251, 68%, 56%, 1) |\n\t\t\t| --sl-color-primary-500 | hsla(251, 68%, 46%, 1) |\n\t\t\t| --sl-color-primary-600 | hsla(251, 68%, 39%, 1) |\n\t\t\t| --sl-color-primary-700 | hsla(251, 68%, 32%, 1) |\n\t\t\t| --sl-color-primary-800 | hsla(251, 68%, 25%, 1) |\n\t\t\t| --sl-color-primary-900 | hsla(251, 68%, 18%, 1) |\n\t\t\t| --sl-color-primary-950 | hsla(251, 68%, 15%, 1) |\n\t\t\t| --sl-focus-ring-color-primary | var(--sl-color-primary-100) |\n\t\t\t| --sl-input-border-color-focus | var(--sl-color-primary-500) |\n\t\t\t| --sl-color-primary-hue | var(--sl-color-primary-500) |\n\t\tAnd they are applied to the children components\n\t\tBut they are not applied to any components outside of the brand component\n\t\tAnd they are not applied to any vanilla components\n\n\t@minutia\n\tScenario Outline: The brand colour can be hex, HSL or rgb\n\t\tGiven a brand component with \"brand-color\" <colour>\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the colour is used to create a brand palete\n\t\tAnd it is applied to the children components\n\t\tExamples:\n\t\t\t| colour |\n\t\t\t| #4225c4 |\n\t\t\t| rgb(66, 37, 196) |\n\t\t\t| hsl(251, 68%, 46%) |\n\t\t\t| hsla(251, 68%, 46%, 1) |\n\n\t@motivating\n\tScenario: The brand component can apply a brand font to children components\n\t\tGiven a brand component with \"brand-font\" \"Nunito Sans\"\n\t\tAnd it is wrapping several mint components\n\t\tWhen a user views the children components\n\t\tThen the following css variables are set\n\t\t\t| variable | value |\n\t\t\t| --sl-font-sans | \"Nunito Sans\", arial |\n\t\t\t| --sl-input-font-family | \"Nunito Sans\", arial |\n\t\t\t| --sl-tooltip-font-family | \"Nunito Sans\", arial |\n\t\t\t| font-family | \"Nunito Sans\", arial |\n\t\tAnd they are applied to the children components\n\t\tAnd the children component's text is \"Nunito Sans\"";
|
|
11312
11512
|
|
|
11313
11513
|
const SqmBrand_stories = {
|
|
11314
11514
|
title: "Components/Brand",
|
|
11315
11515
|
parameters: {
|
|
11316
|
-
scenario: scenario$
|
|
11516
|
+
scenario: scenario$p,
|
|
11317
11517
|
},
|
|
11318
11518
|
};
|
|
11319
11519
|
const SampleComponents = () => (index.h("div", { style: { padding: "10px", border: "5px solid #EEE" } },
|
|
@@ -11414,12 +11614,12 @@ const BrandStories = /*#__PURE__*/Object.freeze({
|
|
|
11414
11614
|
Fonts: Fonts
|
|
11415
11615
|
});
|
|
11416
11616
|
|
|
11417
|
-
const scenario$
|
|
11617
|
+
const scenario$q = "@author:kutay\n@owner:kutay\nFeature: Card Feed\n\n\tThe Card Feed component displays Task Card components in a grid layout.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Card Feed component\n\n\t@motivating\n\tScenario: The Card Feed component displays Task Cards given as children slots\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tWhen the user views the Card Feed\n\t\tThen the task cards are displayed in a masonry layout\n\t\tWhen the card feed with grows or shrinks in width\n\t\tThen the number of columns adjust to the given width\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Card Feed component can have a maximum width\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tAnd has prop \"width\" has a provided <value>\n\t\tThen the task cards are displayed in a masonry layout\n\t\tWhen the card feed with grows or shrinks in width\n\t\tThen the number of columns adjust to the given width\n\t\tAnd the task cards do not exceed <width>\n\t\tExamples:\n\t\t\t| value | width |\n\t\t\t| | 347px |\n\t\t\t| 200 | 200px |\n\t\t\t| 400 | 400px |\n\n\t@motivating\n\t@ui\n\tScenario Outline: The Card Feed component gap between task cards can be customized\n\t\tGiven a Card Feed component\n\t\tAnd it is wrapping a number of task cards as children\n\t\tAnd has prop \"gap\" has a provided <value>\n\t\tThen the task cards are displayed in a masonry layout\n\t\tAnd the gap between the columns is the <gap>\n\t\tExamples:\n\t\t\t| value | gap |\n\t\t\t| | 24px |\n\t\t\t| 20 | 20px |\n\t\t\t| 50 | 50px |";
|
|
11418
11618
|
|
|
11419
11619
|
const CardFeed_stories = {
|
|
11420
11620
|
title: "Components/Card Feed",
|
|
11421
11621
|
parameters: {
|
|
11422
|
-
scenario: scenario$
|
|
11622
|
+
scenario: scenario$q,
|
|
11423
11623
|
},
|
|
11424
11624
|
};
|
|
11425
11625
|
const oneAction$1 = {
|
|
@@ -11656,12 +11856,12 @@ const CardFeed = /*#__PURE__*/Object.freeze({
|
|
|
11656
11856
|
CardFeedGeneric: CardFeedGeneric
|
|
11657
11857
|
});
|
|
11658
11858
|
|
|
11659
|
-
const scenario$
|
|
11859
|
+
const scenario$r = "@author:kutay\n@owner:noah\nFeature: Portal Container\n\n\t@motivating\n\t@ui\n\tScenario: Horizontal content overflows, but does not stretch\n\t\tGiven there are two element in the container\n\t\tAnd the first is small\n\t\tAnd the second would stretch the container wider than it's parent\n\t\tThen the second one is clipped\n\t\tAnd the first one doesn't stretch\n\n\t@landmine\n\t@ui\n\tScenario: `max-width` is required for displaying as a row\n\t\tGiven I have `direction` to \"row\"\n\t\tAnd I have not set a `max-width`\n\t\tThen it displays as a column\n\n\t@motivating\n\t@ui\n\tScenario Outline: Content padding can be customized\n\t\tGiven prop \"padding\" has <value>\n\t\tThen <padding> is applied to content\n\n\t\tExamples:\n\t\t\t| value | padding |\n\t\t\t| none | no padding |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A | no padding |\n\n\n\t@motivating\n\t@ui\n\tScenario Outline: Gap between content elements can be customized\n\t\tGiven prop \"gap\" has <value>\n\t\tThen <gap> is applied to elements between content\n\n\t\tExamples:\n\t\t\t| value | gap |\n\t\t\t| none | no padding |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A | no padding |\n\n\t@minutia\n\t@ui\n\tScenario: Content can be center aligned in horizontal view\n\t\tGiven I have supplied the prop \"center\"\n\t\tThen the content is center aligned\n\n\t@minutia\n\t@ui\n\tScenario: Content in the last row can span full width with display in horizontal view\n\t\tGiven I have `display` to \"flex\"\n\t\tThen the content is full width on the last row\n\n\t@motivating\n\t@ui\n\tScenario Outline: Content can be aligned along the x-axis\n\t\tGiven prop \"justify-content\" has <value>\n\t\tThen content within the container is aligned <alignment>\n\n\t\tExamples:\n\t\t\t| value | alignment |\n\t\t\t| none | no alignment |\n\t\t\t| start | to the start |\n\t\t\t| center | to the center |\n\t\t\t| end | to the end |\n\t\t\t| space-between | with space between |\n\t\t\t| space-around | with space around |\n\t\t\t| space-evenly | with space evenly |\n\n\n\t@motivating\n\t@ui\n\tScenario Outline: Component background color can be customized\n\t\tGiven a user is viewing the Portal Container component\n\t\tThen the default value is \"#ffffff00\"\n\t\tWhen the prop \"background-color\" has <value>\n\t\tThen the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| value | backgroundColor |\n\t\t\t| empty (default value) | var(--sl-color-neutral-0) (#ffffff) |\n\t\t\t| aquamarine | #7fffd4 |\n";
|
|
11660
11860
|
|
|
11661
11861
|
const PortalContainer_stories = {
|
|
11662
11862
|
title: "Components/Microsite Container",
|
|
11663
11863
|
parameters: {
|
|
11664
|
-
scenario: scenario$
|
|
11864
|
+
scenario: scenario$r,
|
|
11665
11865
|
},
|
|
11666
11866
|
};
|
|
11667
11867
|
const TooWideColumn = () => (index.h("div", { style: { width: "200px", border: "1px dashed grey" } },
|
|
@@ -11829,11 +12029,11 @@ const scenario3 = "@author:derek @owner:derek\nFeature: Reward Table Status Colu
|
|
|
11829
12029
|
|
|
11830
12030
|
const scenario4 = "@author:derek @owner:derek\nFeature: Reward Table Source Column\n Shows the source of each reward\n\n @motivating @ui\n Scenario Outline: The title of the source column is configurable\n Given the \"column-title\" prop is set to <value>\n Then the source column is shown with <columnTitle>\n\n Examples:\n | value | columnTitle |\n | Source | |\n | My column title | My column title |\n\n @motivating @ui\n Scenario: The source column displays manual if the reward is caused by a manual action\n Given a user with a \"MANUAL\" reward\n When they view the rewards table\n Then the source of their reward is displayed as \"Manual\"\n\n @motivating @ui\n Scenario: The source column displays the program name if the reward is caused automatically by a program\n Given a user with a \"AUTOMATED\" program reward\n And the program has name \"Loyalty Program\"\n When they view the rewards table\n Then the source of their reward is displayed as \"Loyalty Program\"\n\n @motivating @ui\n Scenario Outline: The source column displays customizable reward exchange text with amount if the reward is caused by reward exchange\n Given the \"reward-exchange-text\" prop is <propValue>\n And a user with a \"MANUAL\" reward\n But it was created by a reward exchange\n Then they view the rewards table\n Then the source displays <exchangeText>\n And under it displays the following\n | prettyRedeemedCredit → prettyValue |\n\n Examples:\n | propValue | exchangeText |\n | | Reward Exchange |\n | Exchanged | Exchanged |\n\n @motivating @ui\n Scenario Outline: The source column displays customizable referral information if the reward is from a referral\n Given the \"reward-source-text\" prop is <propValue>\n And a user with a referral reward\n And that reward has <rewardSource>\n When they view the rewards table\n Then then source displays <referralText>\n And under it displays the full name of the <referralUser>\n\n Examples:\n | propValue | rewardSource | referralText | referralUser |\n | | REFERRED | Referred by | referrer user |\n | | FRIEND_SIGNUP | Referral to | referred user |\n | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | REFERRED | Referred you | referrer user |\n | {rewardSource, select, FRIEND_SIGNUP {You Referred} REFERRED {Referred you} other {}} | FRIEND_SIGNUP | You Referred | referred user |\n\n @motivating @ui\n Scenario Outline: The source column displays the existing name for a referral if either the first name or last name does not exist\n Given a user with a referral reward\n And referral user exists\n And referral user has <name>\n But referral user has no <otherName>\n When they view the rewards table\n Then referral user's name is displayed as <name>\n\n Examples:\n | name | otherName |\n | first.name | last.name |\n | last.name | first.name |\n\n @motivating @ui\n Scenario Outline: The source column displays referral as \"Anonymous User\" if the referral user has no names\n Given a user with a referral reward\n And that reward has <rewardSource>\n And the <referralUser> has no first name\n And the <referralUser> has no last name\n When they view the rewards table\n Then then source displays <sourceText>\n And under it displays \"Anonymous User\"\n\n Examples:\n | rewardSource | referralUser | sourceText |\n | FRIEND_SIGNUP | referrer | Referral to |\n | REFERRED | referred user | Referred by |\n\n @motivating @ui\n Scenario Outline: The source column displays referral as \"Deleted User\" if the referral user is deleted in the system\n Given a user with a referral reward\n And that reward has <rewardSource>\n But <referral> user was deleted\n When they view the rewards table\n Then the source displays <sourceText>\n And under it displays \"Deleted User\"\n\n Examples:\n | rewardSource | referral | sourceText |\n | \"FRIEND_SIGNUP\" | referrer | Referral to |\n | \"REFERRED\" | referred | Referred by |\n\n @motivating @ui\n Scenario Outline: The source column displays referral as \"Deleted referral\" if the referral user is deleted in the system\n Given a user with a referral reward\n And that reward has <rewardSource>\n But <referral> user was deleted\n When they view the rewards table\n Then the source displays <sourceText>\n And under it displays \"Deleted referral\"\n\n Examples:\n | rewardSource | referral | sourceText |\n | \"FRIEND_SIGNUP\" | referrer | Referral to |\n | \"REFERRED\" | referred | Referred by |\n\n @minutia @ui\n Scenario Outline: Name fallbacks for referral users without names are customizable\n Given <prop> with <value>\n And a user with a referral reward\n But the referral user <hadAction>\n When they view the rewards table\n Then the source displays <value> as the referral user\n\n Examples:\n | prop | value | hadAction |\n | deleted-user | Former Customer | was deleted |\n | anonymous-user | Nameless User | had first and last name deleted |\n\n @motivating\n Scenario Outline: Source text can be customized\n Given the \"reward-source-text\" prop is \"{rewardSource, select, MANUAL {Support} AUTOMATED {Loyalty Program} other {}}\"\n And a user with a <rewardSource> reward\n When they view the rewards table\n Then the source is <sourceText>\n\n Examples:\n | rewardSource | sourceText |\n | MANUAL | Support |\n | AUTOMATED | Loyalty Program |\n";
|
|
11831
12031
|
|
|
11832
|
-
const scenario$
|
|
12032
|
+
const scenario$s = scenario1 + scenario2 + scenario3 + scenario4;
|
|
11833
12033
|
const RewardsTableCell_stories = {
|
|
11834
12034
|
title: "Components/Rewards Table Cell",
|
|
11835
12035
|
parameters: {
|
|
11836
|
-
scenario: scenario$
|
|
12036
|
+
scenario: scenario$s,
|
|
11837
12037
|
},
|
|
11838
12038
|
};
|
|
11839
12039
|
const rewardsData$1 = {
|
|
@@ -12276,12 +12476,12 @@ const RewardsTableCell = /*#__PURE__*/Object.freeze({
|
|
|
12276
12476
|
EmptyCell: EmptyCell$2
|
|
12277
12477
|
});
|
|
12278
12478
|
|
|
12279
|
-
const scenario$
|
|
12479
|
+
const scenario$t = "@owner:sam\n@author:sam\nFeature: Rewards Table\n\n Shows a list of rewards as a table\n\n @motivating\n @ui\n Scenario: The empty state is shown if there are no rewards\n Given a user with rewards\n When they view the reward table\n Then no rewards are displayed\n And they see an image with a user icon\n And \"View your rewards\" in bold\n And \"See all the rewards you have earned from referring friends and completing tasks\" below the bolded text\n And the pagination buttons are disabled\n\n @minutia\n @ui\n Scenario: A custom empty state can be provided\n Given a user with no rewards\n And a custom empty state has been supplied in the \"empty\" slot\n When they view the reward table\n Then they see the custom empty state\n\n @minutia\n @ui\n Scenario: The loading state is shown while rewards are loading\n Given the table is loading\n Then the loading state is shown in the table\n And a custom loading state can be supplied in the \"loading\" slot\n And the pagination buttons are disabled\n\n @motivating\n @ui\n Scenario Outline: The table becomes paginated when the number of rewards exceeds the per page limit\n Given the user has <number of rewards>\n And the table is configured to show <page limit> rewards per page\n Then the table will have <number of pages> page(s)\n And pagination buttons will allow users to navigate between pages\n And the pagination button to go to the next page is disabled on the last page of rewards\n And the pagination button to go to the previous page is disabled on the first page of rewards\n Examples:\n | number of rewards | page limit | number of pages |\n | 0 | 4 | 1 |\n | 1 | 4 | 1 |\n | 3 | 4 | 1 |\n | 5 | 4 | 2 |\n | 42 | 4 | 11 |\n\n @motivating\n @ui\n Scenario: The table converts to a card view on tablet and mobile window sizes\n Given a user with rewards\n When they view the table\n And their window size is smaller than \"799px\"\n Then rewards are displayed as cards\n And they are in two columns\n When their window size is smaller than \"599px\"\n Then the rewards are displayed as cards in a singular column\n\n @motivating\n @ui\n Scenario: Table and Mobile beakpoints can be configured\n Given the reward table has been configured with the following props\n | prop | value |\n | smBreakpoint | 599 |\n | mdBreakpoint | 799 |\n And a user with rewards\n When they view the table\n And their window size is smaller than \"799px\"\n Then rewards are displayed as cards\n And they are in two columns\n When their window size is smaller than \"599px\"\n Then the rewards are displayed as cards in a singular column\n\n @motivating\n @ui\n Scenario Outline: By default the first column heading is hidden in mobile\n Given a reward table with 4 columns\n And prop \"hidden-columns\" with <hideColumnValue>\n And a user with rewards\n When they view the reward table\n And their window size is below the tablet breakpoint\n Then reward cards are displayed\n And the titles of <columnsArehidden> within the card\n Examples:\n | hideColumnValue | columnsArehidden |\n | | the first column |\n | 0,1,2 | the first, second and third columns |\n | 3 | the fourth column |\n\n @motivating\n Scenario: Only rewards which occured in the program specific by \"program-id\" are shown\n Given the table is configured with \"program-id\"\n Then only rewards from the program with \"program-id\" are shown\n\n @landmine\n Scenario: When a `classic` program Id is set then any reward without a programId is shown\n There is no easy way for the backend to filter for \"classic\" programs,\n thus we are filtering for rewards without programId's.\n\n Given the \"program-id\" of the table is set to \"classic\"\n Then rewards from classic programs are shown\n And manual rewards are shown\n\n @minutia\n @ui\n Scenario: Column heading can be hidden\n Given the table is configured with \"hide-labels\" set to \"true\"\n Then the table is displayed without column headings";
|
|
12280
12480
|
|
|
12281
12481
|
const RewardsTable_stories = {
|
|
12282
12482
|
title: "Components/Rewards Table",
|
|
12283
12483
|
parameters: {
|
|
12284
|
-
scenario: scenario$
|
|
12484
|
+
scenario: scenario$t,
|
|
12285
12485
|
},
|
|
12286
12486
|
};
|
|
12287
12487
|
const loadingElement$1 = (index.h("div", { slot: "loading", style: { display: "contents" } },
|
|
@@ -12593,12 +12793,12 @@ const UseReferralTable = /*#__PURE__*/Object.freeze({
|
|
|
12593
12793
|
ReferralTableFr: ReferralTableFr
|
|
12594
12794
|
});
|
|
12595
12795
|
|
|
12596
|
-
const scenario$t = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\t\t| image-pos | <value> |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value | alignment |\n\t\t\t| left | left aligned |\n\t\t\t| center | centered |\n\t\t\t| right | right aligned |\n\t\t\t| N/A | centered |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\t\t| padding-text | <value> |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value | padding |\n\t\t\t| none | no padding |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\t\t| text-color | <textColor> |\n\t\t\t| overlay-color | <overlayColor> |\n\t\t\t| overlay-opacity | <overlayOpacity> |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b | #ff7f7f | 0.9 |\n\t\t\t| #1d0314 | #4baa1a | 0 |\n\t\t\t| #211a27 | #aa481a | 1 |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements |\n\t\t\t| header |\n\t\t\t| description |\n\t\t\t| button |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| image-pos | <imagePos> |\n\t\t\t| image-mobile-pos | <imageMobilePos> |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left | top |\n\t\t\t| right | bottom |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| padding-text | <paddingText> |\n\t\t\t| padding-image | <paddingImage> |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| none | none |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| image-percentage | <percent> |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25% |\n\t\t\t| 42% |\n\t\t\t| 66% |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| text-color | <textColor> |\n\t\t\t| background-color | <backgroundColor> |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b | #ff7f7f |\n\t\t\t| #1d0314 | #4baa1a |\n\t\t\t| #211a27 | #aa481a |";
|
|
12796
|
+
const scenario$u = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\t\t| image-pos | <value> |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value | alignment |\n\t\t\t| left | left aligned |\n\t\t\t| center | centered |\n\t\t\t| right | right aligned |\n\t\t\t| N/A | centered |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\t\t| padding-text | <value> |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value | padding |\n\t\t\t| none | no padding |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"overlay\" |\n\t\t\t| text-color | <textColor> |\n\t\t\t| overlay-color | <overlayColor> |\n\t\t\t| overlay-opacity | <overlayOpacity> |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b | #ff7f7f | 0.9 |\n\t\t\t| #1d0314 | #4baa1a | 0 |\n\t\t\t| #211a27 | #aa481a | 1 |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements |\n\t\t\t| header |\n\t\t\t| description |\n\t\t\t| button |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| image-pos | <imagePos> |\n\t\t\t| image-mobile-pos | <imageMobilePos> |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left | top |\n\t\t\t| right | bottom |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| padding-text | <paddingText> |\n\t\t\t| padding-image | <paddingImage> |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| none | none |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| image-percentage | <percent> |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25% |\n\t\t\t| 42% |\n\t\t\t| 66% |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop | value |\n\t\t\t| image-url | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\" |\n\t\t\t| header | \"Klip Rewards\" |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\" |\n\t\t\t| layout | \"columns\" |\n\t\t\t| text-color | <textColor> |\n\t\t\t| background-color | <backgroundColor> |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b | #ff7f7f |\n\t\t\t| #1d0314 | #4baa1a |\n\t\t\t| #211a27 | #aa481a |";
|
|
12597
12797
|
|
|
12598
12798
|
const HeroImage_stories = {
|
|
12599
12799
|
title: "Components/Hero Image",
|
|
12600
12800
|
parameters: {
|
|
12601
|
-
scenario: scenario$
|
|
12801
|
+
scenario: scenario$u,
|
|
12602
12802
|
},
|
|
12603
12803
|
};
|
|
12604
12804
|
const OverlayHeader = () => {
|
|
@@ -12671,12 +12871,12 @@ const HeroImage = /*#__PURE__*/Object.freeze({
|
|
|
12671
12871
|
ColumnsCustomColors: ColumnsCustomColors
|
|
12672
12872
|
});
|
|
12673
12873
|
|
|
12674
|
-
const scenario$
|
|
12874
|
+
const scenario$v = "@author:kutay\n@owner:kutay\nFeature: Referral Card\n\n\tThe Referral Card component takes in two slots and displays them side by side.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Referral Card component\n\n\t@motivating\n\t@ui\n\tScenario: Referral Card component displays provided content in left and right slots side by side\n\t\tGiven a Referral Card component\n\t\tAnd a slot with the name \"left\"\n\t\tAnd a slot with the name \"right\"\n\t\tWhen the user views the referral card\n\t\tThen the slot contents are displayed the card with equal width\n\t\tWhen the component is scaled down to 499px\n\t\tThen the column layout switches to row layout\n\t\tAnd the \"left\" slot content is displayed above the \"right\" slot content\n\n\t@minutia\n\t@ui\n\tScenario: Left or right column content spans the whole card if there is no content in the other column\n\t\tGiven a Referral Card component\n\t\tAnd there content in one column\n\t\tAnd there is no content in the other column\n\t\tThen the column with content spans 100% of the card width\n\t\tAnd the column with content respects the container's padding\n\t\tAnd the column without content has zero width\n\n\t@motivating\n\t@ui\n\tScenario Outline: Referral Card component content can be vertically aligned start, center, end\n\t\tGiven a Referral Card component\n\t\tAnd a slot with the name \"left\"\n\t\tAnd a slot with the name \"right\"\n\t\tAnd the prop \"vertical-alignment\" has <value>\n\t\tThen slots contents are displayed inside the card\n\t\tAnd slots are vertically aligned to <alignment> of the card\n\t\tExamples:\n\t\t\t| value | alignment |\n\t\t\t| start | the top |\n\t\t\t| center | the center |\n\t\t\t| end | the bottom |\n\t\t\t| N/A | the top |\n\n\t@ui\n\tScenario Outline: Container border can be toggled\n\t\tGiven a user is viewing the referral card component\n\t\tThen the default value for the prop \"include-border\" is \"true\"\n\t\tWhen \"include-border\" has <value>\n\t\tThen the referral card component's border <maybe> included\n\t\tExamples:\n\t\t\t| value | maybe |\n\t\t\t| true | is |\n\t\t\t| false | isn't |\n\t\t\t| empty (no value) | is |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Component background color can be customized\n\t\tGiven a user is viewing the Referral Card component\n\t\tThen the default value is \"#ffffff\"\n\t\tWhen the prop \"background-color\" has <value>\n\t\tThen the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| value | backgroundColor |\n\t\t\t| empty (default value) | var(--sl-color-neutral-0) (#ffffff) |\n\t\t\t| aquamarine | #7fffd4 |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Container padding can be customized\n\t\tGiven a user is looking at the component\n\t\tThen the default values for \"padding-top\", \"padding-bottom\", \"padding-left\", \"padding-right\" is \"large\"\n\t\tWhen prop \"padding-top\" has <value>\n\t\tThen <padding> is applied to content\n\t\tAnd the same applies to \"padding-bottom\", \"padding-left\", \"padding-right\"\n\n\t\tExamples:\n\t\t\t| value | padding |\n\t\t\t| none | no padding |\n\t\t\t| xxx-small | xxx-small |\n\t\t\t| xx-small | xx-small |\n\t\t\t| x-small | x-small |\n\t\t\t| small | small |\n\t\t\t| medium | medium |\n\t\t\t| large | large |\n\t\t\t| x-large | x-large |\n\t\t\t| xx-large | xx-large |\n\t\t\t| xxx-large | xxx-large |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A | no padding |";
|
|
12675
12875
|
|
|
12676
12876
|
const ReferralCard_stories = {
|
|
12677
12877
|
title: "Components/Referral Card",
|
|
12678
12878
|
parameters: {
|
|
12679
|
-
scenario: scenario$
|
|
12879
|
+
scenario: scenario$v,
|
|
12680
12880
|
},
|
|
12681
12881
|
};
|
|
12682
12882
|
const media = (slot) => {
|
|
@@ -12830,11 +13030,11 @@ const scenarioTimeline = "@author:derek\n@owner:kutay\nFeature: Timeline\n\n
|
|
|
12830
13030
|
|
|
12831
13031
|
const scenarioTimelineEntry = "@author:derek\n@owner:kutay\nFeature: Timeline Entry\n\n @motivating\n @ui\n Scenario: Timeline entries have an icon, a reward and an entry desciption\n Given an timeline entry with the following props\n | prop | value |\n | unit | Visa Giftcard |\n | reward | 50$ |\n | desc | Earn a 50$ Visa Giftcard for each referral you make |\n When a user views the entry\n Then they see a gift icon\n And see \"$50 VISA GIFTCARRD\" to the right\n And \"$50\" is bolded with x-large font size\n And below they see \"Earn a 50$ Visa Giftcard for each referral you make\"\n\n @motivating\n @ui\n Scenario Outline: Icon can either be a gift or a brand colour cirle\n Given a timeline entry with \"icon\" <iconPropValue>\n When a user views the entry\n Then they see an <icon>\n Examples:\n | iconPropValue 1 | icon |\n | gift | gift |\n | circle | brand colour circle |\n | | gift |\n\n @motivating\n @ui\n Scenario: A timeline entry can display a line to connect it to another entry\n Given a timeline entry with \"line\" \"true\"\n When a user views the entry\n Then they see the entry\n But it has a brand colour line connecting it to the next timeline entry\n";
|
|
12832
13032
|
|
|
12833
|
-
const scenario$
|
|
13033
|
+
const scenario$w = scenarioTimeline + scenarioTimelineEntry;
|
|
12834
13034
|
const Timeline_stories = {
|
|
12835
13035
|
title: "Components/Timeline",
|
|
12836
13036
|
parameters: {
|
|
12837
|
-
scenario: scenario$
|
|
13037
|
+
scenario: scenario$w,
|
|
12838
13038
|
},
|
|
12839
13039
|
};
|
|
12840
13040
|
const TimelineWith1Reward = () => {
|
|
@@ -12907,12 +13107,12 @@ const Timeline = /*#__PURE__*/Object.freeze({
|
|
|
12907
13107
|
TimelineWith4Rewards: TimelineWith4Rewards
|
|
12908
13108
|
});
|
|
12909
13109
|
|
|
12910
|
-
const scenario$
|
|
13110
|
+
const scenario$x = "@author:kutay\n@owner:kutay\nFeature: Image\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the image component\n\n\t@motivating\n\t@ui\n\tScenario: Image is displayed from URL\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tThen the image is displayed\n\t\tAnd it is centered\n\n\t@motivating\n\t@ui\n\tScenario Outline: Images can be aligned left, center or right\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"align\" has <value>\n\t\tThen the image is displayed\n\t\tAnd it is aligned to the <value>\n\t\tExamples:\n\t\t\t| value |\n\t\t\t| left |\n\t\t\t| center |\n\t\t\t| right |\n\n\t@motivating\n\t@ui\n\tScenario: Image background can be assigned a color\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided with a valid image url\n\t\tAnd prop \"background-color\" is provided a color\n\t\tThen the image is displayed\n\t\tAnd the background is the provided color\n\n\t@motivating\n\t@ui\n\tScenario: Image minimum height can be constrained\n\t\tGiven an Image component\n\t\tAnd prop \"image-url\" is provided\n\t\tAnd prop \"min-height\" is given a minimum value\n\t\tThen the image is displayed\n\t\tAnd the container size changes\n\t\tThen the image does not shrink below its minimum height";
|
|
12911
13111
|
|
|
12912
13112
|
const Image_stories = {
|
|
12913
13113
|
title: "Components/Image",
|
|
12914
13114
|
parameters: {
|
|
12915
|
-
scenario: scenario$
|
|
13115
|
+
scenario: scenario$x,
|
|
12916
13116
|
},
|
|
12917
13117
|
};
|
|
12918
13118
|
const Image = () => {
|
|
@@ -12945,12 +13145,12 @@ const Image$1 = /*#__PURE__*/Object.freeze({
|
|
|
12945
13145
|
MinimumHeight: MinimumHeight
|
|
12946
13146
|
});
|
|
12947
13147
|
|
|
12948
|
-
const scenario$
|
|
13148
|
+
const scenario$y = "@author:derek\n@owner:noah\nFeature: Titled Section\n\n Background: The titled section has a label and content\n Given a titled section\n And it has a label\n And it has content in the content slot\n\n @motivating\n @ui\n Scenario: Text alignment defaults to left align but can be configured\n Given the titled section has \"text-align\" <textAlignPropValue>\n When a user views the titled section\n Then the text in the label is <aligned>\n And the text in the content is <aligned>\n Examples:\n | textAlignPropValue | aligned |\n | center | center |\n | left | left |\n | right | right |\n | | left |\n\n @minutia\n @ui\n Scenario: Label margin is configurable\n Given the titled section has \"label-margin\" <marginPropValue>\n When a user views the titled section\n Then <marginPropValue> margin is between the label and content\n Examples:\n | marginPropValue | margin |\n | none | no |\n | xxx-small | xxx-small |\n | xx-small | xx-small |\n | x-small | x-small |\n | small | small |\n | medium | medium |\n | large | large |\n | x-large | x-large |\n | xx-large | xx-large |\n | xxx-large | xxx-large |\n | xxxx-large | xxxx-large |\n | | no |\n\n @minutia\n @ui\n Scenario Outline: Titled section padding is configurable\n Given the titled section has \"padding\" <paddingPropValue>\n When a user views the titled section\n Then <paddingPropValue> padding is applied around the titled section\n Examples:\n | paddingPropValue | padding |\n | none | no |\n | xxx-small | xxx-small |\n | xx-small | xx-small |\n | x-small | x-small |\n | small | small |\n | medium | medium |\n | large | large |\n | x-large | x-large |\n | xx-large | xx-large |\n | xxx-large | xxx-large |\n | xxxx-large | xxxx-large |\n | | no |";
|
|
12949
13149
|
|
|
12950
13150
|
const TitledSection_stories = {
|
|
12951
13151
|
title: "Components/Titled Section",
|
|
12952
13152
|
parameters: {
|
|
12953
|
-
scenario: scenario$
|
|
13153
|
+
scenario: scenario$y,
|
|
12954
13154
|
},
|
|
12955
13155
|
};
|
|
12956
13156
|
const AlignLeft = () => {
|
|
@@ -13346,12 +13546,12 @@ const Scroll = /*#__PURE__*/Object.freeze({
|
|
|
13346
13546
|
ShoelaceProps: ShoelaceProps
|
|
13347
13547
|
});
|
|
13348
13548
|
|
|
13349
|
-
const scenario$
|
|
13549
|
+
const scenario$z = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n Background: A user on the portal is viewing the widget\n Given a user viewing the Tabs component\n\n @motivating\n Scenario: Content inside the active tab is shown\n Given the header is set to <tabHeader>\n And the content inside is <tabContent>\n And the user has clicked <tabHeader>\n Then the <tabContent> is shown\n Examples:\n | tabHeader | tabContent |\n | Settings | This is the settings tab |\n | General | This is the general tab |\n | History | This is the history tab |\n\n @motivating\n @ui\n Scenario: The placement of the tabs is configurable\n Given The placement prop has been passed a valid <placement>\n Then tabs are placed on the <placementResult>\n Examples:\n | placement | placementResult |\n | | top of the content |\n | left | left hand side of the content |\n | right | right hand side of the content |\n | bottom | bottom of the content |\n\n\n @minutia\n @ui\n Scenario Outline: Tabs are setup to use the brand color\n Given the brand color is set to darkblue\n Then the text inside the active tab is darkblue\n And the underline of the active tab is darkblue\n\n @ui\n Scenario: Tabs are responsive\n Given the user is on a mobile device\n When there are more tabs than the horizontal space allows for\n Then clickable arrows appear on the left and right of the tabs\n And the tabs are scrollable\n\n @landmine\n Scenario: Program section cannot be used inside of tabs\n Given a tabs component\n And tab containing a program section with program-id \"test123\"\n And the program section wraps a component using program context\n When the tabs component is rendered\n Then the \"sq:program-id\" event listener for the program section is removed\n And the component does not use program-id \"test123\" to source its data\n And falls back to the global program id";
|
|
13350
13550
|
|
|
13351
13551
|
const Tabs_stories = {
|
|
13352
13552
|
title: "Components/Tabs",
|
|
13353
13553
|
parameters: {
|
|
13354
|
-
scenario: scenario$
|
|
13554
|
+
scenario: scenario$z,
|
|
13355
13555
|
},
|
|
13356
13556
|
};
|
|
13357
13557
|
const SimpleTabs = () => (index.h("div", { style: { maxWidth: "700px", margin: "auto" }, innerHTML: `
|
|
@@ -13851,12 +14051,12 @@ const Tabs = /*#__PURE__*/Object.freeze({
|
|
|
13851
14051
|
RightTabs: RightTabs
|
|
13852
14052
|
});
|
|
13853
14053
|
|
|
13854
|
-
const scenario$
|
|
14054
|
+
const scenario$A = "@author:johan\n@owner:johan\nFeature: Share Code\n\n The share code component is a box that allows users to see and copy their referral code for a given program\n\n Background: Environment\n Given there is a valid program ID in the environment\n And there is a valid user ID and account ID in the environment\n\n @motivating\n Scenario: A Users referral code can be copied to their clipboard\n Given tooltiptext is \"hello tooltip\"\n When the component renders\n Then there is a textbox with the user's share code\n When the clipboard icon is clicked\n Then the code is copied to clipboard\n And a tooltip will appear for ~1 second\n\n @minutia\n Scenario: Tooltip lifespan defaults to 2000\n Given the tooltip's lifespan is set to 2000\n And there is tooltip text\n When the component renders\n And the clipboard icon is clicked\n Then a tooltip will appear for ~2 seconds\n\n @minutia\n Scenario: Demo\n Given isDemo() returns true\n Then the share code is \"SHARECODE001\"\n And the component won't be interactive\n And the tooltip is hidden\n\n @minutia\n Scenario: Program ID can be sourced from prop\n Given the programId prop is set to \"program-a\"\n And window.widgetIdent.programId is set to \"program-b\"\n When the component renders\n Then the share code is for \"program-a\"\n\n @minutia\n Scenario: Program ID can be sourced from window\n Given the programId prop is unset\n And window.widgetIdent.programId is set to \"program-b\"\n When the component renders\n Then the share code is for \"program-b\"\n\n @minutia\n Scenario: An analytic event is fired when a user copies their code\n Given a user viewing the share code component\n And the component is rendered for \"program-a\"\n When they click to copy their code\n Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n And it is for \"program-a\"\n And it has share medium \"DIRECT\"\n\n\n @ui\n Scenario Outline: user can edit the alignment of the share code text\n Given a user is editing the share code component\n Then they see \"Align text\" props\n And the default value is \"left\"\n When they change the option to <option>\n Then they see the text in <position>\n Examples:\n | option | position |\n | left | left |\n | center | center |\n | right | right |\n\n @ui\n Scenario Outline: The position of the copy button can be changed\n Given a user is editing the share code component\n Then they see \"Style\" props\n And the default value is \"icon\"\n When they change the option to <option>\n Then they see the copy button in <position>\n Examples:\n | option | position |\n | button outside | outside the input, on the right |\n | button below | outside the input, below |\n | icon | inside the input as an icon |\n";
|
|
13855
14055
|
|
|
13856
14056
|
const ShareCode_stories = {
|
|
13857
14057
|
title: "Components/Share Code",
|
|
13858
14058
|
parameters: {
|
|
13859
|
-
scenario: scenario$
|
|
14059
|
+
scenario: scenario$A,
|
|
13860
14060
|
},
|
|
13861
14061
|
};
|
|
13862
14062
|
const ShareCode = () => {
|
|
@@ -13890,7 +14090,7 @@ const CopyButtonBelow$1 = () => {
|
|
|
13890
14090
|
buttonStyle: "button-below",
|
|
13891
14091
|
})));
|
|
13892
14092
|
};
|
|
13893
|
-
const Error$
|
|
14093
|
+
const Error$8 = () => {
|
|
13894
14094
|
const props = {
|
|
13895
14095
|
copyString: "https://noah.example.com",
|
|
13896
14096
|
disabled: true,
|
|
@@ -13911,15 +14111,15 @@ const ShareCode$1 = /*#__PURE__*/Object.freeze({
|
|
|
13911
14111
|
CustomTooltipDuration: CustomTooltipDuration,
|
|
13912
14112
|
CopyButton: CopyButton$1,
|
|
13913
14113
|
CopyButtonBelow: CopyButtonBelow$1,
|
|
13914
|
-
Error: Error$
|
|
14114
|
+
Error: Error$8
|
|
13915
14115
|
});
|
|
13916
14116
|
|
|
13917
|
-
const scenario$
|
|
14117
|
+
const scenario$B = "@author:sam\n@owner:sam\nFeature: Referral Code\n\n The referral code component is a box that allows users to see and copy their referral promo code for a given program\n\n Background: Environment\n Given there is a valid program ID in the environment\n And there is a valid user ID and account ID in the environment\n\n @motivating\n Scenario: A Users referral code can be copied to their clipboard\n Given tooltiptext is \"hello tooltip\"\n When the component renders\n Then there is a textbox with the user's referral code\n When the clipboard icon is clicked\n Then the code is copied to clipboard\n And a tooltip will appear for ~1 second\n\n @minutia\n Scenario: Tooltip lifespan can be customized\n Given the tooltip's lifespan is set to 2000\n And there is tooltip text\n When the component renders\n And the clipboard icon is clicked\n Then a tooltip will appear for ~2 seconds\n\n @minutia\n Scenario: Demo\n Given isDemo() returns true\n Then the share code is \"SHARECODE001\"\n And the component won't be interactive\n And the tooltip is hidden\n\n @minutia\n Scenario: Program ID can be sourced from prop\n Given the programId prop is set to \"program-a\"\n And window.widgetIdent.programId is set to \"program-b\"\n When the component renders\n Then the share code is for \"program-a\"\n\n @minutia\n Scenario: Program ID can be sourced from window\n Given the programId prop is unset\n And window.widgetIdent.programId is set to \"program-b\"\n When the component renders\n Then the share code is for \"program-b\"\n\n @minutia\n Scenario: An analytic event is fired when a user copies their code\n Given a user viewing the referral code component\n And the component is rendered for \"program-a\"\n When they click to copy their code\n Then an \"USER_REFERRAL_PROGRAM_ENGAGEMENT_EVENT\" analytic event is fired\n And it is for \"program-a\"\n And it has share medium \"DIRECT\"\n\n @ui\n Scenario Outline: user can edit the alignment of the share code text\n Given a user is editing the referral code component\n Then they see \"Align text\" props\n And the default value is \"left\"\n When they change the option to <option>\n Then they see the text in <position>\n Examples:\n | option | position |\n | left | left |\n | center | center |\n | right | right |\n\n @ui\n Scenario Outline: The position of the copy button can be changed\n Given a user is editing the referral code component\n Then they see \"Style\" props\n And the default value is \"icon\"\n When they change the option to <option>\n Then they see the copy button in <position>\n Examples:\n | option | position |\n | button outside | outside the input, on the right |\n | button below | outside the input, below |\n | icon | inside the input as an icon |\n";
|
|
13918
14118
|
|
|
13919
14119
|
const ReferralCode_stories = {
|
|
13920
14120
|
title: "Components/Referral Code",
|
|
13921
14121
|
parameters: {
|
|
13922
|
-
scenario: scenario$
|
|
14122
|
+
scenario: scenario$B,
|
|
13923
14123
|
},
|
|
13924
14124
|
};
|
|
13925
14125
|
const ReferralCode = () => {
|
|
@@ -13963,7 +14163,7 @@ const CopyButtonBelow$2 = () => {
|
|
|
13963
14163
|
buttonStyle: "button-below",
|
|
13964
14164
|
})));
|
|
13965
14165
|
};
|
|
13966
|
-
const Error$
|
|
14166
|
+
const Error$9 = () => {
|
|
13967
14167
|
const props = {
|
|
13968
14168
|
copyString: "https://noah.example.com",
|
|
13969
14169
|
disabled: true,
|
|
@@ -13987,7 +14187,7 @@ const ReferralCode$1 = /*#__PURE__*/Object.freeze({
|
|
|
13987
14187
|
CustomTooltipDuration: CustomTooltipDuration$1,
|
|
13988
14188
|
CopyButton: CopyButton$2,
|
|
13989
14189
|
CopyButtonBelow: CopyButtonBelow$2,
|
|
13990
|
-
Error: Error$
|
|
14190
|
+
Error: Error$9
|
|
13991
14191
|
});
|
|
13992
14192
|
|
|
13993
14193
|
// import scenario from "./ShareCode.feature";
|
|
@@ -13997,7 +14197,7 @@ const EmailRegistration_stories = {
|
|
|
13997
14197
|
// scenario,
|
|
13998
14198
|
},
|
|
13999
14199
|
};
|
|
14000
|
-
const defaultProps$
|
|
14200
|
+
const defaultProps$f = {
|
|
14001
14201
|
states: {
|
|
14002
14202
|
error: "",
|
|
14003
14203
|
loading: false,
|
|
@@ -14016,59 +14216,59 @@ const defaultProps$d = {
|
|
|
14016
14216
|
fraudErrorMessageTitle: "Looks like you tried referring yourself",
|
|
14017
14217
|
},
|
|
14018
14218
|
};
|
|
14019
|
-
const Default$
|
|
14219
|
+
const Default$i = () => index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, defaultProps$f));
|
|
14020
14220
|
const HasFirstNameLastName = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14021
|
-
...defaultProps$
|
|
14221
|
+
...defaultProps$f,
|
|
14022
14222
|
content: {
|
|
14023
|
-
...defaultProps$
|
|
14223
|
+
...defaultProps$f.content,
|
|
14024
14224
|
includeName: true,
|
|
14025
14225
|
},
|
|
14026
14226
|
})));
|
|
14027
14227
|
const WithSlots = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14028
|
-
...defaultProps$
|
|
14228
|
+
...defaultProps$f,
|
|
14029
14229
|
content: {
|
|
14030
|
-
...defaultProps$
|
|
14230
|
+
...defaultProps$f.content,
|
|
14031
14231
|
topSlot: index.h("div", null, "Hello this is the top slot"),
|
|
14032
14232
|
bottomSlot: index.h("div", null, "Hello this is the bottom slot"),
|
|
14033
14233
|
},
|
|
14034
14234
|
})));
|
|
14035
14235
|
const NoBorder$1 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14036
|
-
...defaultProps$
|
|
14236
|
+
...defaultProps$f,
|
|
14037
14237
|
content: {
|
|
14038
|
-
...defaultProps$
|
|
14238
|
+
...defaultProps$f.content,
|
|
14039
14239
|
hideBorder: true,
|
|
14040
14240
|
},
|
|
14041
14241
|
})));
|
|
14042
14242
|
const BackgroundColor$2 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14043
|
-
...defaultProps$
|
|
14243
|
+
...defaultProps$f,
|
|
14044
14244
|
content: {
|
|
14045
|
-
...defaultProps$
|
|
14245
|
+
...defaultProps$f.content,
|
|
14046
14246
|
backgroundColor: "aquamarine",
|
|
14047
14247
|
},
|
|
14048
14248
|
})));
|
|
14049
|
-
const Loading$
|
|
14050
|
-
...defaultProps$
|
|
14249
|
+
const Loading$5 = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14250
|
+
...defaultProps$f,
|
|
14051
14251
|
states: {
|
|
14052
14252
|
error: "",
|
|
14053
14253
|
loading: true,
|
|
14054
14254
|
},
|
|
14055
14255
|
})));
|
|
14056
|
-
const Error$
|
|
14057
|
-
...defaultProps$
|
|
14256
|
+
const Error$a = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14257
|
+
...defaultProps$f,
|
|
14058
14258
|
states: {
|
|
14059
14259
|
error: "Something went wrong. Please try again.",
|
|
14060
14260
|
loading: false,
|
|
14061
14261
|
},
|
|
14062
14262
|
})));
|
|
14063
14263
|
const FraudError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14064
|
-
...defaultProps$
|
|
14264
|
+
...defaultProps$f,
|
|
14065
14265
|
states: {
|
|
14066
14266
|
error: "FRAUD",
|
|
14067
14267
|
loading: false,
|
|
14068
14268
|
},
|
|
14069
14269
|
})));
|
|
14070
14270
|
const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationView, Object.assign({}, {
|
|
14071
|
-
...defaultProps$
|
|
14271
|
+
...defaultProps$f,
|
|
14072
14272
|
states: {
|
|
14073
14273
|
error: "Something went wrong. Please try again.",
|
|
14074
14274
|
loading: false,
|
|
@@ -14081,26 +14281,26 @@ const EmptyEmailError = () => (index.h(emailRegistrationView.EmailRegistrationVi
|
|
|
14081
14281
|
const EmailRegistration = /*#__PURE__*/Object.freeze({
|
|
14082
14282
|
__proto__: null,
|
|
14083
14283
|
'default': EmailRegistration_stories,
|
|
14084
|
-
Default: Default$
|
|
14284
|
+
Default: Default$i,
|
|
14085
14285
|
HasFirstNameLastName: HasFirstNameLastName,
|
|
14086
14286
|
WithSlots: WithSlots,
|
|
14087
14287
|
NoBorder: NoBorder$1,
|
|
14088
14288
|
BackgroundColor: BackgroundColor$2,
|
|
14089
|
-
Loading: Loading$
|
|
14090
|
-
Error: Error$
|
|
14289
|
+
Loading: Loading$5,
|
|
14290
|
+
Error: Error$a,
|
|
14091
14291
|
FraudError: FraudError,
|
|
14092
14292
|
EmptyEmailError: EmptyEmailError
|
|
14093
14293
|
});
|
|
14094
14294
|
|
|
14095
|
-
const scenario$
|
|
14295
|
+
const scenario$C = "@author:truman\n@owner:truman\nFeature: Coupon Code\n\n The coupon code component is a box that allows users to see and copy their coupon code for a given program\n\n @motivating\n Scenario: Component only fetches codes from current program\n Given a user has multiple rewards from various programs\n When the component is loaded\n Then it fetches the user's rewards from only the program associated with the widget\n\n @motivating\n Scenario: Component only looks at fueltank rewards\n Given a user has multiple rewards of different types\n When the component is loaded\n Then it filters the user's reward to only return FUELTANK rewards\n\n\n @motivating\n Scenario: The first (i.e. most recently received) reward is the reward that is displayed\n Given a user has at least one fueltank reward\n And the fueltank reward is available\n Then the coupon code component shows the first reward returned\n And this reward is the most recently received reward by the user\n\n @motivating\n Scenario Outline: Coupon code has multiple states depending on reward status\n Given a user has at least one fueltank reward\n And the reward has most recent status <status>\n And the dateScheduledFor field is <dateScheduledFor>\n Then the component's status is set to <componentStatus>\n And the <errorMessageTextProp> is displayed under the input field\n\n Examples:\n | status | dateScheduledFor | componentStatus | errorMessageTextProp |\n | AVAILABLE | null | AVAILABLE | N/A |\n | EXPIRED | null | EXPIRED | expiredErrorMessage |\n | REDEEMED | null | REDEEMED | redeemedMessage |\n | CANCELLED | null | CANCELLED | cancelledErrorMessage |\n | PENDING | null | EMPTY_TANK | fullfillmentErrorMessage |\n | PENDING | 123412341234 | PENDING | pendingErrorMessage |\n | null | null | ERROR | genericErrorMessage |\n\n Scenario Outline: Coupon code's error message text props are grouped\n Given an end user is viewing the coupon code component in the widget editor\n And they are looking at the component's properties\n Then they see <prop>\n And <prop> is grouped under \"Coupon code error\"\n Examples:\n | prop |\n | N/A |\n | expiredErrorMessage |\n | redeemedMessage |\n | cancelledErrorMessage |\n | fullfillmentErrorMessage |\n | pendingErrorMessage |\n | genericErrorMessage |\n\n @minutia\n Scenario: Tooltip lifespan defaults to 2000\n Given the tooltip's lifespan is set to 2000\n And there is tooltip text\n When the component renders\n And the clipboard icon is clicked\n Then a tooltip appears for ~2 seconds\n\n @ui\n Scenario: Component shows an error state when there is an error\n Given a user is viewing the coupon code component\n When there is an error in the coupon code\n Then in place of the coupon code is an alert banner\n And the alert banner gives information about the error to the user\n\n @ui\n Scenario: Component shows an loading state\n Given a user is viewing the coupon code component\n When the coupon code is loading in\n Then the text inside the input is \"Loading...\"\n And the coupon code input box has a gray background\n And the cursor is set to \"default\"\n And the user cannot copy the text\n\n @ui\n Scenario Outline: User can edit the alignment of the coupon code text\n Given a user is editing the coupon code component\n Then they see \"Align text\" props\n And the default value is \"left\"\n When they change the option to <option>\n Then they see the text in <position>\n Examples:\n | option | position |\n | left | left |\n | center | center |\n | right | right |\n\n @ui\n Scenario Outline: The position of the copy button can be changed\n Given a user is editing the coupon code component\n Then they see \"Style\" props\n And the default value is \"icon\"\n When they change the option to <option>\n Then they see the copy button in <position>\n Examples:\n | option | position |\n | button outside | outside the input, on the right |\n | button below | outside the input, below |\n | icon | inside the input as an icon |\n\n @minutia\n Scenario: ICU string converts to a date\n Given a user is viewing a live coupon code code component\n And the \"pendingErrorText\" has the \"{unpendDate}\" ICU string\n And the program is configured for rewards to be pending\n Then the user will see an info alert banner\n And the ICU string is converted to the unpend date\n";
|
|
14096
14296
|
|
|
14097
14297
|
const CouponCode_stories = {
|
|
14098
14298
|
title: "Components/Coupon Code",
|
|
14099
14299
|
parameters: {
|
|
14100
|
-
scenario: scenario$
|
|
14300
|
+
scenario: scenario$C,
|
|
14101
14301
|
},
|
|
14102
14302
|
};
|
|
14103
|
-
const defaultProps$
|
|
14303
|
+
const defaultProps$g = {
|
|
14104
14304
|
tooltiptext: "Copied to Clipboard",
|
|
14105
14305
|
copyString: "THANKSJANE125uv125",
|
|
14106
14306
|
open: false,
|
|
@@ -14125,43 +14325,43 @@ const TextAlignRight$3 = () => {
|
|
|
14125
14325
|
return index.h("sqm-coupon-code", { textAlign: "right" });
|
|
14126
14326
|
};
|
|
14127
14327
|
const CopyButton$3 = () => {
|
|
14128
|
-
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$
|
|
14328
|
+
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside" })));
|
|
14129
14329
|
};
|
|
14130
14330
|
const CopyButtonCustomLabel = () => {
|
|
14131
|
-
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$
|
|
14331
|
+
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", "copy-button-label": "test long custom label" })));
|
|
14132
14332
|
};
|
|
14133
14333
|
const CopyButtonBelow$3 = () => {
|
|
14134
|
-
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$
|
|
14334
|
+
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below" })));
|
|
14135
14335
|
};
|
|
14136
14336
|
const CopyButtonBelowCustomLabel = () => {
|
|
14137
|
-
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$
|
|
14337
|
+
return (index.h("sqm-coupon-code", Object.assign({}, defaultProps$g, { buttonStyle: "button-below", "copy-button-label": "test long custom label" })));
|
|
14138
14338
|
};
|
|
14139
|
-
const Loading$
|
|
14140
|
-
return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14339
|
+
const Loading$6 = () => {
|
|
14340
|
+
return index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { loading: true }));
|
|
14141
14341
|
};
|
|
14142
14342
|
const CopyButtonLoading = () => {
|
|
14143
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14343
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-outside", loading: true })));
|
|
14144
14344
|
};
|
|
14145
14345
|
const CopyButtonBelowLoading = () => {
|
|
14146
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14346
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { buttonStyle: "button-below", loading: true })));
|
|
14147
14347
|
};
|
|
14148
14348
|
const ErrorGeneric = () => {
|
|
14149
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14349
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
|
|
14150
14350
|
};
|
|
14151
14351
|
const ErrorPending = () => {
|
|
14152
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14352
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "info", error: true, errorText: "Your code will be available on April 24, 2023. Mark your calendar and come back then to redeem your reward!" })));
|
|
14153
14353
|
};
|
|
14154
14354
|
const ErrorFullfillment = () => {
|
|
14155
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14355
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue." })));
|
|
14156
14356
|
};
|
|
14157
14357
|
const ErrorCancelled = () => {
|
|
14158
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14358
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "This code has been cancelled. Please reach out to the Support team for help resolving this issue." })));
|
|
14159
14359
|
};
|
|
14160
14360
|
const ErrorExpired = () => {
|
|
14161
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14361
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "warning", error: true, errorText: "Looks like this code has expired. Please reach out to the Support team for help resolving this issue." })));
|
|
14162
14362
|
};
|
|
14163
14363
|
const ErrorRedeemed = () => {
|
|
14164
|
-
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$
|
|
14364
|
+
return (index.h(ShadowViewAddon.CouponCodeView, Object.assign({}, defaultProps$g, { errorType: "success", error: true, errorText: "Looks like you\u2019ve already redeemed this code." })));
|
|
14165
14365
|
};
|
|
14166
14366
|
|
|
14167
14367
|
const CouponCode$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -14176,7 +14376,7 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
|
|
|
14176
14376
|
CopyButtonCustomLabel: CopyButtonCustomLabel,
|
|
14177
14377
|
CopyButtonBelow: CopyButtonBelow$3,
|
|
14178
14378
|
CopyButtonBelowCustomLabel: CopyButtonBelowCustomLabel,
|
|
14179
|
-
Loading: Loading$
|
|
14379
|
+
Loading: Loading$6,
|
|
14180
14380
|
CopyButtonLoading: CopyButtonLoading,
|
|
14181
14381
|
CopyButtonBelowLoading: CopyButtonBelowLoading,
|
|
14182
14382
|
ErrorGeneric: ErrorGeneric,
|
|
@@ -14187,55 +14387,55 @@ const CouponCode$1 = /*#__PURE__*/Object.freeze({
|
|
|
14187
14387
|
ErrorRedeemed: ErrorRedeemed
|
|
14188
14388
|
});
|
|
14189
14389
|
|
|
14190
|
-
const scenario$
|
|
14390
|
+
const scenario$D = "@author:noah\n@owner:noah\n\nFeature: Logout Current User\n\n Background:\n Given a user viewing an instant access widget\n\n @motivating\n @ui\n Scenario: A user on an instant access widget\n Given the user is identified\n And the user is logged in\n Then the component identifies the user by displaying their email in an ICU string\n And the users email displayed in the ICU string using hte \"{email}\" variable\n\n @motivating\n @ui\n Scenario: Users can switch who they are identified as through a link\n Given the user is identified\n And the user is logged in\n When the user clicks the link in the component\n Then the saved user identity is emptied\n And they are sent back to the registration form to re-identify themselves\n\n @minutia\n Scenario: Logout link empties the saved User Identity\n Given a valid user identity\n And the user is viewing the \"logged-in\" template\n When they click the logout link\n Then the user identity is set to \"undefined\"\n And the user is returned to the \"logged-out\" template";
|
|
14191
14391
|
|
|
14192
14392
|
const LogoutCurrentUser_stories = {
|
|
14193
14393
|
title: "Components/Logout Current User",
|
|
14194
14394
|
parameters: {
|
|
14195
|
-
scenario: scenario$
|
|
14395
|
+
scenario: scenario$D,
|
|
14196
14396
|
},
|
|
14197
14397
|
};
|
|
14198
|
-
const defaultProps$
|
|
14398
|
+
const defaultProps$h = {
|
|
14199
14399
|
filledInEmailText: "Currently showing referral data for noah.clarke@saasquatch.com",
|
|
14200
14400
|
onSwitchClick: () => console.log("clicked"),
|
|
14201
14401
|
switchUserText: "not you?",
|
|
14202
14402
|
loading: false,
|
|
14203
14403
|
emailErrorText: "Error fetching email",
|
|
14204
14404
|
};
|
|
14205
|
-
const Default$
|
|
14206
|
-
return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$
|
|
14405
|
+
const Default$j = () => {
|
|
14406
|
+
return index.h(sqmLogoutCurrentUserView.LogoutCurrentUserView, Object.assign({}, defaultProps$h));
|
|
14207
14407
|
};
|
|
14208
14408
|
|
|
14209
14409
|
const LogoutCurrentUser = /*#__PURE__*/Object.freeze({
|
|
14210
14410
|
__proto__: null,
|
|
14211
14411
|
'default': LogoutCurrentUser_stories,
|
|
14212
|
-
Default: Default$
|
|
14412
|
+
Default: Default$j
|
|
14213
14413
|
});
|
|
14214
14414
|
|
|
14215
|
-
const scenario$
|
|
14415
|
+
const scenario$E = "@author:noah\n@owner:noah\n\nFeature: Link Button\n\n\t@ui\n\tScenario: Links can be opened in the same tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in the same tab\n\t\tAnd if the component is in an iFrame then the link is opened in the parent window not the iFrame\n\n\t@ui\n\tScenario: Links can be opened in a new tab\n\t\tWhen a user clicks the button\n\t\tThen a link opens in a new tab\n\t\tAnd if the component is in an iFrame then the link is still opened in a new tab\n\n\n\t@ui\n\tScenario: Props control the link and button text\n\t\tGiven the \"link\" prop is set to \"https://www.example.com\"\n\t\tAnd the \"buttonText\" prop is set to \"Click me!\"\n\t\tThen a button is shown with the text \"Click me!\"\n\t\tAnd when clicked the button opens https://www.example.com\n\n\t@ui\n\tScenario Outline: The button type can be set\n\t\tGiven the button type is set to <value>\n\t\tThen a <buttonType> is shown\n\t\tExamples:\n\t\t\t| value | buttonType |\n\t\t\t| <null> | primary |\n\t\t\t| default | default |\n\t\t\t| primary | primary |\n\t\t\t| success | success |\n\t\t\t| neutral | neutral |\n\t\t\t| warning | warning |\n\t\t\t| danger | danger |";
|
|
14216
14416
|
|
|
14217
14417
|
const LinkButton_stories = {
|
|
14218
14418
|
title: "Components/Link Button",
|
|
14219
14419
|
parameters: {
|
|
14220
|
-
scenario: scenario$
|
|
14420
|
+
scenario: scenario$E,
|
|
14221
14421
|
},
|
|
14222
14422
|
};
|
|
14223
|
-
const defaultProps$
|
|
14423
|
+
const defaultProps$i = {
|
|
14224
14424
|
link: "https://example.com",
|
|
14225
14425
|
openInNewTab: false,
|
|
14226
14426
|
buttonText: "Button Text",
|
|
14227
14427
|
};
|
|
14228
|
-
const Default$
|
|
14229
|
-
return index.h("sqm-link-button", Object.assign({}, defaultProps$
|
|
14428
|
+
const Default$k = () => {
|
|
14429
|
+
return index.h("sqm-link-button", Object.assign({}, defaultProps$i));
|
|
14230
14430
|
};
|
|
14231
14431
|
const OpenInNewTab = () => {
|
|
14232
|
-
return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$
|
|
14432
|
+
return (index.h("sqm-link-button", Object.assign({}, { ...defaultProps$i, openInNewTab: true })));
|
|
14233
14433
|
};
|
|
14234
14434
|
|
|
14235
14435
|
const LinkButton = /*#__PURE__*/Object.freeze({
|
|
14236
14436
|
__proto__: null,
|
|
14237
14437
|
'default': LinkButton_stories,
|
|
14238
|
-
Default: Default$
|
|
14438
|
+
Default: Default$k,
|
|
14239
14439
|
OpenInNewTab: OpenInNewTab
|
|
14240
14440
|
});
|
|
14241
14441
|
|
|
@@ -14245,7 +14445,7 @@ const CloseButton_stories = {
|
|
|
14245
14445
|
// scenario,
|
|
14246
14446
|
},
|
|
14247
14447
|
};
|
|
14248
|
-
const defaultProps$
|
|
14448
|
+
const defaultProps$j = {};
|
|
14249
14449
|
const containerStyles = {
|
|
14250
14450
|
position: "relative",
|
|
14251
14451
|
width: "500px",
|
|
@@ -14253,22 +14453,22 @@ const containerStyles = {
|
|
|
14253
14453
|
border: "1px solid black",
|
|
14254
14454
|
padding: "25px",
|
|
14255
14455
|
};
|
|
14256
|
-
const Default$
|
|
14257
|
-
return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$
|
|
14456
|
+
const Default$l = () => {
|
|
14457
|
+
return index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j));
|
|
14258
14458
|
};
|
|
14259
14459
|
const InAContainer = () => {
|
|
14260
14460
|
return (index.h("div", { style: containerStyles },
|
|
14261
|
-
index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$
|
|
14461
|
+
index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, defaultProps$j))));
|
|
14262
14462
|
};
|
|
14263
14463
|
const CustomColor$1 = () => {
|
|
14264
14464
|
return (index.h("div", { style: containerStyles },
|
|
14265
|
-
index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$
|
|
14465
|
+
index.h(sqmCloseButtonView.CloseButtonView, Object.assign({}, { ...defaultProps$j, color: "blue" }))));
|
|
14266
14466
|
};
|
|
14267
14467
|
|
|
14268
14468
|
const CloseButton = /*#__PURE__*/Object.freeze({
|
|
14269
14469
|
__proto__: null,
|
|
14270
14470
|
'default': CloseButton_stories,
|
|
14271
|
-
Default: Default$
|
|
14471
|
+
Default: Default$l,
|
|
14272
14472
|
InAContainer: InAContainer,
|
|
14273
14473
|
CustomColor: CustomColor$1
|
|
14274
14474
|
});
|
|
@@ -14458,17 +14658,17 @@ const RadioCardView = ({ title, icon, description, selected, }) => {
|
|
|
14458
14658
|
const RadioCard_stories = {
|
|
14459
14659
|
title: "Components/Radio Card",
|
|
14460
14660
|
};
|
|
14461
|
-
const defaultProps$
|
|
14661
|
+
const defaultProps$k = {
|
|
14462
14662
|
selected: false,
|
|
14463
14663
|
title: "Card Title",
|
|
14464
14664
|
description: "Description text goes here",
|
|
14465
14665
|
icon: "apple",
|
|
14466
14666
|
};
|
|
14467
14667
|
const DefaultView$1 = () => {
|
|
14468
|
-
return index.h(RadioCardView, Object.assign({}, defaultProps$
|
|
14668
|
+
return index.h(RadioCardView, Object.assign({}, defaultProps$k));
|
|
14469
14669
|
};
|
|
14470
14670
|
const Selected = () => {
|
|
14471
|
-
return index.h(RadioCardView, Object.assign({}, defaultProps$
|
|
14671
|
+
return index.h(RadioCardView, Object.assign({}, defaultProps$k, { selected: true }));
|
|
14472
14672
|
};
|
|
14473
14673
|
|
|
14474
14674
|
const RadioCard = /*#__PURE__*/Object.freeze({
|
|
@@ -14481,13 +14681,13 @@ const RadioCard = /*#__PURE__*/Object.freeze({
|
|
|
14481
14681
|
const ProgressBar_stories = {
|
|
14482
14682
|
title: "Components/Progress Bar",
|
|
14483
14683
|
};
|
|
14484
|
-
const defaultProps$
|
|
14684
|
+
const defaultProps$l = {
|
|
14485
14685
|
progress: 2,
|
|
14486
14686
|
goal: 4,
|
|
14487
14687
|
steps: true,
|
|
14488
14688
|
};
|
|
14489
14689
|
const TaxAndPayoutsProgressBar = () => {
|
|
14490
|
-
return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$
|
|
14690
|
+
return index.h(ShadowViewAddon.ProgressBar, Object.assign({}, defaultProps$l, { stageCount: 4, currentStage: 2 }));
|
|
14491
14691
|
};
|
|
14492
14692
|
|
|
14493
14693
|
const ProgressBar$1 = /*#__PURE__*/Object.freeze({
|
|
@@ -14499,7 +14699,7 @@ const ProgressBar$1 = /*#__PURE__*/Object.freeze({
|
|
|
14499
14699
|
const PayoutDetailsCard_stories = {
|
|
14500
14700
|
title: "Components/Payout Details Card",
|
|
14501
14701
|
};
|
|
14502
|
-
const Loading$
|
|
14702
|
+
const Loading$7 = () => {
|
|
14503
14703
|
return (index.h("sqm-payout-details-card", { demoData: {
|
|
14504
14704
|
states: {
|
|
14505
14705
|
loading: true,
|
|
@@ -14539,7 +14739,7 @@ const PaypalPayout = () => {
|
|
|
14539
14739
|
const PayoutDetailsCard = /*#__PURE__*/Object.freeze({
|
|
14540
14740
|
__proto__: null,
|
|
14541
14741
|
'default': PayoutDetailsCard_stories,
|
|
14542
|
-
Loading: Loading$
|
|
14742
|
+
Loading: Loading$7,
|
|
14543
14743
|
NextPayout: NextPayout,
|
|
14544
14744
|
PayoutToday: PayoutToday,
|
|
14545
14745
|
ThresholdPayout: ThresholdPayout,
|
|
@@ -15173,14 +15373,14 @@ const UseInvoiceTableCells = /*#__PURE__*/Object.freeze({
|
|
|
15173
15373
|
const WidgetEmailVerification_stories = {
|
|
15174
15374
|
title: "Components/Widget Email Verification",
|
|
15175
15375
|
};
|
|
15176
|
-
const defaultProps$
|
|
15376
|
+
const defaultProps$m = {
|
|
15177
15377
|
email: "",
|
|
15178
15378
|
error: false,
|
|
15179
15379
|
loading: false,
|
|
15180
15380
|
initialLoading: false,
|
|
15181
15381
|
sendCodeError: false,
|
|
15182
15382
|
};
|
|
15183
|
-
const Default$
|
|
15383
|
+
const Default$m = () => (index.h("sqm-email-verification", { demoData: {} }));
|
|
15184
15384
|
const EmailIsPrefilled = () => (index.h("div", null,
|
|
15185
15385
|
index.h("sqm-text", null,
|
|
15186
15386
|
index.h("h4", null, "Verify your email")),
|
|
@@ -15188,19 +15388,19 @@ const EmailIsPrefilled = () => (index.h("div", null,
|
|
|
15188
15388
|
index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
|
|
15189
15389
|
index.h("sqm-email-verification", { demoData: {
|
|
15190
15390
|
states: {
|
|
15191
|
-
...defaultProps$
|
|
15391
|
+
...defaultProps$m,
|
|
15192
15392
|
email: "test@example.com",
|
|
15193
15393
|
},
|
|
15194
15394
|
} })));
|
|
15195
|
-
const Loading$
|
|
15395
|
+
const Loading$8 = () => (index.h("sqm-email-verification", { demoData: {
|
|
15196
15396
|
states: {
|
|
15197
|
-
...defaultProps$
|
|
15397
|
+
...defaultProps$m,
|
|
15198
15398
|
initialLoading: true,
|
|
15199
15399
|
},
|
|
15200
15400
|
} }));
|
|
15201
15401
|
const SaveLoading = () => (index.h("sqm-email-verification", { demoData: {
|
|
15202
15402
|
states: {
|
|
15203
|
-
...defaultProps$
|
|
15403
|
+
...defaultProps$m,
|
|
15204
15404
|
loading: true,
|
|
15205
15405
|
},
|
|
15206
15406
|
} }));
|
|
@@ -15211,19 +15411,19 @@ const WithHeader$1 = () => (index.h("div", null,
|
|
|
15211
15411
|
index.h("sub", null, "To get your cash paid out directly to your bank account, please complete your account setup")),
|
|
15212
15412
|
index.h("sqm-email-verification", { demoData: {
|
|
15213
15413
|
states: {
|
|
15214
|
-
...defaultProps$
|
|
15414
|
+
...defaultProps$m,
|
|
15215
15415
|
email: "test@example.com",
|
|
15216
15416
|
},
|
|
15217
15417
|
} })));
|
|
15218
15418
|
const InvalidEmail = () => (index.h("sqm-email-verification", { demoData: {
|
|
15219
15419
|
states: {
|
|
15220
|
-
...defaultProps$
|
|
15420
|
+
...defaultProps$m,
|
|
15221
15421
|
error: true,
|
|
15222
15422
|
},
|
|
15223
15423
|
} }));
|
|
15224
15424
|
const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
|
|
15225
15425
|
states: {
|
|
15226
|
-
...defaultProps$
|
|
15426
|
+
...defaultProps$m,
|
|
15227
15427
|
sendCodeError: true,
|
|
15228
15428
|
},
|
|
15229
15429
|
} }));
|
|
@@ -15231,9 +15431,9 @@ const SendCodeError = () => (index.h("sqm-email-verification", { demoData: {
|
|
|
15231
15431
|
const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
|
|
15232
15432
|
__proto__: null,
|
|
15233
15433
|
'default': WidgetEmailVerification_stories,
|
|
15234
|
-
Default: Default$
|
|
15434
|
+
Default: Default$m,
|
|
15235
15435
|
EmailIsPrefilled: EmailIsPrefilled,
|
|
15236
|
-
Loading: Loading$
|
|
15436
|
+
Loading: Loading$8,
|
|
15237
15437
|
SaveLoading: SaveLoading,
|
|
15238
15438
|
WithHeader: WithHeader$1,
|
|
15239
15439
|
InvalidEmail: InvalidEmail,
|
|
@@ -15243,35 +15443,35 @@ const WidgetEmailVerification = /*#__PURE__*/Object.freeze({
|
|
|
15243
15443
|
const WidgetCodeVerification_stories = {
|
|
15244
15444
|
title: "Components/Widget Code Verification",
|
|
15245
15445
|
};
|
|
15246
|
-
const defaultProps$
|
|
15446
|
+
const defaultProps$n = {
|
|
15247
15447
|
initialiseLoading: false,
|
|
15248
15448
|
email: "testemail@example.com",
|
|
15249
15449
|
loading: false,
|
|
15250
15450
|
verifyFailed: false,
|
|
15251
15451
|
emailResent: false,
|
|
15252
15452
|
};
|
|
15253
|
-
const Default$
|
|
15453
|
+
const Default$n = () => (index.h("sqm-code-verification", { demoData: { states: defaultProps$n } }));
|
|
15254
15454
|
const InitialLoading = () => (index.h("sqm-code-verification", { demoData: {
|
|
15255
15455
|
states: {
|
|
15256
|
-
...defaultProps$
|
|
15456
|
+
...defaultProps$n,
|
|
15257
15457
|
initialiseLoading: true,
|
|
15258
15458
|
},
|
|
15259
15459
|
} }));
|
|
15260
|
-
const Loading$
|
|
15460
|
+
const Loading$9 = () => (index.h("sqm-code-verification", { demoData: {
|
|
15261
15461
|
states: {
|
|
15262
|
-
...defaultProps$
|
|
15462
|
+
...defaultProps$n,
|
|
15263
15463
|
loading: true,
|
|
15264
15464
|
},
|
|
15265
15465
|
} }));
|
|
15266
15466
|
const CodeResent = () => (index.h("sqm-code-verification", { demoData: {
|
|
15267
15467
|
states: {
|
|
15268
|
-
...defaultProps$
|
|
15468
|
+
...defaultProps$n,
|
|
15269
15469
|
emailResent: true,
|
|
15270
15470
|
},
|
|
15271
15471
|
} }));
|
|
15272
15472
|
const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
|
|
15273
15473
|
states: {
|
|
15274
|
-
...defaultProps$
|
|
15474
|
+
...defaultProps$n,
|
|
15275
15475
|
verifyFailed: true,
|
|
15276
15476
|
},
|
|
15277
15477
|
} }));
|
|
@@ -15279,9 +15479,9 @@ const VerificationFailed = () => (index.h("sqm-code-verification", { demoData: {
|
|
|
15279
15479
|
const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
|
|
15280
15480
|
__proto__: null,
|
|
15281
15481
|
'default': WidgetCodeVerification_stories,
|
|
15282
|
-
Default: Default$
|
|
15482
|
+
Default: Default$n,
|
|
15283
15483
|
InitialLoading: InitialLoading,
|
|
15284
|
-
Loading: Loading$
|
|
15484
|
+
Loading: Loading$9,
|
|
15285
15485
|
CodeResent: CodeResent,
|
|
15286
15486
|
VerificationFailed: VerificationFailed
|
|
15287
15487
|
});
|
|
@@ -15289,17 +15489,17 @@ const WidgetCodeVerification = /*#__PURE__*/Object.freeze({
|
|
|
15289
15489
|
const PayoutButtonScroll_stories = {
|
|
15290
15490
|
title: "Components/Payout Scroll Button",
|
|
15291
15491
|
};
|
|
15292
|
-
const defaultProps$
|
|
15492
|
+
const defaultProps$o = {
|
|
15293
15493
|
payoutSettingsComplete: true,
|
|
15294
15494
|
};
|
|
15295
|
-
const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$
|
|
15495
|
+
const CompletedTaxForm = () => (index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$o, payoutSettingsComplete: true } } }));
|
|
15296
15496
|
const CompletedTaxFormWithStatsContainer = () => (index.h("sqm-portal-container", { display: "flex", maxWidth: "100%", minWidth: "100%", "justify-content": "space-between", flexWrap: "nowrap" },
|
|
15297
15497
|
index.h("sqm-portal-container", { display: "flex", "max-width": "fit-content" },
|
|
15298
15498
|
index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/referralsCount" },
|
|
15299
15499
|
index.h("p", null, "Referrals")),
|
|
15300
15500
|
index.h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/payoutBalance" },
|
|
15301
15501
|
index.h("p", null, "Cash Balance"))),
|
|
15302
|
-
index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$
|
|
15502
|
+
index.h("sqm-payout-button-scroll", { demoData: { states: { ...defaultProps$o, payoutSettingsComplete: true } } })));
|
|
15303
15503
|
|
|
15304
15504
|
const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
|
|
15305
15505
|
__proto__: null,
|
|
@@ -15311,20 +15511,20 @@ const PayoutButtonScroll = /*#__PURE__*/Object.freeze({
|
|
|
15311
15511
|
const PayoutStatusAlert_stories = {
|
|
15312
15512
|
title: "Components/Payout Status Alert",
|
|
15313
15513
|
};
|
|
15314
|
-
const defaultProps$
|
|
15514
|
+
const defaultProps$p = {
|
|
15315
15515
|
error: false,
|
|
15316
15516
|
status: "INFORMATION_REQUIRED",
|
|
15317
15517
|
loading: false,
|
|
15318
15518
|
veriffLoading: false,
|
|
15319
15519
|
};
|
|
15320
|
-
const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$
|
|
15321
|
-
const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$
|
|
15322
|
-
const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$
|
|
15323
|
-
const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$
|
|
15324
|
-
const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$
|
|
15325
|
-
const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$
|
|
15326
|
-
const Loading$
|
|
15327
|
-
const Error$
|
|
15520
|
+
const InformationRequired = () => (index.h("sqm-payout-status-alert", { demoData: { states: defaultProps$p } }));
|
|
15521
|
+
const VerifyIdentity = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:REQUIRED" } } }));
|
|
15522
|
+
const VerifyIdentityRequiredInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:INTERNAL" } } }));
|
|
15523
|
+
const VerifyIdentityReviewInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:REVIEW" } } }));
|
|
15524
|
+
const VerifyIdentityFailedInternal = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "VERIFICATION:FAILED" } } }));
|
|
15525
|
+
const Hold = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, status: "HOLD" } } }));
|
|
15526
|
+
const Loading$a = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, loading: true } } }));
|
|
15527
|
+
const Error$b = () => (index.h("sqm-payout-status-alert", { demoData: { states: { ...defaultProps$p, error: true } } }));
|
|
15328
15528
|
|
|
15329
15529
|
const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
|
|
15330
15530
|
__proto__: null,
|
|
@@ -15335,16 +15535,16 @@ const PayoutStatusAlert = /*#__PURE__*/Object.freeze({
|
|
|
15335
15535
|
VerifyIdentityReviewInternal: VerifyIdentityReviewInternal,
|
|
15336
15536
|
VerifyIdentityFailedInternal: VerifyIdentityFailedInternal,
|
|
15337
15537
|
Hold: Hold,
|
|
15338
|
-
Loading: Loading$
|
|
15339
|
-
Error: Error$
|
|
15538
|
+
Loading: Loading$a,
|
|
15539
|
+
Error: Error$b
|
|
15340
15540
|
});
|
|
15341
15541
|
|
|
15342
|
-
const scenario$
|
|
15542
|
+
const scenario$F = "@author:sam\n@owner:sam\n\nFeature: Referral Codes Component\n\n A paginated display of available and used promo codes for the user to share with others\n\n @motivating\n Scenario: Promo code can be shared using various share mediums\n Given an authenticated user\n And the program has promo codes configured\n When the promo code section is loaded\n Then the promo code can be copied directly\n And the promo code can be shared using <shareMedium>\n Examples:\n | shareMedium |\n | DIRECT |\n | EMAIL |\n | FBMESSENGER |\n | WHATSAPP |\n\n @minutia\n Scenario: Clicking any of the share mediums sets the code as copied\n Given an authenticated user\n And the program has promo codes configured\n When the promo code section is loaded\n When clicking <shareMedium> button\n Then the code is marked as copied\n And the copied notification text is shown\n Examples:\n | shareMedium |\n | DIRECT |\n | EMAIL |\n | FBMESSENGER |\n | WHATSAPP |\n\n @minutia\n Scenario Outline: User is notified if the currently viewed promo code has been copied already\n Given an authenticated user\n And the program has promo codes configured\n When the promo code section is loaded\n And the code has not been copied already\n Then no notification text is displayed\n When the code is changed to one that has been copied\n Then the <notificationText> is displayed\n Examples:\n | notificationText |\n | You've copied this code before |\n | Previously Copied |\n | foo |\n\n @minutia\n Scenario Outline: Share buttons slots use the link from referral codes instead of the default query\n Given an authenticated user\n And the program has promo codes configured\n And a <shareMedium> button is a child of `<sqm-referral-codes>`\n Then the <shareMedium> button is shown\n And the link uses <promoCode>\n Examples:\n | propName | shareMedium | promoCode |\n | hideSharelink | DIRECT | PROMOCODE1 |\n | hideEmail | EMAIL | PROMOCODE1 |\n | hideFbMessenger | FBMESSENGER | PROMOCODE1 |\n | hideWhatsApp | WHATSAPP | PROMOCODE1 |\n\n @minutia\n Scenario Outline: Number of codes is displayed in the pagination component\n Given an authenticated user\n And the program has promo codes configured\n When the promo code section is loaded\n And the user has <numCodes> available\n And the user is on <currentPage>\n Then the pagination text is <paginationText>\n Examples:\n | numCodes | currentPage | paginationText |\n | 5 | 1 | 1 of 5 |\n | 5 | 2 | 2 of 5 |\n | 5 | 3 | 3 of 5 |\n | 5 | 4 | 4 of 5 |\n | 5 | 5 | 5 of 5 |\n | 1 | 1 | 1 of 1 |\n | 0 | 0 | 0 of 0 |\n\n @minutia\n Scenario: Loading state is shown when changing code page\n Given an authenticated user\n And the program has promo codes configured\n When the promo code section is loaded\n And the user has more than 1 available\n When the next button is clicked\n Then a loading state is shown\n\n\n";
|
|
15343
15543
|
|
|
15344
15544
|
const ReferralCodes_stories = {
|
|
15345
15545
|
title: "Components/Referral Codes",
|
|
15346
15546
|
parameters: {
|
|
15347
|
-
scenario: scenario$
|
|
15547
|
+
scenario: scenario$F,
|
|
15348
15548
|
},
|
|
15349
15549
|
};
|
|
15350
15550
|
const demoData = {
|
|
@@ -15398,7 +15598,7 @@ const EmptyWithCustomTextAndImage = () => {
|
|
|
15398
15598
|
shareCodes("shareCodes"),
|
|
15399
15599
|
shareButtons("shareButtons")));
|
|
15400
15600
|
};
|
|
15401
|
-
const Loading$
|
|
15601
|
+
const Loading$b = () => {
|
|
15402
15602
|
return (index.h("sqm-referral-codes", { demoData: { states: { ...demoData.states, loading: true } } },
|
|
15403
15603
|
pagination("pagination"),
|
|
15404
15604
|
shareCodes("shareCodes"),
|
|
@@ -15412,13 +15612,13 @@ const ReferralCodes$1 = /*#__PURE__*/Object.freeze({
|
|
|
15412
15612
|
WithPreviouslyCopiedCode: WithPreviouslyCopiedCode,
|
|
15413
15613
|
Empty: Empty$3,
|
|
15414
15614
|
EmptyWithCustomTextAndImage: EmptyWithCustomTextAndImage,
|
|
15415
|
-
Loading: Loading$
|
|
15615
|
+
Loading: Loading$b
|
|
15416
15616
|
});
|
|
15417
15617
|
|
|
15418
15618
|
const BaseRegistrationForm_stories = {
|
|
15419
15619
|
title: "Components/Microsite Base Registration",
|
|
15420
15620
|
};
|
|
15421
|
-
const defaultProps$
|
|
15621
|
+
const defaultProps$q = {
|
|
15422
15622
|
states: {
|
|
15423
15623
|
error: "",
|
|
15424
15624
|
},
|
|
@@ -15437,145 +15637,30 @@ const defaultProps$o = {
|
|
|
15437
15637
|
" ")),
|
|
15438
15638
|
},
|
|
15439
15639
|
};
|
|
15440
|
-
const errorProps$
|
|
15441
|
-
...defaultProps$
|
|
15640
|
+
const errorProps$a = {
|
|
15641
|
+
...defaultProps$q,
|
|
15442
15642
|
states: {
|
|
15443
15643
|
error: "Something went wrong. Please try again.",
|
|
15444
15644
|
},
|
|
15445
15645
|
};
|
|
15446
|
-
const Default$
|
|
15447
|
-
return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$
|
|
15646
|
+
const Default$o = () => {
|
|
15647
|
+
return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, defaultProps$q));
|
|
15448
15648
|
};
|
|
15449
15649
|
const EmailError = () => {
|
|
15450
|
-
return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, errorProps$
|
|
15650
|
+
return index.h(sqmBaseRegistrationFormView.BaseRegistrationFormView, Object.assign({}, errorProps$a));
|
|
15451
15651
|
};
|
|
15452
15652
|
|
|
15453
15653
|
const BaseRegistrationForm = /*#__PURE__*/Object.freeze({
|
|
15454
15654
|
__proto__: null,
|
|
15455
15655
|
'default': BaseRegistrationForm_stories,
|
|
15456
|
-
Default: Default$
|
|
15656
|
+
Default: Default$o,
|
|
15457
15657
|
EmailError: EmailError
|
|
15458
15658
|
});
|
|
15459
15659
|
|
|
15460
|
-
const PortalRegistrationForm_stories = {
|
|
15461
|
-
title: "Components/Microsite Portal Register",
|
|
15462
|
-
};
|
|
15463
|
-
const defaultProps$p = {
|
|
15464
|
-
states: {
|
|
15465
|
-
error: "",
|
|
15466
|
-
loading: false,
|
|
15467
|
-
confirmPassword: true,
|
|
15468
|
-
hideInputs: false,
|
|
15469
|
-
loginPath: "/login",
|
|
15470
|
-
},
|
|
15471
|
-
callbacks: {
|
|
15472
|
-
submit: () => console.log("Submit!"),
|
|
15473
|
-
inputFunction: () => { },
|
|
15474
|
-
},
|
|
15475
|
-
refs: {
|
|
15476
|
-
formRef: {},
|
|
15477
|
-
},
|
|
15478
|
-
content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
|
|
15479
|
-
};
|
|
15480
|
-
const errorProps$a = {
|
|
15481
|
-
states: {
|
|
15482
|
-
error: "Something went wrong. Please try again.",
|
|
15483
|
-
loading: false,
|
|
15484
|
-
confirmPassword: true,
|
|
15485
|
-
hideInputs: false,
|
|
15486
|
-
loginPath: "/login",
|
|
15487
|
-
},
|
|
15488
|
-
callbacks: {
|
|
15489
|
-
submit: () => console.log("Submit!"),
|
|
15490
|
-
inputFunction: () => { },
|
|
15491
|
-
},
|
|
15492
|
-
refs: {
|
|
15493
|
-
formRef: {},
|
|
15494
|
-
},
|
|
15495
|
-
content: {
|
|
15496
|
-
pageLabel: "Register",
|
|
15497
|
-
confirmPasswordLabel: "Confirm Password",
|
|
15498
|
-
},
|
|
15499
|
-
};
|
|
15500
|
-
const loadingProps$7 = {
|
|
15501
|
-
states: {
|
|
15502
|
-
error: "",
|
|
15503
|
-
loading: true,
|
|
15504
|
-
confirmPassword: true,
|
|
15505
|
-
hideInputs: false,
|
|
15506
|
-
loginPath: "/login",
|
|
15507
|
-
},
|
|
15508
|
-
callbacks: {
|
|
15509
|
-
submit: () => console.log("Submit!"),
|
|
15510
|
-
inputFunction: () => { },
|
|
15511
|
-
},
|
|
15512
|
-
refs: {
|
|
15513
|
-
formRef: {},
|
|
15514
|
-
},
|
|
15515
|
-
content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
|
|
15516
|
-
};
|
|
15517
|
-
const slottedProps$1 = {
|
|
15518
|
-
states: {
|
|
15519
|
-
error: "",
|
|
15520
|
-
loading: false,
|
|
15521
|
-
confirmPassword: true,
|
|
15522
|
-
hideInputs: false,
|
|
15523
|
-
loginPath: "/login",
|
|
15524
|
-
},
|
|
15525
|
-
callbacks: {
|
|
15526
|
-
submit: () => console.log("Submit!"),
|
|
15527
|
-
inputFunction: () => { },
|
|
15528
|
-
},
|
|
15529
|
-
refs: {
|
|
15530
|
-
formRef: {},
|
|
15531
|
-
},
|
|
15532
|
-
content: {
|
|
15533
|
-
pageLabel: "Register",
|
|
15534
|
-
confirmPasswordLabel: "Confirm Password",
|
|
15535
|
-
formData: (index.h("div", null,
|
|
15536
|
-
index.h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
|
|
15537
|
-
index.h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
|
|
15538
|
-
},
|
|
15539
|
-
};
|
|
15540
|
-
const Default$m = () => index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$p));
|
|
15541
|
-
const RegisterWithError$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$a)));
|
|
15542
|
-
const RegisterLoading$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$7)));
|
|
15543
|
-
const FieldsHidden$1 = () => {
|
|
15544
|
-
return (index.h("sqm-portal-register", { demoData: {
|
|
15545
|
-
states: {
|
|
15546
|
-
error: "",
|
|
15547
|
-
loading: true,
|
|
15548
|
-
registrationFormState: {},
|
|
15549
|
-
confirmPassword: true,
|
|
15550
|
-
hideInputs: true,
|
|
15551
|
-
loginPath: "/login",
|
|
15552
|
-
},
|
|
15553
|
-
} }));
|
|
15554
|
-
};
|
|
15555
|
-
const SlottedInputs$1 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, slottedProps$1)));
|
|
15556
|
-
const TermsAndConditions$3 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$p, { content: {
|
|
15557
|
-
...defaultProps$p.content,
|
|
15558
|
-
terms: (index.h("p", null,
|
|
15559
|
-
"By signing up you agree to the",
|
|
15560
|
-
" ",
|
|
15561
|
-
index.h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
|
|
15562
|
-
} })));
|
|
15563
|
-
|
|
15564
|
-
const PortalRegistrationForm = /*#__PURE__*/Object.freeze({
|
|
15565
|
-
__proto__: null,
|
|
15566
|
-
'default': PortalRegistrationForm_stories,
|
|
15567
|
-
Default: Default$m,
|
|
15568
|
-
RegisterWithError: RegisterWithError$1,
|
|
15569
|
-
RegisterLoading: RegisterLoading$1,
|
|
15570
|
-
FieldsHidden: FieldsHidden$1,
|
|
15571
|
-
SlottedInputs: SlottedInputs$1,
|
|
15572
|
-
TermsAndConditions: TermsAndConditions$3
|
|
15573
|
-
});
|
|
15574
|
-
|
|
15575
15660
|
const PortalGoogleRegistrationForm_stories = {
|
|
15576
15661
|
title: "Components/Microsite Google Register",
|
|
15577
15662
|
};
|
|
15578
|
-
const defaultProps$
|
|
15663
|
+
const defaultProps$r = {
|
|
15579
15664
|
states: {
|
|
15580
15665
|
error: "",
|
|
15581
15666
|
loading: false,
|
|
@@ -15620,7 +15705,7 @@ const defaultProps$q = {
|
|
|
15620
15705
|
},
|
|
15621
15706
|
};
|
|
15622
15707
|
const errorProps$b = {
|
|
15623
|
-
...defaultProps$
|
|
15708
|
+
...defaultProps$r,
|
|
15624
15709
|
states: {
|
|
15625
15710
|
error: "Something went wrong. Please try again.",
|
|
15626
15711
|
loading: false,
|
|
@@ -15636,7 +15721,7 @@ const errorProps$b = {
|
|
|
15636
15721
|
},
|
|
15637
15722
|
};
|
|
15638
15723
|
const loadingProps$8 = {
|
|
15639
|
-
...defaultProps$
|
|
15724
|
+
...defaultProps$r,
|
|
15640
15725
|
states: {
|
|
15641
15726
|
error: "",
|
|
15642
15727
|
loading: true,
|
|
@@ -15651,11 +15736,11 @@ const loadingProps$8 = {
|
|
|
15651
15736
|
},
|
|
15652
15737
|
},
|
|
15653
15738
|
};
|
|
15654
|
-
const Default$
|
|
15739
|
+
const Default$p = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r)));
|
|
15655
15740
|
const RegisterWithError$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, errorProps$b)));
|
|
15656
15741
|
const RegisterLoading$2 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, loadingProps$8)));
|
|
15657
|
-
const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$
|
|
15658
|
-
...defaultProps$
|
|
15742
|
+
const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.PortalRegistrationFormView, Object.assign({}, defaultProps$r, { content: {
|
|
15743
|
+
...defaultProps$r.content,
|
|
15659
15744
|
terms: (index.h("p", null,
|
|
15660
15745
|
"By signing up you agree to the",
|
|
15661
15746
|
" ",
|
|
@@ -15665,7 +15750,7 @@ const TermsAndConditions$4 = () => (index.h(sqmPortalRegistrationFormView.Portal
|
|
|
15665
15750
|
const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
|
|
15666
15751
|
__proto__: null,
|
|
15667
15752
|
'default': PortalGoogleRegistrationForm_stories,
|
|
15668
|
-
Default: Default$
|
|
15753
|
+
Default: Default$p,
|
|
15669
15754
|
RegisterWithError: RegisterWithError$2,
|
|
15670
15755
|
RegisterLoading: RegisterLoading$2,
|
|
15671
15756
|
TermsAndConditions: TermsAndConditions$4
|
|
@@ -15683,7 +15768,7 @@ const PortalGoogleRegistrationFormStories = /*#__PURE__*/Object.freeze({
|
|
|
15683
15768
|
*
|
|
15684
15769
|
*/
|
|
15685
15770
|
//
|
|
15686
|
-
const Default$
|
|
15771
|
+
const Default$q = `
|
|
15687
15772
|
// No CSS
|
|
15688
15773
|
`;
|
|
15689
15774
|
const Orangey = `
|
|
@@ -15717,7 +15802,7 @@ const Klip = `
|
|
|
15717
15802
|
|
|
15718
15803
|
const Themes = /*#__PURE__*/Object.freeze({
|
|
15719
15804
|
__proto__: null,
|
|
15720
|
-
Default: Default$
|
|
15805
|
+
Default: Default$q,
|
|
15721
15806
|
Orangey: Orangey,
|
|
15722
15807
|
Netflix: Netflix,
|
|
15723
15808
|
SaaSquatchCorporate: SaaSquatchCorporate,
|
|
@@ -18362,6 +18447,7 @@ const stories = [
|
|
|
18362
18447
|
ReferralIframe$1,
|
|
18363
18448
|
NameFields$1,
|
|
18364
18449
|
CheckboxField,
|
|
18450
|
+
MarketingEmailsCheckbox,
|
|
18365
18451
|
DropdownField,
|
|
18366
18452
|
InputField,
|
|
18367
18453
|
RewardExchangeList,
|
|
@@ -18397,6 +18483,8 @@ const stories = [
|
|
|
18397
18483
|
TaxFormSlots,
|
|
18398
18484
|
PayoutDetailsCard,
|
|
18399
18485
|
BankingInfoForm,
|
|
18486
|
+
PortalRegistrationForm,
|
|
18487
|
+
ChangeMarketing,
|
|
18400
18488
|
BaseRegistrationForm,
|
|
18401
18489
|
PortalRegistrationForm,
|
|
18402
18490
|
PortalGoogleRegistrationFormStories,
|