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

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 (270) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +43 -138
  4. package/HalstackContext.js +10 -35
  5. package/accordion/Accordion.js +23 -63
  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/action-icon/ActionIcon.d.ts +4 -0
  15. package/action-icon/ActionIcon.js +47 -0
  16. package/action-icon/ActionIcon.stories.tsx +41 -0
  17. package/action-icon/ActionIcon.test.js +64 -0
  18. package/action-icon/types.d.ts +26 -0
  19. package/alert/Alert.js +15 -50
  20. package/alert/Alert.test.js +28 -45
  21. package/alert/types.d.ts +5 -5
  22. package/badge/Badge.d.ts +1 -1
  23. package/badge/Badge.js +141 -43
  24. package/badge/Badge.stories.tsx +210 -0
  25. package/badge/Badge.test.js +30 -0
  26. package/badge/types.d.ts +52 -3
  27. package/bleed/Bleed.js +13 -21
  28. package/bleed/types.d.ts +2 -2
  29. package/box/Box.js +11 -33
  30. package/box/Box.test.js +1 -6
  31. package/box/types.d.ts +3 -3
  32. package/bulleted-list/BulletedList.js +18 -54
  33. package/bulleted-list/BulletedList.stories.tsx +1 -92
  34. package/bulleted-list/types.d.ts +5 -5
  35. package/button/Button.js +36 -59
  36. package/button/Button.stories.tsx +33 -132
  37. package/button/Button.test.js +13 -21
  38. package/button/types.d.ts +5 -5
  39. package/card/Card.js +21 -44
  40. package/card/Card.test.js +10 -21
  41. package/card/types.d.ts +5 -5
  42. package/checkbox/Checkbox.js +85 -120
  43. package/checkbox/Checkbox.stories.tsx +16 -54
  44. package/checkbox/Checkbox.test.js +107 -63
  45. package/checkbox/types.d.ts +8 -4
  46. package/chip/Chip.js +12 -31
  47. package/chip/Chip.stories.tsx +1 -1
  48. package/chip/Chip.test.js +15 -28
  49. package/chip/types.d.ts +4 -4
  50. package/common/coreTokens.d.ts +105 -14
  51. package/common/coreTokens.js +40 -23
  52. package/common/utils.js +2 -8
  53. package/common/variables.d.ts +44 -139
  54. package/common/variables.js +55 -157
  55. package/container/Container.d.ts +4 -0
  56. package/container/Container.js +194 -0
  57. package/container/Container.stories.tsx +214 -0
  58. package/container/types.d.ts +74 -0
  59. package/container/types.js +5 -0
  60. package/contextual-menu/ContextualMenu.d.ts +7 -0
  61. package/contextual-menu/ContextualMenu.js +71 -0
  62. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  63. package/contextual-menu/ContextualMenu.test.js +71 -0
  64. package/contextual-menu/MenuItemAction.d.ts +4 -0
  65. package/contextual-menu/MenuItemAction.js +46 -0
  66. package/contextual-menu/types.d.ts +22 -0
  67. package/contextual-menu/types.js +5 -0
  68. package/date-input/Calendar.js +13 -57
  69. package/date-input/DateInput.js +50 -96
  70. package/date-input/DateInput.stories.tsx +11 -30
  71. package/date-input/DateInput.test.js +674 -701
  72. package/date-input/DatePicker.js +11 -42
  73. package/date-input/Icons.d.ts +6 -6
  74. package/date-input/Icons.js +6 -23
  75. package/date-input/YearPicker.js +8 -34
  76. package/date-input/types.d.ts +28 -22
  77. package/dialog/Dialog.js +13 -40
  78. package/dialog/Dialog.stories.tsx +170 -0
  79. package/dialog/Dialog.test.js +125 -187
  80. package/dialog/types.d.ts +18 -13
  81. package/divider/Divider.d.ts +4 -0
  82. package/divider/Divider.js +36 -0
  83. package/divider/Divider.stories.tsx +223 -0
  84. package/divider/Divider.test.js +38 -0
  85. package/divider/types.d.ts +19 -0
  86. package/divider/types.js +5 -0
  87. package/dropdown/Dropdown.js +48 -100
  88. package/dropdown/Dropdown.test.js +391 -378
  89. package/dropdown/DropdownMenu.js +8 -19
  90. package/dropdown/DropdownMenuItem.js +5 -17
  91. package/dropdown/types.d.ts +18 -20
  92. package/file-input/FileInput.js +180 -248
  93. package/file-input/FileInput.stories.tsx +1 -1
  94. package/file-input/FileInput.test.js +356 -354
  95. package/file-input/FileItem.js +12 -39
  96. package/file-input/types.d.ts +9 -9
  97. package/flex/Flex.js +25 -39
  98. package/flex/types.d.ts +6 -6
  99. package/footer/Footer.d.ts +1 -1
  100. package/footer/Footer.js +38 -65
  101. package/footer/Footer.stories.tsx +19 -0
  102. package/footer/Footer.test.js +18 -32
  103. package/footer/Icons.d.ts +3 -2
  104. package/footer/Icons.js +66 -7
  105. package/footer/types.d.ts +16 -16
  106. package/grid/Grid.js +1 -16
  107. package/grid/types.d.ts +10 -10
  108. package/header/Header.d.ts +1 -1
  109. package/header/Header.js +28 -84
  110. package/header/Header.test.js +12 -25
  111. package/header/Icons.d.ts +2 -2
  112. package/header/Icons.js +2 -7
  113. package/header/types.d.ts +7 -8
  114. package/heading/Heading.js +9 -31
  115. package/heading/Heading.test.js +70 -87
  116. package/heading/types.d.ts +7 -7
  117. package/icon/Icon.d.ts +4 -0
  118. package/icon/Icon.js +33 -0
  119. package/icon/Icon.stories.tsx +26 -0
  120. package/icon/types.d.ts +4 -0
  121. package/icon/types.js +5 -0
  122. package/image/Image.d.ts +2 -2
  123. package/image/Image.js +17 -32
  124. package/image/Image.stories.tsx +3 -1
  125. package/image/types.d.ts +2 -2
  126. package/inset/Inset.js +13 -21
  127. package/inset/types.d.ts +2 -2
  128. package/layout/ApplicationLayout.d.ts +2 -2
  129. package/layout/ApplicationLayout.js +14 -54
  130. package/layout/Icons.d.ts +5 -5
  131. package/layout/Icons.js +1 -5
  132. package/layout/SidenavContext.d.ts +1 -1
  133. package/layout/SidenavContext.js +3 -9
  134. package/layout/types.d.ts +3 -3
  135. package/link/Link.js +21 -42
  136. package/link/Link.test.js +23 -41
  137. package/link/types.d.ts +14 -14
  138. package/main.d.ts +7 -4
  139. package/main.js +32 -60
  140. package/nav-tabs/NavTabs.js +17 -46
  141. package/nav-tabs/NavTabs.stories.tsx +7 -5
  142. package/nav-tabs/NavTabs.test.js +38 -44
  143. package/nav-tabs/Tab.js +22 -50
  144. package/nav-tabs/types.d.ts +9 -9
  145. package/number-input/NumberInput.d.ts +1 -1
  146. package/number-input/NumberInput.js +45 -37
  147. package/number-input/NumberInput.stories.tsx +42 -26
  148. package/number-input/NumberInput.test.js +839 -575
  149. package/number-input/types.d.ts +11 -5
  150. package/package.json +29 -27
  151. package/paginator/Icons.d.ts +5 -5
  152. package/paginator/Icons.js +5 -19
  153. package/paginator/Paginator.js +15 -43
  154. package/paginator/Paginator.test.js +224 -207
  155. package/paginator/types.d.ts +3 -3
  156. package/paragraph/Paragraph.js +3 -19
  157. package/paragraph/Paragraph.stories.tsx +0 -17
  158. package/password-input/Icons.d.ts +3 -3
  159. package/password-input/Icons.js +1 -5
  160. package/password-input/PasswordInput.js +26 -48
  161. package/password-input/PasswordInput.stories.tsx +1 -34
  162. package/password-input/PasswordInput.test.js +153 -129
  163. package/password-input/types.d.ts +8 -7
  164. package/progress-bar/ProgressBar.js +21 -53
  165. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  166. package/progress-bar/ProgressBar.test.js +35 -52
  167. package/progress-bar/types.d.ts +3 -3
  168. package/quick-nav/QuickNav.js +4 -27
  169. package/quick-nav/QuickNav.stories.tsx +1 -1
  170. package/quick-nav/types.d.ts +10 -10
  171. package/radio-group/Radio.d.ts +1 -1
  172. package/radio-group/Radio.js +22 -54
  173. package/radio-group/RadioGroup.js +37 -83
  174. package/radio-group/RadioGroup.stories.tsx +10 -10
  175. package/radio-group/RadioGroup.test.js +504 -470
  176. package/radio-group/types.d.ts +8 -8
  177. package/resultset-table/Icons.d.ts +7 -0
  178. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  179. package/resultset-table/ResultsetTable.d.ts +7 -0
  180. package/{resultsetTable → resultset-table}/ResultsetTable.js +35 -64
  181. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +102 -5
  182. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +138 -92
  183. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  184. package/resultset-table/types.js +5 -0
  185. package/select/Icons.d.ts +7 -7
  186. package/select/Icons.js +1 -5
  187. package/select/Listbox.js +13 -39
  188. package/select/Option.js +17 -27
  189. package/select/Select.js +87 -163
  190. package/select/Select.test.js +1942 -1800
  191. package/select/types.d.ts +14 -15
  192. package/sidenav/Icons.d.ts +4 -4
  193. package/sidenav/Icons.js +1 -5
  194. package/sidenav/Sidenav.js +28 -69
  195. package/sidenav/Sidenav.test.js +3 -10
  196. package/sidenav/types.d.ts +18 -18
  197. package/slider/Slider.js +68 -125
  198. package/slider/Slider.test.js +107 -103
  199. package/slider/types.d.ts +4 -4
  200. package/spinner/Spinner.js +16 -54
  201. package/spinner/Spinner.test.js +25 -34
  202. package/spinner/types.d.ts +3 -3
  203. package/status-light/StatusLight.d.ts +4 -0
  204. package/status-light/StatusLight.js +51 -0
  205. package/status-light/StatusLight.stories.tsx +74 -0
  206. package/status-light/StatusLight.test.js +25 -0
  207. package/status-light/types.d.ts +17 -0
  208. package/status-light/types.js +5 -0
  209. package/switch/Switch.js +49 -97
  210. package/switch/Switch.stories.tsx +0 -34
  211. package/switch/Switch.test.js +51 -96
  212. package/switch/types.d.ts +4 -4
  213. package/table/DropdownTheme.js +62 -0
  214. package/table/Table.d.ts +6 -2
  215. package/table/Table.js +85 -33
  216. package/table/{Table.stories.jsx → Table.stories.tsx} +304 -2
  217. package/table/Table.test.js +93 -6
  218. package/table/types.d.ts +48 -6
  219. package/tabs/Tab.js +17 -33
  220. package/tabs/Tabs.js +52 -129
  221. package/tabs/Tabs.stories.tsx +1 -1
  222. package/tabs/Tabs.test.js +62 -118
  223. package/tabs/types.d.ts +19 -19
  224. package/tag/Tag.js +21 -51
  225. package/tag/Tag.test.js +19 -30
  226. package/tag/types.d.ts +7 -7
  227. package/text-input/Icons.d.ts +5 -5
  228. package/text-input/Icons.js +1 -5
  229. package/text-input/Suggestion.js +9 -26
  230. package/text-input/Suggestions.d.ts +1 -1
  231. package/text-input/Suggestions.js +15 -65
  232. package/text-input/TextInput.js +192 -284
  233. package/text-input/TextInput.stories.tsx +48 -152
  234. package/text-input/TextInput.test.js +1227 -1194
  235. package/text-input/types.d.ts +25 -17
  236. package/textarea/Textarea.js +67 -109
  237. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  238. package/textarea/Textarea.test.js +150 -179
  239. package/textarea/types.d.ts +9 -5
  240. package/toggle-group/ToggleGroup.js +21 -61
  241. package/toggle-group/ToggleGroup.stories.tsx +1 -1
  242. package/toggle-group/ToggleGroup.test.js +48 -81
  243. package/toggle-group/types.d.ts +10 -10
  244. package/typography/Typography.js +4 -13
  245. package/typography/types.d.ts +1 -1
  246. package/useTheme.d.ts +41 -136
  247. package/useTheme.js +1 -8
  248. package/useTranslatedLabels.js +1 -7
  249. package/utils/BaseTypography.d.ts +2 -2
  250. package/utils/BaseTypography.js +16 -30
  251. package/utils/FocusLock.js +25 -39
  252. package/wizard/Wizard.js +14 -49
  253. package/wizard/Wizard.test.js +53 -80
  254. package/wizard/types.d.ts +7 -7
  255. package/common/OpenSans.css +0 -69
  256. package/common/fonts/OpenSans-Bold.ttf +0 -0
  257. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  258. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  259. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  260. package/common/fonts/OpenSans-Italic.ttf +0 -0
  261. package/common/fonts/OpenSans-Light.ttf +0 -0
  262. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  263. package/common/fonts/OpenSans-Regular.ttf +0 -0
  264. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  265. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  266. package/resultsetTable/Icons.d.ts +0 -7
  267. package/resultsetTable/ResultsetTable.d.ts +0 -4
  268. package/slider/Slider.stories.tsx +0 -240
  269. /package/{resultsetTable → action-icon}/types.js +0 -0
  270. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- declare const icons: {
3
- arrowUp: JSX.Element;
4
- arrowDown: JSX.Element;
5
- bothArrows: JSX.Element;
6
- };
7
- export default icons;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ResultsetTablePropsType from "./types";
3
- declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
4
- export default DxcResultsetTable;
@@ -1,240 +0,0 @@
1
- import React from "react";
2
- import DxcSlider from "./Slider";
3
- import { BackgroundColorProvider } from "../BackgroundColorContext";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
- import DarkContainer from "../../.storybook/components/DarkSection";
7
- import { HalstackProvider } from "../HalstackContext";
8
-
9
- export default {
10
- title: "Slider",
11
- component: DxcSlider,
12
- };
13
-
14
- const labelFormat = (value) => `${value}E100000000000000000000000`;
15
-
16
- const opinionatedTheme = {
17
- slider: {
18
- baseColor: "#0067b3",
19
- fontColor: "#000000",
20
- totalLineColor: "#e6e6e6",
21
- },
22
- };
23
-
24
- export const Chromatic = () => (
25
- <>
26
- <Title title="States" theme="light" level={2} />
27
- <ExampleContainer pseudoState="pseudo-hover">
28
- <Title title="Hovered" theme="light" level={4} />
29
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
30
- </ExampleContainer>
31
- <ExampleContainer pseudoState="pseudo-active">
32
- <Title title="Active" theme="light" level={4} />
33
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
34
- </ExampleContainer>
35
- <ExampleContainer pseudoState="pseudo-focus">
36
- <Title title="Focused" theme="light" level={4} />
37
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
38
- </ExampleContainer>
39
- <ExampleContainer>
40
- <Title title="Disabled" theme="light" level={4} />
41
- <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
42
- </ExampleContainer>
43
- <ExampleContainer>
44
- <Title title="Disabled discrete slider with input" theme="light" level={4} />
45
- <DxcSlider
46
- label="Slider"
47
- helperText="Help message"
48
- disabled
49
- defaultValue={40}
50
- minValue={0}
51
- maxValue={50}
52
- showLimitsValues
53
- showInput
54
- marks
55
- step={10}
56
- />
57
- </ExampleContainer>
58
- <Title title="Variants" theme="light" level={2} />
59
- <ExampleContainer>
60
- <Title title="Continuous slider" theme="light" level={4} />
61
- <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
62
- </ExampleContainer>
63
- <ExampleContainer>
64
- <Title title="Discrete slider" theme="light" level={4} />
65
- <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
66
- </ExampleContainer>
67
- <ExampleContainer>
68
- <Title title="Discrete slider with input" theme="light" level={4} />
69
- <DxcSlider
70
- defaultValue={20}
71
- minValue={0}
72
- maxValue={50}
73
- label="Slider"
74
- helperText="Help message"
75
- showLimitsValues
76
- showInput
77
- marks
78
- step={10}
79
- />
80
- </ExampleContainer>
81
- <BackgroundColorProvider color="#333333">
82
- <DarkContainer>
83
- <Title title="Dark" theme="dark" level={2} />
84
- <ExampleContainer pseudoState="pseudo-hover">
85
- <Title title="Hovered" theme="dark" level={4} />
86
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
87
- </ExampleContainer>
88
- <ExampleContainer pseudoState="pseudo-active">
89
- <Title title="Active" theme="dark" level={4} />
90
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
91
- </ExampleContainer>
92
- <ExampleContainer pseudoState="pseudo-focus">
93
- <Title title="Focused" theme="dark" level={4} />
94
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
95
- </ExampleContainer>
96
- <ExampleContainer>
97
- <Title title="Disabled" theme="dark" level={4} />
98
- <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
99
- </ExampleContainer>
100
- <ExampleContainer>
101
- <Title title="Disabled discrete slider with input" theme="dark" level={4} />
102
- <DxcSlider
103
- label="Slider"
104
- helperText="Help message"
105
- disabled
106
- defaultValue={40}
107
- minValue={0}
108
- maxValue={50}
109
- showLimitsValues
110
- showInput
111
- marks
112
- step={5}
113
- />
114
- </ExampleContainer>
115
- <ExampleContainer>
116
- <Title title="Continuous slider" theme="dark" level={4} />
117
- <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
118
- </ExampleContainer>
119
- <ExampleContainer>
120
- <Title title="Discrete slider" theme="dark" level={4} />
121
- <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
122
- </ExampleContainer>
123
- <ExampleContainer>
124
- <Title title="Discrete slider with input" theme="dark" level={4} />
125
- <DxcSlider
126
- defaultValue={20}
127
- minValue={0}
128
- maxValue={50}
129
- label="Slider"
130
- helperText="Help message"
131
- showLimitsValues
132
- showInput
133
- marks
134
- step={10}
135
- />
136
- </ExampleContainer>
137
- </DarkContainer>
138
- </BackgroundColorProvider>
139
- <Title title="Margins" theme="light" level={2} />
140
- <ExampleContainer>
141
- <Title title="Xxsmall" theme="light" level={4} />
142
- <DxcSlider label="Xxsmall" margin="xxsmall" />
143
- </ExampleContainer>
144
- <ExampleContainer>
145
- <Title title="Xsmall" theme="light" level={4} />
146
- <DxcSlider label="Xsmall" margin="xsmall" />
147
- </ExampleContainer>
148
- <ExampleContainer>
149
- <Title title="Small" theme="light" level={4} />
150
- <DxcSlider label="Small" margin="small" />
151
- </ExampleContainer>
152
- <ExampleContainer>
153
- <Title title="Medium" theme="light" level={4} />
154
- <DxcSlider label="Medium" margin="medium" />
155
- </ExampleContainer>
156
- <ExampleContainer>
157
- <Title title="Large" theme="light" level={4} />
158
- <DxcSlider label="Large" margin="large" />
159
- </ExampleContainer>
160
- <ExampleContainer>
161
- <Title title="Xlarge" theme="light" level={4} />
162
- <DxcSlider label="Xlarge" margin="xlarge" />
163
- </ExampleContainer>
164
- <ExampleContainer>
165
- <Title title="Xxlarge" theme="light" level={4} />
166
- <DxcSlider label="Xxlarge" margin="xxlarge" />
167
- </ExampleContainer>
168
- <Title title="Sizes" theme="light" level={2} />
169
- <ExampleContainer>
170
- <Title title="Medium" theme="light" level={4} />
171
- <DxcSlider label="Medium" size="medium" />
172
- </ExampleContainer>
173
- <ExampleContainer>
174
- <Title title="Large" theme="light" level={4} />
175
- <DxcSlider label="Large" size="large" />
176
- </ExampleContainer>
177
- <ExampleContainer>
178
- <Title title="FillParent" theme="light" level={4} />
179
- <DxcSlider label="FillParent" size="fillParent" />
180
- </ExampleContainer>
181
- <ExampleContainer>
182
- <Title title="Large limit values labels" theme="light" level={4} />
183
- <DxcSlider
184
- label="Slider"
185
- helperText="Help message"
186
- showLimitsValues
187
- labelFormatCallback={labelFormat}
188
- size="large"
189
- />
190
- </ExampleContainer>
191
- <Title title="Opinionated theme" theme="light" level={2} />
192
- <ExampleContainer pseudoState="pseudo-hover">
193
- <Title title="Hovered" theme="light" level={4} />
194
- <HalstackProvider theme={opinionatedTheme}>
195
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
196
- </HalstackProvider>
197
- </ExampleContainer>
198
- <ExampleContainer pseudoState="pseudo-active">
199
- <Title title="Active" theme="light" level={4} />
200
- <HalstackProvider theme={opinionatedTheme}>
201
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
202
- </HalstackProvider>
203
- </ExampleContainer>
204
- <ExampleContainer pseudoState="pseudo-focus">
205
- <Title title="Focused" theme="light" level={4} />
206
- <HalstackProvider theme={opinionatedTheme}>
207
- <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
208
- </HalstackProvider>
209
- </ExampleContainer>
210
- <ExampleContainer>
211
- <Title title="Disabled discrete slider with input" theme="light" level={4} />{" "}
212
- <HalstackProvider theme={opinionatedTheme}>
213
- <DxcSlider
214
- label="Slider"
215
- helperText="Help message"
216
- disabled
217
- defaultValue={40}
218
- minValue={0}
219
- maxValue={50}
220
- showLimitsValues
221
- showInput
222
- marks
223
- step={10}
224
- />
225
- </HalstackProvider>
226
- </ExampleContainer>
227
- <ExampleContainer>
228
- <Title title="Continuous slider" theme="light" level={4} />
229
- <HalstackProvider theme={opinionatedTheme}>
230
- <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
231
- </HalstackProvider>
232
- </ExampleContainer>
233
- <ExampleContainer>
234
- <Title title="Discrete slider" theme="light" level={4} />
235
- <HalstackProvider theme={opinionatedTheme}>
236
- <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
237
- </HalstackProvider>
238
- </ExampleContainer>
239
- </>
240
- );
File without changes