@transferwise/components 46.0.2 → 46.0.3
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/index.esm.js +31 -48
- package/build/index.esm.js.map +1 -1
- package/build/index.js +31 -48
- package/build/index.js.map +1 -1
- package/build/types/chevron/Chevron.d.ts +14 -17
- package/build/types/chevron/Chevron.d.ts.map +1 -1
- package/build/types/chevron/index.d.ts +1 -1
- package/build/types/chevron/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/avatar/Avatar.tsx +1 -1
- package/src/card/Card.spec.js +2 -4
- package/src/chevron/Chevron.story.tsx +7 -14
- package/src/chevron/Chevron.tsx +73 -0
- package/src/chevron/Chevron.js +0 -67
- package/src/chevron/__mocks__/index.js +0 -7
- /package/src/chevron/{Chevron.spec.js → Chevron.spec.tsx} +0 -0
- /package/src/chevron/__snapshots__/{Chevron.spec.js.snap → Chevron.spec.tsx.snap} +0 -0
- /package/src/chevron/{index.js → index.ts} +0 -0
package/build/index.js
CHANGED
|
@@ -5,8 +5,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactId = require('@radix-ui/react-id');
|
|
7
7
|
var icons = require('@transferwise/icons');
|
|
8
|
-
var PropTypes = require('prop-types');
|
|
9
8
|
var reactIntl = require('react-intl');
|
|
9
|
+
var PropTypes = require('prop-types');
|
|
10
10
|
var componentsTheming = require('@wise/components-theming');
|
|
11
11
|
var react$1 = require('@headlessui/react');
|
|
12
12
|
var mergeProps = require('merge-props');
|
|
@@ -574,61 +574,44 @@ const CONTAINER_SIZE = {
|
|
|
574
574
|
};
|
|
575
575
|
const ExtraSmallChevron = ({
|
|
576
576
|
className
|
|
577
|
-
}) =>
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
577
|
+
}) => {
|
|
578
|
+
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
579
|
+
className: classNames__default.default('tw-icon', 'tw-icon-chevron', className),
|
|
580
|
+
role: "presentation",
|
|
581
|
+
"aria-hidden": true,
|
|
582
|
+
children: /*#__PURE__*/jsxRuntime.jsx("svg", {
|
|
583
|
+
width: "10",
|
|
584
|
+
height: "10",
|
|
585
|
+
viewBox: "0 0 10 10",
|
|
586
|
+
fill: "currentColor",
|
|
587
|
+
focusable: "false",
|
|
588
|
+
children: /*#__PURE__*/jsxRuntime.jsx("path", {
|
|
589
|
+
fillRule: "evenodd",
|
|
590
|
+
d: "M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
|
|
591
|
+
})
|
|
590
592
|
})
|
|
591
|
-
})
|
|
592
|
-
});
|
|
593
|
-
ExtraSmallChevron.propTypes = {
|
|
594
|
-
className: PropTypes__default.default.string
|
|
595
|
-
};
|
|
596
|
-
ExtraSmallChevron.defaultProps = {
|
|
597
|
-
className: null
|
|
593
|
+
});
|
|
598
594
|
};
|
|
599
595
|
const Chevron = ({
|
|
600
|
-
orientation,
|
|
601
|
-
size,
|
|
602
|
-
disabled,
|
|
596
|
+
orientation = exports.Position.BOTTOM,
|
|
597
|
+
size = exports.Size.SMALL,
|
|
598
|
+
disabled = false,
|
|
603
599
|
className
|
|
604
600
|
}) => {
|
|
605
601
|
const classNameValue = classNames__default.default('tw-chevron', {
|
|
606
602
|
'chevron-color': !disabled
|
|
607
|
-
}, `${
|
|
608
|
-
const sizeValue = CONTAINER_SIZE[size];
|
|
603
|
+
}, `${orientation}`.toLowerCase(), className);
|
|
609
604
|
if (size === exports.Size.EXTRA_SMALL) {
|
|
610
605
|
return /*#__PURE__*/jsxRuntime.jsx(ExtraSmallChevron, {
|
|
611
606
|
className: classNameValue
|
|
612
607
|
});
|
|
613
608
|
}
|
|
609
|
+
const sizeValue = CONTAINER_SIZE[size];
|
|
614
610
|
return /*#__PURE__*/jsxRuntime.jsx(icons.ChevronUp, {
|
|
615
611
|
className: classNameValue,
|
|
616
612
|
size: sizeValue
|
|
617
613
|
});
|
|
618
614
|
};
|
|
619
|
-
Chevron.propTypes = {
|
|
620
|
-
orientation: PropTypes__default.default.oneOf(['top', 'bottom', 'left', 'right']),
|
|
621
|
-
size: PropTypes__default.default.oneOf(['xs', 'sm', 'md']),
|
|
622
|
-
disabled: PropTypes__default.default.bool,
|
|
623
|
-
className: PropTypes__default.default.string
|
|
624
|
-
};
|
|
625
|
-
Chevron.defaultProps = {
|
|
626
|
-
orientation: exports.Position.BOTTOM,
|
|
627
|
-
size: exports.Size.SMALL,
|
|
628
|
-
disabled: false,
|
|
629
|
-
className: null
|
|
630
|
-
};
|
|
631
|
-
var Chevron$1 = Chevron;
|
|
632
615
|
|
|
633
616
|
const Option$2 = /*#__PURE__*/React.forwardRef(({
|
|
634
617
|
media = '',
|
|
@@ -713,7 +696,7 @@ const AccordionItem = ({
|
|
|
713
696
|
as: "button",
|
|
714
697
|
media: iconElement,
|
|
715
698
|
title: title,
|
|
716
|
-
button: /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
699
|
+
button: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
717
700
|
orientation: open ? exports.Position.TOP : exports.Position.BOTTOM,
|
|
718
701
|
size: exports.Size.MEDIUM
|
|
719
702
|
}),
|
|
@@ -1379,7 +1362,7 @@ const Avatar = ({
|
|
|
1379
1362
|
backgroundColor = null,
|
|
1380
1363
|
backgroundColorSeed = null,
|
|
1381
1364
|
children = null,
|
|
1382
|
-
className
|
|
1365
|
+
className,
|
|
1383
1366
|
outlined = false,
|
|
1384
1367
|
size: sizeFromProps = 48,
|
|
1385
1368
|
theme = exports.Theme.LIGHT,
|
|
@@ -2488,7 +2471,7 @@ const Card$1 = /*#__PURE__*/React.forwardRef((props, reference) => {
|
|
|
2488
2471
|
title: title,
|
|
2489
2472
|
content: details,
|
|
2490
2473
|
showMediaAtAllSizes: true,
|
|
2491
|
-
button: children && /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
2474
|
+
button: children && /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
2492
2475
|
orientation: isOpen ? exports.Position.TOP : exports.Position.BOTTOM
|
|
2493
2476
|
}),
|
|
2494
2477
|
onClick: () => children && onClick(!isExpanded)
|
|
@@ -3458,7 +3441,7 @@ const DateTrigger = ({
|
|
|
3458
3441
|
}) : /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
3459
3442
|
className: "form-control-placeholder visible-xs-inline visible-sm-inline visible-md-inline visible-lg-inline visible-xl-inline",
|
|
3460
3443
|
children: placeholder
|
|
3461
|
-
}), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
3444
|
+
}), !onClear ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
3462
3445
|
orientation: exports.Position.BOTTOM,
|
|
3463
3446
|
disabled: disabled
|
|
3464
3447
|
}) : null]
|
|
@@ -3547,7 +3530,7 @@ const DateHeader = ({
|
|
|
3547
3530
|
className: `d-inline-flex ${buttonClasses}`,
|
|
3548
3531
|
"aria-label": `${intl.formatMessage(messages$7.previous)} ${dateMode}`,
|
|
3549
3532
|
onClick: onPreviousClick,
|
|
3550
|
-
children: /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
3533
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
3551
3534
|
orientation: exports.Position.LEFT,
|
|
3552
3535
|
className: "left-single-direction",
|
|
3553
3536
|
size: exports.Size.MEDIUM
|
|
@@ -3570,7 +3553,7 @@ const DateHeader = ({
|
|
|
3570
3553
|
className: `d-inline-flex ${buttonClasses}`,
|
|
3571
3554
|
"aria-label": `${reactIntl.useIntl().formatMessage(messages$7.next)} ${dateMode}`,
|
|
3572
3555
|
onClick: onNextClick,
|
|
3573
|
-
children: /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
3556
|
+
children: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
3574
3557
|
orientation: exports.Position.RIGHT,
|
|
3575
3558
|
className: "right-single-direction",
|
|
3576
3559
|
size: exports.Size.MEDIUM
|
|
@@ -4524,7 +4507,7 @@ const NavigationOption = /*#__PURE__*/React.forwardRef(({
|
|
|
4524
4507
|
ref: reference,
|
|
4525
4508
|
as: component,
|
|
4526
4509
|
className: classNames__default.default('np-navigation-option', className),
|
|
4527
|
-
button: /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
4510
|
+
button: /*#__PURE__*/jsxRuntime.jsx(Chevron, {
|
|
4528
4511
|
orientation: exports.Position.RIGHT,
|
|
4529
4512
|
disabled: disabled,
|
|
4530
4513
|
className: "d-block"
|
|
@@ -11170,7 +11153,7 @@ function Select({
|
|
|
11170
11153
|
}) : /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
11171
11154
|
className: s('form-control-placeholder'),
|
|
11172
11155
|
children: placeholder
|
|
11173
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
11156
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Chevron
|
|
11174
11157
|
// disabled={disabled}
|
|
11175
11158
|
, {
|
|
11176
11159
|
className: classNames__default.default(s('tw-icon'), s('tw-chevron-up-icon'), s('tw-chevron'), s('bottom'), s('np-select-chevron'))
|
|
@@ -15658,7 +15641,7 @@ exports.Card = Card$2;
|
|
|
15658
15641
|
exports.Checkbox = Checkbox$1;
|
|
15659
15642
|
exports.CheckboxButton = CheckboxButton$1;
|
|
15660
15643
|
exports.CheckboxOption = CheckboxOption;
|
|
15661
|
-
exports.Chevron = Chevron
|
|
15644
|
+
exports.Chevron = Chevron;
|
|
15662
15645
|
exports.Chip = Chip;
|
|
15663
15646
|
exports.Chips = Chips;
|
|
15664
15647
|
exports.CircularButton = CircularButton$1;
|