@dxc-technology/halstack-react 0.0.0-f23c298 → 0.0.0-f2bad31

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 (611) hide show
  1. package/BackgroundColorContext.d.ts +1 -0
  2. package/BackgroundColorContext.js +30 -0
  3. package/HalstackContext.d.ts +1249 -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 +169 -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 +159 -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 +1395 -0
  96. package/common/variables.js +1267 -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 +7 -0
  104. package/contextual-menu/ContextualMenu.js +71 -0
  105. package/contextual-menu/ContextualMenu.stories.tsx +182 -0
  106. package/contextual-menu/ContextualMenu.test.js +71 -0
  107. package/contextual-menu/MenuItemAction.d.ts +4 -0
  108. package/contextual-menu/MenuItemAction.js +46 -0
  109. package/contextual-menu/types.d.ts +22 -0
  110. package/contextual-menu/types.js +5 -0
  111. package/date-input/Calendar.d.ts +4 -0
  112. package/date-input/Calendar.js +214 -0
  113. package/date-input/DateInput.accessibility.test.js +216 -0
  114. package/date-input/DateInput.d.ts +4 -0
  115. package/date-input/DateInput.js +223 -0
  116. package/date-input/DateInput.stories.tsx +285 -0
  117. package/date-input/DateInput.test.js +808 -0
  118. package/date-input/DatePicker.d.ts +4 -0
  119. package/date-input/DatePicker.js +115 -0
  120. package/date-input/Icons.d.ts +6 -0
  121. package/date-input/Icons.js +58 -0
  122. package/date-input/YearPicker.d.ts +4 -0
  123. package/date-input/YearPicker.js +100 -0
  124. package/date-input/types.d.ts +164 -0
  125. package/date-input/types.js +5 -0
  126. package/dialog/Dialog.accessibility.test.js +69 -0
  127. package/dialog/Dialog.d.ts +4 -0
  128. package/dialog/Dialog.js +104 -0
  129. package/dialog/Dialog.stories.tsx +365 -0
  130. package/dialog/Dialog.test.js +307 -0
  131. package/dialog/types.d.ts +36 -0
  132. package/dialog/types.js +5 -0
  133. package/divider/Divider.accessibility.test.js +33 -0
  134. package/divider/Divider.d.ts +4 -0
  135. package/divider/Divider.js +36 -0
  136. package/divider/Divider.stories.tsx +223 -0
  137. package/divider/Divider.test.js +38 -0
  138. package/divider/types.d.ts +21 -0
  139. package/divider/types.js +5 -0
  140. package/dropdown/Dropdown.accessibility.test.js +180 -0
  141. package/dropdown/Dropdown.d.ts +4 -0
  142. package/dropdown/Dropdown.js +319 -0
  143. package/dropdown/Dropdown.stories.tsx +427 -0
  144. package/dropdown/Dropdown.test.js +599 -0
  145. package/dropdown/DropdownMenu.d.ts +4 -0
  146. package/dropdown/DropdownMenu.js +63 -0
  147. package/dropdown/DropdownMenuItem.d.ts +4 -0
  148. package/dropdown/DropdownMenuItem.js +70 -0
  149. package/dropdown/types.d.ts +96 -0
  150. package/dropdown/types.js +5 -0
  151. package/file-input/FileInput.accessibility.test.js +160 -0
  152. package/file-input/FileInput.d.ts +4 -0
  153. package/file-input/FileInput.js +479 -0
  154. package/file-input/FileInput.stories.tsx +618 -0
  155. package/file-input/FileInput.test.js +459 -0
  156. package/file-input/FileItem.d.ts +4 -0
  157. package/file-input/FileItem.js +135 -0
  158. package/file-input/types.d.ts +129 -0
  159. package/file-input/types.js +5 -0
  160. package/flex/Flex.d.ts +4 -0
  161. package/flex/Flex.js +57 -0
  162. package/flex/Flex.stories.tsx +112 -0
  163. package/flex/types.d.ts +97 -0
  164. package/flex/types.js +5 -0
  165. package/footer/Footer.accessibility.test.js +117 -0
  166. package/footer/Footer.d.ts +4 -0
  167. package/footer/Footer.js +138 -0
  168. package/footer/Footer.stories.tsx +170 -0
  169. package/footer/Footer.test.js +85 -0
  170. package/footer/Icons.d.ts +3 -0
  171. package/footer/Icons.js +136 -0
  172. package/footer/types.d.ts +64 -0
  173. package/footer/types.js +5 -0
  174. package/grid/Grid.d.ts +7 -0
  175. package/grid/Grid.js +76 -0
  176. package/grid/Grid.stories.tsx +219 -0
  177. package/grid/types.d.ts +115 -0
  178. package/grid/types.js +5 -0
  179. package/header/Header.accessibility.test.js +84 -0
  180. package/header/Header.d.ts +8 -0
  181. package/header/Header.js +220 -0
  182. package/header/Header.stories.tsx +251 -0
  183. package/header/Header.test.js +66 -0
  184. package/header/Icons.d.ts +2 -0
  185. package/header/Icons.js +29 -0
  186. package/header/types.d.ts +33 -0
  187. package/header/types.js +5 -0
  188. package/heading/Heading.accessibility.test.js +33 -0
  189. package/heading/Heading.d.ts +4 -0
  190. package/heading/Heading.js +137 -0
  191. package/heading/Heading.stories.tsx +54 -0
  192. package/heading/Heading.test.js +169 -0
  193. package/heading/types.d.ts +33 -0
  194. package/heading/types.js +5 -0
  195. package/icon/Icon.accessibility.test.js +30 -0
  196. package/icon/Icon.d.ts +4 -0
  197. package/icon/Icon.js +33 -0
  198. package/icon/Icon.stories.tsx +28 -0
  199. package/icon/types.d.ts +4 -0
  200. package/icon/types.js +5 -0
  201. package/image/Image.accessibility.test.js +56 -0
  202. package/image/Image.d.ts +4 -0
  203. package/image/Image.js +70 -0
  204. package/image/Image.stories.tsx +129 -0
  205. package/image/types.d.ts +72 -0
  206. package/image/types.js +5 -0
  207. package/inset/Inset.d.ts +3 -0
  208. package/inset/Inset.js +43 -0
  209. package/inset/Inset.stories.tsx +230 -0
  210. package/inset/types.d.ts +37 -0
  211. package/inset/types.js +5 -0
  212. package/layout/ApplicationLayout.d.ts +20 -0
  213. package/layout/ApplicationLayout.js +134 -0
  214. package/layout/ApplicationLayout.stories.tsx +162 -0
  215. package/layout/Icons.d.ts +8 -0
  216. package/layout/Icons.js +56 -0
  217. package/layout/types.d.ts +41 -0
  218. package/layout/types.js +5 -0
  219. package/link/Link.accessibility.test.js +112 -0
  220. package/link/Link.d.ts +4 -0
  221. package/link/Link.js +115 -0
  222. package/link/Link.stories.tsx +253 -0
  223. package/link/Link.test.js +63 -0
  224. package/link/types.d.ts +54 -0
  225. package/link/types.js +5 -0
  226. package/main.d.ts +49 -0
  227. package/{dist/main.js → main.js} +165 -111
  228. package/nav-tabs/NavTabs.accessibility.test.js +52 -0
  229. package/nav-tabs/NavTabs.d.ts +7 -0
  230. package/nav-tabs/NavTabs.js +93 -0
  231. package/nav-tabs/NavTabs.stories.tsx +276 -0
  232. package/nav-tabs/NavTabs.test.js +76 -0
  233. package/nav-tabs/NavTabsContext.d.ts +3 -0
  234. package/nav-tabs/NavTabsContext.js +8 -0
  235. package/nav-tabs/Tab.d.ts +4 -0
  236. package/nav-tabs/Tab.js +118 -0
  237. package/nav-tabs/types.d.ts +52 -0
  238. package/nav-tabs/types.js +5 -0
  239. package/number-input/NumberInput.accessibility.test.js +228 -0
  240. package/number-input/NumberInput.d.ts +4 -0
  241. package/number-input/NumberInput.js +86 -0
  242. package/number-input/NumberInput.stories.tsx +131 -0
  243. package/number-input/NumberInput.test.js +989 -0
  244. package/number-input/NumberInputContext.d.ts +3 -0
  245. package/number-input/NumberInputContext.js +8 -0
  246. package/number-input/types.d.ts +136 -0
  247. package/number-input/types.js +5 -0
  248. package/package.json +62 -52
  249. package/paginator/Icons.d.ts +5 -0
  250. package/paginator/Icons.js +40 -0
  251. package/paginator/Paginator.accessibility.test.js +79 -0
  252. package/paginator/Paginator.d.ts +4 -0
  253. package/paginator/Paginator.js +135 -0
  254. package/paginator/Paginator.stories.tsx +87 -0
  255. package/paginator/Paginator.test.js +335 -0
  256. package/paginator/types.d.ts +38 -0
  257. package/paginator/types.js +5 -0
  258. package/paragraph/Paragraph.accessibility.test.js +28 -0
  259. package/paragraph/Paragraph.d.ts +5 -0
  260. package/paragraph/Paragraph.js +22 -0
  261. package/paragraph/Paragraph.stories.tsx +27 -0
  262. package/password-input/Icons.d.ts +6 -0
  263. package/password-input/Icons.js +35 -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 +97 -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/Icons.d.ts +10 -0
  303. package/select/Icons.js +89 -0
  304. package/select/Listbox.d.ts +4 -0
  305. package/select/Listbox.js +143 -0
  306. package/select/Option.d.ts +4 -0
  307. package/select/Option.js +87 -0
  308. package/select/Select.accessibility.test.js +217 -0
  309. package/select/Select.d.ts +4 -0
  310. package/select/Select.js +590 -0
  311. package/select/Select.stories.tsx +970 -0
  312. package/select/Select.test.js +2370 -0
  313. package/select/types.d.ts +209 -0
  314. package/select/types.js +5 -0
  315. package/sidenav/Icons.d.ts +7 -0
  316. package/sidenav/Icons.js +47 -0
  317. package/sidenav/Sidenav.accessibility.test.js +59 -0
  318. package/sidenav/Sidenav.d.ts +10 -0
  319. package/sidenav/Sidenav.js +197 -0
  320. package/sidenav/Sidenav.stories.tsx +281 -0
  321. package/sidenav/Sidenav.test.js +37 -0
  322. package/sidenav/SidenavContext.d.ts +5 -0
  323. package/sidenav/SidenavContext.js +13 -0
  324. package/sidenav/types.d.ts +76 -0
  325. package/sidenav/types.js +5 -0
  326. package/slider/Slider.accessibility.test.js +104 -0
  327. package/slider/Slider.d.ts +4 -0
  328. package/slider/Slider.js +285 -0
  329. package/slider/Slider.test.js +254 -0
  330. package/slider/types.d.ts +86 -0
  331. package/slider/types.js +5 -0
  332. package/spinner/Spinner.accessibility.test.js +96 -0
  333. package/spinner/Spinner.d.ts +4 -0
  334. package/spinner/Spinner.js +206 -0
  335. package/spinner/Spinner.stories.tsx +129 -0
  336. package/spinner/Spinner.test.js +55 -0
  337. package/spinner/types.d.ts +32 -0
  338. package/spinner/types.js +5 -0
  339. package/status-light/StatusLight.accessibility.test.js +157 -0
  340. package/status-light/StatusLight.d.ts +4 -0
  341. package/status-light/StatusLight.js +51 -0
  342. package/status-light/StatusLight.stories.tsx +74 -0
  343. package/status-light/StatusLight.test.js +25 -0
  344. package/status-light/types.d.ts +17 -0
  345. package/status-light/types.js +5 -0
  346. package/switch/Switch.accessibility.test.js +89 -0
  347. package/switch/Switch.d.ts +4 -0
  348. package/switch/Switch.js +214 -0
  349. package/switch/Switch.stories.tsx +137 -0
  350. package/switch/Switch.test.js +180 -0
  351. package/switch/types.d.ts +66 -0
  352. package/switch/types.js +5 -0
  353. package/table/DropdownTheme.js +62 -0
  354. package/table/Table.accessibility.test.js +82 -0
  355. package/table/Table.d.ts +8 -0
  356. package/table/Table.js +161 -0
  357. package/table/Table.stories.tsx +651 -0
  358. package/table/Table.test.js +113 -0
  359. package/table/types.d.ts +49 -0
  360. package/table/types.js +5 -0
  361. package/tabs/Tab.d.ts +4 -0
  362. package/tabs/Tab.js +116 -0
  363. package/tabs/Tabs.accessibility.test.js +56 -0
  364. package/tabs/Tabs.d.ts +4 -0
  365. package/tabs/Tabs.js +384 -0
  366. package/tabs/Tabs.stories.tsx +226 -0
  367. package/tabs/Tabs.test.js +294 -0
  368. package/tabs/types.d.ts +92 -0
  369. package/tabs/types.js +5 -0
  370. package/tag/Tag.accessibility.test.js +69 -0
  371. package/tag/Tag.d.ts +4 -0
  372. package/tag/Tag.js +151 -0
  373. package/tag/Tag.stories.tsx +155 -0
  374. package/tag/Tag.test.js +49 -0
  375. package/tag/types.d.ts +69 -0
  376. package/tag/types.js +5 -0
  377. package/text-input/Suggestion.d.ts +4 -0
  378. package/text-input/Suggestion.js +67 -0
  379. package/text-input/Suggestions.d.ts +4 -0
  380. package/text-input/Suggestions.js +86 -0
  381. package/text-input/TextInput.accessibility.test.js +321 -0
  382. package/text-input/TextInput.d.ts +4 -0
  383. package/text-input/TextInput.js +567 -0
  384. package/text-input/TextInput.stories.tsx +465 -0
  385. package/text-input/TextInput.test.js +1756 -0
  386. package/text-input/types.d.ts +205 -0
  387. package/text-input/types.js +5 -0
  388. package/textarea/Textarea.accessibility.test.js +155 -0
  389. package/textarea/Textarea.d.ts +4 -0
  390. package/textarea/Textarea.js +234 -0
  391. package/textarea/Textarea.stories.tsx +174 -0
  392. package/textarea/Textarea.test.js +406 -0
  393. package/textarea/types.d.ts +141 -0
  394. package/textarea/types.js +5 -0
  395. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  396. package/toggle-group/ToggleGroup.d.ts +4 -0
  397. package/toggle-group/ToggleGroup.js +201 -0
  398. package/toggle-group/ToggleGroup.stories.tsx +218 -0
  399. package/toggle-group/ToggleGroup.test.js +137 -0
  400. package/toggle-group/types.d.ts +114 -0
  401. package/toggle-group/types.js +5 -0
  402. package/typography/Typography.accessibility.test.js +339 -0
  403. package/typography/Typography.d.ts +4 -0
  404. package/typography/Typography.js +23 -0
  405. package/typography/Typography.stories.tsx +198 -0
  406. package/typography/types.d.ts +18 -0
  407. package/typography/types.js +5 -0
  408. package/useTheme.d.ts +1148 -0
  409. package/{dist/useTheme.js → useTheme.js} +4 -11
  410. package/useTranslatedLabels.d.ts +85 -0
  411. package/useTranslatedLabels.js +14 -0
  412. package/utils/BaseTypography.d.ts +21 -0
  413. package/utils/BaseTypography.js +94 -0
  414. package/utils/FocusLock.d.ts +13 -0
  415. package/utils/FocusLock.js +124 -0
  416. package/wizard/Wizard.accessibility.test.js +55 -0
  417. package/wizard/Wizard.d.ts +4 -0
  418. package/wizard/Wizard.js +250 -0
  419. package/wizard/Wizard.stories.tsx +253 -0
  420. package/wizard/Wizard.test.js +114 -0
  421. package/wizard/types.d.ts +64 -0
  422. package/wizard/types.js +5 -0
  423. package/babel.config.js +0 -8
  424. package/dist/ThemeContext.js +0 -180
  425. package/dist/accordion/Accordion.js +0 -268
  426. package/dist/accordion/Accordion.stories.js +0 -207
  427. package/dist/accordion/readme.md +0 -96
  428. package/dist/accordion-group/AccordionGroup.js +0 -156
  429. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  430. package/dist/accordion-group/readme.md +0 -70
  431. package/dist/alert/Alert.js +0 -303
  432. package/dist/alert/Alert.stories.js +0 -158
  433. package/dist/alert/close.svg +0 -4
  434. package/dist/alert/error.svg +0 -4
  435. package/dist/alert/info.svg +0 -4
  436. package/dist/alert/readme.md +0 -43
  437. package/dist/alert/success.svg +0 -4
  438. package/dist/alert/warning.svg +0 -4
  439. package/dist/badge/Badge.js +0 -42
  440. package/dist/box/Box.js +0 -145
  441. package/dist/button/Button.js +0 -199
  442. package/dist/button/Button.stories.js +0 -224
  443. package/dist/button/readme.md +0 -93
  444. package/dist/card/Card.js +0 -217
  445. package/dist/checkbox/Checkbox.js +0 -229
  446. package/dist/checkbox/Checkbox.stories.js +0 -144
  447. package/dist/checkbox/readme.md +0 -116
  448. package/dist/chip/Chip.js +0 -205
  449. package/dist/common/OpenSans.css +0 -81
  450. package/dist/common/RequiredComponent.js +0 -40
  451. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  452. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  453. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  454. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  455. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  456. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  457. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  458. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  459. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  460. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  461. package/dist/common/services/example-service.js +0 -10
  462. package/dist/common/services/example-service.test.js +0 -12
  463. package/dist/common/utils.js +0 -42
  464. package/dist/common/variables.js +0 -351
  465. package/dist/date/Date.js +0 -352
  466. package/dist/date/Date.stories.js +0 -205
  467. package/dist/date/calendar.svg +0 -1
  468. package/dist/date/calendar_dark.svg +0 -1
  469. package/dist/date/readme.md +0 -73
  470. package/dist/dialog/Dialog.js +0 -195
  471. package/dist/dialog/Dialog.stories.js +0 -217
  472. package/dist/dialog/readme.md +0 -32
  473. package/dist/dropdown/Dropdown.js +0 -446
  474. package/dist/dropdown/Dropdown.stories.js +0 -249
  475. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  476. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  477. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  478. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  479. package/dist/dropdown/readme.md +0 -69
  480. package/dist/footer/Footer.js +0 -366
  481. package/dist/footer/Footer.stories.js +0 -94
  482. package/dist/footer/dxc_logo_wht.png +0 -0
  483. package/dist/footer/readme.md +0 -41
  484. package/dist/header/Header.js +0 -368
  485. package/dist/header/Header.stories.js +0 -176
  486. package/dist/header/close_icon.svg +0 -1
  487. package/dist/header/dxc_logo_black.png +0 -0
  488. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  489. package/dist/header/dxc_logo_white.png +0 -0
  490. package/dist/header/hamb_menu_black.svg +0 -1
  491. package/dist/header/hamb_menu_white.svg +0 -1
  492. package/dist/header/readme.md +0 -33
  493. package/dist/heading/Heading.js +0 -153
  494. package/dist/input-text/InputText.js +0 -561
  495. package/dist/input-text/InputText.stories.js +0 -209
  496. package/dist/input-text/error.svg +0 -1
  497. package/dist/input-text/readme.md +0 -91
  498. package/dist/layout/ApplicationLayout.js +0 -330
  499. package/dist/layout/facebook.svg +0 -45
  500. package/dist/layout/linkedin.svg +0 -50
  501. package/dist/layout/twitter.svg +0 -53
  502. package/dist/link/Link.js +0 -187
  503. package/dist/link/readme.md +0 -51
  504. package/dist/paginator/Paginator.js +0 -247
  505. package/dist/paginator/images/next.svg +0 -3
  506. package/dist/paginator/images/nextPage.svg +0 -3
  507. package/dist/paginator/images/previous.svg +0 -3
  508. package/dist/paginator/images/previousPage.svg +0 -3
  509. package/dist/paginator/readme.md +0 -50
  510. package/dist/progress-bar/ProgressBar.js +0 -184
  511. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  512. package/dist/progress-bar/readme.md +0 -63
  513. package/dist/radio/Radio.js +0 -190
  514. package/dist/radio/Radio.stories.js +0 -166
  515. package/dist/radio/readme.md +0 -70
  516. package/dist/resultsetTable/ResultsetTable.js +0 -326
  517. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  518. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  519. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  520. package/dist/select/Select.js +0 -475
  521. package/dist/select/Select.stories.js +0 -235
  522. package/dist/select/readme.md +0 -72
  523. package/dist/sidenav/Sidenav.js +0 -123
  524. package/dist/slider/Slider.js +0 -257
  525. package/dist/slider/Slider.stories.js +0 -241
  526. package/dist/slider/readme.md +0 -64
  527. package/dist/spinner/Spinner.js +0 -190
  528. package/dist/spinner/Spinner.stories.js +0 -183
  529. package/dist/spinner/readme.md +0 -65
  530. package/dist/switch/Switch.js +0 -190
  531. package/dist/switch/Switch.stories.js +0 -134
  532. package/dist/switch/readme.md +0 -133
  533. package/dist/table/Table.js +0 -90
  534. package/dist/tabs/Tabs.js +0 -302
  535. package/dist/tabs/Tabs.stories.js +0 -130
  536. package/dist/tabs/readme.md +0 -78
  537. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  538. package/dist/tabs-for-sections/readme.md +0 -78
  539. package/dist/tag/Tag.js +0 -249
  540. package/dist/textarea/Textarea.js +0 -220
  541. package/dist/toggle/Toggle.js +0 -223
  542. package/dist/toggle/Toggle.stories.js +0 -297
  543. package/dist/toggle/readme.md +0 -80
  544. package/dist/toggle-group/ToggleGroup.js +0 -209
  545. package/dist/toggle-group/readme.md +0 -82
  546. package/dist/upload/Upload.js +0 -200
  547. package/dist/upload/Upload.stories.js +0 -72
  548. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  549. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  550. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  551. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  552. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  553. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  554. package/dist/upload/file-upload/FileToUpload.js +0 -158
  555. package/dist/upload/file-upload/audio-icon.svg +0 -4
  556. package/dist/upload/file-upload/close.svg +0 -4
  557. package/dist/upload/file-upload/file-icon.svg +0 -4
  558. package/dist/upload/file-upload/video-icon.svg +0 -4
  559. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  560. package/dist/upload/readme.md +0 -37
  561. package/dist/upload/transaction/Transaction.js +0 -155
  562. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  563. package/dist/upload/transaction/audio-icon.svg +0 -4
  564. package/dist/upload/transaction/error-icon.svg +0 -4
  565. package/dist/upload/transaction/file-icon-err.svg +0 -4
  566. package/dist/upload/transaction/file-icon.svg +0 -4
  567. package/dist/upload/transaction/image-icon-err.svg +0 -4
  568. package/dist/upload/transaction/image-icon.svg +0 -4
  569. package/dist/upload/transaction/success-icon.svg +0 -4
  570. package/dist/upload/transaction/video-icon-err.svg +0 -4
  571. package/dist/upload/transaction/video-icon.svg +0 -4
  572. package/dist/upload/transactions/Transactions.js +0 -120
  573. package/dist/wizard/Wizard.js +0 -325
  574. package/dist/wizard/invalid_icon.svg +0 -6
  575. package/dist/wizard/valid_icon.svg +0 -6
  576. package/dist/wizard/validation-wrong.svg +0 -6
  577. package/test/Accordion.test.js +0 -33
  578. package/test/AccordionGroup.test.js +0 -109
  579. package/test/Alert.test.js +0 -53
  580. package/test/Box.test.js +0 -10
  581. package/test/Button.test.js +0 -18
  582. package/test/Card.test.js +0 -30
  583. package/test/Checkbox.test.js +0 -45
  584. package/test/Chip.test.js +0 -25
  585. package/test/Date.test.js +0 -393
  586. package/test/Dialog.test.js +0 -23
  587. package/test/Dropdown.test.js +0 -130
  588. package/test/Footer.test.js +0 -99
  589. package/test/Header.test.js +0 -39
  590. package/test/Heading.test.js +0 -35
  591. package/test/InputText.test.js +0 -240
  592. package/test/Link.test.js +0 -42
  593. package/test/Paginator.test.js +0 -177
  594. package/test/ProgressBar.test.js +0 -35
  595. package/test/Radio.test.js +0 -37
  596. package/test/ResultsetTable.test.js +0 -330
  597. package/test/Select.test.js +0 -192
  598. package/test/Sidenav.test.js +0 -45
  599. package/test/Slider.test.js +0 -82
  600. package/test/Spinner.test.js +0 -27
  601. package/test/Switch.test.js +0 -45
  602. package/test/Table.test.js +0 -36
  603. package/test/Tabs.test.js +0 -109
  604. package/test/TabsForSections.test.js +0 -34
  605. package/test/Tag.test.js +0 -32
  606. package/test/TextArea.test.js +0 -52
  607. package/test/ToggleGroup.test.js +0 -81
  608. package/test/Upload.test.js +0 -60
  609. package/test/Wizard.test.js +0 -130
  610. package/test/mocks/pngMock.js +0 -1
  611. package/test/mocks/svgMock.js +0 -1
@@ -0,0 +1,129 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+ export type FileData = {
9
+ /**
10
+ * Selected file.
11
+ */
12
+ file: File;
13
+ /**
14
+ * Error of the file. If it is defined, it will be shown and the file item will be mark as invalid.
15
+ */
16
+ error?: string;
17
+ /**
18
+ * Preview of the file.
19
+ */
20
+ preview?: string;
21
+ };
22
+ type CommonProps = {
23
+ /**
24
+ * @deprecated Name attribute.
25
+ */
26
+ name?: string;
27
+ /**
28
+ * Text to be placed above the component.
29
+ */
30
+ label?: string;
31
+ /**
32
+ * Text to be placed inside the button.
33
+ */
34
+ buttonLabel?: string;
35
+ /**
36
+ * Helper text to be placed above the component.
37
+ */
38
+ helperText?: string;
39
+ /**
40
+ * The file types that the component accepts. Its value must be one of all the possible values of the HTML file input's accept attribute.
41
+ */
42
+ accept?: string;
43
+ /**
44
+ * An array of files representing the selected files.
45
+ */
46
+ value: FileData[];
47
+ /**
48
+ * The minimum file size (in bytes) allowed. If the size of the file does not comply the minSize, the file will have an error.
49
+ */
50
+ minSize?: number;
51
+ /**
52
+ * The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error.
53
+ */
54
+ maxSize?: number;
55
+ /**
56
+ * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
57
+ */
58
+ showPreview?: boolean;
59
+ /**
60
+ * If true, the component allows multiple file items and will show all of them. If false, only one file will be shown, and if there is already one
61
+ * file selected and a new one is chosen, it will be replaced by the new selected one.
62
+ */
63
+ multiple?: boolean;
64
+ /**
65
+ * If true, the component will be disabled.
66
+ */
67
+ disabled?: boolean;
68
+ /**
69
+ * This function will be called when the user selects or drops a file. The list of files will be sent as a parameter.
70
+ * In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.
71
+ */
72
+ callbackFile: (files: FileData[]) => void;
73
+ /**
74
+ * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
75
+ * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
76
+ */
77
+ margin?: Space | Margin;
78
+ /**
79
+ * Value of the tabindex attribute.
80
+ */
81
+ tabIndex?: number;
82
+ };
83
+ type DropModeProps = CommonProps & {
84
+ /**
85
+ * Uses one of the available file input modes:
86
+ * 'file': Files are selected by clicking the button and selecting it through the file explorer.
87
+ * 'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
88
+ * 'dropzone': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
89
+ * The drag and drop area of this mode is bigger than the one of the filedrop mode.
90
+ */
91
+ mode: "filedrop" | "dropzone";
92
+ /**
93
+ * Text to be placed inside the drag and drop zone alongside the button.
94
+ */
95
+ dropAreaLabel?: string;
96
+ };
97
+ type FileModeProps = CommonProps & {
98
+ /**
99
+ * Uses one of the available file input modes:
100
+ * 'file': Files are selected by clicking the button and selecting it through the file explorer.
101
+ * 'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
102
+ * 'dropzone': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
103
+ * The drag and drop area of this mode is bigger than the one of the filedrop mode.
104
+ */
105
+ mode?: "file";
106
+ /**
107
+ * Text to be placed inside the drag and drop zone alongside the button.
108
+ */
109
+ dropAreaLabel?: never;
110
+ };
111
+ /**
112
+ * Reference to the component.
113
+ */
114
+ export type RefType = HTMLDivElement;
115
+ type Props = DropModeProps | FileModeProps;
116
+ /**
117
+ * Single file item preview.
118
+ */
119
+ export type FileItemProps = {
120
+ fileName?: string;
121
+ error?: string;
122
+ showPreview: boolean;
123
+ singleFileMode: boolean;
124
+ preview: string;
125
+ type: string;
126
+ onDelete: (fileName: string) => void;
127
+ tabIndex: number;
128
+ };
129
+ export default Props;
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
package/flex/Flex.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import FlexPropsType from "./types";
3
+ declare const DxcFlex: ({ direction, wrap, gap, order, grow, shrink, basis, children, ...props }: FlexPropsType) => JSX.Element;
4
+ export default DxcFlex;
package/flex/Flex.js ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
9
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
+ var _react = _interopRequireDefault(require("react"));
13
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
14
+ var _templateObject;
15
+ var _excluded = ["direction", "wrap", "gap", "order", "grow", "shrink", "basis", "children"],
16
+ _excluded2 = ["justifyContent", "alignItems", "alignContent", "alignSelf"];
17
+ var DxcFlex = function DxcFlex(_ref) {
18
+ var _ref$direction = _ref.direction,
19
+ direction = _ref$direction === void 0 ? "row" : _ref$direction,
20
+ _ref$wrap = _ref.wrap,
21
+ wrap = _ref$wrap === void 0 ? "nowrap" : _ref$wrap,
22
+ _ref$gap = _ref.gap,
23
+ gap = _ref$gap === void 0 ? "0rem" : _ref$gap,
24
+ _ref$order = _ref.order,
25
+ order = _ref$order === void 0 ? 0 : _ref$order,
26
+ _ref$grow = _ref.grow,
27
+ grow = _ref$grow === void 0 ? 0 : _ref$grow,
28
+ _ref$shrink = _ref.shrink,
29
+ shrink = _ref$shrink === void 0 ? 1 : _ref$shrink,
30
+ _ref$basis = _ref.basis,
31
+ basis = _ref$basis === void 0 ? "auto" : _ref$basis,
32
+ children = _ref.children,
33
+ props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
34
+ return /*#__PURE__*/_react["default"].createElement(Flex, (0, _extends2["default"])({
35
+ $direction: direction,
36
+ $wrap: wrap,
37
+ $order: order,
38
+ $grow: grow,
39
+ $shrink: shrink,
40
+ $basis: basis,
41
+ $gap: gap
42
+ }, props), children);
43
+ };
44
+ var Flex = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n ", "\n"])), function (_ref2) {
45
+ var _props$$gap, _props$$gap$rowGap, _props$$gap$columnGap;
46
+ var _ref2$justifyContent = _ref2.justifyContent,
47
+ justifyContent = _ref2$justifyContent === void 0 ? "flex-start" : _ref2$justifyContent,
48
+ _ref2$alignItems = _ref2.alignItems,
49
+ alignItems = _ref2$alignItems === void 0 ? "stretch" : _ref2$alignItems,
50
+ _ref2$alignContent = _ref2.alignContent,
51
+ alignContent = _ref2$alignContent === void 0 ? "normal" : _ref2$alignContent,
52
+ _ref2$alignSelf = _ref2.alignSelf,
53
+ alignSelf = _ref2$alignSelf === void 0 ? "auto" : _ref2$alignSelf,
54
+ props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
55
+ return "\n flex-direction: ".concat(props.$direction, "; \n flex-wrap: ").concat(props.$wrap, "; \n justify-content: ").concat(justifyContent, "; \n align-items: ").concat(alignItems, ";\n align-content: ").concat(alignContent, ";\n align-self: ").concat(alignSelf, ";\n gap: ").concat(props.$gap != null && typeof props.$gap === "string" ? (_props$$gap = props.$gap) !== null && _props$$gap !== void 0 ? _props$$gap : "" : "", "}\n row-gap: ").concat(props.$gap != null && (0, _typeof2["default"])(props.$gap) === "object" ? (_props$$gap$rowGap = props.$gap.rowGap) !== null && _props$$gap$rowGap !== void 0 ? _props$$gap$rowGap : "" : "", "}\n column-gap: ").concat(props.$gap != null && (0, _typeof2["default"])(props.$gap) === "object" ? (_props$$gap$columnGap = props.$gap.columnGap) !== null && _props$$gap$columnGap !== void 0 ? _props$$gap$columnGap : "" : "", "}\n order: ").concat(props.$order, ";\n flex-grow: ").concat(props.$grow, ";\n flex-shrink: ").concat(props.$shrink, ";\n flex-basis: ").concat(props.$basis, ";\n ");
56
+ });
57
+ var _default = exports["default"] = DxcFlex;
@@ -0,0 +1,112 @@
1
+ import React from "react";
2
+ import Title from "../../.storybook/components/Title";
3
+ import styled from "styled-components";
4
+ import DxcFlex from "./Flex";
5
+
6
+ export default {
7
+ title: "Flex",
8
+ component: DxcFlex,
9
+ };
10
+
11
+ export const Chromatic = () => (
12
+ <>
13
+ <Title title="Default" level={4} />
14
+ <Container>
15
+ <DxcFlex>
16
+ <Placeholder />
17
+ <Placeholder minWidth="50px" />
18
+ <Placeholder />
19
+ <Placeholder minWidth="50px" />
20
+ <Placeholder minWidth="50px" />
21
+ </DxcFlex>
22
+ </Container>
23
+ <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
24
+ <Container>
25
+ <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="1.5rem">
26
+ <Placeholder />
27
+ <Placeholder minWidth="100px" />
28
+ <Placeholder />
29
+ <Placeholder minWidth="100px" />
30
+ <Placeholder />
31
+ </DxcFlex>
32
+ </Container>
33
+ <Title title="Wrap with align content space between, row and column gaps, and as a span" level={4} />
34
+ <Container height="250px">
35
+ <DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "0.5rem", columnGap: "1.5rem" }}>
36
+ <Placeholder />
37
+ <Placeholder />
38
+ <Placeholder />
39
+ <Placeholder />
40
+ <Placeholder minWidth="100px" />
41
+ <Placeholder />
42
+ <Placeholder />
43
+ <Placeholder minWidth="100px" />
44
+ <Placeholder />
45
+ <Placeholder />
46
+ <Placeholder minWidth="100px" />
47
+ <Placeholder />
48
+ </DxcFlex>
49
+ </Container>
50
+ <Title title="Basis 100%, order, grow and align self" level={4} />
51
+ <Container height="75px">
52
+ <DxcFlex basis="100%">
53
+ <DxcFlex order={3} grow={1} alignSelf="flex-end">
54
+ <Placeholder width="100%" minWidth="0">
55
+ order 3, grow 1, align self end
56
+ </Placeholder>
57
+ </DxcFlex>
58
+ <DxcFlex order={-1} grow={4}>
59
+ <Placeholder width="100%" minWidth="0">
60
+ order -1, grow 4
61
+ </Placeholder>
62
+ </DxcFlex>
63
+ <DxcFlex order={5} grow={1}>
64
+ <Placeholder width="100%" minWidth="0">
65
+ order 5, grow 1
66
+ </Placeholder>
67
+ </DxcFlex>
68
+ <DxcFlex order={2} grow={2}>
69
+ <Placeholder width="100%" minWidth="0">
70
+ order 2. grow 2
71
+ </Placeholder>
72
+ </DxcFlex>
73
+ </DxcFlex>
74
+ </Container>
75
+ <Title title="Basis and shrink" level={4} />
76
+ <Container>
77
+ <DxcFlex basis="600px">
78
+ <DxcFlex shrink={4} basis="400px">
79
+ <Placeholder width="100%" minWidth="0">
80
+ shrink 4
81
+ </Placeholder>
82
+ </DxcFlex>
83
+ <DxcFlex shrink={2} basis="400px">
84
+ <Placeholder width="100%" minWidth="0">
85
+ shrink 2
86
+ </Placeholder>
87
+ </DxcFlex>
88
+ <DxcFlex shrink={1} basis="400px">
89
+ <Placeholder width="100%" minWidth="0">
90
+ shrink 1
91
+ </Placeholder>
92
+ </DxcFlex>
93
+ </DxcFlex>
94
+ </Container>
95
+ </>
96
+ );
97
+
98
+ const Container = styled.div<{ height?: string }>`
99
+ display: flex;
100
+ background: #f2eafa;
101
+ margin: 2.5rem;
102
+ ${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
103
+ `;
104
+
105
+ const Placeholder = styled.div<{ minWidth?: string; width?: string }>`
106
+ height: 40px;
107
+ min-width: ${({ minWidth }) => minWidth ?? "200px"};
108
+ width: ${({ width }) => width};
109
+ border: 1px solid #a46ede;
110
+ border-radius: 0.5rem;
111
+ background-color: #e5d5f6;
112
+ `;
@@ -0,0 +1,97 @@
1
+ /// <reference types="react" />
2
+ type Spaces = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "1rem" | "1.5rem" | "2rem" | "3rem" | "4rem" | "5rem";
3
+ type Gap = {
4
+ rowGap: Spaces;
5
+ columnGap?: Spaces;
6
+ } | {
7
+ rowGap?: Spaces;
8
+ columnGap: Spaces;
9
+ } | Spaces;
10
+ type CommonProps = {
11
+ /**
12
+ * Sets the justify-content CSS property.
13
+ *
14
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
15
+ */
16
+ justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
17
+ /**
18
+ * Sets the align-items CSS property.
19
+ *
20
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
21
+ */
22
+ alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
23
+ /**
24
+ * Sets the align-content CSS property.
25
+ *
26
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
27
+ */
28
+ alignContent?: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
29
+ /**
30
+ * Sets the align-self CSS property.
31
+ *
32
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
33
+ */
34
+ alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
35
+ };
36
+ type Props = CommonProps & {
37
+ /**
38
+ * Sets the flex-direction CSS property.
39
+ *
40
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
41
+ */
42
+ direction?: "row" | "row-reverse" | "column" | "column-reverse";
43
+ /**
44
+ * Sets the flex-wrap CSS property.
45
+ *
46
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
47
+ */
48
+ wrap?: "nowrap" | "wrap" | "wrap-reverse";
49
+ /**
50
+ * Sets the gap CSS property.
51
+ *
52
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
53
+ */
54
+ gap?: Gap;
55
+ /**
56
+ * Sets the order CSS property.
57
+ *
58
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/order
59
+ */
60
+ order?: number;
61
+ /**
62
+ * Sets the flex-grow CSS property.
63
+ *
64
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
65
+ */
66
+ grow?: number;
67
+ /**
68
+ * Sets the flex-shrink CSS property.
69
+ *
70
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
71
+ */
72
+ shrink?: number;
73
+ /**
74
+ * Sets the flex-basis CSS property.
75
+ *
76
+ * See MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
77
+ */
78
+ basis?: string;
79
+ /**
80
+ * Sets a custom HTML tag.
81
+ */
82
+ as?: keyof HTMLElementTagNameMap;
83
+ /**
84
+ * Custom content inside the flex container.
85
+ */
86
+ children: React.ReactNode;
87
+ };
88
+ export type StyledProps = CommonProps & {
89
+ $direction?: "row" | "row-reverse" | "column" | "column-reverse";
90
+ $wrap?: "nowrap" | "wrap" | "wrap-reverse";
91
+ $gap?: Spaces | Gap;
92
+ $order?: number;
93
+ $grow?: number;
94
+ $shrink?: number;
95
+ $basis?: string;
96
+ };
97
+ export default Props;
package/flex/types.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -0,0 +1,117 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _jestAxe = require("jest-axe");
9
+ var _Footer = _interopRequireDefault(require("./Footer.tsx"));
10
+ var social = [{
11
+ href: "https://www.linkedin.com/company/dxctechnology",
12
+ logo: /*#__PURE__*/_react["default"].createElement("svg", {
13
+ version: "1.1",
14
+ id: "Capa_1",
15
+ x: "0px",
16
+ y: "0px",
17
+ viewBox: "0 0 438.536 438.536",
18
+ fill: "currentColor"
19
+ }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
20
+ d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
21
+ }))),
22
+ title: "Linkedin"
23
+ }, {
24
+ href: "https://x.com/dxctechnology",
25
+ logo: /*#__PURE__*/_react["default"].createElement("svg", {
26
+ width: "256",
27
+ height: "256",
28
+ viewBox: "0 0 256 256",
29
+ fill: "none",
30
+ xmlns: "http://www.w3.org/2000/svg"
31
+ }, /*#__PURE__*/_react["default"].createElement("rect", {
32
+ width: "256",
33
+ height: "256",
34
+ rx: "40",
35
+ fill: "white"
36
+ }), /*#__PURE__*/_react["default"].createElement("path", {
37
+ d: "M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z",
38
+ fill: "#0F1419"
39
+ })),
40
+ title: "X"
41
+ }, {
42
+ href: "https://www.facebook.com/DXCTechnology/",
43
+ logo: /*#__PURE__*/_react["default"].createElement("svg", {
44
+ version: "1.1",
45
+ x: "0px",
46
+ y: "0px",
47
+ viewBox: "0 0 438.536 438.536",
48
+ fill: "currentColor",
49
+ width: "1000px",
50
+ height: "500px"
51
+ }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
52
+ d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123 C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402 c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401 c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
53
+ }))),
54
+ title: "Facebook"
55
+ }];
56
+ var bottom = [{
57
+ href: "https://www.linkedin.com/company/dxctechnology",
58
+ text: "Linkedin"
59
+ }, {
60
+ href: "https://x.com/dxctechnology",
61
+ text: "X"
62
+ }, {
63
+ href: "https://www.facebook.com/DXCTechnology/",
64
+ text: "Facebook"
65
+ }];
66
+ describe("Footer component accessibility tests", function () {
67
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
68
+ var _render, container, results;
69
+ return _regenerator["default"].wrap(function _callee$(_context) {
70
+ while (1) switch (_context.prev = _context.next) {
71
+ case 0:
72
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
73
+ copyright: "Copyright",
74
+ socialLinks: social,
75
+ bottomLinks: bottom,
76
+ margin: "small",
77
+ mode: "default"
78
+ }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
79
+ href: "https://www.linkedin.com/company/dxctechnology"
80
+ }, "Linkedin")))), container = _render.container;
81
+ _context.next = 3;
82
+ return (0, _jestAxe.axe)(container);
83
+ case 3:
84
+ results = _context.sent;
85
+ expect(results).toHaveNoViolations();
86
+ case 5:
87
+ case "end":
88
+ return _context.stop();
89
+ }
90
+ }, _callee);
91
+ })));
92
+ it("Should not have basic accessibility issues for reduced mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
93
+ var _render2, container, results;
94
+ return _regenerator["default"].wrap(function _callee2$(_context2) {
95
+ while (1) switch (_context2.prev = _context2.next) {
96
+ case 0:
97
+ _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
98
+ copyright: "Copyright",
99
+ socialLinks: social,
100
+ bottomLinks: bottom,
101
+ margin: "small",
102
+ mode: "reduced"
103
+ }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
104
+ href: "https://www.linkedin.com/company/dxctechnology"
105
+ }, "Linkedin")))), container = _render2.container;
106
+ _context2.next = 3;
107
+ return (0, _jestAxe.axe)(container);
108
+ case 3:
109
+ results = _context2.sent;
110
+ expect(results).toHaveNoViolations();
111
+ case 5:
112
+ case "end":
113
+ return _context2.stop();
114
+ }
115
+ }, _callee2);
116
+ })));
117
+ });
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import FooterPropsType from "./types";
3
+ declare const DxcFooter: ({ socialLinks, bottomLinks, copyright, children, margin, tabIndex, mode, }: FooterPropsType) => JSX.Element;
4
+ export default DxcFooter;