@dxc-technology/halstack-react 0.0.0-b1729d7 → 0.0.0-b18ba60

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 (680) hide show
  1. package/BackgroundColorContext.d.ts +1 -0
  2. package/BackgroundColorContext.js +30 -0
  3. package/HalstackContext.d.ts +1247 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +28 -47
  6. package/accordion/Accordion.accessibility.test.d.ts +1 -0
  7. package/accordion/Accordion.accessibility.test.js +71 -0
  8. package/accordion/Accordion.d.ts +4 -0
  9. package/accordion/Accordion.js +168 -0
  10. package/accordion/Accordion.stories.tsx +241 -0
  11. package/accordion/Accordion.test.d.ts +1 -0
  12. package/accordion/Accordion.test.js +56 -0
  13. package/accordion/types.d.ts +57 -0
  14. package/accordion/types.js +5 -0
  15. package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
  16. package/accordion-group/AccordionGroup.accessibility.test.js +82 -0
  17. package/accordion-group/AccordionGroup.d.ts +7 -0
  18. package/accordion-group/AccordionGroup.js +101 -0
  19. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  20. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  21. package/accordion-group/AccordionGroup.test.js +94 -0
  22. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  23. package/accordion-group/AccordionGroupAccordion.js +31 -0
  24. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  25. package/accordion-group/AccordionGroupContext.js +8 -0
  26. package/accordion-group/types.d.ts +67 -0
  27. package/accordion-group/types.js +5 -0
  28. package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
  29. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  30. package/action-icon/ActionIcon.d.ts +4 -0
  31. package/action-icon/ActionIcon.js +48 -0
  32. package/action-icon/ActionIcon.stories.tsx +41 -0
  33. package/action-icon/ActionIcon.test.d.ts +1 -0
  34. package/action-icon/ActionIcon.test.js +64 -0
  35. package/action-icon/types.d.ts +26 -0
  36. package/action-icon/types.js +5 -0
  37. package/alert/Alert.accessibility.test.d.ts +1 -0
  38. package/alert/Alert.accessibility.test.js +95 -0
  39. package/alert/Alert.d.ts +4 -0
  40. package/alert/Alert.js +203 -0
  41. package/alert/Alert.stories.tsx +198 -0
  42. package/alert/Alert.test.d.ts +1 -0
  43. package/alert/Alert.test.js +75 -0
  44. package/alert/types.d.ts +49 -0
  45. package/alert/types.js +5 -0
  46. package/badge/Badge.accessibility.test.d.ts +1 -0
  47. package/badge/Badge.accessibility.test.js +129 -0
  48. package/badge/Badge.d.ts +4 -0
  49. package/badge/Badge.js +161 -0
  50. package/badge/Badge.stories.tsx +210 -0
  51. package/badge/Badge.test.d.ts +1 -0
  52. package/badge/Badge.test.js +30 -0
  53. package/badge/types.d.ts +54 -0
  54. package/badge/types.js +5 -0
  55. package/bleed/Bleed.d.ts +3 -0
  56. package/bleed/Bleed.js +43 -0
  57. package/bleed/Bleed.stories.tsx +342 -0
  58. package/bleed/types.d.ts +37 -0
  59. package/bleed/types.js +5 -0
  60. package/box/Box.accessibility.test.d.ts +1 -0
  61. package/box/Box.accessibility.test.js +33 -0
  62. package/box/Box.d.ts +4 -0
  63. package/box/Box.js +75 -0
  64. package/box/Box.stories.tsx +119 -0
  65. package/box/Box.test.d.ts +1 -0
  66. package/box/Box.test.js +13 -0
  67. package/box/types.d.ts +32 -0
  68. package/box/types.js +5 -0
  69. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  70. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  71. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  72. package/breadcrumbs/Breadcrumbs.js +79 -0
  73. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  74. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  75. package/breadcrumbs/Breadcrumbs.test.js +169 -0
  76. package/breadcrumbs/Item.d.ts +4 -0
  77. package/breadcrumbs/Item.js +52 -0
  78. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  79. package/breadcrumbs/dropdownTheme.js +62 -0
  80. package/breadcrumbs/types.d.ts +16 -0
  81. package/breadcrumbs/types.js +5 -0
  82. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  83. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  84. package/bulleted-list/BulletedList.d.ts +7 -0
  85. package/bulleted-list/BulletedList.js +92 -0
  86. package/bulleted-list/BulletedList.stories.tsx +115 -0
  87. package/bulleted-list/types.d.ts +38 -0
  88. package/bulleted-list/types.js +5 -0
  89. package/button/Button.accessibility.test.d.ts +1 -0
  90. package/button/Button.accessibility.test.js +127 -0
  91. package/button/Button.d.ts +4 -0
  92. package/button/Button.js +121 -0
  93. package/button/Button.stories.tsx +325 -0
  94. package/button/Button.test.d.ts +1 -0
  95. package/button/Button.test.js +38 -0
  96. package/button/types.d.ts +57 -0
  97. package/button/types.js +5 -0
  98. package/card/Card.accessibility.test.d.ts +1 -0
  99. package/card/Card.accessibility.test.js +36 -0
  100. package/card/Card.d.ts +4 -0
  101. package/card/Card.js +121 -0
  102. package/card/Card.stories.tsx +171 -0
  103. package/card/Card.test.d.ts +1 -0
  104. package/card/Card.test.js +39 -0
  105. package/card/types.d.ts +62 -0
  106. package/card/types.js +5 -0
  107. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  108. package/checkbox/Checkbox.accessibility.test.js +87 -0
  109. package/checkbox/Checkbox.d.ts +4 -0
  110. package/checkbox/Checkbox.js +212 -0
  111. package/checkbox/Checkbox.stories.tsx +222 -0
  112. package/checkbox/Checkbox.test.d.ts +1 -0
  113. package/checkbox/Checkbox.test.js +199 -0
  114. package/checkbox/types.d.ts +72 -0
  115. package/checkbox/types.js +5 -0
  116. package/chip/Chip.accessibility.test.d.ts +1 -0
  117. package/chip/Chip.accessibility.test.js +69 -0
  118. package/chip/Chip.d.ts +4 -0
  119. package/chip/Chip.js +115 -0
  120. package/chip/Chip.stories.tsx +231 -0
  121. package/chip/Chip.test.d.ts +1 -0
  122. package/chip/Chip.test.js +41 -0
  123. package/chip/types.d.ts +68 -0
  124. package/chip/types.js +5 -0
  125. package/common/coreTokens.d.ts +237 -0
  126. package/common/coreTokens.js +184 -0
  127. package/common/utils.d.ts +1 -0
  128. package/{dist/common → common}/utils.js +6 -12
  129. package/common/variables.d.ts +1390 -0
  130. package/common/variables.js +1262 -0
  131. package/container/Container.d.ts +4 -0
  132. package/container/Container.js +194 -0
  133. package/container/Container.stories.tsx +214 -0
  134. package/container/types.d.ts +74 -0
  135. package/container/types.js +5 -0
  136. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  137. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  138. package/contextual-menu/ContextualMenu.d.ts +5 -0
  139. package/contextual-menu/ContextualMenu.js +88 -0
  140. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  141. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  142. package/contextual-menu/ContextualMenu.test.js +205 -0
  143. package/contextual-menu/GroupItem.d.ts +4 -0
  144. package/contextual-menu/GroupItem.js +67 -0
  145. package/contextual-menu/ItemAction.d.ts +4 -0
  146. package/contextual-menu/ItemAction.js +51 -0
  147. package/contextual-menu/MenuItem.d.ts +4 -0
  148. package/contextual-menu/MenuItem.js +29 -0
  149. package/contextual-menu/SingleItem.d.ts +4 -0
  150. package/contextual-menu/SingleItem.js +38 -0
  151. package/contextual-menu/types.d.ts +58 -0
  152. package/contextual-menu/types.js +5 -0
  153. package/date-input/Calendar.d.ts +4 -0
  154. package/date-input/Calendar.js +214 -0
  155. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  156. package/date-input/DateInput.accessibility.test.js +230 -0
  157. package/date-input/DateInput.d.ts +4 -0
  158. package/date-input/DateInput.js +222 -0
  159. package/date-input/DateInput.stories.tsx +292 -0
  160. package/date-input/DateInput.test.d.ts +1 -0
  161. package/date-input/DateInput.test.js +809 -0
  162. package/date-input/DatePicker.d.ts +4 -0
  163. package/date-input/DatePicker.js +121 -0
  164. package/date-input/YearPicker.d.ts +4 -0
  165. package/date-input/YearPicker.js +100 -0
  166. package/date-input/types.d.ts +164 -0
  167. package/date-input/types.js +5 -0
  168. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  169. package/dialog/Dialog.accessibility.test.js +69 -0
  170. package/dialog/Dialog.d.ts +4 -0
  171. package/dialog/Dialog.js +93 -0
  172. package/dialog/Dialog.stories.tsx +370 -0
  173. package/dialog/Dialog.test.d.ts +1 -0
  174. package/dialog/Dialog.test.js +371 -0
  175. package/dialog/types.d.ts +36 -0
  176. package/dialog/types.js +5 -0
  177. package/divider/Divider.accessibility.test.d.ts +1 -0
  178. package/divider/Divider.accessibility.test.js +33 -0
  179. package/divider/Divider.d.ts +4 -0
  180. package/divider/Divider.js +36 -0
  181. package/divider/Divider.stories.tsx +223 -0
  182. package/divider/Divider.test.d.ts +1 -0
  183. package/divider/Divider.test.js +38 -0
  184. package/divider/types.d.ts +21 -0
  185. package/divider/types.js +5 -0
  186. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  187. package/dropdown/Dropdown.accessibility.test.js +184 -0
  188. package/dropdown/Dropdown.d.ts +4 -0
  189. package/dropdown/Dropdown.js +320 -0
  190. package/dropdown/Dropdown.stories.tsx +427 -0
  191. package/dropdown/Dropdown.test.d.ts +1 -0
  192. package/dropdown/Dropdown.test.js +629 -0
  193. package/dropdown/DropdownMenu.d.ts +4 -0
  194. package/dropdown/DropdownMenu.js +63 -0
  195. package/dropdown/DropdownMenuItem.d.ts +4 -0
  196. package/dropdown/DropdownMenuItem.js +71 -0
  197. package/dropdown/types.d.ts +96 -0
  198. package/dropdown/types.js +5 -0
  199. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  200. package/file-input/FileInput.accessibility.test.js +167 -0
  201. package/file-input/FileInput.d.ts +4 -0
  202. package/file-input/FileInput.js +440 -0
  203. package/file-input/FileInput.stories.tsx +618 -0
  204. package/file-input/FileInput.test.d.ts +1 -0
  205. package/file-input/FileInput.test.js +404 -0
  206. package/file-input/FileItem.d.ts +4 -0
  207. package/file-input/FileItem.js +125 -0
  208. package/file-input/types.d.ts +129 -0
  209. package/file-input/types.js +5 -0
  210. package/flex/Flex.d.ts +4 -0
  211. package/flex/Flex.js +57 -0
  212. package/flex/Flex.stories.tsx +112 -0
  213. package/flex/types.d.ts +97 -0
  214. package/flex/types.js +5 -0
  215. package/footer/Footer.accessibility.test.d.ts +1 -0
  216. package/footer/Footer.accessibility.test.js +125 -0
  217. package/footer/Footer.d.ts +4 -0
  218. package/footer/Footer.js +140 -0
  219. package/footer/Footer.stories.tsx +208 -0
  220. package/footer/Footer.test.d.ts +1 -0
  221. package/footer/Footer.test.js +85 -0
  222. package/footer/Icons.d.ts +3 -0
  223. package/footer/Icons.js +108 -0
  224. package/footer/types.d.ts +64 -0
  225. package/footer/types.js +5 -0
  226. package/grid/Grid.d.ts +7 -0
  227. package/grid/Grid.js +76 -0
  228. package/grid/Grid.stories.tsx +219 -0
  229. package/grid/types.d.ts +115 -0
  230. package/grid/types.js +5 -0
  231. package/header/Header.accessibility.test.d.ts +1 -0
  232. package/header/Header.accessibility.test.js +94 -0
  233. package/header/Header.d.ts +8 -0
  234. package/header/Header.js +210 -0
  235. package/header/Header.stories.tsx +267 -0
  236. package/header/Header.test.d.ts +1 -0
  237. package/header/Header.test.js +66 -0
  238. package/header/Icons.d.ts +2 -0
  239. package/{dist/header → header}/Icons.js +8 -43
  240. package/header/types.d.ts +33 -0
  241. package/header/types.js +5 -0
  242. package/heading/Heading.accessibility.test.d.ts +1 -0
  243. package/heading/Heading.accessibility.test.js +33 -0
  244. package/heading/Heading.d.ts +4 -0
  245. package/{dist/heading → heading}/Heading.js +34 -115
  246. package/heading/Heading.stories.tsx +54 -0
  247. package/heading/Heading.test.d.ts +1 -0
  248. package/heading/Heading.test.js +156 -0
  249. package/heading/types.d.ts +33 -0
  250. package/heading/types.js +5 -0
  251. package/icon/Icon.accessibility.test.d.ts +1 -0
  252. package/icon/Icon.accessibility.test.js +30 -0
  253. package/icon/Icon.d.ts +4 -0
  254. package/icon/Icon.js +33 -0
  255. package/icon/Icon.stories.tsx +28 -0
  256. package/icon/types.d.ts +4 -0
  257. package/icon/types.js +5 -0
  258. package/image/Image.accessibility.test.d.ts +1 -0
  259. package/image/Image.accessibility.test.js +56 -0
  260. package/image/Image.d.ts +4 -0
  261. package/image/Image.js +70 -0
  262. package/image/Image.stories.tsx +129 -0
  263. package/image/types.d.ts +72 -0
  264. package/image/types.js +5 -0
  265. package/inset/Inset.d.ts +3 -0
  266. package/inset/Inset.js +43 -0
  267. package/inset/Inset.stories.tsx +230 -0
  268. package/inset/types.d.ts +37 -0
  269. package/inset/types.js +5 -0
  270. package/layout/ApplicationLayout.d.ts +20 -0
  271. package/layout/ApplicationLayout.js +137 -0
  272. package/layout/ApplicationLayout.stories.tsx +162 -0
  273. package/layout/Icons.d.ts +7 -0
  274. package/layout/Icons.js +48 -0
  275. package/layout/types.d.ts +41 -0
  276. package/layout/types.js +5 -0
  277. package/link/Link.accessibility.test.d.ts +1 -0
  278. package/link/Link.accessibility.test.js +108 -0
  279. package/link/Link.d.ts +4 -0
  280. package/link/Link.js +117 -0
  281. package/link/Link.stories.tsx +253 -0
  282. package/link/Link.test.d.ts +1 -0
  283. package/link/Link.test.js +63 -0
  284. package/link/types.d.ts +54 -0
  285. package/link/types.js +5 -0
  286. package/main.d.ts +50 -0
  287. package/{dist/main.js → main.js} +141 -144
  288. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  289. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  290. package/nav-tabs/NavTabs.d.ts +7 -0
  291. package/nav-tabs/NavTabs.js +108 -0
  292. package/nav-tabs/NavTabs.stories.tsx +294 -0
  293. package/nav-tabs/NavTabs.test.d.ts +1 -0
  294. package/nav-tabs/NavTabs.test.js +77 -0
  295. package/nav-tabs/NavTabsContext.d.ts +3 -0
  296. package/nav-tabs/NavTabsContext.js +8 -0
  297. package/nav-tabs/Tab.d.ts +4 -0
  298. package/nav-tabs/Tab.js +117 -0
  299. package/nav-tabs/types.d.ts +52 -0
  300. package/nav-tabs/types.js +5 -0
  301. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  302. package/number-input/NumberInput.accessibility.test.js +228 -0
  303. package/number-input/NumberInput.d.ts +4 -0
  304. package/number-input/NumberInput.js +86 -0
  305. package/number-input/NumberInput.stories.tsx +131 -0
  306. package/number-input/NumberInput.test.d.ts +1 -0
  307. package/number-input/NumberInput.test.js +989 -0
  308. package/number-input/NumberInputContext.d.ts +3 -0
  309. package/number-input/NumberInputContext.js +8 -0
  310. package/number-input/types.d.ts +136 -0
  311. package/number-input/types.js +5 -0
  312. package/package.json +64 -56
  313. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  314. package/paginator/Paginator.accessibility.test.js +79 -0
  315. package/paginator/Paginator.d.ts +4 -0
  316. package/paginator/Paginator.js +138 -0
  317. package/paginator/Paginator.stories.tsx +87 -0
  318. package/paginator/Paginator.test.d.ts +1 -0
  319. package/paginator/Paginator.test.js +335 -0
  320. package/paginator/types.d.ts +38 -0
  321. package/paginator/types.js +5 -0
  322. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  323. package/paragraph/Paragraph.accessibility.test.js +28 -0
  324. package/paragraph/Paragraph.d.ts +5 -0
  325. package/paragraph/Paragraph.js +22 -0
  326. package/paragraph/Paragraph.stories.tsx +27 -0
  327. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  328. package/password-input/PasswordInput.accessibility.test.js +153 -0
  329. package/password-input/PasswordInput.d.ts +4 -0
  330. package/password-input/PasswordInput.js +97 -0
  331. package/password-input/PasswordInput.stories.tsx +99 -0
  332. package/password-input/PasswordInput.test.d.ts +1 -0
  333. package/password-input/PasswordInput.test.js +198 -0
  334. package/password-input/types.d.ts +111 -0
  335. package/password-input/types.js +5 -0
  336. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  337. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  338. package/progress-bar/ProgressBar.d.ts +4 -0
  339. package/progress-bar/ProgressBar.js +146 -0
  340. package/progress-bar/ProgressBar.stories.tsx +93 -0
  341. package/progress-bar/ProgressBar.test.d.ts +1 -0
  342. package/progress-bar/ProgressBar.test.js +93 -0
  343. package/progress-bar/types.d.ts +37 -0
  344. package/progress-bar/types.js +5 -0
  345. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  346. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  347. package/quick-nav/QuickNav.d.ts +4 -0
  348. package/quick-nav/QuickNav.js +94 -0
  349. package/quick-nav/QuickNav.stories.tsx +356 -0
  350. package/quick-nav/types.d.ts +21 -0
  351. package/quick-nav/types.js +5 -0
  352. package/radio-group/Radio.d.ts +4 -0
  353. package/radio-group/Radio.js +121 -0
  354. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  355. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  356. package/radio-group/RadioGroup.d.ts +4 -0
  357. package/radio-group/RadioGroup.js +233 -0
  358. package/radio-group/RadioGroup.stories.tsx +214 -0
  359. package/radio-group/RadioGroup.test.d.ts +1 -0
  360. package/radio-group/RadioGroup.test.js +754 -0
  361. package/radio-group/types.d.ts +114 -0
  362. package/radio-group/types.js +5 -0
  363. package/resultset-table/Icons.d.ts +7 -0
  364. package/resultset-table/Icons.js +47 -0
  365. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  366. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  367. package/resultset-table/ResultsetTable.d.ts +7 -0
  368. package/resultset-table/ResultsetTable.js +171 -0
  369. package/resultset-table/ResultsetTable.stories.tsx +413 -0
  370. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  371. package/resultset-table/ResultsetTable.test.js +380 -0
  372. package/resultset-table/types.d.ts +100 -0
  373. package/resultset-table/types.js +5 -0
  374. package/select/Listbox.d.ts +4 -0
  375. package/select/Listbox.js +151 -0
  376. package/select/Option.d.ts +4 -0
  377. package/select/Option.js +89 -0
  378. package/select/Select.accessibility.test.d.ts +1 -0
  379. package/select/Select.accessibility.test.js +228 -0
  380. package/select/Select.d.ts +4 -0
  381. package/select/Select.js +600 -0
  382. package/select/Select.stories.tsx +919 -0
  383. package/select/Select.test.d.ts +1 -0
  384. package/select/Select.test.js +2268 -0
  385. package/select/types.d.ts +209 -0
  386. package/select/types.js +5 -0
  387. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  388. package/sidenav/Sidenav.accessibility.test.js +59 -0
  389. package/sidenav/Sidenav.d.ts +10 -0
  390. package/sidenav/Sidenav.js +201 -0
  391. package/sidenav/Sidenav.stories.tsx +277 -0
  392. package/sidenav/Sidenav.test.d.ts +1 -0
  393. package/sidenav/Sidenav.test.js +37 -0
  394. package/sidenav/SidenavContext.d.ts +5 -0
  395. package/sidenav/SidenavContext.js +13 -0
  396. package/sidenav/types.d.ts +76 -0
  397. package/sidenav/types.js +5 -0
  398. package/slider/Slider.accessibility.test.d.ts +1 -0
  399. package/slider/Slider.accessibility.test.js +104 -0
  400. package/slider/Slider.d.ts +4 -0
  401. package/slider/Slider.js +283 -0
  402. package/slider/Slider.stories.tsx +180 -0
  403. package/slider/Slider.test.d.ts +1 -0
  404. package/slider/Slider.test.js +257 -0
  405. package/slider/types.d.ts +86 -0
  406. package/slider/types.js +5 -0
  407. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  408. package/spinner/Spinner.accessibility.test.js +96 -0
  409. package/spinner/Spinner.d.ts +4 -0
  410. package/spinner/Spinner.js +210 -0
  411. package/spinner/Spinner.stories.tsx +129 -0
  412. package/spinner/Spinner.test.d.ts +1 -0
  413. package/spinner/Spinner.test.js +55 -0
  414. package/spinner/types.d.ts +32 -0
  415. package/spinner/types.js +5 -0
  416. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  417. package/status-light/StatusLight.accessibility.test.js +157 -0
  418. package/status-light/StatusLight.d.ts +4 -0
  419. package/status-light/StatusLight.js +51 -0
  420. package/status-light/StatusLight.stories.tsx +74 -0
  421. package/status-light/StatusLight.test.d.ts +1 -0
  422. package/status-light/StatusLight.test.js +25 -0
  423. package/status-light/types.d.ts +17 -0
  424. package/status-light/types.js +5 -0
  425. package/switch/Switch.accessibility.test.d.ts +1 -0
  426. package/switch/Switch.accessibility.test.js +98 -0
  427. package/switch/Switch.d.ts +4 -0
  428. package/switch/Switch.js +211 -0
  429. package/switch/Switch.stories.tsx +149 -0
  430. package/switch/Switch.test.d.ts +1 -0
  431. package/switch/Switch.test.js +180 -0
  432. package/switch/types.d.ts +66 -0
  433. package/switch/types.js +5 -0
  434. package/table/DropdownTheme.js +62 -0
  435. package/table/Table.accessibility.test.d.ts +1 -0
  436. package/table/Table.accessibility.test.js +93 -0
  437. package/table/Table.d.ts +8 -0
  438. package/table/Table.js +161 -0
  439. package/table/Table.stories.tsx +663 -0
  440. package/table/Table.test.d.ts +1 -0
  441. package/table/Table.test.js +112 -0
  442. package/table/types.d.ts +49 -0
  443. package/table/types.js +5 -0
  444. package/tabs/Tab.d.ts +4 -0
  445. package/tabs/Tab.js +117 -0
  446. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  447. package/tabs/Tabs.accessibility.test.js +56 -0
  448. package/tabs/Tabs.d.ts +4 -0
  449. package/tabs/Tabs.js +373 -0
  450. package/tabs/Tabs.stories.tsx +230 -0
  451. package/tabs/Tabs.test.d.ts +1 -0
  452. package/tabs/Tabs.test.js +276 -0
  453. package/tabs/types.d.ts +92 -0
  454. package/tabs/types.js +5 -0
  455. package/tag/Tag.accessibility.test.d.ts +1 -0
  456. package/tag/Tag.accessibility.test.js +69 -0
  457. package/tag/Tag.d.ts +4 -0
  458. package/tag/Tag.js +151 -0
  459. package/tag/Tag.stories.tsx +152 -0
  460. package/tag/Tag.test.d.ts +1 -0
  461. package/tag/Tag.test.js +41 -0
  462. package/tag/types.d.ts +69 -0
  463. package/tag/types.js +5 -0
  464. package/text-input/Suggestion.d.ts +4 -0
  465. package/text-input/Suggestion.js +67 -0
  466. package/text-input/Suggestions.d.ts +4 -0
  467. package/text-input/Suggestions.js +94 -0
  468. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  469. package/text-input/TextInput.accessibility.test.js +321 -0
  470. package/text-input/TextInput.d.ts +4 -0
  471. package/text-input/TextInput.js +569 -0
  472. package/text-input/TextInput.stories.tsx +474 -0
  473. package/text-input/TextInput.test.d.ts +1 -0
  474. package/text-input/TextInput.test.js +1756 -0
  475. package/text-input/types.d.ts +205 -0
  476. package/text-input/types.js +5 -0
  477. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  478. package/textarea/Textarea.accessibility.test.js +155 -0
  479. package/textarea/Textarea.d.ts +4 -0
  480. package/textarea/Textarea.js +232 -0
  481. package/textarea/Textarea.stories.tsx +174 -0
  482. package/textarea/Textarea.test.d.ts +1 -0
  483. package/textarea/Textarea.test.js +406 -0
  484. package/textarea/types.d.ts +141 -0
  485. package/textarea/types.js +5 -0
  486. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  487. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  488. package/toggle-group/ToggleGroup.d.ts +4 -0
  489. package/toggle-group/ToggleGroup.js +199 -0
  490. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  491. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  492. package/toggle-group/ToggleGroup.test.js +137 -0
  493. package/toggle-group/types.d.ts +114 -0
  494. package/toggle-group/types.js +5 -0
  495. package/typography/Typography.accessibility.test.d.ts +1 -0
  496. package/typography/Typography.accessibility.test.js +339 -0
  497. package/typography/Typography.d.ts +4 -0
  498. package/typography/Typography.js +23 -0
  499. package/typography/Typography.stories.tsx +198 -0
  500. package/typography/types.d.ts +18 -0
  501. package/typography/types.js +5 -0
  502. package/useTheme.d.ts +1143 -0
  503. package/{dist/useTheme.js → useTheme.js} +4 -11
  504. package/useTranslatedLabels.d.ts +85 -0
  505. package/useTranslatedLabels.js +14 -0
  506. package/utils/BaseTypography.d.ts +21 -0
  507. package/utils/BaseTypography.js +94 -0
  508. package/utils/FocusLock.d.ts +13 -0
  509. package/utils/FocusLock.js +124 -0
  510. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  511. package/wizard/Wizard.accessibility.test.js +55 -0
  512. package/wizard/Wizard.d.ts +4 -0
  513. package/wizard/Wizard.js +239 -0
  514. package/wizard/Wizard.stories.tsx +272 -0
  515. package/wizard/Wizard.test.d.ts +1 -0
  516. package/wizard/Wizard.test.js +114 -0
  517. package/wizard/types.d.ts +64 -0
  518. package/wizard/types.js +5 -0
  519. package/babel.config.js +0 -8
  520. package/dist/BackgroundColorContext.js +0 -46
  521. package/dist/ThemeContext.js +0 -248
  522. package/dist/V3Textarea/V3Textarea.js +0 -264
  523. package/dist/accordion/Accordion.js +0 -353
  524. package/dist/accordion-group/AccordionGroup.js +0 -186
  525. package/dist/alert/Alert.js +0 -403
  526. package/dist/alert/index.d.ts +0 -51
  527. package/dist/badge/Badge.js +0 -63
  528. package/dist/box/Box.js +0 -156
  529. package/dist/button/Button.js +0 -238
  530. package/dist/card/Card.js +0 -254
  531. package/dist/checkbox/Checkbox.js +0 -300
  532. package/dist/checkbox/Checkbox.stories.js +0 -144
  533. package/dist/checkbox/readme.md +0 -116
  534. package/dist/chip/Chip.js +0 -265
  535. package/dist/common/OpenSans.css +0 -81
  536. package/dist/common/RequiredComponent.js +0 -40
  537. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  538. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  539. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  540. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  541. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  542. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  543. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  544. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  545. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  546. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  547. package/dist/common/variables.js +0 -1569
  548. package/dist/date/Date.js +0 -379
  549. package/dist/date/Date.stories.js +0 -205
  550. package/dist/date/readme.md +0 -73
  551. package/dist/date-input/DateInput.js +0 -400
  552. package/dist/date-input/index.d.ts +0 -95
  553. package/dist/dialog/Dialog.js +0 -218
  554. package/dist/dropdown/Dropdown.js +0 -544
  555. package/dist/file-input/FileInput.js +0 -644
  556. package/dist/file-input/FileItem.js +0 -280
  557. package/dist/file-input/index.d.ts +0 -81
  558. package/dist/footer/Footer.js +0 -421
  559. package/dist/footer/Icons.js +0 -77
  560. package/dist/header/Header.js +0 -434
  561. package/dist/input-text/Icons.js +0 -22
  562. package/dist/input-text/InputText.js +0 -705
  563. package/dist/layout/ApplicationLayout.js +0 -327
  564. package/dist/layout/Icons.js +0 -55
  565. package/dist/link/Link.js +0 -237
  566. package/dist/link/readme.md +0 -51
  567. package/dist/main.d.ts +0 -8
  568. package/dist/new-select/NewSelect.js +0 -836
  569. package/dist/new-select/index.d.ts +0 -53
  570. package/dist/number-input/NumberInput.js +0 -136
  571. package/dist/number-input/NumberInputContext.js +0 -16
  572. package/dist/number-input/index.d.ts +0 -113
  573. package/dist/paginator/Icons.js +0 -66
  574. package/dist/paginator/Paginator.js +0 -283
  575. package/dist/password-input/PasswordInput.js +0 -198
  576. package/dist/password-input/index.d.ts +0 -94
  577. package/dist/progress-bar/ProgressBar.js +0 -242
  578. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  579. package/dist/progress-bar/readme.md +0 -63
  580. package/dist/radio/Radio.js +0 -209
  581. package/dist/radio/Radio.stories.js +0 -166
  582. package/dist/radio/readme.md +0 -70
  583. package/dist/resultsetTable/ResultsetTable.js +0 -358
  584. package/dist/select/Select.js +0 -549
  585. package/dist/sidenav/Sidenav.js +0 -179
  586. package/dist/slider/Slider.js +0 -404
  587. package/dist/slider/readme.md +0 -64
  588. package/dist/spinner/Spinner.js +0 -381
  589. package/dist/spinner/Spinner.stories.js +0 -183
  590. package/dist/spinner/readme.md +0 -65
  591. package/dist/switch/Switch.js +0 -222
  592. package/dist/switch/Switch.stories.js +0 -134
  593. package/dist/switch/readme.md +0 -133
  594. package/dist/table/Table.js +0 -132
  595. package/dist/tabs/Tabs.js +0 -343
  596. package/dist/tabs/Tabs.stories.js +0 -130
  597. package/dist/tabs/readme.md +0 -78
  598. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  599. package/dist/tabs-for-sections/readme.md +0 -78
  600. package/dist/tag/Tag.js +0 -282
  601. package/dist/text-input/TextInput.js +0 -971
  602. package/dist/text-input/index.d.ts +0 -135
  603. package/dist/textarea/Textarea.js +0 -369
  604. package/dist/textarea/index.d.ts +0 -117
  605. package/dist/toggle/Toggle.js +0 -220
  606. package/dist/toggle/Toggle.stories.js +0 -297
  607. package/dist/toggle/readme.md +0 -80
  608. package/dist/toggle-group/ToggleGroup.js +0 -327
  609. package/dist/upload/Upload.js +0 -205
  610. package/dist/upload/Upload.stories.js +0 -72
  611. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  612. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  613. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  614. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  615. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  616. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  617. package/dist/upload/file-upload/FileToUpload.js +0 -184
  618. package/dist/upload/file-upload/audio-icon.svg +0 -4
  619. package/dist/upload/file-upload/close.svg +0 -4
  620. package/dist/upload/file-upload/file-icon.svg +0 -4
  621. package/dist/upload/file-upload/video-icon.svg +0 -4
  622. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  623. package/dist/upload/readme.md +0 -37
  624. package/dist/upload/transaction/Transaction.js +0 -175
  625. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  626. package/dist/upload/transaction/audio-icon.svg +0 -4
  627. package/dist/upload/transaction/error-icon.svg +0 -4
  628. package/dist/upload/transaction/file-icon-err.svg +0 -4
  629. package/dist/upload/transaction/file-icon.svg +0 -4
  630. package/dist/upload/transaction/image-icon-err.svg +0 -4
  631. package/dist/upload/transaction/image-icon.svg +0 -4
  632. package/dist/upload/transaction/success-icon.svg +0 -4
  633. package/dist/upload/transaction/video-icon-err.svg +0 -4
  634. package/dist/upload/transaction/video-icon.svg +0 -4
  635. package/dist/upload/transactions/Transactions.js +0 -138
  636. package/dist/wizard/Wizard.js +0 -411
  637. package/dist/wizard/invalid_icon.svg +0 -5
  638. package/dist/wizard/valid_icon.svg +0 -5
  639. package/dist/wizard/validation-wrong.svg +0 -6
  640. package/test/Accordion.test.js +0 -33
  641. package/test/AccordionGroup.test.js +0 -125
  642. package/test/Alert.test.js +0 -53
  643. package/test/Box.test.js +0 -10
  644. package/test/Button.test.js +0 -18
  645. package/test/Card.test.js +0 -30
  646. package/test/Checkbox.test.js +0 -45
  647. package/test/Chip.test.js +0 -25
  648. package/test/Date.test.js +0 -397
  649. package/test/DateInput.test.js +0 -242
  650. package/test/Dialog.test.js +0 -23
  651. package/test/Dropdown.test.js +0 -145
  652. package/test/FileInput.test.js +0 -201
  653. package/test/Footer.test.js +0 -94
  654. package/test/Header.test.js +0 -34
  655. package/test/Heading.test.js +0 -35
  656. package/test/InputText.test.js +0 -248
  657. package/test/Link.test.js +0 -43
  658. package/test/NumberInput.test.js +0 -259
  659. package/test/Paginator.test.js +0 -177
  660. package/test/PasswordInput.test.js +0 -83
  661. package/test/ProgressBar.test.js +0 -35
  662. package/test/Radio.test.js +0 -37
  663. package/test/ResultsetTable.test.js +0 -329
  664. package/test/Select.test.js +0 -212
  665. package/test/Sidenav.test.js +0 -45
  666. package/test/Slider.test.js +0 -74
  667. package/test/Spinner.test.js +0 -32
  668. package/test/Switch.test.js +0 -45
  669. package/test/Table.test.js +0 -36
  670. package/test/Tabs.test.js +0 -109
  671. package/test/TabsForSections.test.js +0 -34
  672. package/test/Tag.test.js +0 -32
  673. package/test/TextInput.test.js +0 -732
  674. package/test/Textarea.test.js +0 -193
  675. package/test/ToggleGroup.test.js +0 -85
  676. package/test/Upload.test.js +0 -60
  677. package/test/V3TextArea.test.js +0 -51
  678. package/test/Wizard.test.js +0 -130
  679. package/test/mocks/pngMock.js +0 -1
  680. package/test/mocks/svgMock.js +0 -1
@@ -1,179 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireDefault(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _propTypes = _interopRequireDefault(require("prop-types"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
27
-
28
- function _templateObject4() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n text-decoration: ", ";\n margin: ", ";\n cursor: pointer;\n\n :focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"]);
30
-
31
- _templateObject4 = function _templateObject4() {
32
- return data;
33
- };
34
-
35
- return data;
36
- }
37
-
38
- function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n margin-bottom: 4px;\n"]);
40
-
41
- _templateObject3 = function _templateObject3() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n margin-bottom: 16px;\n"]);
50
-
51
- _templateObject2 = function _templateObject2() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n background-color: ", ";\n max-width: 300px;\n width: ", ";\n padding: ", ";\n\n overflow-y: auto;\n overflow-x: hidden;\n ::-webkit-scrollbar {\n width: 2px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n"]);
60
-
61
- _templateObject = function _templateObject() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- var DxcSidenav = function DxcSidenav(_ref) {
69
- var padding = _ref.padding,
70
- children = _ref.children;
71
- var colorsTheme = (0, _useTheme["default"])();
72
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
73
- theme: colorsTheme.sidenav
74
- }, _react["default"].createElement(SideNavContainer, {
75
- padding: padding
76
- }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
77
- color: colorsTheme.sidenav.backgroundColor
78
- }, children)));
79
- };
80
-
81
- var Title = function Title(_ref2) {
82
- var children = _ref2.children;
83
- return _react["default"].createElement(SideNavMenuTitle, null, children);
84
- };
85
-
86
- var Subtitle = function Subtitle(_ref3) {
87
- var children = _ref3.children;
88
- return _react["default"].createElement(SideNavMenuSubTitle, null, children);
89
- };
90
-
91
- var Link = function Link(_ref4) {
92
- var href = _ref4.href,
93
- onClick = _ref4.onClick,
94
- children = _ref4.children;
95
- return _react["default"].createElement(SideNavMenuLink, {
96
- href: href,
97
- onClick: onClick
98
- }, children);
99
- };
100
-
101
- var SideNavContainer = _styledComponents["default"].div(_templateObject(), function (props) {
102
- return props.theme.backgroundColor;
103
- }, function (props) {
104
- return props.padding ? "calc(300px - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "300px";
105
- }, function (props) {
106
- return props.padding ? _variables.spaces[props.padding] : "";
107
- }, function (props) {
108
- return props.theme.scrollBarTrackColor;
109
- }, function (props) {
110
- return props.theme.scrollBarThumbColor;
111
- });
112
-
113
- var SideNavMenuTitle = _styledComponents["default"].div(_templateObject2(), function (props) {
114
- return props.theme.titleFontFamily;
115
- }, function (props) {
116
- return props.theme.titleFontSize;
117
- }, function (props) {
118
- return props.theme.titleFontStyle;
119
- }, function (props) {
120
- return props.theme.titleFontWeight;
121
- }, function (props) {
122
- return props.theme.titleFontColor;
123
- }, function (props) {
124
- return props.theme.titleFontLetterSpacing;
125
- }, function (props) {
126
- return props.theme.titleFontTextTransform;
127
- });
128
-
129
- var SideNavMenuSubTitle = _styledComponents["default"].div(_templateObject3(), function (props) {
130
- return props.theme.subtitleFontFamily;
131
- }, function (props) {
132
- return props.theme.subtitleFontSize;
133
- }, function (props) {
134
- return props.theme.subtitleFontStyle;
135
- }, function (props) {
136
- return props.theme.subtitleFontWeight;
137
- }, function (props) {
138
- return props.theme.subtitleFontColor;
139
- }, function (props) {
140
- return props.theme.subtitleFontLetterSpacing;
141
- }, function (props) {
142
- return props.theme.subtitleFontTextTransform;
143
- });
144
-
145
- var SideNavMenuLink = _styledComponents["default"].a(_templateObject4(), function (props) {
146
- return props.theme.linkFontFamily;
147
- }, function (props) {
148
- return props.theme.linkFontSize;
149
- }, function (props) {
150
- return props.theme.linkFontStyle;
151
- }, function (props) {
152
- return props.theme.linkFontWeight;
153
- }, function (props) {
154
- return props.theme.linkFontColor;
155
- }, function (props) {
156
- return props.theme.linkFontLetterSpacing;
157
- }, function (props) {
158
- return props.theme.linkFontTextTransform;
159
- }, function (props) {
160
- return props.theme.linkTextDecoration;
161
- }, function (props) {
162
- return "".concat(props.theme.linkMarginTop, " ").concat(props.theme.linkMarginRight, " ").concat(props.theme.linkMarginBottom, " ").concat(props.theme.linkMarginLeft);
163
- }, function (props) {
164
- return props.theme.linkFocusColor;
165
- });
166
-
167
- DxcSidenav.propTypes = {
168
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
169
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
170
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
171
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
172
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
173
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
174
- };
175
- DxcSidenav.Title = Title;
176
- DxcSidenav.Subtitle = Subtitle;
177
- DxcSidenav.Link = Link;
178
- var _default = DxcSidenav;
179
- exports["default"] = _default;
@@ -1,404 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _Slider = _interopRequireDefault(require("@material-ui/lab/Slider"));
23
-
24
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
29
-
30
- var _variables = require("../common/variables.js");
31
-
32
- var _utils = require("../common/utils.js");
33
-
34
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
-
36
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
-
38
- function _templateObject7() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n label + .MuiInput-formControl {\n margin-top: 2px;\n }\n max-width: 70px;\n"]);
40
-
41
- _templateObject7 = function _templateObject7() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject6() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-left: ", ";\n"]);
50
-
51
- _templateObject6 = function _templateObject6() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject5() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-right: ", ";\n"]);
60
-
61
- _templateObject5 = function _templateObject5() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject4() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 48px;\n align-items: center;\n\n .MultiSlider-root {\n display: flex;\n align-items: center;\n }\n .MuiSlider-container {\n padding: 30px 24px;\n }\n .MuiSlider-root.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n .Mui-disabled {\n & .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n }\n & .MuiSlider-track {\n background-color: ", ";\n }\n & .MuiSlider-rail {\n background-color: ", ";\n }\n & > .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", " !important;\n }\n & > .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n }\n .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n border-radius: 9999px;\n\n :hover,\n &.Mui-focusVisible {\n box-shadow: none;\n }\n &.MuiSlider-active {\n box-shadow: none;\n }\n :focus {\n outline: ", "\n auto 1px;\n outline-offset: 2px;\n background-color: ", ";\n }\n :hover {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n height: ", ";\n width: ", ";\n top: ", ";\n }\n :active {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n }\n }\n .MuiSlider-track {\n background-color: ", ";\n height: ", ";\n top: ", ";\n border-radius: 9999px;\n }\n .MuiSlider-track.MuiSlider-trackAfter {\n background-color: ", ";\n }\n .MuiSlider-rail {\n background-color: ", ";\n height: ", ";\n top: ", ";\n }\n .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", ";\n }\n .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n"]);
70
-
71
- _templateObject4 = function _templateObject4() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject3() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
80
-
81
- _templateObject3 = function _templateObject3() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject2() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
90
-
91
- _templateObject2 = function _templateObject2() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n"]);
100
-
101
- _templateObject = function _templateObject() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- var DxcSlider = function DxcSlider(_ref) {
109
- var label = _ref.label,
110
- helperText = _ref.helperText,
111
- _ref$minValue = _ref.minValue,
112
- minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
113
- _ref$maxValue = _ref.maxValue,
114
- maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
115
- _ref$step = _ref.step,
116
- step = _ref$step === void 0 ? 1 : _ref$step,
117
- value = _ref.value,
118
- _ref$showLimitsValues = _ref.showLimitsValues,
119
- showLimitsValues = _ref$showLimitsValues === void 0 ? false : _ref$showLimitsValues,
120
- _ref$showInput = _ref.showInput,
121
- showInput = _ref$showInput === void 0 ? false : _ref$showInput,
122
- name = _ref.name,
123
- onChange = _ref.onChange,
124
- onDragEnd = _ref.onDragEnd,
125
- _ref$disabled = _ref.disabled,
126
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
127
- _ref$marks = _ref.marks,
128
- marks = _ref$marks === void 0 ? false : _ref$marks,
129
- labelFormatCallback = _ref.labelFormatCallback,
130
- margin = _ref.margin,
131
- _ref$size = _ref.size,
132
- size = _ref$size === void 0 ? "fillParent" : _ref$size;
133
-
134
- var _useState = (0, _react.useState)(0),
135
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
136
- innerValue = _useState2[0],
137
- setInnerValue = _useState2[1];
138
-
139
- var colorsTheme = (0, _useTheme["default"])();
140
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
141
- var minLabel = (0, _react.useMemo)(function () {
142
- return labelFormatCallback ? labelFormatCallback(minValue) : minValue;
143
- }, [labelFormatCallback, minValue]);
144
- var maxLabel = (0, _react.useMemo)(function () {
145
- return labelFormatCallback ? labelFormatCallback(maxValue) : maxValue;
146
- }, [labelFormatCallback, maxValue]);
147
-
148
- var handlerSliderChange = function handlerSliderChange(event, newValue) {
149
- if (value == null) {
150
- var valueToCheck = value !== undefined ? value : innerValue;
151
-
152
- if (valueToCheck !== newValue) {
153
- setInnerValue(newValue);
154
- }
155
- }
156
-
157
- if (typeof onChange === "function") {
158
- onChange(newValue);
159
- }
160
- };
161
-
162
- var handlerInputChange = function handlerInputChange(event) {
163
- var intValue = parseInt(event.value, 10);
164
-
165
- if (value == null) {
166
- if (!Number.isNaN(intValue)) {
167
- setInnerValue(intValue > maxValue ? maxValue : intValue);
168
- } else {
169
- setInnerValue("");
170
- }
171
- }
172
-
173
- if (typeof onChange === "function") {
174
- if (!Number.isNaN(intValue)) {
175
- onChange(intValue > maxValue ? maxValue : intValue);
176
- } else {
177
- onChange("");
178
- }
179
- }
180
- };
181
-
182
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
183
- theme: colorsTheme.slider
184
- }, _react["default"].createElement(Container, {
185
- margin: margin,
186
- size: size
187
- }, _react["default"].createElement(Label, null, label), _react["default"].createElement(HelperText, null, helperText), _react["default"].createElement(SliderContainer, {
188
- backgroundType: backgroundType
189
- }, showLimitsValues && _react["default"].createElement(MinLabelContainer, {
190
- backgroundType: backgroundType,
191
- disabled: disabled
192
- }, minLabel), _react["default"].createElement(_Slider["default"], {
193
- value: value != null && value >= 0 && value || innerValue,
194
- min: minValue,
195
- max: maxValue,
196
- onChange: handlerSliderChange,
197
- onChangeCommitted: onDragEnd && function (event, selectedValue) {
198
- return onDragEnd(selectedValue);
199
- },
200
- step: step,
201
- marks: marks || [],
202
- disabled: disabled
203
- }), showLimitsValues && _react["default"].createElement(MaxLabelContainer, {
204
- backgroundType: backgroundType,
205
- disabled: disabled,
206
- step: step
207
- }, maxLabel), showInput && _react["default"].createElement(StyledTextInput, null, _react["default"].createElement(_TextInput["default"], {
208
- name: name,
209
- value: value != null && value >= 0 && value || innerValue,
210
- disabled: disabled,
211
- onChange: handlerInputChange,
212
- size: "fillParent"
213
- })))));
214
- };
215
-
216
- var sizes = {
217
- medium: "240px",
218
- large: "480px",
219
- fillParent: "100%"
220
- };
221
-
222
- var calculateWidth = function calculateWidth(margin, size) {
223
- return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
224
- };
225
-
226
- var Container = _styledComponents["default"].div(_templateObject(), function (props) {
227
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
228
- }, function (props) {
229
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
230
- }, function (props) {
231
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
232
- }, function (props) {
233
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
234
- }, function (props) {
235
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
236
- }, function (props) {
237
- return calculateWidth(props.margin, props.size);
238
- });
239
-
240
- var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
241
- return props.theme.labelFontColor;
242
- }, function (props) {
243
- return props.theme.labelFontFamily;
244
- }, function (props) {
245
- return props.theme.labelFontSize;
246
- }, function (props) {
247
- return props.theme.labelFontStyle;
248
- }, function (props) {
249
- return props.theme.labelFontWeight;
250
- }, function (props) {
251
- return props.theme.labelLineHeight;
252
- });
253
-
254
- var HelperText = _styledComponents["default"].span(_templateObject3(), function (props) {
255
- return props.theme.helperTextFontColor;
256
- }, function (props) {
257
- return props.theme.helperTextFontFamily;
258
- }, function (props) {
259
- return props.theme.helperTextFontSize;
260
- }, function (props) {
261
- return props.theme.helperTextFontstyle;
262
- }, function (props) {
263
- return props.theme.helperTextFontWeight;
264
- }, function (props) {
265
- return props.theme.helperTextLineHeight;
266
- });
267
-
268
- var SliderContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
269
- return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
270
- }, function (props) {
271
- return props.theme.thumbHeight;
272
- }, function (props) {
273
- return props.theme.thumbWidth;
274
- }, function (props) {
275
- return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
276
- }, function (props) {
277
- return props.theme.disabledThumbVerticalPosition;
278
- }, function (props) {
279
- return props.backgroundType === "dark" ? props.theme.disabledTrackLineColorOnDark : props.theme.disabledTrackLineColor;
280
- }, function (props) {
281
- return props.backgroundType === "dark" ? props.theme.disabledTotalLineColorOnDark : props.theme.disabledTotalLineColor;
282
- }, function (props) {
283
- return props.backgroundType === "dark" ? props.theme.disabledTickBackgroundColorOnDark : props.theme.disabledTickBackgroundColor;
284
- }, function (props) {
285
- return props.backgroundType === "dark" ? props.theme.disabledTickBackgroundColorOnDark : props.theme.disabledTickBackgroundColor;
286
- }, function (props) {
287
- return props.theme.tickHeight;
288
- }, function (props) {
289
- return props.theme.tickWidth;
290
- }, function (props) {
291
- return props.theme.disabledTickVerticalPosition;
292
- }, function (props) {
293
- return props.theme.thumbHeight;
294
- }, function (props) {
295
- return props.theme.thumbWidth;
296
- }, function (props) {
297
- return props.backgroundType === "dark" ? props.theme.thumbBackgroundColorOnDark : props.theme.thumbBackgroundColor;
298
- }, function (props) {
299
- return props.theme.thumbVerticalPosition;
300
- }, function (props) {
301
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
302
- }, function (props) {
303
- return props.backgroundType === "dark" ? props.theme.focusThumbBackgroundColorOnDark : props.theme.focusThumbBackgroundColor;
304
- }, function (props) {
305
- return props.backgroundType === "dark" ? props.theme.hoverThumbBackgroundColorOnDark : props.theme.hoverThumbBackgroundColor;
306
- }, function (props) {
307
- return props.theme.hoverThumbScale;
308
- }, function (props) {
309
- return props.theme.hoverThumbHeight;
310
- }, function (props) {
311
- return props.theme.hoverThumbWidth;
312
- }, function (props) {
313
- return props.theme.hoverThumbVerticalPosition;
314
- }, function (props) {
315
- return props.backgroundType === "dark" ? props.theme.activeThumbBackgroundColorOnDark : props.theme.activeThumbBackgroundColor;
316
- }, function (props) {
317
- return props.theme.activeThumbScale;
318
- }, function (props) {
319
- return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
320
- }, function (props) {
321
- return props.theme.trackLineThickness;
322
- }, function (props) {
323
- return props.theme.trackLineVerticalPosition;
324
- }, function (props) {
325
- return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
326
- }, function (props) {
327
- return props.backgroundType === "dark" ? props.theme.totalLineColorOnDark : props.theme.totalLineColor;
328
- }, function (props) {
329
- return props.theme.totalLineThickness;
330
- }, function (props) {
331
- return props.theme.totalLineVerticalPosition;
332
- }, function (props) {
333
- return props.backgroundType === "dark" ? props.theme.tickBackgroundColorOnDark : props.theme.tickBackgroundColor;
334
- }, function (props) {
335
- return props.backgroundType === "dark" ? props.theme.tickBackgroundColorOnDark : props.theme.tickBackgroundColor;
336
- }, function (props) {
337
- return props.theme.tickHeight;
338
- }, function (props) {
339
- return props.theme.tickWidth;
340
- }, function (props) {
341
- return props.theme.tickVerticalPosition;
342
- });
343
-
344
- var MinLabelContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
345
- return props.theme.fontFamily;
346
- }, function (props) {
347
- return props.theme.fontSize;
348
- }, function (props) {
349
- return props.theme.fontStyle;
350
- }, function (props) {
351
- return props.theme.fontWeight;
352
- }, function (props) {
353
- return props.disabled ? props.theme.disabledFontColor : props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
354
- }, function (props) {
355
- return props.theme.fontLetterSpacing;
356
- }, function (props) {
357
- return props.theme.floorLabelMarginRight;
358
- });
359
-
360
- var MaxLabelContainer = _styledComponents["default"].span(_templateObject6(), function (props) {
361
- return props.theme.fontFamily;
362
- }, function (props) {
363
- return props.theme.fontSize;
364
- }, function (props) {
365
- return props.theme.fontStyle;
366
- }, function (props) {
367
- return props.theme.fontWeight;
368
- }, function (props) {
369
- return props.disabled ? props.theme.disabledFontColor : props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
370
- }, function (props) {
371
- return props.theme.fontLetterSpacing;
372
- }, function (props) {
373
- return props.step === 1 ? props.theme.ceilLabelMarginLeft : "1.25rem";
374
- });
375
-
376
- var StyledTextInput = _styledComponents["default"].div(_templateObject7(), function (props) {
377
- return props.theme.inputMarginLeft;
378
- });
379
-
380
- DxcSlider.propTypes = {
381
- label: _propTypes["default"].string,
382
- helperText: _propTypes["default"].string,
383
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
384
- minValue: _propTypes["default"].number,
385
- maxValue: _propTypes["default"].number,
386
- step: _propTypes["default"].number,
387
- value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
388
- showLimitsValues: _propTypes["default"].bool,
389
- showInput: _propTypes["default"].bool,
390
- name: _propTypes["default"].string,
391
- onChange: _propTypes["default"].func,
392
- onDragEnd: _propTypes["default"].func,
393
- disabled: _propTypes["default"].bool,
394
- marks: _propTypes["default"].bool,
395
- labelFormatCallback: _propTypes["default"].func,
396
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
397
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
398
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
399
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
400
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
401
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
402
- };
403
- var _default = DxcSlider;
404
- exports["default"] = _default;
@@ -1,64 +0,0 @@
1
- # DXC Slider Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { Slider } from "@dxc-technology/halstack-react";
7
-
8
- <DxcSlider min={0} max={100} step={1} value={value} />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>min: number</td>
21
- <td><code>0</code></td>
22
- <td>The minimum value available for selection.</td>
23
- </tr>
24
- <tr>
25
- <td>max: number</td>
26
- <td><code>100</code></td>
27
- <td>The maximum value available for selection.</td>
28
- </tr>
29
- <tr>
30
- <td>step: number</td>
31
- <td><code>1</code></td>
32
- <td>The step interval between values available for selection.</td>
33
- </tr>
34
- <tr>
35
- <td>value: number</td>
36
- <td><code>0</code></td>
37
- <td>The selected value.</td>
38
- </tr>
39
- <tr>
40
- <td>showLimitValues: boolean</td>
41
- <td><code>false</code></td>
42
- <td>Whether the min/max value labels should be displayed next to the slider.</td>
43
- </tr>
44
- <tr>
45
- <td>showInput: boolean</td>
46
- <td><code>false</code></td>
47
- <td>Whether the input number for displaying/controlling the slider value should be displayed next to the slider.</td>
48
- </tr>
49
- <tr>
50
- <td>name: string</td>
51
- <td></td>
52
- <td>Name attribute of the input element.</td>
53
- </tr>
54
- <tr>
55
- <td>onChange: function</td>
56
- <td></td>
57
- <td>This function will be called when the slider changes its value, as it's being dragged. The new value will be passed as a parameter when this function is executed</td>
58
- </tr>
59
- <tr>
60
- <td>onDragEnd: function</td>
61
- <td></td>
62
- <td>This function will be called when the slider changes its value, but only when the thumb is released. The new value will be passed as a parameter when this function is executed</td>
63
- </tr>
64
- </table>