@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-e9dbb78

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 (75) hide show
  1. package/build/alert/Alert.js +17 -17
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +14 -14
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/common/action/Action.js +15 -26
  6. package/build/common/action/Action.js.map +1 -1
  7. package/build/common/action/Action.mjs +15 -26
  8. package/build/common/action/Action.mjs.map +1 -1
  9. package/build/common/propsValues/sentiment.js +0 -1
  10. package/build/common/propsValues/sentiment.js.map +1 -1
  11. package/build/common/propsValues/sentiment.mjs +0 -1
  12. package/build/common/propsValues/sentiment.mjs.map +1 -1
  13. package/build/criticalBanner/CriticalCommsBanner.js +73 -10
  14. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  15. package/build/criticalBanner/CriticalCommsBanner.mjs +74 -11
  16. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  17. package/build/i18n/en.json +0 -1
  18. package/build/i18n/en.json.js +0 -1
  19. package/build/i18n/en.json.js.map +1 -1
  20. package/build/i18n/en.json.mjs +0 -1
  21. package/build/i18n/en.json.mjs.map +1 -1
  22. package/build/main.css +70 -21
  23. package/build/statusIcon/StatusIcon.js +1 -5
  24. package/build/statusIcon/StatusIcon.js.map +1 -1
  25. package/build/statusIcon/StatusIcon.messages.js +0 -3
  26. package/build/statusIcon/StatusIcon.messages.js.map +1 -1
  27. package/build/statusIcon/StatusIcon.messages.mjs +0 -3
  28. package/build/statusIcon/StatusIcon.messages.mjs.map +1 -1
  29. package/build/statusIcon/StatusIcon.mjs +1 -5
  30. package/build/statusIcon/StatusIcon.mjs.map +1 -1
  31. package/build/styles/button/Button.css +0 -3
  32. package/build/styles/criticalBanner/CriticalCommsBanner.css +73 -21
  33. package/build/styles/main.css +70 -21
  34. package/build/types/alert/Alert.d.ts +4 -3
  35. package/build/types/alert/Alert.d.ts.map +1 -1
  36. package/build/types/common/action/Action.d.ts +2 -5
  37. package/build/types/common/action/Action.d.ts.map +1 -1
  38. package/build/types/common/propsValues/sentiment.d.ts +0 -1
  39. package/build/types/common/propsValues/sentiment.d.ts.map +1 -1
  40. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  41. package/build/types/index.d.ts +1 -0
  42. package/build/types/index.d.ts.map +1 -1
  43. package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
  44. package/build/types/statusIcon/StatusIcon.messages.d.ts +0 -5
  45. package/build/types/statusIcon/StatusIcon.messages.d.ts.map +1 -1
  46. package/build/types/test-utils/index.d.ts +0 -2
  47. package/build/types/test-utils/index.d.ts.map +1 -1
  48. package/package.json +5 -5
  49. package/src/alert/Alert.spec.tsx +30 -0
  50. package/src/alert/Alert.story.tsx +1 -34
  51. package/src/alert/Alert.tsx +15 -20
  52. package/src/button/Button.css +0 -3
  53. package/src/button/Button.less +3 -6
  54. package/src/button/Button.vars.less +4 -0
  55. package/src/common/action/Action.tsx +22 -40
  56. package/src/common/propsValues/sentiment.ts +0 -1
  57. package/src/criticalBanner/CriticalCommsBanner.css +73 -21
  58. package/src/criticalBanner/CriticalCommsBanner.less +70 -24
  59. package/src/criticalBanner/CriticalCommsBanner.story.tsx +4 -26
  60. package/src/criticalBanner/CriticalCommsBanner.tsx +50 -8
  61. package/src/i18n/en.json +0 -1
  62. package/src/index.ts +1 -0
  63. package/src/main.css +70 -21
  64. package/src/radio/Radio.spec.tsx +73 -0
  65. package/src/radio/Radio.story.tsx +22 -52
  66. package/src/radioGroup/RadioGroup.spec.tsx +91 -0
  67. package/src/radioGroup/RadioGroup.story.tsx +3 -5
  68. package/src/statusIcon/StatusIcon.less +0 -1
  69. package/src/statusIcon/StatusIcon.messages.ts +0 -6
  70. package/src/statusIcon/StatusIcon.tsx +1 -8
  71. package/src/radio/Radio.rtl.spec.tsx +0 -24
  72. package/src/radio/Radio.spec.js +0 -76
  73. package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +0 -49
  74. package/src/radioGroup/RadioGroup.rtl.spec.tsx +0 -30
  75. package/src/radioGroup/RadioGroup.spec.js +0 -90
@@ -9,7 +9,7 @@ require('../common/theme.js');
9
9
  require('../common/direction.js');
10
10
  require('../common/propsValues/control.js');
11
11
  require('../common/propsValues/breakpoint.js');
12
- require('../common/propsValues/size.js');
12
+ var size = require('../common/propsValues/size.js');
13
13
  var typography = require('../common/propsValues/typography.js');
14
14
  require('../common/propsValues/width.js');
15
15
  require('../common/propsValues/type.js');
@@ -63,9 +63,10 @@ function Alert({
63
63
  message,
64
64
  title,
65
65
  type = 'neutral',
66
+ variant = 'desktop',
66
67
  arrow,
67
68
  children,
68
- size,
69
+ size: size$1,
69
70
  dismissible
70
71
  }) {
71
72
  React.useEffect(() => {
@@ -84,10 +85,10 @@ function Alert({
84
85
  }
85
86
  }, [dismissible]);
86
87
  React.useEffect(() => {
87
- if (size !== undefined) {
88
+ if (size$1 !== undefined) {
88
89
  logActionRequired.logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
89
90
  }
90
- }, [size]);
91
+ }, [size$1]);
91
92
  const resolvedType = resolveType(type);
92
93
  React.useEffect(() => {
93
94
  if (resolvedType !== type) {
@@ -103,7 +104,7 @@ function Alert({
103
104
  }, []);
104
105
  const closeButtonReference = React.useRef(null);
105
106
  return /*#__PURE__*/jsxRuntime.jsx("div", {
106
- role: resolvedType === sentiment.Sentiment.NEGATIVE || resolvedType === sentiment.Sentiment.CRITICAL ? 'alert' : 'status',
107
+ role: resolvedType === sentiment.Sentiment.NEGATIVE ? 'alert' : 'status',
107
108
  className: "wds-alert__liveRegion",
108
109
  children: /*#__PURE__*/jsxRuntime.jsxs("div", {
109
110
  "aria-hidden": shouldAnnounce ? undefined : 'true',
@@ -123,16 +124,17 @@ function Alert({
123
124
  setShouldFire(false);
124
125
  },
125
126
  onTouchMove: () => setShouldFire(false),
126
- children: [/*#__PURE__*/jsxRuntime.jsx("div", {
127
- className: "alert__icon",
128
- children: icon || /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
129
- size: 32,
127
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
128
+ className: clsx.clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
129
+ "data-testid": variant,
130
+ children: [icon ? /*#__PURE__*/jsxRuntime.jsx("div", {
131
+ className: "alert__icon",
132
+ children: icon
133
+ }) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon, {
134
+ size: size.Size.LARGE,
130
135
  sentiment: resolvedType,
131
136
  iconLabel: statusIconLabel
132
- })
133
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
134
- className: clsx.clsx('alert__content', 'd-flex', 'flex-grow-1'),
135
- children: /*#__PURE__*/jsxRuntime.jsxs("div", {
137
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
136
138
  className: "alert__message",
137
139
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
138
140
  children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
@@ -150,11 +152,9 @@ function Alert({
150
152
  }), action && /*#__PURE__*/jsxRuntime.jsx(Action.Action, {
151
153
  action: action,
152
154
  variant: "action-button",
153
- className: "alert__action",
154
- sentiment: type === 'critical' ? 'negative' : 'default',
155
- priority: type === 'critical' ? 'secondary' : 'tertiary'
155
+ className: "m-t-1"
156
156
  })]
157
- })
157
+ })]
158
158
  }), onDismiss && /*#__PURE__*/jsxRuntime.jsx(CloseButton.CloseButton, {
159
159
  ref: closeButtonReference,
160
160
  className: "m-l-2",
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE\n | Sentiment.CRITICAL}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n arrow,\n children,\n size,\n dismissible,\n}: AlertProps) {\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={\n resolvedType === Sentiment.NEGATIVE || resolvedType === Sentiment.CRITICAL\n ? 'alert'\n : 'status'\n }\n className=\"wds-alert__liveRegion\"\n >\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div className=\"alert__icon\">\n {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n </div>\n <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && (\n <Action\n action={action}\n variant=\"action-button\"\n className=\"alert__action\"\n sentiment={type === 'critical' ? 'negative' : 'default'}\n priority={type === 'critical' ? 'secondary' : 'tertiary'}\n />\n )}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","CRITICAL","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","variant","priority","CloseButton","ref","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"Alert.js","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n Variant,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n variant?: `${Variant}`;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n variant = 'desktop',\n arrow,\n children,\n size,\n dismissible,\n}: AlertProps) {\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n className=\"wds-alert__liveRegion\"\n >\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div\n className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n data-testid={variant}\n >\n {icon ? (\n <div className=\"alert__icon\">{icon}</div>\n ) : (\n <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n )}\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
@@ -5,7 +5,7 @@ import '../common/theme.mjs';
5
5
  import '../common/direction.mjs';
6
6
  import '../common/propsValues/control.mjs';
7
7
  import '../common/propsValues/breakpoint.mjs';
8
- import '../common/propsValues/size.mjs';
8
+ import { Size } from '../common/propsValues/size.mjs';
9
9
  import { Typography } from '../common/propsValues/typography.mjs';
10
10
  import '../common/propsValues/width.mjs';
11
11
  import '../common/propsValues/type.mjs';
@@ -59,6 +59,7 @@ function Alert({
59
59
  message,
60
60
  title,
61
61
  type = 'neutral',
62
+ variant = 'desktop',
62
63
  arrow,
63
64
  children,
64
65
  size,
@@ -99,7 +100,7 @@ function Alert({
99
100
  }, []);
100
101
  const closeButtonReference = useRef(null);
101
102
  return /*#__PURE__*/jsx("div", {
102
- role: resolvedType === Sentiment.NEGATIVE || resolvedType === Sentiment.CRITICAL ? 'alert' : 'status',
103
+ role: resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status',
103
104
  className: "wds-alert__liveRegion",
104
105
  children: /*#__PURE__*/jsxs("div", {
105
106
  "aria-hidden": shouldAnnounce ? undefined : 'true',
@@ -119,16 +120,17 @@ function Alert({
119
120
  setShouldFire(false);
120
121
  },
121
122
  onTouchMove: () => setShouldFire(false),
122
- children: [/*#__PURE__*/jsx("div", {
123
- className: "alert__icon",
124
- children: icon || /*#__PURE__*/jsx(StatusIcon, {
125
- size: 32,
123
+ children: [/*#__PURE__*/jsxs("div", {
124
+ className: clsx('alert__content', 'd-flex', 'flex-grow-1', variant),
125
+ "data-testid": variant,
126
+ children: [icon ? /*#__PURE__*/jsx("div", {
127
+ className: "alert__icon",
128
+ children: icon
129
+ }) : /*#__PURE__*/jsx(StatusIcon, {
130
+ size: Size.LARGE,
126
131
  sentiment: resolvedType,
127
132
  iconLabel: statusIconLabel
128
- })
129
- }), /*#__PURE__*/jsx("div", {
130
- className: clsx('alert__content', 'd-flex', 'flex-grow-1'),
131
- children: /*#__PURE__*/jsxs("div", {
133
+ }), /*#__PURE__*/jsxs("div", {
132
134
  className: "alert__message",
133
135
  children: [/*#__PURE__*/jsxs("div", {
134
136
  children: [title && /*#__PURE__*/jsx(Title, {
@@ -146,11 +148,9 @@ function Alert({
146
148
  }), action && /*#__PURE__*/jsx(Action, {
147
149
  action: action,
148
150
  variant: "action-button",
149
- className: "alert__action",
150
- sentiment: type === 'critical' ? 'negative' : 'default',
151
- priority: type === 'critical' ? 'secondary' : 'tertiary'
151
+ className: "m-t-1"
152
152
  })]
153
- })
153
+ })]
154
154
  }), onDismiss && /*#__PURE__*/jsx(CloseButton, {
155
155
  ref: closeButtonReference,
156
156
  className: "m-l-2",
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE\n | Sentiment.CRITICAL}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n arrow,\n children,\n size,\n dismissible,\n}: AlertProps) {\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={\n resolvedType === Sentiment.NEGATIVE || resolvedType === Sentiment.CRITICAL\n ? 'alert'\n : 'status'\n }\n className=\"wds-alert__liveRegion\"\n >\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div className=\"alert__icon\">\n {icon || <StatusIcon size={32} sentiment={resolvedType} iconLabel={statusIconLabel} />}\n </div>\n <div className={clsx('alert__content', 'd-flex', 'flex-grow-1')}>\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && (\n <Action\n action={action}\n variant=\"action-button\"\n className=\"alert__action\"\n sentiment={type === 'critical' ? 'negative' : 'default'}\n priority={type === 'critical' ? 'secondary' : 'tertiary'}\n />\n )}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","CRITICAL","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","variant","priority","CloseButton","ref","onClick"],"mappings":"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"}
1
+ {"version":3,"file":"Alert.mjs","sources":["../../src/alert/Alert.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState, useRef, useEffect } from 'react';\n\nimport Body from '../body/Body';\nimport {\n CloseButton,\n Sentiment,\n Size,\n Typography,\n Variant,\n WDS_LIVE_REGION_DELAY_MS,\n} from '../common';\n\nimport StatusIcon from '../statusIcon';\nimport Title from '../title/Title';\nimport { logActionRequired } from '../utilities';\n\nimport InlineMarkdown from './inlineMarkdown';\nimport { Action } from '../common/action/Action';\n\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\n/** @deprecated Use `\"top\" | \"bottom\"` instead. */\ntype AlertTypeDeprecated = `${Sentiment.SUCCESS | Sentiment.INFO | Sentiment.ERROR}`;\ntype AlertTypeResolved = `${\n | Sentiment.POSITIVE\n | Sentiment.NEUTRAL\n | Sentiment.WARNING\n | Sentiment.NEGATIVE}`;\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\nexport enum AlertArrowPosition {\n TOP_LEFT = 'up-left',\n TOP = 'up-center',\n TOP_RIGHT = 'up-right',\n BOTTOM_LEFT = 'down-left',\n BOTTOM = 'down-center',\n BOTTOM_RIGHT = 'down-right',\n}\n\nexport interface AlertProps {\n /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */\n action?: AlertAction;\n className?: string;\n /** An optional icon. If not provided, we will default the icon to something appropriate for the type */\n icon?: React.ReactNode;\n /**\n * Override for [StatusIcon's default, accessible name](/?path=/docs/other-statusicon-accessibility--docs)\n * announced by the screen readers\n * */\n statusIconLabel?: string;\n /** Title for the alert component */\n title?: string;\n /** The main body of the alert. Accepts plain text and bold words specified with **double stars */\n message?: string;\n /** The presence of the onDismiss handler will trigger the visibility of the close button */\n onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n /** The type dictates which icon and colour will be used */\n type?: AlertType;\n variant?: `${Variant}`;\n /** @deprecated Use `InlineAlert` instead. */\n arrow?: `${AlertArrowPosition}`;\n /** @deprecated Use `message` instead. Be aware `message` only accepts plain text or text with **bold** markdown. */\n children?: React.ReactNode;\n /** @deprecated Use `onDismiss` instead. */\n dismissible?: boolean;\n /** @deprecated Alert component doesn't support `size` anymore, please remove this prop. */\n size?: `${Size}`;\n}\n\nfunction resolveType(type: AlertType): AlertTypeResolved {\n switch (type) {\n case 'success':\n return 'positive';\n case 'info':\n return 'neutral';\n case 'error':\n return 'negative';\n default:\n return type;\n }\n}\n\nexport default function Alert({\n action,\n className,\n icon,\n statusIconLabel,\n onDismiss,\n message,\n title,\n type = 'neutral',\n variant = 'desktop',\n arrow,\n children,\n size,\n dismissible,\n}: AlertProps) {\n useEffect(() => {\n if (arrow !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.\",\n );\n }\n }, [arrow]);\n\n useEffect(() => {\n if (children !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'children' anymore, use 'message' instead.\",\n );\n }\n }, [children]);\n\n useEffect(() => {\n if (dismissible !== undefined) {\n logActionRequired(\n \"Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.\",\n );\n }\n }, [dismissible]);\n\n useEffect(() => {\n if (size !== undefined) {\n logActionRequired(\"Alert component doesn't support 'size' anymore, please remove that prop.\");\n }\n }, [size]);\n\n const resolvedType = resolveType(type);\n useEffect(() => {\n if (resolvedType !== type) {\n logActionRequired(\n `Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`,\n );\n }\n }, [resolvedType, type]);\n\n const [shouldFire, setShouldFire] = useState<boolean>();\n\n const [shouldAnnounce, setShouldAnnounce] = useState<boolean>(false);\n useEffect(() => {\n setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n return (\n <div\n role={resolvedType === Sentiment.NEGATIVE ? 'alert' : 'status'}\n className=\"wds-alert__liveRegion\"\n >\n <div\n aria-hidden={shouldAnnounce ? undefined : 'true'}\n className={clsx(\n 'alert d-flex',\n `alert-${resolvedType}`,\n arrow != null && alertArrowClassNames(arrow),\n className,\n )}\n data-testid=\"alert\"\n onTouchStart={() => setShouldFire(true)}\n onTouchEnd={(event) => {\n if (\n shouldFire &&\n action?.href &&\n // Check if current event is triggered from closeButton\n event.target instanceof Node &&\n closeButtonReference.current &&\n !closeButtonReference.current.contains(event.target)\n ) {\n if (action.target === '_blank') {\n window.top?.open(action.href);\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n }}\n onTouchMove={() => setShouldFire(false)}\n >\n <div\n className={clsx('alert__content', 'd-flex', 'flex-grow-1', variant)}\n data-testid={variant}\n >\n {icon ? (\n <div className=\"alert__icon\">{icon}</div>\n ) : (\n <StatusIcon size={Size.LARGE} sentiment={resolvedType} iconLabel={statusIconLabel} />\n )}\n <div className=\"alert__message\">\n <div>\n {title && (\n <Title className=\"m-b-1\" type={Typography.TITLE_BODY}>\n {title}\n </Title>\n )}\n <Body as=\"span\" className=\"d-block\" type={Typography.BODY_LARGE}>\n {children || <InlineMarkdown>{message}</InlineMarkdown>}\n </Body>\n </div>\n {action && <Action action={action} variant=\"action-button\" className=\"m-t-1\" />}\n </div>\n </div>\n {onDismiss && (\n <CloseButton ref={closeButtonReference} className=\"m-l-2\" onClick={onDismiss} />\n )}\n </div>\n </div>\n );\n}\n\nfunction alertArrowClassNames(arrow: `${AlertArrowPosition}`) {\n switch (arrow) {\n case 'down-center':\n return 'arrow arrow-bottom arrow-center';\n case 'down-left':\n return 'arrow arrow-bottom arrow-left';\n case 'down-right':\n return 'arrow arrow-bottom arrow-right';\n case 'up-center':\n return 'arrow arrow-center';\n case 'up-right':\n return 'arrow arrow-right';\n case 'up-left':\n default:\n return 'arrow';\n }\n}\n"],"names":["AlertArrowPosition","resolveType","type","Alert","action","className","icon","statusIconLabel","onDismiss","message","title","variant","arrow","children","size","dismissible","useEffect","undefined","logActionRequired","resolvedType","shouldFire","setShouldFire","useState","shouldAnnounce","setShouldAnnounce","setTimeout","WDS_LIVE_REGION_DELAY_MS","closeButtonReference","useRef","_jsx","role","Sentiment","NEGATIVE","_jsxs","clsx","alertArrowClassNames","onTouchStart","onTouchEnd","event","href","target","Node","current","contains","window","top","open","location","assign","onTouchMove","StatusIcon","Size","LARGE","sentiment","iconLabel","Title","Typography","TITLE_BODY","Body","as","BODY_LARGE","InlineMarkdown","Action","CloseButton","ref","onClick"],"mappings":"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"}
@@ -3,16 +3,14 @@
3
3
  var clsx = require('clsx');
4
4
  var Link = require('../../link/Link.js');
5
5
  var typography = require('../propsValues/typography.js');
6
+ var ActionButton = require('../../actionButton/ActionButton.js');
6
7
  var control = require('../propsValues/control.js');
7
- var Button_resolver = require('../../button/Button.resolver.js');
8
8
  var jsxRuntime = require('react/jsx-runtime');
9
9
 
10
10
  function Action({
11
11
  action,
12
12
  className,
13
- variant = 'button',
14
- sentiment = 'default',
15
- priority = control.Priority.SECONDARY
13
+ variant = 'button'
16
14
  }) {
17
15
  if ('href' in action) {
18
16
  return /*#__PURE__*/jsxRuntime.jsx(Link, {
@@ -25,28 +23,19 @@ function Action({
25
23
  children: action.text
26
24
  });
27
25
  }
28
- switch (variant) {
29
- case 'action-button':
30
- return /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
31
- v2: true,
32
- size: "sm",
33
- sentiment: sentiment,
34
- "aria-label": action['aria-label'],
35
- priority: priority,
36
- className: clsx.clsx(className),
37
- onClick: action.onClick,
38
- children: action.text
39
- });
40
- case 'button':
41
- default:
42
- return /*#__PURE__*/jsxRuntime.jsx("button", {
43
- type: "button",
44
- "aria-label": action['aria-label'],
45
- className: clsx.clsx('btn-unstyled np-text-link-large', className),
46
- onClick: action.onClick,
47
- children: action.text
48
- });
49
- }
26
+ return variant === 'button' ? /*#__PURE__*/jsxRuntime.jsx("button", {
27
+ type: "button",
28
+ "aria-label": action['aria-label'],
29
+ className: clsx.clsx('btn-unstyled np-text-link-large', className),
30
+ onClick: action.onClick,
31
+ children: action.text
32
+ }) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
33
+ "aria-label": action['aria-label'],
34
+ priority: control.Priority.SECONDARY,
35
+ className: clsx.clsx(className),
36
+ onClick: action.onClick,
37
+ children: action.text
38
+ });
50
39
  }
51
40
 
52
41
  exports.Action = Action;
@@ -1 +1 @@
1
- {"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n action: ActionOptions;\n className?: string;\n variant?: 'button' | 'action-button';\n sentiment?: ButtonSentiment;\n priority?: ButtonPriority;\n};\n\nexport function Action({\n action,\n className,\n variant = 'button',\n sentiment = 'default',\n priority = Priority.SECONDARY,\n}: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n switch (variant) {\n case 'action-button':\n return (\n <Button\n v2\n size=\"sm\"\n sentiment={sentiment}\n aria-label={action['aria-label']}\n priority={priority}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n );\n case 'button':\n default:\n return (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n );\n }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,gBAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,cAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,cAAA,CAACU,eAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,SAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,cAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,SAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}
1
+ {"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport ActionButton from '../../actionButton';\nimport { Priority } from '../propsValues/control';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n variant?: 'button' | 'action-button';\n action: ActionOptions;\n className?: string;\n};\n\nexport function Action({ action, className, variant = 'button' }: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n return variant === 'button' ? (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n ) : (\n <ActionButton\n aria-label={action['aria-label']}\n priority={Priority.SECONDARY}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </ActionButton>\n );\n}\n"],"names":["Action","action","className","variant","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx","ActionButton","priority","Priority","SECONDARY"],"mappings":";;;;;;;;;AAoBM,SAAUA,MAAMA,CAAC;EAAEC,MAAM;EAAEC,SAAS;AAAEC,EAAAA,OAAO,GAAG,QAAA;AAAiB,CAAA,EAAA;EACrE,IAAI,MAAM,IAAIF,MAAM,EAAE;IACpB,oBACEG,cAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEL,MAAM,CAACK,IAAK;AAClBJ,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCM,MAAM,EAAEN,MAAM,CAACM,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEV,MAAM,CAACU,OAAQ;MAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOV,OAAO,KAAK,QAAQ,gBACzBC,cAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYP,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEY,SAAI,CAAC,iCAAiC,EAAEZ,SAAS,CAAE;IAC9DS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACN,CAAC,gBAETT,cAAA,CAACW,YAAY,EAAA;IACX,YAAYd,EAAAA,MAAM,CAAC,YAAY,CAAE;IACjCe,QAAQ,EAAEC,gBAAQ,CAACC,SAAU;AAC7BhB,IAAAA,SAAS,EAAEY,SAAI,CAACZ,SAAS,CAAE;IAC3BS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACA,CACf,CAAA;AACH;;;;"}
@@ -1,16 +1,14 @@
1
1
  import { clsx } from 'clsx';
2
2
  import Link from '../../link/Link.mjs';
3
3
  import { Typography } from '../propsValues/typography.mjs';
4
+ import ActionButton from '../../actionButton/ActionButton.mjs';
4
5
  import { Priority } from '../propsValues/control.mjs';
5
- import Button from '../../button/Button.resolver.mjs';
6
6
  import { jsx } from 'react/jsx-runtime';
7
7
 
8
8
  function Action({
9
9
  action,
10
10
  className,
11
- variant = 'button',
12
- sentiment = 'default',
13
- priority = Priority.SECONDARY
11
+ variant = 'button'
14
12
  }) {
15
13
  if ('href' in action) {
16
14
  return /*#__PURE__*/jsx(Link, {
@@ -23,28 +21,19 @@ function Action({
23
21
  children: action.text
24
22
  });
25
23
  }
26
- switch (variant) {
27
- case 'action-button':
28
- return /*#__PURE__*/jsx(Button, {
29
- v2: true,
30
- size: "sm",
31
- sentiment: sentiment,
32
- "aria-label": action['aria-label'],
33
- priority: priority,
34
- className: clsx(className),
35
- onClick: action.onClick,
36
- children: action.text
37
- });
38
- case 'button':
39
- default:
40
- return /*#__PURE__*/jsx("button", {
41
- type: "button",
42
- "aria-label": action['aria-label'],
43
- className: clsx('btn-unstyled np-text-link-large', className),
44
- onClick: action.onClick,
45
- children: action.text
46
- });
47
- }
24
+ return variant === 'button' ? /*#__PURE__*/jsx("button", {
25
+ type: "button",
26
+ "aria-label": action['aria-label'],
27
+ className: clsx('btn-unstyled np-text-link-large', className),
28
+ onClick: action.onClick,
29
+ children: action.text
30
+ }) : /*#__PURE__*/jsx(ActionButton, {
31
+ "aria-label": action['aria-label'],
32
+ priority: Priority.SECONDARY,
33
+ className: clsx(className),
34
+ onClick: action.onClick,
35
+ children: action.text
36
+ });
48
37
  }
49
38
 
50
39
  export { Action };
@@ -1 +1 @@
1
- {"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n action: ActionOptions;\n className?: string;\n variant?: 'button' | 'action-button';\n sentiment?: ButtonSentiment;\n priority?: ButtonPriority;\n};\n\nexport function Action({\n action,\n className,\n variant = 'button',\n sentiment = 'default',\n priority = Priority.SECONDARY,\n}: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n switch (variant) {\n case 'action-button':\n return (\n <Button\n v2\n size=\"sm\"\n sentiment={sentiment}\n aria-label={action['aria-label']}\n priority={priority}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n );\n case 'button':\n default:\n return (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n );\n }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,QAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,GAAA,CAACU,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,IAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,GAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,IAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}
1
+ {"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport ActionButton from '../../actionButton';\nimport { Priority } from '../propsValues/control';\n\nexport type ActionOptions = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n};\n\ntype Props = {\n variant?: 'button' | 'action-button';\n action: ActionOptions;\n className?: string;\n};\n\nexport function Action({ action, className, variant = 'button' }: Props) {\n if ('href' in action) {\n return (\n <Link\n href={action.href}\n className={className}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n );\n }\n\n return variant === 'button' ? (\n <button\n type=\"button\"\n aria-label={action['aria-label']}\n className={clsx('btn-unstyled np-text-link-large', className)}\n onClick={action.onClick}\n >\n {action.text}\n </button>\n ) : (\n <ActionButton\n aria-label={action['aria-label']}\n priority={Priority.SECONDARY}\n className={clsx(className)}\n onClick={action.onClick}\n >\n {action.text}\n </ActionButton>\n );\n}\n"],"names":["Action","action","className","variant","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","clsx","ActionButton","priority","Priority","SECONDARY"],"mappings":";;;;;;;AAoBM,SAAUA,MAAMA,CAAC;EAAEC,MAAM;EAAEC,SAAS;AAAEC,EAAAA,OAAO,GAAG,QAAA;AAAiB,CAAA,EAAA;EACrE,IAAI,MAAM,IAAIF,MAAM,EAAE;IACpB,oBACEG,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAEL,MAAM,CAACK,IAAK;AAClBJ,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCM,MAAM,EAAEN,MAAM,CAACM,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEV,MAAM,CAACU,OAAQ;MAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,OAAOV,OAAO,KAAK,QAAQ,gBACzBC,GAAA,CAAA,QAAA,EAAA;AACEI,IAAAA,IAAI,EAAC,QAAQ;IACb,YAAYP,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,IAAAA,SAAS,EAAEY,IAAI,CAAC,iCAAiC,EAAEZ,SAAS,CAAE;IAC9DS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACN,CAAC,gBAETT,GAAA,CAACW,YAAY,EAAA;IACX,YAAYd,EAAAA,MAAM,CAAC,YAAY,CAAE;IACjCe,QAAQ,EAAEC,QAAQ,CAACC,SAAU;AAC7BhB,IAAAA,SAAS,EAAEY,IAAI,CAACZ,SAAS,CAAE;IAC3BS,OAAO,EAAEV,MAAM,CAACU,OAAQ;IAAAC,QAAA,EAEvBX,MAAM,CAACY,IAAAA;AAAI,GACA,CACf,CAAA;AACH;;;;"}
@@ -7,7 +7,6 @@ exports.Sentiment = void 0;
7
7
  Sentiment["POSITIVE"] = "positive";
8
8
  Sentiment["WARNING"] = "warning";
9
9
  Sentiment["PENDING"] = "pending";
10
- Sentiment["CRITICAL"] = "critical";
11
10
  /**
12
11
  * @deprecated
13
12
  */
@@ -1 +1 @@
1
- {"version":3,"file":"sentiment.js","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n CRITICAL = 'critical',\n\n /**\n * @deprecated\n */\n INFO = 'info',\n /**\n * @deprecated\n */\n ERROR = 'error',\n /**\n * @deprecated\n */\n SUCCESS = 'success',\n}\n"],"names":["Sentiment"],"mappings":";;AAAYA,2BAoBX;AApBD,CAAA,UAAYA,SAAS,EAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AAErB;;AAEG;AACHA,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACHA,EAAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACHA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EApBWA,iBAAS,KAATA,iBAAS,GAoBpB,EAAA,CAAA,CAAA;;"}
1
+ {"version":3,"file":"sentiment.js","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n\n /**\n * @deprecated\n */\n INFO = 'info',\n /**\n * @deprecated\n */\n ERROR = 'error',\n /**\n * @deprecated\n */\n SUCCESS = 'success',\n}\n"],"names":["Sentiment"],"mappings":";;AAAYA,2BAmBX;AAnBD,CAAA,UAAYA,SAAS,EAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AAEnB;;AAEG;AACHA,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACHA,EAAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACHA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAnBWA,iBAAS,KAATA,iBAAS,GAmBpB,EAAA,CAAA,CAAA;;"}
@@ -5,7 +5,6 @@ var Sentiment;
5
5
  Sentiment["POSITIVE"] = "positive";
6
6
  Sentiment["WARNING"] = "warning";
7
7
  Sentiment["PENDING"] = "pending";
8
- Sentiment["CRITICAL"] = "critical";
9
8
  /**
10
9
  * @deprecated
11
10
  */
@@ -1 +1 @@
1
- {"version":3,"file":"sentiment.mjs","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n CRITICAL = 'critical',\n\n /**\n * @deprecated\n */\n INFO = 'info',\n /**\n * @deprecated\n */\n ERROR = 'error',\n /**\n * @deprecated\n */\n SUCCESS = 'success',\n}\n"],"names":["Sentiment"],"mappings":"IAAYA,UAoBX;AApBD,CAAA,UAAYA,SAAS,EAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AAErB;;AAEG;AACHA,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACHA,EAAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACHA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EApBWA,SAAS,KAATA,SAAS,GAoBpB,EAAA,CAAA,CAAA;;;;"}
1
+ {"version":3,"file":"sentiment.mjs","sources":["../../../src/common/propsValues/sentiment.ts"],"sourcesContent":["export enum Sentiment {\n NEGATIVE = 'negative',\n NEUTRAL = 'neutral',\n POSITIVE = 'positive',\n WARNING = 'warning',\n PENDING = 'pending',\n\n /**\n * @deprecated\n */\n INFO = 'info',\n /**\n * @deprecated\n */\n ERROR = 'error',\n /**\n * @deprecated\n */\n SUCCESS = 'success',\n}\n"],"names":["Sentiment"],"mappings":"IAAYA,UAmBX;AAnBD,CAAA,UAAYA,SAAS,EAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,UAAA,CAAA,GAAA,UAAqB,CAAA;AACrBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnBA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AAEnB;;AAEG;AACHA,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,MAAa,CAAA;AACb;;AAEG;AACHA,EAAAA,SAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACf;;AAEG;AACHA,EAAAA,SAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACrB,CAAC,EAnBWA,SAAS,KAATA,SAAS,GAmBpB,EAAA,CAAA,CAAA;;;;"}
@@ -1,8 +1,36 @@
1
1
  'use strict';
2
2
 
3
- var Alert = require('../alert/Alert.js');
3
+ var icons = require('@transferwise/icons');
4
+ var componentsTheming = require('@wise/components-theming');
4
5
  var clsx = require('clsx');
6
+ var avatarTypes = require('../avatar/avatarTypes.js');
7
+ var Avatar = require('../avatar/Avatar.js');
8
+ var Body = require('../body/Body.js');
9
+ var Button_resolver = require('../button/Button.resolver.js');
10
+ require('../common/theme.js');
11
+ require('../common/direction.js');
12
+ var control = require('../common/propsValues/control.js');
13
+ require('../common/propsValues/breakpoint.js');
14
+ var size = require('../common/propsValues/size.js');
15
+ var typography = require('../common/propsValues/typography.js');
16
+ require('../common/propsValues/width.js');
17
+ require('../common/propsValues/type.js');
18
+ require('../common/propsValues/dateMode.js');
19
+ require('../common/propsValues/monthFormat.js');
20
+ require('../common/propsValues/position.js');
21
+ require('../common/propsValues/layouts.js');
22
+ require('../common/propsValues/status.js');
23
+ require('../common/propsValues/sentiment.js');
24
+ require('../common/propsValues/profileType.js');
25
+ require('../common/propsValues/variant.js');
26
+ require('../common/propsValues/scroll.js');
27
+ require('../common/propsValues/markdownNodeType.js');
28
+ require('../common/fileType.js');
29
+ require('react');
30
+ require('react-intl');
31
+ require('../common/closeButton/CloseButton.messages.js');
5
32
  var jsxRuntime = require('react/jsx-runtime');
33
+ var Title = require('../title/Title.js');
6
34
 
7
35
  function CriticalCommsBanner({
8
36
  title,
@@ -10,17 +38,52 @@ function CriticalCommsBanner({
10
38
  action,
11
39
  className
12
40
  }) {
41
+ const {
42
+ isModern
43
+ } = componentsTheming.useTheme();
13
44
  return /*#__PURE__*/jsxRuntime.jsx("div", {
14
45
  className: clsx.clsx('critical-comms', className),
15
- children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
16
- title: title,
17
- message: subtitle,
18
- action: {
19
- target: action?.href,
20
- text: action?.label
21
- },
22
- className: className,
23
- type: "critical"
46
+ children: /*#__PURE__*/jsxRuntime.jsxs("div", {
47
+ className: "critical-comms-body",
48
+ children: [/*#__PURE__*/jsxRuntime.jsx(Avatar, {
49
+ size: size.Size.MEDIUM,
50
+ type: avatarTypes.AvatarType.ICON,
51
+ className: clsx.clsx(isModern ? 'm-r-2' : 'm-r-1'),
52
+ backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
53
+ children: isModern ? /*#__PURE__*/jsxRuntime.jsx(icons.AlertCircleFill, {}) : /*#__PURE__*/jsxRuntime.jsx(icons.Alert, {
54
+ size: 24
55
+ })
56
+ }), /*#__PURE__*/jsxRuntime.jsxs("div", {
57
+ className: "critical-comms-content d-flex align-items-center flex-grow-1",
58
+ children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
59
+ className: clsx.clsx('flex-grow-1', {
60
+ 'p-x-2': !isModern
61
+ }),
62
+ children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
63
+ type: isModern ? typography.Typography.TITLE_BODY : typography.Typography.TITLE_GROUP,
64
+ className: "critical-comms--title",
65
+ children: title
66
+ }), /*#__PURE__*/jsxRuntime.jsx(Body, {
67
+ className: "critical-comms--subtitle",
68
+ children: subtitle
69
+ })]
70
+ }), action ? /*#__PURE__*/jsxRuntime.jsx("div", {
71
+ className: "critical-comms--cta",
72
+ children: /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
73
+ block: isModern,
74
+ size: size.Size.SMALL,
75
+ type: control.ControlType.NEGATIVE,
76
+ priority: isModern ? control.Priority.SECONDARY : control.Priority.PRIMARY,
77
+ className: "cta-btn",
78
+ onClick: () => {
79
+ if (action) {
80
+ window.location.href = action.href;
81
+ }
82
+ },
83
+ children: action.label
84
+ })
85
+ }) : null]
86
+ })]
24
87
  })
25
88
  });
26
89
  }
@@ -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 };\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={{ target: action?.href, text: action?.label }}\n className={className}\n type=\"critical\"\n />\n </div>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","_jsx","clsx","children","Alert","message","target","href","text","label","type"],"mappings":";;;;;;AAaA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,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,MAAM,EAAEP,MAAM,EAAEQ,IAAI;QAAEC,IAAI,EAAET,MAAM,EAAEU,KAAAA;OAAQ;AACtDT,MAAAA,SAAS,EAAEA,SAAU;AACrBU,MAAAA,IAAI,EAAC,UAAA;KAET,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';\nimport { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport Button from '../button';\nimport { ControlType, Priority, Size, Typography } from '../common';\nimport Title from '../title';\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href: string;\n };\n className?: string;\n};\n\nfunction CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {\n const { isModern } = useTheme();\n return (\n <div className={clsx('critical-comms', className)}>\n <div className=\"critical-comms-body\">\n <Avatar\n size={Size.MEDIUM}\n type={AvatarType.ICON}\n className={clsx(isModern ? 'm-r-2' : 'm-r-1')}\n backgroundColor={\n isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'\n }\n >\n {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}\n </Avatar>\n <div className=\"critical-comms-content d-flex align-items-center flex-grow-1\">\n <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>\n <Title\n type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}\n className=\"critical-comms--title\"\n >\n {title}\n </Title>\n <Body className=\"critical-comms--subtitle\">{subtitle}</Body>\n </div>\n {action ? (\n <div className=\"critical-comms--cta\">\n <Button\n block={isModern}\n size={Size.SMALL}\n type={ControlType.NEGATIVE}\n priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}\n className=\"cta-btn\"\n onClick={() => {\n if (action) {\n window.location.href = action.href;\n }\n }}\n >\n {action.label}\n </Button>\n </div>\n ) : null}\n </div>\n </div>\n </div>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["CriticalCommsBanner","title","subtitle","action","className","isModern","useTheme","_jsx","clsx","children","_jsxs","Avatar","size","Size","MEDIUM","type","AvatarType","ICON","backgroundColor","AlertCircleFill","DangerIcon","Title","Typography","TITLE_BODY","TITLE_GROUP","Body","Button","block","SMALL","ControlType","NEGATIVE","priority","Priority","SECONDARY","PRIMARY","onClick","window","location","href","label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,SAASA,mBAAmBA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;AAAEC,EAAAA,SAAAA;AAAqC,CAAA,EAAA;EAC3F,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKH,IAAAA,SAAS,EAAEI,SAAI,CAAC,gBAAgB,EAAEJ,SAAS,CAAE;AAAAK,IAAAA,QAAA,eAChDC,eAAA,CAAA,KAAA,EAAA;AAAKN,MAAAA,SAAS,EAAC,qBAAqB;MAAAK,QAAA,EAAA,cAClCF,cAAA,CAACI,MAAM,EAAA;QACLC,IAAI,EAAEC,SAAI,CAACC,MAAO;QAClBC,IAAI,EAAEC,sBAAU,CAACC,IAAK;QACtBb,SAAS,EAAEI,SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAE;AAC9Ca,QAAAA,eAAe,EACbb,QAAQ,GAAG,iCAAiC,GAAG,kCAChD;QAAAI,QAAA,EAEAJ,QAAQ,gBAAGE,cAAA,CAACY,qBAAe,EAAA,EAAG,CAAA,gBAAGZ,cAAA,CAACa,WAAU,EAAA;AAACR,UAAAA,IAAI,EAAE,EAAA;SAAG,CAAA;OACjD,CACR,eAAAF,eAAA,CAAA,KAAA,EAAA;AAAKN,QAAAA,SAAS,EAAC,8DAA8D;AAAAK,QAAAA,QAAA,gBAC3EC,eAAA,CAAA,KAAA,EAAA;AAAKN,UAAAA,SAAS,EAAEI,SAAI,CAAC,aAAa,EAAE;AAAE,YAAA,OAAO,EAAE,CAACH,QAAAA;AAAU,WAAA,CAAE;UAAAI,QAAA,EAAA,cAC1DF,cAAA,CAACc,KAAK,EAAA;YACJN,IAAI,EAAEV,QAAQ,GAAGiB,qBAAU,CAACC,UAAU,GAAGD,qBAAU,CAACE,WAAY;AAChEpB,YAAAA,SAAS,EAAC,uBAAuB;AAAAK,YAAAA,QAAA,EAEhCR,KAAAA;AAAK,WACD,CACP,eAAAM,cAAA,CAACkB,IAAI,EAAA;AAACrB,YAAAA,SAAS,EAAC,0BAA0B;AAAAK,YAAAA,QAAA,EAAEP,QAAAA;AAAQ,WAAO,CAC7D,CAAA;AAAA,SAAK,CACL,EAACC,MAAM,gBACLI,cAAA,CAAA,KAAA,EAAA;AAAKH,UAAAA,SAAS,EAAC,qBAAqB;UAAAK,QAAA,eAClCF,cAAA,CAACmB,eAAM,EAAA;AACLC,YAAAA,KAAK,EAAEtB,QAAS;YAChBO,IAAI,EAAEC,SAAI,CAACe,KAAM;YACjBb,IAAI,EAAEc,mBAAW,CAACC,QAAS;YAC3BC,QAAQ,EAAE1B,QAAQ,GAAG2B,gBAAQ,CAACC,SAAS,GAAGD,gBAAQ,CAACE,OAAQ;AAC3D9B,YAAAA,SAAS,EAAC,SAAS;YACnB+B,OAAO,EAAEA,MAAK;AACZ,cAAA,IAAIhC,MAAM,EAAE;AACViC,gBAAAA,MAAM,CAACC,QAAQ,CAACC,IAAI,GAAGnC,MAAM,CAACmC,IAAI,CAAA;AACpC,eAAA;aACA;YAAA7B,QAAA,EAEDN,MAAM,CAACoC,KAAAA;WACF,CAAA;SACL,CAAC,GACJ,IAAI,CAAA;AAAA,OACL,CACP,CAAA;KAAK,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}