@transferwise/components 45.13.0 → 45.14.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 (85) hide show
  1. package/build/index.esm.js +152 -91
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +156 -94
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/inputs/InputGroup.css +1 -0
  7. package/build/styles/main.css +1 -1
  8. package/build/types/avatarWrapper/AvatarWrapper.d.ts +18 -28
  9. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  10. package/build/types/avatarWrapper/index.d.ts +1 -1
  11. package/build/types/avatarWrapper/index.d.ts.map +1 -1
  12. package/build/types/badge/Badge.d.ts +2 -2
  13. package/build/types/badge/Badge.d.ts.map +1 -1
  14. package/build/types/badge/index.d.ts +2 -1
  15. package/build/types/badge/index.d.ts.map +1 -1
  16. package/build/types/body/Body.d.ts +2 -2
  17. package/build/types/common/hooks/useEffectEvent.d.ts +2 -0
  18. package/build/types/common/hooks/useEffectEvent.d.ts.map +1 -0
  19. package/build/types/common/hooks/useResizeObserver.d.ts +3 -0
  20. package/build/types/common/hooks/useResizeObserver.d.ts.map +1 -0
  21. package/build/types/common/index.d.ts +1 -1
  22. package/build/types/common/panel/Panel.d.ts +1 -1
  23. package/build/types/common/propsValues/profileType.d.ts +2 -0
  24. package/build/types/common/propsValues/profileType.d.ts.map +1 -1
  25. package/build/types/common/propsValues/sentiment.d.ts +1 -0
  26. package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
  27. package/build/types/common/responsivePanel/ResponsivePanel.d.ts +1 -1
  28. package/build/types/dimmer/Dimmer.d.ts +1 -1
  29. package/build/types/image/Image.d.ts +17 -21
  30. package/build/types/image/Image.d.ts.map +1 -1
  31. package/build/types/image/index.d.ts +1 -1
  32. package/build/types/image/index.d.ts.map +1 -1
  33. package/build/types/index.d.ts +2 -0
  34. package/build/types/index.d.ts.map +1 -1
  35. package/build/types/inlineAlert/InlineAlert.d.ts +12 -15
  36. package/build/types/inlineAlert/InlineAlert.d.ts.map +1 -1
  37. package/build/types/inlineAlert/index.d.ts +1 -1
  38. package/build/types/inlineAlert/index.d.ts.map +1 -1
  39. package/build/types/inputs/Input.d.ts +4 -8
  40. package/build/types/inputs/Input.d.ts.map +1 -1
  41. package/build/types/inputs/InputGroup.d.ts +21 -0
  42. package/build/types/inputs/InputGroup.d.ts.map +1 -0
  43. package/build/types/inputs/TextArea.d.ts +4 -7
  44. package/build/types/inputs/TextArea.d.ts.map +1 -1
  45. package/build/types/promoCard/PromoCard.d.ts.map +1 -1
  46. package/build/types/select/searchBox/SearchBox.d.ts +1 -1
  47. package/build/types/utilities/cssValueWithUnit.d.ts +2 -0
  48. package/build/types/utilities/cssValueWithUnit.d.ts.map +1 -0
  49. package/package.json +1 -1
  50. package/src/avatarWrapper/AvatarWrapper.spec.tsx +105 -0
  51. package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -41
  52. package/src/avatarWrapper/{AvatarWrapper.js → AvatarWrapper.tsx} +25 -56
  53. package/src/avatarWrapper/__snapshots__/{AvatarWrapper.spec.js.snap → AvatarWrapper.spec.tsx.snap} +76 -76
  54. package/src/badge/Badge.tsx +2 -2
  55. package/src/badge/index.ts +2 -0
  56. package/src/common/hooks/useEffectEvent.ts +22 -0
  57. package/src/common/hooks/useResizeObserver.ts +22 -0
  58. package/src/common/index.js +1 -1
  59. package/src/common/propsValues/profileType.ts +3 -0
  60. package/src/common/propsValues/sentiment.ts +10 -0
  61. package/src/image/{Image.spec.js → Image.spec.tsx} +5 -5
  62. package/src/image/{Image.story.js → Image.story.tsx} +3 -3
  63. package/src/image/Image.tsx +65 -0
  64. package/src/index.ts +2 -0
  65. package/src/inlineAlert/{InlineAlert.story.js → InlineAlert.story.tsx} +3 -2
  66. package/src/inlineAlert/InlineAlert.tsx +59 -0
  67. package/src/inputs/Input.tsx +13 -7
  68. package/src/inputs/InputGroup.css +1 -0
  69. package/src/inputs/InputGroup.less +61 -0
  70. package/src/inputs/InputGroup.story.tsx +73 -0
  71. package/src/inputs/InputGroup.tsx +142 -0
  72. package/src/inputs/TextArea.tsx +7 -6
  73. package/src/main.css +1 -1
  74. package/src/main.less +1 -0
  75. package/src/promoCard/PromoCard.tsx +1 -6
  76. package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap +2 -2
  77. package/src/utilities/cssValueWithUnit.ts +3 -0
  78. package/src/avatarWrapper/AvatarWrapper.spec.js +0 -81
  79. package/src/badge/index.js +0 -1
  80. package/src/image/Image.js +0 -78
  81. package/src/inlineAlert/InlineAlert.js +0 -62
  82. /package/src/avatarWrapper/{index.js → index.ts} +0 -0
  83. /package/src/image/{index.js → index.ts} +0 -0
  84. /package/src/inlineAlert/{InlineAlert.spec.js → InlineAlert.spec.tsx} +0 -0
  85. /package/src/inlineAlert/{index.js → index.ts} +0 -0
package/src/main.less CHANGED
@@ -31,6 +31,7 @@
31
31
  @import "./image/Image.less";
32
32
  @import "./info/Info.less";
33
33
  @import "./inputs/Input.less";
34
+ @import "./inputs/InputGroup.less";
34
35
  @import "./inputs/TextArea.less";
35
36
  @import "./instructionsList/InstructionsList.less";
36
37
  @import "./link/Link.less";
package/src/promoCard/PromoCard.tsx CHANGED
@@ -326,12 +326,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
326
326
  <Body className="np-Card-description">{description}</Body>
327
327
  {imageSource && (
328
328
  <div className={classNames('np-Card-image', { imageClass })}>
329
- <Image
330
- src={imageSource}
331
- alt={imageAlt}
332
- role={!imageAlt ? 'presentation' : null}
333
- loading="lazy"
334
- />
329
+ <Image src={imageSource} alt={imageAlt || ''} loading="lazy" />
335
330
  </div>
336
331
  )}
337
332
  <PromoCardIndicator label={indicatorLabel} icon={icon} />
package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap CHANGED
@@ -31,8 +31,8 @@ exports[`PromoCardGroup matches snapshot 1`] = `
31
31
  class="np-Card-image"
32
32
  >
33
33
  <img
34
+ alt=""
34
35
  class="tw-image tw-image__stretch tw-image__shrink"
35
- role="presentation"
36
36
  src="https://via.placeholder.com/150"
37
37
  />
38
38
  </div>
@@ -65,8 +65,8 @@ exports[`PromoCardGroup matches snapshot 1`] = `
65
65
  class="np-Card-image"
66
66
  >
67
67
  <img
68
+ alt=""
68
69
  class="tw-image tw-image__stretch tw-image__shrink"
69
- role="presentation"
70
70
  src="https://via.placeholder.com/150"
71
71
  />
72
72
  </div>
package/src/utilities/cssValueWithUnit.ts ADDED
@@ -0,0 +1,3 @@
1
+ export function cssValueWithUnit(value: number | string) {
2
+ return typeof value === 'number' ? `${value}px` : value;
3
+ }
package/src/avatarWrapper/AvatarWrapper.spec.js DELETED
@@ -1,81 +0,0 @@
1
- import { Size } from '../common';
2
- import { render, screen } from '../test-utils';
3
-
4
- import Avatar from '.';
5
-
6
- const name = 'Elizabeth Alexandra Mary Windsor';
7
-
8
- describe('FlowNavigationAvatar', () => {
9
- describe('with a name', () => {
10
- it('shows the initials for a long name', () => {
11
- render(<Avatar name={name} />);
12
-
13
- expect(screen.getByText('EW')).toBeInTheDocument();
14
- });
15
-
16
- it('shows the first letter for a mononym', () => {
17
- render(<Avatar name="Michelangelo" />);
18
-
19
- expect(screen.getByText('M')).toBeInTheDocument();
20
- });
21
-
22
- describe('AND profileType', () => {
23
- it('renders as BUSINESS profile type with an icon', async () => {
24
- const { container } = render(<Avatar name={name} profileType="BUSINESS" />);
25
-
26
- expect(container.firstChild).toMatchSnapshot();
27
- });
28
-
29
- it('renders as PERSONAL profile type with an icon', async () => {
30
- const { container } = render(<Avatar name={name} profileType="PERSONAL" />);
31
-
32
- expect(container.firstChild).toMatchSnapshot();
33
- });
34
-
35
- describe('AND avatar url', () => {
36
- it('renders the image', async () => {
37
- const { container } = render(
38
- <Avatar
39
- url="https://wise.com"
40
- name={name}
41
- profileType="BUSINESS"
42
- avatarProps={{ theme: 'dark' }}
43
- />,
44
- );
45
-
46
- expect(container.firstChild).toMatchSnapshot();
47
- });
48
- });
49
- });
50
- });
51
-
52
- describe('with nothing passed', () => {
53
- it('renders a personal icon', () => {
54
- const { container } = render(<Avatar />);
55
-
56
- expect(container.firstChild).toMatchSnapshot();
57
- });
58
- });
59
-
60
- describe('with a badge url passed', () => {
61
- it('renders the badge', () => {
62
- const { container } = render(
63
- <Avatar
64
- badgeUrl="https://badge.com"
65
- badgeAltText="badge alt text"
66
- badgeProps={{ size: Size.LARGE }}
67
- />,
68
- );
69
-
70
- expect(container.firstChild).toMatchSnapshot();
71
- });
72
- });
73
-
74
- describe('with a badge status icon passed', () => {
75
- it('renders the badge', () => {
76
- const { container } = render(<Avatar badgeStatusIcon="positive" />);
77
-
78
- expect(container.firstChild).toMatchSnapshot();
79
- });
80
- });
81
- });
package/src/badge/index.js DELETED
@@ -1 +0,0 @@
1
- export { default } from './Badge';
package/src/image/Image.js DELETED
@@ -1,78 +0,0 @@
1
- import classnames from 'classnames';
2
- import PropTypes from 'prop-types';
3
- import { useRef } from 'react';
4
-
5
- import { useHasIntersected } from '../common/hooks';
6
-
7
- /**
8
- * Image component provides a wrapper for image tag. Optional lazy loading functionalities can also be enabled passing prop loading = "lazy.
9
- * Once element intersects viewport image loads.
10
- *
11
- * @param {string} [alt=""] - string that contains the alt text. Required.
12
- * @param {string} [src=""] - string that contains the src text. Required.
13
- * @param {string} [id=""] - string that contains the id text.
14
- * @param {Function} [onLoad=()=>{}] - function that contains load callback. Doesn't fire on SSR https://github.com/facebook/react/issues/15446
15
- * @param {Function} [onError=()=>{}] - function that contains error callback. Doesn't fire on SSR https://github.com/facebook/react/issues/15446
16
- * @param {boolean} [loading="lazy"] - This attribute follows the loading API attribute. If set to eager image will load immediately just like a normal image tag otherwise it will lazy load.
17
- * @usage `<Image alt="alt" src="src" id="id1" onLoad={()=>{}} onError={())=>{}} loading="lazy" />`
18
- */
19
-
20
- export const EmptyTransparentImage =
21
- 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
22
-
23
- const Image = ({ id, src, alt, onLoad, onError, className, loading, stretch, role, shrink }) => {
24
- const elementReference = useRef();
25
- const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
26
- let imageSource = src;
27
- let imageOnLoad = onLoad;
28
-
29
- if (loading === 'lazy' && !hasIntersected) {
30
- imageSource = EmptyTransparentImage;
31
- imageOnLoad = null;
32
- }
33
-
34
- return (
35
- <img
36
- ref={elementReference}
37
- id={id}
38
- alt={alt}
39
- src={imageSource}
40
- className={classnames([
41
- 'tw-image',
42
- {
43
- 'tw-image__stretch': stretch,
44
- 'tw-image__shrink': shrink,
45
- },
46
- className,
47
- ])}
48
- role={role}
49
- onLoad={imageOnLoad}
50
- onError={onError}
51
- />
52
- );
53
- };
54
-
55
- Image.propTypes = {
56
- id: PropTypes.string,
57
- src: PropTypes.string.isRequired,
58
- alt: PropTypes.string.isRequired,
59
- onLoad: PropTypes.func,
60
- onError: PropTypes.func,
61
- className: PropTypes.string,
62
- loading: PropTypes.oneOf(['lazy', 'eager']),
63
- stretch: PropTypes.bool,
64
- shrink: PropTypes.bool,
65
- role: PropTypes.string,
66
- };
67
-
68
- Image.defaultProps = {
69
- id: null,
70
- className: '',
71
- onLoad: () => {},
72
- onError: () => {},
73
- loading: 'eager',
74
- stretch: true,
75
- shrink: true,
76
- };
77
-
78
- export default Image;
package/src/inlineAlert/InlineAlert.js DELETED
@@ -1,62 +0,0 @@
1
- import { AlertCircle as AlertCircleIcon } from '@transferwise/icons';
2
- import { useTheme } from '@wise/components-theming';
3
- import classNames from 'classnames';
4
- import PropTypes from 'prop-types';
5
-
6
- import withArrow, { AlertArrowPosition } from '../alert/withArrow';
7
- import { Sentiment } from '../common';
8
-
9
- const typeClassMap = {
10
- [Sentiment.ERROR]: 'danger',
11
- [Sentiment.NEGATIVE]: 'danger',
12
- };
13
-
14
- const InlineAlert = (props) => {
15
- const { isModern } = useTheme();
16
-
17
- const typeClass = `alert-${typeClassMap[props.type] || props.type}`;
18
-
19
- if (isModern) {
20
- return (
21
- <div
22
- role="alert"
23
- id={props.id}
24
- className={classNames('alert alert-detach', typeClass, props.className)}
25
- >
26
- {(props.type === 'error' || props.type === 'negative') && <AlertCircleIcon />}
27
- <div>{props.children}</div>
28
- </div>
29
- );
30
- }
31
-
32
- const getAlertContents = ({ children, className }) => {
33
- return (
34
- <div
35
- role="alert"
36
- id={props.id}
37
- className={classNames('alert alert-detach p-x-2 p-y-1', typeClass, className)}
38
- >
39
- {children}
40
- </div>
41
- );
42
- };
43
-
44
- const AlertWithArrow = withArrow(getAlertContents, AlertArrowPosition.TOP_LEFT);
45
-
46
- return <AlertWithArrow {...props} />;
47
- };
48
-
49
- InlineAlert.propTypes = {
50
- children: PropTypes.node.isRequired,
51
- className: PropTypes.string,
52
- id: PropTypes.string,
53
- type: PropTypes.oneOf(['positive', 'negative', 'warning', 'neutral', 'success', 'info', 'error']),
54
- };
55
-
56
- InlineAlert.defaultProps = {
57
- className: undefined,
58
- id: undefined,
59
- type: Sentiment.NEUTRAL,
60
- };
61
-
62
- export default InlineAlert;
/package/src/avatarWrapper/{index.js → index.ts} RENAMED
File without changes
/package/src/image/{index.js → index.ts} RENAMED
File without changes
/package/src/inlineAlert/{index.js → index.ts} RENAMED
File without changes