@transferwise/components 0.0.0-experimental-eec707b → 0.0.0-experimental-dc27730

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 (51) hide show
  1. package/build/index.esm.js +29 -90
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +32 -93
  4. package/build/index.js.map +1 -1
  5. package/build/types/avatarWrapper/AvatarWrapper.d.ts +18 -28
  6. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  7. package/build/types/avatarWrapper/index.d.ts +1 -1
  8. package/build/types/avatarWrapper/index.d.ts.map +1 -1
  9. package/build/types/badge/Badge.d.ts +2 -2
  10. package/build/types/badge/Badge.d.ts.map +1 -1
  11. package/build/types/badge/index.d.ts +2 -1
  12. package/build/types/badge/index.d.ts.map +1 -1
  13. package/build/types/common/index.d.ts +1 -1
  14. package/build/types/common/propsValues/profileType.d.ts +2 -0
  15. package/build/types/common/propsValues/profileType.d.ts.map +1 -1
  16. package/build/types/common/propsValues/sentiment.d.ts +1 -0
  17. package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
  18. package/build/types/image/Image.d.ts +17 -21
  19. package/build/types/image/Image.d.ts.map +1 -1
  20. package/build/types/image/index.d.ts +1 -1
  21. package/build/types/image/index.d.ts.map +1 -1
  22. package/build/types/inlineAlert/InlineAlert.d.ts +12 -15
  23. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  24. package/build/types/inlineAlert/index.d.ts +1 -1
  25. package/build/types/inlineAlert/index.d.ts.map +1 -1
  26. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  27. package/package.json +1 -1
  28. package/src/avatarWrapper/AvatarWrapper.spec.tsx +105 -0
  29. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -41
  30. package/src/avatarWrapper/{AvatarWrapper.js → AvatarWrapper.tsx} +25 -56
  31. package/src/avatarWrapper/__snapshots__/{AvatarWrapper.spec.js.snap → AvatarWrapper.spec.tsx.snap} +76 -76
  32. package/src/badge/Badge.tsx +2 -2
  33. package/src/badge/index.ts +2 -0
  34. package/src/common/index.js +1 -1
  35. package/src/common/propsValues/profileType.ts +3 -0
  36. package/src/common/propsValues/sentiment.ts +10 -0
  37. package/src/image/{Image.spec.js → Image.spec.tsx} +5 -5
  38. package/src/image/{Image.story.js → Image.story.tsx} +3 -3
  39. package/src/image/Image.tsx +65 -0
  40. package/src/inlineAlert/{InlineAlert.story.js → InlineAlert.story.tsx} +3 -2
  41. package/src/inlineAlert/InlineAlert.tsx +59 -0
  42. package/src/promoCard/PromoCard.tsx +1 -6
  43. package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap +2 -2
  44. package/src/avatarWrapper/AvatarWrapper.spec.js +0 -81
  45. package/src/badge/index.js +0 -1
  46. package/src/image/Image.js +0 -78
  47. package/src/inlineAlert/InlineAlert.js +0 -62
  48. /package/src/avatarWrapper/{index.js → index.ts} +0 -0
  49. /package/src/image/{index.js → index.ts} +0 -0
  50. /package/src/inlineAlert/{InlineAlert.spec.js → InlineAlert.spec.tsx} +0 -0
  51. /package/src/inlineAlert/{index.js → index.ts} +0 -0
@@ -1336,7 +1336,6 @@ const Badge = ({
1336
1336
  })]
1337
1337
  });
1338
1338
  };
1339
- var Badge$1 = Badge;
1340
1339
 
1341
1340
  const OptionalBadge = ({
1342
1341
  url,
@@ -1346,7 +1345,7 @@ const OptionalBadge = ({
1346
1345
  ...rest
1347
1346
  }) => {
1348
1347
  if (url) {
1349
- return /*#__PURE__*/jsx(Badge$1, {
1348
+ return /*#__PURE__*/jsx(Badge, {
1350
1349
  badge: /*#__PURE__*/jsx("img", {
1351
1350
  src: url,
1352
1351
  alt: altText
@@ -1356,7 +1355,7 @@ const OptionalBadge = ({
1356
1355
  });
1357
1356
  }
1358
1357
  if (statusIcon) {
1359
- return /*#__PURE__*/jsx(Badge$1, {
1358
+ return /*#__PURE__*/jsx(Badge, {
1360
1359
  badge: /*#__PURE__*/jsx(StatusIcon, {
1361
1360
  sentiment: statusIcon,
1362
1361
  size: Size.SMALL
@@ -1365,18 +1364,9 @@ const OptionalBadge = ({
1365
1364
  children: children
1366
1365
  });
1367
1366
  }
1368
- return children;
1369
- };
1370
- OptionalBadge.propTypes = {
1371
- url: PropTypes.string,
1372
- altText: PropTypes.string,
1373
- statusIcon: PropTypes.oneOf([Sentiment.POSITIVE, Sentiment.NEGATIVE, Sentiment.NEUTRAL, Sentiment.WARNING, Sentiment.PENDING]),
1374
- children: PropTypes.node.isRequired
1375
- };
1376
- OptionalBadge.defaultProps = {
1377
- url: undefined,
1378
- altText: undefined,
1379
- statusIcon: undefined
1367
+ return /*#__PURE__*/jsx(Fragment, {
1368
+ children: children
1369
+ });
1380
1370
  };
1381
1371
  const AvatarWrapper = ({
1382
1372
  url,
@@ -1391,7 +1381,6 @@ const AvatarWrapper = ({
1391
1381
  }) => {
1392
1382
  const [hasImageLoadError, setImageLoadError] = useState(false);
1393
1383
  const isBusinessProfile = profileType === ProfileType.BUSINESS;
1394
-
1395
1384
  // Reset the errored state when url changes
1396
1385
  useEffect(() => setImageLoadError(false), [url]);
1397
1386
  const getAvatarProps = () => {
@@ -1453,29 +1442,6 @@ function getInitials(name) {
1453
1442
  }
1454
1443
  return allInitials[0] + allInitials.slice(-1);
1455
1444
  }
1456
- AvatarWrapper.defaultProps = {
1457
- url: undefined,
1458
- profileType: undefined,
1459
- profileId: undefined,
1460
- badgeUrl: undefined,
1461
- badgeAltText: undefined,
1462
- badgeStatusIcon: undefined,
1463
- name: undefined,
1464
- avatarProps: {},
1465
- badgeProps: {}
1466
- };
1467
- AvatarWrapper.propTypes = {
1468
- url: PropTypes.string,
1469
- profileType: PropTypes.oneOf([ProfileType.PERSONAL, ProfileType.BUSINESS]),
1470
- profileId: PropTypes.number,
1471
- badgeUrl: PropTypes.string,
1472
- badgeAltText: PropTypes.string,
1473
- badgeStatusIcon: PropTypes.oneOf([Sentiment.POSITIVE, Sentiment.NEGATIVE, Sentiment.NEUTRAL, Sentiment.WARNING, Sentiment.PENDING]),
1474
- name: PropTypes.string,
1475
- avatarProps: PropTypes.shape({}),
1476
- badgeProps: PropTypes.shape({})
1477
- };
1478
- var AvatarWrapper$1 = AvatarWrapper;
1479
1445
 
1480
1446
  const THROTTLE_MS = 100;
1481
1447
  const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -5737,11 +5703,11 @@ const Image = ({
5737
5703
  onError,
5738
5704
  className,
5739
5705
  loading,
5740
- stretch,
5706
+ stretch = true,
5741
5707
  role,
5742
- shrink
5708
+ shrink = true
5743
5709
  }) => {
5744
- const elementReference = useRef();
5710
+ const elementReference = useRef(null);
5745
5711
  const [hasIntersected] = useHasIntersected({
5746
5712
  elRef: elementReference,
5747
5713
  loading
@@ -5750,7 +5716,7 @@ const Image = ({
5750
5716
  let imageOnLoad = onLoad;
5751
5717
  if (loading === 'lazy' && !hasIntersected) {
5752
5718
  imageSource = EmptyTransparentImage;
5753
- imageOnLoad = null;
5719
+ imageOnLoad = undefined;
5754
5720
  }
5755
5721
  return /*#__PURE__*/jsx("img", {
5756
5722
  ref: elementReference,
@@ -5766,28 +5732,6 @@ const Image = ({
5766
5732
  onError: onError
5767
5733
  });
5768
5734
  };
5769
- Image.propTypes = {
5770
- id: PropTypes.string,
5771
- src: PropTypes.string.isRequired,
5772
- alt: PropTypes.string.isRequired,
5773
- onLoad: PropTypes.func,
5774
- onError: PropTypes.func,
5775
- className: PropTypes.string,
5776
- loading: PropTypes.oneOf(['lazy', 'eager']),
5777
- stretch: PropTypes.bool,
5778
- shrink: PropTypes.bool,
5779
- role: PropTypes.string
5780
- };
5781
- Image.defaultProps = {
5782
- id: null,
5783
- className: '',
5784
- onLoad: () => {},
5785
- onError: () => {},
5786
- loading: 'eager',
5787
- stretch: true,
5788
- shrink: true
5789
- };
5790
- var Image$1 = Image;
5791
5735
 
5792
5736
  // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
5793
5737
  var InfoPresentation;
@@ -6023,18 +5967,23 @@ const typeClassMap = {
6023
5967
  [Sentiment.ERROR]: 'danger',
6024
5968
  [Sentiment.NEGATIVE]: 'danger'
6025
5969
  };
6026
- const InlineAlert = props => {
5970
+ const InlineAlert = ({
5971
+ id,
5972
+ type = Sentiment.NEUTRAL,
5973
+ className,
5974
+ children
5975
+ }) => {
6027
5976
  const {
6028
5977
  isModern
6029
5978
  } = useTheme();
6030
- const typeClass = `alert-${typeClassMap[props.type] || props.type}`;
5979
+ const typeClass = `alert-${typeClassMap[type] || type}`;
6031
5980
  if (isModern) {
6032
5981
  return /*#__PURE__*/jsxs("div", {
6033
5982
  role: "alert",
6034
- id: props.id,
6035
- className: classNames('alert alert-detach', typeClass, props.className),
6036
- children: [(props.type === 'error' || props.type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
6037
- children: props.children
5983
+ id: id,
5984
+ className: classNames('alert alert-detach', typeClass, className),
5985
+ children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
5986
+ children: children
6038
5987
  })]
6039
5988
  });
6040
5989
  }
@@ -6044,28 +5993,19 @@ const InlineAlert = props => {
6044
5993
  }) => {
6045
5994
  return /*#__PURE__*/jsx("div", {
6046
5995
  role: "alert",
6047
- id: props.id,
5996
+ id: id,
6048
5997
  className: classNames('alert alert-detach p-x-2 p-y-1', typeClass, className),
6049
5998
  children: children
6050
5999
  });
6051
6000
  };
6052
6001
  const AlertWithArrow = withArrow(getAlertContents, ArrowPosition.TOP_LEFT);
6053
6002
  return /*#__PURE__*/jsx(AlertWithArrow, {
6054
- ...props
6003
+ id,
6004
+ type,
6005
+ className,
6006
+ children
6055
6007
  });
6056
6008
  };
6057
- InlineAlert.propTypes = {
6058
- children: PropTypes.node.isRequired,
6059
- className: PropTypes.string,
6060
- id: PropTypes.string,
6061
- type: PropTypes.oneOf(['positive', 'negative', 'warning', 'neutral', 'success', 'info', 'error'])
6062
- };
6063
- InlineAlert.defaultProps = {
6064
- className: undefined,
6065
- id: undefined,
6066
- type: Sentiment.NEUTRAL
6067
- };
6068
- var InlineAlert$1 = InlineAlert;
6069
6009
 
6070
6010
  /*
6071
6011
  * Inspired by:
@@ -9956,10 +9896,9 @@ const PromoCard = /*#__PURE__*/forwardRef(({
9956
9896
  className: classNames('np-Card-image', {
9957
9897
  imageClass
9958
9898
  }),
9959
- children: /*#__PURE__*/jsx(Image$1, {
9899
+ children: /*#__PURE__*/jsx(Image, {
9960
9900
  src: imageSource,
9961
- alt: imageAlt,
9962
- role: !imageAlt ? 'presentation' : null,
9901
+ alt: imageAlt || '',
9963
9902
  loading: "lazy"
9964
9903
  })
9965
9904
  }), /*#__PURE__*/jsx(PromoCardIndicator, {
@@ -12064,7 +12003,7 @@ class Typeahead extends Component {
12064
12003
  children: /*#__PURE__*/jsx(Cross, {})
12065
12004
  })
12066
12005
  })]
12067
- }), displayAlert && /*#__PURE__*/jsx(InlineAlert$1, {
12006
+ }), displayAlert && /*#__PURE__*/jsx(InlineAlert, {
12068
12007
  type: alert.type,
12069
12008
  children: alert.message
12070
12009
  }), menu]
@@ -14446,5 +14385,5 @@ const translations = {
14446
14385
  zh
14447
14386
  };
14448
14387
 
14449
- export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper$1 as AvatarWrapper, Badge$1 as Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image$1 as Image, Info, InfoPresentation, InlineAlert$1 as InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, Section, Select, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
14388
+ export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$1 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron$1 as Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, Section, Select, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useSnackbar };
14450
14389
  //# sourceMappingURL=index.esm.js.map