@transferwise/components 0.0.0-experimental-f564bc6 → 0.0.0-experimental-5a9ce14
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 +9 -3
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +9 -3
- package/build/button/Button.mjs.map +1 -1
- package/build/main.css +4 -4
- package/build/styles/button/Button.css +4 -4
- package/build/styles/main.css +4 -4
- 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/avatar/Avatar.story.tsx +1 -1
- package/src/avatarWrapper/AvatarWrapper.story.tsx +1 -1
- package/src/badge/Badge.story.tsx +1 -1
- package/src/button/Button.css +4 -4
- package/src/button/Button.less +5 -3
- package/src/button/Button.spec.tsx +128 -1
- package/src/button/Button.story.tsx +39 -13
- package/src/button/Button.tsx +7 -10
- package/src/button/Button.types.ts +1 -1
- package/src/card/Card.story.tsx +6 -1
- package/src/main.css +4 -4
- package/src/select/Select.story.tsx +4 -1
package/build/button/Button.js
CHANGED
|
@@ -74,8 +74,11 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
74
74
|
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
75
75
|
className: "wds-Button-label",
|
|
76
76
|
"aria-hidden": loading,
|
|
77
|
-
children: size === 'lg' ?
|
|
78
|
-
|
|
77
|
+
children: size === 'lg' ? /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
78
|
+
className: "wds-Button-labelText",
|
|
79
|
+
children: children
|
|
80
|
+
}) : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
81
|
+
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
79
82
|
className: "wds-Button-avatars",
|
|
80
83
|
children: /*#__PURE__*/jsxRuntime.jsx(AvatarLayout, {
|
|
81
84
|
orientation: "horizontal",
|
|
@@ -85,7 +88,10 @@ const Button = /*#__PURE__*/React.forwardRef(({
|
|
|
85
88
|
}), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
86
89
|
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`,
|
|
87
90
|
children: addonStart.value
|
|
88
|
-
}),
|
|
91
|
+
}), /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
92
|
+
className: "wds-Button-labelText",
|
|
93
|
+
children: children
|
|
94
|
+
}), addonEnd?.type === 'icon' && addonEnd?.value && /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
89
95
|
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`,
|
|
90
96
|
children: addonEnd.value
|
|
91
97
|
})]
|
|
@@ -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
|
|
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 <span className=\"wds-Button-labelText\">{children}</span>\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 <span className=\"wds-Button-labelText\">{children}</span>\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
|
@@ -72,8 +72,11 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
72
72
|
}), /*#__PURE__*/jsx("span", {
|
|
73
73
|
className: "wds-Button-label",
|
|
74
74
|
"aria-hidden": loading,
|
|
75
|
-
children: size === 'lg' ?
|
|
76
|
-
|
|
75
|
+
children: size === 'lg' ? /*#__PURE__*/jsx("span", {
|
|
76
|
+
className: "wds-Button-labelText",
|
|
77
|
+
children: children
|
|
78
|
+
}) : /*#__PURE__*/jsxs(Fragment, {
|
|
79
|
+
children: [size === 'md' && addonStart?.type === 'avatar' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
77
80
|
className: "wds-Button-avatars",
|
|
78
81
|
children: /*#__PURE__*/jsx(AvatarLayout, {
|
|
79
82
|
orientation: "horizontal",
|
|
@@ -83,7 +86,10 @@ const Button = /*#__PURE__*/forwardRef(({
|
|
|
83
86
|
}), addonStart?.type === 'icon' && addonStart.value && /*#__PURE__*/jsx("span", {
|
|
84
87
|
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`,
|
|
85
88
|
children: addonStart.value
|
|
86
|
-
}),
|
|
89
|
+
}), /*#__PURE__*/jsx("span", {
|
|
90
|
+
className: "wds-Button-labelText",
|
|
91
|
+
children: children
|
|
92
|
+
}), addonEnd?.type === 'icon' && addonEnd?.value && /*#__PURE__*/jsx("span", {
|
|
87
93
|
className: `wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`,
|
|
88
94
|
children: addonEnd.value
|
|
89
95
|
})]
|
|
@@ -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
|
|
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 <span className=\"wds-Button-labelText\">{children}</span>\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 <span className=\"wds-Button-labelText\">{children}</span>\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAUA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;EACEC,EAAE;EACFC,QAAQ;EACRC,SAAS;AACTC,EAAAA,IAAI,GAAG,IAAI;EACXC,IAAI;AACJC,EAAAA,QAAQ,GAAG,KAAK;AAChBC,EAAAA,QAAQ,GAAG,SAAS;AACpBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,UAAU;EACVC,QAAQ;AACR;AACAC,EAAAA,IAAI,GAAG,QAAQ;AACfC,EAAAA,OAAO,GAAG,KAAK;AACfC,EAAAA,KAAK,GAAG,KAAK;EACbC,EAAE;EACF,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,UAAU,GAAGC,IAAI,CACrB,YAAY,EACZ;IACE,CAAC,CAAA,iBAAA,CAAmB,GAAGL,KAAK;IAC5B,CAAC,CAAA,oBAAA,CAAsB,GAAGP,QAAQ;AAClC,IAAA,CAAC,qBAAqB,GAAGM,OAAAA;AAC1B,GAAA,EACD,CAAe,YAAA,EAAA;AAAEO,IAAAA,EAAE,EAAE,OAAO;AAAEC,IAAAA,EAAE,EAAE,QAAQ;AAAEC,IAAAA,EAAE,EAAE,OAAA;AAAO,GAAE,CAACjB,IAAI,CAAC,CAAA,CAAE,EACjE,CAAeG,YAAAA,EAAAA,QAAQ,CAAE,CAAA,EACzB,CAAeC,YAAAA,EAAAA,SAAS,CAAE,CAAA,EAC1BL,SAAS,CACV,CAAA;AAED,EAAA,MAAMmB,iBAAiB,GAAGJ,IAAI,CAAC,oBAAoB,EAAE;AACnD,IAAA,CAAC,6BAA6B,GAAGN,OAAAA;AAClC,GAAA,CAAC,CAAA;AAEF,EAAA,MAAMW,OAAO,gBACXC,IAAA,CAACC,IAAI,EAAA;AACHxB,IAAAA,EAAE,EAAC,MAAM;IACTU,IAAI,EAAEP,IAAI,KAAK,IAAI,GAAGsB,UAAU,CAACC,iBAAiB,GAAGD,UAAU,CAACE,eAAgB;AAChFzB,IAAAA,SAAS,EAAEmB,iBAAkB;AAAApB,IAAAA,QAAA,EAE5BU,CAAAA,OAAO,iBACNiB,GAAA,CAACC,gBAAgB,EAAA;AACf1B,MAAAA,IAAI,EAAEA,IAAI,KAAK,IAAI,GAAG,KAAK,GAAG,IAAK;AACnCD,MAAAA,SAAS,EAAC,mBAAmB;MAC7B,aAAY,EAAA,yBAAA;KAAyB,CAExC,eACD0B,GAAA,CAAA,MAAA,EAAA;AAAM1B,MAAAA,SAAS,EAAC,kBAAkB;AAAC,MAAA,aAAA,EAAaS,OAAQ;AAAAV,MAAAA,QAAA,EACrDE,IAAI,KAAK,IAAI,gBACZyB,GAAA,CAAA,MAAA,EAAA;AAAM1B,QAAAA,SAAS,EAAC,sBAAsB;AAAAD,QAAAA,QAAA,EAAEA,QAAAA;AAAQ,OAAO,CAAC,gBAExDsB,IAAA,CAAAO,QAAA,EAAA;AAAA7B,QAAAA,QAAA,EACGE,CAAAA,IAAI,KAAK,IAAI,IAAIK,UAAU,EAAEE,IAAI,KAAK,QAAQ,IAAIF,UAAU,CAACuB,KAAK,iBACjEH,GAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,oBAAoB;UAAAD,QAAA,eAClC2B,GAAA,CAACI,YAAY,EAAA;AAACC,YAAAA,WAAW,EAAC,YAAY;YAACC,OAAO,EAAE1B,UAAU,EAAEuB,KAAM;AAAC5B,YAAAA,IAAI,EAAE,EAAA;WAC3E,CAAA;AAAA,SAAM,CACP,EAEAK,UAAU,EAAEE,IAAI,KAAK,MAAM,IAAIF,UAAU,CAACuB,KAAK,iBAC9CH,GAAA,CAAA,MAAA,EAAA;UAAM1B,SAAS,EAAE,CAAoCC,iCAAAA,EAAAA,IAAI,CAA0B,uBAAA,CAAA;UAAAF,QAAA,EAChFO,UAAU,CAACuB,KAAAA;SACR,CACP,eAEDH,GAAA,CAAA,MAAA,EAAA;AAAM1B,UAAAA,SAAS,EAAC,sBAAsB;AAAAD,UAAAA,QAAA,EAAEA,QAAAA;AAAQ,SAAO,CAEvD,EAACQ,QAAQ,EAAEC,IAAI,KAAK,MAAM,IAAID,QAAQ,EAAEsB,KAAK,iBAC3CH,GAAA,CAAA,MAAA,EAAA;UAAM1B,SAAS,EAAE,CAAoCC,iCAAAA,EAAAA,IAAI,CAAwB,qBAAA,CAAA;UAAAF,QAAA,EAC9EQ,QAAQ,CAACsB,KAAAA;AAAK,SACX,CACP,CAAA;OACH,CAAA;AACD,KACG,CACR,CAAA;AAAA,GAAM,CACP,CAAA;EAED,IAAK3B,IAAI,IAAIJ,EAAE,KAAK,QAAQ,IAAKA,EAAE,KAAK,GAAG,EAAE;IAC3C,oBACE4B,GAAA,CAACO,eAAe,EAAA;AACdpB,MAAAA,GAAG,EAAEA,GAAoC;AAAA,MAAA,GACpCD,KAAa;AAClBV,MAAAA,IAAI,EAAEA,IAAK;AACXF,MAAAA,SAAS,EAAEc,UAAW;MACtBX,QAAQ,EAAEA,QAAQ,IAAIM,OAAQ;MAC9B,WAAWA,EAAAA,OAAO,IAAIyB,SAAU;AAChC1B,MAAAA,IAAI,EAAE0B,SAAU;AAAAnC,MAAAA,QAAA,EAEfqB,OAAAA;AAAO,KACO,CAAC,CAAA;AAEtB,GAAA;EAEA,oBACEM,GAAA,CAACS,eAAe,EAAA;AACdtB,IAAAA,GAAG,EAAEA,GAAoC;AAAA,IAAA,GACpCD,KAAa;AAClBZ,IAAAA,SAAS,EAAEc,UAAW;AACtBX,IAAAA,QAAQ,EAAEA,QAAS;AACnBM,IAAAA,OAAO,EAAEA,OAAQ;AACjBD,IAAAA,IAAI,EAAEA,IAAK;AACXN,IAAAA,IAAI,EAAEgC,SAAU;AAChBE,IAAAA,MAAM,EAAEF,SAAU;AAAAnC,IAAAA,QAAA,EAEjBqB,OAAAA;AAAO,GACO,CAAC,CAAA;AAEtB,CAAC;;;;"}
|
package/build/main.css
CHANGED
|
@@ -834,10 +834,10 @@ div.critical-comms .critical-comms-body {
|
|
|
834
834
|
--Button-background-active: var(--Button-tertiary-background-active);
|
|
835
835
|
--Button-color: var(--Button-tertiary-color);
|
|
836
836
|
}
|
|
837
|
-
.wds-Button--tertiary,
|
|
838
|
-
.wds-Button--tertiary:hover,
|
|
839
|
-
.wds-Button--tertiary:active,
|
|
840
|
-
.wds-Button--tertiary:focus {
|
|
837
|
+
.wds-Button--tertiary .wds-Button-labelText,
|
|
838
|
+
.wds-Button--tertiary:hover .wds-Button-labelText,
|
|
839
|
+
.wds-Button--tertiary:active .wds-Button-labelText,
|
|
840
|
+
.wds-Button--tertiary:focus .wds-Button-labelText {
|
|
841
841
|
-webkit-text-decoration: underline;
|
|
842
842
|
text-decoration: underline;
|
|
843
843
|
text-underline-offset: 3px;
|
|
@@ -115,10 +115,10 @@
|
|
|
115
115
|
--Button-background-active: var(--Button-tertiary-background-active);
|
|
116
116
|
--Button-color: var(--Button-tertiary-color);
|
|
117
117
|
}
|
|
118
|
-
.wds-Button--tertiary,
|
|
119
|
-
.wds-Button--tertiary:hover,
|
|
120
|
-
.wds-Button--tertiary:active,
|
|
121
|
-
.wds-Button--tertiary:focus {
|
|
118
|
+
.wds-Button--tertiary .wds-Button-labelText,
|
|
119
|
+
.wds-Button--tertiary:hover .wds-Button-labelText,
|
|
120
|
+
.wds-Button--tertiary:active .wds-Button-labelText,
|
|
121
|
+
.wds-Button--tertiary:focus .wds-Button-labelText {
|
|
122
122
|
-webkit-text-decoration: underline;
|
|
123
123
|
text-decoration: underline;
|
|
124
124
|
text-underline-offset: 3px;
|
package/build/styles/main.css
CHANGED
|
@@ -834,10 +834,10 @@ div.critical-comms .critical-comms-body {
|
|
|
834
834
|
--Button-background-active: var(--Button-tertiary-background-active);
|
|
835
835
|
--Button-color: var(--Button-tertiary-color);
|
|
836
836
|
}
|
|
837
|
-
.wds-Button--tertiary,
|
|
838
|
-
.wds-Button--tertiary:hover,
|
|
839
|
-
.wds-Button--tertiary:active,
|
|
840
|
-
.wds-Button--tertiary:focus {
|
|
837
|
+
.wds-Button--tertiary .wds-Button-labelText,
|
|
838
|
+
.wds-Button--tertiary:hover .wds-Button-labelText,
|
|
839
|
+
.wds-Button--tertiary:active .wds-Button-labelText,
|
|
840
|
+
.wds-Button--tertiary:focus .wds-Button-labelText {
|
|
841
841
|
-webkit-text-decoration: underline;
|
|
842
842
|
text-decoration: underline;
|
|
843
843
|
text-underline-offset: 3px;
|
|
@@ -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-5a9ce14",
|
|
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-5a9ce14",
|
|
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-5a9ce14",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -10,7 +10,7 @@ import AvatarWrapper from './AvatarWrapper';
|
|
|
10
10
|
export default {
|
|
11
11
|
tags: ['autodocs'],
|
|
12
12
|
component: AvatarWrapper,
|
|
13
|
-
title: 'Content/AvatarWrapper',
|
|
13
|
+
title: 'Content/AvatarWrapper (Deprecated)',
|
|
14
14
|
} satisfies Meta<typeof AvatarWrapper>;
|
|
15
15
|
|
|
16
16
|
type Story = StoryObj<typeof AvatarWrapper>;
|
package/src/button/Button.css
CHANGED
|
@@ -115,10 +115,10 @@
|
|
|
115
115
|
--Button-background-active: var(--Button-tertiary-background-active);
|
|
116
116
|
--Button-color: var(--Button-tertiary-color);
|
|
117
117
|
}
|
|
118
|
-
.wds-Button--tertiary,
|
|
119
|
-
.wds-Button--tertiary:hover,
|
|
120
|
-
.wds-Button--tertiary:active,
|
|
121
|
-
.wds-Button--tertiary:focus {
|
|
118
|
+
.wds-Button--tertiary .wds-Button-labelText,
|
|
119
|
+
.wds-Button--tertiary:hover .wds-Button-labelText,
|
|
120
|
+
.wds-Button--tertiary:active .wds-Button-labelText,
|
|
121
|
+
.wds-Button--tertiary:focus .wds-Button-labelText {
|
|
122
122
|
-webkit-text-decoration: underline;
|
|
123
123
|
text-decoration: underline;
|
|
124
124
|
text-underline-offset: 3px;
|
package/src/button/Button.less
CHANGED
|
@@ -82,9 +82,11 @@
|
|
|
82
82
|
&:hover,
|
|
83
83
|
&:active,
|
|
84
84
|
&:focus {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
.wds-Button-labelText{
|
|
86
|
+
text-decoration: underline;
|
|
87
|
+
text-underline-offset: 3px;
|
|
88
|
+
text-decoration-thickness: 1px;
|
|
89
|
+
}
|
|
88
90
|
}
|
|
89
91
|
}
|
|
90
92
|
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Freeze } from '@transferwise/icons';
|
|
2
|
+
import { mockMatchMedia, render, screen } from '../test-utils';
|
|
2
3
|
import Button, { ButtonProps } from './Button.resolver';
|
|
4
|
+
import { CommonProps } from './Button.types';
|
|
5
|
+
|
|
6
|
+
mockMatchMedia();
|
|
3
7
|
|
|
4
8
|
describe('Button', () => {
|
|
5
9
|
const legacyProps: ButtonProps = {
|
|
@@ -232,4 +236,127 @@ describe('Button', () => {
|
|
|
232
236
|
expect(button).toBeInTheDocument();
|
|
233
237
|
expect(button).toHaveAttribute('type', 'submit');
|
|
234
238
|
});
|
|
239
|
+
|
|
240
|
+
describe('addons', () => {
|
|
241
|
+
const avatarProp: CommonProps['addonStart'] = {
|
|
242
|
+
type: 'avatar',
|
|
243
|
+
value: [{ asset: <Freeze /> }],
|
|
244
|
+
};
|
|
245
|
+
const iconProp: CommonProps['addonStart'] = { type: 'icon', value: <Freeze /> };
|
|
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
|
+
|
|
265
|
+
describe('addonsStart', () => {
|
|
266
|
+
describe('large', () => {
|
|
267
|
+
it('should not support avatars', () => {
|
|
268
|
+
renderAllPriorities({
|
|
269
|
+
v2: true,
|
|
270
|
+
size: 'lg',
|
|
271
|
+
addonStart: avatarProp,
|
|
272
|
+
});
|
|
273
|
+
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
274
|
+
});
|
|
275
|
+
|
|
276
|
+
it('should not support icons', () => {
|
|
277
|
+
renderAllPriorities({
|
|
278
|
+
v2: true,
|
|
279
|
+
size: 'lg',
|
|
280
|
+
addonStart: iconProp,
|
|
281
|
+
});
|
|
282
|
+
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
283
|
+
});
|
|
284
|
+
});
|
|
285
|
+
|
|
286
|
+
describe('medium', () => {
|
|
287
|
+
it('should support avatar', () => {
|
|
288
|
+
renderAllPriorities({
|
|
289
|
+
v2: true,
|
|
290
|
+
size: 'md',
|
|
291
|
+
addonStart: avatarProp,
|
|
292
|
+
});
|
|
293
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
it('should support icon', () => {
|
|
297
|
+
renderAllPriorities({
|
|
298
|
+
v2: true,
|
|
299
|
+
size: 'md',
|
|
300
|
+
addonStart: iconProp,
|
|
301
|
+
});
|
|
302
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
303
|
+
});
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
describe('small', () => {
|
|
307
|
+
it('should not support avatar', () => {
|
|
308
|
+
renderAllPriorities({
|
|
309
|
+
v2: true,
|
|
310
|
+
size: 'sm',
|
|
311
|
+
addonStart: avatarProp,
|
|
312
|
+
});
|
|
313
|
+
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
314
|
+
});
|
|
315
|
+
|
|
316
|
+
it('should support icon', () => {
|
|
317
|
+
renderAllPriorities({
|
|
318
|
+
v2: true,
|
|
319
|
+
size: 'sm',
|
|
320
|
+
addonStart: iconProp,
|
|
321
|
+
});
|
|
322
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
323
|
+
});
|
|
324
|
+
});
|
|
325
|
+
});
|
|
326
|
+
|
|
327
|
+
describe('addonEnd', () => {
|
|
328
|
+
describe('large', () => {
|
|
329
|
+
it('should support icon', () => {
|
|
330
|
+
renderAllPriorities({
|
|
331
|
+
v2: true,
|
|
332
|
+
size: 'lg',
|
|
333
|
+
addonEnd: iconProp,
|
|
334
|
+
});
|
|
335
|
+
expect(screen.queryAllByTestId('freeze-icon')).toHaveLength(0);
|
|
336
|
+
});
|
|
337
|
+
});
|
|
338
|
+
|
|
339
|
+
describe('medium', () => {
|
|
340
|
+
it('should support icon', () => {
|
|
341
|
+
renderAllPriorities({
|
|
342
|
+
v2: true,
|
|
343
|
+
size: 'sm',
|
|
344
|
+
addonEnd: iconProp,
|
|
345
|
+
});
|
|
346
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
347
|
+
});
|
|
348
|
+
});
|
|
349
|
+
|
|
350
|
+
describe('small', () => {
|
|
351
|
+
it('should support icon', () => {
|
|
352
|
+
renderAllPriorities({
|
|
353
|
+
v2: true,
|
|
354
|
+
size: 'md',
|
|
355
|
+
addonEnd: iconProp,
|
|
356
|
+
});
|
|
357
|
+
expect(screen.getAllByTestId('freeze-icon')).toHaveLength(4);
|
|
358
|
+
});
|
|
359
|
+
});
|
|
360
|
+
});
|
|
361
|
+
});
|
|
235
362
|
});
|
|
@@ -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: {
|
|
@@ -331,7 +331,16 @@ export const Sentiment: StoryObj<PreviewStoryArgs> = {
|
|
|
331
331
|
);
|
|
332
332
|
},
|
|
333
333
|
argTypes: {
|
|
334
|
-
...hideControls([
|
|
334
|
+
...hideControls([
|
|
335
|
+
'sentiment',
|
|
336
|
+
'priority',
|
|
337
|
+
'block',
|
|
338
|
+
'href',
|
|
339
|
+
'target',
|
|
340
|
+
'children',
|
|
341
|
+
'type',
|
|
342
|
+
'className',
|
|
343
|
+
]),
|
|
335
344
|
...previewArgTypes,
|
|
336
345
|
},
|
|
337
346
|
args: {
|
|
@@ -368,7 +377,7 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
|
|
|
368
377
|
);
|
|
369
378
|
},
|
|
370
379
|
argTypes: {
|
|
371
|
-
...hideControls(['priority', 'block', 'href', 'target', '
|
|
380
|
+
...hideControls(['priority', 'block', 'href', 'target', 'children', 'type', 'className']),
|
|
372
381
|
...previewArgTypes,
|
|
373
382
|
},
|
|
374
383
|
args: {
|
|
@@ -401,7 +410,7 @@ export const Size: StoryObj<PreviewStoryArgs> = {
|
|
|
401
410
|
);
|
|
402
411
|
},
|
|
403
412
|
argTypes: {
|
|
404
|
-
...hideControls(['size', 'block', 'href', 'target', '
|
|
413
|
+
...hideControls(['size', 'block', 'href', 'target', 'children', 'type', 'className']),
|
|
405
414
|
...previewArgTypes,
|
|
406
415
|
},
|
|
407
416
|
args: {
|
|
@@ -412,7 +421,7 @@ export const Size: StoryObj<PreviewStoryArgs> = {
|
|
|
412
421
|
};
|
|
413
422
|
|
|
414
423
|
/**
|
|
415
|
-
*
|
|
424
|
+
* If `href` prop is set, the component will be automatically rendered as an HTML anchor element.
|
|
416
425
|
*/
|
|
417
426
|
export const AsAnchor: StoryObj<PreviewStoryArgs> = {
|
|
418
427
|
render: function Render(args: PreviewStoryArgs) {
|
|
@@ -429,9 +438,7 @@ export const AsAnchor: StoryObj<PreviewStoryArgs> = {
|
|
|
429
438
|
...previewArgTypes,
|
|
430
439
|
},
|
|
431
440
|
args: {
|
|
432
|
-
|
|
433
|
-
// eslint-disable-next-line no-script-url
|
|
434
|
-
href: 'javascript:void(0);',
|
|
441
|
+
href: 'https://wise.com',
|
|
435
442
|
previewAddonStart: false,
|
|
436
443
|
previewAddonEnd: false,
|
|
437
444
|
onClick: undefined,
|
|
@@ -494,7 +501,16 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
|
|
|
494
501
|
);
|
|
495
502
|
},
|
|
496
503
|
argTypes: {
|
|
497
|
-
...hideControls([
|
|
504
|
+
...hideControls([
|
|
505
|
+
'href',
|
|
506
|
+
'target',
|
|
507
|
+
'priority',
|
|
508
|
+
'sentiment',
|
|
509
|
+
'disabled',
|
|
510
|
+
'children',
|
|
511
|
+
'type',
|
|
512
|
+
'className',
|
|
513
|
+
]),
|
|
498
514
|
...previewArgTypes,
|
|
499
515
|
},
|
|
500
516
|
args: {
|
|
@@ -505,7 +521,7 @@ export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
|
|
|
505
521
|
};
|
|
506
522
|
|
|
507
523
|
/**
|
|
508
|
-
*
|
|
524
|
+
* Icons are only supported for `sm` and `md` size Buttons. <br />
|
|
509
525
|
* [Design documentation](https://wise.design/components/button#accessories)
|
|
510
526
|
*/
|
|
511
527
|
export const WithIcons: StoryObj<PreviewStoryArgs> = {
|
|
@@ -534,7 +550,7 @@ export const WithIcons: StoryObj<PreviewStoryArgs> = {
|
|
|
534
550
|
);
|
|
535
551
|
},
|
|
536
552
|
argTypes: {
|
|
537
|
-
...hideControls(['href', 'target', '
|
|
553
|
+
...hideControls(['href', 'target', 'sentiment', 'disabled', 'children', 'type', 'className']),
|
|
538
554
|
},
|
|
539
555
|
args: {
|
|
540
556
|
size: 'md',
|
|
@@ -602,7 +618,15 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
|
|
|
602
618
|
</>
|
|
603
619
|
);
|
|
604
620
|
},
|
|
605
|
-
argTypes: hideControls([
|
|
621
|
+
argTypes: hideControls([
|
|
622
|
+
'href',
|
|
623
|
+
'target',
|
|
624
|
+
'sentiment',
|
|
625
|
+
'disabled',
|
|
626
|
+
'children',
|
|
627
|
+
'type',
|
|
628
|
+
'className',
|
|
629
|
+
]),
|
|
606
630
|
args: {
|
|
607
631
|
size: 'md',
|
|
608
632
|
},
|
|
@@ -689,6 +713,7 @@ export const AllVariants = storyConfig(
|
|
|
689
713
|
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
690
714
|
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
691
715
|
block
|
|
716
|
+
href="https://wise.com"
|
|
692
717
|
target="_blank"
|
|
693
718
|
>
|
|
694
719
|
{`${priority} default ${size}`}
|
|
@@ -736,6 +761,7 @@ export const AllVariants = storyConfig(
|
|
|
736
761
|
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
737
762
|
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
738
763
|
block
|
|
764
|
+
href="https://wise.com"
|
|
739
765
|
target="_blank"
|
|
740
766
|
>
|
|
741
767
|
{`${priority} negative ${size}`}
|
package/src/button/Button.tsx
CHANGED
|
@@ -63,17 +63,14 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
63
63
|
)}
|
|
64
64
|
<span className="wds-Button-label" aria-hidden={loading}>
|
|
65
65
|
{size === 'lg' ? (
|
|
66
|
-
children
|
|
66
|
+
<span className="wds-Button-labelText">{children}</span>
|
|
67
67
|
) : (
|
|
68
68
|
<>
|
|
69
|
-
{size === 'md' &&
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<AvatarLayout orientation="horizontal" avatars={addonStart?.value} size={24} />
|
|
75
|
-
</span>
|
|
76
|
-
)}
|
|
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
|
+
)}
|
|
77
74
|
|
|
78
75
|
{addonStart?.type === 'icon' && addonStart.value && (
|
|
79
76
|
<span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--start`}>
|
|
@@ -81,7 +78,7 @@ const Button = forwardRef<ButtonReferenceType, NewButtonProps>(
|
|
|
81
78
|
</span>
|
|
82
79
|
)}
|
|
83
80
|
|
|
84
|
-
{children}
|
|
81
|
+
<span className="wds-Button-labelText">{children}</span>
|
|
85
82
|
|
|
86
83
|
{addonEnd?.type === 'icon' && addonEnd?.value && (
|
|
87
84
|
<span className={`wds-Button-icon wds-Button-icon--${size} wds-Button-icon--end`}>
|
|
@@ -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. */
|
package/src/card/Card.story.tsx
CHANGED
|
@@ -7,9 +7,14 @@ import Card from '.';
|
|
|
7
7
|
|
|
8
8
|
type Story = StoryObj<typeof Card>;
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated use Navigation pattern (via `NavigationOption` component)
|
|
12
|
+
*
|
|
13
|
+
* @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
|
|
14
|
+
*/
|
|
10
15
|
export default {
|
|
11
16
|
component: Card,
|
|
12
|
-
title: 'Layouts/Card',
|
|
17
|
+
title: 'Layouts/Card (Deprecated)',
|
|
13
18
|
args: {
|
|
14
19
|
title: 'A card',
|
|
15
20
|
details: 'Some details about this card',
|
package/src/main.css
CHANGED
|
@@ -834,10 +834,10 @@ div.critical-comms .critical-comms-body {
|
|
|
834
834
|
--Button-background-active: var(--Button-tertiary-background-active);
|
|
835
835
|
--Button-color: var(--Button-tertiary-color);
|
|
836
836
|
}
|
|
837
|
-
.wds-Button--tertiary,
|
|
838
|
-
.wds-Button--tertiary:hover,
|
|
839
|
-
.wds-Button--tertiary:active,
|
|
840
|
-
.wds-Button--tertiary:focus {
|
|
837
|
+
.wds-Button--tertiary .wds-Button-labelText,
|
|
838
|
+
.wds-Button--tertiary:hover .wds-Button-labelText,
|
|
839
|
+
.wds-Button--tertiary:active .wds-Button-labelText,
|
|
840
|
+
.wds-Button--tertiary:focus .wds-Button-labelText {
|
|
841
841
|
-webkit-text-decoration: underline;
|
|
842
842
|
text-decoration: underline;
|
|
843
843
|
text-underline-offset: 3px;
|
|
@@ -4,9 +4,12 @@ import { useState } from 'react';
|
|
|
4
4
|
|
|
5
5
|
import Select, { SelectItem, SelectOptionItem } from './Select';
|
|
6
6
|
|
|
7
|
+
/**
|
|
8
|
+
* @deprecated Use **`SelectInput`** instead (https://neptune.wise.design/blog/2023-11-28-adopting-our-new-selectinput)
|
|
9
|
+
*/
|
|
7
10
|
export default {
|
|
8
11
|
component: Select,
|
|
9
|
-
title: 'Forms/Select',
|
|
12
|
+
title: 'Forms/Select (Deprecated)',
|
|
10
13
|
};
|
|
11
14
|
|
|
12
15
|
const ImageIcon = () => (
|