@dxc-technology/halstack-react 0.0.0-4ee80da → 0.0.0-4fe81f7

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 (327) hide show
  1. package/README.md +47 -0
  2. package/dist/index.d.mts +6439 -0
  3. package/dist/index.d.ts +6439 -0
  4. package/dist/index.js +12618 -0
  5. package/dist/index.mjs +12530 -0
  6. package/package.json +64 -62
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -294
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -245
  13. package/accordion/Accordion.stories.tsx +0 -306
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -156
  51. package/button/Button.stories.tsx +0 -283
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -208
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -161
  70. package/chip/Chip.stories.tsx +0 -119
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.js +0 -22
  86. package/common/variables.js +0 -1512
  87. package/date-input/Calendar.d.ts +0 -4
  88. package/date-input/Calendar.js +0 -258
  89. package/date-input/DateInput.d.ts +0 -4
  90. package/date-input/DateInput.js +0 -227
  91. package/date-input/DateInput.stories.tsx +0 -151
  92. package/date-input/DateInput.test.js +0 -752
  93. package/date-input/DatePicker.d.ts +0 -4
  94. package/date-input/DatePicker.js +0 -160
  95. package/date-input/YearPicker.d.ts +0 -4
  96. package/date-input/YearPicker.js +0 -115
  97. package/date-input/types.d.ts +0 -160
  98. package/date-input/types.js +0 -5
  99. package/dialog/Dialog.d.ts +0 -4
  100. package/dialog/Dialog.js +0 -162
  101. package/dialog/Dialog.stories.tsx +0 -267
  102. package/dialog/Dialog.test.js +0 -70
  103. package/dialog/types.d.ts +0 -44
  104. package/dialog/types.js +0 -5
  105. package/dropdown/Dropdown.d.ts +0 -4
  106. package/dropdown/Dropdown.js +0 -391
  107. package/dropdown/Dropdown.stories.tsx +0 -312
  108. package/dropdown/Dropdown.test.js +0 -585
  109. package/dropdown/DropdownMenu.d.ts +0 -4
  110. package/dropdown/DropdownMenu.js +0 -80
  111. package/dropdown/DropdownMenuItem.d.ts +0 -4
  112. package/dropdown/DropdownMenuItem.js +0 -92
  113. package/dropdown/types.d.ts +0 -100
  114. package/dropdown/types.js +0 -5
  115. package/file-input/FileInput.d.ts +0 -4
  116. package/file-input/FileInput.js +0 -551
  117. package/file-input/FileInput.stories.tsx +0 -535
  118. package/file-input/FileInput.test.js +0 -498
  119. package/file-input/FileItem.d.ts +0 -4
  120. package/file-input/FileItem.js +0 -161
  121. package/file-input/types.d.ts +0 -129
  122. package/file-input/types.js +0 -5
  123. package/flex/Flex.d.ts +0 -4
  124. package/flex/Flex.js +0 -69
  125. package/flex/Flex.stories.tsx +0 -103
  126. package/flex/types.d.ts +0 -32
  127. package/flex/types.js +0 -5
  128. package/footer/Footer.d.ts +0 -4
  129. package/footer/Footer.js +0 -185
  130. package/footer/Footer.stories.tsx +0 -137
  131. package/footer/Footer.test.js +0 -109
  132. package/footer/Icons.d.ts +0 -2
  133. package/footer/Icons.js +0 -77
  134. package/footer/types.d.ts +0 -66
  135. package/footer/types.js +0 -5
  136. package/header/Header.d.ts +0 -7
  137. package/header/Header.js +0 -305
  138. package/header/Header.stories.tsx +0 -172
  139. package/header/Header.test.js +0 -79
  140. package/header/Icons.d.ts +0 -2
  141. package/header/Icons.js +0 -34
  142. package/header/types.d.ts +0 -48
  143. package/header/types.js +0 -5
  144. package/heading/Heading.d.ts +0 -4
  145. package/heading/Heading.js +0 -159
  146. package/heading/Heading.stories.tsx +0 -54
  147. package/heading/Heading.test.js +0 -186
  148. package/heading/types.d.ts +0 -33
  149. package/heading/types.js +0 -5
  150. package/inset/Inset.d.ts +0 -3
  151. package/inset/Inset.js +0 -51
  152. package/inset/Inset.stories.tsx +0 -229
  153. package/inset/types.d.ts +0 -37
  154. package/inset/types.js +0 -5
  155. package/layout/ApplicationLayout.d.ts +0 -20
  156. package/layout/ApplicationLayout.js +0 -171
  157. package/layout/ApplicationLayout.stories.tsx +0 -162
  158. package/layout/Icons.d.ts +0 -5
  159. package/layout/Icons.js +0 -66
  160. package/layout/SidenavContext.d.ts +0 -5
  161. package/layout/SidenavContext.js +0 -19
  162. package/layout/types.d.ts +0 -42
  163. package/layout/types.js +0 -5
  164. package/link/Link.d.ts +0 -4
  165. package/link/Link.js +0 -136
  166. package/link/Link.stories.tsx +0 -193
  167. package/link/Link.test.js +0 -83
  168. package/link/types.d.ts +0 -54
  169. package/link/types.js +0 -5
  170. package/main.d.ts +0 -44
  171. package/main.js +0 -369
  172. package/number-input/NumberInput.d.ts +0 -4
  173. package/number-input/NumberInput.js +0 -76
  174. package/number-input/NumberInput.stories.tsx +0 -115
  175. package/number-input/NumberInput.test.js +0 -542
  176. package/number-input/NumberInputContext.d.ts +0 -4
  177. package/number-input/NumberInputContext.js +0 -19
  178. package/number-input/numberInputContextTypes.d.ts +0 -19
  179. package/number-input/numberInputContextTypes.js +0 -5
  180. package/number-input/types.d.ts +0 -124
  181. package/number-input/types.js +0 -5
  182. package/paginator/Icons.js +0 -66
  183. package/paginator/Paginator.d.ts +0 -4
  184. package/paginator/Paginator.js +0 -171
  185. package/paginator/Paginator.stories.tsx +0 -63
  186. package/paginator/Paginator.test.js +0 -308
  187. package/paginator/types.d.ts +0 -38
  188. package/paginator/types.js +0 -5
  189. package/paragraph/Paragraph.d.ts +0 -6
  190. package/paragraph/Paragraph.js +0 -38
  191. package/paragraph/Paragraph.stories.tsx +0 -44
  192. package/password-input/PasswordInput.d.ts +0 -4
  193. package/password-input/PasswordInput.js +0 -166
  194. package/password-input/PasswordInput.stories.tsx +0 -131
  195. package/password-input/PasswordInput.test.js +0 -181
  196. package/password-input/types.d.ts +0 -110
  197. package/password-input/types.js +0 -5
  198. package/progress-bar/ProgressBar.d.ts +0 -4
  199. package/progress-bar/ProgressBar.js +0 -176
  200. package/progress-bar/ProgressBar.stories.jsx +0 -60
  201. package/progress-bar/ProgressBar.test.js +0 -110
  202. package/progress-bar/types.d.ts +0 -36
  203. package/progress-bar/types.js +0 -5
  204. package/quick-nav/QuickNav.d.ts +0 -4
  205. package/quick-nav/QuickNav.js +0 -117
  206. package/quick-nav/QuickNav.stories.tsx +0 -342
  207. package/quick-nav/types.d.ts +0 -21
  208. package/quick-nav/types.js +0 -5
  209. package/radio-group/Radio.d.ts +0 -4
  210. package/radio-group/Radio.js +0 -156
  211. package/radio-group/RadioGroup.d.ts +0 -4
  212. package/radio-group/RadioGroup.js +0 -283
  213. package/radio-group/RadioGroup.stories.tsx +0 -101
  214. package/radio-group/RadioGroup.test.js +0 -722
  215. package/radio-group/types.d.ts +0 -114
  216. package/radio-group/types.js +0 -5
  217. package/resultsetTable/Icons.d.ts +0 -7
  218. package/resultsetTable/Icons.js +0 -51
  219. package/resultsetTable/ResultsetTable.d.ts +0 -4
  220. package/resultsetTable/ResultsetTable.js +0 -195
  221. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  222. package/resultsetTable/ResultsetTable.test.js +0 -330
  223. package/resultsetTable/types.d.ts +0 -67
  224. package/resultsetTable/types.js +0 -5
  225. package/select/Icons.d.ts +0 -10
  226. package/select/Icons.js +0 -93
  227. package/select/Listbox.d.ts +0 -4
  228. package/select/Listbox.js +0 -198
  229. package/select/Option.d.ts +0 -4
  230. package/select/Option.js +0 -110
  231. package/select/Select.d.ts +0 -4
  232. package/select/Select.js +0 -645
  233. package/select/Select.stories.tsx +0 -624
  234. package/select/Select.test.js +0 -2233
  235. package/select/types.d.ts +0 -210
  236. package/select/types.js +0 -5
  237. package/sidenav/Sidenav.d.ts +0 -10
  238. package/sidenav/Sidenav.js +0 -268
  239. package/sidenav/Sidenav.stories.tsx +0 -180
  240. package/sidenav/Sidenav.test.js +0 -44
  241. package/sidenav/types.d.ts +0 -73
  242. package/sidenav/types.js +0 -5
  243. package/slider/Slider.d.ts +0 -4
  244. package/slider/Slider.js +0 -343
  245. package/slider/Slider.stories.tsx +0 -183
  246. package/slider/Slider.test.js +0 -250
  247. package/slider/types.d.ts +0 -86
  248. package/slider/types.js +0 -5
  249. package/spinner/Spinner.d.ts +0 -4
  250. package/spinner/Spinner.js +0 -250
  251. package/spinner/Spinner.stories.jsx +0 -103
  252. package/spinner/Spinner.test.js +0 -64
  253. package/spinner/types.d.ts +0 -32
  254. package/spinner/types.js +0 -5
  255. package/switch/Switch.d.ts +0 -4
  256. package/switch/Switch.js +0 -262
  257. package/switch/Switch.stories.tsx +0 -138
  258. package/switch/Switch.test.js +0 -225
  259. package/switch/types.d.ts +0 -66
  260. package/switch/types.js +0 -5
  261. package/table/Table.d.ts +0 -4
  262. package/table/Table.js +0 -118
  263. package/table/Table.stories.jsx +0 -277
  264. package/table/Table.test.js +0 -26
  265. package/table/types.d.ts +0 -21
  266. package/table/types.js +0 -5
  267. package/tabs/Tab.d.ts +0 -4
  268. package/tabs/Tab.js +0 -135
  269. package/tabs/Tabs.d.ts +0 -4
  270. package/tabs/Tabs.js +0 -467
  271. package/tabs/Tabs.stories.tsx +0 -186
  272. package/tabs/Tabs.test.js +0 -351
  273. package/tabs/types.d.ts +0 -92
  274. package/tabs/types.js +0 -5
  275. package/tabs-nav/NavTabs.d.ts +0 -8
  276. package/tabs-nav/NavTabs.js +0 -125
  277. package/tabs-nav/NavTabs.stories.tsx +0 -170
  278. package/tabs-nav/NavTabs.test.js +0 -82
  279. package/tabs-nav/Tab.d.ts +0 -4
  280. package/tabs-nav/Tab.js +0 -130
  281. package/tabs-nav/types.d.ts +0 -53
  282. package/tabs-nav/types.js +0 -5
  283. package/tag/Tag.d.ts +0 -4
  284. package/tag/Tag.js +0 -183
  285. package/tag/Tag.stories.tsx +0 -142
  286. package/tag/Tag.test.js +0 -60
  287. package/tag/types.d.ts +0 -69
  288. package/tag/types.js +0 -5
  289. package/text-input/Icons.d.ts +0 -8
  290. package/text-input/Icons.js +0 -60
  291. package/text-input/Suggestion.d.ts +0 -4
  292. package/text-input/Suggestion.js +0 -57
  293. package/text-input/Suggestions.d.ts +0 -4
  294. package/text-input/Suggestions.js +0 -134
  295. package/text-input/TextInput.d.ts +0 -4
  296. package/text-input/TextInput.js +0 -677
  297. package/text-input/TextInput.stories.tsx +0 -481
  298. package/text-input/TextInput.test.js +0 -1624
  299. package/text-input/types.d.ts +0 -197
  300. package/text-input/types.js +0 -5
  301. package/textarea/Textarea.d.ts +0 -4
  302. package/textarea/Textarea.js +0 -277
  303. package/textarea/Textarea.stories.jsx +0 -157
  304. package/textarea/Textarea.test.js +0 -437
  305. package/textarea/types.d.ts +0 -137
  306. package/textarea/types.js +0 -5
  307. package/toggle-group/ToggleGroup.d.ts +0 -4
  308. package/toggle-group/ToggleGroup.js +0 -215
  309. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  310. package/toggle-group/ToggleGroup.test.js +0 -156
  311. package/toggle-group/types.d.ts +0 -105
  312. package/toggle-group/types.js +0 -5
  313. package/typography/Typography.d.ts +0 -4
  314. package/typography/Typography.js +0 -131
  315. package/typography/Typography.stories.tsx +0 -198
  316. package/typography/types.d.ts +0 -18
  317. package/typography/types.js +0 -5
  318. package/useTheme.d.ts +0 -2
  319. package/useTheme.js +0 -22
  320. package/useTranslatedLabels.d.ts +0 -2
  321. package/useTranslatedLabels.js +0 -20
  322. package/wizard/Wizard.d.ts +0 -4
  323. package/wizard/Wizard.js +0 -285
  324. package/wizard/Wizard.stories.tsx +0 -233
  325. package/wizard/Wizard.test.js +0 -141
  326. package/wizard/types.d.ts +0 -65
  327. package/wizard/types.js +0 -5
package/file-input/FileInput.stories.tsx DELETED
@@ -1,535 +0,0 @@
1
- import React from "react";
2
- import DxcFileInput from "./FileInput";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import FileItem from "./FileItem";
6
-
7
- export default {
8
- title: "File input",
9
- component: DxcFileInput,
10
- };
11
-
12
- const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg"
13
-
14
- const file1 = new File(["file1"], "file.pdf", { type: "text/plain" });
15
- const file2 = new File(["file2"], "file2.mp3", {
16
- type: "audio",
17
- });
18
- const file3 = new File(["file3"], "file3.png", {
19
- type: "image/png",
20
- });
21
- const file4 = new File(["file4"], "file4file4file4file4file4file4file4file4file4.mp4", {
22
- type: "video",
23
- });
24
- const file5 = new File(["file5"], "file5file5file5file5file5file5file5file5file5.mp4", {
25
- type: "video",
26
- });
27
-
28
- const fileExample = [
29
- {
30
- file: file1,
31
- },
32
- ];
33
-
34
- const fileExampleError = [
35
- {
36
- error: "Error message",
37
- file: file1,
38
- },
39
- ];
40
-
41
- const filesExamples = [
42
- {
43
- file: file1,
44
- },
45
- {
46
- file: file2,
47
- },
48
- {
49
- file: file3,
50
- preview: picPreview,
51
- },
52
- {
53
- file: file4,
54
- },
55
- {
56
- error: "This error message is a multiline paragraph for testing.",
57
- file: file5,
58
- },
59
- {
60
- error: "Error message",
61
- file: file3,
62
- preview: picPreview,
63
- },
64
- ];
65
-
66
- export const Chromatic = () => (
67
- <>
68
- <Title title="File item states" theme="light" level={2} />
69
- <ExampleContainer pseudoState="pseudo-hover">
70
- <Title title="Hovered" theme="light" level={4} />
71
- <FileItem
72
- fileName="file"
73
- error=""
74
- singleFileMode={false}
75
- showPreview={false}
76
- preview={picPreview}
77
- type="image/png"
78
- onDelete={() => {}}
79
- tabIndex={0}
80
- />
81
- </ExampleContainer>
82
- <ExampleContainer pseudoState="pseudo-focus">
83
- <Title title="Focused" theme="light" level={4} />
84
- <FileItem
85
- fileName="file"
86
- error=""
87
- singleFileMode={false}
88
- showPreview={false}
89
- preview={picPreview}
90
- type="image/png"
91
- onDelete={() => {}}
92
- tabIndex={0}
93
- />
94
- </ExampleContainer>
95
- <ExampleContainer pseudoState="pseudo-active">
96
- <Title title="Actived" theme="light" level={4} />
97
- <FileItem
98
- fileName="file"
99
- error=""
100
- singleFileMode={false}
101
- showPreview={false}
102
- preview={picPreview}
103
- type="image/png"
104
- onDelete={() => {}}
105
- tabIndex={0}
106
- />
107
- </ExampleContainer>
108
- <Title title="File" theme="light" level={2} />
109
- <ExampleContainer>
110
- <Title title="Without label" theme="light" level={4} />
111
- <DxcFileInput value={[]} callbackFile={() => {}} />
112
- </ExampleContainer>
113
- <ExampleContainer>
114
- <Title title="With label" theme="light" level={4} />
115
- <DxcFileInput label="File input" value={[]} callbackFile={() => {}} />
116
- </ExampleContainer>
117
- <ExampleContainer>
118
- <Title title="With label and helper text" theme="light" level={4} />
119
- <DxcFileInput label="File input" helperText="Please select files" value={[]} callbackFile={() => {}} />
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="Single file" theme="light" level={4} />
123
- <DxcFileInput
124
- label="File input"
125
- helperText="Please select files"
126
- value={fileExample}
127
- multiple={false}
128
- callbackFile={() => {}}
129
- />
130
- </ExampleContainer>
131
- <ExampleContainer>
132
- <Title title="Invalid single file" theme="light" level={4} />
133
- <DxcFileInput
134
- label="File input"
135
- helperText="Please select files"
136
- value={fileExampleError}
137
- multiple={false}
138
- callbackFile={() => {}}
139
- />
140
- </ExampleContainer>
141
- <ExampleContainer>
142
- <Title title="Multiple files" theme="light" level={4} />
143
- <DxcFileInput label="File input" helperText="Please select files" value={filesExamples} callbackFile={() => {}} />
144
- </ExampleContainer>
145
- <ExampleContainer>
146
- <Title title="Show preview" theme="light" level={4} />
147
- <DxcFileInput
148
- label="File input"
149
- helperText="Please select files"
150
- value={filesExamples}
151
- callbackFile={() => {}}
152
- showPreview
153
- />
154
- </ExampleContainer>
155
- <ExampleContainer>
156
- <Title title="Disabled" theme="light" level={4} />
157
- <DxcFileInput label="File input" helperText="Please select files" disabled value={[]} callbackFile={() => {}} />
158
- </ExampleContainer>
159
- <Title title="Margins" theme="light" level={3} />
160
- <ExampleContainer>
161
- <Title title="Xxsmall margin" theme="light" level={4} />
162
- <DxcFileInput
163
- label="File input"
164
- helperText="Please select files"
165
- value={fileExample}
166
- callbackFile={() => {}}
167
- margin="xxsmall"
168
- />
169
- </ExampleContainer>
170
- <ExampleContainer>
171
- <Title title="Xsmall margin" theme="light" level={4} />
172
- <DxcFileInput
173
- label="File input"
174
- helperText="Please select files"
175
- value={fileExample}
176
- callbackFile={() => {}}
177
- margin="xsmall"
178
- />
179
- </ExampleContainer>
180
- <ExampleContainer>
181
- <Title title="Small margin" theme="light" level={4} />
182
- <DxcFileInput
183
- label="File input"
184
- helperText="Please select files"
185
- value={fileExample}
186
- callbackFile={() => {}}
187
- margin="small"
188
- />
189
- </ExampleContainer>
190
- <ExampleContainer>
191
- <Title title="Medium margin" theme="light" level={4} />
192
- <DxcFileInput
193
- label="File input"
194
- helperText="Please select files"
195
- value={fileExample}
196
- callbackFile={() => {}}
197
- margin="medium"
198
- />
199
- </ExampleContainer>
200
- <ExampleContainer>
201
- <Title title="Large margin" theme="light" level={4} />
202
- <DxcFileInput
203
- label="File input"
204
- helperText="Please select files"
205
- value={fileExample}
206
- callbackFile={() => {}}
207
- margin="large"
208
- />
209
- </ExampleContainer>
210
- <ExampleContainer>
211
- <Title title="Xlarge margin" theme="light" level={4} />
212
- <DxcFileInput
213
- label="File input"
214
- helperText="Please select files"
215
- value={fileExample}
216
- callbackFile={() => {}}
217
- margin="xlarge"
218
- />
219
- </ExampleContainer>
220
- <ExampleContainer>
221
- <Title title="Xxlarge margin" theme="light" level={4} />
222
- <DxcFileInput
223
- label="File input"
224
- helperText="Please select files"
225
- value={fileExample}
226
- callbackFile={() => {}}
227
- margin="xxlarge"
228
- />
229
- </ExampleContainer>
230
- <Title title="Filedrop" theme="light" level={2} />
231
- <ExampleContainer>
232
- <Title title="Without label" theme="light" level={4} />
233
- <DxcFileInput mode="filedrop" value={[]} callbackFile={() => {}} />
234
- </ExampleContainer>
235
- <ExampleContainer>
236
- <Title title="With label" theme="light" level={4} />
237
- <DxcFileInput mode="filedrop" label="File input" value={[]} callbackFile={() => {}} />
238
- </ExampleContainer>
239
- <ExampleContainer>
240
- <Title title="With label, helper text and ellipsis" theme="light" level={4} />
241
- <DxcFileInput
242
- mode="filedrop"
243
- label="File input"
244
- dropAreaLabel="or drop files or drop files or drop files or drop files or drop files"
245
- helperText="Please select files"
246
- value={[]}
247
- callbackFile={() => {}}
248
- />
249
- </ExampleContainer>
250
- <ExampleContainer>
251
- <Title title="Single file" theme="light" level={4} />
252
- <DxcFileInput
253
- mode="filedrop"
254
- label="File input"
255
- helperText="Please select files"
256
- value={fileExample}
257
- multiple={false}
258
- callbackFile={() => {}}
259
- />
260
- </ExampleContainer>
261
- <ExampleContainer>
262
- <Title title="Invalid single file" theme="light" level={4} />
263
- <DxcFileInput
264
- mode="filedrop"
265
- label="File input"
266
- helperText="Please select files"
267
- value={fileExampleError}
268
- multiple={false}
269
- callbackFile={() => {}}
270
- />
271
- </ExampleContainer>
272
- <ExampleContainer>
273
- <Title title="Multiple files" theme="light" level={4} />
274
- <DxcFileInput
275
- mode="filedrop"
276
- label="File input"
277
- helperText="Please select files"
278
- value={filesExamples}
279
- callbackFile={() => {}}
280
- />
281
- </ExampleContainer>
282
- <ExampleContainer>
283
- <Title title="Show preview" theme="light" level={4} />
284
- <DxcFileInput
285
- mode="filedrop"
286
- label="File input"
287
- helperText="Please select files"
288
- value={filesExamples}
289
- callbackFile={() => {}}
290
- showPreview
291
- />
292
- </ExampleContainer>
293
- <ExampleContainer>
294
- <Title title="Disabled" theme="light" level={4} />
295
- <DxcFileInput
296
- label="File input"
297
- helperText="Please select files"
298
- mode="filedrop"
299
- disabled
300
- value={[]}
301
- callbackFile={() => {}}
302
- />
303
- </ExampleContainer>
304
- <Title title="Margins" theme="light" level={3} />
305
- <ExampleContainer>
306
- <Title title="Xxsmall margin" theme="light" level={4} />
307
- <DxcFileInput
308
- label="File input"
309
- helperText="Please select files"
310
- value={fileExample}
311
- callbackFile={() => {}}
312
- mode="filedrop"
313
- margin="xxsmall"
314
- />
315
- </ExampleContainer>
316
- <ExampleContainer>
317
- <Title title="Xsmall margin" theme="light" level={4} />
318
- <DxcFileInput
319
- label="File input"
320
- helperText="Please select files"
321
- value={fileExample}
322
- callbackFile={() => {}}
323
- mode="filedrop"
324
- margin="xsmall"
325
- />
326
- </ExampleContainer>
327
- <ExampleContainer>
328
- <Title title="Small margin" theme="light" level={4} />
329
- <DxcFileInput
330
- label="File input"
331
- helperText="Please select files"
332
- value={fileExample}
333
- callbackFile={() => {}}
334
- mode="filedrop"
335
- margin="small"
336
- />
337
- </ExampleContainer>
338
- <ExampleContainer>
339
- <Title title="Medium margin" theme="light" level={4} />
340
- <DxcFileInput
341
- label="File input"
342
- helperText="Please select files"
343
- value={fileExample}
344
- callbackFile={() => {}}
345
- mode="filedrop"
346
- margin="medium"
347
- />
348
- </ExampleContainer>
349
- <ExampleContainer>
350
- <Title title="Large margin" theme="light" level={4} />
351
- <DxcFileInput
352
- label="File input"
353
- helperText="Please select files"
354
- value={fileExample}
355
- callbackFile={() => {}}
356
- mode="filedrop"
357
- margin="large"
358
- />
359
- </ExampleContainer>
360
- <ExampleContainer>
361
- <Title title="Xlarge margin" theme="light" level={4} />
362
- <DxcFileInput
363
- label="File input"
364
- helperText="Please select files"
365
- value={fileExample}
366
- callbackFile={() => {}}
367
- margin="xlarge"
368
- />
369
- </ExampleContainer>
370
- <ExampleContainer>
371
- <Title title="Xxlarge margin" theme="light" level={4} />
372
- <DxcFileInput
373
- label="File input"
374
- helperText="Please select files"
375
- value={fileExample}
376
- callbackFile={() => {}}
377
- mode="filedrop"
378
- margin="xxlarge"
379
- />
380
- </ExampleContainer>
381
- <Title title="Dropzone" theme="light" level={2} />
382
- <ExampleContainer>
383
- <Title title="Without label" theme="light" level={4} />
384
- <DxcFileInput mode="dropzone" value={[]} callbackFile={() => {}} />
385
- </ExampleContainer>
386
- <ExampleContainer>
387
- <Title title="With label" theme="light" level={4} />
388
- <DxcFileInput label="File input" mode="dropzone" value={[]} callbackFile={() => {}} />
389
- </ExampleContainer>
390
- <ExampleContainer>
391
- <Title title="With label, helper text and ellipsis" theme="light" level={4} />
392
- <DxcFileInput
393
- label="File input"
394
- helperText="Please select files"
395
- mode="dropzone"
396
- dropAreaLabel="or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files or drop files"
397
- value={[]}
398
- callbackFile={() => {}}
399
- />
400
- </ExampleContainer>
401
- <ExampleContainer>
402
- <Title title="Single file" theme="light" level={4} />
403
- <DxcFileInput
404
- label="File input"
405
- helperText="Please select files"
406
- mode="dropzone"
407
- value={fileExample}
408
- callbackFile={() => {}}
409
- multiple={false}
410
- />
411
- </ExampleContainer>
412
- <ExampleContainer>
413
- <Title title="Invalid single file" theme="light" level={4} />
414
- <DxcFileInput
415
- label="File input"
416
- helperText="Please select files"
417
- mode="dropzone"
418
- value={fileExampleError}
419
- callbackFile={() => {}}
420
- multiple={false}
421
- />
422
- </ExampleContainer>
423
- <ExampleContainer>
424
- <Title title="Multiple files" theme="light" level={4} />
425
- <DxcFileInput
426
- mode="dropzone"
427
- label="File input"
428
- helperText="Please select files"
429
- value={filesExamples}
430
- callbackFile={() => {}}
431
- />
432
- </ExampleContainer>
433
- <ExampleContainer>
434
- <Title title="Show preview" theme="light" level={4} />
435
- <DxcFileInput
436
- mode="dropzone"
437
- label="File input"
438
- helperText="Please select files"
439
- value={filesExamples}
440
- callbackFile={() => {}}
441
- showPreview
442
- />
443
- </ExampleContainer>
444
- <ExampleContainer>
445
- <Title title="Disabled" theme="light" level={4} />
446
- <DxcFileInput
447
- label="File input"
448
- helperText="Please select files"
449
- mode="dropzone"
450
- disabled
451
- value={[]}
452
- callbackFile={() => {}}
453
- />
454
- </ExampleContainer>
455
- <Title title="Margins" theme="light" level={3} />
456
- <ExampleContainer>
457
- <Title title="Xxsmall margin" theme="light" level={4} />
458
- <DxcFileInput
459
- label="File input"
460
- helperText="Please select files"
461
- value={fileExample}
462
- callbackFile={() => {}}
463
- mode="dropzone"
464
- margin="xxsmall"
465
- />
466
- </ExampleContainer>
467
- <ExampleContainer>
468
- <Title title="Xsmall margin" theme="light" level={4} />
469
- <DxcFileInput
470
- label="File input"
471
- helperText="Please select files"
472
- value={fileExample}
473
- callbackFile={() => {}}
474
- mode="dropzone"
475
- margin="xsmall"
476
- />
477
- </ExampleContainer>
478
- <ExampleContainer>
479
- <Title title="Small margin" theme="light" level={4} />
480
- <DxcFileInput
481
- label="File input"
482
- helperText="Please select files"
483
- value={fileExample}
484
- callbackFile={() => {}}
485
- mode="dropzone"
486
- margin="small"
487
- />
488
- </ExampleContainer>
489
- <ExampleContainer>
490
- <Title title="Medium margin" theme="light" level={4} />
491
- <DxcFileInput
492
- label="File input"
493
- helperText="Please select files"
494
- value={fileExample}
495
- callbackFile={() => {}}
496
- mode="dropzone"
497
- margin="medium"
498
- />
499
- </ExampleContainer>
500
- <ExampleContainer>
501
- <Title title="Large margin" theme="light" level={4} />
502
- <DxcFileInput
503
- label="File input"
504
- helperText="Please select files"
505
- value={fileExample}
506
- callbackFile={() => {}}
507
- mode="dropzone"
508
- margin="large"
509
- />
510
- </ExampleContainer>
511
- <ExampleContainer>
512
- <Title title="Xlarge margin" theme="light" level={4} />
513
- <DxcFileInput
514
- label="File input"
515
- helperText="Please select files"
516
- value={fileExample}
517
- callbackFile={() => {}}
518
- mode="dropzone"
519
- margin="xlarge"
520
- />
521
- </ExampleContainer>
522
- <ExampleContainer>
523
- <Title title="Xxlarge margin" theme="light" level={4} />
524
- <DxcFileInput
525
- label="File input"
526
- helperText="Please select files"
527
- value={fileExample}
528
- callbackFile={() => {}}
529
- mode="dropzone"
530
- margin="xxlarge"
531
- />
532
- <hr />
533
- </ExampleContainer>
534
- </>
535
- );