@transferwise/components 46.35.1 → 46.36.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/index.js +68 -65
- package/build/index.js.map +1 -1
- package/build/index.mjs +69 -66
- package/build/index.mjs.map +1 -1
- package/build/main.css +1 -0
- package/build/styles/main.css +1 -0
- package/build/styles/nudge/Nudge.css +1 -0
- package/build/types/common/action/Action.d.ts +15 -0
- package/build/types/common/action/Action.d.ts.map +1 -0
- package/build/types/nudge/Nudge.d.ts +4 -4
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/summary/Summary.d.ts +2 -4
- package/build/types/summary/Summary.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.tsx +2 -30
- package/src/common/action/Action.tsx +44 -0
- package/src/main.css +1 -0
- package/src/nudge/Nudge.css +1 -0
- package/src/nudge/Nudge.less +1 -0
- package/src/nudge/Nudge.story.tsx +34 -0
- package/src/nudge/Nudge.tsx +6 -4
- package/src/summary/Summary.tsx +3 -15
package/build/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import React__default, { forwardRef, useId, cloneElement, useState, useEffect, useRef, useMemo, Component, createContext, useContext, useSyncExternalStore, useCallback, useImperativeHandle, createElement, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
|
-
import { ChevronUp, CrossCircleFill, Cross,
|
|
5
|
+
import { ChevronUp, CrossCircleFill, Cross, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, NavigateAway, Briefcase, Person, ArrowRight, Download, ChevronLeft, ChevronRight, AlertCircleFill, AlertCircle, ArrowLeft, QuestionMarkCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle } from '@transferwise/icons';
|
|
6
6
|
import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import commonmark from 'commonmark';
|
|
@@ -700,40 +700,6 @@ const CloseButton = /*#__PURE__*/forwardRef(function CloseButton({
|
|
|
700
700
|
});
|
|
701
701
|
});
|
|
702
702
|
|
|
703
|
-
var messages$c = defineMessages({
|
|
704
|
-
opensInNewTab: {
|
|
705
|
-
id: "neptune.Link.opensInNewTab"
|
|
706
|
-
}
|
|
707
|
-
});
|
|
708
|
-
|
|
709
|
-
const Link = ({
|
|
710
|
-
className,
|
|
711
|
-
children,
|
|
712
|
-
href,
|
|
713
|
-
target,
|
|
714
|
-
type,
|
|
715
|
-
'aria-label': ariaLabel,
|
|
716
|
-
onClick,
|
|
717
|
-
...props
|
|
718
|
-
}) => {
|
|
719
|
-
const isBlank = target === '_blank';
|
|
720
|
-
const {
|
|
721
|
-
formatMessage
|
|
722
|
-
} = useIntl();
|
|
723
|
-
return /*#__PURE__*/jsxs("a", {
|
|
724
|
-
href: href,
|
|
725
|
-
target: target,
|
|
726
|
-
className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
|
|
727
|
-
"aria-label": ariaLabel,
|
|
728
|
-
rel: isBlank ? 'noreferrer' : undefined,
|
|
729
|
-
onClick: onClick,
|
|
730
|
-
...props,
|
|
731
|
-
children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
|
|
732
|
-
title: formatMessage(messages$c.opensInNewTab)
|
|
733
|
-
})]
|
|
734
|
-
});
|
|
735
|
-
};
|
|
736
|
-
|
|
737
703
|
const iconTypeMap = {
|
|
738
704
|
positive: Check,
|
|
739
705
|
neutral: Info$1,
|
|
@@ -880,6 +846,64 @@ InlineMarkdown.defaultProps = {
|
|
|
880
846
|
className: undefined
|
|
881
847
|
};
|
|
882
848
|
|
|
849
|
+
var messages$c = defineMessages({
|
|
850
|
+
opensInNewTab: {
|
|
851
|
+
id: "neptune.Link.opensInNewTab"
|
|
852
|
+
}
|
|
853
|
+
});
|
|
854
|
+
|
|
855
|
+
const Link = ({
|
|
856
|
+
className,
|
|
857
|
+
children,
|
|
858
|
+
href,
|
|
859
|
+
target,
|
|
860
|
+
type,
|
|
861
|
+
'aria-label': ariaLabel,
|
|
862
|
+
onClick,
|
|
863
|
+
...props
|
|
864
|
+
}) => {
|
|
865
|
+
const isBlank = target === '_blank';
|
|
866
|
+
const {
|
|
867
|
+
formatMessage
|
|
868
|
+
} = useIntl();
|
|
869
|
+
return /*#__PURE__*/jsxs("a", {
|
|
870
|
+
href: href,
|
|
871
|
+
target: target,
|
|
872
|
+
className: classNames('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
|
|
873
|
+
"aria-label": ariaLabel,
|
|
874
|
+
rel: isBlank ? 'noreferrer' : undefined,
|
|
875
|
+
onClick: onClick,
|
|
876
|
+
...props,
|
|
877
|
+
children: [children, " ", isBlank && /*#__PURE__*/jsx(NavigateAway, {
|
|
878
|
+
title: formatMessage(messages$c.opensInNewTab)
|
|
879
|
+
})]
|
|
880
|
+
});
|
|
881
|
+
};
|
|
882
|
+
|
|
883
|
+
function Action({
|
|
884
|
+
action,
|
|
885
|
+
className
|
|
886
|
+
}) {
|
|
887
|
+
if ('href' in action) {
|
|
888
|
+
return /*#__PURE__*/jsx(Link, {
|
|
889
|
+
href: action.href,
|
|
890
|
+
className: className,
|
|
891
|
+
"aria-label": action['aria-label'],
|
|
892
|
+
target: action.target,
|
|
893
|
+
type: Typography.LINK_LARGE,
|
|
894
|
+
onClick: action.onClick,
|
|
895
|
+
children: action.text
|
|
896
|
+
});
|
|
897
|
+
}
|
|
898
|
+
return /*#__PURE__*/jsx("button", {
|
|
899
|
+
type: "button",
|
|
900
|
+
"aria-label": action['aria-label'],
|
|
901
|
+
className: classNames('btn-unstyled np-text-link-large', className),
|
|
902
|
+
onClick: action.onClick,
|
|
903
|
+
children: action.text
|
|
904
|
+
});
|
|
905
|
+
}
|
|
906
|
+
|
|
883
907
|
var AlertArrowPosition;
|
|
884
908
|
(function (AlertArrowPosition) {
|
|
885
909
|
AlertArrowPosition["TOP_LEFT"] = "up-left";
|
|
@@ -986,7 +1010,8 @@ function Alert({
|
|
|
986
1010
|
})
|
|
987
1011
|
})]
|
|
988
1012
|
}), action && /*#__PURE__*/jsx(Action, {
|
|
989
|
-
action: action
|
|
1013
|
+
action: action,
|
|
1014
|
+
className: "m-t-1"
|
|
990
1015
|
})]
|
|
991
1016
|
})]
|
|
992
1017
|
}), onDismiss && /*#__PURE__*/jsx(CloseButton, {
|
|
@@ -1013,28 +1038,6 @@ function alertArrowClassNames(arrow) {
|
|
|
1013
1038
|
return 'arrow';
|
|
1014
1039
|
}
|
|
1015
1040
|
}
|
|
1016
|
-
function Action({
|
|
1017
|
-
action
|
|
1018
|
-
}) {
|
|
1019
|
-
if ('href' in action) {
|
|
1020
|
-
return /*#__PURE__*/jsx(Link, {
|
|
1021
|
-
href: action.href,
|
|
1022
|
-
className: "m-t-1",
|
|
1023
|
-
"aria-label": action['aria-label'],
|
|
1024
|
-
target: action.target,
|
|
1025
|
-
type: Typography.LINK_LARGE,
|
|
1026
|
-
onClick: action.onClick,
|
|
1027
|
-
children: action.text
|
|
1028
|
-
});
|
|
1029
|
-
}
|
|
1030
|
-
return /*#__PURE__*/jsx("button", {
|
|
1031
|
-
type: "button",
|
|
1032
|
-
"aria-label": action['aria-label'],
|
|
1033
|
-
className: "btn-unstyled np-text-link-large m-t-1",
|
|
1034
|
-
onClick: action.onClick,
|
|
1035
|
-
children: action.text
|
|
1036
|
-
});
|
|
1037
|
-
}
|
|
1038
1041
|
|
|
1039
1042
|
// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
|
|
1040
1043
|
var AvatarType;
|
|
@@ -7796,7 +7799,8 @@ const Nudge = ({
|
|
|
7796
7799
|
persistDismissal,
|
|
7797
7800
|
isPreviouslyDismissed,
|
|
7798
7801
|
id,
|
|
7799
|
-
className
|
|
7802
|
+
className,
|
|
7803
|
+
action
|
|
7800
7804
|
}) => {
|
|
7801
7805
|
const [isDismissed, setIsDismissed] = useState(false);
|
|
7802
7806
|
const [isMounted, setIsMounted] = useState(false);
|
|
@@ -7857,6 +7861,9 @@ const Nudge = ({
|
|
|
7857
7861
|
className: "wds-nudge-link",
|
|
7858
7862
|
onClick: onClick,
|
|
7859
7863
|
children: link
|
|
7864
|
+
}), action && /*#__PURE__*/jsx(Action, {
|
|
7865
|
+
action: action,
|
|
7866
|
+
className: "m-t-1"
|
|
7860
7867
|
})]
|
|
7861
7868
|
}), onDismiss || persistDismissal ? /*#__PURE__*/jsx(CloseButton, {
|
|
7862
7869
|
className: "wds-nudge-control",
|
|
@@ -10830,13 +10837,9 @@ const Summary = ({
|
|
|
10830
10837
|
type: Typography.BODY_DEFAULT,
|
|
10831
10838
|
className: "d-block np-summary__description",
|
|
10832
10839
|
children: description
|
|
10833
|
-
}), action && /*#__PURE__*/jsx(
|
|
10834
|
-
|
|
10835
|
-
|
|
10836
|
-
className: "np-summary__action",
|
|
10837
|
-
"aria-label": action['aria-label'],
|
|
10838
|
-
onClick: action.onClick,
|
|
10839
|
-
children: action.text
|
|
10840
|
+
}), action && /*#__PURE__*/jsx(Action, {
|
|
10841
|
+
action: action,
|
|
10842
|
+
className: "np-summary__action"
|
|
10840
10843
|
})]
|
|
10841
10844
|
}), info && /*#__PURE__*/jsx(Info, {
|
|
10842
10845
|
"aria-label": info['aria-label'],
|