@dxc-technology/halstack-react 0.0.0-2548a8d → 0.0.0-2552d78

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 (195) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6734 -0
  3. package/dist/index.d.ts +6734 -0
  4. package/dist/index.js +14248 -0
  5. package/dist/index.mjs +14159 -0
  6. package/package.json +76 -62
  7. package/babel.config.js +0 -4
  8. package/dist/ThemeContext.js +0 -15
  9. package/dist/accordion/Accordion.js +0 -268
  10. package/dist/accordion/Accordion.stories.js +0 -207
  11. package/dist/accordion/readme.md +0 -96
  12. package/dist/accordion-group/AccordionGroup.js +0 -159
  13. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  14. package/dist/accordion-group/readme.md +0 -70
  15. package/dist/alert/Alert.js +0 -304
  16. package/dist/alert/Alert.stories.js +0 -158
  17. package/dist/alert/close.svg +0 -4
  18. package/dist/alert/error.svg +0 -4
  19. package/dist/alert/info.svg +0 -4
  20. package/dist/alert/readme.md +0 -43
  21. package/dist/alert/success.svg +0 -4
  22. package/dist/alert/warning.svg +0 -4
  23. package/dist/box/Box.js +0 -148
  24. package/dist/button/Button.js +0 -202
  25. package/dist/button/Button.stories.js +0 -224
  26. package/dist/button/readme.md +0 -93
  27. package/dist/card/Card.js +0 -217
  28. package/dist/checkbox/Checkbox.js +0 -240
  29. package/dist/checkbox/Checkbox.stories.js +0 -144
  30. package/dist/checkbox/readme.md +0 -116
  31. package/dist/chip/Chip.js +0 -208
  32. package/dist/common/OpenSans.css +0 -81
  33. package/dist/common/RequiredComponent.js +0 -46
  34. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  35. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  36. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  40. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  41. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  42. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  43. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  44. package/dist/common/services/example-service.js +0 -10
  45. package/dist/common/services/example-service.test.js +0 -12
  46. package/dist/common/utils.js +0 -42
  47. package/dist/common/variables.js +0 -434
  48. package/dist/date/Date.js +0 -356
  49. package/dist/date/Date.stories.js +0 -205
  50. package/dist/date/calendar.svg +0 -1
  51. package/dist/date/calendar_dark.svg +0 -1
  52. package/dist/date/readme.md +0 -73
  53. package/dist/dialog/Dialog.js +0 -197
  54. package/dist/dialog/Dialog.stories.js +0 -217
  55. package/dist/dialog/readme.md +0 -32
  56. package/dist/dropdown/Dropdown.js +0 -449
  57. package/dist/dropdown/Dropdown.stories.js +0 -249
  58. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  59. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  60. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  61. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  62. package/dist/dropdown/readme.md +0 -69
  63. package/dist/footer/Footer.js +0 -371
  64. package/dist/footer/Footer.stories.js +0 -94
  65. package/dist/footer/dxc_logo_wht.png +0 -0
  66. package/dist/footer/readme.md +0 -41
  67. package/dist/header/Header.js +0 -373
  68. package/dist/header/Header.stories.js +0 -176
  69. package/dist/header/close_icon.svg +0 -1
  70. package/dist/header/dxc_logo_black.png +0 -0
  71. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  72. package/dist/header/dxc_logo_white.png +0 -0
  73. package/dist/header/hamb_menu_black.svg +0 -1
  74. package/dist/header/hamb_menu_white.svg +0 -1
  75. package/dist/header/readme.md +0 -33
  76. package/dist/heading/Heading.js +0 -153
  77. package/dist/input-text/InputText.js +0 -570
  78. package/dist/input-text/InputText.stories.js +0 -209
  79. package/dist/input-text/error.svg +0 -1
  80. package/dist/input-text/readme.md +0 -91
  81. package/dist/layout/ApplicationLayout.js +0 -335
  82. package/dist/layout/facebook.svg +0 -45
  83. package/dist/layout/linkedin.svg +0 -50
  84. package/dist/layout/twitter.svg +0 -53
  85. package/dist/link/Link.js +0 -189
  86. package/dist/link/readme.md +0 -51
  87. package/dist/main.js +0 -287
  88. package/dist/paginator/Paginator.js +0 -227
  89. package/dist/paginator/images/next.svg +0 -3
  90. package/dist/paginator/images/nextPage.svg +0 -3
  91. package/dist/paginator/images/previous.svg +0 -3
  92. package/dist/paginator/images/previousPage.svg +0 -3
  93. package/dist/paginator/readme.md +0 -50
  94. package/dist/progress-bar/ProgressBar.js +0 -185
  95. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  96. package/dist/progress-bar/readme.md +0 -63
  97. package/dist/radio/Radio.js +0 -195
  98. package/dist/radio/Radio.stories.js +0 -166
  99. package/dist/radio/readme.md +0 -70
  100. package/dist/resultsetTable/ResultsetTable.js +0 -341
  101. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  102. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  103. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  104. package/dist/select/Select.js +0 -473
  105. package/dist/select/Select.stories.js +0 -235
  106. package/dist/select/readme.md +0 -72
  107. package/dist/sidenav/Sidenav.js +0 -128
  108. package/dist/slider/Slider.js +0 -266
  109. package/dist/slider/Slider.stories.js +0 -241
  110. package/dist/slider/readme.md +0 -64
  111. package/dist/spinner/Spinner.js +0 -193
  112. package/dist/spinner/Spinner.stories.js +0 -183
  113. package/dist/spinner/readme.md +0 -65
  114. package/dist/switch/Switch.js +0 -199
  115. package/dist/switch/Switch.stories.js +0 -134
  116. package/dist/switch/readme.md +0 -133
  117. package/dist/table/Table.js +0 -105
  118. package/dist/tabs/Tabs.js +0 -185
  119. package/dist/tabs/Tabs.stories.js +0 -130
  120. package/dist/tabs/readme.md +0 -78
  121. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  122. package/dist/tabs-for-sections/readme.md +0 -78
  123. package/dist/tag/Tag.js +0 -249
  124. package/dist/textarea/Textarea.js +0 -227
  125. package/dist/toggle/Toggle.js +0 -223
  126. package/dist/toggle/Toggle.stories.js +0 -297
  127. package/dist/toggle/readme.md +0 -80
  128. package/dist/toggle-group/ToggleGroup.js +0 -226
  129. package/dist/toggle-group/readme.md +0 -82
  130. package/dist/upload/Upload.js +0 -200
  131. package/dist/upload/Upload.stories.js +0 -72
  132. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  133. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  134. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  135. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  136. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  137. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  138. package/dist/upload/file-upload/FileToUpload.js +0 -158
  139. package/dist/upload/file-upload/audio-icon.svg +0 -4
  140. package/dist/upload/file-upload/close.svg +0 -4
  141. package/dist/upload/file-upload/file-icon.svg +0 -4
  142. package/dist/upload/file-upload/video-icon.svg +0 -4
  143. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  144. package/dist/upload/readme.md +0 -37
  145. package/dist/upload/transaction/Transaction.js +0 -155
  146. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  147. package/dist/upload/transaction/audio-icon.svg +0 -4
  148. package/dist/upload/transaction/error-icon.svg +0 -4
  149. package/dist/upload/transaction/file-icon-err.svg +0 -4
  150. package/dist/upload/transaction/file-icon.svg +0 -4
  151. package/dist/upload/transaction/image-icon-err.svg +0 -4
  152. package/dist/upload/transaction/image-icon.svg +0 -4
  153. package/dist/upload/transaction/success-icon.svg +0 -4
  154. package/dist/upload/transaction/video-icon-err.svg +0 -4
  155. package/dist/upload/transaction/video-icon.svg +0 -4
  156. package/dist/upload/transactions/Transactions.js +0 -120
  157. package/dist/wizard/Wizard.js +0 -340
  158. package/dist/wizard/invalid_icon.svg +0 -6
  159. package/dist/wizard/valid_icon.svg +0 -6
  160. package/dist/wizard/validation-wrong.svg +0 -6
  161. package/test/Accordion.test.js +0 -33
  162. package/test/AccordionGroup.test.js +0 -111
  163. package/test/Alert.test.js +0 -53
  164. package/test/Box.test.js +0 -10
  165. package/test/Button.test.js +0 -18
  166. package/test/Card.test.js +0 -30
  167. package/test/Checkbox.test.js +0 -45
  168. package/test/Chip.test.js +0 -25
  169. package/test/Date.test.js +0 -393
  170. package/test/Dialog.test.js +0 -23
  171. package/test/Dropdown.test.js +0 -130
  172. package/test/Footer.test.js +0 -99
  173. package/test/Header.test.js +0 -39
  174. package/test/Heading.test.js +0 -35
  175. package/test/InputText.test.js +0 -240
  176. package/test/Link.test.js +0 -33
  177. package/test/Paginator.test.js +0 -205
  178. package/test/ProgressBar.test.js +0 -35
  179. package/test/Radio.test.js +0 -37
  180. package/test/ResultsetTable.test.js +0 -293
  181. package/test/Select.test.js +0 -192
  182. package/test/Sidenav.test.js +0 -45
  183. package/test/Slider.test.js +0 -82
  184. package/test/Spinner.test.js +0 -27
  185. package/test/Switch.test.js +0 -45
  186. package/test/Table.test.js +0 -36
  187. package/test/Tabs.test.js +0 -88
  188. package/test/TabsForSections.test.js +0 -34
  189. package/test/Tag.test.js +0 -32
  190. package/test/TextArea.test.js +0 -52
  191. package/test/ToggleGroup.test.js +0 -81
  192. package/test/Upload.test.js +0 -60
  193. package/test/Wizard.test.js +0 -130
  194. package/test/mocks/pngMock.js +0 -1
  195. package/test/mocks/svgMock.js +0 -1
@@ -1,373 +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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
29
-
30
- var _close_icon = _interopRequireDefault(require("./close_icon.svg"));
31
-
32
- var _variables = require("../common/variables.js");
33
-
34
- var _utils = require("../common/utils.js");
35
-
36
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
37
-
38
- function _templateObject11() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background-color: ", ";\n visibility: ", ";\n opacity: ", ";\n display: ", ";\n transition: opacity 0.2s 0.2s ease-in-out;\n z-index: 1600;\n"]);
40
-
41
- _templateObject11 = function _templateObject11() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject10() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n :focus {\n outline: ", " auto 1px;\n }\n"]);
50
-
51
- _templateObject10 = function _templateObject10() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject9() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 100%;\n margin-top: 40px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"]);
60
-
61
- _templateObject9 = function _templateObject9() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject8() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-evenly;\n background-color: ", ";\n position: fixed;\n top: 0;\n right: 0;\n z-index: 2000;\n color: ", ";\n width: ", ";\n height: ", "px;\n padding: 20px;\n transform: ", ";\n opacity: ", ";\n transition-property: transform, opacity;\n transition-duration: 0.6s;\n transition-timing-function: ease-in-out;\n box-sizing: border-box;\n\n & > img:first-of-type {\n position: absolute;\n top: 23px;\n left: 20px;\n }\n\n & > img:last-of-type {\n position: fixed;\n top: 23px;\n right: 20px;\n width: 24px;\n height: 24px;\n padding: ", ";\n }\n"]);
70
-
71
- _templateObject8 = function _templateObject8() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject7() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-grow: 1;\n"]);
80
-
81
- _templateObject7 = function _templateObject7() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject6() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 10px;\n text-transform: uppercase;\n font-weight: 600;\n"]);
90
-
91
- _templateObject6 = function _templateObject6() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject5() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 54px;\n cursor: pointer;\n :hover {\n background-color: ", ";\n }\n &:focus {\n outline: ", " auto 1px;\n }\n & > svg {\n fill: ", ";\n }\n"]);
100
-
101
- _templateObject5 = function _templateObject5() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject4() {
109
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: calc(100% - 186px);\n display: flex;\n align-items: center;\n flex-grow: 1;\n justify-content: flex-end;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"]);
110
-
111
- _templateObject4 = function _templateObject4() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject3() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: 32px;\n width: auto;\n vertical-align: middle;\n\n cursor: ", ";\n"]);
120
-
121
- _templateObject3 = function _templateObject3() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- function _templateObject2() {
129
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-bottom: ", ";\n\n &.MuiAppBar-colorPrimary {\n background-color: ", ";\n\n color: ", ";\n\n border-bottom: ", ";\n\n font-family: \"Open Sans\", sans-serif;\n\n &.MuiPaper-elevation4 {\n box-shadow: none;\n }\n .ChildComponents {\n display: flex;\n align-items: center;\n }\n }\n & {\n min-height: 64px;\n }\n &.MuiAppBar-root {\n flex-direction: row;\n align-items: center;\n padding: 0px 0px 0px 20px;\n justify-content: space-between;\n }\n"]);
130
-
131
- _templateObject2 = function _templateObject2() {
132
- return data;
133
- };
134
-
135
- return data;
136
- }
137
-
138
- function _templateObject() {
139
- var data = (0, _taggedTemplateLiteral2["default"])(["\n button {\n color: ", ";\n background-color: transparent;\n :hover {\n background-color: transparent;\n }\n }\n"]);
140
-
141
- _templateObject = function _templateObject() {
142
- return data;
143
- };
144
-
145
- return data;
146
- }
147
-
148
- var Dropdown = function Dropdown(props) {
149
- return _react["default"].createElement(HeaderDropdown, null, _react["default"].createElement(_Dropdown["default"], props));
150
- };
151
-
152
- var HeaderDropdown = _styledComponents["default"].div(_templateObject(), function (props) {
153
- return props.theme.fontColor;
154
- });
155
-
156
- var DxcHeader = function DxcHeader(_ref) {
157
- var _ref$underlined = _ref.underlined,
158
- underlined = _ref$underlined === void 0 ? false : _ref$underlined,
159
- _ref$logoSrc = _ref.logoSrc,
160
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
161
- _ref$onClick = _ref.onClick,
162
- onClick = _ref$onClick === void 0 ? "" : _ref$onClick,
163
- content = _ref.content,
164
- responsiveContent = _ref.responsiveContent,
165
- margin = _ref.margin,
166
- padding = _ref.padding;
167
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
168
- var colorsTheme = (0, _react.useMemo)(function () {
169
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
170
- }, [customTheme]);
171
-
172
- function onClickHandle() {
173
- if (typeof onClick === "function") {
174
- onClick();
175
- }
176
- }
177
-
178
- var ref = (0, _react.useRef)(null);
179
-
180
- var _useState = (0, _react.useState)(),
181
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
182
- refSize = _useState2[0],
183
- setRefSize = _useState2[1];
184
-
185
- var _useState3 = (0, _react.useState)(),
186
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
187
- isResponsive = _useState4[0],
188
- setIsResponsive = _useState4[1];
189
-
190
- var _useState5 = (0, _react.useState)(false),
191
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
192
- isMenuVisible = _useState6[0],
193
- setIsMenuVisible = _useState6[1];
194
-
195
- var handleResize = function handleResize(refWidth) {
196
- if (refWidth) {
197
- setRefSize(refWidth);
198
-
199
- if (refWidth <= _variables.responsiveSizes.tablet && !isResponsive) {
200
- setIsResponsive(true);
201
- } else {
202
- setIsResponsive(false);
203
- }
204
- }
205
- };
206
-
207
- var handleMenu = function handleMenu() {
208
- if (isResponsive && !isMenuVisible) {
209
- setIsMenuVisible(!isMenuVisible);
210
- } else {
211
- setIsMenuVisible(!isMenuVisible);
212
- }
213
- };
214
-
215
- var getLogoRendered = function getLogoRendered(intoMenu) {
216
- return _react["default"].createElement(LogoIcon, {
217
- logoSrc: logoSrc,
218
- src: intoMenu && logoSrc === "default" ? colorsTheme.header.logoResponsive : !intoMenu && logoSrc === "default" ? colorsTheme.header.logo : logoSrc
219
- });
220
- };
221
-
222
- var handleEventListener = function handleEventListener() {
223
- handleResize(ref.current.offsetWidth);
224
- };
225
-
226
- (0, _react.useEffect)(function () {
227
- if (ref.current) {
228
- window.addEventListener("resize", handleEventListener);
229
- handleResize(ref.current.offsetWidth);
230
- }
231
-
232
- return function () {
233
- window.removeEventListener("resize", handleEventListener);
234
- };
235
- }, []);
236
-
237
- var HamburgerIcon = function HamburgerIcon() {
238
- return _react["default"].createElement("svg", {
239
- xmlns: "http://www.w3.org/2000/svg",
240
- viewBox: "0 0 24 24",
241
- width: "24",
242
- height: "24"
243
- }, _react["default"].createElement("path", {
244
- d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
245
- }));
246
- };
247
-
248
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
249
- theme: colorsTheme.header
250
- }, _react["default"].createElement(HeaderContainer, {
251
- underlined: underlined,
252
- position: "static",
253
- margin: margin,
254
- ref: ref
255
- }, _react["default"].createElement("a", {
256
- onClick: function onClick() {
257
- return onClickHandle();
258
- }
259
- }, getLogoRendered(false)), isResponsive && responsiveContent && _react["default"].createElement(MainContainer, null, _react["default"].createElement(ChildContainer, {
260
- padding: padding
261
- }, _react["default"].createElement(HamburguerItem, {
262
- underlined: underlined,
263
- onClick: handleMenu,
264
- tabIndex: "0"
265
- }, _react["default"].createElement(HamburgerIcon, null), _react["default"].createElement(HamburguerTitle, null, "Menu"))), _react["default"].createElement("div", null, _react["default"].createElement(ResponsiveMenu, {
266
- hasVisibility: isMenuVisible,
267
- refSize: refSize
268
- }, getLogoRendered(true), _react["default"].createElement(MenuContent, null, responsiveContent(handleMenu)), _react["default"].createElement(CloseContainer, {
269
- onClick: handleMenu,
270
- src: _close_icon["default"],
271
- className: "closeIcon",
272
- tabIndex: "0"
273
- })), _react["default"].createElement(Overlay, {
274
- onClick: handleMenu,
275
- hasVisibility: isMenuVisible,
276
- refSize: refSize
277
- }))), !isResponsive && _react["default"].createElement(ChildContainer, {
278
- padding: padding
279
- }, content)));
280
- };
281
-
282
- DxcHeader.Dropdown = Dropdown;
283
- var HeaderContainer = (0, _styledComponents["default"])(_AppBar["default"])(_templateObject2(), function (props) {
284
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
285
- }, function (props) {
286
- return props.theme.backgroundColor;
287
- }, function (props) {
288
- return props.theme.fontColor;
289
- }, function (props) {
290
- return props.underlined && "2px solid ".concat(props.theme.underlinedColor);
291
- });
292
-
293
- var LogoIcon = _styledComponents["default"].img(_templateObject3(), function (props) {
294
- if (props.onLogoClick === "") {
295
- return "default";
296
- } else {
297
- return "pointer";
298
- }
299
- });
300
-
301
- var ChildContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
302
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
303
- }, function (props) {
304
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
305
- }, function (props) {
306
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
307
- }, function (props) {
308
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
309
- }, function (props) {
310
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
311
- });
312
-
313
- var HamburguerItem = _styledComponents["default"].div(_templateObject5(), function (props) {
314
- return "".concat(props.theme.hamburguerColor).concat(props.theme.hoverHamburguerColor);
315
- }, function (props) {
316
- return props.theme.focusColor;
317
- }, function (props) {
318
- return props.theme.hamburguerColor;
319
- });
320
-
321
- var HamburguerTitle = _styledComponents["default"].span(_templateObject6());
322
-
323
- var MainContainer = _styledComponents["default"].div(_templateObject7());
324
-
325
- var ResponsiveMenu = _styledComponents["default"].div(_templateObject8(), function (props) {
326
- return props.theme.backgroundColorMenu;
327
- }, function (props) {
328
- return props.theme.fontColorMenu;
329
- }, function (props) {
330
- return props.refSize <= _variables.responsiveSizes.laptop && props.refSize > _variables.responsiveSizes.mobileLarge ? "60vw" : "100vw";
331
- }, window.innerHeight, function (props) {
332
- return props.hasVisibility ? "translateX(0)" : "translateX(100vw)";
333
- }, function (props) {
334
- return props.hasVisibility ? "1" : "0.96";
335
- }, _variables.spaces.xxsmall);
336
-
337
- var MenuContent = _styledComponents["default"].div(_templateObject9());
338
-
339
- var CloseContainer = _styledComponents["default"].img(_templateObject10(), function (props) {
340
- return props.theme.focusColor;
341
- });
342
-
343
- var Overlay = _styledComponents["default"].div(_templateObject11(), function (props) {
344
- return "".concat(props.theme.overlayColor).concat(props.theme.overlayOpacity);
345
- }, function (props) {
346
- return props.hasVisibility ? "visible" : "hidden";
347
- }, function (props) {
348
- return props.hasVisibility ? "1" : "0";
349
- }, function (props) {
350
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "none" : "";
351
- });
352
-
353
- DxcHeader.propTypes = {
354
- logoSrc: _propTypes["default"].string,
355
- underlined: _propTypes["default"].bool,
356
- onClick: _propTypes["default"].func,
357
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
358
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
359
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
360
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
361
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
362
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
363
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
364
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
365
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
366
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
367
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
368
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
369
- content: _propTypes["default"].object,
370
- responsiveContent: _propTypes["default"].func
371
- };
372
- var _default = DxcHeader;
373
- exports["default"] = _default;
@@ -1,176 +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 _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Header = _interopRequireDefault(require("./Header"));
18
-
19
- var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
20
-
21
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
22
-
23
- var selectOption = function selectOption(option) {
24
- console.log(option);
25
- };
26
-
27
- var onChange = (0, _addonActions.action)("onChange");
28
- var onClick = (0, _addonActions.action)("headerLogo Clicked");
29
- var optionsWithoutIcon = [{
30
- value: 1,
31
- label: "Amazon"
32
- }, {
33
- value: 2,
34
- label: "Ebay"
35
- }, {
36
- value: 3,
37
- label: "Apple"
38
- }];
39
- (0, _react2.storiesOf)("Form Components|Header", module).add("Component", function () {
40
- return _react["default"].createElement("div", {
41
- style: {
42
- background: "lightgrey"
43
- }
44
- }, _react["default"].createElement("div", null, _react["default"].createElement("div", {
45
- style: {
46
- marginBottom: "20px"
47
- }
48
- }, _react["default"].createElement(_Header["default"], {
49
- theme: "light",
50
- underlined: false,
51
- onClick: onClick
52
- }, _react["default"].createElement(_Dropdown["default"], {
53
- theme: "light",
54
- onSelectOption: selectOption,
55
- options: optionsWithoutIcon
56
- }), _react["default"].createElement(_Dropdown["default"], {
57
- theme: "light",
58
- onSelectOption: selectOption,
59
- label: "Dropdown",
60
- options: optionsWithoutIcon
61
- }), _react["default"].createElement(_Switch["default"], {
62
- checked: false,
63
- label: "Switch component",
64
- labelPosition: "after",
65
- theme: "dark",
66
- onChange: onChange
67
- }))), _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
68
- theme: "light",
69
- underlined: true,
70
- onClick: onClick
71
- }, _react["default"].createElement(_Dropdown["default"], {
72
- theme: "light",
73
- onSelectOption: selectOption,
74
- options: optionsWithoutIcon,
75
- mode: "outlined"
76
- }), _react["default"].createElement(_Dropdown["default"], {
77
- theme: "light",
78
- onSelectOption: selectOption,
79
- label: "Dropdown",
80
- options: optionsWithoutIcon,
81
- mode: "outlined"
82
- }), _react["default"].createElement(_Switch["default"], {
83
- checked: false,
84
- label: "Switch component",
85
- labelPosition: "after",
86
- theme: "light",
87
- onChange: onChange
88
- })))), _react["default"].createElement("div", {
89
- style: {
90
- paddingTop: "20px",
91
- height: "200px"
92
- }
93
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
94
- theme: "dark",
95
- underlined: false
96
- }, _react["default"].createElement(_Dropdown["default"], {
97
- theme: "dark",
98
- onSelectOption: selectOption,
99
- options: optionsWithoutIcon,
100
- mode: "basic"
101
- }), _react["default"].createElement(_Dropdown["default"], {
102
- theme: "dark",
103
- onSelectOption: selectOption,
104
- label: "Dropdown",
105
- options: optionsWithoutIcon,
106
- mode: "basic"
107
- }), _react["default"].createElement(_Switch["default"], {
108
- checked: false,
109
- label: "Switch component",
110
- labelPosition: "after",
111
- theme: "light",
112
- onChange: onChange
113
- }))), _react["default"].createElement("div", {
114
- style: {
115
- marginTop: "20px"
116
- }
117
- }, _react["default"].createElement(_Header["default"], {
118
- theme: "dark",
119
- underlined: true
120
- }, _react["default"].createElement(_Dropdown["default"], {
121
- theme: "dark",
122
- onSelectOption: selectOption,
123
- options: optionsWithoutIcon,
124
- mode: "outlined"
125
- }), _react["default"].createElement(_Dropdown["default"], {
126
- theme: "dark",
127
- onSelectOption: selectOption,
128
- label: "Dropdown",
129
- options: optionsWithoutIcon,
130
- mode: "outlined"
131
- }), _react["default"].createElement(_Switch["default"], {
132
- checked: false,
133
- label: "Switch component",
134
- labelPosition: "after",
135
- theme: "dark",
136
- onChange: onChange
137
- })))));
138
- }, {
139
- notes: {
140
- markdown: _readme["default"]
141
- }
142
- });
143
-
144
- var knobProps = function knobProps() {
145
- return {
146
- theme: (0, _addonKnobs.select)("Theme", {
147
- light: "light",
148
- dark: "dark"
149
- }, "light"),
150
- underlined: (0, _addonKnobs["boolean"])("Underlined", false)
151
- };
152
- };
153
-
154
- (0, _react2.storiesOf)("Form Components|Header", module).add("Knobs example", function () {
155
- var props = knobProps();
156
- return _react["default"].createElement("div", {
157
- style: {
158
- height: "250px",
159
- background: props.theme === "dark" && "black" || "transparent"
160
- }
161
- }, _react["default"].createElement(_Header["default"], props, _react["default"].createElement(_Dropdown["default"], {
162
- theme: props.theme,
163
- mode: props.underlined ? "outlined" : "basic",
164
- onSelectOption: selectOption,
165
- options: optionsWithoutIcon,
166
- label: "Dropdown"
167
- })), _react["default"].createElement("div", {
168
- style: {
169
- marginTop: "20px"
170
- }
171
- }, _react["default"].createElement(_Header["default"], props)));
172
- }, {
173
- notes: {
174
- markdown: _readme["default"]
175
- }
176
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path 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 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Binary file
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="300.5" height="48" viewBox="0 0 300.5 48">
2
- <g id="Grupo_1" data-name="Grupo 1" transform="translate(-38 103)">
3
- <rect id="Rectángulo_1" data-name="Rectángulo 1" width="300.5" height="48" transform="translate(38 -103)" fill="none"/>
4
- <path id="Trazado_2" data-name="Trazado 2" d="M49.867,46.715a8.248,8.248,0,0,0-8.284-8.3h-3.6V55h3.6a8.244,8.244,0,0,0,8.284-8.285m6.476,2.693L50.476,59.54h11.7Zm0-5.386,5.835-10.131h-11.7Zm6.444,2.693A8.244,8.244,0,0,0,71.071,55h3.605V38.412H71.071a8.248,8.248,0,0,0-8.284,8.3M330.638,60.21c-1.337,3.391-3.016,5.008-6.842,5.008a13.99,13.99,0,0,1-2.208-.156V60.8a11.909,11.909,0,0,0,1.679.187c1.275,0,2.084-.5,2.737-2.084l.4-.995-6.9-16.142h5.536l4.012,9.921,3.7-9.89h5.226L330.638,60.21M308.869,53.9a4.1,4.1,0,0,1,0-8.18,4.1,4.1,0,0,1,0,8.18m8.988,4.261V41.767H312.85v2.364a5.837,5.837,0,0,0-5.07-2.769c-4.7,0-7.806,3.639-7.806,8.46,0,4.79,3.234,8.18,7.868,8.18a5.85,5.85,0,0,0,4.946-2.488v2.768c0,2.3-1.213,3.577-3.639,3.577-2.146,0-3.328-1-3.546-2.457h-5.039c.28,3.576,3.111,6.127,8.46,6.127,5.941,0,8.833-2.675,8.833-7.371M289.43,53.9a3.821,3.821,0,0,1-3.795-4.075A3.819,3.819,0,1,1,289.43,53.9m0,4.385c5.6,0,8.926-3.888,8.926-8.46,0-4.6-3.328-8.491-8.926-8.491-5.536,0-8.895,3.888-8.895,8.491,0,4.572,3.359,8.46,8.895,8.46m-16.422-.435h5.07V34.52h-5.07ZM261.624,53.9a3.82,3.82,0,0,1-3.794-4.075,3.819,3.819,0,1,1,3.794,4.075m0,4.385c5.6,0,8.927-3.888,8.927-8.46,0-4.6-3.328-8.491-8.927-8.491-5.536,0-8.895,3.888-8.895,8.491,0,4.572,3.359,8.46,8.895,8.46m-27.37-.435h5.07v-8.4c0-2.27,1.058-3.732,3.11-3.732,2.178,0,2.862,1.337,2.862,3.265v8.865h5.069V48.609c0-4.541-1.99-7.247-6.064-7.247a5.4,5.4,0,0,0-5.039,2.737V41.767h-5.008Zm-19.314,0h5.07v-8.4c0-2.27,1.057-3.732,3.11-3.732,2.177,0,2.861,1.337,2.861,3.265v8.865h5.07V48.609c0-4.541-1.991-7.247-6.065-7.247A5.333,5.333,0,0,0,220.01,44.1V34.52h-5.07Zm-2.271-9.891c-.622-3.732-3.39-6.625-8.242-6.625a8.479,8.479,0,1,0,0,16.951c4.852,0,7.62-2.892,8.242-6.625h-5.1a3.122,3.122,0,0,1-3.11,2.333c-2.24,0-3.671-1.9-3.671-4.168s1.431-4.2,3.671-4.2a3.087,3.087,0,0,1,3.079,2.333Zm-26.934-3.017a3.2,3.2,0,0,1,3.359,3.11h-6.811a3.255,3.255,0,0,1,3.452-3.11m7.931,8.025h-4.821a3.19,3.19,0,0,1-3.048,1.648,3.315,3.315,0,0,1-3.546-3.483h11.695a14.55,14.55,0,0,0,.124-1.9c0-4.261-2.954-7.9-8.273-7.9-5.474,0-8.46,3.826-8.46,8.491,0,4.634,3.017,8.46,8.522,8.46,4.386,0,7-2.333,7.807-5.318m-29.454-11.2v3.981h2.519v6.531c0,4.417,2.115,5.816,5.941,5.816a18.617,18.617,0,0,0,3.172-.248V53.772a17.282,17.282,0,0,1-2.021.187c-1.307,0-2.022-.436-2.022-2.053V45.748h3.67V41.767H171.8V37.008h-5.07v4.759Zm-6.871,13.125a3.233,3.233,0,1,0,3.232-3.235,3.231,3.231,0,0,0-3.232,3.235m-12.41,3.359c6.438,0,9.952-3.857,10.637-8.771h-5.319a5.088,5.088,0,0,1-5.194,4.074c-4.012,0-6.1-3.2-6.1-6.9s2.084-6.905,6.1-6.905a5.089,5.089,0,0,1,5.194,4.074h5.319c-.685-4.914-4.2-8.77-10.637-8.77-7.185,0-11.353,5.474-11.353,11.6s4.168,11.6,11.353,11.6m-17.449-.4h6.159l-7.247-11.259,7.184-11.135h-6.033L123.1,42.824l-4.51-7.371H112.46l7.216,11.135L112.4,57.847h6l4.573-7.465ZM100.765,39.994a6.392,6.392,0,0,1,6.5,6.656,6.409,6.409,0,0,1-6.5,6.656H98.06V39.994ZM92.8,57.847h8.211c7.465,0,11.633-5.474,11.633-11.2s-4.2-11.2-11.633-11.2H92.8Z" transform="translate(0.021 -126.891)"/>
5
- </g>
6
- </svg>
Binary file
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="black"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="white"/></svg>
@@ -1,33 +0,0 @@
1
- # DXC Header 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>theme: 'light' | 'dark'</td>
13
- <td><code>'light'</code></td>
14
- <td>Uses one of the available component themes.</td>
15
- </tr>
16
- <tr>
17
- <td>underline: boolean</td>
18
- <td><code>false</code></td>
19
- <td>Wether a contrast line should appear at the bottom of the header.</td>
20
- </tr>
21
- <tr>
22
- <td>logoSrc: string</td>
23
- <td><code>'default'</code></td>
24
- <td>The path of an icon to replace the theme logo.</td>
25
- </tr>
26
- <tr>
27
- <td>onClick: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the header logo.<br>
30
- </td>
31
- </tr>
32
- </table>
33
-