@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886
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/alert/Alert.js +17 -17
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +14 -14
- package/build/alert/Alert.mjs.map +1 -1
- 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 -86
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +80 -87
- package/build/button/Button.mjs.map +1 -1
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/action/Action.js +15 -26
- package/build/common/action/Action.js.map +1 -1
- package/build/common/action/Action.mjs +15 -26
- package/build/common/action/Action.mjs.map +1 -1
- package/build/common/propsValues/sentiment.js +0 -1
- package/build/common/propsValues/sentiment.js.map +1 -1
- package/build/common/propsValues/sentiment.mjs +0 -1
- package/build/common/propsValues/sentiment.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +73 -10
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +74 -11
- package/build/criticalBanner/CriticalCommsBanner.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/i18n/en.json +0 -1
- package/build/i18n/en.json.js +0 -1
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +0 -1
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/i18n/ja.json +1 -0
- package/build/i18n/ja.json.js +1 -0
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/ja.json.mjs +1 -0
- package/build/i18n/ja.json.mjs.map +1 -1
- package/build/i18n/pt.json +1 -0
- package/build/i18n/pt.json.js +1 -0
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/pt.json.mjs +1 -0
- package/build/i18n/pt.json.mjs.map +1 -1
- package/build/i18n/ru.json +1 -0
- package/build/i18n/ru.json.js +1 -0
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/ru.json.mjs +1 -0
- package/build/i18n/ru.json.mjs.map +1 -1
- package/build/i18n/zh-HK.json +1 -0
- package/build/i18n/zh-HK.json.js +1 -0
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/i18n/zh-HK.json.mjs +1 -0
- package/build/i18n/zh-HK.json.mjs.map +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 +70 -267
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +4 -2
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +4 -2
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +5 -3
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +5 -3
- 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/statusIcon/StatusIcon.js +1 -5
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.messages.js +0 -3
- package/build/statusIcon/StatusIcon.messages.js.map +1 -1
- package/build/statusIcon/StatusIcon.messages.mjs +0 -3
- package/build/statusIcon/StatusIcon.messages.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +1 -5
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/styles/avatarLayout/AvatarLayout.css +0 -11
- package/build/styles/button/Button.css +15 -230
- package/build/styles/criticalBanner/CriticalCommsBanner.css +73 -21
- package/build/styles/main.css +70 -267
- package/build/types/alert/Alert.d.ts +4 -3
- package/build/types/alert/Alert.d.ts.map +1 -1
- package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
- package/build/types/button/Button.d.ts +23 -2
- 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/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/common/action/Action.d.ts +2 -5
- package/build/types/common/action/Action.d.ts.map +1 -1
- package/build/types/common/propsValues/sentiment.d.ts +0 -1
- package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/index.d.ts +1 -0
- package/build/types/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/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +2 -6
- 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/statusIcon/StatusIcon.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.messages.d.ts +0 -5
- package/build/types/statusIcon/StatusIcon.messages.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +0 -2
- package/build/types/test-utils/index.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.spec.tsx +30 -0
- package/src/alert/Alert.story.tsx +1 -34
- package/src/alert/Alert.tests.story.tsx +1 -1
- package/src/alert/Alert.tsx +15 -20
- package/src/avatarLayout/AvatarLayout.css +0 -11
- package/src/avatarLayout/AvatarLayout.less +1 -18
- package/src/avatarLayout/AvatarLayout.tsx +2 -10
- package/src/button/Button.css +15 -230
- package/src/button/Button.less +14 -242
- package/src/button/Button.spec.tsx +226 -215
- package/src/button/Button.story.tsx +134 -761
- package/src/button/Button.tsx +132 -103
- package/src/button/__snapshots__/Button.spec.tsx.snap +309 -0
- package/src/button/index.ts +3 -2
- package/src/circularButton/CircularButton.tsx +0 -1
- package/src/common/action/Action.tsx +22 -40
- package/src/common/propsValues/sentiment.ts +0 -1
- package/src/criticalBanner/CriticalCommsBanner.css +73 -21
- package/src/criticalBanner/CriticalCommsBanner.less +70 -24
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +4 -26
- package/src/criticalBanner/CriticalCommsBanner.tsx +50 -8
- package/src/field/Field.story.tsx +1 -1
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +2 -1
- package/src/i18n/en.json +0 -1
- package/src/i18n/ja.json +1 -0
- package/src/i18n/pt.json +1 -0
- package/src/i18n/ru.json +1 -0
- package/src/i18n/zh-HK.json +1 -0
- package/src/index.ts +1 -0
- 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 +70 -267
- package/src/main.less +0 -1
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +8 -2
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +2 -7
- package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +3 -1
- package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +12 -4
- package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +13 -16
- package/src/radio/Radio.spec.tsx +73 -0
- package/src/radio/Radio.story.tsx +22 -52
- package/src/radioGroup/RadioGroup.spec.tsx +91 -0
- package/src/radioGroup/RadioGroup.story.tsx +3 -5
- package/src/statusIcon/StatusIcon.less +0 -1
- package/src/statusIcon/StatusIcon.messages.ts +0 -6
- package/src/statusIcon/StatusIcon.tsx +1 -8
- 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 -74
- package/build/button/Button.resolver.js.map +0 -1
- package/build/button/Button.resolver.mjs +0 -72
- 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 -46
- package/build/styles/button/LegacyButton.css +0 -23
- package/build/types/button/Button.resolver.d.ts +0 -35
- package/build/types/button/Button.resolver.d.ts.map +0 -1
- package/build/types/button/Button.types.d.ts +0 -70
- package/build/types/button/Button.types.d.ts.map +0 -1
- package/build/types/button/LegacyButton.d.ts +0 -44
- package/build/types/button/LegacyButton.d.ts.map +0 -1
- package/src/button/Button.accessibility.docs.mdx +0 -103
- package/src/button/Button.resolver.tsx +0 -73
- package/src/button/Button.tests.story.tsx +0 -27
- package/src/button/Button.types.ts +0 -92
- package/src/button/Button.vars.css +0 -46
- package/src/button/Button.vars.less +0 -55
- package/src/button/LegacyButton.css +0 -23
- package/src/button/LegacyButton.less +0 -24
- package/src/button/LegacyButton.spec.tsx +0 -147
- package/src/button/LegacyButton.story.tsx +0 -228
- package/src/button/LegacyButton.tsx +0 -177
- package/src/radio/Radio.rtl.spec.tsx +0 -24
- package/src/radio/Radio.spec.js +0 -76
- package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +0 -49
- package/src/radioGroup/RadioGroup.rtl.spec.tsx +0 -30
- package/src/radioGroup/RadioGroup.spec.js +0 -90
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/button/Button.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 type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\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 }: Props,\n reference,\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: Props['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={reference}\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 Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
|
-
import { forwardRef } from 'react';
|
|
2
|
-
import PrimitiveButton from '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
|
|
3
|
-
import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
|
|
4
|
-
import AvatarLayout from '../avatarLayout/AvatarLayout.mjs';
|
|
5
|
-
import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
|
|
6
1
|
import { clsx } from 'clsx';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { useIntl } from 'react-intl';
|
|
7
4
|
import '../common/theme.mjs';
|
|
8
5
|
import '../common/direction.mjs';
|
|
9
|
-
import '../common/propsValues/control.mjs';
|
|
6
|
+
import { Priority, ControlType } from '../common/propsValues/control.mjs';
|
|
10
7
|
import '../common/propsValues/breakpoint.mjs';
|
|
11
|
-
import '../common/propsValues/size.mjs';
|
|
12
|
-
import
|
|
8
|
+
import { Size } from '../common/propsValues/size.mjs';
|
|
9
|
+
import '../common/propsValues/typography.mjs';
|
|
13
10
|
import '../common/propsValues/width.mjs';
|
|
14
11
|
import '../common/propsValues/type.mjs';
|
|
15
12
|
import '../common/propsValues/dateMode.mjs';
|
|
@@ -24,94 +21,90 @@ import '../common/propsValues/scroll.mjs';
|
|
|
24
21
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
25
22
|
import '../common/fileType.mjs';
|
|
26
23
|
import '@transferwise/icons';
|
|
27
|
-
import 'react-intl';
|
|
28
24
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
29
|
-
import { jsxs, jsx
|
|
30
|
-
import
|
|
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';
|
|
31
30
|
|
|
32
|
-
/* eslint-disable react/display-name */
|
|
33
|
-
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
34
31
|
const Button = /*#__PURE__*/forwardRef(({
|
|
35
|
-
as,
|
|
32
|
+
as: component,
|
|
33
|
+
block = false,
|
|
36
34
|
children,
|
|
37
35
|
className,
|
|
38
|
-
|
|
39
|
-
href,
|
|
40
|
-
disabled = false,
|
|
41
|
-
priority = 'primary',
|
|
42
|
-
sentiment = 'default',
|
|
43
|
-
addonStart,
|
|
44
|
-
addonEnd,
|
|
45
|
-
// @ts-expect-error NewButtonProps has `type` prop
|
|
46
|
-
type,
|
|
36
|
+
disabled,
|
|
47
37
|
loading = false,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
md: 'medium',
|
|
59
|
-
lg: 'large'
|
|
60
|
-
}[size]}`, `wds-Button--${priority}`, `wds-Button--${sentiment}`, className);
|
|
61
|
-
const contentClassNames = clsx('wds-Button-content', {
|
|
62
|
-
[`wds-Button-content--loading`]: loading
|
|
63
|
-
});
|
|
64
|
-
const content = /*#__PURE__*/jsxs(Body, {
|
|
65
|
-
as: "span",
|
|
66
|
-
type: size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD,
|
|
67
|
-
className: contentClassNames,
|
|
68
|
-
children: [loading && /*#__PURE__*/jsx(ProcessIndicator, {
|
|
69
|
-
size: size === 'sm' ? 'xxs' : 'xs',
|
|
70
|
-
className: "wds-Button-loader",
|
|
71
|
-
"data-testid": "button-loader-indicator"
|
|
72
|
-
}), /*#__PURE__*/jsx("span", {
|
|
73
|
-
className: "wds-Button-label",
|
|
74
|
-
"aria-hidden": loading,
|
|
75
|
-
children: size === 'lg' ? children : /*#__PURE__*/jsxs(Fragment, {
|
|
76
|
-
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
77
|
-
className: "wds-Button-avatars",
|
|
78
|
-
children: /*#__PURE__*/jsx(AvatarLayout, {
|
|
79
|
-
orientation: "horizontal",
|
|
80
|
-
avatars: addonStart?.value,
|
|
81
|
-
size: 24
|
|
82
|
-
})
|
|
83
|
-
}), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
84
|
-
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`,
|
|
85
|
-
children: addonStart.value
|
|
86
|
-
}), children, addonEnd?.type === 'icon' && addonEnd?.value && /*#__PURE__*/jsx("span", {
|
|
87
|
-
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`,
|
|
88
|
-
children: addonEnd.value
|
|
89
|
-
})]
|
|
90
|
-
})
|
|
91
|
-
})]
|
|
38
|
+
priority = Priority.PRIMARY,
|
|
39
|
+
size = Size.MEDIUM,
|
|
40
|
+
type = ControlType.ACCENT,
|
|
41
|
+
onClick,
|
|
42
|
+
...rest
|
|
43
|
+
}, reference) => {
|
|
44
|
+
const intl = useIntl();
|
|
45
|
+
logDeprecationNotices({
|
|
46
|
+
size,
|
|
47
|
+
type
|
|
92
48
|
});
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
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';
|
|
104
64
|
}
|
|
105
|
-
|
|
106
|
-
|
|
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: reference,
|
|
97
|
+
className: classes,
|
|
98
|
+
onClick: handleClick(onClick),
|
|
107
99
|
...props,
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
loading:
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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
|
+
})]
|
|
115
108
|
});
|
|
116
109
|
});
|
|
117
110
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.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 type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n};\n\ntype ButtonProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n as?: 'button';\n htmlType?: 'submit' | 'reset' | 'button';\n };\n\ntype AnchorProps = CommonProps &\n Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n as?: 'a';\n };\n\nexport type Props = ButtonProps | AnchorProps;\n\nexport type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;\n\nconst Button = forwardRef<ButtonReferenceType, Props>(\n (\n {\n as: component,\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 }: Props,\n reference,\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: Props['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={reference}\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 Button;\n"],"names":["Button","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","reference","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","ref","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport {
|
|
1
|
+
{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `'default'` instead\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG,SAAA;AACa,CAAA,KAAI;EACxB,MAAMC,cAAc,GAAGC,iBAAQ,CAAC,eAAeC,qBAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,oBACEC,eAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,SAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN,QAAAA;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,cAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,SAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE,IAAAA;AAAI,KACK,CACZ,eAAAY,cAAA,CAACI,IAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,SAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,qBAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport {
|
|
1
|
+
{"version":3,"file":"CircularButton.mjs","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Breakpoint, ControlType, Priority, Typography } from '../common';\nimport IconButton, { IconButtonProps } from '../iconButton';\nimport { useMedia } from '../common/hooks/useMedia';\n\n/**\n * @deprecated use `'default'` instead\n */\ntype DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;\n onClick?: React.MouseEventHandler<HTMLInputElement> &\n React.MouseEventHandler<HTMLButtonElement> &\n React.MouseEventHandler<HTMLAnchorElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n /**\n * `\"accent\"` and `\"positive\"` values are **deprecated**, please use `\"default\"` instead\n */\n type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n onClick,\n priority = Priority.PRIMARY,\n type = 'default',\n}: CircularButtonProps) => {\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n return (\n <label\n className={clsx(\n 'np-circular-btn',\n `np-circular-btn-${priority}-${type}`,\n { 'np-circular-btn-disabled': disabled },\n className,\n )}\n >\n <IconButton\n size={isTinyViewport ? 32 : 56}\n priority={priority}\n type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}\n className={clsx('m-b-1')}\n disabled={disabled}\n onClick={onClick}\n >\n {icon}\n </IconButton>\n <Body\n as=\"span\"\n className={clsx('np-circular-btn-label', { disabled })}\n type={Typography.BODY_DEFAULT_BOLD}\n >\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","onClick","priority","Priority","PRIMARY","type","isTinyViewport","useMedia","Breakpoint","ZOOM_400","_jsxs","clsx","_jsx","IconButton","size","includes","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,QAAQ,GAAGC,QAAQ,CAACC,OAAO;AAC3BC,EAAAA,IAAI,GAAG,SAAA;AACa,CAAA,KAAI;EACxB,MAAMC,cAAc,GAAGC,QAAQ,CAAC,eAAeC,UAAU,CAACC,QAAQ,CAAA,GAAA,CAAK,CAAC,CAAA;AACxE,EAAA,oBACEC,IAAA,CAAA,OAAA,EAAA;IACEb,SAAS,EAAEc,IAAI,CACb,iBAAiB,EACjB,mBAAmBT,QAAQ,CAAA,CAAA,EAAIG,IAAI,CAAA,CAAE,EACrC;AAAE,MAAA,0BAA0B,EAAEN,QAAAA;KAAU,EACxCF,SAAS,CACT;IAAAC,QAAA,EAAA,cAEFc,GAAA,CAACC,UAAU,EAAA;AACTC,MAAAA,IAAI,EAAER,cAAc,GAAG,EAAE,GAAG,EAAG;AAC/BJ,MAAAA,QAAQ,EAAEA,QAAS;AACnBG,MAAAA,IAAI,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAACU,QAAQ,CAACV,IAAI,CAAC,GAAG,SAAS,GAAIA,IAAiC;AAC5FR,MAAAA,SAAS,EAAEc,IAAI,CAAC,OAAO,CAAE;AACzBZ,MAAAA,QAAQ,EAAEA,QAAS;AACnBE,MAAAA,OAAO,EAAEA,OAAQ;AAAAH,MAAAA,QAAA,EAEhBE,IAAAA;AAAI,KACK,CACZ,eAAAY,GAAA,CAACI,IAAI,EAAA;AACHC,MAAAA,EAAE,EAAC,MAAM;AACTpB,MAAAA,SAAS,EAAEc,IAAI,CAAC,uBAAuB,EAAE;AAAEZ,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MACvDM,IAAI,EAAEa,UAAU,CAACC,iBAAkB;AAAArB,MAAAA,QAAA,EAElCA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
|
|
@@ -3,16 +3,14 @@
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var Link = require('../../link/Link.js');
|
|
5
5
|
var typography = require('../propsValues/typography.js');
|
|
6
|
+
var ActionButton = require('../../actionButton/ActionButton.js');
|
|
6
7
|
var control = require('../propsValues/control.js');
|
|
7
|
-
var Button_resolver = require('../../button/Button.resolver.js');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
|
|
10
10
|
function Action({
|
|
11
11
|
action,
|
|
12
12
|
className,
|
|
13
|
-
variant = 'button'
|
|
14
|
-
sentiment = 'default',
|
|
15
|
-
priority = control.Priority.SECONDARY
|
|
13
|
+
variant = 'button'
|
|
16
14
|
}) {
|
|
17
15
|
if ('href' in action) {
|
|
18
16
|
return /*#__PURE__*/jsxRuntime.jsx(Link, {
|
|
@@ -25,28 +23,19 @@ function Action({
|
|
|
25
23
|
children: action.text
|
|
26
24
|
});
|
|
27
25
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
default:
|
|
42
|
-
return /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
43
|
-
type: "button",
|
|
44
|
-
"aria-label": action['aria-label'],
|
|
45
|
-
className: clsx.clsx('btn-unstyled np-text-link-large', className),
|
|
46
|
-
onClick: action.onClick,
|
|
47
|
-
children: action.text
|
|
48
|
-
});
|
|
49
|
-
}
|
|
26
|
+
return variant === 'button' ? /*#__PURE__*/jsxRuntime.jsx("button", {
|
|
27
|
+
type: "button",
|
|
28
|
+
"aria-label": action['aria-label'],
|
|
29
|
+
className: clsx.clsx('btn-unstyled np-text-link-large', className),
|
|
30
|
+
onClick: action.onClick,
|
|
31
|
+
children: action.text
|
|
32
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
|
|
33
|
+
"aria-label": action['aria-label'],
|
|
34
|
+
priority: control.Priority.SECONDARY,
|
|
35
|
+
className: clsx.clsx(className),
|
|
36
|
+
onClick: action.onClick,
|
|
37
|
+
children: action.text
|
|
38
|
+
});
|
|
50
39
|
}
|
|
51
40
|
|
|
52
41
|
exports.Action = Action;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport
|
|
1
|
+
{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport ActionButton from '../../actionButton';\nimport { Priority } from '../propsValues/control';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n variant?: 'button' | 'action-button';\n action: ActionOptions;\n className?: string;\n};\n\nexport function Action({ action, className, variant = 'button' }: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n return variant === 'button' ? (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n ) : (\n <ActionButton\n aria-label={action['aria-label']}\n priority={Priority.SECONDARY}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </ActionButton>\n );\n}\n"],"names":["Action","action","className","variant","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx","ActionButton","priority","Priority","SECONDARY"],"mappings":";;;;;;;;;AAoBM,SAAUA,MAAMA,CAAC;EAAEC,MAAM;EAAEC,SAAS;AAAEC,EAAAA,OAAO,GAAG,QAAA;AAAiB,CAAA,EAAA;EACrE,IAAI,MAAM,IAAIF,MAAM,EAAE;IACpB,oBACEG,cAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEL,MAAM,CAACK,IAAK;AAClBJ,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCM,MAAM,EAAEN,MAAM,CAACM,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEV,MAAM,CAACU,OAAQ;MAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOV,OAAO,KAAK,QAAQ,gBACzBC,cAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYP,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEY,SAAI,CAAC,iCAAiC,EAAEZ,SAAS,CAAE;IAC9DS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACN,CAAC,gBAETT,cAAA,CAACW,YAAY,EAAA;IACX,YAAYd,EAAAA,MAAM,CAAC,YAAY,CAAE;IACjCe,QAAQ,EAAEC,gBAAQ,CAACC,SAAU;AAC7BhB,IAAAA,SAAS,EAAEY,SAAI,CAACZ,SAAS,CAAE;IAC3BS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACA,CACf,CAAA;AACH;;;;"}
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import Link from '../../link/Link.mjs';
|
|
3
3
|
import { Typography } from '../propsValues/typography.mjs';
|
|
4
|
+
import ActionButton from '../../actionButton/ActionButton.mjs';
|
|
4
5
|
import { Priority } from '../propsValues/control.mjs';
|
|
5
|
-
import Button from '../../button/Button.resolver.mjs';
|
|
6
6
|
import { jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
8
|
function Action({
|
|
9
9
|
action,
|
|
10
10
|
className,
|
|
11
|
-
variant = 'button'
|
|
12
|
-
sentiment = 'default',
|
|
13
|
-
priority = Priority.SECONDARY
|
|
11
|
+
variant = 'button'
|
|
14
12
|
}) {
|
|
15
13
|
if ('href' in action) {
|
|
16
14
|
return /*#__PURE__*/jsx(Link, {
|
|
@@ -23,28 +21,19 @@ function Action({
|
|
|
23
21
|
children: action.text
|
|
24
22
|
});
|
|
25
23
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
default:
|
|
40
|
-
return /*#__PURE__*/jsx("button", {
|
|
41
|
-
type: "button",
|
|
42
|
-
"aria-label": action['aria-label'],
|
|
43
|
-
className: clsx('btn-unstyled np-text-link-large', className),
|
|
44
|
-
onClick: action.onClick,
|
|
45
|
-
children: action.text
|
|
46
|
-
});
|
|
47
|
-
}
|
|
24
|
+
return variant === 'button' ? /*#__PURE__*/jsx("button", {
|
|
25
|
+
type: "button",
|
|
26
|
+
"aria-label": action['aria-label'],
|
|
27
|
+
className: clsx('btn-unstyled np-text-link-large', className),
|
|
28
|
+
onClick: action.onClick,
|
|
29
|
+
children: action.text
|
|
30
|
+
}) : /*#__PURE__*/jsx(ActionButton, {
|
|
31
|
+
"aria-label": action['aria-label'],
|
|
32
|
+
priority: Priority.SECONDARY,
|
|
33
|
+
className: clsx(className),
|
|
34
|
+
onClick: action.onClick,
|
|
35
|
+
children: action.text
|
|
36
|
+
});
|
|
48
37
|
}
|
|
49
38
|
|
|
50
39
|
export { Action };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport
|
|
1
|
+
{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport ActionButton from '../../actionButton';\nimport { Priority } from '../propsValues/control';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n variant?: 'button' | 'action-button';\n action: ActionOptions;\n className?: string;\n};\n\nexport function Action({ action, className, variant = 'button' }: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n return variant === 'button' ? (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n ) : (\n <ActionButton\n aria-label={action['aria-label']}\n priority={Priority.SECONDARY}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </ActionButton>\n );\n}\n"],"names":["Action","action","className","variant","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx","ActionButton","priority","Priority","SECONDARY"],"mappings":";;;;;;;AAoBM,SAAUA,MAAMA,CAAC;EAAEC,MAAM;EAAEC,SAAS;AAAEC,EAAAA,OAAO,GAAG,QAAA;AAAiB,CAAA,EAAA;EACrE,IAAI,MAAM,IAAIF,MAAM,EAAE;IACpB,oBACEG,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEL,MAAM,CAACK,IAAK;AAClBJ,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCM,MAAM,EAAEN,MAAM,CAACM,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEV,MAAM,CAACU,OAAQ;MAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOV,OAAO,KAAK,QAAQ,gBACzBC,GAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYP,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEY,IAAI,CAAC,iCAAiC,EAAEZ,SAAS,CAAE;IAC9DS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACN,CAAC,gBAETT,GAAA,CAACW,YAAY,EAAA;IACX,YAAYd,EAAAA,MAAM,CAAC,YAAY,CAAE;IACjCe,QAAQ,EAAEC,QAAQ,CAACC,SAAU;AAC7BhB,IAAAA,SAAS,EAAEY,IAAI,CAACZ,SAAS,CAAE;IAC3BS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACA,CACf,CAAA;AACH;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sentiment.js","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n
|
|
1
|
+
{"version":3,"file":"sentiment.js","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n\n /**\n * @deprecated\n */\n INFO = 'info',\n /**\n * @deprecated\n */\n ERROR = 'error',\n /**\n * @deprecated\n */\n SUCCESS = 'success',\n}\n"],"names":["Sentiment"],"mappings":";;AAAYA,2BAmBX;AAnBD,CAAA,UAAYA,SAAS,EAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AAEnB;;AAEG;AACHA,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACHA,EAAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACHA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAnBWA,iBAAS,KAATA,iBAAS,GAmBpB,EAAA,CAAA,CAAA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sentiment.mjs","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n
|
|
1
|
+
{"version":3,"file":"sentiment.mjs","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n\n /**\n * @deprecated\n */\n INFO = 'info',\n /**\n * @deprecated\n */\n ERROR = 'error',\n /**\n * @deprecated\n */\n SUCCESS = 'success',\n}\n"],"names":["Sentiment"],"mappings":"IAAYA,UAmBX;AAnBD,CAAA,UAAYA,SAAS,EAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AAEnB;;AAEG;AACHA,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACHA,EAAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACHA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAnBWA,SAAS,KAATA,SAAS,GAmBpB,EAAA,CAAA,CAAA;;;;"}
|