@dxc-technology/halstack-react 10.1.0 → 11.0.0

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 (210) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +5 -17
  3. package/HalstackContext.d.ts +18 -6
  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.test.js +15 -28
  40. package/chip/types.d.ts +4 -4
  41. package/common/coreTokens.js +1 -2
  42. package/common/utils.js +2 -8
  43. package/common/variables.d.ts +15 -6
  44. package/common/variables.js +17 -15
  45. package/date-input/Calendar.js +13 -57
  46. package/date-input/DateInput.js +50 -96
  47. package/date-input/DateInput.stories.tsx +11 -30
  48. package/date-input/DateInput.test.js +674 -701
  49. package/date-input/DatePicker.js +11 -42
  50. package/date-input/Icons.d.ts +6 -6
  51. package/date-input/Icons.js +6 -23
  52. package/date-input/YearPicker.js +8 -34
  53. package/date-input/types.d.ts +27 -21
  54. package/dialog/Dialog.js +11 -35
  55. package/dialog/Dialog.test.js +125 -187
  56. package/dialog/types.d.ts +18 -13
  57. package/dropdown/Dropdown.js +39 -93
  58. package/dropdown/Dropdown.test.js +391 -378
  59. package/dropdown/DropdownMenu.js +8 -19
  60. package/dropdown/DropdownMenuItem.js +5 -17
  61. package/dropdown/types.d.ts +17 -19
  62. package/file-input/FileInput.js +131 -220
  63. package/file-input/FileInput.stories.tsx +1 -1
  64. package/file-input/FileInput.test.js +293 -342
  65. package/file-input/FileItem.js +12 -39
  66. package/file-input/types.d.ts +9 -9
  67. package/flex/Flex.js +25 -39
  68. package/flex/types.d.ts +6 -6
  69. package/footer/Footer.js +9 -39
  70. package/footer/Footer.test.js +18 -32
  71. package/footer/Icons.d.ts +2 -2
  72. package/footer/Icons.js +2 -7
  73. package/footer/types.d.ts +13 -13
  74. package/grid/Grid.js +1 -16
  75. package/grid/types.d.ts +10 -10
  76. package/header/Header.d.ts +1 -1
  77. package/header/Header.js +19 -64
  78. package/header/Header.test.js +12 -25
  79. package/header/Icons.d.ts +2 -2
  80. package/header/Icons.js +2 -7
  81. package/header/types.d.ts +5 -7
  82. package/heading/Heading.js +9 -31
  83. package/heading/Heading.test.js +70 -87
  84. package/heading/types.d.ts +7 -7
  85. package/image/Image.d.ts +2 -2
  86. package/image/Image.js +17 -32
  87. package/image/types.d.ts +2 -2
  88. package/inset/Inset.js +13 -21
  89. package/inset/types.d.ts +2 -2
  90. package/layout/ApplicationLayout.d.ts +1 -1
  91. package/layout/ApplicationLayout.js +14 -54
  92. package/layout/Icons.d.ts +5 -5
  93. package/layout/Icons.js +1 -5
  94. package/layout/SidenavContext.d.ts +1 -1
  95. package/layout/SidenavContext.js +3 -9
  96. package/layout/types.d.ts +3 -3
  97. package/link/Link.js +21 -42
  98. package/link/Link.test.js +23 -41
  99. package/link/types.d.ts +14 -14
  100. package/main.d.ts +1 -1
  101. package/main.js +3 -52
  102. package/nav-tabs/NavTabs.js +11 -43
  103. package/nav-tabs/NavTabs.stories.tsx +1 -1
  104. package/nav-tabs/NavTabs.test.js +36 -43
  105. package/nav-tabs/Tab.js +16 -45
  106. package/nav-tabs/types.d.ts +9 -9
  107. package/number-input/NumberInput.d.ts +1 -1
  108. package/number-input/NumberInput.js +24 -35
  109. package/number-input/NumberInput.stories.tsx +42 -26
  110. package/number-input/NumberInput.test.js +682 -577
  111. package/number-input/types.d.ts +11 -5
  112. package/package.json +27 -25
  113. package/paginator/Icons.d.ts +5 -5
  114. package/paginator/Icons.js +5 -19
  115. package/paginator/Paginator.js +14 -39
  116. package/paginator/Paginator.test.js +224 -207
  117. package/paginator/types.d.ts +3 -3
  118. package/paragraph/Paragraph.js +3 -14
  119. package/paragraph/Paragraph.stories.tsx +0 -17
  120. package/password-input/Icons.d.ts +3 -3
  121. package/password-input/Icons.js +1 -5
  122. package/password-input/PasswordInput.js +26 -48
  123. package/password-input/PasswordInput.stories.tsx +1 -33
  124. package/password-input/PasswordInput.test.js +153 -129
  125. package/password-input/types.d.ts +8 -7
  126. package/progress-bar/ProgressBar.js +16 -42
  127. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  128. package/progress-bar/ProgressBar.test.js +35 -52
  129. package/progress-bar/types.d.ts +3 -3
  130. package/quick-nav/QuickNav.js +4 -27
  131. package/quick-nav/QuickNav.stories.tsx +1 -1
  132. package/quick-nav/types.d.ts +10 -10
  133. package/radio-group/Radio.d.ts +1 -1
  134. package/radio-group/Radio.js +22 -54
  135. package/radio-group/RadioGroup.js +37 -83
  136. package/radio-group/RadioGroup.stories.tsx +10 -10
  137. package/radio-group/RadioGroup.test.js +504 -470
  138. package/radio-group/types.d.ts +8 -8
  139. package/resultset-table/Icons.d.ts +7 -0
  140. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  141. package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
  142. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  143. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  144. package/select/Icons.d.ts +7 -7
  145. package/select/Icons.js +1 -5
  146. package/select/Listbox.js +13 -39
  147. package/select/Option.js +9 -26
  148. package/select/Select.js +54 -138
  149. package/select/Select.test.js +1902 -1796
  150. package/select/types.d.ts +14 -15
  151. package/sidenav/Icons.d.ts +4 -4
  152. package/sidenav/Icons.js +1 -5
  153. package/sidenav/Sidenav.js +24 -63
  154. package/sidenav/Sidenav.test.js +3 -10
  155. package/sidenav/types.d.ts +18 -18
  156. package/slider/Slider.js +38 -86
  157. package/slider/Slider.test.js +107 -103
  158. package/slider/types.d.ts +4 -4
  159. package/spinner/Spinner.js +10 -40
  160. package/spinner/Spinner.test.js +25 -34
  161. package/spinner/types.d.ts +3 -3
  162. package/switch/Switch.js +26 -69
  163. package/switch/Switch.stories.tsx +0 -34
  164. package/switch/Switch.test.js +51 -96
  165. package/switch/types.d.ts +4 -4
  166. package/table/Table.js +4 -23
  167. package/table/Table.test.js +1 -6
  168. package/table/types.d.ts +8 -8
  169. package/tabs/Tab.js +10 -29
  170. package/tabs/Tabs.js +48 -124
  171. package/tabs/Tabs.test.js +62 -118
  172. package/tabs/types.d.ts +19 -19
  173. package/tag/Tag.js +21 -51
  174. package/tag/Tag.test.js +19 -30
  175. package/tag/types.d.ts +7 -7
  176. package/text-input/Icons.d.ts +5 -5
  177. package/text-input/Icons.js +1 -5
  178. package/text-input/Suggestion.js +9 -26
  179. package/text-input/Suggestions.d.ts +1 -1
  180. package/text-input/Suggestions.js +12 -57
  181. package/text-input/TextInput.js +128 -193
  182. package/text-input/TextInput.stories.tsx +48 -152
  183. package/text-input/TextInput.test.js +1210 -1194
  184. package/text-input/types.d.ts +25 -17
  185. package/textarea/Textarea.js +60 -96
  186. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
  187. package/textarea/Textarea.test.js +150 -179
  188. package/textarea/types.d.ts +9 -5
  189. package/toggle-group/ToggleGroup.js +20 -57
  190. package/toggle-group/ToggleGroup.stories.tsx +1 -1
  191. package/toggle-group/ToggleGroup.test.js +48 -81
  192. package/toggle-group/types.d.ts +10 -10
  193. package/typography/Typography.js +4 -13
  194. package/typography/types.d.ts +1 -1
  195. package/useTheme.d.ts +12 -3
  196. package/useTheme.js +1 -8
  197. package/useTranslatedLabels.js +1 -7
  198. package/utils/BaseTypography.d.ts +2 -2
  199. package/utils/BaseTypography.js +16 -30
  200. package/utils/FocusLock.js +12 -36
  201. package/wizard/Wizard.js +14 -49
  202. package/wizard/Wizard.test.js +53 -80
  203. package/wizard/types.d.ts +6 -6
  204. package/resultsetTable/Icons.d.ts +0 -7
  205. package/slider/Slider.stories.tsx +0 -240
  206. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  207. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  208. /package/{resultsetTable → resultset-table}/types.js +0 -0
  209. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  210. /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/date-input/DateInput.stories.tsx CHANGED
@@ -6,15 +6,13 @@ import YearPicker from "./YearPicker";
6
6
  import Calendar from "./Calendar";
7
7
  import Title from "../../.storybook/components/Title";
8
8
  import ExampleContainer from "../../.storybook/components/ExampleContainer";
9
- import { BackgroundColorProvider } from "../BackgroundColorContext";
10
- import DarkContainer from "../../.storybook/components/DarkSection";
11
9
  import dayjs from "dayjs";
12
10
  import useTheme from "../useTheme";
13
11
  import { ThemeProvider } from "styled-components";
14
12
  import { HalstackProvider } from "../HalstackContext";
15
13
 
16
14
  export default {
17
- title: "Date input",
15
+ title: "Date Input",
18
16
  component: DxcDateInput,
19
17
  };
20
18
 
@@ -41,6 +39,16 @@ const DateInputChromatic = () => (
41
39
  disabled
42
40
  />
43
41
  </ExampleContainer>
42
+ <ExampleContainer>
43
+ <Title title="Read only" theme="light" level={4} />
44
+ <DxcDateInput
45
+ label="Example label"
46
+ helperText="Help message"
47
+ defaultValue="06-04-2007"
48
+ clearable
49
+ readOnly
50
+ />
51
+ </ExampleContainer>
44
52
  <ExampleContainer>
45
53
  <Title title="Invalid" theme="light" level={4} />
46
54
  <DxcDateInput label="Error date input" error="Error message." placeholder />
@@ -49,33 +57,6 @@ const DateInputChromatic = () => (
49
57
  <Title title="Relation between icons" theme="light" level={4} />
50
58
  <DxcDateInput label="Error date input" error="Error message." defaultValue="06-04-2007" clearable />
51
59
  </ExampleContainer>
52
- <BackgroundColorProvider color="#333333">
53
- <DarkContainer>
54
- <Title title="Dark" theme="dark" level={2} />
55
- <ExampleContainer>
56
- <Title title="Complete date input" theme="dark" level={4} />
57
- <DxcDateInput label="Date input" helperText="Help message" format="yyyy/dd/mm" placeholder optional />
58
- </ExampleContainer>
59
- <ExampleContainer>
60
- <Title title="Disabled" theme="dark" level={4} />
61
- <DxcDateInput
62
- label="Disabled Date input"
63
- helperText="Help message"
64
- defaultValue="06-04-2027"
65
- clearable
66
- disabled
67
- />
68
- </ExampleContainer>
69
- <ExampleContainer>
70
- <Title title="Invalid" theme="dark" level={4} />
71
- <DxcDateInput label="Error date input" error="Error message." placeholder />
72
- </ExampleContainer>
73
- <ExampleContainer>
74
- <Title title="Relation between icons" theme="dark" level={4} />
75
- <DxcDateInput label="Error date input" defaultValue="06-04-2007" error="Error message." clearable />
76
- </ExampleContainer>
77
- </DarkContainer>
78
- </BackgroundColorProvider>
79
60
  <Title title="Margins" theme="light" level={2} />
80
61
  <ExampleContainer>
81
62
  <Title title="Xxsmall" theme="light" level={4} />