@dxc-technology/halstack-react 0.0.0-d3ac293 → 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 (269) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +24 -139
  4. package/HalstackContext.js +11 -36
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +26 -83
  8. package/accordion/Accordion.stories.tsx +2 -114
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.d.ts +4 -3
  12. package/accordion-group/AccordionGroup.js +27 -75
  13. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  14. package/accordion-group/AccordionGroup.test.js +43 -71
  15. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  16. package/accordion-group/AccordionGroupAccordion.js +31 -0
  17. package/accordion-group/types.d.ts +6 -18
  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 +17 -56
  24. package/alert/Alert.test.js +28 -45
  25. package/alert/types.d.ts +5 -5
  26. package/badge/Badge.d.ts +1 -1
  27. package/badge/Badge.js +142 -42
  28. package/badge/Badge.stories.tsx +210 -0
  29. package/badge/Badge.test.js +30 -0
  30. package/badge/types.d.ts +52 -3
  31. package/bleed/Bleed.js +13 -21
  32. package/bleed/Bleed.stories.tsx +1 -0
  33. package/bleed/types.d.ts +2 -2
  34. package/box/Box.d.ts +1 -1
  35. package/box/Box.js +16 -55
  36. package/box/Box.stories.tsx +25 -53
  37. package/box/Box.test.js +1 -6
  38. package/box/types.d.ts +3 -15
  39. package/bulleted-list/BulletedList.js +19 -53
  40. package/bulleted-list/BulletedList.stories.tsx +8 -93
  41. package/bulleted-list/types.d.ts +32 -5
  42. package/button/Button.d.ts +1 -1
  43. package/button/Button.js +66 -100
  44. package/button/Button.stories.tsx +9 -90
  45. package/button/Button.test.js +19 -16
  46. package/button/types.d.ts +8 -4
  47. package/card/Card.d.ts +1 -1
  48. package/card/Card.js +47 -88
  49. package/card/Card.stories.tsx +12 -42
  50. package/card/Card.test.js +10 -21
  51. package/card/types.d.ts +6 -12
  52. package/checkbox/Checkbox.js +85 -120
  53. package/checkbox/Checkbox.stories.tsx +16 -54
  54. package/checkbox/Checkbox.test.js +107 -63
  55. package/checkbox/types.d.ts +8 -4
  56. package/chip/Chip.js +34 -68
  57. package/chip/Chip.stories.tsx +25 -17
  58. package/chip/Chip.test.js +15 -28
  59. package/chip/types.d.ts +4 -4
  60. package/common/OpenSans.css +68 -80
  61. package/common/coreTokens.d.ts +237 -0
  62. package/common/coreTokens.js +184 -0
  63. package/common/utils.js +2 -8
  64. package/common/variables.d.ts +24 -282
  65. package/common/variables.js +860 -1125
  66. package/container/Container.d.ts +4 -0
  67. package/container/Container.js +194 -0
  68. package/container/Container.stories.tsx +214 -0
  69. package/container/types.d.ts +74 -0
  70. package/date-input/Calendar.js +15 -59
  71. package/date-input/DateInput.js +50 -96
  72. package/date-input/DateInput.stories.tsx +11 -30
  73. package/date-input/DateInput.test.js +674 -701
  74. package/date-input/DatePicker.js +11 -42
  75. package/date-input/Icons.d.ts +6 -6
  76. package/date-input/Icons.js +6 -23
  77. package/date-input/YearPicker.js +8 -34
  78. package/date-input/types.d.ts +27 -21
  79. package/dialog/Dialog.d.ts +1 -1
  80. package/dialog/Dialog.js +15 -60
  81. package/dialog/Dialog.stories.tsx +215 -169
  82. package/dialog/Dialog.test.js +125 -187
  83. package/dialog/types.d.ts +18 -26
  84. package/dropdown/Dropdown.js +39 -93
  85. package/dropdown/Dropdown.test.js +391 -378
  86. package/dropdown/DropdownMenu.js +13 -20
  87. package/dropdown/DropdownMenuItem.js +5 -19
  88. package/dropdown/types.d.ts +17 -19
  89. package/file-input/FileInput.js +180 -249
  90. package/file-input/FileInput.stories.tsx +1 -1
  91. package/file-input/FileInput.test.js +356 -354
  92. package/file-input/FileItem.js +14 -41
  93. package/file-input/types.d.ts +10 -10
  94. package/flex/Flex.js +27 -39
  95. package/flex/Flex.stories.tsx +35 -26
  96. package/flex/types.d.ts +74 -9
  97. package/footer/Footer.d.ts +1 -1
  98. package/footer/Footer.js +69 -116
  99. package/footer/Footer.stories.tsx +38 -95
  100. package/footer/Footer.test.js +21 -33
  101. package/footer/Icons.d.ts +3 -2
  102. package/footer/Icons.js +66 -7
  103. package/footer/types.d.ts +25 -27
  104. package/grid/Grid.d.ts +7 -0
  105. package/grid/Grid.js +76 -0
  106. package/grid/Grid.stories.tsx +219 -0
  107. package/grid/types.d.ts +115 -0
  108. package/grid/types.js +5 -0
  109. package/header/Header.d.ts +4 -3
  110. package/header/Header.js +33 -116
  111. package/header/Header.stories.tsx +7 -71
  112. package/header/Header.test.js +12 -25
  113. package/header/Icons.d.ts +2 -2
  114. package/header/Icons.js +2 -7
  115. package/header/types.d.ts +5 -20
  116. package/heading/Heading.js +9 -31
  117. package/heading/Heading.test.js +70 -87
  118. package/heading/types.d.ts +7 -7
  119. package/image/Image.d.ts +4 -0
  120. package/image/Image.js +70 -0
  121. package/image/Image.stories.tsx +127 -0
  122. package/image/types.d.ts +72 -0
  123. package/image/types.js +5 -0
  124. package/inset/Inset.js +13 -21
  125. package/inset/Inset.stories.tsx +2 -1
  126. package/inset/types.d.ts +2 -2
  127. package/layout/ApplicationLayout.d.ts +5 -5
  128. package/layout/ApplicationLayout.js +28 -65
  129. package/layout/ApplicationLayout.stories.tsx +1 -1
  130. package/layout/Icons.d.ts +8 -5
  131. package/layout/Icons.js +51 -59
  132. package/layout/SidenavContext.d.ts +1 -1
  133. package/layout/SidenavContext.js +3 -9
  134. package/layout/types.d.ts +5 -6
  135. package/link/Link.js +23 -44
  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 -58
  140. package/nav-tabs/NavTabs.d.ts +2 -2
  141. package/nav-tabs/NavTabs.js +22 -54
  142. package/nav-tabs/NavTabs.stories.tsx +21 -5
  143. package/nav-tabs/NavTabs.test.js +38 -44
  144. package/nav-tabs/Tab.js +40 -72
  145. package/nav-tabs/types.d.ts +14 -15
  146. package/number-input/NumberInput.d.ts +7 -0
  147. package/number-input/NumberInput.js +26 -35
  148. package/number-input/NumberInput.stories.tsx +42 -26
  149. package/number-input/NumberInput.test.js +700 -412
  150. package/number-input/types.d.ts +11 -5
  151. package/package.json +30 -28
  152. package/paginator/Icons.d.ts +5 -5
  153. package/paginator/Icons.js +5 -19
  154. package/paginator/Paginator.js +17 -47
  155. package/paginator/Paginator.test.js +229 -199
  156. package/paginator/types.d.ts +3 -3
  157. package/paragraph/Paragraph.d.ts +2 -3
  158. package/paragraph/Paragraph.js +3 -19
  159. package/paragraph/Paragraph.stories.tsx +0 -17
  160. package/password-input/Icons.d.ts +6 -0
  161. package/password-input/Icons.js +35 -0
  162. package/password-input/PasswordInput.js +57 -126
  163. package/password-input/PasswordInput.stories.tsx +1 -33
  164. package/password-input/PasswordInput.test.js +157 -140
  165. package/password-input/types.d.ts +8 -7
  166. package/progress-bar/ProgressBar.d.ts +2 -2
  167. package/progress-bar/ProgressBar.js +21 -53
  168. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  169. package/progress-bar/ProgressBar.test.js +35 -52
  170. package/progress-bar/types.d.ts +4 -3
  171. package/quick-nav/QuickNav.js +4 -27
  172. package/quick-nav/QuickNav.stories.tsx +1 -1
  173. package/quick-nav/types.d.ts +10 -10
  174. package/radio-group/Radio.d.ts +1 -1
  175. package/radio-group/Radio.js +31 -63
  176. package/radio-group/RadioGroup.js +45 -93
  177. package/radio-group/RadioGroup.stories.tsx +10 -10
  178. package/radio-group/RadioGroup.test.js +504 -470
  179. package/radio-group/types.d.ts +8 -8
  180. package/resultset-table/Icons.d.ts +7 -0
  181. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  182. package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +1 -1
  183. package/{resultsetTable → resultset-table}/ResultsetTable.js +33 -63
  184. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +19 -0
  185. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  186. package/{resultsetTable → resultset-table}/types.d.ts +13 -7
  187. package/resultset-table/types.js +5 -0
  188. package/select/Icons.d.ts +7 -7
  189. package/select/Icons.js +1 -5
  190. package/select/Listbox.js +13 -39
  191. package/select/Option.js +17 -27
  192. package/select/Select.js +92 -166
  193. package/select/Select.stories.tsx +3 -3
  194. package/select/Select.test.js +1946 -1804
  195. package/select/types.d.ts +14 -15
  196. package/sidenav/Icons.d.ts +7 -0
  197. package/sidenav/Icons.js +47 -0
  198. package/sidenav/Sidenav.d.ts +2 -2
  199. package/sidenav/Sidenav.js +80 -150
  200. package/sidenav/Sidenav.stories.tsx +60 -60
  201. package/sidenav/Sidenav.test.js +3 -10
  202. package/sidenav/types.d.ts +31 -28
  203. package/slider/Slider.js +68 -126
  204. package/slider/Slider.test.js +107 -103
  205. package/slider/types.d.ts +4 -4
  206. package/spinner/Spinner.js +28 -72
  207. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +28 -28
  208. package/spinner/Spinner.test.js +25 -34
  209. package/spinner/types.d.ts +3 -3
  210. package/status-light/StatusLight.d.ts +4 -0
  211. package/status-light/StatusLight.js +51 -0
  212. package/status-light/StatusLight.stories.tsx +74 -0
  213. package/status-light/StatusLight.test.js +25 -0
  214. package/status-light/types.d.ts +17 -0
  215. package/status-light/types.js +5 -0
  216. package/switch/Switch.js +49 -97
  217. package/switch/Switch.stories.tsx +0 -34
  218. package/switch/Switch.test.js +51 -96
  219. package/switch/types.d.ts +4 -4
  220. package/table/Table.d.ts +1 -1
  221. package/table/Table.js +23 -30
  222. package/table/{Table.stories.jsx → Table.stories.tsx} +98 -0
  223. package/table/Table.test.js +1 -6
  224. package/table/types.d.ts +12 -6
  225. package/tabs/Tab.js +19 -36
  226. package/tabs/Tabs.js +61 -144
  227. package/tabs/Tabs.stories.tsx +1 -1
  228. package/tabs/Tabs.test.js +65 -121
  229. package/tabs/types.d.ts +19 -19
  230. package/tag/Tag.js +26 -58
  231. package/tag/Tag.test.js +19 -30
  232. package/tag/types.d.ts +7 -7
  233. package/text-input/Icons.d.ts +5 -5
  234. package/text-input/Icons.js +1 -5
  235. package/text-input/Suggestion.js +11 -28
  236. package/text-input/Suggestions.d.ts +1 -1
  237. package/text-input/Suggestions.js +15 -65
  238. package/text-input/TextInput.js +217 -318
  239. package/text-input/TextInput.stories.tsx +48 -152
  240. package/text-input/TextInput.test.js +1210 -1194
  241. package/text-input/types.d.ts +25 -17
  242. package/textarea/Textarea.js +68 -111
  243. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  244. package/textarea/Textarea.test.js +151 -182
  245. package/textarea/types.d.ts +9 -5
  246. package/toggle-group/ToggleGroup.d.ts +2 -2
  247. package/toggle-group/ToggleGroup.js +91 -105
  248. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  249. package/toggle-group/ToggleGroup.test.js +68 -87
  250. package/toggle-group/types.d.ts +26 -17
  251. package/typography/Typography.js +4 -13
  252. package/typography/types.d.ts +1 -1
  253. package/useTheme.d.ts +21 -136
  254. package/useTheme.js +1 -8
  255. package/useTranslatedLabels.js +1 -7
  256. package/utils/BaseTypography.d.ts +2 -2
  257. package/utils/BaseTypography.js +16 -30
  258. package/utils/FocusLock.js +28 -43
  259. package/wizard/Wizard.js +15 -50
  260. package/wizard/Wizard.test.js +53 -80
  261. package/wizard/types.d.ts +8 -9
  262. package/card/ice-cream.jpg +0 -0
  263. package/number-input/NumberInputContext.d.ts +0 -4
  264. package/number-input/NumberInputContext.js +0 -19
  265. package/number-input/numberInputContextTypes.d.ts +0 -19
  266. package/resultsetTable/Icons.d.ts +0 -7
  267. package/slider/Slider.stories.tsx +0 -240
  268. /package/{resultsetTable → action-icon}/types.js +0 -0
  269. /package/{number-input/numberInputContextTypes.js → container/types.js} +0 -0
package/wizard/types.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  /// <reference types="react" />
2
- export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- export declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- declare type Step = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type StepProps = {
11
11
  /**
12
12
  * Step label.
13
13
  */
@@ -29,12 +29,11 @@ declare type Step = {
29
29
  */
30
30
  valid?: boolean;
31
31
  };
32
- export declare type Mode = "horizontal" | "vertical";
33
- declare type Props = {
32
+ type Props = {
34
33
  /**
35
34
  * The wizard can be showed in horizontal or vertical.
36
35
  */
37
- mode?: Mode;
36
+ mode?: "horizontal" | "vertical";
38
37
  /**
39
38
  * Initially selected step, only when it is uncontrolled.
40
39
  */
@@ -47,11 +46,11 @@ declare type Props = {
47
46
  * This function will be called when the user clicks a step. The step
48
47
  * number will be passed as a parameter.
49
48
  */
50
- onStepClick?: (newCurrentStep: number) => void;
49
+ onStepClick?: (currentStep: number) => void;
51
50
  /**
52
51
  * An array of objects representing the steps.
53
52
  */
54
- steps: Step[];
53
+ steps: StepProps[];
55
54
  /**
56
55
  * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
57
56
  * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
Binary file
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import NumberInputContextPropsType from "./numberInputContextTypes";
3
- declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
4
- export default NumberInputContext;
@@ -1,19 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var defaultState = {
13
- stepNumber: 1
14
- };
15
-
16
- var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
17
-
18
- var _default = NumberInputContext;
19
- exports["default"] = _default;
@@ -1,19 +0,0 @@
1
- declare type Props = {
2
- /**
3
- * Type of the input.
4
- */
5
- typeNumber?: string;
6
- /**
7
- * Minimum value allowed by the number input.
8
- */
9
- minNumber?: number;
10
- /**
11
- * Maximum value allowed by the number input.
12
- */
13
- maxNumber?: number;
14
- /**
15
- * The step interval to use when using the up and down arrows to adjust the value.
16
- */
17
- stepNumber?: number;
18
- };
19
- export default Props;
@@ -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,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