@transferwise/components 46.94.0 → 46.94.2
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/dateLookup/dateHeader/DateHeader.js +27 -22
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +27 -22
- package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
- package/build/i18n/nl.json +73 -0
- package/build/info/Info.js +7 -13
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs +7 -13
- package/build/info/Info.mjs.map +1 -1
- package/build/main.css +2 -30
- package/build/styles/button/Button.css +2 -2
- package/build/styles/dateLookup/DateLookup.css +0 -5
- package/build/styles/info/Info.css +0 -23
- package/build/styles/main.css +2 -30
- package/build/types/dateLookup/dateHeader/DateHeader.d.ts.map +1 -1
- package/build/types/info/Info.d.ts.map +1 -1
- package/build/types/upload/Upload.d.ts.map +1 -1
- package/build/upload/Upload.js +3 -1
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +3 -1
- package/build/upload/Upload.mjs.map +1 -1
- package/package.json +4 -4
- package/src/button/Button.css +2 -2
- package/src/button/Button.less +2 -2
- package/src/dateLookup/DateLookup.css +0 -5
- package/src/dateLookup/DateLookup.less +0 -4
- package/src/dateLookup/dateHeader/DateHeader.tsx +24 -26
- package/src/i18n/nl.json +73 -0
- package/src/info/Info.css +0 -23
- package/src/info/Info.less +0 -28
- package/src/info/Info.tsx +8 -14
- package/src/listItem/ListItem.story.tsx +4 -9
- package/src/main.css +2 -30
- package/src/upload/Upload.spec.tsx +293 -0
- package/src/upload/Upload.tsx +5 -1
- package/src/upload/steps/completeStep/completeStep.spec.tsx +51 -0
- package/src/upload/steps/processingStep/processingStep.spec.tsx +59 -0
- package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx +79 -0
- package/src/upload/Upload.events.spec.js +0 -49
- package/src/upload/Upload.spec.js +0 -305
- package/src/upload/steps/completeStep/completeStep.spec.js +0 -51
- package/src/upload/steps/processingStep/processingStep.spec.js +0 -55
- package/src/upload/steps/uploadImageStep/uploadImageStep.spec.js +0 -91
|
@@ -2,18 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var reactIntl = require('react-intl');
|
|
5
|
-
var Chevron = require('../../chevron/Chevron.js');
|
|
6
5
|
require('../../common/theme.js');
|
|
7
6
|
require('../../common/direction.js');
|
|
8
7
|
require('../../common/propsValues/control.js');
|
|
9
8
|
require('../../common/propsValues/breakpoint.js');
|
|
10
|
-
|
|
9
|
+
require('../../common/propsValues/size.js');
|
|
11
10
|
var typography = require('../../common/propsValues/typography.js');
|
|
12
11
|
require('../../common/propsValues/width.js');
|
|
13
12
|
require('../../common/propsValues/type.js');
|
|
14
13
|
require('../../common/propsValues/dateMode.js');
|
|
15
14
|
require('../../common/propsValues/monthFormat.js');
|
|
16
|
-
|
|
15
|
+
require('../../common/propsValues/position.js');
|
|
17
16
|
require('../../common/propsValues/layouts.js');
|
|
18
17
|
require('../../common/propsValues/status.js');
|
|
19
18
|
require('../../common/propsValues/sentiment.js');
|
|
@@ -22,7 +21,7 @@ require('../../common/propsValues/variant.js');
|
|
|
22
21
|
require('../../common/propsValues/scroll.js');
|
|
23
22
|
require('../../common/propsValues/markdownNodeType.js');
|
|
24
23
|
require('../../common/fileType.js');
|
|
25
|
-
require('@transferwise/icons');
|
|
24
|
+
var icons = require('@transferwise/icons');
|
|
26
25
|
require('react');
|
|
27
26
|
require('../../common/closeButton/CloseButton.messages.js');
|
|
28
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -31,8 +30,9 @@ require('../../provider/direction/DirectionProvider.js');
|
|
|
31
30
|
var useLayout = require('../../common/hooks/useLayout/useLayout.js');
|
|
32
31
|
var Title = require('../../title/Title.js');
|
|
33
32
|
var DateLookup_messages = require('../DateLookup.messages.js');
|
|
33
|
+
var Button = require('../../button/Button.js');
|
|
34
|
+
var IconButton = require('../../iconButton/IconButton.js');
|
|
34
35
|
|
|
35
|
-
const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
|
|
36
36
|
const DateHeader = ({
|
|
37
37
|
label,
|
|
38
38
|
onLabelClick,
|
|
@@ -48,38 +48,43 @@ const DateHeader = ({
|
|
|
48
48
|
className: clsx.clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1']),
|
|
49
49
|
children: [/*#__PURE__*/jsxRuntime.jsx("div", {
|
|
50
50
|
className: "pull-left-single-direction",
|
|
51
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
52
|
-
|
|
53
|
-
|
|
51
|
+
children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
52
|
+
size: 40,
|
|
53
|
+
priority: "minimal",
|
|
54
|
+
className: "d-inline-flex",
|
|
54
55
|
"aria-label": `${intl.formatMessage(DateLookup_messages.previous)} ${dateMode}`,
|
|
55
56
|
onClick: onPreviousClick,
|
|
56
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
57
|
-
|
|
58
|
-
className: "left-single-direction",
|
|
59
|
-
size: size.Size.MEDIUM
|
|
57
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronLeft, {
|
|
58
|
+
className: "left-single-direction"
|
|
60
59
|
})
|
|
61
60
|
})
|
|
62
61
|
}), label && /*#__PURE__*/jsxRuntime.jsx(Title, {
|
|
63
62
|
type: typography.Typography.TITLE_BODY,
|
|
64
63
|
className: "tw-date-lookup-header-current-container",
|
|
65
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
64
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Button, {
|
|
65
|
+
v2: true,
|
|
66
|
+
size: "md",
|
|
66
67
|
type: "button",
|
|
67
|
-
|
|
68
|
+
priority: "tertiary",
|
|
69
|
+
className: "tw-date-lookup-header-current",
|
|
68
70
|
"aria-label": intl.formatMessage(DateLookup_messages.goTo20YearView),
|
|
71
|
+
addonEnd: {
|
|
72
|
+
type: 'icon',
|
|
73
|
+
value: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronDown, {})
|
|
74
|
+
},
|
|
69
75
|
onClick: onLabelClick,
|
|
70
76
|
children: label
|
|
71
77
|
})
|
|
72
78
|
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
73
79
|
className: "pull-right-single-direction",
|
|
74
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
75
|
-
|
|
76
|
-
className:
|
|
77
|
-
"aria-label": `${
|
|
80
|
+
children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
81
|
+
size: 40,
|
|
82
|
+
className: "d-inline-flex",
|
|
83
|
+
"aria-label": `${intl.formatMessage(DateLookup_messages.next)} ${dateMode}`,
|
|
84
|
+
priority: "minimal",
|
|
78
85
|
onClick: onNextClick,
|
|
79
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
80
|
-
|
|
81
|
-
className: "right-single-direction",
|
|
82
|
-
size: size.Size.MEDIUM
|
|
86
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronRight, {
|
|
87
|
+
className: "right-single-direction"
|
|
83
88
|
})
|
|
84
89
|
})
|
|
85
90
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateHeader.js","sources":["../../../src/dateLookup/dateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport
|
|
1
|
+
{"version":3,"file":"DateHeader.js","sources":["../../../src/dateLookup/dateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Typography } from '../../common';\nimport { useLayout } from '../../common/hooks';\nimport Title from '../../title';\nimport messages from '../DateLookup.messages';\nimport Button from '../../button/Button';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport IconButton from '../../iconButton';\n\ninterface DateHeaderProps {\n label?: string;\n onLabelClick?: () => void;\n onPreviousClick: () => void;\n onNextClick: () => void;\n dateMode: string;\n}\n\nconst DateHeader: React.FC<DateHeaderProps> = ({\n label,\n onLabelClick,\n onPreviousClick,\n onNextClick,\n dateMode,\n}) => {\n const intl = useIntl();\n const { isMobile } = useLayout();\n return (\n <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>\n <div className=\"pull-left-single-direction\">\n <IconButton\n size={40}\n priority=\"minimal\"\n className=\"d-inline-flex\"\n aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}\n onClick={onPreviousClick}\n >\n <ChevronLeft className=\"left-single-direction\" />\n </IconButton>\n </div>\n {label && (\n <Title type={Typography.TITLE_BODY} className=\"tw-date-lookup-header-current-container\">\n <Button\n v2\n size=\"md\"\n type=\"button\"\n priority=\"tertiary\"\n className=\"tw-date-lookup-header-current\"\n aria-label={intl.formatMessage(messages.goTo20YearView)}\n addonEnd={{ type: 'icon', value: <ChevronDown /> }}\n onClick={onLabelClick}\n >\n {label}\n </Button>\n </Title>\n )}\n <div className=\"pull-right-single-direction\">\n <IconButton\n size={40}\n className=\"d-inline-flex\"\n aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}\n priority=\"minimal\"\n onClick={onNextClick}\n >\n <ChevronRight className=\"right-single-direction\" />\n </IconButton>\n </div>\n </div>\n );\n};\n\nexport default DateHeader;\n"],"names":["DateHeader","label","onLabelClick","onPreviousClick","onNextClick","dateMode","intl","useIntl","isMobile","useLayout","_jsxs","className","clsx","children","_jsx","IconButton","size","priority","formatMessage","messages","previous","onClick","ChevronLeft","Title","type","Typography","TITLE_BODY","Button","v2","goTo20YearView","addonEnd","value","ChevronDown","next","ChevronRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,MAAAA,UAAU,GAA8BA,CAAC;EAC7CC,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,WAAW;AACXC,EAAAA,QAAAA;AAAQ,CACT,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtB,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,mBAAS,EAAE,CAAA;AAChC,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,SAAI,CAAC,gBAAgB,EAAE,CAACJ,QAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAE;AAAAK,IAAAA,QAAA,gBACzEC,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;MAAAE,QAAA,eACzCC,cAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,SAAS;AAClBN,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAY,EAAA,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,mBAAQ,CAACC,QAAQ,CAAC,CAAIf,CAAAA,EAAAA,QAAQ,CAAG,CAAA;AACnEgB,QAAAA,OAAO,EAAElB,eAAgB;QAAAU,QAAA,eAEzBC,cAAA,CAACQ,iBAAW,EAAA;AAACX,UAAAA,SAAS,EAAC,uBAAA;SACzB,CAAA;OAAY,CAAA;AACd,KAAK,CACL,EAACV,KAAK,iBACJa,cAAA,CAACS,KAAK,EAAA;MAACC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAACf,MAAAA,SAAS,EAAC,yCAAyC;MAAAE,QAAA,eACrFC,cAAA,CAACa,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFZ,QAAAA,IAAI,EAAC,IAAI;AACTQ,QAAAA,IAAI,EAAC,QAAQ;AACbP,QAAAA,QAAQ,EAAC,UAAU;AACnBN,QAAAA,SAAS,EAAC,+BAA+B;AACzC,QAAA,YAAA,EAAYL,IAAI,CAACY,aAAa,CAACC,mBAAQ,CAACU,cAAc,CAAE;AACxDC,QAAAA,QAAQ,EAAE;AAAEN,UAAAA,IAAI,EAAE,MAAM;AAAEO,UAAAA,KAAK,eAAEjB,cAAA,CAACkB,iBAAW,EAAA,EAAA,CAAA;SAAM;AACnDX,QAAAA,OAAO,EAAEnB,YAAa;AAAAW,QAAAA,QAAA,EAErBZ,KAAAA;OACK,CAAA;KACH,CACR,eACDa,cAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,6BAA6B;MAAAE,QAAA,eAC1CC,cAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTL,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAY,EAAA,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,mBAAQ,CAACc,IAAI,CAAC,CAAI5B,CAAAA,EAAAA,QAAQ,CAAG,CAAA;AAC/DY,QAAAA,QAAQ,EAAC,SAAS;AAClBI,QAAAA,OAAO,EAAEjB,WAAY;QAAAS,QAAA,eAErBC,cAAA,CAACoB,kBAAY,EAAA;AAACvB,UAAAA,SAAS,EAAC,wBAAA;SAC1B,CAAA;OAAY,CAAA;AACd,KAAK,CACP,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
|
-
import Chevron from '../../chevron/Chevron.mjs';
|
|
4
3
|
import '../../common/theme.mjs';
|
|
5
4
|
import '../../common/direction.mjs';
|
|
6
5
|
import '../../common/propsValues/control.mjs';
|
|
7
6
|
import '../../common/propsValues/breakpoint.mjs';
|
|
8
|
-
import
|
|
7
|
+
import '../../common/propsValues/size.mjs';
|
|
9
8
|
import { Typography } from '../../common/propsValues/typography.mjs';
|
|
10
9
|
import '../../common/propsValues/width.mjs';
|
|
11
10
|
import '../../common/propsValues/type.mjs';
|
|
12
11
|
import '../../common/propsValues/dateMode.mjs';
|
|
13
12
|
import '../../common/propsValues/monthFormat.mjs';
|
|
14
|
-
import
|
|
13
|
+
import '../../common/propsValues/position.mjs';
|
|
15
14
|
import '../../common/propsValues/layouts.mjs';
|
|
16
15
|
import '../../common/propsValues/status.mjs';
|
|
17
16
|
import '../../common/propsValues/sentiment.mjs';
|
|
@@ -20,7 +19,7 @@ import '../../common/propsValues/variant.mjs';
|
|
|
20
19
|
import '../../common/propsValues/scroll.mjs';
|
|
21
20
|
import '../../common/propsValues/markdownNodeType.mjs';
|
|
22
21
|
import '../../common/fileType.mjs';
|
|
23
|
-
import '@transferwise/icons';
|
|
22
|
+
import { ChevronLeft, ChevronDown, ChevronRight } from '@transferwise/icons';
|
|
24
23
|
import 'react';
|
|
25
24
|
import '../../common/closeButton/CloseButton.messages.mjs';
|
|
26
25
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -29,8 +28,9 @@ import '../../provider/direction/DirectionProvider.mjs';
|
|
|
29
28
|
import { useLayout } from '../../common/hooks/useLayout/useLayout.mjs';
|
|
30
29
|
import Title from '../../title/Title.mjs';
|
|
31
30
|
import messages from '../DateLookup.messages.mjs';
|
|
31
|
+
import Button from '../../button/Button.mjs';
|
|
32
|
+
import IconButton from '../../iconButton/IconButton.mjs';
|
|
32
33
|
|
|
33
|
-
const buttonClasses = 'btn-link p-a-0 text-no-decoration np-text-body-large-bold rounded-sm';
|
|
34
34
|
const DateHeader = ({
|
|
35
35
|
label,
|
|
36
36
|
onLabelClick,
|
|
@@ -46,38 +46,43 @@ const DateHeader = ({
|
|
|
46
46
|
className: clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1']),
|
|
47
47
|
children: [/*#__PURE__*/jsx("div", {
|
|
48
48
|
className: "pull-left-single-direction",
|
|
49
|
-
children: /*#__PURE__*/jsx(
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
50
|
+
size: 40,
|
|
51
|
+
priority: "minimal",
|
|
52
|
+
className: "d-inline-flex",
|
|
52
53
|
"aria-label": `${intl.formatMessage(messages.previous)} ${dateMode}`,
|
|
53
54
|
onClick: onPreviousClick,
|
|
54
|
-
children: /*#__PURE__*/jsx(
|
|
55
|
-
|
|
56
|
-
className: "left-single-direction",
|
|
57
|
-
size: Size.MEDIUM
|
|
55
|
+
children: /*#__PURE__*/jsx(ChevronLeft, {
|
|
56
|
+
className: "left-single-direction"
|
|
58
57
|
})
|
|
59
58
|
})
|
|
60
59
|
}), label && /*#__PURE__*/jsx(Title, {
|
|
61
60
|
type: Typography.TITLE_BODY,
|
|
62
61
|
className: "tw-date-lookup-header-current-container",
|
|
63
|
-
children: /*#__PURE__*/jsx(
|
|
62
|
+
children: /*#__PURE__*/jsx(Button, {
|
|
63
|
+
v2: true,
|
|
64
|
+
size: "md",
|
|
64
65
|
type: "button",
|
|
65
|
-
|
|
66
|
+
priority: "tertiary",
|
|
67
|
+
className: "tw-date-lookup-header-current",
|
|
66
68
|
"aria-label": intl.formatMessage(messages.goTo20YearView),
|
|
69
|
+
addonEnd: {
|
|
70
|
+
type: 'icon',
|
|
71
|
+
value: /*#__PURE__*/jsx(ChevronDown, {})
|
|
72
|
+
},
|
|
67
73
|
onClick: onLabelClick,
|
|
68
74
|
children: label
|
|
69
75
|
})
|
|
70
76
|
}), /*#__PURE__*/jsx("div", {
|
|
71
77
|
className: "pull-right-single-direction",
|
|
72
|
-
children: /*#__PURE__*/jsx(
|
|
73
|
-
|
|
74
|
-
className:
|
|
75
|
-
"aria-label": `${
|
|
78
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
79
|
+
size: 40,
|
|
80
|
+
className: "d-inline-flex",
|
|
81
|
+
"aria-label": `${intl.formatMessage(messages.next)} ${dateMode}`,
|
|
82
|
+
priority: "minimal",
|
|
76
83
|
onClick: onNextClick,
|
|
77
|
-
children: /*#__PURE__*/jsx(
|
|
78
|
-
|
|
79
|
-
className: "right-single-direction",
|
|
80
|
-
size: Size.MEDIUM
|
|
84
|
+
children: /*#__PURE__*/jsx(ChevronRight, {
|
|
85
|
+
className: "right-single-direction"
|
|
81
86
|
})
|
|
82
87
|
})
|
|
83
88
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateHeader.mjs","sources":["../../../src/dateLookup/dateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport
|
|
1
|
+
{"version":3,"file":"DateHeader.mjs","sources":["../../../src/dateLookup/dateHeader/DateHeader.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { Typography } from '../../common';\nimport { useLayout } from '../../common/hooks';\nimport Title from '../../title';\nimport messages from '../DateLookup.messages';\nimport Button from '../../button/Button';\nimport { ChevronDown, ChevronLeft, ChevronRight } from '@transferwise/icons';\nimport IconButton from '../../iconButton';\n\ninterface DateHeaderProps {\n label?: string;\n onLabelClick?: () => void;\n onPreviousClick: () => void;\n onNextClick: () => void;\n dateMode: string;\n}\n\nconst DateHeader: React.FC<DateHeaderProps> = ({\n label,\n onLabelClick,\n onPreviousClick,\n onNextClick,\n dateMode,\n}) => {\n const intl = useIntl();\n const { isMobile } = useLayout();\n return (\n <div className={clsx('text-xs-center', !isMobile && ['clearfix', 'p-y-1'])}>\n <div className=\"pull-left-single-direction\">\n <IconButton\n size={40}\n priority=\"minimal\"\n className=\"d-inline-flex\"\n aria-label={`${intl.formatMessage(messages.previous)} ${dateMode}`}\n onClick={onPreviousClick}\n >\n <ChevronLeft className=\"left-single-direction\" />\n </IconButton>\n </div>\n {label && (\n <Title type={Typography.TITLE_BODY} className=\"tw-date-lookup-header-current-container\">\n <Button\n v2\n size=\"md\"\n type=\"button\"\n priority=\"tertiary\"\n className=\"tw-date-lookup-header-current\"\n aria-label={intl.formatMessage(messages.goTo20YearView)}\n addonEnd={{ type: 'icon', value: <ChevronDown /> }}\n onClick={onLabelClick}\n >\n {label}\n </Button>\n </Title>\n )}\n <div className=\"pull-right-single-direction\">\n <IconButton\n size={40}\n className=\"d-inline-flex\"\n aria-label={`${intl.formatMessage(messages.next)} ${dateMode}`}\n priority=\"minimal\"\n onClick={onNextClick}\n >\n <ChevronRight className=\"right-single-direction\" />\n </IconButton>\n </div>\n </div>\n );\n};\n\nexport default DateHeader;\n"],"names":["DateHeader","label","onLabelClick","onPreviousClick","onNextClick","dateMode","intl","useIntl","isMobile","useLayout","_jsxs","className","clsx","children","_jsx","IconButton","size","priority","formatMessage","messages","previous","onClick","ChevronLeft","Title","type","Typography","TITLE_BODY","Button","v2","goTo20YearView","addonEnd","value","ChevronDown","next","ChevronRight"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBMA,MAAAA,UAAU,GAA8BA,CAAC;EAC7CC,KAAK;EACLC,YAAY;EACZC,eAAe;EACfC,WAAW;AACXC,EAAAA,QAAAA;AAAQ,CACT,KAAI;AACH,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtB,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,SAAS,EAAE,CAAA;AAChC,EAAA,oBACEC,IAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAEC,IAAI,CAAC,gBAAgB,EAAE,CAACJ,QAAQ,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,CAAE;AAAAK,IAAAA,QAAA,gBACzEC,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,4BAA4B;MAAAE,QAAA,eACzCC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,SAAS;AAClBN,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAY,EAAA,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACC,QAAQ,CAAC,CAAIf,CAAAA,EAAAA,QAAQ,CAAG,CAAA;AACnEgB,QAAAA,OAAO,EAAElB,eAAgB;QAAAU,QAAA,eAEzBC,GAAA,CAACQ,WAAW,EAAA;AAACX,UAAAA,SAAS,EAAC,uBAAA;SACzB,CAAA;OAAY,CAAA;AACd,KAAK,CACL,EAACV,KAAK,iBACJa,GAAA,CAACS,KAAK,EAAA;MAACC,IAAI,EAAEC,UAAU,CAACC,UAAW;AAACf,MAAAA,SAAS,EAAC,yCAAyC;MAAAE,QAAA,eACrFC,GAAA,CAACa,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFZ,QAAAA,IAAI,EAAC,IAAI;AACTQ,QAAAA,IAAI,EAAC,QAAQ;AACbP,QAAAA,QAAQ,EAAC,UAAU;AACnBN,QAAAA,SAAS,EAAC,+BAA+B;AACzC,QAAA,YAAA,EAAYL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACU,cAAc,CAAE;AACxDC,QAAAA,QAAQ,EAAE;AAAEN,UAAAA,IAAI,EAAE,MAAM;AAAEO,UAAAA,KAAK,eAAEjB,GAAA,CAACkB,WAAW,EAAA,EAAA,CAAA;SAAM;AACnDX,QAAAA,OAAO,EAAEnB,YAAa;AAAAW,QAAAA,QAAA,EAErBZ,KAAAA;OACK,CAAA;KACH,CACR,eACDa,GAAA,CAAA,KAAA,EAAA;AAAKH,MAAAA,SAAS,EAAC,6BAA6B;MAAAE,QAAA,eAC1CC,GAAA,CAACC,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTL,QAAAA,SAAS,EAAC,eAAe;QACzB,YAAY,EAAA,CAAA,EAAGL,IAAI,CAACY,aAAa,CAACC,QAAQ,CAACc,IAAI,CAAC,CAAI5B,CAAAA,EAAAA,QAAQ,CAAG,CAAA;AAC/DY,QAAAA,QAAQ,EAAC,SAAS;AAClBI,QAAAA,OAAO,EAAEjB,WAAY;QAAAS,QAAA,eAErBC,GAAA,CAACoB,YAAY,EAAA;AAACvB,UAAAA,SAAS,EAAC,wBAAA;SAC1B,CAAA;OAAY,CAAA;AACd,KAAK,CACP,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"neptune.Button.loadingAriaLabel": "laden",
|
|
3
|
+
"neptune.Chips.ariaLabel": "{choice} wissen",
|
|
4
|
+
"neptune.ClearButton.ariaLabel": "Wissen",
|
|
5
|
+
"neptune.CloseButton.ariaLabel": "Sluiten",
|
|
6
|
+
"neptune.DateInput.day.label": "Dag",
|
|
7
|
+
"neptune.DateInput.day.placeholder": "DD",
|
|
8
|
+
"neptune.DateInput.month.label": "Maand",
|
|
9
|
+
"neptune.DateInput.year.label": "Jaar",
|
|
10
|
+
"neptune.DateInput.year.placeholder": "JJJJ",
|
|
11
|
+
"neptune.DateLookup.day": "dag",
|
|
12
|
+
"neptune.DateLookup.goTo20YearView": "Naar 20-jaarsoverzicht",
|
|
13
|
+
"neptune.DateLookup.month": "maand",
|
|
14
|
+
"neptune.DateLookup.next": "volgende",
|
|
15
|
+
"neptune.DateLookup.previous": "vorige",
|
|
16
|
+
"neptune.DateLookup.selected": "geselecteerd",
|
|
17
|
+
"neptune.DateLookup.twentyYears": "20 jaar",
|
|
18
|
+
"neptune.DateLookup.year": "jaar",
|
|
19
|
+
"neptune.FlowNavigation.back": "terug naar vorige stap",
|
|
20
|
+
"neptune.Info.ariaLabel": "Meer informatie",
|
|
21
|
+
"neptune.Label.optional": "(Optioneel)",
|
|
22
|
+
"neptune.Link.opensInNewTab": "(wordt geopend in een nieuw tabblad)",
|
|
23
|
+
"neptune.MoneyInput.Select.placeholder": "Selecteer een optie...",
|
|
24
|
+
"neptune.MoneyInput.Select.selectCurrencyLabel": "Selecteer valuta",
|
|
25
|
+
"neptune.PhoneNumberInput.SelectInput.placeholder": "Selecteer een optie...",
|
|
26
|
+
"neptune.Select.searchPlaceholder": "Zoeken...",
|
|
27
|
+
"neptune.SelectInput.noResultsFound": "Geen resultaten gevonden",
|
|
28
|
+
"neptune.SelectOption.action.label": "Kiezen",
|
|
29
|
+
"neptune.SelectOption.selected.action.label": "Gekozen optie wijzigen",
|
|
30
|
+
"neptune.StatusIcon.iconLabel.error": "Fout:",
|
|
31
|
+
"neptune.StatusIcon.iconLabel.information": "Informatie:",
|
|
32
|
+
"neptune.StatusIcon.iconLabel.pending": "In behandeling:",
|
|
33
|
+
"neptune.StatusIcon.iconLabel.success": "Gelukt:",
|
|
34
|
+
"neptune.StatusIcon.iconLabel.warning": "Waarschuwing:",
|
|
35
|
+
"neptune.Summary.statusDone": "Item klaar",
|
|
36
|
+
"neptune.Summary.statusNotDone": "Item te doen",
|
|
37
|
+
"neptune.Summary.statusPending": "Item in behandeling",
|
|
38
|
+
"neptune.Table.actionHeader": "Actie",
|
|
39
|
+
"neptune.Table.emptyData": "Geen resultaten gevonden",
|
|
40
|
+
"neptune.Table.loaded": "Tabelgegevens zijn geladen",
|
|
41
|
+
"neptune.Table.loading": "Tabelgegevens worden geladen",
|
|
42
|
+
"neptune.Table.refreshPage": "Pagina vernieuwen",
|
|
43
|
+
"neptune.Upload.csButtonText": "Nog een bestand uploaden?",
|
|
44
|
+
"neptune.Upload.csFailureText": "Uploaden mislukt. Probeer het opnieuw",
|
|
45
|
+
"neptune.Upload.csSuccessText": "Uploaden voltooid!",
|
|
46
|
+
"neptune.Upload.csTooLargeMessage": "Upload een bestand kleiner dan {maxSize} MB",
|
|
47
|
+
"neptune.Upload.csWrongTypeMessage": "Het bestandstype wordt niet ondersteund. Probeer het opnieuw met een ander bestand.",
|
|
48
|
+
"neptune.Upload.psButtonText": "Annuleren",
|
|
49
|
+
"neptune.Upload.psProcessingText": "Uploaden...",
|
|
50
|
+
"neptune.Upload.retry": "Opnieuw proberen",
|
|
51
|
+
"neptune.Upload.usButtonText": "Of selecteer een bestand",
|
|
52
|
+
"neptune.Upload.usDropMessage": "Sleep het bestand hierheen om het te uploaden",
|
|
53
|
+
"neptune.Upload.usPlaceholder": "Sleep een bestand van maximaal {maxSize} MB",
|
|
54
|
+
"neptune.UploadButton.allFileTypes": "Alle bestandstypen",
|
|
55
|
+
"neptune.UploadButton.dropFiles": "Sleep het bestand hierheen om het te uploaden",
|
|
56
|
+
"neptune.UploadButton.instructions": "{fileTypes}, kleiner dan {size} MB",
|
|
57
|
+
"neptune.UploadButton.maximumFiles": "Maximaal {maxFiles} bestanden.",
|
|
58
|
+
"neptune.UploadButton.uploadFile": "Bestand uploaden",
|
|
59
|
+
"neptune.UploadButton.uploadFiles": "Bestanden uploaden",
|
|
60
|
+
"neptune.UploadInput.deleteModalBody": "Door dit bestand te verwijderen, wordt het uit ons systeem verwijderd.",
|
|
61
|
+
"neptune.UploadInput.deleteModalCancelButtonText": "Annuleren",
|
|
62
|
+
"neptune.UploadInput.deleteModalConfirmButtonText": "Verwijderen",
|
|
63
|
+
"neptune.UploadInput.deleteModalTitle": "Weet je zeker dat je dit bestand wilt verwijderen?",
|
|
64
|
+
"neptune.UploadInput.fileIsTooLarge": "Bestand is te groot",
|
|
65
|
+
"neptune.UploadInput.fileTypeNotSupported": "Bestandstype niet ondersteund",
|
|
66
|
+
"neptune.UploadInput.maximumFilesAlreadyUploaded": "Deze upload is mislukt omdat we maar {maxFilesAllowed} bestanden tegelijk kunnen accepteren.",
|
|
67
|
+
"neptune.UploadItem.deleting": "Verwijderen...",
|
|
68
|
+
"neptune.UploadItem.removeFile": "Bestand {filename} verwijderen",
|
|
69
|
+
"neptune.UploadItem.uploaded": "Geüpload",
|
|
70
|
+
"neptune.UploadItem.uploadedFile": "Geüpload bestand",
|
|
71
|
+
"neptune.UploadItem.uploading": "Uploaden...",
|
|
72
|
+
"neptune.UploadItem.uploadingFailed": "Uploaden mislukt"
|
|
73
|
+
}
|
package/build/info/Info.js
CHANGED
|
@@ -29,6 +29,7 @@ var Modal = require('../modal/Modal.js');
|
|
|
29
29
|
var Popover = require('../popover/Popover.js');
|
|
30
30
|
var Info_messages = require('./Info.messages.js');
|
|
31
31
|
var infoPresentations = require('./infoPresentations.js');
|
|
32
|
+
var IconButton = require('../iconButton/IconButton.js');
|
|
32
33
|
|
|
33
34
|
const Info = ({
|
|
34
35
|
className = undefined,
|
|
@@ -44,22 +45,16 @@ const Info = ({
|
|
|
44
45
|
const [open, setOpen] = React.useState(false);
|
|
45
46
|
ariaLabel ??= intl.formatMessage(Info_messages.ariaLabel);
|
|
46
47
|
const isModal = presentation === infoPresentations.InfoPresentation.MODAL;
|
|
47
|
-
const isSmall = size$1 === size.Size.SMALL;
|
|
48
48
|
const buttonProps = {
|
|
49
49
|
'aria-label': ariaLabel,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
})
|
|
50
|
+
priority: 'minimal',
|
|
51
|
+
size: 24,
|
|
52
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.QuestionMarkCircle, {})
|
|
54
53
|
};
|
|
55
54
|
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
56
|
-
className: clsx.clsx(className, 'np-info',
|
|
57
|
-
'np-info__small': isSmall,
|
|
58
|
-
'np-info__large': !isSmall
|
|
59
|
-
}),
|
|
55
|
+
className: clsx.clsx(className, 'np-info'),
|
|
60
56
|
children: isModal ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
61
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(
|
|
62
|
-
type: "button",
|
|
57
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
63
58
|
onClick: () => {
|
|
64
59
|
setOpen(!open);
|
|
65
60
|
if (onClick) {
|
|
@@ -77,8 +72,7 @@ const Info = ({
|
|
|
77
72
|
content: content,
|
|
78
73
|
preferredPlacement: preferredPlacement,
|
|
79
74
|
title: title,
|
|
80
|
-
children: /*#__PURE__*/jsxRuntime.jsx(
|
|
81
|
-
type: "button",
|
|
75
|
+
children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
|
|
82
76
|
...buttonProps,
|
|
83
77
|
onClick: () => {
|
|
84
78
|
if (onClick) {
|
package/build/info/Info.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n
|
|
1
|
+
{"version":3,"file":"Info.js","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,kCAAgB,CAACC,OAAO;QACvCC,MAAI,GAAGC,SAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,iBAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,aAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,kCAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,cAAA,CAACC,wBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,cAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,SAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,eAAA,CAAAC,mBAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,cAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,cAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,cAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,cAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
|
package/build/info/Info.mjs
CHANGED
|
@@ -27,6 +27,7 @@ import Modal from '../modal/Modal.mjs';
|
|
|
27
27
|
import Popover from '../popover/Popover.mjs';
|
|
28
28
|
import messages from './Info.messages.mjs';
|
|
29
29
|
import { InfoPresentation } from './infoPresentations.mjs';
|
|
30
|
+
import IconButton from '../iconButton/IconButton.mjs';
|
|
30
31
|
|
|
31
32
|
const Info = ({
|
|
32
33
|
className = undefined,
|
|
@@ -42,22 +43,16 @@ const Info = ({
|
|
|
42
43
|
const [open, setOpen] = useState(false);
|
|
43
44
|
ariaLabel ??= intl.formatMessage(messages.ariaLabel);
|
|
44
45
|
const isModal = presentation === InfoPresentation.MODAL;
|
|
45
|
-
const isSmall = size === Size.SMALL;
|
|
46
46
|
const buttonProps = {
|
|
47
47
|
'aria-label': ariaLabel,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
})
|
|
48
|
+
priority: 'minimal',
|
|
49
|
+
size: 24,
|
|
50
|
+
children: /*#__PURE__*/jsx(QuestionMarkCircle, {})
|
|
52
51
|
};
|
|
53
52
|
return /*#__PURE__*/jsx("span", {
|
|
54
|
-
className: clsx(className, 'np-info',
|
|
55
|
-
'np-info__small': isSmall,
|
|
56
|
-
'np-info__large': !isSmall
|
|
57
|
-
}),
|
|
53
|
+
className: clsx(className, 'np-info'),
|
|
58
54
|
children: isModal ? /*#__PURE__*/jsxs(Fragment, {
|
|
59
|
-
children: [/*#__PURE__*/jsx(
|
|
60
|
-
type: "button",
|
|
55
|
+
children: [/*#__PURE__*/jsx(IconButton, {
|
|
61
56
|
onClick: () => {
|
|
62
57
|
setOpen(!open);
|
|
63
58
|
if (onClick) {
|
|
@@ -75,8 +70,7 @@ const Info = ({
|
|
|
75
70
|
content: content,
|
|
76
71
|
preferredPlacement: preferredPlacement,
|
|
77
72
|
title: title,
|
|
78
|
-
children: /*#__PURE__*/jsx(
|
|
79
|
-
type: "button",
|
|
73
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
80
74
|
...buttonProps,
|
|
81
75
|
onClick: () => {
|
|
82
76
|
if (onClick) {
|
package/build/info/Info.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n
|
|
1
|
+
{"version":3,"file":"Info.mjs","sources":["../../src/info/Info.tsx"],"sourcesContent":["import { QuestionMarkCircle as HelpCircleIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Size, Position, SizeSmall, SizeLarge } from '../common';\nimport Modal from '../modal';\nimport Popover, { PopoverPreferredPlacement } from '../popover';\n\nimport messages from './Info.messages';\nimport { InfoPresentation } from './infoPresentations';\nimport IconButton, { IconButtonProps } from '../iconButton';\n\nexport interface InfoProps {\n 'aria-label'?: string;\n /**\n * Extra classes applied to Info\n */\n className?: string;\n /**\n * Content displayed inside a Popover a Modal\n */\n content?: React.ReactNode;\n onClick?: () => void;\n /**\n * Decides whether to display content in a Popover or a Modal\n */\n presentation?: 'MODAL' | 'POPOVER';\n /**\n * Decides the size of help Icon\n */\n size?: SizeSmall | SizeLarge;\n /**\n * Title displayed inside a Popover a Modal\n */\n title?: React.ReactNode;\n /**\n * Prferred placement of the Popover, does not apply to Modal\n */\n preferredPlacement?: PopoverPreferredPlacement;\n}\n\nconst Info = ({\n className = undefined,\n content = undefined,\n onClick = undefined,\n presentation = InfoPresentation.POPOVER,\n size = Size.SMALL,\n title = undefined,\n 'aria-label': ariaLabel,\n preferredPlacement = Position.BOTTOM,\n}: InfoProps) => {\n const intl = useIntl();\n const [open, setOpen] = useState(false);\n ariaLabel ??= intl.formatMessage(messages.ariaLabel);\n const isModal = presentation === InfoPresentation.MODAL;\n\n const buttonProps: IconButtonProps = {\n 'aria-label': ariaLabel,\n priority: 'minimal',\n size: 24,\n children: <HelpCircleIcon />,\n };\n\n return (\n <span className={clsx(className, 'np-info')}>\n {isModal ? (\n <>\n <IconButton\n onClick={() => {\n setOpen(!open);\n if (onClick) {\n onClick();\n }\n }}\n {...buttonProps}\n />\n <Modal body={content} open={open} title={title} onClose={() => setOpen(false)} />\n </>\n ) : (\n <Popover content={content} preferredPlacement={preferredPlacement} title={title}>\n <IconButton\n {...buttonProps}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}\n />\n </Popover>\n )}\n </span>\n );\n};\n\nexport default Info;\n"],"names":["Info","className","undefined","content","onClick","presentation","InfoPresentation","POPOVER","size","Size","SMALL","title","ariaLabel","preferredPlacement","Position","BOTTOM","intl","useIntl","open","setOpen","useState","formatMessage","messages","isModal","MODAL","buttonProps","priority","children","_jsx","HelpCircleIcon","clsx","_jsxs","_Fragment","IconButton","Modal","body","onClose","Popover"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CMA,MAAAA,IAAI,GAAGA,CAAC;AACZC,EAAAA,SAAS,GAAGC,SAAS;AACrBC,EAAAA,OAAO,GAAGD,SAAS;AACnBE,EAAAA,OAAO,GAAGF,SAAS;EACnBG,YAAY,GAAGC,gBAAgB,CAACC,OAAO;EACvCC,IAAI,GAAGC,IAAI,CAACC,KAAK;AACjBC,EAAAA,KAAK,GAAGT,SAAS;AACjB,EAAA,YAAY,EAAEU,SAAS;EACvBC,kBAAkB,GAAGC,QAAQ,CAACC,MAAAA;AAAM,CAC1B,KAAI;AACd,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE,CAAA;EACtB,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC,CAAA;EACvCR,SAAS,KAAKI,IAAI,CAACK,aAAa,CAACC,QAAQ,CAACV,SAAS,CAAC,CAAA;AACpD,EAAA,MAAMW,OAAO,GAAGlB,YAAY,KAAKC,gBAAgB,CAACkB,KAAK,CAAA;AAEvD,EAAA,MAAMC,WAAW,GAAoB;AACnC,IAAA,YAAY,EAAEb,SAAS;AACvBc,IAAAA,QAAQ,EAAE,SAAS;AACnBlB,IAAAA,IAAI,EAAE,EAAE;AACRmB,IAAAA,QAAQ,eAAEC,GAAA,CAACC,kBAAc,EAAG,EAAA,CAAA;GAC7B,CAAA;AAED,EAAA,oBACED,GAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAE6B,IAAI,CAAC7B,SAAS,EAAE,SAAS,CAAE;AAAA0B,IAAAA,QAAA,EACzCJ,OAAO,gBACNQ,IAAA,CAAAC,QAAA,EAAA;MAAAL,QAAA,EAAA,cACEC,GAAA,CAACK,UAAU,EAAA;QACT7B,OAAO,EAAEA,MAAK;UACZe,OAAO,CAAC,CAACD,IAAI,CAAC,CAAA;AACd,UAAA,IAAId,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;SACA;QAAA,GACEqB,WAAAA;AAAW,OAEjB,CAAA,eAAAG,GAAA,CAACM,KAAK,EAAA;AAACC,QAAAA,IAAI,EAAEhC,OAAQ;AAACe,QAAAA,IAAI,EAAEA,IAAK;AAACP,QAAAA,KAAK,EAAEA,KAAM;AAACyB,QAAAA,OAAO,EAAEA,MAAMjB,OAAO,CAAC,KAAK,CAAA;AAAE,OAChF,CAAA,CAAA;AAAA,KAAG,CAAA,gBAEHS,GAAA,CAACS,OAAO,EAAA;AAAClC,MAAAA,OAAO,EAAEA,OAAQ;AAACU,MAAAA,kBAAkB,EAAEA,kBAAmB;AAACF,MAAAA,KAAK,EAAEA,KAAM;MAAAgB,QAAA,eAC9EC,GAAA,CAACK,UAAU,EAAA;AAAA,QAAA,GACLR,WAAW;QACfrB,OAAO,EAAEA,MAAK;AACZ,UAAA,IAAIA,OAAO,EAAE;AACXA,YAAAA,OAAO,EAAE,CAAA;AACX,WAAA;AACF,SAAA;OAEJ,CAAA;KAAS,CAAA;AACV,GACG,CAAC,CAAA;AAEX;;;;"}
|
package/build/main.css
CHANGED
|
@@ -874,10 +874,10 @@
|
|
|
874
874
|
display: inline-block;
|
|
875
875
|
}
|
|
876
876
|
.wds-Button-icon--md {
|
|
877
|
-
--Button-iconSize:
|
|
877
|
+
--Button-iconSize: 18px;
|
|
878
878
|
}
|
|
879
879
|
.wds-Button-icon--sm {
|
|
880
|
-
--Button-iconSize:
|
|
880
|
+
--Button-iconSize: 16px;
|
|
881
881
|
}
|
|
882
882
|
.wds-Button-icon svg {
|
|
883
883
|
width: var(--Button-iconSize);
|
|
@@ -2009,11 +2009,6 @@ button.np-option {
|
|
|
2009
2009
|
.np-theme-personal .tw-date-lookup-menu td {
|
|
2010
2010
|
border: none;
|
|
2011
2011
|
}
|
|
2012
|
-
.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current,
|
|
2013
|
-
.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current {
|
|
2014
|
-
color: #37517e;
|
|
2015
|
-
color: var(--color-content-primary);
|
|
2016
|
-
}
|
|
2017
2012
|
.np-date-trigger {
|
|
2018
2013
|
overflow: hidden;
|
|
2019
2014
|
text-overflow: ellipsis;
|
|
@@ -2482,30 +2477,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
|
|
|
2482
2477
|
width: 100%;
|
|
2483
2478
|
}
|
|
2484
2479
|
.np-info {
|
|
2485
|
-
height: 16px;
|
|
2486
|
-
line-height: 1;
|
|
2487
2480
|
vertical-align: middle;
|
|
2488
|
-
color: var(--color-interactive-primary);
|
|
2489
|
-
}
|
|
2490
|
-
.np-info button,
|
|
2491
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2492
|
-
--ring-outline-offset: 0;
|
|
2493
|
-
height: 16px;
|
|
2494
|
-
overflow: hidden;
|
|
2495
|
-
display: inline-block;
|
|
2496
|
-
}
|
|
2497
|
-
.np-info__large {
|
|
2498
|
-
height: 24px;
|
|
2499
|
-
}
|
|
2500
|
-
.np-info__large button,
|
|
2501
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
2502
|
-
height: 24px;
|
|
2503
|
-
display: inline-block;
|
|
2504
|
-
}
|
|
2505
|
-
.np-info .tw-icon {
|
|
2506
|
-
cursor: pointer;
|
|
2507
|
-
color: var(--color-interactive-primary);
|
|
2508
|
-
display: inline-block;
|
|
2509
2481
|
}
|
|
2510
2482
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
2511
2483
|
border-bottom: none !important;
|
|
@@ -187,10 +187,10 @@
|
|
|
187
187
|
display: inline-block;
|
|
188
188
|
}
|
|
189
189
|
.wds-Button-icon--md {
|
|
190
|
-
--Button-iconSize:
|
|
190
|
+
--Button-iconSize: 18px;
|
|
191
191
|
}
|
|
192
192
|
.wds-Button-icon--sm {
|
|
193
|
-
--Button-iconSize:
|
|
193
|
+
--Button-iconSize: 16px;
|
|
194
194
|
}
|
|
195
195
|
.wds-Button-icon svg {
|
|
196
196
|
width: var(--Button-iconSize);
|
|
@@ -91,8 +91,3 @@
|
|
|
91
91
|
.np-theme-personal .tw-date-lookup-menu td {
|
|
92
92
|
border: none;
|
|
93
93
|
}
|
|
94
|
-
.np-theme-personal.tw-date-lookup-menu .tw-date-lookup-header-current,
|
|
95
|
-
.np-theme-personal .tw-date-lookup-menu .tw-date-lookup-header-current {
|
|
96
|
-
color: #37517e;
|
|
97
|
-
color: var(--color-content-primary);
|
|
98
|
-
}
|
|
@@ -1,28 +1,5 @@
|
|
|
1
1
|
.np-info {
|
|
2
|
-
height: 16px;
|
|
3
|
-
line-height: 1;
|
|
4
2
|
vertical-align: middle;
|
|
5
|
-
color: var(--color-interactive-primary);
|
|
6
|
-
}
|
|
7
|
-
.np-info button,
|
|
8
|
-
.np-info [data-toggle="popover"]:not(.btn) {
|
|
9
|
-
--ring-outline-offset: 0;
|
|
10
|
-
height: 16px;
|
|
11
|
-
overflow: hidden;
|
|
12
|
-
display: inline-block;
|
|
13
|
-
}
|
|
14
|
-
.np-info__large {
|
|
15
|
-
height: 24px;
|
|
16
|
-
}
|
|
17
|
-
.np-info__large button,
|
|
18
|
-
.np-info__large [data-toggle="popover"]:not(.btn) {
|
|
19
|
-
height: 24px;
|
|
20
|
-
display: inline-block;
|
|
21
|
-
}
|
|
22
|
-
.np-info .tw-icon {
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
color: var(--color-interactive-primary);
|
|
25
|
-
display: inline-block;
|
|
26
3
|
}
|
|
27
4
|
.np-info [data-toggle="popover"]:not(.btn) {
|
|
28
5
|
border-bottom: none !important;
|