@transferwise/components 46.83.3 → 46.84.0
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/common/closeButton/CloseButton.js.map +1 -1
- package/build/common/closeButton/CloseButton.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +8 -3
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs +8 -3
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/i18n/de.json +5 -0
- package/build/i18n/de.json.js +5 -0
- package/build/i18n/de.json.js.map +1 -1
- package/build/i18n/de.json.mjs +5 -0
- package/build/i18n/de.json.mjs.map +1 -1
- package/build/iconButton/IconButton.js +41 -0
- package/build/iconButton/IconButton.js.map +1 -0
- package/build/iconButton/IconButton.mjs +39 -0
- package/build/iconButton/IconButton.mjs.map +1 -0
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/main.css +86 -32
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +83 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +81 -0
- package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -0
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +90 -0
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -0
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +88 -0
- package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -0
- package/build/styles/iconButton/IconButton.css +82 -0
- package/build/styles/main.css +86 -32
- package/build/styles/summary/Summary.css +4 -0
- package/build/summary/Summary.js +3 -3
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +3 -3
- package/build/summary/Summary.mjs.map +1 -1
- package/build/types/common/closeButton/CloseButton.d.ts +3 -0
- package/build/types/common/closeButton/CloseButton.d.ts.map +1 -1
- package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
- package/build/types/iconButton/IconButton.d.ts +15 -0
- package/build/types/iconButton/IconButton.d.ts.map +1 -0
- package/build/types/iconButton/index.d.ts +3 -0
- package/build/types/iconButton/index.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/types/summary/Summary.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/common/closeButton/CloseButton.tsx +3 -0
- package/src/flowNavigation/FlowNavigation.spec.js +7 -8
- package/src/flowNavigation/FlowNavigation.tsx +11 -2
- package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +27 -3
- package/src/i18n/de.json +5 -0
- package/src/iconButton/IconButton.css +82 -0
- package/src/iconButton/IconButton.less +55 -0
- package/src/iconButton/IconButton.story.tsx +107 -0
- package/src/iconButton/IconButton.tsx +51 -0
- package/src/iconButton/index.ts +2 -0
- package/src/index.ts +2 -0
- package/src/main.css +86 -32
- package/src/main.less +1 -1
- package/src/summary/Summary.css +4 -0
- package/src/summary/Summary.less +3 -0
- package/src/summary/Summary.story.tsx +13 -3
- package/src/summary/Summary.tsx +13 -11
- package/build/flowNavigation/backButton/BackButton.js +0 -30
- package/build/flowNavigation/backButton/BackButton.js.map +0 -1
- package/build/flowNavigation/backButton/BackButton.mjs +0 -28
- package/build/flowNavigation/backButton/BackButton.mjs.map +0 -1
- package/build/styles/flowNavigation/backButton/BackButton.css +0 -32
- package/build/types/flowNavigation/backButton/BackButton.d.ts +0 -7
- package/build/types/flowNavigation/backButton/BackButton.d.ts.map +0 -1
- package/build/types/flowNavigation/backButton/index.d.ts +0 -3
- package/build/types/flowNavigation/backButton/index.d.ts.map +0 -1
- package/src/flowNavigation/backButton/BackButton.css +0 -32
- package/src/flowNavigation/backButton/BackButton.less +0 -36
- package/src/flowNavigation/backButton/BackButton.tsx +0 -29
- package/src/flowNavigation/backButton/index.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: ActionOptions;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n <div className=\"np-summary__icon\">\n
|
|
1
|
+
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport { Action, ActionOptions } from '../common/action/Action';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: ActionOptions;\n /**\n * Decides which html element should wrap the Summary\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated please use description instead\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated please use info instead\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated please use icon instead\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && <Action action={action} className=\"np-summary__action\" />}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Action"],"mappings":"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"}
|
|
@@ -5,6 +5,9 @@ export type CloseButtonProps = Pick<React.ComponentPropsWithoutRef<'button'>, 'a
|
|
|
5
5
|
isDisabled?: boolean;
|
|
6
6
|
testId?: string;
|
|
7
7
|
};
|
|
8
|
+
/**
|
|
9
|
+
* @deprecated Use `<IconButton />` component instead
|
|
10
|
+
*/
|
|
8
11
|
export declare const CloseButton: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "className" | "aria-label" | "onClick"> & {
|
|
9
12
|
size?: SizeSmall | SizeMedium | SizeLarge;
|
|
10
13
|
filled?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../../../../src/common/closeButton/CloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI7E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,YAAY,GAAG,WAAW,GAAG,SAAS,CACvC,GAAG;IACF,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW;
|
|
1
|
+
{"version":3,"file":"CloseButton.d.ts","sourceRoot":"","sources":["../../../../src/common/closeButton/CloseButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAI7E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,YAAY,GAAG,WAAW,GAAG,SAAS,CACvC,GAAG;IACF,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW;WATf,SAAS,GAAG,UAAU,GAAG,SAAS;aAChC,OAAO;iBACH,OAAO;aACX,MAAM;4DA6Cf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAOA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAOA,OAAgB,EAAE,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAQxD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,SAAS,IAAI,EAAE,CAAC;CACxB;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,gCAsErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
|
|
2
|
+
export type Props = {
|
|
3
|
+
size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
4
|
+
priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
|
|
5
|
+
type?: 'default' | 'negative';
|
|
6
|
+
'data-testid'?: string;
|
|
7
|
+
} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;
|
|
8
|
+
declare const IconButton: import("react").ForwardRefExoticComponent<{
|
|
9
|
+
size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
10
|
+
priority?: "primary" | "secondary" | "tertiary" | "minimal";
|
|
11
|
+
type?: "default" | "negative";
|
|
12
|
+
'data-testid'?: string;
|
|
13
|
+
} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "onClick" | "target" | "href"> & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "disabled"> & Pick<HTMLAttributes<HTMLDivElement>, "className" | "role" | "aria-label" | "children"> & import("react").RefAttributes<unknown>>;
|
|
14
|
+
export default IconButton;
|
|
15
|
+
//# sourceMappingURL=IconButton.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/iconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAK/F,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;IAC5D,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAC9E,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,GACrE,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAEzF,QAAA,MAAM,UAAU;WARP,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;eAC5B,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS;WACpD,SAAS,GAAG,UAAU;oBACb,MAAM;2RAuCtB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/iconButton/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -68,6 +68,7 @@ export type { TypeaheadOption, TypeaheadProps } from './typeahead';
|
|
|
68
68
|
export type { UploadProps } from './upload';
|
|
69
69
|
export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
|
|
70
70
|
export type { WithIdProps } from './withId';
|
|
71
|
+
export type { IconButtonProps } from './iconButton';
|
|
71
72
|
/**
|
|
72
73
|
* Components
|
|
73
74
|
*/
|
|
@@ -83,6 +84,7 @@ export { default as AvatarWrapper } from './avatarWrapper';
|
|
|
83
84
|
export { default as Badge } from './badge';
|
|
84
85
|
export { default as Body } from './body';
|
|
85
86
|
export { default as Button } from './button';
|
|
87
|
+
export { default as IconButton } from './iconButton';
|
|
86
88
|
export { default as Carousel } from './carousel';
|
|
87
89
|
export { default as Card } from './card';
|
|
88
90
|
export { default as Checkbox } from './checkbox';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAkBhE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,
|
|
1
|
+
{"version":3,"file":"Summary.d.ts","sourceRoot":"","sources":["../../../src/summary/Summary.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,WAAW,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAI7D,OAAO,EAEL,UAAU,EACV,aAAa,EACb,aAAa,EAId,MAAM,WAAW,CAAC;AACnB,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,EAAU,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAkBhE,MAAM,WAAW,KAAK;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE;QACL,OAAO,EAAE,SAAS,CAAC;QACnB,KAAK,CAAC,EAAE,SAAS,CAAC;KACnB,CAAC;IACF;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC,CAAC;IACxF;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,MAAM,CAAC,EAAE,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;IACpD;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,QAAA,MAAM,OAAO,6GAYV,KAAK,gCAkFP,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.84.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
"rollup-preserve-directives": "^1.1.1",
|
|
93
93
|
"storybook": "^8.2.2",
|
|
94
94
|
"@transferwise/less-config": "3.1.0",
|
|
95
|
-
"@
|
|
96
|
-
"@
|
|
95
|
+
"@transferwise/neptune-css": "14.20.1",
|
|
96
|
+
"@wise/components-theming": "1.6.1"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3.13.1",
|
|
@@ -15,11 +15,6 @@ jest.mock('./animatedLabel', () => {
|
|
|
15
15
|
);
|
|
16
16
|
};
|
|
17
17
|
});
|
|
18
|
-
jest.mock('./backButton', () => {
|
|
19
|
-
return function ({ className, label }) {
|
|
20
|
-
return <div className={className}>BackButton{label}</div>;
|
|
21
|
-
};
|
|
22
|
-
});
|
|
23
18
|
|
|
24
19
|
describe('FlowNavigation', () => {
|
|
25
20
|
beforeEach(() => {
|
|
@@ -171,14 +166,18 @@ describe('FlowNavigation', () => {
|
|
|
171
166
|
it('renders BackButton with AnimatedLabel if onGoBack is provided and activeStep > 0', () => {
|
|
172
167
|
const { rerender } = render(<FlowNavigation {...props} onGoBack={jest.fn()} />);
|
|
173
168
|
|
|
174
|
-
expect(
|
|
169
|
+
expect(
|
|
170
|
+
screen.queryByRole('button', { name: /back to previous step/i }),
|
|
171
|
+
).not.toBeInTheDocument();
|
|
175
172
|
|
|
176
173
|
rerender(<FlowNavigation {...props} activeStep={1} />);
|
|
177
|
-
expect(
|
|
174
|
+
expect(
|
|
175
|
+
screen.queryByRole('button', { name: /back to previous step/i }),
|
|
176
|
+
).not.toBeInTheDocument();
|
|
178
177
|
|
|
179
178
|
rerender(<FlowNavigation {...props} activeStep={1} onGoBack={jest.fn()} />);
|
|
180
179
|
|
|
181
|
-
expect(screen.
|
|
180
|
+
expect(screen.getByRole('button', { name: /back to previous step/i })).toBeInTheDocument();
|
|
182
181
|
expect(screen.getByText('AnimatedLabel')).toBeInTheDocument();
|
|
183
182
|
});
|
|
184
183
|
|
|
@@ -10,7 +10,8 @@ import Stepper, { type Step } from '../stepper/Stepper';
|
|
|
10
10
|
import { useScreenSize } from '../common/hooks/useScreenSize';
|
|
11
11
|
import messages from './FlowNavigation.messages';
|
|
12
12
|
import AnimatedLabel from './animatedLabel';
|
|
13
|
-
import
|
|
13
|
+
import IconButton from '../iconButton';
|
|
14
|
+
import { ArrowLeft } from '@transferwise/icons';
|
|
14
15
|
|
|
15
16
|
export interface FlowNavigationProps {
|
|
16
17
|
activeStep?: number;
|
|
@@ -66,7 +67,15 @@ const FlowNavigation = ({
|
|
|
66
67
|
leftContent={
|
|
67
68
|
<>
|
|
68
69
|
{!screenSm && displayGoBack ? (
|
|
69
|
-
<
|
|
70
|
+
<IconButton
|
|
71
|
+
size={40}
|
|
72
|
+
priority="tertiary"
|
|
73
|
+
type="default"
|
|
74
|
+
aria-label={intl.formatMessage(messages.back)}
|
|
75
|
+
onClick={onGoBack}
|
|
76
|
+
>
|
|
77
|
+
<ArrowLeft />
|
|
78
|
+
</IconButton>
|
|
70
79
|
) : (
|
|
71
80
|
<div className="np-flow-header__left">{logo}</div>
|
|
72
81
|
)}
|
|
@@ -8,9 +8,33 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
|
|
|
8
8
|
<div
|
|
9
9
|
class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
|
|
10
10
|
>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
<button
|
|
12
|
+
aria-disabled="false"
|
|
13
|
+
aria-label="back to previous step"
|
|
14
|
+
aria-live="off"
|
|
15
|
+
class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
|
|
16
|
+
style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
|
|
17
|
+
type="button"
|
|
18
|
+
>
|
|
19
|
+
<span
|
|
20
|
+
class="tw-icon tw-icon-arrow-left "
|
|
21
|
+
data-testid="arrow-left-icon"
|
|
22
|
+
>
|
|
23
|
+
<svg
|
|
24
|
+
aria-hidden="true"
|
|
25
|
+
fill="currentColor"
|
|
26
|
+
focusable="false"
|
|
27
|
+
height="16"
|
|
28
|
+
role="none"
|
|
29
|
+
viewBox="0 0 24 24"
|
|
30
|
+
width="16"
|
|
31
|
+
>
|
|
32
|
+
<path
|
|
33
|
+
d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
|
|
34
|
+
/>
|
|
35
|
+
</svg>
|
|
36
|
+
</span>
|
|
37
|
+
</button>
|
|
14
38
|
<div
|
|
15
39
|
class="m-x-1"
|
|
16
40
|
data-testid="activeLabel-1"
|
package/src/i18n/de.json
CHANGED
|
@@ -35,6 +35,11 @@
|
|
|
35
35
|
"neptune.Summary.statusDone": "Schritt erledigt",
|
|
36
36
|
"neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
|
|
37
37
|
"neptune.Summary.statusPending": "Schritt ausstehend",
|
|
38
|
+
"neptune.Table.actionHeader": "Aktion",
|
|
39
|
+
"neptune.Table.emptyData": "Keine Ergebnisse gefunden",
|
|
40
|
+
"neptune.Table.loaded": "Tabellendaten wurden geladen",
|
|
41
|
+
"neptune.Table.loading": "Tabellendaten werden geladen",
|
|
42
|
+
"neptune.Table.refreshPage": "Seite aktualisieren",
|
|
38
43
|
"neptune.Upload.csButtonText": "Eine andere Datei hochladen?",
|
|
39
44
|
"neptune.Upload.csFailureText": "Hochladen fehlgeschlagen. Bitte versuche es erneut",
|
|
40
45
|
"neptune.Upload.csSuccessText": "Fertig hochgeladen!",
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
.np-icon-button {
|
|
2
|
+
border: none;
|
|
3
|
+
}
|
|
4
|
+
.np-icon-button-tertiary-default {
|
|
5
|
+
color: var(--color-interactive-primary);
|
|
6
|
+
background-color: rgba(134,167,189,0.10196);
|
|
7
|
+
background-color: var(--color-background-neutral);
|
|
8
|
+
}
|
|
9
|
+
.np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
|
|
10
|
+
background-color: var(--color-background-neutral-hover);
|
|
11
|
+
}
|
|
12
|
+
.np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
|
|
13
|
+
background-color: var(--color-background-neutral-active);
|
|
14
|
+
}
|
|
15
|
+
.np-icon-button-primary-default {
|
|
16
|
+
color: var(--color-interactive-control);
|
|
17
|
+
background-color: #00a2dd;
|
|
18
|
+
background-color: var(--color-interactive-accent);
|
|
19
|
+
}
|
|
20
|
+
.np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
|
|
21
|
+
background-color: #008fc9;
|
|
22
|
+
background-color: var(--color-interactive-accent-hover);
|
|
23
|
+
}
|
|
24
|
+
.np-icon-button-primary-default:not(.disabled):not(:disabled):active {
|
|
25
|
+
background-color: #0081ba;
|
|
26
|
+
background-color: var(--color-interactive-accent-active);
|
|
27
|
+
}
|
|
28
|
+
.np-icon-button-primary-negative {
|
|
29
|
+
color: var(--color-contrast-overlay);
|
|
30
|
+
background-color: var(--color-sentiment-negative-primary);
|
|
31
|
+
}
|
|
32
|
+
.np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
|
|
33
|
+
background-color: var(--color-sentiment-negative-primary-hover);
|
|
34
|
+
}
|
|
35
|
+
.np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
|
|
36
|
+
background-color: var(--color-sentiment-negative-primary-active);
|
|
37
|
+
}
|
|
38
|
+
.np-theme-personal--bright-green .np-icon-button-primary-negative {
|
|
39
|
+
color: var(--color-white);
|
|
40
|
+
}
|
|
41
|
+
.np-icon-button-minimal-default {
|
|
42
|
+
color: var(--color-interactive-primary);
|
|
43
|
+
background-color: #ffffff;
|
|
44
|
+
background-color: var(--color-background-screen);
|
|
45
|
+
background-color: transparent;
|
|
46
|
+
}
|
|
47
|
+
.np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
|
|
48
|
+
background-color: var(--color-background-screen-hover);
|
|
49
|
+
}
|
|
50
|
+
.np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
|
|
51
|
+
background-color: var(--color-background-screen-active);
|
|
52
|
+
}
|
|
53
|
+
.np-icon-button-secondary-default {
|
|
54
|
+
color: var(--color-interactive-primary);
|
|
55
|
+
background-color: var(--color-interactive-neutral);
|
|
56
|
+
}
|
|
57
|
+
.np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
|
|
58
|
+
background-color: var(--color-interactive-neutral-hover);
|
|
59
|
+
}
|
|
60
|
+
.np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
|
|
61
|
+
background-color: var(--color-interactive-neutral-active);
|
|
62
|
+
}
|
|
63
|
+
.np-theme-personal--bright-green .np-icon-button-secondary-default,
|
|
64
|
+
.np-theme-personal--forest-green .np-icon-button-secondary-default {
|
|
65
|
+
color: var(--color-interactive-control);
|
|
66
|
+
}
|
|
67
|
+
.np-icon-button-secondary-negative {
|
|
68
|
+
color: var(--color-sentiment-negative-primary);
|
|
69
|
+
background-color: var(--color-sentiment-negative-secondary);
|
|
70
|
+
}
|
|
71
|
+
.np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
|
|
72
|
+
background-color: var(--color-sentiment-negative-secondary-hover);
|
|
73
|
+
}
|
|
74
|
+
.np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
|
|
75
|
+
background-color: var(--color-sentiment-negative-secondary-active);
|
|
76
|
+
}
|
|
77
|
+
.np-theme-personal--bright-green .np-icon-button-secondary-negative {
|
|
78
|
+
color: var(--color-white);
|
|
79
|
+
}
|
|
80
|
+
.np-theme-personal--forest-green .np-icon-button-secondary-negative {
|
|
81
|
+
color: var(--color-contrast-overlay);
|
|
82
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
.np-icon-button {
|
|
2
|
+
border: none;
|
|
3
|
+
&-tertiary-default {
|
|
4
|
+
.colors(--color-interactive-primary, --color-background-neutral);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
&-primary-default {
|
|
8
|
+
.colors(--color-interactive-control, --color-interactive-accent);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&-primary-negative {
|
|
12
|
+
.colors(--color-contrast-overlay, --color-sentiment-negative-primary);
|
|
13
|
+
|
|
14
|
+
.np-theme-personal--bright-green & {
|
|
15
|
+
color: var(--color-white);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&-minimal-default {
|
|
20
|
+
.colors(--color-interactive-primary, --color-background-screen);
|
|
21
|
+
background-color: transparent;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&-secondary-default {
|
|
25
|
+
.colors(--color-interactive-primary, --color-interactive-neutral);
|
|
26
|
+
|
|
27
|
+
.np-theme-personal--bright-green &,
|
|
28
|
+
.np-theme-personal--forest-green & {
|
|
29
|
+
color: var(--color-interactive-control);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&-secondary-negative {
|
|
34
|
+
.colors(--color-sentiment-negative-primary, --color-sentiment-negative-secondary);
|
|
35
|
+
|
|
36
|
+
.np-theme-personal--bright-green & {
|
|
37
|
+
color: var(--color-white);
|
|
38
|
+
}
|
|
39
|
+
.np-theme-personal--forest-green & {
|
|
40
|
+
color: var(--color-contrast-overlay);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.colors(@icon-color, @bg-color) {
|
|
45
|
+
color: var(@icon-color);
|
|
46
|
+
background-color: var(@bg-color);
|
|
47
|
+
|
|
48
|
+
&:not(.disabled, :disabled):hover {
|
|
49
|
+
background-color:~"var(@{bg-color}-hover)";
|
|
50
|
+
}
|
|
51
|
+
&:not(.disabled, :disabled):active {
|
|
52
|
+
background-color:~"var(@{bg-color}-active)";
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
/* eslint-disable react/jsx-key */
|
|
2
|
+
import { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { ArrowLeft } from '@transferwise/icons';
|
|
4
|
+
import IconButton, { Props } from './IconButton';
|
|
5
|
+
import { action } from '@storybook/addon-actions';
|
|
6
|
+
import Body from '../body';
|
|
7
|
+
|
|
8
|
+
export default {
|
|
9
|
+
title: 'Actions/IconButton',
|
|
10
|
+
} satisfies Meta<typeof IconButton>;
|
|
11
|
+
|
|
12
|
+
type Story = StoryObj<typeof IconButton>;
|
|
13
|
+
|
|
14
|
+
const sizes: Props['size'][] = [16, 24, 32, 40, 48, 56, 72];
|
|
15
|
+
|
|
16
|
+
const Template = ({ size, disabled }: Props) => {
|
|
17
|
+
return (
|
|
18
|
+
<>
|
|
19
|
+
<IconButton
|
|
20
|
+
size={size}
|
|
21
|
+
disabled={disabled}
|
|
22
|
+
aria-label="One step back"
|
|
23
|
+
priority="primary"
|
|
24
|
+
type="default"
|
|
25
|
+
onClick={action('button click')}
|
|
26
|
+
>
|
|
27
|
+
<ArrowLeft />
|
|
28
|
+
</IconButton>
|
|
29
|
+
<IconButton
|
|
30
|
+
size={size}
|
|
31
|
+
disabled={disabled}
|
|
32
|
+
aria-label="One step back"
|
|
33
|
+
priority="secondary"
|
|
34
|
+
type="default"
|
|
35
|
+
onClick={action('button click')}
|
|
36
|
+
>
|
|
37
|
+
<ArrowLeft />
|
|
38
|
+
</IconButton>
|
|
39
|
+
<IconButton
|
|
40
|
+
size={size}
|
|
41
|
+
disabled={disabled}
|
|
42
|
+
aria-label="One step back"
|
|
43
|
+
priority="tertiary"
|
|
44
|
+
type="default"
|
|
45
|
+
onClick={action('button click')}
|
|
46
|
+
>
|
|
47
|
+
<ArrowLeft />
|
|
48
|
+
</IconButton>
|
|
49
|
+
<IconButton
|
|
50
|
+
size={size}
|
|
51
|
+
disabled={disabled}
|
|
52
|
+
aria-label="One step back"
|
|
53
|
+
priority="minimal"
|
|
54
|
+
type="default"
|
|
55
|
+
onClick={action('button click')}
|
|
56
|
+
>
|
|
57
|
+
<ArrowLeft />
|
|
58
|
+
</IconButton>
|
|
59
|
+
<IconButton
|
|
60
|
+
size={size}
|
|
61
|
+
disabled={disabled}
|
|
62
|
+
aria-label="One step back"
|
|
63
|
+
priority="primary"
|
|
64
|
+
type="negative"
|
|
65
|
+
onClick={action('button click')}
|
|
66
|
+
>
|
|
67
|
+
<ArrowLeft />
|
|
68
|
+
</IconButton>
|
|
69
|
+
<IconButton
|
|
70
|
+
size={size}
|
|
71
|
+
disabled={disabled}
|
|
72
|
+
aria-label="One step back"
|
|
73
|
+
priority="secondary"
|
|
74
|
+
type="negative"
|
|
75
|
+
onClick={action('button click')}
|
|
76
|
+
>
|
|
77
|
+
<ArrowLeft />
|
|
78
|
+
</IconButton>
|
|
79
|
+
</>
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export const Basic: Story = {
|
|
84
|
+
tags: ['autodocs'],
|
|
85
|
+
render: () => {
|
|
86
|
+
return (
|
|
87
|
+
<div
|
|
88
|
+
style={{
|
|
89
|
+
gap: '1em',
|
|
90
|
+
display: 'grid',
|
|
91
|
+
justifyContent: 'space-between',
|
|
92
|
+
gridTemplate: `auto auto / repeat(6, min-content)`,
|
|
93
|
+
}}
|
|
94
|
+
>
|
|
95
|
+
{['Primary', 'Secondary', 'Tertiary', 'Text', 'Neg primary', 'Neg secondary'].map(
|
|
96
|
+
(variant) => (
|
|
97
|
+
<Body type="body-default-bold">{variant}</Body>
|
|
98
|
+
),
|
|
99
|
+
)}
|
|
100
|
+
{sizes.map((size) => (
|
|
101
|
+
<Template size={size} />
|
|
102
|
+
))}
|
|
103
|
+
<Template size={72} disabled />
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
},
|
|
107
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react';
|
|
2
|
+
import { PrimitiveAnchor, PrimitiveButton } from '../primitives';
|
|
3
|
+
import Circle from '../common/circle';
|
|
4
|
+
import { clsx } from 'clsx';
|
|
5
|
+
|
|
6
|
+
export type Props = {
|
|
7
|
+
size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
8
|
+
priority?: 'primary' | 'secondary' | 'tertiary' | 'minimal';
|
|
9
|
+
type?: 'default' | 'negative';
|
|
10
|
+
'data-testid'?: string;
|
|
11
|
+
} & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'target' | 'onClick'> &
|
|
12
|
+
Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'disabled'> &
|
|
13
|
+
Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'role' | 'children' | 'aria-label'>;
|
|
14
|
+
|
|
15
|
+
const IconButton = forwardRef(function IconButton(
|
|
16
|
+
{
|
|
17
|
+
size = 48,
|
|
18
|
+
href = '#',
|
|
19
|
+
children,
|
|
20
|
+
className,
|
|
21
|
+
priority = 'primary',
|
|
22
|
+
type = 'default',
|
|
23
|
+
...props
|
|
24
|
+
}: Props,
|
|
25
|
+
ref,
|
|
26
|
+
) {
|
|
27
|
+
const isLink = href !== '#';
|
|
28
|
+
return (
|
|
29
|
+
// @ts-expect-error it's either link or `button` element so it has `onClick` / `href`
|
|
30
|
+
<Circle
|
|
31
|
+
ref={ref}
|
|
32
|
+
as={isLink ? PrimitiveAnchor : PrimitiveButton}
|
|
33
|
+
size={size}
|
|
34
|
+
fixedSize
|
|
35
|
+
className={clsx(
|
|
36
|
+
'np-icon-button',
|
|
37
|
+
`np-icon-button-${priority}-${type}`,
|
|
38
|
+
{
|
|
39
|
+
disabled: props.disabled,
|
|
40
|
+
},
|
|
41
|
+
className,
|
|
42
|
+
)}
|
|
43
|
+
{...(isLink ? { href } : {})}
|
|
44
|
+
{...props}
|
|
45
|
+
>
|
|
46
|
+
{children}
|
|
47
|
+
</Circle>
|
|
48
|
+
);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
export default IconButton;
|
package/src/index.ts
CHANGED
|
@@ -95,6 +95,7 @@ export type { TypeaheadOption, TypeaheadProps } from './typeahead';
|
|
|
95
95
|
export type { UploadProps } from './upload';
|
|
96
96
|
export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
|
|
97
97
|
export type { WithIdProps } from './withId';
|
|
98
|
+
export type { IconButtonProps } from './iconButton';
|
|
98
99
|
|
|
99
100
|
/**
|
|
100
101
|
* Components
|
|
@@ -111,6 +112,7 @@ export { default as AvatarWrapper } from './avatarWrapper';
|
|
|
111
112
|
export { default as Badge } from './badge';
|
|
112
113
|
export { default as Body } from './body';
|
|
113
114
|
export { default as Button } from './button';
|
|
115
|
+
export { default as IconButton } from './iconButton';
|
|
114
116
|
export { default as Carousel } from './carousel';
|
|
115
117
|
export { default as Card } from './card';
|
|
116
118
|
export { default as Checkbox } from './checkbox';
|