@transferwise/components 0.0.0-experimental-923b424 → 0.0.0-experimental-9c67aa6

package/build/es/no-polyfill/listItem/ListItem.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","action","className","title","description","as"];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 classNames from"classnames";import Body from"../body/Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ListItem=function(a){var b=a.media,c=a.action,d=a.className,e=a.title,f=a.description,g=a.as,h=void 0===g?"li":g,i=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs(h,_objectSpread(_objectSpread({className:classNames("list-item d-flex flex-row align-items-center p-y-2",{className:!!d})},i),{},{children:[b?b:null,/*#__PURE__*/_jsxs("div",{className:classNames("d-flex flex-column",{"m-l-2":!!b,"m-r-2":!!c}),children:[/*#__PURE__*/_jsx(Body,{type:"body-default",className:"text-secondary m-b-0",children:e}),f&&/*#__PURE__*/_jsx(Body,{type:"body-large",className:"text-primary m-b-0",children:f})]}),/*#__PURE__*/_jsx("div",{className:"m-l-auto",children:c})]}))};export default ListItem;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","action","className","title","value","isContainerAligned","as"];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 classNames from"classnames";import Body from"../body/Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ListItem=function(a){var b=a.media,c=a.action,d=a.className,e=a.title,f=a.value,g=a.isContainerAligned,h=a.as,i=void 0===h?"li":h,j=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs(i,_objectSpread(_objectSpread({className:classNames("list-item d-flex align-items-center p-y-2",{"p-x-2":!g,className:d})},j),{},{children:[b?b:null,/*#__PURE__*/_jsxs("div",{className:classNames("d-flex flex-column",{"p-l-2":!!b,"p-r-2":!!c}),children:[/*#__PURE__*/_jsx(Body,{type:"body-default",className:"text-secondary m-b-0",children:e}),f&&/*#__PURE__*/_jsx(Body,{type:"body-large",className:"text-primary m-b-0",children:f})]}),c?/*#__PURE__*/_jsx("div",{className:"list-item__action m-l-auto",children:c}):null]}))};export default ListItem;

package/build/es/no-polyfill/listItem/ListItem.spec.js

@@ -1 +1 @@
-import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _regeneratorRuntime from"@babel/runtime/regenerator";import"@testing-library/jest-dom";import ActionButton from"../actionButton/ActionButton";import{render,screen,within}from"../test-utils";import ListItem from".";import{jsx as _jsx}from"react/jsx-runtime";describe("ListItem",function(){it("shows the title and description",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",description:"Some description",as:"li"})),b.next=3,a();case 3:c=b.sent,expect(c).toHaveClass("list-item"),expect(within(c).getByText("Some title")).toBeInTheDocument(),expect(within(c).getByText("Some description")).toBeInTheDocument();case 7:case"end":return b.stop();}},b)}))),it("shows an action",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c,d;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Account number",description:"123",action:/*#__PURE__*/_jsx(ActionButton,{children:"Copy"})})),b.next=3,a();case 3:return c=b.sent,b.next=6,within(c).findByRole("button",{name:"Copy"});case 6:d=b.sent,expect(d).toBeInTheDocument();case 8:case"end":return b.stop();}},b)}))),it("shows media icon",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",description:"Some desctiption",media:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:"icon"})})),b.next=3,a();case 3:c=b.sent,expect(within(c).getByAltText("icon")).toBeInTheDocument();case 5:case"end":return b.stop();}},b)})));var a=/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.abrupt("return",screen.findByRole("listitem"));case 1:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()});
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _regeneratorRuntime from"@babel/runtime/regenerator";import"@testing-library/jest-dom";import ActionButton from"../actionButton/ActionButton";import{render,screen,within}from"../test-utils";import ListItem from".";import{jsx as _jsx}from"react/jsx-runtime";describe("ListItem",function(){it("shows the title and description",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",value:"Some description",as:"li"})),b.next=3,a();case 3:c=b.sent,expect(c).toHaveClass("list-item"),expect(within(c).getByText("Some title")).toBeInTheDocument(),expect(within(c).getByText("Some description")).toBeInTheDocument();case 7:case"end":return b.stop();}},b)}))),it("shows an action",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c,d;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Account number",value:"123",action:/*#__PURE__*/_jsx(ActionButton,{children:"Copy"})})),b.next=3,a();case 3:return c=b.sent,b.next=6,within(c).findByRole("button",{name:"Copy"});case 6:d=b.sent,expect(d).toBeInTheDocument();case 8:case"end":return b.stop();}},b)}))),it("shows media icon",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",value:"Some desctiption",media:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:"icon"})})),b.next=3,a();case 3:c=b.sent,expect(within(c).getByAltText("icon")).toBeInTheDocument();case 5:case"end":return b.stop();}},b)})));var a=/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.abrupt("return",screen.findByRole("listitem"));case 1:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()});

package/build/es/no-polyfill/listItem/ListItem.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","description"];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}/* eslint-disable react/jsx-child-element-spacing */import{action}from"@storybook/addon-actions";import{Documents}from"@transferwise/icons";import ActionButton from"../actionButton/ActionButton";import Avatar from"../avatar";import Badge from"../badge";import Info from"../info";import ListItem from".";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:ListItem,title:"Other/ListItem",tags:["autodocs"]};var Template=function(a){var b=a.title,c=void 0===b?"Wise":b,d=a.description,e=void 0===d?"We\u2019re building the world\u2019s most international account":d,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(ListItem,_objectSpread({title:c,description:e},f))};export var Basic=function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(ListItem,{title:"Wise",description:"We\u2019re building the world's most international account"})})};export var Variants=function(){return/*#__PURE__*/_jsxs("div",{className:"w-100",children:[/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"With Icon Avatar"}),/*#__PURE__*/_jsx(Template,{media:/*#__PURE__*/_jsx(Avatar,{children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"With Contact Avatar"}),/*#__PURE__*/_jsx(Template,{title:"Sandra Pepper",description:"Personal account",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"With Avatar and Action"}),/*#__PURE__*/_jsx(Template,{title:"Account holder",description:"Sandra Pepper",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})}),action:/*#__PURE__*/_jsx(ActionButton,{children:"Share details"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text Only List"}),/*#__PURE__*/_jsxs("ul",{style:{paddingLeft:0},children:[/*#__PURE__*/_jsx(Template,{title:"Sort code",description:"23-14-71"}),/*#__PURE__*/_jsx(Template,{title:"Account number",description:"12345678"})]})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text With Action Button"}),/*#__PURE__*/_jsx(Template,{title:"SWIFT/BIC",description:"\u2022\u2022\u2022 \u2022\u2022\u2022",action:/*#__PURE__*/_jsx(ActionButton,{onClick:function onClick(){return action("clicked")},children:"Reveal"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text With Other Action"}),/*#__PURE__*/_jsx(Template,{title:"Account number",description:"123456789",action:/*#__PURE__*/_jsx("button",{type:"button",style:{background:"none",border:0},onClick:function onClick(){return action("clicked")},children:/*#__PURE__*/_jsx(Documents,{size:"24"})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text With Info Action"}),/*#__PURE__*/_jsx(Template,{title:"Routing number",description:"987654",action:/*#__PURE__*/_jsx(Info,{size:"lg","aria-label":"More information",content:"Use this routing number to receive ACH and Wire transfers."})})]})]})};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","value"];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}/* eslint-disable react/jsx-child-element-spacing */import{action}from"@storybook/addon-actions";import{Documents}from"@transferwise/icons";import ActionButton from"../actionButton/ActionButton";import Avatar from"../avatar";import Badge from"../badge";import Info from"../info";import Title from"../title/Title";import ListItem from".";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:ListItem,title:"Other/ListItem",tags:["autodocs"]};var Template=function(a){var b=a.title,c=void 0===b?"Wise":b,d=a.value,e=void 0===d?"We\u2019re building the world\u2019s most international account":d,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(ListItem,_objectSpread({title:c,value:e},f))};export var Basic=function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(ListItem,{title:"Wise",value:"We\u2019re building the world's most international account"})})};export var Variants=function(){return/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Icon Avatar"}),/*#__PURE__*/_jsx(Template,{media:/*#__PURE__*/_jsx(Avatar,{children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Contact Avatar"}),/*#__PURE__*/_jsx(Template,{title:"Sandra Pepper",value:"Personal account",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Avatar and Action"}),/*#__PURE__*/_jsx(Template,{title:"Account holder",value:"Sandra Pepper",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})}),action:/*#__PURE__*/_jsx(ActionButton,{children:"Share details"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text Only List"}),/*#__PURE__*/_jsxs("ul",{style:{paddingLeft:0},children:[/*#__PURE__*/_jsx(Template,{title:"Sort code",value:"23-14-71"}),/*#__PURE__*/_jsx(Template,{title:"Account number",value:"12345678"})]})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Action Button"}),/*#__PURE__*/_jsx(Template,{title:"SWIFT/BIC",value:"\u2022\u2022\u2022 \u2022\u2022\u2022",action:/*#__PURE__*/_jsx(ActionButton,{onClick:function onClick(){return action("clicked")},children:"Reveal"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Other Action"}),/*#__PURE__*/_jsx(Template,{title:"Account number",value:"123456789",action:/*#__PURE__*/_jsx("button",{type:"button",style:{background:"none",border:0},onClick:function onClick(){return action("clicked")},children:/*#__PURE__*/_jsx(Documents,{size:"24"})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Info Action"}),/*#__PURE__*/_jsx(Template,{title:"Routing number",value:"987654",action:/*#__PURE__*/_jsx(Info,{size:"lg","aria-label":"More information",content:"Use this routing number to receive ACH and Wire transfers."})})]})]})};

package/build/es/polyfill/listItem/ListItem.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","action","className","title","description","as"];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"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.object.keys.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";import classNames from"classnames";import Body from"../body/Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ListItem=function(a){var b=a.media,c=a.action,d=a.className,e=a.title,f=a.description,g=a.as,h=void 0===g?"li":g,i=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs(h,_objectSpread(_objectSpread({className:classNames("list-item d-flex flex-row align-items-center p-y-2",{className:!!d})},i),{},{children:[b?b:null,/*#__PURE__*/_jsxs("div",{className:classNames("d-flex flex-column",{"m-l-2":!!b,"m-r-2":!!c}),children:[/*#__PURE__*/_jsx(Body,{type:"body-default",className:"text-secondary m-b-0",children:e}),f&&/*#__PURE__*/_jsx(Body,{type:"body-large",className:"text-primary m-b-0",children:f})]}),/*#__PURE__*/_jsx("div",{className:"m-l-auto",children:c})]}))};export default ListItem;
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["media","action","className","title","value","isContainerAligned","as"];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 classNames from"classnames";import Body from"../body/Body";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ListItem=function(a){var b=a.media,c=a.action,d=a.className,e=a.title,f=a.value,g=a.isContainerAligned,h=a.as,i=void 0===h?"li":h,j=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsxs(i,_objectSpread(_objectSpread({className:classNames("list-item d-flex align-items-center p-y-2",{"p-x-2":!g,className:d})},j),{},{children:[b?b:null,/*#__PURE__*/_jsxs("div",{className:classNames("d-flex flex-column",{"p-l-2":!!b,"p-r-2":!!c}),children:[/*#__PURE__*/_jsx(Body,{type:"body-default",className:"text-secondary m-b-0",children:e}),f&&/*#__PURE__*/_jsx(Body,{type:"body-large",className:"text-primary m-b-0",children:f})]}),c?/*#__PURE__*/_jsx("div",{className:"list-item__action m-l-auto",children:c}):null]}))};export default ListItem;

package/build/es/polyfill/listItem/ListItem.spec.js

@@ -1 +1 @@
-import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _regeneratorRuntime from"@babel/runtime/regenerator";import"@testing-library/jest-dom";import ActionButton from"../actionButton/ActionButton";import{render,screen,within}from"../test-utils";import ListItem from".";import{jsx as _jsx}from"react/jsx-runtime";describe("ListItem",function(){it("shows the title and description",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",description:"Some description",as:"li"})),b.next=3,a();case 3:c=b.sent,expect(c).toHaveClass("list-item"),expect(within(c).getByText("Some title")).toBeInTheDocument(),expect(within(c).getByText("Some description")).toBeInTheDocument();case 7:case"end":return b.stop();}},b)}))),it("shows an action",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c,d;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Account number",description:"123",action:/*#__PURE__*/_jsx(ActionButton,{children:"Copy"})})),b.next=3,a();case 3:return c=b.sent,b.next=6,within(c).findByRole("button",{name:"Copy"});case 6:d=b.sent,expect(d).toBeInTheDocument();case 8:case"end":return b.stop();}},b)}))),it("shows media icon",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",description:"Some desctiption",media:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:"icon"})})),b.next=3,a();case 3:c=b.sent,expect(within(c).getByAltText("icon")).toBeInTheDocument();case 5:case"end":return b.stop();}},b)})));var a=/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.abrupt("return",screen.findByRole("listitem"));case 1:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()});
+import _asyncToGenerator from"@babel/runtime/helpers/asyncToGenerator";import _regeneratorRuntime from"@babel/runtime/regenerator";import"@testing-library/jest-dom";import ActionButton from"../actionButton/ActionButton";import{render,screen,within}from"../test-utils";import ListItem from".";import{jsx as _jsx}from"react/jsx-runtime";describe("ListItem",function(){it("shows the title and description",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",value:"Some description",as:"li"})),b.next=3,a();case 3:c=b.sent,expect(c).toHaveClass("list-item"),expect(within(c).getByText("Some title")).toBeInTheDocument(),expect(within(c).getByText("Some description")).toBeInTheDocument();case 7:case"end":return b.stop();}},b)}))),it("shows an action",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c,d;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Account number",value:"123",action:/*#__PURE__*/_jsx(ActionButton,{children:"Copy"})})),b.next=3,a();case 3:return c=b.sent,b.next=6,within(c).findByRole("button",{name:"Copy"});case 6:d=b.sent,expect(d).toBeInTheDocument();case 8:case"end":return b.stop();}},b)}))),it("shows media icon",/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function b(){var c;return _regeneratorRuntime.wrap(function(b){for(;;)switch(b.prev=b.next){case 0:return render(/*#__PURE__*/_jsx(ListItem,{title:"Some title",value:"Some desctiption",media:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:"icon"})})),b.next=3,a();case 3:c=b.sent,expect(within(c).getByAltText("icon")).toBeInTheDocument();case 5:case"end":return b.stop();}},b)})));var a=/*#__PURE__*/function(){var a=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function a(){return _regeneratorRuntime.wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.abrupt("return",screen.findByRole("listitem"));case 1:case"end":return a.stop();}},a)}));return function(){return a.apply(this,arguments)}}()});

package/build/es/polyfill/listItem/ListItem.story.js

@@ -1 +1 @@
-import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","description"];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"core-js/modules/es.symbol.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.object.keys.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";/* eslint-disable react/jsx-child-element-spacing */import{action}from"@storybook/addon-actions";import{Documents}from"@transferwise/icons";import ActionButton from"../actionButton/ActionButton";import Avatar from"../avatar";import Badge from"../badge";import Info from"../info";import ListItem from".";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:ListItem,title:"Other/ListItem",tags:["autodocs"]};var Template=function(a){var b=a.title,c=void 0===b?"Wise":b,d=a.description,e=void 0===d?"We\u2019re building the world\u2019s most international account":d,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(ListItem,_objectSpread({title:c,description:e},f))};export var Basic=function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(ListItem,{title:"Wise",description:"We\u2019re building the world's most international account"})})};export var Variants=function(){return/*#__PURE__*/_jsxs("div",{className:"w-100",children:[/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"With Icon Avatar"}),/*#__PURE__*/_jsx(Template,{media:/*#__PURE__*/_jsx(Avatar,{children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"With Contact Avatar"}),/*#__PURE__*/_jsx(Template,{title:"Sandra Pepper",description:"Personal account",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"With Avatar and Action"}),/*#__PURE__*/_jsx(Template,{title:"Account holder",description:"Sandra Pepper",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})}),action:/*#__PURE__*/_jsx(ActionButton,{children:"Share details"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text Only List"}),/*#__PURE__*/_jsxs("ul",{style:{paddingLeft:0},children:[/*#__PURE__*/_jsx(Template,{title:"Sort code",description:"23-14-71"}),/*#__PURE__*/_jsx(Template,{title:"Account number",description:"12345678"})]})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text With Action Button"}),/*#__PURE__*/_jsx(Template,{title:"SWIFT/BIC",description:"\u2022\u2022\u2022 \u2022\u2022\u2022",action:/*#__PURE__*/_jsx(ActionButton,{onClick:function onClick(){return action("clicked")},children:"Reveal"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text With Other Action"}),/*#__PURE__*/_jsx(Template,{title:"Account number",description:"123456789",action:/*#__PURE__*/_jsx("button",{type:"button",style:{background:"none",border:0},onClick:function onClick(){return action("clicked")},children:/*#__PURE__*/_jsx(Documents,{size:"24"})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Text With Info Action"}),/*#__PURE__*/_jsx(Template,{title:"Routing number",description:"987654",action:/*#__PURE__*/_jsx(Info,{size:"lg","aria-label":"More information",content:"Use this routing number to receive ACH and Wire transfers."})})]})]})};
+import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["title","value"];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}/* eslint-disable react/jsx-child-element-spacing */import{action}from"@storybook/addon-actions";import{Documents}from"@transferwise/icons";import ActionButton from"../actionButton/ActionButton";import Avatar from"../avatar";import Badge from"../badge";import Info from"../info";import Title from"../title/Title";import ListItem from".";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:ListItem,title:"Other/ListItem",tags:["autodocs"]};var Template=function(a){var b=a.title,c=void 0===b?"Wise":b,d=a.value,e=void 0===d?"We\u2019re building the world\u2019s most international account":d,f=_objectWithoutProperties(a,_excluded);return/*#__PURE__*/_jsx(ListItem,_objectSpread({title:c,value:e},f))};export var Basic=function(){return/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(ListItem,{title:"Wise",value:"We\u2019re building the world's most international account"})})};export var Variants=function(){return/*#__PURE__*/_jsxs("div",{children:[/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Icon Avatar"}),/*#__PURE__*/_jsx(Template,{media:/*#__PURE__*/_jsx(Avatar,{children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Contact Avatar"}),/*#__PURE__*/_jsx(Template,{title:"Sandra Pepper",value:"Personal account",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"With Avatar and Action"}),/*#__PURE__*/_jsx(Template,{title:"Account holder",value:"Sandra Pepper",media:/*#__PURE__*/_jsx(Badge,{badge:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/brand/fast_flag_badge_personal.svg",alt:"",height:"24px",width:"24px"}),children:/*#__PURE__*/_jsx(Avatar,{type:"initials",size:"md",children:/*#__PURE__*/_jsx("span",{"aria-hidden":!0,children:"SP"})})}),action:/*#__PURE__*/_jsx(ActionButton,{children:"Share details"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text Only List"}),/*#__PURE__*/_jsxs("ul",{style:{paddingLeft:0},children:[/*#__PURE__*/_jsx(Template,{title:"Sort code",value:"23-14-71"}),/*#__PURE__*/_jsx(Template,{title:"Account number",value:"12345678"})]})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Action Button"}),/*#__PURE__*/_jsx(Template,{title:"SWIFT/BIC",value:"\u2022\u2022\u2022 \u2022\u2022\u2022",action:/*#__PURE__*/_jsx(ActionButton,{onClick:function onClick(){return action("clicked")},children:"Reveal"})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Other Action"}),/*#__PURE__*/_jsx(Template,{title:"Account number",value:"123456789",action:/*#__PURE__*/_jsx("button",{type:"button",style:{background:"none",border:0},onClick:function onClick(){return action("clicked")},children:/*#__PURE__*/_jsx(Documents,{size:"24"})})})]}),/*#__PURE__*/_jsxs("div",{className:"m-t-4 m-b-2",children:[/*#__PURE__*/_jsx(Title,{type:"title-body",children:"Text With Info Action"}),/*#__PURE__*/_jsx(Template,{title:"Routing number",value:"987654",action:/*#__PURE__*/_jsx(Info,{size:"lg","aria-label":"More information",content:"Use this routing number to receive ACH and Wire transfers."})})]})]})};