@transferwise/components 0.0.0-experimental-8807068 → 0.0.0-experimental-9c6bd5d
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/prompt/ActionPrompt/ActionPrompt.js +4 -4
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +4 -4
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +0 -7
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts +2 -4
- package/build/types/prompt/InfoPrompt/InfoPrompt.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/iconButton/IconButton.story.tsx +48 -173
- package/src/listItem/_stories/ListItem.story.tsx +1 -0
- package/src/prompt/ActionPrompt/ActionPrompt.accessibility.docs.mdx +18 -2
- package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +107 -299
- package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx +3 -86
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +4 -11
- package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +86 -93
- package/src/prompt/InfoPrompt/InfoPrompt.test.story.tsx +1 -54
- package/src/prompt/InfoPrompt/InfoPrompt.tsx +2 -4
- package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +29 -24
- package/src/iconButton/IconButton.test.story.tsx +0 -194
- package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx +0 -79
- package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx +0 -63
- package/src/prompt/InlinePrompt/InlinePrompt.test.story.tsx +0 -21
|
@@ -52,7 +52,7 @@ const ActionPrompt = ({
|
|
|
52
52
|
const mediaId = React.useId();
|
|
53
53
|
const titleId = React.useId();
|
|
54
54
|
const descId = React.useId();
|
|
55
|
-
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
|
|
55
|
+
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, Boolean(ariaLabel) ? undefined : titleId].filter(Boolean).join(' ');
|
|
56
56
|
const renderMedia = () => {
|
|
57
57
|
if (media?.imgSrc) {
|
|
58
58
|
return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
|
|
@@ -86,7 +86,7 @@ const ActionPrompt = ({
|
|
|
86
86
|
id: mediaId,
|
|
87
87
|
size: 48,
|
|
88
88
|
sentiment: sentiment,
|
|
89
|
-
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
89
|
+
iconLabel: Boolean(media['aria-hidden']) ? null : media['aria-label']
|
|
90
90
|
});
|
|
91
91
|
};
|
|
92
92
|
return /*#__PURE__*/jsxRuntime.jsx(PrimitivePrompt.PrimitivePrompt, {
|
|
@@ -119,9 +119,9 @@ const ActionPrompt = ({
|
|
|
119
119
|
children: action.label
|
|
120
120
|
})]
|
|
121
121
|
}),
|
|
122
|
-
role: "region",
|
|
123
122
|
onDismiss: onDismiss,
|
|
124
|
-
|
|
123
|
+
role: "region",
|
|
124
|
+
...(Boolean(ariaLabel) ? {
|
|
125
125
|
'aria-label': ariaLabel
|
|
126
126
|
} : {
|
|
127
127
|
'aria-labelledby': ariaLabelledByIds,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } 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 'aria-hidden'?: boolean;\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 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\
|
|
1
|
+
{"version":3,"file":"ActionPrompt.js","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } 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 'aria-hidden'?: boolean;\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 'aria-label'?: AriaAttributes['aria-label'];\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 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n Boolean(ariaLabel) ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\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\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}\n />\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 role=\"region\"\n {...(Boolean(ariaLabel)\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>\n {title}\n </Body>\n {description && <Body id={descId}>{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","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","Boolean","filter","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -48,7 +48,7 @@ const ActionPrompt = ({
|
|
|
48
48
|
const mediaId = useId();
|
|
49
49
|
const titleId = useId();
|
|
50
50
|
const descId = useId();
|
|
51
|
-
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
|
|
51
|
+
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, Boolean(ariaLabel) ? undefined : titleId].filter(Boolean).join(' ');
|
|
52
52
|
const renderMedia = () => {
|
|
53
53
|
if (media?.imgSrc) {
|
|
54
54
|
return /*#__PURE__*/jsx(Image, {
|
|
@@ -82,7 +82,7 @@ const ActionPrompt = ({
|
|
|
82
82
|
id: mediaId,
|
|
83
83
|
size: 48,
|
|
84
84
|
sentiment: sentiment,
|
|
85
|
-
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
85
|
+
iconLabel: Boolean(media['aria-hidden']) ? null : media['aria-label']
|
|
86
86
|
});
|
|
87
87
|
};
|
|
88
88
|
return /*#__PURE__*/jsx(PrimitivePrompt, {
|
|
@@ -115,9 +115,9 @@ const ActionPrompt = ({
|
|
|
115
115
|
children: action.label
|
|
116
116
|
})]
|
|
117
117
|
}),
|
|
118
|
-
role: "region",
|
|
119
118
|
onDismiss: onDismiss,
|
|
120
|
-
|
|
119
|
+
role: "region",
|
|
120
|
+
...(Boolean(ariaLabel) ? {
|
|
121
121
|
'aria-label': ariaLabel
|
|
122
122
|
} : {
|
|
123
123
|
'aria-labelledby': ariaLabelledByIds,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } 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 'aria-hidden'?: boolean;\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 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;\n\
|
|
1
|
+
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } 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 'aria-hidden'?: boolean;\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 'aria-label'?: AriaAttributes['aria-label'];\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 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n Boolean(ariaLabel) ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () => {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\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\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={Boolean(media['aria-hidden']) ? null : media['aria-label']}\n />\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 role=\"region\"\n {...(Boolean(ariaLabel)\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD}>\n {title}\n </Body>\n {description && <Body id={descId}>{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","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","Boolean","filter","join","renderMedia","imgSrc","_jsx","Image","src","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","Button","v2","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,MAAMA,YAAY,GAAGA,CAAC;AAC3BC,EAAAA,SAAS,GAAG,SAAS;EACrBC,KAAK;EACLC,WAAW;EACXC,SAAS;EACTC,KAAK,GAAG,EAAE;EACVC,MAAM;EACNC,eAAe;EACfC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,MAAM;AACrB,EAAA,YAAY,EAAEC;AAAS,CACL,KAAI;EACtB,MAAMC,QAAQ,GAAG,CAACC,aAAa,CAACC,UAAU,CAACC,MAAM,CAAC;AAElD,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE;AACvB,EAAA,MAAMC,OAAO,GAAGD,KAAK,EAAE;AACvB,EAAA,MAAME,MAAM,GAAGF,KAAK,EAAE;AAEtB,EAAA,MAAMG,iBAAiB,GAAG,CACxBf,KAAK,CAAC,aAAa,CAAC,GAAGgB,SAAS,GAAGL,OAAO,EAC1CM,OAAO,CAACX,SAAS,CAAC,GAAGU,SAAS,GAAGH,OAAO,CACzC,CACEK,MAAM,CAACD,OAAO,CAAC,CACfE,IAAI,CAAC,GAAG,CAAC;EAEZ,MAAMC,WAAW,GAAGA,MAAK;IACvB,IAAIpB,KAAK,EAAEqB,MAAM,EAAE;MACjB,oBACEC,GAAA,CAACC,KAAK,EAAA;AACJpB,QAAAA,EAAE,EAAEQ,OAAQ;QACZa,GAAG,EAAExB,KAAK,CAACqB,MAAO;AAClBjB,QAAAA,SAAS,EAAC,gCAAgC;AAC1CqB,QAAAA,GAAG,EAAEzB,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,OAAA,CAC/B;AAEN,IAAA;IACA,IAAIA,KAAK,EAAE0B,MAAM,EAAE;MACjB,MAAMC,KAAK,GAAG3B,KAAK,CAAC0B,MAAM,CAACC,KAAK,GAC5B3B,KAAK,CAAC0B,MAAM,CAACC,KAAK,GAClB/B,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEgC,QAAAA,MAAM,EAAEhC;OAAW;MAC3B,oBACE0B,GAAA,CAACO,UAAU,EAAA;QAAA,GACL7B,KAAK,CAAC0B,MAAM;AAChBC,QAAAA,KAAK,EAAEA,KAAM;QACb,YAAA,EAAY3B,KAAK,CAAC,YAAY,CAAE;QAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCG,QAAAA,EAAE,EAAEQ,OAAQ;AACZmB,QAAAA,IAAI,EAAE,EAAG;AAAAC,QAAAA,QAAA,EAER/B,KAAK,CAAC0B,MAAM,CAACM;AAAK,OACT,CAAC;AAEjB,IAAA;AACA,IAAA,OAAOpC,SAAS,KAAK,aAAa,gBAChC0B,GAAA,CAACO,UAAU,EAAA;AACT1B,MAAAA,EAAE,EAAEQ,OAAQ;AACZmB,MAAAA,IAAI,EAAE,EAAG;MACT,YAAA,EAAY9B,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAA+B,MAAAA,QAAA,eAElCT,GAAA,CAACW,OAAO,EAAA,EAAA;AACV,KAAY,CAAC,gBAEbX,GAAA,CAACY,UAAU,EAAA;AACT/B,MAAAA,EAAE,EAAEQ,OAAQ;AACZmB,MAAAA,IAAI,EAAE,EAAG;AACTlC,MAAAA,SAAS,EAAEA,SAAU;AACrBuC,MAAAA,SAAS,EAAElB,OAAO,CAACjB,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,KAAA,CAEzE;EACH,CAAC;EAED,oBACEsB,GAAA,CAACc,eAAe,EAAA;AACdjC,IAAAA,EAAE,EAAEA,EAAG;AACPP,IAAAA,SAAS,EAAEA,SAAU;AACrB,IAAA,aAAA,EAAaS,MAAO;AACpBD,IAAAA,SAAS,EAAEiC,IAAI,CACb,mBAAmB,EACnB;MAAE,qCAAqC,EAAE,CAAC,CAACnC;KAAiB,EAC5DE,SAAS,CACT;IACFJ,KAAK,EAAEoB,WAAW,EAAG;IACrBkB,OAAO,eACLC,IAAA,CAAAC,QAAA,EAAA;AAAAT,MAAAA,QAAA,GACG7B,eAAe;AAAA;AACd;AACAoB,MAAAA,GAAA,CAACmB,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFZ,QAAAA,IAAI,EAAC,IAAI;AACTa,QAAAA,QAAQ,EAAC,WAAW;QACpBC,IAAI,EAAE1C,eAAe,CAAC0C,IAAK;AAC3BC,QAAAA,KAAK,EAAEtC,QAAS;QAChBuC,OAAO,EAAE5C,eAAe,EAAE4C,OAAQ;QAAAf,QAAA,EAEjC7B,eAAe,CAAC6C;AAAK,OAChB,CACT,eAEDzB,GAAA,CAACmB,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFZ,QAAAA,IAAI,EAAC,IAAI;AACTa,QAAAA,QAAQ,EAAC,SAAS;QAClBC,IAAI,EAAE3C,MAAM,CAAC2C,IAAK;AAClBC,QAAAA,KAAK,EAAEtC,QAAS;QAChBuC,OAAO,EAAE7C,MAAM,CAAC6C,OAAQ;QAAAf,QAAA,EAEvB9B,MAAM,CAAC8C;AAAK,OACP,CACV;AAAA,KAAA,CACD;AACDhD,IAAAA,SAAS,EAAEA,SAAU;AACrBiD,IAAAA,IAAI,EAAC,QAAQ;AAAA,IAAA,IACR/B,OAAO,CAACX,SAAS,CAAC,GACnB;AAAE,MAAA,YAAY,EAAEA;AAAS,KAAE,GAC3B;AACE,MAAA,iBAAiB,EAAES,iBAAiB;AACpC,MAAA,kBAAkB,EAAED;KACrB,CAAA;AAAAiB,IAAAA,QAAA,eAELQ,IAAA,CAAA,KAAA,EAAA;MAAKnC,SAAS,EAAEiC,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,wBAAwB,CAAE;MAAAN,QAAA,EAAA,cACtET,GAAA,CAAC2B,IAAI,EAAA;AAAC9C,QAAAA,EAAE,EAAEU,OAAQ;QAACqC,IAAI,EAAEC,UAAU,CAACC,eAAgB;AAAArB,QAAAA,QAAA,EACjDlC;AAAK,OACF,CACN,EAACC,WAAW,iBAAIwB,GAAA,CAAC2B,IAAI,EAAA;AAAC9C,QAAAA,EAAE,EAAEW,MAAO;AAAAiB,QAAAA,QAAA,EAAEjC;AAAW,OAAO,CAAC;KACnD;AACP,GAAiB,CAAC;AAEtB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n
|
|
1
|
+
{"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label)\n * if it conveys meaning, or aria-hidden=\"true\" if decorative.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return <GiftBox size={24} />;\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n
|
|
1
|
+
{"version":3,"file":"InfoPrompt.mjs","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { Sentiment, Typography } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label)\n * if it conveys meaning, or aria-hidden=\"true\" if decorative.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n };\n\n/**\n * InfoPrompt displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated Alert component.\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return <GiftBox size={24} />;\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","dataTestId","restProps","shouldFire","setShouldFire","useState","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick","label"],"mappings":"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"}
|
|
@@ -23,13 +23,6 @@ export type ActionPromptProps = {
|
|
|
23
23
|
};
|
|
24
24
|
'aria-label'?: AriaAttributes['aria-label'];
|
|
25
25
|
} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'sentiment' | 'onDismiss'>;
|
|
26
|
-
/**
|
|
27
|
-
* Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.
|
|
28
|
-
*
|
|
29
|
-
* If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.
|
|
30
|
-
*
|
|
31
|
-
* Guidance can be found in the [design system](https://wise.design/components/action-prompt).
|
|
32
|
-
*/
|
|
33
26
|
export declare const ActionPrompt: ({ sentiment, title, description, onDismiss, media, action, actionSecondary, id, className, "data-testid": testId, "aria-label": ariaLabel, }: ActionPromptProps) => import("react").JSX.Element;
|
|
34
27
|
export default ActionPrompt;
|
|
35
28
|
//# 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,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAOzD,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;QACtB,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,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;IACF,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F
|
|
1
|
+
{"version":3,"file":"ActionPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAOzD,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;QACtB,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,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;IACF,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAE/F,eAAO,MAAM,YAAY,GAAI,8IAY1B,iBAAiB,gCAuHnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -11,7 +11,8 @@ export type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> &
|
|
|
11
11
|
export type InfoPromptMedia = {
|
|
12
12
|
/**
|
|
13
13
|
* The icon/image asset to display.
|
|
14
|
-
* The asset should include its own accessibility attributes (e.g. title, aria-label)
|
|
14
|
+
* The asset should include its own accessibility attributes (e.g. title, aria-label)
|
|
15
|
+
* if it conveys meaning, or aria-hidden="true" if decorative.
|
|
15
16
|
*/
|
|
16
17
|
asset: ReactNode;
|
|
17
18
|
};
|
|
@@ -43,7 +44,6 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & Pi
|
|
|
43
44
|
* Description text for the prompt (required)
|
|
44
45
|
*/
|
|
45
46
|
description: string;
|
|
46
|
-
className?: string;
|
|
47
47
|
};
|
|
48
48
|
/**
|
|
49
49
|
* InfoPrompt displays important contextual messages to users within a screen.
|
|
@@ -51,8 +51,6 @@ export type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & Pi
|
|
|
51
51
|
* or positive feedback with optional actions and dismissal capabilities.
|
|
52
52
|
*
|
|
53
53
|
* Use this component to replace the deprecated Alert component.
|
|
54
|
-
*
|
|
55
|
-
* Guidance can be found in the [design system](https://wise.design/components/info-prompt).
|
|
56
54
|
*/
|
|
57
55
|
export declare const InfoPrompt: ({ sentiment, onDismiss, media, action, title, description, className, "data-testid": dataTestId, ...restProps }: InfoPromptProps) => import("react").JSX.Element;
|
|
58
56
|
//# sourceMappingURL=InfoPrompt.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B
|
|
1
|
+
{"version":3,"file":"InfoPrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAE,SAAS,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI5E,OAAa,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC,GAAG;IAC9E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,GACzE,IAAI,CAAC,oBAAoB,EAAE,aAAa,CAAC,GAAG;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEJ;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,iHAUxB,eAAe,gCAyEjB,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-9c6bd5d",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -87,13 +87,13 @@
|
|
|
87
87
|
"storybook-addon-tag-badges": "^3.0.4",
|
|
88
88
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
89
89
|
"@transferwise/less-config": "3.1.2",
|
|
90
|
-
"@
|
|
90
|
+
"@wise/components-theming": "1.10.1",
|
|
91
91
|
"@wise/wds-configs": "0.0.0",
|
|
92
|
-
"@
|
|
92
|
+
"@transferwise/neptune-css": "0.0.0-experimental-9c6bd5d"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"@transferwise/icons": "^3 || ^4",
|
|
96
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
96
|
+
"@transferwise/neptune-css": "0.0.0-experimental-9c6bd5d",
|
|
97
97
|
"@wise/art": "^2.26",
|
|
98
98
|
"@wise/components-theming": "^1.9.1",
|
|
99
99
|
"framer-motion": "^12.23.26",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
},
|
|
104
104
|
"dependencies": {
|
|
105
105
|
"@babel/runtime": "^7.28.4",
|
|
106
|
-
"@floating-ui/react": "^0.27.
|
|
106
|
+
"@floating-ui/react": "^0.27.17",
|
|
107
107
|
"@headlessui/react": "^2.2.9",
|
|
108
108
|
"@popperjs/core": "^2.11.8",
|
|
109
109
|
"@react-aria/focus": "^3.21.3",
|
|
@@ -1,18 +1,5 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
-
import {
|
|
3
|
-
ArrowLeft,
|
|
4
|
-
Cross,
|
|
5
|
-
Defrost,
|
|
6
|
-
Edit,
|
|
7
|
-
Menu,
|
|
8
|
-
Plus,
|
|
9
|
-
Settings,
|
|
10
|
-
Star,
|
|
11
|
-
Travel,
|
|
12
|
-
Briefcase,
|
|
13
|
-
Bank,
|
|
14
|
-
Freeze,
|
|
15
|
-
} from '@transferwise/icons';
|
|
2
|
+
import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
|
|
16
3
|
import IconButton, { Props } from './IconButton';
|
|
17
4
|
import { action } from 'storybook/actions';
|
|
18
5
|
import Body from '../body';
|
|
@@ -127,167 +114,48 @@ export const Basic: Story = {
|
|
|
127
114
|
*/
|
|
128
115
|
export const SentimentAwareness: Story = {
|
|
129
116
|
render: () => {
|
|
130
|
-
const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
|
|
131
|
-
const sentiments = ['success', 'warning', 'negative', 'neutral', 'proposition'] as const;
|
|
132
|
-
|
|
133
117
|
return (
|
|
134
|
-
|
|
135
|
-
{
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
style={{
|
|
142
|
-
width: '32px',
|
|
143
|
-
textAlign: 'center',
|
|
144
|
-
fontSize: '11px',
|
|
145
|
-
fontWeight: 'bold',
|
|
146
|
-
writingMode: 'vertical-rl',
|
|
147
|
-
transform: 'rotate(180deg)',
|
|
148
|
-
height: '60px',
|
|
149
|
-
display: 'flex',
|
|
150
|
-
alignItems: 'center',
|
|
151
|
-
justifyContent: 'center',
|
|
152
|
-
}}
|
|
153
|
-
>
|
|
154
|
-
{priority}
|
|
155
|
-
</div>
|
|
156
|
-
))}
|
|
157
|
-
</div>
|
|
158
|
-
|
|
159
|
-
{/* Rows for each sentiment with base and elevated emphasis */}
|
|
160
|
-
{sentiments.flatMap((sentiment) => [
|
|
161
|
-
<SentimentSurface
|
|
162
|
-
key={`${sentiment}-base`}
|
|
163
|
-
sentiment={sentiment}
|
|
164
|
-
emphasis="base"
|
|
165
|
-
style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
|
|
166
|
-
>
|
|
167
|
-
<div
|
|
168
|
-
style={{
|
|
169
|
-
width: '82px',
|
|
170
|
-
fontSize: '11px',
|
|
171
|
-
fontWeight: 'bold',
|
|
172
|
-
textAlign: 'left',
|
|
173
|
-
paddingLeft: '8px',
|
|
174
|
-
}}
|
|
175
|
-
>
|
|
176
|
-
{sentiment} (base)
|
|
177
|
-
</div>
|
|
178
|
-
<IconButton
|
|
179
|
-
size={32}
|
|
180
|
-
aria-label="Primary action"
|
|
181
|
-
priority="primary"
|
|
182
|
-
type="default"
|
|
183
|
-
onClick={action('button click')}
|
|
184
|
-
>
|
|
185
|
-
<Plus />
|
|
186
|
-
</IconButton>
|
|
187
|
-
<IconButton
|
|
188
|
-
size={32}
|
|
189
|
-
aria-label="Secondary action"
|
|
190
|
-
priority="secondary"
|
|
191
|
-
type="default"
|
|
192
|
-
onClick={action('button click')}
|
|
193
|
-
>
|
|
194
|
-
<Settings />
|
|
195
|
-
</IconButton>
|
|
196
|
-
<IconButton
|
|
197
|
-
size={32}
|
|
198
|
-
aria-label="Tertiary action"
|
|
199
|
-
priority="tertiary"
|
|
200
|
-
type="default"
|
|
201
|
-
onClick={action('button click')}
|
|
202
|
-
>
|
|
203
|
-
<Star />
|
|
204
|
-
</IconButton>
|
|
205
|
-
<IconButton
|
|
206
|
-
size={32}
|
|
207
|
-
aria-label="Minimal action"
|
|
208
|
-
priority="minimal"
|
|
209
|
-
type="default"
|
|
210
|
-
onClick={action('button click')}
|
|
211
|
-
>
|
|
212
|
-
<Travel />
|
|
213
|
-
</IconButton>
|
|
214
|
-
<IconButton
|
|
215
|
-
size={32}
|
|
216
|
-
aria-label="Disabled action"
|
|
217
|
-
priority="primary"
|
|
218
|
-
type="default"
|
|
219
|
-
disabled
|
|
220
|
-
onClick={action('button click')}
|
|
221
|
-
>
|
|
222
|
-
<Menu />
|
|
223
|
-
</IconButton>
|
|
224
|
-
</SentimentSurface>,
|
|
225
|
-
<SentimentSurface
|
|
226
|
-
key={`${sentiment}-elevated`}
|
|
227
|
-
sentiment={sentiment}
|
|
228
|
-
emphasis="elevated"
|
|
229
|
-
style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
|
|
230
|
-
>
|
|
231
|
-
<div
|
|
232
|
-
style={{
|
|
233
|
-
width: '82px',
|
|
234
|
-
fontSize: '11px',
|
|
235
|
-
fontWeight: 'bold',
|
|
236
|
-
textAlign: 'left',
|
|
237
|
-
paddingLeft: '8px',
|
|
238
|
-
}}
|
|
118
|
+
<>
|
|
119
|
+
{(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
|
|
120
|
+
(sentiment) => (
|
|
121
|
+
<SentimentSurface
|
|
122
|
+
key={sentiment}
|
|
123
|
+
sentiment={sentiment}
|
|
124
|
+
className="p-a-1 d-flex align-items-center"
|
|
125
|
+
style={{ gap: 'var(--size-8)' }}
|
|
239
126
|
>
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
<
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
<
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
</
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
priority="minimal"
|
|
273
|
-
type="default"
|
|
274
|
-
onClick={action('button click')}
|
|
275
|
-
>
|
|
276
|
-
<Edit />
|
|
277
|
-
</IconButton>
|
|
278
|
-
<IconButton
|
|
279
|
-
size={32}
|
|
280
|
-
aria-label="Disabled action"
|
|
281
|
-
priority="primary"
|
|
282
|
-
type="default"
|
|
283
|
-
disabled
|
|
284
|
-
onClick={action('button click')}
|
|
285
|
-
>
|
|
286
|
-
<Cross />
|
|
287
|
-
</IconButton>
|
|
288
|
-
</SentimentSurface>,
|
|
289
|
-
])}
|
|
290
|
-
</div>
|
|
127
|
+
<IconButton
|
|
128
|
+
size={32}
|
|
129
|
+
aria-label="Primary action"
|
|
130
|
+
priority="primary"
|
|
131
|
+
type="default"
|
|
132
|
+
onClick={action('button click')}
|
|
133
|
+
>
|
|
134
|
+
<Plus />
|
|
135
|
+
</IconButton>
|
|
136
|
+
<IconButton
|
|
137
|
+
size={32}
|
|
138
|
+
aria-label="Secondary action"
|
|
139
|
+
priority="secondary"
|
|
140
|
+
type="default"
|
|
141
|
+
onClick={action('button click')}
|
|
142
|
+
>
|
|
143
|
+
<Defrost />
|
|
144
|
+
</IconButton>
|
|
145
|
+
<IconButton
|
|
146
|
+
size={32}
|
|
147
|
+
aria-label="Disabled action"
|
|
148
|
+
priority="primary"
|
|
149
|
+
type="default"
|
|
150
|
+
disabled
|
|
151
|
+
onClick={action('button click')}
|
|
152
|
+
>
|
|
153
|
+
<Menu />
|
|
154
|
+
</IconButton>
|
|
155
|
+
</SentimentSurface>
|
|
156
|
+
),
|
|
157
|
+
)}
|
|
158
|
+
</>
|
|
291
159
|
);
|
|
292
160
|
},
|
|
293
161
|
parameters: {
|
|
@@ -298,4 +166,11 @@ export const SentimentAwareness: Story = {
|
|
|
298
166
|
},
|
|
299
167
|
},
|
|
300
168
|
},
|
|
169
|
+
decorators: [
|
|
170
|
+
(Story) => (
|
|
171
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
172
|
+
<Story />
|
|
173
|
+
</div>
|
|
174
|
+
),
|
|
175
|
+
],
|
|
301
176
|
};
|
|
@@ -252,6 +252,7 @@ const getPropsForPreview = (args: PreviewStoryArgs): [ListItemProps, Partial<Lis
|
|
|
252
252
|
};
|
|
253
253
|
|
|
254
254
|
export const Playground: StoryObj<PreviewStoryArgs> = {
|
|
255
|
+
tags: ['!autodocs'],
|
|
255
256
|
render: (args: PreviewStoryArgs) => {
|
|
256
257
|
const [props, previewProps] = getPropsForPreview(args);
|
|
257
258
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';
|
|
2
2
|
|
|
3
|
-
<Meta title="Prompts/ActionPrompt/Accessibility"
|
|
3
|
+
<Meta title="Prompts/ActionPrompt/Accessibility" />
|
|
4
4
|
|
|
5
5
|
# Accessibility
|
|
6
6
|
|
|
@@ -31,7 +31,23 @@ If you want to provide a custom label for screen readers, you can use the `aria-
|
|
|
31
31
|
|
|
32
32
|
## Media
|
|
33
33
|
|
|
34
|
-
You can use `aria-
|
|
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.
|
|
35
51
|
|
|
36
52
|
<Source
|
|
37
53
|
dark
|