@dxc-technology/halstack-react 0.0.0-3716032 → 0.0.0-381476a

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