@transferwise/components 0.0.0-experimental-7f54a16 → 0.0.0-experimental-1d18c88
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 +4 -27
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +5 -28
- package/build/button/Button.mjs.map +1 -1
- package/build/main.css +15 -0
- package/build/styles/button/Button.css +15 -0
- package/build/styles/button/Button.vars.css +4 -0
- package/build/styles/main.css +15 -0
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +12 -3
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button.css +15 -0
- package/src/button/Button.less +7 -0
- package/src/button/Button.story.tsx +477 -179
- package/src/button/Button.tsx +5 -9
- package/src/button/Button.types.ts +12 -3
- package/src/button/Button.vars.css +4 -0
- package/src/button/Button.vars.less +4 -0
- package/src/button/LegacyButton.spec.tsx +99 -0
- package/src/button/__snapshots__/LegacyButton.spec.tsx.snap +309 -0
- package/src/main.css +15 -0
package/build/button/Button.js
CHANGED
|
@@ -6,30 +6,7 @@ var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor
|
|
|
6
6
|
var AvatarLayout = require('../avatarLayout/AvatarLayout.js');
|
|
7
7
|
var ProcessIndicator = require('../processIndicator/ProcessIndicator.js');
|
|
8
8
|
var clsx = require('clsx');
|
|
9
|
-
require('../common/theme.js');
|
|
10
|
-
require('../common/direction.js');
|
|
11
|
-
require('../common/propsValues/control.js');
|
|
12
|
-
require('../common/propsValues/breakpoint.js');
|
|
13
|
-
require('../common/propsValues/size.js');
|
|
14
|
-
var typography = require('../common/propsValues/typography.js');
|
|
15
|
-
require('../common/propsValues/width.js');
|
|
16
|
-
require('../common/propsValues/type.js');
|
|
17
|
-
require('../common/propsValues/dateMode.js');
|
|
18
|
-
require('../common/propsValues/monthFormat.js');
|
|
19
|
-
require('../common/propsValues/position.js');
|
|
20
|
-
require('../common/propsValues/layouts.js');
|
|
21
|
-
require('../common/propsValues/status.js');
|
|
22
|
-
require('../common/propsValues/sentiment.js');
|
|
23
|
-
require('../common/propsValues/profileType.js');
|
|
24
|
-
require('../common/propsValues/variant.js');
|
|
25
|
-
require('../common/propsValues/scroll.js');
|
|
26
|
-
require('../common/propsValues/markdownNodeType.js');
|
|
27
|
-
require('../common/fileType.js');
|
|
28
|
-
require('@transferwise/icons');
|
|
29
|
-
require('react-intl');
|
|
30
|
-
require('../common/closeButton/CloseButton.messages.js');
|
|
31
9
|
var jsxRuntime = require('react/jsx-runtime');
|
|
32
|
-
var Body = require('../body/Body.js');
|
|
33
10
|
|
|
34
11
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
35
12
|
const Button = /*#__PURE__*/React.forwardRef(({
|
|
@@ -54,20 +31,20 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
54
31
|
md: 'medium',
|
|
55
32
|
lg: 'large'
|
|
56
33
|
}[size];
|
|
34
|
+
const resolvedPriority = priority || 'primary';
|
|
57
35
|
const classNames = clsx.clsx('wds-Button', {
|
|
36
|
+
[`wds-Button`]: as === 'a',
|
|
58
37
|
[`wds-Button--block`]: block,
|
|
59
38
|
[`wds-Button--disabled`]: disabled,
|
|
60
39
|
[`wds-Button--loading`]: loading,
|
|
61
40
|
[`wds-Button--${sizeClass}`]: size,
|
|
62
|
-
[`wds-Button--${
|
|
41
|
+
[`wds-Button--${resolvedPriority}`]: resolvedPriority,
|
|
63
42
|
[`wds-Button--${sentiment}`]: sentiment
|
|
64
43
|
}, className);
|
|
65
44
|
const contentClassNames = clsx.clsx('wds-Button-content', {
|
|
66
45
|
[`wds-Button-content--loading`]: loading
|
|
67
46
|
});
|
|
68
|
-
const content = /*#__PURE__*/jsxRuntime.jsxs(
|
|
69
|
-
as: "span",
|
|
70
|
-
type: size === 'sm' ? typography.Typography.BODY_DEFAULT_BOLD : typography.Typography.BODY_LARGE_BOLD,
|
|
47
|
+
const content = /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
71
48
|
className: contentClassNames,
|
|
72
49
|
children: [loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
|
|
73
50
|
size: "xs",
|
|
@@ -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';\
|
|
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 = '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 sizeClass = { sm: 'small', md: 'medium', lg: 'large' }[size];\n const resolvedPriority = priority || 'primary';\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--${resolvedPriority}`]: resolvedPriority,\n [`wds-Button--${sentiment}`]: sentiment,\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","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","sizeClass","sm","md","lg","resolvedPriority","classNames","clsx","contentClassNames","content","_jsxs","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":";;;;;;;;;;AAAA;AAQA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,EAAE,GAAG,QAAQ;EACbC,QAAQ;EACRC,SAAS;AACTC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,SAAS,EAAEC,SAAS;AACpBC,EAAAA,OAAO,EAAEC,OAAO;EAChBC,OAAO;AACPC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,KAAK,GAAG,KAAK;EACb,GAAGC,KAAAA;AACJ,CAAA,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,SAAS,GAAG;AAAEC,IAAAA,EAAE,EAAE,OAAO;AAAEC,IAAAA,EAAE,EAAE,QAAQ;AAAEC,IAAAA,EAAE,EAAE,OAAA;GAAS,CAAClB,IAAI,CAAC,CAAA;AAClE,EAAA,MAAMmB,gBAAgB,GAAGhB,QAAQ,IAAI,SAAS,CAAA;AAE9C,EAAA,MAAMiB,UAAU,GAAGC,SAAI,CACrB,YAAY,EACZ;AACE,IAAA,CAAC,CAAY,UAAA,CAAA,GAAGxB,EAAE,KAAK,GAAG;IAC1B,CAAC,CAAA,iBAAA,CAAmB,GAAGe,KAAK;IAC5B,CAAC,CAAA,oBAAA,CAAsB,GAAGV,QAAQ;IAClC,CAAC,CAAA,mBAAA,CAAqB,GAAGS,OAAO;AAChC,IAAA,CAAC,CAAeI,YAAAA,EAAAA,SAAS,CAAE,CAAA,GAAGf,IAAI;AAClC,IAAA,CAAC,CAAemB,YAAAA,EAAAA,gBAAgB,CAAE,CAAA,GAAGA,gBAAgB;IACrD,CAAC,CAAA,YAAA,EAAef,SAAS,CAAA,CAAE,GAAGA,SAAAA;GAC/B,EACDL,SAAS,CACV,CAAA;AAED,EAAA,MAAMuB,iBAAiB,GAAGD,SAAI,CAAC,oBAAoB,EAAE;AACnD,IAAA,CAAC,6BAA6B,GAAGV,OAAAA;AAClC,GAAA,CAAC,CAAA;EAEF,MAAMY,OAAO,gBACXC,eAAA,CAAA,MAAA,EAAA;AAAMzB,IAAAA,SAAS,EAAEuB,iBAAkB;AAAAxB,IAAAA,QAAA,EAChCa,CAAAA,OAAO,iBACNc,cAAA,CAACC,gBAAgB,EAAA;AACf1B,MAAAA,IAAI,EAAC,IAAI;AACTD,MAAAA,SAAS,EAAC,mBAAmB;MAC7B,aAAY,EAAA,yBAAA;KAAyB,CAExC,eACD0B,cAAA,CAAA,MAAA,EAAA;AAAM1B,MAAAA,SAAS,EAAC,kBAAkB;AAAC,MAAA,aAAA,EAAaY,OAAQ;MAAAb,QAAA,EACrDE,IAAI,KAAK,IAAI,GACZF,QAAQ,gBAER0B,eAAA,CAAAG,mBAAA,EAAA;AAAA7B,QAAAA,QAAA,GACGE,IAAI,KAAK,IAAI,IAAIS,OAAO,iBACvBgB,cAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,oBAAoB;UAAAD,QAAA,eAClC2B,cAAA,CAACG,YAAY,EAAA;AAACC,YAAAA,WAAW,EAAC,YAAY;AAACpB,YAAAA,OAAO,EAAEA,OAAQ;AAACT,YAAAA,IAAI,EAAE,EAAA;WACjE,CAAA;SAAM,CACP,EACA,CAACS,OAAO,IAAIH,SAAS,iBACpBmB,cAAA,CAACnB,SAAS,EAAA;AAACP,UAAAA,SAAS,EAAC,wCAAA;SAAwC,CAC9D,EACAD,QAAQ,EACRU,OAAO,iBAAIiB,cAAA,CAACjB,OAAO,EAAA;AAACT,UAAAA,SAAS,EAAC,sCAAA;AAAsC,SAAA,CAAG,CAAA;OAC1E,CAAA;AACD,KACG,CACR,CAAA;AAAA,GAAM,CACP,CAAA;EAED,IAAIF,EAAE,KAAK,GAAG,EAAE;IACd,oBACE4B,cAAA,CAACK,eAAe,EAAA;AACdhB,MAAAA,GAAG,EAAEA,GAAoC;AAAA,MAAA,GACpCD,KAAa;AAClBZ,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,SAAS,EAAEqB,UAAW;AACtBlB,MAAAA,QAAQ,EAAEA,QAAS;AAAAJ,MAAAA,QAAA,EAElByB,OAAAA;AAAO,KACO,CAAC,CAAA;AAEtB,GAAA;EAEA,oBACEE,cAAA,CAACM,eAAe,EAAA;AACdjB,IAAAA,GAAG,EAAEA,GAAoC;AAAA,IAAA,GACpCD,KAAa;AAClBd,IAAAA,SAAS,EAAEqB,UAAW;AACtBlB,IAAAA,QAAQ,EAAEA,QAAS;AACnBS,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,IAAI,EAAEA,IAAK;AAAAZ,IAAAA,QAAA,EAEVyB,OAAAA;AAAO,GACO,CAAC,CAAA;AAEtB,CAAC;;;;"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -4,30 +4,7 @@ import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.m
|
|
|
4
4
|
import AvatarLayout from '../avatarLayout/AvatarLayout.mjs';
|
|
5
5
|
import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
|
|
6
6
|
import { clsx } from 'clsx';
|
|
7
|
-
import '
|
|
8
|
-
import '../common/direction.mjs';
|
|
9
|
-
import '../common/propsValues/control.mjs';
|
|
10
|
-
import '../common/propsValues/breakpoint.mjs';
|
|
11
|
-
import '../common/propsValues/size.mjs';
|
|
12
|
-
import { Typography } from '../common/propsValues/typography.mjs';
|
|
13
|
-
import '../common/propsValues/width.mjs';
|
|
14
|
-
import '../common/propsValues/type.mjs';
|
|
15
|
-
import '../common/propsValues/dateMode.mjs';
|
|
16
|
-
import '../common/propsValues/monthFormat.mjs';
|
|
17
|
-
import '../common/propsValues/position.mjs';
|
|
18
|
-
import '../common/propsValues/layouts.mjs';
|
|
19
|
-
import '../common/propsValues/status.mjs';
|
|
20
|
-
import '../common/propsValues/sentiment.mjs';
|
|
21
|
-
import '../common/propsValues/profileType.mjs';
|
|
22
|
-
import '../common/propsValues/variant.mjs';
|
|
23
|
-
import '../common/propsValues/scroll.mjs';
|
|
24
|
-
import '../common/propsValues/markdownNodeType.mjs';
|
|
25
|
-
import '../common/fileType.mjs';
|
|
26
|
-
import '@transferwise/icons';
|
|
27
|
-
import 'react-intl';
|
|
28
|
-
import '../common/closeButton/CloseButton.messages.mjs';
|
|
29
|
-
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
30
|
-
import Body from '../body/Body.mjs';
|
|
7
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
31
8
|
|
|
32
9
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
|
33
10
|
const Button = /*#__PURE__*/forwardRef(({
|
|
@@ -52,20 +29,20 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
52
29
|
md: 'medium',
|
|
53
30
|
lg: 'large'
|
|
54
31
|
}[size];
|
|
32
|
+
const resolvedPriority = priority || 'primary';
|
|
55
33
|
const classNames = clsx('wds-Button', {
|
|
34
|
+
[`wds-Button`]: as === 'a',
|
|
56
35
|
[`wds-Button--block`]: block,
|
|
57
36
|
[`wds-Button--disabled`]: disabled,
|
|
58
37
|
[`wds-Button--loading`]: loading,
|
|
59
38
|
[`wds-Button--${sizeClass}`]: size,
|
|
60
|
-
[`wds-Button--${
|
|
39
|
+
[`wds-Button--${resolvedPriority}`]: resolvedPriority,
|
|
61
40
|
[`wds-Button--${sentiment}`]: sentiment
|
|
62
41
|
}, className);
|
|
63
42
|
const contentClassNames = clsx('wds-Button-content', {
|
|
64
43
|
[`wds-Button-content--loading`]: loading
|
|
65
44
|
});
|
|
66
|
-
const content = /*#__PURE__*/jsxs(
|
|
67
|
-
as: "span",
|
|
68
|
-
type: size === 'sm' ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_LARGE_BOLD,
|
|
45
|
+
const content = /*#__PURE__*/jsxs("span", {
|
|
69
46
|
className: contentClassNames,
|
|
70
47
|
children: [loading && /*#__PURE__*/jsx(ProcessIndicator, {
|
|
71
48
|
size: "xs",
|
|
@@ -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';\
|
|
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 = '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 sizeClass = { sm: 'small', md: 'medium', lg: 'large' }[size];\n const resolvedPriority = priority || 'primary';\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--${resolvedPriority}`]: resolvedPriority,\n [`wds-Button--${sentiment}`]: sentiment,\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","sentiment","iconStart","IconStart","iconEnd","IconEnd","avatars","type","loading","block","props","ref","sizeClass","sm","md","lg","resolvedPriority","classNames","clsx","contentClassNames","content","_jsxs","_jsx","ProcessIndicator","_Fragment","AvatarLayout","orientation","PrimitiveAnchor","PrimitiveButton"],"mappings":"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"}
|
package/build/main.css
CHANGED
|
@@ -723,6 +723,10 @@ div.critical-comms .critical-comms-body {
|
|
|
723
723
|
--Button-color: var(--color-interactive-control);
|
|
724
724
|
--Button-padding: var(--size-8) var(--size-12);
|
|
725
725
|
--Button-border-radius: var(--radius-full);
|
|
726
|
+
--Button-font-size: var(--font-size-16);
|
|
727
|
+
--Button-line-height: var(--size-24);
|
|
728
|
+
--Button-font-weight: var(--font-weight-semi-bold);
|
|
729
|
+
--Button-letter-spacing: -0.011em;
|
|
726
730
|
--Button-size-small-padding: 5px var(--size-12);
|
|
727
731
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
728
732
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
@@ -779,6 +783,14 @@ div.critical-comms .critical-comms-body {
|
|
|
779
783
|
align-items: center;
|
|
780
784
|
justify-content: center;
|
|
781
785
|
vertical-align: middle;
|
|
786
|
+
font-weight: 600;
|
|
787
|
+
font-weight: var(--Button-font-weight);
|
|
788
|
+
font-size: 1rem;
|
|
789
|
+
font-size: var(--Button-font-size);
|
|
790
|
+
letter-spacing: -0.011em;
|
|
791
|
+
letter-spacing: var(--Button-letter-spacing);
|
|
792
|
+
line-height: 24px;
|
|
793
|
+
line-height: var(--Button-line-height);
|
|
782
794
|
text-align: center;
|
|
783
795
|
-webkit-text-decoration: none;
|
|
784
796
|
text-decoration: none;
|
|
@@ -874,6 +886,9 @@ div.critical-comms .critical-comms-body {
|
|
|
874
886
|
}
|
|
875
887
|
.wds-Button--small {
|
|
876
888
|
--Button-padding: var(--Button-size-small-padding);
|
|
889
|
+
--Button-line-height: 22px;
|
|
890
|
+
--Button-font-size: var(--font-size-14);
|
|
891
|
+
--Button-letter-spacing: -0.006em;
|
|
877
892
|
}
|
|
878
893
|
.wds-Button--small .wds-Button-icon--start {
|
|
879
894
|
margin-right: 4px;
|
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
--Button-color: var(--color-interactive-control);
|
|
6
6
|
--Button-padding: var(--size-8) var(--size-12);
|
|
7
7
|
--Button-border-radius: var(--radius-full);
|
|
8
|
+
--Button-font-size: var(--font-size-16);
|
|
9
|
+
--Button-line-height: var(--size-24);
|
|
10
|
+
--Button-font-weight: var(--font-weight-semi-bold);
|
|
11
|
+
--Button-letter-spacing: -0.011em;
|
|
8
12
|
--Button-size-small-padding: 5px var(--size-12);
|
|
9
13
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
10
14
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
@@ -61,6 +65,14 @@
|
|
|
61
65
|
align-items: center;
|
|
62
66
|
justify-content: center;
|
|
63
67
|
vertical-align: middle;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
font-weight: var(--Button-font-weight);
|
|
70
|
+
font-size: 1rem;
|
|
71
|
+
font-size: var(--Button-font-size);
|
|
72
|
+
letter-spacing: -0.011em;
|
|
73
|
+
letter-spacing: var(--Button-letter-spacing);
|
|
74
|
+
line-height: 24px;
|
|
75
|
+
line-height: var(--Button-line-height);
|
|
64
76
|
text-align: center;
|
|
65
77
|
-webkit-text-decoration: none;
|
|
66
78
|
text-decoration: none;
|
|
@@ -156,6 +168,9 @@
|
|
|
156
168
|
}
|
|
157
169
|
.wds-Button--small {
|
|
158
170
|
--Button-padding: var(--Button-size-small-padding);
|
|
171
|
+
--Button-line-height: 22px;
|
|
172
|
+
--Button-font-size: var(--font-size-14);
|
|
173
|
+
--Button-letter-spacing: -0.006em;
|
|
159
174
|
}
|
|
160
175
|
.wds-Button--small .wds-Button-icon--start {
|
|
161
176
|
margin-right: 4px;
|
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
--Button-color: var(--color-interactive-control);
|
|
6
6
|
--Button-padding: var(--size-8) var(--size-12);
|
|
7
7
|
--Button-border-radius: var(--radius-full);
|
|
8
|
+
--Button-font-size: var(--font-size-16);
|
|
9
|
+
--Button-line-height: var(--size-24);
|
|
10
|
+
--Button-font-weight: var(--font-weight-semi-bold);
|
|
11
|
+
--Button-letter-spacing: -0.011em;
|
|
8
12
|
--Button-size-small-padding: 5px var(--size-12);
|
|
9
13
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
10
14
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
package/build/styles/main.css
CHANGED
|
@@ -723,6 +723,10 @@ div.critical-comms .critical-comms-body {
|
|
|
723
723
|
--Button-color: var(--color-interactive-control);
|
|
724
724
|
--Button-padding: var(--size-8) var(--size-12);
|
|
725
725
|
--Button-border-radius: var(--radius-full);
|
|
726
|
+
--Button-font-size: var(--font-size-16);
|
|
727
|
+
--Button-line-height: var(--size-24);
|
|
728
|
+
--Button-font-weight: var(--font-weight-semi-bold);
|
|
729
|
+
--Button-letter-spacing: -0.011em;
|
|
726
730
|
--Button-size-small-padding: 5px var(--size-12);
|
|
727
731
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
728
732
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
@@ -779,6 +783,14 @@ div.critical-comms .critical-comms-body {
|
|
|
779
783
|
align-items: center;
|
|
780
784
|
justify-content: center;
|
|
781
785
|
vertical-align: middle;
|
|
786
|
+
font-weight: 600;
|
|
787
|
+
font-weight: var(--Button-font-weight);
|
|
788
|
+
font-size: 1rem;
|
|
789
|
+
font-size: var(--Button-font-size);
|
|
790
|
+
letter-spacing: -0.011em;
|
|
791
|
+
letter-spacing: var(--Button-letter-spacing);
|
|
792
|
+
line-height: 24px;
|
|
793
|
+
line-height: var(--Button-line-height);
|
|
782
794
|
text-align: center;
|
|
783
795
|
-webkit-text-decoration: none;
|
|
784
796
|
text-decoration: none;
|
|
@@ -874,6 +886,9 @@ div.critical-comms .critical-comms-body {
|
|
|
874
886
|
}
|
|
875
887
|
.wds-Button--small {
|
|
876
888
|
--Button-padding: var(--Button-size-small-padding);
|
|
889
|
+
--Button-line-height: 22px;
|
|
890
|
+
--Button-font-size: var(--font-size-14);
|
|
891
|
+
--Button-letter-spacing: -0.006em;
|
|
877
892
|
}
|
|
878
893
|
.wds-Button--small .wds-Button-icon--start {
|
|
879
894
|
margin-right: 4px;
|
|
@@ -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":"AAQA,QAAA,MAAM,MAAM,yOAmGX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -15,14 +15,23 @@ export interface CommonButtonProps {
|
|
|
15
15
|
* @default false
|
|
16
16
|
* */
|
|
17
17
|
v2?: boolean;
|
|
18
|
-
/**
|
|
18
|
+
/**
|
|
19
|
+
* The HTML element to render
|
|
20
|
+
* @default 'button'
|
|
21
|
+
**/
|
|
19
22
|
as?: 'button' | 'a' | null;
|
|
20
23
|
/** Additional class name(s) to apply to the button */
|
|
21
24
|
className?: string;
|
|
22
|
-
/**
|
|
25
|
+
/**
|
|
26
|
+
* Whether the button is disabled
|
|
27
|
+
* @default false
|
|
28
|
+
**/
|
|
23
29
|
disabled?: boolean;
|
|
24
30
|
href?: string;
|
|
25
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Whether the button is in a loading state
|
|
33
|
+
* @default false
|
|
34
|
+
* */
|
|
26
35
|
loading?: boolean;
|
|
27
36
|
/** Whether the button should take up the full width of its container */
|
|
28
37
|
block?: boolean;
|
|
@@ -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
|
|
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;;;QAGI;IACJ,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;SAGK;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"}
|
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-1d18c88",
|
|
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-1d18c88",
|
|
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-1d18c88",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
package/src/button/Button.css
CHANGED
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
--Button-color: var(--color-interactive-control);
|
|
6
6
|
--Button-padding: var(--size-8) var(--size-12);
|
|
7
7
|
--Button-border-radius: var(--radius-full);
|
|
8
|
+
--Button-font-size: var(--font-size-16);
|
|
9
|
+
--Button-line-height: var(--size-24);
|
|
10
|
+
--Button-font-weight: var(--font-weight-semi-bold);
|
|
11
|
+
--Button-letter-spacing: -0.011em;
|
|
8
12
|
--Button-size-small-padding: 5px var(--size-12);
|
|
9
13
|
--Button-size-medium-padding: var(--size-8) var(--size-12);
|
|
10
14
|
--Button-size-large-padding: var(--size-12) var(--size-16);
|
|
@@ -61,6 +65,14 @@
|
|
|
61
65
|
align-items: center;
|
|
62
66
|
justify-content: center;
|
|
63
67
|
vertical-align: middle;
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
font-weight: var(--Button-font-weight);
|
|
70
|
+
font-size: 1rem;
|
|
71
|
+
font-size: var(--Button-font-size);
|
|
72
|
+
letter-spacing: -0.011em;
|
|
73
|
+
letter-spacing: var(--Button-letter-spacing);
|
|
74
|
+
line-height: 24px;
|
|
75
|
+
line-height: var(--Button-line-height);
|
|
64
76
|
text-align: center;
|
|
65
77
|
-webkit-text-decoration: none;
|
|
66
78
|
text-decoration: none;
|
|
@@ -156,6 +168,9 @@
|
|
|
156
168
|
}
|
|
157
169
|
.wds-Button--small {
|
|
158
170
|
--Button-padding: var(--Button-size-small-padding);
|
|
171
|
+
--Button-line-height: 22px;
|
|
172
|
+
--Button-font-size: var(--font-size-14);
|
|
173
|
+
--Button-letter-spacing: -0.006em;
|
|
159
174
|
}
|
|
160
175
|
.wds-Button--small .wds-Button-icon--start {
|
|
161
176
|
margin-right: 4px;
|
package/src/button/Button.less
CHANGED
|
@@ -8,6 +8,10 @@
|
|
|
8
8
|
align-items: center;
|
|
9
9
|
justify-content: center;
|
|
10
10
|
vertical-align: middle;
|
|
11
|
+
font-weight: var(--Button-font-weight);
|
|
12
|
+
font-size: var(--Button-font-size);
|
|
13
|
+
letter-spacing: var(--Button-letter-spacing);
|
|
14
|
+
line-height: var(--Button-line-height);
|
|
11
15
|
text-align: center;
|
|
12
16
|
text-decoration: none;
|
|
13
17
|
white-space: nowrap;
|
|
@@ -105,6 +109,9 @@
|
|
|
105
109
|
// Size modifiers
|
|
106
110
|
&--small {
|
|
107
111
|
--Button-padding: var(--Button-size-small-padding);
|
|
112
|
+
--Button-line-height: 22px;
|
|
113
|
+
--Button-font-size: var(--font-size-14);
|
|
114
|
+
--Button-letter-spacing: -0.006em;
|
|
108
115
|
|
|
109
116
|
.wds-Button-icon--start {
|
|
110
117
|
margin-right: var(--size-4);
|