@transferwise/components 0.0.0-experimental-1de8033 → 0.0.0-experimental-cdb8834
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/main.css +10 -2
- package/build/prompt/ActionPrompt/ActionPrompt.js +6 -4
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +6 -4
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/styles/main.css +10 -2
- package/build/styles/prompt/ActionPrompt/ActionPrompt.css +4 -0
- package/build/styles/prompt/InfoPrompt/InfoPrompt.css +2 -0
- package/build/styles/prompt/InlinePrompt/InlinePrompt.css +3 -2
- package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -0
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/main.css +10 -2
- package/src/prompt/ActionPrompt/ActionPrompt.css +4 -0
- package/src/prompt/ActionPrompt/ActionPrompt.less +5 -1
- package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +26 -5
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +10 -6
- package/src/prompt/InfoPrompt/InfoPrompt.css +2 -0
- package/src/prompt/InfoPrompt/InfoPrompt.less +2 -1
- package/src/prompt/InfoPrompt/InfoPrompt.story.tsx +23 -0
- package/src/prompt/InlinePrompt/InlinePrompt.css +3 -2
- package/src/prompt/InlinePrompt/InlinePrompt.less +2 -2
- package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +1 -1
- package/src/prompt/InlinePrompt/InlinePrompt.test.tsx +10 -3
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +1 -1
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -0
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.less +2 -1
package/build/main.css
CHANGED
|
@@ -5346,6 +5346,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5346
5346
|
padding: var(--Prompt-padding, var(--padding-x-small));
|
|
5347
5347
|
text-align: left;
|
|
5348
5348
|
word-break: break-word;
|
|
5349
|
+
width: 100%;
|
|
5349
5350
|
}
|
|
5350
5351
|
.wds-prompt__content-wrapper {
|
|
5351
5352
|
display: grid;
|
|
@@ -5405,8 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5405
5406
|
.wds-inline-prompt:has(button):active {
|
|
5406
5407
|
background-color: var(--color-sentiment-background-surface-active);
|
|
5407
5408
|
}
|
|
5408
|
-
.wds-inline-prompt--
|
|
5409
|
-
width:
|
|
5409
|
+
.wds-inline-prompt--auto-width {
|
|
5410
|
+
width: auto;
|
|
5411
|
+
width: initial;
|
|
5410
5412
|
}
|
|
5411
5413
|
.wds-inline-prompt--muted {
|
|
5412
5414
|
opacity: 0.93;
|
|
@@ -5449,6 +5451,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5449
5451
|
display: flex;
|
|
5450
5452
|
flex-direction: column;
|
|
5451
5453
|
justify-content: center;
|
|
5454
|
+
max-width: calc(48px * 10);
|
|
5455
|
+
max-width: calc(var(--size-48) * 10);
|
|
5452
5456
|
}
|
|
5453
5457
|
.wds-info-prompt__content:has(.wds-info-prompt__title) {
|
|
5454
5458
|
justify-content: flex-start;
|
|
@@ -7484,3 +7488,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
7484
7488
|
min-width: fit-content;
|
|
7485
7489
|
}
|
|
7486
7490
|
}
|
|
7491
|
+
.wds-action-prompt__content {
|
|
7492
|
+
max-width: calc(48px * 10);
|
|
7493
|
+
max-width: calc(var(--size-48) * 10);
|
|
7494
|
+
}
|
|
@@ -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,
|
|
55
|
+
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, 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:
|
|
89
|
+
iconLabel: 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
|
-
onDismiss: onDismiss,
|
|
123
122
|
role: "region",
|
|
124
|
-
|
|
123
|
+
onDismiss: onDismiss,
|
|
124
|
+
...(ariaLabel ? {
|
|
125
125
|
'aria-label': ariaLabel
|
|
126
126
|
} : {
|
|
127
127
|
'aria-labelledby': ariaLabelledByIds,
|
|
@@ -132,9 +132,11 @@ const ActionPrompt = ({
|
|
|
132
132
|
children: [/*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
133
133
|
id: titleId,
|
|
134
134
|
type: typography.Typography.BODY_LARGE_BOLD,
|
|
135
|
+
className: "wds-action-prompt__content",
|
|
135
136
|
children: title
|
|
136
137
|
}), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
137
138
|
id: descId,
|
|
139
|
+
className: "wds-action-prompt__content",
|
|
138
140
|
children: description
|
|
139
141
|
})]
|
|
140
142
|
})
|
|
@@ -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\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
|
|
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 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={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 role=\"region\"\n onDismiss={onDismiss}\n {...(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} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\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","filter","Boolean","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,
|
|
51
|
+
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, 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:
|
|
85
|
+
iconLabel: 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
|
-
onDismiss: onDismiss,
|
|
119
118
|
role: "region",
|
|
120
|
-
|
|
119
|
+
onDismiss: onDismiss,
|
|
120
|
+
...(ariaLabel ? {
|
|
121
121
|
'aria-label': ariaLabel
|
|
122
122
|
} : {
|
|
123
123
|
'aria-labelledby': ariaLabelledByIds,
|
|
@@ -128,9 +128,11 @@ const ActionPrompt = ({
|
|
|
128
128
|
children: [/*#__PURE__*/jsx(Body, {
|
|
129
129
|
id: titleId,
|
|
130
130
|
type: Typography.BODY_LARGE_BOLD,
|
|
131
|
+
className: "wds-action-prompt__content",
|
|
131
132
|
children: title
|
|
132
133
|
}), description && /*#__PURE__*/jsx(Body, {
|
|
133
134
|
id: descId,
|
|
135
|
+
className: "wds-action-prompt__content",
|
|
134
136
|
children: description
|
|
135
137
|
})]
|
|
136
138
|
})
|
|
@@ -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\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
|
|
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 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={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 role=\"region\"\n onDismiss={onDismiss}\n {...(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} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\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","filter","Boolean","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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"}
|
|
@@ -74,7 +74,7 @@ const InlinePrompt = ({
|
|
|
74
74
|
media: renderMedia(),
|
|
75
75
|
"data-testid": dataTestId,
|
|
76
76
|
className: clsx.clsx('wds-inline-prompt', {
|
|
77
|
-
'wds-inline-prompt--
|
|
77
|
+
'wds-inline-prompt--auto-width': width !== 'full',
|
|
78
78
|
'wds-inline-prompt--muted': muted,
|
|
79
79
|
'wds-inline-prompt--loading': loading
|
|
80
80
|
}, className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--
|
|
1
|
+
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--auto-width': width !== 'full',\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...restProps}\n >\n <Body>{children}</Body>\n </PrimitivePrompt>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACM,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEM,cAAA,CAACQ,+BAAe,EAAA;AACdtB,IAAAA,SAAS,EAAEY,gBAAiB;IAC5BL,KAAK,EAAEM,WAAW,EAAG;AACrB,IAAA,aAAA,EAAaH,UAAW;AACxBL,IAAAA,SAAS,EAAEkB,SAAI,CACb,mBAAmB,EACnB;MACE,+BAA+B,EAAEd,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,SAAS;IAAAL,QAAA,eAEbQ,cAAA,CAACU,YAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;KAAe;AACxB,GAAiB,CAAC;AAEtB;;;;"}
|
|
@@ -72,7 +72,7 @@ const InlinePrompt = ({
|
|
|
72
72
|
media: renderMedia(),
|
|
73
73
|
"data-testid": dataTestId,
|
|
74
74
|
className: clsx('wds-inline-prompt', {
|
|
75
|
-
'wds-inline-prompt--
|
|
75
|
+
'wds-inline-prompt--auto-width': width !== 'full',
|
|
76
76
|
'wds-inline-prompt--muted': muted,
|
|
77
77
|
'wds-inline-prompt--loading': loading
|
|
78
78
|
}, className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--
|
|
1
|
+
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport { PrimitivePrompt } from '../PrimitivePrompt';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n width = 'auto',\n 'data-testid': dataTestId,\n ...restProps\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <PrimitivePrompt\n sentiment={surfaceSentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n {\n 'wds-inline-prompt--auto-width': width !== 'full',\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...restProps}\n >\n <Body>{children}</Body>\n </PrimitivePrompt>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","width","dataTestId","restProps","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","PrimitivePrompt","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAS,CACM,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEM,GAAA,CAACQ,eAAe,EAAA;AACdtB,IAAAA,SAAS,EAAEY,gBAAiB;IAC5BL,KAAK,EAAEM,WAAW,EAAG;AACrB,IAAA,aAAA,EAAaH,UAAW;AACxBL,IAAAA,SAAS,EAAEkB,IAAI,CACb,mBAAmB,EACnB;MACE,+BAA+B,EAAEd,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,SAAS;IAAAL,QAAA,eAEbQ,GAAA,CAACU,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;KAAe;AACxB,GAAiB,CAAC;AAEtB;;;;"}
|
package/build/styles/main.css
CHANGED
|
@@ -5346,6 +5346,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5346
5346
|
padding: var(--Prompt-padding, var(--padding-x-small));
|
|
5347
5347
|
text-align: left;
|
|
5348
5348
|
word-break: break-word;
|
|
5349
|
+
width: 100%;
|
|
5349
5350
|
}
|
|
5350
5351
|
.wds-prompt__content-wrapper {
|
|
5351
5352
|
display: grid;
|
|
@@ -5405,8 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5405
5406
|
.wds-inline-prompt:has(button):active {
|
|
5406
5407
|
background-color: var(--color-sentiment-background-surface-active);
|
|
5407
5408
|
}
|
|
5408
|
-
.wds-inline-prompt--
|
|
5409
|
-
width:
|
|
5409
|
+
.wds-inline-prompt--auto-width {
|
|
5410
|
+
width: auto;
|
|
5411
|
+
width: initial;
|
|
5410
5412
|
}
|
|
5411
5413
|
.wds-inline-prompt--muted {
|
|
5412
5414
|
opacity: 0.93;
|
|
@@ -5449,6 +5451,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5449
5451
|
display: flex;
|
|
5450
5452
|
flex-direction: column;
|
|
5451
5453
|
justify-content: center;
|
|
5454
|
+
max-width: calc(48px * 10);
|
|
5455
|
+
max-width: calc(var(--size-48) * 10);
|
|
5452
5456
|
}
|
|
5453
5457
|
.wds-info-prompt__content:has(.wds-info-prompt__title) {
|
|
5454
5458
|
justify-content: flex-start;
|
|
@@ -7484,3 +7488,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
7484
7488
|
min-width: fit-content;
|
|
7485
7489
|
}
|
|
7486
7490
|
}
|
|
7491
|
+
.wds-action-prompt__content {
|
|
7492
|
+
max-width: calc(48px * 10);
|
|
7493
|
+
max-width: calc(var(--size-48) * 10);
|
|
7494
|
+
}
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
.wds-inline-prompt:has(button):active {
|
|
19
19
|
background-color: var(--color-sentiment-background-surface-active);
|
|
20
20
|
}
|
|
21
|
-
.wds-inline-prompt--
|
|
22
|
-
width:
|
|
21
|
+
.wds-inline-prompt--auto-width {
|
|
22
|
+
width: auto;
|
|
23
|
+
width: initial;
|
|
23
24
|
}
|
|
24
25
|
.wds-inline-prompt--muted {
|
|
25
26
|
opacity: 0.93;
|
|
@@ -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,eAAO,MAAM,YAAY,GAAI,8IAY1B,iBAAiB,
|
|
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,gCA2HnB,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
package/package.json
CHANGED
package/src/main.css
CHANGED
|
@@ -5346,6 +5346,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5346
5346
|
padding: var(--Prompt-padding, var(--padding-x-small));
|
|
5347
5347
|
text-align: left;
|
|
5348
5348
|
word-break: break-word;
|
|
5349
|
+
width: 100%;
|
|
5349
5350
|
}
|
|
5350
5351
|
.wds-prompt__content-wrapper {
|
|
5351
5352
|
display: grid;
|
|
@@ -5405,8 +5406,9 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5405
5406
|
.wds-inline-prompt:has(button):active {
|
|
5406
5407
|
background-color: var(--color-sentiment-background-surface-active);
|
|
5407
5408
|
}
|
|
5408
|
-
.wds-inline-prompt--
|
|
5409
|
-
width:
|
|
5409
|
+
.wds-inline-prompt--auto-width {
|
|
5410
|
+
width: auto;
|
|
5411
|
+
width: initial;
|
|
5410
5412
|
}
|
|
5411
5413
|
.wds-inline-prompt--muted {
|
|
5412
5414
|
opacity: 0.93;
|
|
@@ -5449,6 +5451,8 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
5449
5451
|
display: flex;
|
|
5450
5452
|
flex-direction: column;
|
|
5451
5453
|
justify-content: center;
|
|
5454
|
+
max-width: calc(48px * 10);
|
|
5455
|
+
max-width: calc(var(--size-48) * 10);
|
|
5452
5456
|
}
|
|
5453
5457
|
.wds-info-prompt__content:has(.wds-info-prompt__title) {
|
|
5454
5458
|
justify-content: flex-start;
|
|
@@ -7484,3 +7488,7 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
7484
7488
|
min-width: fit-content;
|
|
7485
7489
|
}
|
|
7486
7490
|
}
|
|
7491
|
+
.wds-action-prompt__content {
|
|
7492
|
+
max-width: calc(48px * 10);
|
|
7493
|
+
max-width: calc(var(--size-48) * 10);
|
|
7494
|
+
}
|
|
@@ -1,12 +1,10 @@
|
|
|
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
|
-
import { lorem10 } from '../../test-utils';
|
|
7
|
-
|
|
8
|
-
import { action } from 'storybook/actions';
|
|
9
|
-
import Title from '../../title';
|
|
6
|
+
import { lorem10, lorem20 } from '../../test-utils';
|
|
7
|
+
|
|
10
8
|
import { withVariantConfig } from '../../../.storybook/helpers';
|
|
11
9
|
|
|
12
10
|
const meta: Meta<typeof ActionPrompt> = {
|
|
@@ -185,3 +183,26 @@ export const OnDismiss: Story = {
|
|
|
185
183
|
);
|
|
186
184
|
},
|
|
187
185
|
};
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* While the component itself will stretch to the full available width, the text container will be
|
|
189
|
+
* capped at `480px` to ensure optimal readability.
|
|
190
|
+
*
|
|
191
|
+
* [Visit wise.design](https://wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
|
|
192
|
+
*/
|
|
193
|
+
export const ParagraphWidth: Story = {
|
|
194
|
+
parameters: {
|
|
195
|
+
docs: {
|
|
196
|
+
canvas: {
|
|
197
|
+
sourceState: 'hidden',
|
|
198
|
+
},
|
|
199
|
+
},
|
|
200
|
+
},
|
|
201
|
+
args: {
|
|
202
|
+
title: lorem10,
|
|
203
|
+
description: lorem20,
|
|
204
|
+
sentiment: 'success',
|
|
205
|
+
action: { label: 'View details', onClick: fn() },
|
|
206
|
+
onDismiss: () => {},
|
|
207
|
+
},
|
|
208
|
+
};
|
|
@@ -55,7 +55,7 @@ export const ActionPrompt = ({
|
|
|
55
55
|
|
|
56
56
|
const ariaLabelledByIds = [
|
|
57
57
|
media['aria-hidden'] ? undefined : mediaId,
|
|
58
|
-
|
|
58
|
+
ariaLabel ? undefined : titleId,
|
|
59
59
|
]
|
|
60
60
|
.filter(Boolean)
|
|
61
61
|
.join(' ');
|
|
@@ -104,7 +104,7 @@ export const ActionPrompt = ({
|
|
|
104
104
|
id={mediaId}
|
|
105
105
|
size={48}
|
|
106
106
|
sentiment={sentiment}
|
|
107
|
-
iconLabel={
|
|
107
|
+
iconLabel={media['aria-hidden'] ? null : media['aria-label']}
|
|
108
108
|
/>
|
|
109
109
|
);
|
|
110
110
|
};
|
|
@@ -148,9 +148,9 @@ export const ActionPrompt = ({
|
|
|
148
148
|
</Button>
|
|
149
149
|
</>
|
|
150
150
|
}
|
|
151
|
-
onDismiss={onDismiss}
|
|
152
151
|
role="region"
|
|
153
|
-
{
|
|
152
|
+
onDismiss={onDismiss}
|
|
153
|
+
{...(ariaLabel
|
|
154
154
|
? { 'aria-label': ariaLabel }
|
|
155
155
|
: {
|
|
156
156
|
'aria-labelledby': ariaLabelledByIds,
|
|
@@ -158,10 +158,14 @@ export const ActionPrompt = ({
|
|
|
158
158
|
})}
|
|
159
159
|
>
|
|
160
160
|
<div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>
|
|
161
|
-
<Body id={titleId} type={Typography.BODY_LARGE_BOLD}>
|
|
161
|
+
<Body id={titleId} type={Typography.BODY_LARGE_BOLD} className="wds-action-prompt__content">
|
|
162
162
|
{title}
|
|
163
163
|
</Body>
|
|
164
|
-
{description &&
|
|
164
|
+
{description && (
|
|
165
|
+
<Body id={descId} className="wds-action-prompt__content">
|
|
166
|
+
{description}
|
|
167
|
+
</Body>
|
|
168
|
+
)}
|
|
165
169
|
</div>
|
|
166
170
|
</PrimitivePrompt>
|
|
167
171
|
);
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
display: flex;
|
|
7
7
|
flex-direction: column;
|
|
8
8
|
justify-content: center;
|
|
9
|
+
max-width: calc(var(--size-48) * 10);
|
|
9
10
|
|
|
10
11
|
&:has(.wds-info-prompt__title) {
|
|
11
12
|
justify-content: flex-start; /* Top align when title exists */
|
|
@@ -34,4 +35,4 @@
|
|
|
34
35
|
.wds-prompt__media-wrapper {
|
|
35
36
|
padding: 0;
|
|
36
37
|
}
|
|
37
|
-
}
|
|
38
|
+
}
|
|
@@ -2,6 +2,7 @@ import type { ReactElement } from 'react';
|
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
3
|
import { action } from 'storybook/actions';
|
|
4
4
|
import { Confetti, GiftBox, Star, Travel } from '@transferwise/icons';
|
|
5
|
+
import { lorem10, lorem20 } from '../../test-utils';
|
|
5
6
|
import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
|
|
6
7
|
|
|
7
8
|
const withComponentGrid =
|
|
@@ -294,6 +295,28 @@ export const Accessibility: StoryObj<InfoPromptProps> = {
|
|
|
294
295
|
decorators: [withComponentGrid()],
|
|
295
296
|
};
|
|
296
297
|
|
|
298
|
+
/**
|
|
299
|
+
* While the component itself will stretch to the full available width, the text container will be
|
|
300
|
+
* capped at `480px` to ensure optimal readability.
|
|
301
|
+
*
|
|
302
|
+
* [Visit wise.design](https://wise.design/components/info-prompt#writing-an-info-prompt) for guidance on writing effective prompt messages that are concise and easy to understand.
|
|
303
|
+
*/
|
|
304
|
+
export const ParagraphWidth: StoryObj<PreviewStoryArgs> = {
|
|
305
|
+
parameters: {
|
|
306
|
+
docs: {
|
|
307
|
+
canvas: {
|
|
308
|
+
sourceState: 'hidden',
|
|
309
|
+
},
|
|
310
|
+
},
|
|
311
|
+
},
|
|
312
|
+
args: {
|
|
313
|
+
title: lorem10,
|
|
314
|
+
description: lorem20,
|
|
315
|
+
sentiment: 'success',
|
|
316
|
+
onDismiss: () => {},
|
|
317
|
+
},
|
|
318
|
+
};
|
|
319
|
+
|
|
297
320
|
/**
|
|
298
321
|
* Complete example showing all features combined:
|
|
299
322
|
* sentiment, title, description, action, onDismiss, and custom media.
|
|
@@ -18,8 +18,9 @@
|
|
|
18
18
|
.wds-inline-prompt:has(button):active {
|
|
19
19
|
background-color: var(--color-sentiment-background-surface-active);
|
|
20
20
|
}
|
|
21
|
-
.wds-inline-prompt--
|
|
22
|
-
width:
|
|
21
|
+
.wds-inline-prompt--auto-width {
|
|
22
|
+
width: auto;
|
|
23
|
+
width: initial;
|
|
23
24
|
}
|
|
24
25
|
.wds-inline-prompt--muted {
|
|
25
26
|
opacity: 0.93;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
3
|
import { action } from 'storybook/actions';
|
|
4
|
-
import { Clock,
|
|
4
|
+
import { Clock, Taxi, Travel } from '@transferwise/icons';
|
|
5
5
|
import { lorem5 } from '../../test-utils';
|
|
6
6
|
import Link from '../../link';
|
|
7
7
|
import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
|
|
@@ -136,9 +136,16 @@ describe('InlinePrompt', () => {
|
|
|
136
136
|
expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--full-width');
|
|
137
137
|
});
|
|
138
138
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
139
|
+
describe('width', () => {
|
|
140
|
+
it('applies auto width class by default', () => {
|
|
141
|
+
render(<InlinePrompt {...defaultProps} data-testid="prompt" />);
|
|
142
|
+
expect(screen.getByTestId('prompt')).toHaveClass('wds-inline-prompt--auto-width');
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
it('strips the class if `width` is set to `full`', () => {
|
|
146
|
+
render(<InlinePrompt {...defaultProps} width="full" data-testid="prompt" />);
|
|
147
|
+
expect(screen.getByTestId('prompt')).not.toHaveClass('wds-inline-prompt--auto-width');
|
|
148
|
+
});
|
|
142
149
|
});
|
|
143
150
|
});
|
|
144
151
|
});
|
|
@@ -94,7 +94,7 @@ export const InlinePrompt = ({
|
|
|
94
94
|
className={clsx(
|
|
95
95
|
'wds-inline-prompt',
|
|
96
96
|
{
|
|
97
|
-
'wds-inline-prompt--
|
|
97
|
+
'wds-inline-prompt--auto-width': width !== 'full',
|
|
98
98
|
'wds-inline-prompt--muted': muted,
|
|
99
99
|
'wds-inline-prompt--loading': loading,
|
|
100
100
|
},
|