@transferwise/components 46.48.0 → 46.50.0

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 (181) hide show
  1. package/build/actionOption/ActionOption.js +4 -2
  2. package/build/actionOption/ActionOption.js.map +1 -1
  3. package/build/actionOption/ActionOption.mjs +4 -2
  4. package/build/actionOption/ActionOption.mjs.map +1 -1
  5. package/build/avatar/Avatar.js +3 -1
  6. package/build/avatar/Avatar.js.map +1 -1
  7. package/build/avatar/Avatar.mjs +3 -1
  8. package/build/avatar/Avatar.mjs.map +1 -1
  9. package/build/avatarWrapper/AvatarWrapper.js +16 -4
  10. package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
  11. package/build/avatarWrapper/AvatarWrapper.mjs +16 -4
  12. package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
  13. package/build/badge/Badge.js +2 -0
  14. package/build/badge/Badge.js.map +1 -1
  15. package/build/badge/Badge.mjs +2 -0
  16. package/build/badge/Badge.mjs.map +1 -1
  17. package/build/card/Card.js.map +1 -1
  18. package/build/card/Card.mjs.map +1 -1
  19. package/build/common/bottomSheet/BottomSheet.js +3 -0
  20. package/build/common/bottomSheet/BottomSheet.js.map +1 -1
  21. package/build/common/bottomSheet/BottomSheet.mjs +4 -1
  22. package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
  23. package/build/common/panel/Panel.js +3 -0
  24. package/build/common/panel/Panel.js.map +1 -1
  25. package/build/common/panel/Panel.mjs +4 -1
  26. package/build/common/panel/Panel.mjs.map +1 -1
  27. package/build/dateLookup/DateLookup.js +21 -17
  28. package/build/dateLookup/DateLookup.js.map +1 -1
  29. package/build/dateLookup/DateLookup.mjs +21 -17
  30. package/build/dateLookup/DateLookup.mjs.map +1 -1
  31. package/build/dateLookup/dateTrigger/DateTrigger.js +6 -0
  32. package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
  33. package/build/dateLookup/dateTrigger/DateTrigger.mjs +6 -0
  34. package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
  35. package/build/drawer/Drawer.js +3 -0
  36. package/build/drawer/Drawer.js.map +1 -1
  37. package/build/drawer/Drawer.mjs +4 -1
  38. package/build/drawer/Drawer.mjs.map +1 -1
  39. package/build/i18n/de.json +2 -0
  40. package/build/i18n/de.json.js +2 -0
  41. package/build/i18n/de.json.js.map +1 -1
  42. package/build/i18n/de.json.mjs +2 -0
  43. package/build/i18n/de.json.mjs.map +1 -1
  44. package/build/i18n/es.json +2 -0
  45. package/build/i18n/es.json.js +2 -0
  46. package/build/i18n/es.json.js.map +1 -1
  47. package/build/i18n/es.json.mjs +2 -0
  48. package/build/i18n/es.json.mjs.map +1 -1
  49. package/build/i18n/fr.json +2 -0
  50. package/build/i18n/fr.json.js +2 -0
  51. package/build/i18n/fr.json.js.map +1 -1
  52. package/build/i18n/fr.json.mjs +2 -0
  53. package/build/i18n/fr.json.mjs.map +1 -1
  54. package/build/i18n/hu.json +2 -0
  55. package/build/i18n/hu.json.js +2 -0
  56. package/build/i18n/hu.json.js.map +1 -1
  57. package/build/i18n/hu.json.mjs +2 -0
  58. package/build/i18n/hu.json.mjs.map +1 -1
  59. package/build/i18n/id.json +2 -0
  60. package/build/i18n/id.json.js +2 -0
  61. package/build/i18n/id.json.js.map +1 -1
  62. package/build/i18n/id.json.mjs +2 -0
  63. package/build/i18n/id.json.mjs.map +1 -1
  64. package/build/i18n/it.json +2 -0
  65. package/build/i18n/it.json.js +2 -0
  66. package/build/i18n/it.json.js.map +1 -1
  67. package/build/i18n/it.json.mjs +2 -0
  68. package/build/i18n/it.json.mjs.map +1 -1
  69. package/build/i18n/ja.json +2 -0
  70. package/build/i18n/ja.json.js +2 -0
  71. package/build/i18n/ja.json.js.map +1 -1
  72. package/build/i18n/ja.json.mjs +2 -0
  73. package/build/i18n/ja.json.mjs.map +1 -1
  74. package/build/i18n/pl.json +2 -0
  75. package/build/i18n/pl.json.js +2 -0
  76. package/build/i18n/pl.json.js.map +1 -1
  77. package/build/i18n/pl.json.mjs +2 -0
  78. package/build/i18n/pl.json.mjs.map +1 -1
  79. package/build/i18n/ro.json +2 -0
  80. package/build/i18n/ro.json.js +2 -0
  81. package/build/i18n/ro.json.js.map +1 -1
  82. package/build/i18n/ro.json.mjs +2 -0
  83. package/build/i18n/ro.json.mjs.map +1 -1
  84. package/build/i18n/ru.json +2 -0
  85. package/build/i18n/ru.json.js +2 -0
  86. package/build/i18n/ru.json.js.map +1 -1
  87. package/build/i18n/ru.json.mjs +2 -0
  88. package/build/i18n/ru.json.mjs.map +1 -1
  89. package/build/i18n/th.json +2 -0
  90. package/build/i18n/th.json.js +2 -0
  91. package/build/i18n/th.json.js.map +1 -1
  92. package/build/i18n/th.json.mjs +2 -0
  93. package/build/i18n/th.json.mjs.map +1 -1
  94. package/build/i18n/tr.json +2 -0
  95. package/build/i18n/tr.json.js +2 -0
  96. package/build/i18n/tr.json.js.map +1 -1
  97. package/build/i18n/tr.json.mjs +2 -0
  98. package/build/i18n/tr.json.mjs.map +1 -1
  99. package/build/main.css +28 -20
  100. package/build/modal/Modal.js +3 -0
  101. package/build/modal/Modal.js.map +1 -1
  102. package/build/modal/Modal.mjs +4 -1
  103. package/build/modal/Modal.mjs.map +1 -1
  104. package/build/provider/overlay/OverlayIdProvider.js +20 -0
  105. package/build/provider/overlay/OverlayIdProvider.js.map +1 -0
  106. package/build/provider/overlay/OverlayIdProvider.mjs +17 -0
  107. package/build/provider/overlay/OverlayIdProvider.mjs.map +1 -0
  108. package/build/styles/main.css +28 -20
  109. package/build/styles/uploadInput/uploadButton/UploadButton.css +5 -0
  110. package/build/styles/uploadInput/uploadItem/UploadItem.css +23 -20
  111. package/build/types/actionOption/ActionOption.d.ts +2 -1
  112. package/build/types/actionOption/ActionOption.d.ts.map +1 -1
  113. package/build/types/avatar/Avatar.d.ts +1 -0
  114. package/build/types/avatar/Avatar.d.ts.map +1 -1
  115. package/build/types/avatarWrapper/AvatarWrapper.d.ts +2 -1
  116. package/build/types/avatarWrapper/AvatarWrapper.d.ts.map +1 -1
  117. package/build/types/badge/Badge.d.ts +2 -1
  118. package/build/types/badge/Badge.d.ts.map +1 -1
  119. package/build/types/card/Card.d.ts +4 -0
  120. package/build/types/card/Card.d.ts.map +1 -1
  121. package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
  122. package/build/types/common/panel/Panel.d.ts.map +1 -1
  123. package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
  124. package/build/types/dateLookup/dateTrigger/DateTrigger.d.ts.map +1 -1
  125. package/build/types/drawer/Drawer.d.ts.map +1 -1
  126. package/build/types/modal/Modal.d.ts.map +1 -1
  127. package/build/types/provider/overlay/OverlayIdProvider.d.ts +7 -0
  128. package/build/types/provider/overlay/OverlayIdProvider.d.ts.map +1 -0
  129. package/build/types/uploadInput/uploadItem/UploadItem.d.ts.map +1 -1
  130. package/build/types/uploadInput/uploadItem/{UploadItemBody.d.ts → UploadItemLink.d.ts} +2 -2
  131. package/build/types/uploadInput/uploadItem/UploadItemLink.d.ts.map +1 -0
  132. package/build/uploadInput/uploadItem/UploadItem.js +14 -11
  133. package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
  134. package/build/uploadInput/uploadItem/UploadItem.mjs +15 -12
  135. package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
  136. package/build/uploadInput/uploadItem/UploadItemLink.js +32 -0
  137. package/build/uploadInput/uploadItem/UploadItemLink.js.map +1 -0
  138. package/build/uploadInput/uploadItem/{UploadItemBody.mjs → UploadItemLink.mjs} +5 -4
  139. package/build/uploadInput/uploadItem/UploadItemLink.mjs.map +1 -0
  140. package/package.json +19 -19
  141. package/src/actionOption/ActionOption.tsx +3 -0
  142. package/src/avatar/Avatar.spec.tsx +10 -0
  143. package/src/avatar/Avatar.tsx +3 -0
  144. package/src/avatarWrapper/AvatarWrapper.spec.tsx +15 -4
  145. package/src/avatarWrapper/AvatarWrapper.story.tsx +2 -0
  146. package/src/avatarWrapper/AvatarWrapper.tsx +26 -7
  147. package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap +0 -64
  148. package/src/badge/Badge.spec.tsx +8 -0
  149. package/src/badge/Badge.tsx +3 -1
  150. package/src/card/Card.tsx +4 -0
  151. package/src/common/bottomSheet/BottomSheet.tsx +12 -1
  152. package/src/common/panel/Panel.tsx +5 -0
  153. package/src/dateLookup/DateLookup.tsx +22 -19
  154. package/src/dateLookup/dateTrigger/DateTrigger.spec.js +1 -0
  155. package/src/dateLookup/dateTrigger/DateTrigger.tsx +7 -0
  156. package/src/drawer/Drawer.tsx +5 -1
  157. package/src/i18n/de.json +2 -0
  158. package/src/i18n/es.json +2 -0
  159. package/src/i18n/fr.json +2 -0
  160. package/src/i18n/hu.json +2 -0
  161. package/src/i18n/id.json +2 -0
  162. package/src/i18n/it.json +2 -0
  163. package/src/i18n/ja.json +2 -0
  164. package/src/i18n/pl.json +2 -0
  165. package/src/i18n/ro.json +2 -0
  166. package/src/i18n/ru.json +2 -0
  167. package/src/i18n/th.json +2 -0
  168. package/src/i18n/tr.json +2 -0
  169. package/src/main.css +28 -20
  170. package/src/modal/Modal.tsx +5 -1
  171. package/src/provider/overlay/OverlayIdProvider.tsx +15 -0
  172. package/src/uploadInput/uploadButton/UploadButton.css +5 -0
  173. package/src/uploadInput/uploadButton/UploadButton.less +6 -0
  174. package/src/uploadInput/uploadItem/UploadItem.css +23 -20
  175. package/src/uploadInput/uploadItem/UploadItem.less +16 -12
  176. package/src/uploadInput/uploadItem/UploadItem.tsx +12 -7
  177. package/src/uploadInput/uploadItem/{UploadItemBody.tsx → UploadItemLink.tsx} +6 -2
  178. package/build/types/uploadInput/uploadItem/UploadItemBody.d.ts.map +0 -1
  179. package/build/uploadInput/uploadItem/UploadItemBody.js +0 -27
  180. package/build/uploadInput/uploadItem/UploadItemBody.js.map +0 -1
  181. package/build/uploadInput/uploadItem/UploadItemBody.mjs.map +0 -1
package/build/uploadInput/uploadItem/UploadItem.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemBody } from './UploadItemBody';\n\nexport type UploadItemProps = JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <StatusIcon size={Size.SMALL} sentiment={Sentiment.NEGATIVE} />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <StatusIcon size={Size.SMALL} sentiment={Sentiment.POSITIVE} />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={classNames('np-upload-item', { 'np-upload-item__link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemBody\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemBody>\n {canDelete && (\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","StatusIcon","size","Size","SMALL","sentiment","Sentiment","NEGATIVE","processIndicator","PROCESSING","PENDING","ProcessIndicator","EXTRA_SMALL","DONE","POSITIVE","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","className","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","classNames","uploadItem","_jsxs","UploadItemBody","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
1
+ {"version":3,"file":"UploadItem.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItem.tsx"],"sourcesContent":["import { Bin, CheckCircleFill, CrossCircleFill } from '@transferwise/icons';\nimport classNames from 'classnames';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../../body';\nimport { Size, Status, Typography, Sentiment } from '../../common';\nimport ProcessIndicator from '../../processIndicator/ProcessIndicator';\nimport StatusIcon from '../../statusIcon/StatusIcon';\nimport { UploadedFile, UploadError } from '../types';\n\nimport MESSAGES from './UploadItem.messages';\nimport { UploadItemLink } from './UploadItemLink';\n\nexport type UploadItemProps = JSX.IntrinsicAttributes & {\n file: UploadedFile;\n /**\n * Is this Item part of a multiple- or single-file UploadInput\n */\n singleFileUpload: boolean;\n canDelete: boolean;\n onDelete: () => void;\n\n /**\n * Callback to be called when the file link is clicked.\n * When provided, you need to manually trigger actions to load/download the file.\n *\n * @param file\n */\n onDownload?: (file: UploadedFile) => void;\n};\n\nexport enum TEST_IDS {\n uploadItem = 'uploadItem',\n mediaBody = 'mediaBody',\n}\n\nconst UploadItem = ({\n file,\n canDelete,\n onDelete,\n onDownload,\n singleFileUpload,\n}: UploadItemProps) => {\n const { formatMessage } = useIntl();\n const { status, filename, error, errors, url } = file;\n\n const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!url;\n\n /**\n * We're temporarily reverting to the regular icon components,\n * until the StatusIcon receives 24px sizing. Some misalignment\n * to be expected.\n */\n const getIcon = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return <CrossCircleFill size={24} className=\"emphasis--negative\" />;\n }\n\n let processIndicator: React.ReactNode;\n\n switch (status) {\n case Status.PROCESSING:\n case Status.PENDING:\n processIndicator = <ProcessIndicator size={Size.EXTRA_SMALL} status={Status.PROCESSING} />;\n break;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n processIndicator = <CheckCircleFill size={24} className=\"emphasis--positive\" />;\n }\n\n return processIndicator;\n };\n\n const getErrorMessage = (error?: UploadError) =>\n typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);\n\n const getMultipleErrors = (errors?: UploadError[]) => {\n if (!errors?.length) {\n return null;\n }\n\n if (errors?.length === 1) {\n return getErrorMessage(errors[0]);\n }\n\n return (\n <ul className=\"np-upload-input-errors m-b-0\">\n {errors.map((error, index) => {\n // eslint-disable-next-line react/no-array-index-key\n return <li key={index}>{getErrorMessage(error)}</li>;\n })}\n </ul>\n );\n };\n\n const getDescription = () => {\n if (error || errors?.length || status === Status.FAILED) {\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-negative\">\n {errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)}\n </Body>\n );\n }\n\n switch (status) {\n case Status.PENDING:\n return <Body type={Typography.BODY_DEFAULT_BOLD}>{formatMessage(MESSAGES.uploading)}</Body>;\n case Status.PROCESSING:\n return <Body>{formatMessage(MESSAGES.deleting)}</Body>;\n case Status.SUCCEEDED:\n case Status.DONE:\n default:\n return (\n <Body type={Typography.BODY_DEFAULT_BOLD} className=\"text-positive\">\n {formatMessage(MESSAGES.uploaded)}\n </Body>\n );\n }\n };\n\n const getTitle = () => {\n return filename || formatMessage(MESSAGES.uploadedFile);\n };\n\n const onDownloadFile = (event: React.MouseEvent): void => {\n if (onDownload) {\n event.preventDefault();\n onDownload(file);\n }\n };\n\n return (\n <div\n className={classNames('np-upload-item', { 'np-upload-item--link': isSucceeded })}\n data-testid={TEST_IDS.uploadItem}\n >\n <div className=\"np-upload-item__body\">\n <UploadItemLink\n url={isSucceeded ? url : undefined}\n singleFileUpload={singleFileUpload}\n onDownload={onDownloadFile}\n >\n <div className=\"np-upload-button\" aria-live=\"polite\">\n <div className=\"media\">\n <div className=\"np-upload-icon media-left\">{getIcon()}</div>\n <div className=\"media-body text-xs-left\" data-testid={TEST_IDS.mediaBody}>\n <Body className=\"text-word-break d-block text-primary\">{getTitle()}</Body>\n {getDescription()}\n </div>\n </div>\n </div>\n </UploadItemLink>\n {canDelete && (\n <button\n aria-label={formatMessage(MESSAGES.removeFile, { filename })}\n className={classNames('btn', 'np-upload-item__remove-button', 'media-left', {\n 'np-upload-item--single-file': singleFileUpload,\n })}\n type=\"button\"\n onClick={() => onDelete()}\n >\n <Bin size={16} />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default UploadItem;\n"],"names":["TEST_IDS","UploadItem","file","canDelete","onDelete","onDownload","singleFileUpload","formatMessage","useIntl","status","filename","error","errors","url","isSucceeded","Status","SUCCEEDED","undefined","includes","getIcon","length","FAILED","_jsx","CrossCircleFill","size","className","processIndicator","PROCESSING","PENDING","ProcessIndicator","Size","EXTRA_SMALL","DONE","CheckCircleFill","getErrorMessage","message","MESSAGES","uploadingFailed","getMultipleErrors","children","map","index","getDescription","Body","type","Typography","BODY_DEFAULT_BOLD","uploading","deleting","uploaded","getTitle","uploadedFile","onDownloadFile","event","preventDefault","classNames","uploadItem","_jsxs","UploadItemLink","mediaBody","removeFile","onClick","Bin"],"mappings":"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"}
package/build/uploadInput/uploadItem/UploadItemLink.js ADDED
@@ -0,0 +1,32 @@
1
+ 'use strict';
2
+
3
+ var classNames = require('classnames');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+
6
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
7
+
8
+ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
9
+
10
+ const UploadItemLink = ({
11
+ children,
12
+ url,
13
+ onDownload,
14
+ singleFileUpload
15
+ }) => {
16
+ if (!url) {
17
+ return /*#__PURE__*/jsxRuntime.jsx("div", {
18
+ children: children
19
+ });
20
+ }
21
+ return /*#__PURE__*/jsxRuntime.jsx("a", {
22
+ href: url,
23
+ target: "_blank",
24
+ rel: "noopener noreferrer",
25
+ className: classNames__default.default('np-upload-item__link', singleFileUpload ? 'np-upload-item--single-file' : ''),
26
+ onClick: onDownload,
27
+ children: children
28
+ });
29
+ };
30
+
31
+ exports.UploadItemLink = UploadItemLink;
32
+ //# sourceMappingURL=UploadItemLink.js.map
package/build/uploadInput/uploadItem/UploadItemLink.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UploadItemLink.js","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={classnames(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;;;;;;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,cAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,cAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,2BAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
package/build/uploadInput/uploadItem/{UploadItemBody.mjs → UploadItemLink.mjs} RENAMED
@@ -1,6 +1,7 @@
1
+ import classNames from 'classnames';
1
2
  import { jsx } from 'react/jsx-runtime';
2
3
 
3
- const UploadItemBody = ({
4
+ const UploadItemLink = ({
4
5
  children,
5
6
  url,
6
7
  onDownload,
@@ -15,11 +16,11 @@ const UploadItemBody = ({
15
16
  href: url,
16
17
  target: "_blank",
17
18
  rel: "noopener noreferrer",
18
- className: singleFileUpload ? 'np-upload-item--single-file' : 'np-upload-item--link',
19
+ className: classNames('np-upload-item__link', singleFileUpload ? 'np-upload-item--single-file' : ''),
19
20
  onClick: onDownload,
20
21
  children: children
21
22
  });
22
23
  };
23
24
 
24
- export { UploadItemBody };
25
- //# sourceMappingURL=UploadItemBody.mjs.map
25
+ export { UploadItemLink };
26
+ //# sourceMappingURL=UploadItemLink.mjs.map
package/build/uploadInput/uploadItem/UploadItemLink.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"UploadItemLink.mjs","sources":["../../../src/uploadInput/uploadItem/UploadItemLink.tsx"],"sourcesContent":["import { PropsWithChildren, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\ntype UploadItemLinkProps = PropsWithChildren<{\n url?: string;\n onDownload?: (event: MouseEvent) => void;\n singleFileUpload: boolean;\n}>;\n\nexport const UploadItemLink = ({\n children,\n url,\n onDownload,\n singleFileUpload,\n}: UploadItemLinkProps) => {\n if (!url) {\n return <div>{children}</div>;\n }\n\n return (\n <a\n href={url}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={classnames(\n 'np-upload-item__link',\n singleFileUpload ? 'np-upload-item--single-file' : '',\n )}\n onClick={onDownload}\n >\n {children}\n </a>\n );\n};\n"],"names":["UploadItemLink","children","url","onDownload","singleFileUpload","_jsx","href","target","rel","className","classnames","onClick"],"mappings":";;;AASO,MAAMA,cAAc,GAAGA,CAAC;EAC7BC,QAAQ;EACRC,GAAG;EACHC,UAAU;AACVC,EAAAA,gBAAAA;AAAgB,CACI,KAAI;EACxB,IAAI,CAACF,GAAG,EAAE;AACR,IAAA,oBAAOG,GAAA,CAAA,KAAA,EAAA;AAAAJ,MAAAA,QAAA,EAAMA,QAAAA;AAAQ,KAAM,CAAC,CAAA;AAC9B,GAAA;AAEA,EAAA,oBACEI,GAAA,CAAA,GAAA,EAAA;AACEC,IAAAA,IAAI,EAAEJ,GAAI;AACVK,IAAAA,MAAM,EAAC,QAAQ;AACfC,IAAAA,GAAG,EAAC,qBAAqB;IACzBC,SAAS,EAAEC,UAAU,CACnB,sBAAsB,EACtBN,gBAAgB,GAAG,6BAA6B,GAAG,EAAE,CACrD;AACFO,IAAAA,OAAO,EAAER,UAAW;AAAAF,IAAAA,QAAA,EAEnBA,QAAAA;AAAQ,GACR,CAAC,CAAA;AAER;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.48.0",
3
+ "version": "46.50.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -38,9 +38,9 @@
38
38
  "!**/*.tsbuildinfo"
39
39
  ],
40
40
  "devDependencies": {
41
- "@babel/core": "^7.24.7",
41
+ "@babel/core": "^7.24.8",
42
42
  "@babel/plugin-transform-runtime": "^7.24.7",
43
- "@babel/preset-env": "^7.24.7",
43
+ "@babel/preset-env": "^7.24.8",
44
44
  "@babel/preset-react": "^7.24.7",
45
45
  "@babel/preset-typescript": "^7.24.7",
46
46
  "@cfaester/enzyme-adapter-react-18": "0.8.0",
@@ -50,20 +50,20 @@
50
50
  "@rollup/plugin-node-resolve": "^15.2.3",
51
51
  "@rollup/plugin-typescript": "^11.1.6",
52
52
  "@rollup/plugin-url": "^8.0.2",
53
- "@storybook/addon-a11y": "^8.2.1",
54
- "@storybook/addon-actions": "^8.2.1",
55
- "@storybook/addon-essentials": "^8.2.1",
56
- "@storybook/addon-interactions": "^8.2.1",
53
+ "@storybook/addon-a11y": "^8.2.2",
54
+ "@storybook/addon-actions": "^8.2.2",
55
+ "@storybook/addon-essentials": "^8.2.2",
56
+ "@storybook/addon-interactions": "^8.2.2",
57
57
  "@storybook/addon-knobs": "^8.0.1",
58
- "@storybook/addon-viewport": "^8.2.1",
58
+ "@storybook/addon-viewport": "^8.2.2",
59
59
  "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
60
- "@storybook/components": "^8.2.1",
61
- "@storybook/core-events": "^8.2.1",
62
- "@storybook/manager-api": "^8.2.1",
63
- "@storybook/react": "^8.2.1",
64
- "@storybook/react-webpack5": "^8.2.1",
65
- "@storybook/test": "^8.2.1",
66
- "@storybook/theming": "^8.2.1",
60
+ "@storybook/components": "^8.2.2",
61
+ "@storybook/core-events": "^8.2.2",
62
+ "@storybook/manager-api": "^8.2.2",
63
+ "@storybook/react": "^8.2.2",
64
+ "@storybook/react-webpack5": "^8.2.2",
65
+ "@storybook/test": "^8.2.2",
66
+ "@storybook/theming": "^8.2.2",
67
67
  "@testing-library/dom": "^10.3.1",
68
68
  "@testing-library/jest-dom": "^6.4.6",
69
69
  "@testing-library/react": "^16.0.0",
@@ -91,10 +91,10 @@
91
91
  "react-intl": "^6.6.8",
92
92
  "rollup": "^4.18.1",
93
93
  "rollup-preserve-directives": "^1.1.1",
94
- "storybook": "^8.2.1",
94
+ "storybook": "^8.2.2",
95
95
  "@transferwise/less-config": "3.1.0",
96
- "@wise/components-theming": "1.4.0",
97
- "@transferwise/neptune-css": "14.12.0"
96
+ "@transferwise/neptune-css": "14.12.1",
97
+ "@wise/components-theming": "1.4.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",
@@ -106,7 +106,7 @@
106
106
  "react-intl": "^5.10.0 || ^6"
107
107
  },
108
108
  "dependencies": {
109
- "@babel/runtime": "^7.24.7",
109
+ "@babel/runtime": "^7.24.8",
110
110
  "@floating-ui/react": "^0.25.4",
111
111
  "@formatjs/intl-locale": "^3.4.6",
112
112
  "@headlessui/react": "^1.7.19",
package/src/actionOption/ActionOption.tsx CHANGED
@@ -16,6 +16,7 @@ export type ActionOptionProps = {
16
16
  priority?: PriorityPrimary | PrioritySecondary;
17
17
  showMediaCircle?: boolean;
18
18
  isContainerAligned?: boolean;
19
+ as?: React.ElementType;
19
20
  } & CommonProps;
20
21
 
21
22
  const ActionOption = ({
@@ -31,6 +32,7 @@ const ActionOption = ({
31
32
  showMediaAtAllSizes,
32
33
  showMediaCircle,
33
34
  isContainerAligned,
35
+ as,
34
36
  }: ActionOptionProps) => {
35
37
  const sharedProps = {
36
38
  media,
@@ -42,6 +44,7 @@ const ActionOption = ({
42
44
  showMediaCircle,
43
45
  className: classNames('tw-action-option', className),
44
46
  isContainerAligned,
47
+ as,
45
48
  };
46
49
 
47
50
  const getAriaLabel = (): string | undefined => {
package/src/avatar/Avatar.spec.tsx CHANGED
@@ -41,4 +41,14 @@ describe('Avatar', () => {
41
41
  expect(screen.getByText('JS')).toHaveStyle(`background-color: ${item.color.token}`);
42
42
  });
43
43
  });
44
+
45
+ it('adds aria-label to component if it is passed in', () => {
46
+ render(
47
+ <Avatar size={Size.MEDIUM} aria-label="Japanese flag avatar">
48
+ <img src="https://wise.com/web-art/assets/flags/jpy.svg" alt="" />
49
+ </Avatar>,
50
+ );
51
+
52
+ expect(screen.getByLabelText('Japanese flag avatar')).toBeInTheDocument();
53
+ });
44
54
  });
package/src/avatar/Avatar.tsx CHANGED
@@ -24,6 +24,7 @@ export interface AvatarProps {
24
24
  size?: AvatarSize;
25
25
  theme?: AvatarTheme;
26
26
  type?: AvatarType;
27
+ 'aria-label'?: string;
27
28
  }
28
29
 
29
30
  const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
@@ -51,6 +52,7 @@ const Avatar: React.FC<AvatarProps> = ({
51
52
  size: sizeFromProps = 48,
52
53
  theme = Theme.LIGHT,
53
54
  type = 'thumbnail',
55
+ 'aria-label': ariaLabel,
54
56
  }) => {
55
57
  const backgroundColorFromSeed = useMemo<string | undefined>(
56
58
  () =>
@@ -69,6 +71,7 @@ const Avatar: React.FC<AvatarProps> = ({
69
71
  'tw-avatar--branded': Boolean(backgroundColorFromSeed),
70
72
  'np-text-title-body': type === 'initials',
71
73
  })}
74
+ aria-label={ariaLabel}
72
75
  >
73
76
  <div
74
77
  className="tw-avatar__content"
package/src/avatarWrapper/AvatarWrapper.spec.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import { BadgeProps } from '../badge';
2
- import { Sentiment } from '../common';
3
- import { Size, ProfileType } from '../common';
2
+ import { Sentiment, Size, ProfileType } from '../common';
4
3
  import { render, screen } from '../test-utils';
5
4
 
6
5
  import AvatarWrapper from '.';
@@ -77,6 +76,12 @@ describe('FlowNavigationAvatar', () => {
77
76
 
78
77
  expect(container.firstChild).toMatchSnapshot();
79
78
  });
79
+
80
+ it('renders aria-label', () => {
81
+ render(<AvatarWrapper aria-label="test" />);
82
+
83
+ expect(screen.getByLabelText('test')).toBeInTheDocument();
84
+ });
80
85
  });
81
86
 
82
87
  describe('with a badge url passed', () => {
@@ -95,9 +100,15 @@ describe('FlowNavigationAvatar', () => {
95
100
 
96
101
  describe('with a badge status icon passed', () => {
97
102
  it('renders the badge', () => {
98
- const { container } = render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);
103
+ render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} />);
99
104
 
100
- expect(container.firstChild).toMatchSnapshot();
105
+ expect(screen.getByTestId('check-icon')).toBeInTheDocument();
106
+ });
107
+
108
+ it('renders aria-label', () => {
109
+ render(<AvatarWrapper badgeStatusIcon={Sentiment.POSITIVE} aria-label="test" />);
110
+
111
+ expect(screen.getByLabelText('test')).toBeInTheDocument();
101
112
  });
102
113
  });
103
114
  });
package/src/avatarWrapper/AvatarWrapper.story.tsx CHANGED
@@ -37,6 +37,7 @@ export const All: Story = {
37
37
  <div>
38
38
  <AvatarWrapper
39
39
  url="https://wise.com/web-art/assets/flags/jpy.svg"
40
+ aria-label="Japanese flag avatar"
40
41
  profileType={ProfileType.BUSINESS}
41
42
  avatarProps={avatarProps}
42
43
  />
@@ -59,6 +60,7 @@ export const All: Story = {
59
60
  <AvatarWrapper
60
61
  badgeUrl={badgeUrl}
61
62
  badgeAltText="wise fast flag badge"
63
+ aria-label="Person avatar with wise fast flag badge"
62
64
  profileType={ProfileType.PERSONAL}
63
65
  avatarProps={avatarProps}
64
66
  />
package/src/avatarWrapper/AvatarWrapper.tsx CHANGED
@@ -8,21 +8,33 @@ import StatusIcon from '../statusIcon/StatusIcon';
8
8
 
9
9
  interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
10
10
  url?: string;
11
+ ariaLabel?: string;
11
12
  altText?: string;
12
13
  statusIcon?: Sentiment;
13
14
  }
14
15
 
15
- const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: OptionalBadgeProps) => {
16
+ const OptionalBadge = ({
17
+ url,
18
+ altText,
19
+ statusIcon,
20
+ children,
21
+ ariaLabel,
22
+ ...rest
23
+ }: OptionalBadgeProps) => {
16
24
  if (url) {
17
25
  return (
18
- <Badge badge={<img src={url} alt={altText} />} {...rest}>
26
+ <Badge aria-label={ariaLabel} badge={<img src={url} alt={altText} />} {...rest}>
19
27
  {children}
20
28
  </Badge>
21
29
  );
22
30
  }
23
31
  if (statusIcon) {
24
32
  return (
25
- <Badge badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />} {...rest}>
33
+ <Badge
34
+ aria-label={ariaLabel}
35
+ badge={<StatusIcon sentiment={statusIcon} size={Size.SMALL} />}
36
+ {...rest}
37
+ >
26
38
  {children}
27
39
  </Badge>
28
40
  );
@@ -32,6 +44,7 @@ const OptionalBadge = ({ url, altText, statusIcon, children, ...rest }: Optional
32
44
 
33
45
  export type AvatarWrapperProps = {
34
46
  url?: string;
47
+ 'aria-label'?: string;
35
48
  profileType?: ProfileTypeBusiness | ProfileTypePersonal;
36
49
  profileId?: string;
37
50
  name?: string;
@@ -57,6 +70,7 @@ export type AvatarWrapperProps = {
57
70
 
58
71
  const AvatarWrapper = ({
59
72
  url,
73
+ 'aria-label': ariaLabel,
60
74
  profileType,
61
75
  profileId,
62
76
  badgeUrl,
@@ -73,18 +87,22 @@ const AvatarWrapper = ({
73
87
  useEffect(() => setImageLoadError(false), [url]);
74
88
 
75
89
  const getAvatarProps = () => {
90
+ let updatedAvatarProps = avatarProps;
91
+ if (!badgeUrl && !badgeStatusIcon && ariaLabel) {
92
+ updatedAvatarProps = { ...updatedAvatarProps, 'aria-label': ariaLabel };
93
+ }
76
94
  if (url && !hasImageLoadError) {
77
95
  return {
78
96
  type: AvatarType.THUMBNAIL,
79
97
  children: <img src={url} alt="" onError={() => setImageLoadError(true)} />,
80
- ...avatarProps,
98
+ ...updatedAvatarProps,
81
99
  };
82
100
  }
83
101
  if (profileType) {
84
102
  return {
85
103
  type: AvatarType.ICON,
86
104
  children: isBusinessProfile ? <BriefcaseIcon size="24" /> : <ProfileIcon size="24" />,
87
- ...avatarProps,
105
+ ...updatedAvatarProps,
88
106
  };
89
107
  }
90
108
  if (name) {
@@ -92,19 +110,20 @@ const AvatarWrapper = ({
92
110
  type: AvatarType.INITIALS,
93
111
  children: <>{getInitials(name)}</>,
94
112
  backgroundColorSeed: profileId?.toString(),
95
- ...avatarProps,
113
+ ...updatedAvatarProps,
96
114
  };
97
115
  }
98
116
  return {
99
117
  type: AvatarType.ICON,
100
118
  children: <ProfileIcon size="24" />,
101
- ...avatarProps,
119
+ ...updatedAvatarProps,
102
120
  };
103
121
  };
104
122
 
105
123
  return (
106
124
  <OptionalBadge
107
125
  url={badgeUrl}
126
+ ariaLabel={ariaLabel}
108
127
  altText={badgeAltText}
109
128
  statusIcon={badgeStatusIcon}
110
129
  {...badgeProps}
package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap CHANGED
@@ -73,70 +73,6 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
73
73
  </div>
74
74
  `;
75
75
 
76
- exports[`FlowNavigationAvatar with a name AND profileType with a badge status icon passed renders the badge 1`] = `
77
- <div
78
- class="tw-badge tw-badge-border-light tw-badge-sm"
79
- >
80
- <div
81
- class="tw-badge__children"
82
- >
83
- <div
84
- class="tw-avatar tw-avatar--48 tw-avatar--icon"
85
- >
86
- <div
87
- class="tw-avatar__content"
88
- >
89
- <span
90
- aria-hidden="true"
91
- class="tw-icon tw-icon-person "
92
- data-testid="person-icon"
93
- role="presentation"
94
- >
95
- <svg
96
- fill="currentColor"
97
- focusable="false"
98
- height="24"
99
- viewBox="0 0 24 24"
100
- width="24"
101
- >
102
- <path
103
- d="M15.257 14.014A5.922 5.922 0 0 0 18 9c0-3.3-2.7-6-6-6S6 5.7 6 9c0 2.1 1.071 3.943 2.743 5.014-2.614 1.243-4.457 3.9-4.457 6.986H6c0-3.3 2.7-6 6-6s6 2.7 6 6h1.714c0-3.086-1.842-5.743-4.457-6.986ZM7.714 9A4.298 4.298 0 0 1 12 4.714 4.298 4.298 0 0 1 16.286 9 4.298 4.298 0 0 1 12 13.286 4.298 4.298 0 0 1 7.714 9Z"
104
- />
105
- </svg>
106
- </span>
107
- </div>
108
- </div>
109
- </div>
110
- <div
111
- class="tw-badge__content"
112
- >
113
- <span
114
- class="status-circle status-circle-sm positive"
115
- data-testid="status-icon"
116
- >
117
- <span
118
- aria-hidden="true"
119
- class="tw-icon tw-icon-check status-icon light"
120
- data-testid="check-icon"
121
- role="presentation"
122
- >
123
- <svg
124
- fill="currentColor"
125
- focusable="false"
126
- height="16"
127
- viewBox="0 0 24 24"
128
- width="16"
129
- >
130
- <path
131
- d="M20.143 6.427 9.557 16.97 4.2 11.57 3 12.77l5.957 6a.846.846 0 0 0 .6.257.846.846 0 0 0 .6-.257L21.343 7.627l-1.2-1.2Z"
132
- />
133
- </svg>
134
- </span>
135
- </span>
136
- </div>
137
- </div>
138
- `;
139
-
140
76
  exports[`FlowNavigationAvatar with a name AND profileType with a badge url passed renders the badge 1`] = `
141
77
  <div
142
78
  class="tw-badge tw-badge-border-light tw-badge-lg"
package/src/badge/Badge.spec.tsx CHANGED
@@ -33,4 +33,12 @@ describe('Badge', () => {
33
33
 
34
34
  expect(screen.getByText(childText).parentElement).toHaveClass('tw-badge__children');
35
35
  });
36
+
37
+ it('adds aria-label to badge if it is passed in', () => {
38
+ const ariaLabel = 'badge-aria-label';
39
+
40
+ renderBadge({ 'aria-label': ariaLabel });
41
+
42
+ expect(screen.getByLabelText(ariaLabel)).toBeInTheDocument();
43
+ });
36
44
  });
package/src/badge/Badge.tsx CHANGED
@@ -17,6 +17,7 @@ export type BadgeProps = {
17
17
  children: ReactNode;
18
18
  size?: SizeSmall | SizeMedium | SizeLarge;
19
19
  border?: ThemeDark | ThemeLight;
20
+ 'aria-label'?: string;
20
21
  } & CommonProps;
21
22
 
22
23
  const Badge = ({
@@ -24,6 +25,7 @@ const Badge = ({
24
25
  className = undefined,
25
26
  size = Size.SMALL,
26
27
  border = Theme.LIGHT,
28
+ 'aria-label': ariaLabel,
27
29
  children,
28
30
  }: BadgeProps) => {
29
31
  const classes: string = classNames(
@@ -36,7 +38,7 @@ const Badge = ({
36
38
  );
37
39
 
38
40
  return (
39
- <div className={classes}>
41
+ <div aria-label={ariaLabel} className={classes}>
40
42
  <div className="tw-badge__children">{children}</div>
41
43
  <div className="tw-badge__content">{badge}</div>
42
44
  </div>
package/src/card/Card.tsx CHANGED
@@ -20,6 +20,10 @@ export interface CardProps {
20
20
  onClick?: (nextIsExpanded: boolean) => void;
21
21
  }
22
22
 
23
+ /**
24
+ * @deprecated use Navigation pattern (via `NavigationOption` component)
25
+ * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern
26
+ */
23
27
  const Card = forwardRef(function Card(
24
28
  {
25
29
  'aria-label': ariaLabel,
package/src/common/bottomSheet/BottomSheet.tsx CHANGED
@@ -1,8 +1,16 @@
1
1
  import classNames from 'classnames';
2
- import { useRef, useState, PropsWithChildren, CSSProperties, SyntheticEvent } from 'react';
2
+ import {
3
+ CSSProperties,
4
+ PropsWithChildren,
5
+ SyntheticEvent,
6
+ useContext,
7
+ useRef,
8
+ useState,
9
+ } from 'react';
3
10
 
4
11
  import Dimmer from '../../dimmer';
5
12
  import Drawer from '../../drawer';
13
+ import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
6
14
  import SlidingPanel from '../../slidingPanel';
7
15
  import { CloseButton } from '../closeButton';
8
16
  import { CommonProps } from '../commonProps';
@@ -170,6 +178,8 @@ const BottomSheet = (props: BottomSheetProps) => {
170
178
 
171
179
  const is400Zoom = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
172
180
 
181
+ const overlayId = useContext(OverlayIdContext);
182
+
173
183
  return is400Zoom ? (
174
184
  <Drawer open={props.open} className={props.className} onClose={close}>
175
185
  {props.children}
@@ -184,6 +194,7 @@ const BottomSheet = (props: BottomSheetProps) => {
184
194
  >
185
195
  {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
186
196
  <div
197
+ id={overlayId}
187
198
  role="dialog"
188
199
  aria-modal
189
200
  onTouchStart={onSwipeStart}
package/src/common/panel/Panel.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  PropsWithChildren,
7
7
  SyntheticEvent,
8
8
  forwardRef,
9
+ useContext,
9
10
  useEffect,
10
11
  useState,
11
12
  } from 'react';
@@ -13,6 +14,7 @@ import { usePopper } from 'react-popper';
13
14
 
14
15
  import { Position, PositionBottom, PositionLeft, PositionRight, PositionTop } from '..';
15
16
  import Dimmer from '../../dimmer';
17
+ import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
16
18
 
17
19
  const POPOVER_OFFSET = [0, 16];
18
20
 
@@ -108,9 +110,12 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
108
110
  ...(anchorWidth ? { width: anchorRef.current?.clientWidth } : undefined),
109
111
  };
110
112
 
113
+ const overlayId = useContext(OverlayIdContext);
114
+
111
115
  return (
112
116
  <Dimmer open={open} transparent fadeContentOnEnter fadeContentOnExit onClose={onClose}>
113
117
  <div
118
+ id={overlayId}
114
119
  {...rest}
115
120
  ref={setPopperElement}
116
121
  role="dialog"