@transferwise/components 0.0.0-experimental-a6fe828 → 0.0.0-experimental-88fdd24
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/button/src/Button.js +1 -1
- package/build/button/src/Button.js.map +1 -1
- package/build/button/src/Button.mjs +1 -1
- package/build/button/src/Button.mjs.map +1 -1
- package/build/main.css +11 -11
- package/build/styles/button/Button/less/Button.css +11 -11
- package/build/styles/button/Button/less/Button.vars.css +4 -4
- package/build/styles/main.css +11 -11
- package/build/types/button/Button/src/Button.d.ts.map +1 -1
- package/build/types/button/Button/src/Button.types.d.ts +1 -1
- package/build/types/button/Button/src/Button.types.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button/less/Button.css +11 -11
- package/src/button/Button/less/Button.less +5 -5
- package/src/button/Button/less/Button.vars.css +4 -4
- package/src/button/Button/less/Button.vars.less +4 -4
- package/src/button/Button/src/Button.tsx +2 -1
- package/src/button/Button/src/Button.types.ts +1 -1
- package/src/button/Button/stories/Button.story.tsx +9 -4
- package/src/button/LegacyButton/Button.story.tsx +11 -0
- package/src/button/src/Button.tsx +1 -1
- package/src/main.css +11 -11
|
@@ -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.js","sources":["../../../src/button/src/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport LegacyButton, { ButtonProps as LegacyButtonProps } from '../LegacyButton';\nimport NewButton from '../Button';\nimport { ButtonProps as NewButtonProps } from '../Button/src/Button.types';\n\nexport type ButtonProps = {\n useNewButton?: boolean;\n} & (LegacyButtonProps | NewButtonProps);\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, as, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: '
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/button/src/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport LegacyButton, { ButtonProps as LegacyButtonProps } from '../LegacyButton';\nimport NewButton from '../Button';\nimport { ButtonProps as NewButtonProps } from '../Button/src/Button.types';\n\nexport type ButtonProps = {\n useNewButton?: boolean;\n} & (LegacyButtonProps | NewButtonProps);\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, as, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'minimal',\n },\n positive: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'tertiary',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n const mappedAppearance = type === 'negative' ? 'negative' : undefined;\n\n return {\n ...newProps,\n size:\n size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,\n priority: mappedPriority,\n appearance: mappedAppearance || ('appearance' in props ? props.appearance : undefined),\n type: as === 'button' ? props.htmlType : undefined,\n href: as === 'a' ? props.href || '' : undefined,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n ({ useNewButton = false, ...props }, ref) => {\n if (useNewButton) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return <NewButton {...mappedProps} ref={ref as any} />;\n }\n\n return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","as","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedAppearance","appearance","htmlType","href","Button","forwardRef","useNewButton","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;;;AAAA;AAUA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAE,GAAGC,QAAAA;AAAU,GAAA,GAAGL,KAAK,CAAA;AAEvD,EAAA,MAAMM,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBV,IAAI,IAAIF,QAAQ,GAAGK,eAAe,CAACH,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIa,SAAS,CAAA;EAC1F,MAAMC,gBAAgB,GAAGZ,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGW,SAAS,CAAA;EAErE,OAAO;AACL,IAAA,GAAGT,QAAQ;IACXH,IAAI,EACFA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI;AAC5FD,IAAAA,QAAQ,EAAEY,cAAc;AACxBG,IAAAA,UAAU,EAAED,gBAAgB,KAAK,YAAY,IAAIf,KAAK,GAAGA,KAAK,CAACgB,UAAU,GAAGF,SAAS,CAAC;IACtFX,IAAI,EAAEC,EAAE,KAAK,QAAQ,GAAGJ,KAAK,CAACiB,QAAQ,GAAGH,SAAS;IAClDI,IAAI,EAAEd,EAAE,KAAK,GAAG,GAAGJ,KAAK,CAACkB,IAAI,IAAI,EAAE,GAAGJ,SAAAA;GACrB,CAAA;AACrB,CAAC,CAAA;AAED,MAAMK,MAAM,gBAAGC,gBAAU,CACvB,CAAC;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAE,GAAGrB,KAAAA;AAAK,CAAE,EAAEsB,GAAG,KAAI;AAC1C,EAAA,IAAID,YAAY,EAAE;AAChB,IAAA,MAAME,WAAW,GAAGxB,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAOwB,cAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAW,MAAG,CAAA;AACxD,GAAA;EAEA,oBAAOE,cAAA,CAACE,QAAY,EAAA;AAAA,IAAA,GAAM1B,KAA2B;AAAEsB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EACF;AAEDH,MAAM,CAACQ,WAAW,GAAG,QAAQ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.mjs","sources":["../../../src/button/src/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport LegacyButton, { ButtonProps as LegacyButtonProps } from '../LegacyButton';\nimport NewButton from '../Button';\nimport { ButtonProps as NewButtonProps } from '../Button/src/Button.types';\n\nexport type ButtonProps = {\n useNewButton?: boolean;\n} & (LegacyButtonProps | NewButtonProps);\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, as, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: '
|
|
1
|
+
{"version":3,"file":"Button.mjs","sources":["../../../src/button/src/Button.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { forwardRef } from 'react';\nimport LegacyButton, { ButtonProps as LegacyButtonProps } from '../LegacyButton';\nimport NewButton from '../Button';\nimport { ButtonProps as NewButtonProps } from '../Button/src/Button.types';\n\nexport type ButtonProps = {\n useNewButton?: boolean;\n} & (LegacyButtonProps | NewButtonProps);\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, as, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'minimal',\n },\n positive: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'tertiary',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n const mappedAppearance = type === 'negative' ? 'negative' : undefined;\n\n return {\n ...newProps,\n size:\n size === 'xs' || size === 'sm' ? 'sm' : size === 'md' ? 'md' : size === 'lg' ? 'lg' : size,\n priority: mappedPriority,\n appearance: mappedAppearance || ('appearance' in props ? props.appearance : undefined),\n type: as === 'button' ? props.htmlType : undefined,\n href: as === 'a' ? props.href || '' : undefined,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n ({ useNewButton = false, ...props }, ref) => {\n if (useNewButton) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return <NewButton {...mappedProps} ref={ref as any} />;\n }\n\n return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","as","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedAppearance","appearance","htmlType","href","Button","forwardRef","useNewButton","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;AAAA;AAUA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAEC,EAAE;IAAE,GAAGC,QAAAA;AAAU,GAAA,GAAGL,KAAK,CAAA;AAEvD,EAAA,MAAMM,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBV,IAAI,IAAIF,QAAQ,GAAGK,eAAe,CAACH,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIa,SAAS,CAAA;EAC1F,MAAMC,gBAAgB,GAAGZ,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGW,SAAS,CAAA;EAErE,OAAO;AACL,IAAA,GAAGT,QAAQ;IACXH,IAAI,EACFA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAGA,IAAI;AAC5FD,IAAAA,QAAQ,EAAEY,cAAc;AACxBG,IAAAA,UAAU,EAAED,gBAAgB,KAAK,YAAY,IAAIf,KAAK,GAAGA,KAAK,CAACgB,UAAU,GAAGF,SAAS,CAAC;IACtFX,IAAI,EAAEC,EAAE,KAAK,QAAQ,GAAGJ,KAAK,CAACiB,QAAQ,GAAGH,SAAS;IAClDI,IAAI,EAAEd,EAAE,KAAK,GAAG,GAAGJ,KAAK,CAACkB,IAAI,IAAI,EAAE,GAAGJ,SAAAA;GACrB,CAAA;AACrB,CAAC,CAAA;AAED,MAAMK,MAAM,gBAAGC,UAAU,CACvB,CAAC;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAE,GAAGrB,KAAAA;AAAK,CAAE,EAAEsB,GAAG,KAAI;AAC1C,EAAA,IAAID,YAAY,EAAE;AAChB,IAAA,MAAME,WAAW,GAAGxB,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAOwB,GAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAW,MAAG,CAAA;AACxD,GAAA;EAEA,oBAAOE,GAAA,CAACE,QAAY,EAAA;AAAA,IAAA,GAAM1B,KAA2B;AAAEsB,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EACF;AAEDH,MAAM,CAACQ,WAAW,GAAG,QAAQ;;;;"}
|
package/build/main.css
CHANGED
|
@@ -657,10 +657,10 @@ div.critical-comms .critical-comms-body {
|
|
|
657
657
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
658
658
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
659
659
|
--Button-tertiary-color: var(--color-content-primary);
|
|
660
|
-
--Button-
|
|
661
|
-
--Button-
|
|
662
|
-
--Button-
|
|
663
|
-
--Button-
|
|
660
|
+
--Button-minimal-background: transparent;
|
|
661
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
662
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
663
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
664
664
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
665
665
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
666
666
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
|
@@ -766,16 +766,16 @@ div.critical-comms .critical-comms-body {
|
|
|
766
766
|
.wds-Button--tertiary .wds-Button-icon--right {
|
|
767
767
|
color: var(--color-interactive-primary);
|
|
768
768
|
}
|
|
769
|
-
.wds-Button--
|
|
770
|
-
--Button-background: var(--Button-
|
|
771
|
-
--Button-hover-background: var(--Button-
|
|
772
|
-
--Button-active-background: var(--Button-
|
|
773
|
-
--Button-color: var(--Button-
|
|
769
|
+
.wds-Button--minimal {
|
|
770
|
+
--Button-background: var(--Button-minimal-background);
|
|
771
|
+
--Button-hover-background: var(--Button-minimal-hover-background);
|
|
772
|
+
--Button-active-background: var(--Button-minimal-active-background);
|
|
773
|
+
--Button-color: var(--Button-minimal-color);
|
|
774
774
|
-webkit-text-decoration: underline;
|
|
775
775
|
text-decoration: underline;
|
|
776
776
|
}
|
|
777
|
-
.wds-Button--
|
|
778
|
-
.wds-Button--
|
|
777
|
+
.wds-Button--minimal:hover,
|
|
778
|
+
.wds-Button--minimal:hover:active {
|
|
779
779
|
-webkit-text-decoration: underline;
|
|
780
780
|
text-decoration: underline;
|
|
781
781
|
}
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
22
22
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
23
23
|
--Button-tertiary-color: var(--color-content-primary);
|
|
24
|
-
--Button-
|
|
25
|
-
--Button-
|
|
26
|
-
--Button-
|
|
27
|
-
--Button-
|
|
24
|
+
--Button-minimal-background: transparent;
|
|
25
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
26
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
27
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
28
28
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
29
29
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
30
30
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
|
@@ -130,16 +130,16 @@
|
|
|
130
130
|
.wds-Button--tertiary .wds-Button-icon--right {
|
|
131
131
|
color: var(--color-interactive-primary);
|
|
132
132
|
}
|
|
133
|
-
.wds-Button--
|
|
134
|
-
--Button-background: var(--Button-
|
|
135
|
-
--Button-hover-background: var(--Button-
|
|
136
|
-
--Button-active-background: var(--Button-
|
|
137
|
-
--Button-color: var(--Button-
|
|
133
|
+
.wds-Button--minimal {
|
|
134
|
+
--Button-background: var(--Button-minimal-background);
|
|
135
|
+
--Button-hover-background: var(--Button-minimal-hover-background);
|
|
136
|
+
--Button-active-background: var(--Button-minimal-active-background);
|
|
137
|
+
--Button-color: var(--Button-minimal-color);
|
|
138
138
|
-webkit-text-decoration: underline;
|
|
139
139
|
text-decoration: underline;
|
|
140
140
|
}
|
|
141
|
-
.wds-Button--
|
|
142
|
-
.wds-Button--
|
|
141
|
+
.wds-Button--minimal:hover,
|
|
142
|
+
.wds-Button--minimal:hover:active {
|
|
143
143
|
-webkit-text-decoration: underline;
|
|
144
144
|
text-decoration: underline;
|
|
145
145
|
}
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
22
22
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
23
23
|
--Button-tertiary-color: var(--color-content-primary);
|
|
24
|
-
--Button-
|
|
25
|
-
--Button-
|
|
26
|
-
--Button-
|
|
27
|
-
--Button-
|
|
24
|
+
--Button-minimal-background: transparent;
|
|
25
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
26
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
27
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
28
28
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
29
29
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
30
30
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
package/build/styles/main.css
CHANGED
|
@@ -657,10 +657,10 @@ div.critical-comms .critical-comms-body {
|
|
|
657
657
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
658
658
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
659
659
|
--Button-tertiary-color: var(--color-content-primary);
|
|
660
|
-
--Button-
|
|
661
|
-
--Button-
|
|
662
|
-
--Button-
|
|
663
|
-
--Button-
|
|
660
|
+
--Button-minimal-background: transparent;
|
|
661
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
662
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
663
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
664
664
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
665
665
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
666
666
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
|
@@ -766,16 +766,16 @@ div.critical-comms .critical-comms-body {
|
|
|
766
766
|
.wds-Button--tertiary .wds-Button-icon--right {
|
|
767
767
|
color: var(--color-interactive-primary);
|
|
768
768
|
}
|
|
769
|
-
.wds-Button--
|
|
770
|
-
--Button-background: var(--Button-
|
|
771
|
-
--Button-hover-background: var(--Button-
|
|
772
|
-
--Button-active-background: var(--Button-
|
|
773
|
-
--Button-color: var(--Button-
|
|
769
|
+
.wds-Button--minimal {
|
|
770
|
+
--Button-background: var(--Button-minimal-background);
|
|
771
|
+
--Button-hover-background: var(--Button-minimal-hover-background);
|
|
772
|
+
--Button-active-background: var(--Button-minimal-active-background);
|
|
773
|
+
--Button-color: var(--Button-minimal-color);
|
|
774
774
|
-webkit-text-decoration: underline;
|
|
775
775
|
text-decoration: underline;
|
|
776
776
|
}
|
|
777
|
-
.wds-Button--
|
|
778
|
-
.wds-Button--
|
|
777
|
+
.wds-Button--minimal:hover,
|
|
778
|
+
.wds-Button--minimal:hover:active {
|
|
779
779
|
-webkit-text-decoration: underline;
|
|
780
780
|
text-decoration: underline;
|
|
781
781
|
}
|
|
@@ -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"}
|
|
@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
import type { PrimitiveButtonProps, PrimitiveAnchorProps, PrimitiveButtonElementRef, PrimitiveAnchorElementRef } from '../../../primitives';
|
|
3
3
|
import type { SingleAvatarType } from '../../../avatarLayout';
|
|
4
4
|
export type ButtonApperance = 'default' | 'negative';
|
|
5
|
-
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | '
|
|
5
|
+
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
|
|
6
6
|
export type ButtonType = 'button' | 'submit' | 'reset' | undefined;
|
|
7
7
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
8
8
|
export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AACnE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAClF,MAAM,MAAM,cAAc,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,SAAS,CAAC;IAEhC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IAEnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE7B,iDAAiD;IACjD,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,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-88fdd24",
|
|
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-88fdd24",
|
|
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-88fdd24",
|
|
101
101
|
"@wise/art": "^2.16",
|
|
102
102
|
"@wise/components-theming": "^1.0.0",
|
|
103
103
|
"react": ">=18",
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
22
22
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
23
23
|
--Button-tertiary-color: var(--color-content-primary);
|
|
24
|
-
--Button-
|
|
25
|
-
--Button-
|
|
26
|
-
--Button-
|
|
27
|
-
--Button-
|
|
24
|
+
--Button-minimal-background: transparent;
|
|
25
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
26
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
27
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
28
28
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
29
29
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
30
30
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
|
@@ -130,16 +130,16 @@
|
|
|
130
130
|
.wds-Button--tertiary .wds-Button-icon--right {
|
|
131
131
|
color: var(--color-interactive-primary);
|
|
132
132
|
}
|
|
133
|
-
.wds-Button--
|
|
134
|
-
--Button-background: var(--Button-
|
|
135
|
-
--Button-hover-background: var(--Button-
|
|
136
|
-
--Button-active-background: var(--Button-
|
|
137
|
-
--Button-color: var(--Button-
|
|
133
|
+
.wds-Button--minimal {
|
|
134
|
+
--Button-background: var(--Button-minimal-background);
|
|
135
|
+
--Button-hover-background: var(--Button-minimal-hover-background);
|
|
136
|
+
--Button-active-background: var(--Button-minimal-active-background);
|
|
137
|
+
--Button-color: var(--Button-minimal-color);
|
|
138
138
|
-webkit-text-decoration: underline;
|
|
139
139
|
text-decoration: underline;
|
|
140
140
|
}
|
|
141
|
-
.wds-Button--
|
|
142
|
-
.wds-Button--
|
|
141
|
+
.wds-Button--minimal:hover,
|
|
142
|
+
.wds-Button--minimal:hover:active {
|
|
143
143
|
-webkit-text-decoration: underline;
|
|
144
144
|
text-decoration: underline;
|
|
145
145
|
}
|
|
@@ -68,11 +68,11 @@
|
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
&--
|
|
72
|
-
--Button-background: var(--Button-
|
|
73
|
-
--Button-hover-background: var(--Button-
|
|
74
|
-
--Button-active-background: var(--Button-
|
|
75
|
-
--Button-color: var(--Button-
|
|
71
|
+
&--minimal {
|
|
72
|
+
--Button-background: var(--Button-minimal-background);
|
|
73
|
+
--Button-hover-background: var(--Button-minimal-hover-background);
|
|
74
|
+
--Button-active-background: var(--Button-minimal-active-background);
|
|
75
|
+
--Button-color: var(--Button-minimal-color);
|
|
76
76
|
|
|
77
77
|
text-decoration: underline;
|
|
78
78
|
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
22
22
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
23
23
|
--Button-tertiary-color: var(--color-content-primary);
|
|
24
|
-
--Button-
|
|
25
|
-
--Button-
|
|
26
|
-
--Button-
|
|
27
|
-
--Button-
|
|
24
|
+
--Button-minimal-background: transparent;
|
|
25
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
26
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
27
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
28
28
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
29
29
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
30
30
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
25
25
|
--Button-tertiary-color: var(--color-content-primary);
|
|
26
26
|
|
|
27
|
-
--Button-
|
|
28
|
-
--Button-
|
|
29
|
-
--Button-
|
|
30
|
-
--Button-
|
|
27
|
+
--Button-minimal-background: transparent;
|
|
28
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
29
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
30
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
31
31
|
|
|
32
32
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
33
33
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
@@ -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>
|
|
@@ -8,7 +8,7 @@ import type {
|
|
|
8
8
|
import type { SingleAvatarType } from '../../../avatarLayout';
|
|
9
9
|
|
|
10
10
|
export type ButtonApperance = 'default' | 'negative';
|
|
11
|
-
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | '
|
|
11
|
+
export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
|
|
12
12
|
export type ButtonType = 'button' | 'submit' | 'reset' | undefined;
|
|
13
13
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
14
14
|
export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
|
|
@@ -33,7 +33,7 @@ const meta: Meta<typeof Button> = {
|
|
|
33
33
|
priority: {
|
|
34
34
|
type: {
|
|
35
35
|
name: 'enum',
|
|
36
|
-
value: ['primary', 'secondary', 'tertiary', '
|
|
36
|
+
value: ['primary', 'secondary', 'tertiary', 'Minimal'],
|
|
37
37
|
},
|
|
38
38
|
},
|
|
39
39
|
appearance: {
|
|
@@ -136,14 +136,14 @@ export const Tertiary: Story = {
|
|
|
136
136
|
},
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
export const
|
|
139
|
+
export const Minimal: Story = {
|
|
140
140
|
args: {
|
|
141
|
-
priority: '
|
|
141
|
+
priority: 'minimal',
|
|
142
142
|
},
|
|
143
143
|
parameters: {
|
|
144
144
|
docs: {
|
|
145
145
|
description: {
|
|
146
|
-
story: 'A Button with
|
|
146
|
+
story: 'A Button with minimal priority.',
|
|
147
147
|
},
|
|
148
148
|
},
|
|
149
149
|
},
|
|
@@ -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,
|
package/src/main.css
CHANGED
|
@@ -657,10 +657,10 @@ div.critical-comms .critical-comms-body {
|
|
|
657
657
|
--Button-tertiary-hover-background: var(--color-background-neutral-hover);
|
|
658
658
|
--Button-tertiary-active-background: var(--color-background-neutral-active);
|
|
659
659
|
--Button-tertiary-color: var(--color-content-primary);
|
|
660
|
-
--Button-
|
|
661
|
-
--Button-
|
|
662
|
-
--Button-
|
|
663
|
-
--Button-
|
|
660
|
+
--Button-minimal-background: transparent;
|
|
661
|
+
--Button-minimal-hover-background: var(--color-background-screen-hover);
|
|
662
|
+
--Button-minimal-active-background: var(--color-background-screen-active);
|
|
663
|
+
--Button-minimal-color: var(--color-interactive-primary);
|
|
664
664
|
--Button-primary-negative-background: var(--color-sentiment-negative-primary);
|
|
665
665
|
--Button-primary-negative-hover-background: var(--color-sentiment-negative-primary-hover);
|
|
666
666
|
--Button-primary-negative-active-background: var(--color-sentiment-negative-primary-active);
|
|
@@ -766,16 +766,16 @@ div.critical-comms .critical-comms-body {
|
|
|
766
766
|
.wds-Button--tertiary .wds-Button-icon--right {
|
|
767
767
|
color: var(--color-interactive-primary);
|
|
768
768
|
}
|
|
769
|
-
.wds-Button--
|
|
770
|
-
--Button-background: var(--Button-
|
|
771
|
-
--Button-hover-background: var(--Button-
|
|
772
|
-
--Button-active-background: var(--Button-
|
|
773
|
-
--Button-color: var(--Button-
|
|
769
|
+
.wds-Button--minimal {
|
|
770
|
+
--Button-background: var(--Button-minimal-background);
|
|
771
|
+
--Button-hover-background: var(--Button-minimal-hover-background);
|
|
772
|
+
--Button-active-background: var(--Button-minimal-active-background);
|
|
773
|
+
--Button-color: var(--Button-minimal-color);
|
|
774
774
|
-webkit-text-decoration: underline;
|
|
775
775
|
text-decoration: underline;
|
|
776
776
|
}
|
|
777
|
-
.wds-Button--
|
|
778
|
-
.wds-Button--
|
|
777
|
+
.wds-Button--minimal:hover,
|
|
778
|
+
.wds-Button--minimal:hover:active {
|
|
779
779
|
-webkit-text-decoration: underline;
|
|
780
780
|
text-decoration: underline;
|
|
781
781
|
}
|