@transferwise/components 46.83.2 → 46.84.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 (108) hide show
  1. package/build/common/Option/Option.js +8 -2
  2. package/build/common/Option/Option.js.map +1 -1
  3. package/build/common/Option/Option.mjs +8 -2
  4. package/build/common/Option/Option.mjs.map +1 -1
  5. package/build/common/closeButton/CloseButton.js.map +1 -1
  6. package/build/common/closeButton/CloseButton.mjs.map +1 -1
  7. package/build/flowNavigation/FlowNavigation.js +8 -3
  8. package/build/flowNavigation/FlowNavigation.js.map +1 -1
  9. package/build/flowNavigation/FlowNavigation.mjs +8 -3
  10. package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
  11. package/build/i18n/de.json +5 -0
  12. package/build/i18n/de.json.js +5 -0
  13. package/build/i18n/de.json.js.map +1 -1
  14. package/build/i18n/de.json.mjs +5 -0
  15. package/build/i18n/de.json.mjs.map +1 -1
  16. package/build/i18n/fr.json +6 -1
  17. package/build/i18n/fr.json.js +6 -1
  18. package/build/i18n/fr.json.js.map +1 -1
  19. package/build/i18n/fr.json.mjs +6 -1
  20. package/build/i18n/fr.json.mjs.map +1 -1
  21. package/build/i18n/it.json +5 -0
  22. package/build/i18n/it.json.js +5 -0
  23. package/build/i18n/it.json.js.map +1 -1
  24. package/build/i18n/it.json.mjs +5 -0
  25. package/build/i18n/it.json.mjs.map +1 -1
  26. package/build/i18n/pt.json +5 -0
  27. package/build/i18n/pt.json.js +5 -0
  28. package/build/i18n/pt.json.js.map +1 -1
  29. package/build/i18n/pt.json.mjs +5 -0
  30. package/build/i18n/pt.json.mjs.map +1 -1
  31. package/build/i18n/ru.json +5 -0
  32. package/build/i18n/ru.json.js +5 -0
  33. package/build/i18n/ru.json.js.map +1 -1
  34. package/build/i18n/ru.json.mjs +5 -0
  35. package/build/i18n/ru.json.mjs.map +1 -1
  36. package/build/iconButton/IconButton.js +41 -0
  37. package/build/iconButton/IconButton.js.map +1 -0
  38. package/build/iconButton/IconButton.mjs +39 -0
  39. package/build/iconButton/IconButton.mjs.map +1 -0
  40. package/build/index.js +2 -0
  41. package/build/index.js.map +1 -1
  42. package/build/index.mjs +1 -0
  43. package/build/index.mjs.map +1 -1
  44. package/build/main.css +86 -32
  45. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +83 -0
  46. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -0
  47. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +81 -0
  48. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -0
  49. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +90 -0
  50. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -0
  51. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +88 -0
  52. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -0
  53. package/build/styles/iconButton/IconButton.css +82 -0
  54. package/build/styles/main.css +86 -32
  55. package/build/styles/summary/Summary.css +4 -0
  56. package/build/summary/Summary.js +3 -3
  57. package/build/summary/Summary.js.map +1 -1
  58. package/build/summary/Summary.mjs +3 -3
  59. package/build/summary/Summary.mjs.map +1 -1
  60. package/build/types/common/Option/Option.d.ts.map +1 -1
  61. package/build/types/common/closeButton/CloseButton.d.ts +3 -0
  62. package/build/types/common/closeButton/CloseButton.d.ts.map +1 -1
  63. package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
  64. package/build/types/iconButton/IconButton.d.ts +15 -0
  65. package/build/types/iconButton/IconButton.d.ts.map +1 -0
  66. package/build/types/iconButton/index.d.ts +3 -0
  67. package/build/types/iconButton/index.d.ts.map +1 -0
  68. package/build/types/index.d.ts +2 -0
  69. package/build/types/index.d.ts.map +1 -1
  70. package/build/types/summary/Summary.d.ts.map +1 -1
  71. package/package.json +3 -3
  72. package/src/accordion/AccordionItem/__snapshots__/AccordionItem.spec.js.snap +8 -4
  73. package/src/card/Card.spec.tsx +3 -1
  74. package/src/common/Option/Option.tsx +11 -1
  75. package/src/common/closeButton/CloseButton.tsx +3 -0
  76. package/src/flowNavigation/FlowNavigation.spec.js +7 -8
  77. package/src/flowNavigation/FlowNavigation.tsx +11 -2
  78. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +27 -3
  79. package/src/i18n/de.json +5 -0
  80. package/src/i18n/fr.json +6 -1
  81. package/src/i18n/it.json +5 -0
  82. package/src/i18n/pt.json +5 -0
  83. package/src/i18n/ru.json +5 -0
  84. package/src/iconButton/IconButton.css +82 -0
  85. package/src/iconButton/IconButton.less +55 -0
  86. package/src/iconButton/IconButton.story.tsx +107 -0
  87. package/src/iconButton/IconButton.tsx +51 -0
  88. package/src/iconButton/index.ts +2 -0
  89. package/src/index.ts +2 -0
  90. package/src/main.css +86 -32
  91. package/src/main.less +1 -1
  92. package/src/summary/Summary.css +4 -0
  93. package/src/summary/Summary.less +3 -0
  94. package/src/summary/Summary.story.tsx +13 -3
  95. package/src/summary/Summary.tsx +13 -11
  96. package/build/flowNavigation/backButton/BackButton.js +0 -30
  97. package/build/flowNavigation/backButton/BackButton.js.map +0 -1
  98. package/build/flowNavigation/backButton/BackButton.mjs +0 -28
  99. package/build/flowNavigation/backButton/BackButton.mjs.map +0 -1
  100. package/build/styles/flowNavigation/backButton/BackButton.css +0 -32
  101. package/build/types/flowNavigation/backButton/BackButton.d.ts +0 -7
  102. package/build/types/flowNavigation/backButton/BackButton.d.ts.map +0 -1
  103. package/build/types/flowNavigation/backButton/index.d.ts +0 -3
  104. package/build/types/flowNavigation/backButton/index.d.ts.map +0 -1
  105. package/src/flowNavigation/backButton/BackButton.css +0 -32
  106. package/src/flowNavigation/backButton/BackButton.less +0 -36
  107. package/src/flowNavigation/backButton/BackButton.tsx +0 -29
  108. package/src/flowNavigation/backButton/index.ts +0 -2
package/src/summary/Summary.story.tsx CHANGED
@@ -38,7 +38,7 @@ export const Basic = () => {
38
38
  'aria-label': ' Click here to change address',
39
39
  }}
40
40
  as="li"
41
- description="10 Downing Street, Westminster, London SW1A 2AA."
41
+ description={description}
42
42
  info={{
43
43
  title: 'You entered your address',
44
44
  content: 'Your address has been verified, no more actions are required.',
@@ -58,7 +58,7 @@ export const Basic = () => {
58
58
  'aria-label': ' Click here to change address',
59
59
  }}
60
60
  as="li"
61
- description="10 Downing Street, Westminster, London SW1A 2AA."
61
+ description={description}
62
62
  info={{
63
63
  title: 'Address verification pending',
64
64
  content:
@@ -80,11 +80,21 @@ export const Basic = () => {
80
80
  target: '_blank',
81
81
  }}
82
82
  as="li"
83
- description="10 Downing Street, Westminster, London SW1A 2AA."
83
+ description={description}
84
84
  icon={<HomeIcon size={24} />}
85
85
  title="We’re verifying your address"
86
86
  status={Status.PENDING}
87
87
  />
88
+ <Summary
89
+ action={{
90
+ text: actionText,
91
+ href: '#change-address',
92
+ 'aria-label': ' Click here to change address',
93
+ }}
94
+ as="li"
95
+ description={description}
96
+ title={title}
97
+ />
88
98
  </ul>
89
99
  );
90
100
  };
package/src/summary/Summary.tsx CHANGED
@@ -124,16 +124,18 @@ const Summary = ({
124
124
  // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
125
125
  aria-label={status && intl.formatMessage(messages[statusLabels[status]])}
126
126
  >
127
- <div className="np-summary__icon">
128
- {media}
129
- {Badge && (
130
- <div>
131
- {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}
132
- <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />
133
- </div>
134
- )}
135
- </div>
136
- <div className="np-summary__body m-l-2">
127
+ {icon && (
128
+ <div className="np-summary__icon">
129
+ {media}
130
+ {Badge && (
131
+ <div>
132
+ {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}
133
+ <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />
134
+ </div>
135
+ )}
136
+ </div>
137
+ )}
138
+ <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>
137
139
  <div className="np-summary__title d-flex">
138
140
  <Body
139
141
  as="span"
@@ -161,7 +163,7 @@ const Summary = ({
161
163
  <Body
162
164
  as="span"
163
165
  type={Typography.BODY_DEFAULT}
164
- className="d-block np-summary__description"
166
+ className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
165
167
  >
166
168
  {description}
167
169
  </Body>
package/build/flowNavigation/backButton/BackButton.js DELETED
@@ -1,30 +0,0 @@
1
- 'use strict';
2
-
3
- var icons = require('@transferwise/icons');
4
- var clsx = require('clsx');
5
- var avatarTypes = require('../../avatar/avatarTypes.js');
6
- var Avatar = require('../../avatar/Avatar.js');
7
- var jsxRuntime = require('react/jsx-runtime');
8
-
9
- function BackButton({
10
- className,
11
- onClick,
12
- 'aria-label': ariaLabel
13
- }) {
14
- return /*#__PURE__*/jsxRuntime.jsx(Avatar, {
15
- type: avatarTypes.AvatarType.ICON,
16
- size: 40,
17
- children: /*#__PURE__*/jsxRuntime.jsx("button", {
18
- type: "button",
19
- "aria-label": ariaLabel,
20
- className: clsx.clsx('np-back-button', 'btn-unstyled', className),
21
- onClick: onClick,
22
- children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {
23
- size: 24
24
- })
25
- })
26
- });
27
- }
28
-
29
- module.exports = BackButton;
30
- //# sourceMappingURL=BackButton.js.map
package/build/flowNavigation/backButton/BackButton.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"BackButton.js","sources":["../../../src/flowNavigation/backButton/BackButton.tsx"],"sourcesContent":["import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../../avatar';\n\nexport interface BackButtonProps {\n 'aria-label': string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function BackButton({\n className,\n onClick,\n 'aria-label': ariaLabel,\n}: BackButtonProps) {\n return (\n <Avatar type={AvatarType.ICON} size={40}>\n <button\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx('np-back-button', 'btn-unstyled', className)}\n onClick={onClick}\n >\n <ArrowLeftIcon size={24} />\n </button>\n </Avatar>\n );\n}\n"],"names":["BackButton","className","onClick","ariaLabel","_jsx","Avatar","type","AvatarType","ICON","size","children","clsx","ArrowLeftIcon"],"mappings":";;;;;;;;AAWwB,SAAAA,UAAUA,CAAC;EACjCC,SAAS;EACTC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACE,CAAA,EAAA;EAChB,oBACEC,cAAA,CAACC,MAAM,EAAA;IAACC,IAAI,EAAEC,sBAAU,CAACC,IAAK;AAACC,IAAAA,IAAI,EAAE,EAAG;AAAAC,IAAAA,QAAA,eACtCN,cAAA,CAAA,QAAA,EAAA;AACEE,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYH,SAAU;MACtBF,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAE,cAAc,EAAEV,SAAS,CAAE;AAC7DC,MAAAA,OAAO,EAAEA,OAAQ;MAAAQ,QAAA,eAEjBN,cAAA,CAACQ,eAAa,EAAA;AAACH,QAAAA,IAAI,EAAE,EAAA;OACvB,CAAA;KAAQ,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
package/build/flowNavigation/backButton/BackButton.mjs DELETED
@@ -1,28 +0,0 @@
1
- import { ArrowLeft } from '@transferwise/icons';
2
- import { clsx } from 'clsx';
3
- import { AvatarType } from '../../avatar/avatarTypes.mjs';
4
- import Avatar from '../../avatar/Avatar.mjs';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- function BackButton({
8
- className,
9
- onClick,
10
- 'aria-label': ariaLabel
11
- }) {
12
- return /*#__PURE__*/jsx(Avatar, {
13
- type: AvatarType.ICON,
14
- size: 40,
15
- children: /*#__PURE__*/jsx("button", {
16
- type: "button",
17
- "aria-label": ariaLabel,
18
- className: clsx('np-back-button', 'btn-unstyled', className),
19
- onClick: onClick,
20
- children: /*#__PURE__*/jsx(ArrowLeft, {
21
- size: 24
22
- })
23
- })
24
- });
25
- }
26
-
27
- export { BackButton as default };
28
- //# sourceMappingURL=BackButton.mjs.map
package/build/flowNavigation/backButton/BackButton.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"BackButton.mjs","sources":["../../../src/flowNavigation/backButton/BackButton.tsx"],"sourcesContent":["import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../../avatar';\n\nexport interface BackButtonProps {\n 'aria-label': string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function BackButton({\n className,\n onClick,\n 'aria-label': ariaLabel,\n}: BackButtonProps) {\n return (\n <Avatar type={AvatarType.ICON} size={40}>\n <button\n type=\"button\"\n aria-label={ariaLabel}\n className={clsx('np-back-button', 'btn-unstyled', className)}\n onClick={onClick}\n >\n <ArrowLeftIcon size={24} />\n </button>\n </Avatar>\n );\n}\n"],"names":["BackButton","className","onClick","ariaLabel","_jsx","Avatar","type","AvatarType","ICON","size","children","clsx","ArrowLeftIcon"],"mappings":";;;;;;AAWwB,SAAAA,UAAUA,CAAC;EACjCC,SAAS;EACTC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACE,CAAA,EAAA;EAChB,oBACEC,GAAA,CAACC,MAAM,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,IAAK;AAACC,IAAAA,IAAI,EAAE,EAAG;AAAAC,IAAAA,QAAA,eACtCN,GAAA,CAAA,QAAA,EAAA;AACEE,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYH,SAAU;MACtBF,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAE,cAAc,EAAEV,SAAS,CAAE;AAC7DC,MAAAA,OAAO,EAAEA,OAAQ;MAAAQ,QAAA,eAEjBN,GAAA,CAACQ,SAAa,EAAA;AAACH,QAAAA,IAAI,EAAE,EAAA;OACvB,CAAA;KAAQ,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}
package/build/styles/flowNavigation/backButton/BackButton.css DELETED
@@ -1,32 +0,0 @@
1
- .np-back-button {
2
- color: #00a2dd;
3
- color: var(--color-interactive-accent);
4
- display: flex !important;
5
- }
6
- .np-back-button:hover {
7
- color: #008fc9;
8
- color: var(--color-interactive-accent-hover);
9
- }
10
- .np-back-button:active {
11
- color: #0081ba;
12
- color: var(--color-interactive-accent-active);
13
- }
14
- .np-theme-personal .np-back-button {
15
- color: #37517e;
16
- color: var(--color-content-primary);
17
- }
18
- .np-theme-personal .np-back-button:hover {
19
- color: var(--color-content-primary-hover);
20
- }
21
- .np-theme-personal .np-back-button:active {
22
- color: var(--color-content-primary-active);
23
- }
24
- .np-theme-personal .np-back-button .tw-icon {
25
- color: var(--color-interactive-primary);
26
- }
27
- .np-theme-personal .np-back-button .tw-icon:hover {
28
- color: var(--color-interactive-primary-hover);
29
- }
30
- .np-theme-personal .np-back-button .tw-icon:active {
31
- color: var(--color-interactive-primary-active);
32
- }
package/build/types/flowNavigation/backButton/BackButton.d.ts DELETED
@@ -1,7 +0,0 @@
1
- export interface BackButtonProps {
2
- 'aria-label': string;
3
- className?: string;
4
- onClick?: React.MouseEventHandler<HTMLButtonElement>;
5
- }
6
- export default function BackButton({ className, onClick, 'aria-label': ariaLabel, }: BackButtonProps): import("react").JSX.Element;
7
- //# sourceMappingURL=BackButton.d.ts.map
package/build/types/flowNavigation/backButton/BackButton.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,SAAS,EACT,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,+BAajB"}
package/build/types/flowNavigation/backButton/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export { default } from './BackButton';
2
- export type { BackButtonProps } from './BackButton';
3
- //# sourceMappingURL=index.d.ts.map
package/build/types/flowNavigation/backButton/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}
package/src/flowNavigation/backButton/BackButton.css DELETED
@@ -1,32 +0,0 @@
1
- .np-back-button {
2
- color: #00a2dd;
3
- color: var(--color-interactive-accent);
4
- display: flex !important;
5
- }
6
- .np-back-button:hover {
7
- color: #008fc9;
8
- color: var(--color-interactive-accent-hover);
9
- }
10
- .np-back-button:active {
11
- color: #0081ba;
12
- color: var(--color-interactive-accent-active);
13
- }
14
- .np-theme-personal .np-back-button {
15
- color: #37517e;
16
- color: var(--color-content-primary);
17
- }
18
- .np-theme-personal .np-back-button:hover {
19
- color: var(--color-content-primary-hover);
20
- }
21
- .np-theme-personal .np-back-button:active {
22
- color: var(--color-content-primary-active);
23
- }
24
- .np-theme-personal .np-back-button .tw-icon {
25
- color: var(--color-interactive-primary);
26
- }
27
- .np-theme-personal .np-back-button .tw-icon:hover {
28
- color: var(--color-interactive-primary-hover);
29
- }
30
- .np-theme-personal .np-back-button .tw-icon:active {
31
- color: var(--color-interactive-primary-active);
32
- }
package/src/flowNavigation/backButton/BackButton.less DELETED
@@ -1,36 +0,0 @@
1
- .np-back-button {
2
- color: var(--color-interactive-accent);
3
- display: flex !important;
4
-
5
- &:hover {
6
- color: var(--color-interactive-accent-hover);
7
- }
8
-
9
- &:active {
10
- color: var(--color-interactive-accent-active);
11
- }
12
-
13
- .np-theme-personal & {
14
- color: var(--color-content-primary);
15
-
16
- &:hover {
17
- color: var(--color-content-primary-hover);
18
- }
19
-
20
- &:active {
21
- color: var(--color-content-primary-active);
22
- }
23
-
24
- & .tw-icon {
25
- color: var(--color-interactive-primary);
26
-
27
- &:hover {
28
- color: var(--color-interactive-primary-hover);
29
- }
30
-
31
- &:active {
32
- color: var(--color-interactive-primary-active);
33
- }
34
- }
35
- }
36
- }
package/src/flowNavigation/backButton/BackButton.tsx DELETED
@@ -1,29 +0,0 @@
1
- import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
2
- import { clsx } from 'clsx';
3
-
4
- import Avatar, { AvatarType } from '../../avatar';
5
-
6
- export interface BackButtonProps {
7
- 'aria-label': string;
8
- className?: string;
9
- onClick?: React.MouseEventHandler<HTMLButtonElement>;
10
- }
11
-
12
- export default function BackButton({
13
- className,
14
- onClick,
15
- 'aria-label': ariaLabel,
16
- }: BackButtonProps) {
17
- return (
18
- <Avatar type={AvatarType.ICON} size={40}>
19
- <button
20
- type="button"
21
- aria-label={ariaLabel}
22
- className={clsx('np-back-button', 'btn-unstyled', className)}
23
- onClick={onClick}
24
- >
25
- <ArrowLeftIcon size={24} />
26
- </button>
27
- </Avatar>
28
- );
29
- }
package/src/flowNavigation/backButton/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export { default } from './BackButton';
2
- export type { BackButtonProps } from './BackButton';