@transferwise/components 0.0.0-experimental-f2eec9e → 0.0.0-experimental-44051ee
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 +5 -2
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +5 -2
- package/build/button/Button.mjs.map +1 -1
- package/build/main.css +12 -2
- package/build/styles/button/Button.css +12 -2
- package/build/styles/main.css +12 -2
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +2 -2
- package/package.json +3 -3
- package/src/button/Button.css +12 -2
- package/src/button/Button.less +16 -5
- package/src/button/Button.spec.tsx +51 -26
- package/src/button/Button.story.tsx +0 -5
- package/src/button/Button.tsx +5 -2
- package/src/button/Button.types.ts +2 -2
- package/src/main.css +12 -2
package/build/button/Button.js
CHANGED
|
@@ -34,7 +34,7 @@ var Body = require('../body/Body.js');
|
|
|
34
34
|
/* eslint-disable react/display-name */
|
|
35
35
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
36
36
|
const Button = /*#__PURE__*/React.forwardRef(({
|
|
37
|
-
as
|
|
37
|
+
as,
|
|
38
38
|
children,
|
|
39
39
|
className,
|
|
40
40
|
size = 'lg',
|
|
@@ -91,7 +91,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
91
91
|
})
|
|
92
92
|
})]
|
|
93
93
|
});
|
|
94
|
-
if (href || as === 'a') {
|
|
94
|
+
if (href && as !== 'button' || as === 'a') {
|
|
95
95
|
return /*#__PURE__*/jsxRuntime.jsx(PrimitiveAnchor, {
|
|
96
96
|
ref: ref,
|
|
97
97
|
...props,
|
|
@@ -99,6 +99,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
99
99
|
className: classNames,
|
|
100
100
|
disabled: disabled || loading,
|
|
101
101
|
"aria-busy": loading || undefined,
|
|
102
|
+
type: undefined,
|
|
102
103
|
children: content
|
|
103
104
|
});
|
|
104
105
|
}
|
|
@@ -109,6 +110,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
109
110
|
disabled: disabled,
|
|
110
111
|
loading: loading,
|
|
111
112
|
type: type,
|
|
113
|
+
href: undefined,
|
|
114
|
+
target: undefined,
|
|
112
115
|
children: content
|
|
113
116
|
});
|
|
114
117
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as,\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : '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 </Body>\n );\n\n if ((href && as !== 'button') || 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 || loading}\n aria-busy={loading || undefined}\n type={undefined}\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 href={undefined}\n target={undefined}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","undefined","PrimitiveButton","target"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -32,7 +32,7 @@ import Body from '../body/Body.mjs';
|
|
|
32
32
|
/* eslint-disable react/display-name */
|
|
33
33
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
34
34
|
const Button = /*#__PURE__*/forwardRef(({
|
|
35
|
-
as
|
|
35
|
+
as,
|
|
36
36
|
children,
|
|
37
37
|
className,
|
|
38
38
|
size = 'lg',
|
|
@@ -89,7 +89,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
89
89
|
})
|
|
90
90
|
})]
|
|
91
91
|
});
|
|
92
|
-
if (href || as === 'a') {
|
|
92
|
+
if (href && as !== 'button' || as === 'a') {
|
|
93
93
|
return /*#__PURE__*/jsx(PrimitiveAnchor, {
|
|
94
94
|
ref: ref,
|
|
95
95
|
...props,
|
|
@@ -97,6 +97,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
97
97
|
className: classNames,
|
|
98
98
|
disabled: disabled || loading,
|
|
99
99
|
"aria-busy": loading || undefined,
|
|
100
|
+
type: undefined,
|
|
100
101
|
children: content
|
|
101
102
|
});
|
|
102
103
|
}
|
|
@@ -107,6 +108,8 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
107
108
|
disabled: disabled,
|
|
108
109
|
loading: loading,
|
|
109
110
|
type: type,
|
|
111
|
+
href: undefined,
|
|
112
|
+
target: undefined,
|
|
110
113
|
children: content
|
|
111
114
|
});
|
|
112
115
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport {\n AnchorElementProps,\n ButtonReferenceType,\n ButtonProps as NewButtonProps,\n} from './Button.types';\nimport { PrimitiveAnchor, PrimitiveButton } from '../primitives';\nimport AvatarLayout from '../avatarLayout';\nimport ProcessIndicator from '../processIndicator';\nimport { clsx } from 'clsx';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<ButtonReferenceType, NewButtonProps>(\n (\n {\n as,\n children,\n className,\n size = 'lg',\n href,\n disabled = false,\n priority = 'primary',\n sentiment = 'default',\n iconStart: IconStart,\n iconEnd: IconEnd,\n avatars,\n // @ts-expect-error NewButtonProps has `type` prop\n type = 'button',\n loading = false,\n block = false,\n v2,\n ...props\n },\n ref,\n ) => {\n const classNames = clsx(\n 'wds-Button',\n {\n [`wds-Button--block`]: block,\n [`wds-Button--disabled`]: disabled,\n [`wds-Button--loading`]: loading,\n },\n `wds-Button--${{ sm: 'small', md: 'medium', lg: 'large' }[size]}`,\n `wds-Button--${priority}`,\n `wds-Button--${sentiment}`,\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const content = (\n <Body\n as=\"span\"\n type={size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD}\n className={contentClassNames}\n >\n {loading && (\n <ProcessIndicator\n size={size === 'sm' ? 'xxs' : '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 </Body>\n );\n\n if ((href && as !== 'button') || 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 || loading}\n aria-busy={loading || undefined}\n type={undefined}\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 href={undefined}\n target={undefined}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","size","href","disabled","priority","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","v2","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","undefined","PrimitiveButton","target"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -772,8 +772,6 @@ div.critical-comms .critical-comms-body {
|
|
|
772
772
|
justify-content: center;
|
|
773
773
|
vertical-align: middle;
|
|
774
774
|
text-align: center;
|
|
775
|
-
-webkit-text-decoration: none;
|
|
776
|
-
text-decoration: none;
|
|
777
775
|
white-space: nowrap;
|
|
778
776
|
word-wrap: break-word;
|
|
779
777
|
-webkit-appearance: none;
|
|
@@ -786,6 +784,13 @@ div.critical-comms .critical-comms-body {
|
|
|
786
784
|
cursor: pointer;
|
|
787
785
|
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
788
786
|
}
|
|
787
|
+
.wds-Button,
|
|
788
|
+
.wds-Button:hover,
|
|
789
|
+
.wds-Button:active,
|
|
790
|
+
.wds-Button:focus {
|
|
791
|
+
-webkit-text-decoration: none;
|
|
792
|
+
text-decoration: none;
|
|
793
|
+
}
|
|
789
794
|
.wds-Button:hover {
|
|
790
795
|
background-color: var(--Button-background-hover);
|
|
791
796
|
}
|
|
@@ -827,6 +832,11 @@ div.critical-comms .critical-comms-body {
|
|
|
827
832
|
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
828
833
|
--Button-background-active: var(--Button-minimal-background-active);
|
|
829
834
|
--Button-color: var(--Button-minimal-color);
|
|
835
|
+
}
|
|
836
|
+
.wds-Button--minimal,
|
|
837
|
+
.wds-Button--minimal:hover,
|
|
838
|
+
.wds-Button--minimal:active,
|
|
839
|
+
.wds-Button--minimal:focus {
|
|
830
840
|
-webkit-text-decoration: underline;
|
|
831
841
|
text-decoration: underline;
|
|
832
842
|
text-underline-offset: 3px;
|
|
@@ -53,8 +53,6 @@
|
|
|
53
53
|
justify-content: center;
|
|
54
54
|
vertical-align: middle;
|
|
55
55
|
text-align: center;
|
|
56
|
-
-webkit-text-decoration: none;
|
|
57
|
-
text-decoration: none;
|
|
58
56
|
white-space: nowrap;
|
|
59
57
|
word-wrap: break-word;
|
|
60
58
|
-webkit-appearance: none;
|
|
@@ -67,6 +65,13 @@
|
|
|
67
65
|
cursor: pointer;
|
|
68
66
|
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
69
67
|
}
|
|
68
|
+
.wds-Button,
|
|
69
|
+
.wds-Button:hover,
|
|
70
|
+
.wds-Button:active,
|
|
71
|
+
.wds-Button:focus {
|
|
72
|
+
-webkit-text-decoration: none;
|
|
73
|
+
text-decoration: none;
|
|
74
|
+
}
|
|
70
75
|
.wds-Button:hover {
|
|
71
76
|
background-color: var(--Button-background-hover);
|
|
72
77
|
}
|
|
@@ -108,6 +113,11 @@
|
|
|
108
113
|
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
109
114
|
--Button-background-active: var(--Button-minimal-background-active);
|
|
110
115
|
--Button-color: var(--Button-minimal-color);
|
|
116
|
+
}
|
|
117
|
+
.wds-Button--minimal,
|
|
118
|
+
.wds-Button--minimal:hover,
|
|
119
|
+
.wds-Button--minimal:active,
|
|
120
|
+
.wds-Button--minimal:focus {
|
|
111
121
|
-webkit-text-decoration: underline;
|
|
112
122
|
text-decoration: underline;
|
|
113
123
|
text-underline-offset: 3px;
|
package/build/styles/main.css
CHANGED
|
@@ -772,8 +772,6 @@ div.critical-comms .critical-comms-body {
|
|
|
772
772
|
justify-content: center;
|
|
773
773
|
vertical-align: middle;
|
|
774
774
|
text-align: center;
|
|
775
|
-
-webkit-text-decoration: none;
|
|
776
|
-
text-decoration: none;
|
|
777
775
|
white-space: nowrap;
|
|
778
776
|
word-wrap: break-word;
|
|
779
777
|
-webkit-appearance: none;
|
|
@@ -786,6 +784,13 @@ div.critical-comms .critical-comms-body {
|
|
|
786
784
|
cursor: pointer;
|
|
787
785
|
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
788
786
|
}
|
|
787
|
+
.wds-Button,
|
|
788
|
+
.wds-Button:hover,
|
|
789
|
+
.wds-Button:active,
|
|
790
|
+
.wds-Button:focus {
|
|
791
|
+
-webkit-text-decoration: none;
|
|
792
|
+
text-decoration: none;
|
|
793
|
+
}
|
|
789
794
|
.wds-Button:hover {
|
|
790
795
|
background-color: var(--Button-background-hover);
|
|
791
796
|
}
|
|
@@ -827,6 +832,11 @@ div.critical-comms .critical-comms-body {
|
|
|
827
832
|
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
828
833
|
--Button-background-active: var(--Button-minimal-background-active);
|
|
829
834
|
--Button-color: var(--Button-minimal-color);
|
|
835
|
+
}
|
|
836
|
+
.wds-Button--minimal,
|
|
837
|
+
.wds-Button--minimal:hover,
|
|
838
|
+
.wds-Button--minimal:active,
|
|
839
|
+
.wds-Button--minimal:focus {
|
|
830
840
|
-webkit-text-decoration: underline;
|
|
831
841
|
text-decoration: underline;
|
|
832
842
|
text-underline-offset: 3px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,mBAAmB,EACnB,WAAW,IAAI,cAAc,EAC9B,MAAM,gBAAgB,CAAC;AAQxB,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,mBAAmB,EACnB,WAAW,IAAI,cAAc,EAC9B,MAAM,gBAAgB,CAAC;AAQxB,QAAA,MAAM,MAAM,gHAyGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -10,8 +10,8 @@ export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
|
|
|
10
10
|
export interface CommonProps {
|
|
11
11
|
v2: true;
|
|
12
12
|
/**
|
|
13
|
-
* The HTML element to render
|
|
14
|
-
* @default
|
|
13
|
+
* The HTML element to render. Takes precedence over `href` prop.
|
|
14
|
+
* @default undefined
|
|
15
15
|
**/
|
|
16
16
|
as?: 'button' | 'a';
|
|
17
17
|
/** Additional class name(s) to apply to the button */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-44051ee",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,12 +92,12 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
95
|
+
"@transferwise/neptune-css": "0.0.0-experimental-44051ee",
|
|
96
96
|
"@wise/components-theming": "1.6.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
100
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
100
|
+
"@transferwise/neptune-css": "0.0.0-experimental-44051ee",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
package/src/button/Button.css
CHANGED
|
@@ -53,8 +53,6 @@
|
|
|
53
53
|
justify-content: center;
|
|
54
54
|
vertical-align: middle;
|
|
55
55
|
text-align: center;
|
|
56
|
-
-webkit-text-decoration: none;
|
|
57
|
-
text-decoration: none;
|
|
58
56
|
white-space: nowrap;
|
|
59
57
|
word-wrap: break-word;
|
|
60
58
|
-webkit-appearance: none;
|
|
@@ -67,6 +65,13 @@
|
|
|
67
65
|
cursor: pointer;
|
|
68
66
|
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
69
67
|
}
|
|
68
|
+
.wds-Button,
|
|
69
|
+
.wds-Button:hover,
|
|
70
|
+
.wds-Button:active,
|
|
71
|
+
.wds-Button:focus {
|
|
72
|
+
-webkit-text-decoration: none;
|
|
73
|
+
text-decoration: none;
|
|
74
|
+
}
|
|
70
75
|
.wds-Button:hover {
|
|
71
76
|
background-color: var(--Button-background-hover);
|
|
72
77
|
}
|
|
@@ -108,6 +113,11 @@
|
|
|
108
113
|
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
109
114
|
--Button-background-active: var(--Button-minimal-background-active);
|
|
110
115
|
--Button-color: var(--Button-minimal-color);
|
|
116
|
+
}
|
|
117
|
+
.wds-Button--minimal,
|
|
118
|
+
.wds-Button--minimal:hover,
|
|
119
|
+
.wds-Button--minimal:active,
|
|
120
|
+
.wds-Button--minimal:focus {
|
|
111
121
|
-webkit-text-decoration: underline;
|
|
112
122
|
text-decoration: underline;
|
|
113
123
|
text-underline-offset: 3px;
|
package/src/button/Button.less
CHANGED
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
justify-content: center;
|
|
10
10
|
vertical-align: middle;
|
|
11
11
|
text-align: center;
|
|
12
|
-
text-decoration: none;
|
|
13
12
|
white-space: nowrap;
|
|
14
13
|
word-wrap: break-word;
|
|
15
14
|
appearance: none;
|
|
@@ -20,6 +19,13 @@
|
|
|
20
19
|
cursor: pointer;
|
|
21
20
|
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
22
21
|
|
|
22
|
+
&,
|
|
23
|
+
&:hover,
|
|
24
|
+
&:active,
|
|
25
|
+
&:focus {
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
23
29
|
&:hover {
|
|
24
30
|
background-color: var(--Button-background-hover);
|
|
25
31
|
}
|
|
@@ -71,9 +77,14 @@
|
|
|
71
77
|
--Button-background-active: var(--Button-minimal-background-active);
|
|
72
78
|
--Button-color: var(--Button-minimal-color);
|
|
73
79
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
&,
|
|
81
|
+
&:hover,
|
|
82
|
+
&:active,
|
|
83
|
+
&:focus {
|
|
84
|
+
text-decoration: underline;
|
|
85
|
+
text-underline-offset: 3px;
|
|
86
|
+
text-decoration-thickness: 1px;
|
|
87
|
+
}
|
|
77
88
|
}
|
|
78
89
|
|
|
79
90
|
// Negative styles
|
|
@@ -221,4 +232,4 @@
|
|
|
221
232
|
scale: -1 1;
|
|
222
233
|
}
|
|
223
234
|
}
|
|
224
|
-
}
|
|
235
|
+
}
|
|
@@ -41,35 +41,60 @@ describe('Button', () => {
|
|
|
41
41
|
const name = 'Button as link';
|
|
42
42
|
|
|
43
43
|
describe('v2', () => {
|
|
44
|
-
|
|
45
|
-
render(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
render(
|
|
50
|
-
<Button v2 href={href}>
|
|
51
|
-
{name}
|
|
52
|
-
</Button>,
|
|
53
|
-
);
|
|
54
|
-
expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
|
|
55
|
-
});
|
|
44
|
+
describe('rendered HTMLS element', () => {
|
|
45
|
+
it('should render as button by default', () => {
|
|
46
|
+
render(<Button v2>{name}</Button>);
|
|
47
|
+
expect(screen.getByRole('button', { name })).toBeInTheDocument();
|
|
48
|
+
});
|
|
56
49
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
50
|
+
it('should render as link if href is provided', () => {
|
|
51
|
+
render(
|
|
52
|
+
<Button v2 href={href}>
|
|
53
|
+
{name}
|
|
54
|
+
</Button>,
|
|
55
|
+
);
|
|
56
|
+
expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('should render a HTML anchor if `as="a"` is provided', () => {
|
|
60
|
+
render(
|
|
61
|
+
<Button v2 as="a">
|
|
62
|
+
{name}
|
|
63
|
+
</Button>,
|
|
64
|
+
);
|
|
65
|
+
expect(screen.getByText(name).closest('a')).toBeInTheDocument();
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
it('should render as a button if `href` is set together with `as="button"`', () => {
|
|
69
|
+
render(
|
|
70
|
+
<Button v2 href={href} as="button">
|
|
71
|
+
{name}
|
|
72
|
+
</Button>,
|
|
73
|
+
);
|
|
74
|
+
expect(screen.getByRole('button', { name })).toBeInTheDocument();
|
|
75
|
+
});
|
|
64
76
|
});
|
|
65
77
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
78
|
+
describe('HTML attributes', () => {
|
|
79
|
+
it('should not set `type` if rendered as HTML anchor', () => {
|
|
80
|
+
render(
|
|
81
|
+
<Button v2 type="submit" href="wise.com">
|
|
82
|
+
{name}
|
|
83
|
+
</Button>,
|
|
84
|
+
);
|
|
85
|
+
expect(screen.getByRole('link')).not.toHaveAttribute('type');
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
it('should not set `href` or `target` if rendered as HTML button', () => {
|
|
89
|
+
render(
|
|
90
|
+
<Button v2 as="button" href="wise.com" target="_blank">
|
|
91
|
+
{name}
|
|
92
|
+
</Button>,
|
|
93
|
+
);
|
|
94
|
+
const button = screen.getByRole('button');
|
|
95
|
+
expect(button).not.toHaveAttribute('href');
|
|
96
|
+
expect(button).not.toHaveAttribute('target');
|
|
97
|
+
});
|
|
73
98
|
});
|
|
74
99
|
|
|
75
100
|
describe('disabled mode', () => {
|
package/src/button/Button.tsx
CHANGED
|
@@ -16,7 +16,7 @@ import Body from '../body';
|
|
|
16
16
|
const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
17
17
|
(
|
|
18
18
|
{
|
|
19
|
-
as
|
|
19
|
+
as,
|
|
20
20
|
children,
|
|
21
21
|
className,
|
|
22
22
|
size = 'lg',
|
|
@@ -87,7 +87,7 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
87
87
|
</Body>
|
|
88
88
|
);
|
|
89
89
|
|
|
90
|
-
if (href || as === 'a') {
|
|
90
|
+
if ((href && as !== 'button') || as === 'a') {
|
|
91
91
|
return (
|
|
92
92
|
<PrimitiveAnchor
|
|
93
93
|
ref={ref as React.Ref<HTMLAnchorElement>}
|
|
@@ -96,6 +96,7 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
96
96
|
className={classNames}
|
|
97
97
|
disabled={disabled || loading}
|
|
98
98
|
aria-busy={loading || undefined}
|
|
99
|
+
type={undefined}
|
|
99
100
|
>
|
|
100
101
|
{content}
|
|
101
102
|
</PrimitiveAnchor>
|
|
@@ -110,6 +111,8 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
110
111
|
disabled={disabled}
|
|
111
112
|
loading={loading}
|
|
112
113
|
type={type}
|
|
114
|
+
href={undefined}
|
|
115
|
+
target={undefined}
|
|
113
116
|
>
|
|
114
117
|
{content}
|
|
115
118
|
</PrimitiveButton>
|
package/src/main.css
CHANGED
|
@@ -772,8 +772,6 @@ div.critical-comms .critical-comms-body {
|
|
|
772
772
|
justify-content: center;
|
|
773
773
|
vertical-align: middle;
|
|
774
774
|
text-align: center;
|
|
775
|
-
-webkit-text-decoration: none;
|
|
776
|
-
text-decoration: none;
|
|
777
775
|
white-space: nowrap;
|
|
778
776
|
word-wrap: break-word;
|
|
779
777
|
-webkit-appearance: none;
|
|
@@ -786,6 +784,13 @@ div.critical-comms .critical-comms-body {
|
|
|
786
784
|
cursor: pointer;
|
|
787
785
|
transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
|
|
788
786
|
}
|
|
787
|
+
.wds-Button,
|
|
788
|
+
.wds-Button:hover,
|
|
789
|
+
.wds-Button:active,
|
|
790
|
+
.wds-Button:focus {
|
|
791
|
+
-webkit-text-decoration: none;
|
|
792
|
+
text-decoration: none;
|
|
793
|
+
}
|
|
789
794
|
.wds-Button:hover {
|
|
790
795
|
background-color: var(--Button-background-hover);
|
|
791
796
|
}
|
|
@@ -827,6 +832,11 @@ div.critical-comms .critical-comms-body {
|
|
|
827
832
|
--Button-background-hover: var(--Button-minimal-background-hover);
|
|
828
833
|
--Button-background-active: var(--Button-minimal-background-active);
|
|
829
834
|
--Button-color: var(--Button-minimal-color);
|
|
835
|
+
}
|
|
836
|
+
.wds-Button--minimal,
|
|
837
|
+
.wds-Button--minimal:hover,
|
|
838
|
+
.wds-Button--minimal:active,
|
|
839
|
+
.wds-Button--minimal:focus {
|
|
830
840
|
-webkit-text-decoration: underline;
|
|
831
841
|
text-decoration: underline;
|
|
832
842
|
text-underline-offset: 3px;
|