@dxc-technology/halstack-react 0.0.0-d30020b → 0.0.0-d3624d0

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 (443) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +5 -22
  3. package/HalstackContext.d.ts +1246 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.js +71 -0
  7. package/accordion/Accordion.d.ts +1 -1
  8. package/accordion/Accordion.js +105 -181
  9. package/accordion/Accordion.stories.tsx +83 -149
  10. package/accordion/Accordion.test.js +56 -0
  11. package/accordion/types.d.ts +10 -17
  12. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  13. package/accordion-group/AccordionGroup.d.ts +3 -3
  14. package/accordion-group/AccordionGroup.js +38 -107
  15. package/accordion-group/AccordionGroup.stories.tsx +95 -68
  16. package/accordion-group/AccordionGroup.test.js +98 -0
  17. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  18. package/accordion-group/AccordionGroupAccordion.js +31 -0
  19. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  20. package/accordion-group/AccordionGroupContext.js +8 -0
  21. package/accordion-group/types.d.ts +16 -17
  22. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  23. package/action-icon/ActionIcon.d.ts +4 -0
  24. package/action-icon/ActionIcon.js +48 -0
  25. package/action-icon/ActionIcon.stories.tsx +41 -0
  26. package/action-icon/ActionIcon.test.js +64 -0
  27. package/action-icon/types.d.ts +26 -0
  28. package/alert/Alert.accessibility.test.js +95 -0
  29. package/alert/Alert.js +40 -127
  30. package/alert/Alert.stories.tsx +28 -0
  31. package/alert/Alert.test.js +75 -0
  32. package/alert/types.d.ts +5 -5
  33. package/badge/Badge.accessibility.test.js +129 -0
  34. package/badge/Badge.d.ts +4 -0
  35. package/badge/Badge.js +142 -40
  36. package/badge/Badge.stories.tsx +210 -0
  37. package/badge/Badge.test.js +30 -0
  38. package/badge/types.d.ts +54 -0
  39. package/bleed/Bleed.js +14 -55
  40. package/bleed/Bleed.stories.tsx +95 -95
  41. package/bleed/types.d.ts +26 -2
  42. package/box/Box.accessibility.test.js +33 -0
  43. package/box/Box.d.ts +1 -1
  44. package/box/Box.js +30 -81
  45. package/box/Box.stories.tsx +38 -51
  46. package/box/Box.test.js +13 -0
  47. package/box/types.d.ts +3 -14
  48. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  49. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  50. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  51. package/breadcrumbs/Breadcrumbs.js +79 -0
  52. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  53. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  54. package/breadcrumbs/Breadcrumbs.test.js +169 -0
  55. package/breadcrumbs/Item.d.ts +4 -0
  56. package/breadcrumbs/Item.js +52 -0
  57. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  58. package/breadcrumbs/dropdownTheme.js +62 -0
  59. package/breadcrumbs/types.d.ts +16 -0
  60. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  61. package/bulleted-list/BulletedList.d.ts +7 -0
  62. package/bulleted-list/BulletedList.js +92 -0
  63. package/bulleted-list/BulletedList.stories.tsx +115 -0
  64. package/bulleted-list/types.d.ts +38 -0
  65. package/button/Button.accessibility.test.js +127 -0
  66. package/button/Button.d.ts +1 -1
  67. package/button/Button.js +63 -113
  68. package/button/Button.stories.tsx +151 -100
  69. package/button/Button.test.js +38 -0
  70. package/button/types.d.ts +12 -8
  71. package/card/Card.accessibility.test.js +36 -0
  72. package/card/Card.d.ts +1 -1
  73. package/card/Card.js +59 -102
  74. package/card/Card.stories.tsx +12 -42
  75. package/card/Card.test.js +39 -0
  76. package/card/types.d.ts +6 -11
  77. package/checkbox/Checkbox.accessibility.test.js +87 -0
  78. package/checkbox/Checkbox.d.ts +2 -2
  79. package/checkbox/Checkbox.js +143 -181
  80. package/checkbox/Checkbox.stories.tsx +166 -136
  81. package/checkbox/Checkbox.test.js +199 -0
  82. package/checkbox/types.d.ts +18 -6
  83. package/chip/Chip.accessibility.test.js +67 -0
  84. package/chip/Chip.js +45 -80
  85. package/chip/Chip.stories.tsx +107 -27
  86. package/chip/Chip.test.js +41 -0
  87. package/chip/types.d.ts +4 -4
  88. package/common/coreTokens.d.ts +237 -0
  89. package/common/coreTokens.js +184 -0
  90. package/common/utils.d.ts +1 -0
  91. package/common/utils.js +6 -12
  92. package/common/variables.d.ts +1392 -0
  93. package/common/variables.js +1080 -1427
  94. package/container/Container.d.ts +4 -0
  95. package/container/Container.js +194 -0
  96. package/container/Container.stories.tsx +214 -0
  97. package/container/types.d.ts +74 -0
  98. package/contextual-menu/ContextualMenu.accessibility.test.js +97 -0
  99. package/contextual-menu/ContextualMenu.d.ts +5 -0
  100. package/contextual-menu/ContextualMenu.js +88 -0
  101. package/contextual-menu/ContextualMenu.stories.tsx +232 -0
  102. package/contextual-menu/ContextualMenu.test.js +205 -0
  103. package/contextual-menu/GroupItem.d.ts +4 -0
  104. package/contextual-menu/GroupItem.js +67 -0
  105. package/contextual-menu/ItemAction.d.ts +4 -0
  106. package/contextual-menu/ItemAction.js +51 -0
  107. package/contextual-menu/MenuItem.d.ts +4 -0
  108. package/contextual-menu/MenuItem.js +29 -0
  109. package/contextual-menu/SingleItem.d.ts +4 -0
  110. package/contextual-menu/SingleItem.js +38 -0
  111. package/contextual-menu/types.d.ts +58 -0
  112. package/date-input/Calendar.d.ts +4 -0
  113. package/date-input/Calendar.js +214 -0
  114. package/date-input/DateInput.accessibility.test.js +228 -0
  115. package/date-input/DateInput.js +170 -306
  116. package/date-input/DateInput.stories.tsx +210 -56
  117. package/date-input/DateInput.test.js +808 -0
  118. package/date-input/DatePicker.d.ts +4 -0
  119. package/date-input/DatePicker.js +121 -0
  120. package/date-input/YearPicker.d.ts +4 -0
  121. package/date-input/YearPicker.js +100 -0
  122. package/date-input/types.d.ts +86 -22
  123. package/dialog/Dialog.accessibility.test.js +69 -0
  124. package/dialog/Dialog.d.ts +1 -1
  125. package/dialog/Dialog.js +56 -129
  126. package/dialog/Dialog.stories.tsx +326 -167
  127. package/dialog/Dialog.test.js +307 -0
  128. package/dialog/types.d.ts +18 -25
  129. package/divider/Divider.accessibility.test.js +33 -0
  130. package/divider/Divider.d.ts +4 -0
  131. package/divider/Divider.js +36 -0
  132. package/divider/Divider.stories.tsx +223 -0
  133. package/divider/Divider.test.js +38 -0
  134. package/divider/types.d.ts +21 -0
  135. package/divider/types.js +5 -0
  136. package/dropdown/Dropdown.accessibility.test.js +180 -0
  137. package/dropdown/Dropdown.d.ts +1 -1
  138. package/dropdown/Dropdown.js +233 -307
  139. package/dropdown/Dropdown.stories.tsx +235 -57
  140. package/dropdown/Dropdown.test.js +599 -0
  141. package/dropdown/DropdownMenu.d.ts +4 -0
  142. package/dropdown/DropdownMenu.js +63 -0
  143. package/dropdown/DropdownMenuItem.d.ts +4 -0
  144. package/dropdown/DropdownMenuItem.js +71 -0
  145. package/dropdown/types.d.ts +35 -19
  146. package/file-input/FileInput.accessibility.test.js +160 -0
  147. package/file-input/FileInput.d.ts +2 -2
  148. package/file-input/FileInput.js +246 -393
  149. package/file-input/FileInput.stories.tsx +123 -12
  150. package/file-input/FileInput.test.js +382 -0
  151. package/file-input/FileItem.d.ts +4 -14
  152. package/file-input/FileItem.js +61 -120
  153. package/file-input/types.d.ts +25 -8
  154. package/flex/Flex.d.ts +4 -0
  155. package/flex/Flex.js +57 -0
  156. package/flex/Flex.stories.tsx +112 -0
  157. package/flex/types.d.ts +97 -0
  158. package/flex/types.js +5 -0
  159. package/footer/Footer.accessibility.test.js +125 -0
  160. package/footer/Footer.d.ts +1 -1
  161. package/footer/Footer.js +73 -191
  162. package/footer/Footer.stories.tsx +99 -21
  163. package/footer/Footer.test.js +85 -0
  164. package/footer/Icons.d.ts +3 -2
  165. package/footer/Icons.js +54 -23
  166. package/footer/types.d.ts +26 -27
  167. package/grid/Grid.d.ts +7 -0
  168. package/grid/Grid.js +76 -0
  169. package/grid/Grid.stories.tsx +219 -0
  170. package/grid/types.d.ts +115 -0
  171. package/grid/types.js +5 -0
  172. package/header/Header.accessibility.test.js +93 -0
  173. package/header/Header.d.ts +4 -3
  174. package/header/Header.js +104 -218
  175. package/header/Header.stories.tsx +168 -63
  176. package/header/Header.test.js +66 -0
  177. package/header/Icons.d.ts +2 -2
  178. package/header/Icons.js +5 -15
  179. package/header/types.d.ts +7 -21
  180. package/heading/Heading.accessibility.test.js +33 -0
  181. package/heading/Heading.js +10 -32
  182. package/heading/Heading.test.js +169 -0
  183. package/heading/types.d.ts +7 -7
  184. package/icon/Icon.accessibility.test.js +30 -0
  185. package/icon/Icon.d.ts +4 -0
  186. package/icon/Icon.js +33 -0
  187. package/icon/Icon.stories.tsx +28 -0
  188. package/icon/types.d.ts +4 -0
  189. package/icon/types.js +5 -0
  190. package/image/Image.accessibility.test.js +56 -0
  191. package/image/Image.d.ts +4 -0
  192. package/image/Image.js +70 -0
  193. package/image/Image.stories.tsx +129 -0
  194. package/image/types.d.ts +72 -0
  195. package/image/types.js +5 -0
  196. package/inset/Inset.js +14 -55
  197. package/inset/Inset.stories.tsx +37 -36
  198. package/inset/types.d.ts +26 -2
  199. package/layout/ApplicationLayout.d.ts +16 -6
  200. package/layout/ApplicationLayout.js +88 -182
  201. package/layout/ApplicationLayout.stories.tsx +85 -94
  202. package/layout/Icons.d.ts +7 -0
  203. package/layout/Icons.js +41 -48
  204. package/layout/types.d.ts +19 -35
  205. package/link/Link.accessibility.test.js +108 -0
  206. package/link/Link.d.ts +3 -2
  207. package/link/Link.js +65 -101
  208. package/link/Link.stories.tsx +157 -55
  209. package/link/Link.test.js +63 -0
  210. package/link/types.d.ts +15 -31
  211. package/main.d.ts +19 -18
  212. package/main.js +84 -123
  213. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  214. package/nav-tabs/NavTabs.d.ts +7 -0
  215. package/nav-tabs/NavTabs.js +93 -0
  216. package/nav-tabs/NavTabs.stories.tsx +279 -0
  217. package/nav-tabs/NavTabs.test.js +77 -0
  218. package/nav-tabs/NavTabsContext.d.ts +3 -0
  219. package/nav-tabs/NavTabsContext.js +8 -0
  220. package/nav-tabs/Tab.d.ts +4 -0
  221. package/nav-tabs/Tab.js +117 -0
  222. package/nav-tabs/types.d.ts +52 -0
  223. package/nav-tabs/types.js +5 -0
  224. package/number-input/NumberInput.accessibility.test.js +228 -0
  225. package/number-input/NumberInput.js +47 -44
  226. package/number-input/NumberInput.stories.tsx +44 -28
  227. package/number-input/NumberInput.test.js +989 -0
  228. package/number-input/NumberInputContext.d.ts +3 -4
  229. package/number-input/NumberInputContext.js +3 -14
  230. package/number-input/types.d.ts +34 -15
  231. package/package.json +54 -53
  232. package/paginator/Paginator.accessibility.test.js +79 -0
  233. package/paginator/Paginator.js +46 -100
  234. package/paginator/Paginator.stories.tsx +24 -0
  235. package/paginator/Paginator.test.js +335 -0
  236. package/paginator/types.d.ts +3 -3
  237. package/paragraph/Paragraph.accessibility.test.js +28 -0
  238. package/paragraph/Paragraph.d.ts +5 -0
  239. package/paragraph/Paragraph.js +22 -0
  240. package/paragraph/Paragraph.stories.tsx +27 -0
  241. package/password-input/PasswordInput.accessibility.test.js +153 -0
  242. package/password-input/PasswordInput.js +58 -124
  243. package/password-input/PasswordInput.stories.tsx +1 -33
  244. package/password-input/PasswordInput.test.js +198 -0
  245. package/password-input/types.d.ts +21 -17
  246. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  247. package/progress-bar/ProgressBar.js +68 -92
  248. package/progress-bar/ProgressBar.stories.tsx +93 -0
  249. package/progress-bar/ProgressBar.test.js +93 -0
  250. package/progress-bar/types.d.ts +3 -3
  251. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  252. package/quick-nav/QuickNav.d.ts +4 -0
  253. package/quick-nav/QuickNav.js +94 -0
  254. package/quick-nav/QuickNav.stories.tsx +356 -0
  255. package/quick-nav/types.d.ts +21 -0
  256. package/quick-nav/types.js +5 -0
  257. package/radio-group/Radio.d.ts +1 -1
  258. package/radio-group/Radio.js +64 -80
  259. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  260. package/radio-group/RadioGroup.js +102 -139
  261. package/radio-group/RadioGroup.stories.tsx +171 -36
  262. package/radio-group/RadioGroup.test.js +691 -183
  263. package/radio-group/types.d.ts +89 -11
  264. package/resultset-table/Icons.d.ts +7 -0
  265. package/resultset-table/Icons.js +47 -0
  266. package/resultset-table/ResultsetTable.accessibility.test.js +285 -0
  267. package/resultset-table/ResultsetTable.d.ts +7 -0
  268. package/resultset-table/ResultsetTable.js +171 -0
  269. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +168 -30
  270. package/resultset-table/ResultsetTable.test.js +381 -0
  271. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  272. package/resultset-table/types.js +5 -0
  273. package/select/Listbox.d.ts +4 -0
  274. package/select/Listbox.js +155 -0
  275. package/select/Option.d.ts +4 -0
  276. package/select/Option.js +89 -0
  277. package/select/Select.accessibility.test.js +228 -0
  278. package/select/Select.js +243 -504
  279. package/select/Select.stories.tsx +602 -255
  280. package/select/Select.test.js +2265 -0
  281. package/select/types.d.ts +65 -26
  282. package/sidenav/Sidenav.accessibility.test.js +59 -0
  283. package/sidenav/Sidenav.d.ts +6 -5
  284. package/sidenav/Sidenav.js +136 -71
  285. package/sidenav/Sidenav.stories.tsx +246 -151
  286. package/sidenav/Sidenav.test.js +37 -0
  287. package/sidenav/SidenavContext.d.ts +5 -0
  288. package/sidenav/SidenavContext.js +13 -0
  289. package/sidenav/types.d.ts +52 -26
  290. package/slider/Slider.accessibility.test.js +104 -0
  291. package/slider/Slider.d.ts +2 -2
  292. package/slider/Slider.js +149 -180
  293. package/slider/Slider.test.js +254 -0
  294. package/slider/types.d.ts +11 -3
  295. package/spinner/Spinner.accessibility.test.js +96 -0
  296. package/spinner/Spinner.js +34 -74
  297. package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +53 -27
  298. package/spinner/Spinner.test.js +55 -0
  299. package/spinner/types.d.ts +3 -3
  300. package/status-light/StatusLight.accessibility.test.js +157 -0
  301. package/status-light/StatusLight.d.ts +4 -0
  302. package/status-light/StatusLight.js +51 -0
  303. package/status-light/StatusLight.stories.tsx +74 -0
  304. package/status-light/StatusLight.test.js +25 -0
  305. package/status-light/types.d.ts +17 -0
  306. package/status-light/types.js +5 -0
  307. package/switch/Switch.accessibility.test.js +98 -0
  308. package/switch/Switch.d.ts +2 -2
  309. package/switch/Switch.js +149 -114
  310. package/switch/Switch.stories.tsx +56 -67
  311. package/switch/Switch.test.js +180 -0
  312. package/switch/types.d.ts +13 -5
  313. package/table/DropdownTheme.js +62 -0
  314. package/table/Table.accessibility.test.js +93 -0
  315. package/table/Table.d.ts +6 -2
  316. package/table/Table.js +78 -35
  317. package/table/Table.stories.tsx +663 -0
  318. package/table/Table.test.js +113 -0
  319. package/table/types.d.ts +34 -6
  320. package/tabs/Tab.d.ts +4 -0
  321. package/tabs/Tab.js +117 -0
  322. package/tabs/Tabs.accessibility.test.js +56 -0
  323. package/tabs/Tabs.d.ts +1 -1
  324. package/tabs/Tabs.js +305 -145
  325. package/tabs/Tabs.stories.tsx +124 -14
  326. package/tabs/Tabs.test.js +276 -0
  327. package/tabs/types.d.ts +31 -17
  328. package/tag/Tag.accessibility.test.js +69 -0
  329. package/tag/Tag.js +42 -79
  330. package/tag/Tag.stories.tsx +24 -10
  331. package/tag/Tag.test.js +41 -0
  332. package/tag/types.d.ts +9 -9
  333. package/text-input/Suggestion.d.ts +4 -0
  334. package/text-input/Suggestion.js +67 -0
  335. package/text-input/Suggestions.d.ts +4 -0
  336. package/text-input/Suggestions.js +94 -0
  337. package/text-input/TextInput.accessibility.test.js +321 -0
  338. package/text-input/TextInput.js +334 -557
  339. package/text-input/TextInput.stories.tsx +291 -273
  340. package/text-input/TextInput.test.js +1756 -0
  341. package/text-input/types.d.ts +70 -24
  342. package/textarea/Textarea.accessibility.test.js +155 -0
  343. package/textarea/Textarea.js +86 -135
  344. package/textarea/Textarea.stories.tsx +174 -0
  345. package/textarea/Textarea.test.js +406 -0
  346. package/textarea/types.d.ts +27 -16
  347. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  348. package/toggle-group/ToggleGroup.d.ts +2 -2
  349. package/toggle-group/ToggleGroup.js +94 -106
  350. package/toggle-group/ToggleGroup.stories.tsx +56 -11
  351. package/toggle-group/ToggleGroup.test.js +137 -0
  352. package/toggle-group/types.d.ts +36 -19
  353. package/typography/Typography.accessibility.test.js +339 -0
  354. package/typography/Typography.d.ts +4 -0
  355. package/typography/Typography.js +23 -0
  356. package/typography/Typography.stories.tsx +198 -0
  357. package/typography/types.d.ts +18 -0
  358. package/typography/types.js +5 -0
  359. package/useTheme.d.ts +1144 -1
  360. package/useTheme.js +4 -11
  361. package/useTranslatedLabels.d.ts +85 -0
  362. package/useTranslatedLabels.js +14 -0
  363. package/utils/BaseTypography.d.ts +21 -0
  364. package/utils/BaseTypography.js +94 -0
  365. package/utils/FocusLock.d.ts +13 -0
  366. package/utils/FocusLock.js +124 -0
  367. package/wizard/Wizard.accessibility.test.js +55 -0
  368. package/wizard/Wizard.d.ts +1 -1
  369. package/wizard/Wizard.js +78 -120
  370. package/wizard/Wizard.stories.tsx +67 -19
  371. package/wizard/Wizard.test.js +114 -0
  372. package/wizard/types.d.ts +14 -10
  373. package/ThemeContext.d.ts +0 -15
  374. package/ThemeContext.js +0 -243
  375. package/V3Select/V3Select.js +0 -455
  376. package/V3Select/index.d.ts +0 -27
  377. package/V3Textarea/V3Textarea.js +0 -260
  378. package/V3Textarea/index.d.ts +0 -27
  379. package/card/ice-cream.jpg +0 -0
  380. package/common/OpenSans.css +0 -81
  381. package/common/RequiredComponent.js +0 -32
  382. package/common/fonts/OpenSans-Bold.ttf +0 -0
  383. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  384. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  385. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  386. package/common/fonts/OpenSans-Italic.ttf +0 -0
  387. package/common/fonts/OpenSans-Light.ttf +0 -0
  388. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  389. package/common/fonts/OpenSans-Regular.ttf +0 -0
  390. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  391. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  392. package/date/Date.js +0 -373
  393. package/date/index.d.ts +0 -27
  394. package/input-text/Icons.js +0 -22
  395. package/input-text/InputText.js +0 -611
  396. package/input-text/index.d.ts +0 -36
  397. package/list/List.d.ts +0 -4
  398. package/list/List.js +0 -47
  399. package/list/List.stories.tsx +0 -95
  400. package/list/types.d.ts +0 -7
  401. package/number-input/numberInputContextTypes.d.ts +0 -19
  402. package/paginator/Icons.js +0 -66
  403. package/progress-bar/ProgressBar.stories.jsx +0 -58
  404. package/radio/Radio.d.ts +0 -4
  405. package/radio/Radio.js +0 -174
  406. package/radio/Radio.stories.tsx +0 -192
  407. package/radio/types.d.ts +0 -54
  408. package/resultsetTable/ResultsetTable.d.ts +0 -4
  409. package/resultsetTable/ResultsetTable.js +0 -254
  410. package/row/Row.d.ts +0 -3
  411. package/row/Row.js +0 -127
  412. package/row/Row.stories.tsx +0 -237
  413. package/row/types.d.ts +0 -10
  414. package/slider/Slider.stories.tsx +0 -177
  415. package/stack/Stack.d.ts +0 -3
  416. package/stack/Stack.js +0 -97
  417. package/stack/Stack.stories.tsx +0 -164
  418. package/stack/types.d.ts +0 -9
  419. package/table/Table.stories.jsx +0 -277
  420. package/text/Text.d.ts +0 -7
  421. package/text/Text.js +0 -30
  422. package/text/Text.stories.tsx +0 -19
  423. package/textarea/Textarea.stories.jsx +0 -136
  424. package/toggle/Toggle.js +0 -186
  425. package/toggle/index.d.ts +0 -21
  426. package/upload/Upload.js +0 -201
  427. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  428. package/upload/buttons-upload/Icons.js +0 -40
  429. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  430. package/upload/dragAndDropArea/Icons.js +0 -39
  431. package/upload/file-upload/FileToUpload.js +0 -115
  432. package/upload/file-upload/Icons.js +0 -66
  433. package/upload/files-upload/FilesToUpload.js +0 -109
  434. package/upload/index.d.ts +0 -15
  435. package/upload/transaction/Icons.js +0 -160
  436. package/upload/transaction/Transaction.js +0 -104
  437. package/upload/transactions/Transactions.js +0 -94
  438. /package/{list → action-icon}/types.js +0 -0
  439. /package/{radio → badge}/types.js +0 -0
  440. /package/{resultsetTable → breadcrumbs}/types.js +0 -0
  441. /package/{row → bulleted-list}/types.js +0 -0
  442. /package/{stack → container}/types.js +0 -0
  443. /package/{number-input/numberInputContextTypes.js → contextual-menu/types.js} +0 -0
package/bleed/Bleed.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import styled from "styled-components";
3
3
  import Title from "../../.storybook/components/Title";
4
4
  import DxcBleed from "./Bleed";
5
- import DxcStack from "../stack/Stack";
5
+ import DxcFlex from "../flex/Flex";
6
6
 
7
7
  export default {
8
8
  title: "Bleed",
@@ -13,316 +13,316 @@ export const Chromatic = () => (
13
13
  <>
14
14
  <Title title="Space = none" theme="light" level={4} />
15
15
  <Container>
16
- <DxcStack gutter="medium">
16
+ <DxcFlex direction="column" gap="1.5rem">
17
17
  <Placeholder></Placeholder>
18
- <DxcBleed space="none">
18
+ <DxcBleed space="0rem">
19
19
  <Placeholder></Placeholder>
20
20
  </DxcBleed>
21
21
  <Placeholder></Placeholder>
22
- </DxcStack>
22
+ </DxcFlex>
23
23
  </Container>
24
24
  <Title title="Space = xxxsmall" theme="light" level={4} />
25
25
  <Container>
26
- <DxcStack gutter="medium">
26
+ <DxcFlex direction="column" gap="1.5rem">
27
27
  <Placeholder></Placeholder>
28
- <DxcBleed space="xxxsmall">
28
+ <DxcBleed space="0.125rem">
29
29
  <Placeholder></Placeholder>
30
30
  </DxcBleed>
31
31
  <Placeholder></Placeholder>
32
- </DxcStack>
32
+ </DxcFlex>
33
33
  </Container>
34
34
  <Title title="Space = xxsmall" theme="light" level={4} />
35
35
  <Container>
36
- <DxcStack gutter="medium">
36
+ <DxcFlex direction="column" gap="1.5rem">
37
37
  <Placeholder></Placeholder>
38
- <DxcBleed space="xxsmall">
38
+ <DxcBleed space="0.25rem">
39
39
  <Placeholder></Placeholder>
40
40
  </DxcBleed>
41
41
  <Placeholder></Placeholder>
42
- </DxcStack>
42
+ </DxcFlex>
43
43
  </Container>
44
44
  <Title title="Space = xsmall" theme="light" level={4} />
45
45
  <Container>
46
- <DxcStack gutter="medium">
46
+ <DxcFlex direction="column" gap="1.5rem">
47
47
  <Placeholder></Placeholder>
48
- <DxcBleed space="xsmall">
48
+ <DxcBleed space="0.5rem">
49
49
  <Placeholder></Placeholder>
50
50
  </DxcBleed>
51
51
  <Placeholder></Placeholder>
52
- </DxcStack>
52
+ </DxcFlex>
53
53
  </Container>
54
54
  <Title title="Space = small" theme="light" level={4} />
55
55
  <Container>
56
- <DxcStack gutter="medium">
56
+ <DxcFlex direction="column" gap="1.5rem">
57
57
  <Placeholder></Placeholder>
58
- <DxcBleed space="small">
58
+ <DxcBleed space="1rem">
59
59
  <Placeholder></Placeholder>
60
60
  </DxcBleed>
61
61
  <Placeholder></Placeholder>
62
- </DxcStack>
62
+ </DxcFlex>
63
63
  </Container>
64
64
  <Title title="Space = medium" theme="light" level={4} />
65
65
  <Container>
66
- <DxcStack gutter="medium">
66
+ <DxcFlex direction="column" gap="1.5rem">
67
67
  <Placeholder></Placeholder>
68
- <DxcBleed space="medium">
68
+ <DxcBleed space="1.5rem">
69
69
  <Placeholder></Placeholder>
70
70
  </DxcBleed>
71
71
  <Placeholder></Placeholder>
72
- </DxcStack>
72
+ </DxcFlex>
73
73
  </Container>
74
74
  <Title title="Space = large" theme="light" level={4} />
75
75
  <Container>
76
- <DxcStack gutter="medium">
76
+ <DxcFlex direction="column" gap="1.5rem">
77
77
  <Placeholder></Placeholder>
78
- <DxcBleed space="large">
78
+ <DxcBleed space="2rem">
79
79
  <Placeholder></Placeholder>
80
80
  </DxcBleed>
81
81
  <Placeholder></Placeholder>
82
- </DxcStack>
82
+ </DxcFlex>
83
83
  </Container>
84
84
  <Title title="Space = xlarge" theme="light" level={4} />
85
85
  <Container>
86
- <DxcStack gutter="medium">
86
+ <DxcFlex direction="column" gap="1.5rem">
87
87
  <Placeholder></Placeholder>
88
- <DxcBleed space="xlarge">
88
+ <DxcBleed space="3rem">
89
89
  <Placeholder></Placeholder>
90
90
  </DxcBleed>
91
91
  <Placeholder></Placeholder>
92
- </DxcStack>
92
+ </DxcFlex>
93
93
  </Container>
94
94
  <Title title="Space = xxlarge" theme="light" level={4} />
95
95
  <Container>
96
- <DxcStack gutter="medium">
96
+ <DxcFlex direction="column" gap="1.5rem">
97
97
  <Placeholder></Placeholder>
98
- <DxcBleed space="xxlarge">
98
+ <DxcBleed space="4rem">
99
99
  <Placeholder></Placeholder>
100
100
  </DxcBleed>
101
101
  <Placeholder></Placeholder>
102
- </DxcStack>
102
+ </DxcFlex>
103
103
  </Container>
104
104
  <Title title="Space = xxxlarge" theme="light" level={4} />
105
105
  <Container>
106
- <DxcStack gutter="medium">
106
+ <DxcFlex direction="column" gap="1.5rem">
107
107
  <Placeholder></Placeholder>
108
- <DxcBleed space="xxxlarge">
108
+ <DxcBleed space="5rem">
109
109
  <Placeholder></Placeholder>
110
110
  </DxcBleed>
111
111
  <Placeholder></Placeholder>
112
- </DxcStack>
112
+ </DxcFlex>
113
113
  </Container>
114
114
 
115
115
  <Title title="Horizontal = none" theme="light" level={4} />
116
116
  <Container>
117
- <DxcStack gutter="medium">
117
+ <DxcFlex direction="column" gap="1.5rem">
118
118
  <Placeholder></Placeholder>
119
- <DxcBleed horizontal="none">
119
+ <DxcBleed horizontal="0rem">
120
120
  <Placeholder></Placeholder>
121
121
  </DxcBleed>
122
122
  <Placeholder></Placeholder>
123
- </DxcStack>
123
+ </DxcFlex>
124
124
  </Container>
125
125
  <Title title="Horizontal = xxxsmall" theme="light" level={4} />
126
126
  <Container>
127
- <DxcStack gutter="medium">
127
+ <DxcFlex direction="column" gap="1.5rem">
128
128
  <Placeholder></Placeholder>
129
- <DxcBleed horizontal="xxxsmall">
129
+ <DxcBleed horizontal="0.125rem">
130
130
  <Placeholder></Placeholder>
131
131
  </DxcBleed>
132
132
  <Placeholder></Placeholder>
133
- </DxcStack>
133
+ </DxcFlex>
134
134
  </Container>
135
135
  <Title title="Horizontal = xxsmall" theme="light" level={4} />
136
136
  <Container>
137
- <DxcStack gutter="medium">
137
+ <DxcFlex direction="column" gap="1.5rem">
138
138
  <Placeholder></Placeholder>
139
- <DxcBleed horizontal="xxsmall">
139
+ <DxcBleed horizontal="0.25rem">
140
140
  <Placeholder></Placeholder>
141
141
  </DxcBleed>
142
142
  <Placeholder></Placeholder>
143
- </DxcStack>
143
+ </DxcFlex>
144
144
  </Container>
145
145
  <Title title="Horizontal = xsmall" theme="light" level={4} />
146
146
  <Container>
147
- <DxcStack gutter="medium">
147
+ <DxcFlex direction="column" gap="1.5rem">
148
148
  <Placeholder></Placeholder>
149
- <DxcBleed horizontal="xsmall">
149
+ <DxcBleed horizontal="0.5rem">
150
150
  <Placeholder></Placeholder>
151
151
  </DxcBleed>
152
152
  <Placeholder></Placeholder>
153
- </DxcStack>
153
+ </DxcFlex>
154
154
  </Container>
155
155
  <Title title="Horizontal = small" theme="light" level={4} />
156
156
  <Container>
157
- <DxcStack gutter="medium">
157
+ <DxcFlex direction="column" gap="1.5rem">
158
158
  <Placeholder></Placeholder>
159
- <DxcBleed horizontal="small">
159
+ <DxcBleed horizontal="1rem">
160
160
  <Placeholder></Placeholder>
161
161
  </DxcBleed>
162
162
  <Placeholder></Placeholder>
163
- </DxcStack>
163
+ </DxcFlex>
164
164
  </Container>
165
165
  <Title title="Horizontal = medium" theme="light" level={4} />
166
166
  <Container>
167
- <DxcStack gutter="medium">
167
+ <DxcFlex direction="column" gap="1.5rem">
168
168
  <Placeholder></Placeholder>
169
- <DxcBleed horizontal="medium">
169
+ <DxcBleed horizontal="1.5rem">
170
170
  <Placeholder></Placeholder>
171
171
  </DxcBleed>
172
172
  <Placeholder></Placeholder>
173
- </DxcStack>
173
+ </DxcFlex>
174
174
  </Container>
175
175
  <Title title="Horizontal = large" theme="light" level={4} />
176
176
  <Container>
177
- <DxcStack gutter="medium">
177
+ <DxcFlex direction="column" gap="1.5rem">
178
178
  <Placeholder></Placeholder>
179
- <DxcBleed horizontal="large">
179
+ <DxcBleed horizontal="2rem">
180
180
  <Placeholder></Placeholder>
181
181
  </DxcBleed>
182
182
  <Placeholder></Placeholder>
183
- </DxcStack>
183
+ </DxcFlex>
184
184
  </Container>
185
185
  <Title title="Horizontal = xlarge" theme="light" level={4} />
186
186
  <Container>
187
- <DxcStack gutter="medium">
187
+ <DxcFlex direction="column" gap="1.5rem">
188
188
  <Placeholder></Placeholder>
189
- <DxcBleed horizontal="xlarge">
189
+ <DxcBleed horizontal="3rem">
190
190
  <Placeholder></Placeholder>
191
191
  </DxcBleed>
192
192
  <Placeholder></Placeholder>
193
- </DxcStack>
193
+ </DxcFlex>
194
194
  </Container>
195
195
  <Title title="Horizontal = xxlarge" theme="light" level={4} />
196
196
  <Container>
197
- <DxcStack gutter="medium">
197
+ <DxcFlex direction="column" gap="1.5rem">
198
198
  <Placeholder></Placeholder>
199
- <DxcBleed horizontal="xxlarge">
199
+ <DxcBleed horizontal="4rem">
200
200
  <Placeholder></Placeholder>
201
201
  </DxcBleed>
202
202
  <Placeholder></Placeholder>
203
- </DxcStack>
203
+ </DxcFlex>
204
204
  </Container>
205
205
  <Title title="Horizontal = xxxlarge" theme="light" level={4} />
206
206
  <Container>
207
- <DxcStack gutter="medium">
207
+ <DxcFlex direction="column" gap="1.5rem">
208
208
  <Placeholder></Placeholder>
209
- <DxcBleed horizontal="xxxlarge">
209
+ <DxcBleed horizontal="5rem">
210
210
  <Placeholder></Placeholder>
211
211
  </DxcBleed>
212
212
  <Placeholder></Placeholder>
213
- </DxcStack>
213
+ </DxcFlex>
214
214
  </Container>
215
215
 
216
216
  <Title title="Vertical = none" theme="light" level={4} />
217
217
  <Container>
218
- <DxcStack gutter="medium">
218
+ <DxcFlex direction="column" gap="1.5rem">
219
219
  <Placeholder></Placeholder>
220
- <DxcBleed vertical="none">
220
+ <DxcBleed vertical="0rem">
221
221
  <Placeholder></Placeholder>
222
222
  </DxcBleed>
223
223
  <Placeholder></Placeholder>
224
- </DxcStack>
224
+ </DxcFlex>
225
225
  </Container>
226
226
  <Title title="Vertical = xxxsmall" theme="light" level={4} />
227
227
  <Container>
228
- <DxcStack gutter="medium">
228
+ <DxcFlex direction="column" gap="1.5rem">
229
229
  <Placeholder></Placeholder>
230
- <DxcBleed vertical="xxxsmall">
230
+ <DxcBleed vertical="0.125rem">
231
231
  <Placeholder></Placeholder>
232
232
  </DxcBleed>
233
233
  <Placeholder></Placeholder>
234
- </DxcStack>
234
+ </DxcFlex>
235
235
  </Container>
236
236
  <Title title="Vertical = xxsmall" theme="light" level={4} />
237
237
  <Container>
238
- <DxcStack gutter="medium">
238
+ <DxcFlex direction="column" gap="1.5rem">
239
239
  <Placeholder></Placeholder>
240
- <DxcBleed vertical="xxsmall">
240
+ <DxcBleed vertical="0.25rem">
241
241
  <Placeholder></Placeholder>
242
242
  </DxcBleed>
243
243
  <Placeholder></Placeholder>
244
- </DxcStack>
244
+ </DxcFlex>
245
245
  </Container>
246
246
  <Title title="Vertical = xsmall" theme="light" level={4} />
247
247
  <Container>
248
- <DxcStack gutter="medium">
248
+ <DxcFlex direction="column" gap="1.5rem">
249
249
  <Placeholder></Placeholder>
250
- <DxcBleed vertical="xsmall">
250
+ <DxcBleed vertical="0.5rem">
251
251
  <Placeholder></Placeholder>
252
252
  </DxcBleed>
253
253
  <Placeholder></Placeholder>
254
- </DxcStack>
254
+ </DxcFlex>
255
255
  </Container>
256
256
  <Title title="Vertical = small" theme="light" level={4} />
257
257
  <Container>
258
- <DxcStack gutter="medium">
258
+ <DxcFlex direction="column" gap="1.5rem">
259
259
  <Placeholder></Placeholder>
260
- <DxcBleed vertical="small">
260
+ <DxcBleed vertical="1rem">
261
261
  <Placeholder></Placeholder>
262
262
  </DxcBleed>
263
263
  <Placeholder></Placeholder>
264
- </DxcStack>
264
+ </DxcFlex>
265
265
  </Container>
266
266
  <Title title="Vertical = medium" theme="light" level={4} />
267
267
  <Container>
268
- <DxcStack gutter="medium">
268
+ <DxcFlex direction="column" gap="1.5rem">
269
269
  <Placeholder></Placeholder>
270
- <DxcBleed vertical="medium">
270
+ <DxcBleed vertical="1.5rem">
271
271
  <Placeholder></Placeholder>
272
272
  </DxcBleed>
273
273
  <Placeholder></Placeholder>
274
- </DxcStack>
274
+ </DxcFlex>
275
275
  </Container>
276
276
  <Title title="Vertical = large" theme="light" level={4} />
277
277
  <Container>
278
- <DxcStack gutter="medium">
278
+ <DxcFlex direction="column" gap="1.5rem">
279
279
  <Placeholder></Placeholder>
280
- <DxcBleed vertical="large">
280
+ <DxcBleed vertical="2rem">
281
281
  <Placeholder></Placeholder>
282
282
  </DxcBleed>
283
283
  <Placeholder></Placeholder>
284
- </DxcStack>
284
+ </DxcFlex>
285
285
  </Container>
286
286
  <Title title="Vertical = xlarge" theme="light" level={4} />
287
287
  <Container>
288
- <DxcStack gutter="medium">
288
+ <DxcFlex direction="column" gap="1.5rem">
289
289
  <Placeholder></Placeholder>
290
- <DxcBleed vertical="xlarge">
290
+ <DxcBleed vertical="3rem">
291
291
  <Placeholder></Placeholder>
292
292
  </DxcBleed>
293
293
  <Placeholder></Placeholder>
294
- </DxcStack>
294
+ </DxcFlex>
295
295
  </Container>
296
296
  <Title title="Vertical = xxlarge" theme="light" level={4} />
297
297
  <Container>
298
- <DxcStack gutter="medium">
298
+ <DxcFlex direction="column" gap="1.5rem">
299
299
  <Placeholder></Placeholder>
300
- <DxcBleed vertical="xxlarge">
300
+ <DxcBleed vertical="4rem">
301
301
  <Placeholder></Placeholder>
302
302
  </DxcBleed>
303
303
  <Placeholder></Placeholder>
304
- </DxcStack>
304
+ </DxcFlex>
305
305
  </Container>
306
306
  <Title title="Vertical = xxxlarge" theme="light" level={4} />
307
307
  <Container>
308
- <DxcStack gutter="medium">
308
+ <DxcFlex direction="column" gap="1.5rem">
309
309
  <Placeholder></Placeholder>
310
- <DxcBleed vertical="xxxlarge">
310
+ <DxcBleed vertical="5rem">
311
311
  <Placeholder></Placeholder>
312
312
  </DxcBleed>
313
313
  <Placeholder></Placeholder>
314
- </DxcStack>
314
+ </DxcFlex>
315
315
  </Container>
316
316
 
317
317
  <Title title="Top = xsmall, right = small, bottom = medium and left = large" theme="light" level={4} />
318
318
  <Container>
319
- <DxcStack gutter="medium">
319
+ <DxcFlex direction="column" gap="1.5rem">
320
320
  <Placeholder></Placeholder>
321
- <DxcBleed top="xsmall" right="small" bottom="medium" left="large">
321
+ <DxcBleed top="0.5rem" right="1rem" bottom="1.5rem" left="2rem">
322
322
  <Placeholder></Placeholder>
323
323
  </DxcBleed>
324
324
  <Placeholder></Placeholder>
325
- </DxcStack>
325
+ </DxcFlex>
326
326
  </Container>
327
327
  </>
328
328
  );
@@ -337,6 +337,6 @@ const Placeholder = styled.div`
337
337
  min-height: 40px;
338
338
  min-width: 120px;
339
339
  border: 1px solid #a46ede;
340
+ border-radius: 0.5rem;
340
341
  background-color: #e5d5f6;
341
342
  `;
342
-
package/bleed/types.d.ts CHANGED
@@ -1,13 +1,37 @@
1
1
  /// <reference types="react" />
2
- declare type Spacing = "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
3
- declare type Props = {
2
+ type Spacing = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
3
+ type Props = {
4
+ /**
5
+ * Applies the spacing scale to all sides.
6
+ */
4
7
  space?: Spacing;
8
+ /**
9
+ * Applies the spacing scale to the left and right sides.
10
+ */
5
11
  horizontal?: Spacing;
12
+ /**
13
+ * Applies the spacing scale to the top and bottom sides.
14
+ */
6
15
  vertical?: Spacing;
16
+ /**
17
+ * Applies the spacing scale to the top side.
18
+ */
7
19
  top?: Spacing;
20
+ /**
21
+ * Applies the spacing scale to the right side.
22
+ */
8
23
  right?: Spacing;
24
+ /**
25
+ * Applies the spacing scale to the bottom side.
26
+ */
9
27
  bottom?: Spacing;
28
+ /**
29
+ * Applies the spacing scale to the left side.
30
+ */
10
31
  left?: Spacing;
32
+ /**
33
+ * Custom content inside the bleed.
34
+ */
11
35
  children: React.ReactNode;
12
36
  };
13
37
  export default Props;
package/box/Box.accessibility.test.js ADDED
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _axeHelper = require("../../test/accessibility/axe-helper.js");
9
+ var _Box = _interopRequireDefault(require("../box/Box.tsx"));
10
+ describe("Box component accessibility tests", function () {
11
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
12
+ var _render, container, results;
13
+ return _regenerator["default"].wrap(function _callee$(_context) {
14
+ while (1) switch (_context.prev = _context.next) {
15
+ case 0:
16
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Box["default"], {
17
+ shadowDepth: 0,
18
+ margin: "medium",
19
+ size: "small",
20
+ display: "flex"
21
+ }, "Box")), container = _render.container;
22
+ _context.next = 3;
23
+ return (0, _axeHelper.axe)(container);
24
+ case 3:
25
+ results = _context.sent;
26
+ expect(results).toHaveNoViolations();
27
+ case 5:
28
+ case "end":
29
+ return _context.stop();
30
+ }
31
+ }, _callee);
32
+ })));
33
+ });
package/box/Box.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  /// <reference types="react" />
2
2
  import BoxPropsType from "./types";
3
- declare const DxcBox: ({ shadowDepth, display, children, margin, padding, size, }: BoxPropsType) => JSX.Element;
3
+ declare const DxcBox: ({ shadowDepth, display, children, margin, size, }: BoxPropsType) => JSX.Element;
4
4
  export default DxcBox;