@dxc-technology/halstack-react 0.0.0-f6d6be5 → 0.0.0-f7c88cc

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 (218) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +5 -17
  3. package/HalstackContext.d.ts +14 -5
  4. package/HalstackContext.js +9 -34
  5. package/accordion/Accordion.js +21 -58
  6. package/accordion/Accordion.stories.tsx +1 -15
  7. package/accordion/Accordion.test.js +18 -33
  8. package/accordion/types.d.ts +5 -5
  9. package/accordion-group/AccordionGroup.js +15 -42
  10. package/accordion-group/AccordionGroup.stories.tsx +1 -1
  11. package/accordion-group/AccordionGroup.test.js +42 -60
  12. package/accordion-group/AccordionGroupAccordion.js +9 -21
  13. package/accordion-group/types.d.ts +6 -6
  14. package/alert/Alert.js +14 -46
  15. package/alert/Alert.test.js +28 -45
  16. package/alert/types.d.ts +5 -5
  17. package/badge/Badge.js +4 -17
  18. package/badge/types.d.ts +1 -1
  19. package/bleed/Bleed.js +13 -21
  20. package/bleed/types.d.ts +2 -2
  21. package/box/Box.js +10 -29
  22. package/box/Box.test.js +1 -6
  23. package/box/types.d.ts +3 -3
  24. package/bulleted-list/BulletedList.js +7 -33
  25. package/bulleted-list/BulletedList.stories.tsx +1 -91
  26. package/bulleted-list/types.d.ts +5 -5
  27. package/button/Button.js +23 -46
  28. package/button/Button.stories.tsx +5 -86
  29. package/button/Button.test.js +11 -21
  30. package/button/types.d.ts +4 -4
  31. package/card/Card.js +21 -44
  32. package/card/Card.test.js +10 -21
  33. package/card/types.d.ts +5 -5
  34. package/checkbox/Checkbox.js +81 -111
  35. package/checkbox/Checkbox.stories.tsx +16 -54
  36. package/checkbox/Checkbox.test.js +107 -63
  37. package/checkbox/types.d.ts +8 -4
  38. package/chip/Chip.js +12 -31
  39. package/chip/Chip.stories.tsx +1 -1
  40. package/chip/Chip.test.js +15 -28
  41. package/chip/types.d.ts +4 -4
  42. package/common/coreTokens.d.ts +105 -14
  43. package/common/coreTokens.js +40 -23
  44. package/common/utils.js +2 -8
  45. package/common/variables.d.ts +15 -6
  46. package/common/variables.js +17 -15
  47. package/container/Container.d.ts +4 -0
  48. package/container/Container.js +198 -0
  49. package/container/Container.stories.tsx +229 -0
  50. package/container/types.d.ts +74 -0
  51. package/date-input/Calendar.js +13 -57
  52. package/date-input/DateInput.js +50 -96
  53. package/date-input/DateInput.stories.tsx +11 -30
  54. package/date-input/DateInput.test.js +674 -701
  55. package/date-input/DatePicker.js +11 -42
  56. package/date-input/Icons.d.ts +6 -6
  57. package/date-input/Icons.js +6 -23
  58. package/date-input/YearPicker.js +8 -34
  59. package/date-input/types.d.ts +27 -21
  60. package/dialog/Dialog.js +13 -37
  61. package/dialog/Dialog.stories.tsx +170 -0
  62. package/dialog/Dialog.test.js +125 -187
  63. package/dialog/types.d.ts +18 -13
  64. package/dropdown/Dropdown.js +39 -93
  65. package/dropdown/Dropdown.test.js +391 -378
  66. package/dropdown/DropdownMenu.js +8 -19
  67. package/dropdown/DropdownMenuItem.js +5 -17
  68. package/dropdown/types.d.ts +17 -19
  69. package/file-input/FileInput.js +180 -248
  70. package/file-input/FileInput.stories.tsx +1 -1
  71. package/file-input/FileInput.test.js +356 -354
  72. package/file-input/FileItem.js +12 -39
  73. package/file-input/types.d.ts +9 -9
  74. package/flex/Flex.js +25 -39
  75. package/flex/types.d.ts +6 -6
  76. package/footer/Footer.js +9 -39
  77. package/footer/Footer.test.js +18 -32
  78. package/footer/Icons.d.ts +2 -2
  79. package/footer/Icons.js +2 -7
  80. package/footer/types.d.ts +13 -13
  81. package/grid/Grid.js +1 -16
  82. package/grid/types.d.ts +10 -10
  83. package/header/Header.d.ts +1 -1
  84. package/header/Header.js +19 -64
  85. package/header/Header.test.js +12 -25
  86. package/header/Icons.d.ts +2 -2
  87. package/header/Icons.js +2 -7
  88. package/header/types.d.ts +5 -7
  89. package/heading/Heading.js +9 -31
  90. package/heading/Heading.test.js +70 -87
  91. package/heading/types.d.ts +7 -7
  92. package/image/Image.d.ts +2 -2
  93. package/image/Image.js +17 -32
  94. package/image/types.d.ts +2 -2
  95. package/inset/Inset.js +13 -21
  96. package/inset/types.d.ts +2 -2
  97. package/layout/ApplicationLayout.d.ts +1 -1
  98. package/layout/ApplicationLayout.js +14 -54
  99. package/layout/Icons.d.ts +5 -5
  100. package/layout/Icons.js +1 -5
  101. package/layout/SidenavContext.d.ts +1 -1
  102. package/layout/SidenavContext.js +3 -9
  103. package/layout/types.d.ts +3 -3
  104. package/link/Link.js +21 -42
  105. package/link/Link.test.js +23 -41
  106. package/link/types.d.ts +14 -14
  107. package/main.d.ts +3 -2
  108. package/main.js +10 -52
  109. package/nav-tabs/NavTabs.js +11 -43
  110. package/nav-tabs/NavTabs.stories.tsx +1 -1
  111. package/nav-tabs/NavTabs.test.js +36 -43
  112. package/nav-tabs/Tab.js +16 -45
  113. package/nav-tabs/types.d.ts +9 -9
  114. package/number-input/NumberInput.d.ts +1 -1
  115. package/number-input/NumberInput.js +24 -35
  116. package/number-input/NumberInput.stories.tsx +42 -26
  117. package/number-input/NumberInput.test.js +682 -577
  118. package/number-input/types.d.ts +11 -5
  119. package/package.json +29 -27
  120. package/paginator/Icons.d.ts +5 -5
  121. package/paginator/Icons.js +5 -19
  122. package/paginator/Paginator.js +14 -39
  123. package/paginator/Paginator.test.js +224 -207
  124. package/paginator/types.d.ts +3 -3
  125. package/paragraph/Paragraph.js +3 -14
  126. package/paragraph/Paragraph.stories.tsx +0 -17
  127. package/password-input/Icons.d.ts +3 -3
  128. package/password-input/Icons.js +1 -5
  129. package/password-input/PasswordInput.js +26 -48
  130. package/password-input/PasswordInput.stories.tsx +1 -33
  131. package/password-input/PasswordInput.test.js +153 -129
  132. package/password-input/types.d.ts +8 -7
  133. package/progress-bar/ProgressBar.js +16 -42
  134. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  135. package/progress-bar/ProgressBar.test.js +35 -52
  136. package/progress-bar/types.d.ts +3 -3
  137. package/quick-nav/QuickNav.js +4 -27
  138. package/quick-nav/QuickNav.stories.tsx +1 -1
  139. package/quick-nav/types.d.ts +10 -10
  140. package/radio-group/Radio.d.ts +1 -1
  141. package/radio-group/Radio.js +22 -54
  142. package/radio-group/RadioGroup.js +37 -83
  143. package/radio-group/RadioGroup.stories.tsx +10 -10
  144. package/radio-group/RadioGroup.test.js +504 -470
  145. package/radio-group/types.d.ts +8 -8
  146. package/resultset-table/Icons.d.ts +7 -0
  147. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  148. package/{resultsetTable → resultset-table}/ResultsetTable.js +23 -59
  149. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  150. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  151. package/resultset-table/types.js +5 -0
  152. package/select/Icons.d.ts +7 -7
  153. package/select/Icons.js +1 -5
  154. package/select/Listbox.js +13 -39
  155. package/select/Option.js +9 -26
  156. package/select/Select.js +54 -138
  157. package/select/Select.test.js +1902 -1796
  158. package/select/types.d.ts +14 -15
  159. package/sidenav/Icons.d.ts +4 -4
  160. package/sidenav/Icons.js +1 -5
  161. package/sidenav/Sidenav.js +24 -63
  162. package/sidenav/Sidenav.test.js +3 -10
  163. package/sidenav/types.d.ts +18 -18
  164. package/slider/Slider.js +38 -86
  165. package/slider/Slider.test.js +107 -103
  166. package/slider/types.d.ts +4 -4
  167. package/spinner/Spinner.js +10 -40
  168. package/spinner/Spinner.test.js +25 -34
  169. package/spinner/types.d.ts +3 -3
  170. package/switch/Switch.js +26 -69
  171. package/switch/Switch.stories.tsx +0 -34
  172. package/switch/Switch.test.js +51 -96
  173. package/switch/types.d.ts +4 -4
  174. package/table/Table.js +4 -23
  175. package/table/Table.test.js +1 -6
  176. package/table/types.d.ts +8 -8
  177. package/tabs/Tab.js +10 -29
  178. package/tabs/Tabs.js +48 -124
  179. package/tabs/Tabs.test.js +62 -118
  180. package/tabs/types.d.ts +19 -19
  181. package/tag/Tag.js +21 -51
  182. package/tag/Tag.test.js +19 -30
  183. package/tag/types.d.ts +7 -7
  184. package/text-input/Icons.d.ts +5 -5
  185. package/text-input/Icons.js +1 -5
  186. package/text-input/Suggestion.js +9 -26
  187. package/text-input/Suggestions.d.ts +1 -1
  188. package/text-input/Suggestions.js +12 -57
  189. package/text-input/TextInput.js +128 -193
  190. package/text-input/TextInput.stories.tsx +48 -152
  191. package/text-input/TextInput.test.js +1210 -1194
  192. package/text-input/types.d.ts +25 -17
  193. package/textarea/Textarea.js +60 -96
  194. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
  195. package/textarea/Textarea.test.js +150 -179
  196. package/textarea/types.d.ts +9 -5
  197. package/toggle-group/ToggleGroup.js +20 -57
  198. package/toggle-group/ToggleGroup.stories.tsx +1 -1
  199. package/toggle-group/ToggleGroup.test.js +48 -81
  200. package/toggle-group/types.d.ts +10 -10
  201. package/typography/Typography.js +4 -13
  202. package/typography/types.d.ts +1 -1
  203. package/useTheme.d.ts +12 -3
  204. package/useTheme.js +1 -8
  205. package/useTranslatedLabels.js +1 -7
  206. package/utils/BaseTypography.d.ts +2 -2
  207. package/utils/BaseTypography.js +16 -30
  208. package/utils/FocusLock.js +22 -39
  209. package/wizard/Wizard.js +14 -49
  210. package/wizard/Wizard.test.js +53 -80
  211. package/wizard/types.d.ts +6 -6
  212. package/resultsetTable/Icons.d.ts +0 -7
  213. package/slider/Slider.stories.tsx +0 -240
  214. /package/{resultsetTable → container}/types.js +0 -0
  215. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  216. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  217. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  218. /package/table/{Table.stories.jsx → Table.stories.tsx} +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
 
@@ -32,6 +30,39 @@ export const Chromatic = () => (
32
30
  <Title title="Disabled, helper text, optional and value" theme="light" level={4} />
33
31
  <DxcNumberInput label="Disabled number input" helperText="Help message" disabled optional defaultValue="10" />
34
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
+ />
65
+ </ExampleContainer>
35
66
  <ExampleContainer>
36
67
  <Title title="Prefix" theme="light" level={4} />
37
68
  <DxcNumberInput label="With prefix" prefix="+34" />
@@ -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." defaultValue="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." defaultValue="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 defaultValue="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} />