@transferwise/components 45.2.0 → 45.4.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.
Files changed (70) hide show
  1. package/build/es/no-polyfill/accordion/Accordion.story.js +1 -0
  2. package/build/es/no-polyfill/actionButton/ActionButton.story.js +1 -1
  3. package/build/es/no-polyfill/avatar/Avatar.js +1 -1
  4. package/build/es/no-polyfill/avatar/Avatar.story.js +1 -1
  5. package/build/es/no-polyfill/avatar/colors/avatarColorTestCases.json +402 -0
  6. package/build/es/no-polyfill/avatar/colors/colors.js +10 -0
  7. package/build/es/no-polyfill/avatar/colors/index.js +1 -0
  8. package/build/es/no-polyfill/avatarWrapper/AvatarWrapper.js +1 -1
  9. package/build/es/no-polyfill/button/Button.story.js +1 -0
  10. package/build/es/no-polyfill/checkbox/Checkbox.story.js +1 -0
  11. package/build/es/no-polyfill/common/bottomSheet/BottomSheet.story.js +2 -0
  12. package/build/es/no-polyfill/dateInput/DateInput.story.js +1 -0
  13. package/build/es/no-polyfill/info/Info.story.js +1 -0
  14. package/build/es/no-polyfill/modal/Modal.story.js +2 -1
  15. package/build/es/no-polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
  16. package/build/es/no-polyfill/phoneNumberInput/utils/excludeCountries/excludeCountries.js +8 -0
  17. package/build/es/no-polyfill/phoneNumberInput/utils/excludeCountries/index.js +1 -0
  18. package/build/es/no-polyfill/phoneNumberInput/utils/index.js +1 -1
  19. package/build/es/no-polyfill/select/option/Option.js +1 -1
  20. package/build/es/no-polyfill/tooltip/Tooltip.story.js +1 -1
  21. package/build/es/polyfill/accordion/Accordion.story.js +1 -0
  22. package/build/es/polyfill/actionButton/ActionButton.story.js +1 -1
  23. package/build/es/polyfill/avatar/Avatar.js +1 -1
  24. package/build/es/polyfill/avatar/Avatar.story.js +1 -1
  25. package/build/es/polyfill/avatar/colors/avatarColorTestCases.json +402 -0
  26. package/build/es/polyfill/avatar/colors/colors.js +10 -0
  27. package/build/es/polyfill/avatar/colors/index.js +1 -0
  28. package/build/es/polyfill/avatarWrapper/AvatarWrapper.js +1 -1
  29. package/build/es/polyfill/button/Button.story.js +1 -0
  30. package/build/es/polyfill/checkbox/Checkbox.story.js +1 -0
  31. package/build/es/polyfill/common/bottomSheet/BottomSheet.story.js +2 -0
  32. package/build/es/polyfill/dateInput/DateInput.story.js +1 -0
  33. package/build/es/polyfill/info/Info.story.js +1 -0
  34. package/build/es/polyfill/modal/Modal.story.js +2 -1
  35. package/build/es/polyfill/phoneNumberInput/PhoneNumberInput.js +1 -1
  36. package/build/es/polyfill/phoneNumberInput/utils/excludeCountries/excludeCountries.js +8 -0
  37. package/build/es/polyfill/phoneNumberInput/utils/excludeCountries/index.js +1 -0
  38. package/build/es/polyfill/phoneNumberInput/utils/index.js +1 -1
  39. package/build/es/polyfill/select/option/Option.js +1 -1
  40. package/build/es/polyfill/tooltip/Tooltip.story.js +1 -1
  41. package/build/main.css +1 -1
  42. package/build/styles/avatar/Avatar.css +1 -1
  43. package/build/styles/main.css +1 -1
  44. package/build/styles/snackbar/Snackbar.css +1 -1
  45. package/build/types/accordion/Accordion.story.d.ts +46 -0
  46. package/build/types/avatar/Avatar.d.ts +18 -22
  47. package/build/types/avatar/Avatar.story.d.ts +2 -31
  48. package/build/types/avatar/colors/colors.d.ts +3 -0
  49. package/build/types/avatar/colors/index.d.ts +1 -0
  50. package/build/types/avatar/index.d.ts +2 -2
  51. package/build/types/avatarWrapper/AvatarWrapper.d.ts +1 -0
  52. package/build/types/avatarWrapper/AvatarWrapper.story.d.ts +4 -1
  53. package/build/types/button/Button.story.d.ts +4586 -0
  54. package/build/types/checkbox/Checkbox.story.d.ts +54 -0
  55. package/build/types/common/bottomSheet/BottomSheet.story.d.ts +29 -0
  56. package/build/types/dateInput/DateInput.story.d.ts +71 -0
  57. package/build/types/info/Info.story.d.ts +39 -0
  58. package/build/types/modal/Modal.story.d.ts +20 -3
  59. package/build/types/phoneNumberInput/PhoneNumberInput.d.ts +4 -0
  60. package/build/types/phoneNumberInput/utils/excludeCountries/excludeCountries.d.ts +1 -0
  61. package/build/types/phoneNumberInput/utils/excludeCountries/index.d.ts +1 -0
  62. package/build/types/phoneNumberInput/utils/index.d.ts +1 -0
  63. package/build/types/test-utils/VariantDecorator.d.ts +18 -0
  64. package/build/types/test-utils/story-config.d.ts +18 -50
  65. package/build/types/tooltip/Tooltip.story.d.ts +17 -9
  66. package/build/umd/no-polyfill/main.js +1 -1
  67. package/build/umd/polyfill/main.js +1 -1
  68. package/package.json +4 -3
  69. package/scripts/generate-type-declarations.js +0 -1
  70. package/build/types/test-utils/GlobalsDecorator.d.ts +0 -4
@@ -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{FastFlag as FastFlagIcon}from"@transferwise/icons";import{Scroll,Size}from"../common";import Modal from"../modal";import{lorem10,lorem40,storyConfig}from"../test-utils";import Accordion from"./Accordion";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:Accordion,title:"Content/Accordion",args:{items:[{title:"Item 1",content:lorem10,id:"Item 1"},{title:"Item 2",content:lorem40,id:"Item 2"},{title:"Item 3",content:lorem10,id:"Item 3"},{title:"Item 4",content:lorem10,id:"Item 4",icon:/*#__PURE__*/_jsx(FastFlagIcon,{size:24})}]}};export var Basic={args:{indexOpen:0}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var Variants=storyConfig({args:{indexOpen:0}},{variants:["default","dark","rtl"]});export var Multiple={render:function render(a){var b=a.items;return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]]})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]],indexOpen:0})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:b}))]})}};export var InModal={parameters:{chromatic:{delay:1e3}},render:function render(a){var b=a.items;return/*#__PURE__*/_jsx(Modal,{body:/*#__PURE__*/_jsxs("div",{className:"p-a-1",children:[/*#__PURE__*/_jsx("h3",{className:"m-t-2 m-b-4 text-xs-center",children:"Large transfer tips"}),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]]})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:[b[0]],indexOpen:0})),/*#__PURE__*/_jsx(Accordion,_objectSpread(_objectSpread({},a),{},{items:b}))]}),scroll:Scroll.CONTENT,size:Size.LARGE,open:!0,footer:/*#__PURE__*/_jsx("div",{className:"p-a-3 text-xs-center",children:/*#__PURE__*/_jsx("a",{href:"/large-amounts",children:"Learn more"})}),onClose:function onClose(){}})}};export var InModalMobile=storyConfig(InModal,{variants:["mobile"]});
@@ -1 +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{Settings}from"@transferwise/icons";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(ActionButton,_objectSpread(_objectSpread({},a),{},{children:"Button label"}))})}};export var WithIcon={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs(ActionButton,_objectSpread(_objectSpread({},a),{},{children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),"Button label"]}))})}};export var Disabled={render:WithIcon.render,args:{disabled:!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{Settings}from"@transferwise/icons";import{storyConfig}from"../test-utils/story-config";import ActionButton from"./ActionButton";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:ActionButton,title:"Actions/ActionButton",tags:["autodocs"]};export var Basic={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsx(ActionButton,_objectSpread(_objectSpread({},a),{},{children:"Button label"}))})}};export var WithIcon={render:function render(a){return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs(ActionButton,_objectSpread(_objectSpread({},a),{},{children:[/*#__PURE__*/_jsx(Settings,{className:"m-r-1"}),"Button label"]}))})}};export var Disabled=storyConfig({render:WithIcon.render,args:{disabled:!0}},{variants:["default","dark","rtl","mobile"]});
@@ -1 +1 @@
1
- import classnames from"classnames";import PropTypes from"prop-types";import{Size,Theme}from"../common";import{AvatarType}from"./avatarTypes";import{jsx as _jsx}from"react/jsx-runtime";var Avatar=function(a){var b=a.backgroundColor,c=a.children,d=a.className,e=a.outlined,f=a.size,g=a.theme,h=a.type;return/*#__PURE__*/_jsx("div",{className:classnames("tw-avatar",d,"tw-avatar--".concat(f),"tw-avatar--".concat(h),"tw-avatar--".concat(g),{"tw-avatar--outlined":e,"np-text-title-body":h===AvatarType.INITIALS}),children:/*#__PURE__*/_jsx("div",{className:"tw-avatar__content",style:{backgroundColor:b||void 0},children:c})})};Avatar.propTypes={backgroundColor:PropTypes.string,children:PropTypes.node,className:PropTypes.string,outlined:PropTypes.bool,size:PropTypes.oneOf(["sm","md","lg",40,56]),theme:PropTypes.oneOf(["light","dark"]),type:PropTypes.oneOf(["thumbnail","icon","emoji","initials"])},Avatar.defaultProps={backgroundColor:null,children:null,className:null,outlined:!1,size:Size.MEDIUM,theme:Theme.LIGHT,type:AvatarType.THUMBNAIL};export default Avatar;
1
+ import classnames from"classnames";import{useMemo}from"react";import{Theme}from"../common";import{getAvatarColorFromSeed}from"./colors";import{jsx as _jsx}from"react/jsx-runtime";var backwardsCompatibleSize=function(a){return"sm"===a?24:"md"===a?48:"lg"===a?72:a},Avatar=function(a){var b=a.backgroundColor,c=void 0===b?null:b,d=a.backgroundColorSeed,e=void 0===d?null:d,f=a.children,g=void 0===f?null:f,h=a.className,i=void 0===h?null:h,j=a.outlined,k=a.size,l=void 0===k?48:k,m=a.theme,n=void 0===m?Theme.LIGHT:m,o=a.type,p=void 0===o?"thumbnail":o,q=useMemo(function(){return!c&&e?"var(".concat(getAvatarColorFromSeed(e),")"):void 0},[c,e]),r=backwardsCompatibleSize(l);return/*#__PURE__*/_jsx("div",{className:classnames("tw-avatar",i,"tw-avatar--".concat(r),"tw-avatar--".concat(p),{"tw-avatar--outlined":void 0!==j&&j,"tw-avatar--branded":!!q,"np-text-title-body":"initials"===p}),children:/*#__PURE__*/_jsx("div",{className:"tw-avatar__content",style:{backgroundColor:c||q},children:g})})};export default Avatar;
@@ -1 +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{Size,Theme}from"../common";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};export var Emoji={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:"\u2708\uFE0F"}))},args:{type:AvatarType.EMOJI,size:Size.MEDIUM,theme:Theme.LIGHT}};export var Flag={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/flags/square/gbp.svg",alt:""})}))},args:{type:AvatarType.THUMBNAIL,size:Size.MEDIUM,outlined:!0}};export var Table={render:function render(a){var b=a.theme,c="https://wise.com/public-resources/assets/flags/square/gbp.svg";return/*#__PURE__*/_jsx("div",{style:{padding:"50px",backgroundColor:b===Theme.DARK?"#37517e":"white"},children:/*#__PURE__*/_jsxs("table",{style:{background:"transparent"},children:[/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,theme:b,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,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__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\u2708\uFE0F.png",alt:""})})})]}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:44,height:44},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:36,height:36},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:32,height:32},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:26,height:26},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,theme:b,backgroundColor:"#D6F5E3",children:/*#__PURE__*/_jsx("img",{style:{width:16,height:16},src:"https://wise.com/public-resources/assets/balances/savings-emoji/google/\uD83C\uDF31.png",alt:""})})})]})]})})}};
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*as wiseIcons from"@transferwise/icons";import{Size}from"../common";import{storyConfig}from"../test-utils";import Avatar,{AvatarType}from".";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:Avatar,title:"Content/Avatar",tags:["autodocs"]};export var Emoji={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:"\u2708\uFE0F"}))},args:{type:AvatarType.EMOJI,size:Size.MEDIUM}};export var Flag={render:function render(a){return/*#__PURE__*/_jsx(Avatar,_objectSpread(_objectSpread({},a),{},{children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/public-resources/assets/flags/square/gbp.svg",alt:""})}))},args:{type:AvatarType.THUMBNAIL,size:Size.MEDIUM,outlined:!0}};export var Table=storyConfig({render:function render(){var a="https://wise.com/web-art/assets/flags/gbp.svg",b="#d6f5e3",c="\u2708\uFE0F",d="GN",e=wiseIcons.Check;return/*#__PURE__*/_jsx("div",{children:/*#__PURE__*/_jsxs("table",{children:["Outlined",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:"https://wise.com/web-art/assets/flags/jpy.svg",alt:""})})})]}),"Image URL",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:a,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:c})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:c})})]}),/*#__PURE__*/_jsx("div",{style:{paddingBottom:"20px"},children:/*#__PURE__*/_jsx("span",{style:{position:"absolute"},children:"Custom background and icon"})}),/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:b,children:/*#__PURE__*/_jsx(e,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:d})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:d})})]})]})})}},{variants:["default","dark","rtl"]});
@@ -0,0 +1,402 @@
1
+ [
2
+ {
3
+ "key": "053ac3c5-278a-449d-7c3e-42f20e8dd15d",
4
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
5
+ },
6
+ {
7
+ "key": "06aa058e-7ea7-4c6a-3318-da6b8fac6459",
8
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
9
+ },
10
+ {
11
+ "key": "0e9126e0-55f1-46b3-45a2-ecdb2ac58fae",
12
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
13
+ },
14
+ {
15
+ "key": "0e91272d-dfdf-44b9-885f-0e8f790f62b8",
16
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
17
+ },
18
+ {
19
+ "key": "0ea282b8-6240-4b8c-bbd8-8eea0d399408",
20
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
21
+ },
22
+ {
23
+ "key": "055330d2-231c-41f0-81d1-b609a6641d5c",
24
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
25
+ },
26
+ {
27
+ "key": "05ecbcc5-a7c8-43ce-7c13-87cee7104f7c",
28
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
29
+ },
30
+ {
31
+ "key": "05efbda4-5864-4764-b8d0-ca72746b6131",
32
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
33
+ },
34
+ {
35
+ "key": "05f17ce4-6c4f-4bc8-a46b-0dc9199b7ff7",
36
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
37
+ },
38
+ {
39
+ "key": "05f24097-b778-4e5d-c64f-219cbb8f3647",
40
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
41
+ },
42
+ {
43
+ "key": "05f4ab72-5f4b-40c1-77d5-c484ef507a3c",
44
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
45
+ },
46
+ {
47
+ "key": "05f4bb8d-958f-4b4c-8e48-3c2416b2e3bf",
48
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
49
+ },
50
+ {
51
+ "key": "05fa0101-6bed-4a05-b739-73481a260945",
52
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
53
+ },
54
+ {
55
+ "key": "05fa9193-2130-4e71-3e09-d99358cafb4c",
56
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
57
+ },
58
+ {
59
+ "key": "05faf014-f776-4ecc-df7a-c5fc834e4c4c",
60
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
61
+ },
62
+ {
63
+ "key": "05fc0932-eadd-43d6-256a-dcc0cde1370e",
64
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
65
+ },
66
+ {
67
+ "key": "06001a5b-197b-4ea1-72f9-e3d5305034d9",
68
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
69
+ },
70
+ {
71
+ "key": "06007098-aea2-4347-fe9f-3c44b69b1ce9",
72
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
73
+ },
74
+ {
75
+ "key": "0600725e-5f79-4f68-34ba-a5da5f15f92f",
76
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
77
+ },
78
+ {
79
+ "key": "066bfd1f-beb2-48dd-1611-0558276a2f2e",
80
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
81
+ },
82
+ {
83
+ "key": "066c6429-ad06-41eb-eba1-f79dc3912aeb",
84
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
85
+ },
86
+ {
87
+ "key": "06e8866a-a6e0-4241-268c-de9189182fab",
88
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
89
+ },
90
+ {
91
+ "key": "08119c02-d271-430e-53c1-ef1330889f9e",
92
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
93
+ },
94
+ {
95
+ "key": "0e84b8ae-7a05-4ff4-319e-8ae5e035190e",
96
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
97
+ },
98
+ {
99
+ "key": "0565f2aa-64f1-4ed6-8a93-a42654b9af9b",
100
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
101
+ },
102
+ {
103
+ "key": "0e913a98-5607-4f97-a0e9-fe7a9baa5a4e",
104
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
105
+ },
106
+ {
107
+ "key": "056ee99f-b0c0-4a21-7ab8-bae0822d431e",
108
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
109
+ },
110
+ {
111
+ "key": "060068ab-020a-4709-cee7-64594e871314",
112
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
113
+ },
114
+ {
115
+ "key": "07384a3a-9266-4742-1f26-95dbe371a6a1",
116
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
117
+ },
118
+ {
119
+ "key": "09103922-9228-4a65-230c-54952e0c070e",
120
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
121
+ },
122
+ {
123
+ "key": "0a2ada5d-4e7a-465e-7687-11c1cab00694",
124
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
125
+ },
126
+ {
127
+ "key": "0dc651ab-ce36-48fb-a10f-e55d0afc2221",
128
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
129
+ },
130
+ {
131
+ "key": "0e198e72-f693-4fe1-92cc-5fcb89bf43e1",
132
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
133
+ },
134
+ {
135
+ "key": "0e8127c8-aeac-458c-e720-ad8fbeaceb0e",
136
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
137
+ },
138
+ {
139
+ "key": "0e96d306-87a2-49ab-6dbf-30485be8709d",
140
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
141
+ },
142
+ {
143
+ "key": "0e997c88-bd69-40b2-e0d4-2e03b2c1f520",
144
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
145
+ },
146
+ {
147
+ "key": "0f3f2e8f-5978-4616-f053-13315c0ce0f5",
148
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
149
+ },
150
+ {
151
+ "key": "106bd544-81be-4543-3519-e95cf1f89c08",
152
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
153
+ },
154
+ {
155
+ "key": "1110f155-5649-4a83-d108-96b5f4546b95",
156
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
157
+ },
158
+ {
159
+ "key": "115c30d9-0764-4c9f-544b-2f84ef33cd23",
160
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
161
+ },
162
+ {
163
+ "key": "119854ba-7f68-46d6-ff6d-ceaae017363e",
164
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
165
+ },
166
+ {
167
+ "key": "143f754f-f160-4176-96a4-84e3d1203594",
168
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
169
+ },
170
+ {
171
+ "key": "18599338-3386-4d88-ef25-7033bbeacf14",
172
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
173
+ },
174
+ {
175
+ "key": "1aedaeef-6b83-4a2f-6100-7edd1ab04c6f",
176
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
177
+ },
178
+ {
179
+ "key": "05760298-a074-4eca-3584-a1f38811e6a5",
180
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
181
+ },
182
+ {
183
+ "key": "0695c47c-d09b-4114-3af2-ce4521323ba7",
184
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
185
+ },
186
+ {
187
+ "key": "0e905f00-926e-4086-5d56-4a4c294e1db8",
188
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
189
+ },
190
+ {
191
+ "key": "058ccaad-dcda-43ff-b3ce-4bce692245ba",
192
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
193
+ },
194
+ {
195
+ "key": "05c56667-0254-4785-b3d0-86a97450184b",
196
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
197
+ },
198
+ {
199
+ "key": "05dcdb91-44a0-4a78-152c-00eb6053fa11",
200
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
201
+ },
202
+ {
203
+ "key": 29265328,
204
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
205
+ },
206
+ {
207
+ "key": 22829930,
208
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
209
+ },
210
+ {
211
+ "key": 29309733,
212
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
213
+ },
214
+ {
215
+ "key": 22205092,
216
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
217
+ },
218
+ {
219
+ "key": 28339104,
220
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
221
+ },
222
+ {
223
+ "key": 28689366,
224
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
225
+ },
226
+ {
227
+ "key": 23904571,
228
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
229
+ },
230
+ {
231
+ "key": 29365025,
232
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
233
+ },
234
+ {
235
+ "key": 28720303,
236
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
237
+ },
238
+ {
239
+ "key": 27655166,
240
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
241
+ },
242
+ {
243
+ "key": 28720861,
244
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
245
+ },
246
+ {
247
+ "key": 25210117,
248
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
249
+ },
250
+ {
251
+ "key": 28948963,
252
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
253
+ },
254
+ {
255
+ "key": 13046135,
256
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
257
+ },
258
+ {
259
+ "key": 29143686,
260
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
261
+ },
262
+ {
263
+ "key": 29286514,
264
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
265
+ },
266
+ {
267
+ "key": 27922269,
268
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
269
+ },
270
+ {
271
+ "key": 10086066,
272
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
273
+ },
274
+ {
275
+ "key": 12196457,
276
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
277
+ },
278
+ {
279
+ "key": 28726465,
280
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
281
+ },
282
+ {
283
+ "key": 24544220,
284
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
285
+ },
286
+ {
287
+ "key": 26082288,
288
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
289
+ },
290
+ {
291
+ "key": 28290408,
292
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
293
+ },
294
+ {
295
+ "key": 24164757,
296
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
297
+ },
298
+ {
299
+ "key": 27118103,
300
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
301
+ },
302
+ {
303
+ "key": 26928719,
304
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
305
+ },
306
+ {
307
+ "key": 15192981,
308
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
309
+ },
310
+ {
311
+ "key": 19605650,
312
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
313
+ },
314
+ {
315
+ "key": 23089646,
316
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
317
+ },
318
+ {
319
+ "key": 13141760,
320
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
321
+ },
322
+ {
323
+ "key": 24893876,
324
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
325
+ },
326
+ {
327
+ "key": 13455263,
328
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
329
+ },
330
+ {
331
+ "key": 28782969,
332
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
333
+ },
334
+ {
335
+ "key": 23199819,
336
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
337
+ },
338
+ {
339
+ "key": 13445369,
340
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
341
+ },
342
+ {
343
+ "key": 107406,
344
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
345
+ },
346
+ {
347
+ "key": 16033881,
348
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
349
+ },
350
+ {
351
+ "key": 11131360,
352
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
353
+ },
354
+ {
355
+ "key": 17011507,
356
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
357
+ },
358
+ {
359
+ "key": 11308669,
360
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
361
+ },
362
+ {
363
+ "key": 12727894,
364
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
365
+ },
366
+ {
367
+ "key": 9717418,
368
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
369
+ },
370
+ {
371
+ "key": 6026704,
372
+ "color": { "hex": "#FFEB69", "token": "--color-bright-yellow" }
373
+ },
374
+ {
375
+ "key": 14866996,
376
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
377
+ },
378
+ {
379
+ "key": 14945713,
380
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
381
+ },
382
+ {
383
+ "key": 3049217,
384
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
385
+ },
386
+ {
387
+ "key": 16000036,
388
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
389
+ },
390
+ {
391
+ "key": 15951735,
392
+ "color": { "hex": "#A0E1E1", "token": "--color-bright-blue" }
393
+ },
394
+ {
395
+ "key": 13624716,
396
+ "color": { "hex": "#FFD7EF", "token": "--color-bright-pink" }
397
+ },
398
+ {
399
+ "key": 11288359,
400
+ "color": { "hex": "#FFC091", "token": "--color-bright-orange" }
401
+ }
402
+ ]
@@ -0,0 +1,10 @@
1
+ /*
2
+ * The colors we support generating an Avatar background color from a "seed" for.
3
+ * Changing this array will change the assignment between seeds.
4
+ * Do not change this array.
5
+ */var avatarColors=["--color-bright-blue","--color-bright-yellow","--color-bright-pink","--color-bright-orange"],hashSeed=function(a){for(var b=avatarColors.length,c=0,d=1,e=0;e<a.length;e++)c=(c+a.charCodeAt(e)*d)%b,d=d*31%b;return c};/*
6
+ * Takes in a "seed" string and spits out an index for the color we should use.
7
+ * This implementation has been synced across all three clients so that we consistently
8
+ * generate branded avatar colors when rendering a list of Avatars.
9
+ * Do not change this implementation.
10
+ */export var getAvatarColorFromSeed=function(a){return avatarColors[hashSeed(a)]};
@@ -0,0 +1 @@
1
+ export*from"./colors";
@@ -1 +1 @@
1
- import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];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{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.badgeUrl,e=a.badgeAltText,f=a.badgeStatusIcon,g=a.name,h=a.avatarProps,i=a.badgeProps,j=useState(!1),k=_slicedToArray(j,2),l=k[0],m=k[1],n=c===ProfileType.BUSINESS;useEffect(function(){return m(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:d,altText:e,statusIcon:f},i),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!l?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return m(!0)}})},h):c?_objectSpread({type:AvatarType.ICON,children:n?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h):g?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(g)})},h):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},h)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
1
+ import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["url","altText","statusIcon","children"];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{Person as ProfileIcon,Briefcase as BriefcaseIcon}from"@transferwise/icons";import PropTypes from"prop-types";import{useState,useEffect}from"react";import Avatar,{AvatarType}from"../avatar";import Badge from"../badge";import{ProfileType,Size,Sentiment}from"../common";import StatusIcon from"../statusIcon/StatusIcon";import{jsx as _jsx}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";var OptionalBadge=function(a){var b=a.url,c=a.altText,d=a.statusIcon,e=a.children,f=_objectWithoutProperties(a,_excluded);return b?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx("img",{src:b,alt:c})},f),{},{children:e})):d?/*#__PURE__*/_jsx(Badge,_objectSpread(_objectSpread({badge:/*#__PURE__*/_jsx(StatusIcon,{sentiment:d,size:Size.SMALL})},f),{},{children:e})):e};OptionalBadge.propTypes={url:PropTypes.string,altText:PropTypes.string,statusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),children:PropTypes.node.isRequired},OptionalBadge.defaultProps={url:void 0,altText:void 0,statusIcon:void 0};var AvatarWrapper=function(a){var b=a.url,c=a.profileType,d=a.profileId,e=a.badgeUrl,f=a.badgeAltText,g=a.badgeStatusIcon,h=a.name,i=a.avatarProps,j=a.badgeProps,k=useState(!1),l=_slicedToArray(k,2),m=l[0],n=l[1],o=c===ProfileType.BUSINESS;useEffect(function(){return n(!1)},[b]);return/*#__PURE__*/_jsx(OptionalBadge,_objectSpread(_objectSpread({url:e,altText:f,statusIcon:g},j),{},{children:/*#__PURE__*/_jsx(Avatar,_objectSpread({size:Size.MEDIUM},function getAvatarProps(){return b&&!m?_objectSpread({type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:b,alt:"avatar",onError:function onError(){return n(!0)}})},i):c?_objectSpread({type:AvatarType.ICON,children:o?/*#__PURE__*/_jsx(BriefcaseIcon,{size:"24"}):/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},i):h?_objectSpread({type:AvatarType.INITIALS,children:/*#__PURE__*/_jsx(_Fragment,{children:getInitials(h)}),backgroundColorSeed:null===d||void 0===d?void 0:d.toString()},i):_objectSpread({type:AvatarType.ICON,children:/*#__PURE__*/_jsx(ProfileIcon,{size:"24"})},i)}()))}))};function getInitials(a){var b=a.split(" ").map(function(a){return a[0]}).join("").toUpperCase();return 1===b.length?b[0]:b[0]+b.slice(-1)}AvatarWrapper.defaultProps={url:void 0,profileType:void 0,profileId:void 0,badgeUrl:void 0,badgeAltText:void 0,badgeStatusIcon:void 0,name:void 0,avatarProps:{},badgeProps:{}},AvatarWrapper.propTypes={url:PropTypes.string,profileType:PropTypes.oneOf([ProfileType.PERSONAL,ProfileType.BUSINESS]),profileId:PropTypes.number,badgeUrl:PropTypes.string,badgeAltText:PropTypes.string,badgeStatusIcon:PropTypes.oneOf([Sentiment.POSITIVE,Sentiment.NEGATIVE,Sentiment.NEUTRAL,Sentiment.WARNING,Sentiment.PENDING]),name:PropTypes.string,avatarProps:PropTypes.shape({}),badgeProps:PropTypes.shape({})};export default AvatarWrapper;
@@ -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{userEvent,within}from"@storybook/testing-library";import{ControlType,Priority}from"../common";import{storyConfig}from"../test-utils";import Button from"./Button";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:Button,title:"Actions/Button",args:{children:"Button text"},argTypes:{as:{type:{name:"enum",value:["button","a"]}}},tags:["autodocs"]};export var Basic={};export var Focused=storyConfig({parameters:{chromatic:{delay:1e3}},play:function play(a){var b=a.canvasElement,c=within(b);userEvent.click(c.getByRole("button"))}},{variants:["dark"]});export var Variants=storyConfig({args:{className:"m-r-2"},render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Accent"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.ACCENT})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.ACCENT})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.TERTIARY,type:ControlType.ACCENT}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Positive"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.POSITIVE})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.POSITIVE}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Negative"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,type:ControlType.NEGATIVE})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,type:ControlType.NEGATIVE}))]}),/*#__PURE__*/_jsxs("div",{className:"m-b-2",children:[/*#__PURE__*/_jsx("div",{className:"title-4 m-b-1",children:"Disabled"}),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.PRIMARY,disabled:!0})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.SECONDARY,disabled:!0})),/*#__PURE__*/_jsx(Button,_objectSpread(_objectSpread({},a),{},{priority:Priority.TERTIARY,disabled:!0}))]})]})}},{variants:["default","dark","rtl"]});export var SocialMedia=storyConfig({render:function render(){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx("div",{className:"m-b-2",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-google",children:"Login with Google"})}),/*#__PURE__*/_jsx("div",{className:"m-b-2",children:/*#__PURE__*/_jsx("button",{type:"button",className:"btn btn-facebook",children:"Login with Facebook"})})]})}},{variants:["default","dark","rtl"]});export var SocialMediaMobile=storyConfig(SocialMedia,{variants:["default","dark","rtl","mobile"]});
@@ -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{lorem10,storyConfig}from"../test-utils";import Checkbox from"./Checkbox";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:Checkbox,title:"Forms/Checkbox",args:{label:"This is the label"},tags:["autodocs"]};export var Basic={};export var Multiple=storyConfig({render:function render(a){return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Checkbox,_objectSpread({},a)),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{checked:!0})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{label:lorem10})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{label:lorem10,secondary:lorem10})),/*#__PURE__*/_jsx(Checkbox,_objectSpread(_objectSpread({},a),{},{disabled:!0}))]})}},{variants:["default","dark","rtl"]});export var MultipleMobile=storyConfig(Multiple,{variants:["default","dark","rtl","mobile"]});
@@ -0,0 +1,2 @@
1
+ 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{FastFlag}from"@transferwise/icons";import{useState}from"react";import Body from"../../body/Body";import Button from"../../button";import NavigationOption from"../../navigationOption";import{lorem10,lorem500,storyConfig}from"../../test-utils";import Title from"../../title/Title";import{Typography}from"../propsValues/typography";import BottomSheet from"./BottomSheet";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";import{Fragment as _Fragment}from"react/jsx-runtime";export default{component:BottomSheet,title:"Dialogs/BottomSheet",args:{open:!0},render:function render(a){// eslint-disable-next-line react-hooks/rules-of-hooks
2
+ var b=useState(a.open),c=_slicedToArray(b,2),d=c[0],e=c[1];return/*#__PURE__*/_jsxs("div",{style:{height:"2000px"},children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return e(!0)},children:"Open BottomSheet"}),/*#__PURE__*/_jsx(BottomSheet,_objectSpread(_objectSpread({},a),{},{open:d,onClose:function onClose(){e(!1),action("BottomSheet closed")()}}))]})}};export var Basic={args:{children:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SECTION,children:"Money without borders"}),lorem10,/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx("br",{}),/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24}),isContainerAligned:!0})]})},parameters:{chromatic:{delay:1e3}}};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var WithOverflowContent={args:{children:/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Title,{type:Typography.TITLE_SECTION,children:"Money without borders"}),lorem10,/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24})}),/*#__PURE__*/_jsx(NavigationOption,{title:"Navigation option",content:"Button and icon are vertically centered.",media:/*#__PURE__*/_jsx(FastFlag,{size:24}),isContainerAligned:!0}),lorem500,/*#__PURE__*/_jsx(Body,{type:Typography.BODY_DEFAULT_BOLD,children:lorem10})]})},parameters:{chromatic:{delay:1e3}}};export var WithOverflowContentMobile=storyConfig(WithOverflowContent,{variants:["mobile"]});export var WithOverflowContentDark=storyConfig(WithOverflowContent,{variants:["dark"]});export var WithOverflowContentDarkMobile=storyConfig(WithOverflowContent,{variants:["dark","mobile"]});
@@ -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{DateInput,InlineAlert}from"..";import{lorem10,storyConfig}from"../test-utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";export default{component:DateInput,title:"Forms/DateInput",args:{dayLabel:"Day input",monthLabel:"Month select",yearLabel:"Year input",selectProps:{buttonProps:{"aria-label":"Select month"},dropdownProps:{"aria-label":"Month options"}}},tags:["autodocs"]};export var Basic={};export var BasicMobile=storyConfig(Basic,{variants:["mobile"]});export var InputError=_objectSpread(_objectSpread({},Basic),{},{render:function render(a){return/*#__PURE__*/_jsxs("div",{className:"form-group has-error",children:[/*#__PURE__*/_jsx(DateInput,_objectSpread({},a)),/*#__PURE__*/_jsx(InlineAlert,{type:"error",children:lorem10})]})}});export var InputErrorMobile=storyConfig(InputError,{variants:["mobile"]});
@@ -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{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"]});
@@ -1 +1,2 @@
1
- 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{select,text}from"@storybook/addon-knobs";import{useState}from"react";import{Button,Modal}from"..";import{Size,Scroll,Position}from"../common";import{storyConfig,lorem10,lorem1000}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"};var Template=function(a){var b=useState({value:-1,label:"A thing"}),c=_slicedToArray(b,2),d=c[0],e=c[1],f=select("size",[Size.SMALL,Size.MEDIUM,Size.LARGE,Size.EXTRA_LARGE],Size.MEDIUM),g=useState(!0),h=_slicedToArray(g,2),i=h[0],j=h[1],k=text("title","title"),l=text("class",""),m=select("position",[Position.TOP,Position.CENTER],Position.CENTER),n=select("scroll",[Scroll.CONTENT,Scroll.VIEWPORT],Scroll.CONTENT);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(Button,{onClick:function onClick(){return j(!0)},children:"Open Modal"}),/*#__PURE__*/_jsx(Modal,_objectSpread(_objectSpread({},a),{},{body:/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx("p",{children:a.children})}),open:i,position:m,size:f,title:k,className:l,scroll:n,footer:/*#__PURE__*/_jsx(Button,{block:!0,onClick:function onClick(){return alert("clicked")},children:"Action"}),onClose:function onClose(){return j(!1)}}))]})};export var Basic=storyConfig(function(){return/*#__PURE__*/_jsx(Template,{children:lorem10})},{visualTest:{delay:2e3}});export var WithLongText=function(){return/*#__PURE__*/_jsx(Template,{children:lorem1000})};export var WithLongTextMobileView=storyConfig(WithLongText,{mobileView:!0,visualTest:{delay:2e3}});
1
+ 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
2
+ 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"]});
@@ -1 +1 @@
1
- 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{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=useIntl(),n=m.locale,o=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(n,k),suffix:""}}()),p=_slicedToArray(o,2),q=p[0],r=p[1],s=useState(null),t=_slicedToArray(s,2),u=t[0],v=t[1],w=useState(""),x=_slicedToArray(w,2),y=x[0],z=x[1],A=groupCountriesByPrefix(sortArrayByProperty(countries,"iso3")),B=groupCountriesByPrefix(sortArrayByProperty(countries,"phone")),C=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(y)?B:A,y);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();return useEffect(function(){if(null===u)return v(q);var a=q.prefix+q.suffix,b=u.prefix+u.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),v(q)}},[c,u,q]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,_objectSpread({id:b?"".concat(b,"-select"):void 0,options:C,selected:{value:q.prefix,label:q.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:y,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;z(""),r({prefix:b,suffix:q.suffix})},onSearchChange:function onSearchChange(a){return z(a)}},l))}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(g),children:/*#__PURE__*/_jsx("input",{id:b,name:"phoneNumber",inputMode:"numeric",value:q.suffix,className:"form-control",disabled:e,required:f,placeholder:h,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&r({prefix:q.prefix,suffix:c})},onPaste:function onPaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=explodeNumberModel(b),d=c.prefix,e=c.suffix,f=C.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&r({prefix:d,suffix:e})}},onFocus:i,onBlur:j})})})]})};PhoneNumberInput.propTypes={id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string,selectProps:PropTypes.object},PhoneNumberInput.defaultProps={id:null,required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:"",selectProps:{}};export default PhoneNumberInput;
1
+ 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{isArray}from"@transferwise/neptune-validation";import PropTypes from"prop-types";import{useState,useEffect}from"react";import{useIntl}from"react-intl";import{Size}from"../common";import Select from"../select";import countries from"./data/countries";import{explodeNumberModel,filterOptionsForQuery,isValidPhoneNumber,cleanNumber,setDefaultPrefix,isStringNumeric,sortArrayByProperty,groupCountriesByPrefix,excludeCountries}from"./utils";import{jsx as _jsx}from"react/jsx-runtime";import{jsxs as _jsxs}from"react/jsx-runtime";var ALLOWED_PHONE_CHARS=/^$|^[\d-\s]+$/,PhoneNumberInput=function(a){var b=a.id,c=a.onChange,d=a.searchPlaceholder,e=a.disabled,f=a.required,g=a.size,h=a.placeholder,i=a.onFocus,j=a.onBlur,k=a.countryCode,l=a.selectProps,m=a.disabledCountries,n=useIntl(),o=n.locale,p=useState(function getInitialValue(){var b=a.initialValue,c=b?cleanNumber(b):null;return c&&isValidPhoneNumber(c)?explodeNumberModel(c):{prefix:setDefaultPrefix(o,k),suffix:""}}()),q=_slicedToArray(p,2),r=q[0],s=q[1],t=useState(null),u=_slicedToArray(t,2),v=u[0],w=u[1],x=useState(""),y=_slicedToArray(x,2),z=y[0],A=y[1],B=excludeCountries(countries,m),C=groupCountriesByPrefix(sortArrayByProperty(B,"iso3")),D=groupCountriesByPrefix(sortArrayByProperty(B,"phone")),E=function getSelectOptions(){var a=filterOptionsForQuery(isStringNumeric(z)?D:C,z);return a.map(function(a){var b=a.phone,c=a.iso3,d=a.iso2,e="";return c?e=isArray(c)?c.join(", "):c:d&&(e=isArray(d)?d.join(", "):d),{value:b,label:b,note:e}})}();return useEffect(function(){if(null===v)return w(r);var a=r.prefix+r.suffix,b=v.prefix+v.suffix;if(a!==b){var d=isValidPhoneNumber(a)?cleanNumber(a):null;c(d),w(r)}},[c,v,r]),/*#__PURE__*/_jsxs("div",{className:"tw-telephone",children:[/*#__PURE__*/_jsx("div",{className:"tw-telephone__country-select",children:/*#__PURE__*/_jsx(Select,_objectSpread({id:b?"".concat(b,"-select"):void 0,options:E,selected:{value:r.prefix,label:r.prefix},placeholder:"Select an option...",searchPlaceholder:d,dropdownWidth:Size.SMALL,searchValue:z,required:f,disabled:e,size:g,onChange:function onPrefixChange(a){var b=a.value;A(""),s({prefix:b,suffix:r.suffix})},onSearchChange:function onSearchChange(a){return A(a)}},l))}),/*#__PURE__*/_jsx("div",{className:"tw-telephone__number-input",children:/*#__PURE__*/_jsx("div",{className:"input-group input-group-".concat(g),children:/*#__PURE__*/_jsx("input",{id:b,name:"phoneNumber",inputMode:"numeric",value:r.suffix,className:"form-control",disabled:e,required:f,placeholder:h,onChange:function onSuffixChange(a){var b=a.target.value,c=void 0===b?"":b;ALLOWED_PHONE_CHARS.test(c)&&s({prefix:r.prefix,suffix:c})},onPaste:function onPaste(a){if(a.nativeEvent.clipboardData){var b=(a.nativeEvent.clipboardData.getData("text/plain")||"").replace(/(\s|-)+/g,""),c=explodeNumberModel(b),d=c.prefix,e=c.suffix,f=E.find(function(a){var b=a.value;return b===d});f&&ALLOWED_PHONE_CHARS.test(e)&&s({prefix:d,suffix:e})}},onFocus:i,onBlur:j})})})]})};PhoneNumberInput.propTypes={id:PropTypes.string,required:PropTypes.bool,disabled:PropTypes.bool,initialValue:PropTypes.string,onChange:PropTypes.func.isRequired,onFocus:PropTypes.func,onBlur:PropTypes.func,countryCode:PropTypes.string,searchPlaceholder:PropTypes.string,size:PropTypes.oneOf(["sm","md","lg"]),placeholder:PropTypes.string,selectProps:PropTypes.object,/** List of iso3 codes of countries to remove from the list */disabledCountries:PropTypes.arrayOf(PropTypes.string)},PhoneNumberInput.defaultProps={id:null,required:!1,disabled:!1,initialValue:null,onFocus:function onFocus(){},onBlur:function onBlur(){},countryCode:null,searchPlaceholder:"Prefix",size:Size.MEDIUM,placeholder:"",selectProps:{},disabledCountries:[]};export default PhoneNumberInput;
@@ -0,0 +1,8 @@
1
+ // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
2
+ var filterCountriesByIso3=function(a,b){var c=new Set(b);return a.filter(function(a){return!c.has(a.iso3)})};/**
3
+ * Removes the countries sepecified in the second param
4
+ *
5
+ * @param {Array} countries: list of country metadata objects
6
+ * @param {Array} disabledCountries: list of iso3 country codes to remove from the list
7
+ * @returns
8
+ */export var excludeCountries=function(a,b){return 0<b.length?filterCountriesByIso3(a,b):a};
@@ -0,0 +1 @@
1
+ export{excludeCountries}from"./excludeCountries";
@@ -1 +1 @@
1
- export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";
1
+ export{setDefaultPrefix}from"./setDefaultPrefix";export{isValidPhoneNumber}from"./isValidPhoneNumber";export{explodeNumberModel}from"./explodeNumberModel";export{longestMatchingPrefix}from"./longestMatchingPrefix";export{findCountryByPrefix}from"./findCountryByPrefix";export{findCountryByCode}from"./findCountryByCode";export{filterOptionsForQuery}from"./filterOptionsForQuery";export{isOptionAndFitsQuery}from"./isOptionAndFitsQuery";export{cleanNumber}from"./cleanNumber";export{isStringNumeric}from"./isStringNumeric";export{sortArrayByProperty}from"./sortArrayByProperty";export{groupCountriesByPrefix}from"./groupCountriesByPrefix";export{excludeCountries}from"./excludeCountries";