@dxc-technology/halstack-react 0.0.0-7d46b9f → 0.0.0-7da4003

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 (109) hide show
  1. package/dist/ThemeContext.js +6 -6
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/alert/Alert.js +4 -4
  4. package/dist/button/Button.js +1 -1
  5. package/dist/common/variables.js +199 -74
  6. package/dist/date/Date.js +6 -6
  7. package/dist/{new-date/NewDate.js → date-input/DateInput.js} +36 -36
  8. package/dist/{new-date → date-input}/index.d.ts +3 -3
  9. package/dist/file-input/FileInput.js +2 -2
  10. package/dist/file-input/index.d.ts +1 -1
  11. package/dist/footer/Footer.js +44 -18
  12. package/dist/footer/Icons.js +77 -0
  13. package/dist/header/Header.js +80 -49
  14. package/dist/header/Icons.js +59 -0
  15. package/dist/input-text/Icons.js +22 -0
  16. package/dist/input-text/InputText.js +7 -9
  17. package/dist/layout/ApplicationLayout.js +4 -8
  18. package/dist/layout/Icons.js +55 -0
  19. package/dist/main.d.ts +6 -5
  20. package/dist/main.js +29 -21
  21. package/dist/new-select/NewSelect.js +836 -0
  22. package/dist/new-select/index.d.ts +53 -0
  23. package/dist/{number/Number.js → number-input/NumberInput.js} +8 -8
  24. package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  25. package/dist/{number → number-input}/index.d.ts +3 -3
  26. package/dist/paginator/Icons.js +66 -0
  27. package/dist/paginator/Paginator.js +5 -11
  28. package/dist/{password/Password.js → password-input/PasswordInput.js} +8 -10
  29. package/dist/{password → password-input}/index.d.ts +5 -5
  30. package/dist/slider/Slider.js +104 -19
  31. package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +36 -32
  32. package/dist/{new-input-text → text-input}/index.d.ts +1 -1
  33. package/dist/textarea/Textarea.js +227 -122
  34. package/dist/{new-textarea → textarea}/index.d.ts +1 -1
  35. package/dist/toggle-group/ToggleGroup.js +132 -28
  36. package/dist/upload/Upload.js +3 -3
  37. package/dist/upload/buttons-upload/ButtonsUpload.js +7 -11
  38. package/dist/upload/buttons-upload/Icons.js +40 -0
  39. package/dist/upload/dragAndDropArea/DragAndDropArea.js +14 -14
  40. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  41. package/dist/upload/file-upload/FileToUpload.js +26 -21
  42. package/dist/upload/file-upload/Icons.js +66 -0
  43. package/dist/upload/readme.md +2 -2
  44. package/dist/upload/transaction/Icons.js +160 -0
  45. package/dist/upload/transaction/Transaction.js +11 -38
  46. package/dist/wizard/Icons.js +65 -0
  47. package/dist/wizard/Wizard.js +3 -9
  48. package/package.json +1 -1
  49. package/test/Date.test.js +48 -44
  50. package/test/{NewDate.test.js → DateInput.test.js} +33 -23
  51. package/test/Footer.test.js +2 -7
  52. package/test/Header.test.js +5 -10
  53. package/test/InputText.test.js +24 -16
  54. package/test/{Number.test.js → NumberInput.test.js} +47 -45
  55. package/test/PasswordInput.test.js +83 -0
  56. package/test/Slider.test.js +9 -17
  57. package/test/{NewInputText.test.js → TextInput.test.js} +46 -48
  58. package/test/{NewTextarea.test.js → Textarea.test.js} +16 -18
  59. package/test/ToggleGroup.test.js +5 -1
  60. package/test/Upload.test.js +5 -5
  61. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  62. package/dist/footer/Footer.stories.js +0 -94
  63. package/dist/footer/dxc_logo.svg +0 -15
  64. package/dist/footer/readme.md +0 -41
  65. package/dist/header/Header.stories.js +0 -176
  66. package/dist/header/close_icon.svg +0 -1
  67. package/dist/header/dxc_logo_black.svg +0 -8
  68. package/dist/header/hamb_menu_black.svg +0 -1
  69. package/dist/header/hamb_menu_white.svg +0 -1
  70. package/dist/header/readme.md +0 -33
  71. package/dist/input-text/InputText.stories.js +0 -209
  72. package/dist/input-text/error.svg +0 -1
  73. package/dist/input-text/readme.md +0 -91
  74. package/dist/layout/facebook.svg +0 -45
  75. package/dist/layout/linkedin.svg +0 -50
  76. package/dist/layout/twitter.svg +0 -53
  77. package/dist/new-textarea/NewTextarea.js +0 -365
  78. package/dist/paginator/images/next.svg +0 -3
  79. package/dist/paginator/images/nextPage.svg +0 -3
  80. package/dist/paginator/images/previous.svg +0 -3
  81. package/dist/paginator/images/previousPage.svg +0 -3
  82. package/dist/paginator/readme.md +0 -50
  83. package/dist/password/styles.css +0 -3
  84. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  85. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  86. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  87. package/dist/slider/Slider.stories.js +0 -241
  88. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  89. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  90. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  91. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  92. package/dist/upload/file-upload/audio-icon.svg +0 -4
  93. package/dist/upload/file-upload/close.svg +0 -4
  94. package/dist/upload/file-upload/file-icon.svg +0 -4
  95. package/dist/upload/file-upload/video-icon.svg +0 -4
  96. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  97. package/dist/upload/transaction/audio-icon.svg +0 -4
  98. package/dist/upload/transaction/error-icon.svg +0 -4
  99. package/dist/upload/transaction/file-icon-err.svg +0 -4
  100. package/dist/upload/transaction/file-icon.svg +0 -4
  101. package/dist/upload/transaction/image-icon-err.svg +0 -4
  102. package/dist/upload/transaction/image-icon.svg +0 -4
  103. package/dist/upload/transaction/success-icon.svg +0 -4
  104. package/dist/upload/transaction/video-icon-err.svg +0 -4
  105. package/dist/upload/transaction/video-icon.svg +0 -4
  106. package/dist/wizard/invalid_icon.svg +0 -5
  107. package/dist/wizard/valid_icon.svg +0 -5
  108. package/dist/wizard/validation-wrong.svg +0 -6
  109. package/test/Password.test.js +0 -83
@@ -1,50 +0,0 @@
1
- # DXC Paginator Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>currentPage: number</td>
13
- <td><code>1</code></td>
14
- <td>Current page.</td>
15
- </tr>
16
- <tr>
17
- <td>itemsPerPage: number</td>
18
- <td><code>5</code></td>
19
- <td>Number of items to be displayed on each page.</td>
20
- </tr>
21
- <tr>
22
- <td>totalItems: number</td>
23
- <td></td>
24
- <td>Total number of items.</td>
25
- </tr>
26
- <tr>
27
- <td>nextFunction: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the next page button.<br>
30
- </td>
31
- </tr>
32
- <tr>
33
- <td>prevFunction: function</td>
34
- <td></td>
35
- <td>This function will be called when the user clicks the previous page button.<br>
36
- </td>
37
- </tr>
38
- <tr>
39
- <td>lastFunction: function</td>
40
- <td></td>
41
- <td>This function will be called when the user clicks the last page button.<br>
42
- </td>
43
- </tr>
44
- <tr>
45
- <td>firstFunction: function</td>
46
- <td></td>
47
- <td>This function will be called when the user clicks the first page button.<br>
48
- </td>
49
- </tr>
50
- </table>
@@ -1,3 +0,0 @@
1
- ::-ms-reveal {
2
- display: none;
3
- }
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
@@ -1,241 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Slider = _interopRequireDefault(require("./Slider"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- var onDragEnd = (0, _addonActions.action)("onDragEnd");
26
-
27
- onDragEnd.toString = function () {
28
- return "onDragEnd";
29
- };
30
-
31
- var onChangeInput = (0, _addonActions.action)("onChangeInput");
32
-
33
- onChangeInput.toString = function () {
34
- return "onChangeInputHandler";
35
- };
36
-
37
- (0, _react2.storiesOf)("Form Components|Slider", module).add("Component", function () {
38
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
39
- minValue: 0,
40
- maxValue: 100,
41
- showLimitsValues: true,
42
- showInput: false,
43
- name: "input",
44
- disabled: false,
45
- required: true,
46
- theme: "light",
47
- step: 1,
48
- marks: false,
49
- onChange: onChange,
50
- onDragEnd: onDragEnd,
51
- onChangeInput: onChangeInput
52
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
53
- minValue: 0,
54
- maxValue: 50,
55
- showLimitsValues: true,
56
- showInput: false,
57
- name: "input",
58
- disabled: false,
59
- required: true,
60
- theme: "light",
61
- step: 10,
62
- marks: true,
63
- onChange: onChange,
64
- onDragEnd: onDragEnd,
65
- onChangeInput: onChangeInput
66
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
67
- minValue: 0,
68
- maxValue: 50,
69
- showLimitsValues: false,
70
- showInput: false,
71
- name: "input",
72
- disabled: false,
73
- required: true,
74
- theme: "light",
75
- step: 10,
76
- marks: false,
77
- onChange: onChange,
78
- onDragEnd: onDragEnd,
79
- onChangeInput: onChangeInput
80
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
81
- minValue: 0,
82
- maxValue: 50,
83
- showLimitsValues: true,
84
- showInput: true,
85
- name: "input",
86
- disabled: false,
87
- required: true,
88
- theme: "light",
89
- step: 5,
90
- marks: true,
91
- onChange: onChange,
92
- onDragEnd: onDragEnd,
93
- onChangeInput: onChangeInput
94
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
95
- minValue: 0,
96
- maxValue: 50,
97
- showLimitsValues: true,
98
- showInput: true,
99
- name: "input",
100
- disabled: true,
101
- required: true,
102
- theme: "light",
103
- step: 5,
104
- marks: true,
105
- onChange: onChange,
106
- onDragEnd: onDragEnd,
107
- onChangeInput: onChangeInput
108
- }))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
109
- style: {
110
- background: "black"
111
- }
112
- }, _react["default"].createElement("p", {
113
- style: {
114
- color: "white"
115
- }
116
- }, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
117
- minValue: 0,
118
- maxValue: 100,
119
- showLimitsValues: true,
120
- showInput: false,
121
- name: "input",
122
- disabled: false,
123
- required: true,
124
- theme: "dark",
125
- step: 1,
126
- marks: false,
127
- onChange: onChange,
128
- onDragEnd: onDragEnd,
129
- onChangeInput: onChangeInput
130
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
131
- style: {
132
- color: "white"
133
- }
134
- }, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
135
- minValue: 0,
136
- maxValue: 50,
137
- showLimitsValues: true,
138
- showInput: false,
139
- name: "input",
140
- disabled: false,
141
- required: true,
142
- theme: "dark",
143
- step: 10,
144
- marks: true,
145
- onChange: onChange,
146
- onDragEnd: onDragEnd,
147
- onChangeInput: onChangeInput
148
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
149
- style: {
150
- color: "white"
151
- }
152
- }, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
153
- minValue: 0,
154
- maxValue: 50,
155
- showLimitsValues: false,
156
- showInput: false,
157
- name: "input",
158
- disabled: false,
159
- required: true,
160
- theme: "dark",
161
- step: 10,
162
- marks: false,
163
- onChange: onChange,
164
- onDragEnd: onDragEnd,
165
- onChangeInput: onChangeInput
166
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
167
- style: {
168
- color: "white"
169
- }
170
- }, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
171
- minValue: 0,
172
- maxValue: 50,
173
- showLimitsValues: true,
174
- showInput: true,
175
- name: "input",
176
- disabled: false,
177
- required: true,
178
- theme: "dark",
179
- step: 5,
180
- marks: true,
181
- onChange: onChange,
182
- onDragEnd: onDragEnd,
183
- onChangeInput: onChangeInput
184
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
185
- style: {
186
- color: "white"
187
- }
188
- }, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
189
- minValue: 0,
190
- maxValue: 50,
191
- showLimitsValues: true,
192
- showInput: true,
193
- name: "input",
194
- disabled: true,
195
- required: true,
196
- theme: "dark",
197
- step: 5,
198
- marks: true,
199
- onChange: onChange,
200
- onDragEnd: onDragEnd,
201
- onChangeInput: onChangeInput
202
- }))));
203
- }, {
204
- notes: {
205
- markdown: _readme["default"]
206
- }
207
- });
208
-
209
- var knobProps = function knobProps() {
210
- return {
211
- minValue: (0, _addonKnobs.number)("minvalue", 0),
212
- maxValue: (0, _addonKnobs.number)("maxvalue", 100),
213
- showLimitsValues: (0, _addonKnobs["boolean"])("showLimits", true),
214
- showInput: (0, _addonKnobs["boolean"])("showInput", true),
215
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
216
- theme: (0, _addonKnobs.select)("theme", {
217
- light: "light",
218
- dark: "dark"
219
- }, "light"),
220
- step: (0, _addonKnobs.number)("step", 1),
221
- marks: (0, _addonKnobs["boolean"])("marks", false)
222
- };
223
- };
224
-
225
- (0, _react2.storiesOf)("Form Components|Slider", module).add("Knobs example", function () {
226
- var props = knobProps();
227
- return _react["default"].createElement("div", {
228
- style: {
229
- background: props.theme === "dark" && "black" || "transparent"
230
- }
231
- }, _react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, props, {
232
- onChange: onChange,
233
- onDragEnd: onDragEnd,
234
- onChangeInput: onChangeInput,
235
- name: "sliderImput"
236
- })));
237
- }, {
238
- notes: {
239
- markdown: _readme["default"]
240
- }
241
- });
@@ -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,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,83 +0,0 @@
1
- import React from "react";
2
- import { render, fireEvent } 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({ value: "P", error: null });
28
- expect(password.value).toBe("Pa$$w0rd");
29
- });
30
-
31
- test("onBlur function is called correctly", () => {
32
- const onBlur = jest.fn();
33
- const { getByRole } = render(<DxcPassword label="Password" onBlur={onBlur} />);
34
- const password = getByRole("textbox");
35
- userEvent.type(password, "Pa$$w0rd");
36
- fireEvent.blur(password);
37
- expect(onBlur).toHaveBeenCalledWith({ value: "Pa$$w0rd", error: null });
38
- expect(password.value).toBe("Pa$$w0rd");
39
- });
40
-
41
- test("Clear password value", () => {
42
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" clearable />);
43
- const password = getByRole("textbox");
44
- userEvent.type(password, "Pa$$w0rd");
45
- expect(password.value).toBe("Pa$$w0rd");
46
- const clearButton = getAllByRole("button")[0];
47
- userEvent.click(clearButton);
48
- expect(password.value).toBe("");
49
- });
50
-
51
- test("Non clearable password has no clear icon", () => {
52
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" />);
53
- const password = getByRole("textbox");
54
- userEvent.type(password, "Pa$$w0rd");
55
- expect(password.value).toBe("Pa$$w0rd");
56
- const buttons = getAllByRole("button");
57
- expect(buttons.length).toBe(1);
58
- });
59
-
60
- test("Show/hide password button works correctly", () => {
61
- const { getAllByRole, getByRole } = render(<DxcPassword label="Password" clearable />);
62
- const password = getByRole("textbox");
63
- userEvent.type(password, "Pa$$w0rd");
64
- expect(password.value).toBe("Pa$$w0rd");
65
- expect(password.type).toBe("password");
66
- const showButton = getAllByRole("button")[1];
67
- userEvent.click(showButton);
68
- expect(password.type).toBe("text");
69
- });
70
-
71
- test("Password has correct accesibility attributes", () => {
72
- const { getByRole } = render(<DxcPassword label="Password" />);
73
- const password = getByRole("textbox");
74
- expect(password.getAttribute("aria-autocomplete")).toBeNull();
75
- expect(password.getAttribute("aria-controls")).toBeNull();
76
- const showButton = getByRole("button");
77
- expect(showButton.getAttribute("aria-expanded")).toBe("false");
78
- expect(showButton.getAttribute("aria-label")).toBe("Show");
79
- userEvent.click(showButton);
80
- expect(showButton.getAttribute("aria-expanded")).toBe("true");
81
- expect(showButton.getAttribute("aria-label")).toBe("Hide");
82
- });
83
- });