@transferwise/components 46.84.1 → 46.86.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 (163) hide show
  1. package/build/avatarLayout/AvatarLayout.js +1 -0
  2. package/build/avatarLayout/AvatarLayout.js.map +1 -1
  3. package/build/avatarLayout/AvatarLayout.mjs +1 -0
  4. package/build/avatarLayout/AvatarLayout.mjs.map +1 -1
  5. package/build/circularButton/CircularButton.js +18 -21
  6. package/build/circularButton/CircularButton.js.map +1 -1
  7. package/build/circularButton/CircularButton.mjs +19 -22
  8. package/build/circularButton/CircularButton.mjs.map +1 -1
  9. package/build/definitionList/DefinitionList.js.map +1 -1
  10. package/build/definitionList/DefinitionList.mjs.map +1 -1
  11. package/build/dimmer/Dimmer.js.map +1 -1
  12. package/build/dimmer/Dimmer.mjs.map +1 -1
  13. package/build/i18n/de.json +1 -0
  14. package/build/i18n/de.json.js +1 -0
  15. package/build/i18n/de.json.js.map +1 -1
  16. package/build/i18n/de.json.mjs +1 -0
  17. package/build/i18n/de.json.mjs.map +1 -1
  18. package/build/i18n/en.json +1 -0
  19. package/build/i18n/en.json.js +1 -0
  20. package/build/i18n/en.json.js.map +1 -1
  21. package/build/i18n/en.json.mjs +1 -0
  22. package/build/i18n/en.json.mjs.map +1 -1
  23. package/build/i18n/es.json +1 -0
  24. package/build/i18n/es.json.js +1 -0
  25. package/build/i18n/es.json.js.map +1 -1
  26. package/build/i18n/es.json.mjs +1 -0
  27. package/build/i18n/es.json.mjs.map +1 -1
  28. package/build/i18n/fr.json +6 -5
  29. package/build/i18n/fr.json.js +6 -5
  30. package/build/i18n/fr.json.js.map +1 -1
  31. package/build/i18n/fr.json.mjs +6 -5
  32. package/build/i18n/fr.json.mjs.map +1 -1
  33. package/build/i18n/hu.json +1 -0
  34. package/build/i18n/hu.json.js +1 -0
  35. package/build/i18n/hu.json.js.map +1 -1
  36. package/build/i18n/hu.json.mjs +1 -0
  37. package/build/i18n/hu.json.mjs.map +1 -1
  38. package/build/i18n/id.json +1 -0
  39. package/build/i18n/id.json.js +1 -0
  40. package/build/i18n/id.json.js.map +1 -1
  41. package/build/i18n/id.json.mjs +1 -0
  42. package/build/i18n/id.json.mjs.map +1 -1
  43. package/build/i18n/it.json +1 -0
  44. package/build/i18n/it.json.js +1 -0
  45. package/build/i18n/it.json.js.map +1 -1
  46. package/build/i18n/it.json.mjs +1 -0
  47. package/build/i18n/it.json.mjs.map +1 -1
  48. package/build/i18n/pl.json +1 -0
  49. package/build/i18n/pl.json.js +1 -0
  50. package/build/i18n/pl.json.js.map +1 -1
  51. package/build/i18n/pl.json.mjs +1 -0
  52. package/build/i18n/pl.json.mjs.map +1 -1
  53. package/build/i18n/ro.json +1 -0
  54. package/build/i18n/ro.json.js +1 -0
  55. package/build/i18n/ro.json.js.map +1 -1
  56. package/build/i18n/ro.json.mjs +1 -0
  57. package/build/i18n/ro.json.mjs.map +1 -1
  58. package/build/i18n/th.json +6 -0
  59. package/build/i18n/th.json.js +6 -0
  60. package/build/i18n/th.json.js.map +1 -1
  61. package/build/i18n/th.json.mjs +6 -0
  62. package/build/i18n/th.json.mjs.map +1 -1
  63. package/build/i18n/tr.json +1 -0
  64. package/build/i18n/tr.json.js +1 -0
  65. package/build/i18n/tr.json.js.map +1 -1
  66. package/build/i18n/tr.json.mjs +1 -0
  67. package/build/i18n/tr.json.mjs.map +1 -1
  68. package/build/i18n/zh-CN.json +11 -0
  69. package/build/i18n/zh-CN.json.js +11 -0
  70. package/build/i18n/zh-CN.json.js.map +1 -1
  71. package/build/i18n/zh-CN.json.mjs +11 -0
  72. package/build/i18n/zh-CN.json.mjs.map +1 -1
  73. package/build/i18n/zh-HK.json +5 -0
  74. package/build/i18n/zh-HK.json.js +5 -0
  75. package/build/i18n/zh-HK.json.js.map +1 -1
  76. package/build/i18n/zh-HK.json.mjs +5 -0
  77. package/build/i18n/zh-HK.json.mjs.map +1 -1
  78. package/build/main.css +17 -158
  79. package/build/moneyInput/MoneyInput.js.map +1 -1
  80. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  81. package/build/stepper/Stepper.js +6 -3
  82. package/build/stepper/Stepper.js.map +1 -1
  83. package/build/stepper/Stepper.mjs +6 -3
  84. package/build/stepper/Stepper.mjs.map +1 -1
  85. package/build/styles/circularButton/CircularButton.css +17 -158
  86. package/build/styles/main.css +17 -158
  87. package/build/types/avatarLayout/AvatarLayout.d.ts.map +1 -1
  88. package/build/types/circularButton/CircularButton.d.ts +11 -4
  89. package/build/types/circularButton/CircularButton.d.ts.map +1 -1
  90. package/build/types/definitionList/DefinitionList.d.ts +1 -2
  91. package/build/types/definitionList/DefinitionList.d.ts.map +1 -1
  92. package/build/types/dimmer/Dimmer.d.ts +1 -1
  93. package/build/types/dimmer/Dimmer.d.ts.map +1 -1
  94. package/build/types/moneyInput/MoneyInput.d.ts +1 -1
  95. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  96. package/build/types/stepper/Stepper.d.ts +2 -1
  97. package/build/types/stepper/Stepper.d.ts.map +1 -1
  98. package/build/types/test-utils/index.d.ts +2 -0
  99. package/build/types/test-utils/index.d.ts.map +1 -1
  100. package/build/types/uploadInput/uploadButton/UploadButton.messages.d.ts +5 -0
  101. package/build/types/uploadInput/uploadButton/UploadButton.messages.d.ts.map +1 -1
  102. package/build/uploadInput/uploadButton/UploadButton.js +3 -1
  103. package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
  104. package/build/uploadInput/uploadButton/UploadButton.messages.js +3 -0
  105. package/build/uploadInput/uploadButton/UploadButton.messages.js.map +1 -1
  106. package/build/uploadInput/uploadButton/UploadButton.messages.mjs +3 -0
  107. package/build/uploadInput/uploadButton/UploadButton.messages.mjs.map +1 -1
  108. package/build/uploadInput/uploadButton/UploadButton.mjs +3 -1
  109. package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
  110. package/package.json +5 -5
  111. package/src/avatar/Avatar.story.tsx +4 -1
  112. package/src/avatarLayout/AvatarLayout.story.tsx +2 -0
  113. package/src/avatarLayout/AvatarLayout.tsx +3 -1
  114. package/src/avatarWrapper/AvatarWrapper.story.tsx +4 -0
  115. package/src/badge/Badge.story.tsx +4 -0
  116. package/src/circularButton/CircularButton.css +17 -158
  117. package/src/circularButton/CircularButton.less +22 -91
  118. package/src/circularButton/CircularButton.story.tsx +45 -24
  119. package/src/circularButton/CircularButton.tsx +38 -25
  120. package/src/definitionList/DefinitionList.story.tsx +57 -57
  121. package/src/definitionList/DefinitionList.tsx +1 -1
  122. package/src/dimmer/{Dimmer.rtl.spec.tsx → Dimmer.spec.tsx} +33 -29
  123. package/src/dimmer/Dimmer.tsx +4 -4
  124. package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap +3 -1
  125. package/src/i18n/de.json +1 -0
  126. package/src/i18n/en.json +1 -0
  127. package/src/i18n/es.json +1 -0
  128. package/src/i18n/fr.json +6 -5
  129. package/src/i18n/hu.json +1 -0
  130. package/src/i18n/id.json +1 -0
  131. package/src/i18n/it.json +1 -0
  132. package/src/i18n/pl.json +1 -0
  133. package/src/i18n/ro.json +1 -0
  134. package/src/i18n/th.json +6 -0
  135. package/src/i18n/tr.json +1 -0
  136. package/src/i18n/zh-CN.json +11 -0
  137. package/src/i18n/zh-HK.json +5 -0
  138. package/src/iconButton/IconButton.story.tsx +6 -6
  139. package/src/main.css +17 -158
  140. package/src/moneyInput/MoneyInput.spec.tsx +468 -0
  141. package/src/moneyInput/MoneyInput.tsx +2 -1
  142. package/src/navigationOption/NavigationOption.spec.tsx +113 -0
  143. package/src/phoneNumberInput/PhoneNumberInput.spec.tsx +283 -0
  144. package/src/radioOption/RadioOption.spec.tsx +73 -0
  145. package/src/slidingPanel/SlidingPanel.spec.tsx +69 -0
  146. package/src/stepper/Stepper.spec.tsx +236 -0
  147. package/src/stepper/Stepper.tests.story.tsx +89 -0
  148. package/src/stepper/Stepper.tsx +9 -4
  149. package/src/stepper/{deviceDetection.spec.js → deviceDetection.spec.ts} +6 -3
  150. package/src/uploadInput/uploadButton/UploadButton.messages.ts +7 -0
  151. package/src/uploadInput/uploadButton/UploadButton.tsx +1 -1
  152. package/src/circularButton/_button-label-states.less +0 -34
  153. package/src/definitionList/DefinitionList.spec.js +0 -91
  154. package/src/dimmer/Dimmer.spec.js +0 -87
  155. package/src/moneyInput/MoneyInput.rtl.spec.tsx +0 -149
  156. package/src/moneyInput/MoneyInput.spec.js +0 -820
  157. package/src/navigationOption/NavigationOption.spec.js +0 -93
  158. package/src/phoneNumberInput/PhoneNumberInput.rtl.spec.tsx +0 -32
  159. package/src/phoneNumberInput/PhoneNumberInput.spec.js +0 -356
  160. package/src/radioOption/RadioOption.spec.js +0 -67
  161. package/src/slidingPanel/SlidingPanel.spec.js +0 -56
  162. package/src/stepper/Stepper.spec.js +0 -233
  163. /package/src/alert/{Alert.spec.story.tsx → Alert.tests.story.tsx} +0 -0
package/src/circularButton/CircularButton.story.tsx CHANGED
@@ -5,14 +5,16 @@ import { ControlType, Priority } from '../common';
5
5
  import { Meta, StoryObj } from '@storybook/react';
6
6
  import CircularButton from './CircularButton';
7
7
  import { storyConfig } from '../test-utils';
8
+ import Title from '../title';
9
+ import Body from '../body';
8
10
 
9
11
  export default {
10
12
  component: CircularButton,
11
13
  title: 'Actions/CircularButton',
14
+ tags: ['autodocs'],
12
15
  args: {
13
16
  children: 'Button text',
14
- // Needs to be cast because we're mapping icon names to components
15
- icon: 'Freeze' as unknown as React.ReactElement,
17
+ icon: <Icons.Freeze />,
16
18
  },
17
19
  argTypes: {
18
20
  icon: {
@@ -28,8 +30,8 @@ type Story = StoryObj<typeof CircularButton>;
28
30
 
29
31
  export const Basic: Story = {
30
32
  args: {
31
- priority: Priority.PRIMARY,
32
- type: ControlType.ACCENT,
33
+ priority: 'primary',
34
+ type: 'default',
33
35
  disabled: false,
34
36
  },
35
37
  };
@@ -41,26 +43,45 @@ export const All: Story = {
41
43
  render: (props) => {
42
44
  return (
43
45
  <>
44
- <div className="m-b-2">
45
- <div className="title-4 m-b-1">Accent</div>
46
- <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
47
- <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
48
- </div>
49
- <div className="m-b-2">
50
- <div className="title-4 m-b-1">Positive</div>
51
- <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
52
- <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
53
- </div>
54
- <div className="m-b-2">
55
- <div className="title-4 m-b-1">Negative</div>
56
- <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
57
- <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
58
- </div>
59
- <div className="m-b-2">
60
- <div className="title-4 m-b-1">Disabled</div>
61
- <CircularButton {...props} disabled />
62
- <CircularButton {...props} priority={Priority.SECONDARY} disabled />
63
- </div>
46
+ <Title type="title-subsection" className="m-y-2">
47
+ Default (Primary and secondary)
48
+ </Title>
49
+ <Body>
50
+ <CircularButton {...props} priority="primary" type="default" />
51
+ <CircularButton {...props} priority="secondary" type="default" />
52
+ <CircularButton {...props} priority="primary" type="default" disabled />
53
+ <CircularButton {...props} priority="secondary" type="default" disabled />
54
+ </Body>
55
+
56
+ <Title type="title-subsection" className="m-y-2">
57
+ Negative (Primary and secondary)
58
+ </Title>
59
+ <Body>
60
+ <CircularButton {...props} priority="primary" type="negative" />
61
+ <CircularButton {...props} priority="secondary" type="negative" />
62
+ <CircularButton {...props} priority="primary" type="negative" disabled />
63
+ <CircularButton {...props} priority="secondary" type="negative" disabled />
64
+ </Body>
65
+
66
+ <Title type="title-body" className="m-y-2">
67
+ Accent (Deprecated)
68
+ </Title>
69
+ <Body>
70
+ <CircularButton {...props} priority="primary" type="accent" />
71
+ <CircularButton {...props} priority="secondary" type="accent" />
72
+ <CircularButton {...props} priority="primary" type="accent" disabled />
73
+ <CircularButton {...props} priority="secondary" type="accent" disabled />
74
+ </Body>
75
+
76
+ <Title type="title-body" className="m-y-2">
77
+ Positive (Deprecated)
78
+ </Title>
79
+ <Body>
80
+ <CircularButton {...props} priority="primary" type="positive" />
81
+ <CircularButton {...props} priority="secondary" type="positive" />
82
+ <CircularButton {...props} priority="primary" type="positive" disabled />
83
+ <CircularButton {...props} priority="secondary" type="positive" disabled />
84
+ </Body>
64
85
  </>
65
86
  );
66
87
  },
package/src/circularButton/CircularButton.tsx CHANGED
@@ -1,20 +1,28 @@
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
4
  import { Breakpoint, ControlType, Priority, Typography } from '../common';
7
- import Circle from '../common/circle';
5
+ import IconButton, { IconButtonProps } from '../iconButton';
8
6
  import { useMedia } from '../common/hooks/useMedia';
9
7
 
8
+ /**
9
+ * @deprecated use `'default'` instead
10
+ */
11
+ type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;
12
+
10
13
  export interface CircularButtonProps {
11
14
  className?: string;
12
15
  children: string;
13
16
  disabled?: boolean;
14
- icon: React.ReactElement<{ size?: unknown }>;
15
- onClick?: React.MouseEventHandler<HTMLInputElement>;
17
+ icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;
18
+ onClick?: React.MouseEventHandler<HTMLInputElement> &
19
+ React.MouseEventHandler<HTMLButtonElement> &
20
+ React.MouseEventHandler<HTMLAnchorElement>;
16
21
  priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
17
- type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
22
+ /**
23
+ * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
24
+ */
25
+ type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
18
26
  }
19
27
 
20
28
  const CircularButton = ({
@@ -22,30 +30,35 @@ const CircularButton = ({
22
30
  children,
23
31
  disabled,
24
32
  icon,
33
+ onClick,
25
34
  priority = Priority.PRIMARY,
26
- type = ControlType.ACCENT,
27
- ...rest
35
+ type = 'default',
28
36
  }: 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
37
  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
34
-
35
38
  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}
39
+ <label
40
+ className={clsx(
41
+ 'np-circular-btn',
42
+ `np-circular-btn-${priority}-${type}`,
43
+ { 'np-circular-btn-disabled': disabled },
44
+ className,
45
+ )}
46
+ >
47
+ <IconButton
48
+ size={isTinyViewport ? 32 : 56}
49
+ priority={priority}
50
+ type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}
51
+ className={clsx('m-b-1')}
44
52
  disabled={disabled}
45
- {...rest}
46
- />
47
- {iconElement}
48
- <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
53
+ onClick={onClick}
54
+ >
55
+ {icon}
56
+ </IconButton>
57
+ <Body
58
+ as="span"
59
+ className={clsx('np-circular-btn-label', { disabled })}
60
+ type={Typography.BODY_DEFAULT_BOLD}
61
+ >
49
62
  {children}
50
63
  </Body>
51
64
  </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/dimmer/{Dimmer.rtl.spec.tsx → Dimmer.spec.tsx} RENAMED
@@ -1,67 +1,61 @@
1
1
  import { Button } from '..';
2
2
  import { addNoScrollClass, removeNoScrollClass } from '../common';
3
- import {
4
- render,
5
- cleanup,
6
- waitFor,
7
- screen,
8
- userEvent,
9
- waitForElementToBeRemoved,
10
- } from '../test-utils';
3
+ import { render, waitFor, screen, userEvent, waitForElementToBeRemoved } from '../test-utils';
11
4
 
12
5
  import { Dimmer } from './Dimmer';
13
6
 
14
- jest.mock('../common');
7
+ jest.mock('../common/DOMOperations');
15
8
 
16
9
  describe('Dimmer', () => {
17
10
  const props = {
18
11
  open: true,
19
12
  children: <div />,
13
+ onClose: jest.fn(),
20
14
  };
21
15
 
22
- afterEach(() => {
23
- cleanup();
16
+ beforeEach(() => {
24
17
  jest.clearAllMocks();
25
18
  });
26
19
 
20
+ it('should render', () => {
21
+ const myContent = 'My Content';
22
+ render(<Dimmer {...props}>{myContent}</Dimmer>);
23
+ expect(screen.getByText(myContent)).toBeInTheDocument();
24
+ });
25
+
27
26
  describe('closing behaviour', () => {
28
27
  it('calls onClose if the dimmer is clicked', async () => {
29
- const onClose = jest.fn();
30
- render(<Dimmer {...props} onClose={onClose} />);
28
+ render(<Dimmer {...props} />);
31
29
  await userEvent.click(screen.getByRole('presentation'));
32
- expect(onClose).toHaveBeenCalledTimes(1);
30
+ expect(props.onClose).toHaveBeenCalledTimes(1);
33
31
  });
34
32
 
35
33
  it('does not call onClose if the dimmer content is clicked', async () => {
36
- const onClose = jest.fn();
37
34
  render(
38
- <Dimmer {...props} onClose={onClose}>
35
+ <Dimmer {...props}>
39
36
  <Button onClick={() => {}}>McClicky</Button>
40
37
  </Dimmer>,
41
38
  );
42
39
  await userEvent.click(screen.getByRole('button'));
43
- expect(onClose).toHaveBeenCalledTimes(0);
40
+ expect(props.onClose).toHaveBeenCalledTimes(0);
44
41
  });
45
42
 
46
43
  it('does not call onClose when clicked if disableClickToClose is true', async () => {
47
- const onClose = jest.fn();
48
- render(<Dimmer {...props} disableClickToClose onClose={onClose} />);
44
+ render(<Dimmer {...props} disableClickToClose />);
49
45
  await userEvent.click(screen.getByRole('presentation'));
50
- expect(onClose).toHaveBeenCalledTimes(0);
46
+ expect(props.onClose).toHaveBeenCalledTimes(0);
51
47
  });
52
48
 
53
49
  it('calls onClose if the escape key is pressed', async () => {
54
- const onClose = jest.fn();
55
- render(<Dimmer {...props} onClose={onClose} />);
50
+ render(<Dimmer {...props} />);
56
51
  await userEvent.keyboard('{Escape}');
57
- expect(onClose).toHaveBeenCalledTimes(1);
52
+ expect(props.onClose).toHaveBeenCalledTimes(1);
58
53
  });
59
54
 
60
55
  it('does not call onClose if the escape key is pressed when disableClickToClose is true', async () => {
61
- const onClose = jest.fn();
62
- render(<Dimmer {...props} disableClickToClose onClose={onClose} />);
56
+ render(<Dimmer {...props} disableClickToClose />);
63
57
  await userEvent.keyboard('{Escape}');
64
- expect(onClose).toHaveBeenCalledTimes(1);
58
+ expect(props.onClose).toHaveBeenCalledTimes(1);
65
59
  });
66
60
  });
67
61
 
@@ -83,7 +77,17 @@ describe('Dimmer', () => {
83
77
  });
84
78
  });
85
79
 
86
- describe('addNoScrollClass', () => {
80
+ describe('scrolling', () => {
81
+ it('should not have `dimmer--scrollable` class by default', () => {
82
+ render(<Dimmer {...props} />);
83
+ expect(screen.getByRole('presentation')).not.toHaveClass('dimmer--scrollable');
84
+ });
85
+
86
+ it("should add 'dimmer--scrollable' class on `scrollable` prop set", () => {
87
+ render(<Dimmer {...props} scrollable />);
88
+ expect(screen.getByRole('presentation')).toHaveClass('dimmer--scrollable');
89
+ });
90
+
87
91
  it('calls addNoScrollClass on render', () => {
88
92
  expect(addNoScrollClass).not.toHaveBeenCalled();
89
93
 
@@ -123,7 +127,7 @@ describe('Dimmer', () => {
123
127
  });
124
128
 
125
129
  describe('animates out on exit', () => {
126
- it('isnt removed until the animation has finished', async () => {
130
+ it("isn't removed until the animation has finished", async () => {
127
131
  const { rerender } = render(
128
132
  <Dimmer {...props} open={false} fadeContentOnEnter fadeContentOnExit>
129
133
  <p>Content</p>
@@ -138,7 +142,7 @@ describe('Dimmer', () => {
138
142
  </Dimmer>,
139
143
  );
140
144
 
141
- await expect(screen.findByText('Content')).resolves.toBeInTheDocument();
145
+ expect(await screen.findByText('Content')).toBeInTheDocument();
142
146
 
143
147
  rerender(
144
148
  <Dimmer {...props} open={false} fadeContentOnEnter fadeContentOnExit>
package/src/dimmer/Dimmer.tsx CHANGED
@@ -5,11 +5,11 @@ import { CSSTransition } from 'react-transition-group';
5
5
 
6
6
  import {
7
7
  addNoScrollClass,
8
- CommonProps,
9
- PositionBottom,
10
- PositionCenter,
11
- PositionTop,
12
8
  removeNoScrollClass,
9
+ type CommonProps,
10
+ type PositionBottom,
11
+ type PositionCenter,
12
+ type PositionTop,
13
13
  } from '../common';
14
14
  import { isIosDevice } from '../common/deviceDetection';
15
15
  import FocusBoundary from '../common/focusBoundary';
package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap CHANGED
@@ -92,6 +92,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
92
92
  >
93
93
  <div
94
94
  class="progress-bar"
95
+ data-testid="progress-bar"
95
96
  />
96
97
  </div>
97
98
  <ol
@@ -207,7 +208,8 @@ exports[`FlowNavigation renders as expected 1`] = `
207
208
  >
208
209
  <div
209
210
  class="progress-bar"
210
- style="width: 0px;"
211
+ data-testid="progress-bar"
212
+ style="width: 0%;"
211
213
  />
212
214
  </div>
213
215
  <ol
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/en.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "All file types",
55
55
  "neptune.UploadButton.dropFiles": "Drop file to start upload",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, less than {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} files.",
57
58
  "neptune.UploadButton.uploadFile": "Upload file",
58
59
  "neptune.UploadButton.uploadFiles": "Upload files",
59
60
  "neptune.UploadInput.deleteModalBody": "Removing this file will delete it from our system.",
package/src/i18n/es.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Todos los tipos de archivos",
55
55
  "neptune.UploadButton.dropFiles": "Arrastra un archivo para subirlo",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, menor que {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Máximo {maxFiles} archivos.",
57
58
  "neptune.UploadButton.uploadFile": "Subir archivo",
58
59
  "neptune.UploadButton.uploadFiles": "Subir archivos",
59
60
  "neptune.UploadInput.deleteModalBody": "La eliminación de este archivo lo borrará de nuestro sistema.",
package/src/i18n/fr.json CHANGED
@@ -27,11 +27,11 @@
27
27
  "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
28
28
  "neptune.SelectOption.action.label": "Sélectionner",
29
29
  "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
30
- "neptune.StatusIcon.iconLabel.error": "Erreur:",
31
- "neptune.StatusIcon.iconLabel.information": "Informations:",
30
+ "neptune.StatusIcon.iconLabel.error": "Erreur :",
31
+ "neptune.StatusIcon.iconLabel.information": "Informations :",
32
32
  "neptune.StatusIcon.iconLabel.pending": "En attente :",
33
- "neptune.StatusIcon.iconLabel.success": "Terminé:",
34
- "neptune.StatusIcon.iconLabel.warning": "Attention:",
33
+ "neptune.StatusIcon.iconLabel.success": "Terminé :",
34
+ "neptune.StatusIcon.iconLabel.warning": "Avertissement :",
35
35
  "neptune.Summary.statusDone": "Validé",
36
36
  "neptune.Summary.statusNotDone": "À compléter",
37
37
  "neptune.Summary.statusPending": "En attente",
@@ -47,13 +47,14 @@
47
47
  "neptune.Upload.csWrongTypeMessage": "Format non pris en charge. Veuillez réessayer avec un fichier différent",
48
48
  "neptune.Upload.psButtonText": "Annuler",
49
49
  "neptune.Upload.psProcessingText": "Téléchargement...",
50
- "neptune.Upload.retry": "Réessayez",
50
+ "neptune.Upload.retry": "Réessayer",
51
51
  "neptune.Upload.usButtonText": "Ou sélectionnez un fichier",
52
52
  "neptune.Upload.usDropMessage": "Déposer un fichier pour démarrer le téléchargement",
53
53
  "neptune.Upload.usPlaceholder": "Glissez-déposez un fichier de moins de {maxSize} Mo",
54
54
  "neptune.UploadButton.allFileTypes": "Tous types de fichiers",
55
55
  "neptune.UploadButton.dropFiles": "Déposer un fichier pour démarrer le téléchargement",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, inférieur à {size} Mo",
57
+ "neptune.UploadButton.maximumFiles": "Max. {maxFiles} fichiers",
57
58
  "neptune.UploadButton.uploadFile": "Envoyer le fichier",
58
59
  "neptune.UploadButton.uploadFiles": "Transférer des documents",
59
60
  "neptune.UploadInput.deleteModalBody": "La suppression de ce fichier sera définitive sur notre système.",
package/src/i18n/hu.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Összes fájltípus",
55
55
  "neptune.UploadButton.dropFiles": "Húzd a fájlokat ide a feltöltéshez",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, legfeljebb {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fájl.",
57
58
  "neptune.UploadButton.uploadFile": "Fájl feltöltése",
58
59
  "neptune.UploadButton.uploadFiles": "Fájlok feltöltése",
59
60
  "neptune.UploadInput.deleteModalBody": "Ha törlöd ezt a fájlt, azzal a rendszerünkből is eltávolítod.",
package/src/i18n/id.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Semua jenis file",
55
55
  "neptune.UploadButton.dropFiles": "Lepaskan file untuk mulai mengunggah",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, kurang dari {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maksimal {maxFiles} file.",
57
58
  "neptune.UploadButton.uploadFile": "Unggah file",
58
59
  "neptune.UploadButton.uploadFiles": "Unggah file",
59
60
  "neptune.UploadInput.deleteModalBody": "Menghapus file ini akan menghilangkannya dari sistem kami.",
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/pl.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Wszystkie typy plików",
55
55
  "neptune.UploadButton.dropFiles": "Upuść plik, żeby rozpocząć przesyłanie",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, mniejsze niż {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maksymalna ilość plików: {maxFiles}.",
57
58
  "neptune.UploadButton.uploadFile": "Prześlij plik",
58
59
  "neptune.UploadButton.uploadFiles": "Prześlij pliki",
59
60
  "neptune.UploadInput.deleteModalBody": "Usunięcie tego pliku oznacza usunięcie go z naszego systemu.",
package/src/i18n/ro.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Toate tipurile de fișiere",
55
55
  "neptune.UploadButton.dropFiles": "Trage fișierul pentru a începe încărcarea",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, de maximum {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "Maximum {maxFiles} fișiere.",
57
58
  "neptune.UploadButton.uploadFile": "Încarcă fișier",
58
59
  "neptune.UploadButton.uploadFiles": "Încarcă fișiere",
59
60
  "neptune.UploadInput.deleteModalBody": "Eliminarea acestui fișier îl va șterge din sistemul nostru.",
package/src/i18n/th.json CHANGED
@@ -35,6 +35,11 @@
35
35
  "neptune.Summary.statusDone": "รายการที่ทำแล้ว",
36
36
  "neptune.Summary.statusNotDone": "รายการที่ต้องทำ",
37
37
  "neptune.Summary.statusPending": "รายการที่รอดำเนินการ",
38
+ "neptune.Table.actionHeader": "การดำเนินการ",
39
+ "neptune.Table.emptyData": "ไม่พบผลลัพธ์",
40
+ "neptune.Table.loaded": "โหลดข้อมูลตารางแล้ว",
41
+ "neptune.Table.loading": "กำลังโหลดข้อมูลตาราง",
42
+ "neptune.Table.refreshPage": "รีเฟรชหน้า",
38
43
  "neptune.Upload.csButtonText": "อัปโหลดไฟล์อื่นหรือไม่",
39
44
  "neptune.Upload.csFailureText": "การอัปโหลดล้มเหลว กรุณาลองอีกครั้ง",
40
45
  "neptune.Upload.csSuccessText": "อัปโหลดเรียบร้อย!",
@@ -49,6 +54,7 @@
49
54
  "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
50
55
  "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
51
56
  "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",
57
+ "neptune.UploadButton.maximumFiles": "สูงสุด {maxFiles} ไฟล์",
52
58
  "neptune.UploadButton.uploadFile": "อัปโหลดไฟล์",
53
59
  "neptune.UploadButton.uploadFiles": "อัปโหลดไฟล์",
54
60
  "neptune.UploadInput.deleteModalBody": "การลบไฟล์นี้จะลบออกจากระบบของเรา",
package/src/i18n/tr.json CHANGED
@@ -54,6 +54,7 @@
54
54
  "neptune.UploadButton.allFileTypes": "Tüm belge tipleri",
55
55
  "neptune.UploadButton.dropFiles": "Yüklemeyi başlatmak için dosyayı bırakın",
56
56
  "neptune.UploadButton.instructions": "{fileTypes}, en fazla {size}MB",
57
+ "neptune.UploadButton.maximumFiles": "En fazla {maxFiles} dosya.",
57
58
  "neptune.UploadButton.uploadFile": "Dosya yükleyin",
58
59
  "neptune.UploadButton.uploadFiles": "Dosya yükleyin",
59
60
  "neptune.UploadInput.deleteModalBody": "Bu belgeyi kaldırmak, sistemimizden tamamen silinmesiyle sonuçlanır.",