@dxc-technology/halstack-react 0.0.0-efc8cec → 0.0.0-eff2879

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 (607) hide show
  1. package/BackgroundColorContext.d.ts +1 -0
  2. package/BackgroundColorContext.js +30 -0
  3. package/HalstackContext.d.ts +1248 -0
  4. package/HalstackContext.js +310 -0
  5. package/README.md +28 -47
  6. package/accordion/Accordion.accessibility.test.js +71 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +171 -0
  9. package/accordion/Accordion.stories.tsx +251 -0
  10. package/accordion/Accordion.test.js +56 -0
  11. package/accordion/types.d.ts +57 -0
  12. package/accordion/types.js +5 -0
  13. package/accordion-group/AccordionGroup.accessibility.test.js +88 -0
  14. package/accordion-group/AccordionGroup.d.ts +7 -0
  15. package/accordion-group/AccordionGroup.js +101 -0
  16. package/accordion-group/AccordionGroup.stories.tsx +252 -0
  17. package/accordion-group/AccordionGroup.test.js +98 -0
  18. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  19. package/accordion-group/AccordionGroupAccordion.js +31 -0
  20. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  21. package/accordion-group/AccordionGroupContext.js +8 -0
  22. package/accordion-group/types.d.ts +67 -0
  23. package/accordion-group/types.js +5 -0
  24. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  25. package/action-icon/ActionIcon.d.ts +4 -0
  26. package/action-icon/ActionIcon.js +48 -0
  27. package/action-icon/ActionIcon.stories.tsx +41 -0
  28. package/action-icon/ActionIcon.test.js +64 -0
  29. package/action-icon/types.d.ts +26 -0
  30. package/action-icon/types.js +5 -0
  31. package/alert/Alert.accessibility.test.js +95 -0
  32. package/alert/Alert.d.ts +4 -0
  33. package/alert/Alert.js +200 -0
  34. package/alert/Alert.stories.tsx +198 -0
  35. package/alert/Alert.test.js +75 -0
  36. package/alert/types.d.ts +49 -0
  37. package/alert/types.js +5 -0
  38. package/badge/Badge.accessibility.test.js +129 -0
  39. package/badge/Badge.d.ts +4 -0
  40. package/badge/Badge.js +161 -0
  41. package/badge/Badge.stories.tsx +210 -0
  42. package/badge/Badge.test.js +30 -0
  43. package/badge/types.d.ts +54 -0
  44. package/badge/types.js +5 -0
  45. package/bleed/Bleed.d.ts +3 -0
  46. package/bleed/Bleed.js +43 -0
  47. package/bleed/Bleed.stories.tsx +342 -0
  48. package/bleed/types.d.ts +37 -0
  49. package/bleed/types.js +5 -0
  50. package/box/Box.accessibility.test.js +33 -0
  51. package/box/Box.d.ts +4 -0
  52. package/box/Box.js +75 -0
  53. package/box/Box.stories.tsx +119 -0
  54. package/box/Box.test.js +13 -0
  55. package/box/types.d.ts +32 -0
  56. package/box/types.js +5 -0
  57. package/bulleted-list/BulletedList.accessibility.test.js +107 -0
  58. package/bulleted-list/BulletedList.d.ts +7 -0
  59. package/bulleted-list/BulletedList.js +92 -0
  60. package/bulleted-list/BulletedList.stories.tsx +115 -0
  61. package/bulleted-list/types.d.ts +38 -0
  62. package/bulleted-list/types.js +5 -0
  63. package/button/Button.accessibility.test.js +127 -0
  64. package/button/Button.d.ts +4 -0
  65. package/button/Button.js +121 -0
  66. package/button/Button.stories.tsx +325 -0
  67. package/button/Button.test.js +38 -0
  68. package/button/types.d.ts +57 -0
  69. package/button/types.js +5 -0
  70. package/card/Card.accessibility.test.js +36 -0
  71. package/card/Card.d.ts +4 -0
  72. package/card/Card.js +120 -0
  73. package/card/Card.stories.tsx +171 -0
  74. package/card/Card.test.js +39 -0
  75. package/card/types.d.ts +62 -0
  76. package/card/types.js +5 -0
  77. package/checkbox/Checkbox.accessibility.test.js +87 -0
  78. package/checkbox/Checkbox.d.ts +4 -0
  79. package/checkbox/Checkbox.js +215 -0
  80. package/checkbox/Checkbox.stories.tsx +222 -0
  81. package/checkbox/Checkbox.test.js +199 -0
  82. package/checkbox/types.d.ts +72 -0
  83. package/checkbox/types.js +5 -0
  84. package/chip/Chip.accessibility.test.js +67 -0
  85. package/chip/Chip.d.ts +4 -0
  86. package/chip/Chip.js +124 -0
  87. package/chip/Chip.stories.tsx +195 -0
  88. package/chip/Chip.test.js +41 -0
  89. package/chip/types.d.ts +45 -0
  90. package/chip/types.js +5 -0
  91. package/common/coreTokens.d.ts +237 -0
  92. package/common/coreTokens.js +184 -0
  93. package/common/utils.d.ts +1 -0
  94. package/common/utils.js +16 -0
  95. package/common/variables.d.ts +1394 -0
  96. package/common/variables.js +1266 -0
  97. package/container/Container.d.ts +4 -0
  98. package/container/Container.js +194 -0
  99. package/container/Container.stories.tsx +214 -0
  100. package/container/types.d.ts +74 -0
  101. package/container/types.js +5 -0
  102. package/contextual-menu/ContextualMenu.accessibility.test.js +86 -0
  103. package/contextual-menu/ContextualMenu.d.ts +5 -0
  104. package/contextual-menu/ContextualMenu.js +88 -0
  105. package/contextual-menu/ContextualMenu.stories.tsx +219 -0
  106. package/contextual-menu/ContextualMenu.test.js +205 -0
  107. package/contextual-menu/GroupItem.d.ts +4 -0
  108. package/contextual-menu/GroupItem.js +67 -0
  109. package/contextual-menu/ItemAction.d.ts +4 -0
  110. package/contextual-menu/ItemAction.js +52 -0
  111. package/contextual-menu/MenuItem.d.ts +4 -0
  112. package/contextual-menu/MenuItem.js +29 -0
  113. package/contextual-menu/SingleItem.d.ts +4 -0
  114. package/contextual-menu/SingleItem.js +38 -0
  115. package/contextual-menu/types.d.ts +58 -0
  116. package/contextual-menu/types.js +5 -0
  117. package/date-input/Calendar.d.ts +4 -0
  118. package/date-input/Calendar.js +214 -0
  119. package/date-input/DateInput.accessibility.test.js +216 -0
  120. package/date-input/DateInput.d.ts +4 -0
  121. package/date-input/DateInput.js +222 -0
  122. package/date-input/DateInput.stories.tsx +285 -0
  123. package/date-input/DateInput.test.js +808 -0
  124. package/date-input/DatePicker.d.ts +4 -0
  125. package/date-input/DatePicker.js +121 -0
  126. package/date-input/YearPicker.d.ts +4 -0
  127. package/date-input/YearPicker.js +100 -0
  128. package/date-input/types.d.ts +164 -0
  129. package/date-input/types.js +5 -0
  130. package/dialog/Dialog.accessibility.test.js +69 -0
  131. package/dialog/Dialog.d.ts +4 -0
  132. package/dialog/Dialog.js +92 -0
  133. package/dialog/Dialog.stories.tsx +365 -0
  134. package/dialog/Dialog.test.js +307 -0
  135. package/dialog/types.d.ts +36 -0
  136. package/dialog/types.js +5 -0
  137. package/divider/Divider.accessibility.test.js +33 -0
  138. package/divider/Divider.d.ts +4 -0
  139. package/divider/Divider.js +36 -0
  140. package/divider/Divider.stories.tsx +223 -0
  141. package/divider/Divider.test.js +38 -0
  142. package/divider/types.d.ts +21 -0
  143. package/divider/types.js +5 -0
  144. package/dropdown/Dropdown.accessibility.test.js +180 -0
  145. package/dropdown/Dropdown.d.ts +4 -0
  146. package/dropdown/Dropdown.js +319 -0
  147. package/dropdown/Dropdown.stories.tsx +427 -0
  148. package/dropdown/Dropdown.test.js +599 -0
  149. package/dropdown/DropdownMenu.d.ts +4 -0
  150. package/dropdown/DropdownMenu.js +63 -0
  151. package/dropdown/DropdownMenuItem.d.ts +4 -0
  152. package/dropdown/DropdownMenuItem.js +70 -0
  153. package/dropdown/types.d.ts +96 -0
  154. package/dropdown/types.js +5 -0
  155. package/file-input/FileInput.accessibility.test.js +160 -0
  156. package/file-input/FileInput.d.ts +4 -0
  157. package/file-input/FileInput.js +443 -0
  158. package/file-input/FileInput.stories.tsx +618 -0
  159. package/file-input/FileInput.test.js +382 -0
  160. package/file-input/FileItem.d.ts +4 -0
  161. package/file-input/FileItem.js +121 -0
  162. package/file-input/types.d.ts +129 -0
  163. package/file-input/types.js +5 -0
  164. package/flex/Flex.d.ts +4 -0
  165. package/flex/Flex.js +57 -0
  166. package/flex/Flex.stories.tsx +112 -0
  167. package/flex/types.d.ts +97 -0
  168. package/flex/types.js +5 -0
  169. package/footer/Footer.accessibility.test.js +117 -0
  170. package/footer/Footer.d.ts +4 -0
  171. package/footer/Footer.js +140 -0
  172. package/footer/Footer.stories.tsx +196 -0
  173. package/footer/Footer.test.js +85 -0
  174. package/footer/Icons.d.ts +3 -0
  175. package/footer/Icons.js +136 -0
  176. package/footer/types.d.ts +64 -0
  177. package/footer/types.js +5 -0
  178. package/grid/Grid.d.ts +7 -0
  179. package/grid/Grid.js +76 -0
  180. package/grid/Grid.stories.tsx +219 -0
  181. package/grid/types.d.ts +115 -0
  182. package/grid/types.js +5 -0
  183. package/header/Header.accessibility.test.js +84 -0
  184. package/header/Header.d.ts +8 -0
  185. package/header/Header.js +209 -0
  186. package/header/Header.stories.tsx +251 -0
  187. package/header/Header.test.js +66 -0
  188. package/header/Icons.d.ts +2 -0
  189. package/header/Icons.js +29 -0
  190. package/header/types.d.ts +33 -0
  191. package/header/types.js +5 -0
  192. package/heading/Heading.accessibility.test.js +33 -0
  193. package/heading/Heading.d.ts +4 -0
  194. package/heading/Heading.js +137 -0
  195. package/heading/Heading.stories.tsx +54 -0
  196. package/heading/Heading.test.js +169 -0
  197. package/heading/types.d.ts +33 -0
  198. package/heading/types.js +5 -0
  199. package/icon/Icon.accessibility.test.js +30 -0
  200. package/icon/Icon.d.ts +4 -0
  201. package/icon/Icon.js +33 -0
  202. package/icon/Icon.stories.tsx +28 -0
  203. package/icon/types.d.ts +4 -0
  204. package/icon/types.js +5 -0
  205. package/image/Image.accessibility.test.js +56 -0
  206. package/image/Image.d.ts +4 -0
  207. package/image/Image.js +70 -0
  208. package/image/Image.stories.tsx +129 -0
  209. package/image/types.d.ts +72 -0
  210. package/image/types.js +5 -0
  211. package/inset/Inset.d.ts +3 -0
  212. package/inset/Inset.js +43 -0
  213. package/inset/Inset.stories.tsx +230 -0
  214. package/inset/types.d.ts +37 -0
  215. package/inset/types.js +5 -0
  216. package/layout/ApplicationLayout.d.ts +20 -0
  217. package/layout/ApplicationLayout.js +137 -0
  218. package/layout/ApplicationLayout.stories.tsx +162 -0
  219. package/layout/Icons.d.ts +7 -0
  220. package/layout/Icons.js +48 -0
  221. package/layout/types.d.ts +41 -0
  222. package/layout/types.js +5 -0
  223. package/link/Link.accessibility.test.js +112 -0
  224. package/link/Link.d.ts +4 -0
  225. package/link/Link.js +117 -0
  226. package/link/Link.stories.tsx +253 -0
  227. package/link/Link.test.js +63 -0
  228. package/link/types.d.ts +54 -0
  229. package/link/types.js +5 -0
  230. package/main.d.ts +49 -0
  231. package/{dist/main.js → main.js} +165 -111
  232. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  233. package/nav-tabs/NavTabs.d.ts +7 -0
  234. package/nav-tabs/NavTabs.js +93 -0
  235. package/nav-tabs/NavTabs.stories.tsx +279 -0
  236. package/nav-tabs/NavTabs.test.js +75 -0
  237. package/nav-tabs/NavTabsContext.d.ts +3 -0
  238. package/nav-tabs/NavTabsContext.js +8 -0
  239. package/nav-tabs/Tab.d.ts +4 -0
  240. package/nav-tabs/Tab.js +117 -0
  241. package/nav-tabs/types.d.ts +52 -0
  242. package/nav-tabs/types.js +5 -0
  243. package/number-input/NumberInput.accessibility.test.js +228 -0
  244. package/number-input/NumberInput.d.ts +4 -0
  245. package/number-input/NumberInput.js +86 -0
  246. package/number-input/NumberInput.stories.tsx +131 -0
  247. package/number-input/NumberInput.test.js +989 -0
  248. package/number-input/NumberInputContext.d.ts +3 -0
  249. package/number-input/NumberInputContext.js +8 -0
  250. package/number-input/types.d.ts +136 -0
  251. package/number-input/types.js +5 -0
  252. package/package.json +62 -52
  253. package/paginator/Paginator.accessibility.test.js +79 -0
  254. package/paginator/Paginator.d.ts +4 -0
  255. package/paginator/Paginator.js +134 -0
  256. package/paginator/Paginator.stories.tsx +87 -0
  257. package/paginator/Paginator.test.js +335 -0
  258. package/paginator/types.d.ts +38 -0
  259. package/paginator/types.js +5 -0
  260. package/paragraph/Paragraph.accessibility.test.js +28 -0
  261. package/paragraph/Paragraph.d.ts +5 -0
  262. package/paragraph/Paragraph.js +22 -0
  263. package/paragraph/Paragraph.stories.tsx +27 -0
  264. package/password-input/PasswordInput.accessibility.test.js +153 -0
  265. package/password-input/PasswordInput.d.ts +4 -0
  266. package/password-input/PasswordInput.js +96 -0
  267. package/password-input/PasswordInput.stories.tsx +99 -0
  268. package/password-input/PasswordInput.test.js +198 -0
  269. package/password-input/types.d.ts +111 -0
  270. package/password-input/types.js +5 -0
  271. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  272. package/progress-bar/ProgressBar.d.ts +4 -0
  273. package/progress-bar/ProgressBar.js +144 -0
  274. package/progress-bar/ProgressBar.stories.tsx +93 -0
  275. package/progress-bar/ProgressBar.test.js +93 -0
  276. package/progress-bar/types.d.ts +37 -0
  277. package/progress-bar/types.js +5 -0
  278. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  279. package/quick-nav/QuickNav.d.ts +4 -0
  280. package/quick-nav/QuickNav.js +94 -0
  281. package/quick-nav/QuickNav.stories.tsx +356 -0
  282. package/quick-nav/types.d.ts +21 -0
  283. package/quick-nav/types.js +5 -0
  284. package/radio-group/Radio.d.ts +4 -0
  285. package/radio-group/Radio.js +124 -0
  286. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  287. package/radio-group/RadioGroup.d.ts +4 -0
  288. package/radio-group/RadioGroup.js +235 -0
  289. package/radio-group/RadioGroup.stories.tsx +214 -0
  290. package/radio-group/RadioGroup.test.js +756 -0
  291. package/radio-group/types.d.ts +114 -0
  292. package/radio-group/types.js +5 -0
  293. package/resultset-table/Icons.d.ts +7 -0
  294. package/resultset-table/Icons.js +47 -0
  295. package/resultset-table/ResultsetTable.accessibility.test.js +274 -0
  296. package/resultset-table/ResultsetTable.d.ts +7 -0
  297. package/resultset-table/ResultsetTable.js +170 -0
  298. package/resultset-table/ResultsetTable.stories.tsx +401 -0
  299. package/resultset-table/ResultsetTable.test.js +381 -0
  300. package/resultset-table/types.d.ts +100 -0
  301. package/resultset-table/types.js +5 -0
  302. package/select/Listbox.d.ts +4 -0
  303. package/select/Listbox.js +145 -0
  304. package/select/Option.d.ts +4 -0
  305. package/select/Option.js +88 -0
  306. package/select/Select.accessibility.test.js +217 -0
  307. package/select/Select.d.ts +4 -0
  308. package/select/Select.js +598 -0
  309. package/select/Select.stories.tsx +907 -0
  310. package/select/Select.test.js +2276 -0
  311. package/select/types.d.ts +209 -0
  312. package/select/types.js +5 -0
  313. package/sidenav/Sidenav.accessibility.test.js +59 -0
  314. package/sidenav/Sidenav.d.ts +10 -0
  315. package/sidenav/Sidenav.js +201 -0
  316. package/sidenav/Sidenav.stories.tsx +277 -0
  317. package/sidenav/Sidenav.test.js +37 -0
  318. package/sidenav/SidenavContext.d.ts +5 -0
  319. package/sidenav/SidenavContext.js +13 -0
  320. package/sidenav/types.d.ts +76 -0
  321. package/sidenav/types.js +5 -0
  322. package/slider/Slider.accessibility.test.js +104 -0
  323. package/slider/Slider.d.ts +4 -0
  324. package/slider/Slider.js +285 -0
  325. package/slider/Slider.test.js +254 -0
  326. package/slider/types.d.ts +86 -0
  327. package/slider/types.js +5 -0
  328. package/spinner/Spinner.accessibility.test.js +96 -0
  329. package/spinner/Spinner.d.ts +4 -0
  330. package/spinner/Spinner.js +206 -0
  331. package/spinner/Spinner.stories.tsx +129 -0
  332. package/spinner/Spinner.test.js +55 -0
  333. package/spinner/types.d.ts +32 -0
  334. package/spinner/types.js +5 -0
  335. package/status-light/StatusLight.accessibility.test.js +157 -0
  336. package/status-light/StatusLight.d.ts +4 -0
  337. package/status-light/StatusLight.js +51 -0
  338. package/status-light/StatusLight.stories.tsx +74 -0
  339. package/status-light/StatusLight.test.js +25 -0
  340. package/status-light/types.d.ts +17 -0
  341. package/status-light/types.js +5 -0
  342. package/switch/Switch.accessibility.test.js +89 -0
  343. package/switch/Switch.d.ts +4 -0
  344. package/switch/Switch.js +214 -0
  345. package/switch/Switch.stories.tsx +137 -0
  346. package/switch/Switch.test.js +180 -0
  347. package/switch/types.d.ts +66 -0
  348. package/switch/types.js +5 -0
  349. package/table/DropdownTheme.js +62 -0
  350. package/table/Table.accessibility.test.js +82 -0
  351. package/table/Table.d.ts +8 -0
  352. package/table/Table.js +161 -0
  353. package/table/Table.stories.tsx +651 -0
  354. package/table/Table.test.js +113 -0
  355. package/table/types.d.ts +49 -0
  356. package/table/types.js +5 -0
  357. package/tabs/Tab.d.ts +4 -0
  358. package/tabs/Tab.js +117 -0
  359. package/tabs/Tabs.accessibility.test.js +56 -0
  360. package/tabs/Tabs.d.ts +4 -0
  361. package/tabs/Tabs.js +373 -0
  362. package/tabs/Tabs.stories.tsx +224 -0
  363. package/tabs/Tabs.test.js +276 -0
  364. package/tabs/types.d.ts +92 -0
  365. package/tabs/types.js +5 -0
  366. package/tag/Tag.accessibility.test.js +69 -0
  367. package/tag/Tag.d.ts +4 -0
  368. package/tag/Tag.js +151 -0
  369. package/tag/Tag.stories.tsx +152 -0
  370. package/tag/Tag.test.js +41 -0
  371. package/tag/types.d.ts +69 -0
  372. package/tag/types.js +5 -0
  373. package/text-input/Suggestion.d.ts +4 -0
  374. package/text-input/Suggestion.js +67 -0
  375. package/text-input/Suggestions.d.ts +4 -0
  376. package/text-input/Suggestions.js +86 -0
  377. package/text-input/TextInput.accessibility.test.js +321 -0
  378. package/text-input/TextInput.d.ts +4 -0
  379. package/text-input/TextInput.js +567 -0
  380. package/text-input/TextInput.stories.tsx +465 -0
  381. package/text-input/TextInput.test.js +1756 -0
  382. package/text-input/types.d.ts +205 -0
  383. package/text-input/types.js +5 -0
  384. package/textarea/Textarea.accessibility.test.js +155 -0
  385. package/textarea/Textarea.d.ts +4 -0
  386. package/textarea/Textarea.js +234 -0
  387. package/textarea/Textarea.stories.tsx +174 -0
  388. package/textarea/Textarea.test.js +406 -0
  389. package/textarea/types.d.ts +141 -0
  390. package/textarea/types.js +5 -0
  391. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  392. package/toggle-group/ToggleGroup.d.ts +4 -0
  393. package/toggle-group/ToggleGroup.js +202 -0
  394. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  395. package/toggle-group/ToggleGroup.test.js +137 -0
  396. package/toggle-group/types.d.ts +114 -0
  397. package/toggle-group/types.js +5 -0
  398. package/typography/Typography.accessibility.test.js +339 -0
  399. package/typography/Typography.d.ts +4 -0
  400. package/typography/Typography.js +23 -0
  401. package/typography/Typography.stories.tsx +198 -0
  402. package/typography/types.d.ts +18 -0
  403. package/typography/types.js +5 -0
  404. package/useTheme.d.ts +1147 -0
  405. package/{dist/useTheme.js → useTheme.js} +4 -11
  406. package/useTranslatedLabels.d.ts +85 -0
  407. package/useTranslatedLabels.js +14 -0
  408. package/utils/BaseTypography.d.ts +21 -0
  409. package/utils/BaseTypography.js +94 -0
  410. package/utils/FocusLock.d.ts +13 -0
  411. package/utils/FocusLock.js +124 -0
  412. package/wizard/Wizard.accessibility.test.js +55 -0
  413. package/wizard/Wizard.d.ts +4 -0
  414. package/wizard/Wizard.js +247 -0
  415. package/wizard/Wizard.stories.tsx +272 -0
  416. package/wizard/Wizard.test.js +114 -0
  417. package/wizard/types.d.ts +64 -0
  418. package/wizard/types.js +5 -0
  419. package/babel.config.js +0 -8
  420. package/dist/ThemeContext.js +0 -185
  421. package/dist/accordion/Accordion.js +0 -286
  422. package/dist/accordion/Accordion.stories.js +0 -207
  423. package/dist/accordion/readme.md +0 -96
  424. package/dist/accordion-group/AccordionGroup.js +0 -156
  425. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  426. package/dist/accordion-group/readme.md +0 -70
  427. package/dist/alert/Alert.js +0 -316
  428. package/dist/alert/Alert.stories.js +0 -158
  429. package/dist/alert/close.svg +0 -4
  430. package/dist/alert/error.svg +0 -4
  431. package/dist/alert/info.svg +0 -4
  432. package/dist/alert/readme.md +0 -43
  433. package/dist/alert/success.svg +0 -4
  434. package/dist/alert/warning.svg +0 -4
  435. package/dist/badge/Badge.js +0 -42
  436. package/dist/box/Box.js +0 -149
  437. package/dist/button/Button.js +0 -221
  438. package/dist/button/Button.stories.js +0 -224
  439. package/dist/button/readme.md +0 -93
  440. package/dist/card/Card.js +0 -247
  441. package/dist/checkbox/Checkbox.js +0 -235
  442. package/dist/checkbox/Checkbox.stories.js +0 -144
  443. package/dist/checkbox/readme.md +0 -116
  444. package/dist/chip/Chip.js +0 -225
  445. package/dist/common/OpenSans.css +0 -81
  446. package/dist/common/RequiredComponent.js +0 -40
  447. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  448. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  449. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  450. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  451. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  452. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  453. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  454. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  455. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  456. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  457. package/dist/common/services/example-service.js +0 -10
  458. package/dist/common/services/example-service.test.js +0 -12
  459. package/dist/common/utils.js +0 -42
  460. package/dist/common/variables.js +0 -522
  461. package/dist/date/Date.js +0 -359
  462. package/dist/date/Date.stories.js +0 -205
  463. package/dist/date/calendar.svg +0 -1
  464. package/dist/date/calendar_dark.svg +0 -1
  465. package/dist/date/readme.md +0 -73
  466. package/dist/dialog/Dialog.js +0 -205
  467. package/dist/dialog/Dialog.stories.js +0 -217
  468. package/dist/dialog/readme.md +0 -32
  469. package/dist/dropdown/Dropdown.js +0 -458
  470. package/dist/dropdown/Dropdown.stories.js +0 -249
  471. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  472. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  473. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  474. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  475. package/dist/dropdown/readme.md +0 -69
  476. package/dist/footer/Footer.js +0 -381
  477. package/dist/footer/Footer.stories.js +0 -94
  478. package/dist/footer/dxc_logo_wht.png +0 -0
  479. package/dist/footer/readme.md +0 -41
  480. package/dist/header/Header.js +0 -385
  481. package/dist/header/Header.stories.js +0 -176
  482. package/dist/header/close_icon.svg +0 -1
  483. package/dist/header/dxc_logo_black.png +0 -0
  484. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  485. package/dist/header/dxc_logo_white.png +0 -0
  486. package/dist/header/hamb_menu_black.svg +0 -1
  487. package/dist/header/hamb_menu_white.svg +0 -1
  488. package/dist/header/readme.md +0 -33
  489. package/dist/heading/Heading.js +0 -165
  490. package/dist/input-text/InputText.js +0 -599
  491. package/dist/input-text/InputText.stories.js +0 -209
  492. package/dist/input-text/error.svg +0 -1
  493. package/dist/input-text/readme.md +0 -91
  494. package/dist/layout/ApplicationLayout.js +0 -331
  495. package/dist/layout/facebook.svg +0 -45
  496. package/dist/layout/linkedin.svg +0 -50
  497. package/dist/layout/twitter.svg +0 -53
  498. package/dist/link/Link.js +0 -201
  499. package/dist/link/readme.md +0 -51
  500. package/dist/paginator/Paginator.js +0 -263
  501. package/dist/paginator/images/next.svg +0 -3
  502. package/dist/paginator/images/nextPage.svg +0 -3
  503. package/dist/paginator/images/previous.svg +0 -3
  504. package/dist/paginator/images/previousPage.svg +0 -3
  505. package/dist/paginator/readme.md +0 -50
  506. package/dist/progress-bar/ProgressBar.js +0 -194
  507. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  508. package/dist/progress-bar/readme.md +0 -63
  509. package/dist/radio/Radio.js +0 -192
  510. package/dist/radio/Radio.stories.js +0 -166
  511. package/dist/radio/readme.md +0 -70
  512. package/dist/resultsetTable/ResultsetTable.js +0 -333
  513. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  514. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  515. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  516. package/dist/select/Select.js +0 -492
  517. package/dist/select/Select.stories.js +0 -235
  518. package/dist/select/readme.md +0 -72
  519. package/dist/sidenav/Sidenav.js +0 -157
  520. package/dist/slider/Slider.js +0 -269
  521. package/dist/slider/Slider.stories.js +0 -241
  522. package/dist/slider/readme.md +0 -64
  523. package/dist/spinner/Spinner.js +0 -200
  524. package/dist/spinner/Spinner.stories.js +0 -183
  525. package/dist/spinner/readme.md +0 -65
  526. package/dist/switch/Switch.js +0 -196
  527. package/dist/switch/Switch.stories.js +0 -134
  528. package/dist/switch/readme.md +0 -133
  529. package/dist/table/Table.js +0 -100
  530. package/dist/tabs/Tabs.js +0 -327
  531. package/dist/tabs/Tabs.stories.js +0 -130
  532. package/dist/tabs/readme.md +0 -78
  533. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  534. package/dist/tabs-for-sections/readme.md +0 -78
  535. package/dist/tag/Tag.js +0 -268
  536. package/dist/textarea/Textarea.js +0 -240
  537. package/dist/toggle/Toggle.js +0 -222
  538. package/dist/toggle/Toggle.stories.js +0 -297
  539. package/dist/toggle/readme.md +0 -80
  540. package/dist/toggle-group/ToggleGroup.js +0 -225
  541. package/dist/toggle-group/readme.md +0 -82
  542. package/dist/upload/Upload.js +0 -211
  543. package/dist/upload/Upload.stories.js +0 -72
  544. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -125
  545. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  546. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  547. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -295
  548. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  549. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  550. package/dist/upload/file-upload/FileToUpload.js +0 -164
  551. package/dist/upload/file-upload/audio-icon.svg +0 -4
  552. package/dist/upload/file-upload/close.svg +0 -4
  553. package/dist/upload/file-upload/file-icon.svg +0 -4
  554. package/dist/upload/file-upload/video-icon.svg +0 -4
  555. package/dist/upload/files-upload/FilesToUpload.js +0 -125
  556. package/dist/upload/readme.md +0 -37
  557. package/dist/upload/transaction/Transaction.js +0 -154
  558. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  559. package/dist/upload/transaction/audio-icon.svg +0 -4
  560. package/dist/upload/transaction/error-icon.svg +0 -4
  561. package/dist/upload/transaction/file-icon-err.svg +0 -4
  562. package/dist/upload/transaction/file-icon.svg +0 -4
  563. package/dist/upload/transaction/image-icon-err.svg +0 -4
  564. package/dist/upload/transaction/image-icon.svg +0 -4
  565. package/dist/upload/transaction/success-icon.svg +0 -4
  566. package/dist/upload/transaction/video-icon-err.svg +0 -4
  567. package/dist/upload/transaction/video-icon.svg +0 -4
  568. package/dist/upload/transactions/Transactions.js +0 -124
  569. package/dist/wizard/Wizard.js +0 -357
  570. package/dist/wizard/invalid_icon.svg +0 -6
  571. package/dist/wizard/valid_icon.svg +0 -6
  572. package/dist/wizard/validation-wrong.svg +0 -6
  573. package/test/Accordion.test.js +0 -33
  574. package/test/AccordionGroup.test.js +0 -109
  575. package/test/Alert.test.js +0 -53
  576. package/test/Box.test.js +0 -10
  577. package/test/Button.test.js +0 -18
  578. package/test/Card.test.js +0 -30
  579. package/test/Checkbox.test.js +0 -45
  580. package/test/Chip.test.js +0 -25
  581. package/test/Date.test.js +0 -393
  582. package/test/Dialog.test.js +0 -23
  583. package/test/Dropdown.test.js +0 -130
  584. package/test/Footer.test.js +0 -99
  585. package/test/Header.test.js +0 -39
  586. package/test/Heading.test.js +0 -35
  587. package/test/InputText.test.js +0 -240
  588. package/test/Link.test.js +0 -42
  589. package/test/Paginator.test.js +0 -177
  590. package/test/ProgressBar.test.js +0 -35
  591. package/test/Radio.test.js +0 -37
  592. package/test/ResultsetTable.test.js +0 -330
  593. package/test/Select.test.js +0 -192
  594. package/test/Sidenav.test.js +0 -45
  595. package/test/Slider.test.js +0 -82
  596. package/test/Spinner.test.js +0 -27
  597. package/test/Switch.test.js +0 -45
  598. package/test/Table.test.js +0 -36
  599. package/test/Tabs.test.js +0 -109
  600. package/test/TabsForSections.test.js +0 -34
  601. package/test/Tag.test.js +0 -32
  602. package/test/TextArea.test.js +0 -52
  603. package/test/ToggleGroup.test.js +0 -81
  604. package/test/Upload.test.js +0 -60
  605. package/test/Wizard.test.js +0 -130
  606. package/test/mocks/pngMock.js +0 -1
  607. package/test/mocks/svgMock.js +0 -1
@@ -1,70 +0,0 @@
1
- # DXC Accordion Group Component
2
- ## Props
3
-
4
- <table>
5
- <tr style="background-color: grey">
6
- <td>Name</td>
7
- <td>Default</td>
8
- <td>Description</td>
9
- </tr>
10
- <tr>
11
- <td>indexActive: number</td>
12
- <td></td>
13
- <td>The index of the active accordion. If undefined, the component will be uncontrolled and the active tab will be managed internally by the component.</td>
14
- </tr>
15
- <tr>
16
- <td>disabled: boolean</td>
17
- <td><code>false</code></td>
18
- <td>If true, the component will be disabled.</td>
19
- </tr>
20
- <tr>
21
- <td>onActiveChange: function</td>
22
- <td></td>
23
- <td>This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.</td>
24
- </tr>
25
- <tr>
26
- <td>margin: string | object</td>
27
- <td></td>
28
- <td>Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.</td>
29
- </tr>
30
-
31
- </table>
32
-
33
- ## Examples
34
-
35
- - Basic accordion group
36
-
37
- ```js
38
- import React from "react";
39
-
40
- import { DxcAccordionGroup } from "@dxc-technology/halstack-react";
41
-
42
- function App() {
43
- const handleOnChange = event => {
44
- console.log("Accordion clicked");
45
- };
46
-
47
- return (
48
- <div>
49
- <DxcAccordionGroup>
50
- <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
51
- <div>
52
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
53
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
54
- eget.
55
- </div>
56
- </DxcAccordionGroup.Accordion>
57
- <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
58
- <div>
59
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
60
- Suspendisse malesuada lacus ex, sit amet blandit leo lobortis
61
- eget.
62
- </div>
63
- </DxcAccordionGroup.Accordion>
64
- </DxcAccordionGroup>
65
- </div>
66
- );
67
- }
68
-
69
- export default App;
70
- ```
@@ -1,316 +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
- require("../common/OpenSans.css");
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _close = _interopRequireDefault(require("./close.svg"));
29
-
30
- var _error = _interopRequireDefault(require("./error.svg"));
31
-
32
- var _info = _interopRequireDefault(require("./info.svg"));
33
-
34
- var _success = _interopRequireDefault(require("./success.svg"));
35
-
36
- var _warning = _interopRequireDefault(require("./warning.svg"));
37
-
38
- var _utils = require("../common/utils.js");
39
-
40
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
41
-
42
- function _templateObject11() {
43
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
44
-
45
- _templateObject11 = function _templateObject11() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject10() {
53
- 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"]);
54
-
55
- _templateObject10 = function _templateObject10() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject9() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n flex: 1 1 auto;\n padding: 8px 12px 20px 46px;\n overflow-y: auto;\n"]);
64
-
65
- _templateObject9 = function _templateObject9() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject8() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n padding-left: 12px;\n padding-right: 12px;\n overflow: hidden;\n flex-grow: 1;\n align-items: center;\n"]);
74
-
75
- _templateObject8 = function _templateObject8() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject7() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 12px;\n"]);
84
-
85
- _templateObject7 = function _templateObject7() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- function _templateObject6() {
93
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-left: 10px;\n padding-right: 10px;\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"]);
94
-
95
- _templateObject6 = function _templateObject6() {
96
- return data;
97
- };
98
-
99
- return data;
100
- }
101
-
102
- function _templateObject5() {
103
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-transform: ", ";\n padding-right: 10px;\n font-weight: ", ";\n"]);
104
-
105
- _templateObject5 = function _templateObject5() {
106
- return data;
107
- };
108
-
109
- return data;
110
- }
111
-
112
- function _templateObject4() {
113
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n height: 48px;\n align-items: center;\n width: 100%;\n"]);
114
-
115
- _templateObject4 = function _templateObject4() {
116
- return data;
117
- };
118
-
119
- return data;
120
- }
121
-
122
- function _templateObject3() {
123
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: ", ";\n font-size: ", ";\n overflow: hidden;\n box-shadow: 0px 3px 6px #00000012;\n border-radius: 4px;\n font-family: ", ";\n justify-content: ", ";\n align-items: ", ";\n max-width: ", ";\n width: ", ";\n min-height: ", ";\n background-color: ", ";\n z-index: 300;\n cursor: default;\n"]);
124
-
125
- _templateObject3 = function _templateObject3() {
126
- return data;
127
- };
128
-
129
- return data;
130
- }
131
-
132
- function _templateObject2() {
133
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n opacity: ", ";\n position: ", ";\n top: ", ";\n bottom: ", ";\n left: ", ";\n right: ", ";\n"]);
134
-
135
- _templateObject2 = function _templateObject2() {
136
- return data;
137
- };
138
-
139
- return data;
140
- }
141
-
142
- function _templateObject() {
143
- 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: 200;\n"]);
144
-
145
- _templateObject = function _templateObject() {
146
- return data;
147
- };
148
-
149
- return data;
150
- }
151
-
152
- var DxcAlert = function DxcAlert(_ref) {
153
- var _ref$type = _ref.type,
154
- type = _ref$type === void 0 ? "info" : _ref$type,
155
- _ref$mode = _ref.mode,
156
- mode = _ref$mode === void 0 ? "inline" : _ref$mode,
157
- _ref$inlineText = _ref.inlineText,
158
- inlineText = _ref$inlineText === void 0 ? "" : _ref$inlineText,
159
- onClose = _ref.onClose,
160
- children = _ref.children,
161
- margin = _ref.margin,
162
- _ref$size = _ref.size,
163
- size = _ref$size === void 0 ? "fitContent" : _ref$size,
164
- tabIndex = _ref.tabIndex;
165
- var colorsTheme = (0, _useTheme["default"])();
166
-
167
- var getTypeText = function getTypeText() {
168
- return type === "info" ? "information" : type === "confirm" ? "success" : type === "warning" ? "warning" : "error";
169
- };
170
-
171
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
172
- theme: colorsTheme.alert
173
- }, _react["default"].createElement(AlertModal, {
174
- mode: mode
175
- }, mode === "modal" && _react["default"].createElement(OverlayContainer, {
176
- mode: mode,
177
- onClick: onClose
178
- }), _react["default"].createElement(AlertContainer, {
179
- mode: mode,
180
- type: type,
181
- margin: margin,
182
- size: size
183
- }, _react["default"].createElement(AlertInfo, null, _react["default"].createElement(AlertIcon, {
184
- src: type === "info" && _info["default"] || type === "confirm" && _success["default"] || type === "warning" && _warning["default"] || type === "error" && _error["default"] || _error["default"]
185
- }), _react["default"].createElement(AlertInfoText, null, _react["default"].createElement(AlertType, {
186
- type: type
187
- }, getTypeText(type)), inlineText && inlineText !== "" && "-", _react["default"].createElement(AlertText, null, inlineText), onClose && _react["default"].createElement(CloseAlertIcon, {
188
- onClick: onClose,
189
- tabIndex: tabIndex
190
- }, _react["default"].createElement(CloseImg, {
191
- src: _close["default"]
192
- })))), children && _react["default"].createElement(AlertContent, null, children))));
193
- };
194
-
195
- var sizes = {
196
- small: "280px",
197
- medium: "480px",
198
- large: "820px",
199
- fillParent: "100%",
200
- fitContent: "auto"
201
- };
202
-
203
- var calculateWidth = function calculateWidth(margin, size) {
204
- if (size === "fillParent") {
205
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
206
- }
207
-
208
- return sizes[size];
209
- };
210
-
211
- DxcAlert.propTypes = {
212
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
213
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
214
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
215
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
216
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
217
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
218
- type: _propTypes["default"].oneOf(["info", "confirm", "warning", "error"]),
219
- mode: _propTypes["default"].oneOf(["inline", "modal"]),
220
- inlineText: _propTypes["default"].string,
221
- onClose: _propTypes["default"].func,
222
- children: _propTypes["default"].element,
223
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
224
- tabIndex: _propTypes["default"].number
225
- };
226
-
227
- var AlertModal = _styledComponents["default"].div(_templateObject(), function (props) {
228
- return props.theme.fontSizeBase;
229
- }, function (props) {
230
- return props.mode === "modal" ? "100%" : "";
231
- }, function (props) {
232
- return props.mode === "modal" ? "100%" : "";
233
- }, function (props) {
234
- return props.mode === "modal" ? "center" : "";
235
- }, function (props) {
236
- return props.mode === "modal" ? "center" : "";
237
- }, function (props) {
238
- return props.mode === "modal" ? "0" : "";
239
- }, function (props) {
240
- return props.mode === "modal" ? "0" : "";
241
- }, function (props) {
242
- return props.mode === "modal" ? "fixed" : "";
243
- }, function (props) {
244
- return props.mode === "modal" ? "flex" : "";
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" && "0.8";
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 props.theme.fontSize;
277
- }, function (props) {
278
- return props.theme.fontFamily;
279
- }, function (props) {
280
- return props.mode === "modal" ? "center" : "";
281
- }, function (props) {
282
- return props.mode === "modal" ? "center" : "";
283
- }, function (props) {
284
- return props.size === "fitContent" ? calculateWidth(props.margin, "fillParent") : calculateWidth(props.margin, props.size);
285
- }, function (props) {
286
- return calculateWidth(props.margin, props.size);
287
- }, function (props) {
288
- return props.children && props.children.filter(function (child) {
289
- return child === undefined;
290
- }).length === 0 && "92px" || "48px";
291
- }, function (props) {
292
- return props.type === "info" && props.theme.infoColor || props.type === "confirm" && props.theme.confirmColor || props.type === "warning" && props.theme.warningColor || props.type === "error" && props.theme.errorColor || props.theme.lightPink;
293
- });
294
-
295
- var AlertInfo = _styledComponents["default"].div(_templateObject4());
296
-
297
- var AlertType = _styledComponents["default"].div(_templateObject5(), function (props) {
298
- return props.theme.fontTextTransform;
299
- }, function (props) {
300
- return props.theme.fontWeight;
301
- });
302
-
303
- var AlertText = _styledComponents["default"].div(_templateObject6());
304
-
305
- var AlertIcon = _styledComponents["default"].img(_templateObject7());
306
-
307
- var AlertInfoText = _styledComponents["default"].div(_templateObject8());
308
-
309
- var AlertContent = _styledComponents["default"].div(_templateObject9());
310
-
311
- var CloseAlertIcon = _styledComponents["default"].button(_templateObject10());
312
-
313
- var CloseImg = _styledComponents["default"].img(_templateObject11());
314
-
315
- var _default = DxcAlert;
316
- 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>
@@ -1,42 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports["default"] = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
-
12
- var _react = _interopRequireDefault(require("react"));
13
-
14
- var _styledComponents = _interopRequireDefault(require("styled-components"));
15
-
16
- require("../common/OpenSans.css");
17
-
18
- function _templateObject() {
19
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: #d0011b;\n border-radius: 10px;\n width: ", ";\n height: ", ";\n display: flex;\n padding-bottom: 1px;\n padding-right: 1px;\n flex-wrap: wrap;\n box-sizing: border-box;\n align-items: center;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n color: #ffffff;\n font-size: 10px;\n"]);
20
-
21
- _templateObject = function _templateObject() {
22
- return data;
23
- };
24
-
25
- return data;
26
- }
27
-
28
- var DxcBadge = function DxcBadge(_ref) {
29
- var notificationText = _ref.notificationText;
30
- return _react["default"].createElement(StyledDxcBadge, {
31
- notificationText: notificationText
32
- }, _react["default"].createElement("span", null, notificationText));
33
- };
34
-
35
- var StyledDxcBadge = _styledComponents["default"].div(_templateObject(), function (props) {
36
- return props.notificationText === true ? "16px" : "23px";
37
- }, function (props) {
38
- return props.notificationText === true ? "16px" : "17px";
39
- });
40
-
41
- var _default = DxcBadge;
42
- exports["default"] = _default;