@dxc-technology/halstack-react 0.0.0-ca55cbe → 0.0.0-ca89a03

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 (345) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3910 -0
  3. package/dist/index.d.ts +3910 -0
  4. package/dist/index.js +14390 -0
  5. package/dist/index.mjs +14302 -0
  6. package/package.json +85 -67
  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 -342
  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 -125
  46. package/bulleted-list/BulletedList.stories.tsx +0 -206
  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 -153
  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 -69
  75. package/common/coreTokens.d.ts +0 -146
  76. package/common/coreTokens.js +0 -167
  77. package/common/fonts/OpenSans-Bold.ttf +0 -0
  78. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  80. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  81. package/common/fonts/OpenSans-Italic.ttf +0 -0
  82. package/common/fonts/OpenSans-Light.ttf +0 -0
  83. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  84. package/common/fonts/OpenSans-Regular.ttf +0 -0
  85. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  86. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  87. package/common/utils.d.ts +0 -1
  88. package/common/utils.js +0 -22
  89. package/common/variables.d.ts +0 -1482
  90. package/common/variables.js +0 -1361
  91. package/date-input/Calendar.d.ts +0 -4
  92. package/date-input/Calendar.js +0 -258
  93. package/date-input/DateInput.d.ts +0 -4
  94. package/date-input/DateInput.js +0 -269
  95. package/date-input/DateInput.stories.tsx +0 -304
  96. package/date-input/DateInput.test.js +0 -835
  97. package/date-input/DatePicker.d.ts +0 -4
  98. package/date-input/DatePicker.js +0 -146
  99. package/date-input/Icons.d.ts +0 -6
  100. package/date-input/Icons.js +0 -75
  101. package/date-input/YearPicker.d.ts +0 -4
  102. package/date-input/YearPicker.js +0 -126
  103. package/date-input/types.d.ts +0 -158
  104. package/date-input/types.js +0 -5
  105. package/dialog/Dialog.d.ts +0 -4
  106. package/dialog/Dialog.js +0 -149
  107. package/dialog/Dialog.stories.tsx +0 -319
  108. package/dialog/Dialog.test.js +0 -369
  109. package/dialog/types.d.ts +0 -44
  110. package/dialog/types.js +0 -5
  111. package/dropdown/Dropdown.d.ts +0 -4
  112. package/dropdown/Dropdown.js +0 -388
  113. package/dropdown/Dropdown.stories.tsx +0 -438
  114. package/dropdown/Dropdown.test.js +0 -586
  115. package/dropdown/DropdownMenu.d.ts +0 -4
  116. package/dropdown/DropdownMenu.js +0 -74
  117. package/dropdown/DropdownMenuItem.d.ts +0 -4
  118. package/dropdown/DropdownMenuItem.js +0 -79
  119. package/dropdown/types.d.ts +0 -100
  120. package/dropdown/types.js +0 -5
  121. package/file-input/FileInput.d.ts +0 -4
  122. package/file-input/FileInput.js +0 -547
  123. package/file-input/FileInput.stories.tsx +0 -618
  124. package/file-input/FileInput.test.js +0 -457
  125. package/file-input/FileItem.d.ts +0 -4
  126. package/file-input/FileItem.js +0 -162
  127. package/file-input/types.d.ts +0 -129
  128. package/file-input/types.js +0 -5
  129. package/flex/Flex.d.ts +0 -4
  130. package/flex/Flex.js +0 -71
  131. package/flex/Flex.stories.tsx +0 -112
  132. package/flex/types.d.ts +0 -97
  133. package/flex/types.js +0 -5
  134. package/footer/Footer.d.ts +0 -4
  135. package/footer/Footer.js +0 -183
  136. package/footer/Footer.stories.tsx +0 -228
  137. package/footer/Footer.test.js +0 -97
  138. package/footer/Icons.d.ts +0 -2
  139. package/footer/Icons.js +0 -77
  140. package/footer/types.d.ts +0 -66
  141. package/footer/types.js +0 -5
  142. package/grid/Grid.d.ts +0 -7
  143. package/grid/Grid.js +0 -91
  144. package/grid/Grid.stories.tsx +0 -219
  145. package/grid/types.d.ts +0 -115
  146. package/grid/types.js +0 -5
  147. package/header/Header.d.ts +0 -8
  148. package/header/Header.js +0 -303
  149. package/header/Header.stories.tsx +0 -315
  150. package/header/Header.test.js +0 -79
  151. package/header/Icons.d.ts +0 -2
  152. package/header/Icons.js +0 -34
  153. package/header/types.d.ts +0 -48
  154. package/header/types.js +0 -5
  155. package/heading/Heading.d.ts +0 -4
  156. package/heading/Heading.js +0 -159
  157. package/heading/Heading.stories.tsx +0 -54
  158. package/heading/Heading.test.js +0 -186
  159. package/heading/types.d.ts +0 -33
  160. package/heading/types.js +0 -5
  161. package/inset/Inset.d.ts +0 -3
  162. package/inset/Inset.js +0 -51
  163. package/inset/Inset.stories.tsx +0 -230
  164. package/inset/types.d.ts +0 -37
  165. package/inset/types.js +0 -5
  166. package/layout/ApplicationLayout.d.ts +0 -20
  167. package/layout/ApplicationLayout.js +0 -171
  168. package/layout/ApplicationLayout.stories.tsx +0 -162
  169. package/layout/Icons.d.ts +0 -5
  170. package/layout/Icons.js +0 -66
  171. package/layout/SidenavContext.d.ts +0 -5
  172. package/layout/SidenavContext.js +0 -19
  173. package/layout/types.d.ts +0 -41
  174. package/layout/types.js +0 -5
  175. package/link/Link.d.ts +0 -4
  176. package/link/Link.js +0 -136
  177. package/link/Link.stories.tsx +0 -253
  178. package/link/Link.test.js +0 -81
  179. package/link/types.d.ts +0 -54
  180. package/link/types.js +0 -5
  181. package/main.d.ts +0 -45
  182. package/main.js +0 -377
  183. package/nav-tabs/NavTabs.d.ts +0 -8
  184. package/nav-tabs/NavTabs.js +0 -125
  185. package/nav-tabs/NavTabs.stories.tsx +0 -260
  186. package/nav-tabs/NavTabs.test.js +0 -82
  187. package/nav-tabs/Tab.d.ts +0 -4
  188. package/nav-tabs/Tab.js +0 -150
  189. package/nav-tabs/types.d.ts +0 -53
  190. package/nav-tabs/types.js +0 -5
  191. package/number-input/NumberInput.d.ts +0 -4
  192. package/number-input/NumberInput.js +0 -76
  193. package/number-input/NumberInput.stories.tsx +0 -115
  194. package/number-input/NumberInput.test.js +0 -542
  195. package/number-input/NumberInputContext.d.ts +0 -4
  196. package/number-input/NumberInputContext.js +0 -19
  197. package/number-input/numberInputContextTypes.d.ts +0 -19
  198. package/number-input/numberInputContextTypes.js +0 -5
  199. package/number-input/types.d.ts +0 -124
  200. package/number-input/types.js +0 -5
  201. package/paginator/Icons.d.ts +0 -5
  202. package/paginator/Icons.js +0 -54
  203. package/paginator/Paginator.d.ts +0 -4
  204. package/paginator/Paginator.js +0 -163
  205. package/paginator/Paginator.stories.tsx +0 -87
  206. package/paginator/Paginator.test.js +0 -305
  207. package/paginator/types.d.ts +0 -38
  208. package/paginator/types.js +0 -5
  209. package/paragraph/Paragraph.d.ts +0 -5
  210. package/paragraph/Paragraph.js +0 -38
  211. package/paragraph/Paragraph.stories.tsx +0 -44
  212. package/password-input/PasswordInput.d.ts +0 -4
  213. package/password-input/PasswordInput.js +0 -166
  214. package/password-input/PasswordInput.stories.tsx +0 -131
  215. package/password-input/PasswordInput.test.js +0 -181
  216. package/password-input/types.d.ts +0 -110
  217. package/password-input/types.js +0 -5
  218. package/progress-bar/ProgressBar.d.ts +0 -4
  219. package/progress-bar/ProgressBar.js +0 -176
  220. package/progress-bar/ProgressBar.stories.jsx +0 -93
  221. package/progress-bar/ProgressBar.test.js +0 -110
  222. package/progress-bar/types.d.ts +0 -37
  223. package/progress-bar/types.js +0 -5
  224. package/quick-nav/QuickNav.d.ts +0 -4
  225. package/quick-nav/QuickNav.js +0 -117
  226. package/quick-nav/QuickNav.stories.tsx +0 -356
  227. package/quick-nav/types.d.ts +0 -21
  228. package/quick-nav/types.js +0 -5
  229. package/radio-group/Radio.d.ts +0 -4
  230. package/radio-group/Radio.js +0 -156
  231. package/radio-group/RadioGroup.d.ts +0 -4
  232. package/radio-group/RadioGroup.js +0 -283
  233. package/radio-group/RadioGroup.stories.tsx +0 -214
  234. package/radio-group/RadioGroup.test.js +0 -722
  235. package/radio-group/types.d.ts +0 -114
  236. package/radio-group/types.js +0 -5
  237. package/resultsetTable/Icons.d.ts +0 -7
  238. package/resultsetTable/Icons.js +0 -51
  239. package/resultsetTable/ResultsetTable.d.ts +0 -4
  240. package/resultsetTable/ResultsetTable.js +0 -195
  241. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  242. package/resultsetTable/ResultsetTable.test.js +0 -325
  243. package/resultsetTable/types.d.ts +0 -67
  244. package/resultsetTable/types.js +0 -5
  245. package/select/Icons.d.ts +0 -10
  246. package/select/Icons.js +0 -93
  247. package/select/Listbox.d.ts +0 -4
  248. package/select/Listbox.js +0 -169
  249. package/select/Option.d.ts +0 -4
  250. package/select/Option.js +0 -97
  251. package/select/Select.d.ts +0 -4
  252. package/select/Select.js +0 -666
  253. package/select/Select.stories.tsx +0 -971
  254. package/select/Select.test.js +0 -2228
  255. package/select/types.d.ts +0 -210
  256. package/select/types.js +0 -5
  257. package/sidenav/Icons.d.ts +0 -7
  258. package/sidenav/Icons.js +0 -51
  259. package/sidenav/Sidenav.d.ts +0 -10
  260. package/sidenav/Sidenav.js +0 -238
  261. package/sidenav/Sidenav.stories.tsx +0 -282
  262. package/sidenav/Sidenav.test.js +0 -44
  263. package/sidenav/types.d.ts +0 -76
  264. package/sidenav/types.js +0 -5
  265. package/slider/Slider.d.ts +0 -4
  266. package/slider/Slider.js +0 -342
  267. package/slider/Slider.stories.tsx +0 -240
  268. package/slider/Slider.test.js +0 -250
  269. package/slider/types.d.ts +0 -86
  270. package/slider/types.js +0 -5
  271. package/spinner/Spinner.d.ts +0 -4
  272. package/spinner/Spinner.js +0 -244
  273. package/spinner/Spinner.stories.jsx +0 -129
  274. package/spinner/Spinner.test.js +0 -64
  275. package/spinner/types.d.ts +0 -32
  276. package/spinner/types.js +0 -5
  277. package/switch/Switch.d.ts +0 -4
  278. package/switch/Switch.js +0 -262
  279. package/switch/Switch.stories.tsx +0 -171
  280. package/switch/Switch.test.js +0 -225
  281. package/switch/types.d.ts +0 -66
  282. package/switch/types.js +0 -5
  283. package/table/Table.d.ts +0 -4
  284. package/table/Table.js +0 -118
  285. package/table/Table.stories.jsx +0 -356
  286. package/table/Table.test.js +0 -26
  287. package/table/types.d.ts +0 -21
  288. package/table/types.js +0 -5
  289. package/tabs/Tab.d.ts +0 -4
  290. package/tabs/Tab.js +0 -132
  291. package/tabs/Tabs.d.ts +0 -4
  292. package/tabs/Tabs.js +0 -461
  293. package/tabs/Tabs.stories.tsx +0 -226
  294. package/tabs/Tabs.test.js +0 -350
  295. package/tabs/types.d.ts +0 -92
  296. package/tabs/types.js +0 -5
  297. package/tag/Tag.d.ts +0 -4
  298. package/tag/Tag.js +0 -181
  299. package/tag/Tag.stories.tsx +0 -155
  300. package/tag/Tag.test.js +0 -60
  301. package/tag/types.d.ts +0 -69
  302. package/tag/types.js +0 -5
  303. package/text-input/Icons.d.ts +0 -8
  304. package/text-input/Icons.js +0 -60
  305. package/text-input/Suggestion.d.ts +0 -4
  306. package/text-input/Suggestion.js +0 -84
  307. package/text-input/Suggestions.d.ts +0 -4
  308. package/text-input/Suggestions.js +0 -134
  309. package/text-input/TextInput.d.ts +0 -4
  310. package/text-input/TextInput.js +0 -673
  311. package/text-input/TextInput.stories.tsx +0 -569
  312. package/text-input/TextInput.test.js +0 -1723
  313. package/text-input/types.d.ts +0 -197
  314. package/text-input/types.js +0 -5
  315. package/textarea/Textarea.d.ts +0 -4
  316. package/textarea/Textarea.js +0 -276
  317. package/textarea/Textarea.stories.jsx +0 -216
  318. package/textarea/Textarea.test.js +0 -435
  319. package/textarea/types.d.ts +0 -137
  320. package/textarea/types.js +0 -5
  321. package/toggle-group/ToggleGroup.d.ts +0 -4
  322. package/toggle-group/ToggleGroup.js +0 -218
  323. package/toggle-group/ToggleGroup.stories.tsx +0 -215
  324. package/toggle-group/ToggleGroup.test.js +0 -156
  325. package/toggle-group/types.d.ts +0 -105
  326. package/toggle-group/types.js +0 -5
  327. package/typography/Typography.d.ts +0 -4
  328. package/typography/Typography.js +0 -32
  329. package/typography/Typography.stories.tsx +0 -198
  330. package/typography/types.d.ts +0 -18
  331. package/typography/types.js +0 -5
  332. package/useTheme.d.ts +0 -1235
  333. package/useTheme.js +0 -22
  334. package/useTranslatedLabels.d.ts +0 -85
  335. package/useTranslatedLabels.js +0 -20
  336. package/utils/BaseTypography.d.ts +0 -21
  337. package/utils/BaseTypography.js +0 -108
  338. package/utils/FocusLock.d.ts +0 -13
  339. package/utils/FocusLock.js +0 -139
  340. package/wizard/Wizard.d.ts +0 -4
  341. package/wizard/Wizard.js +0 -285
  342. package/wizard/Wizard.stories.tsx +0 -253
  343. package/wizard/Wizard.test.js +0 -141
  344. package/wizard/types.d.ts +0 -64
  345. 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
- });
package/grid/Grid.d.ts DELETED
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import GridPropsType, { GridItemProps } from "./types";
3
- declare const DxcGrid: {
4
- (props: GridPropsType): JSX.Element;
5
- GridItem: import("styled-components").StyledComponent<"div", any, GridItemProps, never>;
6
- };
7
- export default DxcGrid;
package/grid/Grid.js DELETED
@@ -1,91 +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
- var _templateObject, _templateObject2;
17
-
18
- var DxcGrid = function DxcGrid(props) {
19
- return /*#__PURE__*/_react["default"].createElement(Grid, props);
20
- };
21
-
22
- var Grid = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: grid;\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n \n ", "\n ", "\n ", "\n ", "\n"])), function (_ref) {
23
- var templateColumns = _ref.templateColumns;
24
- return templateColumns && "grid-template-columns: ".concat(templateColumns.join(" "), ";");
25
- }, function (_ref2) {
26
- var templateRows = _ref2.templateRows;
27
- return templateRows && "grid-template-rows: ".concat(templateRows.join(" "), ";");
28
- }, function (_ref3) {
29
- var templateAreas = _ref3.templateAreas;
30
- return templateAreas && "grid-template-areas: ".concat(templateAreas.map(function (row) {
31
- return "\"".concat(row, "\"");
32
- }).join(" "), ";");
33
- }, function (_ref4) {
34
- var autoColumns = _ref4.autoColumns;
35
- return autoColumns && "grid-auto-columns: ".concat(autoColumns, ";");
36
- }, function (_ref5) {
37
- var autoRows = _ref5.autoRows;
38
- return autoRows && "grid-auto-rows: ".concat(autoRows, ";");
39
- }, function (_ref6) {
40
- var autoFlow = _ref6.autoFlow;
41
- return autoFlow && "grid-auto-flow: ".concat(autoFlow, ";");
42
- }, function (_ref7) {
43
- var _gap$rowGap, _gap$columnGap;
44
-
45
- var gap = _ref7.gap;
46
- return gap != null && (typeof gap === "string" ? "gap: ".concat(gap, ";") : "row-gap: ".concat((_gap$rowGap = gap.rowGap) !== null && _gap$rowGap !== void 0 ? _gap$rowGap : "", "; column-gap: ").concat((_gap$columnGap = gap.columnGap) !== null && _gap$columnGap !== void 0 ? _gap$columnGap : "", ";"));
47
- }, function (_ref8) {
48
- var _placeItems$alignItem, _placeItems$justifyIt;
49
-
50
- var placeItems = _ref8.placeItems;
51
- return placeItems && (typeof placeItems === "string" ? "place-items: ".concat(placeItems) : "align-items: ".concat((_placeItems$alignItem = placeItems.alignItems) !== null && _placeItems$alignItem !== void 0 ? _placeItems$alignItem : "", "; justify-items: ").concat((_placeItems$justifyIt = placeItems.justifyItems) !== null && _placeItems$justifyIt !== void 0 ? _placeItems$justifyIt : "", ";"));
52
- }, function (_ref9) {
53
- var _placeContent$alignCo, _placeContent$justify;
54
-
55
- var placeContent = _ref9.placeContent;
56
- return placeContent && (typeof placeContent === "string" ? "place-content: ".concat(placeContent) : "align-content: ".concat((_placeContent$alignCo = placeContent.alignContent) !== null && _placeContent$alignCo !== void 0 ? _placeContent$alignCo : "", "; justify-content: ").concat((_placeContent$justify = placeContent.justifyContent) !== null && _placeContent$justify !== void 0 ? _placeContent$justify : "", ";"));
57
- }, function (_ref10) {
58
- var areaName = _ref10.areaName;
59
- return areaName && "grid-area: ".concat(areaName, ";");
60
- }, function (_ref11) {
61
- var column = _ref11.column;
62
- return column && "grid-column: ".concat(typeof column === "string" || typeof column === "number" ? column : "".concat(column.start, " / ").concat(column.end, ";"), ";");
63
- }, function (_ref12) {
64
- var row = _ref12.row;
65
- return row && "grid-row: ".concat(typeof row === "string" || typeof row === "number" ? row : "".concat(row.start, " / ").concat(row.end, ";"), ";");
66
- }, function (_ref13) {
67
- var _placeSelf$alignSelf, _placeSelf$justifySel;
68
-
69
- var placeSelf = _ref13.placeSelf;
70
- return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf = placeSelf.alignSelf) !== null && _placeSelf$alignSelf !== void 0 ? _placeSelf$alignSelf : "", "; justify-self: ").concat((_placeSelf$justifySel = placeSelf.justifySelf) !== null && _placeSelf$justifySel !== void 0 ? _placeSelf$justifySel : "", ";"));
71
- });
72
-
73
- var GridItem = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n ", "\n ", "\n ", "\n"])), function (_ref14) {
74
- var areaName = _ref14.areaName;
75
- return areaName && "grid-area: ".concat(areaName, ";");
76
- }, function (_ref15) {
77
- var column = _ref15.column;
78
- return column && "grid-column: ".concat(typeof column === "string" || typeof column === "number" ? column : "".concat(column.start, " / ").concat(column.end, ";"), ";");
79
- }, function (_ref16) {
80
- var row = _ref16.row;
81
- return row && "grid-row: ".concat(typeof row === "string" || typeof row === "number" ? row : "".concat(row.start, " / ").concat(row.end, ";"), ";");
82
- }, function (_ref17) {
83
- var _placeSelf$alignSelf2, _placeSelf$justifySel2;
84
-
85
- var placeSelf = _ref17.placeSelf;
86
- return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf2 = placeSelf.alignSelf) !== null && _placeSelf$alignSelf2 !== void 0 ? _placeSelf$alignSelf2 : "", "; justify-self: ").concat((_placeSelf$justifySel2 = placeSelf.justifySelf) !== null && _placeSelf$justifySel2 !== void 0 ? _placeSelf$justifySel2 : "", ";"));
87
- });
88
-
89
- DxcGrid.GridItem = GridItem;
90
- var _default = DxcGrid;
91
- exports["default"] = _default;