@dxc-technology/halstack-react 0.0.0-551273e → 0.0.0-56a93a8

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 (304) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +39 -39
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -0
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/alert/Alert.js +290 -0
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +9 -21
  21. package/box/index.d.ts +25 -0
  22. package/button/Button.d.ts +4 -0
  23. package/button/Button.js +182 -0
  24. package/button/Button.stories.tsx +293 -0
  25. package/button/types.d.ts +57 -0
  26. package/button/types.js +5 -0
  27. package/card/Card.d.ts +4 -0
  28. package/{dist/card → card}/Card.js +32 -121
  29. package/card/types.d.ts +69 -0
  30. package/card/types.js +5 -0
  31. package/checkbox/Checkbox.d.ts +4 -0
  32. package/{dist/checkbox → checkbox}/Checkbox.js +37 -78
  33. package/checkbox/types.d.ts +60 -0
  34. package/checkbox/types.js +5 -0
  35. package/{dist/chip → chip}/Chip.js +33 -81
  36. package/chip/index.d.ts +22 -0
  37. package/{dist/common → common}/OpenSans.css +0 -0
  38. package/{dist/common → common}/RequiredComponent.js +3 -11
  39. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  49. package/{dist/common → common}/utils.js +0 -0
  50. package/common/variables.js +1569 -0
  51. package/{dist/date → date}/Date.js +23 -31
  52. package/date/index.d.ts +27 -0
  53. package/date-input/DateInput.d.ts +4 -0
  54. package/date-input/DateInput.js +361 -0
  55. package/date-input/types.d.ts +100 -0
  56. package/date-input/types.js +5 -0
  57. package/{dist/dialog → dialog}/Dialog.js +26 -77
  58. package/dialog/index.d.ts +18 -0
  59. package/dropdown/Dropdown.d.ts +4 -0
  60. package/dropdown/Dropdown.js +417 -0
  61. package/dropdown/types.d.ts +89 -0
  62. package/dropdown/types.js +5 -0
  63. package/file-input/FileInput.js +532 -0
  64. package/file-input/FileItem.js +193 -0
  65. package/file-input/index.d.ts +81 -0
  66. package/footer/Footer.d.ts +4 -0
  67. package/footer/Footer.js +266 -0
  68. package/footer/Icons.js +77 -0
  69. package/footer/types.d.ts +61 -0
  70. package/footer/types.js +5 -0
  71. package/header/Header.js +326 -0
  72. package/header/Icons.js +59 -0
  73. package/header/index.d.ts +25 -0
  74. package/{dist/heading → heading}/Heading.js +30 -76
  75. package/heading/index.d.ts +17 -0
  76. package/input-text/Icons.js +22 -0
  77. package/{dist/input-text → input-text}/InputText.js +119 -180
  78. package/input-text/index.d.ts +36 -0
  79. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  80. package/layout/Icons.js +55 -0
  81. package/{dist/link → link}/Link.js +20 -78
  82. package/link/index.d.ts +23 -0
  83. package/main.d.ts +44 -0
  84. package/{dist/main.js → main.js} +121 -69
  85. package/number-input/NumberInput.js +128 -0
  86. package/number-input/NumberInputContext.js +16 -0
  87. package/number-input/index.d.ts +113 -0
  88. package/package.json +34 -25
  89. package/paginator/Icons.js +66 -0
  90. package/paginator/Paginator.d.ts +4 -0
  91. package/paginator/Paginator.js +198 -0
  92. package/paginator/types.d.ts +38 -0
  93. package/paginator/types.js +5 -0
  94. package/password-input/PasswordInput.js +199 -0
  95. package/password-input/PasswordInput.stories.jsx +131 -0
  96. package/password-input/index.d.ts +94 -0
  97. package/progress-bar/ProgressBar.d.ts +4 -0
  98. package/progress-bar/ProgressBar.js +170 -0
  99. package/progress-bar/types.d.ts +37 -0
  100. package/progress-bar/types.js +5 -0
  101. package/radio/Radio.d.ts +4 -0
  102. package/{dist/radio → radio}/Radio.js +15 -50
  103. package/radio/types.d.ts +54 -0
  104. package/radio/types.js +5 -0
  105. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  106. package/resultsetTable/index.d.ts +19 -0
  107. package/select/Select.js +865 -0
  108. package/select/index.d.ts +131 -0
  109. package/{dist/sidenav → sidenav}/Sidenav.js +20 -58
  110. package/sidenav/index.d.ts +13 -0
  111. package/slider/Slider.d.ts +4 -0
  112. package/slider/Slider.js +306 -0
  113. package/slider/types.d.ts +83 -0
  114. package/slider/types.js +5 -0
  115. package/spinner/Spinner.js +267 -0
  116. package/spinner/index.d.ts +17 -0
  117. package/switch/Switch.d.ts +4 -0
  118. package/{dist/switch → switch}/Switch.js +26 -69
  119. package/switch/types.d.ts +58 -0
  120. package/switch/types.js +5 -0
  121. package/{dist/table → table}/Table.js +13 -23
  122. package/table/index.d.ts +13 -0
  123. package/tabs/Tabs.d.ts +4 -0
  124. package/tabs/Tabs.js +211 -0
  125. package/tabs/types.d.ts +71 -0
  126. package/tabs/types.js +5 -0
  127. package/{dist/tag → tag}/Tag.js +49 -121
  128. package/tag/index.d.ts +24 -0
  129. package/text-input/TextInput.js +825 -0
  130. package/text-input/index.d.ts +135 -0
  131. package/textarea/Textarea.js +317 -0
  132. package/textarea/Textarea.stories.jsx +135 -0
  133. package/textarea/index.d.ts +117 -0
  134. package/{dist/toggle → toggle}/Toggle.js +15 -49
  135. package/toggle/index.d.ts +21 -0
  136. package/toggle-group/ToggleGroup.js +243 -0
  137. package/toggle-group/index.d.ts +21 -0
  138. package/{dist/upload → upload}/Upload.js +11 -15
  139. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  140. package/upload/buttons-upload/Icons.js +40 -0
  141. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  142. package/upload/dragAndDropArea/Icons.js +39 -0
  143. package/upload/file-upload/FileToUpload.js +115 -0
  144. package/upload/file-upload/Icons.js +66 -0
  145. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  146. package/upload/index.d.ts +15 -0
  147. package/upload/transaction/Icons.js +160 -0
  148. package/upload/transaction/Transaction.js +104 -0
  149. package/upload/transactions/Transactions.js +94 -0
  150. package/{dist/useTheme.js → useTheme.js} +0 -0
  151. package/wizard/Icons.js +65 -0
  152. package/{dist/wizard → wizard}/Wizard.js +40 -180
  153. package/wizard/index.d.ts +18 -0
  154. package/README.md +0 -66
  155. package/babel.config.js +0 -8
  156. package/dist/BackgroundColorContext.js +0 -46
  157. package/dist/ThemeContext.js +0 -216
  158. package/dist/accordion/Accordion.js +0 -346
  159. package/dist/accordion/Accordion.stories.js +0 -207
  160. package/dist/accordion/readme.md +0 -96
  161. package/dist/accordion-group/AccordionGroup.js +0 -188
  162. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  163. package/dist/accordion-group/readme.md +0 -70
  164. package/dist/alert/Alert.js +0 -388
  165. package/dist/alert/Alert.stories.js +0 -158
  166. package/dist/alert/close.svg +0 -4
  167. package/dist/alert/error.svg +0 -4
  168. package/dist/alert/info.svg +0 -4
  169. package/dist/alert/readme.md +0 -43
  170. package/dist/alert/success.svg +0 -4
  171. package/dist/alert/warning.svg +0 -4
  172. package/dist/badge/Badge.js +0 -63
  173. package/dist/button/Button.js +0 -232
  174. package/dist/button/Button.stories.js +0 -224
  175. package/dist/button/readme.md +0 -93
  176. package/dist/checkbox/Checkbox.stories.js +0 -144
  177. package/dist/checkbox/readme.md +0 -116
  178. package/dist/common/variables.js +0 -1158
  179. package/dist/date/Date.stories.js +0 -205
  180. package/dist/date/readme.md +0 -73
  181. package/dist/dialog/Dialog.stories.js +0 -217
  182. package/dist/dialog/readme.md +0 -32
  183. package/dist/dropdown/Dropdown.js +0 -493
  184. package/dist/dropdown/Dropdown.stories.js +0 -249
  185. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  186. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  187. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  188. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  189. package/dist/dropdown/readme.md +0 -69
  190. package/dist/footer/Footer.js +0 -407
  191. package/dist/footer/Footer.stories.js +0 -94
  192. package/dist/footer/dxc_logo.svg +0 -15
  193. package/dist/footer/readme.md +0 -41
  194. package/dist/header/Header.js +0 -431
  195. package/dist/header/Header.stories.js +0 -176
  196. package/dist/header/close_icon.svg +0 -1
  197. package/dist/header/dxc_logo_black.svg +0 -8
  198. package/dist/header/hamb_menu_black.svg +0 -1
  199. package/dist/header/hamb_menu_white.svg +0 -1
  200. package/dist/header/readme.md +0 -33
  201. package/dist/input-text/InputText.stories.js +0 -209
  202. package/dist/input-text/error.svg +0 -1
  203. package/dist/input-text/readme.md +0 -91
  204. package/dist/layout/facebook.svg +0 -45
  205. package/dist/layout/linkedin.svg +0 -50
  206. package/dist/layout/twitter.svg +0 -53
  207. package/dist/link/readme.md +0 -51
  208. package/dist/paginator/Paginator.js +0 -283
  209. package/dist/paginator/images/next.svg +0 -3
  210. package/dist/paginator/images/nextPage.svg +0 -3
  211. package/dist/paginator/images/previous.svg +0 -3
  212. package/dist/paginator/images/previousPage.svg +0 -3
  213. package/dist/paginator/readme.md +0 -50
  214. package/dist/progress-bar/ProgressBar.js +0 -206
  215. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  216. package/dist/progress-bar/readme.md +0 -63
  217. package/dist/radio/Radio.stories.js +0 -166
  218. package/dist/radio/readme.md +0 -70
  219. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  220. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  221. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  222. package/dist/select/Select.js +0 -563
  223. package/dist/select/Select.stories.js +0 -235
  224. package/dist/select/readme.md +0 -72
  225. package/dist/slider/Slider.js +0 -315
  226. package/dist/slider/Slider.stories.js +0 -241
  227. package/dist/slider/readme.md +0 -64
  228. package/dist/spinner/Spinner.js +0 -214
  229. package/dist/spinner/Spinner.stories.js +0 -183
  230. package/dist/spinner/readme.md +0 -65
  231. package/dist/switch/Switch.stories.js +0 -134
  232. package/dist/switch/readme.md +0 -133
  233. package/dist/tabs/Tabs.js +0 -343
  234. package/dist/tabs/Tabs.stories.js +0 -130
  235. package/dist/tabs/readme.md +0 -78
  236. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  237. package/dist/tabs-for-sections/readme.md +0 -78
  238. package/dist/toggle/Toggle.stories.js +0 -297
  239. package/dist/toggle/readme.md +0 -80
  240. package/dist/toggle-group/ToggleGroup.js +0 -241
  241. package/dist/toggle-group/readme.md +0 -82
  242. package/dist/upload/Upload.stories.js +0 -72
  243. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  244. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  245. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  246. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  247. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  248. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  249. package/dist/upload/file-upload/FileToUpload.js +0 -184
  250. package/dist/upload/file-upload/audio-icon.svg +0 -4
  251. package/dist/upload/file-upload/close.svg +0 -4
  252. package/dist/upload/file-upload/file-icon.svg +0 -4
  253. package/dist/upload/file-upload/video-icon.svg +0 -4
  254. package/dist/upload/readme.md +0 -37
  255. package/dist/upload/transaction/Transaction.js +0 -171
  256. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  257. package/dist/upload/transaction/audio-icon.svg +0 -4
  258. package/dist/upload/transaction/error-icon.svg +0 -4
  259. package/dist/upload/transaction/file-icon-err.svg +0 -4
  260. package/dist/upload/transaction/file-icon.svg +0 -4
  261. package/dist/upload/transaction/image-icon-err.svg +0 -4
  262. package/dist/upload/transaction/image-icon.svg +0 -4
  263. package/dist/upload/transaction/success-icon.svg +0 -4
  264. package/dist/upload/transaction/video-icon-err.svg +0 -4
  265. package/dist/upload/transaction/video-icon.svg +0 -4
  266. package/dist/upload/transactions/Transactions.js +0 -138
  267. package/dist/wizard/invalid_icon.svg +0 -5
  268. package/dist/wizard/valid_icon.svg +0 -5
  269. package/dist/wizard/validation-wrong.svg +0 -6
  270. package/test/Accordion.test.js +0 -33
  271. package/test/AccordionGroup.test.js +0 -125
  272. package/test/Alert.test.js +0 -53
  273. package/test/Box.test.js +0 -10
  274. package/test/Button.test.js +0 -18
  275. package/test/Card.test.js +0 -30
  276. package/test/Checkbox.test.js +0 -45
  277. package/test/Chip.test.js +0 -25
  278. package/test/Date.test.js +0 -393
  279. package/test/Dialog.test.js +0 -23
  280. package/test/Dropdown.test.js +0 -130
  281. package/test/Footer.test.js +0 -99
  282. package/test/Header.test.js +0 -39
  283. package/test/Heading.test.js +0 -35
  284. package/test/InputText.test.js +0 -240
  285. package/test/Link.test.js +0 -43
  286. package/test/Paginator.test.js +0 -177
  287. package/test/ProgressBar.test.js +0 -35
  288. package/test/Radio.test.js +0 -37
  289. package/test/ResultsetTable.test.js +0 -330
  290. package/test/Select.test.js +0 -192
  291. package/test/Sidenav.test.js +0 -45
  292. package/test/Slider.test.js +0 -82
  293. package/test/Spinner.test.js +0 -27
  294. package/test/Switch.test.js +0 -45
  295. package/test/Table.test.js +0 -36
  296. package/test/Tabs.test.js +0 -109
  297. package/test/TabsForSections.test.js +0 -34
  298. package/test/Tag.test.js +0 -32
  299. package/test/TextArea.test.js +0 -52
  300. package/test/ToggleGroup.test.js +0 -81
  301. package/test/Upload.test.js +0 -60
  302. package/test/Wizard.test.js +0 -130
  303. package/test/mocks/pngMock.js +0 -1
  304. package/test/mocks/svgMock.js +0 -1
@@ -1,407 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _variables = require("../common/variables.js");
27
-
28
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
-
30
- function _templateObject12() {
31
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
32
-
33
- _templateObject12 = function _templateObject12() {
34
- return data;
35
- };
36
-
37
- return data;
38
- }
39
-
40
- function _templateObject11() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px 10px;\n color: ", ";\n"]);
42
-
43
- _templateObject11 = function _templateObject11() {
44
- return data;
45
- };
46
-
47
- return data;
48
- }
49
-
50
- function _templateObject10() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: ", ";\n width: ", ";\n color: ", ";\n }\n\n overflow: hidden;\n\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"]);
52
-
53
- _templateObject10 = function _templateObject10() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- function _templateObject9() {
61
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: ", ";\n width: ", ";\n fill: ", ";\n }\n"]);
62
-
63
- _templateObject9 = function _templateObject9() {
64
- return data;
65
- };
66
-
67
- return data;
68
- }
69
-
70
- function _templateObject8() {
71
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n margin-left: ", ";\n }\n"]);
72
-
73
- _templateObject8 = function _templateObject8() {
74
- return data;
75
- };
76
-
77
- return data;
78
- }
79
-
80
- function _templateObject7() {
81
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n"]);
82
-
83
- _templateObject7 = function _templateObject7() {
84
- return data;
85
- };
86
-
87
- return data;
88
- }
89
-
90
- function _templateObject6() {
91
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n max-width: ", ";\n width: ", ";\n text-align: ", ";\n padding-top: ", ";\n"]);
92
-
93
- _templateObject6 = function _templateObject6() {
94
- return data;
95
- };
96
-
97
- return data;
98
- }
99
-
100
- function _templateObject5() {
101
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n min-height: 16px;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n color: ", ";\n overflow: hidden;\n"]);
102
-
103
- _templateObject5 = function _templateObject5() {
104
- return data;
105
- };
106
-
107
- return data;
108
- }
109
-
110
- function _templateObject4() {
111
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: ", ";\n display: inline-flex;\n flex-wrap: wrap;\n max-width: ", ";\n width: ", ";\n & > span:last-child span {\n display: none;\n }\n margin: ", ";\n"]);
112
-
113
- _templateObject4 = function _templateObject4() {
114
- return data;
115
- };
116
-
117
- return data;
118
- }
119
-
120
- function _templateObject3() {
121
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n flex-direction: ", ";\n align-items: ", ";\n border-top: ", " ", " ", ";\n"]);
122
-
123
- _templateObject3 = function _templateObject3() {
124
- return data;
125
- };
126
-
127
- return data;
128
- }
129
-
130
- function _templateObject2() {
131
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n"]);
132
-
133
- _templateObject2 = function _templateObject2() {
134
- return data;
135
- };
136
-
137
- return data;
138
- }
139
-
140
- function _templateObject() {
141
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: ", ";\n background-color: ", ";\n margin-top: ", ";\n width: 100%;\n box-sizing: border-box;\n min-height: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"]);
142
-
143
- _templateObject = function _templateObject() {
144
- return data;
145
- };
146
-
147
- return data;
148
- }
149
-
150
- var DxcFooter = function DxcFooter(_ref) {
151
- var _ref$socialLinks = _ref.socialLinks,
152
- socialLinks = _ref$socialLinks === void 0 ? [] : _ref$socialLinks,
153
- _ref$bottomLinks = _ref.bottomLinks,
154
- bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
155
- _ref$copyright = _ref.copyright,
156
- copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
157
- _ref$logoSrc = _ref.logoSrc,
158
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
159
- children = _ref.children,
160
- padding = _ref.padding,
161
- margin = _ref.margin,
162
- _ref$tabIndex = _ref.tabIndex,
163
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
164
- var ref = (0, _react.useRef)(null);
165
-
166
- var _useState = (0, _react.useState)(),
167
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
168
- refSize = _useState2[0],
169
- setRefSize = _useState2[1];
170
-
171
- var _useState3 = (0, _react.useState)(false),
172
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
173
- isResponsiveTablet = _useState4[0],
174
- setIsResponsiveTablet = _useState4[1];
175
-
176
- var _useState5 = (0, _react.useState)(false),
177
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
178
- isResponsivePhone = _useState6[0],
179
- setIsResponsivePhone = _useState6[1];
180
-
181
- var colorsTheme = (0, _useTheme["default"])();
182
-
183
- var handleResize = function handleResize(refWidth) {
184
- if (ref.current) {
185
- setRefSize(refWidth);
186
-
187
- if (refWidth <= _variables.responsiveSizes.tablet && refWidth > _variables.responsiveSizes.mobileLarge) {
188
- setIsResponsiveTablet(true);
189
- setIsResponsivePhone(false);
190
- } else if (refWidth <= _variables.responsiveSizes.tablet && refWidth <= _variables.responsiveSizes.mobileLarge) {
191
- setIsResponsivePhone(true);
192
- setIsResponsiveTablet(false);
193
- } else {
194
- setIsResponsiveTablet(false);
195
- setIsResponsivePhone(false);
196
- }
197
- }
198
- };
199
-
200
- var handleEventListener = function handleEventListener() {
201
- handleResize(ref.current.offsetWidth);
202
- };
203
-
204
- (0, _react.useEffect)(function () {
205
- window.addEventListener("resize", handleEventListener);
206
- handleResize(ref.current.offsetWidth);
207
- return function () {
208
- window.removeEventListener("resize", handleEventListener);
209
- };
210
- }, []);
211
- var socialLink = socialLinks.map(function (link, index) {
212
- return _react["default"].createElement(SocialAnchor, {
213
- tabIndex: tabIndex,
214
- key: "social".concat(index).concat(link.href),
215
- index: index,
216
- href: link && link.href ? link.href : ""
217
- }, link.logo ? _react["default"].createElement(SocialIconContainer, null, (0, _typeof2["default"])(link.logo) === "object" ? link.logo : _react["default"].createElement(link.logo)) : link && link.logoSrc && _react["default"].createElement(SocialIcon, {
218
- src: link.logoSrc
219
- }));
220
- });
221
- var bottomLink = bottomLinks.map(function (link, index) {
222
- return _react["default"].createElement("span", {
223
- key: "bottom".concat(index).concat(link.text)
224
- }, _react["default"].createElement(BottomLink, {
225
- tabIndex: tabIndex,
226
- href: link && link.href ? link.href : ""
227
- }, link && link.text ? link.text : ""), _react["default"].createElement(Point, {
228
- index: index
229
- }, "\xB7"));
230
- });
231
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
232
- theme: colorsTheme.footer
233
- }, _react["default"].createElement(FooterContainer, {
234
- margin: margin,
235
- refSize: refSize,
236
- ref: ref
237
- }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
238
- logoSrc: logoSrc,
239
- src: logoSrc === "default" ? colorsTheme.footer.logo : logoSrc
240
- }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
241
- className: "footerFooter",
242
- refSize: refSize
243
- }, _react["default"].createElement(BottomLinks, {
244
- refSize: refSize
245
- }, bottomLink), _react["default"].createElement(Copyright, {
246
- refSize: refSize
247
- }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && _react["default"].createElement("div", null, _react["default"].createElement(ChildComponents, {
248
- padding: padding
249
- }, children), _react["default"].createElement(FooterFooter, {
250
- className: "footerFooter"
251
- }, _react["default"].createElement(BottomLinks, {
252
- refSize: refSize
253
- }, bottomLink), _react["default"].createElement(Copyright, {
254
- refSize: refSize
255
- }, copyright)))));
256
- };
257
-
258
- var FooterContainer = _styledComponents["default"].footer(_templateObject(), function (props) {
259
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "24px 36px 24px 36px";
260
- }, function (props) {
261
- return props.theme.backgroundColor;
262
- }, function (props) {
263
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
264
- }, function (props) {
265
- return props.theme.minHeight;
266
- }, function (props) {
267
- return props.theme.fontColorBase;
268
- });
269
-
270
- var FooterHeader = _styledComponents["default"].div(_templateObject2());
271
-
272
- var FooterFooter = _styledComponents["default"].div(_templateObject3(), function (props) {
273
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "column" : "row";
274
- }, function (props) {
275
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
276
- }, function (props) {
277
- return props.theme.bottomLinksDividerThickness;
278
- }, function (props) {
279
- return props.theme.bottomLinksDividerStyle;
280
- }, function (props) {
281
- return props.theme.bottomLinksDividerColor;
282
- });
283
-
284
- var BottomLinks = _styledComponents["default"].div(_templateObject4(), function (props) {
285
- return props.theme.bottomLinksDividerSpacing;
286
- }, function (props) {
287
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "60%";
288
- }, function (props) {
289
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
290
- }, function (props) {
291
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "40px 0 40px 0" : "";
292
- });
293
-
294
- var ChildComponents = _styledComponents["default"].div(_templateObject5(), function (props) {
295
- return props.theme.customContentFontFamily;
296
- }, function (props) {
297
- return props.theme.customContentFontSize;
298
- }, function (props) {
299
- return props.theme.customContentFontStyle;
300
- }, function (props) {
301
- return props.theme.customContentFontWeight;
302
- }, function (props) {
303
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
304
- }, function (props) {
305
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
306
- }, function (props) {
307
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
308
- }, function (props) {
309
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
310
- }, function (props) {
311
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
312
- }, function (props) {
313
- return props.theme.customContentFontColor;
314
- });
315
-
316
- var Copyright = _styledComponents["default"].div(_templateObject6(), function (props) {
317
- return props.theme.copyrightFontFamily;
318
- }, function (props) {
319
- return props.theme.copyrightFontSize;
320
- }, function (props) {
321
- return props.theme.copyrightFontStyle;
322
- }, function (props) {
323
- return props.theme.copyrightFontWeight;
324
- }, function (props) {
325
- return props.theme.copyrightFontColor;
326
- }, function (props) {
327
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "40%";
328
- }, function (props) {
329
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
330
- }, function (props) {
331
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "right";
332
- }, function (props) {
333
- return props.theme.bottomLinksDividerSpacing;
334
- });
335
-
336
- var LogoIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
337
- return props.theme.logoHeight;
338
- }, function (props) {
339
- return props.theme.logoWidth;
340
- });
341
-
342
- var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
343
- return props.index === 0 ? "0px" : props.theme.socialIconsGutter;
344
- });
345
-
346
- var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
347
- return props.theme.socialIconSize;
348
- }, function (props) {
349
- return props.theme.socialIconSize;
350
- }, function (props) {
351
- return props.theme.fontColorBase;
352
- });
353
-
354
- var SocialIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
355
- return props.theme.socialIconSize;
356
- }, function (props) {
357
- return props.theme.socialIconSize;
358
- }, function (props) {
359
- return props.theme.fontColorBase;
360
- });
361
-
362
- var Point = _styledComponents["default"].span(_templateObject11(), function (props) {
363
- return props.theme.bottomLinksFontColor;
364
- });
365
-
366
- var BottomLink = _styledComponents["default"].a(_templateObject12(), function (props) {
367
- return props.theme.bottomLinksTextDecoration;
368
- }, function (props) {
369
- return props.theme.bottomLinksFontColor || props.theme.fontColorBase;
370
- }, function (props) {
371
- return props.theme.bottomLinksFontFamily;
372
- }, function (props) {
373
- return props.theme.bottomLinksFontSize;
374
- }, function (props) {
375
- return props.theme.bottomLinksFontStyle;
376
- }, function (props) {
377
- return props.theme.bottomLinksFontWeight;
378
- });
379
-
380
- DxcFooter.propTypes = {
381
- logoSrc: _propTypes["default"].string,
382
- socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
383
- logo: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
384
- logoSrc: _propTypes["default"].string.isRequired,
385
- href: _propTypes["default"].string
386
- })),
387
- bottomLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
388
- text: _propTypes["default"].string.isRequired,
389
- href: _propTypes["default"].string
390
- })),
391
- copyright: _propTypes["default"].string,
392
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
393
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
394
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
395
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
396
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
397
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
398
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
399
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
400
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
401
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
402
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
403
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
404
- tabIndex: _propTypes["default"].number
405
- };
406
- var _default = DxcFooter;
407
- exports["default"] = _default;
@@ -1,94 +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("@storybook/react");
8
-
9
- var _addonActions = require("@storybook/addon-actions");
10
-
11
- require("../common/OpenSans.css");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _linkedin = _interopRequireDefault(require("../../.storybook/public/linkedin.svg"));
16
-
17
- var _facebook = _interopRequireDefault(require("../../.storybook/public/facebook.svg"));
18
-
19
- var _twitter = _interopRequireDefault(require("../../.storybook/public/twitter.svg"));
20
-
21
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
22
-
23
- var _readme = _interopRequireDefault(require("./readme.md"));
24
-
25
- var _Footer = _interopRequireDefault(require("./Footer"));
26
-
27
- var social = [{
28
- href: "https://www.linkedin.com/company/dxctechnology",
29
- logoSrc: _linkedin["default"]
30
- }, {
31
- href: "https://twitter.com/dxctechnology",
32
- logoSrc: _twitter["default"]
33
- }, {
34
- href: "https://www.facebook.com/DXCTechnology/",
35
- logoSrc: _facebook["default"]
36
- }];
37
- var bottom = [{
38
- href: "https://www.linkedin.com/company/dxctechnology",
39
- text: "Linkedin"
40
- }, {
41
- href: "https://twitter.com/dxctechnology",
42
- text: "Twitter"
43
- }, {
44
- href: "https://www.facebook.com/DXCTechnology/",
45
- text: "Facebook"
46
- }];
47
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Component", function () {
48
- return _react["default"].createElement("div", null, _react["default"].createElement(_Footer["default"], {
49
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
50
- bottomLinks: bottom,
51
- socialLinks: social
52
- }), _react["default"].createElement("div", {
53
- style: {
54
- marginTop: "20px"
55
- }
56
- }, _react["default"].createElement(_Footer["default"], {
57
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
58
- bottomLinks: bottom,
59
- socialLinks: social
60
- }, _react["default"].createElement(_InputText["default"], {
61
- assistiveText: "text input component",
62
- label: "Footer Child",
63
- theme: "dark"
64
- }), _react["default"].createElement(_InputText["default"], {
65
- assistiveText: "text input component",
66
- label: "Footer Child",
67
- theme: "dark"
68
- }), _react["default"].createElement(_InputText["default"], {
69
- assistiveText: "text input component",
70
- label: "Footer Child",
71
- theme: "dark"
72
- }), _react["default"].createElement(_InputText["default"], {
73
- assistiveText: "text input component",
74
- label: "Footer Child",
75
- theme: "dark"
76
- }))));
77
- }, {
78
- notes: {
79
- markdown: _readme["default"]
80
- }
81
- });
82
-
83
- var knobProps = function knobProps() {
84
- return {};
85
- };
86
-
87
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Knobs example", function () {
88
- var props = knobProps();
89
- return _react["default"].createElement("div", null);
90
- }, {
91
- notes: {
92
- markdown: _readme["default"]
93
- }
94
- });
@@ -1,15 +0,0 @@
1
- <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
2
- <g id="g12">
3
- <path id="path14" d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5" transform="translate(-68.528 65.45)" fill="#fff"/>
4
- <path id="path16" d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96" transform="translate(-77.56 65.45)" fill="#fff"/>
5
- <path id="path18" 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" transform="translate(-86.019 65.583)" fill="#fff"/>
6
- <path id="path20" d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594" transform="translate(-95.903 65.45)" fill="#fff"/>
7
- <path id="path22" d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058" transform="translate(-105.869 65.45)" fill="#fff"/>
8
- <path id="path24" 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" transform="translate(-115.631 65.583)" fill="#fff"/>
9
- <path id="path26" d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786" transform="translate(-126.654 65.45)" fill="#fff"/>
10
- <path id="path28" 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" transform="translate(-135.016 65.583)" fill="#fff"/>
11
- <path id="path30" 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" transform="translate(-145.284 65.583)" fill="#fff"/>
12
- <path id="path32" 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" transform="translate(-154.162 65.45)" fill="#fff"/>
13
- <path id="path34" 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" transform="translate(-21.08 69.298)" fill="#fff"/>
14
- </g>
15
- </svg>
@@ -1,41 +0,0 @@
1
- # DXC Footer Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>logoSrc: string</td>
13
- <td></td>
14
- <td>The path of an icon to replace the theme logo.</td>
15
- </tr>
16
- <tr>
17
- <td>socialLinks: object[]</td>
18
- <td><code>[]</code></td>
19
- <td>An array of objects representing the links that will be rendered at the bottom part of the footer. Each object has the following properties:
20
- <ul>
21
- <li><b>logoSrc</b>: The path of an icon for the link</li>
22
- <li><b>href</b>: URL of the page the link goes to</li>
23
- </ul>
24
- </td>
25
- </tr>
26
- <tr>
27
- <td>bottomLinks: object[]</td>
28
- <td><code>[]</code></td>
29
- <td>An array of objects representing the incon links that will be rendered at the top-right side of the footer. Each object has the following properties:
30
- <ul>
31
- <li><b>text</b>: Text for the link</li>
32
- <li><b>href</b>: URL of the page the link goes to</li>
33
- </ul>
34
- </td>
35
- </tr>
36
- <tr>
37
- <td>copyright: string</td>
38
- <td></td>
39
- <td>The text that will be displayed as copyright disclaimer.</td>
40
- </tr>
41
- </table>