@dxc-technology/halstack-react 0.0.0-b3404a3 → 0.0.0-b3da1a9

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 (151) hide show
  1. package/dist/ThemeContext.js +72 -62
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/alert/Alert.js +6 -6
  4. package/dist/alert/index.d.ts +51 -0
  5. package/dist/button/Button.js +3 -3
  6. package/dist/checkbox/Checkbox.js +4 -5
  7. package/dist/common/variables.js +351 -140
  8. package/dist/date/Date.js +10 -12
  9. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +69 -72
  10. package/dist/date-input/index.d.ts +95 -0
  11. package/dist/dropdown/Dropdown.js +8 -13
  12. package/dist/file-input/FileInput.js +644 -0
  13. package/dist/file-input/FileItem.js +280 -0
  14. package/dist/file-input/index.d.ts +81 -0
  15. package/dist/footer/Footer.js +44 -18
  16. package/dist/footer/Icons.js +77 -0
  17. package/dist/header/Header.js +122 -55
  18. package/dist/header/Icons.js +59 -0
  19. package/dist/heading/Heading.js +12 -0
  20. package/dist/input-text/Icons.js +22 -0
  21. package/dist/input-text/InputText.js +7 -9
  22. package/dist/layout/ApplicationLayout.js +5 -9
  23. package/dist/layout/Icons.js +55 -0
  24. package/dist/link/Link.js +4 -8
  25. package/dist/main.d.ts +8 -0
  26. package/dist/main.js +37 -29
  27. package/dist/new-select/NewSelect.js +1085 -0
  28. package/dist/new-select/index.d.ts +53 -0
  29. package/dist/{number/Number.js → number-input/NumberInput.js} +9 -11
  30. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  31. package/dist/number-input/index.d.ts +113 -0
  32. package/dist/paginator/Icons.js +66 -0
  33. package/dist/paginator/Paginator.js +5 -11
  34. package/dist/{password/Password.js → password-input/PasswordInput.js} +11 -13
  35. package/dist/password-input/index.d.ts +94 -0
  36. package/dist/progress-bar/ProgressBar.js +1 -1
  37. package/dist/select/Select.js +122 -158
  38. package/dist/sidenav/Sidenav.js +6 -4
  39. package/dist/slider/Slider.js +104 -19
  40. package/dist/spinner/Spinner.js +217 -54
  41. package/dist/tag/Tag.js +26 -32
  42. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +184 -174
  43. package/dist/text-input/index.d.ts +135 -0
  44. package/dist/textarea/Textarea.js +227 -122
  45. package/dist/textarea/index.d.ts +117 -0
  46. package/dist/toggle-group/ToggleGroup.js +132 -28
  47. package/dist/upload/Upload.js +3 -3
  48. package/dist/upload/buttons-upload/ButtonsUpload.js +7 -11
  49. package/dist/upload/buttons-upload/Icons.js +40 -0
  50. package/dist/upload/dragAndDropArea/DragAndDropArea.js +14 -14
  51. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  52. package/dist/upload/file-upload/FileToUpload.js +26 -21
  53. package/dist/upload/file-upload/Icons.js +66 -0
  54. package/dist/upload/transaction/Icons.js +160 -0
  55. package/dist/upload/transaction/Transaction.js +11 -38
  56. package/dist/wizard/Icons.js +65 -0
  57. package/dist/wizard/Wizard.js +3 -9
  58. package/package.json +6 -9
  59. package/test/Date.test.js +48 -44
  60. package/test/{NewDate.test.js → DateInput.test.js} +66 -27
  61. package/test/FileInput.test.js +201 -0
  62. package/test/Footer.test.js +2 -7
  63. package/test/Header.test.js +5 -10
  64. package/test/Heading.test.js +60 -12
  65. package/test/InputText.test.js +24 -16
  66. package/test/{Number.test.js → NumberInput.test.js} +84 -66
  67. package/test/Paginator.test.js +1 -1
  68. package/test/PasswordInput.test.js +83 -0
  69. package/test/ResultsetTable.test.js +1 -2
  70. package/test/Select.test.js +40 -17
  71. package/test/Slider.test.js +9 -17
  72. package/test/Spinner.test.js +5 -0
  73. package/test/{NewInputText.test.js → TextInput.test.js} +146 -231
  74. package/test/Textarea.test.js +193 -0
  75. package/test/ToggleGroup.test.js +5 -1
  76. package/test/Upload.test.js +5 -5
  77. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  78. package/dist/checkbox/Checkbox.stories.js +0 -144
  79. package/dist/checkbox/readme.md +0 -116
  80. package/dist/date/Date.stories.js +0 -205
  81. package/dist/date/readme.md +0 -73
  82. package/dist/footer/Footer.stories.js +0 -94
  83. package/dist/footer/dxc_logo.svg +0 -15
  84. package/dist/footer/readme.md +0 -41
  85. package/dist/header/Header.stories.js +0 -176
  86. package/dist/header/close_icon.svg +0 -1
  87. package/dist/header/dxc_logo_black.svg +0 -8
  88. package/dist/header/hamb_menu_black.svg +0 -1
  89. package/dist/header/hamb_menu_white.svg +0 -1
  90. package/dist/header/readme.md +0 -33
  91. package/dist/input-text/InputText.stories.js +0 -209
  92. package/dist/input-text/error.svg +0 -1
  93. package/dist/input-text/readme.md +0 -91
  94. package/dist/layout/facebook.svg +0 -45
  95. package/dist/layout/linkedin.svg +0 -50
  96. package/dist/layout/twitter.svg +0 -53
  97. package/dist/link/readme.md +0 -51
  98. package/dist/new-textarea/NewTextarea.js +0 -346
  99. package/dist/paginator/images/next.svg +0 -3
  100. package/dist/paginator/images/nextPage.svg +0 -3
  101. package/dist/paginator/images/previous.svg +0 -3
  102. package/dist/paginator/images/previousPage.svg +0 -3
  103. package/dist/paginator/readme.md +0 -50
  104. package/dist/password/styles.css +0 -3
  105. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  106. package/dist/progress-bar/readme.md +0 -63
  107. package/dist/radio/Radio.stories.js +0 -166
  108. package/dist/radio/readme.md +0 -70
  109. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  110. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  111. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  112. package/dist/select/Select.stories.js +0 -235
  113. package/dist/select/readme.md +0 -72
  114. package/dist/slider/Slider.stories.js +0 -241
  115. package/dist/slider/readme.md +0 -64
  116. package/dist/spinner/Spinner.stories.js +0 -183
  117. package/dist/spinner/readme.md +0 -65
  118. package/dist/switch/Switch.stories.js +0 -134
  119. package/dist/switch/readme.md +0 -133
  120. package/dist/tabs/Tabs.stories.js +0 -130
  121. package/dist/tabs/readme.md +0 -78
  122. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  123. package/dist/tabs-for-sections/readme.md +0 -78
  124. package/dist/toggle/Toggle.stories.js +0 -297
  125. package/dist/toggle/readme.md +0 -80
  126. package/dist/upload/Upload.stories.js +0 -72
  127. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  128. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  129. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  130. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  131. package/dist/upload/file-upload/audio-icon.svg +0 -4
  132. package/dist/upload/file-upload/close.svg +0 -4
  133. package/dist/upload/file-upload/file-icon.svg +0 -4
  134. package/dist/upload/file-upload/video-icon.svg +0 -4
  135. package/dist/upload/readme.md +0 -37
  136. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  137. package/dist/upload/transaction/audio-icon.svg +0 -4
  138. package/dist/upload/transaction/error-icon.svg +0 -4
  139. package/dist/upload/transaction/file-icon-err.svg +0 -4
  140. package/dist/upload/transaction/file-icon.svg +0 -4
  141. package/dist/upload/transaction/image-icon-err.svg +0 -4
  142. package/dist/upload/transaction/image-icon.svg +0 -4
  143. package/dist/upload/transaction/success-icon.svg +0 -4
  144. package/dist/upload/transaction/video-icon-err.svg +0 -4
  145. package/dist/upload/transaction/video-icon.svg +0 -4
  146. package/dist/wizard/invalid_icon.svg +0 -5
  147. package/dist/wizard/valid_icon.svg +0 -5
  148. package/dist/wizard/validation-wrong.svg +0 -6
  149. package/test/NewTextarea.test.js +0 -201
  150. package/test/Password.test.js +0 -76
  151. package/test/TabsForSections.test.js +0 -34
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#666666">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
4
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="74.5" height="74.5" viewBox="0 0 24 24" fill="#666666">
2
- <path fill="none" d="M0 0h24v24H0z"/>
3
- <path d="M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="43.5" height="43.5" viewBox="0 0 24 24">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,37 +0,0 @@
1
- # DXC Upload Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcUpload } from "@dxc-technology/halstack-react";
7
- ```
8
-
9
- ## Props
10
-
11
- <table>
12
- <tr style="background-color: grey">
13
- <td>Name</td>
14
- <td>Default</td>
15
- <td>Description</td>
16
- </tr>
17
- <tr>
18
- <td>onUpload: function</td>
19
- <td></td>
20
- <td>This function will be called when the user clicks the 'Upload' button for every file to be uploaded, we will send as a parameter the File object; apart from that this function should return one promise on which we should make 'then'(here we should show a Success alert) or 'catch' (in this case we would receive the error message as a string)</td>
21
- </tr>
22
-
23
- </table>
24
-
25
- ## Examples
26
-
27
- ```js
28
- import React from "react";
29
-
30
- import { DxcUpload } from "@dxc-technology/halstack-react";
31
-
32
- function App() {
33
- return <Upload callbackUpload={callbackFunc} />;
34
- }
35
-
36
- export default App;
37
- ```
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#50B50F">
2
- <path fill="none" d="M0 0h24v24H0z"/>
3
- <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,5 +0,0 @@
1
- <svg id="highlight_off_black_18dp" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
2
- <path id="Path_2943" data-name="Path 2943" d="M0,0H18V18H0Z" fill="none"/>
3
- <path id="Path_2944" data-name="Path 2944" d="M10,4a6,6,0,1,0,6,6A6.01,6.01,0,0,0,10,4Zm3,7.945L11.945,13,10,11.06,8.059,13,7,11.945,8.944,10,7,8.059,8.059,7,10,8.944,11.945,7,13,8.059,11.06,10Z" transform="translate(-1.002 -1.002)" fill="#ffe6e9"/>
4
- <path id="Path_2945" data-name="Path 2945" d="M11.444,6.5,9.5,8.443,7.558,6.5,6.5,7.558,8.443,9.5,6.5,11.444,7.558,12.5,9.5,10.558,11.444,12.5,12.5,11.444,10.558,9.5,12.5,7.558ZM9.5,2A7.5,7.5,0,1,0,17,9.5,7.494,7.494,0,0,0,9.5,2Zm0,13.5a6,6,0,1,1,6-6A6.009,6.009,0,0,1,9.5,15.5Z" transform="translate(-0.501 -0.501)" fill="#d0011b"/>
5
- </svg>
@@ -1,5 +0,0 @@
1
- <svg id="check_circle_black_18dp" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
2
- <path id="Path_2946" data-name="Path 2946" d="M0,0H18V18H0Z" fill="none"/>
3
- <path id="Path_2947" data-name="Path 2947" d="M9.986,4a5.986,5.986,0,1,0,5.986,5.986A5.994,5.994,0,0,0,9.986,4Zm-1.5,9.727L5.5,10.734,6.551,9.679l1.938,1.93L13.42,6.679l1.055,1.063Z" transform="translate(-0.986 -0.986)" fill="#eafaef" opacity="0.999"/>
4
- <path id="Path_2948" data-name="Path 2948" d="M9.493,2a7.493,7.493,0,1,0,7.493,7.493A7.5,7.5,0,0,0,9.493,2Zm0,13.487a5.994,5.994,0,1,1,5.994-5.994A6,6,0,0,1,9.493,15.487Zm3.439-9.306L7.994,11.119,6.054,9.186,5,10.242l3,3,5.994-5.994Z" transform="translate(-0.493 -0.493)" fill="#24a148"/>
5
- </svg>
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="496" height="496" viewBox="0 0 496 496">
2
- <g id="Group_2913" data-name="Group 2913" transform="translate(5286 3925)">
3
- <path id="Path_2821" data-name="Path 2821" d="M240,0C372.548,0,480,107.452,480,240S372.548,480,240,480,0,372.548,0,240,107.452,0,240,0Z" transform="translate(-5278 -3917)" fill="#f9cfcf"/>
4
- <path id="times-circle-regular" d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm0,448A200,200,0,1,1,456,256,199.945,199.945,0,0,1,256,456ZM357.8,193.8,295.6,256l62.2,62.2a12.011,12.011,0,0,1,0,17l-22.6,22.6a12.011,12.011,0,0,1-17,0L256,295.6l-62.2,62.2a12.011,12.011,0,0,1-17,0l-22.6-22.6a12.011,12.011,0,0,1,0-17L216.4,256l-62.2-62.2a12.011,12.011,0,0,1,0-17l22.6-22.6a12.011,12.011,0,0,1,17,0L256,216.4l62.2-62.2a12.011,12.011,0,0,1,17,0l22.6,22.6a12.011,12.011,0,0,1,0,17Z" transform="translate(-5294 -3933)" fill="#e22"/>
5
- </g>
6
- </svg>
@@ -1,201 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } from "@testing-library/react";
3
-
4
- import DxcNewTextarea from "../src/new-textarea/NewTextarea";
5
-
6
- describe("NewTextarea component tests", () => {
7
- test("Renders with correct label", () => {
8
- const { getByText } = render(<DxcNewTextarea label="Example label" />);
9
- expect(getByText("Example label")).toBeTruthy();
10
- });
11
- test("Renders with correct label and helper text", () => {
12
- const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" />);
13
- expect(getByText("Example label")).toBeTruthy();
14
- expect(getByText("Example helper text")).toBeTruthy();
15
- });
16
- test("Renders with correct label and optional", () => {
17
- const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" optional />);
18
- expect(getByText("Example label")).toBeTruthy();
19
- expect(getByText("(Optional)")).toBeTruthy();
20
- expect(getByText("Example helper text")).toBeTruthy();
21
- });
22
- test("Renders with correct placeholder", () => {
23
- const { getByRole } = render(<DxcNewTextarea placeholder="Placeholder" />);
24
- const input = getByRole("textbox");
25
- expect(input.getAttribute("placeholder")).toBe("Placeholder");
26
- });
27
- test("Renders with error message", () => {
28
- const { getByText } = render(<DxcNewTextarea error="Error message." />);
29
- expect(getByText("Error message.")).toBeTruthy();
30
- });
31
- test("Renders with correct default rows", () => {
32
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" rows={10} />);
33
- const textarea = getByLabelText("Example label");
34
- expect(textarea.rows).toBe(10);
35
- });
36
- test("Strict mode - Pattern constraint", () => {
37
- const onChange = jest.fn();
38
- const onBlur = jest.fn();
39
- const { getByLabelText, getByText, queryByText } = render(
40
- <DxcNewTextarea
41
- label="Example label"
42
- placeholder="Placeholder"
43
- onChange={onChange}
44
- onBlur={onBlur}
45
- margin={{ left: "medium", right: "medium" }}
46
- pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
47
- />
48
- );
49
- const textarea = getByLabelText("Example label");
50
- fireEvent.change(textarea, { target: { value: "pattern test" } });
51
- fireEvent.blur(textarea);
52
- expect(getByText("Please match the format requested.")).toBeTruthy();
53
- fireEvent.change(textarea, { target: { value: "pattern4&" } });
54
- fireEvent.blur(textarea);
55
- expect(queryByText("Please match the format requested.")).toBeFalsy();
56
- });
57
- test("Strict mode - Length constraint", () => {
58
- const onChange = jest.fn();
59
- const onBlur = jest.fn();
60
- const { getByLabelText, getByText, queryByText } = render(
61
- <DxcNewTextarea
62
- label="Example label"
63
- placeholder="Placeholder"
64
- onChange={onChange}
65
- onBlur={onBlur}
66
- margin={{ left: "medium", right: "medium" }}
67
- length={{ min: 5, max: 10 }}
68
- />
69
- );
70
- const textarea = getByLabelText("Example label");
71
- fireEvent.change(textarea, { target: { value: "test" } });
72
- fireEvent.blur(textarea);
73
- expect(getByText("Min length 5, max length 10.")).toBeTruthy();
74
- fireEvent.change(textarea, { target: { value: "test " } });
75
- fireEvent.blur(textarea);
76
- expect(queryByText(/Min length /)).toBeFalsy();
77
- });
78
- test("Strict mode - Pattern and length constraints", () => {
79
- const onChange = jest.fn();
80
- const onBlur = jest.fn();
81
- const { getByLabelText, getByText, queryByText } = render(
82
- <DxcNewTextarea
83
- label="Example label"
84
- placeholder="Placeholder"
85
- onChange={onChange}
86
- onBlur={onBlur}
87
- margin={{ left: "medium", right: "medium" }}
88
- pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
89
- length={{ min: 5, max: 10 }}
90
- />
91
- );
92
- const textarea = getByLabelText("Example label");
93
- fireEvent.change(textarea, { target: { value: "test" } });
94
- fireEvent.blur(textarea);
95
- expect(getByText("Min length 5, max length 10.")).toBeTruthy();
96
- fireEvent.change(textarea, { target: { value: "test " } });
97
- fireEvent.blur(textarea);
98
- expect(getByText("Please match the format requested.")).toBeTruthy();
99
- fireEvent.change(textarea, { target: { value: "test 4" } });
100
- fireEvent.blur(textarea);
101
- expect(queryByText("Please match the format requested.")).toBeFalsy();
102
- });
103
- test("Non Strict mode - Pattern constraint", () => {
104
- const onChange = jest.fn((value) => {
105
- expect(value).toBe("Example value");
106
- });
107
- const onBlur = jest.fn(({ value, error }) => {
108
- expect(value).toBe("Example value");
109
- expect(error).toBe("Please match the format requested.");
110
- });
111
- const { getByLabelText } = render(
112
- <DxcNewTextarea
113
- label="Example label"
114
- placeholder="Placeholder"
115
- onChange={onChange}
116
- onBlur={onBlur}
117
- margin={{ left: "medium", right: "medium" }}
118
- pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
119
- />
120
- );
121
- const textarea = getByLabelText("Example label");
122
- fireEvent.change(textarea, { target: { value: "Example value" } });
123
- fireEvent.blur(textarea);
124
- });
125
- test("Non Strict mode - Length constraint", () => {
126
- const onChange = jest.fn((value) => {
127
- expect(value).toBe("Example value");
128
- });
129
- const onBlur = jest.fn(({ value, error }) => {
130
- expect(value).toBe("Example value");
131
- expect(error).toBe("Min length 5, max length 10.");
132
- });
133
- const { getByLabelText } = render(
134
- <DxcNewTextarea
135
- label="Example label"
136
- placeholder="Placeholder"
137
- onChange={onChange}
138
- onBlur={onBlur}
139
- margin={{ left: "medium", right: "medium" }}
140
- length={{ min: 5, max: 10 }}
141
- />
142
- );
143
- const textarea = getByLabelText("Example label");
144
- fireEvent.change(textarea, { target: { value: "Example value" } });
145
- fireEvent.blur(textarea);
146
- });
147
- test("Non Strict mode - Pattern and length constraints", () => {
148
- const onChange = jest.fn((value) => {
149
- expect(value).toBe("Example value");
150
- });
151
- const onBlur = jest.fn(({ value, error }) => {
152
- expect(value).toBe("Example value");
153
- expect(error).toBe("Min length 5, max length 10.");
154
- });
155
- const { getByLabelText } = render(
156
- <DxcNewTextarea
157
- label="Example label"
158
- placeholder="Placeholder"
159
- onChange={onChange}
160
- onBlur={onBlur}
161
- margin={{ left: "medium", right: "medium" }}
162
- length={{ min: 5, max: 10 }}
163
- />
164
- );
165
- const textarea = getByLabelText("Example label");
166
- fireEvent.change(textarea, { target: { value: "Example value" } });
167
- fireEvent.blur(textarea);
168
- });
169
- test("onBlur function is called correctly", () => {
170
- const onBlur = jest.fn();
171
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" onBlur={onBlur} />);
172
- const textarea = getByLabelText("Example label");
173
- fireEvent.change(textarea, { target: { value: "Blur test" } });
174
- fireEvent.blur(textarea);
175
- expect(onBlur).toHaveBeenCalled();
176
- expect(onBlur).toHaveBeenCalledWith({ value: "Blur test", error: null });
177
- });
178
- test("Controlled textarea", () => {
179
- const onChange = jest.fn();
180
- const onBlur = jest.fn();
181
- const { getByLabelText } = render(
182
- <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} onBlur={onBlur} />
183
- );
184
- const textarea = getByLabelText("Example label");
185
- fireEvent.change(textarea, { target: { value: "Controlled test" } });
186
- expect(onChange).toHaveBeenCalled();
187
- expect(textarea.value).toBe("Test value");
188
- fireEvent.blur(textarea);
189
- expect(onBlur).toHaveBeenCalled();
190
- expect(onBlur).toHaveBeenCalledWith({ value: "Test value", error: null });
191
- });
192
- test("Uncontrolled input", () => {
193
- const onChange = jest.fn();
194
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" onChange={onChange} />);
195
- const textarea = getByLabelText("Example label");
196
- fireEvent.change(textarea, { target: { value: "Uncontrolled test" } });
197
- expect(onChange).toHaveBeenCalled();
198
- expect(onChange).toHaveBeenCalledWith("Uncontrolled test");
199
- expect(textarea.value).toBe("Uncontrolled test");
200
- });
201
- });
@@ -1,76 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import userEvent from "@testing-library/user-event";
4
- import DxcPassword from "../src/password/Password";
5
-
6
- describe("Password component tests", () => {
7
- test("Password renders with label", () => {
8
- const { getByText } = render(<DxcPassword label="Password label" />);
9
- expect(getByText("Password label")).toBeTruthy();
10
- });
11
-
12
- test("Password renders with helper text", () => {
13
- const { getByText } = render(<DxcPassword helperText="Helper text" />);
14
- expect(getByText("Helper text")).toBeTruthy();
15
- });
16
-
17
- test("Password renders error", () => {
18
- const { getByText } = render(<DxcPassword error="Error message." />);
19
- expect(getByText("Error message.")).toBeTruthy();
20
- });
21
-
22
- test("onChange function is called correctly", () => {
23
- const onChange = jest.fn();
24
- const { getByRole } = render(<DxcPassword label="Password" onChange={onChange} />);
25
- const password = getByRole("textbox");
26
- userEvent.type(password, "Pa$$w0rd");
27
- expect(onChange).toHaveBeenCalledWith("P");
28
- expect(password.value).toBe("Pa$$w0rd");
29
- });
30
-
31
- test("Clear password value", () => {
32
- const onChange = jest.fn();
33
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" onChange={onChange} clearable />);
34
- const password = getByRole("textbox");
35
- userEvent.type(password, "Pa$$w0rd");
36
- expect(password.value).toBe("Pa$$w0rd");
37
- const clearButton = getAllByRole("button")[0];
38
- userEvent.click(clearButton);
39
- expect(password.value).toBe("");
40
- });
41
-
42
- test("Non clearable password has no clear icon", () => {
43
- const onChange = jest.fn();
44
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" onChange={onChange} />);
45
- const password = getByRole("textbox");
46
- userEvent.type(password, "Pa$$w0rd");
47
- expect(password.value).toBe("Pa$$w0rd");
48
- const buttons = getAllByRole("button");
49
- expect(buttons.length).toBe(1);
50
- });
51
-
52
- test("Show/hide password button works correctly", () => {
53
- const onChange = jest.fn();
54
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" clearable onChange={onChange} />);
55
- const password = getByRole("textbox");
56
- userEvent.type(password, "Pa$$w0rd");
57
- expect(password.value).toBe("Pa$$w0rd");
58
- expect(password.type).toBe("password");
59
- const showButton = getAllByRole("button")[1];
60
- userEvent.click(showButton);
61
- expect(password.type).toBe("text");
62
- });
63
-
64
- test("Password has correct accesibility attributes", () => {
65
- const { getByRole } = render(<DxcPassword label="Password" />);
66
- const password = getByRole("textbox");
67
- expect(password.getAttribute("aria-autocomplete")).toBeNull();
68
- expect(password.getAttribute("aria-controls")).toBeNull();
69
- const showButton = getByRole("button");
70
- expect(showButton.getAttribute("aria-expanded")).toBe("false");
71
- expect(showButton.getAttribute("aria-label")).toBe("Show");
72
- userEvent.click(showButton);
73
- expect(showButton.getAttribute("aria-expanded")).toBe("true");
74
- expect(showButton.getAttribute("aria-label")).toBe("Hide");
75
- });
76
- });
@@ -1,34 +0,0 @@
1
- import React from "react";
2
- import { render } from "@testing-library/react";
3
- import DxcTabsForSections from "../src/tabs-for-sections/TabsForSections";
4
-
5
- const sections = [
6
- {
7
- tabLabel: "S1",
8
- section: () => <div>test-section-1</div>,
9
- },
10
- {
11
- tabLabel: "S2",
12
- section: () => <div>test-section-2</div>,
13
- },
14
- {
15
- tabLabel: "S3",
16
- section: () => <div>test-section-3</div>,
17
- },
18
- ];
19
-
20
- describe("TabsForSections component tests", () => {
21
- test("TabsForSections renders with correct sections label", () => {
22
- const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
23
- expect(getByText("S1")).toBeTruthy();
24
- expect(getByText("S2")).toBeTruthy();
25
- expect(getByText("S3")).toBeTruthy();
26
- });
27
-
28
- test("TabsForSections renders with correct sections content", () => {
29
- const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
30
- expect(getByText("test-section-1")).toBeTruthy();
31
- expect(getByText("test-section-2")).toBeTruthy();
32
- expect(getByText("test-section-3")).toBeTruthy();
33
- });
34
- });