@transferwise/components 0.0.0-experimental-05765a5 → 0.0.0-experimental-00c1b76
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 +2 -2
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +2 -2
- package/build/button/Button.mjs.map +1 -1
- package/build/main.css +1 -0
- package/build/styles/button/Button.css +1 -0
- package/build/styles/main.css +1 -0
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +2 -2
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button.css +1 -0
- package/src/button/Button.less +1 -0
- package/src/button/Button.story.tsx +4 -4
- package/src/button/Button.tsx +9 -6
- package/src/button/Button.types.ts +2 -2
- package/src/main.css +1 -0
package/build/button/Button.js
CHANGED
|
@@ -45,7 +45,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
45
45
|
addonStart,
|
|
46
46
|
addonEnd,
|
|
47
47
|
// @ts-expect-error NewButtonProps has `type` prop
|
|
48
|
-
type,
|
|
48
|
+
type = 'button',
|
|
49
49
|
loading = false,
|
|
50
50
|
block = false,
|
|
51
51
|
v2,
|
|
@@ -75,7 +75,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
75
75
|
className: "wds-Button-label",
|
|
76
76
|
"aria-hidden": loading,
|
|
77
77
|
children: size === 'lg' ? children : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
78
|
-
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
78
|
+
children: [size === 'md' && priority !== 'tertiary' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
79
79
|
className: "wds-Button-avatars",
|
|
80
80
|
children: /*#__PURE__*/jsxRuntime.jsx(AvatarLayout, {
|
|
81
81
|
orientation: "horizontal",
|
|
@@ -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 { ButtonReferenceType, 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<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 addonStart,\n addonEnd,\n // @ts-expect-error NewButtonProps has `type` prop\n type,\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'
|
|
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 { ButtonReferenceType, 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<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 addonStart,\n addonEnd,\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' &&\n priority !== 'tertiary' &&\n addonStart?.type === 'avatar' &&\n addonStart.value && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n </span>\n )}\n\n {addonStart?.type === 'icon' && addonStart.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n {addonStart.value}\n </span>\n )}\n\n {children}\n\n {addonEnd?.type === 'icon' && addonEnd?.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n {addonEnd.value}\n </span>\n )}\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","addonStart","addonEnd","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","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","undefined","PrimitiveButton","target"],"mappings":"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"}
|
package/build/button/Button.mjs
CHANGED
|
@@ -43,7 +43,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
43
43
|
addonStart,
|
|
44
44
|
addonEnd,
|
|
45
45
|
// @ts-expect-error NewButtonProps has `type` prop
|
|
46
|
-
type,
|
|
46
|
+
type = 'button',
|
|
47
47
|
loading = false,
|
|
48
48
|
block = false,
|
|
49
49
|
v2,
|
|
@@ -73,7 +73,7 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
73
73
|
className: "wds-Button-label",
|
|
74
74
|
"aria-hidden": loading,
|
|
75
75
|
children: size === 'lg' ? children : /*#__PURE__*/jsxs(Fragment, {
|
|
76
|
-
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
76
|
+
children: [size === 'md' && priority !== 'tertiary' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
77
77
|
className: "wds-Button-avatars",
|
|
78
78
|
children: /*#__PURE__*/jsx(AvatarLayout, {
|
|
79
79
|
orientation: "horizontal",
|
|
@@ -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 { ButtonReferenceType, 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<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 addonStart,\n addonEnd,\n // @ts-expect-error NewButtonProps has `type` prop\n type,\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'
|
|
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 { ButtonReferenceType, 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<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 addonStart,\n addonEnd,\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' &&\n priority !== 'tertiary' &&\n addonStart?.type === 'avatar' &&\n addonStart.value && (\n <span className=\"wds-Button-avatars\">\n <AvatarLayout orientation=\"horizontal\" avatars={addonStart?.value} size={24} />\n </span>\n )}\n\n {addonStart?.type === 'icon' && addonStart.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>\n {addonStart.value}\n </span>\n )}\n\n {children}\n\n {addonEnd?.type === 'icon' && addonEnd?.value && (\n <span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>\n {addonEnd.value}\n </span>\n )}\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","addonStart","addonEnd","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","value","AvatarLayout","orientation","avatars","PrimitiveAnchor","undefined","PrimitiveButton","target"],"mappings":"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"}
|
package/build/main.css
CHANGED
package/build/styles/main.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQpF,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAQpF,QAAA,MAAM,MAAM,gHAoHX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -56,9 +56,9 @@ export interface CommonProps {
|
|
|
56
56
|
* @default default
|
|
57
57
|
*/
|
|
58
58
|
sentiment?: ButtonSentiment;
|
|
59
|
-
/** Accessory to be displayed before the label */
|
|
59
|
+
/** Accessory to be displayed before the label. Only supported by `md` size. */
|
|
60
60
|
addonStart?: ButtonAddonStart;
|
|
61
|
-
/** Accessory to be displayed after the label */
|
|
61
|
+
/** Accessory to be displayed after the label. Not supported by the `lg` size. */
|
|
62
62
|
addonEnd?: ButtonAddonEnd;
|
|
63
63
|
className?: string;
|
|
64
64
|
children?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,mBAAmB,GAAG,UAAU,CAAC;AACxF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AACxE,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,KAAK,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAC5D,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,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
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,mBAAmB,GAAG,UAAU,CAAC;AACxF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AACxE,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,KAAK,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAC5D,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,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,+EAA+E;IAC/E,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,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-00c1b76",
|
|
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-00c1b76",
|
|
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-00c1b76",
|
|
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
|
@@ -108,7 +108,7 @@ const previewArgTypes = {
|
|
|
108
108
|
},
|
|
109
109
|
},
|
|
110
110
|
description:
|
|
111
|
-
|
|
111
|
+
"**NB:** Only available for the `md` button, which accepts either icons or avatars. The `lg` or `sm` buttons don't support any addons.",
|
|
112
112
|
},
|
|
113
113
|
previewAddonEnd: {
|
|
114
114
|
control: 'boolean',
|
|
@@ -117,7 +117,7 @@ const previewArgTypes = {
|
|
|
117
117
|
true: { type: 'icon', value: <ArrowRight /> },
|
|
118
118
|
},
|
|
119
119
|
description:
|
|
120
|
-
'**NB:** The `
|
|
120
|
+
'**NB:** The `md` and `sm` buttons allow for the use of icons only. The `lg` button does not support any addons.',
|
|
121
121
|
table: {
|
|
122
122
|
category: 'Preview options',
|
|
123
123
|
type: {
|
|
@@ -504,7 +504,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
|
|
|
504
504
|
};
|
|
505
505
|
|
|
506
506
|
/**
|
|
507
|
-
*
|
|
507
|
+
* Starting icons are only supported by the `md` size Buttons, while the ending ones by both `md` and `sm`. The `lg` buttons have no addon support. <br />
|
|
508
508
|
* [Design documentation](https://wise.design/components/button#accessories)
|
|
509
509
|
*/
|
|
510
510
|
export const WithIcons: StoryObj<PreviewStoryArgs> = {
|
|
@@ -563,7 +563,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
|
|
|
563
563
|
};
|
|
564
564
|
|
|
565
565
|
/**
|
|
566
|
-
* Avatars are only supported
|
|
566
|
+
* Avatars are only supported by the `md` size Buttons and are only allowed before the label. <br />
|
|
567
567
|
* [Design documentation](https://wise.design/components/button#accessories)
|
|
568
568
|
*/
|
|
569
569
|
export const WithAvatars: StoryObj<PreviewStoryArgs> = {
|
package/src/button/Button.tsx
CHANGED
|
@@ -23,7 +23,7 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
23
23
|
addonStart,
|
|
24
24
|
addonEnd,
|
|
25
25
|
// @ts-expect-error NewButtonProps has `type` prop
|
|
26
|
-
type,
|
|
26
|
+
type = 'button',
|
|
27
27
|
loading = false,
|
|
28
28
|
block = false,
|
|
29
29
|
v2,
|
|
@@ -66,11 +66,14 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
66
66
|
children
|
|
67
67
|
) : (
|
|
68
68
|
<>
|
|
69
|
-
{size === 'md' &&
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
69
|
+
{size === 'md' &&
|
|
70
|
+
priority !== 'tertiary' &&
|
|
71
|
+
addonStart?.type === 'avatar' &&
|
|
72
|
+
addonStart.value && (
|
|
73
|
+
<span className="wds-Button-avatars">
|
|
74
|
+
<AvatarLayout orientation="horizontal" avatars={addonStart?.value} size={24} />
|
|
75
|
+
</span>
|
|
76
|
+
)}
|
|
74
77
|
|
|
75
78
|
{addonStart?.type === 'icon' && addonStart.value && (
|
|
76
79
|
<span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>
|
|
@@ -68,10 +68,10 @@ export interface CommonProps {
|
|
|
68
68
|
*/
|
|
69
69
|
sentiment?: ButtonSentiment;
|
|
70
70
|
|
|
71
|
-
/** Accessory to be displayed before the label */
|
|
71
|
+
/** Accessory to be displayed before the label. Only supported by `md` size. */
|
|
72
72
|
addonStart?: ButtonAddonStart;
|
|
73
73
|
|
|
74
|
-
/** Accessory to be displayed after the label */
|
|
74
|
+
/** Accessory to be displayed after the label. Not supported by the `lg` size. */
|
|
75
75
|
addonEnd?: ButtonAddonEnd;
|
|
76
76
|
|
|
77
77
|
className?: string;
|
package/src/main.css
CHANGED