@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5b16c7e

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 (328) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3861 -0
  3. package/dist/index.d.ts +3861 -0
  4. package/dist/index.js +13819 -0
  5. package/dist/index.mjs +13732 -0
  6. package/package.json +86 -67
  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 -239
  13. package/accordion/Accordion.stories.tsx +0 -346
  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 -154
  51. package/button/Button.stories.tsx +0 -334
  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 -149
  70. package/chip/Chip.stories.tsx +0 -151
  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 -389
  107. package/dropdown/Dropdown.stories.tsx +0 -320
  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.d.ts +0 -5
  183. package/paginator/Icons.js +0 -54
  184. package/paginator/Paginator.d.ts +0 -4
  185. package/paginator/Paginator.js +0 -165
  186. package/paginator/Paginator.stories.tsx +0 -63
  187. package/paginator/Paginator.test.js +0 -308
  188. package/paginator/types.d.ts +0 -38
  189. package/paginator/types.js +0 -5
  190. package/paragraph/Paragraph.d.ts +0 -6
  191. package/paragraph/Paragraph.js +0 -38
  192. package/paragraph/Paragraph.stories.tsx +0 -44
  193. package/password-input/PasswordInput.d.ts +0 -4
  194. package/password-input/PasswordInput.js +0 -166
  195. package/password-input/PasswordInput.stories.tsx +0 -131
  196. package/password-input/PasswordInput.test.js +0 -181
  197. package/password-input/types.d.ts +0 -110
  198. package/password-input/types.js +0 -5
  199. package/progress-bar/ProgressBar.d.ts +0 -4
  200. package/progress-bar/ProgressBar.js +0 -176
  201. package/progress-bar/ProgressBar.stories.jsx +0 -60
  202. package/progress-bar/ProgressBar.test.js +0 -110
  203. package/progress-bar/types.d.ts +0 -36
  204. package/progress-bar/types.js +0 -5
  205. package/quick-nav/QuickNav.d.ts +0 -4
  206. package/quick-nav/QuickNav.js +0 -117
  207. package/quick-nav/QuickNav.stories.tsx +0 -342
  208. package/quick-nav/types.d.ts +0 -21
  209. package/quick-nav/types.js +0 -5
  210. package/radio-group/Radio.d.ts +0 -4
  211. package/radio-group/Radio.js +0 -156
  212. package/radio-group/RadioGroup.d.ts +0 -4
  213. package/radio-group/RadioGroup.js +0 -283
  214. package/radio-group/RadioGroup.stories.tsx +0 -101
  215. package/radio-group/RadioGroup.test.js +0 -722
  216. package/radio-group/types.d.ts +0 -114
  217. package/radio-group/types.js +0 -5
  218. package/resultsetTable/Icons.d.ts +0 -7
  219. package/resultsetTable/Icons.js +0 -51
  220. package/resultsetTable/ResultsetTable.d.ts +0 -4
  221. package/resultsetTable/ResultsetTable.js +0 -195
  222. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  223. package/resultsetTable/ResultsetTable.test.js +0 -330
  224. package/resultsetTable/types.d.ts +0 -67
  225. package/resultsetTable/types.js +0 -5
  226. package/select/Icons.d.ts +0 -10
  227. package/select/Icons.js +0 -93
  228. package/select/Listbox.d.ts +0 -4
  229. package/select/Listbox.js +0 -198
  230. package/select/Option.d.ts +0 -4
  231. package/select/Option.js +0 -108
  232. package/select/Select.d.ts +0 -4
  233. package/select/Select.js +0 -645
  234. package/select/Select.stories.tsx +0 -683
  235. package/select/Select.test.js +0 -2233
  236. package/select/types.d.ts +0 -210
  237. package/select/types.js +0 -5
  238. package/sidenav/Sidenav.d.ts +0 -10
  239. package/sidenav/Sidenav.js +0 -266
  240. package/sidenav/Sidenav.stories.tsx +0 -189
  241. package/sidenav/Sidenav.test.js +0 -44
  242. package/sidenav/types.d.ts +0 -73
  243. package/sidenav/types.js +0 -5
  244. package/slider/Slider.d.ts +0 -4
  245. package/slider/Slider.js +0 -343
  246. package/slider/Slider.stories.tsx +0 -183
  247. package/slider/Slider.test.js +0 -250
  248. package/slider/types.d.ts +0 -86
  249. package/slider/types.js +0 -5
  250. package/spinner/Spinner.d.ts +0 -4
  251. package/spinner/Spinner.js +0 -250
  252. package/spinner/Spinner.stories.jsx +0 -103
  253. package/spinner/Spinner.test.js +0 -64
  254. package/spinner/types.d.ts +0 -32
  255. package/spinner/types.js +0 -5
  256. package/switch/Switch.d.ts +0 -4
  257. package/switch/Switch.js +0 -262
  258. package/switch/Switch.stories.tsx +0 -138
  259. package/switch/Switch.test.js +0 -225
  260. package/switch/types.d.ts +0 -66
  261. package/switch/types.js +0 -5
  262. package/table/Table.d.ts +0 -4
  263. package/table/Table.js +0 -118
  264. package/table/Table.stories.jsx +0 -277
  265. package/table/Table.test.js +0 -26
  266. package/table/types.d.ts +0 -21
  267. package/table/types.js +0 -5
  268. package/tabs/Tab.d.ts +0 -4
  269. package/tabs/Tab.js +0 -133
  270. package/tabs/Tabs.d.ts +0 -4
  271. package/tabs/Tabs.js +0 -467
  272. package/tabs/Tabs.stories.tsx +0 -188
  273. package/tabs/Tabs.test.js +0 -351
  274. package/tabs/types.d.ts +0 -92
  275. package/tabs/types.js +0 -5
  276. package/tabs-nav/NavTabs.d.ts +0 -8
  277. package/tabs-nav/NavTabs.js +0 -125
  278. package/tabs-nav/NavTabs.stories.tsx +0 -172
  279. package/tabs-nav/NavTabs.test.js +0 -82
  280. package/tabs-nav/Tab.d.ts +0 -4
  281. package/tabs-nav/Tab.js +0 -128
  282. package/tabs-nav/types.d.ts +0 -53
  283. package/tabs-nav/types.js +0 -5
  284. package/tag/Tag.d.ts +0 -4
  285. package/tag/Tag.js +0 -183
  286. package/tag/Tag.stories.tsx +0 -142
  287. package/tag/Tag.test.js +0 -60
  288. package/tag/types.d.ts +0 -69
  289. package/tag/types.js +0 -5
  290. package/text-input/Icons.d.ts +0 -8
  291. package/text-input/Icons.js +0 -60
  292. package/text-input/Suggestion.d.ts +0 -4
  293. package/text-input/Suggestion.js +0 -84
  294. package/text-input/Suggestions.d.ts +0 -4
  295. package/text-input/Suggestions.js +0 -134
  296. package/text-input/TextInput.d.ts +0 -4
  297. package/text-input/TextInput.js +0 -673
  298. package/text-input/TextInput.stories.tsx +0 -500
  299. package/text-input/TextInput.test.js +0 -1724
  300. package/text-input/types.d.ts +0 -197
  301. package/text-input/types.js +0 -5
  302. package/textarea/Textarea.d.ts +0 -4
  303. package/textarea/Textarea.js +0 -277
  304. package/textarea/Textarea.stories.jsx +0 -157
  305. package/textarea/Textarea.test.js +0 -437
  306. package/textarea/types.d.ts +0 -137
  307. package/textarea/types.js +0 -5
  308. package/toggle-group/ToggleGroup.d.ts +0 -4
  309. package/toggle-group/ToggleGroup.js +0 -215
  310. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  311. package/toggle-group/ToggleGroup.test.js +0 -156
  312. package/toggle-group/types.d.ts +0 -105
  313. package/toggle-group/types.js +0 -5
  314. package/typography/Typography.d.ts +0 -4
  315. package/typography/Typography.js +0 -131
  316. package/typography/Typography.stories.tsx +0 -198
  317. package/typography/types.d.ts +0 -18
  318. package/typography/types.js +0 -5
  319. package/useTheme.d.ts +0 -2
  320. package/useTheme.js +0 -22
  321. package/useTranslatedLabels.d.ts +0 -2
  322. package/useTranslatedLabels.js +0 -20
  323. package/wizard/Wizard.d.ts +0 -4
  324. package/wizard/Wizard.js +0 -285
  325. package/wizard/Wizard.stories.tsx +0 -233
  326. package/wizard/Wizard.test.js +0 -141
  327. package/wizard/types.d.ts +0 -65
  328. 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
- );