@transferwise/components 0.0.0-experimental-555e4ff → 0.0.0-experimental-b458b80

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.
Files changed (22) hide show
  1. package/build/listItem/Prompt/ListItemPrompt.js +5 -4
  2. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  3. package/build/listItem/Prompt/ListItemPrompt.mjs +6 -2
  4. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  5. package/build/main.css +26 -26
  6. package/build/styles/main.css +26 -26
  7. package/build/styles/prompt/InfoPrompt/InfoPrompt.css +5 -5
  8. package/build/styles/sentimentSurface/SentimentSurface.css +21 -21
  9. package/build/types/listItem/ListItem.d.ts +1 -1
  10. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +2 -3
  11. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  12. package/package.json +3 -3
  13. package/src/listItem/Prompt/ListItemPrompt.story.tsx +71 -9
  14. package/src/listItem/Prompt/ListItemPrompt.test.tsx +31 -0
  15. package/src/listItem/Prompt/ListItemPrompt.tsx +8 -2
  16. package/src/main.css +26 -26
  17. package/src/prompt/InfoPrompt/InfoPrompt.css +5 -5
  18. package/src/prompt/InfoPrompt/InfoPrompt.less +8 -7
  19. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +13 -10
  20. package/src/prompt/InlinePrompt/InlinePrompt.test.tsx +13 -1
  21. package/src/sentimentSurface/SentimentSurface.css +21 -21
  22. package/src/sentimentSurface/SentimentSurface.less +13 -13
package/build/listItem/Prompt/ListItemPrompt.js CHANGED
@@ -1,7 +1,5 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var React = require('react');
6
4
  require('../../common/theme.js');
7
5
  require('../../common/direction.js');
@@ -44,7 +42,9 @@ require('../../link/Link.messages.js');
44
42
  const Prompt = ({
45
43
  sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
46
44
  mediaLabel,
47
- children
45
+ children,
46
+ media,
47
+ loading
48
48
  }) => {
49
49
  const {
50
50
  ids,
@@ -54,6 +54,8 @@ const Prompt = ({
54
54
  return /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
55
55
  id: ids.prompt,
56
56
  sentiment: sentiment$1,
57
+ media: media,
58
+ loading: loading,
57
59
  mediaLabel: mediaLabel,
58
60
  muted: isLongLivedMuted,
59
61
  className: "wds-list-item-prompt",
@@ -63,5 +65,4 @@ const Prompt = ({
63
65
  Prompt.displayName = 'ListItem.Prompt';
64
66
 
65
67
  exports.Prompt = Prompt;
66
- exports.default = Prompt;
67
68
  //# sourceMappingURL=ListItemPrompt.js.map
package/build/listItem/Prompt/ListItemPrompt.js.map CHANGED
@@ -1 +1 @@
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;;;;;"}
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<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\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 media,\n loading,\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 media={media}\n loading={loading}\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';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,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;AACflB,IAAAA,SAAS,EAAEA,WAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
package/build/listItem/Prompt/ListItemPrompt.mjs CHANGED
@@ -40,7 +40,9 @@ import '../../link/Link.messages.mjs';
40
40
  const Prompt = ({
41
41
  sentiment = Sentiment.NEUTRAL,
42
42
  mediaLabel,
43
- children
43
+ children,
44
+ media,
45
+ loading
44
46
  }) => {
45
47
  const {
46
48
  ids,
@@ -50,6 +52,8 @@ const Prompt = ({
50
52
  return /*#__PURE__*/jsx(InlinePrompt, {
51
53
  id: ids.prompt,
52
54
  sentiment: sentiment,
55
+ media: media,
56
+ loading: loading,
53
57
  mediaLabel: mediaLabel,
54
58
  muted: isLongLivedMuted,
55
59
  className: "wds-list-item-prompt",
@@ -58,5 +62,5 @@ const Prompt = ({
58
62
  };
59
63
  Prompt.displayName = 'ListItem.Prompt';
60
64
 
61
- export { Prompt, Prompt as default };
65
+ export { Prompt };
62
66
  //# sourceMappingURL=ListItemPrompt.mjs.map
package/build/listItem/Prompt/ListItemPrompt.mjs.map CHANGED
@@ -1 +1 @@
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;;;;"}
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<\n InlinePromptProps,\n 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'\n>;\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 media,\n loading,\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 media={media}\n loading={loading}\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';\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","media","loading","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;EACVC,QAAQ;EACRC,KAAK;AACLC,EAAAA;AAAO,CACa,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;AACflB,IAAAA,SAAS,EAAEA,SAAU;AACrBK,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,OAAO,EAAEA,OAAQ;AACjBH,IAAAA,UAAU,EAAEA,UAAW;AACvBgB,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAhB,IAAAA,QAAA,EAE/BO,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGV;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACsB,WAAW,GAAG,iBAAiB;;;;"}
package/build/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5442,9 +5442,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5442
5442
  stroke: currentColor;
5443
5443
  }
5444
5444
  .wds-info-prompt {
5445
- --Prompt-border-radius: var(--radius-medium);
5446
5445
  --Prompt-gap: var(--size-8);
5447
- --Prompt-padding: var(--size-12);
5446
+ --Prompt-padding: 12px;
5448
5447
  }
5449
5448
  .wds-info-prompt__content {
5450
5449
  display: flex;
@@ -5458,16 +5457,17 @@ html:not([dir="rtl"]) .np-navigation-option {
5458
5457
  .wds-info-prompt__title,
5459
5458
  .wds-info-prompt__description {
5460
5459
  display: block;
5460
+ color: var(--color-sentiment-primary);
5461
5461
  }
5462
5462
  .wds-info-prompt__action {
5463
- align-self: flex-start;
5464
5463
  margin-top: var(--Prompt-gap);
5465
5464
  }
5465
+ .wds-info-prompt__media {
5466
+ display: flex;
5467
+ }
5466
5468
  .wds-info-prompt__media svg {
5467
5469
  width: 24px;
5468
- width: var(--size-24);
5469
5470
  height: 24px;
5470
- height: var(--size-24);
5471
5471
  }
5472
5472
  .wds-info-prompt .wds-prompt__media-wrapper {
5473
5473
  padding: 0;
package/build/styles/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5442,9 +5442,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5442
5442
  stroke: currentColor;
5443
5443
  }
5444
5444
  .wds-info-prompt {
5445
- --Prompt-border-radius: var(--radius-medium);
5446
5445
  --Prompt-gap: var(--size-8);
5447
- --Prompt-padding: var(--size-12);
5446
+ --Prompt-padding: 12px;
5448
5447
  }
5449
5448
  .wds-info-prompt__content {
5450
5449
  display: flex;
@@ -5458,16 +5457,17 @@ html:not([dir="rtl"]) .np-navigation-option {
5458
5457
  .wds-info-prompt__title,
5459
5458
  .wds-info-prompt__description {
5460
5459
  display: block;
5460
+ color: var(--color-sentiment-primary);
5461
5461
  }
5462
5462
  .wds-info-prompt__action {
5463
- align-self: flex-start;
5464
5463
  margin-top: var(--Prompt-gap);
5465
5464
  }
5465
+ .wds-info-prompt__media {
5466
+ display: flex;
5467
+ }
5466
5468
  .wds-info-prompt__media svg {
5467
5469
  width: 24px;
5468
- width: var(--size-24);
5469
5470
  height: 24px;
5470
- height: var(--size-24);
5471
5471
  }
5472
5472
  .wds-info-prompt .wds-prompt__media-wrapper {
5473
5473
  padding: 0;
package/build/styles/prompt/InfoPrompt/InfoPrompt.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .wds-info-prompt {
2
- --Prompt-border-radius: var(--radius-medium);
3
2
  --Prompt-gap: var(--size-8);
4
- --Prompt-padding: var(--size-12);
3
+ --Prompt-padding: 12px;
5
4
  }
6
5
  .wds-info-prompt__content {
7
6
  display: flex;
@@ -15,16 +14,17 @@
15
14
  .wds-info-prompt__title,
16
15
  .wds-info-prompt__description {
17
16
  display: block;
17
+ color: var(--color-sentiment-primary);
18
18
  }
19
19
  .wds-info-prompt__action {
20
- align-self: flex-start;
21
20
  margin-top: var(--Prompt-gap);
22
21
  }
22
+ .wds-info-prompt__media {
23
+ display: flex;
24
+ }
23
25
  .wds-info-prompt__media svg {
24
26
  width: 24px;
25
- width: var(--size-24);
26
27
  height: 24px;
27
- height: var(--size-24);
28
28
  }
29
29
  .wds-info-prompt .wds-prompt__media-wrapper {
30
30
  padding: 0;
package/build/styles/sentimentSurface/SentimentSurface.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/build/types/listItem/ListItem.d.ts CHANGED
@@ -112,7 +112,7 @@ export declare const ListItem: {
112
112
  displayName: string;
113
113
  };
114
114
  Prompt: {
115
- ({ sentiment, mediaLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
115
+ ({ sentiment, mediaLabel, children, media, loading, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
116
116
  displayName: string;
117
117
  };
118
118
  };
package/build/types/listItem/Prompt/ListItemPrompt.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { type InlinePromptProps } from '../../prompt';
2
- export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
2
+ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'>;
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,8 +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, mediaLabel, children, }: ListItemPromptProps): import("react").JSX.Element;
10
+ ({ sentiment, mediaLabel, children, media, loading, }: ListItemPromptProps): import("react").JSX.Element;
11
11
  displayName: string;
12
12
  };
13
- export default Prompt;
14
13
  //# sourceMappingURL=ListItemPrompt.d.ts.map
package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,CACpC,iBAAiB,EACjB,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAC9D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2DAMhB,mBAAmB;;CAiBrB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-555e4ff",
3
+ "version": "0.0.0-experimental-b458b80",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -88,8 +88,8 @@
88
88
  "storybook-addon-test-codegen": "^3.0.1",
89
89
  "@transferwise/less-config": "3.1.2",
90
90
  "@transferwise/neptune-css": "14.26.1",
91
- "@wise/wds-configs": "0.0.0",
92
- "@wise/components-theming": "1.10.1"
91
+ "@wise/components-theming": "1.10.1",
92
+ "@wise/wds-configs": "0.0.0"
93
93
  },
94
94
  "peerDependencies": {
95
95
  "@transferwise/icons": "^3 || ^4",
package/src/listItem/Prompt/ListItemPrompt.story.tsx CHANGED
@@ -11,6 +11,7 @@ import {
11
11
  } from '../_stories/subcomponents';
12
12
  import { ListItem } from '../ListItem';
13
13
  import { Prompt, type ListItemPromptProps } from './ListItemPrompt';
14
+ import { Clock } from '@transferwise/icons';
14
15
 
15
16
  const meta: Meta<ListItemPromptProps> = {
16
17
  component: Prompt,
@@ -66,7 +67,7 @@ export const Playground: Story = {
66
67
  subtitle={lorem10}
67
68
  media={MEDIA.avatarSingle}
68
69
  control={CONTROLS.switch}
69
- prompt={<Prompt {...args} />}
70
+ prompt={<ListItem.Prompt {...args} />}
70
71
  />
71
72
  </List>
72
73
  ),
@@ -86,28 +87,89 @@ export const Sentiment: Story = {
86
87
  subtitle={lorem10}
87
88
  media={MEDIA.avatarSingle}
88
89
  control={CONTROLS.switch}
89
- prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
90
+ prompt={
91
+ <ListItem.Prompt sentiment={Sentiments.NEUTRAL}>
92
+ This is a neutral prompt.
93
+ </ListItem.Prompt>
94
+ }
90
95
  />
91
96
  <ListItem
92
97
  title={lorem5}
93
98
  subtitle={lorem10}
94
99
  media={MEDIA.avatarSingle}
95
100
  control={CONTROLS.switch}
96
- prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
101
+ prompt={
102
+ <ListItem.Prompt sentiment={Sentiments.POSITIVE}>
103
+ This is a positive prompt.
104
+ </ListItem.Prompt>
105
+ }
97
106
  />
98
107
  <ListItem
99
108
  title={lorem5}
100
109
  subtitle={lorem10}
101
110
  media={MEDIA.avatarSingle}
102
111
  control={CONTROLS.switch}
103
- prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
112
+ prompt={
113
+ <ListItem.Prompt sentiment={Sentiments.WARNING}>
114
+ This is a warning prompt.
115
+ </ListItem.Prompt>
116
+ }
104
117
  />
105
118
  <ListItem
106
119
  title={lorem5}
107
120
  subtitle={lorem10}
108
121
  media={MEDIA.avatarSingle}
109
122
  control={CONTROLS.switch}
110
- prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
123
+ prompt={
124
+ <ListItem.Prompt sentiment={Sentiments.NEGATIVE}>
125
+ This is a negative prompt.
126
+ </ListItem.Prompt>
127
+ }
128
+ />
129
+ </List>
130
+ ),
131
+ };
132
+
133
+ /**
134
+ * While all main sentiments (`warning`, `negative`, `positive` and `neutral`) are associated with a
135
+ * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
136
+ * closer to the prompt's content. <br /><br />
137
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
138
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
139
+ * <br /><br />
140
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
141
+ * Icon's `title` prop instead.
142
+ */
143
+ export const IconOverrides: Story = {
144
+ parameters: {
145
+ controls: { disable: true },
146
+ actions: { disable: true },
147
+ a11y: { disable: true },
148
+ knobs: { disable: true },
149
+ },
150
+ render: (args) => (
151
+ <List>
152
+ <ListItem
153
+ title={lorem5}
154
+ subtitle={lorem10}
155
+ media={MEDIA.avatarSingle}
156
+ control={CONTROLS.switch}
157
+ prompt={
158
+ <ListItem.Prompt sentiment={Sentiments.WARNING} mediaLabel="Processing: ">
159
+ This prompt uses default Icon, but with a custom label for screen readers.
160
+ </ListItem.Prompt>
161
+ }
162
+ />
163
+ <ListItem
164
+ title={lorem5}
165
+ subtitle={lorem10}
166
+ media={MEDIA.avatarSingle}
167
+ control={CONTROLS.switch}
168
+ prompt={
169
+ <ListItem.Prompt sentiment={Sentiments.WARNING} media={<Clock title="Processing: " />}>
170
+ This prompt uses custom Icon with a custom label for screen readers.
171
+ </ListItem.Prompt>
172
+ }
111
173
  />
112
174
  </List>
113
175
  ),
@@ -135,13 +197,13 @@ export const Interactivity: Story = {
135
197
  media={MEDIA.avatarSingle}
136
198
  control={CONTROLS.switch}
137
199
  prompt={
138
- <Prompt sentiment={args.sentiment}>
200
+ <ListItem.Prompt sentiment={args.sentiment}>
139
201
  This prompt includes a{' '}
140
202
  <Link href="https://wise.com" target="_blank" rel="noreferrer">
141
203
  link to some resource
142
204
  </Link>{' '}
143
205
  to help the user in their journey.
144
- </Prompt>
206
+ </ListItem.Prompt>
145
207
  }
146
208
  />
147
209
 
@@ -151,13 +213,13 @@ export const Interactivity: Story = {
151
213
  media={MEDIA.avatarSingle}
152
214
  control={CONTROLS.switch}
153
215
  prompt={
154
- <Prompt sentiment={args.sentiment}>
216
+ <ListItem.Prompt sentiment={args.sentiment}>
155
217
  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
156
218
  This prompt includes an <Link onClick={action('inline button')}>
157
219
  inline button
158
220
  </Link>{' '}
159
221
  than can e.g. trigger a modal.
160
- </Prompt>
222
+ </ListItem.Prompt>
161
223
  }
162
224
  />
163
225
  </List>
package/src/listItem/Prompt/ListItemPrompt.test.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { Clock } from '@transferwise/icons';
1
2
  import { mockMatchMedia, render, screen } from '../../test-utils';
2
3
  import { Sentiment } from '../../common';
3
4
  import { ListItem } from '../ListItem';
@@ -18,6 +19,8 @@ describe('ListItem.Prompt', () => {
18
19
  });
19
20
 
20
21
  describe('render icon', () => {
22
+ const customLabel = 'Custom icon label';
23
+
21
24
  it.each([
22
25
  [Sentiment.NEUTRAL, 'info-icon'],
23
26
  [Sentiment.POSITIVE, 'check-icon'],
@@ -32,6 +35,34 @@ describe('ListItem.Prompt', () => {
32
35
  );
33
36
  expect(screen.getByTestId(iconId)).toBeInTheDocument();
34
37
  });
38
+
39
+ it('should accept accessible name override for a status icon', () => {
40
+ render(
41
+ <ListItem
42
+ title="Test Title"
43
+ prompt={
44
+ <ListItem.Prompt sentiment={Sentiment.NEGATIVE} mediaLabel={customLabel}>
45
+ Message
46
+ </ListItem.Prompt>
47
+ }
48
+ />,
49
+ );
50
+ expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
51
+ });
52
+
53
+ it('should accept icon accessible name override', () => {
54
+ render(
55
+ <ListItem
56
+ title="Test Title"
57
+ prompt={
58
+ <ListItem.Prompt sentiment={Sentiment.NEGATIVE} media={<Clock title={customLabel} />}>
59
+ Message
60
+ </ListItem.Prompt>
61
+ }
62
+ />,
63
+ );
64
+ expect(screen.getByLabelText(customLabel)).toBeInTheDocument();
65
+ });
35
66
  });
36
67
 
37
68
  describe('muted state', () => {
package/src/listItem/Prompt/ListItemPrompt.tsx CHANGED
@@ -3,7 +3,10 @@ import { Sentiment } from '../../common';
3
3
  import { ListItemContext, type ListItemContextData } from '../ListItemContext';
4
4
  import { InlinePrompt, type InlinePromptProps } from '../../prompt';
5
5
 
6
- export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
6
+ export type ListItemPromptProps = Pick<
7
+ InlinePromptProps,
8
+ 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
9
+ >;
7
10
 
8
11
  /**
9
12
  * This component allows for rendering an Inline Prompt. <br />
@@ -15,6 +18,8 @@ export const Prompt = ({
15
18
  sentiment = Sentiment.NEUTRAL,
16
19
  mediaLabel,
17
20
  children,
21
+ media,
22
+ loading,
18
23
  }: ListItemPromptProps) => {
19
24
  const { ids, props } = useContext<ListItemContextData>(ListItemContext);
20
25
  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
@@ -23,6 +28,8 @@ export const Prompt = ({
23
28
  <InlinePrompt
24
29
  id={ids.prompt}
25
30
  sentiment={sentiment}
31
+ media={media}
32
+ loading={loading}
26
33
  mediaLabel={mediaLabel}
27
34
  muted={isLongLivedMuted}
28
35
  className="wds-list-item-prompt"
@@ -33,4 +40,3 @@ export const Prompt = ({
33
40
  };
34
41
 
35
42
  Prompt.displayName = 'ListItem.Prompt';
36
- export default Prompt;
package/src/main.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
@@ -5442,9 +5442,8 @@ html:not([dir="rtl"]) .np-navigation-option {
5442
5442
  stroke: currentColor;
5443
5443
  }
5444
5444
  .wds-info-prompt {
5445
- --Prompt-border-radius: var(--radius-medium);
5446
5445
  --Prompt-gap: var(--size-8);
5447
- --Prompt-padding: var(--size-12);
5446
+ --Prompt-padding: 12px;
5448
5447
  }
5449
5448
  .wds-info-prompt__content {
5450
5449
  display: flex;
@@ -5458,16 +5457,17 @@ html:not([dir="rtl"]) .np-navigation-option {
5458
5457
  .wds-info-prompt__title,
5459
5458
  .wds-info-prompt__description {
5460
5459
  display: block;
5460
+ color: var(--color-sentiment-primary);
5461
5461
  }
5462
5462
  .wds-info-prompt__action {
5463
- align-self: flex-start;
5464
5463
  margin-top: var(--Prompt-gap);
5465
5464
  }
5465
+ .wds-info-prompt__media {
5466
+ display: flex;
5467
+ }
5466
5468
  .wds-info-prompt__media svg {
5467
5469
  width: 24px;
5468
- width: var(--size-24);
5469
5470
  height: 24px;
5470
- height: var(--size-24);
5471
5471
  }
5472
5472
  .wds-info-prompt .wds-prompt__media-wrapper {
5473
5473
  padding: 0;
package/src/prompt/InfoPrompt/InfoPrompt.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .wds-info-prompt {
2
- --Prompt-border-radius: var(--radius-medium);
3
2
  --Prompt-gap: var(--size-8);
4
- --Prompt-padding: var(--size-12);
3
+ --Prompt-padding: 12px;
5
4
  }
6
5
  .wds-info-prompt__content {
7
6
  display: flex;
@@ -15,16 +14,17 @@
15
14
  .wds-info-prompt__title,
16
15
  .wds-info-prompt__description {
17
16
  display: block;
17
+ color: var(--color-sentiment-primary);
18
18
  }
19
19
  .wds-info-prompt__action {
20
- align-self: flex-start;
21
20
  margin-top: var(--Prompt-gap);
22
21
  }
22
+ .wds-info-prompt__media {
23
+ display: flex;
24
+ }
23
25
  .wds-info-prompt__media svg {
24
26
  width: 24px;
25
- width: var(--size-24);
26
27
  height: 24px;
27
- height: var(--size-24);
28
28
  }
29
29
  .wds-info-prompt .wds-prompt__media-wrapper {
30
30
  padding: 0;
package/src/prompt/InfoPrompt/InfoPrompt.less CHANGED
@@ -1,7 +1,6 @@
1
1
  .wds-info-prompt {
2
- --Prompt-border-radius: var(--radius-medium);
3
2
  --Prompt-gap: var(--size-8);
4
- --Prompt-padding: var(--size-12);
3
+ --Prompt-padding: 12px;
5
4
 
6
5
  &__content {
7
6
  display: flex;
@@ -12,25 +11,27 @@
12
11
  justify-content: flex-start; /* Top align when title exists */
13
12
  }
14
13
  }
14
+
15
15
  &__title,
16
16
  &__description {
17
17
  display: block;
18
+ color: var(--color-sentiment-primary);
18
19
  }
19
20
 
20
21
  &__action {
21
- align-self: flex-start;
22
22
  margin-top: var(--Prompt-gap);
23
23
  }
24
24
 
25
25
  &__media {
26
- // To ensure icons are sized correctly, we set a fixed size for SVGs within the media wrapper
26
+ display: flex;
27
+
27
28
  svg {
28
- width: var(--size-24);
29
- height: var(--size-24);
29
+ width: 24px;
30
+ height: 24px;
30
31
  }
31
32
  }
32
33
 
33
34
  .wds-prompt__media-wrapper {
34
35
  padding: 0;
35
36
  }
36
- }
37
+ }
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED
@@ -225,24 +225,27 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
225
225
  * While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
226
226
  * default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
227
227
  * closer to the prompt's content. <br /><br />
228
- * It's also possible to override the default icon's accessible name announced by screen readers
229
- * via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
228
+ * It's also possible to override the default StatusIcon's accessible name announced by screen
229
+ * readers via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
230
+ * <br /><br />
231
+ * **NB**: If you're setting a label on a custom Icon, the accessible name should be provided via
232
+ * Icon's `title` prop instead.
230
233
  */
231
234
  export const IconOverrides: StoryObj<PreviewStoryArgs> = {
232
235
  render: (args: PreviewStoryArgs) => {
233
236
  return (
234
237
  <>
235
- <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
236
- Your travel account is set up and ready to use.
237
- </InlinePrompt>
238
- <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
239
- Connect Wise with your taxi app to get exclusive discounts.
238
+ <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
239
+ This prompt uses default Icon, but with a custom label for screen readers.
240
240
  </InlinePrompt>
241
- <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
241
+ <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
242
242
  The account verification is taking longer than usual.
243
243
  </InlinePrompt>
244
- <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
245
- The identity document you provided has expired.
244
+ <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
245
+ Your travel account is set up and ready to use.
246
+ </InlinePrompt>
247
+ <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
248
+ Connect Wise with your taxi app to get exclusive discounts.
246
249
  </InlinePrompt>
247
250
  </>
248
251
  );
package/src/prompt/InlinePrompt/InlinePrompt.test.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { Clock } from '@transferwise/icons';
1
2
  import { mockMatchMedia, render, screen } from '../../test-utils';
2
3
  import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
3
4
  import { Sentiment } from '../../common';
@@ -91,11 +92,22 @@ describe('InlinePrompt', () => {
91
92
  });
92
93
  }
93
94
 
94
- it('should allow for customisation of aria label', () => {
95
+ it('should allow for customisation of aria label for StatusIcon', () => {
95
96
  render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
96
97
  expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
97
98
  });
98
99
 
100
+ it('should allow for customisation of aria label for a custom Icon', () => {
101
+ render(
102
+ <InlinePrompt
103
+ {...defaultProps}
104
+ sentiment={sentiment}
105
+ media={<Clock title={mediaLabel} />}
106
+ />,
107
+ );
108
+ expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
109
+ });
110
+
99
111
  it('should retain custom label while muted', () => {
100
112
  render(
101
113
  <InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,
package/src/sentimentSurface/SentimentSurface.css CHANGED
@@ -304,18 +304,18 @@
304
304
  --color-sentiment-interactive-primary: #454745;
305
305
  --color-sentiment-interactive-primary-hover: #353635;
306
306
  --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: #F1F1ED;
308
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
309
- --color-sentiment-interactive-secondary-active: #DFDED5;
310
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
311
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
312
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
307
+ --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
+ --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
+ --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
+ --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
+ --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
313
  --color-sentiment-interactive-control: #F1F1ED;
314
314
  --color-sentiment-interactive-control-hover: #E7E7E1;
315
315
  --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: #F1F1ED;
317
- --color-sentiment-background-surface-hover: #E7E7E1;
318
- --color-sentiment-background-surface-active: #DFDED5;
316
+ --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
+ --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
+ --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
319
  }
320
320
  .np-theme-personal .wds-sentiment-surface-neutral-elevated,
321
321
  .np-theme-business .wds-sentiment-surface-neutral-elevated,
@@ -331,9 +331,9 @@
331
331
  --color-sentiment-interactive-secondary: #454745;
332
332
  --color-sentiment-interactive-secondary-hover: #353635;
333
333
  --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #5A5C5A;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6D6F6D;
336
- --color-sentiment-interactive-secondary-neutral-active: #727472;
334
+ --color-sentiment-interactive-secondary-neutral: #585958;
335
+ --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
+ --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
337
  --color-sentiment-interactive-control: #454745;
338
338
  --color-sentiment-interactive-control-hover: #353635;
339
339
  --color-sentiment-interactive-control-active: #232423;
@@ -352,18 +352,18 @@
352
352
  --color-sentiment-interactive-primary: #F1F1ED;
353
353
  --color-sentiment-interactive-primary-hover: #E7E7E1;
354
354
  --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: #2A2C29;
356
- --color-sentiment-interactive-secondary-hover: #414441;
357
- --color-sentiment-interactive-secondary-active: #595B58;
358
- --color-sentiment-interactive-secondary-neutral: #424441;
359
- --color-sentiment-interactive-secondary-neutral-hover: #4C4E4B;
360
- --color-sentiment-interactive-secondary-neutral-active: #565955;
355
+ --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
+ --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
+ --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
+ --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
+ --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
+ --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
361
  --color-sentiment-interactive-control: #2A2C29;
362
362
  --color-sentiment-interactive-control-hover: #414441;
363
363
  --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: #2A2C29;
365
- --color-sentiment-background-surface-hover: #414441;
366
- --color-sentiment-background-surface-active: #595B58;
364
+ --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
+ --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
+ --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
367
  }
368
368
  .np-theme-personal--dark .wds-sentiment-surface-neutral-elevated,
369
369
  .np-theme-business--dark .wds-sentiment-surface-neutral-elevated,
package/src/sentimentSurface/SentimentSurface.less CHANGED
@@ -178,12 +178,12 @@
178
178
  .np-theme-business--bright-green & {
179
179
  &-base {
180
180
  .sentiment-surface-tokens(
181
- #454745, #353635, #232423, // content-primary (default, hover, active)
182
- #454745, #353635, #232423, // interactive-primary
183
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-secondary
184
- #E4E4DC, #DCDCD2, #D3D2C6, // interactive-secondary-neutral
185
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
186
- #F1F1ED, #E7E7E1, #DFDED5 // background-surface
181
+ #454745, #353635, #232423, // content-primary (default, hover, active)
182
+ #454745, #353635, #232423, // interactive-primary
183
+ rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17), // interactive-secondary
184
+ rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17), // interactive-secondary-neutral
185
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-control
186
+ rgba(62, 59, 7, 0.07), rgba(62, 59, 7, 0.12), rgba(62, 59, 7, 0.17) // background-surface
187
187
  );
188
188
  }
189
189
  &-elevated {
@@ -191,7 +191,7 @@
191
191
  #F1F1ED, #E7E7E1, #DFDED5, // content-primary
192
192
  #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
193
193
  #454745, #353635, #232423, // interactive-secondary
194
- #5A5C5A, #6D6F6D, #727472, // interactive-secondary-neutral
194
+ #585958, #6A6C6A, #7D7E7D, // interactive-secondary-neutral
195
195
  #454745, #353635, #232423, // interactive-control
196
196
  #454745, #353635, #232423 // background-surface
197
197
  );
@@ -205,12 +205,12 @@
205
205
  .np-theme-platform--forest-green & {
206
206
  &-base {
207
207
  .sentiment-surface-tokens(
208
- #F1F1ED, #E7E7E1, #DFDED5, // content-primary
209
- #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
210
- #2A2C29, #414441, #595B58, // interactive-secondary
211
- #424441, #4C4E4B, #565955, // interactive-secondary-neutral
212
- #2A2C29, #414441, #595B58, // interactive-control
213
- #2A2C29, #414441, #595B58 // background-surface
208
+ #F1F1ED, #E7E7E1, #DFDED5, // content-primary
209
+ #F1F1ED, #E7E7E1, #DFDED5, // interactive-primary
210
+ rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30), // interactive-secondary
211
+ rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30), // interactive-secondary-neutral
212
+ #2A2C29, #414441, #595B58, // interactive-control
213
+ rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.30) // background-surface
214
214
  );
215
215
  }
216
216
  &-elevated {