@dxc-technology/halstack-react 0.0.0-a062293 → 0.0.0-a0b140b

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 (330) 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 +13814 -0
  5. package/dist/index.mjs +13727 -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 -246
  89. package/date-input/DateInput.d.ts +0 -4
  90. package/date-input/DateInput.js +0 -269
  91. package/date-input/DateInput.stories.tsx +0 -237
  92. package/date-input/DateInput.test.js +0 -835
  93. package/date-input/DatePicker.d.ts +0 -4
  94. package/date-input/DatePicker.js +0 -132
  95. package/date-input/Icons.d.ts +0 -6
  96. package/date-input/Icons.js +0 -75
  97. package/date-input/YearPicker.d.ts +0 -4
  98. package/date-input/YearPicker.js +0 -116
  99. package/date-input/types.d.ts +0 -158
  100. package/date-input/types.js +0 -5
  101. package/dialog/Dialog.d.ts +0 -4
  102. package/dialog/Dialog.js +0 -162
  103. package/dialog/Dialog.stories.tsx +0 -267
  104. package/dialog/Dialog.test.js +0 -70
  105. package/dialog/types.d.ts +0 -44
  106. package/dialog/types.js +0 -5
  107. package/dropdown/Dropdown.d.ts +0 -4
  108. package/dropdown/Dropdown.js +0 -389
  109. package/dropdown/Dropdown.stories.tsx +0 -320
  110. package/dropdown/Dropdown.test.js +0 -585
  111. package/dropdown/DropdownMenu.d.ts +0 -4
  112. package/dropdown/DropdownMenu.js +0 -80
  113. package/dropdown/DropdownMenuItem.d.ts +0 -4
  114. package/dropdown/DropdownMenuItem.js +0 -92
  115. package/dropdown/types.d.ts +0 -100
  116. package/dropdown/types.js +0 -5
  117. package/file-input/FileInput.d.ts +0 -4
  118. package/file-input/FileInput.js +0 -551
  119. package/file-input/FileInput.stories.tsx +0 -535
  120. package/file-input/FileInput.test.js +0 -498
  121. package/file-input/FileItem.d.ts +0 -4
  122. package/file-input/FileItem.js +0 -161
  123. package/file-input/types.d.ts +0 -129
  124. package/file-input/types.js +0 -5
  125. package/flex/Flex.d.ts +0 -4
  126. package/flex/Flex.js +0 -69
  127. package/flex/Flex.stories.tsx +0 -103
  128. package/flex/types.d.ts +0 -32
  129. package/flex/types.js +0 -5
  130. package/footer/Footer.d.ts +0 -4
  131. package/footer/Footer.js +0 -185
  132. package/footer/Footer.stories.tsx +0 -137
  133. package/footer/Footer.test.js +0 -109
  134. package/footer/Icons.d.ts +0 -2
  135. package/footer/Icons.js +0 -77
  136. package/footer/types.d.ts +0 -66
  137. package/footer/types.js +0 -5
  138. package/header/Header.d.ts +0 -7
  139. package/header/Header.js +0 -305
  140. package/header/Header.stories.tsx +0 -172
  141. package/header/Header.test.js +0 -79
  142. package/header/Icons.d.ts +0 -2
  143. package/header/Icons.js +0 -34
  144. package/header/types.d.ts +0 -48
  145. package/header/types.js +0 -5
  146. package/heading/Heading.d.ts +0 -4
  147. package/heading/Heading.js +0 -159
  148. package/heading/Heading.stories.tsx +0 -54
  149. package/heading/Heading.test.js +0 -186
  150. package/heading/types.d.ts +0 -33
  151. package/heading/types.js +0 -5
  152. package/inset/Inset.d.ts +0 -3
  153. package/inset/Inset.js +0 -51
  154. package/inset/Inset.stories.tsx +0 -229
  155. package/inset/types.d.ts +0 -37
  156. package/inset/types.js +0 -5
  157. package/layout/ApplicationLayout.d.ts +0 -20
  158. package/layout/ApplicationLayout.js +0 -171
  159. package/layout/ApplicationLayout.stories.tsx +0 -162
  160. package/layout/Icons.d.ts +0 -5
  161. package/layout/Icons.js +0 -66
  162. package/layout/SidenavContext.d.ts +0 -5
  163. package/layout/SidenavContext.js +0 -19
  164. package/layout/types.d.ts +0 -42
  165. package/layout/types.js +0 -5
  166. package/link/Link.d.ts +0 -4
  167. package/link/Link.js +0 -136
  168. package/link/Link.stories.tsx +0 -193
  169. package/link/Link.test.js +0 -83
  170. package/link/types.d.ts +0 -54
  171. package/link/types.js +0 -5
  172. package/main.d.ts +0 -44
  173. package/main.js +0 -369
  174. package/number-input/NumberInput.d.ts +0 -4
  175. package/number-input/NumberInput.js +0 -76
  176. package/number-input/NumberInput.stories.tsx +0 -115
  177. package/number-input/NumberInput.test.js +0 -542
  178. package/number-input/NumberInputContext.d.ts +0 -4
  179. package/number-input/NumberInputContext.js +0 -19
  180. package/number-input/numberInputContextTypes.d.ts +0 -19
  181. package/number-input/numberInputContextTypes.js +0 -5
  182. package/number-input/types.d.ts +0 -124
  183. package/number-input/types.js +0 -5
  184. package/paginator/Icons.d.ts +0 -5
  185. package/paginator/Icons.js +0 -54
  186. package/paginator/Paginator.d.ts +0 -4
  187. package/paginator/Paginator.js +0 -165
  188. package/paginator/Paginator.stories.tsx +0 -63
  189. package/paginator/Paginator.test.js +0 -315
  190. package/paginator/types.d.ts +0 -38
  191. package/paginator/types.js +0 -5
  192. package/paragraph/Paragraph.d.ts +0 -6
  193. package/paragraph/Paragraph.js +0 -38
  194. package/paragraph/Paragraph.stories.tsx +0 -44
  195. package/password-input/PasswordInput.d.ts +0 -4
  196. package/password-input/PasswordInput.js +0 -166
  197. package/password-input/PasswordInput.stories.tsx +0 -131
  198. package/password-input/PasswordInput.test.js +0 -181
  199. package/password-input/types.d.ts +0 -110
  200. package/password-input/types.js +0 -5
  201. package/progress-bar/ProgressBar.d.ts +0 -4
  202. package/progress-bar/ProgressBar.js +0 -176
  203. package/progress-bar/ProgressBar.stories.jsx +0 -60
  204. package/progress-bar/ProgressBar.test.js +0 -110
  205. package/progress-bar/types.d.ts +0 -36
  206. package/progress-bar/types.js +0 -5
  207. package/quick-nav/QuickNav.d.ts +0 -4
  208. package/quick-nav/QuickNav.js +0 -117
  209. package/quick-nav/QuickNav.stories.tsx +0 -342
  210. package/quick-nav/types.d.ts +0 -21
  211. package/quick-nav/types.js +0 -5
  212. package/radio-group/Radio.d.ts +0 -4
  213. package/radio-group/Radio.js +0 -156
  214. package/radio-group/RadioGroup.d.ts +0 -4
  215. package/radio-group/RadioGroup.js +0 -283
  216. package/radio-group/RadioGroup.stories.tsx +0 -101
  217. package/radio-group/RadioGroup.test.js +0 -722
  218. package/radio-group/types.d.ts +0 -114
  219. package/radio-group/types.js +0 -5
  220. package/resultsetTable/Icons.d.ts +0 -7
  221. package/resultsetTable/Icons.js +0 -51
  222. package/resultsetTable/ResultsetTable.d.ts +0 -4
  223. package/resultsetTable/ResultsetTable.js +0 -195
  224. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  225. package/resultsetTable/ResultsetTable.test.js +0 -325
  226. package/resultsetTable/types.d.ts +0 -67
  227. package/resultsetTable/types.js +0 -5
  228. package/select/Icons.d.ts +0 -10
  229. package/select/Icons.js +0 -93
  230. package/select/Listbox.d.ts +0 -4
  231. package/select/Listbox.js +0 -169
  232. package/select/Option.d.ts +0 -4
  233. package/select/Option.js +0 -97
  234. package/select/Select.d.ts +0 -4
  235. package/select/Select.js +0 -664
  236. package/select/Select.stories.tsx +0 -670
  237. package/select/Select.test.js +0 -2228
  238. package/select/types.d.ts +0 -210
  239. package/select/types.js +0 -5
  240. package/sidenav/Sidenav.d.ts +0 -10
  241. package/sidenav/Sidenav.js +0 -266
  242. package/sidenav/Sidenav.stories.tsx +0 -189
  243. package/sidenav/Sidenav.test.js +0 -44
  244. package/sidenav/types.d.ts +0 -73
  245. package/sidenav/types.js +0 -5
  246. package/slider/Slider.d.ts +0 -4
  247. package/slider/Slider.js +0 -343
  248. package/slider/Slider.stories.tsx +0 -183
  249. package/slider/Slider.test.js +0 -250
  250. package/slider/types.d.ts +0 -86
  251. package/slider/types.js +0 -5
  252. package/spinner/Spinner.d.ts +0 -4
  253. package/spinner/Spinner.js +0 -250
  254. package/spinner/Spinner.stories.jsx +0 -103
  255. package/spinner/Spinner.test.js +0 -64
  256. package/spinner/types.d.ts +0 -32
  257. package/spinner/types.js +0 -5
  258. package/switch/Switch.d.ts +0 -4
  259. package/switch/Switch.js +0 -262
  260. package/switch/Switch.stories.tsx +0 -138
  261. package/switch/Switch.test.js +0 -225
  262. package/switch/types.d.ts +0 -66
  263. package/switch/types.js +0 -5
  264. package/table/Table.d.ts +0 -4
  265. package/table/Table.js +0 -118
  266. package/table/Table.stories.jsx +0 -277
  267. package/table/Table.test.js +0 -26
  268. package/table/types.d.ts +0 -21
  269. package/table/types.js +0 -5
  270. package/tabs/Tab.d.ts +0 -4
  271. package/tabs/Tab.js +0 -133
  272. package/tabs/Tabs.d.ts +0 -4
  273. package/tabs/Tabs.js +0 -467
  274. package/tabs/Tabs.stories.tsx +0 -188
  275. package/tabs/Tabs.test.js +0 -351
  276. package/tabs/types.d.ts +0 -92
  277. package/tabs/types.js +0 -5
  278. package/tabs-nav/NavTabs.d.ts +0 -8
  279. package/tabs-nav/NavTabs.js +0 -125
  280. package/tabs-nav/NavTabs.stories.tsx +0 -172
  281. package/tabs-nav/NavTabs.test.js +0 -82
  282. package/tabs-nav/Tab.d.ts +0 -4
  283. package/tabs-nav/Tab.js +0 -128
  284. package/tabs-nav/types.d.ts +0 -53
  285. package/tabs-nav/types.js +0 -5
  286. package/tag/Tag.d.ts +0 -4
  287. package/tag/Tag.js +0 -183
  288. package/tag/Tag.stories.tsx +0 -142
  289. package/tag/Tag.test.js +0 -60
  290. package/tag/types.d.ts +0 -69
  291. package/tag/types.js +0 -5
  292. package/text-input/Icons.d.ts +0 -8
  293. package/text-input/Icons.js +0 -60
  294. package/text-input/Suggestion.d.ts +0 -4
  295. package/text-input/Suggestion.js +0 -84
  296. package/text-input/Suggestions.d.ts +0 -4
  297. package/text-input/Suggestions.js +0 -134
  298. package/text-input/TextInput.d.ts +0 -4
  299. package/text-input/TextInput.js +0 -673
  300. package/text-input/TextInput.stories.tsx +0 -501
  301. package/text-input/TextInput.test.js +0 -1724
  302. package/text-input/types.d.ts +0 -197
  303. package/text-input/types.js +0 -5
  304. package/textarea/Textarea.d.ts +0 -4
  305. package/textarea/Textarea.js +0 -277
  306. package/textarea/Textarea.stories.jsx +0 -157
  307. package/textarea/Textarea.test.js +0 -437
  308. package/textarea/types.d.ts +0 -137
  309. package/textarea/types.js +0 -5
  310. package/toggle-group/ToggleGroup.d.ts +0 -4
  311. package/toggle-group/ToggleGroup.js +0 -215
  312. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  313. package/toggle-group/ToggleGroup.test.js +0 -156
  314. package/toggle-group/types.d.ts +0 -105
  315. package/toggle-group/types.js +0 -5
  316. package/typography/Typography.d.ts +0 -4
  317. package/typography/Typography.js +0 -131
  318. package/typography/Typography.stories.tsx +0 -198
  319. package/typography/types.d.ts +0 -18
  320. package/typography/types.js +0 -5
  321. package/useTheme.d.ts +0 -2
  322. package/useTheme.js +0 -22
  323. package/useTranslatedLabels.d.ts +0 -2
  324. package/useTranslatedLabels.js +0 -20
  325. package/wizard/Wizard.d.ts +0 -4
  326. package/wizard/Wizard.js +0 -285
  327. package/wizard/Wizard.stories.tsx +0 -233
  328. package/wizard/Wizard.test.js +0 -141
  329. package/wizard/types.d.ts +0 -65
  330. 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
- );