@transferwise/components 0.0.0-experimental-a6fe828 → 0.0.0-experimental-b87c2a5
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/src/Button.js +2 -0
- package/build/button/Button/src/Button.js.map +1 -1
- package/build/button/Button/src/Button.mjs +2 -0
- package/build/button/Button/src/Button.mjs.map +1 -1
- package/build/types/button/Button/src/Button.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button/src/Button.tsx +2 -1
- package/src/button/Button/stories/Button.story.tsx +5 -0
- package/src/button/LegacyButton/Button.story.tsx +11 -0
|
@@ -109,6 +109,8 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
109
109
|
fixedSize: true,
|
|
110
110
|
...props,
|
|
111
111
|
className: classNames,
|
|
112
|
+
disabled: disabled,
|
|
113
|
+
"aria-label": children,
|
|
112
114
|
children: IconOnly && /*#__PURE__*/jsxRuntime.jsx(IconOnly, {
|
|
113
115
|
className: "wds-Button-icon"
|
|
114
116
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../../src/button/Button/src/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type {\n ButtonProps,\n ButtonElementProps,\n AnchorElementProps,\n ButtonType,\n
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../../src/button/Button/src/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type {\n ButtonProps,\n ButtonElementProps,\n AnchorElementProps,\n ButtonType,\n ButtonIconSize,\n} from './Button.types';\nimport { PrimitiveButton, PrimitiveAnchor } from '../../../primitives';\nimport ProcessIndicator from '../../../processIndicator';\nimport AvatarLayout from '../../../avatarLayout';\nimport AvatarView from '../../../avatarView';\nimport Circle from '../../../common/circle';\nimport * as Icons from '@transferwise/icons';\n\n/**\n * The Button component is a versatile and flexible component that can render\n * either a `button` or an `anchor` element based on the `as` prop. This allows\n * the component to be used in various contexts where different HTML elements\n * are needed while maintaining a consistent API and styling.\n *\n * @see {@link Button} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/new-button--docs|Storybook Wise Design}\n */\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n as = 'button' as ButtonType,\n children,\n className,\n disabled,\n loading = false,\n block = false,\n size = 'md',\n priority = 'primary',\n appearance,\n iconLeft,\n iconRight,\n iconOnly,\n avatars,\n type,\n ...props\n },\n ref,\n ) => {\n const isButtonIconSize = (value: any): value is ButtonIconSize => {\n return [16, 24, 32, 40, 48, 56, 72].includes(value);\n };\n\n let sizeClass: string;\n\n if (iconOnly && isButtonIconSize(size)) {\n // If iconOnly is true and size is a ButtonIconSize, return the size as a string\n sizeClass = size.toString();\n } else {\n // Otherwise, handle ButtonSize\n sizeClass = size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';\n }\n\n const classNames = clsx(\n {\n [`wds-Button`]: as === 'a',\n [`wds-Button--block`]: block,\n [`wds-Button--${sizeClass}`]: size,\n [`wds-Button--${priority}`]: priority,\n [`wds-Button--${appearance}`]: appearance,\n [`wds-Button--iconOnly`]: iconOnly,\n },\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const LeftIcon = iconLeft ? Icons[iconLeft as keyof typeof Icons] : null;\n const RightIcon = iconRight ? Icons[iconRight as keyof typeof Icons] : null;\n const IconOnly = iconOnly ? Icons[iconOnly as keyof typeof Icons] : null;\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 {avatars.length === 1 ? (\n <AvatarView size={24}>{avatars[0]?.asset}</AvatarView>\n ) : (\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n )}\n </span>\n )}\n {!avatars && LeftIcon && (\n <LeftIcon className=\"wds-Button-icon wds-Button-icon--left\" />\n )}\n {children}\n {RightIcon && <RightIcon className=\"wds-Button-icon wds-Button-icon--right\" />}\n </>\n )}\n </span>\n </span>\n );\n\n if (iconOnly) {\n const CircleContent = (\n <Circle\n ref={ref}\n as={as === 'a' ? PrimitiveAnchor : PrimitiveButton}\n size={(size as ButtonIconSize) || 40}\n fixedSize\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n aria-label={children as string}\n >\n {IconOnly && <IconOnly className=\"wds-Button-icon\" />}\n </Circle>\n );\n\n return CircleContent;\n }\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as AnchorElementProps)}\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 ButtonElementProps)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type as ButtonType}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","disabled","loading","block","size","priority","appearance","iconLeft","iconRight","iconOnly","avatars","type","props","ref","isButtonIconSize","value","includes","sizeClass","toString","classNames","clsx","contentClassNames","LeftIcon","Icons","RightIcon","IconOnly","content","_jsxs","_jsx","ProcessIndicator","_Fragment","length","AvatarView","asset","AvatarLayout","orientation","CircleContent","Circle","PrimitiveAnchor","PrimitiveButton","fixedSize","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../../../src/button/Button/src/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type {\n ButtonProps,\n ButtonElementProps,\n AnchorElementProps,\n ButtonType,\n
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../../src/button/Button/src/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport type {\n ButtonProps,\n ButtonElementProps,\n AnchorElementProps,\n ButtonType,\n ButtonIconSize,\n} from './Button.types';\nimport { PrimitiveButton, PrimitiveAnchor } from '../../../primitives';\nimport ProcessIndicator from '../../../processIndicator';\nimport AvatarLayout from '../../../avatarLayout';\nimport AvatarView from '../../../avatarView';\nimport Circle from '../../../common/circle';\nimport * as Icons from '@transferwise/icons';\n\n/**\n * The Button component is a versatile and flexible component that can render\n * either a `button` or an `anchor` element based on the `as` prop. This allows\n * the component to be used in various contexts where different HTML elements\n * are needed while maintaining a consistent API and styling.\n *\n * @see {@link Button} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/new-button--docs|Storybook Wise Design}\n */\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n as = 'button' as ButtonType,\n children,\n className,\n disabled,\n loading = false,\n block = false,\n size = 'md',\n priority = 'primary',\n appearance,\n iconLeft,\n iconRight,\n iconOnly,\n avatars,\n type,\n ...props\n },\n ref,\n ) => {\n const isButtonIconSize = (value: any): value is ButtonIconSize => {\n return [16, 24, 32, 40, 48, 56, 72].includes(value);\n };\n\n let sizeClass: string;\n\n if (iconOnly && isButtonIconSize(size)) {\n // If iconOnly is true and size is a ButtonIconSize, return the size as a string\n sizeClass = size.toString();\n } else {\n // Otherwise, handle ButtonSize\n sizeClass = size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';\n }\n\n const classNames = clsx(\n {\n [`wds-Button`]: as === 'a',\n [`wds-Button--block`]: block,\n [`wds-Button--${sizeClass}`]: size,\n [`wds-Button--${priority}`]: priority,\n [`wds-Button--${appearance}`]: appearance,\n [`wds-Button--iconOnly`]: iconOnly,\n },\n className,\n );\n\n const contentClassNames = clsx('wds-Button-content', {\n [`wds-Button-content--loading`]: loading,\n });\n\n const LeftIcon = iconLeft ? Icons[iconLeft as keyof typeof Icons] : null;\n const RightIcon = iconRight ? Icons[iconRight as keyof typeof Icons] : null;\n const IconOnly = iconOnly ? Icons[iconOnly as keyof typeof Icons] : null;\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 {avatars.length === 1 ? (\n <AvatarView size={24}>{avatars[0]?.asset}</AvatarView>\n ) : (\n <AvatarLayout orientation=\"horizontal\" avatars={avatars} size={24} />\n )}\n </span>\n )}\n {!avatars && LeftIcon && (\n <LeftIcon className=\"wds-Button-icon wds-Button-icon--left\" />\n )}\n {children}\n {RightIcon && <RightIcon className=\"wds-Button-icon wds-Button-icon--right\" />}\n </>\n )}\n </span>\n </span>\n );\n\n if (iconOnly) {\n const CircleContent = (\n <Circle\n ref={ref}\n as={as === 'a' ? PrimitiveAnchor : PrimitiveButton}\n size={(size as ButtonIconSize) || 40}\n fixedSize\n {...(props as any)}\n className={classNames}\n disabled={disabled}\n aria-label={children as string}\n >\n {IconOnly && <IconOnly className=\"wds-Button-icon\" />}\n </Circle>\n );\n\n return CircleContent;\n }\n\n if (as === 'a') {\n return (\n <PrimitiveAnchor\n ref={ref as React.Ref<HTMLAnchorElement>}\n {...(props as AnchorElementProps)}\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 ButtonElementProps)}\n className={classNames}\n disabled={disabled}\n loading={loading}\n type={type as ButtonType}\n >\n {content}\n </PrimitiveButton>\n );\n },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["Button","forwardRef","as","children","className","disabled","loading","block","size","priority","appearance","iconLeft","iconRight","iconOnly","avatars","type","props","ref","isButtonIconSize","value","includes","sizeClass","toString","classNames","clsx","contentClassNames","LeftIcon","Icons","RightIcon","IconOnly","content","_jsxs","_jsx","ProcessIndicator","_Fragment","length","AvatarView","asset","AvatarLayout","orientation","CircleContent","Circle","PrimitiveAnchor","PrimitiveButton","fixedSize","displayName"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAEV,kBAAkB,EAClB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAEV,kBAAkB,EAClB,kBAAkB,EAGnB,MAAM,gBAAgB,CAAC;AAQxB;;;;;;;;GAQG;AAEH,QAAA,MAAM,MAAM,+IAsIX,CAAC;AAIF,eAAe,MAAM,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-b87c2a5",
|
|
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-b87c2a5",
|
|
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-b87c2a5",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -5,7 +5,6 @@ import type {
|
|
|
5
5
|
ButtonElementProps,
|
|
6
6
|
AnchorElementProps,
|
|
7
7
|
ButtonType,
|
|
8
|
-
ButtonSize,
|
|
9
8
|
ButtonIconSize,
|
|
10
9
|
} from './Button.types';
|
|
11
10
|
import { PrimitiveButton, PrimitiveAnchor } from '../../../primitives';
|
|
@@ -123,6 +122,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
123
122
|
fixedSize
|
|
124
123
|
{...(props as any)}
|
|
125
124
|
className={classNames}
|
|
125
|
+
disabled={disabled}
|
|
126
|
+
aria-label={children as string}
|
|
126
127
|
>
|
|
127
128
|
{IconOnly && <IconOnly className="wds-Button-icon" />}
|
|
128
129
|
</Circle>
|
|
@@ -277,6 +277,11 @@ export const WithIconOnly: Story = {
|
|
|
277
277
|
value: [16, 24, 32, 40, 48, 56, 72],
|
|
278
278
|
},
|
|
279
279
|
},
|
|
280
|
+
loading: { table: { disable: true } },
|
|
281
|
+
avatars: { table: { disable: true } },
|
|
282
|
+
iconLeft: { table: { disable: true } },
|
|
283
|
+
iconRight: { table: { disable: true } },
|
|
284
|
+
block: { table: { disable: true } },
|
|
280
285
|
},
|
|
281
286
|
args: {
|
|
282
287
|
iconOnly: 'Freeze',
|
|
@@ -43,6 +43,12 @@ const meta: Meta<typeof Button> = {
|
|
|
43
43
|
value: ['accent', 'positive', 'negative'],
|
|
44
44
|
},
|
|
45
45
|
},
|
|
46
|
+
size: {
|
|
47
|
+
type: {
|
|
48
|
+
name: 'enum',
|
|
49
|
+
value: ['xs', 'sm', 'md', 'lg'],
|
|
50
|
+
},
|
|
51
|
+
},
|
|
46
52
|
priority: {
|
|
47
53
|
type: {
|
|
48
54
|
name: 'enum',
|
|
@@ -64,6 +70,11 @@ const meta: Meta<typeof Button> = {
|
|
|
64
70
|
disable: true,
|
|
65
71
|
},
|
|
66
72
|
},
|
|
73
|
+
iconOnly: {
|
|
74
|
+
table: {
|
|
75
|
+
disable: true,
|
|
76
|
+
},
|
|
77
|
+
},
|
|
67
78
|
avatars: {
|
|
68
79
|
table: {
|
|
69
80
|
disable: true,
|