@transferwise/components 0.0.0-experimental-86cc9b8 → 0.0.0-experimental-3f34a94
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 +10 -12
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +10 -12
- package/build/button/Button.mjs.map +1 -1
- package/build/types/button/Button.d.ts.map +1 -1
- package/build/types/button/Button.types.d.ts +1 -1
- package/build/types/button/Button.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button.spec.tsx +47 -205
- package/src/button/Button.story.tsx +3 -3
- package/src/button/Button.tsx +9 -19
- package/src/button/Button.types.ts +1 -1
package/build/button/Button.js
CHANGED
|
@@ -75,18 +75,16 @@ 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: [
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
children: addonStart.value
|
|
89
|
-
})]
|
|
78
|
+
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
79
|
+
className: "wds-Button-avatars",
|
|
80
|
+
children: /*#__PURE__*/jsxRuntime.jsx(AvatarLayout, {
|
|
81
|
+
orientation: "horizontal",
|
|
82
|
+
avatars: addonStart?.value,
|
|
83
|
+
size: 24
|
|
84
|
+
})
|
|
85
|
+
}), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
86
|
+
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`,
|
|
87
|
+
children: addonStart.value
|
|
90
88
|
}), children, addonEnd?.type === 'icon' && addonEnd?.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
91
89
|
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`,
|
|
92
90
|
children: addonEnd.value
|
|
@@ -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 = '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 {
|
|
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' && addonStart?.type === 'avatar' && 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
|
@@ -73,18 +73,16 @@ 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: [
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
children: addonStart.value
|
|
87
|
-
})]
|
|
76
|
+
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
77
|
+
className: "wds-Button-avatars",
|
|
78
|
+
children: /*#__PURE__*/jsx(AvatarLayout, {
|
|
79
|
+
orientation: "horizontal",
|
|
80
|
+
avatars: addonStart?.value,
|
|
81
|
+
size: 24
|
|
82
|
+
})
|
|
83
|
+
}), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
84
|
+
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`,
|
|
85
|
+
children: addonStart.value
|
|
88
86
|
}), children, addonEnd?.type === 'icon' && addonEnd?.value && /*#__PURE__*/jsx("span", {
|
|
89
87
|
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`,
|
|
90
88
|
children: addonEnd.value
|
|
@@ -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 = '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 {
|
|
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' && addonStart?.type === 'avatar' && 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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"}
|
|
@@ -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,gHAiHX,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -56,7 +56,7 @@ 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. Not supported by the `lg` size. */
|
|
60
60
|
addonStart?: ButtonAddonStart;
|
|
61
61
|
/** Accessory to be displayed after the label. Not supported by the `lg` size. */
|
|
62
62
|
addonEnd?: ButtonAddonEnd;
|
|
@@ -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,kFAAkF;IAClF,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-3f34a94",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -91,13 +91,13 @@
|
|
|
91
91
|
"rollup": "^4.18.1",
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
|
-
"@transferwise/neptune-css": "0.0.0-experimental-86cc9b8",
|
|
95
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
+
"@transferwise/neptune-css": "0.0.0-experimental-3f34a94",
|
|
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-3f34a94",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -244,274 +244,116 @@ describe('Button', () => {
|
|
|
244
244
|
};
|
|
245
245
|
const iconProp: CommonProps['addonStart'] = { type: 'icon', value: <Freeze /> };
|
|
246
246
|
|
|
247
|
+
const renderAllPriorities = (props: CommonProps) =>
|
|
248
|
+
render(
|
|
249
|
+
<>
|
|
250
|
+
<Button {...props} priority="primary">
|
|
251
|
+
primary
|
|
252
|
+
</Button>
|
|
253
|
+
<Button {...props} priority="secondary">
|
|
254
|
+
secondary
|
|
255
|
+
</Button>
|
|
256
|
+
<Button {...props} priority="secondary-neutral">
|
|
257
|
+
secondary-neutral
|
|
258
|
+
</Button>
|
|
259
|
+
<Button {...props} priority="tertiary">
|
|
260
|
+
tertiary
|
|
261
|
+
</Button>
|
|
262
|
+
</>,
|
|
263
|
+
);
|
|
264
|
+
|
|
247
265
|
describe('addonsStart', () => {
|
|
248
266
|
describe('large', () => {
|
|
249
267
|
it('should not support avatars', () => {
|
|
250
|
-
|
|
268
|
+
renderAllPriorities({
|
|
251
269
|
v2: true,
|
|
252
270
|
size: 'lg',
|
|
253
271
|
addonStart: avatarProp,
|
|
254
|
-
};
|
|
255
|
-
render(
|
|
256
|
-
<>
|
|
257
|
-
<Button {...props} priority="primary">
|
|
258
|
-
primary
|
|
259
|
-
</Button>
|
|
260
|
-
<Button {...props} priority="secondary">
|
|
261
|
-
secondary
|
|
262
|
-
</Button>
|
|
263
|
-
<Button {...props} priority="secondary-neutral">
|
|
264
|
-
secondary-neutral
|
|
265
|
-
</Button>
|
|
266
|
-
<Button {...props} priority="tertiary">
|
|
267
|
-
tertiary
|
|
268
|
-
</Button>
|
|
269
|
-
</>,
|
|
270
|
-
);
|
|
272
|
+
});
|
|
271
273
|
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
272
274
|
});
|
|
273
275
|
|
|
274
276
|
it('should not support icons', () => {
|
|
275
|
-
|
|
277
|
+
renderAllPriorities({
|
|
276
278
|
v2: true,
|
|
277
279
|
size: 'lg',
|
|
278
280
|
addonStart: iconProp,
|
|
279
|
-
};
|
|
280
|
-
render(
|
|
281
|
-
<>
|
|
282
|
-
<Button {...props} priority="primary">
|
|
283
|
-
primary
|
|
284
|
-
</Button>
|
|
285
|
-
<Button {...props} priority="secondary">
|
|
286
|
-
secondary
|
|
287
|
-
</Button>
|
|
288
|
-
<Button {...props} priority="secondary-neutral">
|
|
289
|
-
secondary-neutral
|
|
290
|
-
</Button>
|
|
291
|
-
<Button {...props} priority="tertiary">
|
|
292
|
-
tertiary
|
|
293
|
-
</Button>
|
|
294
|
-
</>,
|
|
295
|
-
);
|
|
281
|
+
});
|
|
296
282
|
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
297
283
|
});
|
|
298
284
|
});
|
|
299
285
|
|
|
300
286
|
describe('medium', () => {
|
|
301
|
-
|
|
302
|
-
|
|
287
|
+
it('should support avatar', () => {
|
|
288
|
+
renderAllPriorities({
|
|
303
289
|
v2: true,
|
|
304
290
|
size: 'md',
|
|
305
291
|
addonStart: avatarProp,
|
|
306
|
-
};
|
|
307
|
-
|
|
308
|
-
it('primary and both secondary priorities should support avatar', () => {
|
|
309
|
-
render(
|
|
310
|
-
<>
|
|
311
|
-
<Button {...props} priority="primary">
|
|
312
|
-
primary
|
|
313
|
-
</Button>
|
|
314
|
-
<Button {...props} priority="secondary">
|
|
315
|
-
secondary
|
|
316
|
-
</Button>
|
|
317
|
-
<Button {...props} priority="secondary-neutral">
|
|
318
|
-
secondary-neutral
|
|
319
|
-
</Button>
|
|
320
|
-
</>,
|
|
321
|
-
);
|
|
322
|
-
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(3);
|
|
323
|
-
});
|
|
324
|
-
|
|
325
|
-
it('tertiary priority should not support avatar', () => {
|
|
326
|
-
render(
|
|
327
|
-
<Button {...props} priority="tertiary">
|
|
328
|
-
tertiary
|
|
329
|
-
</Button>,
|
|
330
|
-
);
|
|
331
|
-
expect(screen.queryByTestId('freeze-icon')).not.toBeInTheDocument();
|
|
332
292
|
});
|
|
293
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
333
294
|
});
|
|
334
295
|
|
|
335
|
-
|
|
336
|
-
|
|
296
|
+
it('should support icon', () => {
|
|
297
|
+
renderAllPriorities({
|
|
337
298
|
v2: true,
|
|
338
299
|
size: 'md',
|
|
339
300
|
addonStart: iconProp,
|
|
340
|
-
};
|
|
341
|
-
|
|
342
|
-
it('primary and both secondary priorities should support icon', () => {
|
|
343
|
-
render(
|
|
344
|
-
<>
|
|
345
|
-
<Button {...props} priority="primary">
|
|
346
|
-
primary
|
|
347
|
-
</Button>
|
|
348
|
-
<Button {...props} priority="secondary">
|
|
349
|
-
secondary
|
|
350
|
-
</Button>
|
|
351
|
-
<Button {...props} priority="secondary-neutral">
|
|
352
|
-
secondary-neutral
|
|
353
|
-
</Button>
|
|
354
|
-
</>,
|
|
355
|
-
);
|
|
356
|
-
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(3);
|
|
357
|
-
});
|
|
358
|
-
|
|
359
|
-
it('tertiary priority should not support icon', () => {
|
|
360
|
-
render(
|
|
361
|
-
<Button {...props} priority="tertiary">
|
|
362
|
-
tertiary
|
|
363
|
-
</Button>,
|
|
364
|
-
);
|
|
365
|
-
expect(screen.queryByTestId('freeze-icon')).not.toBeInTheDocument();
|
|
366
301
|
});
|
|
302
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
367
303
|
});
|
|
368
304
|
});
|
|
369
305
|
|
|
370
306
|
describe('small', () => {
|
|
371
|
-
|
|
372
|
-
|
|
307
|
+
it('should not support avatar', () => {
|
|
308
|
+
renderAllPriorities({
|
|
373
309
|
v2: true,
|
|
374
310
|
size: 'sm',
|
|
375
311
|
addonStart: avatarProp,
|
|
376
|
-
};
|
|
377
|
-
|
|
378
|
-
it('should not support avatar', () => {
|
|
379
|
-
render(
|
|
380
|
-
<>
|
|
381
|
-
<Button {...props} priority="primary">
|
|
382
|
-
primary
|
|
383
|
-
</Button>
|
|
384
|
-
<Button {...props} priority="secondary">
|
|
385
|
-
secondary
|
|
386
|
-
</Button>
|
|
387
|
-
<Button {...props} priority="secondary-neutral">
|
|
388
|
-
secondary-neutral
|
|
389
|
-
</Button>
|
|
390
|
-
<Button {...props} priority="tertiary">
|
|
391
|
-
tertiary
|
|
392
|
-
</Button>
|
|
393
|
-
</>,
|
|
394
|
-
);
|
|
395
|
-
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
396
312
|
});
|
|
313
|
+
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
397
314
|
});
|
|
398
315
|
|
|
399
|
-
|
|
400
|
-
|
|
316
|
+
it('should support icon', () => {
|
|
317
|
+
renderAllPriorities({
|
|
401
318
|
v2: true,
|
|
402
319
|
size: 'sm',
|
|
403
320
|
addonStart: iconProp,
|
|
404
|
-
};
|
|
405
|
-
|
|
406
|
-
it('primary and both secondary priorities should support icon', () => {
|
|
407
|
-
render(
|
|
408
|
-
<>
|
|
409
|
-
<Button {...props} priority="primary">
|
|
410
|
-
primary
|
|
411
|
-
</Button>
|
|
412
|
-
<Button {...props} priority="secondary">
|
|
413
|
-
secondary
|
|
414
|
-
</Button>
|
|
415
|
-
<Button {...props} priority="secondary-neutral">
|
|
416
|
-
secondary-neutral
|
|
417
|
-
</Button>
|
|
418
|
-
</>,
|
|
419
|
-
);
|
|
420
|
-
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(3);
|
|
421
|
-
});
|
|
422
|
-
|
|
423
|
-
it('tertiary priority should not support icon', () => {
|
|
424
|
-
render(
|
|
425
|
-
<Button {...props} priority="tertiary">
|
|
426
|
-
tertiary
|
|
427
|
-
</Button>,
|
|
428
|
-
);
|
|
429
|
-
expect(screen.queryByTestId('freeze-icon')).not.toBeInTheDocument();
|
|
430
321
|
});
|
|
322
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
431
323
|
});
|
|
432
324
|
});
|
|
433
325
|
});
|
|
434
326
|
|
|
435
327
|
describe('addonEnd', () => {
|
|
436
328
|
describe('large', () => {
|
|
437
|
-
it('should
|
|
438
|
-
|
|
329
|
+
it('should support icon', () => {
|
|
330
|
+
renderAllPriorities({
|
|
439
331
|
v2: true,
|
|
440
332
|
size: 'lg',
|
|
441
333
|
addonEnd: iconProp,
|
|
442
|
-
};
|
|
443
|
-
render(
|
|
444
|
-
<>
|
|
445
|
-
<Button {...props} priority="primary">
|
|
446
|
-
primary
|
|
447
|
-
</Button>
|
|
448
|
-
<Button {...props} priority="secondary">
|
|
449
|
-
secondary
|
|
450
|
-
</Button>
|
|
451
|
-
<Button {...props} priority="secondary-neutral">
|
|
452
|
-
secondary-neutral
|
|
453
|
-
</Button>
|
|
454
|
-
<Button {...props} priority="tertiary">
|
|
455
|
-
tertiary
|
|
456
|
-
</Button>
|
|
457
|
-
</>,
|
|
458
|
-
);
|
|
334
|
+
});
|
|
459
335
|
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
460
336
|
});
|
|
461
337
|
});
|
|
462
338
|
|
|
463
339
|
describe('medium', () => {
|
|
464
|
-
const props: CommonProps = {
|
|
465
|
-
v2: true,
|
|
466
|
-
size: 'sm',
|
|
467
|
-
addonEnd: iconProp,
|
|
468
|
-
};
|
|
469
|
-
|
|
470
340
|
it('should support icon', () => {
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
<Button {...props} priority="secondary">
|
|
477
|
-
secondary
|
|
478
|
-
</Button>
|
|
479
|
-
<Button {...props} priority="secondary-neutral">
|
|
480
|
-
secondary-neutral
|
|
481
|
-
</Button>
|
|
482
|
-
<Button {...props} priority="tertiary">
|
|
483
|
-
tertiary
|
|
484
|
-
</Button>
|
|
485
|
-
</>,
|
|
486
|
-
);
|
|
341
|
+
renderAllPriorities({
|
|
342
|
+
v2: true,
|
|
343
|
+
size: 'sm',
|
|
344
|
+
addonEnd: iconProp,
|
|
345
|
+
});
|
|
487
346
|
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
488
347
|
});
|
|
489
348
|
});
|
|
490
349
|
|
|
491
350
|
describe('small', () => {
|
|
492
|
-
const props: CommonProps = {
|
|
493
|
-
v2: true,
|
|
494
|
-
size: 'md',
|
|
495
|
-
addonEnd: iconProp,
|
|
496
|
-
};
|
|
497
|
-
|
|
498
351
|
it('should support icon', () => {
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
<Button {...props} priority="secondary">
|
|
505
|
-
secondary
|
|
506
|
-
</Button>
|
|
507
|
-
<Button {...props} priority="secondary-neutral">
|
|
508
|
-
secondary-neutral
|
|
509
|
-
</Button>
|
|
510
|
-
<Button {...props} priority="tertiary">
|
|
511
|
-
tertiary
|
|
512
|
-
</Button>
|
|
513
|
-
</>,
|
|
514
|
-
);
|
|
352
|
+
renderAllPriorities({
|
|
353
|
+
v2: true,
|
|
354
|
+
size: 'md',
|
|
355
|
+
addonEnd: iconProp,
|
|
356
|
+
});
|
|
515
357
|
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
516
358
|
});
|
|
517
359
|
});
|
|
@@ -108,7 +108,7 @@ const previewArgTypes = {
|
|
|
108
108
|
},
|
|
109
109
|
},
|
|
110
110
|
description:
|
|
111
|
-
|
|
111
|
+
'**NB:** The `lg` button does not support any addons. `md` button accepts either icons or avatars, while `sm` is restricted to icons only.',
|
|
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 `md` and `sm`
|
|
120
|
+
'**NB:** The `lg` button does not support any addons. `md` and `sm` allow for the use of icons only.',
|
|
121
121
|
table: {
|
|
122
122
|
category: 'Preview options',
|
|
123
123
|
type: {
|
|
@@ -521,7 +521,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
|
|
|
521
521
|
};
|
|
522
522
|
|
|
523
523
|
/**
|
|
524
|
-
*
|
|
524
|
+
* Icons are only supported for `sm` and `md` size Buttons. <br />
|
|
525
525
|
* [Design documentation](https://wise.design/components/button#accessories)
|
|
526
526
|
*/
|
|
527
527
|
export const WithIcons: StoryObj<PreviewStoryArgs> = {
|
package/src/button/Button.tsx
CHANGED
|
@@ -66,26 +66,16 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
66
66
|
children
|
|
67
67
|
) : (
|
|
68
68
|
<>
|
|
69
|
-
{
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
orientation="horizontal"
|
|
75
|
-
avatars={addonStart?.value}
|
|
76
|
-
size={24}
|
|
77
|
-
/>
|
|
78
|
-
</span>
|
|
79
|
-
)}
|
|
69
|
+
{size === 'md' && addonStart?.type === 'avatar' && addonStart.value && (
|
|
70
|
+
<span className="wds-Button-avatars">
|
|
71
|
+
<AvatarLayout orientation="horizontal" avatars={addonStart?.value} size={24} />
|
|
72
|
+
</span>
|
|
73
|
+
)}
|
|
80
74
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
{addonStart.value}
|
|
86
|
-
</span>
|
|
87
|
-
)}
|
|
88
|
-
</>
|
|
75
|
+
{addonStart?.type === 'icon' && addonStart.value && (
|
|
76
|
+
<span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>
|
|
77
|
+
{addonStart.value}
|
|
78
|
+
</span>
|
|
89
79
|
)}
|
|
90
80
|
|
|
91
81
|
{children}
|
|
@@ -68,7 +68,7 @@ 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. Not supported by the `lg` size. */
|
|
72
72
|
addonStart?: ButtonAddonStart;
|
|
73
73
|
|
|
74
74
|
/** Accessory to be displayed after the label. Not supported by the `lg` size. */
|