@transferwise/components 0.0.0-experimental-bc13343 → 0.0.0-experimental-739bfcf

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 (132) hide show
  1. package/build/avatarLayout/AvatarLayout.js +9 -2
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +9 -2
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/Button.js +78 -79
  6. package/build/button/Button.js.map +1 -1
  7. package/build/button/Button.mjs +79 -80
  8. package/build/button/Button.mjs.map +1 -1
  9. package/build/button/Button.resolver.js +78 -0
  10. package/build/button/Button.resolver.js.map +1 -0
  11. package/build/button/Button.resolver.mjs +76 -0
  12. package/build/button/Button.resolver.mjs.map +1 -0
  13. package/build/button/LegacyButton.js +114 -0
  14. package/build/button/LegacyButton.js.map +1 -0
  15. package/build/button/LegacyButton.mjs +112 -0
  16. package/build/button/LegacyButton.mjs.map +1 -0
  17. package/build/criticalBanner/CriticalCommsBanner.js +2 -2
  18. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  19. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  20. package/build/header/Header.js +2 -2
  21. package/build/header/Header.js.map +1 -1
  22. package/build/header/Header.mjs +1 -1
  23. package/build/i18n/ja.json +0 -1
  24. package/build/i18n/ja.json.js +0 -1
  25. package/build/i18n/ja.json.js.map +1 -1
  26. package/build/i18n/ja.json.mjs +0 -1
  27. package/build/i18n/ja.json.mjs.map +1 -1
  28. package/build/i18n/pt.json +0 -1
  29. package/build/i18n/pt.json.js +0 -1
  30. package/build/i18n/pt.json.js.map +1 -1
  31. package/build/i18n/pt.json.mjs +0 -1
  32. package/build/i18n/pt.json.mjs.map +1 -1
  33. package/build/i18n/ru.json +0 -1
  34. package/build/i18n/ru.json.js +0 -1
  35. package/build/i18n/ru.json.js.map +1 -1
  36. package/build/i18n/ru.json.mjs +0 -1
  37. package/build/i18n/ru.json.mjs.map +1 -1
  38. package/build/i18n/zh-HK.json +0 -1
  39. package/build/i18n/zh-HK.json.js +0 -1
  40. package/build/i18n/zh-HK.json.js.map +1 -1
  41. package/build/i18n/zh-HK.json.mjs +0 -1
  42. package/build/i18n/zh-HK.json.mjs.map +1 -1
  43. package/build/index.js +2 -2
  44. package/build/index.mjs +1 -1
  45. package/build/link/Link.js +8 -3
  46. package/build/link/Link.js.map +1 -1
  47. package/build/link/Link.mjs +8 -3
  48. package/build/link/Link.mjs.map +1 -1
  49. package/build/main.css +250 -0
  50. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +1 -3
  51. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
  52. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +1 -3
  53. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
  54. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +1 -4
  55. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
  56. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +1 -4
  57. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
  58. package/build/select/Select.js +5 -3
  59. package/build/select/Select.js.map +1 -1
  60. package/build/select/Select.mjs +4 -2
  61. package/build/select/Select.mjs.map +1 -1
  62. package/build/styles/avatarLayout/AvatarLayout.css +11 -0
  63. package/build/styles/button/Button.css +231 -15
  64. package/build/styles/button/Button.vars.css +38 -0
  65. package/build/styles/button/LegacyButton.css +23 -0
  66. package/build/styles/main.css +250 -0
  67. package/build/types/avatarLayout/AvatarLayout.d.ts +1 -2
  68. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  69. package/build/types/avatarLayout/index.d.ts +1 -0
  70. package/build/types/avatarLayout/index.d.ts.map +1 -1
  71. package/build/types/button/Button.d.ts +1 -23
  72. package/build/types/button/Button.d.ts.map +1 -1
  73. package/build/types/button/Button.resolver.d.ts +31 -0
  74. package/build/types/button/Button.resolver.d.ts.map +1 -0
  75. package/build/types/button/Button.types.d.ts +65 -0
  76. package/build/types/button/Button.types.d.ts.map +1 -0
  77. package/build/types/button/LegacyButton.d.ts +30 -0
  78. package/build/types/button/LegacyButton.d.ts.map +1 -0
  79. package/build/types/button/index.d.ts +2 -2
  80. package/build/types/button/index.d.ts.map +1 -1
  81. package/build/types/link/Link.d.ts +2 -2
  82. package/build/types/link/Link.d.ts.map +1 -1
  83. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
  84. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +5 -1
  85. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
  86. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
  87. package/build/types/select/Select.d.ts.map +1 -1
  88. package/build/upload/steps/completeStep/completeStep.js +2 -2
  89. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  90. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  91. package/build/upload/steps/processingStep/processingStep.js +2 -2
  92. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  93. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  94. package/build/uploadInput/UploadInput.js +3 -3
  95. package/build/uploadInput/UploadInput.js.map +1 -1
  96. package/build/uploadInput/UploadInput.mjs +1 -1
  97. package/package.json +3 -3
  98. package/src/avatarLayout/AvatarLayout.css +11 -0
  99. package/src/avatarLayout/AvatarLayout.less +18 -1
  100. package/src/avatarLayout/AvatarLayout.tsx +11 -3
  101. package/src/avatarLayout/index.ts +1 -0
  102. package/src/button/Button.css +231 -15
  103. package/src/button/Button.less +232 -14
  104. package/src/button/Button.resolver.tsx +120 -0
  105. package/src/button/Button.spec.tsx +54 -231
  106. package/src/button/Button.story.tsx +612 -137
  107. package/src/button/Button.tsx +88 -132
  108. package/src/button/Button.types.ts +86 -0
  109. package/src/button/Button.vars.css +38 -0
  110. package/src/button/Button.vars.less +46 -0
  111. package/src/button/LegacyButton.css +23 -0
  112. package/src/button/LegacyButton.less +24 -0
  113. package/src/button/LegacyButton.spec.tsx +146 -0
  114. package/src/button/LegacyButton.story.tsx +224 -0
  115. package/src/button/LegacyButton.tsx +161 -0
  116. package/src/button/index.ts +2 -3
  117. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
  118. package/src/i18n/ja.json +0 -1
  119. package/src/i18n/pt.json +0 -1
  120. package/src/i18n/ru.json +0 -1
  121. package/src/i18n/zh-HK.json +0 -1
  122. package/src/inputs/SelectInput.story.tsx +1 -1
  123. package/src/link/Link.tsx +15 -6
  124. package/src/main.css +250 -0
  125. package/src/main.less +1 -0
  126. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +1 -7
  127. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +6 -1
  128. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +1 -3
  129. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +1 -8
  130. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +2 -5
  131. package/src/select/Select.tsx +1 -0
  132. package/src/button/__snapshots__/Button.spec.tsx.snap +0 -309
@@ -56,7 +56,6 @@ var ja = {
56
56
  "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
57
57
  "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
59
- "neptune.UploadButton.maximumFiles": "最大ファイル数:{maxFiles}個",
60
59
  "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
61
60
  "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
62
61
  "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
@@ -1 +1 @@
1
- {"version":3,"file":"ja.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ja.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var ja = {
54
54
  "neptune.UploadButton.allFileTypes": "すべてのファイル種類",
55
55
  "neptune.UploadButton.dropFiles": "ファイルをドロップしてアップロードする",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}、{size}MB以下",
57
- "neptune.UploadButton.maximumFiles": "最大ファイル数:{maxFiles}個",
58
57
  "neptune.UploadButton.uploadFile": "ファイルをアップロードする",
59
58
  "neptune.UploadButton.uploadFiles": "ファイルをアップロードする",
60
59
  "neptune.UploadInput.deleteModalBody": "このファイルを削除すると、当社のシステムからも削除されます。",
@@ -1 +1 @@
1
- {"version":3,"file":"ja.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ja.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
55
55
  "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
57
- "neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
58
57
  "neptune.UploadButton.uploadFile": "Enviar arquivo",
59
58
  "neptune.UploadButton.uploadFiles": "Enviar arquivos",
60
59
  "neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",
@@ -56,7 +56,6 @@ var pt = {
56
56
  "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
57
57
  "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
59
- "neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
60
59
  "neptune.UploadButton.uploadFile": "Enviar arquivo",
61
60
  "neptune.UploadButton.uploadFiles": "Enviar arquivos",
62
61
  "neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",
@@ -1 +1 @@
1
- {"version":3,"file":"pt.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"pt.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var pt = {
54
54
  "neptune.UploadButton.allFileTypes": "Todos os tipos de arquivos",
55
55
  "neptune.UploadButton.dropFiles": "Arraste o arquivo para iniciar o envio",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, com menos de {size}MB",
57
- "neptune.UploadButton.maximumFiles": "Máximo de {maxFiles} arquivos.",
58
57
  "neptune.UploadButton.uploadFile": "Enviar arquivo",
59
58
  "neptune.UploadButton.uploadFiles": "Enviar arquivos",
60
59
  "neptune.UploadInput.deleteModalBody": "Se você remover este arquivo, ele será permanentemente excluído do nosso sistema.",
@@ -1 +1 @@
1
- {"version":3,"file":"pt.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"pt.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "Все типы файлов",
55
55
  "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
57
- "neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
58
57
  "neptune.UploadButton.uploadFile": "Загрузить файл",
59
58
  "neptune.UploadButton.uploadFiles": "Загрузить файлы",
60
59
  "neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",
@@ -56,7 +56,6 @@ var ru = {
56
56
  "neptune.UploadButton.allFileTypes": "Все типы файлов",
57
57
  "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
58
58
  "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
59
- "neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
60
59
  "neptune.UploadButton.uploadFile": "Загрузить файл",
61
60
  "neptune.UploadButton.uploadFiles": "Загрузить файлы",
62
61
  "neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",
@@ -1 +1 @@
1
- {"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ru.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var ru = {
54
54
  "neptune.UploadButton.allFileTypes": "Все типы файлов",
55
55
  "neptune.UploadButton.dropFiles": "Перетащите файл, чтобы начать загрузку",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, не превышающий {size} MB",
57
- "neptune.UploadButton.maximumFiles": "Макс. количество файлов: {maxFiles}.",
58
57
  "neptune.UploadButton.uploadFile": "Загрузить файл",
59
58
  "neptune.UploadButton.uploadFiles": "Загрузить файлы",
60
59
  "neptune.UploadInput.deleteModalBody": "Удаление этого файла приведет к его удалению из нашей системы.",
@@ -1 +1 @@
1
- {"version":3,"file":"ru.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"ru.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@
54
54
  "neptune.UploadButton.allFileTypes": "所有檔案類型",
55
55
  "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
56
56
  "neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
57
- "neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
58
57
  "neptune.UploadButton.uploadFile": "上載檔案",
59
58
  "neptune.UploadButton.uploadFiles": "上載檔案",
60
59
  "neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",
@@ -56,7 +56,6 @@ var zhHK = {
56
56
  "neptune.UploadButton.allFileTypes": "所有檔案類型",
57
57
  "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
58
58
  "neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
59
- "neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
60
59
  "neptune.UploadButton.uploadFile": "上載檔案",
61
60
  "neptune.UploadButton.uploadFiles": "上載檔案",
62
61
  "neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",
@@ -1 +1 @@
1
- {"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zh-HK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -54,7 +54,6 @@ var zhHK = {
54
54
  "neptune.UploadButton.allFileTypes": "所有檔案類型",
55
55
  "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
56
56
  "neptune.UploadButton.instructions": "{fileTypes},小於{size}MB",
57
- "neptune.UploadButton.maximumFiles": "最多{maxFiles}個檔案。",
58
57
  "neptune.UploadButton.uploadFile": "上載檔案",
59
58
  "neptune.UploadButton.uploadFiles": "上載檔案",
60
59
  "neptune.UploadInput.deleteModalBody": "移除此檔案會把它從我們的系統中刪除。",
@@ -1 +1 @@
1
- {"version":3,"file":"zh-HK.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"zh-HK.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/index.js CHANGED
@@ -21,7 +21,7 @@ require('react/jsx-runtime');
21
21
  var Image = require('./image/Image.js');
22
22
  require('@transferwise/icons');
23
23
  var Body = require('./body/Body.js');
24
- var Button = require('./button/Button.js');
24
+ var Button_resolver = require('./button/Button.resolver.js');
25
25
  var IconButton = require('./iconButton/IconButton.js');
26
26
  var Carousel = require('./carousel/Carousel.js');
27
27
  var Card = require('./card/Card.js');
@@ -164,7 +164,7 @@ Object.defineProperty(exports, "Breakpoint", {
164
164
  });
165
165
  exports.Image = Image.default;
166
166
  exports.Body = Body;
167
- exports.Button = Button;
167
+ exports.Button = Button_resolver;
168
168
  exports.IconButton = IconButton;
169
169
  exports.Carousel = Carousel;
170
170
  exports.Card = Card;
package/build/index.mjs CHANGED
@@ -19,7 +19,7 @@ import 'react/jsx-runtime';
19
19
  export { default as Image } from './image/Image.mjs';
20
20
  import '@transferwise/icons';
21
21
  export { default as Body } from './body/Body.mjs';
22
- export { default as Button } from './button/Button.mjs';
22
+ export { default as Button } from './button/Button.resolver.mjs';
23
23
  export { default as IconButton } from './iconButton/IconButton.mjs';
24
24
  export { default as Carousel } from './carousel/Carousel.mjs';
25
25
  export { default as Card } from './card/Card.mjs';
@@ -3,6 +3,8 @@
3
3
  var icons = require('@transferwise/icons');
4
4
  var clsx = require('clsx');
5
5
  var reactIntl = require('react-intl');
6
+ require('../primitives/PrimitiveButton/src/PrimitiveButton.js');
7
+ var PrimitiveAnchor = require('../primitives/PrimitiveAnchor/src/PrimitiveAnchor.js');
6
8
  var Link_messages = require('./Link.messages.js');
7
9
  var jsxRuntime = require('react/jsx-runtime');
8
10
 
@@ -16,14 +18,17 @@ const Link = ({
16
18
  onClick,
17
19
  ...props
18
20
  }) => {
19
- const isBlank = target === '_blank';
20
21
  const {
21
22
  formatMessage
22
23
  } = reactIntl.useIntl();
23
- return /*#__PURE__*/jsxRuntime.jsxs("a", {
24
+ const isBlank = target === '_blank';
25
+ const classNames = clsx.clsx('np-link', 'd-inline-flex', {
26
+ [`np-text-${type}`]: type
27
+ }, className);
28
+ return /*#__PURE__*/jsxRuntime.jsxs(PrimitiveAnchor, {
24
29
  href: href,
25
30
  target: target,
26
- className: clsx.clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
31
+ className: classNames,
27
32
  "aria-label": ariaLabel,
28
33
  rel: isBlank ? 'noreferrer' : undefined,
29
34
  onClick: onClick,
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const isBlank = target === '_blank';\n\n const { formatMessage } = useIntl();\n\n return (\n <a\n href={href}\n target={target}\n className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </a>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,eAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,SAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
1
+ {"version":3,"file":"Link.js","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,iBAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,SAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,eAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,cAAA,CAACC,kBAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,aAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
@@ -1,6 +1,8 @@
1
1
  import { NavigateAway } from '@transferwise/icons';
2
2
  import { clsx } from 'clsx';
3
3
  import { useIntl } from 'react-intl';
4
+ import '../primitives/PrimitiveButton/src/PrimitiveButton.mjs';
5
+ import PrimitiveAnchor from '../primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs';
4
6
  import messages from './Link.messages.mjs';
5
7
  import { jsxs, jsx } from 'react/jsx-runtime';
6
8
 
@@ -14,14 +16,17 @@ const Link = ({
14
16
  onClick,
15
17
  ...props
16
18
  }) => {
17
- const isBlank = target === '_blank';
18
19
  const {
19
20
  formatMessage
20
21
  } = useIntl();
21
- return /*#__PURE__*/jsxs("a", {
22
+ const isBlank = target === '_blank';
23
+ const classNames = clsx('np-link', 'd-inline-flex', {
24
+ [`np-text-${type}`]: type
25
+ }, className);
26
+ return /*#__PURE__*/jsxs(PrimitiveAnchor, {
22
27
  href: href,
23
28
  target: target,
24
- className: clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className),
29
+ className: classNames,
25
30
  "aria-label": ariaLabel,
26
31
  rel: isBlank ? 'noreferrer' : undefined,
27
32
  onClick: onClick,
@@ -1 +1 @@
1
- {"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { AnchorHTMLAttributes } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const isBlank = target === '_blank';\n\n const { formatMessage } = useIntl();\n\n return (\n <a\n href={href}\n target={target}\n className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </a>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","isBlank","formatMessage","useIntl","_jsxs","clsx","undefined","rel","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;AAgBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;AACV,EAAA,MAAMC,OAAO,GAAGL,MAAM,KAAK,QAAQ,CAAA;EAEnC,MAAM;AAAEM,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AAEnC,EAAA,oBACEC,IAAA,CAAA,GAAA,EAAA;AACET,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEY,IAAI,CAAC,SAAS,EAAER,IAAI,GAAG,CAAA,QAAA,EAAWA,IAAI,CAAA,CAAE,GAAGS,SAAS,EAAE,eAAe,EAAEb,SAAS,CAAE;AAC7F,IAAA,YAAA,EAAYK,SAAU;AACtBS,IAAAA,GAAG,EAAEN,OAAO,GAAG,YAAY,GAAGK,SAAU;AACxCP,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACO,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAER,aAAa,CAACS,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GACxF,CAAC,CAAA;AAER;;;;"}
1
+ {"version":3,"file":"Link.mjs","sources":["../../src/link/Link.tsx"],"sourcesContent":["import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { useIntl } from 'react-intl';\nimport { PrimitiveAnchor } from '../primitives';\nimport type { PrimitiveAnchorProps } from '../primitives';\n\nimport { LinkLarge, LinkDefault } from '../common';\n\nimport messages from './Link.messages';\n\nexport type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };\n\n/**\n * Standard Link component with navigate away icon\n *\n * Documentation: https://transferwise.github.io/neptune-web/components/content/Link\n */\nconst Link = ({\n className,\n children,\n href,\n target,\n type,\n 'aria-label': ariaLabel,\n onClick,\n ...props\n}: Props) => {\n const { formatMessage } = useIntl();\n const isBlank = target === '_blank';\n\n const classNames = clsx(\n 'np-link',\n 'd-inline-flex',\n {\n [`np-text-${type}`]: type,\n },\n className,\n );\n\n return (\n <PrimitiveAnchor\n href={href}\n target={target}\n className={classNames}\n aria-label={ariaLabel}\n rel={isBlank ? 'noreferrer' : undefined}\n onClick={onClick}\n {...props}\n >\n {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}\n </PrimitiveAnchor>\n );\n};\n\nexport default Link;\n"],"names":["Link","className","children","href","target","type","ariaLabel","onClick","props","formatMessage","useIntl","isBlank","classNames","clsx","_jsxs","PrimitiveAnchor","rel","undefined","_jsx","NavigateAwayIcon","title","messages","opensInNewTab"],"mappings":";;;;;;;;AAiBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC,IAAI;AACJ,EAAA,YAAY,EAAEC,SAAS;EACvBC,OAAO;EACP,GAAGC,KAAAA;AACG,CAAA,KAAI;EACV,MAAM;AAAEC,IAAAA,aAAAA;GAAe,GAAGC,OAAO,EAAE,CAAA;AACnC,EAAA,MAAMC,OAAO,GAAGP,MAAM,KAAK,QAAQ,CAAA;AAEnC,EAAA,MAAMQ,UAAU,GAAGC,IAAI,CACrB,SAAS,EACT,eAAe,EACf;IACE,CAAC,CAAA,QAAA,EAAWR,IAAI,CAAA,CAAE,GAAGA,IAAAA;GACtB,EACDJ,SAAS,CACV,CAAA;EAED,oBACEa,IAAA,CAACC,eAAe,EAAA;AACdZ,IAAAA,IAAI,EAAEA,IAAK;AACXC,IAAAA,MAAM,EAAEA,MAAO;AACfH,IAAAA,SAAS,EAAEW,UAAW;AACtB,IAAA,YAAA,EAAYN,SAAU;AACtBU,IAAAA,GAAG,EAAEL,OAAO,GAAG,YAAY,GAAGM,SAAU;AACxCV,IAAAA,OAAO,EAAEA,OAAQ;AAAA,IAAA,GACbC,KAAK;IAAAN,QAAA,EAAA,CAERA,QAAQ,EAAE,GAAA,EAACS,OAAO,iBAAIO,GAAA,CAACC,YAAgB,EAAA;AAACC,MAAAA,KAAK,EAAEX,aAAa,CAACY,QAAQ,CAACC,aAAa,CAAA;AAAE,MAAG,CAAA;AAAA,GAC1E,CAAC,CAAA;AAEtB;;;;"}
package/build/main.css CHANGED
@@ -518,10 +518,18 @@ div.critical-comms .critical-comms-body {
518
518
  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
519
519
  mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
520
520
  }
521
+ [dir="rtl"] .np-avatar-layout-diagonal-mask {
522
+ -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
523
+ mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
524
+ }
521
525
  .np-avatar-layout-diagonal-child {
522
526
  margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
523
527
  margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
524
528
  }
529
+ [dir="rtl"] .np-avatar-layout-diagonal-child {
530
+ margin-left: 0;
531
+ margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
532
+ }
525
533
  .np-avatar-layout-horizontal {
526
534
  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
527
535
  height: var(--np-avatar-layout-size);
@@ -535,6 +543,9 @@ div.critical-comms .critical-comms-body {
535
543
  .np-avatar-layout-horizontal-child {
536
544
  margin-left: calc(var(--np-avatar-offset) * -1);
537
545
  }
546
+ [dir="rtl"] .np-avatar-layout-horizontal-child {
547
+ margin-right: calc(var(--np-avatar-offset) * -1);
548
+ }
538
549
  .np-icon-button {
539
550
  border: none;
540
551
  }
@@ -705,6 +716,245 @@ div.critical-comms .critical-comms-body {
705
716
  .np-btn.disabled[class] {
706
717
  pointer-events: auto;
707
718
  }
719
+ .wds-Button {
720
+ --Button-background: var(--color-interactive-accent);
721
+ --Button-background-hover: var(--color-interactive-accent-hover);
722
+ --Button-background-active: var(--color-interactive-accent-active);
723
+ --Button-color: var(--color-interactive-control);
724
+ --Button-padding: var(--size-8) var(--size-12);
725
+ --Button-border-radius: var(--radius-full);
726
+ --Button-size-small-padding: 5px var(--size-12);
727
+ --Button-size-medium-padding: var(--size-8) var(--size-12);
728
+ --Button-size-large-padding: var(--size-12) var(--size-16);
729
+ --Button-transition-duration: 150ms;
730
+ --Button-transition-easing: ease-in-out;
731
+ --Button-secondary-background: var(--color-interactive-neutral);
732
+ --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
733
+ --Button-secondary-background-active: var(--color-interactive-neutral-active);
734
+ --Button-secondary-color: var(--color-interactive-primary);
735
+ --Button-tertiary-background: var(--color-background-neutral);
736
+ --Button-tertiary-background-hover: var(--color-background-neutral-hover);
737
+ --Button-tertiary-background-active: var(--color-background-neutral-active);
738
+ --Button-tertiary-color: var(--color-content-primary);
739
+ --Button-minimal-background: transparent;
740
+ --Button-minimal-background-hover: var(--color-background-screen-hover);
741
+ --Button-minimal-background-active: var(--color-background-screen-active);
742
+ --Button-minimal-color: var(--color-interactive-primary);
743
+ --Button-primary-negative-background: var(--color-sentiment-negative-primary);
744
+ --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
745
+ --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
746
+ --Button-primary-negative-color: var(--color-contrast);
747
+ --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
748
+ --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
749
+ --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
750
+ --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
751
+ }
752
+ .np-theme-personal--bright-green .wds-Button {
753
+ --color-contrast: #FFFFFF;
754
+ --Button-secondary-color: var(--color-interactive-control);
755
+ --Button-secondary-negative-color: var(--color-contrast);
756
+ }
757
+ /* Button Styles */
758
+ .wds-Button {
759
+ display: inline-flex;
760
+ flex: none;
761
+ width: auto;
762
+ align-items: center;
763
+ justify-content: center;
764
+ vertical-align: middle;
765
+ text-align: center;
766
+ -webkit-text-decoration: none;
767
+ text-decoration: none;
768
+ white-space: nowrap;
769
+ word-wrap: break-word;
770
+ -webkit-appearance: none;
771
+ -moz-appearance: none;
772
+ appearance: none;
773
+ background-color: var(--Button-background);
774
+ border: none;
775
+ border-radius: var(--Button-border-radius);
776
+ color: var(--Button-color);
777
+ cursor: pointer;
778
+ padding: var(--Button-padding);
779
+ transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
780
+ }
781
+ .wds-Button:focus {
782
+ -webkit-text-decoration: none;
783
+ text-decoration: none;
784
+ }
785
+ .wds-Button:hover {
786
+ background-color: var(--Button-background-hover);
787
+ -webkit-text-decoration: none;
788
+ text-decoration: none;
789
+ }
790
+ .wds-Button:active {
791
+ background-color: var(--Button-background-active);
792
+ -webkit-text-decoration: none;
793
+ text-decoration: none;
794
+ }
795
+ .wds-Button.wds-Button--disabled,
796
+ .wds-Button:disabled {
797
+ mix-blend-mode: luminosity;
798
+ opacity: 0.45;
799
+ cursor: not-allowed;
800
+ }
801
+ .wds-Button.wds-Button--disabled:hover,
802
+ .wds-Button:disabled:hover,
803
+ .wds-Button.wds-Button--disabled:active,
804
+ .wds-Button:disabled:active {
805
+ background-color: var(--Button-background);
806
+ }
807
+ .wds-Button--secondary {
808
+ --Button-background: var(--Button-secondary-background);
809
+ --Button-background-hover: var(--Button-secondary-background-hover);
810
+ --Button-background-active: var(--Button-secondary-background-active);
811
+ --Button-color: var(--Button-secondary-color);
812
+ }
813
+ .wds-Button--tertiary {
814
+ --Button-background: var(--Button-tertiary-background);
815
+ --Button-background-hover: var(--Button-tertiary-background-hover);
816
+ --Button-background-active: var(--Button-tertiary-background-active);
817
+ --Button-color: var(--Button-tertiary-color);
818
+ }
819
+ .wds-Button--tertiary .wds-Button-icon--end {
820
+ color: var(--color-interactive-primary);
821
+ }
822
+ .wds-Button--minimal {
823
+ --Button-background: var(--Button-minimal-background);
824
+ --Button-background-hover: var(--Button-minimal-background-hover);
825
+ --Button-background-active: var(--Button-minimal-background-active);
826
+ --Button-color: var(--Button-minimal-color);
827
+ -webkit-text-decoration: underline;
828
+ text-decoration: underline;
829
+ text-underline-offset: 3px;
830
+ text-decoration-thickness: 1px;
831
+ }
832
+ .wds-Button--minimal:hover,
833
+ .wds-Button--minimal:hover:active {
834
+ -webkit-text-decoration: underline;
835
+ text-decoration: underline;
836
+ }
837
+ .wds-Button--negative.wds-Button--primary {
838
+ --Button-background: var(--Button-primary-negative-background);
839
+ --Button-background-hover: var(--Button-primary-negative-background-hover);
840
+ --Button-background-active: var(--Button-primary-negative-background-active);
841
+ --Button-color: var(--Button-primary-negative-color);
842
+ }
843
+ .wds-Button--negative.wds-Button--secondary {
844
+ --Button-background: var(--Button-secondary-negative-background);
845
+ --Button-background-hover: var(--Button-secondary-negative-background-hover);
846
+ --Button-background-active: var(--Button-secondary-negative-background-active);
847
+ --Button-color: var(--Button-secondary-negative-color);
848
+ }
849
+ .wds-Button--small {
850
+ --Button-padding: var(--Button-size-small-padding);
851
+ }
852
+ .wds-Button--small .wds-Button-icon--start {
853
+ margin-right: 4px;
854
+ margin-right: var(--size-4);
855
+ }
856
+ [dir="rtl"] .wds-Button--small .wds-Button-icon--start {
857
+ margin-right: 0;
858
+ margin-left: 4px;
859
+ margin-left: var(--size-4);
860
+ }
861
+ .wds-Button--medium {
862
+ --Button-padding: var(--Button-size-medium-padding);
863
+ }
864
+ .wds-Button--large {
865
+ --Button-padding: var(--Button-size-large-padding);
866
+ }
867
+ .wds-Button--block {
868
+ width: 100%;
869
+ }
870
+ .wds-Button-avatars {
871
+ display: inline-flex;
872
+ margin-right: 5px;
873
+ margin-left: calc(4px * -1);
874
+ margin-left: calc(var(--size-4) * -1);
875
+ }
876
+ [dir="rtl"] .wds-Button-avatars {
877
+ margin-right: 0;
878
+ margin-left: 5px;
879
+ }
880
+ .wds-Button-avatars .np-avatar-view .np-avatar-view-content {
881
+ color: var(--Button-color);
882
+ }
883
+ .wds-Button-icon {
884
+ display: inline-block;
885
+ }
886
+ .wds-Button-icon--start {
887
+ margin-right: 8px;
888
+ margin-right: var(--size-8);
889
+ }
890
+ [dir="rtl"] .wds-Button-icon--start {
891
+ margin-right: 0;
892
+ margin-left: 8px;
893
+ margin-left: var(--size-8);
894
+ }
895
+ .wds-Button-icon--end {
896
+ margin-left: 4px;
897
+ margin-left: var(--size-4);
898
+ }
899
+ [dir="rtl"] .wds-Button-icon--end {
900
+ margin-left: 0;
901
+ margin-right: 4px;
902
+ margin-right: var(--size-4);
903
+ }
904
+ .wds-Button-content {
905
+ position: relative;
906
+ }
907
+ .wds-Button-content--loading .wds-Button-label,
908
+ .wds-Button-content--loading .wds-Button-media,
909
+ .wds-Button-content--loading .wds-Button-icon {
910
+ visibility: hidden;
911
+ opacity: 0;
912
+ }
913
+ .wds-Button-label {
914
+ display: flex;
915
+ justify-content: center;
916
+ align-items: center;
917
+ position: relative;
918
+ }
919
+ .wds-Button-loader {
920
+ position: absolute;
921
+ display: flex;
922
+ justify-content: center;
923
+ align-items: center;
924
+ width: 100%;
925
+ height: 100%;
926
+ }
927
+ .wds-Button-loader .process-circle {
928
+ stroke: var(--Button-color);
929
+ }
930
+ /* RTL Styles */
931
+ [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
932
+ transform: rotate(180deg);
933
+ }
934
+ [dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
935
+ transform: rotate(180deg);
936
+ }
937
+ /* Avatar border transparency */
938
+ /* dark buttons get 20% transparency, light buttons get 12% */
939
+ .wds-Button-avatars .np-circle {
940
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
941
+ }
942
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
943
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
944
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
945
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
946
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
+ }
948
+ .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
949
+ .np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
950
+ .np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
951
+ .np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
952
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
953
+ }
954
+ .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
955
+ .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
956
+ --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
957
+ }
708
958
  .np-card {
709
959
  overflow: hidden;
710
960
  transition-property: transform, box-shadow;
@@ -19,9 +19,7 @@ const PrimitiveAnchor = /*#__PURE__*/React.forwardRef(({
19
19
  onKeyDown,
20
20
  ...props
21
21
  }, ref) => {
22
- const anchorClasses = clsx.clsx('wds-Anchor', {
23
- 'wds-Anchor--disabled': disabled
24
- }, className);
22
+ const anchorClasses = clsx.clsx(className);
25
23
  const handleClick = React.useCallback(event => {
26
24
  if (disabled) {
27
25
  event.preventDefault();
@@ -1 +1 @@
1
- {"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(\n 'wds-Anchor',\n {\n 'wds-Anchor--disabled': disabled,\n },\n className,\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CACxB,YAAY,EACZ;AACE,IAAA,sBAAsB,EAAEX,QAAAA;GACzB,EACDH,SAAS,CACV,CAAA;AAED,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
1
+ {"version":3,"file":"PrimitiveAnchor.js","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;;;AAaA,MAAMA,eAAe,gBAAGC,gBAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,SAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,iBAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,iBAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,iBAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,iBAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,iBAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,iBAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,cAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
@@ -17,9 +17,7 @@ const PrimitiveAnchor = /*#__PURE__*/forwardRef(({
17
17
  onKeyDown,
18
18
  ...props
19
19
  }, ref) => {
20
- const anchorClasses = clsx('wds-Anchor', {
21
- 'wds-Anchor--disabled': disabled
22
- }, className);
20
+ const anchorClasses = clsx(className);
23
21
  const handleClick = useCallback(event => {
24
22
  if (disabled) {
25
23
  event.preventDefault();
@@ -1 +1 @@
1
- {"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(\n 'wds-Anchor',\n {\n 'wds-Anchor--disabled': disabled,\n },\n className,\n );\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CACxB,YAAY,EACZ;AACE,IAAA,sBAAsB,EAAEX,QAAAA;GACzB,EACDH,SAAS,CACV,CAAA;AAED,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}
1
+ {"version":3,"file":"PrimitiveAnchor.mjs","sources":["../../../../src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx"],"sourcesContent":["import React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport type { PrimitiveAnchorProps } from '..';\n\n/**\n * The Primitive `PrimitiveAnchor` component is customisable link element that can be\n * used in various parts of the Wise Design System internally. It supports\n * different states such as disabled and provides event handlers for common\n * interactions like click, focus, blur, mouse enter, mouse leave, and key down.\n *\n * @see {@link PrimitiveAnchor} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-anchor--docs|Storybook Wise Design}\n */\nconst PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(\n (\n {\n children,\n className,\n href,\n id,\n disabled = false,\n testId,\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const anchorClasses = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n if (disabled) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLAnchorElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLAnchorElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are set to handle the `disabled` state for the link:\n *\n * - `aria-disabled`: Exposes the link as disabled to assistive technologies.\n * - `href`: Removed when `disabled` is true to prevent navigation.\n * - `role`: Set to 'link' when `disabled` is true to ensure the element\n * is still exposed as a link.\n *\n * For more details, refer to Scott O'Hara's article on disabling links:\n * https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n const anchorProps = {\n 'aria-disabled': disabled,\n className: anchorClasses,\n 'data-testid': testId,\n href: disabled ? undefined : href,\n id,\n ref,\n role: disabled ? 'link' : undefined,\n rel: props.target === '_blank' ? 'noopener noreferrer' : undefined,\n onClick: handleClick,\n onFocus: handleFocus,\n onBlur: handleBlur,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <a {...anchorProps}>{children}</a>;\n },\n);\n\nPrimitiveAnchor.displayName = 'PrimitiveAnchor';\n\nexport default PrimitiveAnchor;\n"],"names":["PrimitiveAnchor","forwardRef","children","className","href","id","disabled","testId","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","anchorClasses","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","anchorProps","undefined","role","rel","target","_jsx","displayName"],"mappings":";;;;AAaA,MAAMA,eAAe,gBAAGC,UAAU,CAChC,CACE;EACEC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,EAAE;AACFC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNC,YAAY;EACZC,YAAY;EACZC,SAAS;EACT,GAAGC,KAAAA;CACJ,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,aAAa,GAAGC,IAAI,CAACd,SAAS,CAAC,CAAA;AAErC,EAAA,MAAMe,WAAW,GAAGC,WAAW,CAC5BC,KAA0C,IAAI;AAC7C,IAAA,IAAId,QAAQ,EAAE;MACZc,KAAK,CAACC,cAAc,EAAE,CAAA;AACxB,KAAC,MAAM;MACLb,OAAO,GAAGY,KAAK,CAAC,CAAA;AAClB,KAAA;AACF,GAAC,EACD,CAACd,QAAQ,EAAEE,OAAO,CAAC,CACpB,CAAA;AAED,EAAA,MAAMc,WAAW,GAAGH,WAAW,CAC5BC,KAA0C,IAAI;IAC7CX,OAAO,GAAGW,KAAK,CAAC,CAAA;AAClB,GAAC,EACD,CAACX,OAAO,CAAC,CACV,CAAA;AAED,EAAA,MAAMc,UAAU,GAAGJ,WAAW,CAC3BC,KAA0C,IAAI;IAC7CV,MAAM,GAAGU,KAAK,CAAC,CAAA;AACjB,GAAC,EACD,CAACV,MAAM,CAAC,CACT,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGL,WAAW,CACjCC,KAA0C,IAAI;IAC7CT,YAAY,GAAGS,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACT,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,gBAAgB,GAAGN,WAAW,CACjCC,KAA0C,IAAI;IAC7CR,YAAY,GAAGQ,KAAK,CAAC,CAAA;AACvB,GAAC,EACD,CAACR,YAAY,CAAC,CACf,CAAA;AAED,EAAA,MAAMc,aAAa,GAAGP,WAAW,CAC9BC,KAA6C,IAAI;IAChDP,SAAS,GAAGO,KAAK,CAAC,CAAA;AACpB,GAAC,EACD,CAACP,SAAS,CAAC,CACZ,CAAA;AAED;;;;;;;;;;AAUG;AACH,EAAA,MAAMc,WAAW,GAAG;AAClB,IAAA,eAAe,EAAErB,QAAQ;AACzBH,IAAAA,SAAS,EAAEa,aAAa;AACxB,IAAA,aAAa,EAAET,MAAM;AACrBH,IAAAA,IAAI,EAAEE,QAAQ,GAAGsB,SAAS,GAAGxB,IAAI;IACjCC,EAAE;IACFU,GAAG;AACHc,IAAAA,IAAI,EAAEvB,QAAQ,GAAG,MAAM,GAAGsB,SAAS;IACnCE,GAAG,EAAEhB,KAAK,CAACiB,MAAM,KAAK,QAAQ,GAAG,qBAAqB,GAAGH,SAAS;AAClEpB,IAAAA,OAAO,EAAEU,WAAW;AACpBT,IAAAA,OAAO,EAAEa,WAAW;AACpBZ,IAAAA,MAAM,EAAEa,UAAU;AAClBZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,YAAY,EAAEa,gBAAgB;AAC9BZ,IAAAA,SAAS,EAAEa,aAAa;IACxB,GAAGZ,KAAAA;GACJ,CAAA;AAED,EAAA,oBAAOkB,GAAA,CAAA,GAAA,EAAA;AAAA,IAAA,GAAOL,WAAW;AAAAzB,IAAAA,QAAA,EAAGA,QAAAA;AAAQ,GAAI,CAAC,CAAA;AAC3C,CAAC,EACF;AAEDF,eAAe,CAACiC,WAAW,GAAG,iBAAiB;;;;"}