@transferwise/components 0.0.0-experimental-53c607c → 0.0.0-experimental-b002e6f
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 +97 -74
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +98 -75
- package/build/button/Button.mjs.map +1 -1
- package/build/common/action/Action.js +1 -1
- package/build/common/action/Action.js.map +1 -1
- package/build/common/action/Action.mjs +1 -1
- package/build/common/action/Action.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/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs.map +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 +0 -269
- package/build/nudge/Nudge.js +1 -1
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +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 +3 -5
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +2 -4
- package/build/select/Select.mjs.map +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +0 -11
- package/build/styles/button/Button.css +16 -251
- package/build/styles/main.css +0 -269
- 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/definitionList/DefinitionList.d.ts +1 -2
- package/build/types/definitionList/DefinitionList.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/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/test-utils/index.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/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/avatarWrapper/AvatarWrapper.story.tsx +0 -2
- package/src/button/Button.css +16 -251
- package/src/button/Button.less +14 -214
- package/src/button/Button.spec.tsx +231 -54
- package/src/button/Button.story.tsx +136 -287
- package/src/button/Button.tsx +131 -86
- package/src/button/__snapshots__/{LegacyButton.spec.tsx.snap → Button.spec.tsx.snap} +22 -22
- package/src/button/index.ts +3 -2
- package/src/common/action/Action.tsx +1 -1
- package/src/definitionList/DefinitionList.story.tsx +57 -57
- package/src/definitionList/DefinitionList.tsx +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
- package/src/iconButton/IconButton.less +1 -1
- package/src/inputs/SelectInput.story.tsx +1 -1
- package/src/link/Link.tsx +6 -15
- package/src/main.css +0 -269
- package/src/main.less +0 -1
- package/src/nudge/Nudge.tsx +1 -1
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +7 -1
- package/src/primitives/PrimitiveAnchor/stories/PrimitiveAnchor.story.tsx +1 -1
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +3 -1
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +8 -1
- package/src/primitives/PrimitiveButton/stories/PrimitiveButton.story.tsx +1 -1
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +5 -2
- package/src/select/Select.tsx +0 -1
- package/src/slidingPanel/SlidingPanel.spec.tsx +69 -0
- package/src/test-utils/index.tsx +1 -0
- package/build/button/Button.resolver.js +0 -67
- package/build/button/Button.resolver.js.map +0 -1
- package/build/button/Button.resolver.mjs +0 -65
- 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 -57
- 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 -50
- 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 -113
- package/src/button/Button.types.ts +0 -70
- package/src/button/Button.vars.css +0 -57
- package/src/button/Button.vars.less +0 -71
- package/src/button/LegacyButton.css +0 -23
- package/src/button/LegacyButton.less +0 -24
- package/src/button/LegacyButton.spec.tsx +0 -245
- package/src/button/LegacyButton.story.tsx +0 -224
- package/src/button/LegacyButton.tsx +0 -161
- package/src/definitionList/DefinitionList.spec.js +0 -91
- package/src/slidingPanel/SlidingPanel.spec.js +0 -56
|
@@ -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 useNewButton .. />` 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 useNewButton .. />` 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,57 +0,0 @@
|
|
|
1
|
-
:root {
|
|
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-padding: var(--size-8) var(--size-12);
|
|
7
|
-
--Button-border-radius: var(--radius-full);
|
|
8
|
-
--Button-font-size: var(--font-size-16);
|
|
9
|
-
--Button-line-height: var(--size-24);
|
|
10
|
-
--Button-font-weight: var(--font-weight-semi-bold);
|
|
11
|
-
--Button-letter-spacing: -0.011em;
|
|
12
|
-
--Button-size-small-padding: 5px var(--size-12);
|
|
13
|
-
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
14
|
-
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
15
|
-
--Button-avatar-border-color: var(--color-border-neutral);
|
|
16
|
-
--Button-secondary-background: var(--color-interactive-neutral);
|
|
17
|
-
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
18
|
-
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
19
|
-
--Button-secondary-color: var(--color-interactive-primary);
|
|
20
|
-
--Button-tertiary-background: var(--color-background-neutral);
|
|
21
|
-
--Button-tertiary-background-hover: var(--color-background-neutral-hover);
|
|
22
|
-
--Button-tertiary-background-active: var(--color-background-neutral-active);
|
|
23
|
-
--Button-tertiary-color: var(--color-content-primary);
|
|
24
|
-
--Button-minimal-background: transparent;
|
|
25
|
-
--Button-minimal-background-hover: var(--color-background-screen-hover);
|
|
26
|
-
--Button-minimal-background-active: var(--color-background-screen-active);
|
|
27
|
-
--Button-minimal-color: var(--color-interactive-primary);
|
|
28
|
-
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
29
|
-
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
30
|
-
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
31
|
-
--Button-primary-negative-color: var(--color-contrast);
|
|
32
|
-
--Button-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
|
|
33
|
-
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
34
|
-
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
35
|
-
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
36
|
-
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
37
|
-
--Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
|
|
38
|
-
}
|
|
39
|
-
.np-theme-personal--dark .wds-Button {
|
|
40
|
-
--Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
41
|
-
}
|
|
42
|
-
.np-theme-personal--forest-green .wds-Button {
|
|
43
|
-
--color-interactive-neutral: rgba(159,232,112,0.2);
|
|
44
|
-
--color-interactive-neutral-hover: rgba(205,255,173,0.2);
|
|
45
|
-
--color-interactive-neutral-active: rgba(236,255,224,0.2);
|
|
46
|
-
--color-sentiment-negative-secondary: rgba(255,196,194,0.2);
|
|
47
|
-
--color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
|
|
48
|
-
--color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
|
|
49
|
-
--Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
50
|
-
--Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
51
|
-
}
|
|
52
|
-
.np-theme-personal--bright-green .wds-Button {
|
|
53
|
-
--color-contrast: #FFFFFF;
|
|
54
|
-
--Button-secondary-color: var(--color-interactive-control);
|
|
55
|
-
--Button-secondary-negative-color: var(--color-contrast);
|
|
56
|
-
--Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
|
|
57
|
-
}
|
|
@@ -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 { 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
|
-
useNewButton?: false;
|
|
15
|
-
}) | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> & CommonButtonProps & {
|
|
16
|
-
priority?: NewButtonProps['priority'];
|
|
17
|
-
type?: NewButtonType;
|
|
18
|
-
useNewButton: 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
|
-
useNewButton?: false;
|
|
25
|
-
}, "ref"> | Omit<Omit<Omit<NewButtonProps, "type">, "ref"> & CommonButtonProps & {
|
|
26
|
-
priority?: NewButtonProps["priority"];
|
|
27
|
-
type?: NewButtonType;
|
|
28
|
-
useNewButton: 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,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,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,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB,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,YAAY,EAAE,IAAI,CAAC;CACpB,CAAC,CAAC;AAkDT,QAAA,MAAM,MAAM;eA5DO,iBAAiB,CAAC,UAAU,CAAC;WACjC,gBAAgB;eACZ,MAAM;mBACF,KAAK;;eAIT,cAAc,CAAC,UAAU,CAAC;WAC9B,aAAa;kBACN,IAAI;kFAuExB,CAAC;AAIH,eAAe,MAAM,CAAC"}
|
|
@@ -1,50 +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 ButtonApperance = '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
|
-
/** The HTML element to render */
|
|
14
|
-
as?: 'button' | 'a' | null;
|
|
15
|
-
/** Additional class name(s) to apply to the button */
|
|
16
|
-
className?: string;
|
|
17
|
-
/** Content to be displayed inside the button */
|
|
18
|
-
children?: ReactNode;
|
|
19
|
-
/** Whether the button is disabled */
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
href?: string;
|
|
22
|
-
/** Whether the button is in a loading state */
|
|
23
|
-
loading?: boolean;
|
|
24
|
-
/** Whether the button should take up the full width of its container */
|
|
25
|
-
block?: boolean;
|
|
26
|
-
/** Size of the button */
|
|
27
|
-
size?: ButtonSize;
|
|
28
|
-
/**
|
|
29
|
-
* Priority of the button
|
|
30
|
-
* @default 'primary'
|
|
31
|
-
*/
|
|
32
|
-
priority?: ButtonPriority;
|
|
33
|
-
/**
|
|
34
|
-
* Appearance of the button
|
|
35
|
-
* @default 'default'
|
|
36
|
-
*/
|
|
37
|
-
appearance?: ButtonApperance;
|
|
38
|
-
/** Icon to be displayed on the left side of the button */
|
|
39
|
-
iconStart?: React.ElementType;
|
|
40
|
-
/** Icon to be displayed on the right side of the button */
|
|
41
|
-
iconEnd?: React.ElementType;
|
|
42
|
-
/** Media to be displayed on the left side of the button */
|
|
43
|
-
avatars?: SingleAvatarType[];
|
|
44
|
-
/** Optional property to provide component Ref */
|
|
45
|
-
ref?: ButtonRefType;
|
|
46
|
-
}
|
|
47
|
-
export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
|
|
48
|
-
export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
|
|
49
|
-
export type ButtonProps = ButtonElementProps | AnchorElementProps;
|
|
50
|
-
//# 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,iCAAiC;IACjC,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC;IAE3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,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;CACrB;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 useNewButton .. />` 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,113 +0,0 @@
|
|
|
1
|
-
import { forwardRef } from 'react';
|
|
2
|
-
import LegacyButton, { LegacyButtonProps } from './LegacyButton';
|
|
3
|
-
import { ButtonProps as NewButtonProps } from './Button.types';
|
|
4
|
-
import NewButton from './Button';
|
|
5
|
-
|
|
6
|
-
type LegacyButtonType =
|
|
7
|
-
| 'accent'
|
|
8
|
-
| 'negative'
|
|
9
|
-
| 'positive'
|
|
10
|
-
| 'primary'
|
|
11
|
-
| 'pay'
|
|
12
|
-
| 'secondary'
|
|
13
|
-
| 'danger'
|
|
14
|
-
| 'link'
|
|
15
|
-
| null
|
|
16
|
-
| undefined;
|
|
17
|
-
|
|
18
|
-
type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
|
|
19
|
-
|
|
20
|
-
type CommonButtonProps = {
|
|
21
|
-
href?: string;
|
|
22
|
-
target?: string;
|
|
23
|
-
ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
export type ButtonProps =
|
|
27
|
-
| (Omit<LegacyButtonProps, 'ref'> &
|
|
28
|
-
CommonButtonProps & {
|
|
29
|
-
priority?: LegacyButtonProps['priority'];
|
|
30
|
-
type?: LegacyButtonType;
|
|
31
|
-
htmlType?: string;
|
|
32
|
-
useNewButton?: false;
|
|
33
|
-
})
|
|
34
|
-
| (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &
|
|
35
|
-
CommonButtonProps & {
|
|
36
|
-
priority?: NewButtonProps['priority'];
|
|
37
|
-
type?: NewButtonType;
|
|
38
|
-
useNewButton: true;
|
|
39
|
-
});
|
|
40
|
-
|
|
41
|
-
const mapProps = (props: LegacyButtonProps): NewButtonProps => {
|
|
42
|
-
const { priority, size, type, as, ...newProps } = props;
|
|
43
|
-
|
|
44
|
-
const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
|
|
45
|
-
accent: {
|
|
46
|
-
primary: 'primary',
|
|
47
|
-
secondary: 'tertiary',
|
|
48
|
-
tertiary: 'minimal',
|
|
49
|
-
},
|
|
50
|
-
positive: {
|
|
51
|
-
primary: 'primary',
|
|
52
|
-
secondary: 'tertiary',
|
|
53
|
-
tertiary: 'tertiary',
|
|
54
|
-
},
|
|
55
|
-
negative: {
|
|
56
|
-
primary: 'primary',
|
|
57
|
-
secondary: 'secondary',
|
|
58
|
-
tertiary: 'secondary',
|
|
59
|
-
},
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const mappedPriority =
|
|
63
|
-
type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
|
|
64
|
-
const mappedAppearance = type === 'negative' ? 'negative' : null;
|
|
65
|
-
|
|
66
|
-
const legacyButtonTypes: LegacyButtonType[] = [
|
|
67
|
-
'accent',
|
|
68
|
-
'negative',
|
|
69
|
-
'positive',
|
|
70
|
-
'primary',
|
|
71
|
-
'pay',
|
|
72
|
-
'secondary',
|
|
73
|
-
'danger',
|
|
74
|
-
'link',
|
|
75
|
-
];
|
|
76
|
-
|
|
77
|
-
return {
|
|
78
|
-
...newProps,
|
|
79
|
-
size:
|
|
80
|
-
size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
|
|
81
|
-
priority: mappedPriority,
|
|
82
|
-
appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
|
|
83
|
-
type:
|
|
84
|
-
type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
|
|
85
|
-
href: as === 'a' ? props.href || '' : null,
|
|
86
|
-
} as NewButtonProps;
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
|
|
90
|
-
const { useNewButton, as, ...rest } = props;
|
|
91
|
-
|
|
92
|
-
if (useNewButton) {
|
|
93
|
-
const mappedProps = mapProps(props as LegacyButtonProps);
|
|
94
|
-
return (
|
|
95
|
-
<NewButton
|
|
96
|
-
{...mappedProps}
|
|
97
|
-
ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
|
|
98
|
-
as={as}
|
|
99
|
-
/>
|
|
100
|
-
);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
return (
|
|
104
|
-
<LegacyButton
|
|
105
|
-
{...(rest as LegacyButtonProps)}
|
|
106
|
-
ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
|
|
107
|
-
/>
|
|
108
|
-
);
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
Button.displayName = 'Button';
|
|
112
|
-
|
|
113
|
-
export default Button;
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
PrimitiveButtonProps,
|
|
4
|
-
PrimitiveAnchorProps,
|
|
5
|
-
PrimitiveButtonElementRef,
|
|
6
|
-
PrimitiveAnchorElementRef,
|
|
7
|
-
} from '../primitives';
|
|
8
|
-
import type { SingleAvatarType } from '../avatarLayout';
|
|
9
|
-
|
|
10
|
-
export type ButtonApperance = 'default' | 'negative';
|
|
11
|
-
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
|
|
12
|
-
export type ButtonType = 'button' | 'submit' | 'reset';
|
|
13
|
-
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
14
|
-
export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Common properties for the Button component.
|
|
18
|
-
*/
|
|
19
|
-
export interface CommonButtonProps {
|
|
20
|
-
/** The HTML element to render */
|
|
21
|
-
as?: 'button' | 'a' | null;
|
|
22
|
-
|
|
23
|
-
/** Additional class name(s) to apply to the button */
|
|
24
|
-
className?: string;
|
|
25
|
-
|
|
26
|
-
/** Content to be displayed inside the button */
|
|
27
|
-
children?: ReactNode;
|
|
28
|
-
|
|
29
|
-
/** Whether the button is disabled */
|
|
30
|
-
disabled?: boolean;
|
|
31
|
-
|
|
32
|
-
href?: string;
|
|
33
|
-
|
|
34
|
-
/** Whether the button is in a loading state */
|
|
35
|
-
loading?: boolean;
|
|
36
|
-
|
|
37
|
-
/** Whether the button should take up the full width of its container */
|
|
38
|
-
block?: boolean;
|
|
39
|
-
|
|
40
|
-
/** Size of the button */
|
|
41
|
-
size?: ButtonSize;
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Priority of the button
|
|
45
|
-
* @default 'primary'
|
|
46
|
-
*/
|
|
47
|
-
priority?: ButtonPriority;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* Appearance of the button
|
|
51
|
-
* @default 'default'
|
|
52
|
-
*/
|
|
53
|
-
appearance?: ButtonApperance;
|
|
54
|
-
|
|
55
|
-
/** Icon to be displayed on the left side of the button */
|
|
56
|
-
iconStart?: React.ElementType;
|
|
57
|
-
|
|
58
|
-
/** Icon to be displayed on the right side of the button */
|
|
59
|
-
iconEnd?: React.ElementType;
|
|
60
|
-
|
|
61
|
-
/** Media to be displayed on the left side of the button */
|
|
62
|
-
avatars?: SingleAvatarType[];
|
|
63
|
-
|
|
64
|
-
/** Optional property to provide component Ref */
|
|
65
|
-
ref?: ButtonRefType;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
|
|
69
|
-
export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
|
|
70
|
-
export type ButtonProps = ButtonElementProps | AnchorElementProps;
|