@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,114 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var clsx = require('clsx');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var reactIntl = require('react-intl');
|
|
6
|
-
require('../common/theme.js');
|
|
7
|
-
require('../common/direction.js');
|
|
8
|
-
var control = require('../common/propsValues/control.js');
|
|
9
|
-
require('../common/propsValues/breakpoint.js');
|
|
10
|
-
var size = require('../common/propsValues/size.js');
|
|
11
|
-
require('../common/propsValues/typography.js');
|
|
12
|
-
require('../common/propsValues/width.js');
|
|
13
|
-
require('../common/propsValues/type.js');
|
|
14
|
-
require('../common/propsValues/dateMode.js');
|
|
15
|
-
require('../common/propsValues/monthFormat.js');
|
|
16
|
-
require('../common/propsValues/position.js');
|
|
17
|
-
require('../common/propsValues/layouts.js');
|
|
18
|
-
require('../common/propsValues/status.js');
|
|
19
|
-
require('../common/propsValues/sentiment.js');
|
|
20
|
-
require('../common/propsValues/profileType.js');
|
|
21
|
-
require('../common/propsValues/variant.js');
|
|
22
|
-
require('../common/propsValues/scroll.js');
|
|
23
|
-
require('../common/propsValues/markdownNodeType.js');
|
|
24
|
-
require('../common/fileType.js');
|
|
25
|
-
require('@transferwise/icons');
|
|
26
|
-
require('../common/closeButton/CloseButton.messages.js');
|
|
27
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
28
|
-
var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
|
|
29
|
-
var Button_messages = require('../i18n/commonMessages/Button.messages.js');
|
|
30
|
-
var classMap = require('./classMap.js');
|
|
31
|
-
var legacyUtils = require('./legacyUtils/legacyUtils.js');
|
|
32
|
-
|
|
33
|
-
const LegacyButton = /*#__PURE__*/React.forwardRef(({
|
|
34
|
-
as: component = 'button',
|
|
35
|
-
block = false,
|
|
36
|
-
children,
|
|
37
|
-
className,
|
|
38
|
-
disabled,
|
|
39
|
-
loading = false,
|
|
40
|
-
priority = control.Priority.PRIMARY,
|
|
41
|
-
size: size$1 = size.Size.MEDIUM,
|
|
42
|
-
type = control.ControlType.ACCENT,
|
|
43
|
-
onClick,
|
|
44
|
-
...rest
|
|
45
|
-
}, ref) => {
|
|
46
|
-
const intl = reactIntl.useIntl();
|
|
47
|
-
legacyUtils.logDeprecationNotices({
|
|
48
|
-
size: size$1,
|
|
49
|
-
type
|
|
50
|
-
});
|
|
51
|
-
const newType = legacyUtils.establishNewType(type);
|
|
52
|
-
const newPriority = legacyUtils.establishNewPriority(priority, type);
|
|
53
|
-
const classes = clsx.clsx(`btn btn-${size$1}`, `np-btn np-btn-${size$1}`, {
|
|
54
|
-
'btn-loading': loading,
|
|
55
|
-
'btn-block np-btn-block': block,
|
|
56
|
-
disabled
|
|
57
|
-
},
|
|
58
|
-
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
59
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
60
|
-
classMap.typeClassMap[newType],
|
|
61
|
-
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
62
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
63
|
-
classMap.priorityClassMap[newPriority], className);
|
|
64
|
-
function processIndicatorSize() {
|
|
65
|
-
return ['sm', 'xs'].includes(size$1) ? 'xxs' : 'xs';
|
|
66
|
-
}
|
|
67
|
-
const Element = component ?? 'button';
|
|
68
|
-
let props;
|
|
69
|
-
if (Element === 'button') {
|
|
70
|
-
const {
|
|
71
|
-
htmlType = 'button',
|
|
72
|
-
...restProps
|
|
73
|
-
} = rest;
|
|
74
|
-
props = {
|
|
75
|
-
...restProps,
|
|
76
|
-
disabled,
|
|
77
|
-
'aria-disabled': loading,
|
|
78
|
-
type: htmlType
|
|
79
|
-
};
|
|
80
|
-
} else {
|
|
81
|
-
props = {
|
|
82
|
-
...rest,
|
|
83
|
-
'aria-disabled': loading
|
|
84
|
-
};
|
|
85
|
-
}
|
|
86
|
-
/**
|
|
87
|
-
* Ensures that the button cannot be activated in loading or disabled mode,
|
|
88
|
-
* when `aria-disabled` might be used over the `disabled` HTML attribute
|
|
89
|
-
*/
|
|
90
|
-
const handleClick = handler => event => {
|
|
91
|
-
if (disabled || loading) {
|
|
92
|
-
event.preventDefault();
|
|
93
|
-
} else if (typeof handler === 'function') {
|
|
94
|
-
handler(event);
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
return /*#__PURE__*/jsxRuntime.jsxs(Element, {
|
|
98
|
-
ref: ref,
|
|
99
|
-
className: classes,
|
|
100
|
-
onClick: handleClick(onClick),
|
|
101
|
-
...props,
|
|
102
|
-
"aria-live": loading ? 'polite' : 'off',
|
|
103
|
-
"aria-busy": loading,
|
|
104
|
-
"aria-label": loading ? intl.formatMessage(Button_messages.loadingAriaLabel) : rest['aria-label'],
|
|
105
|
-
children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
|
|
106
|
-
size: processIndicatorSize(),
|
|
107
|
-
className: "btn-loader",
|
|
108
|
-
"data-testid": "ButtonProgressIndicator"
|
|
109
|
-
})]
|
|
110
|
-
});
|
|
111
|
-
});
|
|
112
|
-
|
|
113
|
-
module.exports = LegacyButton;
|
|
114
|
-
//# sourceMappingURL=LegacyButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.js","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n /** @deprecated */\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\nexport type AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n href?: string;\n };\n\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import { clsx } from 'clsx';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { useIntl } from 'react-intl';
|
|
4
|
-
import '../common/theme.mjs';
|
|
5
|
-
import '../common/direction.mjs';
|
|
6
|
-
import { Priority, ControlType } from '../common/propsValues/control.mjs';
|
|
7
|
-
import '../common/propsValues/breakpoint.mjs';
|
|
8
|
-
import { Size } from '../common/propsValues/size.mjs';
|
|
9
|
-
import '../common/propsValues/typography.mjs';
|
|
10
|
-
import '../common/propsValues/width.mjs';
|
|
11
|
-
import '../common/propsValues/type.mjs';
|
|
12
|
-
import '../common/propsValues/dateMode.mjs';
|
|
13
|
-
import '../common/propsValues/monthFormat.mjs';
|
|
14
|
-
import '../common/propsValues/position.mjs';
|
|
15
|
-
import '../common/propsValues/layouts.mjs';
|
|
16
|
-
import '../common/propsValues/status.mjs';
|
|
17
|
-
import '../common/propsValues/sentiment.mjs';
|
|
18
|
-
import '../common/propsValues/profileType.mjs';
|
|
19
|
-
import '../common/propsValues/variant.mjs';
|
|
20
|
-
import '../common/propsValues/scroll.mjs';
|
|
21
|
-
import '../common/propsValues/markdownNodeType.mjs';
|
|
22
|
-
import '../common/fileType.mjs';
|
|
23
|
-
import '@transferwise/icons';
|
|
24
|
-
import '../common/closeButton/CloseButton.messages.mjs';
|
|
25
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
26
|
-
import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
|
|
27
|
-
import messages from '../i18n/commonMessages/Button.messages.mjs';
|
|
28
|
-
import { typeClassMap, priorityClassMap } from './classMap.mjs';
|
|
29
|
-
import { logDeprecationNotices, establishNewType, establishNewPriority } from './legacyUtils/legacyUtils.mjs';
|
|
30
|
-
|
|
31
|
-
const LegacyButton = /*#__PURE__*/forwardRef(({
|
|
32
|
-
as: component = 'button',
|
|
33
|
-
block = false,
|
|
34
|
-
children,
|
|
35
|
-
className,
|
|
36
|
-
disabled,
|
|
37
|
-
loading = false,
|
|
38
|
-
priority = Priority.PRIMARY,
|
|
39
|
-
size = Size.MEDIUM,
|
|
40
|
-
type = ControlType.ACCENT,
|
|
41
|
-
onClick,
|
|
42
|
-
...rest
|
|
43
|
-
}, ref) => {
|
|
44
|
-
const intl = useIntl();
|
|
45
|
-
logDeprecationNotices({
|
|
46
|
-
size,
|
|
47
|
-
type
|
|
48
|
-
});
|
|
49
|
-
const newType = establishNewType(type);
|
|
50
|
-
const newPriority = establishNewPriority(priority, type);
|
|
51
|
-
const classes = clsx(`btn btn-${size}`, `np-btn np-btn-${size}`, {
|
|
52
|
-
'btn-loading': loading,
|
|
53
|
-
'btn-block np-btn-block': block,
|
|
54
|
-
disabled
|
|
55
|
-
},
|
|
56
|
-
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
57
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
58
|
-
typeClassMap[newType],
|
|
59
|
-
// @ts-expect-error fix when refactor `typeClassMap` to TypeScript
|
|
60
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
|
|
61
|
-
priorityClassMap[newPriority], className);
|
|
62
|
-
function processIndicatorSize() {
|
|
63
|
-
return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
|
|
64
|
-
}
|
|
65
|
-
const Element = component ?? 'button';
|
|
66
|
-
let props;
|
|
67
|
-
if (Element === 'button') {
|
|
68
|
-
const {
|
|
69
|
-
htmlType = 'button',
|
|
70
|
-
...restProps
|
|
71
|
-
} = rest;
|
|
72
|
-
props = {
|
|
73
|
-
...restProps,
|
|
74
|
-
disabled,
|
|
75
|
-
'aria-disabled': loading,
|
|
76
|
-
type: htmlType
|
|
77
|
-
};
|
|
78
|
-
} else {
|
|
79
|
-
props = {
|
|
80
|
-
...rest,
|
|
81
|
-
'aria-disabled': loading
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Ensures that the button cannot be activated in loading or disabled mode,
|
|
86
|
-
* when `aria-disabled` might be used over the `disabled` HTML attribute
|
|
87
|
-
*/
|
|
88
|
-
const handleClick = handler => event => {
|
|
89
|
-
if (disabled || loading) {
|
|
90
|
-
event.preventDefault();
|
|
91
|
-
} else if (typeof handler === 'function') {
|
|
92
|
-
handler(event);
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
return /*#__PURE__*/jsxs(Element, {
|
|
96
|
-
ref: ref,
|
|
97
|
-
className: classes,
|
|
98
|
-
onClick: handleClick(onClick),
|
|
99
|
-
...props,
|
|
100
|
-
"aria-live": loading ? 'polite' : 'off',
|
|
101
|
-
"aria-busy": loading,
|
|
102
|
-
"aria-label": loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label'],
|
|
103
|
-
children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator, {
|
|
104
|
-
size: processIndicatorSize(),
|
|
105
|
-
className: "btn-loader",
|
|
106
|
-
"data-testid": "ButtonProgressIndicator"
|
|
107
|
-
})]
|
|
108
|
-
});
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
export { LegacyButton as default };
|
|
112
|
-
//# sourceMappingURL=LegacyButton.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n ControlType,\n Priority,\n ControlTypeAccent,\n ControlTypeNegative,\n ControlTypePositive,\n PriorityPrimary,\n PrioritySecondary,\n PriorityTertiary,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n block?: boolean;\n disabled?: boolean;\n loading?: boolean;\n /** @deprecated */\n type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n htmlType?: 'submit' | 'reset' | 'button';\n};\n\nexport type ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n };\n\nexport type AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n href?: string;\n };\n\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n (\n {\n as: component = 'button',\n block = false,\n children,\n className,\n disabled,\n loading = false,\n priority = Priority.PRIMARY,\n size = Size.MEDIUM,\n type = ControlType.ACCENT,\n onClick,\n ...rest\n }: LegacyButtonProps,\n ref,\n ) => {\n const intl = useIntl();\n\n logDeprecationNotices({ size, type });\n\n const newType = establishNewType(type);\n const newPriority = establishNewPriority(priority, type);\n\n const classes = clsx(\n `btn btn-${size}`,\n `np-btn np-btn-${size}`,\n {\n 'btn-loading': loading,\n 'btn-block np-btn-block': block,\n disabled,\n },\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n typeClassMap[newType],\n // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n priorityClassMap[newPriority],\n className,\n );\n\n function processIndicatorSize() {\n return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n }\n\n const Element = (component as ElementType) ?? 'button';\n let props;\n\n if (Element === 'button') {\n const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n props = {\n ...restProps,\n disabled,\n 'aria-disabled': loading,\n type: htmlType,\n };\n } else {\n props = {\n ...rest,\n 'aria-disabled': loading,\n } as AnchorProps;\n }\n\n /**\n * Ensures that the button cannot be activated in loading or disabled mode,\n * when `aria-disabled` might be used over the `disabled` HTML attribute\n */\n const handleClick =\n (handler: LegacyButtonProps['onClick']) =>\n (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else if (typeof handler === 'function') {\n handler(event);\n }\n };\n\n return (\n <Element\n ref={ref as React.Ref<ButtonReferenceType>}\n className={classes}\n onClick={handleClick(onClick)}\n {...props}\n aria-live={loading ? 'polite' : 'off'}\n aria-busy={loading}\n aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n >\n {children}\n {loading && (\n <ProcessIndicator\n size={processIndicatorSize()}\n className=\"btn-loader\"\n data-testid=\"ButtonProgressIndicator\"\n />\n )}\n </Element>\n );\n },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
.wds-Button {
|
|
2
|
-
--Button-background: var(--color-interactive-accent);
|
|
3
|
-
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
4
|
-
--Button-background-active: var(--color-interactive-accent-active);
|
|
5
|
-
--Button-color: var(--color-interactive-control);
|
|
6
|
-
--Button-border-radius: var(--radius-full);
|
|
7
|
-
--Button-label-gap: var(--size-4);
|
|
8
|
-
--Button-large-padding: var(--size-12) var(--size-16);
|
|
9
|
-
--Button-medium-padding: var(--size-8) var(--size-12);
|
|
10
|
-
--Button-small-padding: calc(var(--size-10) * 0.5) var(--size-12);
|
|
11
|
-
--Button-avatar-border-color: var(--color-border-neutral);
|
|
12
|
-
--Button-transition-duration: 150ms;
|
|
13
|
-
--Button-transition-easing: ease-in-out;
|
|
14
|
-
--Button-secondary-background: var(--color-interactive-neutral);
|
|
15
|
-
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
16
|
-
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
17
|
-
--Button-secondary-color: var(--color-interactive-primary);
|
|
18
|
-
--Button-tertiary-background: var(--color-background-neutral);
|
|
19
|
-
--Button-tertiary-background-hover: var(--color-background-neutral-hover);
|
|
20
|
-
--Button-tertiary-background-active: var(--color-background-neutral-active);
|
|
21
|
-
--Button-tertiary-color: var(--color-content-primary);
|
|
22
|
-
--Button-minimal-background: transparent;
|
|
23
|
-
--Button-minimal-background-hover: var(--color-background-screen-hover);
|
|
24
|
-
--Button-minimal-background-active: var(--color-background-screen-active);
|
|
25
|
-
--Button-minimal-color: var(--color-interactive-primary);
|
|
26
|
-
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
27
|
-
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
28
|
-
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
29
|
-
--Button-primary-negative-color: var(--color-contrast);
|
|
30
|
-
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
31
|
-
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
32
|
-
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
33
|
-
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
34
|
-
}
|
|
35
|
-
.np-theme-personal--bright-green .wds-Button {
|
|
36
|
-
--color-contrast: #FFFFFF;
|
|
37
|
-
--Button-secondary-color: var(--color-interactive-control);
|
|
38
|
-
--Button-secondary-negative-color: var(--color-contrast);
|
|
39
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.np-btn {
|
|
2
|
-
position: relative;
|
|
3
|
-
}
|
|
4
|
-
.np-btn.np-btn-block > span.btn-loader {
|
|
5
|
-
position: absolute;
|
|
6
|
-
left: 24px;
|
|
7
|
-
left: var(--size-24);
|
|
8
|
-
}
|
|
9
|
-
[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
|
|
10
|
-
right: 24px;
|
|
11
|
-
right: var(--size-24);
|
|
12
|
-
left: auto;
|
|
13
|
-
left: initial;
|
|
14
|
-
}
|
|
15
|
-
.np-btn.np-btn-xs > span.btn-loader {
|
|
16
|
-
background-size: 16px 16px;
|
|
17
|
-
}
|
|
18
|
-
.np-btn.np-btn-xs.btn-block > span.btn-loader {
|
|
19
|
-
top: 0;
|
|
20
|
-
}
|
|
21
|
-
.np-btn.disabled[class] {
|
|
22
|
-
pointer-events: auto;
|
|
23
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { ButtonProps as LegacyButtonProps } from './LegacyButton';
|
|
2
|
-
import { ButtonProps as NewButtonProps } from './Button.types';
|
|
3
|
-
type LegacyButtonType = 'accent' | 'negative' | 'positive' | 'primary' | 'pay' | 'secondary' | 'danger' | 'link' | null | undefined;
|
|
4
|
-
type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
|
|
5
|
-
type CommonButtonProps = {
|
|
6
|
-
href?: string;
|
|
7
|
-
target?: string;
|
|
8
|
-
ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
|
|
9
|
-
};
|
|
10
|
-
export type ButtonProps = (Omit<LegacyButtonProps, 'ref'> & CommonButtonProps & {
|
|
11
|
-
priority?: LegacyButtonProps['priority'];
|
|
12
|
-
type?: LegacyButtonType;
|
|
13
|
-
htmlType?: string;
|
|
14
|
-
v2?: false;
|
|
15
|
-
}) | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> & CommonButtonProps & {
|
|
16
|
-
priority?: NewButtonProps['priority'];
|
|
17
|
-
type?: NewButtonType;
|
|
18
|
-
v2: true;
|
|
19
|
-
});
|
|
20
|
-
declare const Button: import("react").ForwardRefExoticComponent<(Omit<Omit<LegacyButtonProps, "ref"> & CommonButtonProps & {
|
|
21
|
-
priority?: LegacyButtonProps["priority"];
|
|
22
|
-
type?: LegacyButtonType;
|
|
23
|
-
htmlType?: string;
|
|
24
|
-
v2?: false;
|
|
25
|
-
}, "ref"> | Omit<Omit<Omit<NewButtonProps, "type">, "ref"> & CommonButtonProps & {
|
|
26
|
-
priority?: NewButtonProps["priority"];
|
|
27
|
-
type?: NewButtonType;
|
|
28
|
-
v2: true;
|
|
29
|
-
}, "ref">) & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
30
|
-
export default Button;
|
|
31
|
-
//# sourceMappingURL=Button.resolver.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAEnB,WAAW,IAAI,iBAAiB,EACjC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAG/D,KAAK,gBAAgB,GACjB,QAAQ,GACR,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,WAAW,GACX,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,SAAS,CAAC;AAEd,KAAK,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAElF,KAAK,iBAAiB,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAC7B,iBAAiB,GAAG;IAClB,QAAQ,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,EAAE,CAAC,EAAE,KAAK,CAAC;CACZ,CAAC,GACJ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GACxC,iBAAiB,GAAG;IAClB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,EAAE,EAAE,IAAI,CAAC;CACV,CAAC,CAAC;AAyDT,QAAA,MAAM,MAAM;eAnEO,iBAAiB,CAAC,UAAU,CAAC;WACjC,gBAAgB;eACZ,MAAM;SACZ,KAAK;;eAIC,cAAc,CAAC,UAAU,CAAC;WAC9B,aAAa;QAChB,IAAI;kFAyFd,CAAC;AAIH,eAAe,MAAM,CAAC"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import type { PrimitiveButtonProps, PrimitiveAnchorProps, PrimitiveButtonElementRef, PrimitiveAnchorElementRef } from '../primitives';
|
|
3
|
-
import type { SingleAvatarType } from '../avatarLayout';
|
|
4
|
-
export type ButtonSentiment = 'default' | 'negative';
|
|
5
|
-
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
|
|
6
|
-
export type ButtonType = 'button' | 'submit' | 'reset';
|
|
7
|
-
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
8
|
-
export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
|
|
9
|
-
/**
|
|
10
|
-
* Common properties for the Button component.
|
|
11
|
-
*/
|
|
12
|
-
export interface CommonButtonProps {
|
|
13
|
-
/**
|
|
14
|
-
* If set, toggles the new Button API
|
|
15
|
-
* @default false
|
|
16
|
-
* */
|
|
17
|
-
v2?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* The HTML element to render
|
|
20
|
-
* @default 'button'
|
|
21
|
-
**/
|
|
22
|
-
as?: 'button' | 'a';
|
|
23
|
-
/** Additional class name(s) to apply to the button */
|
|
24
|
-
className?: string;
|
|
25
|
-
/**
|
|
26
|
-
* @default false
|
|
27
|
-
**/
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
href?: string;
|
|
30
|
-
/**
|
|
31
|
-
* @default false
|
|
32
|
-
* */
|
|
33
|
-
loading?: boolean;
|
|
34
|
-
/** Whether the button should take up the full width of its container */
|
|
35
|
-
block?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Size of the button
|
|
38
|
-
* @default lg
|
|
39
|
-
* */
|
|
40
|
-
size?: ButtonSize;
|
|
41
|
-
/**
|
|
42
|
-
* Priority of the button
|
|
43
|
-
* @default "primary"
|
|
44
|
-
*/
|
|
45
|
-
priority?: ButtonPriority;
|
|
46
|
-
/**
|
|
47
|
-
* Sentiment of the button
|
|
48
|
-
* @default default
|
|
49
|
-
*/
|
|
50
|
-
sentiment?: ButtonSentiment;
|
|
51
|
-
/** Icon to be displayed on the left side of the button */
|
|
52
|
-
iconStart?: React.ElementType;
|
|
53
|
-
/** Icon to be displayed on the right side of the button */
|
|
54
|
-
iconEnd?: React.ElementType;
|
|
55
|
-
/** Media to be displayed on the left side of the button */
|
|
56
|
-
avatars?: SingleAvatarType[];
|
|
57
|
-
/** Optional property to provide component Ref */
|
|
58
|
-
ref?: ButtonRefType;
|
|
59
|
-
/** Content to be displayed inside the button */
|
|
60
|
-
children?: ReactNode;
|
|
61
|
-
}
|
|
62
|
-
export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
|
|
63
|
-
export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
|
|
64
|
-
export type ButtonProps = ButtonElementProps | AnchorElementProps;
|
|
65
|
-
//# sourceMappingURL=Button.types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;SAGK;IACL,EAAE,CAAC,EAAE,OAAO,CAAC;IAEb;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;QAEI;IACJ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE9B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE7B,iDAAiD;IACjD,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
|
|
2
|
-
/** @deprecated */
|
|
3
|
-
type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
|
|
4
|
-
/** @deprecated */
|
|
5
|
-
type DeprecatedSizes = SizeExtraSmall;
|
|
6
|
-
type CommonProps = {
|
|
7
|
-
block?: boolean;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
loading?: boolean;
|
|
10
|
-
/** @deprecated */
|
|
11
|
-
type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
|
|
12
|
-
priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
|
|
13
|
-
size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
|
|
14
|
-
htmlType?: 'submit' | 'reset' | 'button';
|
|
15
|
-
};
|
|
16
|
-
export type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
|
|
17
|
-
as?: 'button';
|
|
18
|
-
};
|
|
19
|
-
export type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
|
|
20
|
-
as?: 'a';
|
|
21
|
-
href?: string;
|
|
22
|
-
};
|
|
23
|
-
export type LegacyButtonProps = ButtonProps | AnchorProps;
|
|
24
|
-
export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
|
|
25
|
-
/**
|
|
26
|
-
* @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
|
|
27
|
-
*/
|
|
28
|
-
declare const LegacyButton: import("react").ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<AnchorProps, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
|
|
29
|
-
export default LegacyButton;
|
|
30
|
-
//# sourceMappingURL=LegacyButton.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,WAAW,CAAC;AAOnB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { forwardRef } from 'react';
|
|
2
|
-
import LegacyButton, {
|
|
3
|
-
AnchorProps as LegacyAnchorProps,
|
|
4
|
-
ButtonProps as LegacyButtonProps,
|
|
5
|
-
} from './LegacyButton';
|
|
6
|
-
import { ButtonProps as NewButtonProps } from './Button.types';
|
|
7
|
-
import NewButton from './Button';
|
|
8
|
-
|
|
9
|
-
type LegacyButtonType =
|
|
10
|
-
| 'accent'
|
|
11
|
-
| 'negative'
|
|
12
|
-
| 'positive'
|
|
13
|
-
| 'primary'
|
|
14
|
-
| 'pay'
|
|
15
|
-
| 'secondary'
|
|
16
|
-
| 'danger'
|
|
17
|
-
| 'link'
|
|
18
|
-
| null
|
|
19
|
-
| undefined;
|
|
20
|
-
|
|
21
|
-
type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
|
|
22
|
-
|
|
23
|
-
type CommonButtonProps = {
|
|
24
|
-
href?: string;
|
|
25
|
-
target?: string;
|
|
26
|
-
ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export type ButtonProps =
|
|
30
|
-
| (Omit<LegacyButtonProps, 'ref'> &
|
|
31
|
-
CommonButtonProps & {
|
|
32
|
-
priority?: LegacyButtonProps['priority'];
|
|
33
|
-
type?: LegacyButtonType;
|
|
34
|
-
htmlType?: string;
|
|
35
|
-
v2?: false;
|
|
36
|
-
})
|
|
37
|
-
| (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &
|
|
38
|
-
CommonButtonProps & {
|
|
39
|
-
priority?: NewButtonProps['priority'];
|
|
40
|
-
type?: NewButtonType;
|
|
41
|
-
v2: true;
|
|
42
|
-
});
|
|
43
|
-
|
|
44
|
-
const mapProps = (props: LegacyButtonProps): NewButtonProps => {
|
|
45
|
-
const { priority, size, type, as, ...newProps } = props;
|
|
46
|
-
|
|
47
|
-
const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
|
|
48
|
-
accent: {
|
|
49
|
-
primary: 'primary',
|
|
50
|
-
secondary: 'tertiary',
|
|
51
|
-
tertiary: 'minimal',
|
|
52
|
-
},
|
|
53
|
-
positive: {
|
|
54
|
-
primary: 'primary',
|
|
55
|
-
secondary: 'tertiary',
|
|
56
|
-
tertiary: 'tertiary',
|
|
57
|
-
},
|
|
58
|
-
negative: {
|
|
59
|
-
primary: 'primary',
|
|
60
|
-
secondary: 'secondary',
|
|
61
|
-
tertiary: 'secondary',
|
|
62
|
-
},
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
const mappedPriority =
|
|
66
|
-
type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
|
|
67
|
-
const mappedSentiment = type === 'negative' ? 'negative' : undefined;
|
|
68
|
-
|
|
69
|
-
const legacyButtonTypes: LegacyButtonType[] = [
|
|
70
|
-
'accent',
|
|
71
|
-
'negative',
|
|
72
|
-
'positive',
|
|
73
|
-
'primary',
|
|
74
|
-
'pay',
|
|
75
|
-
'secondary',
|
|
76
|
-
'danger',
|
|
77
|
-
'link',
|
|
78
|
-
];
|
|
79
|
-
|
|
80
|
-
const resolveSize = () => {
|
|
81
|
-
if (size) {
|
|
82
|
-
return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
return size;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
return {
|
|
89
|
-
...newProps,
|
|
90
|
-
size: resolveSize(),
|
|
91
|
-
priority: mappedPriority,
|
|
92
|
-
sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
|
|
93
|
-
type:
|
|
94
|
-
type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
|
|
95
|
-
v2: undefined,
|
|
96
|
-
} as NewButtonProps;
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
|
|
100
|
-
const { v2 = false, as, ...rest } = props;
|
|
101
|
-
|
|
102
|
-
if (v2) {
|
|
103
|
-
const mappedProps = mapProps(props as LegacyButtonProps);
|
|
104
|
-
return (
|
|
105
|
-
<NewButton
|
|
106
|
-
{...mappedProps}
|
|
107
|
-
ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
|
|
108
|
-
as={as}
|
|
109
|
-
/>
|
|
110
|
-
);
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
if (as === 'a') {
|
|
114
|
-
return (
|
|
115
|
-
<LegacyButton
|
|
116
|
-
{...(rest as LegacyAnchorProps)}
|
|
117
|
-
ref={ref as React.Ref<HTMLAnchorElement>}
|
|
118
|
-
as="a"
|
|
119
|
-
/>
|
|
120
|
-
);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
return (
|
|
124
|
-
<LegacyButton
|
|
125
|
-
{...(rest as LegacyButtonProps)}
|
|
126
|
-
ref={ref as React.Ref<HTMLButtonElement>}
|
|
127
|
-
as="button"
|
|
128
|
-
/>
|
|
129
|
-
);
|
|
130
|
-
});
|
|
131
|
-
|
|
132
|
-
Button.displayName = 'Button';
|
|
133
|
-
|
|
134
|
-
export default Button;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/react';
|
|
2
|
-
import Button from './Button.resolver';
|
|
3
|
-
import { expect, userEvent, within } from '@storybook/test';
|
|
4
|
-
import { storyConfig } from '../test-utils';
|
|
5
|
-
|
|
6
|
-
const meta: Meta<typeof Button> = {
|
|
7
|
-
component: Button,
|
|
8
|
-
title: 'Actions/Button/Tests',
|
|
9
|
-
};
|
|
10
|
-
export default meta;
|
|
11
|
-
|
|
12
|
-
export const FocusMinimal = storyConfig(
|
|
13
|
-
{
|
|
14
|
-
render: () => (
|
|
15
|
-
<Button v2 priority="minimal">
|
|
16
|
-
Focus has underline
|
|
17
|
-
</Button>
|
|
18
|
-
),
|
|
19
|
-
},
|
|
20
|
-
{},
|
|
21
|
-
);
|
|
22
|
-
FocusMinimal.play = async ({ canvasElement }) => {
|
|
23
|
-
await userEvent.tab();
|
|
24
|
-
const canvas = within(canvasElement);
|
|
25
|
-
const buttonElement: HTMLButtonElement = canvas.getByRole('button');
|
|
26
|
-
await expect(buttonElement).toHaveFocus();
|
|
27
|
-
};
|