@transferwise/components 46.95.2 → 46.96.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.
- package/build/alert/Alert.js +18 -6
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +18 -6
- package/build/alert/Alert.mjs.map +1 -1
- package/build/link/Link.js +32 -4
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +32 -4
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +2 -16
- package/build/nudge/Nudge.js +8 -4
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +8 -4
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +6 -5
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +6 -5
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/styles/link/Link.css +2 -1
- package/build/styles/main.css +2 -16
- package/build/styles/stepper/Stepper.css +0 -7
- package/build/styles/summary/Summary.css +0 -4
- package/build/summary/Summary.js +8 -4
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +8 -4
- package/build/summary/Summary.mjs.map +1 -1
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/link/Link.d.ts +2 -2
- package/build/types/link/Link.d.ts.map +1 -1
- package/build/types/nudge/Nudge.d.ts +2 -2
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/summary/Summary.d.ts +2 -2
- package/build/types/summary/Summary.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.tsx +27 -10
- package/src/dateLookup/DateLookup.less +0 -1
- package/src/decision/Decision.spec.tsx +2 -2
- package/src/decision/Decision.story.tsx +10 -46
- package/src/flowNavigation/FlowNavigation.spec.js +3 -7
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +8 -4
- package/src/link/Link.css +2 -1
- package/src/link/Link.less +1 -1
- package/src/link/Link.spec.tsx +32 -1
- package/src/link/Link.story.tsx +12 -0
- package/src/link/Link.tsx +17 -6
- package/src/main.css +2 -16
- package/src/navigationOption/NavigationOption.story.tsx +30 -53
- package/src/nudge/Nudge.tsx +15 -3
- package/src/overlayHeader/OverlayHeader.spec.tsx +5 -8
- package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap +4 -2
- package/src/promoCard/PromoCard.spec.tsx +3 -1
- package/src/promoCard/PromoCardIndicator.tsx +5 -5
- package/src/stepper/Stepper.css +0 -7
- package/src/stepper/Stepper.less +0 -8
- package/src/summary/Summary.css +0 -4
- package/src/summary/Summary.less +0 -2
- package/src/summary/Summary.tsx +14 -3
- package/src/tile/Tile.story.tsx +2 -6
- package/build/common/action/Action.js +0 -53
- package/build/common/action/Action.js.map +0 -1
- package/build/common/action/Action.mjs +0 -51
- package/build/common/action/Action.mjs.map +0 -1
- package/build/types/common/action/Action.d.ts +0 -18
- package/build/types/common/action/Action.d.ts.map +0 -1
- package/src/common/action/Action.tsx +0 -74
|
@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var icons = require('@transferwise/icons');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
|
-
var avatarTypes = require('../avatar/avatarTypes.js');
|
|
8
|
-
var Avatar = require('../avatar/Avatar.js');
|
|
9
7
|
var Body = require('../body/Body.js');
|
|
10
8
|
require('../common/theme.js');
|
|
11
9
|
require('../common/direction.js');
|
|
@@ -30,6 +28,7 @@ require('react');
|
|
|
30
28
|
require('react-intl');
|
|
31
29
|
require('../common/closeButton/CloseButton.messages.js');
|
|
32
30
|
var jsxRuntime = require('react/jsx-runtime');
|
|
31
|
+
var AvatarView = require('../avatarView/AvatarView.js');
|
|
33
32
|
|
|
34
33
|
const PromoCardIndicator = ({
|
|
35
34
|
className,
|
|
@@ -55,10 +54,12 @@ const PromoCardIndicator = ({
|
|
|
55
54
|
type: typography.Typography.BODY_LARGE_BOLD,
|
|
56
55
|
className: "np-Card-indicatorText",
|
|
57
56
|
children: label
|
|
58
|
-
}), icon && /*#__PURE__*/jsxRuntime.jsx(
|
|
59
|
-
|
|
57
|
+
}), icon && /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
58
|
+
interactive: true,
|
|
60
59
|
size: isSmall ? 40 : 56,
|
|
61
|
-
|
|
60
|
+
style: {
|
|
61
|
+
backgroundColor: 'var(--Card-indicator-icon-background-color)'
|
|
62
|
+
},
|
|
62
63
|
className: "np-Card-indicatorIcon",
|
|
63
64
|
children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
|
|
64
65
|
size: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport AvatarView from '../avatarView';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <AvatarView\n interactive\n size={isSmall ? 40 : 56}\n style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </AvatarView>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC,cAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,cAAA,CAACC,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,kBAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE,6CAAA;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGtB,IAAAA;KACxD,CACb,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { Check, ArrowRight, Download } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import { AvatarType } from '../avatar/avatarTypes.mjs';
|
|
4
|
-
import Avatar from '../avatar/Avatar.mjs';
|
|
5
3
|
import Body from '../body/Body.mjs';
|
|
6
4
|
import '../common/theme.mjs';
|
|
7
5
|
import '../common/direction.mjs';
|
|
@@ -26,6 +24,7 @@ import 'react';
|
|
|
26
24
|
import 'react-intl';
|
|
27
25
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
28
26
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
27
|
+
import AvatarView from '../avatarView/AvatarView.mjs';
|
|
29
28
|
|
|
30
29
|
const PromoCardIndicator = ({
|
|
31
30
|
className,
|
|
@@ -51,10 +50,12 @@ const PromoCardIndicator = ({
|
|
|
51
50
|
type: Typography.BODY_LARGE_BOLD,
|
|
52
51
|
className: "np-Card-indicatorText",
|
|
53
52
|
children: label
|
|
54
|
-
}), icon && /*#__PURE__*/jsx(
|
|
55
|
-
|
|
53
|
+
}), icon && /*#__PURE__*/jsx(AvatarView, {
|
|
54
|
+
interactive: true,
|
|
56
55
|
size: isSmall ? 40 : 56,
|
|
57
|
-
|
|
56
|
+
style: {
|
|
57
|
+
backgroundColor: 'var(--Card-indicator-icon-background-color)'
|
|
58
|
+
},
|
|
58
59
|
className: "np-Card-indicatorIcon",
|
|
59
60
|
children: IconComponent ? /*#__PURE__*/jsx(IconComponent, {
|
|
60
61
|
size: 24,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCardIndicator.mjs","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport
|
|
1
|
+
{"version":3,"file":"PromoCardIndicator.mjs","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport AvatarView from '../avatarView';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <AvatarView\n interactive\n size={isSmall ? 40 : 56}\n style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </AvatarView>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","AvatarView","interactive","size","style","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,KAAK;AACZC,IAAAA,KAAK,EAAEC,UAAU;AACjBC,IAAAA,QAAQ,EAAEC,QAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,IAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,IAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,GAAA,CAACM,UAAU,EAAA;MACTC,WAAW,EAAA,IAAA;AACXC,MAAAA,IAAI,EAAErB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBsB,MAAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,EAAE,6CAAA;OAAgD;AAC1E3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,GAAA,CAACT,aAAa,EAAA;AAACiB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGtB,IAAAA;KACxD,CACb,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
|
package/build/styles/main.css
CHANGED
|
@@ -34,10 +34,6 @@
|
|
|
34
34
|
margin-left: var(--padding-small);
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
.tw-date-lookup-calendar > tbody > tr > td.weekend button {
|
|
38
|
-
font-size: 0.875rem;
|
|
39
|
-
font-size: var(--font-size-14);line-height: 155%;letter-spacing: -0.006em;font-weight: 400;font-weight: var(--font-weight-regular);
|
|
40
|
-
}
|
|
41
37
|
@media (min-width: 768px) {
|
|
42
38
|
}
|
|
43
39
|
@media (min-width: 768px) {
|
|
@@ -3106,7 +3102,8 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
3106
3102
|
.tw-instructions .instruction .dont {
|
|
3107
3103
|
color: var(--color-sentiment-negative);
|
|
3108
3104
|
}
|
|
3109
|
-
a
|
|
3105
|
+
a,
|
|
3106
|
+
button.np-link {
|
|
3110
3107
|
border-radius: 2px;
|
|
3111
3108
|
}
|
|
3112
3109
|
.np-link .tw-icon {
|
|
@@ -4541,13 +4538,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
4541
4538
|
transition: width 0.6s ease-in-out;
|
|
4542
4539
|
will-change: width;
|
|
4543
4540
|
}
|
|
4544
|
-
.btn-unstyled {
|
|
4545
|
-
background: none;
|
|
4546
|
-
border: none;
|
|
4547
|
-
margin: 0;
|
|
4548
|
-
padding: 0;
|
|
4549
|
-
display: block;
|
|
4550
|
-
}
|
|
4551
4541
|
.np-select .np-dropdown-toggle {
|
|
4552
4542
|
background-color: #ffffff;
|
|
4553
4543
|
background-color: var(--color-background-screen);
|
|
@@ -5093,10 +5083,6 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5093
5083
|
.np-summary__action {
|
|
5094
5084
|
margin-top: 4px;
|
|
5095
5085
|
margin-top: var(--size-4);
|
|
5096
|
-
font-size: 0.875rem;
|
|
5097
|
-
font-size: var(--font-size-14);
|
|
5098
|
-
font-weight: 600;
|
|
5099
|
-
font-weight: var(--font-weight-semi-bold);
|
|
5100
5086
|
}
|
|
5101
5087
|
.np-summary + .np-summary {
|
|
5102
5088
|
margin-top: 24px;
|
|
@@ -74,10 +74,6 @@
|
|
|
74
74
|
.np-summary__action {
|
|
75
75
|
margin-top: 4px;
|
|
76
76
|
margin-top: var(--size-4);
|
|
77
|
-
font-size: 0.875rem;
|
|
78
|
-
font-size: var(--font-size-14);
|
|
79
|
-
font-weight: 600;
|
|
80
|
-
font-weight: var(--font-weight-semi-bold);
|
|
81
77
|
}
|
|
82
78
|
.np-summary + .np-summary {
|
|
83
79
|
margin-top: 24px;
|
package/build/summary/Summary.js
CHANGED
|
@@ -32,7 +32,7 @@ require('../info/infoPresentations.js');
|
|
|
32
32
|
var Info = require('../info/Info.js');
|
|
33
33
|
var StatusIcon = require('../statusIcon/StatusIcon.js');
|
|
34
34
|
var Summary_messages = require('./Summary.messages.js');
|
|
35
|
-
var
|
|
35
|
+
var Link = require('../link/Link.js');
|
|
36
36
|
|
|
37
37
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
|
|
38
38
|
const BadgeIcons = {
|
|
@@ -113,9 +113,13 @@ const Summary = ({
|
|
|
113
113
|
type: typography.Typography.BODY_DEFAULT,
|
|
114
114
|
className: `d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
|
|
115
115
|
children: description
|
|
116
|
-
}), action && /*#__PURE__*/jsxRuntime.jsx(
|
|
117
|
-
|
|
118
|
-
|
|
116
|
+
}), action && /*#__PURE__*/jsxRuntime.jsx(Link.default, {
|
|
117
|
+
href: action.href,
|
|
118
|
+
target: action.target,
|
|
119
|
+
className: "np-summary__action",
|
|
120
|
+
"aria-label": action['aria-label'],
|
|
121
|
+
onClick: action.onClick,
|
|
122
|
+
children: action.text
|
|
119
123
|
})]
|
|
120
124
|
}), info && /*#__PURE__*/jsxRuntime.jsx(Info.default, {
|
|
121
125
|
"aria-label": info['aria-label'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport {
|
|
1
|
+
{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
|
|
@@ -28,7 +28,7 @@ import '../info/infoPresentations.mjs';
|
|
|
28
28
|
import Info from '../info/Info.mjs';
|
|
29
29
|
import StatusIcon from '../statusIcon/StatusIcon.mjs';
|
|
30
30
|
import messages from './Summary.messages.mjs';
|
|
31
|
-
import
|
|
31
|
+
import Link from '../link/Link.mjs';
|
|
32
32
|
|
|
33
33
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
|
|
34
34
|
const BadgeIcons = {
|
|
@@ -109,9 +109,13 @@ const Summary = ({
|
|
|
109
109
|
type: Typography.BODY_DEFAULT,
|
|
110
110
|
className: `d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`,
|
|
111
111
|
children: description
|
|
112
|
-
}), action && /*#__PURE__*/jsx(
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
}), action && /*#__PURE__*/jsx(Link, {
|
|
113
|
+
href: action.href,
|
|
114
|
+
target: action.target,
|
|
115
|
+
className: "np-summary__action",
|
|
116
|
+
"aria-label": action['aria-label'],
|
|
117
|
+
onClick: action.onClick,
|
|
118
|
+
children: action.text
|
|
115
119
|
})]
|
|
116
120
|
}), info && /*#__PURE__*/jsx(Info, {
|
|
117
121
|
"aria-label": info['aria-label'],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport {
|
|
1
|
+
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,SAAS,EAAE,IAAI,EAAwC,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,SAAS,EAAE,IAAI,EAAwC,MAAM,WAAW,CAAC;AAU/F,MAAM,MAAM,WAAW,GAAG;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kDAAkD;AAClD,KAAK,mBAAmB,GAAG,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC;AACrF,KAAK,iBAAiB,GAAG,GACrB,SAAS,CAAC,QAAQ,GAClB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,OAAO,GACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;AACzB,MAAM,MAAM,SAAS,GAAG,iBAAiB,GAAG,mBAAmB,CAAC;AAEhE,oBAAY,kBAAkB;IAC5B,QAAQ,YAAY;IACpB,GAAG,cAAc;IACjB,SAAS,aAAa;IACtB,WAAW,cAAc;IACzB,MAAM,gBAAgB;IACtB,YAAY,eAAe;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wGAAwG;IACxG,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;SAGK;IACL,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kGAAkG;IAClG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAChC,oHAAoH;IACpH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2FAA2F;IAC3F,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;CAClB;AAeD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,MAAM,EACN,SAAS,EACT,IAAI,EACJ,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EACL,IAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,WAAW,GACZ,EAAE,UAAU,+BAuIZ"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { PrimitiveAnchorProps } from '../primitives';
|
|
1
|
+
import type { PrimitiveAnchorProps, PrimitiveButtonProps } from '../primitives';
|
|
2
2
|
import { LinkLarge, LinkDefault } from '../common';
|
|
3
|
-
export type Props = PrimitiveAnchorProps & {
|
|
3
|
+
export type Props = PrimitiveAnchorProps & Pick<PrimitiveButtonProps, 'onClick'> & {
|
|
4
4
|
type?: LinkLarge | LinkDefault;
|
|
5
5
|
};
|
|
6
6
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAc,MAAM,WAAW,CAAC;AAI/D,MAAM,MAAM,KAAK,GAAG,oBAAoB,GACtC,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAE7E;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAoCP,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Assets } from '@wise/art';
|
|
2
2
|
import { ReactNode, MouseEvent } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import type { AlertAction } from '../alert';
|
|
4
4
|
export declare const STORAGE_NAME = "dismissedNudges";
|
|
5
5
|
type MediaNameType = `${Assets.GLOBE}` | `${Assets.LOCK}` | `${Assets.WALLET}` | `${Assets.GEAR}` | `${Assets.INVITE_LETTER}` | `${Assets.PERSONAL_CARD}` | `${Assets.BUSINESS_CARD}` | `${Assets.HEART}` | `${Assets.MULTI_CURRENCY}` | `${Assets.SHOPPING_BAG}` | `${Assets.FLOWER}`;
|
|
6
6
|
type BaseProps = {
|
|
@@ -15,7 +15,7 @@ type BaseProps = {
|
|
|
15
15
|
/** Fired when the user clicks on close button */
|
|
16
16
|
onDismiss?: () => void;
|
|
17
17
|
/** An optional call to action to sit under the main body of the nudge. If your label is short, use aria-label to provide more context */
|
|
18
|
-
action?:
|
|
18
|
+
action?: AlertAction;
|
|
19
19
|
className?: string;
|
|
20
20
|
};
|
|
21
21
|
export interface OptionalId extends BaseProps {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,
|
|
1
|
+
{"version":3,"file":"Nudge.d.ts","sourceRoot":"","sources":["../../../src/nudge/Nudge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAqB,MAAM,WAAW,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,eAAO,MAAM,YAAY,oBAAoB,CAAC;AAkB9C,KAAK,aAAa,GACd,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,MAAM,EAAE,GAClB,GAAG,MAAM,CAAC,IAAI,EAAE,GAChB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,aAAa,EAAE,GACzB,GAAG,MAAM,CAAC,KAAK,EAAE,GACjB,GAAG,MAAM,CAAC,cAAc,EAAE,GAC1B,GAAG,MAAM,CAAC,YAAY,EAAE,GACxB,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC;AAEvB,KAAK,SAAS,GAAG;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kBAAkB;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACxD,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yIAAyI;IACzI,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,2IAA2I;IAC3I,EAAE,EAAE,MAAM,CAAC;IACX,yFAAyF;IACzF,gBAAgB,EAAE,IAAI,CAAC;IACvB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,MAAM,KAAK,GAAG,UAAU,GAAG,oBAAoB,CAAC;AAEtD,QAAA,MAAM,KAAK,iIAaR,KAAK,uCA2FP,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ElementType, ReactNode } from 'react';
|
|
2
2
|
import { StatusDone, StatusNotDone, StatusPending } from '../common';
|
|
3
3
|
import { InfoProps } from '../info';
|
|
4
|
-
import {
|
|
4
|
+
import type { AlertAction } from '../alert';
|
|
5
5
|
export interface Props {
|
|
6
6
|
/**
|
|
7
7
|
* Action displayed at the bottom of the Summary
|
|
8
8
|
*/
|
|
9
|
-
action?:
|
|
9
|
+
action?: AlertAction;
|
|
10
10
|
/**
|
|
11
11
|
* Decides which html element should wrap the Summary
|
|
12
12
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAkB5C,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,gCA4FP,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.96.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -95,13 +95,13 @@
|
|
|
95
95
|
"rollup-preserve-directives": "^1.1.1",
|
|
96
96
|
"storybook": "^8.2.2",
|
|
97
97
|
"@transferwise/less-config": "3.1.1",
|
|
98
|
-
"@transferwise/neptune-css": "14.24.1",
|
|
99
98
|
"@wise/components-theming": "1.6.2",
|
|
99
|
+
"@transferwise/neptune-css": "14.24.2",
|
|
100
100
|
"@wise/wds-configs": "0.0.0"
|
|
101
101
|
},
|
|
102
102
|
"peerDependencies": {
|
|
103
103
|
"@transferwise/icons": "^3.20.0",
|
|
104
|
-
"@transferwise/neptune-css": "^14.
|
|
104
|
+
"@transferwise/neptune-css": "^14.24",
|
|
105
105
|
"@wise/art": "^2.16",
|
|
106
106
|
"@wise/components-theming": "^1.0.0",
|
|
107
107
|
"react": ">=18",
|
package/src/alert/Alert.tsx
CHANGED
|
@@ -9,7 +9,8 @@ import Title from '../title/Title';
|
|
|
9
9
|
import { logActionRequired } from '../utilities';
|
|
10
10
|
|
|
11
11
|
import InlineMarkdown from './inlineMarkdown';
|
|
12
|
-
import
|
|
12
|
+
import Button from '../button';
|
|
13
|
+
import Link from '../link';
|
|
13
14
|
|
|
14
15
|
export type AlertAction = {
|
|
15
16
|
'aria-label'?: string;
|
|
@@ -193,15 +194,31 @@ export default function Alert({
|
|
|
193
194
|
{children || <InlineMarkdown>{message}</InlineMarkdown>}
|
|
194
195
|
</Body>
|
|
195
196
|
</div>
|
|
196
|
-
{action &&
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
197
|
+
{action &&
|
|
198
|
+
('href' in action ? (
|
|
199
|
+
<Link
|
|
200
|
+
href={action.href}
|
|
201
|
+
aria-label={action['aria-label']}
|
|
202
|
+
target={action.target}
|
|
203
|
+
type={Typography.LINK_LARGE}
|
|
204
|
+
className="alert__action"
|
|
205
|
+
onClick={action.onClick}
|
|
206
|
+
>
|
|
207
|
+
{action.text}
|
|
208
|
+
</Link>
|
|
209
|
+
) : (
|
|
210
|
+
<Button
|
|
211
|
+
v2
|
|
212
|
+
size="sm"
|
|
213
|
+
sentiment="default"
|
|
214
|
+
aria-label={action['aria-label']}
|
|
215
|
+
priority="secondary-neutral"
|
|
216
|
+
className="alert__action"
|
|
217
|
+
onClick={action.onClick}
|
|
218
|
+
>
|
|
219
|
+
{action.text}
|
|
220
|
+
</Button>
|
|
221
|
+
))}
|
|
205
222
|
</div>
|
|
206
223
|
</div>
|
|
207
224
|
{onDismiss && (
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import Avatar from '../avatar';
|
|
2
1
|
import { Breakpoint, Size } from '../common';
|
|
3
2
|
import { mockMatchMedia } from '../mocks';
|
|
4
3
|
import { render, screen } from '../test-utils';
|
|
5
4
|
|
|
6
5
|
import Decision, { DecisionPresentation, DecisionType } from '.';
|
|
7
6
|
import { DecisionProps } from './Decision';
|
|
7
|
+
import AvatarView from '../avatarView';
|
|
8
8
|
|
|
9
9
|
mockMatchMedia(jest);
|
|
10
10
|
|
|
@@ -13,7 +13,7 @@ describe('Decision', () => {
|
|
|
13
13
|
options: [
|
|
14
14
|
{
|
|
15
15
|
media: {
|
|
16
|
-
list: <
|
|
16
|
+
list: <AvatarView profileName="Henry Mike" />,
|
|
17
17
|
block: <img src="img.jpg" alt="alt" />,
|
|
18
18
|
},
|
|
19
19
|
href: '#href',
|