@dxc-technology/halstack-react 0.0.0-b0ab1e3 → 0.0.0-b0ec7b9

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 (527) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1276 -6
  4. package/HalstackContext.js +191 -114
  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 +101 -159
  10. package/accordion/Accordion.stories.tsx +82 -148
  11. package/accordion/Accordion.test.d.ts +1 -0
  12. package/accordion/Accordion.test.js +24 -40
  13. package/accordion/types.d.ts +6 -17
  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 +2 -2
  17. package/accordion-group/AccordionGroup.js +31 -98
  18. package/accordion-group/AccordionGroup.stories.tsx +94 -67
  19. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  20. package/accordion-group/AccordionGroup.test.js +49 -106
  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 +12 -17
  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 +40 -127
  37. package/alert/Alert.stories.tsx +28 -0
  38. package/alert/Alert.test.d.ts +1 -0
  39. package/alert/Alert.test.js +28 -45
  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 +1 -1
  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 +52 -2
  49. package/bar-chart/BarChart.d.ts +4 -0
  50. package/bar-chart/BarChart.js +152 -0
  51. package/bar-chart/BarChart.stories.tsx +281 -0
  52. package/bar-chart/BarChart.test.d.ts +1 -0
  53. package/bar-chart/BarChart.test.js +194 -0
  54. package/bar-chart/theme.d.ts +3 -0
  55. package/bar-chart/theme.js +31 -0
  56. package/bar-chart/types.d.ts +118 -0
  57. package/bleed/Bleed.js +14 -55
  58. package/bleed/Bleed.stories.tsx +95 -96
  59. package/bleed/types.d.ts +2 -2
  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 +1 -1
  63. package/box/Box.js +30 -81
  64. package/box/Box.stories.tsx +38 -51
  65. package/box/Box.test.d.ts +1 -0
  66. package/box/Box.test.js +1 -6
  67. package/box/types.d.ts +3 -14
  68. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  69. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  70. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  71. package/breadcrumbs/Breadcrumbs.js +79 -0
  72. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  73. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  74. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  75. package/breadcrumbs/Item.d.ts +4 -0
  76. package/breadcrumbs/Item.js +52 -0
  77. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  78. package/breadcrumbs/dropdownTheme.js +62 -0
  79. package/breadcrumbs/types.d.ts +40 -0
  80. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  81. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  82. package/bulleted-list/BulletedList.d.ts +7 -0
  83. package/bulleted-list/BulletedList.js +92 -0
  84. package/bulleted-list/BulletedList.stories.tsx +115 -0
  85. package/bulleted-list/types.d.ts +38 -0
  86. package/button/Button.accessibility.test.d.ts +1 -0
  87. package/button/Button.accessibility.test.js +127 -0
  88. package/button/Button.d.ts +1 -1
  89. package/button/Button.js +64 -115
  90. package/button/Button.stories.tsx +151 -100
  91. package/button/Button.test.d.ts +1 -0
  92. package/button/Button.test.js +19 -16
  93. package/button/types.d.ts +12 -8
  94. package/card/Card.accessibility.test.d.ts +1 -0
  95. package/card/Card.accessibility.test.js +36 -0
  96. package/card/Card.d.ts +1 -1
  97. package/card/Card.js +65 -107
  98. package/card/Card.stories.tsx +13 -43
  99. package/card/Card.test.d.ts +1 -0
  100. package/card/Card.test.js +10 -21
  101. package/card/types.d.ts +6 -11
  102. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  103. package/checkbox/Checkbox.accessibility.test.js +87 -0
  104. package/checkbox/Checkbox.d.ts +2 -2
  105. package/checkbox/Checkbox.js +140 -182
  106. package/checkbox/Checkbox.stories.tsx +128 -94
  107. package/checkbox/Checkbox.test.d.ts +1 -0
  108. package/checkbox/Checkbox.test.js +159 -38
  109. package/checkbox/types.d.ts +11 -3
  110. package/chip/Chip.accessibility.test.d.ts +1 -0
  111. package/chip/Chip.accessibility.test.js +67 -0
  112. package/chip/Chip.js +45 -80
  113. package/chip/Chip.stories.tsx +103 -27
  114. package/chip/Chip.test.d.ts +1 -0
  115. package/chip/Chip.test.js +17 -32
  116. package/chip/types.d.ts +4 -4
  117. package/common/coreTokens.d.ts +236 -0
  118. package/common/coreTokens.js +183 -0
  119. package/common/utils.d.ts +1 -0
  120. package/common/utils.js +6 -12
  121. package/common/variables.d.ts +1432 -0
  122. package/common/variables.js +1110 -1184
  123. package/container/Container.d.ts +4 -0
  124. package/container/Container.js +194 -0
  125. package/container/Container.stories.tsx +214 -0
  126. package/container/types.d.ts +176 -0
  127. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  128. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  129. package/contextual-menu/ContextualMenu.d.ts +5 -0
  130. package/contextual-menu/ContextualMenu.js +136 -0
  131. package/contextual-menu/ContextualMenu.stories.tsx +231 -0
  132. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  133. package/contextual-menu/ContextualMenu.test.js +247 -0
  134. package/contextual-menu/GroupItem.d.ts +4 -0
  135. package/contextual-menu/GroupItem.js +67 -0
  136. package/contextual-menu/ItemAction.d.ts +4 -0
  137. package/contextual-menu/ItemAction.js +88 -0
  138. package/contextual-menu/MenuItem.d.ts +4 -0
  139. package/contextual-menu/MenuItem.js +29 -0
  140. package/contextual-menu/SingleItem.d.ts +4 -0
  141. package/contextual-menu/SingleItem.js +38 -0
  142. package/contextual-menu/types.d.ts +65 -0
  143. package/date-input/Calendar.d.ts +4 -0
  144. package/date-input/Calendar.js +230 -0
  145. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  146. package/date-input/DateInput.accessibility.test.js +229 -0
  147. package/date-input/DateInput.js +158 -299
  148. package/date-input/DateInput.stories.tsx +210 -57
  149. package/date-input/DateInput.test.d.ts +1 -0
  150. package/date-input/DateInput.test.js +699 -370
  151. package/date-input/DatePicker.d.ts +4 -0
  152. package/date-input/DatePicker.js +121 -0
  153. package/date-input/YearPicker.d.ts +4 -0
  154. package/date-input/YearPicker.js +105 -0
  155. package/date-input/types.d.ts +72 -15
  156. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  157. package/dialog/Dialog.accessibility.test.js +69 -0
  158. package/dialog/Dialog.d.ts +1 -1
  159. package/dialog/Dialog.js +61 -106
  160. package/dialog/Dialog.stories.tsx +324 -167
  161. package/dialog/Dialog.test.d.ts +1 -0
  162. package/dialog/Dialog.test.js +349 -19
  163. package/dialog/types.d.ts +18 -25
  164. package/divider/Divider.accessibility.test.d.ts +1 -0
  165. package/divider/Divider.accessibility.test.js +33 -0
  166. package/divider/Divider.d.ts +4 -0
  167. package/divider/Divider.js +36 -0
  168. package/divider/Divider.stories.tsx +224 -0
  169. package/divider/Divider.test.d.ts +1 -0
  170. package/divider/Divider.test.js +38 -0
  171. package/divider/types.d.ts +21 -0
  172. package/divider/types.js +5 -0
  173. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  174. package/dropdown/Dropdown.accessibility.test.js +183 -0
  175. package/dropdown/Dropdown.d.ts +1 -1
  176. package/dropdown/Dropdown.js +213 -303
  177. package/dropdown/Dropdown.stories.tsx +236 -58
  178. package/dropdown/Dropdown.test.d.ts +1 -0
  179. package/dropdown/Dropdown.test.js +603 -164
  180. package/dropdown/DropdownMenu.d.ts +4 -0
  181. package/dropdown/DropdownMenu.js +63 -0
  182. package/dropdown/DropdownMenuItem.d.ts +4 -0
  183. package/dropdown/DropdownMenuItem.js +71 -0
  184. package/dropdown/types.d.ts +35 -19
  185. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  186. package/file-input/FileInput.accessibility.test.js +167 -0
  187. package/file-input/FileInput.d.ts +2 -2
  188. package/file-input/FileInput.js +243 -395
  189. package/file-input/FileInput.stories.tsx +123 -12
  190. package/file-input/FileInput.test.d.ts +1 -0
  191. package/file-input/FileInput.test.js +314 -367
  192. package/file-input/FileItem.d.ts +4 -14
  193. package/file-input/FileItem.js +61 -120
  194. package/file-input/types.d.ts +24 -11
  195. package/flex/Flex.d.ts +4 -0
  196. package/flex/Flex.js +57 -0
  197. package/flex/Flex.stories.tsx +112 -0
  198. package/flex/types.d.ts +97 -0
  199. package/flex/types.js +5 -0
  200. package/footer/Footer.accessibility.test.d.ts +1 -0
  201. package/footer/Footer.accessibility.test.js +125 -0
  202. package/footer/Footer.d.ts +1 -1
  203. package/footer/Footer.js +75 -118
  204. package/footer/Footer.stories.tsx +99 -21
  205. package/footer/Footer.test.d.ts +1 -0
  206. package/footer/Footer.test.js +32 -56
  207. package/footer/Icons.d.ts +3 -2
  208. package/footer/Icons.js +54 -23
  209. package/footer/types.d.ts +26 -27
  210. package/grid/Grid.d.ts +7 -0
  211. package/grid/Grid.js +76 -0
  212. package/grid/Grid.stories.tsx +221 -0
  213. package/grid/types.d.ts +115 -0
  214. package/grid/types.js +5 -0
  215. package/header/Header.accessibility.test.d.ts +1 -0
  216. package/header/Header.accessibility.test.js +94 -0
  217. package/header/Header.d.ts +4 -3
  218. package/header/Header.js +95 -185
  219. package/header/Header.stories.tsx +134 -39
  220. package/header/Header.test.d.ts +1 -0
  221. package/header/Header.test.js +12 -25
  222. package/header/Icons.d.ts +2 -2
  223. package/header/Icons.js +5 -15
  224. package/header/types.d.ts +7 -21
  225. package/heading/Heading.accessibility.test.d.ts +1 -0
  226. package/heading/Heading.accessibility.test.js +33 -0
  227. package/heading/Heading.js +10 -32
  228. package/heading/Heading.test.d.ts +1 -0
  229. package/heading/Heading.test.js +64 -94
  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.js +14 -55
  246. package/inset/Inset.stories.tsx +37 -36
  247. package/inset/types.d.ts +2 -2
  248. package/layout/ApplicationLayout.d.ts +16 -6
  249. package/layout/ApplicationLayout.js +86 -167
  250. package/layout/ApplicationLayout.stories.tsx +85 -94
  251. package/layout/Icons.d.ts +7 -0
  252. package/layout/Icons.js +41 -48
  253. package/layout/types.d.ts +19 -35
  254. package/link/Link.accessibility.test.d.ts +1 -0
  255. package/link/Link.accessibility.test.js +108 -0
  256. package/link/Link.d.ts +3 -2
  257. package/link/Link.js +65 -97
  258. package/link/Link.stories.tsx +157 -55
  259. package/link/Link.test.d.ts +1 -0
  260. package/link/Link.test.js +24 -52
  261. package/link/types.d.ts +15 -31
  262. package/main.d.ts +17 -13
  263. package/main.js +85 -101
  264. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  265. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  266. package/nav-tabs/NavTabs.d.ts +7 -0
  267. package/nav-tabs/NavTabs.js +108 -0
  268. package/nav-tabs/NavTabs.stories.tsx +294 -0
  269. package/nav-tabs/NavTabs.test.d.ts +1 -0
  270. package/nav-tabs/NavTabs.test.js +77 -0
  271. package/nav-tabs/NavTabsContext.d.ts +3 -0
  272. package/nav-tabs/NavTabsContext.js +8 -0
  273. package/nav-tabs/Tab.d.ts +4 -0
  274. package/nav-tabs/Tab.js +117 -0
  275. package/nav-tabs/types.d.ts +52 -0
  276. package/nav-tabs/types.js +5 -0
  277. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  278. package/number-input/NumberInput.accessibility.test.js +227 -0
  279. package/number-input/NumberInput.js +50 -37
  280. package/number-input/NumberInput.stories.tsx +37 -26
  281. package/number-input/NumberInput.test.d.ts +1 -0
  282. package/number-input/NumberInput.test.js +858 -376
  283. package/number-input/NumberInputContext.d.ts +3 -4
  284. package/number-input/NumberInputContext.js +3 -14
  285. package/number-input/types.d.ts +18 -6
  286. package/package.json +57 -52
  287. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  288. package/paginator/Paginator.accessibility.test.js +78 -0
  289. package/paginator/Paginator.js +46 -100
  290. package/paginator/Paginator.stories.tsx +24 -0
  291. package/paginator/Paginator.test.d.ts +1 -0
  292. package/paginator/Paginator.test.js +278 -210
  293. package/paginator/types.d.ts +3 -3
  294. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  295. package/paragraph/Paragraph.accessibility.test.js +28 -0
  296. package/paragraph/Paragraph.d.ts +5 -0
  297. package/paragraph/Paragraph.js +22 -0
  298. package/paragraph/Paragraph.stories.tsx +27 -0
  299. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  300. package/password-input/PasswordInput.accessibility.test.js +152 -0
  301. package/password-input/PasswordInput.js +62 -125
  302. package/password-input/PasswordInput.stories.tsx +11 -34
  303. package/password-input/PasswordInput.test.d.ts +1 -0
  304. package/password-input/PasswordInput.test.js +158 -142
  305. package/password-input/types.d.ts +9 -8
  306. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  307. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  308. package/progress-bar/ProgressBar.js +68 -92
  309. package/progress-bar/ProgressBar.stories.tsx +93 -0
  310. package/progress-bar/ProgressBar.test.d.ts +1 -0
  311. package/progress-bar/ProgressBar.test.js +71 -43
  312. package/progress-bar/types.d.ts +3 -3
  313. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  314. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  315. package/quick-nav/QuickNav.js +71 -41
  316. package/quick-nav/QuickNav.stories.tsx +146 -27
  317. package/quick-nav/types.d.ts +10 -10
  318. package/radio-group/Radio.d.ts +1 -1
  319. package/radio-group/Radio.js +59 -79
  320. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  321. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  322. package/radio-group/RadioGroup.js +74 -121
  323. package/radio-group/RadioGroup.stories.tsx +132 -18
  324. package/radio-group/RadioGroup.test.d.ts +1 -0
  325. package/radio-group/RadioGroup.test.js +518 -459
  326. package/radio-group/types.d.ts +10 -10
  327. package/resultset-table/Icons.d.ts +7 -0
  328. package/resultset-table/Icons.js +47 -0
  329. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  330. package/resultset-table/ResultsetTable.accessibility.test.js +284 -0
  331. package/resultset-table/ResultsetTable.d.ts +7 -0
  332. package/resultset-table/ResultsetTable.js +198 -0
  333. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +169 -31
  334. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  335. package/resultset-table/ResultsetTable.test.js +450 -0
  336. package/{resultsetTable → resultset-table}/types.d.ts +47 -13
  337. package/resultset-table/types.js +5 -0
  338. package/select/Listbox.d.ts +3 -3
  339. package/select/Listbox.js +73 -74
  340. package/select/Option.d.ts +3 -3
  341. package/select/Option.js +42 -59
  342. package/select/Select.accessibility.test.d.ts +1 -0
  343. package/select/Select.accessibility.test.js +227 -0
  344. package/select/Select.js +188 -360
  345. package/select/Select.stories.tsx +533 -187
  346. package/select/Select.test.d.ts +1 -0
  347. package/select/Select.test.js +1929 -1818
  348. package/select/selectUtils.d.ts +41 -0
  349. package/select/selectUtils.js +129 -0
  350. package/select/types.d.ts +17 -21
  351. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  352. package/sidenav/Sidenav.accessibility.test.js +59 -0
  353. package/sidenav/Sidenav.d.ts +6 -5
  354. package/sidenav/Sidenav.js +136 -71
  355. package/sidenav/Sidenav.stories.tsx +246 -151
  356. package/sidenav/Sidenav.test.d.ts +1 -0
  357. package/sidenav/Sidenav.test.js +25 -44
  358. package/sidenav/SidenavContext.d.ts +5 -0
  359. package/sidenav/SidenavContext.js +13 -0
  360. package/sidenav/types.d.ts +52 -26
  361. package/slider/Slider.accessibility.test.d.ts +1 -0
  362. package/slider/Slider.accessibility.test.js +103 -0
  363. package/slider/Slider.d.ts +2 -2
  364. package/slider/Slider.js +146 -181
  365. package/slider/Slider.stories.tsx +64 -61
  366. package/slider/Slider.test.d.ts +1 -0
  367. package/slider/Slider.test.js +194 -88
  368. package/slider/types.d.ts +7 -3
  369. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  370. package/spinner/Spinner.accessibility.test.js +96 -0
  371. package/spinner/Spinner.d.ts +1 -1
  372. package/spinner/Spinner.js +50 -109
  373. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  374. package/spinner/Spinner.test.d.ts +1 -0
  375. package/spinner/Spinner.test.js +25 -34
  376. package/spinner/types.d.ts +3 -3
  377. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  378. package/status-light/StatusLight.accessibility.test.js +157 -0
  379. package/status-light/StatusLight.d.ts +4 -0
  380. package/status-light/StatusLight.js +51 -0
  381. package/status-light/StatusLight.stories.tsx +74 -0
  382. package/status-light/StatusLight.test.d.ts +1 -0
  383. package/status-light/StatusLight.test.js +25 -0
  384. package/status-light/types.d.ts +17 -0
  385. package/status-light/types.js +5 -0
  386. package/switch/Switch.accessibility.test.d.ts +1 -0
  387. package/switch/Switch.accessibility.test.js +98 -0
  388. package/switch/Switch.d.ts +2 -2
  389. package/switch/Switch.js +147 -128
  390. package/switch/Switch.stories.tsx +49 -60
  391. package/switch/Switch.test.d.ts +1 -0
  392. package/switch/Switch.test.js +137 -55
  393. package/switch/types.d.ts +7 -3
  394. package/table/DropdownTheme.js +62 -0
  395. package/table/Table.accessibility.test.d.ts +1 -0
  396. package/table/Table.accessibility.test.js +92 -0
  397. package/table/Table.d.ts +6 -2
  398. package/table/Table.js +78 -35
  399. package/table/Table.stories.tsx +663 -0
  400. package/table/Table.test.d.ts +1 -0
  401. package/table/Table.test.js +92 -7
  402. package/table/types.d.ts +34 -6
  403. package/tabs/Tab.d.ts +4 -0
  404. package/tabs/Tab.js +117 -0
  405. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  406. package/tabs/Tabs.accessibility.test.js +56 -0
  407. package/tabs/Tabs.js +303 -141
  408. package/tabs/Tabs.stories.tsx +124 -12
  409. package/tabs/Tabs.test.d.ts +1 -0
  410. package/tabs/Tabs.test.js +212 -76
  411. package/tabs/types.d.ts +30 -20
  412. package/tag/Tag.accessibility.test.d.ts +1 -0
  413. package/tag/Tag.accessibility.test.js +69 -0
  414. package/tag/Tag.js +35 -67
  415. package/tag/Tag.stories.tsx +19 -9
  416. package/tag/Tag.test.d.ts +1 -0
  417. package/tag/Tag.test.js +17 -36
  418. package/tag/types.d.ts +9 -9
  419. package/text-input/Suggestion.d.ts +4 -0
  420. package/text-input/Suggestion.js +67 -0
  421. package/text-input/Suggestions.d.ts +4 -0
  422. package/text-input/Suggestions.js +94 -0
  423. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  424. package/text-input/TextInput.accessibility.test.js +320 -0
  425. package/text-input/TextInput.js +313 -557
  426. package/text-input/TextInput.stories.tsx +278 -275
  427. package/text-input/TextInput.test.d.ts +1 -0
  428. package/text-input/TextInput.test.js +1418 -1375
  429. package/text-input/types.d.ts +53 -14
  430. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  431. package/textarea/Textarea.accessibility.test.js +155 -0
  432. package/textarea/Textarea.js +76 -127
  433. package/textarea/Textarea.stories.tsx +174 -0
  434. package/textarea/Textarea.test.d.ts +1 -0
  435. package/textarea/Textarea.test.js +151 -182
  436. package/textarea/types.d.ts +10 -6
  437. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  438. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  439. package/toggle-group/ToggleGroup.d.ts +2 -2
  440. package/toggle-group/ToggleGroup.js +92 -108
  441. package/toggle-group/ToggleGroup.stories.tsx +53 -8
  442. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  443. package/toggle-group/ToggleGroup.test.js +68 -87
  444. package/toggle-group/types.d.ts +28 -19
  445. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  446. package/tooltip/Tooltip.accessibility.test.js +144 -0
  447. package/tooltip/Tooltip.d.ts +4 -0
  448. package/tooltip/Tooltip.js +50 -0
  449. package/tooltip/Tooltip.stories.tsx +111 -0
  450. package/tooltip/Tooltip.test.d.ts +1 -0
  451. package/tooltip/Tooltip.test.js +112 -0
  452. package/tooltip/types.d.ts +16 -0
  453. package/tooltip/types.js +5 -0
  454. package/typography/Typography.accessibility.test.d.ts +1 -0
  455. package/typography/Typography.accessibility.test.js +339 -0
  456. package/typography/Typography.d.ts +4 -0
  457. package/typography/Typography.js +23 -0
  458. package/typography/Typography.stories.tsx +196 -0
  459. package/typography/Typography.test.js +23 -0
  460. package/typography/types.d.ts +18 -0
  461. package/typography/types.js +5 -0
  462. package/useTheme.d.ts +1167 -1
  463. package/useTheme.js +2 -9
  464. package/useTranslatedLabels.d.ts +96 -0
  465. package/useTranslatedLabels.js +14 -0
  466. package/utils/BaseTypography.d.ts +21 -0
  467. package/utils/BaseTypography.js +98 -0
  468. package/utils/FocusLock.d.ts +13 -0
  469. package/utils/FocusLock.js +125 -0
  470. package/utils/useWidth.d.ts +2 -0
  471. package/utils/useWidth.js +30 -0
  472. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  473. package/wizard/Wizard.accessibility.test.js +55 -0
  474. package/wizard/Wizard.js +59 -110
  475. package/wizard/Wizard.stories.tsx +60 -2
  476. package/wizard/Wizard.test.d.ts +1 -0
  477. package/wizard/Wizard.test.js +53 -80
  478. package/wizard/types.d.ts +9 -9
  479. package/card/ice-cream.jpg +0 -0
  480. package/common/OpenSans.css +0 -81
  481. package/common/RequiredComponent.js +0 -32
  482. package/common/fonts/OpenSans-Bold.ttf +0 -0
  483. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  484. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  485. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  486. package/common/fonts/OpenSans-Italic.ttf +0 -0
  487. package/common/fonts/OpenSans-Light.ttf +0 -0
  488. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  489. package/common/fonts/OpenSans-Regular.ttf +0 -0
  490. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  491. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  492. package/list/List.d.ts +0 -4
  493. package/list/List.js +0 -47
  494. package/list/List.stories.tsx +0 -95
  495. package/list/types.d.ts +0 -7
  496. package/number-input/numberInputContextTypes.d.ts +0 -19
  497. package/paginator/Icons.js +0 -66
  498. package/progress-bar/ProgressBar.stories.jsx +0 -58
  499. package/radio/Radio.d.ts +0 -4
  500. package/radio/Radio.js +0 -173
  501. package/radio/Radio.stories.tsx +0 -192
  502. package/radio/Radio.test.js +0 -71
  503. package/radio/types.d.ts +0 -54
  504. package/resultsetTable/ResultsetTable.d.ts +0 -4
  505. package/resultsetTable/ResultsetTable.js +0 -254
  506. package/resultsetTable/ResultsetTable.test.js +0 -306
  507. package/row/Row.d.ts +0 -3
  508. package/row/Row.js +0 -127
  509. package/row/Row.stories.tsx +0 -237
  510. package/row/types.d.ts +0 -28
  511. package/select/Icons.d.ts +0 -10
  512. package/select/Icons.js +0 -93
  513. package/stack/Stack.d.ts +0 -3
  514. package/stack/Stack.js +0 -97
  515. package/stack/Stack.stories.tsx +0 -164
  516. package/stack/types.d.ts +0 -24
  517. package/table/Table.stories.jsx +0 -277
  518. package/text/Text.d.ts +0 -7
  519. package/text/Text.js +0 -30
  520. package/text/Text.stories.tsx +0 -19
  521. package/textarea/Textarea.stories.jsx +0 -157
  522. /package/{list → action-icon}/types.js +0 -0
  523. /package/{radio → bar-chart}/types.js +0 -0
  524. /package/{resultsetTable → breadcrumbs}/types.js +0 -0
  525. /package/{row → bulleted-list}/types.js +0 -0
  526. /package/{stack → container}/types.js +0 -0
  527. /package/{number-input/numberInputContextTypes.js → contextual-menu/types.js} +0 -0
@@ -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,173 +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"));
31
-
32
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
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
- var labelComponent = /*#__PURE__*/_react["default"].createElement(LabelContainer, {
77
- checked: checked || innerChecked,
78
- disabled: disabled,
79
- onClick: !disabled && handlerRadioChange || null,
80
- backgroundType: backgroundType
81
- }, required && /*#__PURE__*/_react["default"].createElement(_RequiredComponent["default"], null), label);
82
-
83
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
84
- theme: colorsTheme.radio
85
- }, /*#__PURE__*/_react["default"].createElement(RadioContainer, {
86
- id: name,
87
- labelPosition: labelPosition,
88
- disabled: disabled,
89
- margin: margin,
90
- size: size,
91
- backgroundType: backgroundType
92
- }, labelPosition === "before" && labelComponent, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
93
- checked: checked != null && checked || innerChecked,
94
- name: name,
95
- onClick: handlerRadioChange,
96
- value: value,
97
- disabled: disabled,
98
- disableRipple: true
99
- }), labelPosition === "after" && labelComponent));
100
- };
101
-
102
- var sizes = {
103
- small: "120px",
104
- medium: "240px",
105
- large: "480px",
106
- fillParent: "100%",
107
- fitContent: "unset"
108
- };
109
-
110
- var calculateWidth = function calculateWidth(margin, size) {
111
- if (size === "fillParent") {
112
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
113
- }
114
-
115
- return sizes[size];
116
- };
117
-
118
- 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 vertical-align: top;\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) {
119
- return calculateWidth(props.margin, props.size);
120
- }, function (props) {
121
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
122
- }, function (props) {
123
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
124
- }, function (props) {
125
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
126
- }, function (props) {
127
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
128
- }, function (props) {
129
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
130
- }, function (props) {
131
- return props.disabled === true ? "not-allowed" : "default";
132
- }, function (props) {
133
- return props.labelPosition === "after" ? "padding-right" : "padding-left";
134
- }, function (props) {
135
- return props.theme.circleLabelSpacing;
136
- }, function (props) {
137
- return props.labelPosition === "after" ? "0px" : "";
138
- }, function (props) {
139
- return props.labelPosition === "before" ? "0px" : "";
140
- }, function (props) {
141
- return props.labelPosition === "after" ? "0px" : "";
142
- }, function (props) {
143
- return props.labelPosition === "before" ? "0px" : "";
144
- }, function (props) {
145
- return props.theme.circleSize;
146
- }, function (props) {
147
- return props.theme.circleSize;
148
- }, function (props) {
149
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
150
- }, function (props) {
151
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
152
- }, function (props) {
153
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
154
- }, function (props) {
155
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
156
- });
157
-
158
- 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) {
159
- return props.theme.fontFamily;
160
- }, function (props) {
161
- return props.theme.fontSize;
162
- }, function (props) {
163
- return props.theme.fontWeight;
164
- }, function (props) {
165
- return props.theme.fontStyle;
166
- }, function (props) {
167
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledFontColorOnDark || props.theme.fontColorOnDark : props.disabled && props.theme.disabledFontColor || props.theme.fontColor;
168
- }, function (props) {
169
- return props.disabled === true ? "not-allowed" : "pointer";
170
- });
171
-
172
- var _default = DxcRadio;
173
- 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
- };
@@ -1,71 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@testing-library/react");
8
-
9
- var _Radio = _interopRequireDefault(require("./Radio"));
10
-
11
- describe("Radio component tests", function () {
12
- test("Radio renders correctly", function () {
13
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
14
- label: "Radio button"
15
- })),
16
- getByText = _render.getByText;
17
-
18
- expect(getByText("Radio button")).toBeTruthy();
19
- });
20
- test("Calls correct function on click", function () {
21
- var onClick = jest.fn();
22
-
23
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
24
- label: "Radio button",
25
- onClick: onClick
26
- })),
27
- getByText = _render2.getByText;
28
-
29
- _react2.fireEvent.click(getByText("Radio button"));
30
-
31
- expect(onClick).toHaveBeenCalled();
32
- expect(onClick).toHaveBeenCalledWith(true);
33
- });
34
- test("Controlled Radio", function () {
35
- var onClick = jest.fn();
36
-
37
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
38
- label: "Radio button",
39
- checked: false,
40
- onClick: onClick
41
- })),
42
- getByText = _render3.getByText,
43
- getByRole = _render3.getByRole;
44
-
45
- expect(getByRole("radio").checked).toBe(false);
46
-
47
- _react2.fireEvent.click(getByText("Radio button"));
48
-
49
- expect(onClick).toHaveBeenCalled();
50
- expect(onClick).toHaveBeenCalledWith(true);
51
- expect(getByRole("radio").checked).toBe(false);
52
- });
53
- test("Uncontrolled Radio", function () {
54
- var onClick = jest.fn();
55
-
56
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
57
- label: "Radio button",
58
- onClick: onClick
59
- })),
60
- getByText = _render4.getByText,
61
- getByRole = _render4.getByRole;
62
-
63
- expect(getByRole("radio").checked).toBe(false);
64
-
65
- _react2.fireEvent.click(getByText("Radio button"));
66
-
67
- expect(onClick).toHaveBeenCalled();
68
- expect(onClick).toHaveBeenCalledWith(true);
69
- expect(getByRole("radio").checked).toBe(false);
70
- });
71
- });
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, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
4
- export default DxcResultsetTable;