@dxc-technology/halstack-react 0.0.0-2d619b4 → 0.0.0-2e14697

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 (190) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +3861 -0
  3. package/dist/index.d.ts +3861 -0
  4. package/dist/index.js +13814 -0
  5. package/dist/index.mjs +13727 -0
  6. package/package.json +93 -68
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -240
  10. package/dist/accordion/Accordion.js +0 -353
  11. package/dist/accordion-group/AccordionGroup.js +0 -186
  12. package/dist/alert/Alert.js +0 -403
  13. package/dist/alert/index.d.ts +0 -51
  14. package/dist/badge/Badge.js +0 -63
  15. package/dist/box/Box.js +0 -156
  16. package/dist/button/Button.js +0 -238
  17. package/dist/card/Card.js +0 -254
  18. package/dist/checkbox/Checkbox.js +0 -300
  19. package/dist/checkbox/Checkbox.stories.js +0 -144
  20. package/dist/checkbox/readme.md +0 -116
  21. package/dist/chip/Chip.js +0 -265
  22. package/dist/common/OpenSans.css +0 -81
  23. package/dist/common/RequiredComponent.js +0 -40
  24. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  34. package/dist/common/utils.js +0 -22
  35. package/dist/common/variables.js +0 -1434
  36. package/dist/date/Date.js +0 -379
  37. package/dist/date/Date.stories.js +0 -205
  38. package/dist/date/readme.md +0 -73
  39. package/dist/dialog/Dialog.js +0 -218
  40. package/dist/dropdown/Dropdown.js +0 -544
  41. package/dist/file-input/FileInput.js +0 -641
  42. package/dist/file-input/FileItem.js +0 -263
  43. package/dist/footer/Footer.js +0 -395
  44. package/dist/footer/Footer.stories.js +0 -94
  45. package/dist/footer/dxc_logo.svg +0 -15
  46. package/dist/footer/readme.md +0 -41
  47. package/dist/header/Header.js +0 -403
  48. package/dist/header/Header.stories.js +0 -176
  49. package/dist/header/close_icon.svg +0 -1
  50. package/dist/header/dxc_logo_black.svg +0 -8
  51. package/dist/header/hamb_menu_black.svg +0 -1
  52. package/dist/header/hamb_menu_white.svg +0 -1
  53. package/dist/header/readme.md +0 -33
  54. package/dist/heading/Heading.js +0 -218
  55. package/dist/input-text/InputText.js +0 -707
  56. package/dist/input-text/InputText.stories.js +0 -209
  57. package/dist/input-text/error.svg +0 -1
  58. package/dist/input-text/readme.md +0 -91
  59. package/dist/layout/ApplicationLayout.js +0 -331
  60. package/dist/layout/facebook.svg +0 -45
  61. package/dist/layout/linkedin.svg +0 -50
  62. package/dist/layout/twitter.svg +0 -53
  63. package/dist/link/Link.js +0 -237
  64. package/dist/link/readme.md +0 -51
  65. package/dist/main.d.ts +0 -6
  66. package/dist/main.js +0 -359
  67. package/dist/new-date/NewDate.js +0 -400
  68. package/dist/new-date/index.d.ts +0 -86
  69. package/dist/new-input-text/NewInputText.js +0 -977
  70. package/dist/new-input-text/index.d.ts +0 -120
  71. package/dist/new-textarea/NewTextarea.js +0 -365
  72. package/dist/new-textarea/index.d.ts +0 -101
  73. package/dist/number/Number.js +0 -138
  74. package/dist/number/NumberContext.js +0 -16
  75. package/dist/number/index.d.ts +0 -95
  76. package/dist/paginator/Paginator.js +0 -289
  77. package/dist/paginator/images/next.svg +0 -3
  78. package/dist/paginator/images/nextPage.svg +0 -3
  79. package/dist/paginator/images/previous.svg +0 -3
  80. package/dist/paginator/images/previousPage.svg +0 -3
  81. package/dist/paginator/readme.md +0 -50
  82. package/dist/password/Password.js +0 -200
  83. package/dist/password/index.d.ts +0 -80
  84. package/dist/password/styles.css +0 -3
  85. package/dist/progress-bar/ProgressBar.js +0 -242
  86. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  87. package/dist/progress-bar/readme.md +0 -63
  88. package/dist/radio/Radio.js +0 -209
  89. package/dist/radio/Radio.stories.js +0 -166
  90. package/dist/radio/readme.md +0 -70
  91. package/dist/resultsetTable/ResultsetTable.js +0 -358
  92. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  93. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  94. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  95. package/dist/select/Select.js +0 -549
  96. package/dist/sidenav/Sidenav.js +0 -179
  97. package/dist/slider/Slider.js +0 -319
  98. package/dist/slider/Slider.stories.js +0 -241
  99. package/dist/slider/readme.md +0 -64
  100. package/dist/spinner/Spinner.js +0 -381
  101. package/dist/spinner/Spinner.stories.js +0 -183
  102. package/dist/spinner/readme.md +0 -65
  103. package/dist/switch/Switch.js +0 -222
  104. package/dist/switch/Switch.stories.js +0 -134
  105. package/dist/switch/readme.md +0 -133
  106. package/dist/table/Table.js +0 -132
  107. package/dist/tabs/Tabs.js +0 -343
  108. package/dist/tabs/Tabs.stories.js +0 -130
  109. package/dist/tabs/readme.md +0 -78
  110. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  111. package/dist/tabs-for-sections/readme.md +0 -78
  112. package/dist/tag/Tag.js +0 -282
  113. package/dist/textarea/Textarea.js +0 -264
  114. package/dist/toggle/Toggle.js +0 -220
  115. package/dist/toggle/Toggle.stories.js +0 -297
  116. package/dist/toggle/readme.md +0 -80
  117. package/dist/toggle-group/ToggleGroup.js +0 -223
  118. package/dist/upload/Upload.js +0 -205
  119. package/dist/upload/Upload.stories.js +0 -72
  120. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  121. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  122. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  123. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  124. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  125. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  126. package/dist/upload/file-upload/FileToUpload.js +0 -184
  127. package/dist/upload/file-upload/audio-icon.svg +0 -4
  128. package/dist/upload/file-upload/close.svg +0 -4
  129. package/dist/upload/file-upload/file-icon.svg +0 -4
  130. package/dist/upload/file-upload/video-icon.svg +0 -4
  131. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  132. package/dist/upload/readme.md +0 -37
  133. package/dist/upload/transaction/Transaction.js +0 -175
  134. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  135. package/dist/upload/transaction/audio-icon.svg +0 -4
  136. package/dist/upload/transaction/error-icon.svg +0 -4
  137. package/dist/upload/transaction/file-icon-err.svg +0 -4
  138. package/dist/upload/transaction/file-icon.svg +0 -4
  139. package/dist/upload/transaction/image-icon-err.svg +0 -4
  140. package/dist/upload/transaction/image-icon.svg +0 -4
  141. package/dist/upload/transaction/success-icon.svg +0 -4
  142. package/dist/upload/transaction/video-icon-err.svg +0 -4
  143. package/dist/upload/transaction/video-icon.svg +0 -4
  144. package/dist/upload/transactions/Transactions.js +0 -138
  145. package/dist/useTheme.js +0 -22
  146. package/dist/wizard/Wizard.js +0 -411
  147. package/dist/wizard/invalid_icon.svg +0 -5
  148. package/dist/wizard/valid_icon.svg +0 -5
  149. package/dist/wizard/validation-wrong.svg +0 -6
  150. package/test/Accordion.test.js +0 -33
  151. package/test/AccordionGroup.test.js +0 -125
  152. package/test/Alert.test.js +0 -53
  153. package/test/Box.test.js +0 -10
  154. package/test/Button.test.js +0 -18
  155. package/test/Card.test.js +0 -30
  156. package/test/Checkbox.test.js +0 -45
  157. package/test/Chip.test.js +0 -25
  158. package/test/Date.test.js +0 -393
  159. package/test/Dialog.test.js +0 -23
  160. package/test/Dropdown.test.js +0 -145
  161. package/test/FileInput.test.js +0 -39
  162. package/test/Footer.test.js +0 -99
  163. package/test/Header.test.js +0 -39
  164. package/test/Heading.test.js +0 -35
  165. package/test/InputText.test.js +0 -240
  166. package/test/Link.test.js +0 -43
  167. package/test/NewDate.test.js +0 -203
  168. package/test/NewInputText.test.js +0 -866
  169. package/test/NewTextarea.test.js +0 -252
  170. package/test/Number.test.js +0 -241
  171. package/test/Paginator.test.js +0 -177
  172. package/test/Password.test.js +0 -76
  173. package/test/ProgressBar.test.js +0 -35
  174. package/test/Radio.test.js +0 -37
  175. package/test/ResultsetTable.test.js +0 -329
  176. package/test/Select.test.js +0 -212
  177. package/test/Sidenav.test.js +0 -45
  178. package/test/Slider.test.js +0 -82
  179. package/test/Spinner.test.js +0 -32
  180. package/test/Switch.test.js +0 -45
  181. package/test/Table.test.js +0 -36
  182. package/test/Tabs.test.js +0 -109
  183. package/test/TabsForSections.test.js +0 -34
  184. package/test/Tag.test.js +0 -32
  185. package/test/TextArea.test.js +0 -52
  186. package/test/ToggleGroup.test.js +0 -81
  187. package/test/Upload.test.js +0 -60
  188. package/test/Wizard.test.js +0 -130
  189. package/test/mocks/pngMock.js +0 -1
  190. package/test/mocks/svgMock.js +0 -1
@@ -1,263 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireDefault(require("react"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
21
-
22
- function _templateObject10() {
23
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
24
-
25
- _templateObject10 = function _templateObject10() {
26
- return data;
27
- };
28
-
29
- return data;
30
- }
31
-
32
- function _templateObject9() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 4px;\n margin-left: 4px;\n background-color: transparent;\n padding: 3px;\n cursor: pointer;\n svg {\n line-height: 18px;\n }\n"]);
34
-
35
- _templateObject9 = function _templateObject9() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject8() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n padding: 3px;\n height: 18px;\n width: 18px;\n color: #d0011b;\n"]);
44
-
45
- _templateObject8 = function _templateObject8() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject7() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n width: ", ";\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
54
-
55
- _templateObject7 = function _templateObject7() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject6() {
63
- var data = (0, _taggedTemplateLiteral2["default"])([""]);
64
-
65
- _templateObject6 = function _templateObject6() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject5() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 12px;\n background-color: ", ";\n width: 48px;\n height: 48px;\n border-radius: 2px;\n color: ", ";\n"]);
74
-
75
- _templateObject5 = function _templateObject5() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject4() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 48px;\n height: 48px;\n object-fit: contain;\n margin-right: 12px;\n border-radius: 2px;\n"]);
84
-
85
- _templateObject4 = function _templateObject4() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- function _templateObject3() {
93
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n"]);
94
-
95
- _templateObject3 = function _templateObject3() {
96
- return data;
97
- };
98
-
99
- return data;
100
- }
101
-
102
- function _templateObject2() {
103
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n"]);
104
-
105
- _templateObject2 = function _templateObject2() {
106
- return data;
107
- };
108
-
109
- return data;
110
- }
111
-
112
- function _templateObject() {
113
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: row;\n padding: ", ";\n background-color: ", ";\n border-radius: ", ";\n width: ", ";\n height: ", ";\n border: ", "\n ", ";\n"]);
114
-
115
- _templateObject = function _templateObject() {
116
- return data;
117
- };
118
-
119
- return data;
120
- }
121
-
122
- var deleteIcon = _react["default"].createElement("svg", {
123
- xmlns: "http://www.w3.org/2000/svg",
124
- width: "24",
125
- height: "24",
126
- viewBox: "0 0 24 24",
127
- fill: "currentColor"
128
- }, _react["default"].createElement("path", {
129
- d: "M0 0h24v24H0V0z",
130
- fill: "none"
131
- }), _react["default"].createElement("path", {
132
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
133
- }));
134
-
135
- var errorIcon = _react["default"].createElement("svg", {
136
- xmlns: "http://www.w3.org/2000/svg",
137
- height: "24px",
138
- viewBox: "0 0 24 24",
139
- width: "24px",
140
- fill: "currentColor"
141
- }, _react["default"].createElement("path", {
142
- d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
143
- }));
144
-
145
- var FileItem = function FileItem(_ref) {
146
- var mode = _ref.mode,
147
- multiple = _ref.multiple,
148
- _ref$name = _ref.name,
149
- name = _ref$name === void 0 ? "" : _ref$name,
150
- _ref$error = _ref.error,
151
- error = _ref$error === void 0 ? "" : _ref$error,
152
- showPreview = _ref.showPreview,
153
- preview = _ref.preview,
154
- type = _ref.type,
155
- numFiles = _ref.numFiles,
156
- onDelete = _ref.onDelete;
157
- var colorsTheme = (0, _useTheme["default"])();
158
- var isImage = type.includes("image");
159
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
160
- theme: colorsTheme.fileInput
161
- }, _react["default"].createElement(Container, {
162
- mode: mode,
163
- multiple: multiple,
164
- error: error,
165
- showPreview: showPreview,
166
- numFiles: numFiles
167
- }, showPreview && (isImage ? _react["default"].createElement(ImagePreview, {
168
- src: preview
169
- }) : _react["default"].createElement(IconPreviewContainer, {
170
- error: error
171
- }, _react["default"].createElement(IconPreview, {
172
- error: error
173
- }, preview))), _react["default"].createElement(FileItemContent, null, _react["default"].createElement(FileItemContainer, null, _react["default"].createElement(FileName, {
174
- mode: mode,
175
- multiple: multiple,
176
- error: error,
177
- showPreview: showPreview,
178
- numFiles: numFiles
179
- }, name), error && _react["default"].createElement(ErrorIcon, {
180
- "aria-label": "Error"
181
- }, errorIcon), _react["default"].createElement(DeleteIcon, {
182
- onClick: function onClick() {
183
- return onDelete(name);
184
- },
185
- "aria-label": "Remove"
186
- }, deleteIcon)), error && (multiple || numFiles > 1) && _react["default"].createElement(ErrorMessage, null, error))));
187
- };
188
-
189
- var Container = _styledComponents["default"].div(_templateObject(), function (props) {
190
- return props.showPreview ? "8px" : "8px 8px 8px 16px";
191
- }, function (props) {
192
- return props.error && props.theme.errorFileItemBackgroundColor;
193
- }, function (props) {
194
- return props.theme.fileItemBorderRadius;
195
- }, function (props) {
196
- return props.mode === "file" && !props.multiple && props.numFiles === 1 ? "calc(230px - 26px)" : !props.showPreview ? "calc(320px - 26px)" : props.showPreview && "calc(320px - 18px)";
197
- }, function (props) {
198
- return props.mode === "file" && !props.multiple && props.numFiles === 1 || !props.showPreview && !props.error ? "calc(40px - 18px)" : !props.showPreview && props.error ? "calc(59px - 18px)" : "calc(64px - 18px)";
199
- }, function (props) {
200
- return props.error ? props.theme.errorFileItemBorderColor : props.theme.fileItemBorderColor;
201
- }, function (props) {
202
- return props.theme.fileItemBorder;
203
- });
204
-
205
- var FileItemContent = _styledComponents["default"].div(_templateObject2());
206
-
207
- var FileItemContainer = _styledComponents["default"].div(_templateObject3());
208
-
209
- var ImagePreview = _styledComponents["default"].img(_templateObject4());
210
-
211
- var IconPreviewContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
212
- return props.error ? "#ffccd3" : "#f2f2f2";
213
- }, function (props) {
214
- return props.error ? "#d0011b" : "#808080";
215
- });
216
-
217
- var IconPreview = _styledComponents["default"].div(_templateObject6());
218
-
219
- var FileName = _styledComponents["default"].span(_templateObject7(), function (props) {
220
- return props.theme.fileNameFontColor;
221
- }, function (props) {
222
- return props.mode === "file" && !props.multiple && props.error && props.numFiles === 1 ? "calc(230px - 76px)" : props.mode === "file" && !props.multiple && !props.error && props.numFiles === 1 ? "calc(230px - 50px)" : !props.showPreview && !props.error ? "calc(320px - 52px)" : !props.showPreview && props.error ? "calc(320px - 76px)" : props.showPreview && props.error ? "calc(320px - 128px)" : props.showPreview && !props.error && "calc(320px - 102px)";
223
- }, function (props) {
224
- return props.theme.fileItemFontFamily;
225
- }, function (props) {
226
- return props.theme.fileItemFontSize;
227
- }, function (props) {
228
- return props.theme.fileItemFontWeight;
229
- }, function (props) {
230
- return props.theme.fileItemLineHeight;
231
- });
232
-
233
- var ErrorIcon = _styledComponents["default"].span(_templateObject8());
234
-
235
- var DeleteIcon = _styledComponents["default"].button(_templateObject9(), function (props) {
236
- return props.theme.fontFamily;
237
- });
238
-
239
- var ErrorMessage = _styledComponents["default"].span(_templateObject10(), function (props) {
240
- return props.theme.errorMessageFontColor;
241
- }, function (props) {
242
- return props.theme.errorMessageFontFamily;
243
- }, function (props) {
244
- return props.theme.errorMessageFontSize;
245
- }, function (props) {
246
- return props.theme.errorMessageFontWeight;
247
- }, function (props) {
248
- return props.theme.errorMessageLineHeight;
249
- });
250
-
251
- FileItem.propTypes = {
252
- mode: _propTypes["default"].string,
253
- multiple: _propTypes["default"].bool,
254
- name: _propTypes["default"].string,
255
- type: _propTypes["default"].string,
256
- showPreview: _propTypes["default"]["boolean"],
257
- numFiles: _propTypes["default"].number,
258
- preview: _propTypes["default"].string,
259
- error: _propTypes["default"].string,
260
- onDelete: _propTypes["default"].func
261
- };
262
- var _default = FileItem;
263
- exports["default"] = _default;
@@ -1,395 +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
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
31
-
32
- function _templateObject12() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
34
-
35
- _templateObject12 = function _templateObject12() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject11() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px 10px;\n color: ", ";\n"]);
44
-
45
- _templateObject11 = function _templateObject11() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject10() {
53
- 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"]);
54
-
55
- _templateObject10 = function _templateObject10() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject9() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: ", ";\n width: ", ";\n fill: ", ";\n }\n"]);
64
-
65
- _templateObject9 = function _templateObject9() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- function _templateObject8() {
73
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n margin-left: ", ";\n }\n"]);
74
-
75
- _templateObject8 = function _templateObject8() {
76
- return data;
77
- };
78
-
79
- return data;
80
- }
81
-
82
- function _templateObject7() {
83
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: ", ";\n width: ", ";\n"]);
84
-
85
- _templateObject7 = function _templateObject7() {
86
- return data;
87
- };
88
-
89
- return data;
90
- }
91
-
92
- function _templateObject6() {
93
- 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"]);
94
-
95
- _templateObject6 = function _templateObject6() {
96
- return data;
97
- };
98
-
99
- return data;
100
- }
101
-
102
- function _templateObject5() {
103
- 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"]);
104
-
105
- _templateObject5 = function _templateObject5() {
106
- return data;
107
- };
108
-
109
- return data;
110
- }
111
-
112
- function _templateObject4() {
113
- 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"]);
114
-
115
- _templateObject4 = function _templateObject4() {
116
- return data;
117
- };
118
-
119
- return data;
120
- }
121
-
122
- function _templateObject3() {
123
- 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"]);
124
-
125
- _templateObject3 = function _templateObject3() {
126
- return data;
127
- };
128
-
129
- return data;
130
- }
131
-
132
- function _templateObject2() {
133
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n"]);
134
-
135
- _templateObject2 = function _templateObject2() {
136
- return data;
137
- };
138
-
139
- return data;
140
- }
141
-
142
- function _templateObject() {
143
- 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"]);
144
-
145
- _templateObject = function _templateObject() {
146
- return data;
147
- };
148
-
149
- return data;
150
- }
151
-
152
- var DxcFooter = function DxcFooter(_ref) {
153
- var _ref$socialLinks = _ref.socialLinks,
154
- socialLinks = _ref$socialLinks === void 0 ? [] : _ref$socialLinks,
155
- _ref$bottomLinks = _ref.bottomLinks,
156
- bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
157
- _ref$copyright = _ref.copyright,
158
- copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
159
- _ref$logoSrc = _ref.logoSrc,
160
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
161
- children = _ref.children,
162
- padding = _ref.padding,
163
- margin = _ref.margin,
164
- _ref$tabIndex = _ref.tabIndex,
165
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
166
- var ref = (0, _react.useRef)(null);
167
-
168
- var _useState = (0, _react.useState)(),
169
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
170
- refSize = _useState2[0],
171
- setRefSize = _useState2[1];
172
-
173
- var _useState3 = (0, _react.useState)(false),
174
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
175
- isResponsiveTablet = _useState4[0],
176
- setIsResponsiveTablet = _useState4[1];
177
-
178
- var _useState5 = (0, _react.useState)(false),
179
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
180
- isResponsivePhone = _useState6[0],
181
- setIsResponsivePhone = _useState6[1];
182
-
183
- var colorsTheme = (0, _useTheme["default"])();
184
-
185
- var handleResize = function handleResize(refWidth) {
186
- if (ref.current) {
187
- setRefSize(refWidth);
188
-
189
- if (refWidth <= _variables.responsiveSizes.tablet && refWidth > _variables.responsiveSizes.mobileLarge) {
190
- setIsResponsiveTablet(true);
191
- setIsResponsivePhone(false);
192
- } else if (refWidth <= _variables.responsiveSizes.tablet && refWidth <= _variables.responsiveSizes.mobileLarge) {
193
- setIsResponsivePhone(true);
194
- setIsResponsiveTablet(false);
195
- } else {
196
- setIsResponsiveTablet(false);
197
- setIsResponsivePhone(false);
198
- }
199
- }
200
- };
201
-
202
- var handleEventListener = function handleEventListener() {
203
- handleResize(ref.current.offsetWidth);
204
- };
205
-
206
- (0, _react.useEffect)(function () {
207
- window.addEventListener("resize", handleEventListener);
208
- handleResize(ref.current.offsetWidth);
209
- return function () {
210
- window.removeEventListener("resize", handleEventListener);
211
- };
212
- }, []);
213
- var socialLink = socialLinks.map(function (link, index) {
214
- return _react["default"].createElement(SocialAnchor, {
215
- tabIndex: tabIndex,
216
- key: "social".concat(index).concat(link.href),
217
- index: index,
218
- href: link && link.href ? link.href : ""
219
- }, 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, {
220
- src: link.logoSrc
221
- }));
222
- });
223
- var bottomLink = bottomLinks.map(function (link, index) {
224
- return _react["default"].createElement("span", {
225
- key: "bottom".concat(index).concat(link.text)
226
- }, _react["default"].createElement(BottomLink, {
227
- tabIndex: tabIndex,
228
- href: link && link.href ? link.href : ""
229
- }, link && link.text ? link.text : ""), _react["default"].createElement(Point, {
230
- index: index
231
- }, "\xB7"));
232
- });
233
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
234
- theme: colorsTheme.footer
235
- }, _react["default"].createElement(FooterContainer, {
236
- margin: margin,
237
- refSize: refSize,
238
- ref: ref
239
- }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
240
- logoSrc: logoSrc,
241
- src: logoSrc === "default" ? colorsTheme.footer.logo : logoSrc
242
- }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
243
- className: "footerFooter",
244
- refSize: refSize
245
- }, _react["default"].createElement(BottomLinks, {
246
- refSize: refSize
247
- }, bottomLink), _react["default"].createElement(Copyright, {
248
- refSize: refSize
249
- }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && _react["default"].createElement("div", null, _react["default"].createElement(ChildComponents, {
250
- padding: padding
251
- }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
252
- color: colorsTheme.footer.backgroundColor
253
- }, children)), _react["default"].createElement(FooterFooter, {
254
- className: "footerFooter"
255
- }, _react["default"].createElement(BottomLinks, {
256
- refSize: refSize
257
- }, bottomLink), _react["default"].createElement(Copyright, {
258
- refSize: refSize
259
- }, copyright)))));
260
- };
261
-
262
- var FooterContainer = _styledComponents["default"].footer(_templateObject(), function (props) {
263
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "24px 36px 24px 36px";
264
- }, function (props) {
265
- return props.theme.backgroundColor;
266
- }, function (props) {
267
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
268
- }, function (props) {
269
- return props.theme.height;
270
- });
271
-
272
- var FooterHeader = _styledComponents["default"].div(_templateObject2());
273
-
274
- var FooterFooter = _styledComponents["default"].div(_templateObject3(), function (props) {
275
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "column" : "row";
276
- }, function (props) {
277
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
278
- }, function (props) {
279
- return "".concat(props.theme.bottomLinksDividerThickness, " ").concat(props.theme.bottomLinksDividerStyle, " ").concat(props.theme.bottomLinksDividerColor);
280
- });
281
-
282
- var BottomLinks = _styledComponents["default"].div(_templateObject4(), function (props) {
283
- return props.theme.bottomLinksDividerSpacing;
284
- }, function (props) {
285
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "60%";
286
- }, function (props) {
287
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
288
- }, function (props) {
289
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "40px 0 40px 0" : "";
290
- });
291
-
292
- var ChildComponents = _styledComponents["default"].div(_templateObject5(), function (props) {
293
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
294
- }, function (props) {
295
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
296
- }, function (props) {
297
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
298
- }, function (props) {
299
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
300
- }, function (props) {
301
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
302
- });
303
-
304
- var Copyright = _styledComponents["default"].div(_templateObject6(), function (props) {
305
- return props.theme.copyrightFontFamily;
306
- }, function (props) {
307
- return props.theme.copyrightFontSize;
308
- }, function (props) {
309
- return props.theme.copyrightFontStyle;
310
- }, function (props) {
311
- return props.theme.copyrightFontWeight;
312
- }, function (props) {
313
- return props.theme.copyrightFontColor;
314
- }, function (props) {
315
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "40%";
316
- }, function (props) {
317
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
318
- }, function (props) {
319
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "right";
320
- }, function (props) {
321
- return props.theme.bottomLinksDividerSpacing;
322
- });
323
-
324
- var LogoIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
325
- return props.theme.logoHeight;
326
- }, function (props) {
327
- return props.theme.logoWidth;
328
- });
329
-
330
- var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
331
- return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
332
- });
333
-
334
- var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
335
- return props.theme.socialLinksSize;
336
- }, function (props) {
337
- return props.theme.socialLinksSize;
338
- }, function (props) {
339
- return props.theme.socialLinksColor;
340
- });
341
-
342
- var SocialIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
343
- return props.theme.socialLinksSize;
344
- }, function (props) {
345
- return props.theme.socialLinksSize;
346
- }, function (props) {
347
- return props.theme.socialLinksColor;
348
- });
349
-
350
- var Point = _styledComponents["default"].span(_templateObject11(), function (props) {
351
- return props.theme.bottomLinksFontColor;
352
- });
353
-
354
- var BottomLink = _styledComponents["default"].a(_templateObject12(), function (props) {
355
- return props.theme.bottomLinksTextDecoration;
356
- }, function (props) {
357
- return props.theme.bottomLinksFontColor;
358
- }, function (props) {
359
- return props.theme.bottomLinksFontFamily;
360
- }, function (props) {
361
- return props.theme.bottomLinksFontSize;
362
- }, function (props) {
363
- return props.theme.bottomLinksFontStyle;
364
- }, function (props) {
365
- return props.theme.bottomLinksFontWeight;
366
- });
367
-
368
- DxcFooter.propTypes = {
369
- logoSrc: _propTypes["default"].string,
370
- socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
371
- logo: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
372
- logoSrc: _propTypes["default"].string.isRequired,
373
- href: _propTypes["default"].string
374
- })),
375
- bottomLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
376
- text: _propTypes["default"].string.isRequired,
377
- href: _propTypes["default"].string
378
- })),
379
- copyright: _propTypes["default"].string,
380
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
381
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
382
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
383
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
384
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
385
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
386
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
387
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
388
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
389
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
390
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
391
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
392
- tabIndex: _propTypes["default"].number
393
- };
394
- var _default = DxcFooter;
395
- exports["default"] = _default;