@dxc-technology/halstack-react 0.0.0-bd364ae → 0.0.0-bd47c58

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 (265) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +1 -1
  3. package/HalstackContext.d.ts +1337 -5
  4. package/HalstackContext.js +117 -77
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +110 -114
  8. package/accordion/Accordion.stories.tsx +105 -115
  9. package/accordion/Accordion.test.js +10 -11
  10. package/accordion/types.d.ts +1 -12
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +25 -65
  13. package/accordion-group/AccordionGroup.stories.tsx +93 -66
  14. package/accordion-group/AccordionGroup.test.js +27 -62
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +43 -0
  17. package/accordion-group/types.d.ts +7 -12
  18. package/alert/Alert.js +5 -9
  19. package/alert/Alert.stories.tsx +28 -0
  20. package/alert/Alert.test.js +1 -1
  21. package/bleed/Bleed.stories.tsx +64 -63
  22. package/box/Box.d.ts +1 -1
  23. package/box/Box.js +8 -27
  24. package/box/Box.stories.tsx +38 -51
  25. package/box/Box.test.js +1 -1
  26. package/box/types.d.ts +0 -11
  27. package/bulleted-list/BulletedList.d.ts +7 -0
  28. package/bulleted-list/BulletedList.js +125 -0
  29. package/bulleted-list/BulletedList.stories.tsx +206 -0
  30. package/bulleted-list/types.d.ts +38 -0
  31. package/button/Button.d.ts +1 -1
  32. package/button/Button.js +42 -72
  33. package/button/Button.stories.tsx +159 -8
  34. package/button/Button.test.js +12 -1
  35. package/button/types.d.ts +9 -5
  36. package/card/Card.d.ts +1 -1
  37. package/card/Card.js +27 -45
  38. package/card/Card.stories.tsx +12 -42
  39. package/card/Card.test.js +1 -1
  40. package/card/types.d.ts +1 -6
  41. package/checkbox/Checkbox.d.ts +2 -2
  42. package/checkbox/Checkbox.js +94 -101
  43. package/checkbox/Checkbox.stories.tsx +131 -59
  44. package/checkbox/Checkbox.test.js +94 -17
  45. package/checkbox/types.d.ts +4 -0
  46. package/chip/Chip.js +28 -49
  47. package/chip/Chip.stories.tsx +121 -26
  48. package/chip/Chip.test.js +3 -5
  49. package/chip/types.d.ts +1 -1
  50. package/common/OpenSans.css +68 -80
  51. package/common/coreTokens.d.ts +146 -0
  52. package/common/coreTokens.js +167 -0
  53. package/common/utils.d.ts +1 -0
  54. package/common/utils.js +4 -4
  55. package/common/variables.d.ts +1490 -0
  56. package/common/variables.js +1016 -1117
  57. package/date-input/Calendar.d.ts +4 -0
  58. package/date-input/Calendar.js +258 -0
  59. package/date-input/DateInput.js +134 -237
  60. package/date-input/DateInput.stories.tsx +199 -33
  61. package/date-input/DateInput.test.js +494 -138
  62. package/date-input/DatePicker.d.ts +4 -0
  63. package/date-input/DatePicker.js +146 -0
  64. package/date-input/Icons.d.ts +6 -0
  65. package/date-input/Icons.js +75 -0
  66. package/date-input/YearPicker.d.ts +4 -0
  67. package/date-input/YearPicker.js +126 -0
  68. package/date-input/types.d.ts +51 -0
  69. package/dialog/Dialog.d.ts +1 -1
  70. package/dialog/Dialog.js +72 -79
  71. package/dialog/Dialog.stories.tsx +154 -171
  72. package/dialog/Dialog.test.js +334 -5
  73. package/dialog/types.d.ts +0 -12
  74. package/dropdown/Dropdown.d.ts +1 -1
  75. package/dropdown/Dropdown.js +246 -249
  76. package/dropdown/Dropdown.stories.tsx +245 -56
  77. package/dropdown/Dropdown.test.js +507 -110
  78. package/dropdown/DropdownMenu.d.ts +4 -0
  79. package/dropdown/DropdownMenu.js +74 -0
  80. package/dropdown/DropdownMenuItem.d.ts +4 -0
  81. package/dropdown/DropdownMenuItem.js +79 -0
  82. package/dropdown/types.d.ts +23 -3
  83. package/file-input/FileInput.d.ts +2 -2
  84. package/file-input/FileInput.js +174 -220
  85. package/file-input/FileInput.stories.tsx +122 -11
  86. package/file-input/FileInput.test.js +14 -14
  87. package/file-input/FileItem.d.ts +4 -14
  88. package/file-input/FileItem.js +39 -63
  89. package/file-input/types.d.ts +18 -1
  90. package/flex/Flex.d.ts +4 -0
  91. package/flex/Flex.js +71 -0
  92. package/flex/Flex.stories.tsx +112 -0
  93. package/flex/types.d.ts +97 -0
  94. package/footer/Footer.d.ts +1 -1
  95. package/footer/Footer.js +44 -64
  96. package/footer/Footer.stories.tsx +37 -16
  97. package/footer/Footer.test.js +16 -26
  98. package/footer/Icons.js +1 -1
  99. package/footer/types.d.ts +11 -12
  100. package/grid/Grid.d.ts +7 -0
  101. package/grid/Grid.js +91 -0
  102. package/grid/Grid.stories.tsx +219 -0
  103. package/grid/types.d.ts +115 -0
  104. package/header/Header.d.ts +4 -3
  105. package/header/Header.js +83 -110
  106. package/header/Header.stories.tsx +118 -39
  107. package/header/Header.test.js +2 -2
  108. package/header/Icons.js +2 -2
  109. package/header/types.d.ts +0 -13
  110. package/heading/Heading.js +1 -1
  111. package/heading/Heading.test.js +1 -1
  112. package/image/Image.d.ts +4 -0
  113. package/image/Image.js +85 -0
  114. package/image/Image.stories.tsx +127 -0
  115. package/image/types.d.ts +72 -0
  116. package/inset/Inset.stories.tsx +5 -4
  117. package/layout/ApplicationLayout.d.ts +15 -6
  118. package/layout/ApplicationLayout.js +44 -69
  119. package/layout/ApplicationLayout.stories.tsx +80 -44
  120. package/layout/types.d.ts +18 -29
  121. package/link/Link.js +4 -4
  122. package/link/Link.stories.tsx +73 -6
  123. package/link/Link.test.js +2 -4
  124. package/link/types.d.ts +3 -3
  125. package/main.d.ts +8 -9
  126. package/main.js +41 -49
  127. package/{tabs-nav → nav-tabs}/NavTabs.d.ts +2 -2
  128. package/{tabs-nav → nav-tabs}/NavTabs.js +13 -16
  129. package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx +110 -6
  130. package/{tabs-nav → nav-tabs}/NavTabs.test.js +1 -1
  131. package/{tabs-nav → nav-tabs}/Tab.js +51 -37
  132. package/{tabs-nav → nav-tabs}/types.d.ts +9 -10
  133. package/number-input/NumberInput.d.ts +7 -0
  134. package/number-input/NumberInput.js +6 -4
  135. package/number-input/NumberInput.test.js +317 -98
  136. package/package.json +18 -22
  137. package/paginator/Icons.d.ts +5 -0
  138. package/paginator/Icons.js +16 -28
  139. package/paginator/Paginator.js +8 -16
  140. package/paginator/Paginator.stories.tsx +24 -0
  141. package/paginator/Paginator.test.js +91 -39
  142. package/paragraph/Paragraph.d.ts +5 -0
  143. package/paragraph/Paragraph.js +38 -0
  144. package/paragraph/Paragraph.stories.tsx +44 -0
  145. package/password-input/Icons.d.ts +6 -0
  146. package/password-input/Icons.js +39 -0
  147. package/password-input/PasswordInput.js +35 -82
  148. package/password-input/PasswordInput.stories.tsx +1 -0
  149. package/password-input/PasswordInput.test.js +34 -40
  150. package/progress-bar/ProgressBar.js +60 -54
  151. package/progress-bar/ProgressBar.stories.jsx +38 -3
  152. package/progress-bar/ProgressBar.test.js +68 -23
  153. package/quick-nav/QuickNav.js +23 -18
  154. package/quick-nav/QuickNav.stories.tsx +145 -26
  155. package/radio-group/Radio.d.ts +1 -1
  156. package/radio-group/Radio.js +46 -31
  157. package/radio-group/RadioGroup.js +31 -32
  158. package/radio-group/RadioGroup.stories.tsx +132 -18
  159. package/radio-group/RadioGroup.test.js +124 -97
  160. package/radio-group/types.d.ts +2 -2
  161. package/resultsetTable/Icons.d.ts +7 -0
  162. package/resultsetTable/Icons.js +51 -0
  163. package/resultsetTable/ResultsetTable.js +49 -108
  164. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  165. package/resultsetTable/ResultsetTable.test.js +61 -42
  166. package/resultsetTable/types.d.ts +1 -1
  167. package/select/Listbox.d.ts +1 -1
  168. package/select/Listbox.js +33 -16
  169. package/select/Option.js +11 -24
  170. package/select/Select.js +92 -71
  171. package/select/Select.stories.tsx +513 -136
  172. package/select/Select.test.js +413 -305
  173. package/select/types.d.ts +3 -6
  174. package/sidenav/Icons.d.ts +7 -0
  175. package/sidenav/Icons.js +51 -0
  176. package/sidenav/Sidenav.d.ts +6 -5
  177. package/sidenav/Sidenav.js +139 -48
  178. package/sidenav/Sidenav.stories.tsx +251 -151
  179. package/sidenav/Sidenav.test.js +25 -37
  180. package/sidenav/types.d.ts +52 -26
  181. package/slider/Slider.d.ts +2 -2
  182. package/slider/Slider.js +121 -97
  183. package/slider/Slider.stories.tsx +64 -1
  184. package/slider/Slider.test.js +122 -22
  185. package/slider/types.d.ts +4 -0
  186. package/spinner/Spinner.js +17 -23
  187. package/spinner/Spinner.stories.jsx +53 -27
  188. package/spinner/Spinner.test.js +1 -1
  189. package/switch/Switch.d.ts +2 -2
  190. package/switch/Switch.js +137 -70
  191. package/switch/Switch.stories.tsx +41 -30
  192. package/switch/Switch.test.js +145 -18
  193. package/switch/types.d.ts +4 -0
  194. package/table/Table.js +3 -3
  195. package/table/Table.stories.jsx +80 -1
  196. package/table/Table.test.js +2 -2
  197. package/tabs/Tab.d.ts +4 -0
  198. package/tabs/Tab.js +132 -0
  199. package/tabs/Tabs.js +358 -108
  200. package/tabs/Tabs.stories.tsx +119 -5
  201. package/tabs/Tabs.test.js +220 -10
  202. package/tabs/types.d.ts +13 -3
  203. package/tag/Tag.js +8 -10
  204. package/tag/Tag.stories.tsx +14 -1
  205. package/tag/Tag.test.js +1 -1
  206. package/tag/types.d.ts +1 -1
  207. package/text-input/Icons.d.ts +8 -0
  208. package/text-input/Icons.js +60 -0
  209. package/text-input/Suggestion.js +40 -11
  210. package/text-input/Suggestions.d.ts +4 -0
  211. package/text-input/Suggestions.js +134 -0
  212. package/text-input/TextInput.js +235 -348
  213. package/text-input/TextInput.stories.tsx +280 -185
  214. package/text-input/TextInput.test.js +736 -725
  215. package/text-input/types.d.ts +22 -3
  216. package/textarea/Textarea.js +3 -4
  217. package/textarea/Textarea.stories.jsx +60 -1
  218. package/textarea/Textarea.test.js +2 -4
  219. package/toggle-group/ToggleGroup.d.ts +2 -2
  220. package/toggle-group/ToggleGroup.js +85 -59
  221. package/toggle-group/ToggleGroup.stories.tsx +45 -0
  222. package/toggle-group/ToggleGroup.test.js +38 -24
  223. package/toggle-group/types.d.ts +23 -14
  224. package/typography/Typography.d.ts +4 -0
  225. package/typography/Typography.js +32 -0
  226. package/typography/Typography.stories.tsx +198 -0
  227. package/typography/types.d.ts +18 -0
  228. package/typography/types.js +5 -0
  229. package/useTheme.d.ts +1242 -1
  230. package/useTheme.js +1 -1
  231. package/useTranslatedLabels.d.ts +84 -1
  232. package/utils/BaseTypography.d.ts +21 -0
  233. package/utils/BaseTypography.js +108 -0
  234. package/utils/FocusLock.d.ts +13 -0
  235. package/utils/FocusLock.js +138 -0
  236. package/wizard/Wizard.js +10 -17
  237. package/wizard/Wizard.stories.tsx +40 -1
  238. package/wizard/Wizard.test.js +1 -1
  239. package/wizard/types.d.ts +3 -3
  240. package/card/ice-cream.jpg +0 -0
  241. package/common/RequiredComponent.js +0 -32
  242. package/list/List.d.ts +0 -4
  243. package/list/List.js +0 -47
  244. package/list/List.stories.tsx +0 -95
  245. package/list/types.d.ts +0 -7
  246. package/number-input/NumberInputContext.d.ts +0 -4
  247. package/number-input/NumberInputContext.js +0 -19
  248. package/number-input/numberInputContextTypes.d.ts +0 -19
  249. package/row/Row.d.ts +0 -3
  250. package/row/Row.js +0 -127
  251. package/row/Row.stories.tsx +0 -237
  252. package/row/types.d.ts +0 -28
  253. package/stack/Stack.d.ts +0 -3
  254. package/stack/Stack.js +0 -97
  255. package/stack/Stack.stories.tsx +0 -164
  256. package/stack/types.d.ts +0 -24
  257. package/text/Text.d.ts +0 -7
  258. package/text/Text.js +0 -30
  259. package/text/Text.stories.tsx +0 -19
  260. /package/{list → bulleted-list}/types.js +0 -0
  261. /package/{row → flex}/types.js +0 -0
  262. /package/{stack → grid}/types.js +0 -0
  263. /package/{tabs-nav → image}/types.js +0 -0
  264. /package/{tabs-nav → nav-tabs}/Tab.d.ts +0 -0
  265. /package/{number-input/numberInputContextTypes.js → nav-tabs/types.js} +0 -0
@@ -8,68 +8,50 @@ var _react2 = require("@testing-library/react");
8
8
 
9
9
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
10
10
 
11
- var _NumberInput = _interopRequireDefault(require("./NumberInput"));
11
+ var _NumberInput = _interopRequireDefault(require("./NumberInput.tsx"));
12
12
 
13
13
  describe("Number input component tests", function () {
14
- test("Number input renders with label", function () {
14
+ test("Number input renders with label, helper text, placeholder and increment/decrement action buttons", function () {
15
15
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
16
- label: "Number input label"
16
+ label: "Number input label",
17
+ helperText: "Helper text",
18
+ placeholder: "Placeholder"
17
19
  })),
18
- getByText = _render.getByText;
20
+ getByLabelText = _render.getByLabelText,
21
+ getByText = _render.getByText,
22
+ queryAllByRole = _render.queryAllByRole;
19
23
 
24
+ var number = getByLabelText("Number input label");
20
25
  expect(getByText("Number input label")).toBeTruthy();
21
- });
22
- test("Number input renders with helper text", function () {
23
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
24
- helperText: "Helper text"
25
- })),
26
- getByText = _render2.getByText;
27
-
28
26
  expect(getByText("Helper text")).toBeTruthy();
29
- });
30
- test("Number input renders with placeholder", function () {
31
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
32
- label: "Number label",
33
- placeholder: "Placeholder"
34
- })),
35
- getByLabelText = _render3.getByLabelText;
36
-
37
- var number = getByLabelText("Number label");
38
27
  expect(number.getAttribute("placeholder")).toBe("Placeholder");
39
- });
40
- test("Number input renders increment and decrement buttons", function () {
41
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
42
- label: "Number label"
43
- })),
44
- queryAllByRole = _render4.queryAllByRole;
45
-
46
28
  expect(queryAllByRole("button").length).toBe(2);
47
29
  });
48
30
  test("Number input buttons' tooltip is correct", function () {
49
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
31
+ var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
50
32
  label: "Number label"
51
33
  })),
52
- getByTitle = _render5.getByTitle;
34
+ getByTitle = _render2.getByTitle;
53
35
 
54
36
  expect(getByTitle("Decrement value")).toBeTruthy();
55
37
  expect(getByTitle("Increment value")).toBeTruthy();
56
38
  });
57
39
  test("Number input is disabled", function () {
58
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
40
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
59
41
  label: "Number label",
60
42
  disabled: true
61
43
  })),
62
- getByLabelText = _render6.getByLabelText;
44
+ getByLabelText = _render3.getByLabelText;
63
45
 
64
46
  var number = getByLabelText("Number label");
65
47
  expect(number.disabled).toBeTruthy();
66
48
  });
67
49
  test("Number input is optional", function () {
68
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
50
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
69
51
  label: "Number label",
70
52
  optional: true
71
53
  })),
72
- getByText = _render7.getByText;
54
+ getByText = _render4.getByText;
73
55
 
74
56
  expect(getByText("(Optional)")).toBeTruthy();
75
57
  });
@@ -77,19 +59,20 @@ describe("Number input component tests", function () {
77
59
  var onBlur = jest.fn();
78
60
  var onChange = jest.fn();
79
61
 
80
- var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
62
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
63
+ label: "Number input label",
81
64
  onBlur: onBlur,
82
65
  onChange: onChange
83
66
  })),
84
- getByRole = _render8.getByRole;
67
+ getByLabelText = _render5.getByLabelText;
85
68
 
86
- var input = getByRole("textbox");
69
+ var number = getByLabelText("Number input label");
87
70
 
88
- _userEvent["default"].type(input, "1");
71
+ _userEvent["default"].type(number, "1");
89
72
 
90
- _userEvent["default"].clear(input);
73
+ _userEvent["default"].clear(number);
91
74
 
92
- _react2.fireEvent.blur(input);
75
+ _react2.fireEvent.blur(number);
93
76
 
94
77
  expect(onBlur).toHaveBeenCalled();
95
78
  expect(onBlur).toHaveBeenCalledWith({
@@ -102,33 +85,33 @@ describe("Number input component tests", function () {
102
85
  error: "This field is required. Please, enter a value."
103
86
  });
104
87
  });
105
- test("Suffix and prefix must be shown)", function () {
106
- var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
88
+ test("Suffix and prefix must be shown", function () {
89
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
107
90
  label: "Number input label",
108
91
  prefix: "+34",
109
92
  suffix: "USD"
110
93
  })),
111
- getByText = _render9.getByText;
94
+ getByText = _render6.getByText;
112
95
 
113
96
  expect(getByText("+34")).toBeTruthy();
114
97
  expect(getByText("USD")).toBeTruthy();
115
98
  });
116
99
  test("Invalid number input renders error", function () {
117
- var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
100
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
118
101
  error: "Error message."
119
102
  })),
120
- getByText = _render10.getByText;
103
+ getByText = _render7.getByText;
121
104
 
122
105
  expect(getByText("Error message.")).toBeTruthy();
123
106
  });
124
107
  test("onChange function is called correctly", function () {
125
108
  var onChange = jest.fn();
126
109
 
127
- var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
110
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
128
111
  label: "Number input label",
129
112
  onChange: onChange
130
113
  })),
131
- getByLabelText = _render11.getByLabelText;
114
+ getByLabelText = _render8.getByLabelText;
132
115
 
133
116
  var number = getByLabelText("Number input label");
134
117
 
@@ -146,41 +129,41 @@ describe("Number input component tests", function () {
146
129
  });
147
130
  expect(number.value).toBe("1");
148
131
  });
149
- test("Error message is shown if the value is less than the min value", function () {
132
+ test("Error message is shown if the typed value is less than the min value", function () {
150
133
  var onChange = jest.fn(function (_ref) {
151
134
  var value = _ref.value,
152
135
  error = _ref.error;
153
- expect(value).toBe("1");
154
- expect(error).toBe("Value must be greater than or equal to 5.");
136
+ expect(value).toBe("-1");
137
+ expect(error).toBe("Value must be greater than or equal to 0.");
155
138
  });
156
139
  var onBlur = jest.fn(function (_ref2) {
157
140
  var value = _ref2.value,
158
141
  error = _ref2.error;
159
- expect(value).toBe("1");
160
- expect(error).toBe("Value must be greater than or equal to 5.");
142
+ expect(value).toBe("-1");
143
+ expect(error).toBe("Value must be greater than or equal to 0.");
161
144
  });
162
145
 
163
- var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
146
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
164
147
  label: "Number input label",
165
- min: 5,
148
+ min: 0,
166
149
  onBlur: onBlur,
167
150
  onChange: onChange
168
151
  })),
169
- getByLabelText = _render12.getByLabelText;
152
+ getByLabelText = _render9.getByLabelText;
170
153
 
171
154
  var number = getByLabelText("Number input label");
172
155
 
173
- _userEvent["default"].type(number, "1");
156
+ _userEvent["default"].type(number, "-1");
174
157
 
175
158
  _react2.fireEvent.blur(number);
176
159
  });
177
160
  test("Cannot decrement the value if it is less than the min value", function () {
178
- var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
161
+ var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
179
162
  label: "Number input label",
180
163
  min: 5
181
164
  })),
182
- getByLabelText = _render13.getByLabelText,
183
- getAllByRole = _render13.getAllByRole;
165
+ getByLabelText = _render10.getByLabelText,
166
+ getAllByRole = _render10.getAllByRole;
184
167
 
185
168
  var number = getByLabelText("Number input label");
186
169
 
@@ -196,12 +179,12 @@ describe("Number input component tests", function () {
196
179
  expect(number.value).toBe("1");
197
180
  });
198
181
  test("Increment the value when it is less than the min value", function () {
199
- var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
182
+ var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
200
183
  label: "Number input label",
201
184
  min: 5
202
185
  })),
203
- getByLabelText = _render14.getByLabelText,
204
- getAllByRole = _render14.getAllByRole;
186
+ getByLabelText = _render11.getByLabelText,
187
+ getAllByRole = _render11.getAllByRole;
205
188
 
206
189
  var number = getByLabelText("Number input label");
207
190
 
@@ -216,17 +199,17 @@ describe("Number input component tests", function () {
216
199
 
217
200
  expect(number.value).toBe("5");
218
201
  });
219
- test("Error message is shown if the value is greater than the max value", function () {
202
+ test("Error message is shown if the typed value is greater than the max value", function () {
220
203
  var onChange = jest.fn();
221
204
  var onBlur = jest.fn();
222
205
 
223
- var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
206
+ var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
224
207
  label: "Number input label",
225
208
  max: 10,
226
209
  onBlur: onBlur,
227
210
  onChange: onChange
228
211
  })),
229
- getByLabelText = _render15.getByLabelText;
212
+ getByLabelText = _render12.getByLabelText;
230
213
 
231
214
  var number = getByLabelText("Number input label");
232
215
 
@@ -247,12 +230,12 @@ describe("Number input component tests", function () {
247
230
  });
248
231
  });
249
232
  test("Cannot increment the value if it is greater than the max value", function () {
250
- var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
233
+ var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
251
234
  label: "Number input label",
252
235
  max: 10
253
236
  })),
254
- getByLabelText = _render16.getByLabelText,
255
- getAllByRole = _render16.getAllByRole;
237
+ getByLabelText = _render13.getByLabelText,
238
+ getAllByRole = _render13.getAllByRole;
256
239
 
257
240
  var number = getByLabelText("Number input label");
258
241
 
@@ -268,20 +251,20 @@ describe("Number input component tests", function () {
268
251
  expect(number.value).toBe("12");
269
252
  });
270
253
  test("Decrement the value when it is greater than the max value", function () {
271
- var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
254
+ var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
272
255
  label: "Number input label",
273
256
  max: 10
274
257
  })),
275
- getByLabelText = _render17.getByLabelText,
276
- getAllByRole = _render17.getAllByRole;
258
+ getByLabelText = _render14.getByLabelText,
259
+ getAllByRole = _render14.getAllByRole;
277
260
 
278
261
  var number = getByLabelText("Number input label");
279
262
 
280
- _userEvent["default"].type(number, "12");
263
+ _userEvent["default"].type(number, "120");
281
264
 
282
265
  _react2.fireEvent.blur(number);
283
266
 
284
- expect(number.value).toBe("12");
267
+ expect(number.value).toBe("120");
285
268
  var decrement = getAllByRole("button")[0];
286
269
 
287
270
  _userEvent["default"].click(decrement);
@@ -289,13 +272,13 @@ describe("Number input component tests", function () {
289
272
  expect(number.value).toBe("10");
290
273
  });
291
274
  test("Increment and decrement the value with min and max values", function () {
292
- var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
275
+ var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
293
276
  label: "Number input label",
294
277
  min: 5,
295
278
  max: 10
296
279
  })),
297
- getByLabelText = _render18.getByLabelText,
298
- getAllByRole = _render18.getAllByRole;
280
+ getByLabelText = _render15.getByLabelText,
281
+ getAllByRole = _render15.getAllByRole;
299
282
 
300
283
  var number = getByLabelText("Number input label");
301
284
 
@@ -331,13 +314,13 @@ describe("Number input component tests", function () {
331
314
 
332
315
  expect(number.value).toBe("10");
333
316
  });
334
- test("Increment and decrement the value with step", function () {
335
- var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
317
+ test("Increment and decrement the value with an integer step", function () {
318
+ var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
336
319
  label: "Number input label",
337
320
  step: 5
338
321
  })),
339
- getByLabelText = _render19.getByLabelText,
340
- getAllByRole = _render19.getAllByRole;
322
+ getByLabelText = _render16.getByLabelText,
323
+ getAllByRole = _render16.getAllByRole;
341
324
 
342
325
  var number = getByLabelText("Number input label");
343
326
 
@@ -365,23 +348,56 @@ describe("Number input component tests", function () {
365
348
 
366
349
  expect(number.value).toBe("10");
367
350
  });
351
+ test("Increment and decrement the value with a decimal step", function () {
352
+ var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
353
+ label: "Number input label",
354
+ step: 0.5
355
+ })),
356
+ getByLabelText = _render17.getByLabelText,
357
+ getAllByRole = _render17.getAllByRole;
358
+
359
+ var number = getByLabelText("Number input label");
360
+
361
+ _userEvent["default"].type(number, "-9");
362
+
363
+ _react2.fireEvent.blur(number);
364
+
365
+ expect(number.value).toBe("-9");
366
+ var increment = getAllByRole("button")[1];
367
+
368
+ _userEvent["default"].click(increment);
369
+
370
+ expect(number.value).toBe("-8.5");
371
+
372
+ _userEvent["default"].click(increment);
373
+
374
+ expect(number.value).toBe("-8");
375
+ var decrement = getAllByRole("button")[0];
376
+
377
+ _userEvent["default"].click(decrement);
378
+
379
+ _userEvent["default"].click(decrement);
380
+
381
+ _userEvent["default"].click(decrement);
382
+
383
+ expect(number.value).toBe("-9.5");
384
+
385
+ _userEvent["default"].click(decrement);
386
+
387
+ expect(number.value).toBe("-10");
388
+ });
368
389
  test("Increment and decrement the value with min, max and step", function () {
369
- var onBlur = jest.fn(function (_ref3) {
370
- var value = _ref3.value,
371
- error = _ref3.error;
372
- expect(value).toBe("1");
373
- expect(error).toBe("Value must be greater than or equal to 5.");
374
- });
390
+ var onBlur = jest.fn();
375
391
 
376
- var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
392
+ var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
377
393
  label: "Number input label",
378
394
  min: 5,
379
395
  max: 20,
380
396
  step: 8,
381
397
  onBlur: onBlur
382
398
  })),
383
- getByLabelText = _render20.getByLabelText,
384
- getAllByRole = _render20.getAllByRole;
399
+ getByLabelText = _render18.getByLabelText,
400
+ getAllByRole = _render18.getAllByRole;
385
401
 
386
402
  var number = getByLabelText("Number input label");
387
403
 
@@ -389,6 +405,10 @@ describe("Number input component tests", function () {
389
405
 
390
406
  _react2.fireEvent.blur(number);
391
407
 
408
+ expect(onBlur).toHaveBeenCalledWith({
409
+ value: "1",
410
+ error: "Value must be greater than or equal to 5."
411
+ });
392
412
  var increment = getAllByRole("button")[1];
393
413
 
394
414
  _userEvent["default"].click(increment);
@@ -401,33 +421,194 @@ describe("Number input component tests", function () {
401
421
 
402
422
  _userEvent["default"].click(increment);
403
423
 
404
- expect(number.value).toBe("20");
424
+ expect(number.value).toBe("13");
405
425
 
406
426
  _userEvent["default"].click(increment);
407
427
 
408
- expect(number.value).toBe("20");
428
+ expect(number.value).toBe("13");
409
429
  var decrement = getAllByRole("button")[0];
410
430
 
411
431
  _userEvent["default"].click(decrement);
412
432
 
413
- expect(number.value).toBe("12");
433
+ expect(number.value).toBe("5");
414
434
 
415
435
  _userEvent["default"].click(decrement);
416
436
 
417
437
  expect(number.value).toBe("5");
418
438
 
419
439
  _userEvent["default"].click(decrement);
440
+ });
441
+ test("Start incrementing from 0 when the min value is less than 0 and the max value is bigger than 0", function () {
442
+ var onBlur = jest.fn();
420
443
 
421
- expect(number.value).toBe("5");
444
+ var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
445
+ label: "Number input label",
446
+ min: -10,
447
+ max: 10,
448
+ step: 1,
449
+ onBlur: onBlur
450
+ })),
451
+ getByLabelText = _render19.getByLabelText,
452
+ getAllByRole = _render19.getAllByRole;
453
+
454
+ var number = getByLabelText("Number input label");
455
+ var increment = getAllByRole("button")[1];
456
+
457
+ _userEvent["default"].click(increment);
458
+
459
+ expect(number.value).toBe("1");
460
+
461
+ _userEvent["default"].click(increment);
462
+
463
+ expect(number.value).toBe("2");
422
464
  });
423
- test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
465
+ test("Start incrementing from 0 when the min value is less than 0 and the max is 0", function () {
466
+ var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
467
+ label: "Number input label",
468
+ min: -10,
469
+ max: 0,
470
+ step: 1
471
+ })),
472
+ getByLabelText = _render20.getByLabelText,
473
+ getAllByRole = _render20.getAllByRole;
474
+
475
+ var number = getByLabelText("Number input label");
476
+ var increment = getAllByRole("button")[1];
477
+
478
+ _userEvent["default"].click(increment);
479
+
480
+ expect(number.value).toBe("0");
481
+
482
+ _userEvent["default"].click(increment);
483
+
484
+ expect(number.value).toBe("0");
485
+ });
486
+ test("Start incrementing from the min value when it is bigger than 0", function () {
424
487
  var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
488
+ label: "Number input label",
489
+ min: 2,
490
+ max: 10,
491
+ step: 0.5
492
+ })),
493
+ getByLabelText = _render21.getByLabelText,
494
+ getAllByRole = _render21.getAllByRole;
495
+
496
+ var number = getByLabelText("Number input label");
497
+ var increment = getAllByRole("button")[1];
498
+
499
+ _userEvent["default"].click(increment);
500
+
501
+ expect(number.value).toBe("2");
502
+
503
+ _userEvent["default"].click(increment);
504
+
505
+ expect(number.value).toBe("2.5");
506
+ });
507
+ test("Start incrementing from the max value when it is less than 0", function () {
508
+ var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
509
+ label: "Number input label",
510
+ min: -10,
511
+ max: -1,
512
+ step: 0.5
513
+ })),
514
+ getByLabelText = _render22.getByLabelText,
515
+ getAllByRole = _render22.getAllByRole;
516
+
517
+ var number = getByLabelText("Number input label");
518
+ var increment = getAllByRole("button")[1];
519
+
520
+ _userEvent["default"].click(increment);
521
+
522
+ expect(number.value).toBe("-1");
523
+
524
+ _userEvent["default"].click(increment);
525
+
526
+ expect(number.value).toBe("-1");
527
+ });
528
+ test("Start decrementing from 0 when the min value is less than 0 and the max value is bigger than 0", function () {
529
+ var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
530
+ label: "Number input label",
531
+ min: -10,
532
+ max: 10,
533
+ step: 1
534
+ })),
535
+ getByLabelText = _render23.getByLabelText,
536
+ getAllByRole = _render23.getAllByRole;
537
+
538
+ var number = getByLabelText("Number input label");
539
+ var decrement = getAllByRole("button")[0];
540
+
541
+ _userEvent["default"].click(decrement);
542
+
543
+ expect(number.value).toBe("-1");
544
+ });
545
+ test("Start decrementing from 0 when the min value is 0 and the max value is bigger than 0", function () {
546
+ var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
547
+ label: "Number input label",
548
+ min: 0,
549
+ max: 10,
550
+ step: 1
551
+ })),
552
+ getByLabelText = _render24.getByLabelText,
553
+ getAllByRole = _render24.getAllByRole;
554
+
555
+ var number = getByLabelText("Number input label");
556
+ var decrement = getAllByRole("button")[0];
557
+
558
+ _userEvent["default"].click(decrement);
559
+
560
+ expect(number.value).toBe("0");
561
+ });
562
+ test("Start decrementing from the min value when it is bigger than 0", function () {
563
+ var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
564
+ label: "Number input label",
565
+ min: 2,
566
+ max: 10,
567
+ step: 0.5
568
+ })),
569
+ getByLabelText = _render25.getByLabelText,
570
+ getAllByRole = _render25.getAllByRole;
571
+
572
+ var number = getByLabelText("Number input label");
573
+ var decrement = getAllByRole("button")[0];
574
+
575
+ _userEvent["default"].click(decrement);
576
+
577
+ expect(number.value).toBe("2");
578
+
579
+ _userEvent["default"].click(decrement);
580
+
581
+ expect(number.value).toBe("2");
582
+ });
583
+ test("Start decrementing from the max value when it is less than 0", function () {
584
+ var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
585
+ label: "Number input label",
586
+ min: -10,
587
+ max: -1,
588
+ step: 0.5
589
+ })),
590
+ getByLabelText = _render26.getByLabelText,
591
+ getAllByRole = _render26.getAllByRole;
592
+
593
+ var number = getByLabelText("Number input label");
594
+ var decrement = getAllByRole("button")[0];
595
+
596
+ _userEvent["default"].click(decrement);
597
+
598
+ expect(number.value).toBe("-1");
599
+
600
+ _userEvent["default"].click(decrement);
601
+
602
+ expect(number.value).toBe("-1.5");
603
+ });
604
+ test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
605
+ var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
425
606
  label: "Number input label",
426
607
  min: 5,
427
608
  max: 20,
428
609
  step: 5
429
610
  })),
430
- getByLabelText = _render21.getByLabelText;
611
+ getByLabelText = _render27.getByLabelText;
431
612
 
432
613
  var number = getByLabelText("Number input label");
433
614
 
@@ -487,14 +668,15 @@ describe("Number input component tests", function () {
487
668
 
488
669
  expect(number.value).toBe("5");
489
670
  });
490
- test("Number has correct accesibility attributes", function () {
491
- var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
671
+ test("Number has correct accessibility attributes", function () {
672
+ var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
492
673
  label: "Number input label"
493
674
  })),
494
- getByLabelText = _render22.getByLabelText,
495
- getAllByRole = _render22.getAllByRole;
675
+ getByLabelText = _render28.getByLabelText,
676
+ getAllByRole = _render28.getAllByRole;
496
677
 
497
678
  var number = getByLabelText("Number input label");
679
+ expect(number.getAttribute("type")).toBe("number");
498
680
  expect(number.getAttribute("aria-autocomplete")).toBeNull();
499
681
  expect(number.getAttribute("aria-controls")).toBeNull();
500
682
  expect(number.getAttribute("aria-expanded")).toBeNull();
@@ -503,4 +685,41 @@ describe("Number input component tests", function () {
503
685
  var increment = getAllByRole("button")[1];
504
686
  expect(increment.getAttribute("aria-label")).toBe("Increment value");
505
687
  });
688
+ test("Number input submits correct values inside a form and actions don't trigger the submit event", function () {
689
+ var handlerOnSubmit = jest.fn(function (e) {
690
+ e.preventDefault();
691
+ var formData = new FormData(e.target);
692
+ var formProps = Object.fromEntries(formData);
693
+ expect(formProps).toStrictEqual({
694
+ data: "0"
695
+ });
696
+ });
697
+
698
+ var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
699
+ onSubmit: handlerOnSubmit
700
+ }, /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
701
+ label: "Number input label",
702
+ name: "data"
703
+ }), /*#__PURE__*/_react["default"].createElement("button", {
704
+ type: "submit"
705
+ }, "Submit"))),
706
+ getByText = _render29.getByText,
707
+ getAllByRole = _render29.getAllByRole;
708
+
709
+ var less = getAllByRole("button")[0];
710
+ var more = getAllByRole("button")[1];
711
+ var submit = getByText("Submit");
712
+
713
+ _userEvent["default"].click(more);
714
+
715
+ expect(handlerOnSubmit).not.toHaveBeenCalled();
716
+
717
+ _userEvent["default"].click(less);
718
+
719
+ expect(handlerOnSubmit).not.toHaveBeenCalled();
720
+
721
+ _userEvent["default"].click(submit);
722
+
723
+ expect(handlerOnSubmit).toHaveBeenCalled();
724
+ });
506
725
  });