@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-0eb6058

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 (342) hide show
  1. package/build/alert/Alert.js +4 -1
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +4 -1
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/criticalBanner/CriticalCommsBanner.js +6 -4
  6. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  7. package/build/criticalBanner/CriticalCommsBanner.mjs +6 -4
  8. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  9. package/build/main.css +16 -27001
  10. package/build/styles/criticalBanner/CriticalCommsBanner.css +9 -0
  11. package/build/styles/main.css +16 -27001
  12. package/build/types/alert/Alert.d.ts +2 -0
  13. package/build/types/alert/Alert.d.ts.map +1 -1
  14. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +1 -0
  15. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  16. package/package.json +4 -4
  17. package/src/accordion/Accordion.css +74 -0
  18. package/src/accordion/Accordion.less +3 -3
  19. package/src/actionButton/ActionButton.css +64 -0
  20. package/src/actionButton/ActionButton.less +1 -1
  21. package/src/actionOption/ActionOption.css +4 -0
  22. package/src/alert/Alert.css +7 -0
  23. package/src/alert/Alert.tsx +6 -1
  24. package/src/avatar/Avatar.css +250 -0
  25. package/src/avatar/Avatar.less +3 -3
  26. package/src/avatarLayout/AvatarLayout.css +42 -0
  27. package/src/avatarView/AvatarView.css +44 -0
  28. package/src/avatarView/Dot.css +26 -0
  29. package/src/badge/Badge.css +65 -0
  30. package/src/badge/Badge.less +1 -1
  31. package/src/body/Body.css +3 -0
  32. package/src/button/Button.css +246 -0
  33. package/src/button/Button.vars.css +46 -0
  34. package/src/button/LegacyButton.css +23 -0
  35. package/src/button/LegacyButton.less +1 -1
  36. package/src/card/Card.css +100 -0
  37. package/src/card/Card.less +3 -3
  38. package/src/carousel/Carousel.css +134 -0
  39. package/src/checkboxButton/CheckboxButton.css +43 -0
  40. package/src/checkboxButton/CheckboxButton.less +2 -2
  41. package/src/chips/Chip.css +190 -0
  42. package/src/chips/Chip.less +3 -3
  43. package/src/circularButton/CircularButton.css +34 -0
  44. package/src/common/Option/Option.css +122 -0
  45. package/src/common/Option/Option.less +2 -2
  46. package/src/common/RadioButton/RadioButton.css +4 -0
  47. package/src/common/baseCard/BaseCard.css +49 -0
  48. package/src/common/bottomSheet/BottomSheet.css +53 -0
  49. package/src/common/bottomSheet/BottomSheet.less +1 -1
  50. package/src/common/circle/Circle.css +43 -0
  51. package/src/common/closeButton/CloseButton.css +94 -0
  52. package/src/common/closeButton/CloseButton.less +1 -1
  53. package/src/common/panel/Panel.css +73 -0
  54. package/src/common/panel/Panel.less +1 -1
  55. package/src/criticalBanner/CriticalCommsBanner.css +63 -0
  56. package/src/criticalBanner/CriticalCommsBanner.less +13 -0
  57. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +15 -0
  58. package/src/criticalBanner/CriticalCommsBanner.test.tsx +28 -2
  59. package/src/criticalBanner/CriticalCommsBanner.tsx +10 -1
  60. package/src/dateInput/DateInput.css +16 -0
  61. package/src/dateLookup/DateLookup.css +93 -0
  62. package/src/dateLookup/DateLookup.less +1 -1
  63. package/src/dateLookup/dateTrigger/DateTrigger.css +29 -0
  64. package/src/dateLookup/dateTrigger/DateTrigger.less +2 -2
  65. package/src/decision/Decision.css +17 -0
  66. package/src/decision/Decision.less +1 -1
  67. package/src/definitionList/DefinitionList.css +53 -0
  68. package/src/definitionList/DefinitionList.less +1 -1
  69. package/src/dimmer/Dimmer.css +70 -0
  70. package/src/dimmer/Dimmer.less +2 -2
  71. package/src/divider/Divider.css +24 -0
  72. package/src/drawer/Drawer.css +56 -0
  73. package/src/dropFade/DropFade.css +19 -0
  74. package/src/emphasis/Emphasis.css +31 -0
  75. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +58 -0
  76. package/src/expressiveMoneyInput/amountInput/AmountInput.css +32 -0
  77. package/src/expressiveMoneyInput/chevron/Chevron.css +12 -0
  78. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css +6 -0
  79. package/src/field/Field.css +13 -0
  80. package/src/flowNavigation/FlowNavigation.css +76 -0
  81. package/src/flowNavigation/FlowNavigation.less +1 -1
  82. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +30 -0
  83. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +2 -2
  84. package/src/header/Header.css +33 -0
  85. package/src/iconButton/IconButton.css +82 -0
  86. package/src/image/Image.css +13 -0
  87. package/src/info/Info.css +9 -0
  88. package/src/info/Info.less +1 -1
  89. package/src/inputs/Input.css +158 -0
  90. package/src/inputs/InputGroup.css +63 -0
  91. package/src/inputs/SelectInput.css +380 -0
  92. package/src/inputs/SelectInput.less +1 -1
  93. package/src/inputs/TextArea.css +161 -0
  94. package/src/inputs/_common.less +1 -1
  95. package/src/instructionsList/InstructionsList.css +26 -0
  96. package/src/legacylistItem/LegacyListItem.css +6 -0
  97. package/src/link/Link.css +24 -0
  98. package/src/link/Link.less +2 -2
  99. package/src/listItem/ListItem.css +659 -0
  100. package/src/listItem/ListItem.grid.css +384 -0
  101. package/src/listItem/ListItem.less +1 -1
  102. package/src/listItem/Prompt/ListItemPrompt.css +4 -0
  103. package/src/loader/Loader.css +227 -0
  104. package/src/logo/Logo.css +26 -0
  105. package/src/main.css +7529 -0
  106. package/src/main.less +0 -2
  107. package/src/modal/Modal.css +95 -0
  108. package/src/moneyInput/MoneyInput.css +74 -0
  109. package/src/moneyInput/MoneyInput.less +2 -2
  110. package/src/navigationOption/NavigationOption.css +69 -0
  111. package/src/navigationOption/NavigationOption.less +3 -3
  112. package/src/navigationOptionsList/NavigationOptionsList.css +13 -0
  113. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  114. package/src/nudge/Nudge.css +206 -0
  115. package/src/overlayHeader/OverlayHeader.css +15 -0
  116. package/src/overlayHeader/OverlayHeader.less +1 -1
  117. package/src/phoneNumberInput/PhoneNumberInput.css +23 -0
  118. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  119. package/src/popover/Popover.css +76 -0
  120. package/src/popover/Popover.less +1 -1
  121. package/src/progress/Progress.css +43 -0
  122. package/src/progressBar/ProgressBar.css +14 -0
  123. package/src/promoCard/PromoCard.css +186 -0
  124. package/src/prompt/ActionPrompt/ActionPrompt.css +25 -0
  125. package/src/prompt/InfoPrompt/InfoPrompt.css +33 -0
  126. package/src/prompt/InlinePrompt/InlinePrompt.css +57 -0
  127. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +51 -0
  128. package/src/radioGroup/RadioGroup.css +3 -0
  129. package/src/section/Section.css +10 -0
  130. package/src/segmentedControl/SegmentedControl.css +101 -0
  131. package/src/select/Select.css +368 -0
  132. package/src/select/Select.less +5 -5
  133. package/src/sentimentSurface/SentimentSurface.css +487 -0
  134. package/src/slidingPanel/SlidingPanel.css +105 -0
  135. package/src/slidingPanel/SlidingPanel.less +2 -2
  136. package/src/snackbar/Snackbar.css +93 -0
  137. package/src/snackbar/Snackbar.less +3 -3
  138. package/src/statusIcon/StatusIcon.css +6 -0
  139. package/src/stepper/Stepper.css +77 -0
  140. package/src/stepper/Stepper.less +3 -3
  141. package/src/summary/Summary.css +81 -0
  142. package/src/summary/Summary.less +1 -1
  143. package/src/switch/Switch.css +63 -0
  144. package/src/switch/Switch.less +4 -4
  145. package/src/switchOption/SwitchOption.css +4 -0
  146. package/src/table/Table.css +274 -0
  147. package/src/table/Table.less +1 -1
  148. package/src/tabs/Tabs.css +121 -0
  149. package/src/tabs/Tabs.less +4 -4
  150. package/src/tile/Tile.css +68 -0
  151. package/src/tile/Tile.less +1 -1
  152. package/src/tooltip/Tooltip.css +50 -0
  153. package/src/tooltip/Tooltip.less +1 -1
  154. package/src/typeahead/Typeahead.css +187 -0
  155. package/src/typeahead/Typeahead.less +2 -2
  156. package/src/typeahead/typeaheadOption/TypeaheadOption.css +9 -0
  157. package/src/typeahead/typeaheadOption/TypeaheadOption.less +1 -1
  158. package/src/upload/Upload.css +34 -0
  159. package/src/upload/Upload.less +1 -1
  160. package/src/uploadInput/UploadInput.css +18 -0
  161. package/src/uploadInput/UploadInput.less +2 -2
  162. package/src/uploadInput/uploadButton/UploadButton.css +90 -0
  163. package/src/uploadInput/uploadItem/UploadItem.css +166 -0
  164. package/src/uploadInput/uploadItem/UploadItem.less +1 -1
  165. package/build/neptune-css/fonts/TW-Averta-Bold.woff +0 -0
  166. package/build/neptune-css/fonts/TW-Averta-Bold.woff2 +0 -0
  167. package/build/neptune-css/fonts/TW-Averta-Regular.woff +0 -0
  168. package/build/neptune-css/fonts/TW-Averta-Regular.woff2 +0 -0
  169. package/build/neptune-css/fonts/TW-Averta-Semibold.woff +0 -0
  170. package/build/neptune-css/fonts/TW-Averta-Semibold.woff2 +0 -0
  171. package/build/neptune-css/fonts/TransferWise-IconFont.svg +0 -81
  172. package/build/neptune-css/fonts/TransferWise-IconFont.woff +0 -0
  173. package/build/neptune-css/fonts/WiseSans-Heavy.woff2 +0 -0
  174. package/build/neptune-css/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  175. package/build/neptune-css/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  176. package/build/neptune-css/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  177. package/build/neptune-css/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  178. package/build/neptune-css/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  179. package/build/neptune-css/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  180. package/build/neptune-css/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  181. package/build/neptune-css/img/bg-dark.svg +0 -31
  182. package/build/neptune-css/img/bg-light.svg +0 -26
  183. package/build/styles/neptune-css/less/accordion.css +0 -255
  184. package/build/styles/neptune-css/less/alerts.css +0 -751
  185. package/build/styles/neptune-css/less/background.css +0 -20
  186. package/build/styles/neptune-css/less/badge.css +0 -90
  187. package/build/styles/neptune-css/less/border-radius.css +0 -3
  188. package/build/styles/neptune-css/less/breadcrumbs.css +0 -20
  189. package/build/styles/neptune-css/less/button-groups.css +0 -495
  190. package/build/styles/neptune-css/less/buttons.css +0 -1390
  191. package/build/styles/neptune-css/less/chevron.css +0 -35
  192. package/build/styles/neptune-css/less/circles.css +0 -248
  193. package/build/styles/neptune-css/less/close.css +0 -47
  194. package/build/styles/neptune-css/less/column-layout.css +0 -164
  195. package/build/styles/neptune-css/less/core/viewport-themes.css +0 -59
  196. package/build/styles/neptune-css/less/currency-flags.css +0 -46
  197. package/build/styles/neptune-css/less/decision.css +0 -136
  198. package/build/styles/neptune-css/less/dropdowns.css +0 -472
  199. package/build/styles/neptune-css/less/droppable.css +0 -221
  200. package/build/styles/neptune-css/less/flex.css +0 -598
  201. package/build/styles/neptune-css/less/footer.css +0 -129
  202. package/build/styles/neptune-css/less/forms/bootstrap-forms.css +0 -2277
  203. package/build/styles/neptune-css/less/forms/checkbox-radio.css +0 -367
  204. package/build/styles/neptune-css/less/grid.css +0 -2369
  205. package/build/styles/neptune-css/less/input-groups.css +0 -2740
  206. package/build/styles/neptune-css/less/link-callout.css +0 -20
  207. package/build/styles/neptune-css/less/list-group.css +0 -350
  208. package/build/styles/neptune-css/less/loaders.css +0 -76
  209. package/build/styles/neptune-css/less/media.css +0 -74
  210. package/build/styles/neptune-css/less/modals.css +0 -185
  211. package/build/styles/neptune-css/less/navbar.css +0 -2406
  212. package/build/styles/neptune-css/less/navs.css +0 -296
  213. package/build/styles/neptune-css/less/neptune-addons.css +0 -1857
  214. package/build/styles/neptune-css/less/neptune-core.css +0 -2049
  215. package/build/styles/neptune-css/less/neptune-social-media.css +0 -144
  216. package/build/styles/neptune-css/less/neptune.css +0 -25724
  217. package/build/styles/neptune-css/less/panels.css +0 -528
  218. package/build/styles/neptune-css/less/popovers.css +0 -661
  219. package/build/styles/neptune-css/less/process.css +0 -483
  220. package/build/styles/neptune-css/less/progress-bars.css +0 -64
  221. package/build/styles/neptune-css/less/ring.css +0 -55
  222. package/build/styles/neptune-css/less/select.css +0 -99
  223. package/build/styles/neptune-css/less/sequences.css +0 -855
  224. package/build/styles/neptune-css/less/table.css +0 -446
  225. package/build/styles/neptune-css/less/tick.css +0 -32
  226. package/build/styles/neptune-css/less/tooltip.css +0 -160
  227. package/build/styles/neptune-css/less/utilities.css +0 -145
  228. package/build/styles/neptune-css/less/wells.css +0 -74
  229. package/build/styles/neptune-css/props/custom-media.css +0 -11
  230. package/build/styles/neptune-css/props/legacy-custom-props.css +0 -69
  231. package/build/styles/neptune-css/props/neptune-tokens.css +0 -11
  232. package/build/styles/neptune-css/variables/neptune-tokens.css +0 -0
  233. package/build/styles/neptune-css/variables/zindex.css +0 -0
  234. package/src/neptune-css/fonts/TW-Averta-Bold.woff +0 -0
  235. package/src/neptune-css/fonts/TW-Averta-Bold.woff2 +0 -0
  236. package/src/neptune-css/fonts/TW-Averta-Regular.woff +0 -0
  237. package/src/neptune-css/fonts/TW-Averta-Regular.woff2 +0 -0
  238. package/src/neptune-css/fonts/TW-Averta-Semibold.woff +0 -0
  239. package/src/neptune-css/fonts/TW-Averta-Semibold.woff2 +0 -0
  240. package/src/neptune-css/fonts/TransferWise-IconFont.svg +0 -81
  241. package/src/neptune-css/fonts/TransferWise-IconFont.woff +0 -0
  242. package/src/neptune-css/fonts/WiseSans-Heavy.woff2 +0 -0
  243. package/src/neptune-css/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  244. package/src/neptune-css/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  245. package/src/neptune-css/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  246. package/src/neptune-css/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  247. package/src/neptune-css/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  248. package/src/neptune-css/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  249. package/src/neptune-css/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  250. package/src/neptune-css/img/bg-dark.svg +0 -31
  251. package/src/neptune-css/img/bg-light.svg +0 -26
  252. package/src/neptune-css/less/accordion.less +0 -15
  253. package/src/neptune-css/less/addons/_background-utilities.less +0 -82
  254. package/src/neptune-css/less/addons/_border.less +0 -3
  255. package/src/neptune-css/less/addons/_display-utilities.less +0 -159
  256. package/src/neptune-css/less/addons/_spacing-utilities.less +0 -73
  257. package/src/neptune-css/less/addons/_utilities.less +0 -147
  258. package/src/neptune-css/less/alerts.less +0 -252
  259. package/src/neptune-css/less/background.less +0 -24
  260. package/src/neptune-css/less/badge.less +0 -85
  261. package/src/neptune-css/less/border-radius.less +0 -3
  262. package/src/neptune-css/less/breadcrumbs.less +0 -27
  263. package/src/neptune-css/less/button-groups.less +0 -424
  264. package/src/neptune-css/less/buttons.less +0 -738
  265. package/src/neptune-css/less/chevron.less +0 -39
  266. package/src/neptune-css/less/circles.less +0 -233
  267. package/src/neptune-css/less/close.less +0 -48
  268. package/src/neptune-css/less/column-layout.less +0 -167
  269. package/src/neptune-css/less/components/_component-animations.less +0 -43
  270. package/src/neptune-css/less/core/_fonts.less +0 -97
  271. package/src/neptune-css/less/core/_scaffolding.less +0 -380
  272. package/src/neptune-css/less/core/_typography-utilities.less +0 -255
  273. package/src/neptune-css/less/core/_typography.less +0 -575
  274. package/src/neptune-css/less/core/viewport-themes.less +0 -65
  275. package/src/neptune-css/less/currency-flags.less +0 -42
  276. package/src/neptune-css/less/decision.less +0 -98
  277. package/src/neptune-css/less/dropdowns.less +0 -365
  278. package/src/neptune-css/less/droppable.less +0 -213
  279. package/src/neptune-css/less/flex.less +0 -113
  280. package/src/neptune-css/less/footer.less +0 -113
  281. package/src/neptune-css/less/forms/bootstrap-forms.less +0 -1218
  282. package/src/neptune-css/less/forms/checkbox-radio.less +0 -330
  283. package/src/neptune-css/less/grid.less +0 -187
  284. package/src/neptune-css/less/input-groups.less +0 -298
  285. package/src/neptune-css/less/link-callout.less +0 -17
  286. package/src/neptune-css/less/list-group.less +0 -260
  287. package/src/neptune-css/less/loaders.less +0 -91
  288. package/src/neptune-css/less/media.less +0 -68
  289. package/src/neptune-css/less/mixins/_alerts.less +0 -39
  290. package/src/neptune-css/less/mixins/_arrows.less +0 -52
  291. package/src/neptune-css/less/mixins/_border-radius.less +0 -11
  292. package/src/neptune-css/less/mixins/_buttons.less +0 -82
  293. package/src/neptune-css/less/mixins/_center-block.less +0 -7
  294. package/src/neptune-css/less/mixins/_clearfix.less +0 -23
  295. package/src/neptune-css/less/mixins/_flex.less +0 -105
  296. package/src/neptune-css/less/mixins/_forms.less +0 -130
  297. package/src/neptune-css/less/mixins/_grid-framework.less +0 -104
  298. package/src/neptune-css/less/mixins/_grid.less +0 -158
  299. package/src/neptune-css/less/mixins/_hide-text.less +0 -20
  300. package/src/neptune-css/less/mixins/_links.less +0 -7
  301. package/src/neptune-css/less/mixins/_list-group.less +0 -23
  302. package/src/neptune-css/less/mixins/_logical-properties-IE-friendly.less +0 -381
  303. package/src/neptune-css/less/mixins/_logical-properties-modern-browsers.less +0 -226
  304. package/src/neptune-css/less/mixins/_logical-properties.less +0 -5
  305. package/src/neptune-css/less/mixins/_nav-divider.less +0 -10
  306. package/src/neptune-css/less/mixins/_nav-vertical-align.less +0 -10
  307. package/src/neptune-css/less/mixins/_panels.less +0 -23
  308. package/src/neptune-css/less/mixins/_physical-properties.less +0 -110
  309. package/src/neptune-css/less/mixins/_reset-text.less +0 -22
  310. package/src/neptune-css/less/mixins/_sequence.less +0 -203
  311. package/src/neptune-css/less/mixins/_spacing.less +0 -122
  312. package/src/neptune-css/less/mixins/_tab-focus.less +0 -5
  313. package/src/neptune-css/less/mixins/_table-row.less +0 -47
  314. package/src/neptune-css/less/mixins/_text-emphasis.less +0 -39
  315. package/src/neptune-css/less/mixins/_text-overflow.less +0 -8
  316. package/src/neptune-css/less/mixins/_theming.less +0 -7
  317. package/src/neptune-css/less/modals.less +0 -239
  318. package/src/neptune-css/less/navbar.less +0 -1442
  319. package/src/neptune-css/less/navs.less +0 -339
  320. package/src/neptune-css/less/neptune-addons.less +0 -4
  321. package/src/neptune-css/less/neptune-core.less +0 -4
  322. package/src/neptune-css/less/neptune-social-media.less +0 -84
  323. package/src/neptune-css/less/neptune.bundle.less +0 -65
  324. package/src/neptune-css/less/panels.less +0 -410
  325. package/src/neptune-css/less/popovers.less +0 -379
  326. package/src/neptune-css/less/process.less +0 -426
  327. package/src/neptune-css/less/progress-bars.less +0 -55
  328. package/src/neptune-css/less/ring.less +0 -51
  329. package/src/neptune-css/less/select.less +0 -88
  330. package/src/neptune-css/less/sequences.less +0 -511
  331. package/src/neptune-css/less/table.less +0 -385
  332. package/src/neptune-css/less/tick.less +0 -37
  333. package/src/neptune-css/less/tooltip.less +0 -130
  334. package/src/neptune-css/less/utilities.less +0 -153
  335. package/src/neptune-css/less/wells.less +0 -37
  336. package/src/neptune-css/props/custom-media.css +0 -11
  337. package/src/neptune-css/props/legacy-custom-props.css +0 -69
  338. package/src/neptune-css/props/neptune-tokens.css +0 -11
  339. package/src/neptune-css/variables/legacy-variables.less +0 -1299
  340. package/src/neptune-css/variables/neptune-tokens.less +0 -12
  341. package/src/neptune-css/variables/zindex.less +0 -17
  342. /package/{build/styles/neptune-css/variables/legacy-variables.css → src/listItem/ListItem.vars.css} +0 -0
@@ -157,7 +157,7 @@ function Alert({
157
157
  children: message
158
158
  })
159
159
  })]
160
- }), action && ('href' in action ? /*#__PURE__*/jsxRuntime.jsx(Link.default, {
160
+ }), action && ('href' in action && !action.asButton ? /*#__PURE__*/jsxRuntime.jsx(Link.default, {
161
161
  href: action.href,
162
162
  "aria-label": action['aria-label'],
163
163
  target: action.target,
@@ -168,6 +168,9 @@ function Alert({
168
168
  children: action.text
169
169
  }) : /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
170
170
  v2: true,
171
+ as: action.href ? 'a' : 'button',
172
+ href: action.href,
173
+ target: action.target,
171
174
  size: "sm",
172
175
  sentiment: "default",
173
176
  "aria-label": action['aria-label'],
@@ -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 Status,\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 Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 /**\n * The type dictates which icon and colour will be used\n * @default 'neutral'\n */\n type?: AlertType;\n /** @deprecated Use `InlinePrompt` 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\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 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 ('href' in action ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_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","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"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 Status,\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 Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n /** Render the action as a Button styled as a link (`<a>`) instead of a Link component. Requires `href`. */\n asButton?: boolean;\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 // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 /**\n * The type dictates which icon and colour will be used\n * @default 'neutral'\n */\n type?: AlertType;\n /** @deprecated Use `InlinePrompt` 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\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 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 ('href' in action && !action.asButton ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n as={action.href ? 'a' : 'button'}\n href={action.href}\n target={action.target}\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_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","asButton","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDYA;AAAZ,CAAA,UAAYA,kBAAkB,EAAA;AAC5BA,EAAAA,kBAAA,CAAA,UAAA,CAAA,GAAA,SAAoB;AACpBA,EAAAA,kBAAA,CAAA,KAAA,CAAA,GAAA,WAAiB;AACjBA,EAAAA,kBAAA,CAAA,WAAA,CAAA,GAAA,UAAsB;AACtBA,EAAAA,kBAAA,CAAA,aAAA,CAAA,GAAA,WAAyB;AACzBA,EAAAA,kBAAA,CAAA,QAAA,CAAA,GAAA,aAAsB;AACtBA,EAAAA,kBAAA,CAAA,cAAA,CAAA,GAAA,YAA2B;AAC7B,CAAC,EAPWA,0BAAkB,KAAlBA,0BAAkB,GAAA,EAAA,CAAA,CAAA;AA4C9B,SAASC,WAAWA,CAACC,IAAe,EAAA;AAClC,EAAA,QAAQA,IAAI;AACV,IAAA,KAAK,SAAS;AACZ,MAAA,OAAO,UAAU;AACnB,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,SAAS;AAClB,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,UAAU;AACnB,IAAA;AACE,MAAA,OAAOA,IAAI;AACf;AACF;AAEA;;AAEG;AACW,SAAUC,KAAKA,CAAC;EAC5BC,MAAM;EACNC,SAAS;EACTC,IAAI;EACJC,eAAe;EACfC,SAAS;EACTC,OAAO;EACPC,KAAK;AACLR,EAAAA,IAAI,GAAG,SAAS;EAChBS,KAAK;EACLC,QAAQ;EACRC,IAAI;AACJC,EAAAA;AAAW,CACA,EAAA;AACXC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIJ,KAAK,KAAKK,SAAS,EAAE;MACvBC,mCAAiB,CACf,8EAA8E,CAC/E;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;AAEXI,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,QAAQ,KAAKI,SAAS,EAAE;MAC1BC,mCAAiB,CACf,4EAA4E,CAC7E;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACL,QAAQ,CAAC,CAAC;AAEdG,EAAAA,eAAS,CAAC,MAAK;IACb,IAAID,WAAW,KAAKE,SAAS,EAAE;MAC7BC,mCAAiB,CACf,iFAAiF,CAClF;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACH,WAAW,CAAC,CAAC;AAEjBC,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIF,IAAI,KAAKG,SAAS,EAAE;MACtBC,mCAAiB,CAAC,0EAA0E,CAAC;AAC/F,IAAA;AACF,EAAA,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;AAEV,EAAA,MAAMK,YAAY,GAAGjB,WAAW,CAACC,IAAI,CAAC;AACtCa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIG,YAAY,KAAKhB,IAAI,EAAE;AACzBe,MAAAA,mCAAiB,CACf,CAAA,gCAAA,EAAmCf,IAAI,CAAA,yCAAA,EAA4CgB,YAAY,YAAY,CAC5G;AACH,IAAA;AACF,EAAA,CAAC,EAAE,CAACA,YAAY,EAAEhB,IAAI,CAAC,CAAC;EAExB,MAAM,CAACiB,UAAU,EAAEC,aAAa,CAAC,GAAGC,cAAQ,EAAW;EAEvD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGF,cAAQ,CAAU,KAAK,CAAC;AACpEN,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMS,SAAS,GAAGC,UAAU,CAAC,MAAK;MAChCF,iBAAiB,CAAC,IAAI,CAAC;IACzB,CAAC,EAAEG,kCAAwB,CAAC;AAE5B,IAAA,OAAO,MAAMC,YAAY,CAACH,SAAS,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;AAEN,EAAA,MAAMI,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC;AAE5D;;;AAGG;AACH,EAAA,MAAMC,kBAAkB,GAAGR,cAAc,GAAGN,SAAS,GAAG,EAAE;AAE1D,EAAA,oBACEe,cAAA,CAAA,KAAA,EAAA;IACEC,IAAI,EAAEd,YAAY,KAAKe,mBAAS,CAACC,QAAQ,GAAG,OAAO,GAAG,QAAS;AAC/D7B,IAAAA,SAAS,EAAC,uBAAuB;AAAAO,IAAAA,QAAA,eAEjCuB,eAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAab,cAAc,GAAGN,SAAS,GAAG,MAAO;AACjDX,MAAAA,SAAS,EAAE+B,SAAI,CACb,cAAc,EACd,CAAA,MAAA,EAASlB,YAAY,CAAA,CAAE,EACvBP,KAAK,IAAI,IAAI,IAAI0B,oBAAoB,CAAC1B,KAAK,CAAC,EAC5CN,SAAS,CACT;AACF,MAAA,aAAA,EAAY,OAAO;AACnBiC,MAAAA,YAAY,EAAEA,MAAMlB,aAAa,CAAC,IAAI,CAAE;MACxCmB,UAAU,EAAGC,KAAK,IAAI;AACpB,QAAA,IACErB,UAAU,IACVf,MAAM,EAAEqC,IAAI;AACZ;QACAD,KAAK,CAACE,MAAM,YAAYC,IAAI,IAC5Bf,oBAAoB,CAACgB,OAAO,IAC5B,CAAChB,oBAAoB,CAACgB,OAAO,CAACC,QAAQ,CAACL,KAAK,CAACE,MAAM,CAAC,EACpD;AACA,UAAA,IAAItC,MAAM,CAACsC,MAAM,KAAK,QAAQ,EAAE;YAC9BI,MAAM,CAACC,GAAG,EAAEC,IAAI,CAAC5C,MAAM,CAACqC,IAAI,CAAC;AAC/B,UAAA,CAAC,MAAM;YACLK,MAAM,CAACC,GAAG,EAAEE,QAAQ,CAACC,MAAM,CAAC9C,MAAM,CAACqC,IAAI,CAAC;AAC1C,UAAA;AACF,QAAA;QACArB,aAAa,CAAC,KAAK,CAAC;MACtB,CAAE;AACF+B,MAAAA,WAAW,EAAEA,MAAM/B,aAAa,CAAC,KAAK,CAAE;AAAAR,MAAAA,QAAA,gBAExCmB,cAAA,CAAA,KAAA,EAAA;AAAK1B,QAAAA,SAAS,EAAC,aAAa;AAAAO,QAAAA,QAAA,EACzBN,IAAI,iBAAIyB,cAAA,CAACqB,kBAAU,EAAA;AAACvC,UAAAA,IAAI,EAAE,EAAG;AAACwC,UAAAA,SAAS,EAAEnC,YAAa;AAACoC,UAAAA,SAAS,EAAE/C;SAAgB;OAChF,CACL,eAAAwB,cAAA,CAAA,KAAA,EAAA;QAAK1B,SAAS,EAAE+B,SAAI,CAAC,gBAAgB,EAAE,QAAQ,EAAE,aAAa,CAAE;AAAAxB,QAAAA,QAAA,eAC9DuB,eAAA,CAAA,KAAA,EAAA;AAAK9B,UAAAA,SAAS,EAAC,gBAAgB;AAAAO,UAAAA,QAAA,gBAC7BuB,eAAA,CAAA,KAAA,EAAA;AAAAvB,YAAAA,QAAA,EAAA,CACGF,KAAK,iBACJqB,cAAA,CAACwB,aAAK,EAAA;AAAClD,cAAAA,SAAS,EAAC,OAAO;cAACH,IAAI,EAAEsD,qBAAU,CAACC,UAAW;AAAA7C,cAAAA,QAAA,EAClDF;AAAK,aACD,CACR,eACDqB,cAAA,CAAC2B,YAAI,EAAA;AAACC,cAAAA,EAAE,EAAC,MAAM;AAACtD,cAAAA,SAAS,EAAC,SAAS;cAACH,IAAI,EAAEsD,qBAAU,CAACI,UAAW;AAAAhD,cAAAA,QAAA,EAC7DA,QAAQ,iBAAImB,cAAA,CAAC8B,sBAAc,EAAA;AAAAjD,gBAAAA,QAAA,EAAEH;eAAwB;AAAC,aACnD,CACR;AAAA,WAAK,CACL,EAACL,MAAM,KACJ,MAAM,IAAIA,MAAM,IAAI,CAACA,MAAM,CAAC0D,QAAQ,gBACnC/B,cAAA,CAACgC,YAAI,EAAA;YACHtB,IAAI,EAAErC,MAAM,CAACqC,IAAK;YAClB,YAAA,EAAYrC,MAAM,CAAC,YAAY,CAAE;YACjCsC,MAAM,EAAEtC,MAAM,CAACsC,MAAO;YACtBxC,IAAI,EAAEsD,qBAAU,CAACQ,UAAW;AAC5B3D,YAAAA,SAAS,EAAC,eAAe;AACzB4D,YAAAA,QAAQ,EAAEnC,kBAAmB;YAC7BoC,OAAO,EAAE9D,MAAM,CAAC8D,OAAQ;YAAAtD,QAAA,EAEvBR,MAAM,CAAC+D;AAAI,WACR,CAAC,gBAEPpC,cAAA,CAACqC,uBAAM,EAAA;YACLC,EAAE,EAAA,IAAA;AACFV,YAAAA,EAAE,EAAEvD,MAAM,CAACqC,IAAI,GAAG,GAAG,GAAG,QAAS;YACjCA,IAAI,EAAErC,MAAM,CAACqC,IAAK;YAClBC,MAAM,EAAEtC,MAAM,CAACsC,MAAO;AACtB7B,YAAAA,IAAI,EAAC,IAAI;AACTwC,YAAAA,SAAS,EAAC,SAAS;YACnB,YAAA,EAAYjD,MAAM,CAAC,YAAY,CAAE;AACjCkE,YAAAA,QAAQ,EAAC,mBAAmB;AAC5BjE,YAAAA,SAAS,EAAC,eAAe;AACzB4D,YAAAA,QAAQ,EAAEnC,kBAAmB;YAC7BoC,OAAO,EAAE9D,MAAM,CAAC8D,OAAQ;YAAAtD,QAAA,EAEvBR,MAAM,CAAC+D;AAAI,WACN,CACT,CAAC;SACD;AACP,OAAK,CACL,EAAC3D,SAAS,iBACRuB,cAAA,CAAA,KAAA,EAAA;AAAK1B,QAAAA,SAAS,EAAC,cAAc;QAAAO,QAAA,eAC3BmB,cAAA,CAACwC,uBAAW,EAAA;AACVC,UAAAA,GAAG,EAAE5C,oBAAqB;AAC1Bf,UAAAA,IAAI,EAAC,IAAI;AACToD,UAAAA,QAAQ,EAAEnC,kBAAmB;AAC7BoC,UAAAA,OAAO,EAAE1D;SAAU;AAEvB,OAAK,CACN;KACE;AACP,GAAK,CAAC;AAEV;AAEA,SAAS6B,oBAAoBA,CAAC1B,KAA8B,EAAA;AAC1D,EAAA,QAAQA,KAAK;AACX,IAAA,KAAK,aAAa;AAChB,MAAA,OAAO,iCAAiC;AAC1C,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,+BAA+B;AACxC,IAAA,KAAK,YAAY;AACf,MAAA,OAAO,gCAAgC;AACzC,IAAA,KAAK,WAAW;AACd,MAAA,OAAO,oBAAoB;AAC7B,IAAA,KAAK,UAAU;AACb,MAAA,OAAO,mBAAmB;AAC5B,IAAA,KAAK,SAAS;AACd,IAAA;AACE,MAAA,OAAO,OAAO;AAClB;AACF;;;;"}
@@ -153,7 +153,7 @@ function Alert({
153
153
  children: message
154
154
  })
155
155
  })]
156
- }), action && ('href' in action ? /*#__PURE__*/jsx(Link, {
156
+ }), action && ('href' in action && !action.asButton ? /*#__PURE__*/jsx(Link, {
157
157
  href: action.href,
158
158
  "aria-label": action['aria-label'],
159
159
  target: action.target,
@@ -164,6 +164,9 @@ function Alert({
164
164
  children: action.text
165
165
  }) : /*#__PURE__*/jsx(Button, {
166
166
  v2: true,
167
+ as: action.href ? 'a' : 'button',
168
+ href: action.href,
169
+ target: action.target,
167
170
  size: "sm",
168
171
  sentiment: "default",
169
172
  "aria-label": action['aria-label'],
@@ -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 Status,\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 Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 /**\n * The type dictates which icon and colour will be used\n * @default 'neutral'\n */\n type?: AlertType;\n /** @deprecated Use `InlinePrompt` 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\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 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 ('href' in action ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_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","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"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 Status,\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 Button from '../button';\nimport Link from '../link';\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertAction = {\n 'aria-label'?: string;\n href?: string;\n target?: string;\n text: React.ReactNode;\n onClick?: () => void;\n /** Render the action as a Button styled as a link (`<a>`) instead of a Link component. Requires `href`. */\n asButton?: boolean;\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 // remove when all instances of Sentiment.PENDING have been updated to Status.PENDING\n | Sentiment.PENDING\n | Status.PENDING}`;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\n */\nexport type AlertType = AlertTypeResolved | AlertTypeDeprecated;\n\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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\n/**\n * @deprecated `Alert` component is being replaced by the `InfoPrompt` component\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 /**\n * The type dictates which icon and colour will be used\n * @default 'neutral'\n */\n type?: AlertType;\n /** @deprecated Use `InlinePrompt` 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\n/**\n * @deprecated Use [`InfoPrompt`](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) component instead.\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 'InlinePrompt' 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 const timeoutId = setTimeout(() => {\n setShouldAnnounce(true);\n }, WDS_LIVE_REGION_DELAY_MS);\n\n return () => clearTimeout(timeoutId);\n }, []);\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n\n /**\n * All focusable elements must be disabled until we announce the alert.\n * @see https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI\n */\n const accessibleTabIndex = shouldAnnounce ? undefined : -1;\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 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 ('href' in action && !action.asButton ? (\n <Link\n href={action.href}\n aria-label={action['aria-label']}\n target={action.target}\n type={Typography.LINK_LARGE}\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n ) : (\n <Button\n v2\n as={action.href ? 'a' : 'button'}\n href={action.href}\n target={action.target}\n size=\"sm\"\n sentiment=\"default\"\n aria-label={action['aria-label']}\n priority=\"secondary-neutral\"\n className=\"alert__action\"\n tabIndex={accessibleTabIndex}\n onClick={action.onClick}\n >\n {action.text}\n </Button>\n ))}\n </div>\n </div>\n {onDismiss && (\n <div className=\"alert__close\">\n <CloseButton\n ref={closeButtonReference}\n size=\"xs\"\n tabIndex={accessibleTabIndex}\n onClick={onDismiss}\n />\n </div>\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","timeoutId","setTimeout","WDS_LIVE_REGION_DELAY_MS","clearTimeout","closeButtonReference","useRef","accessibleTabIndex","_jsx","role","Sentiment","NEGATIVE","_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","asButton","Link","LINK_LARGE","tabIndex","onClick","text","Button","v2","priority","CloseButton","ref"],"mappings":"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"}
@@ -81,10 +81,12 @@ function CriticalCommsBanner({
81
81
  children: /*#__PURE__*/jsxRuntime.jsx(Alert.default, {
82
82
  title: title,
83
83
  message: subtitle,
84
- action: {
85
- onClick: action?.onClick,
86
- target: action?.href,
87
- text: action?.label
84
+ action: action && {
85
+ onClick: action.onClick,
86
+ href: action.href,
87
+ target: action.target,
88
+ text: action.label,
89
+ asButton: true
88
90
  },
89
91
  className: className,
90
92
  type: sentiment$1,
@@ -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 { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,WAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.js","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n target?: HTMLAnchorElement['target'];\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={\n action && {\n onClick: action.onClick,\n href: action.href,\n target: action.target,\n text: action.label,\n asButton: true,\n }\n }\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","asButton","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,cAAA,CAACC,wBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,mBAAS,CAACC,QAAQ,gBACjBP,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACO,OAAO,gBAChBb,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACY,WAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,mBAAS,CAACQ,OAAO,gBAChBd,cAAA,CAACQ,cAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,mBAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,cAAA,CAACe,qBAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;aACNtB,WAAS,GAAGS,mBAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,cAAA,CAACC,wBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,WAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,cAAA,CAACqB,aAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBC,QAAAA,QAAQ,EAAE;OAEb;AACDlB,MAAAA,SAAS,EAAEA,SAAU;AACrBmB,MAAAA,IAAI,EAAEhC,WAAU;MAChBiC,IAAI,EAAEzB,eAAe,CAACR,WAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
@@ -77,10 +77,12 @@ function CriticalCommsBanner({
77
77
  children: /*#__PURE__*/jsx(Alert$1, {
78
78
  title: title,
79
79
  message: subtitle,
80
- action: {
81
- onClick: action?.onClick,
82
- target: action?.href,
83
- text: action?.label
80
+ action: action && {
81
+ onClick: action.onClick,
82
+ href: action.href,
83
+ target: action.target,
84
+ text: action.label,
85
+ asButton: true
84
86
  },
85
87
  className: className,
86
88
  type: sentiment,
@@ -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 { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={{ onClick: action?.onClick, target: action?.href, text: action?.label }}\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","target","href","text","label","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;AAClBC,MAAAA,MAAM,EAAE;QAAEI,OAAO,EAAEJ,MAAM,EAAEI,OAAO;QAAEC,MAAM,EAAEL,MAAM,EAAEM,IAAI;QAAEC,IAAI,EAAEP,MAAM,EAAEQ;OAAQ;AAChFjB,MAAAA,SAAS,EAAEA,SAAU;AACrBkB,MAAAA,IAAI,EAAE/B,SAAU;MAChBgC,IAAI,EAAExB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}
1
+ {"version":3,"file":"CriticalCommsBanner.mjs","sources":["../../src/criticalBanner/CriticalCommsBanner.tsx"],"sourcesContent":["import { Alert as AlertIcon, ClockBorderless as ClockIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { PropsWithChildren } from 'react';\n\nimport Alert from '../alert';\nimport { Sentiment } from '../common';\nimport Circle, { CircleProps } from '../common/circle';\nimport SentimentSurface from '../sentimentSurface';\n\nexport type CriticalCommsBannerSentiment =\n | `${Sentiment.WARNING}`\n | `${Sentiment.NEGATIVE}`\n | `${Sentiment.NEUTRAL}`;\n\nexport type CriticalCommsBannerProps = {\n title: string;\n subtitle?: string;\n action?: {\n label: string;\n href?: string;\n target?: HTMLAnchorElement['target'];\n onClick?: () => void;\n };\n sentiment?: CriticalCommsBannerSentiment;\n className?: string;\n};\n\nconst makeSurface = (sentiment: CriticalCommsBannerSentiment) => {\n const Surface = (props: PropsWithChildren<Pick<CircleProps, 'className'>>) => (\n <SentimentSurface as=\"span\" emphasis=\"elevated\" sentiment={sentiment} {...props} />\n );\n Surface.displayName = `CriticalCommsSurface(${sentiment})`;\n return Surface;\n};\n\nconst iconBySentiment: Record<CriticalCommsBannerSentiment, React.ReactNode> = {\n [Sentiment.NEGATIVE]: (\n <Circle as={makeSurface(Sentiment.NEGATIVE)} size={32} className=\"status-circle negative\">\n <AlertIcon className=\"status-icon light\" />\n </Circle>\n ),\n [Sentiment.WARNING]: (\n <Circle as={makeSurface(Sentiment.WARNING)} size={32} className=\"status-circle warning\">\n <AlertIcon className=\"status-icon dark\" />\n </Circle>\n ),\n [Sentiment.NEUTRAL]: (\n <Circle as={makeSurface(Sentiment.NEUTRAL)} size={32} className=\"status-circle neutral\">\n <ClockIcon className=\"status-icon dark\" />\n </Circle>\n ),\n};\n\nfunction CriticalCommsBanner({\n title,\n subtitle,\n action,\n sentiment = Sentiment.NEGATIVE,\n className,\n}: CriticalCommsBannerProps) {\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis=\"elevated\"\n className={clsx('critical-comms', className)}\n >\n <Alert\n title={title}\n message={subtitle}\n action={\n action && {\n onClick: action.onClick,\n href: action.href,\n target: action.target,\n text: action.label,\n asButton: true,\n }\n }\n className={className}\n type={sentiment}\n icon={iconBySentiment[sentiment]}\n />\n </SentimentSurface>\n );\n}\n\nexport default CriticalCommsBanner;\n"],"names":["makeSurface","sentiment","Surface","props","_jsx","SentimentSurface","as","emphasis","displayName","iconBySentiment","Sentiment","NEGATIVE","Circle","size","className","children","AlertIcon","WARNING","NEUTRAL","ClockIcon","CriticalCommsBanner","title","subtitle","action","clsx","Alert","message","onClick","href","target","text","label","asButton","type","icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAMA,WAAW,GAAIC,SAAuC,IAAI;AAC9D,EAAA,MAAMC,OAAO,GAAIC,KAAwD,iBACvEC,GAAA,CAACC,gBAAgB,EAAA;AAACC,IAAAA,EAAE,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAC,UAAU;AAACN,IAAAA,SAAS,EAAEA,SAAU;IAAA,GAAKE;AAAK,GAAC,CACjF;AACDD,EAAAA,OAAO,CAACM,WAAW,GAAG,CAAA,qBAAA,EAAwBP,SAAS,CAAA,CAAA,CAAG;AAC1D,EAAA,OAAOC,OAAO;AAChB,CAAC;AAED,MAAMO,eAAe,GAA0D;AAC7E,EAAA,CAACC,SAAS,CAACC,QAAQ,gBACjBP,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACC,QAAQ,CAAE;AAACE,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,wBAAwB;IAAAC,QAAA,eACvFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAmB;AAC1C,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACO,OAAO,gBAChBb,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACO,OAAO,CAAE;AAACJ,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACY,KAAS,EAAA;AAACF,MAAAA,SAAS,EAAC;KAAkB;AACzC,GAAQ,CACT;AACD,EAAA,CAACJ,SAAS,CAACQ,OAAO,gBAChBd,GAAA,CAACQ,MAAM,EAAA;AAACN,IAAAA,EAAE,EAAEN,WAAW,CAACU,SAAS,CAACQ,OAAO,CAAE;AAACL,IAAAA,IAAI,EAAE,EAAG;AAACC,IAAAA,SAAS,EAAC,uBAAuB;IAAAC,QAAA,eACrFX,GAAA,CAACe,eAAS,EAAA;AAACL,MAAAA,SAAS,EAAC;KAAkB;GACjC;CAEX;AAED,SAASM,mBAAmBA,CAAC;EAC3BC,KAAK;EACLC,QAAQ;EACRC,MAAM;EACNtB,SAAS,GAAGS,SAAS,CAACC,QAAQ;AAC9BG,EAAAA;AAAS,CACgB,EAAA;EACzB,oBACEV,GAAA,CAACC,gBAAgB,EAAA;AACfJ,IAAAA,SAAS,EAAEA,SAAU;AACrBM,IAAAA,QAAQ,EAAC,UAAU;AACnBO,IAAAA,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAEV,SAAS,CAAE;IAAAC,QAAA,eAE7CX,GAAA,CAACqB,OAAK,EAAA;AACJJ,MAAAA,KAAK,EAAEA,KAAM;AACbK,MAAAA,OAAO,EAAEJ,QAAS;MAClBC,MAAM,EACJA,MAAM,IAAI;QACRI,OAAO,EAAEJ,MAAM,CAACI,OAAO;QACvBC,IAAI,EAAEL,MAAM,CAACK,IAAI;QACjBC,MAAM,EAAEN,MAAM,CAACM,MAAM;QACrBC,IAAI,EAAEP,MAAM,CAACQ,KAAK;AAClBC,QAAAA,QAAQ,EAAE;OAEb;AACDlB,MAAAA,SAAS,EAAEA,SAAU;AACrBmB,MAAAA,IAAI,EAAEhC,SAAU;MAChBiC,IAAI,EAAEzB,eAAe,CAACR,SAAS;KAAE;AAErC,GAAkB,CAAC;AAEvB;;;;"}