@dxc-technology/halstack-react 0.0.0-eb2a4cc → 0.0.0-ebb089f

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 (229) hide show
  1. package/README.md +2 -2
  2. package/babel.config.js +5 -2
  3. package/dist/BackgroundColorContext.js +46 -0
  4. package/dist/ThemeContext.js +237 -2
  5. package/dist/V3Select/V3Select.js +549 -0
  6. package/dist/V3Select/index.d.ts +27 -0
  7. package/dist/V3Textarea/V3Textarea.js +264 -0
  8. package/dist/V3Textarea/index.d.ts +27 -0
  9. package/dist/accordion/Accordion.js +170 -81
  10. package/dist/accordion/index.d.ts +28 -0
  11. package/dist/accordion-group/AccordionGroup.js +186 -0
  12. package/dist/accordion-group/index.d.ts +16 -0
  13. package/dist/alert/Alert.js +184 -83
  14. package/dist/alert/index.d.ts +51 -0
  15. package/dist/badge/Badge.js +63 -0
  16. package/dist/box/Box.js +31 -23
  17. package/dist/box/index.d.ts +25 -0
  18. package/dist/button/Button.js +84 -29
  19. package/dist/button/Button.stories.js +14 -211
  20. package/dist/button/index.d.ts +24 -0
  21. package/dist/card/Card.js +72 -35
  22. package/dist/card/index.d.ts +22 -0
  23. package/dist/checkbox/Checkbox.js +107 -32
  24. package/dist/checkbox/index.d.ts +24 -0
  25. package/dist/chip/Chip.js +135 -40
  26. package/dist/chip/index.d.ts +22 -0
  27. package/dist/common/RequiredComponent.js +2 -8
  28. package/dist/common/utils.js +2 -22
  29. package/dist/common/variables.js +1472 -159
  30. package/dist/date/Date.js +81 -59
  31. package/dist/date/index.d.ts +27 -0
  32. package/dist/date-input/DateInput.js +400 -0
  33. package/dist/date-input/index.d.ts +95 -0
  34. package/dist/dialog/Dialog.js +61 -36
  35. package/dist/dialog/index.d.ts +18 -0
  36. package/dist/dropdown/Dropdown.js +226 -94
  37. package/dist/dropdown/index.d.ts +26 -0
  38. package/dist/file-input/FileInput.js +644 -0
  39. package/dist/file-input/FileItem.js +287 -0
  40. package/dist/file-input/index.d.ts +81 -0
  41. package/dist/footer/Footer.js +122 -47
  42. package/dist/footer/Icons.js +77 -0
  43. package/dist/footer/index.d.ts +25 -0
  44. package/dist/header/Header.js +211 -91
  45. package/dist/header/Icons.js +59 -0
  46. package/dist/header/index.d.ts +25 -0
  47. package/dist/heading/Heading.js +93 -22
  48. package/dist/heading/index.d.ts +17 -0
  49. package/dist/input-text/Icons.js +22 -0
  50. package/dist/input-text/InputText.js +290 -104
  51. package/dist/input-text/index.d.ts +36 -0
  52. package/dist/layout/ApplicationLayout.js +327 -0
  53. package/dist/layout/Icons.js +55 -0
  54. package/dist/link/Link.js +136 -35
  55. package/dist/link/index.d.ts +23 -0
  56. package/dist/main.d.ts +40 -0
  57. package/dist/main.js +112 -16
  58. package/dist/number-input/NumberInput.js +136 -0
  59. package/dist/number-input/NumberInputContext.js +16 -0
  60. package/dist/number-input/index.d.ts +113 -0
  61. package/dist/paginator/Icons.js +66 -0
  62. package/dist/paginator/Paginator.js +184 -57
  63. package/dist/paginator/index.d.ts +20 -0
  64. package/dist/password-input/PasswordInput.js +203 -0
  65. package/dist/password-input/index.d.ts +94 -0
  66. package/dist/progress-bar/ProgressBar.js +97 -44
  67. package/dist/progress-bar/index.d.ts +18 -0
  68. package/dist/radio/Radio.js +39 -21
  69. package/dist/radio/index.d.ts +23 -0
  70. package/dist/resultsetTable/ResultsetTable.js +93 -69
  71. package/dist/resultsetTable/index.d.ts +19 -0
  72. package/dist/select/Select.js +957 -262
  73. package/dist/select/index.d.ts +131 -0
  74. package/dist/sidenav/Sidenav.js +87 -125
  75. package/dist/sidenav/index.d.ts +13 -0
  76. package/dist/slider/Slider.js +219 -73
  77. package/dist/slider/index.d.ts +29 -0
  78. package/dist/spinner/Spinner.js +249 -64
  79. package/dist/spinner/index.d.ts +17 -0
  80. package/dist/switch/Switch.js +51 -26
  81. package/dist/switch/index.d.ts +24 -0
  82. package/dist/table/Table.js +63 -15
  83. package/dist/table/index.d.ts +13 -0
  84. package/dist/tabs/Tabs.js +208 -35
  85. package/dist/tabs/index.d.ts +19 -0
  86. package/dist/tag/Tag.js +100 -35
  87. package/dist/tag/index.d.ts +24 -0
  88. package/dist/text-input/TextInput.js +974 -0
  89. package/dist/text-input/index.d.ts +135 -0
  90. package/dist/textarea/Textarea.js +250 -107
  91. package/dist/textarea/index.d.ts +117 -0
  92. package/dist/toggle/Toggle.js +16 -19
  93. package/dist/toggle/index.d.ts +21 -0
  94. package/dist/toggle-group/ToggleGroup.js +327 -0
  95. package/dist/toggle-group/index.d.ts +21 -0
  96. package/dist/upload/Upload.js +13 -8
  97. package/dist/upload/buttons-upload/ButtonsUpload.js +35 -25
  98. package/dist/upload/buttons-upload/Icons.js +40 -0
  99. package/dist/upload/dragAndDropArea/DragAndDropArea.js +84 -37
  100. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  101. package/dist/upload/file-upload/FileToUpload.js +64 -33
  102. package/dist/upload/file-upload/Icons.js +66 -0
  103. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  104. package/dist/upload/index.d.ts +15 -0
  105. package/dist/upload/transaction/Icons.js +160 -0
  106. package/dist/upload/transaction/Transaction.js +42 -49
  107. package/dist/upload/transactions/Transactions.js +38 -20
  108. package/dist/useTheme.js +22 -0
  109. package/dist/wizard/Icons.js +65 -0
  110. package/dist/wizard/Wizard.js +156 -61
  111. package/dist/wizard/index.d.ts +18 -0
  112. package/package.json +26 -14
  113. package/test/AccordionGroup.test.js +125 -0
  114. package/test/Date.test.js +15 -13
  115. package/test/DateInput.test.js +242 -0
  116. package/test/Dropdown.test.js +19 -4
  117. package/test/FileInput.test.js +201 -0
  118. package/test/Footer.test.js +2 -7
  119. package/test/Header.test.js +5 -10
  120. package/test/Heading.test.js +60 -12
  121. package/test/InputText.test.js +31 -28
  122. package/test/Link.test.js +25 -7
  123. package/test/NumberInput.test.js +259 -0
  124. package/test/Paginator.test.js +76 -60
  125. package/test/PasswordInput.test.js +83 -0
  126. package/test/ResultsetTable.test.js +65 -17
  127. package/test/Select.test.js +869 -132
  128. package/test/Sidenav.test.js +22 -64
  129. package/test/Slider.test.js +24 -15
  130. package/test/Spinner.test.js +5 -0
  131. package/test/Tabs.test.js +21 -0
  132. package/test/TextInput.test.js +731 -0
  133. package/test/Textarea.test.js +193 -0
  134. package/test/ToggleGroup.test.js +85 -0
  135. package/test/Upload.test.js +1 -1
  136. package/test/V3Select.test.js +212 -0
  137. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  138. package/dist/accordion/Accordion.stories.js +0 -207
  139. package/dist/accordion/readme.md +0 -96
  140. package/dist/alert/Alert.stories.js +0 -158
  141. package/dist/alert/close.svg +0 -4
  142. package/dist/alert/error.svg +0 -4
  143. package/dist/alert/info.svg +0 -4
  144. package/dist/alert/readme.md +0 -43
  145. package/dist/alert/success.svg +0 -4
  146. package/dist/alert/warning.svg +0 -4
  147. package/dist/button/readme.md +0 -93
  148. package/dist/checkbox/Checkbox.stories.js +0 -144
  149. package/dist/checkbox/readme.md +0 -116
  150. package/dist/common/services/example-service.js +0 -10
  151. package/dist/common/services/example-service.test.js +0 -12
  152. package/dist/date/Date.stories.js +0 -205
  153. package/dist/date/calendar.svg +0 -1
  154. package/dist/date/calendar_dark.svg +0 -1
  155. package/dist/date/readme.md +0 -73
  156. package/dist/dialog/Dialog.stories.js +0 -217
  157. package/dist/dialog/readme.md +0 -32
  158. package/dist/dropdown/Dropdown.stories.js +0 -249
  159. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  160. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  161. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  162. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  163. package/dist/dropdown/readme.md +0 -69
  164. package/dist/footer/Footer.stories.js +0 -94
  165. package/dist/footer/dxc_logo_wht.png +0 -0
  166. package/dist/footer/readme.md +0 -41
  167. package/dist/header/Header.stories.js +0 -176
  168. package/dist/header/close_icon.svg +0 -1
  169. package/dist/header/dxc_logo_black.png +0 -0
  170. package/dist/header/dxc_logo_white.png +0 -0
  171. package/dist/header/hamb_menu_black.svg +0 -1
  172. package/dist/header/hamb_menu_white.svg +0 -1
  173. package/dist/header/readme.md +0 -33
  174. package/dist/input-text/InputText.stories.js +0 -209
  175. package/dist/input-text/error.svg +0 -1
  176. package/dist/input-text/readme.md +0 -91
  177. package/dist/link/readme.md +0 -51
  178. package/dist/paginator/images/next.svg +0 -3
  179. package/dist/paginator/images/nextPage.svg +0 -3
  180. package/dist/paginator/images/previous.svg +0 -3
  181. package/dist/paginator/images/previousPage.svg +0 -3
  182. package/dist/paginator/readme.md +0 -50
  183. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  184. package/dist/progress-bar/readme.md +0 -63
  185. package/dist/radio/Radio.stories.js +0 -166
  186. package/dist/radio/readme.md +0 -70
  187. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  188. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  189. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  190. package/dist/select/Select.stories.js +0 -235
  191. package/dist/select/readme.md +0 -72
  192. package/dist/sidenav/arrow_icon.svg +0 -3
  193. package/dist/slider/Slider.stories.js +0 -241
  194. package/dist/slider/readme.md +0 -64
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/toggle/Toggle.stories.js +0 -297
  204. package/dist/toggle/readme.md +0 -80
  205. package/dist/upload/Upload.stories.js +0 -72
  206. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  207. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  208. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  209. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  210. package/dist/upload/file-upload/audio-icon.svg +0 -4
  211. package/dist/upload/file-upload/close.svg +0 -4
  212. package/dist/upload/file-upload/file-icon.svg +0 -4
  213. package/dist/upload/file-upload/video-icon.svg +0 -4
  214. package/dist/upload/readme.md +0 -37
  215. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  216. package/dist/upload/transaction/audio-icon.svg +0 -4
  217. package/dist/upload/transaction/error-icon.svg +0 -4
  218. package/dist/upload/transaction/file-icon-err.svg +0 -4
  219. package/dist/upload/transaction/file-icon.svg +0 -4
  220. package/dist/upload/transaction/image-icon-err.svg +0 -4
  221. package/dist/upload/transaction/image-icon.svg +0 -4
  222. package/dist/upload/transaction/success-icon.svg +0 -4
  223. package/dist/upload/transaction/video-icon-err.svg +0 -4
  224. package/dist/upload/transaction/video-icon.svg +0 -4
  225. package/dist/wizard/invalid_icon.svg +0 -6
  226. package/dist/wizard/valid_icon.svg +0 -6
  227. package/dist/wizard/validation-wrong.svg +0 -6
  228. package/test/TabsForSections.test.js +0 -34
  229. package/test/Toggle.test.js +0 -43
@@ -11,10 +11,10 @@ exports["default"] = void 0;
11
11
 
12
12
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
13
 
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
14
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
15
 
16
+ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
17
+
18
18
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
19
 
20
20
  var _react = _interopRequireWildcard(require("react"));
@@ -23,18 +23,36 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
23
 
24
24
  var _propTypes = _interopRequireDefault(require("prop-types"));
25
25
 
26
- var _dxc_logo_wht = _interopRequireDefault(require("./dxc_logo_wht.png"));
26
+ var _variables = require("../common/variables.js");
27
27
 
28
- require("../common/OpenSans.css");
28
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
- var _variables = require("../common/variables.js");
30
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
31
+
32
+ var _Icons = _interopRequireDefault(require("./Icons"));
33
+
34
+ function _templateObject13() {
35
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
36
+
37
+ _templateObject13 = function _templateObject13() {
38
+ return data;
39
+ };
40
+
41
+ return data;
42
+ }
31
43
 
32
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
44
+ function _templateObject12() {
45
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px 10px;\n color: ", ";\n"]);
33
46
 
34
- var _utils = require("../common/utils.js");
47
+ _templateObject12 = function _templateObject12() {
48
+ return data;
49
+ };
50
+
51
+ return data;
52
+ }
35
53
 
36
54
  function _templateObject11() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n color: ", ";\n font-size: 12px;\n"]);
55
+ 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"]);
38
56
 
39
57
  _templateObject11 = function _templateObject11() {
40
58
  return data;
@@ -44,7 +62,7 @@ function _templateObject11() {
44
62
  }
45
63
 
46
64
  function _templateObject10() {
47
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px 10px;\n color: ", ";\n"]);
65
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: ", ";\n width: ", ";\n fill: ", ";\n }\n"]);
48
66
 
49
67
  _templateObject10 = function _templateObject10() {
50
68
  return data;
@@ -54,7 +72,7 @@ function _templateObject10() {
54
72
  }
55
73
 
56
74
  function _templateObject9() {
57
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: 25px;\n width: 25px;\n fill: ", ";\n }\n"]);
75
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n margin-left: ", ";\n }\n"]);
58
76
 
59
77
  _templateObject9 = function _templateObject9() {
60
78
  return data;
@@ -64,7 +82,7 @@ function _templateObject9() {
64
82
  }
65
83
 
66
84
  function _templateObject8() {
67
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n margin-left: ", ";\n }\n"]);
85
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: ", ";\n width: ", ";\n"]);
68
86
 
69
87
  _templateObject8 = function _templateObject8() {
70
88
  return data;
@@ -74,7 +92,7 @@ function _templateObject8() {
74
92
  }
75
93
 
76
94
  function _templateObject7() {
77
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 34px;\n width: auto;\n"]);
95
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: ", ";\n width: ", ";\n"]);
78
96
 
79
97
  _templateObject7 = function _templateObject7() {
80
98
  return data;
@@ -84,7 +102,7 @@ function _templateObject7() {
84
102
  }
85
103
 
86
104
  function _templateObject6() {
87
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 12px;\n color: ", ";\n max-width: ", ";\n width: ", ";\n text-align: ", ";\n"]);
105
+ 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"]);
88
106
 
89
107
  _templateObject6 = function _templateObject6() {
90
108
  return data;
@@ -94,7 +112,7 @@ function _templateObject6() {
94
112
  }
95
113
 
96
114
  function _templateObject5() {
97
- var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 15px;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n color: ", ";\n overflow: hidden;\n"]);
115
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 15px;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n overflow: hidden;\n"]);
98
116
 
99
117
  _templateObject5 = function _templateObject5() {
100
118
  return data;
@@ -104,7 +122,7 @@ function _templateObject5() {
104
122
  }
105
123
 
106
124
  function _templateObject4() {
107
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: 6px;\n border-top: 2px solid ", ";\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"]);
125
+ 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"]);
108
126
 
109
127
  _templateObject4 = function _templateObject4() {
110
128
  return data;
@@ -114,7 +132,7 @@ function _templateObject4() {
114
132
  }
115
133
 
116
134
  function _templateObject3() {
117
- 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"]);
135
+ 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"]);
118
136
 
119
137
  _templateObject3 = function _templateObject3() {
120
138
  return data;
@@ -134,7 +152,7 @@ function _templateObject2() {
134
152
  }
135
153
 
136
154
  function _templateObject() {
137
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n padding: ", ";\n font-family: \"Open Sans\", sans-serif;\n background-color: ", ";\n margin-top: ", ";\n }\n"]);
155
+ 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 display: flex;\n flex-direction: column;\n justify-content: space-between;\n"]);
138
156
 
139
157
  _templateObject = function _templateObject() {
140
158
  return data;
@@ -150,11 +168,11 @@ var DxcFooter = function DxcFooter(_ref) {
150
168
  bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
151
169
  _ref$copyright = _ref.copyright,
152
170
  copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
153
- _ref$logoSrc = _ref.logoSrc,
154
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
155
171
  children = _ref.children,
156
172
  padding = _ref.padding,
157
- margin = _ref.margin;
173
+ margin = _ref.margin,
174
+ _ref$tabIndex = _ref.tabIndex,
175
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
158
176
  var ref = (0, _react.useRef)(null);
159
177
 
160
178
  var _useState = (0, _react.useState)(),
@@ -172,10 +190,21 @@ var DxcFooter = function DxcFooter(_ref) {
172
190
  isResponsivePhone = _useState6[0],
173
191
  setIsResponsivePhone = _useState6[1];
174
192
 
175
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
176
- var colorsTheme = (0, _react.useMemo)(function () {
177
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
178
- }, [customTheme]);
193
+ var colorsTheme = (0, _useTheme["default"])();
194
+ var footerLogo = (0, _react.useMemo)(function () {
195
+ if (!colorsTheme.footer.logo) {
196
+ return _Icons["default"];
197
+ }
198
+
199
+ if (typeof colorsTheme.footer.logo === "string") {
200
+ return _react["default"].createElement(LogoImg, {
201
+ alt: "Logo",
202
+ src: colorsTheme.footer.logo
203
+ });
204
+ }
205
+
206
+ return colorsTheme.footer.logo;
207
+ }, [colorsTheme.footer.logo]);
179
208
 
180
209
  var handleResize = function handleResize(refWidth) {
181
210
  if (ref.current) {
@@ -207,10 +236,11 @@ var DxcFooter = function DxcFooter(_ref) {
207
236
  }, []);
208
237
  var socialLink = socialLinks.map(function (link, index) {
209
238
  return _react["default"].createElement(SocialAnchor, {
239
+ tabIndex: tabIndex,
210
240
  key: "social".concat(index).concat(link.href),
211
241
  index: index,
212
242
  href: link && link.href ? link.href : ""
213
- }, link && link.logoSrc && _react["default"].createElement(SocialIcon, {
243
+ }, 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, {
214
244
  src: link.logoSrc
215
245
  }));
216
246
  });
@@ -218,6 +248,7 @@ var DxcFooter = function DxcFooter(_ref) {
218
248
  return _react["default"].createElement("span", {
219
249
  key: "bottom".concat(index).concat(link.text)
220
250
  }, _react["default"].createElement(BottomLink, {
251
+ tabIndex: tabIndex,
221
252
  href: link && link.href ? link.href : ""
222
253
  }, link && link.text ? link.text : ""), _react["default"].createElement(Point, {
223
254
  index: index
@@ -229,10 +260,7 @@ var DxcFooter = function DxcFooter(_ref) {
229
260
  margin: margin,
230
261
  refSize: refSize,
231
262
  ref: ref
232
- }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
233
- logoSrc: logoSrc,
234
- src: logoSrc === "default" ? _dxc_logo_wht["default"] : logoSrc
235
- }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
263
+ }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoContainer, null, footerLogo), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
236
264
  className: "footerFooter",
237
265
  refSize: refSize
238
266
  }, _react["default"].createElement(BottomLinks, {
@@ -241,7 +269,9 @@ var DxcFooter = function DxcFooter(_ref) {
241
269
  refSize: refSize
242
270
  }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && _react["default"].createElement("div", null, _react["default"].createElement(ChildComponents, {
243
271
  padding: padding
244
- }, children), _react["default"].createElement(FooterFooter, {
272
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
273
+ color: colorsTheme.footer.backgroundColor
274
+ }, children)), _react["default"].createElement(FooterFooter, {
245
275
  className: "footerFooter"
246
276
  }, _react["default"].createElement(BottomLinks, {
247
277
  refSize: refSize
@@ -250,12 +280,14 @@ var DxcFooter = function DxcFooter(_ref) {
250
280
  }, copyright)))));
251
281
  };
252
282
 
253
- var FooterContainer = _styledComponents["default"].div(_templateObject(), function (props) {
254
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "20px 60px 20px 20px";
283
+ var FooterContainer = _styledComponents["default"].footer(_templateObject(), function (props) {
284
+ return props.refSize <= _variables.responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "24px 36px 24px 36px";
255
285
  }, function (props) {
256
286
  return props.theme.backgroundColor;
257
287
  }, function (props) {
258
288
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
289
+ }, function (props) {
290
+ return props.theme.height;
259
291
  });
260
292
 
261
293
  var FooterHeader = _styledComponents["default"].div(_templateObject2());
@@ -264,10 +296,12 @@ var FooterFooter = _styledComponents["default"].div(_templateObject3(), function
264
296
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "column" : "row";
265
297
  }, function (props) {
266
298
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
299
+ }, function (props) {
300
+ return "".concat(props.theme.bottomLinksDividerThickness, " ").concat(props.theme.bottomLinksDividerStyle, " ").concat(props.theme.bottomLinksDividerColor);
267
301
  });
268
302
 
269
303
  var BottomLinks = _styledComponents["default"].div(_templateObject4(), function (props) {
270
- return props.theme.lineColor;
304
+ return props.theme.bottomLinksDividerSpacing;
271
305
  }, function (props) {
272
306
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "60%";
273
307
  }, function (props) {
@@ -286,41 +320,81 @@ var ChildComponents = _styledComponents["default"].div(_templateObject5(), funct
286
320
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
287
321
  }, function (props) {
288
322
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
289
- }, function (props) {
290
- return props.theme.fontColor;
291
323
  });
292
324
 
293
325
  var Copyright = _styledComponents["default"].div(_templateObject6(), function (props) {
294
- return props.theme.fontColor;
326
+ return props.theme.copyrightFontFamily;
327
+ }, function (props) {
328
+ return props.theme.copyrightFontSize;
329
+ }, function (props) {
330
+ return props.theme.copyrightFontStyle;
331
+ }, function (props) {
332
+ return props.theme.copyrightFontWeight;
333
+ }, function (props) {
334
+ return props.theme.copyrightFontColor;
295
335
  }, function (props) {
296
336
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "40%";
297
337
  }, function (props) {
298
338
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
299
339
  }, function (props) {
300
340
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "right";
341
+ }, function (props) {
342
+ return props.theme.bottomLinksDividerSpacing;
343
+ });
344
+
345
+ var LogoContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
346
+ return props.theme.logoHeight;
347
+ }, function (props) {
348
+ return props.theme.logoWidth;
349
+ });
350
+
351
+ var LogoImg = _styledComponents["default"].img(_templateObject8(), function (props) {
352
+ return props.theme.logoHeight;
353
+ }, function (props) {
354
+ return props.theme.logoWidth;
301
355
  });
302
356
 
303
- var LogoIcon = _styledComponents["default"].img(_templateObject7());
357
+ var SocialAnchor = _styledComponents["default"].a(_templateObject9(), function (props) {
358
+ return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
359
+ });
304
360
 
305
- var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
306
- return props.index === 0 ? "0px" : "15px";
361
+ var SocialIcon = _styledComponents["default"].img(_templateObject10(), function (props) {
362
+ return props.theme.socialLinksSize;
363
+ }, function (props) {
364
+ return props.theme.socialLinksSize;
365
+ }, function (props) {
366
+ return props.theme.socialLinksColor;
307
367
  });
308
368
 
309
- var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
310
- return props.theme.fontColor;
369
+ var SocialIconContainer = _styledComponents["default"].div(_templateObject11(), function (props) {
370
+ return props.theme.socialLinksSize;
371
+ }, function (props) {
372
+ return props.theme.socialLinksSize;
373
+ }, function (props) {
374
+ return props.theme.socialLinksColor;
311
375
  });
312
376
 
313
- var Point = _styledComponents["default"].span(_templateObject10(), function (props) {
314
- return props.theme.fontColor;
377
+ var Point = _styledComponents["default"].span(_templateObject12(), function (props) {
378
+ return props.theme.bottomLinksFontColor;
315
379
  });
316
380
 
317
- var BottomLink = _styledComponents["default"].a(_templateObject11(), function (props) {
318
- return props.theme.fontColor;
381
+ var BottomLink = _styledComponents["default"].a(_templateObject13(), function (props) {
382
+ return props.theme.bottomLinksTextDecoration;
383
+ }, function (props) {
384
+ return props.theme.bottomLinksFontColor;
385
+ }, function (props) {
386
+ return props.theme.bottomLinksFontFamily;
387
+ }, function (props) {
388
+ return props.theme.bottomLinksFontSize;
389
+ }, function (props) {
390
+ return props.theme.bottomLinksFontStyle;
391
+ }, function (props) {
392
+ return props.theme.bottomLinksFontWeight;
319
393
  });
320
394
 
321
395
  DxcFooter.propTypes = {
322
- logoSrc: _propTypes["default"].string,
323
396
  socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
397
+ logo: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
324
398
  logoSrc: _propTypes["default"].string.isRequired,
325
399
  href: _propTypes["default"].string
326
400
  })),
@@ -340,7 +414,8 @@ DxcFooter.propTypes = {
340
414
  bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
341
415
  left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
342
416
  right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
343
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
417
+ }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
418
+ tabIndex: _propTypes["default"].number
344
419
  };
345
420
  var _default = DxcFooter;
346
421
  exports["default"] = _default;
@@ -0,0 +1,77 @@
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 _react = _interopRequireDefault(require("react"));
11
+
12
+ var _default = _react["default"].createElement("svg", {
13
+ id: "g10",
14
+ xmlns: "http://www.w3.org/2000/svg",
15
+ width: "280.781",
16
+ height: "32",
17
+ viewBox: "0 0 280.781 32"
18
+ }, _react["default"].createElement("title", null, "DXC Logo"), _react["default"].createElement("g", {
19
+ id: "g12"
20
+ }, _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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
+ }), _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["default"] = _default;
@@ -0,0 +1,25 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+ type Padding = {
9
+ top?: Space;
10
+ bottom?: Space;
11
+ left?: Space;
12
+ right?: Space;
13
+ };
14
+
15
+ type Props = {
16
+ socialLinks?: any;
17
+ bottomLinks?: any;
18
+ copyright?: string;
19
+ padding?: Space | Padding;
20
+ margin?: Space | Margin;
21
+ tabIndex?: number;
22
+
23
+ };
24
+
25
+ export default function DxcFooter(props: Props): JSX.Element;