@transferwise/components 46.119.4 → 46.119.5

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.
@@ -32,7 +32,7 @@ var InlinePrompt = require('../../prompt/InlinePrompt/InlinePrompt.js');
32
32
 
33
33
  const Prompt = ({
34
34
  sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
35
- iconLabel,
35
+ mediaLabel,
36
36
  children
37
37
  }) => {
38
38
  const {
@@ -43,7 +43,7 @@ const Prompt = ({
43
43
  return /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
44
44
  id: ids.prompt,
45
45
  sentiment: sentiment$1,
46
- iconLabel: iconLabel,
46
+ mediaLabel: mediaLabel,
47
47
  muted: isLongLivedMuted,
48
48
  className: "wds-list-item-prompt",
49
49
  children: isLongLivedMuted ? props.disabledPromptMessage : children
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'iconLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n iconLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n iconLabel={iconLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","iconLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,SAAS;AACTC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,SAAS,EAAEA,SAAU;AACrBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}
1
+ {"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}
@@ -28,7 +28,7 @@ import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
28
28
 
29
29
  const Prompt = ({
30
30
  sentiment = Sentiment.NEUTRAL,
31
- iconLabel,
31
+ mediaLabel,
32
32
  children
33
33
  }) => {
34
34
  const {
@@ -39,7 +39,7 @@ const Prompt = ({
39
39
  return /*#__PURE__*/jsx(InlinePrompt, {
40
40
  id: ids.prompt,
41
41
  sentiment: sentiment,
42
- iconLabel: iconLabel,
42
+ mediaLabel: mediaLabel,
43
43
  muted: isLongLivedMuted,
44
44
  className: "wds-list-item-prompt",
45
45
  children: isLongLivedMuted ? props.disabledPromptMessage : children
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { clsx } from 'clsx';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'iconLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n iconLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n iconLabel={iconLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","iconLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,SAAS;AACTC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,SAAS,EAAEA,SAAU;AACrBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;"}
1
+ {"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;"}
@@ -37,7 +37,7 @@ const InlinePrompt = ({
37
37
  className,
38
38
  children,
39
39
  media = null,
40
- iconLabel,
40
+ mediaLabel,
41
41
  'data-testid': dataTestId,
42
42
  ...rest
43
43
  }) => {
@@ -47,7 +47,7 @@ const InlinePrompt = ({
47
47
  return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
48
48
  size: 16,
49
49
  "data-testid": "InlinePrompt_Muted",
50
- title: iconLabel
50
+ title: mediaLabel
51
51
  });
52
52
  }
53
53
  if (loading) {
@@ -62,13 +62,13 @@ const InlinePrompt = ({
62
62
  }
63
63
  if (sentiment$1 === 'proposition') {
64
64
  return media || /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {
65
- title: iconLabel
65
+ title: mediaLabel
66
66
  });
67
67
  }
68
68
  return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
69
69
  size: 16,
70
70
  sentiment: sentiment$1,
71
- iconLabel: iconLabel
71
+ iconLabel: mediaLabel
72
72
  });
73
73
  };
74
74
  return /*#__PURE__*/jsxRuntime.jsxs(SentimentSurface.default, {
@@ -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 SentimentSurface from '../../sentimentSurface';\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 `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n iconLabel?: string;\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 iconLabel,\n 'data-testid': dataTestId,\n ...rest\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={iconLabel} />;\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 === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={iconLabel} />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","iconLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,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,SAAS;AACT,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGX,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAU,QAAG;AACzF,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAU,OAAA,CAAG;AAC/C,IAAA;IAEA,oBAAOK,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,WAAU;AAACQ,MAAAA,SAAS,EAAEA;AAAU,KAAA,CAAG;EAC7E,CAAC;EAED,oBACEY,eAAA,CAACC,wBAAgB,EAAA;AACfrB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEiB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBtB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACU,YAAI,EAAA;AAAAjB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
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 SentimentSurface from '../../sentimentSurface';\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 `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n mediaLabel?: string;\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 'data-testid': dataTestId,\n ...rest\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 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 === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,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;AACV,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGX,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAW,QAAG;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAW,OAAA,CAAG;AAChD,IAAA;IAEA,oBAAOK,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,WAAU;AAACoB,MAAAA,SAAS,EAAEZ;AAAW,KAAA,CAAG;EAC9E,CAAC;EAED,oBACEa,eAAA,CAACC,wBAAgB,EAAA;AACftB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEkB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBvB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACW,YAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
@@ -35,7 +35,7 @@ const InlinePrompt = ({
35
35
  className,
36
36
  children,
37
37
  media = null,
38
- iconLabel,
38
+ mediaLabel,
39
39
  'data-testid': dataTestId,
40
40
  ...rest
41
41
  }) => {
@@ -45,7 +45,7 @@ const InlinePrompt = ({
45
45
  return /*#__PURE__*/jsx(BackslashCircle, {
46
46
  size: 16,
47
47
  "data-testid": "InlinePrompt_Muted",
48
- title: iconLabel
48
+ title: mediaLabel
49
49
  });
50
50
  }
51
51
  if (loading) {
@@ -60,13 +60,13 @@ const InlinePrompt = ({
60
60
  }
61
61
  if (sentiment === 'proposition') {
62
62
  return media || /*#__PURE__*/jsx(GiftBox, {
63
- title: iconLabel
63
+ title: mediaLabel
64
64
  });
65
65
  }
66
66
  return /*#__PURE__*/jsx(StatusIcon, {
67
67
  size: 16,
68
68
  sentiment: sentiment,
69
- iconLabel: iconLabel
69
+ iconLabel: mediaLabel
70
70
  });
71
71
  };
72
72
  return /*#__PURE__*/jsxs(SentimentSurface, {
@@ -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 SentimentSurface from '../../sentimentSurface';\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 `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n iconLabel?: string;\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 iconLabel,\n 'data-testid': dataTestId,\n ...rest\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={iconLabel} />;\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 === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={iconLabel} />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","iconLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,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,SAAS;AACT,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGX,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAU,QAAG;AACzF,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAU,OAAA,CAAG;AAC/C,IAAA;IAEA,oBAAOK,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,SAAU;AAACQ,MAAAA,SAAS,EAAEA;AAAU,KAAA,CAAG;EAC7E,CAAC;EAED,oBACEY,IAAA,CAACC,gBAAgB,EAAA;AACfrB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEiB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBtB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACU,IAAI,EAAA;AAAAjB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
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 SentimentSurface from '../../sentimentSurface';\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 `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n mediaLabel?: string;\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 'data-testid': dataTestId,\n ...rest\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 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 === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,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;AACV,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGX,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAW,QAAG;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAW,OAAA,CAAG;AAChD,IAAA;IAEA,oBAAOK,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,SAAU;AAACoB,MAAAA,SAAS,EAAEZ;AAAW,KAAA,CAAG;EAC9E,CAAC;EAED,oBACEa,IAAA,CAACC,gBAAgB,EAAA;AACftB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEkB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBvB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACW,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
@@ -112,7 +112,7 @@ export declare const ListItem: {
112
112
  displayName: string;
113
113
  };
114
114
  Prompt: {
115
- ({ sentiment, iconLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
115
+ ({ sentiment, mediaLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
116
116
  displayName: string;
117
117
  };
118
118
  };
@@ -1,5 +1,5 @@
1
1
  import { type InlinePromptProps } from '../../prompt';
2
- export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'iconLabel'>;
2
+ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
3
3
  /**
4
4
  * This component allows for rendering an Inline Prompt. <br />
5
5
  * In the future it will be a thin wrapper around a standalone component.<br />
@@ -7,7 +7,7 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
7
7
  * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
8
8
  */
9
9
  export declare const Prompt: {
10
- ({ sentiment, iconLabel, children, }: ListItemPromptProps): import("react").JSX.Element;
10
+ ({ sentiment, mediaLabel, children, }: ListItemPromptProps): import("react").JSX.Element;
11
11
  displayName: string;
12
12
  };
13
13
  export default Prompt;
@@ -1 +1 @@
1
- {"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC,CAAC;AAElG;;;;;GAKG;AACH,eAAO,MAAM,MAAM;0CAIhB,mBAAmB;;CAerB,CAAC;AAGF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAEnG;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2CAIhB,mBAAmB;;CAerB,CAAC;AAGF,eAAe,MAAM,CAAC"}
@@ -23,7 +23,7 @@ export type InlinePromptProps = {
23
23
  * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
24
24
  * To be used primarily for `proposition` sentiment.
25
25
  */
26
- iconLabel?: string;
26
+ mediaLabel?: string;
27
27
  id?: string;
28
28
  className?: string;
29
29
  'data-testid'?: string;
@@ -35,5 +35,5 @@ export type InlinePromptProps = {
35
35
  *
36
36
  * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
37
37
  */
38
- export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, iconLabel, "data-testid": dataTestId, ...rest }: InlinePromptProps) => import("react").JSX.Element;
38
+ export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, mediaLabel, "data-testid": dataTestId, ...rest }: InlinePromptProps) => import("react").JSX.Element;
39
39
  //# sourceMappingURL=InlinePrompt.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,0GAU1B,iBAAiB,gCA+CnB,CAAC"}
1
+ {"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,2GAU1B,iBAAiB,gCA+CnB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.119.4",
3
+ "version": "46.119.5",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -86,8 +86,8 @@
86
86
  "storybook-addon-test-codegen": "^3.0.1",
87
87
  "@transferwise/less-config": "3.1.2",
88
88
  "@transferwise/neptune-css": "14.26.1",
89
- "@wise/components-theming": "1.10.0",
90
- "@wise/wds-configs": "0.0.0"
89
+ "@wise/wds-configs": "0.0.0",
90
+ "@wise/components-theming": "1.10.0"
91
91
  },
92
92
  "peerDependencies": {
93
93
  "@transferwise/icons": "^3 || ^4",
@@ -71,16 +71,16 @@ describe('ListItem.Prompt', () => {
71
71
  });
72
72
 
73
73
  [
74
- { sentiment: Sentiment.NEGATIVE as const, iconLabel: 'Error:' },
75
- { sentiment: Sentiment.WARNING as const, iconLabel: 'Warning:' },
76
- { sentiment: Sentiment.NEUTRAL as const, iconLabel: 'Information:' },
77
- { sentiment: Sentiment.POSITIVE as const, iconLabel: 'Success:' },
78
- { sentiment: 'proposition' as const, iconLabel: '' },
79
- ].forEach(({ sentiment, iconLabel }) => {
74
+ { sentiment: Sentiment.NEGATIVE as const, mediaLabel: 'Error:' },
75
+ { sentiment: Sentiment.WARNING as const, mediaLabel: 'Warning:' },
76
+ { sentiment: Sentiment.NEUTRAL as const, mediaLabel: 'Information:' },
77
+ { sentiment: Sentiment.POSITIVE as const, mediaLabel: 'Success:' },
78
+ { sentiment: 'proposition' as const, mediaLabel: '' },
79
+ ].forEach(({ sentiment, mediaLabel }) => {
80
80
  describe(sentiment, () => {
81
81
  const customLabel = 'Custom icon label';
82
82
 
83
- if (!iconLabel) {
83
+ if (!mediaLabel) {
84
84
  it('should not have accessible name for the icon', () => {
85
85
  const { container } = render(
86
86
  <ListItem
@@ -98,7 +98,7 @@ describe('ListItem.Prompt', () => {
98
98
  prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
99
99
  />,
100
100
  );
101
- expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
101
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
102
102
  });
103
103
  }
104
104
 
@@ -107,7 +107,7 @@ describe('ListItem.Prompt', () => {
107
107
  <ListItem
108
108
  title="Test Title"
109
109
  prompt={
110
- <ListItem.Prompt sentiment={sentiment} iconLabel={customLabel}>
110
+ <ListItem.Prompt sentiment={sentiment} mediaLabel={customLabel}>
111
111
  Message
112
112
  </ListItem.Prompt>
113
113
  }
@@ -23,7 +23,7 @@ const meta: Meta<ListItemPromptProps> = {
23
23
  decorators: [withoutKey],
24
24
  args: {
25
25
  sentiment: undefined,
26
- iconLabel: undefined,
26
+ mediaLabel: undefined,
27
27
  children: 'You have done a terrible thing',
28
28
  },
29
29
  argTypes: {
@@ -1,10 +1,9 @@
1
1
  import { useContext } from 'react';
2
- import { clsx } from 'clsx';
3
2
  import { Sentiment } from '../../common';
4
3
  import { ListItemContext, type ListItemContextData } from '../ListItemContext';
5
4
  import { InlinePrompt, type InlinePromptProps } from '../../prompt';
6
5
 
7
- export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'iconLabel'>;
6
+ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
8
7
 
9
8
  /**
10
9
  * This component allows for rendering an Inline Prompt. <br />
@@ -14,7 +13,7 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
14
13
  */
15
14
  export const Prompt = ({
16
15
  sentiment = Sentiment.NEUTRAL,
17
- iconLabel,
16
+ mediaLabel,
18
17
  children,
19
18
  }: ListItemPromptProps) => {
20
19
  const { ids, props } = useContext<ListItemContextData>(ListItemContext);
@@ -24,7 +23,7 @@ export const Prompt = ({
24
23
  <InlinePrompt
25
24
  id={ids.prompt}
26
25
  sentiment={sentiment}
27
- iconLabel={iconLabel}
26
+ mediaLabel={mediaLabel}
28
27
  muted={isLongLivedMuted}
29
28
  className="wds-list-item-prompt"
30
29
  >
@@ -91,8 +91,8 @@ describe('InlinePrompt', () => {
91
91
  }
92
92
  });
93
93
 
94
- describe('iconLabel', () => {
95
- const iconLabel = 'Custom icon label';
94
+ describe('mediaLabel', () => {
95
+ const mediaLabel = 'Custom icon label';
96
96
 
97
97
  if (!statusIconLabel) {
98
98
  it('should not have accessible name for the icon', () => {
@@ -107,15 +107,15 @@ describe('InlinePrompt', () => {
107
107
  }
108
108
 
109
109
  it('should allow for customisation of aria label', () => {
110
- render(<InlinePrompt {...defaultProps} sentiment={sentiment} iconLabel={iconLabel} />);
111
- expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
110
+ render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
111
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
112
112
  });
113
113
 
114
114
  it('should retain custom label while muted', () => {
115
115
  render(
116
- <InlinePrompt {...defaultProps} sentiment={sentiment} iconLabel={iconLabel} muted />,
116
+ <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,
117
117
  );
118
- expect(screen.getByLabelText(iconLabel)).toBeInTheDocument();
118
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
119
119
  });
120
120
  });
121
121
  });
@@ -222,7 +222,7 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
222
222
  * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
223
223
  * closer to the prompt's content. <br /><br />
224
224
  * It's also possible to override the default icon's accessible name announced by screen readers
225
- * via `iconLabel` prop, which is especially useful for the `proposition` sentiment.
225
+ * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
226
226
  */
227
227
  export const IconOverrides: StoryObj<PreviewStoryArgs> = {
228
228
  render: (args: PreviewStoryArgs) => {
@@ -231,7 +231,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
231
231
  <InlinePrompt {...args} media={<Travel />} sentiment="positive">
232
232
  Your travel account is set up and ready to use.
233
233
  </InlinePrompt>
234
- <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" iconLabel="Taxi addon: ">
234
+ <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
235
235
  Connect Wise with your taxi app to get exclusive discounts.
236
236
  </InlinePrompt>
237
237
  <InlinePrompt {...args} media={<Taxi />} sentiment="negative">
@@ -32,7 +32,7 @@ export type InlinePromptProps = {
32
32
  * Override for the sentiment's-derived, default, accessible name announced by the screen readers.
33
33
  * To be used primarily for `proposition` sentiment.
34
34
  */
35
- iconLabel?: string;
35
+ mediaLabel?: string;
36
36
  id?: string;
37
37
  className?: string;
38
38
  'data-testid'?: string;
@@ -52,7 +52,7 @@ export const InlinePrompt = ({
52
52
  className,
53
53
  children,
54
54
  media = null,
55
- iconLabel,
55
+ mediaLabel,
56
56
  'data-testid': dataTestId,
57
57
  ...rest
58
58
  }: InlinePromptProps) => {
@@ -60,7 +60,7 @@ export const InlinePrompt = ({
60
60
 
61
61
  const renderMedia = () => {
62
62
  if (muted) {
63
- return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={iconLabel} />;
63
+ return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
64
64
  }
65
65
  if (loading) {
66
66
  return (
@@ -77,10 +77,10 @@ export const InlinePrompt = ({
77
77
  }
78
78
 
79
79
  if (sentiment === 'proposition') {
80
- return media || <GiftBox title={iconLabel} />;
80
+ return media || <GiftBox title={mediaLabel} />;
81
81
  }
82
82
 
83
- return <StatusIcon size={16} sentiment={sentiment} iconLabel={iconLabel} />;
83
+ return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
84
84
  };
85
85
 
86
86
  return (