@transferwise/components 0.0.0-experimental-c575215 → 0.0.0-experimental-20970b7
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/button/Button.js +6 -8
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +7 -9
- package/build/button/Button.mjs.map +1 -1
- package/build/button/Button.resolver.js +5 -16
- package/build/button/Button.resolver.js.map +1 -1
- package/build/button/Button.resolver.mjs +5 -16
- package/build/button/Button.resolver.mjs.map +1 -1
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/main.css +7 -27
- package/build/styles/button/Button.css +7 -27
- package/build/styles/button/Button.vars.css +7 -15
- package/build/styles/main.css +7 -27
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.resolver.d.ts +4 -4
- package/build/types/button/Button.resolver.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +8 -16
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/build/types/button/LegacyButton.d.ts +1 -1
- package/package.json +3 -3
- package/src/button/Button.css +7 -27
- package/src/button/Button.less +4 -5
- package/src/button/Button.resolver.tsx +8 -15
- package/src/button/Button.spec.tsx +3 -3
- package/src/button/Button.story.tsx +90 -13
- package/src/button/Button.tsx +7 -5
- package/src/button/Button.types.ts +9 -18
- package/src/button/Button.vars.css +7 -15
- package/src/button/Button.vars.less +8 -16
- package/src/button/LegacyButton.story.tsx +1 -1
- package/src/button/LegacyButton.tsx +1 -1
- package/src/main.css +7 -27
package/build/button/Button.js
CHANGED
|
@@ -13,11 +13,11 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
13
13
|
as = 'button',
|
|
14
14
|
children,
|
|
15
15
|
className,
|
|
16
|
-
size = '
|
|
16
|
+
size = 'md',
|
|
17
17
|
href,
|
|
18
18
|
disabled = false,
|
|
19
19
|
priority = 'primary',
|
|
20
|
-
|
|
20
|
+
appearance = 'default',
|
|
21
21
|
iconStart: IconStart,
|
|
22
22
|
iconEnd: IconEnd,
|
|
23
23
|
avatars,
|
|
@@ -26,11 +26,9 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
26
26
|
block = false,
|
|
27
27
|
...props
|
|
28
28
|
}, ref) => {
|
|
29
|
-
const sizeClass = {
|
|
30
|
-
sm
|
|
31
|
-
|
|
32
|
-
lg: 'large'
|
|
33
|
-
}[size];
|
|
29
|
+
const sizeClass = React.useMemo(() => {
|
|
30
|
+
return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
|
|
31
|
+
}, [size]);
|
|
34
32
|
const classNames = clsx.clsx('wds-Button', {
|
|
35
33
|
[`wds-Button`]: as === 'a',
|
|
36
34
|
[`wds-Button--block`]: block,
|
|
@@ -38,7 +36,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
38
36
|
[`wds-Button--loading`]: loading,
|
|
39
37
|
[`wds-Button--${sizeClass}`]: size,
|
|
40
38
|
[`wds-Button--${priority}`]: priority,
|
|
41
|
-
[`wds-Button--${
|
|
39
|
+
[`wds-Button--${appearance}`]: appearance
|
|
42
40
|
}, className);
|
|
43
41
|
const contentClassNames = clsx.clsx('wds-Button-content', {
|
|
44
42
|
[`wds-Button-content--loading`]: loading
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = '
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef, useMemo } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'md',\n href,\n disabled = false,\n priority = 'primary',\n appearance = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const sizeClass = useMemo(() => {\n return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';\n }, [size]);\n\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button`]: as === 'a',\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n [`wds-Button--${sizeClass}`]: size,\n [`wds-Button--${priority}`]: priority,\n [`wds-Button--${appearance}`]: appearance,\n },\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <span className={contentClassNames}>\n {loading && (\n <ProcessIndicator\n size=\"xs\"\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </span>\n );\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","appearance","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","sizeClass","useMemo","classNames","clsx","contentClassNames","content","_jsxs","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef } from 'react';
|
|
1
|
+
import { forwardRef, useMemo } from 'react';
|
|
2
2
|
import PrimitiveButton from '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
|
|
3
3
|
import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
|
|
4
4
|
import AvatarLayout from '../avatarLayout/AvatarLayout.mjs';
|
|
@@ -11,11 +11,11 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
11
11
|
as = 'button',
|
|
12
12
|
children,
|
|
13
13
|
className,
|
|
14
|
-
size = '
|
|
14
|
+
size = 'md',
|
|
15
15
|
href,
|
|
16
16
|
disabled = false,
|
|
17
17
|
priority = 'primary',
|
|
18
|
-
|
|
18
|
+
appearance = 'default',
|
|
19
19
|
iconStart: IconStart,
|
|
20
20
|
iconEnd: IconEnd,
|
|
21
21
|
avatars,
|
|
@@ -24,11 +24,9 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
24
24
|
block = false,
|
|
25
25
|
...props
|
|
26
26
|
}, ref) => {
|
|
27
|
-
const sizeClass = {
|
|
28
|
-
sm
|
|
29
|
-
|
|
30
|
-
lg: 'large'
|
|
31
|
-
}[size];
|
|
27
|
+
const sizeClass = useMemo(() => {
|
|
28
|
+
return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
|
|
29
|
+
}, [size]);
|
|
32
30
|
const classNames = clsx('wds-Button', {
|
|
33
31
|
[`wds-Button`]: as === 'a',
|
|
34
32
|
[`wds-Button--block`]: block,
|
|
@@ -36,7 +34,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
36
34
|
[`wds-Button--loading`]: loading,
|
|
37
35
|
[`wds-Button--${sizeClass}`]: size,
|
|
38
36
|
[`wds-Button--${priority}`]: priority,
|
|
39
|
-
[`wds-Button--${
|
|
37
|
+
[`wds-Button--${appearance}`]: appearance
|
|
40
38
|
}, className);
|
|
41
39
|
const contentClassNames = clsx('wds-Button-content', {
|
|
42
40
|
[`wds-Button-content--loading`]: loading
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = '
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef, useMemo } from 'react';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\n children,\n className,\n size = 'md',\n href,\n disabled = false,\n priority = 'primary',\n appearance = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n type = 'button',\n loading = false,\n block = false,\n ...props\n },\n ref,\n ) => {\n const sizeClass = useMemo(() => {\n return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';\n }, [size]);\n\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button`]: as === 'a',\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n [`wds-Button--${sizeClass}`]: size,\n [`wds-Button--${priority}`]: priority,\n [`wds-Button--${appearance}`]: appearance,\n },\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <span className={contentClassNames}>\n {loading && (\n <ProcessIndicator\n size=\"xs\"\n className=\"wds-Button-loader\"\n data-testid=\"button-loader-indicator\"\n />\n )}\n <span className=\"wds-Button-label\" aria-hidden={loading}>\n {size === 'lg' ? (\n children\n ) : (\n <>\n {size === 'md' && avatars && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n </span>\n )}\n {!avatars && IconStart && (\n <IconStart className=\"wds-Button-icon wds-Button-icon--start\" />\n )}\n {children}\n {IconEnd && <IconEnd className=\"wds-Button-icon wds-Button-icon--end\" />}\n </>\n )}\n </span>\n </span>\n );\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as any)}\n href={href}\n className={classNames}\n disabled={disabled}\n >\n {content}\n </PrimitiveAnchor>\n );\n }\n\n return (\n <PrimitiveButton\n ref={ref as React.Ref<HTMLButtonElement>}\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","appearance","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","sizeClass","useMemo","classNames","clsx","contentClassNames","content","_jsxs","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
|
|
@@ -31,35 +31,24 @@ const mapProps = props => {
|
|
|
31
31
|
}
|
|
32
32
|
};
|
|
33
33
|
const mappedPriority = type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
|
|
34
|
-
const
|
|
34
|
+
const mappedAppearance = type === 'negative' ? 'negative' : null;
|
|
35
35
|
const legacyButtonTypes = ['accent', 'negative', 'positive', 'primary', 'pay', 'secondary', 'danger', 'link'];
|
|
36
|
-
const resolveSize = () => {
|
|
37
|
-
if (size) {
|
|
38
|
-
return {
|
|
39
|
-
xs: 'sm',
|
|
40
|
-
sm: 'sm',
|
|
41
|
-
md: 'md',
|
|
42
|
-
lg: 'lg'
|
|
43
|
-
}[size] || size;
|
|
44
|
-
}
|
|
45
|
-
return size;
|
|
46
|
-
};
|
|
47
36
|
return {
|
|
48
37
|
...newProps,
|
|
49
|
-
size:
|
|
38
|
+
size: size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
|
|
50
39
|
priority: mappedPriority,
|
|
51
|
-
|
|
40
|
+
appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
|
|
52
41
|
type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
|
|
53
42
|
href: as === 'a' ? props.href || '' : null
|
|
54
43
|
};
|
|
55
44
|
};
|
|
56
45
|
const Button = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
57
46
|
const {
|
|
58
|
-
|
|
47
|
+
useNewButton,
|
|
59
48
|
as,
|
|
60
49
|
...rest
|
|
61
50
|
} = props;
|
|
62
|
-
if (
|
|
51
|
+
if (useNewButton) {
|
|
63
52
|
const mappedProps = mapProps(props);
|
|
64
53
|
return /*#__PURE__*/jsxRuntime.jsx(Button$1, {
|
|
65
54
|
...mappedProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.resolver.js","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\ntype LegacyButtonType =\n | 'accent'\n | 'negative'\n | 'positive'\n | 'primary'\n | 'pay'\n | 'secondary'\n | 'danger'\n | 'link'\n | null\n | undefined;\n\ntype NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;\n\ntype CommonButtonProps = {\n href?: string;\n target?: string;\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;\n};\n\nexport type ButtonProps =\n | (Omit<LegacyButtonProps, 'ref'> &\n CommonButtonProps & {\n priority?: LegacyButtonProps['priority'];\n type?: LegacyButtonType;\n htmlType?: string;\n
|
|
1
|
+
{"version":3,"file":"Button.resolver.js","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\ntype LegacyButtonType =\n | 'accent'\n | 'negative'\n | 'positive'\n | 'primary'\n | 'pay'\n | 'secondary'\n | 'danger'\n | 'link'\n | null\n | undefined;\n\ntype NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;\n\ntype CommonButtonProps = {\n href?: string;\n target?: string;\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;\n};\n\nexport type ButtonProps =\n | (Omit<LegacyButtonProps, 'ref'> &\n CommonButtonProps & {\n priority?: LegacyButtonProps['priority'];\n type?: LegacyButtonType;\n htmlType?: string;\n useNewButton?: false;\n })\n | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &\n CommonButtonProps & {\n priority?: NewButtonProps['priority'];\n type?: NewButtonType;\n useNewButton: true;\n });\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, as, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'minimal',\n },\n positive: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'tertiary',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;\n const mappedAppearance = type === 'negative' ? 'negative' : null;\n\n const legacyButtonTypes: LegacyButtonType[] = [\n 'accent',\n 'negative',\n 'positive',\n 'primary',\n 'pay',\n 'secondary',\n 'danger',\n 'link',\n ];\n\n return {\n ...newProps,\n size:\n size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,\n priority: mappedPriority,\n appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),\n type:\n type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,\n href: as === 'a' ? props.href || '' : null,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {\n const { useNewButton, as, ...rest } = props;\n\n if (useNewButton) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return (\n <NewButton\n {...mappedProps}\n ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n as={as}\n />\n );\n }\n\n return (\n <LegacyButton\n {...(rest as LegacyButtonProps)}\n ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n />\n );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","as","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","mappedAppearance","legacyButtonTypes","appearance","includes","htmlType","href","Button","forwardRef","ref","useNewButton","rest","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;;;AAwCA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAE,GAAGC,QAAAA;AAAU,GAAA,GAAGL,KAAK,CAAA;AAEvD,EAAA,MAAMM,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBV,IAAI,IAAIF,QAAQ,GAAGK,eAAe,CAACH,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAI,IAAI,CAAA;EACrF,MAAMa,gBAAgB,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,IAAI,CAAA;AAEhE,EAAA,MAAMY,iBAAiB,GAAuB,CAC5C,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,OAAO;AACL,IAAA,GAAGV,QAAQ;IACXH,IAAI,EACFA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI;AAC5FD,IAAAA,QAAQ,EAAEY,cAAc;AACxBG,IAAAA,UAAU,EAAEF,gBAAgB,KAAK,YAAY,IAAId,KAAK,GAAGA,KAAK,CAACgB,UAAU,GAAG,IAAI,CAAC;AACjFb,IAAAA,IAAI,EACFA,IAAI,IAAI,CAACY,iBAAiB,CAACE,QAAQ,CAACd,IAAwB,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACkB,QAAQ,IAAI,IAAI;IAC/FC,IAAI,EAAEf,EAAE,KAAK,GAAG,GAAGJ,KAAK,CAACmB,IAAI,IAAI,EAAE,GAAG,IAAA;GACrB,CAAA;AACrB,CAAC,CAAA;AAEKC,MAAAA,MAAM,gBAAGC,gBAAU,CAAqD,CAACrB,KAAK,EAAEsB,GAAG,KAAI;EAC3F,MAAM;IAAEC,YAAY;IAAEnB,EAAE;IAAE,GAAGoB,IAAAA;AAAI,GAAE,GAAGxB,KAAK,CAAA;AAE3C,EAAA,IAAIuB,YAAY,EAAE;AAChB,IAAA,MAAME,WAAW,GAAG1B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBACE0B,cAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GACJF,WAAW;AACfH,MAAAA,GAAG,EAAEA,GAAwD;AAC7DlB,MAAAA,EAAE,EAAEA,EAAAA;AAAG,KACP,CAAA,CAAA;AAEN,GAAA;EAEA,oBACEsB,cAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GACNJ,IAA0B;AAC/BF,IAAAA,GAAG,EAAEA,GAAAA;AAAwD,GAAA,CAC7D,CAAA;AAEN,CAAC,EAAC;AAEFF,MAAM,CAACS,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -29,35 +29,24 @@ const mapProps = props => {
|
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
const mappedPriority = type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;
|
|
32
|
-
const
|
|
32
|
+
const mappedAppearance = type === 'negative' ? 'negative' : null;
|
|
33
33
|
const legacyButtonTypes = ['accent', 'negative', 'positive', 'primary', 'pay', 'secondary', 'danger', 'link'];
|
|
34
|
-
const resolveSize = () => {
|
|
35
|
-
if (size) {
|
|
36
|
-
return {
|
|
37
|
-
xs: 'sm',
|
|
38
|
-
sm: 'sm',
|
|
39
|
-
md: 'md',
|
|
40
|
-
lg: 'lg'
|
|
41
|
-
}[size] || size;
|
|
42
|
-
}
|
|
43
|
-
return size;
|
|
44
|
-
};
|
|
45
34
|
return {
|
|
46
35
|
...newProps,
|
|
47
|
-
size:
|
|
36
|
+
size: size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,
|
|
48
37
|
priority: mappedPriority,
|
|
49
|
-
|
|
38
|
+
appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),
|
|
50
39
|
type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
|
|
51
40
|
href: as === 'a' ? props.href || '' : null
|
|
52
41
|
};
|
|
53
42
|
};
|
|
54
43
|
const Button = /*#__PURE__*/forwardRef((props, ref) => {
|
|
55
44
|
const {
|
|
56
|
-
|
|
45
|
+
useNewButton,
|
|
57
46
|
as,
|
|
58
47
|
...rest
|
|
59
48
|
} = props;
|
|
60
|
-
if (
|
|
49
|
+
if (useNewButton) {
|
|
61
50
|
const mappedProps = mapProps(props);
|
|
62
51
|
return /*#__PURE__*/jsx(Button$1, {
|
|
63
52
|
...mappedProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.resolver.mjs","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\ntype LegacyButtonType =\n | 'accent'\n | 'negative'\n | 'positive'\n | 'primary'\n | 'pay'\n | 'secondary'\n | 'danger'\n | 'link'\n | null\n | undefined;\n\ntype NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;\n\ntype CommonButtonProps = {\n href?: string;\n target?: string;\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;\n};\n\nexport type ButtonProps =\n | (Omit<LegacyButtonProps, 'ref'> &\n CommonButtonProps & {\n priority?: LegacyButtonProps['priority'];\n type?: LegacyButtonType;\n htmlType?: string;\n
|
|
1
|
+
{"version":3,"file":"Button.resolver.mjs","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\ntype LegacyButtonType =\n | 'accent'\n | 'negative'\n | 'positive'\n | 'primary'\n | 'pay'\n | 'secondary'\n | 'danger'\n | 'link'\n | null\n | undefined;\n\ntype NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;\n\ntype CommonButtonProps = {\n href?: string;\n target?: string;\n ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;\n};\n\nexport type ButtonProps =\n | (Omit<LegacyButtonProps, 'ref'> &\n CommonButtonProps & {\n priority?: LegacyButtonProps['priority'];\n type?: LegacyButtonType;\n htmlType?: string;\n useNewButton?: false;\n })\n | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &\n CommonButtonProps & {\n priority?: NewButtonProps['priority'];\n type?: NewButtonType;\n useNewButton: true;\n });\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, as, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'minimal',\n },\n positive: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'tertiary',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || null;\n const mappedAppearance = type === 'negative' ? 'negative' : null;\n\n const legacyButtonTypes: LegacyButtonType[] = [\n 'accent',\n 'negative',\n 'positive',\n 'primary',\n 'pay',\n 'secondary',\n 'danger',\n 'link',\n ];\n\n return {\n ...newProps,\n size:\n size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,\n priority: mappedPriority,\n appearance: mappedAppearance || ('appearance' in props ? props.appearance : null),\n type:\n type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,\n href: as === 'a' ? props.href || '' : null,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {\n const { useNewButton, as, ...rest } = props;\n\n if (useNewButton) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return (\n <NewButton\n {...mappedProps}\n ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n as={as}\n />\n );\n }\n\n return (\n <LegacyButton\n {...(rest as LegacyButtonProps)}\n ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}\n />\n );\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","as","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","mappedAppearance","legacyButtonTypes","appearance","includes","htmlType","href","Button","forwardRef","ref","useNewButton","rest","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;AAwCA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAE,GAAGC,QAAAA;AAAU,GAAA,GAAGL,KAAK,CAAA;AAEvD,EAAA,MAAMM,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBV,IAAI,IAAIF,QAAQ,GAAGK,eAAe,CAACH,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAI,IAAI,CAAA;EACrF,MAAMa,gBAAgB,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAG,IAAI,CAAA;AAEhE,EAAA,MAAMY,iBAAiB,GAAuB,CAC5C,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,OAAO;AACL,IAAA,GAAGV,QAAQ;IACXH,IAAI,EACFA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI;AAC5FD,IAAAA,QAAQ,EAAEY,cAAc;AACxBG,IAAAA,UAAU,EAAEF,gBAAgB,KAAK,YAAY,IAAId,KAAK,GAAGA,KAAK,CAACgB,UAAU,GAAG,IAAI,CAAC;AACjFb,IAAAA,IAAI,EACFA,IAAI,IAAI,CAACY,iBAAiB,CAACE,QAAQ,CAACd,IAAwB,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACkB,QAAQ,IAAI,IAAI;IAC/FC,IAAI,EAAEf,EAAE,KAAK,GAAG,GAAGJ,KAAK,CAACmB,IAAI,IAAI,EAAE,GAAG,IAAA;GACrB,CAAA;AACrB,CAAC,CAAA;AAEKC,MAAAA,MAAM,gBAAGC,UAAU,CAAqD,CAACrB,KAAK,EAAEsB,GAAG,KAAI;EAC3F,MAAM;IAAEC,YAAY;IAAEnB,EAAE;IAAE,GAAGoB,IAAAA;AAAI,GAAE,GAAGxB,KAAK,CAAA;AAE3C,EAAA,IAAIuB,YAAY,EAAE;AAChB,IAAA,MAAME,WAAW,GAAG1B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBACE0B,GAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GACJF,WAAW;AACfH,MAAAA,GAAG,EAAEA,GAAwD;AAC7DlB,MAAAA,EAAE,EAAEA,EAAAA;AAAG,KACP,CAAA,CAAA;AAEN,GAAA;EAEA,oBACEsB,GAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GACNJ,IAA0B;AAC/BF,IAAAA,GAAG,EAAEA,GAAAA;AAAwD,GAAA,CAC7D,CAAA;AAEN,CAAC,EAAC;AAEFF,MAAM,CAACS,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 +1 @@
|
|
|
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
|
|
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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"}
|
package/build/main.css
CHANGED
|
@@ -716,7 +716,7 @@ div.critical-comms .critical-comms-body {
|
|
|
716
716
|
.np-btn.disabled[class] {
|
|
717
717
|
pointer-events: auto;
|
|
718
718
|
}
|
|
719
|
-
|
|
719
|
+
.wds-Button {
|
|
720
720
|
--Button-background: var(--color-interactive-accent);
|
|
721
721
|
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
722
722
|
--Button-background-active: var(--color-interactive-accent-active);
|
|
@@ -731,8 +731,6 @@ div.critical-comms .critical-comms-body {
|
|
|
731
731
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
732
732
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
733
733
|
--Button-avatar-border-color: var(--color-border-neutral);
|
|
734
|
-
--Button-transition-duration: 150ms;
|
|
735
|
-
--Button-transition-easing: ease-in-out;
|
|
736
734
|
--Button-secondary-background: var(--color-interactive-neutral);
|
|
737
735
|
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
738
736
|
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
@@ -749,31 +747,25 @@ div.critical-comms .critical-comms-body {
|
|
|
749
747
|
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
750
748
|
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
751
749
|
--Button-primary-negative-color: var(--color-contrast);
|
|
752
|
-
--Button-primary-
|
|
750
|
+
--Button-primary-negative-avatar-border-color: rgba(255,255,255,0.2);
|
|
753
751
|
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
754
752
|
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
755
753
|
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
756
754
|
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
757
|
-
--Button-secondary-
|
|
755
|
+
--Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
|
|
758
756
|
}
|
|
759
757
|
.np-theme-personal--dark .wds-Button {
|
|
760
|
-
--Button-primary-
|
|
758
|
+
--Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
761
759
|
}
|
|
762
760
|
.np-theme-personal--forest-green .wds-Button {
|
|
763
|
-
--
|
|
764
|
-
--
|
|
765
|
-
--color-interactive-neutral-active: rgba(236,255,224,0.2);
|
|
766
|
-
--color-sentiment-negative-secondary: rgba(255,196,194,0.2);
|
|
767
|
-
--color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
|
|
768
|
-
--color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
|
|
769
|
-
--Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
770
|
-
--Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
761
|
+
--Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
762
|
+
--Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
771
763
|
}
|
|
772
764
|
.np-theme-personal--bright-green .wds-Button {
|
|
773
765
|
--color-contrast: #FFFFFF;
|
|
774
766
|
--Button-secondary-color: var(--color-interactive-control);
|
|
775
767
|
--Button-secondary-negative-color: var(--color-contrast);
|
|
776
|
-
--Button-secondary-
|
|
768
|
+
--Button-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
|
|
777
769
|
}
|
|
778
770
|
/* Button Styles */
|
|
779
771
|
.wds-Button {
|
|
@@ -783,13 +775,9 @@ div.critical-comms .critical-comms-body {
|
|
|
783
775
|
align-items: center;
|
|
784
776
|
justify-content: center;
|
|
785
777
|
vertical-align: middle;
|
|
786
|
-
font-weight: 600;
|
|
787
778
|
font-weight: var(--Button-font-weight);
|
|
788
|
-
font-size: 1rem;
|
|
789
779
|
font-size: var(--Button-font-size);
|
|
790
|
-
letter-spacing: -0.011em;
|
|
791
780
|
letter-spacing: var(--Button-letter-spacing);
|
|
792
|
-
line-height: 24px;
|
|
793
781
|
line-height: var(--Button-line-height);
|
|
794
782
|
text-align: center;
|
|
795
783
|
-webkit-text-decoration: none;
|
|
@@ -799,30 +787,23 @@ div.critical-comms .critical-comms-body {
|
|
|
799
787
|
-webkit-appearance: none;
|
|
800
788
|
-moz-appearance: none;
|
|
801
789
|
appearance: none;
|
|
802
|
-
background-color: #00a2dd;
|
|
803
790
|
background-color: var(--Button-background);
|
|
804
791
|
border: none;
|
|
805
|
-
border-radius: 9999px;
|
|
806
792
|
border-radius: var(--Button-border-radius);
|
|
807
793
|
color: var(--Button-color);
|
|
808
794
|
cursor: pointer;
|
|
809
|
-
padding: 8px 12px;
|
|
810
795
|
padding: var(--Button-padding);
|
|
811
|
-
transition: color, background-color 150ms ease-in-out;
|
|
812
|
-
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
813
796
|
}
|
|
814
797
|
.wds-Button:focus {
|
|
815
798
|
-webkit-text-decoration: none;
|
|
816
799
|
text-decoration: none;
|
|
817
800
|
}
|
|
818
801
|
.wds-Button:hover {
|
|
819
|
-
background-color: #008fc9;
|
|
820
802
|
background-color: var(--Button-background-hover);
|
|
821
803
|
-webkit-text-decoration: none;
|
|
822
804
|
text-decoration: none;
|
|
823
805
|
}
|
|
824
806
|
.wds-Button:active {
|
|
825
|
-
background-color: #0081ba;
|
|
826
807
|
background-color: var(--Button-background-active);
|
|
827
808
|
-webkit-text-decoration: none;
|
|
828
809
|
text-decoration: none;
|
|
@@ -837,7 +818,6 @@ div.critical-comms .critical-comms-body {
|
|
|
837
818
|
.wds-Button:disabled:hover,
|
|
838
819
|
.wds-Button.wds-Button--disabled:active,
|
|
839
820
|
.wds-Button:disabled:active {
|
|
840
|
-
background-color: #00a2dd;
|
|
841
821
|
background-color: var(--Button-background);
|
|
842
822
|
}
|
|
843
823
|
.wds-Button--secondary {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
.wds-Button {
|
|
2
2
|
--Button-background: var(--color-interactive-accent);
|
|
3
3
|
--Button-background-hover: var(--color-interactive-accent-hover);
|
|
4
4
|
--Button-background-active: var(--color-interactive-accent-active);
|
|
@@ -13,8 +13,6 @@
|
|
|
13
13
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
14
14
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
15
15
|
--Button-avatar-border-color: var(--color-border-neutral);
|
|
16
|
-
--Button-transition-duration: 150ms;
|
|
17
|
-
--Button-transition-easing: ease-in-out;
|
|
18
16
|
--Button-secondary-background: var(--color-interactive-neutral);
|
|
19
17
|
--Button-secondary-background-hover: var(--color-interactive-neutral-hover);
|
|
20
18
|
--Button-secondary-background-active: var(--color-interactive-neutral-active);
|
|
@@ -31,31 +29,25 @@
|
|
|
31
29
|
--Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
|
|
32
30
|
--Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
|
|
33
31
|
--Button-primary-negative-color: var(--color-contrast);
|
|
34
|
-
--Button-primary-
|
|
32
|
+
--Button-primary-negative-avatar-border-color: rgba(255,255,255,0.2);
|
|
35
33
|
--Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
|
|
36
34
|
--Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
|
|
37
35
|
--Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
|
|
38
36
|
--Button-secondary-negative-color: var(--color-sentiment-negative-primary);
|
|
39
|
-
--Button-secondary-
|
|
37
|
+
--Button-secondary-negative-avatar-border-color: rgba(168,32,13,0.12157);
|
|
40
38
|
}
|
|
41
39
|
.np-theme-personal--dark .wds-Button {
|
|
42
|
-
--Button-primary-
|
|
40
|
+
--Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
43
41
|
}
|
|
44
42
|
.np-theme-personal--forest-green .wds-Button {
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--color-interactive-neutral-active: rgba(236,255,224,0.2);
|
|
48
|
-
--color-sentiment-negative-secondary: rgba(255,196,194,0.2);
|
|
49
|
-
--color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
|
|
50
|
-
--color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
|
|
51
|
-
--Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
52
|
-
--Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
43
|
+
--Button-primary-negative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
44
|
+
--Button-secondary-negative-avatar-border-color: rgba(14,15,12,0.12157);
|
|
53
45
|
}
|
|
54
46
|
.np-theme-personal--bright-green .wds-Button {
|
|
55
47
|
--color-contrast: #FFFFFF;
|
|
56
48
|
--Button-secondary-color: var(--color-interactive-control);
|
|
57
49
|
--Button-secondary-negative-color: var(--color-contrast);
|
|
58
|
-
--Button-secondary-
|
|
50
|
+
--Button-secondary-negative-avatar-border-color: var(--Button-primary-negative-avatar-border-color);
|
|
59
51
|
}
|
|
60
52
|
/* Button Styles */
|
|
61
53
|
.wds-Button {
|
|
@@ -65,13 +57,9 @@
|
|
|
65
57
|
align-items: center;
|
|
66
58
|
justify-content: center;
|
|
67
59
|
vertical-align: middle;
|
|
68
|
-
font-weight: 600;
|
|
69
60
|
font-weight: var(--Button-font-weight);
|
|
70
|
-
font-size: 1rem;
|
|
71
61
|
font-size: var(--Button-font-size);
|
|
72
|
-
letter-spacing: -0.011em;
|
|
73
62
|
letter-spacing: var(--Button-letter-spacing);
|
|
74
|
-
line-height: 24px;
|
|
75
63
|
line-height: var(--Button-line-height);
|
|
76
64
|
text-align: center;
|
|
77
65
|
-webkit-text-decoration: none;
|
|
@@ -81,30 +69,23 @@
|
|
|
81
69
|
-webkit-appearance: none;
|
|
82
70
|
-moz-appearance: none;
|
|
83
71
|
appearance: none;
|
|
84
|
-
background-color: #00a2dd;
|
|
85
72
|
background-color: var(--Button-background);
|
|
86
73
|
border: none;
|
|
87
|
-
border-radius: 9999px;
|
|
88
74
|
border-radius: var(--Button-border-radius);
|
|
89
75
|
color: var(--Button-color);
|
|
90
76
|
cursor: pointer;
|
|
91
|
-
padding: 8px 12px;
|
|
92
77
|
padding: var(--Button-padding);
|
|
93
|
-
transition: color, background-color 150ms ease-in-out;
|
|
94
|
-
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
95
78
|
}
|
|
96
79
|
.wds-Button:focus {
|
|
97
80
|
-webkit-text-decoration: none;
|
|
98
81
|
text-decoration: none;
|
|
99
82
|
}
|
|
100
83
|
.wds-Button:hover {
|
|
101
|
-
background-color: #008fc9;
|
|
102
84
|
background-color: var(--Button-background-hover);
|
|
103
85
|
-webkit-text-decoration: none;
|
|
104
86
|
text-decoration: none;
|
|
105
87
|
}
|
|
106
88
|
.wds-Button:active {
|
|
107
|
-
background-color: #0081ba;
|
|
108
89
|
background-color: var(--Button-background-active);
|
|
109
90
|
-webkit-text-decoration: none;
|
|
110
91
|
text-decoration: none;
|
|
@@ -119,7 +100,6 @@
|
|
|
119
100
|
.wds-Button:disabled:hover,
|
|
120
101
|
.wds-Button.wds-Button--disabled:active,
|
|
121
102
|
.wds-Button:disabled:active {
|
|
122
|
-
background-color: #00a2dd;
|
|
123
103
|
background-color: var(--Button-background);
|
|
124
104
|
}
|
|
125
105
|
.wds-Button--secondary {
|