@transferwise/components 0.0.0-experimental-5be4883 → 0.0.0-experimental-d794fd5
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/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +4 -28
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +4 -28
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +0 -2
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +0 -2
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/types/avatarView/AvatarView.d.ts +1 -1
- package/build/types/avatarView/AvatarView.d.ts.map +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -4
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts +1 -2
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/avatarView/AvatarView.tsx +1 -1
- package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +17 -127
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +7 -45
- package/src/statusIcon/StatusIcon.tsx +1 -8
- package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx +0 -69
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n '
|
|
1
|
+
{"version":3,"file":"AvatarView.js","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n if ((!anyBadge && !selected) || size <= 16) {\n return children;\n }\n\n if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n return (\n <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n {children}\n </Dot>\n );\n }\n\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAASA,UAAUA,CAAC;AAClBC,EAAAA,QAAQ,GAAGC,SAAS;AACpBC,EAAAA,IAAI,GAAG,EAAE;EACTC,QAAQ;EACRC,KAAK;AACLC,EAAAA,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,KAAK;EACLC,MAAM;EACNC,WAAW;EACXC,WAAW;EACX,GAAGC;AAAS,CACN,EAAA;EACN,oBACEC,cAAA,CAACC,cAAM,EAAA;AACLX,IAAAA,IAAI,EAAEA,IAAK;IACXY,SAAS,EAAA,IAAA;IACTR,SAAS,EAAES,SAAI,CACb,gBAAgB,EAChBV,WAAW,GAAG,4BAA4B,GAAG,gCAAgC,EAC7E;AAAE,MAAA,yBAAyB,EAAEF;KAAU,EACvCG,SAAS,CACT;AAAA,IAAA,GACEK,SAAS;IAAAX,QAAA,eAEbY,cAAA,CAACI,MAAM,EAAA;AAACC,MAAAA,MAAM,EAAE;QAAEf,IAAI;AAAEC,QAAAA;OAAW;AAAA,MAAA,GAAKC,KAAK;MAAAJ,QAAA,eAC3CY,cAAA,CAACC,cAAM,EAAA;AACLX,QAAAA,IAAI,EAAEA,IAAK;QACXY,SAAS,EAAA,IAAA;AACTR,QAAAA,SAAS,EAAES,SAAI,CAAC,wBAAwB,CAAE;AAC1CG,QAAAA,YAAY,EAAE,CAACb,WAAW,IAAIF,QAAS;AACvCI,QAAAA,KAAK,EAAE;AACL,UAAA,IAAIJ,QAAQ,IAAI;AACd,YAAA,uBAAuB,EAAE,kCAAkC;AAC3D,YAAA,uBAAuB,EAAE,CAAA,EAAGgB,yBAAyB,CAACjB,IAAI,CAAC,CAAA,EAAA;WAC5D,CAAC;UACF,GAAGK;SACH;QAAAP,QAAA,eAEFY,cAAA,CAACQ,iBAAiB,EAAA;UAAOZ,MAAM;UAAEC,WAAW;UAAEC,WAAW;AAAAV,UAAAA,QAAA,EACtDA;SACgB;OACb;KACF;AACV,GAAQ,CAAC;AAEb;AAEA;AACA,MAAMqB,oBAAoB,GAAG;AAC3B,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CAC8C;AAEpD;AACA,MAAMF,yBAAyB,GAAG;AAChC,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE,CAAC;AACL,EAAA,EAAE,EAAE;CACL;AAED;AACA,MAAMG,kBAAkB,GAAG;EACzB,EAAE,EAAE,EAAE;AACN,EAAA,EAAE,EAAE;CACL;AAOD;;AAEG;AACH,SAASN,MAAMA,CAAC;EACdhB,QAAQ;EACRiB,MAAM;AACN,EAAA,YAAY,EAAEM,SAAS;AACvBC,EAAAA,KAAK,EAAEC,WAAW;EAClB,GAAGC;AAAW,CACF,EAAA;EACZ,MAAM;AAAExB,IAAAA,IAAI,GAAG,EAAE;AAAEC,IAAAA;AAAQ,GAAE,GAAGc,MAAM;AACtC,EAAA,MAAMU,QAAQ,GAAGC,MAAM,CAACC,MAAM,CAAC;IAAEJ,WAAW;IAAE,GAAGC;GAAa,CAAC,CAACI,MAAM,CAACC,OAAO,CAAC,CAACC,MAAM,GAAG,CAAC;EAE1F,IAAK,CAACL,QAAQ,IAAI,CAACxB,QAAQ,IAAKD,IAAI,IAAI,EAAE,EAAE;AAC1C,IAAA,OAAOF,QAAQ;AACjB,EAAA;EAEA,IAAI0B,WAAW,CAACO,IAAI,KAAK,cAAc,IAAIP,WAAW,CAACO,IAAI,KAAK,QAAQ,EAAE;IACxE,oBACErB,cAAA,CAACsB,WAAG,EAAA;AAACC,MAAAA,UAAU,EAAEjC,IAAK;MAACkC,OAAO,EAAEV,WAAW,CAACO,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,cAAe;AAAAjC,MAAAA,QAAA,EACvFA;AAAQ,KACN,CAAC;AAEV,EAAA;AAEA,EAAA,MAAMqC,SAAS,GAA6BhB,oBAAoB,CAACnB,IAAI,CAAC;EACtE,oBACEU,cAAA,CAAC0B,aAAK,EAAA;AACJ,IAAA,YAAA,EAAYf,SAAU;AACtBrB,IAAAA,IAAI,EAAEmC,SAAU;AAChBjC,IAAAA,KAAK,EACHqB,WAAW,gBACTb,cAAA,CAACC,cAAM,EAAA;MAACC,SAAS,EAAA,IAAA;AAACZ,MAAAA,IAAI,EAAEmC,SAAU;AAAArC,MAAAA,QAAA,EAC/ByB;AAAW,KACN,CAAC,gBAETb,cAAA,CAAC2B,mBAAW,EAAA;AAAA,MAAA,IAAMpC,QAAQ,GAAG;AAAEqC,QAAAA,MAAM,EAAE;AAAU,OAAE,GAAGd,WAAW,CAAA;AAAGxB,MAAAA,IAAI,EAAEmC;AAAU,KAAA,CAEvF;AACD9B,IAAAA,KAAK,EAAE;AACL;AACA,MAAA,0BAA0B,EAAE,CAAA,EAAGe,kBAAkB,CAACpB,IAAI,CAAC,IAAI,CAAC,CAAA,EAAA;KAC5D;AAAAF,IAAAA,QAAA,EAEDA;AAAQ,GACJ,CAAC;AAEZ;AAEA,SAASoB,iBAAiBA,CAAC;EACzBpB,QAAQ;EACRQ,MAAM;AACNE,EAAAA,WAAW,EAAE+B,IAAI;AACjBhC,EAAAA,WAAW,EAAEwB;AAAI,CACwD,EAAA;EACzE,MAAM,CAACS,YAAY,EAAEC,eAAe,CAAC,GAAGC,cAAQ,CAAC,IAAI,CAAC;EACtD,IAAI5C,QAAQ,KAAKC,SAAS,EAAE;IAC1B,IAAIO,MAAM,IAAIkC,YAAY,EAAE;MAC1B,oBAAO9B,cAAA,CAACiC,aAAK,EAAA;AAACC,QAAAA,GAAG,EAAEtC,MAAO;AAACuC,QAAAA,GAAG,EAAC,EAAE;AAACC,QAAAA,OAAO,EAAEA,MAAML,eAAe,CAAC,KAAK;AAAE,OAAA,CAAG;AAC7E,IAAA;AACA,IAAA,IAAIV,IAAI,EAAE;AACR,MAAA,OAAOA,IAAI,KAAKgB,uBAAW,CAACC,QAAQ,gBAAGtC,cAAA,CAACuC,eAAmB,EAAA,EAAA,CAAG,gBAAGvC,cAAA,CAACwC,aAAmB,IAAA,CAAG;AAC1F,IAAA;AACA,IAAA,IAAIX,IAAI,EAAE;MACR,OAAOY,oBAAW,CAACZ,IAAI,CAAC;AAC1B,IAAA;AACA,IAAA,oBAAO7B,cAAA,CAACwC,aAAmB,EAAA,GAAG;AAChC,EAAA;AACA,EAAA,OAAOpD,QAAQ;AACjB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n '
|
|
1
|
+
{"version":3,"file":"AvatarView.mjs","sources":["../../src/avatarView/AvatarView.tsx"],"sourcesContent":["import Badge, { BadgeAssets, BadgeProps, BadgeAssetsProps } from '../badge';\nimport Dot, { DotProps } from './Dot';\nimport Circle from '../common/circle';\nimport Image from '../image';\nimport { HTMLAttributes, PropsWithChildren, useState } from 'react';\nimport { clsx } from 'clsx';\nimport { getInitials, ProfileType, ProfileTypeBusiness, ProfileTypePersonal } from '../common';\nimport {\n Briefcase as BusinessProfileIcon,\n Profile as PersonalProfileIcon,\n} from '@transferwise/icons';\n\nexport type AvatarViewBadgeProps = Omit<BadgeAssetsProps, 'size'> &\n Pick<BadgeProps, 'aria-label'> & {\n /**\n * Custom badge content\n */\n asset?: React.ReactNode;\n };\n\nexport type Props = {\n imgSrc?: string | null;\n /**\n * Entity name (person (profile or recipient) or business name), it will be boilded down to 1 or 2 chars (initials)\n */\n profileName?: string | null;\n profileType?: ProfileTypeBusiness | ProfileTypePersonal;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n badge?: AvatarViewBadgeProps;\n interactive?: boolean;\n selected?: boolean;\n style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;\n} & Pick<\n HTMLAttributes<HTMLDivElement>,\n 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'\n>;\n\nfunction AvatarView({\n children = undefined,\n size = 48,\n selected,\n badge,\n interactive = false,\n className,\n style,\n imgSrc,\n profileType,\n profileName,\n ...restProps\n}: Props) {\n return (\n <Circle\n size={size}\n fixedSize\n className={clsx(\n 'np-avatar-view',\n interactive ? 'np-avatar-view-interactive' : 'np-avatar-view-non-interactive',\n { 'np-avatar-view-selected': selected },\n className,\n )}\n {...restProps}\n >\n <Badges avatar={{ size, selected }} {...badge}>\n <Circle\n size={size}\n fixedSize\n className={clsx('np-avatar-view-content')}\n enableBorder={!interactive || selected}\n style={{\n ...(selected && {\n '--circle-border-color': 'var(--color-interactive-primary)',\n '--circle-border-width': `${MAP_SELECTED_BORDER_WIDTH[size]}px`,\n }),\n ...style,\n }}\n >\n <AvatarViewContent {...{ imgSrc, profileType, profileName }}>\n {children}\n </AvatarViewContent>\n </Circle>\n </Badges>\n </Circle>\n );\n}\n\n/** Size of badge depends on size of avatar */\nconst MAP_BADGE_ASSET_SIZE = {\n 16: 16,\n 24: 16,\n 32: 16,\n 40: 16,\n 48: 16,\n 56: 24,\n 72: 24,\n} satisfies Record<number, BadgeAssetsProps['size']>;\n\n/** Border width for `selected` state determined by avatar size */\nconst MAP_SELECTED_BORDER_WIDTH = {\n 16: 1,\n 24: 1,\n 32: 1,\n 40: 2,\n 48: 2,\n 56: 2,\n 72: 2,\n};\n\n/** Certain sizes of AvatarView has a custom offset for badge */\nconst MAP_BADGE_POSITION = {\n 24: -6,\n 32: -4,\n};\n\ntype BadgesProps = AvatarViewBadgeProps &\n PropsWithChildren<{\n avatar: Pick<Props, 'selected' | 'size'>;\n }>;\n\n/**\n * Adds build-in badges to AvatarView\n */\nfunction Badges({\n children,\n avatar,\n 'aria-label': ariaLabel,\n asset: customBadge,\n ...badgeAssets\n}: BadgesProps) {\n const { size = 48, selected } = avatar;\n const anyBadge = Object.values({ customBadge, ...badgeAssets }).filter(Boolean).length > 0;\n\n if ((!anyBadge && !selected) || size <= 16) {\n return children;\n }\n\n if (badgeAssets.type === 'notification' || badgeAssets.type === 'online') {\n return (\n <Dot avatarSize={size} variant={badgeAssets.type === 'online' ? 'online' : 'notification'}>\n {children}\n </Dot>\n );\n }\n\n const badgeSize: BadgeAssetsProps['size'] = MAP_BADGE_ASSET_SIZE[size];\n return (\n <Badge\n aria-label={ariaLabel}\n size={badgeSize}\n badge={\n customBadge ? (\n <Circle fixedSize size={badgeSize}>\n {customBadge}\n </Circle>\n ) : (\n <BadgeAssets {...(selected ? { status: 'positive' } : badgeAssets)} size={badgeSize} />\n )\n }\n style={{\n // @ts-expect-error CSS custom props allowed\n '--badge-content-position': `${MAP_BADGE_POSITION[size] ?? 0}px`,\n }}\n >\n {children}\n </Badge>\n );\n}\n\nfunction AvatarViewContent({\n children,\n imgSrc,\n profileName: name,\n profileType: type,\n}: PropsWithChildren<Pick<Props, 'imgSrc' | 'profileName' | 'profileType'>>) {\n const [tryLoadImage, setTryLoadImage] = useState(true);\n if (children === undefined) {\n if (imgSrc && tryLoadImage) {\n return <Image src={imgSrc} alt=\"\" onError={() => setTryLoadImage(false)} />;\n }\n if (type) {\n return type === ProfileType.BUSINESS ? <BusinessProfileIcon /> : <PersonalProfileIcon />;\n }\n if (name) {\n return getInitials(name);\n }\n return <PersonalProfileIcon />;\n }\n return children;\n}\n\nexport default AvatarView;\n"],"names":["AvatarView","children","undefined","size","selected","badge","interactive","className","style","imgSrc","profileType","profileName","restProps","_jsx","Circle","fixedSize","clsx","Badges","avatar","enableBorder","MAP_SELECTED_BORDER_WIDTH","AvatarViewContent","MAP_BADGE_ASSET_SIZE","MAP_BADGE_POSITION","ariaLabel","asset","customBadge","badgeAssets","anyBadge","Object","values","filter","Boolean","length","type","Dot","avatarSize","variant","badgeSize","Badge","BadgeAssets","status","name","tryLoadImage","setTryLoadImage","useState","Image","src","alt","onError","ProfileType","BUSINESS","BusinessProfileIcon","PersonalProfileIcon","getInitials"],"mappings":"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"}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React = require('react');
|
|
6
5
|
var clsx = require('clsx');
|
|
7
6
|
var StatusIcon = require('../../statusIcon/StatusIcon.js');
|
|
8
7
|
var Body = require('../../body/Body.js');
|
|
@@ -27,6 +26,7 @@ require('../../common/propsValues/scroll.js');
|
|
|
27
26
|
require('../../common/propsValues/markdownNodeType.js');
|
|
28
27
|
require('../../common/fileType.js');
|
|
29
28
|
var icons = require('@transferwise/icons');
|
|
29
|
+
require('react');
|
|
30
30
|
require('react-intl');
|
|
31
31
|
require('../../common/closeButton/CloseButton.messages.js');
|
|
32
32
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -40,20 +40,14 @@ const ActionPrompt = ({
|
|
|
40
40
|
title,
|
|
41
41
|
description,
|
|
42
42
|
onDismiss,
|
|
43
|
-
media
|
|
43
|
+
media,
|
|
44
44
|
action,
|
|
45
45
|
actionSecondary,
|
|
46
46
|
id,
|
|
47
47
|
className,
|
|
48
|
-
'data-testid': testId
|
|
49
|
-
'aria-label': ariaLabel
|
|
48
|
+
'data-testid': testId
|
|
50
49
|
}) => {
|
|
51
50
|
const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.MEDIUM);
|
|
52
|
-
const mediaId = React.useId();
|
|
53
|
-
const titleId = React.useId();
|
|
54
|
-
const descId = React.useId();
|
|
55
|
-
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, Boolean(ariaLabel) ? undefined : titleId].filter(Boolean).join(' ');
|
|
56
|
-
const ariaDescribedByIds = [Boolean(ariaLabel) && Boolean(description) ? undefined : descId].filter(Boolean).join(' ');
|
|
57
51
|
const renderMedia = () => {
|
|
58
52
|
if (media?.imgSrc) {
|
|
59
53
|
return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
|
|
@@ -69,23 +63,16 @@ const ActionPrompt = ({
|
|
|
69
63
|
return /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
70
64
|
...media.avatar,
|
|
71
65
|
badge: badge,
|
|
72
|
-
"aria-label": media['aria-label'],
|
|
73
|
-
"aria-hidden": media['aria-hidden'],
|
|
74
|
-
id: mediaId,
|
|
75
66
|
size: 48,
|
|
76
67
|
children: media.avatar.asset
|
|
77
68
|
});
|
|
78
69
|
}
|
|
79
70
|
return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
80
71
|
size: 48,
|
|
81
|
-
"aria-label": media['aria-label'],
|
|
82
|
-
"aria-hidden": media['aria-hidden'],
|
|
83
72
|
children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
|
|
84
73
|
}) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
|
|
85
|
-
id: mediaId,
|
|
86
74
|
size: 48,
|
|
87
|
-
sentiment: sentiment
|
|
88
|
-
iconLabel: Boolean(media['aria-hidden']) ? null : media['aria-label']
|
|
75
|
+
sentiment: sentiment
|
|
89
76
|
});
|
|
90
77
|
};
|
|
91
78
|
return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
|
|
@@ -119,23 +106,12 @@ const ActionPrompt = ({
|
|
|
119
106
|
})]
|
|
120
107
|
}),
|
|
121
108
|
onDismiss: onDismiss,
|
|
122
|
-
role: "region",
|
|
123
|
-
...(Boolean(ariaLabel) ? {
|
|
124
|
-
'aria-label': ariaLabel
|
|
125
|
-
} : {
|
|
126
|
-
'aria-labelledby': ariaLabelledByIds,
|
|
127
|
-
'aria-describedby': ariaDescribedByIds
|
|
128
|
-
}),
|
|
129
109
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
130
110
|
className: clsx.clsx('d-flex', 'flex-column', 'justify-content-center'),
|
|
131
111
|
children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
132
|
-
id: titleId,
|
|
133
|
-
role: "heading",
|
|
134
|
-
"aria-level": 6,
|
|
135
112
|
type: typography.Typography.BODY_LARGE_BOLD,
|
|
136
113
|
children: title
|
|
137
114
|
}), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
138
|
-
id: descId,
|
|
139
115
|
children: description
|
|
140
116
|
})]
|
|
141
117
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media,\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView {...media.avatar} badge={badge} size={48}>\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView size={48}>\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon size={48} sentiment={sentiment} />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n onDismiss={onDismiss}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n {description && <Body>{description}</Body>}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { useId } from 'react';
|
|
2
1
|
import { clsx } from 'clsx';
|
|
3
2
|
import StatusIcon from '../../statusIcon/StatusIcon.mjs';
|
|
4
3
|
import Body from '../../body/Body.mjs';
|
|
@@ -23,6 +22,7 @@ import '../../common/propsValues/scroll.mjs';
|
|
|
23
22
|
import '../../common/propsValues/markdownNodeType.mjs';
|
|
24
23
|
import '../../common/fileType.mjs';
|
|
25
24
|
import { GiftBox } from '@transferwise/icons';
|
|
25
|
+
import 'react';
|
|
26
26
|
import 'react-intl';
|
|
27
27
|
import '../../common/closeButton/CloseButton.messages.mjs';
|
|
28
28
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
@@ -36,20 +36,14 @@ const ActionPrompt = ({
|
|
|
36
36
|
title,
|
|
37
37
|
description,
|
|
38
38
|
onDismiss,
|
|
39
|
-
media
|
|
39
|
+
media,
|
|
40
40
|
action,
|
|
41
41
|
actionSecondary,
|
|
42
42
|
id,
|
|
43
43
|
className,
|
|
44
|
-
'data-testid': testId
|
|
45
|
-
'aria-label': ariaLabel
|
|
44
|
+
'data-testid': testId
|
|
46
45
|
}) => {
|
|
47
46
|
const isMobile = !useScreenSize(Breakpoint.MEDIUM);
|
|
48
|
-
const mediaId = useId();
|
|
49
|
-
const titleId = useId();
|
|
50
|
-
const descId = useId();
|
|
51
|
-
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, Boolean(ariaLabel) ? undefined : titleId].filter(Boolean).join(' ');
|
|
52
|
-
const ariaDescribedByIds = [Boolean(ariaLabel) && Boolean(description) ? undefined : descId].filter(Boolean).join(' ');
|
|
53
47
|
const renderMedia = () => {
|
|
54
48
|
if (media?.imgSrc) {
|
|
55
49
|
return /*#__PURE__*/jsx(Image, {
|
|
@@ -65,23 +59,16 @@ const ActionPrompt = ({
|
|
|
65
59
|
return /*#__PURE__*/jsx(AvatarView, {
|
|
66
60
|
...media.avatar,
|
|
67
61
|
badge: badge,
|
|
68
|
-
"aria-label": media['aria-label'],
|
|
69
|
-
"aria-hidden": media['aria-hidden'],
|
|
70
|
-
id: mediaId,
|
|
71
62
|
size: 48,
|
|
72
63
|
children: media.avatar.asset
|
|
73
64
|
});
|
|
74
65
|
}
|
|
75
66
|
return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
|
|
76
67
|
size: 48,
|
|
77
|
-
"aria-label": media['aria-label'],
|
|
78
|
-
"aria-hidden": media['aria-hidden'],
|
|
79
68
|
children: /*#__PURE__*/jsx(GiftBox, {})
|
|
80
69
|
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
81
|
-
id: mediaId,
|
|
82
70
|
size: 48,
|
|
83
|
-
sentiment: sentiment
|
|
84
|
-
iconLabel: Boolean(media['aria-hidden']) ? null : media['aria-label']
|
|
71
|
+
sentiment: sentiment
|
|
85
72
|
});
|
|
86
73
|
};
|
|
87
74
|
return /*#__PURE__*/jsx(PrimitivePrompt, {
|
|
@@ -115,23 +102,12 @@ const ActionPrompt = ({
|
|
|
115
102
|
})]
|
|
116
103
|
}),
|
|
117
104
|
onDismiss: onDismiss,
|
|
118
|
-
role: "region",
|
|
119
|
-
...(Boolean(ariaLabel) ? {
|
|
120
|
-
'aria-label': ariaLabel
|
|
121
|
-
} : {
|
|
122
|
-
'aria-labelledby': ariaLabelledByIds,
|
|
123
|
-
'aria-describedby': ariaDescribedByIds
|
|
124
|
-
}),
|
|
125
105
|
children: /*#__PURE__*/jsxs("div", {
|
|
126
106
|
className: clsx('d-flex', 'flex-column', 'justify-content-center'),
|
|
127
107
|
children: [/*#__PURE__*/jsx(Body, {
|
|
128
|
-
id: titleId,
|
|
129
|
-
role: "heading",
|
|
130
|
-
"aria-level": 6,
|
|
131
108
|
type: Typography.BODY_LARGE_BOLD,
|
|
132
109
|
children: title
|
|
133
110
|
}), description && /*#__PURE__*/jsx(Body, {
|
|
134
|
-
id: descId,
|
|
135
111
|
children: description
|
|
136
112
|
})]
|
|
137
113
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { clsx } from 'clsx';\n\nimport StatusIcon from '../../statusIcon';\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { BadgeAssetsProps } from '../../badge';\nimport { GiftBox } from '@transferwise/icons';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n media?: {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n };\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media,\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n src={media.imgSrc}\n className=\"wds-action-prompt--media-image\"\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView {...media.avatar} badge={badge} size={48}>\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView size={48}>\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon size={48} sentiment={sentiment} />\n );\n };\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n onDismiss={onDismiss}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>\n {description && <Body>{description}</Body>}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","isMobile","useScreenSize","Breakpoint","MEDIUM","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -38,7 +38,6 @@ const mapLegacySize = {
|
|
|
38
38
|
[String(size.Size.LARGE)]: 48
|
|
39
39
|
};
|
|
40
40
|
const StatusIcon = ({
|
|
41
|
-
id,
|
|
42
41
|
sentiment: sentiment$1 = 'neutral',
|
|
43
42
|
size: sizeProp = 40,
|
|
44
43
|
iconLabel
|
|
@@ -99,7 +98,6 @@ const StatusIcon = ({
|
|
|
99
98
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
100
99
|
"data-testid": "status-icon",
|
|
101
100
|
className: clsx.clsx('status-circle', sentiment$1),
|
|
102
|
-
id: id,
|
|
103
101
|
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
|
|
104
102
|
className: clsx.clsx('status-icon', iconColor),
|
|
105
103
|
title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n
|
|
1
|
+
{"version":3,"file":"StatusIcon.js","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n sentiment?: `${StatusIconSentiment}`;\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /**\n * Override for the sentiment's-derived, default, accessible\n * name announced by the screen readers. <br />\n * Using `null` will render the icon purely presentational.\n * */\n iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n const intl = useIntl();\n\n const iconMetaBySentiment: Record<\n `${Sentiment}` | Status.PENDING,\n {\n Icon: React.ElementType;\n defaultIconLabel: string;\n }\n > = {\n [Sentiment.NEGATIVE]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.POSITIVE]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n [Sentiment.WARNING]: {\n Icon: Alert,\n defaultIconLabel: intl.formatMessage(messages.warningLabel),\n },\n [Status.PENDING]: {\n Icon: ClockBorderless,\n defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n },\n [Sentiment.NEUTRAL]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n // deprecated\n [Sentiment.ERROR]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.INFO]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n [Sentiment.SUCCESS]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n };\n const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n // eslint-disable-next-line react/no-unstable-nested-components\n const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface\n as=\"span\"\n // @ts-expect-error sentiment and SentimentSurface types mismatch\n sentiment={\n sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n }\n {...props}\n />\n );\n return (\n <Circle\n as={SentimentSurfaceSetting}\n size={isTinyViewport && size < 40 ? 32 : size}\n data-testid=\"status-icon\"\n className={clsx('status-circle', sentiment)}\n >\n <Icon\n className={clsx('status-icon', iconColor)}\n title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n />\n </Circle>\n );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
|
|
@@ -34,7 +34,6 @@ const mapLegacySize = {
|
|
|
34
34
|
[String(Size.LARGE)]: 48
|
|
35
35
|
};
|
|
36
36
|
const StatusIcon = ({
|
|
37
|
-
id,
|
|
38
37
|
sentiment = 'neutral',
|
|
39
38
|
size: sizeProp = 40,
|
|
40
39
|
iconLabel
|
|
@@ -95,7 +94,6 @@ const StatusIcon = ({
|
|
|
95
94
|
size: isTinyViewport && size < 40 ? 32 : size,
|
|
96
95
|
"data-testid": "status-icon",
|
|
97
96
|
className: clsx('status-circle', sentiment),
|
|
98
|
-
id: id,
|
|
99
97
|
children: /*#__PURE__*/jsx(Icon, {
|
|
100
98
|
className: clsx('status-icon', iconColor),
|
|
101
99
|
title: iconLabel === null ? undefined : iconLabel || defaultIconLabel
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n
|
|
1
|
+
{"version":3,"file":"StatusIcon.mjs","sources":["../../src/statusIcon/StatusIcon.tsx"],"sourcesContent":["import { Info, Alert, Cross, Check, ClockBorderless } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PropsWithChildren } from 'react';\n\nimport SentimentSurface from '../sentimentSurface';\nimport { SizeSmall, SizeMedium, SizeLarge, Sentiment, Size, Breakpoint, Status } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport { useMedia } from '../common/hooks/useMedia';\n\nimport messages from './StatusIcon.messages';\n\n/**\n * @deprecated use `16 | 24 | 32 | 40 | 48 | 56 | 72` component instead\n */\ntype LegacySizes = SizeSmall | SizeMedium | SizeLarge;\n\nexport type StatusIconSentiment = Sentiment | Status.PENDING;\n\nexport type StatusIconProps = {\n sentiment?: `${StatusIconSentiment}`;\n size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;\n /**\n * Override for the sentiment's-derived, default, accessible\n * name announced by the screen readers. <br />\n * Using `null` will render the icon purely presentational.\n * */\n iconLabel?: string | null;\n};\n\nconst mapLegacySize = {\n [String(Size.SMALL)]: 16,\n [String(Size.MEDIUM)]: 40,\n [String(Size.LARGE)]: 48,\n} satisfies Record<string, CircleProps['size']>;\n\nconst StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {\n const intl = useIntl();\n\n const iconMetaBySentiment: Record<\n `${Sentiment}` | Status.PENDING,\n {\n Icon: React.ElementType;\n defaultIconLabel: string;\n }\n > = {\n [Sentiment.NEGATIVE]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.POSITIVE]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n [Sentiment.WARNING]: {\n Icon: Alert,\n defaultIconLabel: intl.formatMessage(messages.warningLabel),\n },\n [Status.PENDING]: {\n Icon: ClockBorderless,\n defaultIconLabel: intl.formatMessage(messages.pendingLabel),\n },\n [Sentiment.NEUTRAL]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n // deprecated\n [Sentiment.ERROR]: {\n Icon: Cross,\n defaultIconLabel: intl.formatMessage(messages.errorLabel),\n },\n [Sentiment.INFO]: {\n Icon: Info,\n defaultIconLabel: intl.formatMessage(messages.informationLabel),\n },\n [Sentiment.SUCCESS]: {\n Icon: Check,\n defaultIconLabel: intl.formatMessage(messages.successLabel),\n },\n };\n const { Icon, defaultIconLabel } = iconMetaBySentiment[sentiment];\n\n const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';\n const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);\n const size = mapLegacySize[sizeProp] ?? sizeProp;\n // eslint-disable-next-line react/no-unstable-nested-components\n const SentimentSurfaceSetting = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface\n as=\"span\"\n // @ts-expect-error sentiment and SentimentSurface types mismatch\n sentiment={\n sentiment === 'positive' ? 'success' : sentiment === 'pending' ? 'warning' : sentiment\n }\n {...props}\n />\n );\n return (\n <Circle\n as={SentimentSurfaceSetting}\n size={isTinyViewport && size < 40 ? 32 : size}\n data-testid=\"status-icon\"\n className={clsx('status-circle', sentiment)}\n >\n <Icon\n className={clsx('status-icon', iconColor)}\n title={iconLabel === null ? undefined : iconLabel || defaultIconLabel}\n />\n </Circle>\n );\n};\n\nexport default StatusIcon;\n"],"names":["mapLegacySize","String","Size","SMALL","MEDIUM","LARGE","StatusIcon","sentiment","size","sizeProp","iconLabel","intl","useIntl","iconMetaBySentiment","Sentiment","NEGATIVE","Icon","Cross","defaultIconLabel","formatMessage","messages","errorLabel","POSITIVE","Check","successLabel","WARNING","Alert","warningLabel","Status","PENDING","ClockBorderless","pendingLabel","NEUTRAL","Info","informationLabel","ERROR","INFO","SUCCESS","iconColor","isTinyViewport","useMedia","Breakpoint","ZOOM_400","SentimentSurfaceSetting","props","_jsx","SentimentSurface","as","Circle","className","clsx","children","title","undefined"],"mappings":"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"}
|
|
@@ -19,7 +19,7 @@ export type Props = {
|
|
|
19
19
|
interactive?: boolean;
|
|
20
20
|
selected?: boolean;
|
|
21
21
|
style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
|
|
22
|
-
} & Pick<HTMLAttributes<HTMLDivElement>, '
|
|
22
|
+
} & Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
|
|
23
23
|
declare function AvatarView({ children, size, selected, badge, interactive, className, style, imgSrc, profileType, profileName, ...restProps }: Props): import("react").JSX.Element;
|
|
24
24
|
export default AvatarView;
|
|
25
25
|
//# sourceMappingURL=AvatarView.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,
|
|
1
|
+
{"version":3,"file":"AvatarView.d.ts","sourceRoot":"","sources":["../../../src/avatarView/AvatarView.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAe,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5E,OAAO,EAAE,cAAc,EAA+B,MAAM,OAAO,CAAC;AAEpE,OAAO,EAA4B,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAM/F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAC/D,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,mBAAmB,GAAG,mBAAmB,CAAC;IACxD,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,GAAG,iBAAiB,GAAG,OAAO,CAAC,CAAC;CAC3E,GAAG,IAAI,CACN,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACrF,CAAC;AAEF,iBAAS,UAAU,CAAC,EAClB,QAAoB,EACpB,IAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,KAAK,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,+BAkCP;AA0GD,eAAe,UAAU,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { AvatarViewProps } from '../../avatarView';
|
|
3
3
|
import { ButtonProps } from '../../button/Button.types';
|
|
4
4
|
import { PrimitivePromptProps } from '../PrimitivePrompt';
|
|
@@ -13,7 +13,6 @@ export type ActionPromptProps = {
|
|
|
13
13
|
badge?: Pick<BadgeAssetsProps, 'flagCode'>;
|
|
14
14
|
};
|
|
15
15
|
'aria-label'?: string;
|
|
16
|
-
'aria-hidden'?: boolean;
|
|
17
16
|
};
|
|
18
17
|
action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
|
|
19
18
|
label: ButtonProps['children'];
|
|
@@ -21,8 +20,7 @@ export type ActionPromptProps = {
|
|
|
21
20
|
actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
|
|
22
21
|
label: ButtonProps['children'];
|
|
23
22
|
};
|
|
24
|
-
'aria-label'?: AriaAttributes['aria-label'];
|
|
25
23
|
} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
|
|
26
|
-
export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, action, actionSecondary, id, className, "data-testid": testId,
|
|
24
|
+
export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, action, actionSecondary, id, className, "data-testid": testId, }: ActionPromptProps) => import("react").JSX.Element;
|
|
27
25
|
export default ActionPrompt;
|
|
28
26
|
//# sourceMappingURL=ActionPrompt.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;YACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;SAC5C,CAAC;QACF,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACzD,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;CACH,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F,eAAO,MAAM,YAAY,GAAI,qHAW1B,iBAAiB,gCAiFnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -5,7 +5,6 @@ import { SizeSmall, SizeMedium, SizeLarge, Sentiment, Status } from '../common';
|
|
|
5
5
|
type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
|
|
6
6
|
export type StatusIconSentiment = Sentiment | Status.PENDING;
|
|
7
7
|
export type StatusIconProps = {
|
|
8
|
-
id?: string;
|
|
9
8
|
sentiment?: `${StatusIconSentiment}`;
|
|
10
9
|
size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
11
10
|
/**
|
|
@@ -15,6 +14,6 @@ export type StatusIconProps = {
|
|
|
15
14
|
* */
|
|
16
15
|
iconLabel?: string | null;
|
|
17
16
|
};
|
|
18
|
-
declare const StatusIcon: ({
|
|
17
|
+
declare const StatusIcon: ({ sentiment, size: sizeProp, iconLabel }: StatusIconProps) => import("react").JSX.Element;
|
|
19
18
|
export default StatusIcon;
|
|
20
19
|
//# sourceMappingURL=StatusIcon.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,
|
|
1
|
+
{"version":3,"file":"StatusIcon.d.ts","sourceRoot":"","sources":["../../../src/statusIcon/StatusIcon.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,EAAE,MAAM,WAAW,CAAC;AAMlG;;GAEG;AACH,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrC,IAAI,CAAC,EAAE,WAAW,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACtD;;;;SAIK;IACL,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,CAAC;AAQF,QAAA,MAAM,UAAU,GAAI,0CAA2D,eAAe,gCAyE7F,CAAC;AAEF,eAAe,UAAU,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-d794fd5",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
"storybook": "^10.3.0-alpha.0",
|
|
87
87
|
"storybook-addon-tag-badges": "^3.0.4",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
|
-
"@transferwise/neptune-css": "14.26.1",
|
|
90
89
|
"@transferwise/less-config": "3.1.2",
|
|
90
|
+
"@transferwise/neptune-css": "14.26.1",
|
|
91
91
|
"@wise/components-theming": "1.10.1",
|
|
92
92
|
"@wise/wds-configs": "0.0.0"
|
|
93
93
|
},
|
|
@@ -32,7 +32,7 @@ export type Props = {
|
|
|
32
32
|
style?: Pick<React.CSSProperties, 'border' | 'backgroundColor' | 'color'>;
|
|
33
33
|
} & Pick<
|
|
34
34
|
HTMLAttributes<HTMLDivElement>,
|
|
35
|
-
'
|
|
35
|
+
'className' | 'children' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'
|
|
36
36
|
>;
|
|
37
37
|
|
|
38
38
|
function AvatarView({
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { ReactElement, useState } from 'react';
|
|
2
2
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
3
|
import { fn } from 'storybook/test';
|
|
4
|
-
import { Bank
|
|
4
|
+
import { Bank } from '@transferwise/icons';
|
|
5
5
|
import { ActionPrompt } from './ActionPrompt';
|
|
6
6
|
import { lorem10 } from '../../test-utils';
|
|
7
|
-
import Body from '../../body';
|
|
8
|
-
import { action } from 'storybook/actions';
|
|
9
|
-
import Title from '../../title';
|
|
10
7
|
import { withVariantConfig } from '../../../.storybook/helpers';
|
|
11
8
|
|
|
12
9
|
const meta: Meta<typeof ActionPrompt> = {
|
|
@@ -20,22 +17,22 @@ type Story = StoryObj<typeof ActionPrompt>;
|
|
|
20
17
|
|
|
21
18
|
const withComponentGrid =
|
|
22
19
|
({ maxWidth = 'auto', gap = '1rem' } = {}) =>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
(Story: () => ReactElement) => (
|
|
21
|
+
<div
|
|
22
|
+
style={{
|
|
23
|
+
width: '100%',
|
|
24
|
+
display: 'flex',
|
|
25
|
+
flexDirection: 'column',
|
|
26
|
+
justifyContent: 'flex-start',
|
|
27
|
+
alignItems: 'flex-start',
|
|
28
|
+
alignContent: 'flex-start',
|
|
29
|
+
gap,
|
|
30
|
+
maxWidth,
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
33
|
+
<Story />
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
39
36
|
|
|
40
37
|
export const AllSentiments: Story = {
|
|
41
38
|
render: () => {
|
|
@@ -185,110 +182,3 @@ export const OnDismiss: Story = {
|
|
|
185
182
|
);
|
|
186
183
|
},
|
|
187
184
|
};
|
|
188
|
-
|
|
189
|
-
export const VariousA11yFeatures: Story = {
|
|
190
|
-
name: 'Various a11y features',
|
|
191
|
-
render: () => {
|
|
192
|
-
return (
|
|
193
|
-
<Body>
|
|
194
|
-
<Title type="title-body">Neutral Prompt with Avatar Image and Custom label for media</Title>
|
|
195
|
-
<ActionPrompt
|
|
196
|
-
className="m-b-2"
|
|
197
|
-
sentiment="neutral"
|
|
198
|
-
media={{
|
|
199
|
-
'aria-label': 'Henry Profile Photo',
|
|
200
|
-
avatar: { imgSrc: '../../avatar-square-dude.webp' },
|
|
201
|
-
}}
|
|
202
|
-
title="Henry requested 30 USD"
|
|
203
|
-
description="Lunch date"
|
|
204
|
-
action={{
|
|
205
|
-
label: 'Sent',
|
|
206
|
-
onClick: () => {
|
|
207
|
-
action('send');
|
|
208
|
-
},
|
|
209
|
-
}}
|
|
210
|
-
actionSecondary={{
|
|
211
|
-
label: 'Decline',
|
|
212
|
-
onClick: () => {
|
|
213
|
-
action('decline');
|
|
214
|
-
},
|
|
215
|
-
}}
|
|
216
|
-
onDismiss={() => action('dismiss')}
|
|
217
|
-
/>
|
|
218
|
-
|
|
219
|
-
<Title type="title-body">Warning Prompt Avatar Icon</Title>
|
|
220
|
-
<ActionPrompt
|
|
221
|
-
className="m-b-2"
|
|
222
|
-
sentiment="warning"
|
|
223
|
-
media={{ avatar: { asset: <Freeze /> } }}
|
|
224
|
-
title="Your Wise Card expires soon"
|
|
225
|
-
description="Renew your card to keep spending"
|
|
226
|
-
action={{
|
|
227
|
-
label: 'Renew card',
|
|
228
|
-
onClick: () => {
|
|
229
|
-
action('renew');
|
|
230
|
-
},
|
|
231
|
-
}}
|
|
232
|
-
onDismiss={() => {
|
|
233
|
-
action('dismiss');
|
|
234
|
-
}}
|
|
235
|
-
/>
|
|
236
|
-
|
|
237
|
-
<Title type="title-body">Proposition Prompt Avatar Icon</Title>
|
|
238
|
-
<ActionPrompt
|
|
239
|
-
className="m-b-2"
|
|
240
|
-
sentiment="proposition"
|
|
241
|
-
media={{ avatar: { asset: <People /> } }}
|
|
242
|
-
title="Sync contacts for a faster experience"
|
|
243
|
-
description="Find contacts on Wise — it’s simple, secure and you pick who you add."
|
|
244
|
-
action={{
|
|
245
|
-
label: 'Sync contacts',
|
|
246
|
-
onClick: () => {
|
|
247
|
-
action('sync');
|
|
248
|
-
},
|
|
249
|
-
}}
|
|
250
|
-
onDismiss={() => {
|
|
251
|
-
action('dismiss');
|
|
252
|
-
}}
|
|
253
|
-
/>
|
|
254
|
-
|
|
255
|
-
<Title type="title-body">Negative Prompt Avatar Icon + muted media</Title>
|
|
256
|
-
<ActionPrompt
|
|
257
|
-
className="m-b-2"
|
|
258
|
-
sentiment="negative"
|
|
259
|
-
media={{ avatar: { asset: <People /> }, 'aria-hidden': true }}
|
|
260
|
-
title="Sync contacts for a faster experience"
|
|
261
|
-
description="Find contacts on Wise — it’s simple, secure and you pick who you add."
|
|
262
|
-
action={{
|
|
263
|
-
label: 'Sync contacts',
|
|
264
|
-
onClick: () => {
|
|
265
|
-
action('sync');
|
|
266
|
-
},
|
|
267
|
-
}}
|
|
268
|
-
onDismiss={() => {
|
|
269
|
-
action('dismiss');
|
|
270
|
-
}}
|
|
271
|
-
/>
|
|
272
|
-
|
|
273
|
-
<Title type="title-body">Negative Prompt + override content with custom message via aria-label</Title>
|
|
274
|
-
<ActionPrompt
|
|
275
|
-
className="m-b-2"
|
|
276
|
-
aria-label="hey customer, here is custom message"
|
|
277
|
-
sentiment="negative"
|
|
278
|
-
media={{ avatar: { asset: <People /> } }}
|
|
279
|
-
title="Sync contacts for a faster experience"
|
|
280
|
-
description="Find contacts on Wise — it’s simple, secure and you pick who you add."
|
|
281
|
-
action={{
|
|
282
|
-
label: 'Sync contacts',
|
|
283
|
-
onClick: () => {
|
|
284
|
-
action('sync');
|
|
285
|
-
},
|
|
286
|
-
}}
|
|
287
|
-
onDismiss={() => {
|
|
288
|
-
action('dismiss');
|
|
289
|
-
}}
|
|
290
|
-
/>
|
|
291
|
-
</Body>
|
|
292
|
-
);
|
|
293
|
-
},
|
|
294
|
-
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
|
|
4
4
|
import StatusIcon from '../../statusIcon';
|
|
@@ -23,7 +23,6 @@ export type ActionPromptProps = {
|
|
|
23
23
|
badge?: Pick<BadgeAssetsProps, 'flagCode'>;
|
|
24
24
|
};
|
|
25
25
|
'aria-label'?: string;
|
|
26
|
-
'aria-hidden'?: boolean;
|
|
27
26
|
};
|
|
28
27
|
action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
|
|
29
28
|
label: ButtonProps['children'];
|
|
@@ -31,7 +30,6 @@ export type ActionPromptProps = {
|
|
|
31
30
|
actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
|
|
32
31
|
label: ButtonProps['children'];
|
|
33
32
|
};
|
|
34
|
-
'aria-label'?: AriaAttributes['aria-label'];
|
|
35
33
|
} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
|
|
36
34
|
|
|
37
35
|
export const ActionPrompt = ({
|
|
@@ -39,30 +37,15 @@ export const ActionPrompt = ({
|
|
|
39
37
|
title,
|
|
40
38
|
description,
|
|
41
39
|
onDismiss,
|
|
42
|
-
media
|
|
40
|
+
media,
|
|
43
41
|
action,
|
|
44
42
|
actionSecondary,
|
|
45
43
|
id,
|
|
46
44
|
className,
|
|
47
45
|
'data-testid': testId,
|
|
48
|
-
'aria-label': ariaLabel,
|
|
49
46
|
}: ActionPromptProps) => {
|
|
50
47
|
const isMobile = !useScreenSize(Breakpoint.MEDIUM);
|
|
51
48
|
|
|
52
|
-
const mediaId = useId();
|
|
53
|
-
const titleId = useId();
|
|
54
|
-
const descId = useId();
|
|
55
|
-
|
|
56
|
-
const ariaLabelledByIds = [
|
|
57
|
-
media['aria-hidden'] ? undefined : mediaId,
|
|
58
|
-
Boolean(ariaLabel) ? undefined : titleId,
|
|
59
|
-
]
|
|
60
|
-
.filter(Boolean)
|
|
61
|
-
.join(' ');
|
|
62
|
-
const ariaDescribedByIds = [Boolean(ariaLabel) && Boolean(description) ? undefined : descId]
|
|
63
|
-
.filter(Boolean)
|
|
64
|
-
.join(' ');
|
|
65
|
-
|
|
66
49
|
const renderMedia = () => {
|
|
67
50
|
if (media?.imgSrc) {
|
|
68
51
|
return (
|
|
@@ -80,29 +63,17 @@ export const ActionPrompt = ({
|
|
|
80
63
|
? {}
|
|
81
64
|
: { status: sentiment };
|
|
82
65
|
return (
|
|
83
|
-
<AvatarView
|
|
84
|
-
{...media.avatar}
|
|
85
|
-
badge={badge}
|
|
86
|
-
aria-label={media['aria-label']}
|
|
87
|
-
aria-hidden={media['aria-hidden']}
|
|
88
|
-
id={mediaId}
|
|
89
|
-
size={48}
|
|
90
|
-
>
|
|
66
|
+
<AvatarView {...media.avatar} badge={badge} size={48}>
|
|
91
67
|
{media.avatar.asset}
|
|
92
68
|
</AvatarView>
|
|
93
69
|
);
|
|
94
70
|
}
|
|
95
71
|
return sentiment === 'proposition' ? (
|
|
96
|
-
<AvatarView size={48}
|
|
72
|
+
<AvatarView size={48}>
|
|
97
73
|
<GiftBox />
|
|
98
74
|
</AvatarView>
|
|
99
75
|
) : (
|
|
100
|
-
<StatusIcon
|
|
101
|
-
id={mediaId}
|
|
102
|
-
size={48}
|
|
103
|
-
sentiment={sentiment}
|
|
104
|
-
iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}
|
|
105
|
-
/>
|
|
76
|
+
<StatusIcon size={48} sentiment={sentiment} />
|
|
106
77
|
);
|
|
107
78
|
};
|
|
108
79
|
|
|
@@ -146,19 +117,10 @@ export const ActionPrompt = ({
|
|
|
146
117
|
</>
|
|
147
118
|
}
|
|
148
119
|
onDismiss={onDismiss}
|
|
149
|
-
role="region"
|
|
150
|
-
{...(Boolean(ariaLabel)
|
|
151
|
-
? { 'aria-label': ariaLabel }
|
|
152
|
-
: {
|
|
153
|
-
'aria-labelledby': ariaLabelledByIds,
|
|
154
|
-
'aria-describedby': ariaDescribedByIds,
|
|
155
|
-
})}
|
|
156
120
|
>
|
|
157
121
|
<div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
|
|
158
|
-
<Body
|
|
159
|
-
|
|
160
|
-
</Body>
|
|
161
|
-
{description && <Body id={descId}>{description}</Body>}
|
|
122
|
+
<Body type={Typography.BODY_LARGE_BOLD}>{title}</Body>
|
|
123
|
+
{description && <Body>{description}</Body>}
|
|
162
124
|
</div>
|
|
163
125
|
</PrimitivePrompt>
|
|
164
126
|
);
|
|
@@ -18,7 +18,6 @@ type LegacySizes = SizeSmall | SizeMedium | SizeLarge;
|
|
|
18
18
|
export type StatusIconSentiment = Sentiment | Status.PENDING;
|
|
19
19
|
|
|
20
20
|
export type StatusIconProps = {
|
|
21
|
-
id?: string;
|
|
22
21
|
sentiment?: `${StatusIconSentiment}`;
|
|
23
22
|
size?: LegacySizes | 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
24
23
|
/**
|
|
@@ -35,12 +34,7 @@ const mapLegacySize = {
|
|
|
35
34
|
[String(Size.LARGE)]: 48,
|
|
36
35
|
} satisfies Record<string, CircleProps['size']>;
|
|
37
36
|
|
|
38
|
-
const StatusIcon = ({
|
|
39
|
-
id,
|
|
40
|
-
sentiment = 'neutral',
|
|
41
|
-
size: sizeProp = 40,
|
|
42
|
-
iconLabel,
|
|
43
|
-
}: StatusIconProps) => {
|
|
37
|
+
const StatusIcon = ({ sentiment = 'neutral', size: sizeProp = 40, iconLabel }: StatusIconProps) => {
|
|
44
38
|
const intl = useIntl();
|
|
45
39
|
|
|
46
40
|
const iconMetaBySentiment: Record<
|
|
@@ -106,7 +100,6 @@ const StatusIcon = ({
|
|
|
106
100
|
size={isTinyViewport && size < 40 ? 32 : size}
|
|
107
101
|
data-testid="status-icon"
|
|
108
102
|
className={clsx('status-circle', sentiment)}
|
|
109
|
-
id={id}
|
|
110
103
|
>
|
|
111
104
|
<Icon
|
|
112
105
|
className={clsx('status-icon', iconColor)}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
|
|
2
|
-
|
|
3
|
-
<Meta title="Prompts/ActionPrompt/Accessibility" />
|
|
4
|
-
|
|
5
|
-
# Accessibility
|
|
6
|
-
|
|
7
|
-
Under the hood, `ActionPrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
|
|
8
|
-
|
|
9
|
-
By default, it's labelled by the `media` asset and `title`, as well as described by the `description` if one is provided.
|
|
10
|
-
|
|
11
|
-
## Announcement Behaviour
|
|
12
|
-
|
|
13
|
-
`ActionPrompt` should be treated as a hint or suggestion as part of the product UX. Even the negative variant still serves as a non-critical message. Therefore, it shouldn't be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).
|
|
14
|
-
|
|
15
|
-
For immediate user feedback, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) or [InlinePrompt](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) instead.
|
|
16
|
-
|
|
17
|
-
If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
|
|
18
|
-
|
|
19
|
-
<Source
|
|
20
|
-
dark
|
|
21
|
-
code={`
|
|
22
|
-
<ActionPrompt
|
|
23
|
-
aria-label="JFYI: Henry requested 30 USD for lunch"
|
|
24
|
-
media={{ avatar: { imgSrc: 'profile-photo.webp' } }}
|
|
25
|
-
title="Henry requested 30 USD"
|
|
26
|
-
description="Lunch date"
|
|
27
|
-
...
|
|
28
|
-
/>
|
|
29
|
-
`}
|
|
30
|
-
/>
|
|
31
|
-
|
|
32
|
-
## Media
|
|
33
|
-
|
|
34
|
-
You can use the `aria-hidden` attribute on media assets to hide them from screen readers if they're not providing any additional information. This is useful when the media is purely decorative or when its content is already conveyed through other means (e.g., text).
|
|
35
|
-
|
|
36
|
-
<Source
|
|
37
|
-
dark
|
|
38
|
-
code={`
|
|
39
|
-
<ActionPrompt
|
|
40
|
-
media={{
|
|
41
|
-
'aria-hidden': true,
|
|
42
|
-
avatar: { asset: <People /> },
|
|
43
|
-
}}
|
|
44
|
-
title="Sync contacts for a faster experience"
|
|
45
|
-
...
|
|
46
|
-
/>
|
|
47
|
-
`}
|
|
48
|
-
/>
|
|
49
|
-
|
|
50
|
-
You can also use `aria-label` on media assets to provide a custom label for screen readers.
|
|
51
|
-
|
|
52
|
-
<Source
|
|
53
|
-
dark
|
|
54
|
-
code={`
|
|
55
|
-
<ActionPrompt
|
|
56
|
-
media={{
|
|
57
|
-
'aria-label': 'Henry Adams photo',
|
|
58
|
-
avatar: { imgSrc: 'profile-photo.webp' },
|
|
59
|
-
}}
|
|
60
|
-
title="Henry requested 30 USD"
|
|
61
|
-
description="Lunch date"
|
|
62
|
-
...
|
|
63
|
-
/>
|
|
64
|
-
`}
|
|
65
|
-
/>
|
|
66
|
-
|
|
67
|
-
## Title
|
|
68
|
-
|
|
69
|
-
Title is marked as `role="heading"` with `aria-level="6"` to indicate its importance in the content hierarchy. This allows screen readers to identify it as a heading.
|