@transferwise/components 0.0.0-experimental-cb72e72 → 0.0.0-experimental-c482369

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.
@@ -1 +1 @@
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),")")},[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||void 0},children:g})})};export default Avatar;
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 +1 @@
1
- import{text,select}from"@storybook/addon-knobs";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"]};var table=function(){var a=select("Flag",["jpy","gbp","eur"],"jpy"),b="https://wise.com/web-art/assets/flags/".concat(a,".svg"),c=text("Image URL","https://wise.com/web-art/assets/flags/gbp.svg"),d=text("Emoji","\u2708\uFE0F"),e=text("Icon name","Check"),f=wiseIcons[e],g=text("Background color","#D6F5E3"),h=text("Initials","GN");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:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,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:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:d})})]}),/*#__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:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:h})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:h})})]})]})})};export var Tables=storyConfig(table,{allGlobals:!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{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 +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.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;
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 +1 @@
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),")")},[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||void 0},children:g})})};export default Avatar;
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 +1 @@
1
- import{text,select}from"@storybook/addon-knobs";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"]};var table=function(){var a=select("Flag",["jpy","gbp","eur"],"jpy"),b="https://wise.com/web-art/assets/flags/".concat(a,".svg"),c=text("Image URL","https://wise.com/web-art/assets/flags/gbp.svg"),d=text("Emoji","\u2708\uFE0F"),e=text("Icon name","Check"),f=wiseIcons[e],g=text("Background color","#D6F5E3"),h=text("Initials","GN");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:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,outlined:!0,children:/*#__PURE__*/_jsx("img",{src:b,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:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.THUMBNAIL,children:/*#__PURE__*/_jsx("img",{src:c,alt:""})})})]}),"Emoji",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.LARGE,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.EMOJI,children:d})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.EMOJI,children:d})})]}),/*#__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:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.MEDIUM,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:24})})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:Size.SMALL,type:AvatarType.ICON,backgroundColor:g,children:/*#__PURE__*/_jsx(f,{size:16})})})]}),"Initials",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,children:h})})]}),"Branded",/*#__PURE__*/_jsxs("tr",{children:[/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:72,type:AvatarType.INITIALS,backgroundColorSeed:"1",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:56,type:AvatarType.INITIALS,backgroundColorSeed:"2",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:48,type:AvatarType.INITIALS,backgroundColorSeed:"3",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:40,type:AvatarType.INITIALS,backgroundColorSeed:"4",children:h})}),/*#__PURE__*/_jsx("td",{children:/*#__PURE__*/_jsx(Avatar,{size:24,type:AvatarType.INITIALS,backgroundColorSeed:"5",children:h})})]})]})})};export var Tables=storyConfig(table,{allGlobals:!0});
1
+ import _defineProperty from"@babel/runtime/helpers/defineProperty";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.object.get-own-property-descriptors.js";function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(Object(b),!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(Object(b)).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}import{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 +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"];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.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"core-js/modules/es.function.name.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/es.regexp.to-string.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.slice.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{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;
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"];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";import"core-js/modules/es.function.name.js";import"core-js/modules/es.array.join.js";import"core-js/modules/es.array.map.js";import"core-js/modules/es.array.slice.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{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;