@transferwise/components 0.0.0-experimental-e7eccea → 0.0.0-experimental-328f2cc
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/avatarLayout/AvatarLayout.js +2 -9
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +2 -9
- package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
- package/build/button/Button.js +79 -78
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +80 -79
- package/build/button/Button.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +2 -2
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
- package/build/header/Header.js +2 -2
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -1
- package/build/index.js +2 -2
- package/build/index.mjs +1 -1
- package/build/link/Link.js +3 -8
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +3 -8
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +11 -219
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +3 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +3 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +4 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +4 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
- package/build/select/Select.js +2 -2
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +0 -11
- package/build/styles/button/Button.css +15 -200
- package/build/styles/main.css +11 -219
- package/build/styles/nudge/Nudge.css +11 -0
- package/build/types/avatarLayout/AvatarLayout.d.ts +2 -1
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/avatarLayout/index.d.ts +0 -1
- package/build/types/avatarLayout/index.d.ts.map +1 -1
- package/build/types/button/Button.d.ts +23 -1
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/index.d.ts +2 -2
- package/build/types/button/index.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 +1 -1
- package/build/types/nudge/Nudge.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +1 -5
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
- package/build/types/test-utils/story-config.d.ts +1 -1
- package/build/types/test-utils/story-config.d.ts.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +2 -2
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -1
- package/build/upload/steps/processingStep/processingStep.js +2 -2
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -1
- package/build/uploadInput/UploadInput.js +3 -3
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -1
- package/package.json +3 -3
- package/src/alert/Alert.tests.story.tsx +1 -1
- package/src/avatarLayout/AvatarLayout.css +0 -11
- package/src/avatarLayout/AvatarLayout.less +1 -18
- package/src/avatarLayout/AvatarLayout.tsx +3 -11
- package/src/avatarLayout/index.ts +0 -1
- package/src/button/Button.css +15 -200
- package/src/button/Button.less +14 -207
- package/src/button/Button.spec.tsx +227 -75
- package/src/button/Button.story.tsx +135 -729
- package/src/button/Button.tsx +132 -88
- package/src/button/__snapshots__/Button.spec.tsx.snap +309 -0
- package/src/button/index.ts +3 -2
- package/src/field/Field.story.tsx +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
- package/src/inputs/SelectInput.story.tsx +1 -1
- package/src/label/Label.story.tsx +1 -1
- package/src/link/Link.tsx +6 -15
- package/src/main.css +11 -219
- package/src/main.less +0 -1
- package/src/nudge/Nudge.css +11 -0
- package/src/nudge/Nudge.less +3 -0
- package/src/nudge/Nudge.story.tsx +10 -0
- package/src/nudge/Nudge.tsx +2 -1
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +7 -1
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +1 -6
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +3 -1
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +8 -1
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +5 -2
- package/src/test-utils/Parameters.d.ts +1 -9
- package/src/test-utils/story-config.ts +1 -10
- package/build/button/Button.resolver.js +0 -86
- package/build/button/Button.resolver.js.map +0 -1
- package/build/button/Button.resolver.mjs +0 -84
- package/build/button/Button.resolver.mjs.map +0 -1
- package/build/button/LegacyButton.js +0 -114
- package/build/button/LegacyButton.js.map +0 -1
- package/build/button/LegacyButton.mjs +0 -112
- package/build/button/LegacyButton.mjs.map +0 -1
- package/build/styles/button/Button.vars.css +0 -39
- package/build/styles/button/LegacyButton.css +0 -23
- package/build/types/button/Button.resolver.d.ts +0 -31
- package/build/types/button/Button.resolver.d.ts.map +0 -1
- package/build/types/button/Button.types.d.ts +0 -65
- package/build/types/button/Button.types.d.ts.map +0 -1
- package/build/types/button/LegacyButton.d.ts +0 -30
- package/build/types/button/LegacyButton.d.ts.map +0 -1
- package/src/button/Button.resolver.tsx +0 -134
- package/src/button/Button.tests.story.tsx +0 -27
- package/src/button/Button.types.ts +0 -86
- package/src/button/Button.vars.css +0 -39
- package/src/button/Button.vars.less +0 -50
- package/src/button/LegacyButton.css +0 -23
- package/src/button/LegacyButton.less +0 -24
- package/src/button/LegacyButton.spec.tsx +0 -146
- package/src/button/LegacyButton.story.tsx +0 -225
- package/src/button/LegacyButton.tsx +0 -161
|
@@ -1,161 +0,0 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import { ElementType, forwardRef, MouseEvent } from 'react';
|
|
3
|
-
import { useIntl } from 'react-intl';
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
Size,
|
|
7
|
-
ControlType,
|
|
8
|
-
Priority,
|
|
9
|
-
ControlTypeAccent,
|
|
10
|
-
ControlTypeNegative,
|
|
11
|
-
ControlTypePositive,
|
|
12
|
-
PriorityPrimary,
|
|
13
|
-
PrioritySecondary,
|
|
14
|
-
PriorityTertiary,
|
|
15
|
-
SizeExtraSmall,
|
|
16
|
-
SizeSmall,
|
|
17
|
-
SizeMedium,
|
|
18
|
-
SizeLarge,
|
|
19
|
-
} from '../common';
|
|
20
|
-
import ProcessIndicator from '../processIndicator';
|
|
21
|
-
|
|
22
|
-
import messages from '../i18n/commonMessages/Button.messages';
|
|
23
|
-
import { typeClassMap, priorityClassMap } from './classMap';
|
|
24
|
-
import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
|
|
25
|
-
|
|
26
|
-
/** @deprecated */
|
|
27
|
-
type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
|
|
28
|
-
|
|
29
|
-
/** @deprecated */
|
|
30
|
-
type DeprecatedSizes = SizeExtraSmall;
|
|
31
|
-
|
|
32
|
-
type CommonProps = {
|
|
33
|
-
block?: boolean;
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
loading?: boolean;
|
|
36
|
-
/** @deprecated */
|
|
37
|
-
type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
|
|
38
|
-
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
|
|
39
|
-
size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
|
|
40
|
-
htmlType?: 'submit' | 'reset' | 'button';
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
export type ButtonProps = CommonProps &
|
|
44
|
-
Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
|
|
45
|
-
as?: 'button';
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
export type AnchorProps = CommonProps &
|
|
49
|
-
Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
|
|
50
|
-
as?: 'a';
|
|
51
|
-
href?: string;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
export type LegacyButtonProps = ButtonProps | AnchorProps;
|
|
55
|
-
|
|
56
|
-
export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
|
|
60
|
-
*/
|
|
61
|
-
const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
|
|
62
|
-
(
|
|
63
|
-
{
|
|
64
|
-
as: component = 'button',
|
|
65
|
-
block = false,
|
|
66
|
-
children,
|
|
67
|
-
className,
|
|
68
|
-
disabled,
|
|
69
|
-
loading = false,
|
|
70
|
-
priority = Priority.PRIMARY,
|
|
71
|
-
size = Size.MEDIUM,
|
|
72
|
-
type = ControlType.ACCENT,
|
|
73
|
-
onClick,
|
|
74
|
-
...rest
|
|
75
|
-
}: LegacyButtonProps,
|
|
76
|
-
ref,
|
|
77
|
-
) => {
|
|
78
|
-
const intl = useIntl();
|
|
79
|
-
|
|
80
|
-
logDeprecationNotices({ size, type });
|
|
81
|
-
|
|
82
|
-
const newType = establishNewType(type);
|
|
83
|
-
const newPriority = establishNewPriority(priority, type);
|
|
84
|
-
|
|
85
|
-
const classes = clsx(
|
|
86
|
-
`btn btn-${size}`,
|
|
87
|
-
`np-btn np-btn-${size}`,
|
|
88
|
-
{
|
|
89
|
-
'btn-loading': loading,
|
|
90
|
-
'btn-block np-btn-block': block,
|
|
91
|
-
disabled,
|
|
92
|
-
},
|
|
93
|
-
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
94
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
95
|
-
typeClassMap[newType],
|
|
96
|
-
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
97
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
98
|
-
priorityClassMap[newPriority],
|
|
99
|
-
className,
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
function processIndicatorSize() {
|
|
103
|
-
return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
const Element = (component as ElementType) ?? 'button';
|
|
107
|
-
let props;
|
|
108
|
-
|
|
109
|
-
if (Element === 'button') {
|
|
110
|
-
const { htmlType = 'button', ...restProps } = rest as ButtonProps;
|
|
111
|
-
props = {
|
|
112
|
-
...restProps,
|
|
113
|
-
disabled,
|
|
114
|
-
'aria-disabled': loading,
|
|
115
|
-
type: htmlType,
|
|
116
|
-
};
|
|
117
|
-
} else {
|
|
118
|
-
props = {
|
|
119
|
-
...rest,
|
|
120
|
-
'aria-disabled': loading,
|
|
121
|
-
} as AnchorProps;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* Ensures that the button cannot be activated in loading or disabled mode,
|
|
126
|
-
* when `aria-disabled` might be used over the `disabled` HTML attribute
|
|
127
|
-
*/
|
|
128
|
-
const handleClick =
|
|
129
|
-
(handler: LegacyButtonProps['onClick']) =>
|
|
130
|
-
(event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {
|
|
131
|
-
if (disabled || loading) {
|
|
132
|
-
event.preventDefault();
|
|
133
|
-
} else if (typeof handler === 'function') {
|
|
134
|
-
handler(event);
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
return (
|
|
139
|
-
<Element
|
|
140
|
-
ref={ref as React.Ref<ButtonReferenceType>}
|
|
141
|
-
className={classes}
|
|
142
|
-
onClick={handleClick(onClick)}
|
|
143
|
-
{...props}
|
|
144
|
-
aria-live={loading ? 'polite' : 'off'}
|
|
145
|
-
aria-busy={loading}
|
|
146
|
-
aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
|
|
147
|
-
>
|
|
148
|
-
{children}
|
|
149
|
-
{loading && (
|
|
150
|
-
<ProcessIndicator
|
|
151
|
-
size={processIndicatorSize()}
|
|
152
|
-
className="btn-loader"
|
|
153
|
-
data-testid="ButtonProgressIndicator"
|
|
154
|
-
/>
|
|
155
|
-
)}
|
|
156
|
-
</Element>
|
|
157
|
-
);
|
|
158
|
-
},
|
|
159
|
-
);
|
|
160
|
-
|
|
161
|
-
export default LegacyButton;
|