@dxc-technology/halstack-react 0.0.0-375a8b0 → 0.0.0-376c368

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 (545) hide show
  1. package/BackgroundColorContext.d.ts +1 -0
  2. package/BackgroundColorContext.js +6 -26
  3. package/HalstackContext.d.ts +1269 -0
  4. package/HalstackContext.js +320 -0
  5. package/README.md +47 -0
  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 +1 -1
  9. package/accordion/Accordion.js +103 -193
  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 +12 -23
  14. package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
  15. package/accordion-group/AccordionGroup.accessibility.test.js +82 -0
  16. package/accordion-group/AccordionGroup.d.ts +3 -3
  17. package/accordion-group/AccordionGroup.js +39 -108
  18. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  19. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  20. package/accordion-group/AccordionGroup.test.js +94 -0
  21. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  22. package/accordion-group/AccordionGroupAccordion.js +31 -0
  23. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  24. package/accordion-group/AccordionGroupContext.js +8 -0
  25. package/accordion-group/types.d.ts +18 -23
  26. package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
  27. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  28. package/action-icon/ActionIcon.d.ts +4 -0
  29. package/action-icon/ActionIcon.js +48 -0
  30. package/action-icon/ActionIcon.stories.tsx +41 -0
  31. package/action-icon/ActionIcon.test.d.ts +1 -0
  32. package/action-icon/ActionIcon.test.js +64 -0
  33. package/action-icon/types.d.ts +26 -0
  34. package/alert/Alert.accessibility.test.d.ts +1 -0
  35. package/alert/Alert.accessibility.test.js +95 -0
  36. package/alert/Alert.js +41 -128
  37. package/alert/Alert.stories.tsx +28 -0
  38. package/alert/Alert.test.d.ts +1 -0
  39. package/alert/Alert.test.js +75 -0
  40. package/alert/types.d.ts +5 -5
  41. package/badge/Badge.accessibility.test.d.ts +1 -0
  42. package/badge/Badge.accessibility.test.js +129 -0
  43. package/badge/Badge.d.ts +4 -0
  44. package/badge/Badge.js +142 -40
  45. package/badge/Badge.stories.tsx +210 -0
  46. package/badge/Badge.test.d.ts +1 -0
  47. package/badge/Badge.test.js +30 -0
  48. package/badge/types.d.ts +54 -0
  49. package/bleed/Bleed.d.ts +3 -0
  50. package/bleed/Bleed.js +43 -0
  51. package/bleed/Bleed.stories.tsx +342 -0
  52. package/bleed/types.d.ts +37 -0
  53. package/box/Box.accessibility.test.d.ts +1 -0
  54. package/box/Box.accessibility.test.js +33 -0
  55. package/box/Box.d.ts +1 -1
  56. package/box/Box.js +31 -82
  57. package/box/Box.stories.tsx +38 -51
  58. package/box/Box.test.d.ts +1 -0
  59. package/box/Box.test.js +13 -0
  60. package/box/types.d.ts +3 -14
  61. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  62. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  63. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  64. package/breadcrumbs/Breadcrumbs.js +79 -0
  65. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  66. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  67. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  68. package/breadcrumbs/Item.d.ts +4 -0
  69. package/breadcrumbs/Item.js +52 -0
  70. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  71. package/breadcrumbs/dropdownTheme.js +62 -0
  72. package/breadcrumbs/types.d.ts +40 -0
  73. package/breadcrumbs/types.js +5 -0
  74. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  75. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  76. package/bulleted-list/BulletedList.d.ts +7 -0
  77. package/bulleted-list/BulletedList.js +92 -0
  78. package/bulleted-list/BulletedList.stories.tsx +115 -0
  79. package/bulleted-list/types.d.ts +38 -0
  80. package/bulleted-list/types.js +5 -0
  81. package/button/Button.accessibility.test.d.ts +1 -0
  82. package/button/Button.accessibility.test.js +127 -0
  83. package/button/Button.d.ts +1 -1
  84. package/button/Button.js +65 -121
  85. package/button/Button.stories.tsx +155 -106
  86. package/button/Button.test.d.ts +1 -0
  87. package/button/Button.test.js +38 -0
  88. package/button/types.d.ts +14 -14
  89. package/card/Card.accessibility.test.d.ts +1 -0
  90. package/card/Card.accessibility.test.js +36 -0
  91. package/card/Card.d.ts +1 -1
  92. package/card/Card.js +60 -103
  93. package/card/Card.stories.tsx +14 -44
  94. package/card/Card.test.d.ts +1 -0
  95. package/card/Card.test.js +39 -0
  96. package/card/types.d.ts +6 -11
  97. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  98. package/checkbox/Checkbox.accessibility.test.js +87 -0
  99. package/checkbox/Checkbox.d.ts +2 -2
  100. package/checkbox/Checkbox.js +141 -182
  101. package/checkbox/Checkbox.stories.tsx +166 -136
  102. package/checkbox/Checkbox.test.d.ts +1 -0
  103. package/checkbox/Checkbox.test.js +199 -0
  104. package/checkbox/types.d.ts +19 -7
  105. package/chip/Chip.accessibility.test.d.ts +1 -0
  106. package/chip/Chip.accessibility.test.js +67 -0
  107. package/chip/Chip.d.ts +4 -0
  108. package/chip/Chip.js +51 -146
  109. package/chip/Chip.stories.tsx +105 -31
  110. package/chip/Chip.test.d.ts +1 -0
  111. package/chip/Chip.test.js +41 -0
  112. package/chip/types.d.ts +45 -0
  113. package/chip/types.js +5 -0
  114. package/common/coreTokens.d.ts +236 -0
  115. package/common/coreTokens.js +183 -0
  116. package/common/utils.d.ts +1 -0
  117. package/common/utils.js +6 -12
  118. package/common/variables.d.ts +1421 -0
  119. package/common/variables.js +1106 -1396
  120. package/container/Container.d.ts +4 -0
  121. package/container/Container.js +194 -0
  122. package/container/Container.stories.tsx +214 -0
  123. package/container/types.d.ts +176 -0
  124. package/container/types.js +5 -0
  125. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  126. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  127. package/contextual-menu/ContextualMenu.d.ts +5 -0
  128. package/contextual-menu/ContextualMenu.js +136 -0
  129. package/contextual-menu/ContextualMenu.stories.tsx +231 -0
  130. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  131. package/contextual-menu/ContextualMenu.test.js +247 -0
  132. package/contextual-menu/GroupItem.d.ts +4 -0
  133. package/contextual-menu/GroupItem.js +67 -0
  134. package/contextual-menu/ItemAction.d.ts +4 -0
  135. package/contextual-menu/ItemAction.js +88 -0
  136. package/contextual-menu/MenuItem.d.ts +4 -0
  137. package/contextual-menu/MenuItem.js +29 -0
  138. package/contextual-menu/SingleItem.d.ts +4 -0
  139. package/contextual-menu/SingleItem.js +38 -0
  140. package/contextual-menu/types.d.ts +65 -0
  141. package/contextual-menu/types.js +5 -0
  142. package/date-input/Calendar.d.ts +4 -0
  143. package/date-input/Calendar.js +230 -0
  144. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  145. package/date-input/DateInput.accessibility.test.js +229 -0
  146. package/date-input/DateInput.js +181 -314
  147. package/date-input/DateInput.stories.tsx +210 -57
  148. package/date-input/DateInput.test.d.ts +1 -0
  149. package/date-input/DateInput.test.js +808 -0
  150. package/date-input/DatePicker.d.ts +4 -0
  151. package/date-input/DatePicker.js +121 -0
  152. package/date-input/YearPicker.d.ts +4 -0
  153. package/date-input/YearPicker.js +105 -0
  154. package/date-input/types.d.ts +86 -22
  155. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  156. package/dialog/Dialog.accessibility.test.js +69 -0
  157. package/dialog/Dialog.d.ts +1 -1
  158. package/dialog/Dialog.js +57 -129
  159. package/dialog/Dialog.stories.tsx +324 -167
  160. package/dialog/Dialog.test.d.ts +1 -0
  161. package/dialog/Dialog.test.js +370 -0
  162. package/dialog/types.d.ts +18 -25
  163. package/divider/Divider.accessibility.test.d.ts +1 -0
  164. package/divider/Divider.accessibility.test.js +33 -0
  165. package/divider/Divider.d.ts +4 -0
  166. package/divider/Divider.js +36 -0
  167. package/divider/Divider.stories.tsx +224 -0
  168. package/divider/Divider.test.d.ts +1 -0
  169. package/divider/Divider.test.js +38 -0
  170. package/divider/types.d.ts +21 -0
  171. package/divider/types.js +5 -0
  172. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  173. package/dropdown/Dropdown.accessibility.test.js +183 -0
  174. package/dropdown/Dropdown.d.ts +1 -1
  175. package/dropdown/Dropdown.js +233 -330
  176. package/dropdown/Dropdown.stories.tsx +427 -0
  177. package/dropdown/Dropdown.test.d.ts +1 -0
  178. package/dropdown/Dropdown.test.js +628 -0
  179. package/dropdown/DropdownMenu.d.ts +4 -0
  180. package/dropdown/DropdownMenu.js +63 -0
  181. package/dropdown/DropdownMenuItem.d.ts +4 -0
  182. package/dropdown/DropdownMenuItem.js +71 -0
  183. package/dropdown/types.d.ts +38 -31
  184. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  185. package/file-input/FileInput.accessibility.test.js +167 -0
  186. package/file-input/FileInput.d.ts +2 -2
  187. package/file-input/FileInput.js +269 -342
  188. package/file-input/FileInput.stories.tsx +618 -0
  189. package/file-input/FileInput.test.d.ts +1 -0
  190. package/file-input/FileInput.test.js +404 -0
  191. package/file-input/FileItem.d.ts +4 -14
  192. package/file-input/FileItem.js +64 -121
  193. package/file-input/types.d.ts +52 -14
  194. package/flex/Flex.d.ts +4 -0
  195. package/flex/Flex.js +57 -0
  196. package/flex/Flex.stories.tsx +112 -0
  197. package/flex/types.d.ts +97 -0
  198. package/flex/types.js +5 -0
  199. package/footer/Footer.accessibility.test.d.ts +1 -0
  200. package/footer/Footer.accessibility.test.js +125 -0
  201. package/footer/Footer.d.ts +1 -1
  202. package/footer/Footer.js +74 -200
  203. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +96 -39
  204. package/footer/Footer.test.d.ts +1 -0
  205. package/footer/Footer.test.js +85 -0
  206. package/footer/Icons.d.ts +3 -0
  207. package/footer/Icons.js +54 -23
  208. package/footer/types.d.ts +40 -37
  209. package/grid/Grid.d.ts +7 -0
  210. package/grid/Grid.js +76 -0
  211. package/grid/Grid.stories.tsx +221 -0
  212. package/grid/types.d.ts +115 -0
  213. package/grid/types.js +5 -0
  214. package/header/Header.accessibility.test.d.ts +1 -0
  215. package/header/Header.accessibility.test.js +94 -0
  216. package/header/Header.d.ts +4 -3
  217. package/header/Header.js +105 -219
  218. package/header/Header.stories.tsx +169 -64
  219. package/header/Header.test.d.ts +1 -0
  220. package/header/Header.test.js +66 -0
  221. package/header/Icons.d.ts +2 -0
  222. package/header/Icons.js +5 -15
  223. package/header/types.d.ts +7 -21
  224. package/heading/Heading.accessibility.test.d.ts +1 -0
  225. package/heading/Heading.accessibility.test.js +33 -0
  226. package/heading/Heading.js +11 -33
  227. package/heading/Heading.stories.tsx +3 -2
  228. package/heading/Heading.test.d.ts +1 -0
  229. package/heading/Heading.test.js +156 -0
  230. package/heading/types.d.ts +7 -7
  231. package/icon/Icon.accessibility.test.d.ts +1 -0
  232. package/icon/Icon.accessibility.test.js +30 -0
  233. package/icon/Icon.d.ts +4 -0
  234. package/icon/Icon.js +33 -0
  235. package/icon/Icon.stories.tsx +28 -0
  236. package/icon/types.d.ts +4 -0
  237. package/icon/types.js +5 -0
  238. package/image/Image.accessibility.test.d.ts +1 -0
  239. package/image/Image.accessibility.test.js +56 -0
  240. package/image/Image.d.ts +4 -0
  241. package/image/Image.js +70 -0
  242. package/image/Image.stories.tsx +129 -0
  243. package/image/types.d.ts +72 -0
  244. package/image/types.js +5 -0
  245. package/inset/Inset.d.ts +3 -0
  246. package/inset/Inset.js +43 -0
  247. package/inset/Inset.stories.tsx +230 -0
  248. package/inset/types.d.ts +37 -0
  249. package/inset/types.js +5 -0
  250. package/layout/ApplicationLayout.d.ts +20 -0
  251. package/layout/ApplicationLayout.js +88 -186
  252. package/layout/ApplicationLayout.stories.tsx +162 -0
  253. package/layout/Icons.d.ts +7 -0
  254. package/layout/Icons.js +41 -48
  255. package/layout/types.d.ts +41 -0
  256. package/layout/types.js +5 -0
  257. package/link/Link.accessibility.test.d.ts +1 -0
  258. package/link/Link.accessibility.test.js +108 -0
  259. package/link/Link.d.ts +3 -2
  260. package/link/Link.js +65 -109
  261. package/link/Link.stories.tsx +161 -54
  262. package/link/Link.test.d.ts +1 -0
  263. package/link/Link.test.js +63 -0
  264. package/link/types.d.ts +15 -35
  265. package/main.d.ts +20 -14
  266. package/main.js +99 -98
  267. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  268. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  269. package/nav-tabs/NavTabs.d.ts +7 -0
  270. package/nav-tabs/NavTabs.js +108 -0
  271. package/nav-tabs/NavTabs.stories.tsx +294 -0
  272. package/nav-tabs/NavTabs.test.d.ts +1 -0
  273. package/nav-tabs/NavTabs.test.js +77 -0
  274. package/nav-tabs/NavTabsContext.d.ts +3 -0
  275. package/nav-tabs/NavTabsContext.js +8 -0
  276. package/nav-tabs/Tab.d.ts +4 -0
  277. package/nav-tabs/Tab.js +117 -0
  278. package/nav-tabs/types.d.ts +52 -0
  279. package/nav-tabs/types.js +5 -0
  280. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  281. package/number-input/NumberInput.accessibility.test.js +227 -0
  282. package/number-input/NumberInput.js +52 -49
  283. package/number-input/NumberInput.stories.tsx +39 -28
  284. package/number-input/NumberInput.test.d.ts +1 -0
  285. package/number-input/NumberInput.test.js +988 -0
  286. package/number-input/NumberInputContext.d.ts +3 -4
  287. package/number-input/NumberInputContext.js +3 -14
  288. package/number-input/types.d.ts +34 -15
  289. package/package.json +58 -52
  290. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  291. package/paginator/Paginator.accessibility.test.js +78 -0
  292. package/paginator/Paginator.js +47 -107
  293. package/paginator/Paginator.stories.tsx +24 -0
  294. package/paginator/Paginator.test.d.ts +1 -0
  295. package/paginator/Paginator.test.js +334 -0
  296. package/paginator/types.d.ts +3 -3
  297. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  298. package/paragraph/Paragraph.accessibility.test.js +28 -0
  299. package/paragraph/Paragraph.d.ts +5 -0
  300. package/paragraph/Paragraph.js +22 -0
  301. package/paragraph/Paragraph.stories.tsx +27 -0
  302. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  303. package/password-input/PasswordInput.accessibility.test.js +152 -0
  304. package/password-input/PasswordInput.js +65 -127
  305. package/password-input/PasswordInput.stories.tsx +13 -36
  306. package/password-input/PasswordInput.test.d.ts +1 -0
  307. package/password-input/PasswordInput.test.js +197 -0
  308. package/password-input/types.d.ts +32 -26
  309. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  310. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  311. package/progress-bar/ProgressBar.js +69 -93
  312. package/progress-bar/ProgressBar.stories.tsx +93 -0
  313. package/progress-bar/ProgressBar.test.d.ts +1 -0
  314. package/progress-bar/ProgressBar.test.js +93 -0
  315. package/progress-bar/types.d.ts +3 -3
  316. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  317. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  318. package/quick-nav/QuickNav.d.ts +4 -0
  319. package/quick-nav/QuickNav.js +94 -0
  320. package/quick-nav/QuickNav.stories.tsx +356 -0
  321. package/quick-nav/types.d.ts +21 -0
  322. package/quick-nav/types.js +5 -0
  323. package/radio-group/Radio.d.ts +4 -0
  324. package/radio-group/Radio.js +121 -0
  325. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  326. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  327. package/radio-group/RadioGroup.d.ts +4 -0
  328. package/radio-group/RadioGroup.js +233 -0
  329. package/radio-group/RadioGroup.stories.tsx +214 -0
  330. package/radio-group/RadioGroup.test.d.ts +1 -0
  331. package/radio-group/RadioGroup.test.js +754 -0
  332. package/radio-group/types.d.ts +114 -0
  333. package/radio-group/types.js +5 -0
  334. package/resultset-table/Icons.d.ts +7 -0
  335. package/resultset-table/Icons.js +47 -0
  336. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  337. package/resultset-table/ResultsetTable.accessibility.test.js +284 -0
  338. package/resultset-table/ResultsetTable.d.ts +7 -0
  339. package/resultset-table/ResultsetTable.js +195 -0
  340. package/resultset-table/ResultsetTable.stories.tsx +413 -0
  341. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  342. package/resultset-table/ResultsetTable.test.js +450 -0
  343. package/resultset-table/types.d.ts +101 -0
  344. package/resultset-table/types.js +5 -0
  345. package/select/Listbox.d.ts +4 -0
  346. package/select/Listbox.js +151 -0
  347. package/select/Option.d.ts +4 -0
  348. package/select/Option.js +89 -0
  349. package/select/Select.accessibility.test.d.ts +1 -0
  350. package/select/Select.accessibility.test.js +227 -0
  351. package/select/Select.d.ts +4 -0
  352. package/select/Select.js +251 -514
  353. package/select/Select.stories.tsx +611 -255
  354. package/select/Select.test.d.ts +1 -0
  355. package/select/Select.test.js +2267 -0
  356. package/select/types.d.ts +209 -0
  357. package/select/types.js +5 -0
  358. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  359. package/sidenav/Sidenav.accessibility.test.js +59 -0
  360. package/sidenav/Sidenav.d.ts +6 -5
  361. package/sidenav/Sidenav.js +137 -72
  362. package/sidenav/Sidenav.stories.tsx +246 -134
  363. package/sidenav/Sidenav.test.d.ts +1 -0
  364. package/sidenav/Sidenav.test.js +37 -0
  365. package/sidenav/SidenavContext.d.ts +5 -0
  366. package/sidenav/SidenavContext.js +13 -0
  367. package/sidenav/types.d.ts +52 -26
  368. package/slider/Slider.accessibility.test.d.ts +1 -0
  369. package/slider/Slider.accessibility.test.js +103 -0
  370. package/slider/Slider.d.ts +2 -2
  371. package/slider/Slider.js +148 -182
  372. package/slider/Slider.stories.tsx +68 -65
  373. package/slider/Slider.test.d.ts +1 -0
  374. package/slider/Slider.test.js +256 -0
  375. package/slider/types.d.ts +11 -3
  376. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  377. package/spinner/Spinner.accessibility.test.js +96 -0
  378. package/spinner/Spinner.js +35 -75
  379. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -26
  380. package/spinner/Spinner.test.d.ts +1 -0
  381. package/spinner/Spinner.test.js +55 -0
  382. package/spinner/types.d.ts +3 -3
  383. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  384. package/status-light/StatusLight.accessibility.test.js +157 -0
  385. package/status-light/StatusLight.d.ts +4 -0
  386. package/status-light/StatusLight.js +51 -0
  387. package/status-light/StatusLight.stories.tsx +74 -0
  388. package/status-light/StatusLight.test.d.ts +1 -0
  389. package/status-light/StatusLight.test.js +25 -0
  390. package/status-light/types.d.ts +17 -0
  391. package/status-light/types.js +5 -0
  392. package/switch/Switch.accessibility.test.d.ts +1 -0
  393. package/switch/Switch.accessibility.test.js +98 -0
  394. package/switch/Switch.d.ts +2 -2
  395. package/switch/Switch.js +147 -115
  396. package/switch/Switch.stories.tsx +57 -68
  397. package/switch/Switch.test.d.ts +1 -0
  398. package/switch/Switch.test.js +180 -0
  399. package/switch/types.d.ts +13 -5
  400. package/table/DropdownTheme.js +62 -0
  401. package/table/Table.accessibility.test.d.ts +1 -0
  402. package/table/Table.accessibility.test.js +92 -0
  403. package/table/Table.d.ts +6 -2
  404. package/table/Table.js +80 -37
  405. package/table/Table.stories.tsx +663 -0
  406. package/table/Table.test.d.ts +1 -0
  407. package/table/Table.test.js +111 -0
  408. package/table/types.d.ts +34 -6
  409. package/tabs/Tab.d.ts +4 -0
  410. package/tabs/Tab.js +117 -0
  411. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  412. package/tabs/Tabs.accessibility.test.js +56 -0
  413. package/tabs/Tabs.d.ts +1 -1
  414. package/tabs/Tabs.js +307 -147
  415. package/tabs/Tabs.stories.tsx +230 -0
  416. package/tabs/Tabs.test.d.ts +1 -0
  417. package/tabs/Tabs.test.js +276 -0
  418. package/tabs/types.d.ts +46 -24
  419. package/tag/Tag.accessibility.test.d.ts +1 -0
  420. package/tag/Tag.accessibility.test.js +69 -0
  421. package/tag/Tag.d.ts +1 -1
  422. package/tag/Tag.js +44 -86
  423. package/tag/Tag.stories.tsx +38 -31
  424. package/tag/Tag.test.d.ts +1 -0
  425. package/tag/Tag.test.js +41 -0
  426. package/tag/types.d.ts +25 -16
  427. package/text-input/Suggestion.d.ts +4 -0
  428. package/text-input/Suggestion.js +67 -0
  429. package/text-input/Suggestions.d.ts +4 -0
  430. package/text-input/Suggestions.js +94 -0
  431. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  432. package/text-input/TextInput.accessibility.test.js +320 -0
  433. package/text-input/TextInput.js +338 -552
  434. package/text-input/TextInput.stories.tsx +477 -0
  435. package/text-input/TextInput.test.d.ts +1 -0
  436. package/text-input/TextInput.test.js +1755 -0
  437. package/text-input/types.d.ts +82 -34
  438. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  439. package/textarea/Textarea.accessibility.test.js +155 -0
  440. package/textarea/Textarea.d.ts +4 -0
  441. package/textarea/Textarea.js +95 -177
  442. package/textarea/Textarea.stories.tsx +174 -0
  443. package/textarea/Textarea.test.d.ts +1 -0
  444. package/textarea/Textarea.test.js +406 -0
  445. package/textarea/types.d.ts +141 -0
  446. package/textarea/types.js +5 -0
  447. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  448. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  449. package/toggle-group/ToggleGroup.d.ts +4 -0
  450. package/toggle-group/ToggleGroup.js +99 -143
  451. package/toggle-group/ToggleGroup.stories.tsx +80 -40
  452. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  453. package/toggle-group/ToggleGroup.test.js +137 -0
  454. package/toggle-group/types.d.ts +114 -0
  455. package/toggle-group/types.js +5 -0
  456. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  457. package/tooltip/Tooltip.accessibility.test.js +144 -0
  458. package/tooltip/Tooltip.d.ts +4 -0
  459. package/tooltip/Tooltip.js +50 -0
  460. package/tooltip/Tooltip.stories.tsx +111 -0
  461. package/tooltip/Tooltip.test.d.ts +1 -0
  462. package/tooltip/Tooltip.test.js +112 -0
  463. package/tooltip/types.d.ts +16 -0
  464. package/tooltip/types.js +5 -0
  465. package/typography/Typography.accessibility.test.d.ts +1 -0
  466. package/typography/Typography.accessibility.test.js +339 -0
  467. package/typography/Typography.d.ts +4 -0
  468. package/typography/Typography.js +23 -0
  469. package/typography/Typography.stories.tsx +196 -0
  470. package/typography/Typography.test.js +23 -0
  471. package/typography/types.d.ts +18 -0
  472. package/typography/types.js +5 -0
  473. package/useTheme.d.ts +1168 -0
  474. package/useTheme.js +4 -11
  475. package/useTranslatedLabels.d.ts +85 -0
  476. package/useTranslatedLabels.js +14 -0
  477. package/utils/BaseTypography.d.ts +21 -0
  478. package/utils/BaseTypography.js +98 -0
  479. package/utils/FocusLock.d.ts +13 -0
  480. package/utils/FocusLock.js +125 -0
  481. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  482. package/wizard/Wizard.accessibility.test.js +55 -0
  483. package/wizard/Wizard.d.ts +1 -1
  484. package/wizard/Wizard.js +122 -114
  485. package/wizard/{Wizard.stories.jsx → Wizard.stories.tsx} +68 -20
  486. package/wizard/Wizard.test.d.ts +1 -0
  487. package/wizard/Wizard.test.js +114 -0
  488. package/wizard/types.d.ts +15 -15
  489. package/ThemeContext.js +0 -246
  490. package/V3Select/V3Select.js +0 -455
  491. package/V3Select/index.d.ts +0 -27
  492. package/V3Textarea/V3Textarea.js +0 -260
  493. package/V3Textarea/index.d.ts +0 -27
  494. package/card/ice-cream.jpg +0 -0
  495. package/chip/index.d.ts +0 -22
  496. package/common/OpenSans.css +0 -81
  497. package/common/RequiredComponent.js +0 -32
  498. package/common/fonts/OpenSans-Bold.ttf +0 -0
  499. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  500. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  501. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  502. package/common/fonts/OpenSans-Italic.ttf +0 -0
  503. package/common/fonts/OpenSans-Light.ttf +0 -0
  504. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  505. package/common/fonts/OpenSans-Regular.ttf +0 -0
  506. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  507. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  508. package/date/Date.js +0 -373
  509. package/date/index.d.ts +0 -27
  510. package/input-text/Icons.js +0 -22
  511. package/input-text/InputText.js +0 -611
  512. package/input-text/index.d.ts +0 -36
  513. package/number-input/numberInputContextTypes.d.ts +0 -19
  514. package/paginator/Icons.js +0 -66
  515. package/progress-bar/ProgressBar.stories.jsx +0 -58
  516. package/radio/Radio.d.ts +0 -4
  517. package/radio/Radio.js +0 -174
  518. package/radio/Radio.stories.tsx +0 -192
  519. package/radio/types.d.ts +0 -54
  520. package/resultsetTable/ResultsetTable.d.ts +0 -4
  521. package/resultsetTable/ResultsetTable.js +0 -249
  522. package/resultsetTable/types.d.ts +0 -63
  523. package/select/index.d.ts +0 -131
  524. package/table/Table.stories.jsx +0 -276
  525. package/textarea/Textarea.stories.jsx +0 -135
  526. package/textarea/index.d.ts +0 -117
  527. package/toggle/Toggle.js +0 -186
  528. package/toggle/index.d.ts +0 -21
  529. package/toggle-group/index.d.ts +0 -21
  530. package/upload/Upload.js +0 -201
  531. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  532. package/upload/buttons-upload/Icons.js +0 -40
  533. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  534. package/upload/dragAndDropArea/Icons.js +0 -39
  535. package/upload/file-upload/FileToUpload.js +0 -115
  536. package/upload/file-upload/Icons.js +0 -66
  537. package/upload/files-upload/FilesToUpload.js +0 -109
  538. package/upload/index.d.ts +0 -15
  539. package/upload/transaction/Icons.js +0 -160
  540. package/upload/transaction/Transaction.js +0 -104
  541. package/upload/transactions/Transactions.js +0 -94
  542. package/wizard/Icons.js +0 -65
  543. /package/{radio → action-icon}/types.js +0 -0
  544. /package/{resultsetTable → badge}/types.js +0 -0
  545. /package/{number-input/numberInputContextTypes.js → bleed/types.js} +0 -0
@@ -1,66 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.previousIcon = exports.nextIcon = exports.lastIcon = exports.firstIcon = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var firstIcon = /*#__PURE__*/_react["default"].createElement("svg", {
13
- xmlns: "http://www.w3.org/2000/svg",
14
- width: "12.41",
15
- height: "12",
16
- viewBox: "0 0 12.41 12"
17
- }, /*#__PURE__*/_react["default"].createElement("path", {
18
- id: "Path_2463",
19
- "data-name": "Path 2463",
20
- d: "M18.41,16.59,13.82,12l4.59-4.59L17,6l-6,6,6,6ZM6,6H8V18H6Z",
21
- transform: "translate(-6 -6)"
22
- }));
23
-
24
- exports.firstIcon = firstIcon;
25
-
26
- var previousIcon = /*#__PURE__*/_react["default"].createElement("svg", {
27
- xmlns: "http://www.w3.org/2000/svg",
28
- width: "7.41",
29
- height: "12",
30
- viewBox: "0 0 7.41 12"
31
- }, /*#__PURE__*/_react["default"].createElement("path", {
32
- id: "Path_2459",
33
- "data-name": "Path 2459",
34
- d: "M15.41,7.41,14,6,8,12l6,6,1.41-1.41L10.83,12Z",
35
- transform: "translate(-8 -6)"
36
- }));
37
-
38
- exports.previousIcon = previousIcon;
39
-
40
- var nextIcon = /*#__PURE__*/_react["default"].createElement("svg", {
41
- xmlns: "http://www.w3.org/2000/svg",
42
- width: "7.41",
43
- height: "12",
44
- viewBox: "0 0 7.41 12"
45
- }, /*#__PURE__*/_react["default"].createElement("path", {
46
- id: "Path_2461",
47
- "data-name": "Path 2461",
48
- d: "M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z",
49
- transform: "translate(-8.59 -6)"
50
- }));
51
-
52
- exports.nextIcon = nextIcon;
53
-
54
- var lastIcon = /*#__PURE__*/_react["default"].createElement("svg", {
55
- xmlns: "http://www.w3.org/2000/svg",
56
- width: "12.41",
57
- height: "12",
58
- viewBox: "0 0 12.41 12"
59
- }, /*#__PURE__*/_react["default"].createElement("path", {
60
- id: "Path_2465",
61
- "data-name": "Path 2465",
62
- d: "M5.59,7.41,10.18,12,5.59,16.59,7,18l6-6L7,6ZM16,6h2V18H16Z",
63
- transform: "translate(-5.59 -6)"
64
- }));
65
-
66
- exports.lastIcon = lastIcon;
@@ -1,58 +0,0 @@
1
- import React from "react";
2
- import DxcProgressBar from "./ProgressBar";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
-
6
- export default {
7
- title: "ProgressBar",
8
- component: DxcProgressBar,
9
- };
10
-
11
- export const Chromatic = () => (
12
- <>
13
- <ExampleContainer>
14
- <Title title="Without labels" theme="light" level={4} />
15
- <DxcProgressBar overlay={false} value={50} showValue />
16
- <Title title="With helperText" theme="light" level={4} />
17
- <DxcProgressBar helperText="Helper text" value={50} overlay={false} showValue />
18
- <Title title="Without default value" theme="light" level={4} />
19
- <DxcProgressBar label="Loading..." overlay={false} showValue />
20
- </ExampleContainer>
21
- <Title title="Margins" theme="light" level={2} />
22
- <ExampleContainer>
23
- <Title title="Xxsmall margin" theme="light" level={4} />
24
- <DxcProgressBar label="Margin xxsmall" margin="xxsmall" overlay={false} value={50} showValue />
25
- </ExampleContainer>
26
- <ExampleContainer>
27
- <Title title="Xsmall margin" theme="light" level={4} />
28
- <DxcProgressBar label="Margin xsmall" margin="xsmall" overlay={false} value={50} showValue />
29
- </ExampleContainer>
30
- <ExampleContainer>
31
- <Title title="Small margin" theme="light" level={4} />
32
- <DxcProgressBar label="Margin small" margin="small" overlay={false} value={50} showValue />
33
- </ExampleContainer>
34
- <ExampleContainer>
35
- <Title title="Medium margin" theme="light" level={4} />
36
- <DxcProgressBar label="Margin medium" margin="medium" overlay={false} value={50} showValue />
37
- </ExampleContainer>
38
- <ExampleContainer>
39
- <Title title="Large margin" theme="light" level={4} />
40
- <DxcProgressBar label="Margin large" margin="large" overlay={false} value={50} showValue />
41
- </ExampleContainer>
42
- <ExampleContainer>
43
- <Title title="Xlarge margin" theme="light" level={4} />
44
- <DxcProgressBar label="Margin xlarge" margin="xlarge" overlay={false} value={50} showValue />
45
- </ExampleContainer>
46
- <ExampleContainer>
47
- <Title title="XxLarge margin" theme="light" level={4} />
48
- <DxcProgressBar label="Margin xxlarge" margin="xxlarge" overlay={false} value={50} showValue />
49
- </ExampleContainer>
50
- </>
51
- );
52
-
53
- export const ProgressBarOverlay = () => (
54
- <ExampleContainer>
55
- <Title title="Overlay" theme="dark" level={4} />
56
- <DxcProgressBar label="Overlay" helperText="Helper text" showValue value={50} />
57
- </ExampleContainer>
58
- );
package/radio/Radio.d.ts DELETED
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import RadioPropsType from "./types";
3
- declare const DxcRadio: ({ checked, value, label, labelPosition, name, disabled, onClick, required, margin, size, }: RadioPropsType) => JSX.Element;
4
- export default DxcRadio;
package/radio/Radio.js DELETED
@@ -1,174 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _react = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
23
-
24
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _utils = require("../common/utils.js");
29
-
30
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
31
-
32
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
33
-
34
- var _templateObject, _templateObject2;
35
-
36
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
37
-
38
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
39
-
40
- var DxcRadio = function DxcRadio(_ref) {
41
- var _ref$checked = _ref.checked,
42
- checked = _ref$checked === void 0 ? false : _ref$checked,
43
- value = _ref.value,
44
- _ref$label = _ref.label,
45
- label = _ref$label === void 0 ? "" : _ref$label,
46
- _ref$labelPosition = _ref.labelPosition,
47
- labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
48
- name = _ref.name,
49
- _ref$disabled = _ref.disabled,
50
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
51
- onClick = _ref.onClick,
52
- _ref$required = _ref.required,
53
- required = _ref$required === void 0 ? false : _ref$required,
54
- margin = _ref.margin,
55
- _ref$size = _ref.size,
56
- size = _ref$size === void 0 ? "fitContent" : _ref$size;
57
-
58
- var _useState = (0, _react.useState)(false),
59
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
60
- innerChecked = _useState2[0],
61
- setInnerChecked = _useState2[1];
62
-
63
- var colorsTheme = (0, _useTheme["default"])();
64
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
65
-
66
- var handlerRadioChange = function handlerRadioChange() {
67
- if (checked == null) {
68
- setInnerChecked(true);
69
- }
70
-
71
- if (typeof onClick === "function") {
72
- onClick(true);
73
- }
74
- };
75
-
76
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
77
- theme: colorsTheme.radio
78
- }, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
79
- id: name,
80
- labelPosition: labelPosition,
81
- disabled: disabled,
82
- margin: margin,
83
- size: size,
84
- backgroundType: backgroundType
85
- }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
86
- checked: checked != null && checked || innerChecked,
87
- name: name,
88
- onClick: handlerRadioChange,
89
- value: value,
90
- disabled: disabled,
91
- disableRipple: true
92
- }), /*#__PURE__*/_react["default"].createElement(LabelContainer, {
93
- checked: checked || innerChecked,
94
- labelPosition: labelPosition,
95
- disabled: disabled,
96
- onClick: !disabled && handlerRadioChange || null,
97
- backgroundType: backgroundType
98
- }, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label)));
99
- };
100
-
101
- var sizes = {
102
- small: "120px",
103
- medium: "240px",
104
- large: "480px",
105
- fillParent: "100%",
106
- fitContent: "unset"
107
- };
108
-
109
- var calculateWidth = function calculateWidth(margin, size) {
110
- if (size === "fillParent") {
111
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
112
- }
113
-
114
- return sizes[size];
115
- };
116
-
117
- var RadioContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n\n display: inline-flex;\n align-items: center;\n max-height: 42px;\n position: relative;\n flex-direction: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n .MuiButtonBase-root {\n width: auto;\n height: auto;\n padding: 10px;\n margin: 2px;\n ", ": ", ";\n padding-left: ", ";\n padding-right: ", ";\n margin-left: ", ";\n margin-right: ", ";\n .MuiIconButton-label {\n .MuiSvgIcon-root {\n height: ", ";\n width: ", ";\n }\n color: ", ";\n\n > div > :nth-child(2) path {\n color: ", ";\n }\n }\n\n &.Mui-focusVisible {\n background-color: transparent;\n .MuiSvgIcon-root {\n outline: ", "\n auto 1px;\n }\n }\n :hover {\n background-color: transparent;\n }\n .MuiTouchRipple-ripple {\n height: 40px !important;\n width: 40px !important;\n top: 0px !important;\n left: 0px !important;\n }\n }\n .MuiRadio-colorSecondary.Mui-checked {\n color: ", ";\n :hover {\n background-color: transparent;\n }\n }\n"])), function (props) {
118
- return calculateWidth(props.margin, props.size);
119
- }, function (props) {
120
- return props.labelPosition === "before" ? "row-reverse" : "row";
121
- }, function (props) {
122
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
123
- }, function (props) {
124
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
125
- }, function (props) {
126
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
127
- }, function (props) {
128
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
129
- }, function (props) {
130
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
131
- }, function (props) {
132
- return props.disabled === true ? "not-allowed" : "default";
133
- }, function (props) {
134
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
135
- }, function (props) {
136
- return props.theme.circleLabelSpacing;
137
- }, function (props) {
138
- return props.labelPosition === "after" ? "0px" : "";
139
- }, function (props) {
140
- return props.labelPosition === "before" ? "0px" : "";
141
- }, function (props) {
142
- return props.labelPosition === "after" ? "0px" : "";
143
- }, function (props) {
144
- return props.labelPosition === "before" ? "0px" : "";
145
- }, function (props) {
146
- return props.theme.circleSize;
147
- }, function (props) {
148
- return props.theme.circleSize;
149
- }, function (props) {
150
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
151
- }, function (props) {
152
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
153
- }, function (props) {
154
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
155
- }, function (props) {
156
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
157
- });
158
-
159
- var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n color: ", ";\n cursor: ", ";\n"])), function (props) {
160
- return props.theme.fontFamily;
161
- }, function (props) {
162
- return props.theme.fontSize;
163
- }, function (props) {
164
- return props.theme.fontWeight;
165
- }, function (props) {
166
- return props.theme.fontStyle;
167
- }, function (props) {
168
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
169
- }, function (props) {
170
- return props.disabled === true ? "not-allowed" : "pointer";
171
- });
172
-
173
- var _default = DxcRadio;
174
- exports["default"] = _default;
@@ -1,192 +0,0 @@
1
- import React from "react";
2
- import DxcRadio from "./Radio";
3
- import { BackgroundColorProvider } from "../BackgroundColorContext";
4
- import Title from "../../.storybook/components/Title";
5
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
6
- import DarkContainer from "../../.storybook/components/DarkSection";
7
- import { userEvent, within } from "@storybook/testing-library";
8
-
9
- export default {
10
- title: "Radio",
11
- component: DxcRadio,
12
- };
13
-
14
- const Radio = () => (
15
- <>
16
- <>
17
- <ExampleContainer>
18
- <Title title="Default" theme="light" level={4} />
19
- <DxcRadio label="Radio" />
20
- </ExampleContainer>
21
- <ExampleContainer>
22
- <Title title="Focused" theme="light" level={4} />
23
- <DxcRadio label="Focused" />
24
- </ExampleContainer>
25
- <ExampleContainer>
26
- <Title title="Checked" theme="light" level={4} />
27
- <DxcRadio label="Radio" checked />
28
- </ExampleContainer>
29
- <ExampleContainer>
30
- <Title title="Required" theme="light" level={4} />
31
- <DxcRadio label="Radio" required />
32
- </ExampleContainer>
33
- <ExampleContainer>
34
- <Title title="Disabled and checked" theme="light" level={4} />
35
- <DxcRadio label="Radio" disabled checked />
36
- </ExampleContainer>
37
- <ExampleContainer>
38
- <Title title="Disabled and required" theme="light" level={4} />
39
- <DxcRadio label="Radio" disabled required />
40
- </ExampleContainer>
41
- <ExampleContainer>
42
- <Title title="Disabled, required and checked" theme="light" level={4} />
43
- <DxcRadio label="Radio" disabled required checked />
44
- </ExampleContainer>
45
- <ExampleContainer>
46
- <Title title="Label after" theme="light" level={4} />
47
- <DxcRadio label="Radio" labelPosition="after" />
48
- </ExampleContainer>
49
- <ExampleContainer>
50
- <Title title="Checked with label after" theme="light" level={4} />
51
- <DxcRadio label="Radio" checked labelPosition="after" />
52
- </ExampleContainer>
53
- <ExampleContainer>
54
- <Title title="Required with label after" theme="light" level={4} />
55
- <DxcRadio label="Radio" required labelPosition="after" />
56
- </ExampleContainer>
57
- <ExampleContainer>
58
- <Title title="Disabled and checked with label after" theme="light" level={4} />
59
- <DxcRadio label="Radio" disabled checked labelPosition="after" />
60
- </ExampleContainer>
61
- <ExampleContainer>
62
- <Title title="Disabled and required with label after" theme="light" level={4} />
63
- <DxcRadio label="Radio" disabled required labelPosition="after" />
64
- </ExampleContainer>
65
- <ExampleContainer>
66
- <Title title="Disabled, required and checked with label after" theme="light" level={4} />
67
- <DxcRadio label="Radio" disabled required checked labelPosition="after" />
68
- </ExampleContainer>
69
- <ExampleContainer pseudoState="pseudo-hover">
70
- <Title title="Hovered" theme="light" level={4} />
71
- <DxcRadio label="Hovered" />
72
- </ExampleContainer>
73
- <ExampleContainer pseudoState="pseudo-hover">
74
- <Title title="Hovered and checked" theme="light" level={4} />
75
- <DxcRadio label="Hovered" checked />
76
- </ExampleContainer>
77
- </>
78
- <BackgroundColorProvider color="#333333">
79
- <DarkContainer>
80
- <>
81
- <ExampleContainer>
82
- <Title title="Default" theme="dark" level={4} />
83
- <DxcRadio label="Radio" />
84
- </ExampleContainer>
85
- <ExampleContainer>
86
- <Title title="Checked" theme="dark" level={4} />
87
- <DxcRadio label="Radio" checked />
88
- </ExampleContainer>
89
- <ExampleContainer>
90
- <Title title="Required" theme="dark" level={4} />
91
- <DxcRadio label="Radio" required />
92
- </ExampleContainer>
93
- <ExampleContainer>
94
- <Title title="Disabled and checked" theme="dark" level={4} />
95
- <DxcRadio label="Radio" disabled checked />
96
- </ExampleContainer>
97
- <ExampleContainer>
98
- <Title title="Disabled and required" theme="dark" level={4} />
99
- <DxcRadio label="Radio" disabled required />
100
- </ExampleContainer>
101
- <ExampleContainer>
102
- <Title title="Disabled, required and checked" theme="dark" level={4} />
103
- <DxcRadio label="Radio" disabled required checked />
104
- </ExampleContainer>
105
- <ExampleContainer>
106
- <Title title="Label after" theme="dark" level={4} />
107
- <DxcRadio label="Radio" labelPosition="after" />
108
- </ExampleContainer>
109
- <ExampleContainer>
110
- <Title title="Checked with label after" theme="dark" level={4} />
111
- <DxcRadio label="Radio" checked labelPosition="after" />
112
- </ExampleContainer>
113
- <ExampleContainer>
114
- <Title title="Required with label after" theme="dark" level={4} />
115
- <DxcRadio label="Radio" required labelPosition="after" />
116
- </ExampleContainer>
117
- <ExampleContainer>
118
- <Title title="Disabled and checked with label after" theme="dark" level={4} />
119
- <DxcRadio label="Radio" disabled checked labelPosition="after" />
120
- </ExampleContainer>
121
- <ExampleContainer>
122
- <Title title="Disabled and required with label after" theme="dark" level={4} />
123
- <DxcRadio label="Radio" disabled required labelPosition="after" />
124
- </ExampleContainer>
125
- <ExampleContainer>
126
- <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
127
- <DxcRadio label="Radio" disabled required checked labelPosition="after" />
128
- </ExampleContainer>
129
- <ExampleContainer pseudoState="pseudo-hover">
130
- <Title title="Hovered" theme="dark" level={4} />
131
- <DxcRadio label="Hovered" />
132
- </ExampleContainer>
133
- <ExampleContainer pseudoState="pseudo-hover">
134
- <Title title="Hovered and checked" theme="dark" level={4} />
135
- <DxcRadio label="Hovered" checked />
136
- </ExampleContainer>
137
- </>
138
- </DarkContainer>
139
- </BackgroundColorProvider>
140
- <Title title="Sizes" theme="light" level={2} />
141
- <ExampleContainer>
142
- <DxcRadio label="Small" size="small" />
143
- </ExampleContainer>
144
- <ExampleContainer>
145
- <DxcRadio label="Medium" size="medium" />
146
- </ExampleContainer>
147
- <ExampleContainer>
148
- <DxcRadio label="Large" size="large" />
149
- </ExampleContainer>
150
- <ExampleContainer>
151
- <DxcRadio label="FitContent" size="fitContent" />
152
- </ExampleContainer>
153
- <ExampleContainer>
154
- <DxcRadio label="FillParent" size="fillParent" />
155
- </ExampleContainer>
156
- <Title title="Margins" theme="light" level={2} />
157
- <ExampleContainer>
158
- <Title title="Xxsmall" theme="light" level={4} />
159
- <DxcRadio label="Xxsmall" margin={"xxsmall"} />
160
- </ExampleContainer>
161
- <ExampleContainer>
162
- <Title title="Xsmall" theme="light" level={4} />
163
- <DxcRadio label="Xsmall" margin={"xsmall"} />
164
- </ExampleContainer>
165
- <ExampleContainer>
166
- <Title title="Small" theme="light" level={4} />
167
- <DxcRadio label="Small" margin={"small"} />
168
- </ExampleContainer>
169
- <ExampleContainer>
170
- <Title title="Medium" theme="light" level={4} />
171
- <DxcRadio label="Medium" margin={"medium"} />
172
- </ExampleContainer>
173
- <ExampleContainer>
174
- <Title title="Large" theme="light" level={4} />
175
- <DxcRadio label="Large" margin={"large"} />
176
- </ExampleContainer>
177
- <ExampleContainer>
178
- <Title title="Xlarge" theme="light" level={4} />
179
- <DxcRadio label="Xlarge" margin={"xlarge"} />
180
- </ExampleContainer>
181
- <ExampleContainer>
182
- <Title title="Xxlarge" theme="light" level={4} />
183
- <DxcRadio label="Xxlarge" margin={"xxlarge"} />
184
- </ExampleContainer>
185
- </>
186
- );
187
-
188
- export const Chromatic = Radio.bind({});
189
- Chromatic.play = async () => {
190
- await userEvent.tab();
191
- await userEvent.tab();
192
- };
package/radio/types.d.ts DELETED
@@ -1,54 +0,0 @@
1
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
- declare type Margin = {
3
- top?: Space;
4
- bottom?: Space;
5
- left?: Space;
6
- right?: Space;
7
- };
8
- declare type Props = {
9
- /**
10
- * If true, the radio is selected. If undefined the component will be uncontrolled
11
- * and the value will be managed internally by the component.
12
- */
13
- checked?: boolean;
14
- /**
15
- * Will be passed to the value attribute of the html input element. When inside a
16
- * form, this value will be only submitted if the radio is checked.
17
- */
18
- value?: string;
19
- /**
20
- * Text to be placed next to the radio.
21
- */
22
- label: string;
23
- /**
24
- * Whether the label should appear after or before the radio.
25
- */
26
- labelPosition?: "before" | "after";
27
- /**
28
- * Name attribute of the input element.
29
- */
30
- name?: string;
31
- /**
32
- * If true, the component will be disabled.
33
- */
34
- disabled?: boolean;
35
- /**
36
- * If true, the radio will change its appearence, showing that the value is required.
37
- */
38
- required?: boolean;
39
- /**
40
- * This function will be called when the user clicks the radio. The new value will
41
- * be passed as a parameter.
42
- */
43
- onClick?: (val: boolean) => void;
44
- /**
45
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
46
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
47
- */
48
- margin?: Space | Margin;
49
- /**
50
- * Size of the component.
51
- */
52
- size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
53
- };
54
- export default Props;
@@ -1,4 +0,0 @@
1
- /// <reference types="react" />
2
- import ResultsetTablePropsType from "./types";
3
- declare const DxcResultsetTable: ({ columns, rows, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
4
- export default DxcResultsetTable;