@dxc-technology/halstack-react 0.0.0-6654203 → 0.0.0-66c6f2c

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 (714) hide show
  1. package/BackgroundColorContext.d.ts +1 -0
  2. package/BackgroundColorContext.js +30 -0
  3. package/HalstackContext.d.ts +1269 -0
  4. package/HalstackContext.js +320 -0
  5. package/README.md +28 -47
  6. package/accordion/Accordion.accessibility.test.d.ts +1 -0
  7. package/accordion/Accordion.accessibility.test.js +71 -0
  8. package/accordion/Accordion.d.ts +4 -0
  9. package/accordion/Accordion.js +168 -0
  10. package/accordion/Accordion.stories.tsx +241 -0
  11. package/accordion/Accordion.test.d.ts +1 -0
  12. package/accordion/Accordion.test.js +56 -0
  13. package/accordion/types.d.ts +57 -0
  14. package/accordion/types.js +5 -0
  15. package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
  16. package/accordion-group/AccordionGroup.accessibility.test.js +82 -0
  17. package/accordion-group/AccordionGroup.d.ts +7 -0
  18. package/accordion-group/AccordionGroup.js +101 -0
  19. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  20. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  21. package/accordion-group/AccordionGroup.test.js +94 -0
  22. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  23. package/accordion-group/AccordionGroupAccordion.js +31 -0
  24. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  25. package/accordion-group/AccordionGroupContext.js +8 -0
  26. package/accordion-group/types.d.ts +67 -0
  27. package/accordion-group/types.js +5 -0
  28. package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
  29. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  30. package/action-icon/ActionIcon.d.ts +4 -0
  31. package/action-icon/ActionIcon.js +48 -0
  32. package/action-icon/ActionIcon.stories.tsx +41 -0
  33. package/action-icon/ActionIcon.test.d.ts +1 -0
  34. package/action-icon/ActionIcon.test.js +64 -0
  35. package/action-icon/types.d.ts +26 -0
  36. package/action-icon/types.js +5 -0
  37. package/alert/Alert.accessibility.test.d.ts +1 -0
  38. package/alert/Alert.accessibility.test.js +95 -0
  39. package/alert/Alert.d.ts +4 -0
  40. package/alert/Alert.js +203 -0
  41. package/alert/Alert.stories.tsx +198 -0
  42. package/alert/Alert.test.d.ts +1 -0
  43. package/alert/Alert.test.js +75 -0
  44. package/alert/types.d.ts +49 -0
  45. package/alert/types.js +5 -0
  46. package/badge/Badge.accessibility.test.d.ts +1 -0
  47. package/badge/Badge.accessibility.test.js +129 -0
  48. package/badge/Badge.d.ts +4 -0
  49. package/badge/Badge.js +161 -0
  50. package/badge/Badge.stories.tsx +210 -0
  51. package/badge/Badge.test.d.ts +1 -0
  52. package/badge/Badge.test.js +30 -0
  53. package/badge/types.d.ts +54 -0
  54. package/badge/types.js +5 -0
  55. package/bleed/Bleed.d.ts +3 -0
  56. package/bleed/Bleed.js +43 -0
  57. package/bleed/Bleed.stories.tsx +342 -0
  58. package/bleed/types.d.ts +37 -0
  59. package/bleed/types.js +5 -0
  60. package/box/Box.accessibility.test.d.ts +1 -0
  61. package/box/Box.accessibility.test.js +33 -0
  62. package/box/Box.d.ts +4 -0
  63. package/box/Box.js +75 -0
  64. package/box/Box.stories.tsx +119 -0
  65. package/box/Box.test.d.ts +1 -0
  66. package/box/Box.test.js +13 -0
  67. package/box/types.d.ts +32 -0
  68. package/box/types.js +5 -0
  69. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  70. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  71. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  72. package/breadcrumbs/Breadcrumbs.js +79 -0
  73. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  74. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  75. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  76. package/breadcrumbs/Item.d.ts +4 -0
  77. package/breadcrumbs/Item.js +52 -0
  78. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  79. package/breadcrumbs/dropdownTheme.js +62 -0
  80. package/breadcrumbs/types.d.ts +40 -0
  81. package/breadcrumbs/types.js +5 -0
  82. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  83. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  84. package/bulleted-list/BulletedList.d.ts +7 -0
  85. package/bulleted-list/BulletedList.js +92 -0
  86. package/bulleted-list/BulletedList.stories.tsx +115 -0
  87. package/bulleted-list/types.d.ts +38 -0
  88. package/bulleted-list/types.js +5 -0
  89. package/button/Button.accessibility.test.d.ts +1 -0
  90. package/button/Button.accessibility.test.js +127 -0
  91. package/button/Button.d.ts +4 -0
  92. package/button/Button.js +121 -0
  93. package/button/Button.stories.tsx +325 -0
  94. package/button/Button.test.d.ts +1 -0
  95. package/button/Button.test.js +38 -0
  96. package/button/types.d.ts +57 -0
  97. package/button/types.js +5 -0
  98. package/card/Card.accessibility.test.d.ts +1 -0
  99. package/card/Card.accessibility.test.js +36 -0
  100. package/card/Card.d.ts +4 -0
  101. package/card/Card.js +121 -0
  102. package/card/Card.stories.tsx +171 -0
  103. package/card/Card.test.d.ts +1 -0
  104. package/card/Card.test.js +39 -0
  105. package/card/types.d.ts +62 -0
  106. package/card/types.js +5 -0
  107. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  108. package/checkbox/Checkbox.accessibility.test.js +87 -0
  109. package/checkbox/Checkbox.d.ts +4 -0
  110. package/checkbox/Checkbox.js +212 -0
  111. package/checkbox/Checkbox.stories.tsx +222 -0
  112. package/checkbox/Checkbox.test.d.ts +1 -0
  113. package/checkbox/Checkbox.test.js +199 -0
  114. package/checkbox/types.d.ts +72 -0
  115. package/checkbox/types.js +5 -0
  116. package/chip/Chip.accessibility.test.d.ts +1 -0
  117. package/chip/Chip.accessibility.test.js +67 -0
  118. package/chip/Chip.d.ts +4 -0
  119. package/chip/Chip.js +126 -0
  120. package/chip/Chip.stories.tsx +195 -0
  121. package/chip/Chip.test.d.ts +1 -0
  122. package/chip/Chip.test.js +41 -0
  123. package/chip/types.d.ts +45 -0
  124. package/chip/types.js +5 -0
  125. package/common/coreTokens.d.ts +236 -0
  126. package/common/coreTokens.js +183 -0
  127. package/common/utils.d.ts +1 -0
  128. package/{dist/common → common}/utils.js +6 -12
  129. package/common/variables.d.ts +1421 -0
  130. package/common/variables.js +1287 -0
  131. package/container/Container.d.ts +4 -0
  132. package/container/Container.js +194 -0
  133. package/container/Container.stories.tsx +214 -0
  134. package/container/types.d.ts +176 -0
  135. package/container/types.js +5 -0
  136. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  137. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  138. package/contextual-menu/ContextualMenu.d.ts +5 -0
  139. package/contextual-menu/ContextualMenu.js +136 -0
  140. package/contextual-menu/ContextualMenu.stories.tsx +231 -0
  141. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  142. package/contextual-menu/ContextualMenu.test.js +247 -0
  143. package/contextual-menu/GroupItem.d.ts +4 -0
  144. package/contextual-menu/GroupItem.js +67 -0
  145. package/contextual-menu/ItemAction.d.ts +4 -0
  146. package/contextual-menu/ItemAction.js +88 -0
  147. package/contextual-menu/MenuItem.d.ts +4 -0
  148. package/contextual-menu/MenuItem.js +29 -0
  149. package/contextual-menu/SingleItem.d.ts +4 -0
  150. package/contextual-menu/SingleItem.js +38 -0
  151. package/contextual-menu/types.d.ts +65 -0
  152. package/contextual-menu/types.js +5 -0
  153. package/date-input/Calendar.d.ts +4 -0
  154. package/date-input/Calendar.js +230 -0
  155. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  156. package/date-input/DateInput.accessibility.test.js +229 -0
  157. package/date-input/DateInput.d.ts +4 -0
  158. package/date-input/DateInput.js +228 -0
  159. package/date-input/DateInput.stories.tsx +291 -0
  160. package/date-input/DateInput.test.d.ts +1 -0
  161. package/date-input/DateInput.test.js +808 -0
  162. package/date-input/DatePicker.d.ts +4 -0
  163. package/date-input/DatePicker.js +121 -0
  164. package/date-input/YearPicker.d.ts +4 -0
  165. package/date-input/YearPicker.js +105 -0
  166. package/date-input/types.d.ts +164 -0
  167. package/date-input/types.js +5 -0
  168. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  169. package/dialog/Dialog.accessibility.test.js +69 -0
  170. package/dialog/Dialog.d.ts +4 -0
  171. package/dialog/Dialog.js +93 -0
  172. package/dialog/Dialog.stories.tsx +369 -0
  173. package/dialog/Dialog.test.d.ts +1 -0
  174. package/dialog/Dialog.test.js +370 -0
  175. package/dialog/types.d.ts +36 -0
  176. package/dialog/types.js +5 -0
  177. package/divider/Divider.accessibility.test.d.ts +1 -0
  178. package/divider/Divider.accessibility.test.js +33 -0
  179. package/divider/Divider.d.ts +4 -0
  180. package/divider/Divider.js +36 -0
  181. package/divider/Divider.stories.tsx +224 -0
  182. package/divider/Divider.test.d.ts +1 -0
  183. package/divider/Divider.test.js +38 -0
  184. package/divider/types.d.ts +21 -0
  185. package/divider/types.js +5 -0
  186. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  187. package/dropdown/Dropdown.accessibility.test.js +183 -0
  188. package/dropdown/Dropdown.d.ts +4 -0
  189. package/dropdown/Dropdown.js +320 -0
  190. package/dropdown/Dropdown.stories.tsx +427 -0
  191. package/dropdown/Dropdown.test.d.ts +1 -0
  192. package/dropdown/Dropdown.test.js +628 -0
  193. package/dropdown/DropdownMenu.d.ts +4 -0
  194. package/dropdown/DropdownMenu.js +63 -0
  195. package/dropdown/DropdownMenuItem.d.ts +4 -0
  196. package/dropdown/DropdownMenuItem.js +71 -0
  197. package/dropdown/types.d.ts +96 -0
  198. package/dropdown/types.js +5 -0
  199. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  200. package/file-input/FileInput.accessibility.test.js +167 -0
  201. package/file-input/FileInput.d.ts +4 -0
  202. package/file-input/FileInput.js +438 -0
  203. package/file-input/FileInput.stories.tsx +618 -0
  204. package/file-input/FileInput.test.d.ts +1 -0
  205. package/file-input/FileInput.test.js +404 -0
  206. package/file-input/FileItem.d.ts +4 -0
  207. package/file-input/FileItem.js +125 -0
  208. package/file-input/types.d.ts +125 -0
  209. package/file-input/types.js +5 -0
  210. package/flex/Flex.d.ts +4 -0
  211. package/flex/Flex.js +57 -0
  212. package/flex/Flex.stories.tsx +112 -0
  213. package/flex/types.d.ts +97 -0
  214. package/flex/types.js +5 -0
  215. package/footer/Footer.accessibility.test.d.ts +1 -0
  216. package/footer/Footer.accessibility.test.js +125 -0
  217. package/footer/Footer.d.ts +4 -0
  218. package/footer/Footer.js +140 -0
  219. package/footer/Footer.stories.tsx +208 -0
  220. package/footer/Footer.test.d.ts +1 -0
  221. package/footer/Footer.test.js +85 -0
  222. package/footer/Icons.d.ts +3 -0
  223. package/footer/Icons.js +108 -0
  224. package/footer/types.d.ts +64 -0
  225. package/footer/types.js +5 -0
  226. package/grid/Grid.d.ts +7 -0
  227. package/grid/Grid.js +76 -0
  228. package/grid/Grid.stories.tsx +221 -0
  229. package/grid/types.d.ts +115 -0
  230. package/grid/types.js +5 -0
  231. package/header/Header.accessibility.test.d.ts +1 -0
  232. package/header/Header.accessibility.test.js +94 -0
  233. package/header/Header.d.ts +8 -0
  234. package/header/Header.js +210 -0
  235. package/header/Header.stories.tsx +267 -0
  236. package/header/Header.test.d.ts +1 -0
  237. package/header/Header.test.js +66 -0
  238. package/header/Icons.d.ts +2 -0
  239. package/header/Icons.js +24 -0
  240. package/header/types.d.ts +33 -0
  241. package/header/types.js +5 -0
  242. package/heading/Heading.accessibility.test.d.ts +1 -0
  243. package/heading/Heading.accessibility.test.js +33 -0
  244. package/heading/Heading.d.ts +4 -0
  245. package/{dist/heading → heading}/Heading.js +34 -119
  246. package/heading/Heading.stories.tsx +54 -0
  247. package/heading/Heading.test.d.ts +1 -0
  248. package/heading/Heading.test.js +156 -0
  249. package/heading/types.d.ts +33 -0
  250. package/heading/types.js +5 -0
  251. package/icon/Icon.accessibility.test.d.ts +1 -0
  252. package/icon/Icon.accessibility.test.js +30 -0
  253. package/icon/Icon.d.ts +4 -0
  254. package/icon/Icon.js +33 -0
  255. package/icon/Icon.stories.tsx +28 -0
  256. package/icon/types.d.ts +4 -0
  257. package/icon/types.js +5 -0
  258. package/image/Image.accessibility.test.d.ts +1 -0
  259. package/image/Image.accessibility.test.js +56 -0
  260. package/image/Image.d.ts +4 -0
  261. package/image/Image.js +70 -0
  262. package/image/Image.stories.tsx +129 -0
  263. package/image/types.d.ts +72 -0
  264. package/image/types.js +5 -0
  265. package/inset/Inset.d.ts +3 -0
  266. package/inset/Inset.js +43 -0
  267. package/inset/Inset.stories.tsx +230 -0
  268. package/inset/types.d.ts +37 -0
  269. package/inset/types.js +5 -0
  270. package/layout/ApplicationLayout.d.ts +20 -0
  271. package/layout/ApplicationLayout.js +137 -0
  272. package/layout/ApplicationLayout.stories.tsx +162 -0
  273. package/layout/Icons.d.ts +7 -0
  274. package/layout/Icons.js +48 -0
  275. package/layout/types.d.ts +41 -0
  276. package/layout/types.js +5 -0
  277. package/link/Link.accessibility.test.d.ts +1 -0
  278. package/link/Link.accessibility.test.js +108 -0
  279. package/link/Link.d.ts +4 -0
  280. package/link/Link.js +117 -0
  281. package/link/Link.stories.tsx +253 -0
  282. package/link/Link.test.d.ts +1 -0
  283. package/link/Link.test.js +63 -0
  284. package/link/types.d.ts +54 -0
  285. package/link/types.js +5 -0
  286. package/main.d.ts +50 -0
  287. package/{dist/main.js → main.js} +168 -115
  288. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  289. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  290. package/nav-tabs/NavTabs.d.ts +7 -0
  291. package/nav-tabs/NavTabs.js +108 -0
  292. package/nav-tabs/NavTabs.stories.tsx +294 -0
  293. package/nav-tabs/NavTabs.test.d.ts +1 -0
  294. package/nav-tabs/NavTabs.test.js +77 -0
  295. package/nav-tabs/NavTabsContext.d.ts +3 -0
  296. package/nav-tabs/NavTabsContext.js +8 -0
  297. package/nav-tabs/Tab.d.ts +4 -0
  298. package/nav-tabs/Tab.js +117 -0
  299. package/nav-tabs/types.d.ts +52 -0
  300. package/nav-tabs/types.js +5 -0
  301. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  302. package/number-input/NumberInput.accessibility.test.js +227 -0
  303. package/number-input/NumberInput.d.ts +4 -0
  304. package/number-input/NumberInput.js +89 -0
  305. package/number-input/NumberInput.stories.tsx +126 -0
  306. package/number-input/NumberInput.test.d.ts +1 -0
  307. package/number-input/NumberInput.test.js +988 -0
  308. package/number-input/NumberInputContext.d.ts +3 -0
  309. package/number-input/NumberInputContext.js +8 -0
  310. package/number-input/types.d.ts +136 -0
  311. package/number-input/types.js +5 -0
  312. package/package.json +69 -54
  313. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  314. package/paginator/Paginator.accessibility.test.js +78 -0
  315. package/paginator/Paginator.d.ts +4 -0
  316. package/paginator/Paginator.js +138 -0
  317. package/paginator/Paginator.stories.tsx +87 -0
  318. package/paginator/Paginator.test.d.ts +1 -0
  319. package/paginator/Paginator.test.js +334 -0
  320. package/paginator/types.d.ts +38 -0
  321. package/paginator/types.js +5 -0
  322. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  323. package/paragraph/Paragraph.accessibility.test.js +28 -0
  324. package/paragraph/Paragraph.d.ts +5 -0
  325. package/paragraph/Paragraph.js +22 -0
  326. package/paragraph/Paragraph.stories.tsx +27 -0
  327. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  328. package/password-input/PasswordInput.accessibility.test.js +152 -0
  329. package/password-input/PasswordInput.d.ts +4 -0
  330. package/password-input/PasswordInput.js +100 -0
  331. package/password-input/PasswordInput.stories.tsx +108 -0
  332. package/password-input/PasswordInput.test.d.ts +1 -0
  333. package/password-input/PasswordInput.test.js +197 -0
  334. package/password-input/types.d.ts +111 -0
  335. package/password-input/types.js +5 -0
  336. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  337. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  338. package/progress-bar/ProgressBar.d.ts +4 -0
  339. package/progress-bar/ProgressBar.js +146 -0
  340. package/progress-bar/ProgressBar.stories.tsx +93 -0
  341. package/progress-bar/ProgressBar.test.d.ts +1 -0
  342. package/progress-bar/ProgressBar.test.js +93 -0
  343. package/progress-bar/types.d.ts +37 -0
  344. package/progress-bar/types.js +5 -0
  345. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  346. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  347. package/quick-nav/QuickNav.d.ts +4 -0
  348. package/quick-nav/QuickNav.js +94 -0
  349. package/quick-nav/QuickNav.stories.tsx +356 -0
  350. package/quick-nav/types.d.ts +21 -0
  351. package/quick-nav/types.js +5 -0
  352. package/radio-group/Radio.d.ts +4 -0
  353. package/radio-group/Radio.js +121 -0
  354. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  355. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  356. package/radio-group/RadioGroup.d.ts +4 -0
  357. package/radio-group/RadioGroup.js +233 -0
  358. package/radio-group/RadioGroup.stories.tsx +214 -0
  359. package/radio-group/RadioGroup.test.d.ts +1 -0
  360. package/radio-group/RadioGroup.test.js +754 -0
  361. package/radio-group/types.d.ts +114 -0
  362. package/radio-group/types.js +5 -0
  363. package/resultset-table/Icons.d.ts +7 -0
  364. package/resultset-table/Icons.js +47 -0
  365. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  366. package/resultset-table/ResultsetTable.accessibility.test.js +284 -0
  367. package/resultset-table/ResultsetTable.d.ts +7 -0
  368. package/resultset-table/ResultsetTable.js +195 -0
  369. package/resultset-table/ResultsetTable.stories.tsx +413 -0
  370. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  371. package/resultset-table/ResultsetTable.test.js +450 -0
  372. package/resultset-table/types.d.ts +101 -0
  373. package/resultset-table/types.js +5 -0
  374. package/select/Listbox.d.ts +4 -0
  375. package/select/Listbox.js +151 -0
  376. package/select/Option.d.ts +4 -0
  377. package/select/Option.js +89 -0
  378. package/select/Select.accessibility.test.d.ts +1 -0
  379. package/select/Select.accessibility.test.js +227 -0
  380. package/select/Select.d.ts +4 -0
  381. package/select/Select.js +602 -0
  382. package/select/Select.stories.tsx +928 -0
  383. package/select/Select.test.d.ts +1 -0
  384. package/select/Select.test.js +2267 -0
  385. package/select/types.d.ts +209 -0
  386. package/select/types.js +5 -0
  387. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  388. package/sidenav/Sidenav.accessibility.test.js +59 -0
  389. package/sidenav/Sidenav.d.ts +10 -0
  390. package/sidenav/Sidenav.js +201 -0
  391. package/sidenav/Sidenav.stories.tsx +277 -0
  392. package/sidenav/Sidenav.test.d.ts +1 -0
  393. package/sidenav/Sidenav.test.js +37 -0
  394. package/sidenav/SidenavContext.d.ts +5 -0
  395. package/sidenav/SidenavContext.js +13 -0
  396. package/sidenav/types.d.ts +76 -0
  397. package/sidenav/types.js +5 -0
  398. package/slider/Slider.accessibility.test.d.ts +1 -0
  399. package/slider/Slider.accessibility.test.js +103 -0
  400. package/slider/Slider.d.ts +4 -0
  401. package/slider/Slider.js +283 -0
  402. package/slider/Slider.stories.tsx +180 -0
  403. package/slider/Slider.test.d.ts +1 -0
  404. package/slider/Slider.test.js +256 -0
  405. package/slider/types.d.ts +86 -0
  406. package/slider/types.js +5 -0
  407. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  408. package/spinner/Spinner.accessibility.test.js +96 -0
  409. package/spinner/Spinner.d.ts +4 -0
  410. package/spinner/Spinner.js +210 -0
  411. package/spinner/Spinner.stories.tsx +129 -0
  412. package/spinner/Spinner.test.d.ts +1 -0
  413. package/spinner/Spinner.test.js +55 -0
  414. package/spinner/types.d.ts +32 -0
  415. package/spinner/types.js +5 -0
  416. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  417. package/status-light/StatusLight.accessibility.test.js +157 -0
  418. package/status-light/StatusLight.d.ts +4 -0
  419. package/status-light/StatusLight.js +51 -0
  420. package/status-light/StatusLight.stories.tsx +74 -0
  421. package/status-light/StatusLight.test.d.ts +1 -0
  422. package/status-light/StatusLight.test.js +25 -0
  423. package/status-light/types.d.ts +17 -0
  424. package/status-light/types.js +5 -0
  425. package/switch/Switch.accessibility.test.d.ts +1 -0
  426. package/switch/Switch.accessibility.test.js +98 -0
  427. package/switch/Switch.d.ts +4 -0
  428. package/switch/Switch.js +211 -0
  429. package/switch/Switch.stories.tsx +149 -0
  430. package/switch/Switch.test.d.ts +1 -0
  431. package/switch/Switch.test.js +180 -0
  432. package/switch/types.d.ts +66 -0
  433. package/switch/types.js +5 -0
  434. package/table/DropdownTheme.js +62 -0
  435. package/table/Table.accessibility.test.d.ts +1 -0
  436. package/table/Table.accessibility.test.js +92 -0
  437. package/table/Table.d.ts +8 -0
  438. package/table/Table.js +161 -0
  439. package/table/Table.stories.tsx +663 -0
  440. package/table/Table.test.d.ts +1 -0
  441. package/table/Table.test.js +111 -0
  442. package/table/types.d.ts +49 -0
  443. package/table/types.js +5 -0
  444. package/tabs/Tab.d.ts +4 -0
  445. package/tabs/Tab.js +117 -0
  446. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  447. package/tabs/Tabs.accessibility.test.js +56 -0
  448. package/tabs/Tabs.d.ts +4 -0
  449. package/tabs/Tabs.js +373 -0
  450. package/tabs/Tabs.stories.tsx +230 -0
  451. package/tabs/Tabs.test.d.ts +1 -0
  452. package/tabs/Tabs.test.js +276 -0
  453. package/tabs/types.d.ts +92 -0
  454. package/tabs/types.js +5 -0
  455. package/tag/Tag.accessibility.test.d.ts +1 -0
  456. package/tag/Tag.accessibility.test.js +69 -0
  457. package/tag/Tag.d.ts +4 -0
  458. package/tag/Tag.js +151 -0
  459. package/tag/Tag.stories.tsx +152 -0
  460. package/tag/Tag.test.d.ts +1 -0
  461. package/tag/Tag.test.js +41 -0
  462. package/tag/types.d.ts +69 -0
  463. package/tag/types.js +5 -0
  464. package/text-input/Suggestion.d.ts +4 -0
  465. package/text-input/Suggestion.js +67 -0
  466. package/text-input/Suggestions.d.ts +4 -0
  467. package/text-input/Suggestions.js +94 -0
  468. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  469. package/text-input/TextInput.accessibility.test.js +320 -0
  470. package/text-input/TextInput.d.ts +4 -0
  471. package/text-input/TextInput.js +571 -0
  472. package/text-input/TextInput.stories.tsx +477 -0
  473. package/text-input/TextInput.test.d.ts +1 -0
  474. package/text-input/TextInput.test.js +1755 -0
  475. package/text-input/types.d.ts +205 -0
  476. package/text-input/types.js +5 -0
  477. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  478. package/textarea/Textarea.accessibility.test.js +155 -0
  479. package/textarea/Textarea.d.ts +4 -0
  480. package/textarea/Textarea.js +235 -0
  481. package/textarea/Textarea.stories.tsx +174 -0
  482. package/textarea/Textarea.test.d.ts +1 -0
  483. package/textarea/Textarea.test.js +406 -0
  484. package/textarea/types.d.ts +141 -0
  485. package/textarea/types.js +5 -0
  486. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  487. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  488. package/toggle-group/ToggleGroup.d.ts +4 -0
  489. package/toggle-group/ToggleGroup.js +199 -0
  490. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  491. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  492. package/toggle-group/ToggleGroup.test.js +137 -0
  493. package/toggle-group/types.d.ts +114 -0
  494. package/toggle-group/types.js +5 -0
  495. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  496. package/tooltip/Tooltip.accessibility.test.js +144 -0
  497. package/tooltip/Tooltip.d.ts +4 -0
  498. package/tooltip/Tooltip.js +50 -0
  499. package/tooltip/Tooltip.stories.tsx +111 -0
  500. package/tooltip/Tooltip.test.d.ts +1 -0
  501. package/tooltip/Tooltip.test.js +112 -0
  502. package/tooltip/types.d.ts +16 -0
  503. package/tooltip/types.js +5 -0
  504. package/typography/Typography.accessibility.test.d.ts +1 -0
  505. package/typography/Typography.accessibility.test.js +339 -0
  506. package/typography/Typography.d.ts +4 -0
  507. package/typography/Typography.js +23 -0
  508. package/typography/Typography.stories.tsx +196 -0
  509. package/typography/Typography.test.js +23 -0
  510. package/typography/types.d.ts +18 -0
  511. package/typography/types.js +5 -0
  512. package/useTheme.d.ts +1168 -0
  513. package/{dist/useTheme.js → useTheme.js} +4 -11
  514. package/useTranslatedLabels.d.ts +85 -0
  515. package/useTranslatedLabels.js +14 -0
  516. package/utils/BaseTypography.d.ts +21 -0
  517. package/utils/BaseTypography.js +98 -0
  518. package/utils/FocusLock.d.ts +13 -0
  519. package/utils/FocusLock.js +125 -0
  520. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  521. package/wizard/Wizard.accessibility.test.js +55 -0
  522. package/wizard/Wizard.d.ts +4 -0
  523. package/wizard/Wizard.js +239 -0
  524. package/wizard/Wizard.stories.tsx +272 -0
  525. package/wizard/Wizard.test.d.ts +1 -0
  526. package/wizard/Wizard.test.js +114 -0
  527. package/wizard/types.d.ts +64 -0
  528. package/wizard/types.js +5 -0
  529. package/babel.config.js +0 -8
  530. package/dist/BackgroundColorContext.js +0 -46
  531. package/dist/ThemeContext.js +0 -216
  532. package/dist/accordion/Accordion.js +0 -356
  533. package/dist/accordion/Accordion.stories.js +0 -207
  534. package/dist/accordion/readme.md +0 -96
  535. package/dist/accordion-group/AccordionGroup.js +0 -188
  536. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  537. package/dist/accordion-group/readme.md +0 -70
  538. package/dist/alert/Alert.js +0 -388
  539. package/dist/alert/Alert.stories.js +0 -158
  540. package/dist/alert/close.svg +0 -4
  541. package/dist/alert/error.svg +0 -4
  542. package/dist/alert/info.svg +0 -4
  543. package/dist/alert/readme.md +0 -43
  544. package/dist/alert/success.svg +0 -4
  545. package/dist/alert/warning.svg +0 -4
  546. package/dist/badge/Badge.js +0 -61
  547. package/dist/box/Box.js +0 -164
  548. package/dist/button/Button.js +0 -228
  549. package/dist/button/Button.stories.js +0 -224
  550. package/dist/button/readme.md +0 -93
  551. package/dist/card/Card.js +0 -247
  552. package/dist/checkbox/Checkbox.js +0 -291
  553. package/dist/checkbox/Checkbox.stories.js +0 -144
  554. package/dist/checkbox/readme.md +0 -116
  555. package/dist/chip/Chip.js +0 -277
  556. package/dist/common/OpenSans.css +0 -81
  557. package/dist/common/RequiredComponent.js +0 -40
  558. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  559. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  560. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  561. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  562. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  563. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  564. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  565. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  566. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  567. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  568. package/dist/common/variables.js +0 -1025
  569. package/dist/date/Date.js +0 -359
  570. package/dist/date/Date.stories.js +0 -205
  571. package/dist/date/calendar.svg +0 -1
  572. package/dist/date/calendar_dark.svg +0 -1
  573. package/dist/date/readme.md +0 -73
  574. package/dist/dialog/Dialog.js +0 -236
  575. package/dist/dialog/Dialog.stories.js +0 -217
  576. package/dist/dialog/readme.md +0 -32
  577. package/dist/dropdown/Dropdown.js +0 -498
  578. package/dist/dropdown/Dropdown.stories.js +0 -249
  579. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  580. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  581. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  582. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  583. package/dist/dropdown/readme.md +0 -69
  584. package/dist/footer/Footer.js +0 -405
  585. package/dist/footer/Footer.stories.js +0 -94
  586. package/dist/footer/dxc_logo_wht.png +0 -0
  587. package/dist/footer/readme.md +0 -41
  588. package/dist/header/Header.js +0 -431
  589. package/dist/header/Header.stories.js +0 -176
  590. package/dist/header/close_icon.svg +0 -1
  591. package/dist/header/dxc_logo_black.png +0 -0
  592. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  593. package/dist/header/dxc_logo_white.png +0 -0
  594. package/dist/header/hamb_menu_black.svg +0 -1
  595. package/dist/header/hamb_menu_white.svg +0 -1
  596. package/dist/header/readme.md +0 -33
  597. package/dist/input-text/InputText.js +0 -631
  598. package/dist/input-text/InputText.stories.js +0 -209
  599. package/dist/input-text/error.svg +0 -1
  600. package/dist/input-text/readme.md +0 -91
  601. package/dist/layout/ApplicationLayout.js +0 -331
  602. package/dist/layout/facebook.svg +0 -45
  603. package/dist/layout/linkedin.svg +0 -50
  604. package/dist/layout/twitter.svg +0 -53
  605. package/dist/link/Link.js +0 -212
  606. package/dist/link/readme.md +0 -51
  607. package/dist/paginator/Paginator.js +0 -283
  608. package/dist/paginator/images/next.svg +0 -3
  609. package/dist/paginator/images/nextPage.svg +0 -3
  610. package/dist/paginator/images/previous.svg +0 -3
  611. package/dist/paginator/images/previousPage.svg +0 -3
  612. package/dist/paginator/readme.md +0 -50
  613. package/dist/progress-bar/ProgressBar.js +0 -206
  614. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  615. package/dist/progress-bar/readme.md +0 -63
  616. package/dist/radio/Radio.js +0 -209
  617. package/dist/radio/Radio.stories.js +0 -166
  618. package/dist/radio/readme.md +0 -70
  619. package/dist/resultsetTable/ResultsetTable.js +0 -332
  620. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  621. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  622. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  623. package/dist/select/Select.js +0 -490
  624. package/dist/select/Select.stories.js +0 -235
  625. package/dist/select/readme.md +0 -72
  626. package/dist/sidenav/Sidenav.js +0 -183
  627. package/dist/slider/Slider.js +0 -267
  628. package/dist/slider/Slider.stories.js +0 -241
  629. package/dist/slider/readme.md +0 -64
  630. package/dist/spinner/Spinner.js +0 -214
  631. package/dist/spinner/Spinner.stories.js +0 -183
  632. package/dist/spinner/readme.md +0 -65
  633. package/dist/switch/Switch.js +0 -222
  634. package/dist/switch/Switch.stories.js +0 -134
  635. package/dist/switch/readme.md +0 -133
  636. package/dist/table/Table.js +0 -118
  637. package/dist/tabs/Tabs.js +0 -347
  638. package/dist/tabs/Tabs.stories.js +0 -130
  639. package/dist/tabs/readme.md +0 -78
  640. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  641. package/dist/tabs-for-sections/readme.md +0 -78
  642. package/dist/tag/Tag.js +0 -268
  643. package/dist/textarea/Textarea.js +0 -260
  644. package/dist/toggle/Toggle.js +0 -220
  645. package/dist/toggle/Toggle.stories.js +0 -297
  646. package/dist/toggle/readme.md +0 -80
  647. package/dist/toggle-group/ToggleGroup.js +0 -241
  648. package/dist/toggle-group/readme.md +0 -82
  649. package/dist/upload/Upload.js +0 -209
  650. package/dist/upload/Upload.stories.js +0 -72
  651. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -123
  652. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  653. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  654. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -293
  655. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  656. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  657. package/dist/upload/file-upload/FileToUpload.js +0 -162
  658. package/dist/upload/file-upload/audio-icon.svg +0 -4
  659. package/dist/upload/file-upload/close.svg +0 -4
  660. package/dist/upload/file-upload/file-icon.svg +0 -4
  661. package/dist/upload/file-upload/video-icon.svg +0 -4
  662. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  663. package/dist/upload/readme.md +0 -37
  664. package/dist/upload/transaction/Transaction.js +0 -152
  665. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  666. package/dist/upload/transaction/audio-icon.svg +0 -4
  667. package/dist/upload/transaction/error-icon.svg +0 -4
  668. package/dist/upload/transaction/file-icon-err.svg +0 -4
  669. package/dist/upload/transaction/file-icon.svg +0 -4
  670. package/dist/upload/transaction/image-icon-err.svg +0 -4
  671. package/dist/upload/transaction/image-icon.svg +0 -4
  672. package/dist/upload/transaction/success-icon.svg +0 -4
  673. package/dist/upload/transaction/video-icon-err.svg +0 -4
  674. package/dist/upload/transaction/video-icon.svg +0 -4
  675. package/dist/upload/transactions/Transactions.js +0 -122
  676. package/dist/wizard/Wizard.js +0 -383
  677. package/dist/wizard/invalid_icon.svg +0 -6
  678. package/dist/wizard/valid_icon.svg +0 -6
  679. package/dist/wizard/validation-wrong.svg +0 -6
  680. package/test/Accordion.test.js +0 -33
  681. package/test/AccordionGroup.test.js +0 -125
  682. package/test/Alert.test.js +0 -53
  683. package/test/Box.test.js +0 -10
  684. package/test/Button.test.js +0 -18
  685. package/test/Card.test.js +0 -30
  686. package/test/Checkbox.test.js +0 -45
  687. package/test/Chip.test.js +0 -25
  688. package/test/Date.test.js +0 -393
  689. package/test/Dialog.test.js +0 -23
  690. package/test/Dropdown.test.js +0 -130
  691. package/test/Footer.test.js +0 -99
  692. package/test/Header.test.js +0 -39
  693. package/test/Heading.test.js +0 -35
  694. package/test/InputText.test.js +0 -240
  695. package/test/Link.test.js +0 -42
  696. package/test/Paginator.test.js +0 -177
  697. package/test/ProgressBar.test.js +0 -35
  698. package/test/Radio.test.js +0 -37
  699. package/test/ResultsetTable.test.js +0 -330
  700. package/test/Select.test.js +0 -192
  701. package/test/Sidenav.test.js +0 -45
  702. package/test/Slider.test.js +0 -82
  703. package/test/Spinner.test.js +0 -27
  704. package/test/Switch.test.js +0 -45
  705. package/test/Table.test.js +0 -36
  706. package/test/Tabs.test.js +0 -109
  707. package/test/TabsForSections.test.js +0 -34
  708. package/test/Tag.test.js +0 -32
  709. package/test/TextArea.test.js +0 -52
  710. package/test/ToggleGroup.test.js +0 -81
  711. package/test/Upload.test.js +0 -60
  712. package/test/Wizard.test.js +0 -130
  713. package/test/mocks/pngMock.js +0 -1
  714. package/test/mocks/svgMock.js +0 -1
@@ -1,388 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
17
-
18
- var _react = _interopRequireDefault(require("react"));
19
-
20
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
- var _propTypes = _interopRequireDefault(require("prop-types"));
23
-
24
- var _variables = require("../common/variables.js");
25
-
26
- var _close = _interopRequireDefault(require("./close.svg"));
27
-
28
- var _error = _interopRequireDefault(require("./error.svg"));
29
-
30
- var _info = _interopRequireDefault(require("./info.svg"));
31
-
32
- var _success = _interopRequireDefault(require("./success.svg"));
33
-
34
- var _warning = _interopRequireDefault(require("./warning.svg"));
35
-
36
- var _utils = require("../common/utils.js");
37
-
38
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
39
-
40
- function _templateObject11() {
41
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
42
-
43
- _templateObject11 = function _templateObject11() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _templateObject10() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n padding: 0;\n margin: 0;\n background: none;\n border: none;\n height: 20px;\n width: 20px;\n display: inline-flex;\n"]);
52
-
53
- _templateObject10 = function _templateObject10() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- function _templateObject9() {
61
- var data = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1 1 auto;\n padding: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n overflow-y: auto;\n"]);
62
-
63
- _templateObject9 = function _templateObject9() {
64
- return data;
65
- };
66
-
67
- return data;
68
- }
69
-
70
- function _templateObject8() {
71
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n padding-left: ", ";\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: hidden;\n flex-grow: 1;\n align-items: center;\n"]);
72
-
73
- _templateObject8 = function _templateObject8() {
74
- return data;
75
- };
76
-
77
- return data;
78
- }
79
-
80
- function _templateObject7() {
81
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-width: ", ";\n max-height: ", ";\n padding-right: ", ";\n padding-left: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n"]);
82
-
83
- _templateObject7 = function _templateObject7() {
84
- return data;
85
- };
86
-
87
- return data;
88
- }
89
-
90
- function _templateObject6() {
91
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-right: ", ";\n padding-left: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n"]);
92
-
93
- _templateObject6 = function _templateObject6() {
94
- return data;
95
- };
96
-
97
- return data;
98
- }
99
-
100
- function _templateObject5() {
101
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-right: ", ";\n padding-left: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n font-style: ", ";\n text-transform: ", ";\n"]);
102
-
103
- _templateObject5 = function _templateObject5() {
104
- return data;
105
- };
106
-
107
- return data;
108
- }
109
-
110
- function _templateObject4() {
111
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n height: ", ";\n align-items: center;\n width: 100%;\n"]);
112
-
113
- _templateObject4 = function _templateObject4() {
114
- return data;
115
- };
116
-
117
- return data;
118
- }
119
-
120
- function _templateObject3() {
121
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: ", ";\n overflow: hidden;\n box-shadow: ", ";\n\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n justify-content: ", ";\n align-items: ", ";\n max-width: ", ";\n width: ", ";\n min-height: ", ";\n background-color: ", ";\n z-index: ", ";\n cursor: default;\n"]);
122
-
123
- _templateObject3 = function _templateObject3() {
124
- return data;
125
- };
126
-
127
- return data;
128
- }
129
-
130
- function _templateObject2() {
131
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n"]);
132
-
133
- _templateObject2 = function _templateObject2() {
134
- return data;
135
- };
136
-
137
- return data;
138
- }
139
-
140
- function _templateObject() {
141
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n width: ", ";\n height: ", ";\n justify-content: ", ";\n align-items: ", ";\n top: ", ";\n left: ", ";\n position: ", ";\n display: ", ";\n z-index: ", ";\n"]);
142
-
143
- _templateObject = function _templateObject() {
144
- return data;
145
- };
146
-
147
- return data;
148
- }
149
-
150
- var DxcAlert = function DxcAlert(_ref) {
151
- var _ref$type = _ref.type,
152
- type = _ref$type === void 0 ? "info" : _ref$type,
153
- _ref$mode = _ref.mode,
154
- mode = _ref$mode === void 0 ? "inline" : _ref$mode,
155
- _ref$inlineText = _ref.inlineText,
156
- inlineText = _ref$inlineText === void 0 ? "" : _ref$inlineText,
157
- onClose = _ref.onClose,
158
- children = _ref.children,
159
- margin = _ref.margin,
160
- _ref$size = _ref.size,
161
- size = _ref$size === void 0 ? "fitContent" : _ref$size,
162
- tabIndex = _ref.tabIndex;
163
- var colorsTheme = (0, _useTheme["default"])();
164
-
165
- var getTypeText = function getTypeText() {
166
- return type === "info" ? "information" : type === "confirm" ? "success" : type === "warning" ? "warning" : "error";
167
- };
168
-
169
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
170
- theme: colorsTheme.alert
171
- }, _react["default"].createElement(AlertModal, {
172
- mode: mode
173
- }, mode === "modal" && _react["default"].createElement(OverlayContainer, {
174
- mode: mode,
175
- onClick: onClose
176
- }), _react["default"].createElement(AlertContainer, {
177
- mode: mode,
178
- type: type,
179
- margin: margin,
180
- size: size
181
- }, _react["default"].createElement(AlertInfo, null, _react["default"].createElement(AlertIcon, {
182
- src: type === "info" && _info["default"] || type === "confirm" && _success["default"] || type === "warning" && _warning["default"] || type === "error" && _error["default"] || _error["default"]
183
- }), _react["default"].createElement(AlertInfoText, null, _react["default"].createElement(AlertType, {
184
- type: type
185
- }, getTypeText(type)), inlineText && inlineText !== "" && "-", _react["default"].createElement(AlertText, null, inlineText), onClose && _react["default"].createElement(CloseAlertIcon, {
186
- onClick: onClose,
187
- tabIndex: tabIndex
188
- }, _react["default"].createElement(CloseImg, {
189
- src: _close["default"]
190
- })))), children && _react["default"].createElement(AlertContent, null, children))));
191
- };
192
-
193
- var sizes = {
194
- small: "280px",
195
- medium: "480px",
196
- large: "820px",
197
- fillParent: "100%",
198
- fitContent: "auto"
199
- };
200
-
201
- var calculateWidth = function calculateWidth(margin, size) {
202
- if (size === "fillParent") {
203
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
204
- }
205
-
206
- return sizes[size];
207
- };
208
-
209
- DxcAlert.propTypes = {
210
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
211
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
212
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
213
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
214
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
215
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
216
- type: _propTypes["default"].oneOf(["info", "confirm", "warning", "error"]),
217
- mode: _propTypes["default"].oneOf(["inline", "modal"]),
218
- inlineText: _propTypes["default"].string,
219
- onClose: _propTypes["default"].func,
220
- children: _propTypes["default"].element,
221
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
222
- tabIndex: _propTypes["default"].number
223
- };
224
-
225
- var AlertModal = _styledComponents["default"].div(_templateObject(), function (props) {
226
- return props.theme.fontSizeBase;
227
- }, function (props) {
228
- return props.mode === "modal" ? "100%" : "";
229
- }, function (props) {
230
- return props.mode === "modal" ? "100%" : "";
231
- }, function (props) {
232
- return props.mode === "modal" ? "center" : "";
233
- }, function (props) {
234
- return props.mode === "modal" ? "center" : "";
235
- }, function (props) {
236
- return props.mode === "modal" ? "0" : "";
237
- }, function (props) {
238
- return props.mode === "modal" ? "0" : "";
239
- }, function (props) {
240
- return props.mode === "modal" ? "fixed" : "";
241
- }, function (props) {
242
- return props.mode === "modal" ? "flex" : "";
243
- }, function (props) {
244
- return props.mode === "modal" ? "1200" : "";
245
- });
246
-
247
- var OverlayContainer = _styledComponents["default"].div(_templateObject2(), function (props) {
248
- return props.mode === "modal" ? "".concat(props.theme.overlayColor) : "transparent";
249
- }, function (props) {
250
- return props.mode === "modal" && props.theme.overlayOpacity;
251
- }, function (props) {
252
- return props.mode === "modal" ? "fixed" : "";
253
- }, function (props) {
254
- return props.mode === "modal" ? "0" : "";
255
- }, function (props) {
256
- return props.mode === "modal" ? "0" : "";
257
- }, function (props) {
258
- return props.mode === "modal" ? "0" : "";
259
- }, function (props) {
260
- return props.mode === "modal" ? "0" : "";
261
- });
262
-
263
- var AlertContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
264
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
265
- }, function (props) {
266
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
267
- }, function (props) {
268
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
269
- }, function (props) {
270
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
271
- }, function (props) {
272
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
273
- }, function (props) {
274
- return props.children && "inline-block" || "inline-flex";
275
- }, function (props) {
276
- return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
277
- }, function (props) {
278
- return props.theme.borderRadius;
279
- }, function (props) {
280
- return props.theme.borderThickness;
281
- }, function (props) {
282
- return props.theme.borderStyle;
283
- }, function (props) {
284
- return props.theme.borderColor;
285
- }, function (props) {
286
- return props.mode === "modal" ? "center" : "";
287
- }, function (props) {
288
- return props.mode === "modal" ? "center" : "";
289
- }, function (props) {
290
- return props.size === "fitContent" ? calculateWidth(props.margin, "fillParent") : calculateWidth(props.margin, props.size);
291
- }, function (props) {
292
- return calculateWidth(props.margin, props.size);
293
- }, function (props) {
294
- return props.children && props.children.filter(function (child) {
295
- return child === undefined;
296
- }).length === 0 && "92px" || "48px";
297
- }, function (props) {
298
- return props.type === "info" && props.theme.infoColor || props.type === "confirm" && props.theme.successColor || props.type === "warning" && props.theme.warningColor || props.type === "error" && props.theme.errorColor || props.theme.lightPink;
299
- }, function (props) {
300
- return props.mode === "modal" ? "1300" : "";
301
- });
302
-
303
- var AlertInfo = _styledComponents["default"].div(_templateObject4(), function (props) {
304
- return props.theme.height;
305
- });
306
-
307
- var AlertType = _styledComponents["default"].div(_templateObject5(), function (props) {
308
- return props.theme.titlePaddingRight;
309
- }, function (props) {
310
- return props.theme.titlePaddingLeft;
311
- }, function (props) {
312
- return props.theme.titlePaddingTop;
313
- }, function (props) {
314
- return props.theme.titlePaddingBottom;
315
- }, function (props) {
316
- return props.theme.titleFontFamily;
317
- }, function (props) {
318
- return props.theme.titleFontSize;
319
- }, function (props) {
320
- return props.theme.titleFontWeight;
321
- }, function (props) {
322
- return props.theme.titleFontColor;
323
- }, function (props) {
324
- return props.theme.titleFontStyle;
325
- }, function (props) {
326
- return props.theme.titleTextTransform;
327
- });
328
-
329
- var AlertText = _styledComponents["default"].div(_templateObject6(), function (props) {
330
- return props.theme.inlineTextPaddingRight;
331
- }, function (props) {
332
- return props.theme.inlineTextPaddingLeft;
333
- }, function (props) {
334
- return props.theme.inlineTextPaddingTop;
335
- }, function (props) {
336
- return props.theme.inlineTextPaddingBottom;
337
- }, function (props) {
338
- return props.theme.contentFontFamily;
339
- }, function (props) {
340
- return props.theme.contentFontSize;
341
- }, function (props) {
342
- return props.theme.contentFontWeight;
343
- }, function (props) {
344
- return props.theme.contentFontColor;
345
- });
346
-
347
- var AlertIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
348
- return props.theme.iconMaxWidth;
349
- }, function (props) {
350
- return props.theme.iconMaxHeight;
351
- }, function (props) {
352
- return props.theme.iconPaddingRight;
353
- }, function (props) {
354
- return props.theme.iconPaddingLeft;
355
- }, function (props) {
356
- return props.theme.iconPaddingTop;
357
- }, function (props) {
358
- return props.theme.iconPaddingBottom;
359
- });
360
-
361
- var AlertInfoText = _styledComponents["default"].div(_templateObject8(), function (props) {
362
- return props.theme.textPaddingLeft;
363
- }, function (props) {
364
- return props.theme.textPaddingRight;
365
- }, function (props) {
366
- return props.theme.textPaddingTop;
367
- }, function (props) {
368
- return props.theme.textPaddingBottom;
369
- });
370
-
371
- var AlertContent = _styledComponents["default"].div(_templateObject9(), function (props) {
372
- return "".concat(props.theme.contentPaddingTop, " ").concat(props.theme.contentPaddingRight, " ").concat(props.theme.contentPaddingBottom, " ").concat(props.theme.contentPaddingLeft);
373
- }, function (props) {
374
- return props.theme.contentFontFamily;
375
- }, function (props) {
376
- return props.theme.contentFontSize;
377
- }, function (props) {
378
- return props.theme.contentFontWeight;
379
- }, function (props) {
380
- return props.theme.contentFontColor;
381
- });
382
-
383
- var CloseAlertIcon = _styledComponents["default"].button(_templateObject10());
384
-
385
- var CloseImg = _styledComponents["default"].img(_templateObject11());
386
-
387
- var _default = DxcAlert;
388
- exports["default"] = _default;
@@ -1,158 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
6
-
7
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
8
-
9
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
10
-
11
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
12
-
13
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
14
-
15
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
16
-
17
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
-
19
- var _react = _interopRequireDefault(require("react"));
20
-
21
- var _react2 = require("@storybook/react");
22
-
23
- var _addonActions = require("@storybook/addon-actions");
24
-
25
- var _addonKnobs = require("@storybook/addon-knobs");
26
-
27
- var _readme = _interopRequireDefault(require("./readme.md"));
28
-
29
- var _Alert = _interopRequireDefault(require("./Alert"));
30
-
31
- var _Button = _interopRequireDefault(require("../button/Button"));
32
-
33
- var _propTypes = require("prop-types");
34
-
35
- (0, _react2.storiesOf)("Form Components|Alert", module).add("Types", function () {
36
- var ControlledStory =
37
- /*#__PURE__*/
38
- function (_React$Component) {
39
- (0, _inherits2["default"])(ControlledStory, _React$Component);
40
-
41
- function ControlledStory(props) {
42
- var _this;
43
-
44
- (0, _classCallCheck2["default"])(this, ControlledStory);
45
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
46
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleInfoAlert", function () {
47
- _this.setState({
48
- isVisibleInfoAlert: !_this.state.isVisibleInfoAlert
49
- });
50
- });
51
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleWarningAlert", function () {
52
- _this.setState({
53
- isVisibleWarningAlert: !_this.state.isVisibleWarningAlert
54
- });
55
- });
56
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleSuccessAlert", function () {
57
- _this.setState({
58
- isVisibleSuccessAlert: !_this.state.isVisibleSuccessAlert
59
- });
60
- });
61
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleErrorAlert", function () {
62
- _this.setState({
63
- isVisibleErrorAlert: !_this.state.isVisibleErrorAlert
64
- });
65
- });
66
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setVisibleModalAlert", function () {
67
- _this.setState({
68
- isVisibleModalAlert: !_this.state.isVisibleModalAlert
69
- });
70
- });
71
- _this.state = {
72
- isVisibleInfoAlert: true,
73
- isVisibleWarningAlert: true,
74
- isVisibleSuccessAlert: true,
75
- isVisibleErrorAlert: true,
76
- isVisibleModalAlert: false
77
- };
78
- return _this;
79
- }
80
-
81
- (0, _createClass2["default"])(ControlledStory, [{
82
- key: "render",
83
- value: function render() {
84
- return _react["default"].createElement("div", null, _react["default"].createElement("div", {
85
- style: {
86
- display: "flex",
87
- flexDirection: "column",
88
- position: "static"
89
- }
90
- }, this.state.isVisibleInfoAlert && _react["default"].createElement(_Alert["default"], {
91
- type: "info",
92
- mode: "inline",
93
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
94
- }), this.state.isVisibleWarningAlert && _react["default"].createElement(_Alert["default"], {
95
- type: "warning",
96
- mode: "inline",
97
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
98
- onClose: this.setVisibleWarningAlert
99
- }), this.state.isVisibleSuccessAlert && _react["default"].createElement(_Alert["default"], {
100
- type: "confirm",
101
- mode: "inline",
102
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
103
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), this.state.isVisibleErrorAlert && _react["default"].createElement(_Alert["default"], {
104
- type: "error",
105
- mode: "inline",
106
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
107
- onClose: this.setVisibleErrorAlert
108
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."))), _react["default"].createElement("div", {
109
- style: {
110
- marginLeft: "33px"
111
- }
112
- }, _react["default"].createElement(_Button["default"], {
113
- mode: "basic",
114
- theme: "light",
115
- label: "Overlay Alert",
116
- onClick: this.setVisibleModalAlert
117
- })), this.state.isVisibleModalAlert && _react["default"].createElement(_Alert["default"], {
118
- type: "info",
119
- mode: "modal",
120
- inlineText: " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.",
121
- onClose: this.setVisibleModalAlert
122
- }, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
123
- }
124
- }]);
125
- return ControlledStory;
126
- }(_react["default"].Component);
127
-
128
- return _react["default"].createElement(ControlledStory, null);
129
- }, {
130
- notes: {
131
- markdown: _readme["default"]
132
- }
133
- });
134
-
135
- var knobProps = function knobProps() {
136
- return {
137
- type: (0, _addonKnobs.select)("type", {
138
- info: "info",
139
- confirm: "confirm",
140
- warning: "warning",
141
- error: "error"
142
- }, "info"),
143
- mode: (0, _addonKnobs.select)("mode", {
144
- inline: "inline",
145
- modal: "modal"
146
- }, "inline"),
147
- inlineText: (0, _addonKnobs.text)("inlineText", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")
148
- };
149
- };
150
-
151
- (0, _react2.storiesOf)("Form Components|Alert", module).add("Knobs example", function () {
152
- var props = knobProps();
153
- return _react["default"].createElement("div", null, _react["default"].createElement(_Alert["default"], props, _react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")));
154
- }, {
155
- notes: {
156
- markdown: _readme["default"]
157
- }
158
- });
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
2
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24">
2
- <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" fill="#EE2222"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#4A90E2">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
4
- </svg>
@@ -1,43 +0,0 @@
1
- # DXC Alert Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>type: 'info' | 'confirm' | 'warning' | 'error'</td>
13
- <td><code>'info'</code></td>
14
- <td>Uses on of the available alert types.</td>
15
- </tr>
16
- <tr>
17
- <td>mode: 'inline' | 'modal'</td>
18
- <td><code>'inline'</code></td>
19
- <td>Uses on of the available alert modes:
20
- <ul>
21
- <li>
22
- <strong>inline:</strong> if onClose function is received, close button should be visible and the function should be executed whe its clicked.
23
- There is no overlay layer.
24
- Position should be decided by the user.
25
- </li>
26
- <li>
27
- <strong>modal:</strong> In this mode it will be always an overlay layer behind the alert.
28
- If onClose function is received it will be called if the X button is clicked or if the user clicks outside of the component. The alert should be displayed in the middle of the screen.
29
- </li>
30
- </ul>
31
- </td>
32
- </tr>
33
- <tr>
34
- <td>inlineText: string</td>
35
- <td></td>
36
- <td>Text to display after icon and alert type and before content.</td>
37
- </tr>
38
- <tr>
39
- <td>onClose: function</td>
40
- <td></td>
41
- <td>This function will be called when the user clicks the close button. If there is no function we should close the alert by default.</td>
42
- </tr>
43
- </table>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#7ED321">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="#FFD806">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
4
- </svg>