@transferwise/components 0.0.0-experimental-a6af12f → 0.0.0-experimental-f403f8f
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,EAAE,GAAG,QAAsB;EAC3BC,QAAQ;EACRC,SAAS;EACTC,QAAQ;AACRC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,IAAI,GAAG,IAAI;AACXC,EAAAA,QAAQ,GAAG,SAAS;EACpBC,UAAU;EACVC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJ,GAAGC,KAAAA;AACJ,CAAA,EACDC,GAAG,KACD;EACF,MAAMC,gBAAgB,GAAIC,KAAU,IAA6B;AAC/D,IAAA,OAAO,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAACC,QAAQ,CAACD,KAAK,CAAC,CAAA;GACpD,CAAA;AAED,EAAA,IAAIE,SAAiB,CAAA;AAErB,EAAA,IAAIR,QAAQ,IAAIK,gBAAgB,CAACV,IAAI,CAAC,EAAE;AACtC;AACAa,IAAAA,SAAS,GAAGb,IAAI,CAACc,QAAQ,EAAE,CAAA;AAC7B,GAAC,MAAM;AACL;AACAD,IAAAA,SAAS,GAAGb,IAAI,KAAK,IAAI,GAAG,OAAO,GAAGA,IAAI,KAAK,IAAI,GAAG,QAAQ,GAAGA,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,EAAE,CAAA;AAC/F,GAAA;EAEA,MAAMe,UAAU,GAAGC,SAAI,CACrB;AACE,IAAA,CAAC,CAAY,UAAA,CAAA,GAAGtB,EAAE,KAAK,GAAG;IAC1B,CAAC,CAAA,iBAAA,CAAmB,GAAGK,KAAK;AAC5B,IAAA,CAAC,CAAec,YAAAA,EAAAA,SAAS,CAAE,CAAA,GAAGb,IAAI;AAClC,IAAA,CAAC,CAAeC,YAAAA,EAAAA,QAAQ,CAAE,CAAA,GAAGA,QAAQ;AACrC,IAAA,CAAC,CAAeC,YAAAA,EAAAA,UAAU,CAAE,CAAA,GAAGA,UAAU;AACzC,IAAA,CAAC,sBAAsB,GAAGG,QAAAA;GAC3B,EACDT,SAAS,CACV,CAAA;AAED,EAAA,MAAMqB,iBAAiB,GAAGD,SAAI,CAAC,oBAAoB,EAAE;AACnD,IAAA,CAAC,6BAA6B,GAAGlB,OAAAA;AAClC,GAAA,CAAC,CAAA;EAEF,MAAMoB,QAAQ,GAAGf,QAAQ,GAAGgB,gBAAK,CAAChB,QAA8B,CAAC,GAAG,IAAI,CAAA;EACxE,MAAMiB,SAAS,GAAGhB,SAAS,GAAGe,gBAAK,CAACf,SAA+B,CAAC,GAAG,IAAI,CAAA;EAC3E,MAAMiB,QAAQ,GAAGhB,QAAQ,GAAGc,gBAAK,CAACd,QAA8B,CAAC,GAAG,IAAI,CAAA;EAExE,MAAMiB,OAAO,gBACXC,eAAA,CAAA,MAAA,EAAA;AAAM3B,IAAAA,SAAS,EAAEqB,iBAAkB;AAAAtB,IAAAA,QAAA,EAChCG,CAAAA,OAAO,iBACN0B,cAAA,CAACC,gBAAgB,EAAA;AACfzB,MAAAA,IAAI,EAAC,IAAI;AACTJ,MAAAA,SAAS,EAAC,mBAAmB;MAC7B,aAAY,EAAA,yBAAA;KAAyB,CAExC,eACD4B,cAAA,CAAA,MAAA,EAAA;AAAM5B,MAAAA,SAAS,EAAC,kBAAkB;AAAC,MAAA,aAAA,EAAaE,OAAQ;MAAAH,QAAA,EACrDK,IAAI,KAAK,IAAI,GACZL,QAAQ,gBAER4B,eAAA,CAAAG,mBAAA,EAAA;AAAA/B,QAAAA,QAAA,GACGK,IAAI,KAAK,IAAI,IAAIM,OAAO,iBACvBkB,cAAA,CAAA,MAAA,EAAA;AAAM5B,UAAAA,SAAS,EAAC,oBAAoB;UAAAD,QAAA,EACjCW,OAAO,CAACqB,MAAM,KAAK,CAAC,gBACnBH,cAAA,CAACI,UAAU,EAAA;AAAC5B,YAAAA,IAAI,EAAE,EAAG;AAAAL,YAAAA,QAAA,EAAEW,OAAO,CAAC,CAAC,CAAC,EAAEuB,KAAAA;AAAK,WAAa,CAAC,gBAEtDL,cAAA,CAACM,YAAY,EAAA;AAACC,YAAAA,WAAW,EAAC,YAAY;AAACzB,YAAAA,OAAO,EAAEA,OAAQ;AAACN,YAAAA,IAAI,EAAE,EAAA;WAAM,CAAA;SAEnE,CACP,EACA,CAACM,OAAO,IAAIY,QAAQ,iBACnBM,cAAA,CAACN,QAAQ,EAAA;AAACtB,UAAAA,SAAS,EAAC,uCAAA;SAAuC,CAC5D,EACAD,QAAQ,EACRyB,SAAS,iBAAII,cAAA,CAACJ,SAAS,EAAA;AAACxB,UAAAA,SAAS,EAAC,wCAAA;AAAwC,SAAA,CAAG,CAAA;OAChF,CAAA;AACD,KACG,CACR,CAAA;AAAA,GAAM,CACP,CAAA;AAED,EAAA,IAAIS,QAAQ,EAAE;AACZ,IAAA,MAAM2B,aAAa,gBACjBR,cAAA,CAACS,MAAM,EAAA;AACLxB,MAAAA,GAAG,EAAEA,GAAI;AACTf,MAAAA,EAAE,EAAEA,EAAE,KAAK,GAAG,GAAGwC,eAAe,GAAGC,eAAgB;MACnDnC,IAAI,EAAGA,IAAuB,IAAI,EAAG;MACrCoC,SAAS,EAAA,IAAA;AAAA,MAAA,GACJ5B,KAAa;AAClBZ,MAAAA,SAAS,EAAEmB,UAAW;AAAApB,MAAAA,QAAA,EAErB0B,QAAQ,iBAAIG,cAAA,CAACH,QAAQ,EAAA;AAACzB,QAAAA,SAAS,EAAC,iBAAA;OAAiB,CAAA;AAAG,KAC/C,CACT,CAAA;AAED,IAAA,OAAOoC,aAAa,CAAA;AACtB,GAAA;EAEA,IAAItC,EAAE,KAAK,GAAG,EAAE;IACd,oBACE8B,cAAA,CAACU,eAAe,EAAA;AACdzB,MAAAA,GAAG,EAAEA,GAAoC;AAAA,MAAA,GACpCD,KAA4B;AACjCZ,MAAAA,SAAS,EAAEmB,UAAW;AACtBlB,MAAAA,QAAQ,EAAEA,QAAS;AAAAF,MAAAA,QAAA,EAElB2B,OAAAA;AAAO,KACO,CAAC,CAAA;AAEtB,GAAA;EAEA,oBACEE,cAAA,CAACW,eAAe,EAAA;AACd1B,IAAAA,GAAG,EAAEA,GAAoC;AAAA,IAAA,GACpCD,KAA4B;AACjCZ,IAAAA,SAAS,EAAEmB,UAAW;AACtBlB,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBS,IAAAA,IAAI,EAAEA,IAAmB;AAAAZ,IAAAA,QAAA,EAExB2B,OAAAA;AAAO,GACO,CAAC,CAAA;AAEtB,CAAC,EACF;AAED9B,MAAM,CAAC6C,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -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-f403f8f",
|
|
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-f403f8f",
|
|
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-f403f8f",
|
|
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}
|
|
@@ -102,6 +102,37 @@ type Story = StoryObj<typeof Button>;
|
|
|
102
102
|
|
|
103
103
|
export const Basic: Story = {};
|
|
104
104
|
|
|
105
|
+
export const Secondary: Story = {
|
|
106
|
+
args: {
|
|
107
|
+
priority: 'secondary',
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
export const Tertiary: Story = {
|
|
112
|
+
args: {
|
|
113
|
+
priority: 'tertiary',
|
|
114
|
+
},
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
export const Text: Story = {
|
|
118
|
+
args: {
|
|
119
|
+
priority: 'text',
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
export const Negative: Story = {
|
|
124
|
+
args: {
|
|
125
|
+
appearance: 'negative',
|
|
126
|
+
},
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
export const NegativeSecondary: Story = {
|
|
130
|
+
args: {
|
|
131
|
+
appearance: 'negative',
|
|
132
|
+
priority: 'secondary',
|
|
133
|
+
},
|
|
134
|
+
};
|
|
135
|
+
|
|
105
136
|
export const AsAnchor: Story = {
|
|
106
137
|
args: {
|
|
107
138
|
as: 'a',
|
|
@@ -121,12 +152,24 @@ export const Loading: Story = {
|
|
|
121
152
|
},
|
|
122
153
|
};
|
|
123
154
|
|
|
124
|
-
export const
|
|
155
|
+
export const SizeSmall: Story = {
|
|
125
156
|
args: {
|
|
126
157
|
size: 'sm',
|
|
127
158
|
},
|
|
128
159
|
};
|
|
129
160
|
|
|
161
|
+
export const SizeLarge: Story = {
|
|
162
|
+
args: {
|
|
163
|
+
size: 'lg',
|
|
164
|
+
},
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
export const DisplayBlock: Story = {
|
|
168
|
+
args: {
|
|
169
|
+
block: true,
|
|
170
|
+
},
|
|
171
|
+
};
|
|
172
|
+
|
|
130
173
|
export const WithIcon: Story = {
|
|
131
174
|
args: {
|
|
132
175
|
iconRight: 'ChevronRight',
|
|
@@ -148,18 +191,6 @@ export const WithIconOnly: Story = {
|
|
|
148
191
|
},
|
|
149
192
|
};
|
|
150
193
|
|
|
151
|
-
export const WithPriority: Story = {
|
|
152
|
-
args: {
|
|
153
|
-
priority: 'secondary',
|
|
154
|
-
},
|
|
155
|
-
};
|
|
156
|
-
|
|
157
|
-
export const WithAppearance: Story = {
|
|
158
|
-
args: {
|
|
159
|
-
appearance: 'negative',
|
|
160
|
-
},
|
|
161
|
-
};
|
|
162
|
-
|
|
163
194
|
export const WithAvatars: Story = {
|
|
164
195
|
args: {
|
|
165
196
|
avatars: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
|