@transferwise/components 0.0.0-experimental-9e19bae → 0.0.0-experimental-b762045

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 (148) hide show
  1. package/build/avatarLayout/AvatarLayout.js +2 -9
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +2 -9
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/button/Button.js +97 -76
  6. package/build/button/Button.js.map +1 -1
  7. package/build/button/Button.mjs +97 -76
  8. package/build/button/Button.mjs.map +1 -1
  9. package/build/circularButton/CircularButton.js +19 -24
  10. package/build/circularButton/CircularButton.js.map +1 -1
  11. package/build/circularButton/CircularButton.mjs +20 -25
  12. package/build/circularButton/CircularButton.mjs.map +1 -1
  13. package/build/criticalBanner/CriticalCommsBanner.js +2 -2
  14. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  15. package/build/criticalBanner/CriticalCommsBanner.mjs +1 -1
  16. package/build/definitionList/DefinitionList.js.map +1 -1
  17. package/build/definitionList/DefinitionList.mjs.map +1 -1
  18. package/build/header/Header.js +2 -2
  19. package/build/header/Header.js.map +1 -1
  20. package/build/header/Header.mjs +1 -1
  21. package/build/i18n/de.json +1 -0
  22. package/build/i18n/de.json.js +1 -0
  23. package/build/i18n/de.json.js.map +1 -1
  24. package/build/i18n/de.json.mjs +1 -0
  25. package/build/i18n/de.json.mjs.map +1 -1
  26. package/build/i18n/it.json +1 -0
  27. package/build/i18n/it.json.js +1 -0
  28. package/build/i18n/it.json.js.map +1 -1
  29. package/build/i18n/it.json.mjs +1 -0
  30. package/build/i18n/it.json.mjs.map +1 -1
  31. package/build/i18n/th.json +1 -0
  32. package/build/i18n/th.json.js +1 -0
  33. package/build/i18n/th.json.js.map +1 -1
  34. package/build/i18n/th.json.mjs +1 -0
  35. package/build/i18n/th.json.mjs.map +1 -1
  36. package/build/index.js +2 -2
  37. package/build/index.mjs +1 -1
  38. package/build/link/Link.js +3 -8
  39. package/build/link/Link.js.map +1 -1
  40. package/build/link/Link.mjs +3 -8
  41. package/build/link/Link.mjs.map +1 -1
  42. package/build/main.css +17 -431
  43. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js +3 -1
  44. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.js.map +1 -1
  45. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs +3 -1
  46. package/build/primitives/PrimitiveAnchor/src/PrimitiveAnchor.mjs.map +1 -1
  47. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js +4 -1
  48. package/build/primitives/PrimitiveButton/src/PrimitiveButton.js.map +1 -1
  49. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs +4 -1
  50. package/build/primitives/PrimitiveButton/src/PrimitiveButton.mjs.map +1 -1
  51. package/build/select/Select.js +3 -5
  52. package/build/select/Select.js.map +1 -1
  53. package/build/select/Select.mjs +2 -4
  54. package/build/select/Select.mjs.map +1 -1
  55. package/build/styles/avatarLayout/AvatarLayout.css +0 -11
  56. package/build/styles/button/Button.css +16 -255
  57. package/build/styles/circularButton/CircularButton.css +17 -158
  58. package/build/styles/main.css +17 -431
  59. package/build/types/avatarLayout/AvatarLayout.d.ts +2 -1
  60. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  61. package/build/types/avatarLayout/index.d.ts +0 -1
  62. package/build/types/avatarLayout/index.d.ts.map +1 -1
  63. package/build/types/button/Button.d.ts +23 -1
  64. package/build/types/button/Button.d.ts.map +1 -1
  65. package/build/types/button/index.d.ts +2 -2
  66. package/build/types/button/index.d.ts.map +1 -1
  67. package/build/types/circularButton/CircularButton.d.ts +11 -4
  68. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  69. package/build/types/definitionList/DefinitionList.d.ts +1 -2
  70. package/build/types/definitionList/DefinitionList.d.ts.map +1 -1
  71. package/build/types/link/Link.d.ts +2 -2
  72. package/build/types/link/Link.d.ts.map +1 -1
  73. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.d.ts.map +1 -1
  74. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts +1 -1
  75. package/build/types/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.d.ts.map +1 -1
  76. package/build/types/primitives/PrimitiveButton/src/PrimitiveButton.d.ts.map +1 -1
  77. package/build/types/select/Select.d.ts.map +1 -1
  78. package/build/upload/steps/completeStep/completeStep.js +2 -2
  79. package/build/upload/steps/completeStep/completeStep.js.map +1 -1
  80. package/build/upload/steps/completeStep/completeStep.mjs +1 -1
  81. package/build/upload/steps/processingStep/processingStep.js +2 -2
  82. package/build/upload/steps/processingStep/processingStep.js.map +1 -1
  83. package/build/upload/steps/processingStep/processingStep.mjs +1 -1
  84. package/build/uploadInput/UploadInput.js +3 -3
  85. package/build/uploadInput/UploadInput.js.map +1 -1
  86. package/build/uploadInput/UploadInput.mjs +1 -1
  87. package/package.json +3 -3
  88. package/src/avatarLayout/AvatarLayout.css +0 -11
  89. package/src/avatarLayout/AvatarLayout.less +1 -18
  90. package/src/avatarLayout/AvatarLayout.tsx +3 -11
  91. package/src/avatarLayout/index.ts +0 -1
  92. package/src/button/Button.css +16 -255
  93. package/src/button/Button.less +14 -215
  94. package/src/button/Button.spec.tsx +231 -54
  95. package/src/button/Button.story.tsx +136 -287
  96. package/src/button/Button.tsx +131 -84
  97. package/src/button/__snapshots__/{LegacyButton.spec.tsx.snap → Button.spec.tsx.snap} +22 -22
  98. package/src/button/index.ts +3 -2
  99. package/src/circularButton/CircularButton.css +17 -158
  100. package/src/circularButton/CircularButton.less +22 -91
  101. package/src/circularButton/CircularButton.story.tsx +45 -24
  102. package/src/circularButton/CircularButton.tsx +39 -28
  103. package/src/definitionList/DefinitionList.story.tsx +57 -57
  104. package/src/definitionList/DefinitionList.tsx +1 -1
  105. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +1 -1
  106. package/src/i18n/de.json +1 -0
  107. package/src/i18n/it.json +1 -0
  108. package/src/i18n/th.json +1 -0
  109. package/src/iconButton/IconButton.story.tsx +6 -6
  110. package/src/inputs/SelectInput.story.tsx +1 -1
  111. package/src/link/Link.tsx +6 -15
  112. package/src/main.css +17 -431
  113. package/src/main.less +0 -1
  114. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx +7 -1
  115. package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts +1 -1
  116. package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx +3 -1
  117. package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx +8 -1
  118. package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx +5 -2
  119. package/src/select/Select.tsx +0 -1
  120. package/src/slidingPanel/SlidingPanel.spec.tsx +69 -0
  121. package/build/button/Button.resolver.js +0 -78
  122. package/build/button/Button.resolver.js.map +0 -1
  123. package/build/button/Button.resolver.mjs +0 -76
  124. package/build/button/Button.resolver.mjs.map +0 -1
  125. package/build/button/LegacyButton.js +0 -114
  126. package/build/button/LegacyButton.js.map +0 -1
  127. package/build/button/LegacyButton.mjs +0 -112
  128. package/build/button/LegacyButton.mjs.map +0 -1
  129. package/build/styles/button/Button.vars.css +0 -59
  130. package/build/styles/button/LegacyButton.css +0 -23
  131. package/build/types/button/Button.resolver.d.ts +0 -31
  132. package/build/types/button/Button.resolver.d.ts.map +0 -1
  133. package/build/types/button/Button.types.d.ts +0 -58
  134. package/build/types/button/Button.types.d.ts.map +0 -1
  135. package/build/types/button/LegacyButton.d.ts +0 -30
  136. package/build/types/button/LegacyButton.d.ts.map +0 -1
  137. package/src/button/Button.resolver.tsx +0 -120
  138. package/src/button/Button.types.ts +0 -79
  139. package/src/button/Button.vars.css +0 -59
  140. package/src/button/Button.vars.less +0 -73
  141. package/src/button/LegacyButton.css +0 -23
  142. package/src/button/LegacyButton.less +0 -24
  143. package/src/button/LegacyButton.spec.tsx +0 -245
  144. package/src/button/LegacyButton.story.tsx +0 -224
  145. package/src/button/LegacyButton.tsx +0 -161
  146. package/src/circularButton/_button-label-states.less +0 -34
  147. package/src/definitionList/DefinitionList.spec.js +0 -91
  148. package/src/slidingPanel/SlidingPanel.spec.js +0 -56
package/src/circularButton/CircularButton.tsx CHANGED
@@ -1,20 +1,27 @@
1
1
  import { clsx } from 'clsx';
2
- import { cloneElement } from 'react';
3
2
 
4
3
  import Body from '../body/Body';
5
- import { typeClassMap, priorityClassMap } from '../button/classMap';
6
- import { Breakpoint, ControlType, Priority, Typography } from '../common';
7
- import Circle from '../common/circle';
8
- import { useMedia } from '../common/hooks/useMedia';
4
+ import { ControlType, Priority, Typography } from '../common';
5
+ import IconButton, { IconButtonProps } from '../iconButton';
6
+
7
+ /**
8
+ * @deprecated use `'default'` instead
9
+ */
10
+ type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;
9
11
 
10
12
  export interface CircularButtonProps {
11
13
  className?: string;
12
14
  children: string;
13
15
  disabled?: boolean;
14
- icon: React.ReactElement<{ size?: unknown }>;
15
- onClick?: React.MouseEventHandler<HTMLInputElement>;
16
+ icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;
17
+ onClick?: React.MouseEventHandler<HTMLInputElement> &
18
+ React.MouseEventHandler<HTMLButtonElement> &
19
+ React.MouseEventHandler<HTMLAnchorElement>;
16
20
  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
17
- type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
21
+ /**
22
+ * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
23
+ */
24
+ type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
18
25
  }
19
26
 
20
27
  const CircularButton = ({
@@ -22,30 +29,34 @@ const CircularButton = ({
22
29
  children,
23
30
  disabled,
24
31
  icon,
32
+ onClick,
25
33
  priority = Priority.PRIMARY,
26
- type = ControlType.ACCENT,
27
- ...rest
34
+ type = 'default',
28
35
  }: CircularButtonProps) => {
29
- const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
30
-
31
- const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
32
-
33
- const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
34
-
35
36
  return (
36
- <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
37
- <Circle
38
- as="input"
39
- // @ts-expect-error it's input[type=button] element
40
- type="button"
41
- size={isTinyViewport ? 72 : 56}
42
- aria-label={children}
43
- className={classes}
37
+ <label
38
+ className={clsx(
39
+ 'np-circular-btn',
40
+ `np-circular-btn-${priority}-${type}`,
41
+ { 'np-circular-btn-disabled': disabled },
42
+ className,
43
+ )}
44
+ >
45
+ <IconButton
46
+ size={56}
47
+ priority={priority}
48
+ type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}
49
+ className={clsx('m-b-1')}
44
50
  disabled={disabled}
45
- {...rest}
46
- />
47
- {iconElement}
48
- <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
51
+ onClick={onClick}
52
+ >
53
+ {icon}
54
+ </IconButton>
55
+ <Body
56
+ as="span"
57
+ className={clsx('np-circular-btn-label', { disabled })}
58
+ type={Typography.BODY_DEFAULT_BOLD}
59
+ >
49
60
  {children}
50
61
  </Body>
51
62
  </label>
package/src/definitionList/DefinitionList.story.tsx CHANGED
@@ -1,19 +1,29 @@
1
1
  import { action } from '@storybook/addon-actions';
2
- import { select, text, boolean } from '@storybook/addon-knobs';
3
2
 
4
3
  import { Layout } from '../common';
5
4
 
6
- import DefinitionList from './DefinitionList';
5
+ import DefinitionList, { type DefinitionListLayout } from './DefinitionList';
6
+ import { lorem10 } from '../test-utils';
7
+ import Section from '../section';
8
+ import Header from '../header';
7
9
 
8
10
  export default {
9
11
  component: DefinitionList,
10
12
  title: 'Typography/DefinitionList',
11
13
  };
12
14
 
15
+ const layouts: DefinitionListLayout[] = [
16
+ Layout.VERTICAL_TWO_COLUMN,
17
+ Layout.VERTICAL_ONE_COLUMN,
18
+ Layout.HORIZONTAL_JUSTIFIED,
19
+ Layout.HORIZONTAL_LEFT_ALIGNED,
20
+ Layout.HORIZONTAL_RIGHT_ALIGNED,
21
+ ];
22
+
13
23
  const definitions = [
14
24
  {
15
- title: text('title', 'Editable title'),
16
- value: text('value', 'Editable value'),
25
+ title: 'Definition List title',
26
+ value: 'Definition List value',
17
27
  key: 'first',
18
28
  },
19
29
  {
@@ -23,67 +33,57 @@ const definitions = [
23
33
  },
24
34
  {
25
35
  title: 'Long strings will wrap',
26
- value: 'And values with long words will eventuallybreakontothenextline',
36
+ value: lorem10,
27
37
  key: 'third',
28
38
  },
29
39
  ];
30
40
 
31
41
  export const Basic = () => {
32
- const muted = boolean('muted', false);
33
- const layout = select(
34
- 'layout',
35
- [
36
- Layout.VERTICAL_TWO_COLUMN,
37
- Layout.VERTICAL_ONE_COLUMN,
38
- Layout.HORIZONTAL_JUSTIFIED,
39
- Layout.HORIZONTAL_LEFT_ALIGNED,
40
- Layout.HORIZONTAL_RIGHT_ALIGNED,
41
- ],
42
- Layout.HORIZONTAL_LEFT_ALIGNED,
43
- );
44
-
45
- return <DefinitionList layout={layout} muted={muted} definitions={definitions} />;
42
+ return layouts.map((layout) => (
43
+ <Section key={layout}>
44
+ <Header title={`Instace of: ${layout}`} />
45
+ <DefinitionList layout={layout} definitions={definitions} />
46
+ </Section>
47
+ ));
46
48
  };
47
49
 
48
50
  export const WithActionButtons = () => {
49
- const muted = boolean('muted', false);
50
- const layout = select(
51
- 'layout',
52
- [
53
- Layout.VERTICAL_TWO_COLUMN,
54
- Layout.VERTICAL_ONE_COLUMN,
55
- Layout.HORIZONTAL_JUSTIFIED,
56
- Layout.HORIZONTAL_LEFT_ALIGNED,
57
- Layout.HORIZONTAL_RIGHT_ALIGNED,
58
- ],
59
- Layout.HORIZONTAL_LEFT_ALIGNED,
60
- );
61
-
62
51
  return (
63
- <DefinitionList
64
- layout={layout}
65
- muted={muted}
66
- definitions={[
67
- ...definitions,
68
- {
69
- title: 'Action buttons are useful',
70
- value: 'You can do all kinds of neat things with actions buttons!',
71
- key: 'fourth',
72
- action: {
73
- label: 'Epic button',
74
- onClick: action('Probably the best action event you have ever seen, in the world!'),
75
- },
76
- },
77
- {
78
- title: 'tiny',
79
- value: 'tiny',
80
- key: 'fifth',
81
- action: {
82
- label: 'Epic button',
83
- onClick: action('Hello from the Tiny Button :)'),
84
- },
85
- },
86
- ]}
87
- />
52
+ <>
53
+ {layouts.map((layout) => (
54
+ <Section key={layout}>
55
+ <Header title={`Instace of: ${layout}`} />
56
+ <DefinitionList
57
+ key={layout}
58
+ layout={layout}
59
+ definitions={[
60
+ ...definitions,
61
+ {
62
+ title: 'Action buttons are useful',
63
+ value: lorem10,
64
+ key: 'fourth',
65
+ action: {
66
+ label: 'Epic button',
67
+ onClick: action(lorem10),
68
+ },
69
+ },
70
+ {
71
+ title: 'tiny',
72
+ value: 'tiny',
73
+ key: 'fifth',
74
+ action: {
75
+ label: 'Epic button',
76
+ onClick: action(lorem10),
77
+ },
78
+ },
79
+ ]}
80
+ />
81
+ </Section>
82
+ ))}
83
+ </>
88
84
  );
89
85
  };
86
+
87
+ export const Muted = () => {
88
+ return <DefinitionList muted definitions={definitions} />;
89
+ };
package/src/definitionList/DefinitionList.tsx CHANGED
@@ -13,7 +13,7 @@ export interface DefinitionListDefinition {
13
13
  key: string;
14
14
  }
15
15
 
16
- type DefinitionListLayout =
16
+ export type DefinitionListLayout =
17
17
  `${Layout.VERTICAL_TWO_COLUMN | Layout.VERTICAL_ONE_COLUMN | Layout.HORIZONTAL_JUSTIFIED | Layout.HORIZONTAL_LEFT_ALIGNED | Layout.HORIZONTAL_RIGHT_ALIGNED}`;
18
18
 
19
19
  export interface DefinitionListProps {
package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap CHANGED
@@ -12,7 +12,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
12
12
  aria-disabled="false"
13
13
  aria-label="back to previous step"
14
14
  aria-live="off"
15
- class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
15
+ class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
16
16
  style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
17
17
  type="button"
18
18
  >
package/src/i18n/de.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Alle Dateiformate",
55
55
  "neptune.UploadButton.dropFiles": "Datei zum Hochladen in dieses Feld ziehen",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kleiner als {size} MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximal {maxFiles} Dateien.",
57
58
  "neptune.UploadButton.uploadFile": "Datei hochladen",
58
59
  "neptune.UploadButton.uploadFiles": "Dateien hochladen",
59
60
  "neptune.UploadInput.deleteModalBody": "Wenn du diese Datei entfernst, wird sie aus unserem System gelöscht werden.",
package/src/i18n/it.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Tutti i tipi di file",
55
55
  "neptune.UploadButton.dropFiles": "Rilascia file per iniziare a caricare",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, minore di {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Max {maxFiles} file.",
57
58
  "neptune.UploadButton.uploadFile": "Carica un file",
58
59
  "neptune.UploadButton.uploadFiles": "Carica i file",
59
60
  "neptune.UploadInput.deleteModalBody": "Rimuovere questo file lo cancellerà dal nostro sistema.",
package/src/i18n/th.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
55
55
  "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
56
56
  "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
57
+ "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
57
58
  "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
58
59
  "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
59
60
  "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",
package/src/iconButton/IconButton.story.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  /* eslint-disable react/jsx-key */
2
2
  import { Meta, StoryObj } from '@storybook/react';
3
- import { ArrowLeft } from '@transferwise/icons';
3
+ import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
4
4
  import IconButton, { Props } from './IconButton';
5
5
  import { action } from '@storybook/addon-actions';
6
6
  import Body from '../body';
@@ -24,7 +24,7 @@ const Template = ({ size, disabled }: Props) => {
24
24
  type="default"
25
25
  onClick={action('button click')}
26
26
  >
27
- <ArrowLeft />
27
+ <Plus />
28
28
  </IconButton>
29
29
  <IconButton
30
30
  size={size}
@@ -34,7 +34,7 @@ const Template = ({ size, disabled }: Props) => {
34
34
  type="default"
35
35
  onClick={action('button click')}
36
36
  >
37
- <ArrowLeft />
37
+ <Defrost />
38
38
  </IconButton>
39
39
  <IconButton
40
40
  size={size}
@@ -54,7 +54,7 @@ const Template = ({ size, disabled }: Props) => {
54
54
  type="default"
55
55
  onClick={action('button click')}
56
56
  >
57
- <ArrowLeft />
57
+ <Menu />
58
58
  </IconButton>
59
59
  <IconButton
60
60
  size={size}
@@ -64,7 +64,7 @@ const Template = ({ size, disabled }: Props) => {
64
64
  type="negative"
65
65
  onClick={action('button click')}
66
66
  >
67
- <ArrowLeft />
67
+ <Cross />
68
68
  </IconButton>
69
69
  <IconButton
70
70
  size={size}
@@ -74,7 +74,7 @@ const Template = ({ size, disabled }: Props) => {
74
74
  type="negative"
75
75
  onClick={action('button click')}
76
76
  >
77
- <ArrowLeft />
77
+ <Edit />
78
78
  </IconButton>
79
79
  </>
80
80
  );
package/src/inputs/SelectInput.story.tsx CHANGED
@@ -5,7 +5,7 @@ import { Flag } from '@wise/art';
5
5
  import { clsx } from 'clsx';
6
6
  import { useState } from 'react';
7
7
 
8
- import Button from '../button';
8
+ import Button from '../button/Button';
9
9
  import { getMonthNames } from '../common/dateUtils';
10
10
  import Drawer from '../drawer';
11
11
  import { Field } from '../field/Field';
package/src/link/Link.tsx CHANGED
@@ -1,14 +1,13 @@
1
1
  import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
2
2
  import { clsx } from 'clsx';
3
+ import { AnchorHTMLAttributes } from 'react';
3
4
  import { useIntl } from 'react-intl';
4
- import { PrimitiveAnchor } from '../primitives';
5
- import type { PrimitiveAnchorProps } from '../primitives';
6
5
 
7
6
  import { LinkLarge, LinkDefault } from '../common';
8
7
 
9
8
  import messages from './Link.messages';
10
9
 
11
- export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
10
+ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
12
11
 
13
12
  /**
14
13
  * Standard Link component with navigate away icon
@@ -25,30 +24,22 @@ const Link = ({
25
24
  onClick,
26
25
  ...props
27
26
  }: Props) => {
28
- const { formatMessage } = useIntl();
29
27
  const isBlank = target === '_blank';
30
28
 
31
- const classNames = clsx(
32
- 'np-link',
33
- 'd-inline-flex',
34
- {
35
- [`np-text-${type}`]: type,
36
- },
37
- className,
38
- );
29
+ const { formatMessage } = useIntl();
39
30
 
40
31
  return (
41
- <PrimitiveAnchor
32
+ <a
42
33
  href={href}
43
34
  target={target}
44
- className={classNames}
35
+ className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
45
36
  aria-label={ariaLabel}
46
37
  rel={isBlank ? 'noreferrer' : undefined}
47
38
  onClick={onClick}
48
39
  {...props}
49
40
  >
50
41
  {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
51
- </PrimitiveAnchor>
42
+ </a>
52
43
  );
53
44
  };
54
45