@transferwise/components 0.0.0-experimental-58ab0d7 → 0.0.0-experimental-c2e635d
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 +12 -12
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +12 -12
- package/build/button/Button.mjs.map +1 -1
- package/build/main.css +0 -3
- package/build/styles/button/Button.css +0 -3
- package/build/styles/main.css +0 -3
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +0 -5
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +4 -0
- package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button.css +0 -3
- package/src/button/Button.less +0 -4
- package/src/button/Button.story.tsx +3 -35
- package/src/button/Button.tsx +2 -12
- package/src/button/Button.types.ts +0 -7
- package/src/main.css +0 -3
- package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +5 -0
package/build/button/Button.js
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var PrimitiveButton = require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
|
|
5
5
|
var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
|
|
6
|
+
var AvatarLayout = require('../avatarLayout/AvatarLayout.js');
|
|
6
7
|
var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
|
|
7
8
|
var clsx = require('clsx');
|
|
8
9
|
require('../common/theme.js');
|
|
@@ -30,9 +31,6 @@ require('../common/closeButton/CloseButton.messages.js');
|
|
|
30
31
|
var jsxRuntime = require('react/jsx-runtime');
|
|
31
32
|
var Body = require('../body/Body.js');
|
|
32
33
|
|
|
33
|
-
/* eslint-disable react/display-name */
|
|
34
|
-
/* eslint-disable no-console */
|
|
35
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
36
34
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
37
35
|
const Button = /*#__PURE__*/React.forwardRef(({
|
|
38
36
|
as = 'button',
|
|
@@ -49,11 +47,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
49
47
|
type = 'button',
|
|
50
48
|
loading = false,
|
|
51
49
|
block = false,
|
|
52
|
-
startMedia = undefined,
|
|
53
|
-
endMedia = undefined,
|
|
54
50
|
...props
|
|
55
51
|
}, ref) => {
|
|
56
|
-
console.log('startMedia', startMedia, 'endMedia', endMedia);
|
|
57
52
|
const classNames = clsx.clsx('wds-Button', {
|
|
58
53
|
[`wds-Button--block`]: block,
|
|
59
54
|
[`wds-Button--disabled`]: disabled,
|
|
@@ -78,12 +73,17 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
78
73
|
className: "wds-Button-label",
|
|
79
74
|
"aria-hidden": loading,
|
|
80
75
|
children: size === 'lg' ? children : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
81
|
-
children: [
|
|
82
|
-
className: "wds-Button-
|
|
83
|
-
children:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
76
|
+
children: [size === 'md' && avatars && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
77
|
+
className: "wds-Button-avatars",
|
|
78
|
+
children: /*#__PURE__*/jsxRuntime.jsx(AvatarLayout, {
|
|
79
|
+
orientation: "horizontal",
|
|
80
|
+
avatars: avatars,
|
|
81
|
+
size: 24
|
|
82
|
+
})
|
|
83
|
+
}), !avatars && IconStart && /*#__PURE__*/jsxRuntime.jsx(IconStart, {
|
|
84
|
+
className: "wds-Button-icon wds-Button-icon--start"
|
|
85
|
+
}), children, IconEnd && /*#__PURE__*/jsxRuntime.jsx(IconEnd, {
|
|
86
|
+
className: "wds-Button-icon wds-Button-icon--end"
|
|
87
87
|
})]
|
|
88
88
|
})
|
|
89
89
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable
|
|
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';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\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 type = 'button',\n loading = false,\n block = false,\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=\"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 (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","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { forwardRef } from 'react';
|
|
2
2
|
import PrimitiveButton from '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
|
|
3
3
|
import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
|
|
4
|
+
import AvatarLayout from '../avatarLayout/AvatarLayout.mjs';
|
|
4
5
|
import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
|
|
5
6
|
import { clsx } from 'clsx';
|
|
6
7
|
import '../common/theme.mjs';
|
|
@@ -28,9 +29,6 @@ import '../common/closeButton/CloseButton.messages.mjs';
|
|
|
28
29
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
29
30
|
import Body from '../body/Body.mjs';
|
|
30
31
|
|
|
31
|
-
/* eslint-disable react/display-name */
|
|
32
|
-
/* eslint-disable no-console */
|
|
33
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
34
32
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
35
33
|
const Button = /*#__PURE__*/forwardRef(({
|
|
36
34
|
as = 'button',
|
|
@@ -47,11 +45,8 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
47
45
|
type = 'button',
|
|
48
46
|
loading = false,
|
|
49
47
|
block = false,
|
|
50
|
-
startMedia = undefined,
|
|
51
|
-
endMedia = undefined,
|
|
52
48
|
...props
|
|
53
49
|
}, ref) => {
|
|
54
|
-
console.log('startMedia', startMedia, 'endMedia', endMedia);
|
|
55
50
|
const classNames = clsx('wds-Button', {
|
|
56
51
|
[`wds-Button--block`]: block,
|
|
57
52
|
[`wds-Button--disabled`]: disabled,
|
|
@@ -76,12 +71,17 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
76
71
|
className: "wds-Button-label",
|
|
77
72
|
"aria-hidden": loading,
|
|
78
73
|
children: size === 'lg' ? children : /*#__PURE__*/jsxs(Fragment, {
|
|
79
|
-
children: [
|
|
80
|
-
className: "wds-Button-
|
|
81
|
-
children:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
74
|
+
children: [size === 'md' && avatars && /*#__PURE__*/jsx("span", {
|
|
75
|
+
className: "wds-Button-avatars",
|
|
76
|
+
children: /*#__PURE__*/jsx(AvatarLayout, {
|
|
77
|
+
orientation: "horizontal",
|
|
78
|
+
avatars: avatars,
|
|
79
|
+
size: 24
|
|
80
|
+
})
|
|
81
|
+
}), !avatars && IconStart && /*#__PURE__*/jsx(IconStart, {
|
|
82
|
+
className: "wds-Button-icon wds-Button-icon--start"
|
|
83
|
+
}), children, IconEnd && /*#__PURE__*/jsx(IconEnd, {
|
|
84
|
+
className: "wds-Button-icon wds-Button-icon--end"
|
|
85
85
|
})]
|
|
86
86
|
})
|
|
87
87
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../src/button/Button.tsx"],"sourcesContent":["/* eslint-disable
|
|
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';\nimport { Typography } from '../common';\nimport Body from '../body';\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>(\n (\n {\n as = 'button',\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 type = 'button',\n loading = false,\n block = false,\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=\"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 (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","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","classNames","clsx","sm","md","lg","contentClassNames","content","_jsxs","Body","Typography","BODY_DEFAULT_BOLD","BODY_LARGE_BOLD","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -884,9 +884,6 @@ div.critical-comms .critical-comms-body {
|
|
|
884
884
|
margin-left: 4px;
|
|
885
885
|
margin-left: var(--size-4);
|
|
886
886
|
}
|
|
887
|
-
.wds-Button--small .wds-Button-startMedia {
|
|
888
|
-
display: none;
|
|
889
|
-
}
|
|
890
887
|
.wds-Button--medium {
|
|
891
888
|
--Button-padding: var(--Button-size-medium-padding);
|
|
892
889
|
}
|
package/build/styles/main.css
CHANGED
|
@@ -884,9 +884,6 @@ div.critical-comms .critical-comms-body {
|
|
|
884
884
|
margin-left: 4px;
|
|
885
885
|
margin-left: var(--size-4);
|
|
886
886
|
}
|
|
887
|
-
.wds-Button--small .wds-Button-startMedia {
|
|
888
|
-
display: none;
|
|
889
|
-
}
|
|
890
887
|
.wds-Button--medium {
|
|
891
888
|
--Button-padding: var(--Button-size-medium-padding);
|
|
892
889
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAUA,QAAA,MAAM,MAAM,yOAmGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -23,13 +23,11 @@ export interface CommonButtonProps {
|
|
|
23
23
|
/** Additional class name(s) to apply to the button */
|
|
24
24
|
className?: string;
|
|
25
25
|
/**
|
|
26
|
-
* Whether the button is disabled
|
|
27
26
|
* @default false
|
|
28
27
|
**/
|
|
29
28
|
disabled?: boolean;
|
|
30
29
|
href?: string;
|
|
31
30
|
/**
|
|
32
|
-
* Whether the button is in a loading state
|
|
33
31
|
* @default false
|
|
34
32
|
* */
|
|
35
33
|
loading?: boolean;
|
|
@@ -60,9 +58,6 @@ export interface CommonButtonProps {
|
|
|
60
58
|
ref?: ButtonRefType;
|
|
61
59
|
/** Content to be displayed inside the button */
|
|
62
60
|
children?: ReactNode;
|
|
63
|
-
startMedia?: ReactNode;
|
|
64
|
-
endMedia?: ReactNode;
|
|
65
|
-
lol?: string;
|
|
66
61
|
}
|
|
67
62
|
export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
|
|
68
63
|
export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;SAGK;IACL,EAAE,CAAC,EAAE,OAAO,CAAC;IAEb;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC;IAE3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;SAGK;IACL,EAAE,CAAC,EAAE,OAAO,CAAC;IAEb;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC;IAE3B,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;QAEI;IACJ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;SAEK;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE9B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE5B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE7B,iDAAiD;IACjD,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
|
|
@@ -17,5 +17,9 @@ export interface PrimitiveAnchorProps extends BasePrimitiveProps, StyleProp, Omi
|
|
|
17
17
|
disabled?: boolean;
|
|
18
18
|
/** Reference to the anchor element */
|
|
19
19
|
ref?: PrimitiveAnchorElementRef;
|
|
20
|
+
/**
|
|
21
|
+
* HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
|
|
22
|
+
*/
|
|
23
|
+
target?: HTMLAnchorElement['target'];
|
|
20
24
|
}
|
|
21
25
|
//# sourceMappingURL=PrimitiveAnchor.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveAnchor.types.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AACtF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC;IACzC,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"PrimitiveAnchor.types.d.ts","sourceRoot":"","sources":["../../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AACtF,MAAM,MAAM,yBAAyB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAErE;;GAEG;AACH,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,SAAS,EACT,IAAI,CAAC,yBAAyB,EAAE,MAAM,CAAC;IACzC,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sCAAsC;IACtC,GAAG,CAAC,EAAE,yBAAyB,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;CACtC"}
|
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-c2e635d",
|
|
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-c2e635d",
|
|
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-c2e635d",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
package/src/button/Button.css
CHANGED
package/src/button/Button.less
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import { fn } from '@storybook/test';
|
|
3
|
-
import { Freeze, ArrowRight
|
|
3
|
+
import { Freeze, ArrowRight } from '@transferwise/icons';
|
|
4
4
|
import { Flag } from '@wise/art';
|
|
5
5
|
import Button from './Button.resolver';
|
|
6
6
|
import type { ButtonProps } from './Button.types';
|
|
7
|
-
import AvatarLayout from '../avatarLayout';
|
|
8
7
|
|
|
9
8
|
const withContainer = (Story: any) => (
|
|
10
9
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
|
@@ -184,11 +183,13 @@ const meta: Meta<typeof Button> = {
|
|
|
184
183
|
},
|
|
185
184
|
},
|
|
186
185
|
disabled: {
|
|
186
|
+
description: 'Toggles the disabled state',
|
|
187
187
|
table: {
|
|
188
188
|
defaultValue: { summary: 'false' },
|
|
189
189
|
},
|
|
190
190
|
},
|
|
191
191
|
loading: {
|
|
192
|
+
description: 'Toggles the loading state',
|
|
192
193
|
table: {
|
|
193
194
|
defaultValue: { summary: 'false' },
|
|
194
195
|
},
|
|
@@ -404,39 +405,6 @@ export const Size: StoryObj<PreviewStoryArgs> = {
|
|
|
404
405
|
decorators: [withComponentGrid()],
|
|
405
406
|
};
|
|
406
407
|
|
|
407
|
-
export const Test: StoryObj<PreviewStoryArgs> = {
|
|
408
|
-
render: function Render(args: PreviewStoryArgs) {
|
|
409
|
-
return (
|
|
410
|
-
<div>
|
|
411
|
-
<Button
|
|
412
|
-
v2
|
|
413
|
-
size="sm"
|
|
414
|
-
startMedia={<AvatarLayout size={24} avatars={[{ profileName: 'Test Test' }]} />}
|
|
415
|
-
endMedia={<Bank />}
|
|
416
|
-
>
|
|
417
|
-
Button as anchor
|
|
418
|
-
</Button>
|
|
419
|
-
<Button
|
|
420
|
-
v2
|
|
421
|
-
size="md"
|
|
422
|
-
startMedia={<AvatarLayout size={24} avatars={[{ profileName: 'Test Test' }]} />}
|
|
423
|
-
endMedia={<Bank />}
|
|
424
|
-
>
|
|
425
|
-
Button as anchor
|
|
426
|
-
</Button>
|
|
427
|
-
<Button
|
|
428
|
-
v2
|
|
429
|
-
size="lg"
|
|
430
|
-
startMedia={<AvatarLayout size={24} avatars={[{ profileName: 'Test Test' }]} />}
|
|
431
|
-
endMedia={<Bank size={24} />}
|
|
432
|
-
>
|
|
433
|
-
Button as anchor
|
|
434
|
-
</Button>
|
|
435
|
-
</div>
|
|
436
|
-
);
|
|
437
|
-
},
|
|
438
|
-
};
|
|
439
|
-
|
|
440
408
|
/**
|
|
441
409
|
* A Button rendered as an anchor element.
|
|
442
410
|
*/
|
package/src/button/Button.tsx
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/* eslint-disable react/display-name */
|
|
2
|
-
/* eslint-disable no-console */
|
|
3
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
4
1
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
5
2
|
import { forwardRef } from 'react';
|
|
6
3
|
import { ButtonProps as NewButtonProps } from './Button.types';
|
|
@@ -28,13 +25,10 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
|
|
|
28
25
|
type = 'button',
|
|
29
26
|
loading = false,
|
|
30
27
|
block = false,
|
|
31
|
-
startMedia = undefined,
|
|
32
|
-
endMedia = undefined,
|
|
33
28
|
...props
|
|
34
29
|
},
|
|
35
30
|
ref,
|
|
36
31
|
) => {
|
|
37
|
-
console.log('startMedia', startMedia, 'endMedia', endMedia);
|
|
38
32
|
const classNames = clsx(
|
|
39
33
|
'wds-Button',
|
|
40
34
|
{
|
|
@@ -70,11 +64,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
|
|
|
70
64
|
children
|
|
71
65
|
) : (
|
|
72
66
|
<>
|
|
73
|
-
{
|
|
74
|
-
{children}
|
|
75
|
-
{endMedia && <span className="wds-Button-endMedia">{endMedia}</span>}
|
|
76
|
-
|
|
77
|
-
{/* {size === 'md' && avatars && (
|
|
67
|
+
{size === 'md' && avatars && (
|
|
78
68
|
<span className="wds-Button-avatars">
|
|
79
69
|
<AvatarLayout orientation="horizontal" avatars={avatars} size={24} />
|
|
80
70
|
</span>
|
|
@@ -83,7 +73,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
|
|
|
83
73
|
<IconStart className="wds-Button-icon wds-Button-icon--start" />
|
|
84
74
|
)}
|
|
85
75
|
{children}
|
|
86
|
-
{IconEnd && <IconEnd className="wds-Button-icon wds-Button-icon--end" />}
|
|
76
|
+
{IconEnd && <IconEnd className="wds-Button-icon wds-Button-icon--end" />}
|
|
87
77
|
</>
|
|
88
78
|
)}
|
|
89
79
|
</span>
|
|
@@ -33,7 +33,6 @@ export interface CommonButtonProps {
|
|
|
33
33
|
className?: string;
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
|
-
* Whether the button is disabled
|
|
37
36
|
* @default false
|
|
38
37
|
**/
|
|
39
38
|
disabled?: boolean;
|
|
@@ -41,7 +40,6 @@ export interface CommonButtonProps {
|
|
|
41
40
|
href?: string;
|
|
42
41
|
|
|
43
42
|
/**
|
|
44
|
-
* Whether the button is in a loading state
|
|
45
43
|
* @default false
|
|
46
44
|
* */
|
|
47
45
|
loading?: boolean;
|
|
@@ -81,11 +79,6 @@ export interface CommonButtonProps {
|
|
|
81
79
|
|
|
82
80
|
/** Content to be displayed inside the button */
|
|
83
81
|
children?: ReactNode;
|
|
84
|
-
|
|
85
|
-
startMedia?: ReactNode;
|
|
86
|
-
endMedia?: ReactNode;
|
|
87
|
-
|
|
88
|
-
lol?: string;
|
|
89
82
|
}
|
|
90
83
|
|
|
91
84
|
export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
|
package/src/main.css
CHANGED
|
@@ -884,9 +884,6 @@ div.critical-comms .critical-comms-body {
|
|
|
884
884
|
margin-left: 4px;
|
|
885
885
|
margin-left: var(--size-4);
|
|
886
886
|
}
|
|
887
|
-
.wds-Button--small .wds-Button-startMedia {
|
|
888
|
-
display: none;
|
|
889
|
-
}
|
|
890
887
|
.wds-Button--medium {
|
|
891
888
|
--Button-padding: var(--Button-size-medium-padding);
|
|
892
889
|
}
|
|
@@ -25,4 +25,9 @@ export interface PrimitiveAnchorProps
|
|
|
25
25
|
|
|
26
26
|
/** Reference to the anchor element */
|
|
27
27
|
ref?: PrimitiveAnchorElementRef;
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
|
|
31
|
+
*/
|
|
32
|
+
target?: HTMLAnchorElement['target'];
|
|
28
33
|
}
|