@dxc-technology/halstack-react 0.0.0-52b2977 → 0.0.0-52f9f99

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 (336) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +6683 -0
  3. package/dist/index.d.ts +6683 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +65 -61
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -1336
  10. package/HalstackContext.js +0 -335
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -234
  13. package/accordion/Accordion.stories.tsx +0 -395
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -291
  25. package/alert/Alert.stories.tsx +0 -198
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -114
  40. package/box/Box.stories.tsx +0 -147
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -154
  51. package/button/Button.stories.tsx +0 -425
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -160
  57. package/card/Card.stories.tsx +0 -200
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -260
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -153
  70. package/chip/Chip.stories.tsx +0 -206
  71. package/chip/Chip.test.js +0 -54
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.d.ts +0 -1
  86. package/common/utils.js +0 -22
  87. package/common/variables.d.ts +0 -1625
  88. package/common/variables.js +0 -1504
  89. package/date-input/Calendar.d.ts +0 -4
  90. package/date-input/Calendar.js +0 -258
  91. package/date-input/DateInput.d.ts +0 -4
  92. package/date-input/DateInput.js +0 -269
  93. package/date-input/DateInput.stories.tsx +0 -304
  94. package/date-input/DateInput.test.js +0 -835
  95. package/date-input/DatePicker.d.ts +0 -4
  96. package/date-input/DatePicker.js +0 -146
  97. package/date-input/Icons.d.ts +0 -6
  98. package/date-input/Icons.js +0 -75
  99. package/date-input/YearPicker.d.ts +0 -4
  100. package/date-input/YearPicker.js +0 -126
  101. package/date-input/types.d.ts +0 -158
  102. package/date-input/types.js +0 -5
  103. package/dialog/Dialog.d.ts +0 -4
  104. package/dialog/Dialog.js +0 -149
  105. package/dialog/Dialog.stories.tsx +0 -319
  106. package/dialog/Dialog.test.js +0 -369
  107. package/dialog/types.d.ts +0 -44
  108. package/dialog/types.js +0 -5
  109. package/dropdown/Dropdown.d.ts +0 -4
  110. package/dropdown/Dropdown.js +0 -388
  111. package/dropdown/Dropdown.stories.tsx +0 -438
  112. package/dropdown/Dropdown.test.js +0 -586
  113. package/dropdown/DropdownMenu.d.ts +0 -4
  114. package/dropdown/DropdownMenu.js +0 -70
  115. package/dropdown/DropdownMenuItem.d.ts +0 -4
  116. package/dropdown/DropdownMenuItem.js +0 -79
  117. package/dropdown/types.d.ts +0 -100
  118. package/dropdown/types.js +0 -5
  119. package/file-input/FileInput.d.ts +0 -4
  120. package/file-input/FileInput.js +0 -547
  121. package/file-input/FileInput.stories.tsx +0 -618
  122. package/file-input/FileInput.test.js +0 -457
  123. package/file-input/FileItem.d.ts +0 -4
  124. package/file-input/FileItem.js +0 -162
  125. package/file-input/types.d.ts +0 -129
  126. package/file-input/types.js +0 -5
  127. package/flex/Flex.d.ts +0 -4
  128. package/flex/Flex.js +0 -69
  129. package/flex/Flex.stories.tsx +0 -103
  130. package/flex/types.d.ts +0 -32
  131. package/flex/types.js +0 -5
  132. package/footer/Footer.d.ts +0 -4
  133. package/footer/Footer.js +0 -183
  134. package/footer/Footer.stories.tsx +0 -228
  135. package/footer/Footer.test.js +0 -97
  136. package/footer/Icons.d.ts +0 -2
  137. package/footer/Icons.js +0 -77
  138. package/footer/types.d.ts +0 -66
  139. package/footer/types.js +0 -5
  140. package/header/Header.d.ts +0 -8
  141. package/header/Header.js +0 -303
  142. package/header/Header.stories.tsx +0 -315
  143. package/header/Header.test.js +0 -79
  144. package/header/Icons.d.ts +0 -2
  145. package/header/Icons.js +0 -34
  146. package/header/types.d.ts +0 -48
  147. package/header/types.js +0 -5
  148. package/heading/Heading.d.ts +0 -4
  149. package/heading/Heading.js +0 -159
  150. package/heading/Heading.stories.tsx +0 -54
  151. package/heading/Heading.test.js +0 -186
  152. package/heading/types.d.ts +0 -33
  153. package/heading/types.js +0 -5
  154. package/inset/Inset.d.ts +0 -3
  155. package/inset/Inset.js +0 -51
  156. package/inset/Inset.stories.tsx +0 -229
  157. package/inset/types.d.ts +0 -37
  158. package/inset/types.js +0 -5
  159. package/layout/ApplicationLayout.d.ts +0 -20
  160. package/layout/ApplicationLayout.js +0 -171
  161. package/layout/ApplicationLayout.stories.tsx +0 -162
  162. package/layout/Icons.d.ts +0 -5
  163. package/layout/Icons.js +0 -66
  164. package/layout/SidenavContext.d.ts +0 -5
  165. package/layout/SidenavContext.js +0 -19
  166. package/layout/types.d.ts +0 -42
  167. package/layout/types.js +0 -5
  168. package/link/Link.d.ts +0 -4
  169. package/link/Link.js +0 -136
  170. package/link/Link.stories.tsx +0 -253
  171. package/link/Link.test.js +0 -81
  172. package/link/types.d.ts +0 -54
  173. package/link/types.js +0 -5
  174. package/main.d.ts +0 -44
  175. package/main.js +0 -369
  176. package/nav-tabs/NavTabs.d.ts +0 -8
  177. package/nav-tabs/NavTabs.js +0 -125
  178. package/nav-tabs/NavTabs.stories.tsx +0 -260
  179. package/nav-tabs/NavTabs.test.js +0 -82
  180. package/nav-tabs/Tab.d.ts +0 -4
  181. package/nav-tabs/Tab.js +0 -150
  182. package/nav-tabs/types.d.ts +0 -53
  183. package/nav-tabs/types.js +0 -5
  184. package/number-input/NumberInput.d.ts +0 -4
  185. package/number-input/NumberInput.js +0 -76
  186. package/number-input/NumberInput.stories.tsx +0 -115
  187. package/number-input/NumberInput.test.js +0 -542
  188. package/number-input/NumberInputContext.d.ts +0 -4
  189. package/number-input/NumberInputContext.js +0 -19
  190. package/number-input/numberInputContextTypes.d.ts +0 -19
  191. package/number-input/numberInputContextTypes.js +0 -5
  192. package/number-input/types.d.ts +0 -124
  193. package/number-input/types.js +0 -5
  194. package/paginator/Icons.d.ts +0 -5
  195. package/paginator/Icons.js +0 -54
  196. package/paginator/Paginator.d.ts +0 -4
  197. package/paginator/Paginator.js +0 -163
  198. package/paginator/Paginator.stories.tsx +0 -87
  199. package/paginator/Paginator.test.js +0 -305
  200. package/paginator/types.d.ts +0 -38
  201. package/paginator/types.js +0 -5
  202. package/paragraph/Paragraph.d.ts +0 -5
  203. package/paragraph/Paragraph.js +0 -38
  204. package/paragraph/Paragraph.stories.tsx +0 -44
  205. package/password-input/PasswordInput.d.ts +0 -4
  206. package/password-input/PasswordInput.js +0 -166
  207. package/password-input/PasswordInput.stories.tsx +0 -131
  208. package/password-input/PasswordInput.test.js +0 -181
  209. package/password-input/types.d.ts +0 -110
  210. package/password-input/types.js +0 -5
  211. package/progress-bar/ProgressBar.d.ts +0 -4
  212. package/progress-bar/ProgressBar.js +0 -176
  213. package/progress-bar/ProgressBar.stories.jsx +0 -93
  214. package/progress-bar/ProgressBar.test.js +0 -110
  215. package/progress-bar/types.d.ts +0 -37
  216. package/progress-bar/types.js +0 -5
  217. package/quick-nav/QuickNav.d.ts +0 -4
  218. package/quick-nav/QuickNav.js +0 -117
  219. package/quick-nav/QuickNav.stories.tsx +0 -356
  220. package/quick-nav/types.d.ts +0 -21
  221. package/quick-nav/types.js +0 -5
  222. package/radio-group/Radio.d.ts +0 -4
  223. package/radio-group/Radio.js +0 -156
  224. package/radio-group/RadioGroup.d.ts +0 -4
  225. package/radio-group/RadioGroup.js +0 -283
  226. package/radio-group/RadioGroup.stories.tsx +0 -214
  227. package/radio-group/RadioGroup.test.js +0 -722
  228. package/radio-group/types.d.ts +0 -114
  229. package/radio-group/types.js +0 -5
  230. package/resultsetTable/Icons.d.ts +0 -7
  231. package/resultsetTable/Icons.js +0 -51
  232. package/resultsetTable/ResultsetTable.d.ts +0 -4
  233. package/resultsetTable/ResultsetTable.js +0 -195
  234. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  235. package/resultsetTable/ResultsetTable.test.js +0 -325
  236. package/resultsetTable/types.d.ts +0 -67
  237. package/resultsetTable/types.js +0 -5
  238. package/select/Icons.d.ts +0 -10
  239. package/select/Icons.js +0 -93
  240. package/select/Listbox.d.ts +0 -4
  241. package/select/Listbox.js +0 -169
  242. package/select/Option.d.ts +0 -4
  243. package/select/Option.js +0 -97
  244. package/select/Select.d.ts +0 -4
  245. package/select/Select.js +0 -666
  246. package/select/Select.stories.tsx +0 -971
  247. package/select/Select.test.js +0 -2228
  248. package/select/types.d.ts +0 -210
  249. package/select/types.js +0 -5
  250. package/sidenav/Sidenav.d.ts +0 -10
  251. package/sidenav/Sidenav.js +0 -266
  252. package/sidenav/Sidenav.stories.tsx +0 -282
  253. package/sidenav/Sidenav.test.js +0 -44
  254. package/sidenav/types.d.ts +0 -73
  255. package/sidenav/types.js +0 -5
  256. package/slider/Slider.d.ts +0 -4
  257. package/slider/Slider.js +0 -342
  258. package/slider/Slider.stories.tsx +0 -240
  259. package/slider/Slider.test.js +0 -250
  260. package/slider/types.d.ts +0 -86
  261. package/slider/types.js +0 -5
  262. package/spinner/Spinner.d.ts +0 -4
  263. package/spinner/Spinner.js +0 -244
  264. package/spinner/Spinner.stories.jsx +0 -129
  265. package/spinner/Spinner.test.js +0 -64
  266. package/spinner/types.d.ts +0 -32
  267. package/spinner/types.js +0 -5
  268. package/switch/Switch.d.ts +0 -4
  269. package/switch/Switch.js +0 -262
  270. package/switch/Switch.stories.tsx +0 -171
  271. package/switch/Switch.test.js +0 -225
  272. package/switch/types.d.ts +0 -66
  273. package/switch/types.js +0 -5
  274. package/table/Table.d.ts +0 -4
  275. package/table/Table.js +0 -118
  276. package/table/Table.stories.jsx +0 -356
  277. package/table/Table.test.js +0 -26
  278. package/table/types.d.ts +0 -21
  279. package/table/types.js +0 -5
  280. package/tabs/Tab.d.ts +0 -4
  281. package/tabs/Tab.js +0 -133
  282. package/tabs/Tabs.d.ts +0 -4
  283. package/tabs/Tabs.js +0 -465
  284. package/tabs/Tabs.stories.tsx +0 -226
  285. package/tabs/Tabs.test.js +0 -350
  286. package/tabs/types.d.ts +0 -92
  287. package/tabs/types.js +0 -5
  288. package/tag/Tag.d.ts +0 -4
  289. package/tag/Tag.js +0 -181
  290. package/tag/Tag.stories.tsx +0 -155
  291. package/tag/Tag.test.js +0 -60
  292. package/tag/types.d.ts +0 -69
  293. package/tag/types.js +0 -5
  294. package/text-input/Icons.d.ts +0 -8
  295. package/text-input/Icons.js +0 -60
  296. package/text-input/Suggestion.d.ts +0 -4
  297. package/text-input/Suggestion.js +0 -84
  298. package/text-input/Suggestions.d.ts +0 -4
  299. package/text-input/Suggestions.js +0 -134
  300. package/text-input/TextInput.d.ts +0 -4
  301. package/text-input/TextInput.js +0 -673
  302. package/text-input/TextInput.stories.tsx +0 -569
  303. package/text-input/TextInput.test.js +0 -1723
  304. package/text-input/types.d.ts +0 -197
  305. package/text-input/types.js +0 -5
  306. package/textarea/Textarea.d.ts +0 -4
  307. package/textarea/Textarea.js +0 -277
  308. package/textarea/Textarea.stories.jsx +0 -216
  309. package/textarea/Textarea.test.js +0 -437
  310. package/textarea/types.d.ts +0 -137
  311. package/textarea/types.js +0 -5
  312. package/toggle-group/ToggleGroup.d.ts +0 -4
  313. package/toggle-group/ToggleGroup.js +0 -218
  314. package/toggle-group/ToggleGroup.stories.tsx +0 -215
  315. package/toggle-group/ToggleGroup.test.js +0 -156
  316. package/toggle-group/types.d.ts +0 -105
  317. package/toggle-group/types.js +0 -5
  318. package/typography/Typography.d.ts +0 -4
  319. package/typography/Typography.js +0 -32
  320. package/typography/Typography.stories.tsx +0 -198
  321. package/typography/types.d.ts +0 -18
  322. package/typography/types.js +0 -5
  323. package/useTheme.d.ts +0 -1235
  324. package/useTheme.js +0 -22
  325. package/useTranslatedLabels.d.ts +0 -85
  326. package/useTranslatedLabels.js +0 -20
  327. package/utils/BaseTypography.d.ts +0 -21
  328. package/utils/BaseTypography.js +0 -108
  329. package/utils/FocusLock.d.ts +0 -13
  330. package/utils/FocusLock.js +0 -139
  331. package/wizard/Wizard.d.ts +0 -4
  332. package/wizard/Wizard.js +0 -285
  333. package/wizard/Wizard.stories.tsx +0 -253
  334. package/wizard/Wizard.test.js +0 -141
  335. package/wizard/types.d.ts +0 -64
  336. package/wizard/types.js +0 -5
@@ -1,228 +0,0 @@
1
- import React from "react";
2
- import DxcFooter from "./Footer";
3
- import Title from "../../.storybook/components/Title";
4
- import ExampleContainer from "../../.storybook/components/ExampleContainer";
5
- import { HalstackProvider } from "../HalstackContext";
6
-
7
- const social = [
8
- {
9
- href: "https://www.linkedin.com/company/dxctechnology",
10
- logo: (
11
- <svg version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 438.536 438.536" fill="currentColor">
12
- <g>
13
- <path
14
- 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
15
- 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
16
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
17
- C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332
18
- 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
19
- 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
20
- 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
21
- 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
22
- 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
23
- 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
24
- H370.873z"
25
- />
26
- </g>
27
- </svg>
28
- ),
29
- },
30
- {
31
- href: "https://twitter.com/dxctechnology",
32
- logo: (
33
- <svg viewBox="0 0 248 204" fill="currentColor">
34
- <path
35
- fill="#1d9bf0"
36
- d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"
37
- />
38
- </svg>
39
- ),
40
- },
41
- {
42
- href: "https://www.facebook.com/DXCTechnology/",
43
- logo: (
44
- <svg
45
- version="1.1"
46
- id="Capa_1"
47
- x="0px"
48
- y="0px"
49
- viewBox="0 0 438.536 438.536"
50
- fill="currentColor"
51
- width="1000px"
52
- height="500px"
53
- >
54
- <g>
55
- <path
56
- 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
57
- 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
58
- h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
59
- 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
60
- 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
61
- 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"
62
- />
63
- </g>
64
- </svg>
65
- ),
66
- },
67
- ];
68
-
69
- const bottom = [
70
- {
71
- href: "https://www.linkedin.com/company/dxctechnology",
72
- text: "Linkedin",
73
- },
74
- {
75
- href: "https://twitter.com/dxctechnology",
76
- text: "Twitter",
77
- },
78
- {
79
- href: "https://www.facebook.com/DXCTechnology/",
80
- text: "Facebook",
81
- },
82
- ];
83
-
84
- export default {
85
- title: "Footer",
86
- component: DxcFooter,
87
- };
88
-
89
- const opinionatedTheme = {
90
- footer: {
91
- baseColor: "#000000",
92
- fontColor: "#ffffff",
93
- accentColor: "#0095ff",
94
- logo: (
95
- <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
96
- <g id="g12">
97
- <path
98
- id="path14"
99
- d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5"
100
- transform="translate(-68.528 65.45)"
101
- fill="#fff"
102
- />
103
- <path
104
- id="path16"
105
- d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96"
106
- transform="translate(-77.56 65.45)"
107
- fill="#fff"
108
- />
109
- <path
110
- id="path18"
111
- d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813"
112
- transform="translate(-86.019 65.583)"
113
- fill="#fff"
114
- />
115
- <path
116
- id="path20"
117
- d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594"
118
- transform="translate(-95.903 65.45)"
119
- fill="#fff"
120
- />
121
- <path
122
- id="path22"
123
- d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058"
124
- transform="translate(-105.869 65.45)"
125
- fill="#fff"
126
- />
127
- <path
128
- id="path24"
129
- d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145"
130
- transform="translate(-115.631 65.583)"
131
- fill="#fff"
132
- />
133
- <path
134
- id="path26"
135
- d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786"
136
- transform="translate(-126.654 65.45)"
137
- fill="#fff"
138
- />
139
- <path
140
- id="path28"
141
- d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145"
142
- transform="translate(-135.016 65.583)"
143
- fill="#fff"
144
- />
145
- <path
146
- id="path30"
147
- d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5"
148
- transform="translate(-145.284 65.583)"
149
- fill="#fff"
150
- />
151
- <path
152
- id="path32"
153
- d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46"
154
- transform="translate(-154.162 65.45)"
155
- fill="#fff"
156
- />
157
- <path
158
- id="path34"
159
- d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892"
160
- transform="translate(-21.08 69.298)"
161
- fill="#fff"
162
- />
163
- </g>
164
- </svg>
165
- ),
166
- },
167
- };
168
-
169
- export const Chromatic = () => (
170
- <>
171
- <ExampleContainer>
172
- <Title title="Default" theme="light" level={4} />
173
- <DxcFooter />
174
- </ExampleContainer>
175
- <ExampleContainer>
176
- <Title title="With children, copyright, bottom links and social links" theme="light" level={4} />
177
- <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
178
- <div>
179
- <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
180
- </div>
181
- </DxcFooter>
182
- </ExampleContainer>
183
- <Title title="Margins" theme="light" level={2} />
184
- <ExampleContainer>
185
- <Title title="Xxsmall margin" theme="light" level={4} />
186
- <DxcFooter margin="xxsmall"></DxcFooter>
187
- <Title title="Xsmall margin" theme="light" level={4} />
188
- <DxcFooter margin="xsmall"></DxcFooter>
189
- <Title title="Small margin" theme="light" level={4} />
190
- <DxcFooter margin="small"></DxcFooter>
191
- <Title title="Medium margin" theme="light" level={4} />
192
- <DxcFooter margin="medium"></DxcFooter>
193
- <Title title="Large margin" theme="light" level={4} />
194
- <DxcFooter margin="large"></DxcFooter>
195
- <Title title="Xlarge margin" theme="light" level={4} />
196
- <DxcFooter margin="xlarge"></DxcFooter>
197
- <Title title="Xxlarge margin" theme="light" level={4} />
198
- <DxcFooter margin="xxlarge"></DxcFooter>
199
- </ExampleContainer>
200
- <Title title="Padding" theme="light" level={2} />
201
- <ExampleContainer>
202
- <Title title="Xxsmall padding" theme="light" level={4} />
203
- <DxcFooter padding="xxsmall"></DxcFooter>
204
- <Title title="Xsmall padding" theme="light" level={4} />
205
- <DxcFooter padding="xsmall"></DxcFooter>
206
- <Title title="Small padding" theme="light" level={4} />
207
- <DxcFooter padding="small"></DxcFooter>
208
- <Title title="Medium padding" theme="light" level={4} />
209
- <DxcFooter padding="medium"></DxcFooter>
210
- <Title title="Large padding" theme="light" level={4} />
211
- <DxcFooter padding="large"></DxcFooter>
212
- <Title title="Xlarge padding" theme="light" level={4} />
213
- <DxcFooter padding="xlarge"></DxcFooter>
214
- <Title title="Xxlarge padding" theme="light" level={4} />
215
- <DxcFooter padding="xxlarge"></DxcFooter>
216
- </ExampleContainer>
217
- <Title title="Opinionated theme" theme="light" level={2} />
218
- <ExampleContainer>
219
- <HalstackProvider theme={opinionatedTheme}>
220
- <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
221
- <div>
222
- <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
223
- </div>
224
- </DxcFooter>
225
- </HalstackProvider>
226
- </ExampleContainer>
227
- </>
228
- );
@@ -1,97 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@testing-library/react");
8
-
9
- var _Footer = _interopRequireDefault(require("./Footer.tsx"));
10
-
11
- var social = [{
12
- href: "https://www.test.com/social",
13
- logo: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
14
- }];
15
- var bottom = [{
16
- href: "https://www.test.com/bottom",
17
- text: "bottom-link-text"
18
- }];
19
- describe("Footer component tests", function () {
20
- test("Footer renders with default logo", function () {
21
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null)),
22
- getByTitle = _render.getByTitle;
23
-
24
- expect(getByTitle("DXC Logo")).toBeTruthy();
25
- });
26
- test("Footer renders with social links", function () {
27
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
28
- socialLinks: social
29
- })),
30
- getByRole = _render2.getByRole;
31
-
32
- var socialIcon = getByRole("link");
33
- expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
34
- });
35
- test("Footer renders with bottom links", function () {
36
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
37
- bottomLinks: bottom
38
- })),
39
- getByText = _render3.getByText;
40
-
41
- var link = getByText("bottom-link-text");
42
- expect(link.getAttribute("href")).toBe("https://www.test.com/bottom");
43
- });
44
- test("Footer renders with copyright text", function () {
45
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
46
- copyright: "test-copyright"
47
- })),
48
- getByText = _render4.getByText;
49
-
50
- expect(getByText("test-copyright")).toBeTruthy();
51
- });
52
- test("Footer renders with correct children", function () {
53
- // We need to force the offsetWidth value
54
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
55
- configurable: true,
56
- value: 1024
57
- });
58
-
59
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
60
- getByText = _render5.getByText;
61
-
62
- expect(getByText("footer-child-text")).toBeTruthy();
63
- });
64
- test("Footer renders with children in mobile", function () {
65
- // 425 is mobile width
66
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
67
- configurable: true,
68
- value: 425
69
- });
70
-
71
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
72
- queryByText = _render6.queryByText;
73
-
74
- expect(queryByText("footer-child-text")).toBeTruthy();
75
- });
76
- test("Footer is fully rendered", function () {
77
- Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
78
- configurable: true,
79
- value: 1024
80
- });
81
-
82
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Footer["default"], {
83
- socialLinks: social,
84
- bottomLinks: bottom,
85
- copyright: "test-copyright"
86
- }, /*#__PURE__*/_react["default"].createElement("p", null, "footer-child-text"))),
87
- getAllByRole = _render7.getAllByRole,
88
- getByText = _render7.getByText;
89
-
90
- var socialIcon = getAllByRole("link")[0];
91
- expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
92
- var bottomLink = getByText("bottom-link-text");
93
- expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
94
- expect(getByText("test-copyright")).toBeTruthy();
95
- expect(getByText("footer-child-text")).toBeTruthy();
96
- });
97
- });
package/footer/Icons.d.ts DELETED
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const dxcLogo: JSX.Element;
package/footer/Icons.js DELETED
@@ -1,77 +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.dxcLogo = void 0;
9
-
10
- var _react = _interopRequireDefault(require("react"));
11
-
12
- var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
13
- id: "g10",
14
- xmlns: "http://www.w3.org/2000/svg",
15
- width: "100%",
16
- height: "32",
17
- viewBox: "0 0 280.781 32"
18
- }, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {
19
- id: "g12"
20
- }, /*#__PURE__*/_react["default"].createElement("path", {
21
- id: "path14",
22
- d: "M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5",
23
- transform: "translate(-68.528 65.45)",
24
- fill: "#fff"
25
- }), /*#__PURE__*/_react["default"].createElement("path", {
26
- id: "path16",
27
- d: "M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96",
28
- transform: "translate(-77.56 65.45)",
29
- fill: "#fff"
30
- }), /*#__PURE__*/_react["default"].createElement("path", {
31
- id: "path18",
32
- d: "M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813",
33
- transform: "translate(-86.019 65.583)",
34
- fill: "#fff"
35
- }), /*#__PURE__*/_react["default"].createElement("path", {
36
- id: "path20",
37
- d: "M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594",
38
- transform: "translate(-95.903 65.45)",
39
- fill: "#fff"
40
- }), /*#__PURE__*/_react["default"].createElement("path", {
41
- id: "path22",
42
- d: "M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058",
43
- transform: "translate(-105.869 65.45)",
44
- fill: "#fff"
45
- }), /*#__PURE__*/_react["default"].createElement("path", {
46
- id: "path24",
47
- d: "M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145",
48
- transform: "translate(-115.631 65.583)",
49
- fill: "#fff"
50
- }), /*#__PURE__*/_react["default"].createElement("path", {
51
- id: "path26",
52
- d: "M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786",
53
- transform: "translate(-126.654 65.45)",
54
- fill: "#fff"
55
- }), /*#__PURE__*/_react["default"].createElement("path", {
56
- id: "path28",
57
- d: "M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145",
58
- transform: "translate(-135.016 65.583)",
59
- fill: "#fff"
60
- }), /*#__PURE__*/_react["default"].createElement("path", {
61
- id: "path30",
62
- d: "M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5",
63
- transform: "translate(-145.284 65.583)",
64
- fill: "#fff"
65
- }), /*#__PURE__*/_react["default"].createElement("path", {
66
- id: "path32",
67
- d: "M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46",
68
- transform: "translate(-154.162 65.45)",
69
- fill: "#fff"
70
- }), /*#__PURE__*/_react["default"].createElement("path", {
71
- id: "path34",
72
- d: "M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892",
73
- transform: "translate(-21.08 69.298)",
74
- fill: "#fff"
75
- })));
76
-
77
- exports.dxcLogo = dxcLogo;
package/footer/types.d.ts DELETED
@@ -1,66 +0,0 @@
1
- /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Size = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- declare type SocialLink = {
11
- /**
12
- * Element used as the icon for the link.
13
- */
14
- logo: string | SVG;
15
- /**
16
- * URL of the page the link goes to.
17
- */
18
- href: string;
19
- };
20
- declare type BottomLink = {
21
- /**
22
- * Text for the link.
23
- */
24
- text: string;
25
- /**
26
- * URL of the page the link goes to.
27
- */
28
- href: string;
29
- };
30
- declare type FooterPropsType = {
31
- /**
32
- * An array of objects representing the links that will be rendered as
33
- * icons at the top-right side of the footer.
34
- */
35
- socialLinks?: SocialLink[];
36
- /**
37
- * An array of objects representing the links that will be rendered at
38
- * the bottom part of the footer.
39
- */
40
- bottomLinks?: BottomLink[];
41
- /**
42
- * The center section of the footer. Can be used to render custom
43
- * content in this area.
44
- */
45
- children?: React.ReactNode;
46
- /**
47
- * The text that will be displayed as copyright disclaimer.
48
- */
49
- copyright?: string;
50
- /**
51
- * Value of the tabindex for all interactuable elements, except those
52
- * inside the custom area.
53
- */
54
- tabIndex?: number;
55
- /**
56
- * Size of the top margin to be applied to the footer.
57
- */
58
- margin?: Space | Size;
59
- /**
60
- * @deprecated This prop will be removed shortly, consider using the Inset component for this purpose.
61
- * Size of the padding to be applied to the custom area of the component.
62
- * You can pass an object with properties in order to specify different padding sizes.
63
- */
64
- padding?: Space | Size;
65
- };
66
- export default FooterPropsType;
package/footer/types.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
@@ -1,8 +0,0 @@
1
- import React from "react";
2
- import DxcDropdown from "../dropdown/Dropdown";
3
- import HeaderPropsType from "./types";
4
- declare const DxcHeader: {
5
- ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: HeaderPropsType): JSX.Element;
6
- Dropdown: (props: React.ComponentProps<typeof DxcDropdown>) => JSX.Element;
7
- };
8
- export default DxcHeader;