@transferwise/components 0.0.0-experimental-bbf9517 → 0.0.0-experimental-3780b7e

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 (19) hide show
  1. package/build/listItem/Prompt/ListItemPrompt.js +4 -5
  2. package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
  3. package/build/listItem/Prompt/ListItemPrompt.mjs +2 -6
  4. package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
  5. package/build/main.css +21 -21
  6. package/build/styles/main.css +21 -21
  7. package/build/styles/sentimentSurface/SentimentSurface.css +21 -21
  8. package/build/types/listItem/ListItem.d.ts +1 -1
  9. package/build/types/listItem/Prompt/ListItemPrompt.d.ts +3 -2
  10. package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
  11. package/package.json +1 -1
  12. package/src/listItem/Prompt/ListItemPrompt.story.tsx +9 -71
  13. package/src/listItem/Prompt/ListItemPrompt.test.tsx +0 -31
  14. package/src/listItem/Prompt/ListItemPrompt.tsx +2 -8
  15. package/src/main.css +21 -21
  16. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +10 -13
  17. package/src/prompt/InlinePrompt/InlinePrompt.test.tsx +1 -13
  18. package/src/sentimentSurface/SentimentSurface.css +21 -21
  19. package/src/sentimentSurface/SentimentSurface.less +13 -13
package/build/listItem/Prompt/ListItemPrompt.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var React = require('react');
4
6
  require('../../common/theme.js');
5
7
  require('../../common/direction.js');
@@ -42,9 +44,7 @@ require('../../link/Link.messages.js');
42
44
  const Prompt = ({
43
45
  sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
44
46
  mediaLabel,
45
- children,
46
- media,
47
- loading
47
+ children
48
48
  }) => {
49
49
  const {
50
50
  ids,
@@ -54,8 +54,6 @@ 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,
59
57
  mediaLabel: mediaLabel,
60
58
  muted: isLongLivedMuted,
61
59
  className: "wds-list-item-prompt",
@@ -65,4 +63,5 @@ const Prompt = ({
65
63
  Prompt.displayName = 'ListItem.Prompt';
66
64
 
67
65
  exports.Prompt = Prompt;
66
+ exports.default = Prompt;
68
67
  //# 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<\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;;;;"}
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;;;;;"}
package/build/listItem/Prompt/ListItemPrompt.mjs CHANGED
@@ -40,9 +40,7 @@ import '../../link/Link.messages.mjs';
40
40
  const Prompt = ({
41
41
  sentiment = Sentiment.NEUTRAL,
42
42
  mediaLabel,
43
- children,
44
- media,
45
- loading
43
+ children
46
44
  }) => {
47
45
  const {
48
46
  ids,
@@ -52,8 +50,6 @@ const Prompt = ({
52
50
  return /*#__PURE__*/jsx(InlinePrompt, {
53
51
  id: ids.prompt,
54
52
  sentiment: sentiment,
55
- media: media,
56
- loading: loading,
57
53
  mediaLabel: mediaLabel,
58
54
  muted: isLongLivedMuted,
59
55
  className: "wds-list-item-prompt",
@@ -62,5 +58,5 @@ const Prompt = ({
62
58
  };
63
59
  Prompt.displayName = 'ListItem.Prompt';
64
60
 
65
- export { Prompt };
61
+ export { Prompt, Prompt as default };
66
62
  //# 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<\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;;;;"}
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;;;;"}
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,
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,
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, media, loading, }: 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
  };
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' | 'media' | 'loading'>;
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,8 @@ 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, media, loading, }: ListItemPromptProps): import("react").JSX.Element;
10
+ ({ sentiment, mediaLabel, children, }: ListItemPromptProps): import("react").JSX.Element;
11
11
  displayName: string;
12
12
  };
13
+ export default Prompt;
13
14
  //# 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,CACpC,iBAAiB,EACjB,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAC9D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2DAMhB,mBAAmB;;CAiBrB,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-bbf9517",
3
+ "version": "0.0.0-experimental-3780b7e",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/listItem/Prompt/ListItemPrompt.story.tsx CHANGED
@@ -11,7 +11,6 @@ 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';
15
14
 
16
15
  const meta: Meta<ListItemPromptProps> = {
17
16
  component: Prompt,
@@ -67,7 +66,7 @@ export const Playground: Story = {
67
66
  subtitle={lorem10}
68
67
  media={MEDIA.avatarSingle}
69
68
  control={CONTROLS.switch}
70
- prompt={<ListItem.Prompt {...args} />}
69
+ prompt={<Prompt {...args} />}
71
70
  />
72
71
  </List>
73
72
  ),
@@ -87,89 +86,28 @@ export const Sentiment: Story = {
87
86
  subtitle={lorem10}
88
87
  media={MEDIA.avatarSingle}
89
88
  control={CONTROLS.switch}
90
- prompt={
91
- <ListItem.Prompt sentiment={Sentiments.NEUTRAL}>
92
- This is a neutral prompt.
93
- </ListItem.Prompt>
94
- }
89
+ prompt={<Prompt sentiment={Sentiments.NEUTRAL}>This is a neutral prompt.</Prompt>}
95
90
  />
96
91
  <ListItem
97
92
  title={lorem5}
98
93
  subtitle={lorem10}
99
94
  media={MEDIA.avatarSingle}
100
95
  control={CONTROLS.switch}
101
- prompt={
102
- <ListItem.Prompt sentiment={Sentiments.POSITIVE}>
103
- This is a positive prompt.
104
- </ListItem.Prompt>
105
- }
96
+ prompt={<Prompt sentiment={Sentiments.POSITIVE}>This is a positive prompt.</Prompt>}
106
97
  />
107
98
  <ListItem
108
99
  title={lorem5}
109
100
  subtitle={lorem10}
110
101
  media={MEDIA.avatarSingle}
111
102
  control={CONTROLS.switch}
112
- prompt={
113
- <ListItem.Prompt sentiment={Sentiments.WARNING}>
114
- This is a warning prompt.
115
- </ListItem.Prompt>
116
- }
103
+ prompt={<Prompt sentiment={Sentiments.WARNING}>This is a warning prompt.</Prompt>}
117
104
  />
118
105
  <ListItem
119
106
  title={lorem5}
120
107
  subtitle={lorem10}
121
108
  media={MEDIA.avatarSingle}
122
109
  control={CONTROLS.switch}
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
- }
110
+ prompt={<Prompt sentiment={Sentiments.NEGATIVE}>This is a negative prompt.</Prompt>}
173
111
  />
174
112
  </List>
175
113
  ),
@@ -197,13 +135,13 @@ export const Interactivity: Story = {
197
135
  media={MEDIA.avatarSingle}
198
136
  control={CONTROLS.switch}
199
137
  prompt={
200
- <ListItem.Prompt sentiment={args.sentiment}>
138
+ <Prompt sentiment={args.sentiment}>
201
139
  This prompt includes a{' '}
202
140
  <Link href="https://wise.com" target="_blank" rel="noreferrer">
203
141
  link to some resource
204
142
  </Link>{' '}
205
143
  to help the user in their journey.
206
- </ListItem.Prompt>
144
+ </Prompt>
207
145
  }
208
146
  />
209
147
 
@@ -213,13 +151,13 @@ export const Interactivity: Story = {
213
151
  media={MEDIA.avatarSingle}
214
152
  control={CONTROLS.switch}
215
153
  prompt={
216
- <ListItem.Prompt sentiment={args.sentiment}>
154
+ <Prompt sentiment={args.sentiment}>
217
155
  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
218
156
  This prompt includes an <Link onClick={action('inline button')}>
219
157
  inline button
220
158
  </Link>{' '}
221
159
  than can e.g. trigger a modal.
222
- </ListItem.Prompt>
160
+ </Prompt>
223
161
  }
224
162
  />
225
163
  </List>
package/src/listItem/Prompt/ListItemPrompt.test.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { Clock } from '@transferwise/icons';
2
1
  import { mockMatchMedia, render, screen } from '../../test-utils';
3
2
  import { Sentiment } from '../../common';
4
3
  import { ListItem } from '../ListItem';
@@ -19,8 +18,6 @@ describe('ListItem.Prompt', () => {
19
18
  });
20
19
 
21
20
  describe('render icon', () => {
22
- const customLabel = 'Custom icon label';
23
-
24
21
  it.each([
25
22
  [Sentiment.NEUTRAL, 'info-icon'],
26
23
  [Sentiment.POSITIVE, 'check-icon'],
@@ -35,34 +32,6 @@ describe('ListItem.Prompt', () => {
35
32
  );
36
33
  expect(screen.getByTestId(iconId)).toBeInTheDocument();
37
34
  });
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
- });
66
35
  });
67
36
 
68
37
  describe('muted state', () => {
package/src/listItem/Prompt/ListItemPrompt.tsx CHANGED
@@ -3,10 +3,7 @@ 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<
7
- InlinePromptProps,
8
- 'children' | 'sentiment' | 'mediaLabel' | 'media' | 'loading'
9
- >;
6
+ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
10
7
 
11
8
  /**
12
9
  * This component allows for rendering an Inline Prompt. <br />
@@ -18,8 +15,6 @@ export const Prompt = ({
18
15
  sentiment = Sentiment.NEUTRAL,
19
16
  mediaLabel,
20
17
  children,
21
- media,
22
- loading,
23
18
  }: ListItemPromptProps) => {
24
19
  const { ids, props } = useContext<ListItemContextData>(ListItemContext);
25
20
  const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);
@@ -28,8 +23,6 @@ export const Prompt = ({
28
23
  <InlinePrompt
29
24
  id={ids.prompt}
30
25
  sentiment={sentiment}
31
- media={media}
32
- loading={loading}
33
26
  mediaLabel={mediaLabel}
34
27
  muted={isLongLivedMuted}
35
28
  className="wds-list-item-prompt"
@@ -40,3 +33,4 @@ export const Prompt = ({
40
33
  };
41
34
 
42
35
  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,
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED
@@ -225,28 +225,25 @@ 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 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.
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.
233
230
  */
234
231
  export const IconOverrides: StoryObj<PreviewStoryArgs> = {
235
232
  render: (args: PreviewStoryArgs) => {
236
233
  return (
237
234
  <>
238
- <InlinePrompt {...args} sentiment="negative" mediaLabel="Rejected: ">
239
- This prompt uses default Icon, but with a custom label for screen readers.
240
- </InlinePrompt>
241
- <InlinePrompt {...args} media={<Clock title="Processing: " />} sentiment="warning">
242
- The account verification is taking longer than usual.
243
- </InlinePrompt>
244
- <InlinePrompt {...args} media={<Travel title="Activated: " />} sentiment="positive">
235
+ <InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
245
236
  Your travel account is set up and ready to use.
246
237
  </InlinePrompt>
247
- <InlinePrompt {...args} media={<Taxi title="Taxi addon: " />} sentiment="proposition">
238
+ <InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
248
239
  Connect Wise with your taxi app to get exclusive discounts.
249
240
  </InlinePrompt>
241
+ <InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
242
+ The account verification is taking longer than usual.
243
+ </InlinePrompt>
244
+ <InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
245
+ The identity document you provided has expired.
246
+ </InlinePrompt>
250
247
  </>
251
248
  );
252
249
  },
package/src/prompt/InlinePrompt/InlinePrompt.test.tsx CHANGED
@@ -1,4 +1,3 @@
1
- import { Clock } from '@transferwise/icons';
2
1
  import { mockMatchMedia, render, screen } from '../../test-utils';
3
2
  import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
4
3
  import { Sentiment } from '../../common';
@@ -92,22 +91,11 @@ describe('InlinePrompt', () => {
92
91
  });
93
92
  }
94
93
 
95
- it('should allow for customisation of aria label for StatusIcon', () => {
94
+ it('should allow for customisation of aria label', () => {
96
95
  render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
97
96
  expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
98
97
  });
99
98
 
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
-
111
99
  it('should retain custom label while muted', () => {
112
100
  render(
113
101
  <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 {