@transferwise/components 0.0.0-experimental-a6af12f → 0.0.0-experimental-a6fe828
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.
|
@@ -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 ButtonSize,\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
|
|
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 ButtonSize,\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 >\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 ButtonSize,\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
|
|
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 ButtonSize,\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 >\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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"}
|
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-a6fe828",
|
|
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-a6fe828",
|
|
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-a6fe828",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -64,7 +64,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
64
64
|
{
|
|
65
65
|
[`wds-Button`]: as === 'a',
|
|
66
66
|
[`wds-Button--block`]: block,
|
|
67
|
-
[`wds-Button--${sizeClass}`]: size
|
|
67
|
+
[`wds-Button--${sizeClass}`]: size,
|
|
68
68
|
[`wds-Button--${priority}`]: priority,
|
|
69
69
|
[`wds-Button--${appearance}`]: appearance,
|
|
70
70
|
[`wds-Button--iconOnly`]: iconOnly,
|
|
@@ -119,7 +119,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
|
119
119
|
<Circle
|
|
120
120
|
ref={ref}
|
|
121
121
|
as={as === 'a' ? PrimitiveAnchor : PrimitiveButton}
|
|
122
|
-
size={(size
|
|
122
|
+
size={(size as ButtonIconSize) || 40}
|
|
123
123
|
fixedSize
|
|
124
124
|
{...(props as any)}
|
|
125
125
|
className={classNames}
|
|
@@ -100,37 +100,173 @@ export default meta;
|
|
|
100
100
|
|
|
101
101
|
type Story = StoryObj<typeof Button>;
|
|
102
102
|
|
|
103
|
-
export const Basic: Story = {
|
|
103
|
+
export const Basic: Story = {
|
|
104
|
+
parameters: {
|
|
105
|
+
docs: {
|
|
106
|
+
description: {
|
|
107
|
+
story: 'A basic example of the Button component.',
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export const Secondary: Story = {
|
|
114
|
+
args: {
|
|
115
|
+
priority: 'secondary',
|
|
116
|
+
},
|
|
117
|
+
parameters: {
|
|
118
|
+
docs: {
|
|
119
|
+
description: {
|
|
120
|
+
story: 'A Button with secondary priority.',
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export const Tertiary: Story = {
|
|
127
|
+
args: {
|
|
128
|
+
priority: 'tertiary',
|
|
129
|
+
},
|
|
130
|
+
parameters: {
|
|
131
|
+
docs: {
|
|
132
|
+
description: {
|
|
133
|
+
story: 'A Button with tertiary priority.',
|
|
134
|
+
},
|
|
135
|
+
},
|
|
136
|
+
},
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
export const Text: Story = {
|
|
140
|
+
args: {
|
|
141
|
+
priority: 'text',
|
|
142
|
+
},
|
|
143
|
+
parameters: {
|
|
144
|
+
docs: {
|
|
145
|
+
description: {
|
|
146
|
+
story: 'A Button with text priority.',
|
|
147
|
+
},
|
|
148
|
+
},
|
|
149
|
+
},
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
export const Negative: Story = {
|
|
153
|
+
args: {
|
|
154
|
+
appearance: 'negative',
|
|
155
|
+
},
|
|
156
|
+
parameters: {
|
|
157
|
+
docs: {
|
|
158
|
+
description: {
|
|
159
|
+
story: 'A Button with negative appearance.',
|
|
160
|
+
},
|
|
161
|
+
},
|
|
162
|
+
},
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
export const NegativeSecondary: Story = {
|
|
166
|
+
args: {
|
|
167
|
+
appearance: 'negative',
|
|
168
|
+
priority: 'secondary',
|
|
169
|
+
},
|
|
170
|
+
parameters: {
|
|
171
|
+
docs: {
|
|
172
|
+
description: {
|
|
173
|
+
story: 'A Button with negative appearance and secondary priority.',
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
},
|
|
177
|
+
};
|
|
104
178
|
|
|
105
179
|
export const AsAnchor: Story = {
|
|
106
180
|
args: {
|
|
107
181
|
as: 'a',
|
|
108
182
|
href: 'https://wise.com',
|
|
109
183
|
},
|
|
184
|
+
parameters: {
|
|
185
|
+
docs: {
|
|
186
|
+
description: {
|
|
187
|
+
story: 'A Button rendered as an anchor element.',
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
},
|
|
110
191
|
};
|
|
111
192
|
|
|
112
193
|
export const Disabled: Story = {
|
|
113
194
|
args: {
|
|
114
195
|
disabled: true,
|
|
115
196
|
},
|
|
197
|
+
parameters: {
|
|
198
|
+
docs: {
|
|
199
|
+
description: {
|
|
200
|
+
story: 'A disabled Button.',
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
},
|
|
116
204
|
};
|
|
117
205
|
|
|
118
206
|
export const Loading: Story = {
|
|
119
207
|
args: {
|
|
120
208
|
loading: true,
|
|
121
209
|
},
|
|
210
|
+
parameters: {
|
|
211
|
+
docs: {
|
|
212
|
+
description: {
|
|
213
|
+
story: 'A Button in a loading state.',
|
|
214
|
+
},
|
|
215
|
+
},
|
|
216
|
+
},
|
|
122
217
|
};
|
|
123
218
|
|
|
124
|
-
export const
|
|
219
|
+
export const SizeSmall: Story = {
|
|
125
220
|
args: {
|
|
126
221
|
size: 'sm',
|
|
127
222
|
},
|
|
223
|
+
parameters: {
|
|
224
|
+
docs: {
|
|
225
|
+
description: {
|
|
226
|
+
story: 'A small Button.',
|
|
227
|
+
},
|
|
228
|
+
},
|
|
229
|
+
},
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
export const SizeLarge: Story = {
|
|
233
|
+
args: {
|
|
234
|
+
size: 'lg',
|
|
235
|
+
},
|
|
236
|
+
parameters: {
|
|
237
|
+
docs: {
|
|
238
|
+
description: {
|
|
239
|
+
story: 'A large Button.',
|
|
240
|
+
},
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
export const DisplayBlock: Story = {
|
|
246
|
+
args: {
|
|
247
|
+
block: true,
|
|
248
|
+
},
|
|
249
|
+
parameters: {
|
|
250
|
+
docs: {
|
|
251
|
+
description: {
|
|
252
|
+
story: 'A Button that takes up the full width of its container.',
|
|
253
|
+
},
|
|
254
|
+
},
|
|
255
|
+
},
|
|
128
256
|
};
|
|
129
257
|
|
|
130
258
|
export const WithIcon: Story = {
|
|
131
259
|
args: {
|
|
132
260
|
iconRight: 'ChevronRight',
|
|
133
261
|
},
|
|
262
|
+
parameters: {
|
|
263
|
+
docs: {
|
|
264
|
+
description: {
|
|
265
|
+
story:
|
|
266
|
+
'A Button with an icon on the right. Can also use `iconLeft` to place the icon on the left or have both at the same time.',
|
|
267
|
+
},
|
|
268
|
+
},
|
|
269
|
+
},
|
|
134
270
|
};
|
|
135
271
|
|
|
136
272
|
export const WithIconOnly: Story = {
|
|
@@ -146,17 +282,12 @@ export const WithIconOnly: Story = {
|
|
|
146
282
|
iconOnly: 'Freeze',
|
|
147
283
|
size: 40,
|
|
148
284
|
},
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
export const WithAppearance: Story = {
|
|
158
|
-
args: {
|
|
159
|
-
appearance: 'negative',
|
|
285
|
+
parameters: {
|
|
286
|
+
docs: {
|
|
287
|
+
description: {
|
|
288
|
+
story: 'A Button rendered with only an icon.',
|
|
289
|
+
},
|
|
290
|
+
},
|
|
160
291
|
},
|
|
161
292
|
};
|
|
162
293
|
|
|
@@ -164,6 +295,14 @@ export const WithAvatars: Story = {
|
|
|
164
295
|
args: {
|
|
165
296
|
avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
|
|
166
297
|
},
|
|
298
|
+
parameters: {
|
|
299
|
+
docs: {
|
|
300
|
+
description: {
|
|
301
|
+
story:
|
|
302
|
+
'A Button with avatars. Will supersed any `iconLeft` property and will always render avatars.',
|
|
303
|
+
},
|
|
304
|
+
},
|
|
305
|
+
},
|
|
167
306
|
};
|
|
168
307
|
|
|
169
308
|
export const WithAvatarAndIcon: Story = {
|
|
@@ -171,4 +310,11 @@ export const WithAvatarAndIcon: Story = {
|
|
|
171
310
|
avatars: [{ asset: <Freeze /> }],
|
|
172
311
|
iconRight: 'ChevronRight',
|
|
173
312
|
},
|
|
313
|
+
parameters: {
|
|
314
|
+
docs: {
|
|
315
|
+
description: {
|
|
316
|
+
story: 'A Button with an avatar and an icon.',
|
|
317
|
+
},
|
|
318
|
+
},
|
|
319
|
+
},
|
|
174
320
|
};
|