@transferwise/components 0.0.0-experimental-0e8573e → 0.0.0-experimental-5207770

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 (26) hide show
  1. package/build/criticalBanner/CriticalCommsBanner.js +68 -3
  2. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  3. package/build/criticalBanner/CriticalCommsBanner.mjs +69 -4
  4. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  5. package/build/main.css +33 -16
  6. package/build/styles/button/Button.css +0 -1
  7. package/build/styles/criticalBanner/CriticalCommsBanner.css +33 -15
  8. package/build/styles/main.css +33 -16
  9. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +4 -1
  10. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  11. package/build/types/criticalBanner/index.d.ts +1 -0
  12. package/build/types/criticalBanner/index.d.ts.map +1 -1
  13. package/build/types/index.d.ts +1 -0
  14. package/build/types/index.d.ts.map +1 -1
  15. package/package.json +1 -1
  16. package/src/button/Button.css +0 -1
  17. package/src/button/Button.less +14 -19
  18. package/src/criticalBanner/CriticalCommsBanner.css +33 -15
  19. package/src/criticalBanner/CriticalCommsBanner.less +46 -36
  20. package/src/criticalBanner/CriticalCommsBanner.story.tsx +9 -15
  21. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +70 -0
  22. package/src/criticalBanner/CriticalCommsBanner.test.tsx +66 -0
  23. package/src/criticalBanner/CriticalCommsBanner.tsx +54 -5
  24. package/src/criticalBanner/index.ts +1 -0
  25. package/src/index.ts +1 -0
  26. package/src/main.css +33 -16
package/build/criticalBanner/CriticalCommsBanner.js CHANGED
@@ -2,17 +2,81 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Alert = require('../alert/Alert.js');
5
+ var icons = require('@transferwise/icons');
6
6
  var clsx = require('clsx');
7
+ var Alert = require('../alert/Alert.js');
8
+ require('../common/theme.js');
9
+ require('../common/direction.js');
10
+ require('../common/propsValues/control.js');
11
+ require('../common/propsValues/breakpoint.js');
12
+ require('../common/propsValues/size.js');
13
+ require('../common/propsValues/typography.js');
14
+ require('../common/propsValues/width.js');
15
+ require('../common/propsValues/type.js');
16
+ require('../common/propsValues/dateMode.js');
17
+ require('../common/propsValues/monthFormat.js');
18
+ require('../common/propsValues/position.js');
19
+ require('../common/propsValues/layouts.js');
20
+ require('../common/propsValues/status.js');
21
+ var sentiment = require('../common/propsValues/sentiment.js');
22
+ require('../common/propsValues/profileType.js');
23
+ require('../common/propsValues/variant.js');
24
+ require('../common/propsValues/scroll.js');
25
+ require('../common/propsValues/markdownNodeType.js');
26
+ require('../common/fileType.js');
27
+ require('react');
28
+ require('react-intl');
29
+ require('../common/closeButton/CloseButton.messages.js');
7
30
  var jsxRuntime = require('react/jsx-runtime');
31
+ var Circle = require('../common/circle/Circle.js');
32
+ var SentimentSurface = require('../sentimentSurface/SentimentSurface.js');
8
33
 
34
+ const makeSurface = sentiment => {
35
+ const Surface = props => /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
36
+ as: "span",
37
+ emphasis: "elevated",
38
+ sentiment: sentiment,
39
+ ...props
40
+ });
41
+ Surface.displayName = `CriticalCommsSurface(${sentiment})`;
42
+ return Surface;
43
+ };
44
+ const iconBySentiment = {
45
+ [sentiment.Sentiment.NEGATIVE]: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
46
+ as: makeSurface(sentiment.Sentiment.NEGATIVE),
47
+ size: 32,
48
+ className: "status-circle negative",
49
+ children: /*#__PURE__*/jsxRuntime.jsx(icons.Alert, {
50
+ className: "status-icon light"
51
+ })
52
+ }),
53
+ [sentiment.Sentiment.WARNING]: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
54
+ as: makeSurface(sentiment.Sentiment.WARNING),
55
+ size: 32,
56
+ className: "status-circle warning",
57
+ children: /*#__PURE__*/jsxRuntime.jsx(icons.Alert, {
58
+ className: "status-icon dark"
59
+ })
60
+ }),
61
+ [sentiment.Sentiment.NEUTRAL]: /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
62
+ as: makeSurface(sentiment.Sentiment.NEUTRAL),
63
+ size: 32,
64
+ className: "status-circle neutral",
65
+ children: /*#__PURE__*/jsxRuntime.jsx(icons.ClockBorderless, {
66
+ className: "status-icon dark"
67
+ })
68
+ })
69
+ };
9
70
  function CriticalCommsBanner({
10
71
  title,
11
72
  subtitle,
12
73
  action,
74
+ sentiment: sentiment$1 = sentiment.Sentiment.NEGATIVE,
13
75
  className
14
76
  }) {
15
- return /*#__PURE__*/jsxRuntime.jsx("div", {
77
+ return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
78
+ sentiment: sentiment$1,
79
+ emphasis: "elevated",
16
80
  className: clsx.clsx('critical-comms', className),
17
81
  children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
18
82
  title: title,
@@ -23,7 +87,8 @@ function CriticalCommsBanner({
23
87
  text: action?.label
24
88
  },
25
89
  className: className,
26
- type: "warning"
90
+ type: sentiment$1,
91
+ icon: iconBySentiment[sentiment$1]
27
92
  })
28
93
  });
29
94
  }
package/build/criticalBanner/CriticalCommsBanner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n return (\n <div className={clsx('critical-comms', className)}>\n <Alert\n title={title}\n message={subtitle}\n action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n className={className}\n type=\"warning\"\n />\n </div>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","onClick","target","href","text","label","type"],"mappings":";;;;;;;;AAcA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,SAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,cAAA,CAACG,aAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,OAAO,EAAEP,MAAM,EAAEO,OAAO;QAAEC,MAAM,EAAER,MAAM,EAAES,IAAI;QAAEC,IAAI,EAAEV,MAAM,EAAEW;OAAQ;AAChFV,MAAAA,SAAS,EAAEA,SAAU;AACrBW,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
package/build/criticalBanner/CriticalCommsBanner.mjs CHANGED
@@ -1,16 +1,80 @@
1
- import Alert from '../alert/Alert.mjs';
1
+ import { ClockBorderless, Alert } from '@transferwise/icons';
2
2
  import { clsx } from 'clsx';
3
+ import Alert$1 from '../alert/Alert.mjs';
4
+ import '../common/theme.mjs';
5
+ import '../common/direction.mjs';
6
+ import '../common/propsValues/control.mjs';
7
+ import '../common/propsValues/breakpoint.mjs';
8
+ import '../common/propsValues/size.mjs';
9
+ import '../common/propsValues/typography.mjs';
10
+ import '../common/propsValues/width.mjs';
11
+ import '../common/propsValues/type.mjs';
12
+ import '../common/propsValues/dateMode.mjs';
13
+ import '../common/propsValues/monthFormat.mjs';
14
+ import '../common/propsValues/position.mjs';
15
+ import '../common/propsValues/layouts.mjs';
16
+ import '../common/propsValues/status.mjs';
17
+ import { Sentiment } from '../common/propsValues/sentiment.mjs';
18
+ import '../common/propsValues/profileType.mjs';
19
+ import '../common/propsValues/variant.mjs';
20
+ import '../common/propsValues/scroll.mjs';
21
+ import '../common/propsValues/markdownNodeType.mjs';
22
+ import '../common/fileType.mjs';
23
+ import 'react';
24
+ import 'react-intl';
25
+ import '../common/closeButton/CloseButton.messages.mjs';
3
26
  import { jsx } from 'react/jsx-runtime';
27
+ import Circle from '../common/circle/Circle.mjs';
28
+ import SentimentSurface from '../sentimentSurface/SentimentSurface.mjs';
4
29
 
30
+ const makeSurface = sentiment => {
31
+ const Surface = props => /*#__PURE__*/jsx(SentimentSurface, {
32
+ as: "span",
33
+ emphasis: "elevated",
34
+ sentiment: sentiment,
35
+ ...props
36
+ });
37
+ Surface.displayName = `CriticalCommsSurface(${sentiment})`;
38
+ return Surface;
39
+ };
40
+ const iconBySentiment = {
41
+ [Sentiment.NEGATIVE]: /*#__PURE__*/jsx(Circle, {
42
+ as: makeSurface(Sentiment.NEGATIVE),
43
+ size: 32,
44
+ className: "status-circle negative",
45
+ children: /*#__PURE__*/jsx(Alert, {
46
+ className: "status-icon light"
47
+ })
48
+ }),
49
+ [Sentiment.WARNING]: /*#__PURE__*/jsx(Circle, {
50
+ as: makeSurface(Sentiment.WARNING),
51
+ size: 32,
52
+ className: "status-circle warning",
53
+ children: /*#__PURE__*/jsx(Alert, {
54
+ className: "status-icon dark"
55
+ })
56
+ }),
57
+ [Sentiment.NEUTRAL]: /*#__PURE__*/jsx(Circle, {
58
+ as: makeSurface(Sentiment.NEUTRAL),
59
+ size: 32,
60
+ className: "status-circle neutral",
61
+ children: /*#__PURE__*/jsx(ClockBorderless, {
62
+ className: "status-icon dark"
63
+ })
64
+ })
65
+ };
5
66
  function CriticalCommsBanner({
6
67
  title,
7
68
  subtitle,
8
69
  action,
70
+ sentiment = Sentiment.NEGATIVE,
9
71
  className
10
72
  }) {
11
- return /*#__PURE__*/jsx("div", {
73
+ return /*#__PURE__*/jsx(SentimentSurface, {
74
+ sentiment: sentiment,
75
+ emphasis: "elevated",
12
76
  className: clsx('critical-comms', className),
13
- children: /*#__PURE__*/jsx(Alert, {
77
+ children: /*#__PURE__*/jsx(Alert$1, {
14
78
  title: title,
15
79
  message: subtitle,
16
80
  action: {
@@ -19,7 +83,8 @@ function CriticalCommsBanner({
19
83
  text: action?.label
20
84
  },
21
85
  className: className,
22
- type: "warning"
86
+ type: sentiment,
87
+ icon: iconBySentiment[sentiment]
23
88
  })
24
89
  });
25
90
  }
package/build/criticalBanner/CriticalCommsBanner.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import Alert from '../alert';\nimport { clsx } from 'clsx';\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n return (\n <div className={clsx('critical-comms', className)}>\n <Alert\n title={title}\n message={subtitle}\n action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n className={className}\n type=\"warning\"\n />\n </div>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","onClick","target","href","text","label","type"],"mappings":";;;;AAcA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA;AAAS,CAA4B,EAAA;AAC3F,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKD,IAAAA,SAAS,EAAEE,IAAI,CAAC,gBAAgB,EAAEF,SAAS,CAAE;IAAAG,QAAA,eAChDF,GAAA,CAACG,KAAK,EAAA;AACJP,MAAAA,KAAK,EAAEA,KAAM;AACbQ,MAAAA,OAAO,EAAEP,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEO,OAAO,EAAEP,MAAM,EAAEO,OAAO;QAAEC,MAAM,EAAER,MAAM,EAAES,IAAI;QAAEC,IAAI,EAAEV,MAAM,EAAEW;OAAQ;AAChFV,MAAAA,SAAS,EAAEA,SAAU;AACrBW,MAAAA,IAAI,EAAC;KAAS;AAElB,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
package/build/main.css CHANGED
@@ -485,37 +485,55 @@
485
485
  --color-sentiment-background-surface-hover: #CAF1F1;
486
486
  --color-sentiment-background-surface-active: #B6ECEC;
487
487
  }
488
- .np-theme-personal .critical-comms .alert-warning {
489
- color: var(--color-contrast-overlay);
490
- background-color: var(--color-sentiment-negative);
488
+ .critical-comms {
489
+ border-radius: 16px;
490
+ border-radius: var(--radius-medium);
491
+ overflow: hidden;
491
492
  }
492
- .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
493
- color: var(--color-contrast-overlay);
493
+ .critical-comms .alert {
494
+ background-color: var(--color-sentiment-background-surface);
495
+ color: var(--color-sentiment-content-primary);
496
+ margin-bottom: 0;
497
+ }
498
+ .critical-comms .alert .np-text-title-body {
499
+ color: var(--color-sentiment-content-primary);
494
500
  }
495
- .np-theme-personal .critical-comms .status-circle.warning {
501
+ .critical-comms .status-circle.negative {
496
502
  background-color: #ffffff;
497
503
  background-color: var(--color-background-screen);
498
504
  }
499
- .np-theme-personal .critical-comms .status-circle.warning .status-icon {
500
- color: var(--color-contrast-theme);
505
+ .critical-comms .status-circle.negative .status-icon {
506
+ color: #37517e;
507
+ color: var(--color-content-primary);
501
508
  }
502
- .np-theme-personal .critical-comms .alert__message .alert__action {
509
+ .critical-comms .alert__message .alert__action {
503
510
  margin-top: 16px;
504
511
  margin-top: var(--size-16);
505
512
  }
506
- .np-theme-personal .critical-comms .wds-Button {
507
- --Button-background: var(--color-contrast-overlay);
508
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
509
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
513
+ .critical-comms .wds-Button {
514
+ --Button-color: var(--color-content-primary);
515
+ --Button-color-hover: var(--color-content-primary);
516
+ --Button-color-active: var(--color-content-primary);
517
+ --Button-background: var(--color-background-screen);
518
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
519
+ --Button-background-active: var(--color-sentiment-interactive-primary-active);
520
+ }
521
+ .critical-comms .alert-warning .wds-Button {
522
+ --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
523
+ --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
510
524
  }
511
525
  @media (min-width: 768px) {
512
- .np-theme-personal .critical-comms .alert-warning .alert__message {
526
+ .critical-comms .alert-warning .alert__message,
527
+ .critical-comms .alert-negative .alert__message,
528
+ .critical-comms .alert-neutral .alert__message {
513
529
  flex-direction: row;
514
530
  justify-content: space-between;
515
531
  align-items: center;
516
532
  width: 100%;
517
533
  }
518
- .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
534
+ .critical-comms .alert-warning .alert__message .alert__action,
535
+ .critical-comms .alert-negative .alert__message .alert__action,
536
+ .critical-comms .alert-neutral .alert__message .alert__action {
519
537
  margin-top: 0;
520
538
  margin-left: 16px;
521
539
  margin-left: var(--padding-small);
@@ -1227,7 +1245,6 @@
1227
1245
  }
1228
1246
  /* Button Styles */
1229
1247
  .wds-Button {
1230
- background: yellow !important;
1231
1248
  display: inline-flex;
1232
1249
  flex: none;
1233
1250
  width: auto;
package/build/styles/button/Button.css CHANGED
@@ -46,7 +46,6 @@
46
46
  }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
- background: yellow !important;
50
49
  display: inline-flex;
51
50
  flex: none;
52
51
  width: auto;
package/build/styles/criticalBanner/CriticalCommsBanner.css CHANGED
@@ -1,34 +1,52 @@
1
- .np-theme-personal .critical-comms .alert-warning {
2
- color: var(--color-contrast-overlay);
3
- background-color: var(--color-sentiment-negative);
1
+ .critical-comms {
2
+ border-radius: 16px;
3
+ border-radius: var(--radius-medium);
4
+ overflow: hidden;
4
5
  }
5
- .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
6
- color: var(--color-contrast-overlay);
6
+ .critical-comms .alert {
7
+ background-color: var(--color-sentiment-background-surface);
8
+ color: var(--color-sentiment-content-primary);
9
+ margin-bottom: 0;
7
10
  }
8
- .np-theme-personal .critical-comms .status-circle.warning {
11
+ .critical-comms .alert .np-text-title-body {
12
+ color: var(--color-sentiment-content-primary);
13
+ }
14
+ .critical-comms .status-circle.negative {
9
15
  background-color: #ffffff;
10
16
  background-color: var(--color-background-screen);
11
17
  }
12
- .np-theme-personal .critical-comms .status-circle.warning .status-icon {
13
- color: var(--color-contrast-theme);
18
+ .critical-comms .status-circle.negative .status-icon {
19
+ color: #37517e;
20
+ color: var(--color-content-primary);
14
21
  }
15
- .np-theme-personal .critical-comms .alert__message .alert__action {
22
+ .critical-comms .alert__message .alert__action {
16
23
  margin-top: 16px;
17
24
  margin-top: var(--size-16);
18
25
  }
19
- .np-theme-personal .critical-comms .wds-Button {
20
- --Button-background: var(--color-contrast-overlay);
21
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
22
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
26
+ .critical-comms .wds-Button {
27
+ --Button-color: var(--color-content-primary);
28
+ --Button-color-hover: var(--color-content-primary);
29
+ --Button-color-active: var(--color-content-primary);
30
+ --Button-background: var(--color-background-screen);
31
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
32
+ --Button-background-active: var(--color-sentiment-interactive-primary-active);
33
+ }
34
+ .critical-comms .alert-warning .wds-Button {
35
+ --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
36
+ --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
23
37
  }
24
38
  @media (min-width: 768px) {
25
- .np-theme-personal .critical-comms .alert-warning .alert__message {
39
+ .critical-comms .alert-warning .alert__message,
40
+ .critical-comms .alert-negative .alert__message,
41
+ .critical-comms .alert-neutral .alert__message {
26
42
  flex-direction: row;
27
43
  justify-content: space-between;
28
44
  align-items: center;
29
45
  width: 100%;
30
46
  }
31
- .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
47
+ .critical-comms .alert-warning .alert__message .alert__action,
48
+ .critical-comms .alert-negative .alert__message .alert__action,
49
+ .critical-comms .alert-neutral .alert__message .alert__action {
32
50
  margin-top: 0;
33
51
  margin-left: 16px;
34
52
  margin-left: var(--padding-small);
package/build/styles/main.css CHANGED
@@ -485,37 +485,55 @@
485
485
  --color-sentiment-background-surface-hover: #CAF1F1;
486
486
  --color-sentiment-background-surface-active: #B6ECEC;
487
487
  }
488
- .np-theme-personal .critical-comms .alert-warning {
489
- color: var(--color-contrast-overlay);
490
- background-color: var(--color-sentiment-negative);
488
+ .critical-comms {
489
+ border-radius: 16px;
490
+ border-radius: var(--radius-medium);
491
+ overflow: hidden;
491
492
  }
492
- .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
493
- color: var(--color-contrast-overlay);
493
+ .critical-comms .alert {
494
+ background-color: var(--color-sentiment-background-surface);
495
+ color: var(--color-sentiment-content-primary);
496
+ margin-bottom: 0;
497
+ }
498
+ .critical-comms .alert .np-text-title-body {
499
+ color: var(--color-sentiment-content-primary);
494
500
  }
495
- .np-theme-personal .critical-comms .status-circle.warning {
501
+ .critical-comms .status-circle.negative {
496
502
  background-color: #ffffff;
497
503
  background-color: var(--color-background-screen);
498
504
  }
499
- .np-theme-personal .critical-comms .status-circle.warning .status-icon {
500
- color: var(--color-contrast-theme);
505
+ .critical-comms .status-circle.negative .status-icon {
506
+ color: #37517e;
507
+ color: var(--color-content-primary);
501
508
  }
502
- .np-theme-personal .critical-comms .alert__message .alert__action {
509
+ .critical-comms .alert__message .alert__action {
503
510
  margin-top: 16px;
504
511
  margin-top: var(--size-16);
505
512
  }
506
- .np-theme-personal .critical-comms .wds-Button {
507
- --Button-background: var(--color-contrast-overlay);
508
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
509
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
513
+ .critical-comms .wds-Button {
514
+ --Button-color: var(--color-content-primary);
515
+ --Button-color-hover: var(--color-content-primary);
516
+ --Button-color-active: var(--color-content-primary);
517
+ --Button-background: var(--color-background-screen);
518
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
519
+ --Button-background-active: var(--color-sentiment-interactive-primary-active);
520
+ }
521
+ .critical-comms .alert-warning .wds-Button {
522
+ --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
523
+ --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
510
524
  }
511
525
  @media (min-width: 768px) {
512
- .np-theme-personal .critical-comms .alert-warning .alert__message {
526
+ .critical-comms .alert-warning .alert__message,
527
+ .critical-comms .alert-negative .alert__message,
528
+ .critical-comms .alert-neutral .alert__message {
513
529
  flex-direction: row;
514
530
  justify-content: space-between;
515
531
  align-items: center;
516
532
  width: 100%;
517
533
  }
518
- .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
534
+ .critical-comms .alert-warning .alert__message .alert__action,
535
+ .critical-comms .alert-negative .alert__message .alert__action,
536
+ .critical-comms .alert-neutral .alert__message .alert__action {
519
537
  margin-top: 0;
520
538
  margin-left: 16px;
521
539
  margin-left: var(--padding-small);
@@ -1227,7 +1245,6 @@
1227
1245
  }
1228
1246
  /* Button Styles */
1229
1247
  .wds-Button {
1230
- background: yellow !important;
1231
1248
  display: inline-flex;
1232
1249
  flex: none;
1233
1250
  width: auto;
package/build/types/criticalBanner/CriticalCommsBanner.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import { Sentiment } from '../common';
2
+ export type CriticalCommsBannerSentiment = `${Sentiment.WARNING}` | `${Sentiment.NEGATIVE}` | `${Sentiment.NEUTRAL}`;
1
3
  export type CriticalCommsBannerProps = {
2
4
  title: string;
3
5
  subtitle?: string;
@@ -6,8 +8,9 @@ export type CriticalCommsBannerProps = {
6
8
  href?: string;
7
9
  onClick?: () => void;
8
10
  };
11
+ sentiment?: CriticalCommsBannerSentiment;
9
12
  className?: string;
10
13
  };
11
- declare function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps): import("react").JSX.Element;
14
+ declare function CriticalCommsBanner({ title, subtitle, action, sentiment, className, }: CriticalCommsBannerProps): import("react").JSX.Element;
12
15
  export default CriticalCommsBanner;
13
16
  //# sourceMappingURL=CriticalCommsBanner.d.ts.map
package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,wBAAwB,+BAY5F;AAED,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"CriticalCommsBanner.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/CriticalCommsBanner.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAItC,MAAM,MAAM,4BAA4B,GACpC,GAAG,SAAS,CAAC,OAAO,EAAE,GACtB,GAAG,SAAS,CAAC,QAAQ,EAAE,GACvB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;AAE3B,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,SAAS,CAAC,EAAE,4BAA4B,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4BF,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAA8B,EAC9B,SAAS,GACV,EAAE,wBAAwB,+BAiB1B;AAED,eAAe,mBAAmB,CAAC"}
package/build/types/criticalBanner/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default } from './CriticalCommsBanner';
2
+ export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './CriticalCommsBanner';
2
3
  //# sourceMappingURL=index.d.ts.map
package/build/types/criticalBanner/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/criticalBanner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC"}
package/build/types/index.d.ts CHANGED
@@ -105,6 +105,7 @@ export { default as Option } from './common/Option';
105
105
  export { default as BottomSheet } from './common/bottomSheet';
106
106
  export { default as BaseCard } from './common/baseCard';
107
107
  export { default as CriticalCommsBanner } from './criticalBanner';
108
+ export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './criticalBanner';
108
109
  export { default as DateInput } from './dateInput';
109
110
  export { default as DateLookup } from './dateLookup';
110
111
  export { default as Decision } from './decision';
package/build/types/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-0e8573e",
3
+ "version": "0.0.0-experimental-5207770",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/button/Button.css CHANGED
@@ -46,7 +46,6 @@
46
46
  }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
- background: yellow !important;
50
49
  display: inline-flex;
51
50
  flex: none;
52
51
  width: auto;
package/src/button/Button.less CHANGED
@@ -1,8 +1,7 @@
1
- @import "./Button.vars.less";
1
+ @import './Button.vars.less';
2
2
 
3
3
  /* Button Styles */
4
4
  .wds-Button {
5
- background: yellow !important;
6
5
  display: inline-flex;
7
6
  flex: none;
8
7
  width: auto;
@@ -18,9 +17,7 @@
18
17
  border-radius: var(--Button-border-radius);
19
18
  color: var(--Button-color);
20
19
  cursor: pointer;
21
- transition:
22
- color,
23
- background-color var(--Button-transition-duration) var(--Button-transition-easing);
20
+ transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
24
21
 
25
22
  &,
26
23
  &:hover,
@@ -93,7 +90,7 @@
93
90
  &:hover,
94
91
  &:active,
95
92
  &:focus {
96
- .wds-Button-labelText {
93
+ .wds-Button-labelText{
97
94
  text-decoration: underline;
98
95
  text-underline-offset: 3px;
99
96
  text-decoration-thickness: 1px;
@@ -128,15 +125,15 @@
128
125
  &--medium {
129
126
  padding: var(--Button-medium-padding);
130
127
 
131
- &:has(.wds-Button-avatars) {
128
+ &:has(.wds-Button-avatars){
132
129
  padding-inline-start: var(--size-8);
133
130
  }
134
131
 
135
- &:has(.wds-Button-icon--end) {
132
+ &:has(.wds-Button-icon--end){
136
133
  padding-inline-end: var(--size-8);
137
134
  }
138
135
 
139
- .wds-Button-icon--start {
136
+ .wds-Button-icon--start{
140
137
  margin-inline-end: var(--Button-label-gap);
141
138
  }
142
139
  }
@@ -144,15 +141,17 @@
144
141
  &--small {
145
142
  padding: var(--Button-small-padding);
146
143
 
147
- &:has(.wds-Button-icon--start) {
144
+ &:has(.wds-Button-icon--start){
148
145
  padding-inline-start: var(--size-8);
149
146
  }
150
147
 
151
- &:has(.wds-Button-icon--end) {
148
+ &:has(.wds-Button-icon--end){
152
149
  padding-inline-end: var(--size-8);
153
150
  }
154
151
  }
155
152
 
153
+
154
+
156
155
  // Width modifiers
157
156
  &--block {
158
157
  width: 100%;
@@ -170,11 +169,11 @@
170
169
  &-icon {
171
170
  display: inline-block;
172
171
 
173
- &--md {
172
+ &--md{
174
173
  --Button-iconSize: 18px;
175
174
  }
176
175
 
177
- &--sm {
176
+ &--sm{
178
177
  --Button-iconSize: 16px;
179
178
  }
180
179
 
@@ -226,12 +225,7 @@
226
225
  .wds-Button--secondary &,
227
226
  .wds-Button--secondary-neutral &,
228
227
  .wds-Button--tertiary & {
229
- .np-theme-personal:not(
230
- .np-theme-personal--dark,
231
- .np-theme-personal--forest-green,
232
- .np-theme-personal--bright-green
233
- )
234
- & {
228
+ .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
235
229
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
236
230
  }
237
231
  }
@@ -251,6 +245,7 @@
251
245
  }
252
246
  }
253
247
 
248
+
254
249
  :dir(rtl) {
255
250
  .wds-Button {
256
251
  .tw-icon-chevron-right,
package/src/criticalBanner/CriticalCommsBanner.css CHANGED
@@ -1,34 +1,52 @@
1
- .np-theme-personal .critical-comms .alert-warning {
2
- color: var(--color-contrast-overlay);
3
- background-color: var(--color-sentiment-negative);
1
+ .critical-comms {
2
+ border-radius: 16px;
3
+ border-radius: var(--radius-medium);
4
+ overflow: hidden;
4
5
  }
5
- .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
6
- color: var(--color-contrast-overlay);
6
+ .critical-comms .alert {
7
+ background-color: var(--color-sentiment-background-surface);
8
+ color: var(--color-sentiment-content-primary);
9
+ margin-bottom: 0;
7
10
  }
8
- .np-theme-personal .critical-comms .status-circle.warning {
11
+ .critical-comms .alert .np-text-title-body {
12
+ color: var(--color-sentiment-content-primary);
13
+ }
14
+ .critical-comms .status-circle.negative {
9
15
  background-color: #ffffff;
10
16
  background-color: var(--color-background-screen);
11
17
  }
12
- .np-theme-personal .critical-comms .status-circle.warning .status-icon {
13
- color: var(--color-contrast-theme);
18
+ .critical-comms .status-circle.negative .status-icon {
19
+ color: #37517e;
20
+ color: var(--color-content-primary);
14
21
  }
15
- .np-theme-personal .critical-comms .alert__message .alert__action {
22
+ .critical-comms .alert__message .alert__action {
16
23
  margin-top: 16px;
17
24
  margin-top: var(--size-16);
18
25
  }
19
- .np-theme-personal .critical-comms .wds-Button {
20
- --Button-background: var(--color-contrast-overlay);
21
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
22
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
26
+ .critical-comms .wds-Button {
27
+ --Button-color: var(--color-content-primary);
28
+ --Button-color-hover: var(--color-content-primary);
29
+ --Button-color-active: var(--color-content-primary);
30
+ --Button-background: var(--color-background-screen);
31
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
32
+ --Button-background-active: var(--color-sentiment-interactive-primary-active);
33
+ }
34
+ .critical-comms .alert-warning .wds-Button {
35
+ --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
36
+ --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
23
37
  }
24
38
  @media (min-width: 768px) {
25
- .np-theme-personal .critical-comms .alert-warning .alert__message {
39
+ .critical-comms .alert-warning .alert__message,
40
+ .critical-comms .alert-negative .alert__message,
41
+ .critical-comms .alert-neutral .alert__message {
26
42
  flex-direction: row;
27
43
  justify-content: space-between;
28
44
  align-items: center;
29
45
  width: 100%;
30
46
  }
31
- .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
47
+ .critical-comms .alert-warning .alert__message .alert__action,
48
+ .critical-comms .alert-negative .alert__message .alert__action,
49
+ .critical-comms .alert-neutral .alert__message .alert__action {
32
50
  margin-top: 0;
33
51
  margin-left: 16px;
34
52
  margin-left: var(--padding-small);
package/src/criticalBanner/CriticalCommsBanner.less CHANGED
@@ -1,51 +1,61 @@
1
- .np-theme-personal {
2
- .critical-comms {
3
- .alert-warning {
4
- color: var(--color-contrast-overlay);
5
- background-color: var(--color-sentiment-negative);
6
-
7
- .np-text-title-body {
8
- color: var(--color-contrast-overlay);
9
- }
10
- }
1
+ .critical-comms {
2
+ border-radius: var(--radius-medium);
3
+ overflow: hidden;
11
4
 
12
- .status-circle.warning {
13
- background-color: var(--color-background-screen);
5
+ .alert {
6
+ background-color: var(--color-sentiment-background-surface);
7
+ color: var(--color-sentiment-content-primary);
8
+ margin-bottom: 0;
14
9
 
15
- .status-icon {
16
- color: var(--color-contrast-theme);
17
- }
10
+ .np-text-title-body {
11
+ color: var(--color-sentiment-content-primary);
18
12
  }
13
+ }
19
14
 
20
- .alert__message {
21
- .alert__action {
22
- margin-top: var(--size-16);
23
- }
15
+ .status-circle.negative {
16
+ background-color: var(--color-background-screen);
17
+
18
+ .status-icon {
19
+ color: var(--color-content-primary);
24
20
  }
21
+ }
25
22
 
26
- .wds-Button {
27
- --Button-background: var(--color-contrast-overlay);
28
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
29
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
23
+ .alert__message {
24
+ .alert__action {
25
+ margin-top: var(--size-16);
30
26
  }
31
27
  }
32
28
 
29
+ .wds-Button {
30
+ --Button-color: var(--color-content-primary);
31
+ --Button-color-hover: var(--color-content-primary);
32
+ --Button-color-active: var(--color-content-primary);
33
+
34
+ --Button-background: var(--color-background-screen);
35
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
36
+ --Button-background-active: var(--color-sentiment-interactive-primary-active);
37
+ }
38
+
39
+ .alert-warning .wds-Button {
40
+ --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
41
+ --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
42
+ }
33
43
 
34
44
  @media (--screen-md) {
35
- .critical-comms {
36
- .alert-warning {
37
- .alert__message {
38
- flex-direction: row;
39
- justify-content: space-between;
40
- align-items: center;
41
- width: 100%;
42
-
43
- .alert__action {
44
- margin-top: 0;
45
- margin-left: var(--padding-small);
46
- }
45
+ .alert-warning,
46
+ .alert-negative,
47
+ .alert-neutral {
48
+ .alert__message {
49
+ flex-direction: row;
50
+ justify-content: space-between;
51
+ align-items: center;
52
+ width: 100%;
53
+
54
+ .alert__action {
55
+ margin-top: 0;
56
+ margin-left: var(--padding-small);
47
57
  }
48
58
  }
49
59
  }
50
60
  }
51
- }
61
+ }
package/src/criticalBanner/CriticalCommsBanner.story.tsx CHANGED
@@ -1,7 +1,5 @@
1
1
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
-
3
2
  import CriticalCommsBanner from '.';
4
- import { withVariantConfig } from '../../.storybook/helpers';
5
3
 
6
4
  export default {
7
5
  component: CriticalCommsBanner,
@@ -18,21 +16,17 @@ export const Basic = {
18
16
  },
19
17
  };
20
18
 
21
- export const Variants: Story = {
19
+ export const Sentiments: Story = {
20
+ render: (args) => (
21
+ <>
22
+ <CriticalCommsBanner {...args} sentiment="negative" title="Your account is overdrawn" />
23
+ <CriticalCommsBanner {...args} sentiment="warning" title="Your account needs attention" />
24
+ <CriticalCommsBanner {...args} sentiment="neutral" title="Your transfer is being processed" />
25
+ </>
26
+ ),
22
27
  args: {
23
- title: 'Your account is overdrawn',
24
- subtitle: 'Add money within the next 30 days',
25
- action: { label: 'Take action', href: 'https://wise.com' },
26
- },
27
- ...withVariantConfig(['default', 'dark', 'rtl']),
28
- };
29
-
30
- export const Mobile: Story = {
31
- tags: ['!autodocs'],
32
- args: {
33
- title: 'Your account is overdrawn',
34
28
  subtitle: 'Add money within the next 30 days',
35
29
  action: { label: 'Take action', href: 'https://wise.com' },
30
+ className: 'm-b-1',
36
31
  },
37
- ...withVariantConfig(['default', 'dark', 'rtl', 'mobile']),
38
32
  };
package/src/criticalBanner/CriticalCommsBanner.test.story.tsx ADDED
@@ -0,0 +1,70 @@
1
+ import { Meta, StoryObj } from '@storybook/react-webpack5';
2
+
3
+ import CriticalCommsBanner from '.';
4
+ import { withVariantConfig } from '../../.storybook/helpers';
5
+
6
+ export default {
7
+ component: CriticalCommsBanner,
8
+ title: 'Prompts/CriticalCommsBanner/tests',
9
+ tags: ['!autodocs'],
10
+ } satisfies Meta<typeof CriticalCommsBanner>;
11
+
12
+ type Story = StoryObj<typeof CriticalCommsBanner>;
13
+
14
+ export const Sentiments: Story = {
15
+ render: (args) => (
16
+ <>
17
+ <CriticalCommsBanner {...args} sentiment="negative" />
18
+ <CriticalCommsBanner {...args} sentiment="warning" />
19
+ <CriticalCommsBanner {...args} sentiment="neutral" />
20
+ </>
21
+ ),
22
+ args: {
23
+ subtitle: 'Add money within the next 30 days',
24
+ action: { label: 'Take action', href: 'https://wise.com' },
25
+ className: 'm-b-1',
26
+ },
27
+ ...withVariantConfig([
28
+ 'default',
29
+ 'dark',
30
+ 'bright-green',
31
+ 'forest-green',
32
+ 'business',
33
+ 'business--forest-green',
34
+ 'business--bright-green',
35
+ ]),
36
+ };
37
+
38
+ export const RTL: Story = {
39
+ render: (args) => (
40
+ <>
41
+ <CriticalCommsBanner {...args} sentiment="negative" />
42
+ <CriticalCommsBanner {...args} sentiment="warning" />
43
+ <CriticalCommsBanner {...args} sentiment="neutral" />
44
+ </>
45
+ ),
46
+ args: {
47
+ subtitle: 'Add money within the next 30 days',
48
+ action: { label: 'Take action', href: 'https://wise.com' },
49
+ className: 'm-b-1',
50
+ },
51
+ ...withVariantConfig(['rtl']),
52
+ };
53
+
54
+ export const Mobile: Story = {
55
+ args: {
56
+ subtitle: 'Add money within the next 30 days',
57
+ action: { label: 'Take action', href: 'https://wise.com' },
58
+ className: 'm-b-1',
59
+ },
60
+ ...withVariantConfig(['mobile']),
61
+ };
62
+
63
+ export const Zoom: Story = {
64
+ args: {
65
+ subtitle: 'Add money within the next 30 days',
66
+ action: { label: 'Take action', href: 'https://wise.com' },
67
+ className: 'm-b-1',
68
+ },
69
+ ...withVariantConfig(['400%']),
70
+ };
package/src/criticalBanner/CriticalCommsBanner.test.tsx ADDED
@@ -0,0 +1,66 @@
1
+ import { render, screen, mockMatchMedia } from '../test-utils';
2
+
3
+ import CriticalCommsBanner from './CriticalCommsBanner';
4
+
5
+ mockMatchMedia();
6
+
7
+ describe('CriticalCommsBanner', () => {
8
+ const defaultProps = {
9
+ title: 'Test title',
10
+ subtitle: 'Test subtitle',
11
+ action: { label: 'Take action', href: 'https://wise.com' },
12
+ };
13
+
14
+ it('renders with default negative sentiment', () => {
15
+ render(<CriticalCommsBanner {...defaultProps} />);
16
+
17
+ expect(screen.getByText('Test title')).toBeInTheDocument();
18
+ expect(screen.getByText('Test subtitle')).toBeInTheDocument();
19
+ expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
20
+ });
21
+
22
+ it('renders the action', () => {
23
+ render(<CriticalCommsBanner {...defaultProps} />);
24
+
25
+ expect(screen.getByText('Take action')).toBeInTheDocument();
26
+ });
27
+
28
+ describe('sentiment variants', () => {
29
+ it('renders negative sentiment with correct alert type and icon', () => {
30
+ render(<CriticalCommsBanner {...defaultProps} sentiment="negative" />);
31
+
32
+ expect(screen.getByTestId('alert')).toHaveClass('alert-negative');
33
+ // Custom icon replaces the default StatusIcon
34
+ expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
35
+ });
36
+
37
+ it('renders warning sentiment with correct alert type and icon', () => {
38
+ render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);
39
+
40
+ expect(screen.getByTestId('alert')).toHaveClass('alert-warning');
41
+ expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
42
+ });
43
+
44
+ it('renders neutral sentiment with correct alert type and icon', () => {
45
+ render(<CriticalCommsBanner {...defaultProps} sentiment="neutral" />);
46
+
47
+ expect(screen.getByTestId('alert')).toHaveClass('alert-neutral');
48
+ expect(screen.queryByTestId('status-icon')).not.toBeInTheDocument();
49
+ });
50
+ });
51
+
52
+ it('wraps content in SentimentSurface with elevated emphasis', () => {
53
+ render(<CriticalCommsBanner {...defaultProps} sentiment="warning" />);
54
+
55
+ const surface = screen.getByTestId('alert').closest('.critical-comms');
56
+ expect(surface).toHaveClass('wds-sentiment-surface');
57
+ expect(surface).toHaveClass('wds-sentiment-surface-warning-elevated');
58
+ });
59
+
60
+ it('applies className to the wrapper', () => {
61
+ render(<CriticalCommsBanner {...defaultProps} className="custom-class" />);
62
+
63
+ const surface = screen.getByTestId('alert').closest('.critical-comms');
64
+ expect(surface).toHaveClass('custom-class');
65
+ });
66
+ });
package/src/criticalBanner/CriticalCommsBanner.tsx CHANGED
@@ -1,5 +1,16 @@
1
- import Alert from '../alert';
1
+ import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
2
2
  import { clsx } from 'clsx';
3
+ import { PropsWithChildren } from 'react';
4
+
5
+ import Alert from '../alert';
6
+ import { Sentiment } from '../common';
7
+ import Circle, { CircleProps } from '../common/circle';
8
+ import SentimentSurface from '../sentimentSurface';
9
+
10
+ export type CriticalCommsBannerSentiment =
11
+ | `${Sentiment.WARNING}`
12
+ | `${Sentiment.NEGATIVE}`
13
+ | `${Sentiment.NEUTRAL}`;
3
14
 
4
15
  export type CriticalCommsBannerProps = {
5
16
  title: string;
@@ -9,20 +20,58 @@ export type CriticalCommsBannerProps = {
9
20
  href?: string;
10
21
  onClick?: () => void;
11
22
  };
23
+ sentiment?: CriticalCommsBannerSentiment;
12
24
  className?: string;
13
25
  };
14
26
 
15
- function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
27
+ const makeSurface = (sentiment: CriticalCommsBannerSentiment) => {
28
+ const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (
29
+ <SentimentSurface as="span" emphasis="elevated" sentiment={sentiment} {...props} />
30
+ );
31
+ Surface.displayName = `CriticalCommsSurface(${sentiment})`;
32
+ return Surface;
33
+ };
34
+
35
+ const iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {
36
+ [Sentiment.NEGATIVE]: (
37
+ <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className="status-circle negative">
38
+ <AlertIcon className="status-icon light" />
39
+ </Circle>
40
+ ),
41
+ [Sentiment.WARNING]: (
42
+ <Circle as={makeSurface(Sentiment.WARNING)} size={32} className="status-circle warning">
43
+ <AlertIcon className="status-icon dark" />
44
+ </Circle>
45
+ ),
46
+ [Sentiment.NEUTRAL]: (
47
+ <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className="status-circle neutral">
48
+ <ClockIcon className="status-icon dark" />
49
+ </Circle>
50
+ ),
51
+ };
52
+
53
+ function CriticalCommsBanner({
54
+ title,
55
+ subtitle,
56
+ action,
57
+ sentiment = Sentiment.NEGATIVE,
58
+ className,
59
+ }: CriticalCommsBannerProps) {
16
60
  return (
17
- <div className={clsx('critical-comms', className)}>
61
+ <SentimentSurface
62
+ sentiment={sentiment}
63
+ emphasis="elevated"
64
+ className={clsx('critical-comms', className)}
65
+ >
18
66
  <Alert
19
67
  title={title}
20
68
  message={subtitle}
21
69
  action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
22
70
  className={className}
23
- type="warning"
71
+ type={sentiment}
72
+ icon={iconBySentiment[sentiment]}
24
73
  />
25
- </div>
74
+ </SentimentSurface>
26
75
  );
27
76
  }
28
77
 
package/src/criticalBanner/index.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { default } from './CriticalCommsBanner';
2
+ export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './CriticalCommsBanner';
package/src/index.ts CHANGED
@@ -156,6 +156,7 @@ export { default as Option } from './common/Option';
156
156
  export { default as BottomSheet } from './common/bottomSheet';
157
157
  export { default as BaseCard } from './common/baseCard';
158
158
  export { default as CriticalCommsBanner } from './criticalBanner';
159
+ export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './criticalBanner';
159
160
  export { default as DateInput } from './dateInput';
160
161
  export { default as DateLookup } from './dateLookup';
161
162
  export { default as Decision } from './decision';
package/src/main.css CHANGED
@@ -485,37 +485,55 @@
485
485
  --color-sentiment-background-surface-hover: #CAF1F1;
486
486
  --color-sentiment-background-surface-active: #B6ECEC;
487
487
  }
488
- .np-theme-personal .critical-comms .alert-warning {
489
- color: var(--color-contrast-overlay);
490
- background-color: var(--color-sentiment-negative);
488
+ .critical-comms {
489
+ border-radius: 16px;
490
+ border-radius: var(--radius-medium);
491
+ overflow: hidden;
491
492
  }
492
- .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
493
- color: var(--color-contrast-overlay);
493
+ .critical-comms .alert {
494
+ background-color: var(--color-sentiment-background-surface);
495
+ color: var(--color-sentiment-content-primary);
496
+ margin-bottom: 0;
497
+ }
498
+ .critical-comms .alert .np-text-title-body {
499
+ color: var(--color-sentiment-content-primary);
494
500
  }
495
- .np-theme-personal .critical-comms .status-circle.warning {
501
+ .critical-comms .status-circle.negative {
496
502
  background-color: #ffffff;
497
503
  background-color: var(--color-background-screen);
498
504
  }
499
- .np-theme-personal .critical-comms .status-circle.warning .status-icon {
500
- color: var(--color-contrast-theme);
505
+ .critical-comms .status-circle.negative .status-icon {
506
+ color: #37517e;
507
+ color: var(--color-content-primary);
501
508
  }
502
- .np-theme-personal .critical-comms .alert__message .alert__action {
509
+ .critical-comms .alert__message .alert__action {
503
510
  margin-top: 16px;
504
511
  margin-top: var(--size-16);
505
512
  }
506
- .np-theme-personal .critical-comms .wds-Button {
507
- --Button-background: var(--color-contrast-overlay);
508
- --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
509
- --Button-background-active: var(--color-sentiment-negative-secondary-active);
513
+ .critical-comms .wds-Button {
514
+ --Button-color: var(--color-content-primary);
515
+ --Button-color-hover: var(--color-content-primary);
516
+ --Button-color-active: var(--color-content-primary);
517
+ --Button-background: var(--color-background-screen);
518
+ --Button-background-hover: var(--color-sentiment-interactive-primary-hover);
519
+ --Button-background-active: var(--color-sentiment-interactive-primary-active);
520
+ }
521
+ .critical-comms .alert-warning .wds-Button {
522
+ --Button-background-hover: var(--color-sentiment-interactive-secondary-neutral-hover);
523
+ --Button-background-active: var(--color-sentiment-interactive-secondary-neutral-active);
510
524
  }
511
525
  @media (min-width: 768px) {
512
- .np-theme-personal .critical-comms .alert-warning .alert__message {
526
+ .critical-comms .alert-warning .alert__message,
527
+ .critical-comms .alert-negative .alert__message,
528
+ .critical-comms .alert-neutral .alert__message {
513
529
  flex-direction: row;
514
530
  justify-content: space-between;
515
531
  align-items: center;
516
532
  width: 100%;
517
533
  }
518
- .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
534
+ .critical-comms .alert-warning .alert__message .alert__action,
535
+ .critical-comms .alert-negative .alert__message .alert__action,
536
+ .critical-comms .alert-neutral .alert__message .alert__action {
519
537
  margin-top: 0;
520
538
  margin-left: 16px;
521
539
  margin-left: var(--padding-small);
@@ -1227,7 +1245,6 @@
1227
1245
  }
1228
1246
  /* Button Styles */
1229
1247
  .wds-Button {
1230
- background: yellow !important;
1231
1248
  display: inline-flex;
1232
1249
  flex: none;
1233
1250
  width: auto;