@dxc-technology/halstack-react 0.0.0-c796a1b → 0.0.0-c8b251f

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 (202) hide show
  1. package/BackgroundColorContext.js +0 -1
  2. package/ThemeContext.d.ts +4 -9
  3. package/ThemeContext.js +32 -32
  4. package/accordion/Accordion.d.ts +1 -1
  5. package/accordion/Accordion.js +11 -43
  6. package/accordion/Accordion.stories.tsx +307 -0
  7. package/accordion/Accordion.test.js +72 -0
  8. package/accordion/types.d.ts +8 -8
  9. package/accordion-group/AccordionGroup.d.ts +1 -1
  10. package/accordion-group/AccordionGroup.js +13 -15
  11. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  12. package/accordion-group/AccordionGroup.test.js +151 -0
  13. package/accordion-group/types.d.ts +8 -8
  14. package/alert/Alert.test.js +92 -0
  15. package/badge/Badge.d.ts +4 -0
  16. package/badge/types.d.ts +4 -0
  17. package/badge/types.js +5 -0
  18. package/bleed/Bleed.d.ts +3 -0
  19. package/bleed/Bleed.js +84 -0
  20. package/bleed/Bleed.stories.tsx +342 -0
  21. package/bleed/types.d.ts +37 -0
  22. package/bleed/types.js +5 -0
  23. package/box/Box.test.js +18 -0
  24. package/button/Button.d.ts +1 -1
  25. package/button/Button.js +9 -17
  26. package/button/Button.stories.tsx +6 -8
  27. package/button/Button.test.js +35 -0
  28. package/button/types.d.ts +3 -7
  29. package/card/Card.stories.tsx +1 -1
  30. package/card/Card.test.js +50 -0
  31. package/checkbox/Checkbox.d.ts +1 -1
  32. package/checkbox/Checkbox.js +7 -13
  33. package/checkbox/Checkbox.stories.tsx +14 -14
  34. package/checkbox/Checkbox.test.js +78 -0
  35. package/checkbox/types.d.ts +5 -1
  36. package/chip/Chip.d.ts +1 -1
  37. package/chip/Chip.js +16 -54
  38. package/chip/Chip.stories.tsx +6 -8
  39. package/chip/Chip.test.js +56 -0
  40. package/chip/types.d.ts +7 -15
  41. package/common/variables.js +43 -245
  42. package/date-input/DateInput.js +50 -39
  43. package/date-input/DateInput.stories.tsx +7 -7
  44. package/date-input/DateInput.test.js +479 -0
  45. package/date-input/types.d.ts +16 -9
  46. package/dialog/Dialog.js +6 -33
  47. package/dialog/Dialog.test.js +40 -0
  48. package/dropdown/Dropdown.d.ts +1 -1
  49. package/dropdown/Dropdown.js +12 -34
  50. package/dropdown/Dropdown.stories.tsx +249 -0
  51. package/dropdown/Dropdown.test.js +189 -0
  52. package/dropdown/types.d.ts +5 -14
  53. package/file-input/FileInput.js +102 -33
  54. package/file-input/FileInput.stories.tsx +507 -0
  55. package/file-input/FileInput.test.js +457 -0
  56. package/footer/Footer.js +19 -96
  57. package/footer/Footer.test.js +109 -0
  58. package/header/Header.js +20 -44
  59. package/header/Header.stories.tsx +46 -36
  60. package/header/Header.test.js +79 -0
  61. package/heading/Heading.stories.tsx +3 -2
  62. package/heading/Heading.test.js +186 -0
  63. package/inset/Inset.d.ts +3 -0
  64. package/inset/Inset.js +84 -0
  65. package/inset/Inset.stories.tsx +229 -0
  66. package/inset/types.d.ts +37 -0
  67. package/inset/types.js +5 -0
  68. package/layout/ApplicationLayout.js +7 -14
  69. package/link/Link.js +7 -15
  70. package/link/Link.stories.tsx +6 -1
  71. package/link/Link.test.js +91 -0
  72. package/link/types.d.ts +5 -9
  73. package/list/List.d.ts +3 -6
  74. package/list/List.js +17 -7
  75. package/list/List.stories.tsx +25 -0
  76. package/list/types.d.ts +7 -0
  77. package/list/types.js +5 -0
  78. package/main.d.ts +5 -6
  79. package/main.js +28 -36
  80. package/number-input/NumberInput.js +11 -18
  81. package/number-input/NumberInput.stories.tsx +5 -5
  82. package/number-input/NumberInput.test.js +506 -0
  83. package/number-input/types.d.ts +16 -9
  84. package/package.json +6 -3
  85. package/paginator/Paginator.test.js +266 -0
  86. package/password-input/PasswordInput.stories.tsx +3 -3
  87. package/password-input/PasswordInput.test.js +181 -0
  88. package/password-input/types.d.ts +13 -10
  89. package/progress-bar/ProgressBar.js +2 -2
  90. package/progress-bar/ProgressBar.test.js +65 -0
  91. package/quick-nav/QuickNav.d.ts +4 -0
  92. package/quick-nav/QuickNav.js +66 -0
  93. package/quick-nav/QuickNav.stories.tsx +237 -0
  94. package/quick-nav/types.d.ts +21 -0
  95. package/quick-nav/types.js +5 -0
  96. package/radio/Radio.test.js +71 -0
  97. package/radio-group/Radio.d.ts +4 -0
  98. package/radio-group/Radio.js +141 -0
  99. package/radio-group/RadioGroup.d.ts +4 -0
  100. package/radio-group/RadioGroup.js +280 -0
  101. package/radio-group/RadioGroup.stories.tsx +100 -0
  102. package/radio-group/RadioGroup.test.js +695 -0
  103. package/radio-group/types.d.ts +114 -0
  104. package/radio-group/types.js +5 -0
  105. package/resultsetTable/ResultsetTable.js +5 -2
  106. package/resultsetTable/ResultsetTable.stories.tsx +7 -8
  107. package/resultsetTable/ResultsetTable.test.js +306 -0
  108. package/row/Row.d.ts +3 -11
  109. package/row/Row.js +12 -9
  110. package/row/Row.stories.tsx +20 -6
  111. package/row/types.d.ts +28 -0
  112. package/row/types.js +5 -0
  113. package/select/Icons.d.ts +10 -0
  114. package/select/Icons.js +93 -0
  115. package/select/Listbox.d.ts +4 -0
  116. package/select/Listbox.js +148 -0
  117. package/select/Option.d.ts +4 -0
  118. package/select/Option.js +110 -0
  119. package/select/Select.d.ts +4 -0
  120. package/select/Select.js +94 -302
  121. package/select/Select.stories.tsx +91 -81
  122. package/select/Select.test.js +2057 -0
  123. package/select/types.d.ts +213 -0
  124. package/select/types.js +5 -0
  125. package/sidenav/Sidenav.stories.tsx +18 -1
  126. package/sidenav/Sidenav.test.js +56 -0
  127. package/slider/Slider.d.ts +1 -1
  128. package/slider/Slider.js +2 -1
  129. package/slider/Slider.stories.tsx +8 -8
  130. package/slider/Slider.test.js +150 -0
  131. package/slider/types.d.ts +4 -0
  132. package/spinner/Spinner.stories.jsx +1 -0
  133. package/spinner/Spinner.test.js +64 -0
  134. package/stack/Stack.d.ts +3 -10
  135. package/stack/Stack.js +12 -9
  136. package/stack/Stack.stories.tsx +20 -6
  137. package/stack/types.d.ts +24 -0
  138. package/stack/types.js +5 -0
  139. package/switch/Switch.d.ts +1 -1
  140. package/switch/Switch.js +19 -6
  141. package/switch/Switch.stories.tsx +7 -7
  142. package/switch/Switch.test.js +98 -0
  143. package/switch/types.d.ts +4 -0
  144. package/table/Table.stories.jsx +2 -1
  145. package/table/Table.test.js +26 -0
  146. package/tabs/Tabs.d.ts +1 -1
  147. package/tabs/Tabs.js +16 -18
  148. package/tabs/Tabs.stories.tsx +8 -11
  149. package/tabs/Tabs.test.js +140 -0
  150. package/tabs/types.d.ts +27 -15
  151. package/tag/Tag.d.ts +1 -1
  152. package/tag/Tag.js +15 -22
  153. package/tag/Tag.stories.tsx +26 -29
  154. package/tag/Tag.test.js +60 -0
  155. package/tag/types.d.ts +23 -14
  156. package/text/Text.js +1 -1
  157. package/text-input/TextInput.js +22 -12
  158. package/text-input/TextInput.stories.tsx +34 -16
  159. package/text-input/TextInput.test.js +1712 -0
  160. package/text-input/types.d.ts +18 -11
  161. package/textarea/Textarea.d.ts +4 -0
  162. package/textarea/Textarea.js +10 -38
  163. package/textarea/Textarea.stories.jsx +37 -15
  164. package/textarea/Textarea.test.js +437 -0
  165. package/textarea/types.d.ts +137 -0
  166. package/textarea/types.js +5 -0
  167. package/toggle-group/ToggleGroup.d.ts +1 -1
  168. package/toggle-group/ToggleGroup.js +12 -14
  169. package/toggle-group/ToggleGroup.stories.tsx +27 -32
  170. package/toggle-group/ToggleGroup.test.js +156 -0
  171. package/toggle-group/types.d.ts +46 -25
  172. package/wizard/Wizard.d.ts +1 -1
  173. package/wizard/Wizard.js +71 -16
  174. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +13 -23
  175. package/wizard/Wizard.test.js +141 -0
  176. package/wizard/types.d.ts +8 -8
  177. package/V3Select/V3Select.js +0 -455
  178. package/V3Select/index.d.ts +0 -27
  179. package/V3Textarea/V3Textarea.js +0 -260
  180. package/V3Textarea/index.d.ts +0 -27
  181. package/date/Date.js +0 -373
  182. package/date/index.d.ts +0 -27
  183. package/input-text/Icons.js +0 -22
  184. package/input-text/InputText.js +0 -611
  185. package/input-text/index.d.ts +0 -36
  186. package/select/index.d.ts +0 -131
  187. package/textarea/index.d.ts +0 -127
  188. package/toggle/Toggle.js +0 -186
  189. package/toggle/index.d.ts +0 -21
  190. package/upload/Upload.js +0 -201
  191. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  192. package/upload/buttons-upload/Icons.js +0 -40
  193. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  194. package/upload/dragAndDropArea/Icons.js +0 -39
  195. package/upload/file-upload/FileToUpload.js +0 -115
  196. package/upload/file-upload/Icons.js +0 -66
  197. package/upload/files-upload/FilesToUpload.js +0 -109
  198. package/upload/index.d.ts +0 -15
  199. package/upload/transaction/Icons.js +0 -160
  200. package/upload/transaction/Transaction.js +0 -104
  201. package/upload/transactions/Transactions.js +0 -94
  202. package/wizard/Icons.js +0 -65
package/text-input/TextInput.stories.tsx CHANGED
@@ -70,7 +70,7 @@ export const Chromatic = () => (
70
70
  </ExampleContainer>
71
71
  <ExampleContainer pseudoState="pseudo-hover">
72
72
  <Title title="Hovered action" theme="light" level={4} />
73
- <DxcTextInput label="Text input" value="Text" clearable />
73
+ <DxcTextInput label="Text input" defaultValue="Text" clearable />
74
74
  </ExampleContainer>
75
75
  <ExampleContainer>
76
76
  <Title title="Without label" theme="light" level={4} />
@@ -82,13 +82,13 @@ export const Chromatic = () => (
82
82
  </ExampleContainer>
83
83
  <ExampleContainer>
84
84
  <Title title="Helper text, optional, and clearable" theme="light" level={4} />
85
- <DxcTextInput label="Text input" clearable value="Text" helperText="Help message" optional />
85
+ <DxcTextInput label="Text input" clearable defaultValue="Text" helperText="Help message" optional />
86
86
  </ExampleContainer>
87
87
  <ExampleContainer>
88
88
  <Title title="Clearable and large icon action" theme="light" level={4} />
89
89
  <DxcTextInput
90
90
  label="Text input"
91
- value="Text text text text text text text text text text"
91
+ defaultValue="Text text text text text text text text text text"
92
92
  clearable
93
93
  action={actionLargeIcon}
94
94
  />
@@ -107,12 +107,21 @@ export const Chromatic = () => (
107
107
  label="Error text input"
108
108
  helperText="Help message"
109
109
  error="Error message."
110
- value="Text"
110
+ defaultValue="Text"
111
111
  clearable
112
112
  optional
113
113
  action={action}
114
114
  />
115
115
  </ExampleContainer>
116
+ <ExampleContainer pseudoState="pseudo-hover">
117
+ <Title title="Invalid and hovered" theme="light" level={4} />
118
+ <DxcTextInput
119
+ label="Error text input"
120
+ helperText="Help message"
121
+ placeholder="Placeholder"
122
+ error="Error message."
123
+ />
124
+ </ExampleContainer>
116
125
  <ExampleContainer>
117
126
  <Title title="Disabled and placeholder" theme="light" level={4} />
118
127
  <DxcTextInput label="Disabled text input" disabled placeholder="Placeholder" />
@@ -124,7 +133,7 @@ export const Chromatic = () => (
124
133
  helperText="Help message"
125
134
  disabled
126
135
  optional
127
- value="Text"
136
+ defaultValue="Text"
128
137
  action={action}
129
138
  />
130
139
  </ExampleContainer>
@@ -137,7 +146,7 @@ export const Chromatic = () => (
137
146
  optional
138
147
  prefix="+34"
139
148
  suffix="USD"
140
- value="Text"
149
+ defaultValue="Text"
141
150
  action={action}
142
151
  />
143
152
  </ExampleContainer>
@@ -154,7 +163,7 @@ export const Chromatic = () => (
154
163
  </ExampleContainer>
155
164
  <ExampleContainer pseudoState="pseudo-hover">
156
165
  <Title title="Hovered action" theme="dark" level={4} />
157
- <DxcTextInput label="Text input" value="Text" clearable />
166
+ <DxcTextInput label="Text input" defaultValue="Text" clearable />
158
167
  </ExampleContainer>
159
168
  <ExampleContainer>
160
169
  <Title title="Helper text, placeholder, optional and action" theme="dark" level={4} />
@@ -168,16 +177,25 @@ export const Chromatic = () => (
168
177
  />
169
178
  </ExampleContainer>
170
179
  <ExampleContainer>
171
- <Title title="Helper text, clearable value, error and action" theme="dark" level={4} />
180
+ <Title title="Invalid" theme="dark" level={4} />
172
181
  <DxcTextInput
173
- label="Text input"
182
+ label="Error text input"
174
183
  helperText="Help message"
175
184
  error="Error message."
176
- value="Text"
185
+ defaultValue="Text"
177
186
  clearable
178
187
  action={action}
179
188
  />
180
189
  </ExampleContainer>
190
+ <ExampleContainer pseudoState="pseudo-hover">
191
+ <Title title="Invalid and hovered" theme="dark" level={4} />
192
+ <DxcTextInput
193
+ label="Error text input"
194
+ helperText="Help message"
195
+ placeholder="Placeholder"
196
+ error="Error message."
197
+ />
198
+ </ExampleContainer>
181
199
  <ExampleContainer>
182
200
  <Title title="Prefix and suffix" theme="dark" level={4} />
183
201
  <DxcTextInput label="With prefix and suffix" prefix="+34" suffix="USD" />
@@ -193,7 +211,7 @@ export const Chromatic = () => (
193
211
  helperText="Help message"
194
212
  disabled
195
213
  optional
196
- value="Text"
214
+ defaultValue="Text"
197
215
  action={action}
198
216
  />
199
217
  </ExampleContainer>
@@ -206,7 +224,7 @@ export const Chromatic = () => (
206
224
  optional
207
225
  prefix="+34"
208
226
  suffix="USD"
209
- value="Text"
227
+ defaultValue="Text"
210
228
  action={action}
211
229
  />
212
230
  </ExampleContainer>
@@ -262,14 +280,14 @@ export const Chromatic = () => (
262
280
  );
263
281
 
264
282
  const FocusedActionTextInput = () => (
265
- <ExampleContainer>
283
+ <ExampleContainer expanded>
266
284
  <Title title="Focused action" theme="light" level={4} />
267
285
  <DxcTextInput label="Text input" action={action} clearable />
268
286
  </ExampleContainer>
269
287
  );
270
288
 
271
289
  const ActivedActionTextInput = () => (
272
- <ExampleContainer pseudoState="pseudo-active">
290
+ <ExampleContainer pseudoState="pseudo-active" expanded>
273
291
  <Title title="Actived action" theme="light" level={4} />
274
292
  <DxcTextInput label="Text input" action={action} clearable />
275
293
  </ExampleContainer>
@@ -306,7 +324,7 @@ const ActivedOptionAutosuggest = () => (
306
324
  const FocusedActionTextInputOnDark = () => (
307
325
  <BackgroundColorProvider color="#333333">
308
326
  <DarkContainer>
309
- <ExampleContainer>
327
+ <ExampleContainer expanded>
310
328
  <Title title="Focused action" theme="dark" level={4} />
311
329
  <DxcTextInput label="Text input" action={action} clearable />
312
330
  </ExampleContainer>
@@ -317,7 +335,7 @@ const FocusedActionTextInputOnDark = () => (
317
335
  const ActivedActionTextInputOnDark = () => (
318
336
  <BackgroundColorProvider color="#333333">
319
337
  <DarkContainer>
320
- <ExampleContainer pseudoState="pseudo-active">
338
+ <ExampleContainer pseudoState="pseudo-active" expanded>
321
339
  <Title title="Actived action" theme="dark" level={4} />
322
340
  <DxcTextInput label="Text input" action={action} clearable />
323
341
  </ExampleContainer>