@transferwise/components 0.0.0-experimental-0172e31 → 0.0.0-experimental-0e8573e

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 (21) hide show
  1. package/build/criticalBanner/CriticalCommsBanner.js +2 -66
  2. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  3. package/build/criticalBanner/CriticalCommsBanner.mjs +4 -68
  4. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  5. package/build/main.css +16 -33
  6. package/build/styles/button/Button.css +1 -0
  7. package/build/styles/criticalBanner/CriticalCommsBanner.css +15 -33
  8. package/build/styles/main.css +16 -33
  9. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +1 -4
  10. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  11. package/build/types/criticalBanner/index.d.ts +0 -1
  12. package/build/types/criticalBanner/index.d.ts.map +1 -1
  13. package/package.json +1 -1
  14. package/src/button/Button.css +1 -0
  15. package/src/button/Button.less +19 -14
  16. package/src/criticalBanner/CriticalCommsBanner.css +15 -33
  17. package/src/criticalBanner/CriticalCommsBanner.less +36 -46
  18. package/src/criticalBanner/CriticalCommsBanner.story.tsx +0 -15
  19. package/src/criticalBanner/CriticalCommsBanner.tsx +4 -59
  20. package/src/criticalBanner/index.ts +0 -1
  21. package/src/main.css +16 -33
package/build/criticalBanner/CriticalCommsBanner.js CHANGED
@@ -2,80 +2,17 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var icons = require('@transferwise/icons');
6
5
  var Alert = require('../alert/Alert.js');
7
6
  var clsx = require('clsx');
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');
30
7
  var jsxRuntime = require('react/jsx-runtime');
31
- var Circle = require('../common/circle/Circle.js');
32
- var SentimentSurface = require('../sentimentSurface/SentimentSurface.js');
33
8
 
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 iconConfig = [{
45
- sentiment: sentiment.Sentiment.NEGATIVE,
46
- Icon: icons.Alert,
47
- iconColor: 'light'
48
- }, {
49
- sentiment: sentiment.Sentiment.WARNING,
50
- Icon: icons.Alert,
51
- iconColor: 'dark'
52
- }, {
53
- sentiment: sentiment.Sentiment.NEUTRAL,
54
- Icon: icons.ClockBorderless,
55
- iconColor: 'dark'
56
- }];
57
- const iconBySentiment = Object.fromEntries(iconConfig.map(({
58
- sentiment,
59
- Icon,
60
- iconColor
61
- }) => [sentiment, /*#__PURE__*/jsxRuntime.jsx(Circle.default, {
62
- as: makeSurface(sentiment),
63
- size: 32,
64
- className: `status-circle ${sentiment}`,
65
- children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
66
- className: `status-icon ${iconColor}`
67
- })
68
- }, sentiment)]));
69
9
  function CriticalCommsBanner({
70
10
  title,
71
11
  subtitle,
72
12
  action,
73
- sentiment: sentiment$1 = sentiment.Sentiment.NEGATIVE,
74
13
  className
75
14
  }) {
76
- return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
77
- sentiment: sentiment$1,
78
- emphasis: "elevated",
15
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
79
16
  className: clsx.clsx('critical-comms', className),
80
17
  children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
81
18
  title: title,
@@ -86,8 +23,7 @@ function CriticalCommsBanner({
86
23
  text: action?.label
87
24
  },
88
25
  className: className,
89
- type: sentiment$1,
90
- icon: iconBySentiment[sentiment$1]
26
+ type: "warning"
91
27
  })
92
28
  });
93
29
  }
package/build/criticalBanner/CriticalCommsBanner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { clsx } from 'clsx';\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 iconConfig: {\n sentiment: CriticalCommsBannerSentiment;\n Icon: React.ElementType;\n iconColor: 'light' | 'dark';\n}[] = [\n { sentiment: Sentiment.NEGATIVE, Icon: AlertIcon, iconColor: 'light' },\n { sentiment: Sentiment.WARNING, Icon: AlertIcon, iconColor: 'dark' },\n { sentiment: Sentiment.NEUTRAL, Icon: ClockIcon, iconColor: 'dark' },\n];\n\nconst iconBySentiment = Object.fromEntries(\n iconConfig.map(({ sentiment, Icon, iconColor }) => [\n sentiment,\n <Circle\n key={sentiment}\n as={makeSurface(sentiment)}\n size={32}\n className={`status-circle ${sentiment}`}\n >\n <Icon className={`status-icon ${iconColor}`} />\n </Circle>,\n ]),\n) as Record<CriticalCommsBannerSentiment, React.ReactNode>;\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","iconConfig","Sentiment","NEGATIVE","Icon","AlertIcon","iconColor","WARNING","NEUTRAL","ClockIcon","iconBySentiment","Object","fromEntries","map","Circle","size","className","children","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,UAAU,GAIV,CACJ;EAAER,SAAS,EAAES,mBAAS,CAACC,QAAQ;AAAEC,EAAAA,IAAI,EAAEC,WAAS;AAAEC,EAAAA,SAAS,EAAE;AAAO,CAAE,EACtE;EAAEb,SAAS,EAAES,mBAAS,CAACK,OAAO;AAAEH,EAAAA,IAAI,EAAEC,WAAS;AAAEC,EAAAA,SAAS,EAAE;AAAM,CAAE,EACpE;EAAEb,SAAS,EAAES,mBAAS,CAACM,OAAO;AAAEJ,EAAAA,IAAI,EAAEK,qBAAS;AAAEH,EAAAA,SAAS,EAAE;AAAM,CAAE,CACrE;AAED,MAAMI,eAAe,GAAGC,MAAM,CAACC,WAAW,CACxCX,UAAU,CAACY,GAAG,CAAC,CAAC;EAAEpB,SAAS;EAAEW,IAAI;AAAEE,EAAAA;AAAS,CAAE,KAAK,CACjDb,SAAS,eACTG,cAAA,CAACkB,cAAM,EAAA;AAELhB,EAAAA,EAAE,EAAEN,WAAW,CAACC,SAAS,CAAE;AAC3BsB,EAAAA,IAAI,EAAE,EAAG;EACTC,SAAS,EAAE,CAAA,cAAA,EAAiBvB,SAAS,CAAA,CAAG;EAAAwB,QAAA,eAExCrB,cAAA,CAACQ,IAAI,EAAA;IAACY,SAAS,EAAE,eAAeV,SAAS,CAAA;GAAG;AAC9C,CAAA,EANOb,SAMC,CAAC,CACV,CAAC,CACsD;AAE1D,SAASyB,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACN5B,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9Ba,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEpB,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBiB,IAAAA,SAAS,EAAEM,SAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;IAAAC,QAAA,eAE7CrB,cAAA,CAAC2B,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;AAChFb,MAAAA,SAAS,EAAEA,SAAU;AACrBc,MAAAA,IAAI,EAAErC,WAAU;MAChBsC,IAAI,EAAErB,eAAe,CAACjB,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
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;;;;"}
package/build/criticalBanner/CriticalCommsBanner.mjs CHANGED
@@ -1,79 +1,16 @@
1
- import { Alert, ClockBorderless } from '@transferwise/icons';
2
- import Alert$1 from '../alert/Alert.mjs';
1
+ import Alert from '../alert/Alert.mjs';
3
2
  import { clsx } from 'clsx';
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';
26
3
  import { jsx } from 'react/jsx-runtime';
27
- import Circle from '../common/circle/Circle.mjs';
28
- import SentimentSurface from '../sentimentSurface/SentimentSurface.mjs';
29
4
 
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 iconConfig = [{
41
- sentiment: Sentiment.NEGATIVE,
42
- Icon: Alert,
43
- iconColor: 'light'
44
- }, {
45
- sentiment: Sentiment.WARNING,
46
- Icon: Alert,
47
- iconColor: 'dark'
48
- }, {
49
- sentiment: Sentiment.NEUTRAL,
50
- Icon: ClockBorderless,
51
- iconColor: 'dark'
52
- }];
53
- const iconBySentiment = Object.fromEntries(iconConfig.map(({
54
- sentiment,
55
- Icon,
56
- iconColor
57
- }) => [sentiment, /*#__PURE__*/jsx(Circle, {
58
- as: makeSurface(sentiment),
59
- size: 32,
60
- className: `status-circle ${sentiment}`,
61
- children: /*#__PURE__*/jsx(Icon, {
62
- className: `status-icon ${iconColor}`
63
- })
64
- }, sentiment)]));
65
5
  function CriticalCommsBanner({
66
6
  title,
67
7
  subtitle,
68
8
  action,
69
- sentiment = Sentiment.NEGATIVE,
70
9
  className
71
10
  }) {
72
- return /*#__PURE__*/jsx(SentimentSurface, {
73
- sentiment: sentiment,
74
- emphasis: "elevated",
11
+ return /*#__PURE__*/jsx("div", {
75
12
  className: clsx('critical-comms', className),
76
- children: /*#__PURE__*/jsx(Alert$1, {
13
+ children: /*#__PURE__*/jsx(Alert, {
77
14
  title: title,
78
15
  message: subtitle,
79
16
  action: {
@@ -82,8 +19,7 @@ function CriticalCommsBanner({
82
19
  text: action?.label
83
20
  },
84
21
  className: className,
85
- type: sentiment,
86
- icon: iconBySentiment[sentiment]
22
+ type: "warning"
87
23
  })
88
24
  });
89
25
  }
package/build/criticalBanner/CriticalCommsBanner.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { clsx } from 'clsx';\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 iconConfig: {\n sentiment: CriticalCommsBannerSentiment;\n Icon: React.ElementType;\n iconColor: 'light' | 'dark';\n}[] = [\n { sentiment: Sentiment.NEGATIVE, Icon: AlertIcon, iconColor: 'light' },\n { sentiment: Sentiment.WARNING, Icon: AlertIcon, iconColor: 'dark' },\n { sentiment: Sentiment.NEUTRAL, Icon: ClockIcon, iconColor: 'dark' },\n];\n\nconst iconBySentiment = Object.fromEntries(\n iconConfig.map(({ sentiment, Icon, iconColor }) => [\n sentiment,\n <Circle\n key={sentiment}\n as={makeSurface(sentiment)}\n size={32}\n className={`status-circle ${sentiment}`}\n >\n <Icon className={`status-icon ${iconColor}`} />\n </Circle>,\n ]),\n) as Record<CriticalCommsBannerSentiment, React.ReactNode>;\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","iconConfig","Sentiment","NEGATIVE","Icon","AlertIcon","iconColor","WARNING","NEUTRAL","ClockIcon","iconBySentiment","Object","fromEntries","map","Circle","size","className","children","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,UAAU,GAIV,CACJ;EAAER,SAAS,EAAES,SAAS,CAACC,QAAQ;AAAEC,EAAAA,IAAI,EAAEC,KAAS;AAAEC,EAAAA,SAAS,EAAE;AAAO,CAAE,EACtE;EAAEb,SAAS,EAAES,SAAS,CAACK,OAAO;AAAEH,EAAAA,IAAI,EAAEC,KAAS;AAAEC,EAAAA,SAAS,EAAE;AAAM,CAAE,EACpE;EAAEb,SAAS,EAAES,SAAS,CAACM,OAAO;AAAEJ,EAAAA,IAAI,EAAEK,eAAS;AAAEH,EAAAA,SAAS,EAAE;AAAM,CAAE,CACrE;AAED,MAAMI,eAAe,GAAGC,MAAM,CAACC,WAAW,CACxCX,UAAU,CAACY,GAAG,CAAC,CAAC;EAAEpB,SAAS;EAAEW,IAAI;AAAEE,EAAAA;AAAS,CAAE,KAAK,CACjDb,SAAS,eACTG,GAAA,CAACkB,MAAM,EAAA;AAELhB,EAAAA,EAAE,EAAEN,WAAW,CAACC,SAAS,CAAE;AAC3BsB,EAAAA,IAAI,EAAE,EAAG;EACTC,SAAS,EAAE,CAAA,cAAA,EAAiBvB,SAAS,CAAA,CAAG;EAAAwB,QAAA,eAExCrB,GAAA,CAACQ,IAAI,EAAA;IAACY,SAAS,EAAE,eAAeV,SAAS,CAAA;GAAG;AAC9C,CAAA,EANOb,SAMC,CAAC,CACV,CAAC,CACsD;AAE1D,SAASyB,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACN5B,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9Ba,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEpB,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBiB,IAAAA,SAAS,EAAEM,IAAI,CAAC,gBAAgB,EAAEN,SAAS,CAAE;IAAAC,QAAA,eAE7CrB,GAAA,CAAC2B,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;AAChFb,MAAAA,SAAS,EAAEA,SAAU;AACrBc,MAAAA,IAAI,EAAErC,SAAU;MAChBsC,IAAI,EAAErB,eAAe,CAACjB,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
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;;;;"}
package/build/main.css CHANGED
@@ -485,55 +485,37 @@
485
485
  --color-sentiment-background-surface-hover: #CAF1F1;
486
486
  --color-sentiment-background-surface-active: #B6ECEC;
487
487
  }
488
- .critical-comms {
489
- border-radius: 16px;
490
- border-radius: var(--radius-medium);
491
- overflow: hidden;
492
- }
493
- .critical-comms .alert {
494
- background-color: var(--color-sentiment-background-surface);
495
- color: var(--color-sentiment-content-primary);
496
- margin-bottom: 0;
488
+ .np-theme-personal .critical-comms .alert-warning {
489
+ color: var(--color-contrast-overlay);
490
+ background-color: var(--color-sentiment-negative);
497
491
  }
498
- .critical-comms .alert .np-text-title-body {
499
- color: var(--color-sentiment-content-primary);
492
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
493
+ color: var(--color-contrast-overlay);
500
494
  }
501
- .critical-comms .status-circle.negative {
495
+ .np-theme-personal .critical-comms .status-circle.warning {
502
496
  background-color: #ffffff;
503
497
  background-color: var(--color-background-screen);
504
498
  }
505
- .critical-comms .status-circle.negative .status-icon {
506
- color: #37517e;
507
- color: var(--color-content-primary);
499
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
500
+ color: var(--color-contrast-theme);
508
501
  }
509
- .critical-comms .alert__message .alert__action {
502
+ .np-theme-personal .critical-comms .alert__message .alert__action {
510
503
  margin-top: 16px;
511
504
  margin-top: var(--size-16);
512
505
  }
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);
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);
524
510
  }
525
511
  @media (min-width: 768px) {
526
- .critical-comms .alert-warning .alert__message,
527
- .critical-comms .alert-negative .alert__message,
528
- .critical-comms .alert-neutral .alert__message {
512
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
529
513
  flex-direction: row;
530
514
  justify-content: space-between;
531
515
  align-items: center;
532
516
  width: 100%;
533
517
  }
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 {
518
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
537
519
  margin-top: 0;
538
520
  margin-left: 16px;
539
521
  margin-left: var(--padding-small);
@@ -1245,6 +1227,7 @@
1245
1227
  }
1246
1228
  /* Button Styles */
1247
1229
  .wds-Button {
1230
+ background: yellow !important;
1248
1231
  display: inline-flex;
1249
1232
  flex: none;
1250
1233
  width: auto;
package/build/styles/button/Button.css CHANGED
@@ -46,6 +46,7 @@
46
46
  }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
+ background: yellow !important;
49
50
  display: inline-flex;
50
51
  flex: none;
51
52
  width: auto;
package/build/styles/criticalBanner/CriticalCommsBanner.css CHANGED
@@ -1,52 +1,34 @@
1
- .critical-comms {
2
- border-radius: 16px;
3
- border-radius: var(--radius-medium);
4
- overflow: hidden;
1
+ .np-theme-personal .critical-comms .alert-warning {
2
+ color: var(--color-contrast-overlay);
3
+ background-color: var(--color-sentiment-negative);
5
4
  }
6
- .critical-comms .alert {
7
- background-color: var(--color-sentiment-background-surface);
8
- color: var(--color-sentiment-content-primary);
9
- margin-bottom: 0;
5
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
6
+ color: var(--color-contrast-overlay);
10
7
  }
11
- .critical-comms .alert .np-text-title-body {
12
- color: var(--color-sentiment-content-primary);
13
- }
14
- .critical-comms .status-circle.negative {
8
+ .np-theme-personal .critical-comms .status-circle.warning {
15
9
  background-color: #ffffff;
16
10
  background-color: var(--color-background-screen);
17
11
  }
18
- .critical-comms .status-circle.negative .status-icon {
19
- color: #37517e;
20
- color: var(--color-content-primary);
12
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
13
+ color: var(--color-contrast-theme);
21
14
  }
22
- .critical-comms .alert__message .alert__action {
15
+ .np-theme-personal .critical-comms .alert__message .alert__action {
23
16
  margin-top: 16px;
24
17
  margin-top: var(--size-16);
25
18
  }
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);
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);
37
23
  }
38
24
  @media (min-width: 768px) {
39
- .critical-comms .alert-warning .alert__message,
40
- .critical-comms .alert-negative .alert__message,
41
- .critical-comms .alert-neutral .alert__message {
25
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
42
26
  flex-direction: row;
43
27
  justify-content: space-between;
44
28
  align-items: center;
45
29
  width: 100%;
46
30
  }
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 {
31
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
50
32
  margin-top: 0;
51
33
  margin-left: 16px;
52
34
  margin-left: var(--padding-small);
package/build/styles/main.css CHANGED
@@ -485,55 +485,37 @@
485
485
  --color-sentiment-background-surface-hover: #CAF1F1;
486
486
  --color-sentiment-background-surface-active: #B6ECEC;
487
487
  }
488
- .critical-comms {
489
- border-radius: 16px;
490
- border-radius: var(--radius-medium);
491
- overflow: hidden;
492
- }
493
- .critical-comms .alert {
494
- background-color: var(--color-sentiment-background-surface);
495
- color: var(--color-sentiment-content-primary);
496
- margin-bottom: 0;
488
+ .np-theme-personal .critical-comms .alert-warning {
489
+ color: var(--color-contrast-overlay);
490
+ background-color: var(--color-sentiment-negative);
497
491
  }
498
- .critical-comms .alert .np-text-title-body {
499
- color: var(--color-sentiment-content-primary);
492
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
493
+ color: var(--color-contrast-overlay);
500
494
  }
501
- .critical-comms .status-circle.negative {
495
+ .np-theme-personal .critical-comms .status-circle.warning {
502
496
  background-color: #ffffff;
503
497
  background-color: var(--color-background-screen);
504
498
  }
505
- .critical-comms .status-circle.negative .status-icon {
506
- color: #37517e;
507
- color: var(--color-content-primary);
499
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
500
+ color: var(--color-contrast-theme);
508
501
  }
509
- .critical-comms .alert__message .alert__action {
502
+ .np-theme-personal .critical-comms .alert__message .alert__action {
510
503
  margin-top: 16px;
511
504
  margin-top: var(--size-16);
512
505
  }
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);
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);
524
510
  }
525
511
  @media (min-width: 768px) {
526
- .critical-comms .alert-warning .alert__message,
527
- .critical-comms .alert-negative .alert__message,
528
- .critical-comms .alert-neutral .alert__message {
512
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
529
513
  flex-direction: row;
530
514
  justify-content: space-between;
531
515
  align-items: center;
532
516
  width: 100%;
533
517
  }
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 {
518
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
537
519
  margin-top: 0;
538
520
  margin-left: 16px;
539
521
  margin-left: var(--padding-small);
@@ -1245,6 +1227,7 @@
1245
1227
  }
1246
1228
  /* Button Styles */
1247
1229
  .wds-Button {
1230
+ background: yellow !important;
1248
1231
  display: inline-flex;
1249
1232
  flex: none;
1250
1233
  width: auto;
package/build/types/criticalBanner/CriticalCommsBanner.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- import { Sentiment } from '../common';
2
- export type CriticalCommsBannerSentiment = `${Sentiment.WARNING}` | `${Sentiment.NEGATIVE}` | `${Sentiment.NEUTRAL}`;
3
1
  export type CriticalCommsBannerProps = {
4
2
  title: string;
5
3
  subtitle?: string;
@@ -8,9 +6,8 @@ export type CriticalCommsBannerProps = {
8
6
  href?: string;
9
7
  onClick?: () => void;
10
8
  };
11
- sentiment?: CriticalCommsBannerSentiment;
12
9
  className?: string;
13
10
  };
14
- declare function CriticalCommsBanner({ title, subtitle, action, sentiment, className, }: CriticalCommsBannerProps): import("react").JSX.Element;
11
+ declare function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps): import("react").JSX.Element;
15
12
  export default CriticalCommsBanner;
16
13
  //# 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":"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;AAkCF,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAA8B,EAC9B,SAAS,GACV,EAAE,wBAAwB,+BAiB1B;AAED,eAAe,mBAAmB,CAAC"}
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"}
package/build/types/criticalBanner/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export { default } from './CriticalCommsBanner';
2
- export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './CriticalCommsBanner';
3
2
  //# 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;AAChD,YAAY,EAAE,wBAAwB,EAAE,4BAA4B,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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-0172e31",
3
+ "version": "0.0.0-experimental-0e8573e",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/button/Button.css CHANGED
@@ -46,6 +46,7 @@
46
46
  }
47
47
  /* Button Styles */
48
48
  .wds-Button {
49
+ background: yellow !important;
49
50
  display: inline-flex;
50
51
  flex: none;
51
52
  width: auto;
package/src/button/Button.less CHANGED
@@ -1,7 +1,8 @@
1
- @import './Button.vars.less';
1
+ @import "./Button.vars.less";
2
2
 
3
3
  /* Button Styles */
4
4
  .wds-Button {
5
+ background: yellow !important;
5
6
  display: inline-flex;
6
7
  flex: none;
7
8
  width: auto;
@@ -17,7 +18,9 @@
17
18
  border-radius: var(--Button-border-radius);
18
19
  color: var(--Button-color);
19
20
  cursor: pointer;
20
- transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
21
+ transition:
22
+ color,
23
+ background-color var(--Button-transition-duration) var(--Button-transition-easing);
21
24
 
22
25
  &,
23
26
  &:hover,
@@ -90,7 +93,7 @@
90
93
  &:hover,
91
94
  &:active,
92
95
  &:focus {
93
- .wds-Button-labelText{
96
+ .wds-Button-labelText {
94
97
  text-decoration: underline;
95
98
  text-underline-offset: 3px;
96
99
  text-decoration-thickness: 1px;
@@ -125,15 +128,15 @@
125
128
  &--medium {
126
129
  padding: var(--Button-medium-padding);
127
130
 
128
- &:has(.wds-Button-avatars){
131
+ &:has(.wds-Button-avatars) {
129
132
  padding-inline-start: var(--size-8);
130
133
  }
131
134
 
132
- &:has(.wds-Button-icon--end){
135
+ &:has(.wds-Button-icon--end) {
133
136
  padding-inline-end: var(--size-8);
134
137
  }
135
138
 
136
- .wds-Button-icon--start{
139
+ .wds-Button-icon--start {
137
140
  margin-inline-end: var(--Button-label-gap);
138
141
  }
139
142
  }
@@ -141,17 +144,15 @@
141
144
  &--small {
142
145
  padding: var(--Button-small-padding);
143
146
 
144
- &:has(.wds-Button-icon--start){
147
+ &:has(.wds-Button-icon--start) {
145
148
  padding-inline-start: var(--size-8);
146
149
  }
147
150
 
148
- &:has(.wds-Button-icon--end){
151
+ &:has(.wds-Button-icon--end) {
149
152
  padding-inline-end: var(--size-8);
150
153
  }
151
154
  }
152
155
 
153
-
154
-
155
156
  // Width modifiers
156
157
  &--block {
157
158
  width: 100%;
@@ -169,11 +170,11 @@
169
170
  &-icon {
170
171
  display: inline-block;
171
172
 
172
- &--md{
173
+ &--md {
173
174
  --Button-iconSize: 18px;
174
175
  }
175
176
 
176
- &--sm{
177
+ &--sm {
177
178
  --Button-iconSize: 16px;
178
179
  }
179
180
 
@@ -225,7 +226,12 @@
225
226
  .wds-Button--secondary &,
226
227
  .wds-Button--secondary-neutral &,
227
228
  .wds-Button--tertiary & {
228
- .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
229
+ .np-theme-personal:not(
230
+ .np-theme-personal--dark,
231
+ .np-theme-personal--forest-green,
232
+ .np-theme-personal--bright-green
233
+ )
234
+ & {
229
235
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
230
236
  }
231
237
  }
@@ -245,7 +251,6 @@
245
251
  }
246
252
  }
247
253
 
248
-
249
254
  :dir(rtl) {
250
255
  .wds-Button {
251
256
  .tw-icon-chevron-right,
package/src/criticalBanner/CriticalCommsBanner.css CHANGED
@@ -1,52 +1,34 @@
1
- .critical-comms {
2
- border-radius: 16px;
3
- border-radius: var(--radius-medium);
4
- overflow: hidden;
1
+ .np-theme-personal .critical-comms .alert-warning {
2
+ color: var(--color-contrast-overlay);
3
+ background-color: var(--color-sentiment-negative);
5
4
  }
6
- .critical-comms .alert {
7
- background-color: var(--color-sentiment-background-surface);
8
- color: var(--color-sentiment-content-primary);
9
- margin-bottom: 0;
5
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
6
+ color: var(--color-contrast-overlay);
10
7
  }
11
- .critical-comms .alert .np-text-title-body {
12
- color: var(--color-sentiment-content-primary);
13
- }
14
- .critical-comms .status-circle.negative {
8
+ .np-theme-personal .critical-comms .status-circle.warning {
15
9
  background-color: #ffffff;
16
10
  background-color: var(--color-background-screen);
17
11
  }
18
- .critical-comms .status-circle.negative .status-icon {
19
- color: #37517e;
20
- color: var(--color-content-primary);
12
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
13
+ color: var(--color-contrast-theme);
21
14
  }
22
- .critical-comms .alert__message .alert__action {
15
+ .np-theme-personal .critical-comms .alert__message .alert__action {
23
16
  margin-top: 16px;
24
17
  margin-top: var(--size-16);
25
18
  }
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);
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);
37
23
  }
38
24
  @media (min-width: 768px) {
39
- .critical-comms .alert-warning .alert__message,
40
- .critical-comms .alert-negative .alert__message,
41
- .critical-comms .alert-neutral .alert__message {
25
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
42
26
  flex-direction: row;
43
27
  justify-content: space-between;
44
28
  align-items: center;
45
29
  width: 100%;
46
30
  }
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 {
31
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
50
32
  margin-top: 0;
51
33
  margin-left: 16px;
52
34
  margin-left: var(--padding-small);
package/src/criticalBanner/CriticalCommsBanner.less CHANGED
@@ -1,61 +1,51 @@
1
- .critical-comms {
2
- border-radius: var(--radius-medium);
3
- overflow: hidden;
4
-
5
- .alert {
6
- background-color: var(--color-sentiment-background-surface);
7
- color: var(--color-sentiment-content-primary);
8
- margin-bottom: 0;
9
-
10
- .np-text-title-body {
11
- color: var(--color-sentiment-content-primary);
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
+ }
12
10
  }
13
- }
14
11
 
15
- .status-circle.negative {
16
- background-color: var(--color-background-screen);
12
+ .status-circle.warning {
13
+ background-color: var(--color-background-screen);
17
14
 
18
- .status-icon {
19
- color: var(--color-content-primary);
15
+ .status-icon {
16
+ color: var(--color-contrast-theme);
17
+ }
20
18
  }
21
- }
22
19
 
23
- .alert__message {
24
- .alert__action {
25
- margin-top: var(--size-16);
20
+ .alert__message {
21
+ .alert__action {
22
+ margin-top: var(--size-16);
23
+ }
26
24
  }
27
- }
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
25
 
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);
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);
30
+ }
37
31
  }
38
32
 
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
- }
43
33
 
44
34
  @media (--screen-md) {
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);
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
+ }
57
47
  }
58
48
  }
59
49
  }
60
50
  }
61
- }
51
+ }
package/src/criticalBanner/CriticalCommsBanner.story.tsx CHANGED
@@ -18,21 +18,6 @@ export const Basic = {
18
18
  },
19
19
  };
20
20
 
21
- export const Sentiments: Story = {
22
- render: (args) => (
23
- <>
24
- <CriticalCommsBanner {...args} sentiment="negative" title="Your account is overdrawn" />
25
- <CriticalCommsBanner {...args} sentiment="warning" title="Your account needs attention" />
26
- <CriticalCommsBanner {...args} sentiment="neutral" title="Your transfer is being processed" />
27
- </>
28
- ),
29
- args: {
30
- subtitle: 'Add money within the next 30 days',
31
- action: { label: 'Take action', href: 'https://wise.com' },
32
- className: 'm-b-1',
33
- },
34
- };
35
-
36
21
  export const Variants: Story = {
37
22
  args: {
38
23
  title: 'Your account is overdrawn',
package/src/criticalBanner/CriticalCommsBanner.tsx CHANGED
@@ -1,16 +1,5 @@
1
- import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';
2
- import { PropsWithChildren } from 'react';
3
-
4
1
  import Alert from '../alert';
5
2
  import { clsx } from 'clsx';
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}`;
14
3
 
15
4
  export type CriticalCommsBannerProps = {
16
5
  title: string;
@@ -20,64 +9,20 @@ export type CriticalCommsBannerProps = {
20
9
  href?: string;
21
10
  onClick?: () => void;
22
11
  };
23
- sentiment?: CriticalCommsBannerSentiment;
24
12
  className?: string;
25
13
  };
26
14
 
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 iconConfig: {
36
- sentiment: CriticalCommsBannerSentiment;
37
- Icon: React.ElementType;
38
- iconColor: 'light' | 'dark';
39
- }[] = [
40
- { sentiment: Sentiment.NEGATIVE, Icon: AlertIcon, iconColor: 'light' },
41
- { sentiment: Sentiment.WARNING, Icon: AlertIcon, iconColor: 'dark' },
42
- { sentiment: Sentiment.NEUTRAL, Icon: ClockIcon, iconColor: 'dark' },
43
- ];
44
-
45
- const iconBySentiment = Object.fromEntries(
46
- iconConfig.map(({ sentiment, Icon, iconColor }) => [
47
- sentiment,
48
- <Circle
49
- key={sentiment}
50
- as={makeSurface(sentiment)}
51
- size={32}
52
- className={`status-circle ${sentiment}`}
53
- >
54
- <Icon className={`status-icon ${iconColor}`} />
55
- </Circle>,
56
- ]),
57
- ) as Record<CriticalCommsBannerSentiment, React.ReactNode>;
58
-
59
- function CriticalCommsBanner({
60
- title,
61
- subtitle,
62
- action,
63
- sentiment = Sentiment.NEGATIVE,
64
- className,
65
- }: CriticalCommsBannerProps) {
15
+ function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
66
16
  return (
67
- <SentimentSurface
68
- sentiment={sentiment}
69
- emphasis="elevated"
70
- className={clsx('critical-comms', className)}
71
- >
17
+ <div className={clsx('critical-comms', className)}>
72
18
  <Alert
73
19
  title={title}
74
20
  message={subtitle}
75
21
  action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}
76
22
  className={className}
77
- type={sentiment}
78
- icon={iconBySentiment[sentiment]}
23
+ type="warning"
79
24
  />
80
- </SentimentSurface>
25
+ </div>
81
26
  );
82
27
  }
83
28
 
package/src/criticalBanner/index.ts CHANGED
@@ -1,2 +1 @@
1
1
  export { default } from './CriticalCommsBanner';
2
- export type { CriticalCommsBannerProps, CriticalCommsBannerSentiment } from './CriticalCommsBanner';
package/src/main.css CHANGED
@@ -485,55 +485,37 @@
485
485
  --color-sentiment-background-surface-hover: #CAF1F1;
486
486
  --color-sentiment-background-surface-active: #B6ECEC;
487
487
  }
488
- .critical-comms {
489
- border-radius: 16px;
490
- border-radius: var(--radius-medium);
491
- overflow: hidden;
492
- }
493
- .critical-comms .alert {
494
- background-color: var(--color-sentiment-background-surface);
495
- color: var(--color-sentiment-content-primary);
496
- margin-bottom: 0;
488
+ .np-theme-personal .critical-comms .alert-warning {
489
+ color: var(--color-contrast-overlay);
490
+ background-color: var(--color-sentiment-negative);
497
491
  }
498
- .critical-comms .alert .np-text-title-body {
499
- color: var(--color-sentiment-content-primary);
492
+ .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
493
+ color: var(--color-contrast-overlay);
500
494
  }
501
- .critical-comms .status-circle.negative {
495
+ .np-theme-personal .critical-comms .status-circle.warning {
502
496
  background-color: #ffffff;
503
497
  background-color: var(--color-background-screen);
504
498
  }
505
- .critical-comms .status-circle.negative .status-icon {
506
- color: #37517e;
507
- color: var(--color-content-primary);
499
+ .np-theme-personal .critical-comms .status-circle.warning .status-icon {
500
+ color: var(--color-contrast-theme);
508
501
  }
509
- .critical-comms .alert__message .alert__action {
502
+ .np-theme-personal .critical-comms .alert__message .alert__action {
510
503
  margin-top: 16px;
511
504
  margin-top: var(--size-16);
512
505
  }
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);
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);
524
510
  }
525
511
  @media (min-width: 768px) {
526
- .critical-comms .alert-warning .alert__message,
527
- .critical-comms .alert-negative .alert__message,
528
- .critical-comms .alert-neutral .alert__message {
512
+ .np-theme-personal .critical-comms .alert-warning .alert__message {
529
513
  flex-direction: row;
530
514
  justify-content: space-between;
531
515
  align-items: center;
532
516
  width: 100%;
533
517
  }
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 {
518
+ .np-theme-personal .critical-comms .alert-warning .alert__message .alert__action {
537
519
  margin-top: 0;
538
520
  margin-left: 16px;
539
521
  margin-left: var(--padding-small);
@@ -1245,6 +1227,7 @@
1245
1227
  }
1246
1228
  /* Button Styles */
1247
1229
  .wds-Button {
1230
+ background: yellow !important;
1248
1231
  display: inline-flex;
1249
1232
  flex: none;
1250
1233
  width: auto;