@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3df47e

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 (331) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1221 -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 +116 -181
  8. package/accordion/Accordion.stories.tsx +103 -127
  9. package/accordion/Accordion.test.js +32 -33
  10. package/accordion/types.d.ts +9 -16
  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 +55 -90
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +15 -16
  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 +29 -46
  26. package/alert/types.d.ts +5 -5
  27. package/badge/Badge.d.ts +1 -1
  28. package/badge/Badge.js +142 -40
  29. package/badge/Badge.stories.tsx +210 -0
  30. package/badge/Badge.test.js +30 -0
  31. package/badge/types.d.ts +52 -2
  32. package/bleed/Bleed.js +14 -55
  33. package/bleed/Bleed.stories.tsx +95 -95
  34. package/bleed/types.d.ts +26 -2
  35. package/box/Box.d.ts +1 -1
  36. package/box/Box.js +30 -81
  37. package/box/Box.stories.tsx +38 -51
  38. package/box/Box.test.js +2 -7
  39. package/box/types.d.ts +3 -14
  40. package/bulleted-list/BulletedList.d.ts +7 -0
  41. package/bulleted-list/BulletedList.js +89 -0
  42. package/bulleted-list/BulletedList.stories.tsx +115 -0
  43. package/bulleted-list/types.d.ts +38 -0
  44. package/button/Button.d.ts +1 -1
  45. package/button/Button.js +62 -113
  46. package/button/Button.stories.tsx +160 -90
  47. package/button/Button.test.js +20 -17
  48. package/button/types.d.ts +12 -8
  49. package/card/Card.d.ts +1 -1
  50. package/card/Card.js +58 -102
  51. package/card/Card.stories.tsx +12 -42
  52. package/card/Card.test.js +11 -22
  53. package/card/types.d.ts +6 -11
  54. package/checkbox/Checkbox.d.ts +2 -2
  55. package/checkbox/Checkbox.js +144 -182
  56. package/checkbox/Checkbox.stories.tsx +166 -136
  57. package/checkbox/Checkbox.test.js +163 -29
  58. package/checkbox/types.d.ts +18 -6
  59. package/chip/Chip.js +39 -79
  60. package/chip/Chip.stories.tsx +121 -26
  61. package/chip/Chip.test.js +16 -31
  62. package/chip/types.d.ts +4 -4
  63. package/common/OpenSans.css +68 -80
  64. package/common/coreTokens.d.ts +237 -0
  65. package/common/coreTokens.js +184 -0
  66. package/common/utils.d.ts +1 -0
  67. package/common/utils.js +6 -12
  68. package/common/variables.d.ts +1367 -0
  69. package/common/variables.js +1002 -1136
  70. package/container/Container.d.ts +4 -0
  71. package/container/Container.js +194 -0
  72. package/container/Container.stories.tsx +214 -0
  73. package/container/types.d.ts +74 -0
  74. package/date-input/Calendar.d.ts +4 -0
  75. package/date-input/Calendar.js +214 -0
  76. package/date-input/DateInput.js +171 -306
  77. package/date-input/DateInput.stories.tsx +203 -56
  78. package/date-input/DateInput.test.js +708 -369
  79. package/date-input/DatePicker.d.ts +4 -0
  80. package/date-input/DatePicker.js +115 -0
  81. package/date-input/Icons.d.ts +6 -0
  82. package/date-input/Icons.js +58 -0
  83. package/date-input/YearPicker.d.ts +4 -0
  84. package/date-input/YearPicker.js +100 -0
  85. package/date-input/types.d.ts +86 -22
  86. package/dialog/Dialog.d.ts +1 -1
  87. package/dialog/Dialog.js +68 -130
  88. package/dialog/Dialog.stories.tsx +320 -167
  89. package/dialog/Dialog.test.js +287 -20
  90. package/dialog/types.d.ts +18 -25
  91. package/dropdown/Dropdown.d.ts +1 -1
  92. package/dropdown/Dropdown.js +243 -304
  93. package/dropdown/Dropdown.stories.tsx +245 -56
  94. package/dropdown/Dropdown.test.js +575 -165
  95. package/dropdown/DropdownMenu.d.ts +4 -0
  96. package/dropdown/DropdownMenu.js +63 -0
  97. package/dropdown/DropdownMenuItem.d.ts +4 -0
  98. package/dropdown/DropdownMenuItem.js +67 -0
  99. package/dropdown/types.d.ts +32 -14
  100. package/file-input/FileInput.d.ts +2 -2
  101. package/file-input/FileInput.js +246 -357
  102. package/file-input/FileInput.stories.tsx +123 -12
  103. package/file-input/FileInput.test.js +369 -367
  104. package/file-input/FileItem.d.ts +4 -14
  105. package/file-input/FileItem.js +50 -99
  106. package/file-input/types.d.ts +25 -8
  107. package/flex/Flex.d.ts +4 -0
  108. package/flex/Flex.js +57 -0
  109. package/flex/Flex.stories.tsx +112 -0
  110. package/flex/types.d.ts +97 -0
  111. package/footer/Footer.d.ts +1 -1
  112. package/footer/Footer.js +70 -190
  113. package/footer/Footer.stories.tsx +60 -19
  114. package/footer/Footer.test.js +33 -57
  115. package/footer/Icons.d.ts +3 -2
  116. package/footer/Icons.js +67 -8
  117. package/footer/types.d.ts +25 -26
  118. package/grid/Grid.d.ts +7 -0
  119. package/grid/Grid.js +76 -0
  120. package/grid/Grid.stories.tsx +219 -0
  121. package/grid/types.d.ts +115 -0
  122. package/header/Header.d.ts +4 -3
  123. package/header/Header.js +99 -203
  124. package/header/Header.stories.tsx +152 -63
  125. package/header/Header.test.js +31 -28
  126. package/header/Icons.d.ts +2 -2
  127. package/header/Icons.js +4 -9
  128. package/header/types.d.ts +5 -19
  129. package/heading/Heading.js +10 -32
  130. package/heading/Heading.test.js +71 -88
  131. package/heading/types.d.ts +7 -7
  132. package/image/Image.d.ts +4 -0
  133. package/image/Image.js +70 -0
  134. package/image/Image.stories.tsx +127 -0
  135. package/image/types.d.ts +72 -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 +84 -181
  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 +61 -99
  149. package/link/Link.stories.tsx +155 -53
  150. package/link/Link.test.js +25 -53
  151. package/link/types.d.ts +15 -31
  152. package/main.d.ts +14 -13
  153. package/main.js +65 -101
  154. package/nav-tabs/NavTabs.d.ts +8 -0
  155. package/nav-tabs/NavTabs.js +93 -0
  156. package/nav-tabs/NavTabs.stories.tsx +276 -0
  157. package/nav-tabs/NavTabs.test.js +76 -0
  158. package/nav-tabs/Tab.d.ts +4 -0
  159. package/nav-tabs/Tab.js +118 -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 +703 -381
  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 +280 -211
  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 +162 -147
  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 +72 -44
  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 +59 -76
  194. package/radio-group/RadioGroup.js +72 -116
  195. package/radio-group/RadioGroup.stories.tsx +135 -17
  196. package/radio-group/RadioGroup.test.js +529 -467
  197. package/radio-group/types.d.ts +86 -9
  198. package/resultset-table/Icons.d.ts +7 -0
  199. package/resultset-table/Icons.js +47 -0
  200. package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +1 -1
  201. package/resultset-table/ResultsetTable.js +165 -0
  202. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +69 -25
  203. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +117 -118
  204. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  205. package/resultset-table/types.js +5 -0
  206. package/select/Icons.d.ts +10 -0
  207. package/select/Icons.js +89 -0
  208. package/select/Listbox.d.ts +4 -0
  209. package/select/Listbox.js +143 -0
  210. package/select/Option.d.ts +4 -0
  211. package/select/Option.js +87 -0
  212. package/select/Select.js +223 -502
  213. package/select/Select.stories.tsx +534 -145
  214. package/select/Select.test.js +2009 -1539
  215. package/select/types.d.ts +64 -25
  216. package/sidenav/Icons.d.ts +7 -0
  217. package/sidenav/Icons.js +47 -0
  218. package/sidenav/Sidenav.d.ts +6 -5
  219. package/sidenav/Sidenav.js +131 -71
  220. package/sidenav/Sidenav.stories.tsx +251 -151
  221. package/sidenav/Sidenav.test.js +26 -45
  222. package/sidenav/types.d.ts +52 -26
  223. package/slider/Slider.d.ts +2 -2
  224. package/slider/Slider.js +148 -180
  225. package/slider/Slider.test.js +198 -73
  226. package/slider/types.d.ts +11 -3
  227. package/spinner/Spinner.js +31 -75
  228. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  229. package/spinner/Spinner.test.js +26 -35
  230. package/spinner/types.d.ts +3 -3
  231. package/status-light/StatusLight.d.ts +4 -0
  232. package/status-light/StatusLight.js +51 -0
  233. package/status-light/StatusLight.stories.tsx +74 -0
  234. package/status-light/StatusLight.test.js +25 -0
  235. package/status-light/types.d.ts +17 -0
  236. package/status-light/types.js +5 -0
  237. package/switch/Switch.d.ts +2 -2
  238. package/switch/Switch.js +149 -114
  239. package/switch/Switch.stories.tsx +44 -67
  240. package/switch/Switch.test.js +146 -39
  241. package/switch/types.d.ts +13 -5
  242. package/table/Table.d.ts +1 -1
  243. package/table/Table.js +25 -32
  244. package/table/{Table.stories.jsx → Table.stories.tsx} +178 -1
  245. package/table/Table.test.js +3 -8
  246. package/table/types.d.ts +12 -6
  247. package/tabs/Tab.d.ts +4 -0
  248. package/tabs/Tab.js +116 -0
  249. package/tabs/Tabs.d.ts +1 -1
  250. package/tabs/Tabs.js +316 -145
  251. package/tabs/Tabs.stories.tsx +120 -14
  252. package/tabs/Tabs.test.js +238 -67
  253. package/tabs/types.d.ts +29 -15
  254. package/tag/Tag.js +41 -78
  255. package/tag/Tag.stories.tsx +25 -8
  256. package/tag/Tag.test.js +20 -31
  257. package/tag/types.d.ts +7 -7
  258. package/text-input/Icons.d.ts +8 -0
  259. package/text-input/Icons.js +56 -0
  260. package/text-input/Suggestion.d.ts +4 -0
  261. package/text-input/Suggestion.js +67 -0
  262. package/text-input/Suggestions.d.ts +4 -0
  263. package/text-input/Suggestions.js +84 -0
  264. package/text-input/TextInput.js +324 -548
  265. package/text-input/TextInput.stories.tsx +272 -281
  266. package/text-input/TextInput.test.js +1425 -1377
  267. package/text-input/types.d.ts +70 -24
  268. package/textarea/Textarea.js +82 -134
  269. package/textarea/Textarea.stories.tsx +174 -0
  270. package/textarea/Textarea.test.js +168 -198
  271. package/textarea/types.d.ts +27 -16
  272. package/toggle-group/ToggleGroup.d.ts +2 -2
  273. package/toggle-group/ToggleGroup.js +92 -105
  274. package/toggle-group/ToggleGroup.stories.tsx +53 -8
  275. package/toggle-group/ToggleGroup.test.js +78 -66
  276. package/toggle-group/types.d.ts +34 -17
  277. package/typography/Typography.d.ts +4 -0
  278. package/typography/Typography.js +23 -0
  279. package/typography/Typography.stories.tsx +198 -0
  280. package/typography/types.d.ts +18 -0
  281. package/typography/types.js +5 -0
  282. package/useTheme.d.ts +1119 -1
  283. package/useTheme.js +4 -11
  284. package/useTranslatedLabels.d.ts +85 -0
  285. package/useTranslatedLabels.js +14 -0
  286. package/utils/BaseTypography.d.ts +21 -0
  287. package/utils/BaseTypography.js +94 -0
  288. package/utils/FocusLock.d.ts +13 -0
  289. package/utils/FocusLock.js +124 -0
  290. package/wizard/Wizard.d.ts +1 -1
  291. package/wizard/Wizard.js +70 -101
  292. package/wizard/Wizard.stories.tsx +48 -19
  293. package/wizard/Wizard.test.js +73 -87
  294. package/wizard/types.d.ts +12 -8
  295. package/ThemeContext.d.ts +0 -10
  296. package/ThemeContext.js +0 -243
  297. package/card/ice-cream.jpg +0 -0
  298. package/common/RequiredComponent.js +0 -32
  299. package/list/List.d.ts +0 -4
  300. package/list/List.js +0 -47
  301. package/list/List.stories.tsx +0 -95
  302. package/list/types.d.ts +0 -7
  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/Radio.test.js +0 -71
  311. package/radio/types.d.ts +0 -54
  312. package/resultsetTable/ResultsetTable.js +0 -254
  313. package/row/Row.d.ts +0 -3
  314. package/row/Row.js +0 -127
  315. package/row/Row.stories.tsx +0 -237
  316. package/row/types.d.ts +0 -10
  317. package/slider/Slider.stories.tsx +0 -177
  318. package/stack/Stack.d.ts +0 -3
  319. package/stack/Stack.js +0 -97
  320. package/stack/Stack.stories.tsx +0 -164
  321. package/stack/types.d.ts +0 -9
  322. package/text/Text.d.ts +0 -7
  323. package/text/Text.js +0 -30
  324. package/text/Text.stories.tsx +0 -19
  325. package/textarea/Textarea.stories.jsx +0 -157
  326. /package/{list → action-icon}/types.js +0 -0
  327. /package/{radio → bulleted-list}/types.js +0 -0
  328. /package/{resultsetTable → container}/types.js +0 -0
  329. /package/{row → flex}/types.js +0 -0
  330. /package/{stack → grid}/types.js +0 -0
  331. /package/{number-input/numberInputContextTypes.js → image/types.js} +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} />