@transferwise/components 45.8.0 → 45.9.1

package/build/es/no-polyfill/info/Info.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{userEvent,within}from"@storybook/testing-library";import{linesWithNewLines,lorem10,storyConfig}from"../test-utils";import Info,{InfoPresentation}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Info,title:"Dialogs/Info",args:{"aria-label":"Click here for more details",title:"Fast transfer hint",content:lorem10},render:function render(a){return/*#__PURE__*/_jsxs("p",{children:[/*#__PURE__*/_jsx("span",{children:"Fast transfer"})," ",/*#__PURE__*/_jsx(Info,_objectSpread({},a))]})}};export var Basic=storyConfig({},{variants:["default","dark","rtl"]});export var OpenedPopover={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}};export var OpenedPopoverMobile=storyConfig(OpenedPopover,{variants:["mobile"]});export var OpenedModal=_objectSpread(_objectSpread({},OpenedPopover),{},{args:{presentation:InfoPresentation.MODAL}});export var OpenedModalWithLinebreaks=_objectSpread(_objectSpread({},OpenedModal),{},{args:{presentation:InfoPresentation.MODAL,content:linesWithNewLines}});export var OpenedModalMobile=storyConfig(OpenedModal,{variants:["mobile"]});export var OpenedModalMobileWithLinebreaks=storyConfig(OpenedModalWithLinebreaks,{variants:["mobile"]});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{userEvent,within}from"@storybook/testing-library";import{lorem10,storyConfig}from"../test-utils";import Info,{InfoPresentation}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Info,title:"Dialogs/Info",args:{"aria-label":"Click here for more details",title:"Fast transfer hint",content:lorem10},render:function render(a){return/*#__PURE__*/_jsxs("p",{children:[/*#__PURE__*/_jsx("span",{children:"Fast transfer"})," ",/*#__PURE__*/_jsx(Info,_objectSpread({},a))]})}};export var Basic=storyConfig({},{variants:["default","dark","rtl"]});export var OpenedPopover={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}};export var OpenedPopoverMobile=storyConfig(OpenedPopover,{variants:["mobile"]});export var OpenedModal=_objectSpread(_objectSpread({},OpenedPopover),{},{args:{presentation:InfoPresentation.MODAL}});export var OpenedModalMobile=storyConfig(OpenedModal,{variants:["mobile"]});

package/build/es/no-polyfill/modal/Modal.story.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{useState}from"react";import{Button,Modal}from"..";import{Scroll}from"../common";import{linesWithNewLines,lorem10,lorem1000,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Dialogs/Modal",args:{size:"md",position:"center",open:!0},parameters:{chromatic:{delay:2e3}}};export var Basic={args:{title:"Title",body:lorem10,scroll:Scroll.VIEWPORT,footer:/*#__PURE__*/_jsx(Button,{block:!0,children:"Action"})},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
-var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("Modal closed")()}}))]})}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var WithNewLines={args:{title:lorem10,body:linesWithNewLines,scroll:Scroll.VIEWPORT}};export var WithNewLinesMobile=storyConfig(WithNewLines,{variants:["mobile"]});export var ContentScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.CONTENT}};export var ContentScrollMobile=storyConfig(ContentScroll,{variants:["mobile"]});export var ViewportScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.VIEWPORT}};export var ViewportScrollMobile=storyConfig(ViewportScroll,{variants:["mobile"]});export var WithoutTitle={args:{body:lorem1000,scroll:Scroll.CONTENT}};export var WithoutTitleMobile=storyConfig(WithoutTitle,{variants:["mobile"]});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{useState}from"react";import{Button,Modal}from"..";import{Scroll}from"../common";import{lorem10,lorem1000,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Dialogs/Modal",args:{size:"md",position:"center",open:!0},parameters:{chromatic:{delay:2e3}}};export var Basic={args:{title:"Title",body:lorem10,scroll:Scroll.VIEWPORT,footer:/*#__PURE__*/_jsx(Button,{block:!0,children:"Action"})},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
+var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("Modal closed")()}}))]})}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var ContentScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.CONTENT}};export var ContentScrollMobile=storyConfig(ContentScroll,{variants:["mobile"]});export var ViewportScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.VIEWPORT}};export var ViewportScrollMobile=storyConfig(ViewportScroll,{variants:["mobile"]});export var WithoutTitle={args:{body:lorem1000,scroll:Scroll.CONTENT}};export var WithoutTitleMobile=storyConfig(WithoutTitle,{variants:["mobile"]});

package/build/es/no-polyfill/nudge/Nudge.js

@@ -1 +1,3 @@
-import{Illustration}from"@wise/art";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import Body from"../body";import{Typography}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var Media={GLOBE:"globe",LOCK:"lock",WALLET:"wallet",GEAR:"gear","INVITE-LETTER":"invite-letter","PERSONAL-CARD":"personal-card","BUSINESS-CARD":"business-card"};var Nudge=function(a){var b=a.media,c=a.mediaName,d=a.title,e=a.link,f=a.href,g=a.onClick,h=a.onDismiss,i=a.id,j=a.className,k=useTheme(),l=k.isModern;return/*#__PURE__*/_jsxs("div",{className:classNames("wds-nudge",j),id:i,children:[l?!!c&&/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:/*#__PURE__*/_jsx(Illustration,{name:c,className:classNames("wds-nudge-media-".concat(c)),size:"small",disablePadding:!0})}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:b}),/*#__PURE__*/_jsxs("div",{className:"wds-nudge-container",children:[/*#__PURE__*/_jsxs("div",{className:"wds-nudge-content",children:[l?/*#__PURE__*/_jsx(Body,{type:Typography.BODY_LARGE,className:classNames("wds-nudge-body"),children:d}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-title",children:d}),e&&/*#__PURE__*/_jsx(Link,{href:f,type:Typography.LINK_LARGE,className:"wds-nudge-link",onClick:g,children:e})]}),h&&/*#__PURE__*/_jsx(CloseButton,{className:"wds-nudge-control",size:"sm",onClick:h})]})]})};Nudge.propTypes={media:PropTypes.node,mediaName:PropTypes.oneOf(["globe","lock","wallet","gear","invite-letter","personal-card","business-card"]),title:PropTypes.node.isRequired,link:PropTypes.node,href:PropTypes.string,onClick:PropTypes.func,onDismiss:PropTypes.func,id:PropTypes.string,className:PropTypes.string},Nudge.Media=Media,Nudge.defaultProps={id:null,className:null,onClick:void 0,onDismiss:void 0};export default Nudge;
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import{Illustration}from"@wise/art";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import{useEffect,useState}from"react";import Body from"../body";import{Typography}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
+import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var STORAGE_NAME="dismissedNudges";export var Media={GLOBE:"globe",LOCK:"lock",WALLET:"wallet",GEAR:"gear","INVITE-LETTER":"invite-letter","PERSONAL-CARD":"personal-card","BUSINESS-CARD":"business-card"};var getLocalStorage=function(){try{var a=localStorage.getItem(STORAGE_NAME);if(a){var b=JSON.parse(a);if(Array.isArray(b))return b}// eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+}catch(a){}return[]},Nudge=function(a){var b=a.media,c=a.mediaName,d=a.title,e=a.link,f=a.href,g=a.onClick,h=a.onDismiss,i=a.persistDismissal,j=a.id,k=a.className,l=useTheme(),m=l.isModern,n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useState(!1),s=_slicedToArray(r,2),t=s[0],u=s[1];return useEffect(function(){if(i&&j){var a=getLocalStorage();a&&a.find(function(a){return a===j})&&q(!0)}u(!0)},[j,i]),i&&(p||!t)?null:/*#__PURE__*/_jsxs("div",{className:classNames("wds-nudge",k),id:j,children:[m?!!c&&/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:/*#__PURE__*/_jsx(Illustration,{name:c,className:classNames("wds-nudge-media-".concat(c)),size:"small",disablePadding:!0,alt:""})}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:b}),/*#__PURE__*/_jsxs("div",{className:"wds-nudge-container",children:[/*#__PURE__*/_jsxs("div",{className:"wds-nudge-content",children:[m?/*#__PURE__*/_jsx(Body,{type:Typography.BODY_LARGE,className:classNames("wds-nudge-body"),children:d}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-title",children:d}),e&&/*#__PURE__*/_jsx(Link,{href:f,type:Typography.LINK_LARGE,className:"wds-nudge-link",onClick:g,children:e})]}),h||i?/*#__PURE__*/_jsx(CloseButton,{className:"wds-nudge-control",size:"sm",onClick:function handleOnDismiss(){var a=getLocalStorage();if(i&&j){try{localStorage.setItem(STORAGE_NAME,JSON.stringify([].concat(_toConsumableArray(a?a:[]),[j])))}catch(a){}q(!0)}h&&h()}}):null]})]})};export default Nudge;

package/build/es/no-polyfill/nudge/Nudge.spec.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,fireEvent,cleanup,screen}from"../test-utils";import Nudge from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Nudge",function(){var a={media:/*#__PURE__*/_jsx("span",{role:"img","aria-label":"Party popper emoji",children:"\uD83C\uDF89"}),title:"A nudge title",link:"CTA",href:"#",onClick:jest.fn(),onDismiss:jest.fn()};afterEach(cleanup),it("renders a media element",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByRole("img");expect(b).toBeInTheDocument()}),it("renders a title",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByText("A nudge title");expect(b).toBeInTheDocument()}),it("renders a link to the passed href",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByText("CTA");expect(b).toBeInTheDocument(),expect(b).toHaveAttribute("href",a.href)}),it("calls onClick prop when the link is clicked",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByText("CTA");fireEvent.click(b),expect(a.onClick).toHaveBeenCalledTimes(1)}),it("calls onDismiss prop when close button is clicked",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByLabelText("Close");fireEvent.click(b),expect(a.onDismiss).toHaveBeenCalledTimes(1)}),it("adds the passed id to the parent container",function(){var b;render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"nudge-id"})));var c=null===(b=screen.getByRole("img").parentElement)||void 0===b?void 0:b.parentElement;expect(null===c||void 0===c?void 0:c.id).toBe("nudge-id")}),it("adds the passed className to the parent container's className",function(){var b;render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{className:"happy-nudge"})));var c=null===(b=screen.getByRole("img").parentElement)||void 0===b?void 0:b.parentElement;expect(c).toHaveClass("happy-nudge")}),describe("Nudge persistance",function(){beforeEach(function(){jest.resetAllMocks()}),it("does NOT render a nudge if localStorage has been set with the id of the nudge",function(){jest.spyOn(window.localStorage.__proto__,"getItem").mockReturnValue("[\"CAKE\",\"TEST\"]"),render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"TEST",persistDismissal:!0}))),expect(screen.queryByText("A nudge title")).not.toBeInTheDocument()}),it("shows a nudge if localStorage has been set with a different id for a different nudge",function(){jest.spyOn(window.localStorage.__proto__,"getItem").mockReturnValue("[\"BANANA\"]"),render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"TEST",persistDismissal:!0}))),expect(screen.getByText("A nudge title")).toBeInTheDocument()}),it("calls local storage with updated dismissed nudges value",function(){jest.spyOn(window.localStorage.__proto__,"getItem").mockReturnValue("[\"BANANA\"]");var b=jest.spyOn(window.localStorage.__proto__,"setItem");render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"TEST",persistDismissal:!0}))),expect(screen.getByText("A nudge title")).toBeInTheDocument();var c=screen.getByLabelText("Close");fireEvent.click(c),expect(a.onDismiss).toHaveBeenCalledTimes(1),expect(b).toHaveBeenCalledWith("dismissedNudges","[\"BANANA\",\"TEST\"]")})})});

package/build/es/no-polyfill/nudge/Nudge.story.js

@@ -0,0 +1 @@
+import{action}from"@storybook/addon-actions";import{Nudge}from"..";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Nudge,title:"Feedback/Nudge"};export var Default=function(){return/*#__PURE__*/_jsxs("div",{className:"d-flex flex-column",children:[/*#__PURE__*/_jsx(Nudge,{mediaName:"globe",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"lock",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"wallet",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"gear",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"invite-letter",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"personal-card",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"business-card",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})};export var DefaultWithPersist=function(){return/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Nudge,{mediaName:"globe",title:"Text that is no longer than two lines.",id:"NEPTUNE_TEST_COMPONENT",className:"m-y-2",persistDismissal:!0,onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"globe",title:"Text that is no longer than two lines2.",id:"NEPTUNE_TEST_COMPONENT_2",className:"m-y-2",persistDismissal:!0,onClick:action("action clicked"),onDismiss:action("dismissed")})]})};

package/build/es/polyfill/info/Info.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{userEvent,within}from"@storybook/testing-library";import{linesWithNewLines,lorem10,storyConfig}from"../test-utils";import Info,{InfoPresentation}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Info,title:"Dialogs/Info",args:{"aria-label":"Click here for more details",title:"Fast transfer hint",content:lorem10},render:function render(a){return/*#__PURE__*/_jsxs("p",{children:[/*#__PURE__*/_jsx("span",{children:"Fast transfer"})," ",/*#__PURE__*/_jsx(Info,_objectSpread({},a))]})}};export var Basic=storyConfig({},{variants:["default","dark","rtl"]});export var OpenedPopover={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}};export var OpenedPopoverMobile=storyConfig(OpenedPopover,{variants:["mobile"]});export var OpenedModal=_objectSpread(_objectSpread({},OpenedPopover),{},{args:{presentation:InfoPresentation.MODAL}});export var OpenedModalWithLinebreaks=_objectSpread(_objectSpread({},OpenedModal),{},{args:{presentation:InfoPresentation.MODAL,content:linesWithNewLines}});export var OpenedModalMobile=storyConfig(OpenedModal,{variants:["mobile"]});export var OpenedModalMobileWithLinebreaks=storyConfig(OpenedModalWithLinebreaks,{variants:["mobile"]});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{userEvent,within}from"@storybook/testing-library";import{lorem10,storyConfig}from"../test-utils";import Info,{InfoPresentation}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Info,title:"Dialogs/Info",args:{"aria-label":"Click here for more details",title:"Fast transfer hint",content:lorem10},render:function render(a){return/*#__PURE__*/_jsxs("p",{children:[/*#__PURE__*/_jsx("span",{children:"Fast transfer"})," ",/*#__PURE__*/_jsx(Info,_objectSpread({},a))]})}};export var Basic=storyConfig({},{variants:["default","dark","rtl"]});export var OpenedPopover={parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}};export var OpenedPopoverMobile=storyConfig(OpenedPopover,{variants:["mobile"]});export var OpenedModal=_objectSpread(_objectSpread({},OpenedPopover),{},{args:{presentation:InfoPresentation.MODAL}});export var OpenedModalMobile=storyConfig(OpenedModal,{variants:["mobile"]});

package/build/es/polyfill/modal/Modal.story.js

@@ -1,2 +1,2 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{useState}from"react";import{Button,Modal}from"..";import{Scroll}from"../common";import{linesWithNewLines,lorem10,lorem1000,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Dialogs/Modal",args:{size:"md",position:"center",open:!0},parameters:{chromatic:{delay:2e3}}};export var Basic={args:{title:"Title",body:lorem10,scroll:Scroll.VIEWPORT,footer:/*#__PURE__*/_jsx(Button,{block:!0,children:"Action"})},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
-var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("Modal closed")()}}))]})}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var WithNewLines={args:{title:lorem10,body:linesWithNewLines,scroll:Scroll.VIEWPORT}};export var WithNewLinesMobile=storyConfig(WithNewLines,{variants:["mobile"]});export var ContentScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.CONTENT}};export var ContentScrollMobile=storyConfig(ContentScroll,{variants:["mobile"]});export var ViewportScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.VIEWPORT}};export var ViewportScrollMobile=storyConfig(ViewportScroll,{variants:["mobile"]});export var WithoutTitle={args:{body:lorem1000,scroll:Scroll.CONTENT}};export var WithoutTitleMobile=storyConfig(WithoutTitle,{variants:["mobile"]});
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{action}from"@storybook/addon-actions";import{useState}from"react";import{Button,Modal}from"..";import{Scroll}from"../common";import{lorem10,lorem1000,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Modal,title:"Dialogs/Modal",args:{size:"md",position:"center",open:!0},parameters:{chromatic:{delay:2e3}}};export var Basic={args:{title:"Title",body:lorem10,scroll:Scroll.VIEWPORT,footer:/*#__PURE__*/_jsx(Button,{block:!0,children:"Action"})},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
+var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("Modal closed")()}}))]})}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var ContentScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.CONTENT}};export var ContentScrollMobile=storyConfig(ContentScroll,{variants:["mobile"]});export var ViewportScroll={args:{title:lorem10,body:lorem1000,scroll:Scroll.VIEWPORT}};export var ViewportScrollMobile=storyConfig(ViewportScroll,{variants:["mobile"]});export var WithoutTitle={args:{body:lorem1000,scroll:Scroll.CONTENT}};export var WithoutTitleMobile=storyConfig(WithoutTitle,{variants:["mobile"]});

package/build/es/polyfill/nudge/Nudge.js

@@ -1 +1,3 @@
-import"core-js/modules/es.string.link.js";import{Illustration}from"@wise/art";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import PropTypes from"prop-types";import Body from"../body";import{Typography}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var Media={GLOBE:"globe",LOCK:"lock",WALLET:"wallet",GEAR:"gear","INVITE-LETTER":"invite-letter","PERSONAL-CARD":"personal-card","BUSINESS-CARD":"business-card"};var Nudge=function(a){var b=a.media,c=a.mediaName,d=a.title,e=a.link,f=a.href,g=a.onClick,h=a.onDismiss,i=a.id,j=a.className,k=useTheme(),l=k.isModern;return/*#__PURE__*/_jsxs("div",{className:classNames("wds-nudge",j),id:i,children:[l?!!c&&/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:/*#__PURE__*/_jsx(Illustration,{name:c,className:classNames("wds-nudge-media-".concat(c)),size:"small",disablePadding:!0})}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:b}),/*#__PURE__*/_jsxs("div",{className:"wds-nudge-container",children:[/*#__PURE__*/_jsxs("div",{className:"wds-nudge-content",children:[l?/*#__PURE__*/_jsx(Body,{type:Typography.BODY_LARGE,className:classNames("wds-nudge-body"),children:d}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-title",children:d}),e&&/*#__PURE__*/_jsx(Link,{href:f,type:Typography.LINK_LARGE,className:"wds-nudge-link",onClick:g,children:e})]}),h&&/*#__PURE__*/_jsx(CloseButton,{className:"wds-nudge-control",size:"sm",onClick:h})]})]})};Nudge.propTypes={media:PropTypes.node,mediaName:PropTypes.oneOf(["globe","lock","wallet","gear","invite-letter","personal-card","business-card"]),title:PropTypes.node.isRequired,link:PropTypes.node,href:PropTypes.string,onClick:PropTypes.func,onDismiss:PropTypes.func,id:PropTypes.string,className:PropTypes.string},Nudge.Media=Media,Nudge.defaultProps={id:null,className:null,onClick:void 0,onDismiss:void 0};export default Nudge;
+import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"core-js/modules/es.string.link.js";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.object.to-string.js";import{Illustration}from"@wise/art";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import{useEffect,useState}from"react";import Body from"../body";import{Typography}from"../common";import{CloseButton}from"../common/closeButton";import Link from"../link";// WARNING: Changing this will cause nudges to reappear wherever persist nudge is used and privacy team will need to be updated too
+import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export var STORAGE_NAME="dismissedNudges";export var Media={GLOBE:"globe",LOCK:"lock",WALLET:"wallet",GEAR:"gear","INVITE-LETTER":"invite-letter","PERSONAL-CARD":"personal-card","BUSINESS-CARD":"business-card"};var getLocalStorage=function(){try{var a=localStorage.getItem(STORAGE_NAME);if(a){var b=JSON.parse(a);if(Array.isArray(b))return b}// eslint-disable-next-line unicorn/prefer-optional-catch-binding, no-empty
+}catch(a){}return[]},Nudge=function(a){var b=a.media,c=a.mediaName,d=a.title,e=a.link,f=a.href,g=a.onClick,h=a.onDismiss,i=a.persistDismissal,j=a.id,k=a.className,l=useTheme(),m=l.isModern,n=useState(!1),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useState(!1),s=_slicedToArray(r,2),t=s[0],u=s[1];return useEffect(function(){if(i&&j){var a=getLocalStorage();a&&a.find(function(a){return a===j})&&q(!0)}u(!0)},[j,i]),i&&(p||!t)?null:/*#__PURE__*/_jsxs("div",{className:classNames("wds-nudge",k),id:j,children:[m?!!c&&/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:/*#__PURE__*/_jsx(Illustration,{name:c,className:classNames("wds-nudge-media-".concat(c)),size:"small",disablePadding:!0,alt:""})}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-media",children:b}),/*#__PURE__*/_jsxs("div",{className:"wds-nudge-container",children:[/*#__PURE__*/_jsxs("div",{className:"wds-nudge-content",children:[m?/*#__PURE__*/_jsx(Body,{type:Typography.BODY_LARGE,className:classNames("wds-nudge-body"),children:d}):/*#__PURE__*/_jsx("div",{className:"wds-nudge-title",children:d}),e&&/*#__PURE__*/_jsx(Link,{href:f,type:Typography.LINK_LARGE,className:"wds-nudge-link",onClick:g,children:e})]}),h||i?/*#__PURE__*/_jsx(CloseButton,{className:"wds-nudge-control",size:"sm",onClick:function handleOnDismiss(){var a=getLocalStorage();if(i&&j){try{localStorage.setItem(STORAGE_NAME,JSON.stringify([].concat(_toConsumableArray(a?a:[]),[j])))}catch(a){}q(!0)}h&&h()}}):null]})]})};export default Nudge;

package/build/es/polyfill/nudge/Nudge.spec.js

@@ -0,0 +1 @@
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{render,fireEvent,cleanup,screen}from"../test-utils";import Nudge from".";import{jsx as _jsx}from"react/jsx-runtime";describe("Nudge",function(){var a={media:/*#__PURE__*/_jsx("span",{role:"img","aria-label":"Party popper emoji",children:"\uD83C\uDF89"}),title:"A nudge title",link:"CTA",href:"#",onClick:jest.fn(),onDismiss:jest.fn()};afterEach(cleanup),it("renders a media element",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByRole("img");expect(b).toBeInTheDocument()}),it("renders a title",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByText("A nudge title");expect(b).toBeInTheDocument()}),it("renders a link to the passed href",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByText("CTA");expect(b).toBeInTheDocument(),expect(b).toHaveAttribute("href",a.href)}),it("calls onClick prop when the link is clicked",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByText("CTA");fireEvent.click(b),expect(a.onClick).toHaveBeenCalledTimes(1)}),it("calls onDismiss prop when close button is clicked",function(){render(/*#__PURE__*/_jsx(Nudge,_objectSpread({},a)));var b=screen.getByLabelText("Close");fireEvent.click(b),expect(a.onDismiss).toHaveBeenCalledTimes(1)}),it("adds the passed id to the parent container",function(){var b;render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"nudge-id"})));var c=null===(b=screen.getByRole("img").parentElement)||void 0===b?void 0:b.parentElement;expect(null===c||void 0===c?void 0:c.id).toBe("nudge-id")}),it("adds the passed className to the parent container's className",function(){var b;render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{className:"happy-nudge"})));var c=null===(b=screen.getByRole("img").parentElement)||void 0===b?void 0:b.parentElement;expect(c).toHaveClass("happy-nudge")}),describe("Nudge persistance",function(){beforeEach(function(){jest.resetAllMocks()}),it("does NOT render a nudge if localStorage has been set with the id of the nudge",function(){jest.spyOn(window.localStorage.__proto__,"getItem").mockReturnValue("[\"CAKE\",\"TEST\"]"),render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"TEST",persistDismissal:!0}))),expect(screen.queryByText("A nudge title")).not.toBeInTheDocument()}),it("shows a nudge if localStorage has been set with a different id for a different nudge",function(){jest.spyOn(window.localStorage.__proto__,"getItem").mockReturnValue("[\"BANANA\"]"),render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"TEST",persistDismissal:!0}))),expect(screen.getByText("A nudge title")).toBeInTheDocument()}),it("calls local storage with updated dismissed nudges value",function(){jest.spyOn(window.localStorage.__proto__,"getItem").mockReturnValue("[\"BANANA\"]");var b=jest.spyOn(window.localStorage.__proto__,"setItem");render(/*#__PURE__*/_jsx(Nudge,_objectSpread(_objectSpread({},a),{},{id:"TEST",persistDismissal:!0}))),expect(screen.getByText("A nudge title")).toBeInTheDocument();var c=screen.getByLabelText("Close");fireEvent.click(c),expect(a.onDismiss).toHaveBeenCalledTimes(1),expect(b).toHaveBeenCalledWith("dismissedNudges","[\"BANANA\",\"TEST\"]")})})});

package/build/es/polyfill/nudge/Nudge.story.js

@@ -0,0 +1 @@
+import{action}from"@storybook/addon-actions";import{Nudge}from"..";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Nudge,title:"Feedback/Nudge"};export var Default=function(){return/*#__PURE__*/_jsxs("div",{className:"d-flex flex-column",children:[/*#__PURE__*/_jsx(Nudge,{mediaName:"globe",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"lock",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"wallet",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"gear",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"invite-letter",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"personal-card",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"business-card",className:"m-b-2",title:"Text that is no longer than two lines.",link:"Link",href:"#",onClick:action("action clicked"),onDismiss:action("dismissed")})]})};export var DefaultWithPersist=function(){return/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsx(Nudge,{mediaName:"globe",title:"Text that is no longer than two lines.",id:"NEPTUNE_TEST_COMPONENT",className:"m-y-2",persistDismissal:!0,onClick:action("action clicked"),onDismiss:action("dismissed")}),/*#__PURE__*/_jsx(Nudge,{mediaName:"globe",title:"Text that is no longer than two lines2.",id:"NEPTUNE_TEST_COMPONENT_2",className:"m-y-2",persistDismissal:!0,onClick:action("action clicked"),onDismiss:action("dismissed")})]})};