@transferwise/components 45.7.1 → 45.9.0
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/build/es/no-polyfill/nudge/Nudge.js +3 -1
- package/build/es/no-polyfill/nudge/Nudge.spec.js +1 -0
- package/build/es/no-polyfill/nudge/Nudge.story.js +1 -0
- package/build/es/polyfill/nudge/Nudge.js +3 -1
- package/build/es/polyfill/nudge/Nudge.spec.js +1 -0
- package/build/es/polyfill/nudge/Nudge.story.js +1 -0
- package/build/main.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/styles/nudge/Nudge.css +1 -1
- package/build/types/nudge/Nudge.d.ts +40 -20
- package/build/types/nudge/Nudge.spec.d.ts +1 -0
- package/build/types/nudge/Nudge.story.d.ts +8 -0
- package/build/types/nudge/index.d.ts +1 -1
- package/build/umd/no-polyfill/main.js +1 -1
- package/build/umd/polyfill/main.js +1 -1
- package/package.json +1 -1
- package/scripts/generate-type-declarations.js +0 -1
|
@@ -1 +1,3 @@
|
|
|
1
|
-
import{Illustration}from"@wise/art";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import
|
|
1
|
+
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
|
|
2
|
+
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
|
|
3
|
+
}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;
|
|
@@ -0,0 +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{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\"]")})})});
|
|
@@ -0,0 +1 @@
|
|
|
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")})]})};
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
import"core-js/modules/es.string.link.js";import{Illustration}from"@wise/art";import{useTheme}from"@wise/components-theming";import classNames from"classnames";import
|
|
1
|
+
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
|
|
2
|
+
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
|
|
3
|
+
}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;
|
|
@@ -0,0 +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{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\"]")})})});
|
|
@@ -0,0 +1 @@
|
|
|
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")})]})};
|