@dxc-technology/halstack-react 0.0.0-38c90fa → 0.0.0-397893c

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 (353) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1235 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +117 -193
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +56 -0
  10. package/accordion/types.d.ts +11 -22
  11. package/accordion-group/AccordionGroup.d.ts +5 -4
  12. package/accordion-group/AccordionGroup.js +38 -107
  13. package/accordion-group/AccordionGroup.stories.tsx +95 -68
  14. package/accordion-group/AccordionGroup.test.js +98 -0
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +17 -22
  18. package/action-icon/ActionIcon.d.ts +4 -0
  19. package/action-icon/ActionIcon.js +47 -0
  20. package/action-icon/ActionIcon.stories.tsx +41 -0
  21. package/action-icon/ActionIcon.test.js +64 -0
  22. package/action-icon/types.d.ts +26 -0
  23. package/alert/Alert.js +23 -59
  24. package/alert/Alert.stories.tsx +28 -0
  25. package/alert/Alert.test.js +75 -0
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +4 -0
  28. package/badge/Badge.js +8 -19
  29. package/badge/types.d.ts +5 -0
  30. package/bleed/Bleed.js +14 -55
  31. package/bleed/Bleed.stories.tsx +95 -95
  32. package/bleed/types.d.ts +26 -2
  33. package/box/Box.d.ts +1 -1
  34. package/box/Box.js +30 -81
  35. package/box/Box.stories.tsx +38 -51
  36. package/box/Box.test.js +13 -0
  37. package/box/types.d.ts +3 -14
  38. package/bulleted-list/BulletedList.d.ts +7 -0
  39. package/bulleted-list/BulletedList.js +89 -0
  40. package/bulleted-list/BulletedList.stories.tsx +115 -0
  41. package/bulleted-list/types.d.ts +38 -0
  42. package/button/Button.d.ts +1 -1
  43. package/button/Button.js +62 -113
  44. package/button/Button.stories.tsx +160 -90
  45. package/button/Button.test.js +38 -0
  46. package/button/types.d.ts +12 -8
  47. package/card/Card.d.ts +1 -1
  48. package/card/Card.js +58 -102
  49. package/card/Card.stories.tsx +12 -42
  50. package/card/Card.test.js +39 -0
  51. package/card/types.d.ts +6 -11
  52. package/checkbox/Checkbox.d.ts +2 -2
  53. package/checkbox/Checkbox.js +144 -182
  54. package/checkbox/Checkbox.stories.tsx +166 -136
  55. package/checkbox/Checkbox.test.js +199 -0
  56. package/checkbox/types.d.ts +18 -6
  57. package/chip/Chip.d.ts +1 -1
  58. package/chip/Chip.js +46 -124
  59. package/chip/Chip.stories.tsx +123 -30
  60. package/chip/Chip.test.js +41 -0
  61. package/chip/types.d.ts +8 -16
  62. package/common/OpenSans.css +68 -80
  63. package/common/coreTokens.d.ts +237 -0
  64. package/common/coreTokens.js +184 -0
  65. package/common/utils.d.ts +1 -0
  66. package/common/utils.js +6 -12
  67. package/common/variables.d.ts +1381 -0
  68. package/common/variables.js +1002 -1361
  69. package/container/Container.d.ts +4 -0
  70. package/container/Container.js +194 -0
  71. package/container/Container.stories.tsx +214 -0
  72. package/container/types.d.ts +74 -0
  73. package/date-input/Calendar.d.ts +4 -0
  74. package/date-input/Calendar.js +214 -0
  75. package/date-input/DateInput.js +171 -306
  76. package/date-input/DateInput.stories.tsx +203 -56
  77. package/date-input/DateInput.test.js +808 -0
  78. package/date-input/DatePicker.d.ts +4 -0
  79. package/date-input/DatePicker.js +115 -0
  80. package/date-input/Icons.d.ts +6 -0
  81. package/date-input/Icons.js +58 -0
  82. package/date-input/YearPicker.d.ts +4 -0
  83. package/date-input/YearPicker.js +100 -0
  84. package/date-input/types.d.ts +86 -22
  85. package/dialog/Dialog.d.ts +1 -1
  86. package/dialog/Dialog.js +68 -130
  87. package/dialog/Dialog.stories.tsx +320 -167
  88. package/dialog/Dialog.test.js +307 -0
  89. package/dialog/types.d.ts +18 -25
  90. package/dropdown/Dropdown.d.ts +1 -1
  91. package/dropdown/Dropdown.js +244 -327
  92. package/dropdown/Dropdown.stories.tsx +255 -64
  93. package/dropdown/Dropdown.test.js +599 -0
  94. package/dropdown/DropdownMenu.d.ts +4 -0
  95. package/dropdown/DropdownMenu.js +63 -0
  96. package/dropdown/DropdownMenuItem.d.ts +4 -0
  97. package/dropdown/DropdownMenuItem.js +67 -0
  98. package/dropdown/types.d.ts +36 -27
  99. package/file-input/FileInput.d.ts +2 -2
  100. package/file-input/FileInput.js +246 -357
  101. package/file-input/FileInput.stories.tsx +123 -12
  102. package/file-input/FileInput.test.js +459 -0
  103. package/file-input/FileItem.d.ts +4 -14
  104. package/file-input/FileItem.js +50 -99
  105. package/file-input/types.d.ts +25 -8
  106. package/flex/Flex.d.ts +4 -0
  107. package/flex/Flex.js +57 -0
  108. package/flex/Flex.stories.tsx +112 -0
  109. package/flex/types.d.ts +97 -0
  110. package/footer/Footer.d.ts +1 -1
  111. package/footer/Footer.js +70 -190
  112. package/footer/Footer.stories.tsx +60 -19
  113. package/footer/Footer.test.js +85 -0
  114. package/footer/Icons.d.ts +3 -2
  115. package/footer/Icons.js +67 -8
  116. package/footer/types.d.ts +25 -26
  117. package/grid/Grid.d.ts +7 -0
  118. package/grid/Grid.js +76 -0
  119. package/grid/Grid.stories.tsx +219 -0
  120. package/grid/types.d.ts +115 -0
  121. package/header/Header.d.ts +4 -3
  122. package/header/Header.js +99 -203
  123. package/header/Header.stories.tsx +152 -63
  124. package/header/Header.test.js +66 -0
  125. package/header/Icons.d.ts +2 -2
  126. package/header/Icons.js +4 -9
  127. package/header/types.d.ts +5 -19
  128. package/heading/Heading.js +10 -32
  129. package/heading/Heading.test.js +169 -0
  130. package/heading/types.d.ts +7 -7
  131. package/image/Image.d.ts +4 -0
  132. package/image/Image.js +70 -0
  133. package/image/Image.stories.tsx +127 -0
  134. package/image/types.d.ts +72 -0
  135. package/image/types.js +5 -0
  136. package/inset/Inset.js +14 -55
  137. package/inset/Inset.stories.tsx +37 -36
  138. package/inset/types.d.ts +26 -2
  139. package/layout/ApplicationLayout.d.ts +16 -6
  140. package/layout/ApplicationLayout.js +83 -174
  141. package/layout/ApplicationLayout.stories.tsx +85 -94
  142. package/layout/Icons.d.ts +8 -0
  143. package/layout/Icons.js +51 -48
  144. package/layout/SidenavContext.d.ts +5 -0
  145. package/layout/SidenavContext.js +13 -0
  146. package/layout/types.d.ts +19 -35
  147. package/link/Link.d.ts +3 -2
  148. package/link/Link.js +64 -110
  149. package/link/Link.stories.tsx +159 -52
  150. package/link/Link.test.js +63 -0
  151. package/link/types.d.ts +15 -35
  152. package/main.d.ts +16 -17
  153. package/main.js +67 -119
  154. package/nav-tabs/NavTabs.d.ts +8 -0
  155. package/nav-tabs/NavTabs.js +93 -0
  156. package/nav-tabs/NavTabs.stories.tsx +274 -0
  157. package/nav-tabs/NavTabs.test.js +75 -0
  158. package/nav-tabs/Tab.d.ts +4 -0
  159. package/nav-tabs/Tab.js +117 -0
  160. package/nav-tabs/types.d.ts +52 -0
  161. package/nav-tabs/types.js +5 -0
  162. package/number-input/NumberInput.d.ts +7 -0
  163. package/number-input/NumberInput.js +27 -43
  164. package/number-input/NumberInput.stories.tsx +44 -28
  165. package/number-input/NumberInput.test.js +830 -0
  166. package/number-input/types.d.ts +28 -15
  167. package/package.json +46 -47
  168. package/paginator/Icons.d.ts +5 -0
  169. package/paginator/Icons.js +21 -47
  170. package/paginator/Paginator.js +34 -91
  171. package/paginator/Paginator.stories.tsx +24 -0
  172. package/paginator/Paginator.test.js +335 -0
  173. package/paginator/types.d.ts +3 -3
  174. package/paragraph/Paragraph.d.ts +5 -0
  175. package/paragraph/Paragraph.js +22 -0
  176. package/paragraph/Paragraph.stories.tsx +27 -0
  177. package/password-input/Icons.d.ts +6 -0
  178. package/password-input/Icons.js +35 -0
  179. package/password-input/PasswordInput.js +57 -123
  180. package/password-input/PasswordInput.stories.tsx +1 -33
  181. package/password-input/PasswordInput.test.js +198 -0
  182. package/password-input/types.d.ts +21 -17
  183. package/progress-bar/ProgressBar.js +65 -91
  184. package/progress-bar/ProgressBar.stories.tsx +93 -0
  185. package/progress-bar/ProgressBar.test.js +93 -0
  186. package/progress-bar/types.d.ts +3 -3
  187. package/quick-nav/QuickNav.d.ts +4 -0
  188. package/quick-nav/QuickNav.js +94 -0
  189. package/quick-nav/QuickNav.stories.tsx +356 -0
  190. package/quick-nav/types.d.ts +21 -0
  191. package/quick-nav/types.js +5 -0
  192. package/radio-group/Radio.d.ts +1 -1
  193. package/radio-group/Radio.js +64 -80
  194. package/radio-group/RadioGroup.js +101 -139
  195. package/radio-group/RadioGroup.stories.tsx +171 -36
  196. package/radio-group/RadioGroup.test.js +691 -183
  197. package/radio-group/types.d.ts +89 -11
  198. package/resultset-table/Icons.d.ts +7 -0
  199. package/resultset-table/Icons.js +47 -0
  200. package/resultset-table/ResultsetTable.js +159 -0
  201. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +50 -25
  202. package/resultset-table/ResultsetTable.test.js +305 -0
  203. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  204. package/resultset-table/types.js +5 -0
  205. package/select/Icons.d.ts +10 -0
  206. package/select/Icons.js +89 -0
  207. package/select/Listbox.d.ts +4 -0
  208. package/select/Listbox.js +143 -0
  209. package/select/Option.d.ts +4 -0
  210. package/select/Option.js +87 -0
  211. package/select/Select.js +229 -502
  212. package/select/Select.stories.tsx +603 -204
  213. package/select/Select.test.js +2370 -0
  214. package/select/types.d.ts +64 -25
  215. package/sidenav/Icons.d.ts +7 -0
  216. package/sidenav/Icons.js +47 -0
  217. package/sidenav/Sidenav.d.ts +6 -5
  218. package/sidenav/Sidenav.js +131 -71
  219. package/sidenav/Sidenav.stories.tsx +251 -151
  220. package/sidenav/Sidenav.test.js +37 -0
  221. package/sidenav/types.d.ts +52 -26
  222. package/slider/Slider.d.ts +2 -2
  223. package/slider/Slider.js +148 -180
  224. package/slider/Slider.test.js +254 -0
  225. package/slider/types.d.ts +11 -3
  226. package/spinner/Spinner.js +31 -75
  227. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  228. package/spinner/Spinner.test.js +55 -0
  229. package/spinner/types.d.ts +3 -3
  230. package/status-light/StatusLight.d.ts +4 -0
  231. package/status-light/StatusLight.js +51 -0
  232. package/status-light/StatusLight.stories.tsx +74 -0
  233. package/status-light/StatusLight.test.js +25 -0
  234. package/status-light/types.d.ts +17 -0
  235. package/status-light/types.js +5 -0
  236. package/switch/Switch.d.ts +2 -2
  237. package/switch/Switch.js +149 -114
  238. package/switch/Switch.stories.tsx +44 -67
  239. package/switch/Switch.test.js +180 -0
  240. package/switch/types.d.ts +13 -5
  241. package/table/Table.js +8 -30
  242. package/table/{Table.stories.jsx → Table.stories.tsx} +80 -1
  243. package/table/Table.test.js +21 -0
  244. package/table/types.d.ts +8 -8
  245. package/tabs/Tab.d.ts +4 -0
  246. package/tabs/Tab.js +113 -0
  247. package/tabs/Tabs.d.ts +1 -1
  248. package/tabs/Tabs.js +316 -145
  249. package/tabs/Tabs.stories.tsx +119 -13
  250. package/tabs/Tabs.test.js +294 -0
  251. package/tabs/types.d.ts +29 -15
  252. package/tag/Tag.d.ts +1 -1
  253. package/tag/Tag.js +43 -85
  254. package/tag/Tag.stories.tsx +37 -27
  255. package/tag/Tag.test.js +49 -0
  256. package/tag/types.d.ts +25 -16
  257. package/text-input/Icons.d.ts +8 -0
  258. package/text-input/Icons.js +56 -0
  259. package/text-input/Suggestion.d.ts +4 -0
  260. package/text-input/Suggestion.js +67 -0
  261. package/text-input/Suggestions.d.ts +4 -0
  262. package/text-input/Suggestions.js +84 -0
  263. package/text-input/TextInput.js +326 -548
  264. package/text-input/TextInput.stories.tsx +281 -272
  265. package/text-input/TextInput.test.js +1739 -0
  266. package/text-input/types.d.ts +70 -24
  267. package/textarea/Textarea.js +85 -135
  268. package/textarea/Textarea.stories.tsx +174 -0
  269. package/textarea/Textarea.test.js +406 -0
  270. package/textarea/types.d.ts +27 -16
  271. package/toggle-group/ToggleGroup.d.ts +2 -2
  272. package/toggle-group/ToggleGroup.js +92 -105
  273. package/toggle-group/ToggleGroup.stories.tsx +53 -8
  274. package/toggle-group/ToggleGroup.test.js +137 -0
  275. package/toggle-group/types.d.ts +34 -17
  276. package/typography/Typography.d.ts +4 -0
  277. package/typography/Typography.js +23 -0
  278. package/typography/Typography.stories.tsx +198 -0
  279. package/typography/types.d.ts +18 -0
  280. package/typography/types.js +5 -0
  281. package/useTheme.d.ts +1133 -1
  282. package/useTheme.js +4 -11
  283. package/useTranslatedLabels.d.ts +85 -0
  284. package/useTranslatedLabels.js +14 -0
  285. package/utils/BaseTypography.d.ts +21 -0
  286. package/utils/BaseTypography.js +94 -0
  287. package/utils/FocusLock.d.ts +13 -0
  288. package/utils/FocusLock.js +124 -0
  289. package/wizard/Wizard.d.ts +1 -1
  290. package/wizard/Wizard.js +70 -101
  291. package/wizard/Wizard.stories.tsx +48 -19
  292. package/wizard/Wizard.test.js +114 -0
  293. package/wizard/types.d.ts +12 -8
  294. package/ThemeContext.d.ts +0 -15
  295. package/ThemeContext.js +0 -243
  296. package/V3Select/V3Select.js +0 -455
  297. package/V3Select/index.d.ts +0 -27
  298. package/V3Textarea/V3Textarea.js +0 -260
  299. package/V3Textarea/index.d.ts +0 -27
  300. package/card/ice-cream.jpg +0 -0
  301. package/common/RequiredComponent.js +0 -32
  302. package/date/Date.js +0 -373
  303. package/date/index.d.ts +0 -27
  304. package/input-text/Icons.js +0 -22
  305. package/input-text/InputText.js +0 -611
  306. package/input-text/index.d.ts +0 -36
  307. package/list/List.d.ts +0 -4
  308. package/list/List.js +0 -47
  309. package/list/List.stories.tsx +0 -95
  310. package/list/types.d.ts +0 -7
  311. package/number-input/NumberInputContext.d.ts +0 -4
  312. package/number-input/NumberInputContext.js +0 -19
  313. package/number-input/numberInputContextTypes.d.ts +0 -19
  314. package/progress-bar/ProgressBar.stories.jsx +0 -58
  315. package/radio/Radio.d.ts +0 -4
  316. package/radio/Radio.js +0 -174
  317. package/radio/Radio.stories.tsx +0 -192
  318. package/radio/types.d.ts +0 -54
  319. package/resultsetTable/ResultsetTable.js +0 -251
  320. package/row/Row.d.ts +0 -3
  321. package/row/Row.js +0 -127
  322. package/row/Row.stories.tsx +0 -237
  323. package/row/types.d.ts +0 -10
  324. package/slider/Slider.stories.tsx +0 -177
  325. package/stack/Stack.d.ts +0 -3
  326. package/stack/Stack.js +0 -97
  327. package/stack/Stack.stories.tsx +0 -164
  328. package/stack/types.d.ts +0 -9
  329. package/text/Text.d.ts +0 -7
  330. package/text/Text.js +0 -30
  331. package/text/Text.stories.tsx +0 -19
  332. package/textarea/Textarea.stories.jsx +0 -136
  333. package/toggle/Toggle.js +0 -186
  334. package/toggle/index.d.ts +0 -21
  335. package/upload/Upload.js +0 -201
  336. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  337. package/upload/buttons-upload/Icons.js +0 -40
  338. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  339. package/upload/dragAndDropArea/Icons.js +0 -39
  340. package/upload/file-upload/FileToUpload.js +0 -115
  341. package/upload/file-upload/Icons.js +0 -66
  342. package/upload/files-upload/FilesToUpload.js +0 -109
  343. package/upload/index.d.ts +0 -15
  344. package/upload/transaction/Icons.js +0 -160
  345. package/upload/transaction/Transaction.js +0 -104
  346. package/upload/transactions/Transactions.js +0 -94
  347. /package/{list → action-icon}/types.js +0 -0
  348. /package/{radio → badge}/types.js +0 -0
  349. /package/{resultsetTable → bulleted-list}/types.js +0 -0
  350. /package/{row → container}/types.js +0 -0
  351. /package/{stack → flex}/types.js +0 -0
  352. /package/{number-input/numberInputContextTypes.js → grid/types.js} +0 -0
  353. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
package/number-input/NumberInput.stories.tsx CHANGED
@@ -1,12 +1,10 @@
1
1
  import React from "react";
2
- import { BackgroundColorProvider } from "../BackgroundColorContext";
3
2
  import Title from "../../.storybook/components/Title";
4
3
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import DarkContainer from "../../.storybook/components/DarkSection";
6
4
  import DxcNumberInput from "./NumberInput";
7
5
 
8
6
  export default {
9
- title: "Number input ",
7
+ title: "Number Input",
10
8
  component: DxcNumberInput,
11
9
  };
12
10
 
@@ -22,7 +20,7 @@ export const Chromatic = () => (
22
20
  </ExampleContainer>
23
21
  <ExampleContainer>
24
22
  <Title title="Helper text, optional and value" theme="light" level={4} />
25
- <DxcNumberInput label="Number input" value="12" helperText="Help message" optional />
23
+ <DxcNumberInput label="Number input" defaultValue="12" helperText="Help message" optional />
26
24
  </ExampleContainer>
27
25
  <ExampleContainer>
28
26
  <Title title="Disabled and placeholder" theme="light" level={4} />
@@ -30,7 +28,40 @@ export const Chromatic = () => (
30
28
  </ExampleContainer>
31
29
  <ExampleContainer>
32
30
  <Title title="Disabled, helper text, optional and value" theme="light" level={4} />
33
- <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional value="10" />
31
+ <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="10" />
32
+ </ExampleContainer>
33
+ <ExampleContainer>
34
+ <Title title="Read only" theme="light" level={4} />
35
+ <DxcNumberInput
36
+ label="Example label"
37
+ helperText="Help message"
38
+ readOnly
39
+ optional
40
+ prefix="€"
41
+ defaultValue="33"
42
+ />
43
+ </ExampleContainer>
44
+ <ExampleContainer pseudoState="pseudo-hover">
45
+ <Title title="Hovered read only" theme="light" level={4} />
46
+ <DxcNumberInput
47
+ label="Example label"
48
+ helperText="Help message"
49
+ readOnly
50
+ optional
51
+ prefix="€"
52
+ defaultValue="1"
53
+ />
54
+ </ExampleContainer>
55
+ <ExampleContainer pseudoState="pseudo-active">
56
+ <Title title="Active read only" theme="light" level={4} />
57
+ <DxcNumberInput
58
+ label="Example label"
59
+ helperText="Help message"
60
+ readOnly
61
+ optional
62
+ prefix="€"
63
+ placeholder="Placeholder"
64
+ />
34
65
  </ExampleContainer>
35
66
  <ExampleContainer>
36
67
  <Title title="Prefix" theme="light" level={4} />
@@ -42,29 +73,14 @@ export const Chromatic = () => (
42
73
  </ExampleContainer>
43
74
  <ExampleContainer>
44
75
  <Title title="Invalid" theme="light" level={4} />
45
- <DxcNumberInput label="Error number input" helperText="Help message" error="Error message." value="23" optional />
46
- </ExampleContainer>
47
- <BackgroundColorProvider color="#333333">
48
- <DarkContainer>
49
- <Title title="Dark" theme="dark" level={2} />
50
- <ExampleContainer>
51
- <Title title="Helper text, placeholder and optional" theme="dark" level={4} />
52
- <DxcNumberInput label="Number input" helperText="Help message" placeholder="Placeholder" optional />
53
- </ExampleContainer>
54
- <ExampleContainer>
55
- <Title title="Helper text, value and error" theme="dark" level={4} />
56
- <DxcNumberInput label="Number input" helperText="Help message" error="Error message." value="199" />
57
- </ExampleContainer>
58
- <ExampleContainer>
59
- <Title title="Disabled and placeholder" theme="dark" level={4} />
60
- <DxcNumberInput label="Disabled number input" disabled placeholder="Placeholder" />
61
- </ExampleContainer>
62
- <ExampleContainer>
63
- <Title title="Disabled, helper text, optional and value" theme="dark" level={4} />
64
- <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional value="1232454" />
65
- </ExampleContainer>
66
- </DarkContainer>
67
- </BackgroundColorProvider>
76
+ <DxcNumberInput
77
+ label="Error number input"
78
+ helperText="Help message"
79
+ error="Error message."
80
+ defaultValue="23"
81
+ optional
82
+ />
83
+ </ExampleContainer>
68
84
  <Title title="Margins" theme="light" level={2} />
69
85
  <ExampleContainer>
70
86
  <Title title="Xxsmall margin" theme="light" level={4} />