@dxc-technology/halstack-react 0.0.0-40fd4e3 → 0.0.0-41b488f

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 (291) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/V3Select/V3Select.js +455 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +260 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.js +289 -0
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +50 -25
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +309 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +59 -0
  14. package/{dist/box → box}/Box.js +38 -34
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.d.ts +4 -0
  17. package/button/Button.js +182 -0
  18. package/button/Button.stories.tsx +10 -0
  19. package/button/types.d.ts +22 -0
  20. package/button/types.js +5 -0
  21. package/card/Card.js +200 -0
  22. package/card/index.d.ts +22 -0
  23. package/checkbox/Checkbox.js +275 -0
  24. package/checkbox/index.d.ts +24 -0
  25. package/chip/Chip.js +221 -0
  26. package/chip/index.d.ts +22 -0
  27. package/{dist/common → common}/OpenSans.css +0 -0
  28. package/{dist/common → common}/RequiredComponent.js +5 -19
  29. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  37. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  39. package/common/utils.js +22 -0
  40. package/common/variables.js +1567 -0
  41. package/{dist/date → date}/Date.js +87 -70
  42. package/date/index.d.ts +27 -0
  43. package/date-input/DateInput.js +396 -0
  44. package/date-input/index.d.ts +95 -0
  45. package/dialog/Dialog.js +184 -0
  46. package/dialog/index.d.ts +18 -0
  47. package/dropdown/Dropdown.js +450 -0
  48. package/dropdown/index.d.ts +26 -0
  49. package/file-input/FileInput.js +532 -0
  50. package/file-input/FileItem.js +193 -0
  51. package/file-input/index.d.ts +81 -0
  52. package/footer/Footer.js +297 -0
  53. package/footer/Icons.js +77 -0
  54. package/footer/index.d.ts +25 -0
  55. package/header/Header.js +326 -0
  56. package/header/Icons.js +59 -0
  57. package/header/index.d.ts +25 -0
  58. package/heading/Heading.js +176 -0
  59. package/heading/index.d.ts +17 -0
  60. package/input-text/Icons.js +22 -0
  61. package/input-text/InputText.js +611 -0
  62. package/input-text/index.d.ts +36 -0
  63. package/{dist/layout → layout}/ApplicationLayout.js +42 -142
  64. package/layout/Icons.js +55 -0
  65. package/link/Link.js +183 -0
  66. package/link/index.d.ts +23 -0
  67. package/main.d.ts +44 -0
  68. package/{dist/main.js → main.js} +131 -55
  69. package/number-input/NumberInput.js +128 -0
  70. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  71. package/number-input/index.d.ts +113 -0
  72. package/package.json +32 -21
  73. package/paginator/Icons.js +66 -0
  74. package/paginator/Paginator.js +221 -0
  75. package/paginator/index.d.ts +20 -0
  76. package/password-input/PasswordInput.js +199 -0
  77. package/password-input/index.d.ts +94 -0
  78. package/progress-bar/ProgressBar.js +188 -0
  79. package/progress-bar/index.d.ts +18 -0
  80. package/{dist/radio → radio}/Radio.js +40 -40
  81. package/radio/index.d.ts +23 -0
  82. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +95 -162
  83. package/resultsetTable/index.d.ts +19 -0
  84. package/select/Select.js +864 -0
  85. package/select/index.d.ts +131 -0
  86. package/sidenav/Sidenav.js +145 -0
  87. package/sidenav/index.d.ts +13 -0
  88. package/slider/Slider.js +340 -0
  89. package/slider/index.d.ts +29 -0
  90. package/spinner/Spinner.js +267 -0
  91. package/spinner/index.d.ts +17 -0
  92. package/switch/Switch.js +208 -0
  93. package/switch/index.d.ts +24 -0
  94. package/table/Table.js +118 -0
  95. package/table/index.d.ts +13 -0
  96. package/tabs/Tabs.js +259 -0
  97. package/tabs/index.d.ts +19 -0
  98. package/tag/Tag.js +208 -0
  99. package/tag/index.d.ts +24 -0
  100. package/text-input/TextInput.js +818 -0
  101. package/text-input/index.d.ts +135 -0
  102. package/textarea/Textarea.js +315 -0
  103. package/textarea/index.d.ts +117 -0
  104. package/{dist/toggle → toggle}/Toggle.js +30 -67
  105. package/toggle/index.d.ts +21 -0
  106. package/toggle-group/ToggleGroup.js +243 -0
  107. package/toggle-group/index.d.ts +21 -0
  108. package/{dist/upload → upload}/Upload.js +23 -22
  109. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  110. package/upload/buttons-upload/Icons.js +40 -0
  111. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  112. package/upload/dragAndDropArea/Icons.js +39 -0
  113. package/upload/file-upload/FileToUpload.js +115 -0
  114. package/upload/file-upload/Icons.js +66 -0
  115. package/upload/files-upload/FilesToUpload.js +109 -0
  116. package/upload/index.d.ts +15 -0
  117. package/upload/transaction/Icons.js +160 -0
  118. package/upload/transaction/Transaction.js +104 -0
  119. package/upload/transactions/Transactions.js +94 -0
  120. package/useTheme.js +22 -0
  121. package/wizard/Icons.js +65 -0
  122. package/wizard/Wizard.js +271 -0
  123. package/wizard/index.d.ts +18 -0
  124. package/README.md +0 -66
  125. package/babel.config.js +0 -4
  126. package/dist/accordion/Accordion.js +0 -268
  127. package/dist/accordion/Accordion.stories.js +0 -207
  128. package/dist/accordion/readme.md +0 -96
  129. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  130. package/dist/accordion-group/readme.md +0 -70
  131. package/dist/alert/Alert.js +0 -304
  132. package/dist/alert/Alert.stories.js +0 -158
  133. package/dist/alert/close.svg +0 -4
  134. package/dist/alert/error.svg +0 -4
  135. package/dist/alert/info.svg +0 -4
  136. package/dist/alert/readme.md +0 -43
  137. package/dist/alert/success.svg +0 -4
  138. package/dist/alert/warning.svg +0 -4
  139. package/dist/button/Button.js +0 -202
  140. package/dist/button/Button.stories.js +0 -224
  141. package/dist/button/readme.md +0 -93
  142. package/dist/card/Card.js +0 -217
  143. package/dist/checkbox/Checkbox.js +0 -240
  144. package/dist/checkbox/Checkbox.stories.js +0 -144
  145. package/dist/checkbox/readme.md +0 -116
  146. package/dist/chip/Chip.js +0 -208
  147. package/dist/common/services/example-service.js +0 -10
  148. package/dist/common/services/example-service.test.js +0 -12
  149. package/dist/common/utils.js +0 -42
  150. package/dist/common/variables.js +0 -434
  151. package/dist/date/Date.stories.js +0 -205
  152. package/dist/date/calendar.svg +0 -1
  153. package/dist/date/calendar_dark.svg +0 -1
  154. package/dist/date/readme.md +0 -73
  155. package/dist/dialog/Dialog.js +0 -197
  156. package/dist/dialog/Dialog.stories.js +0 -217
  157. package/dist/dialog/readme.md +0 -32
  158. package/dist/dropdown/Dropdown.js +0 -449
  159. package/dist/dropdown/Dropdown.stories.js +0 -249
  160. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  161. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  162. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  163. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  164. package/dist/dropdown/readme.md +0 -69
  165. package/dist/footer/Footer.js +0 -371
  166. package/dist/footer/Footer.stories.js +0 -94
  167. package/dist/footer/dxc_logo_wht.png +0 -0
  168. package/dist/footer/readme.md +0 -41
  169. package/dist/header/Header.js +0 -373
  170. package/dist/header/Header.stories.js +0 -176
  171. package/dist/header/close_icon.svg +0 -1
  172. package/dist/header/dxc_logo_black.png +0 -0
  173. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  174. package/dist/header/dxc_logo_white.png +0 -0
  175. package/dist/header/hamb_menu_black.svg +0 -1
  176. package/dist/header/hamb_menu_white.svg +0 -1
  177. package/dist/header/readme.md +0 -33
  178. package/dist/heading/Heading.js +0 -153
  179. package/dist/input-text/InputText.js +0 -570
  180. package/dist/input-text/InputText.stories.js +0 -209
  181. package/dist/input-text/error.svg +0 -1
  182. package/dist/input-text/readme.md +0 -91
  183. package/dist/layout/facebook.svg +0 -45
  184. package/dist/layout/linkedin.svg +0 -50
  185. package/dist/layout/twitter.svg +0 -53
  186. package/dist/link/Link.js +0 -192
  187. package/dist/link/readme.md +0 -51
  188. package/dist/paginator/Paginator.js +0 -232
  189. package/dist/paginator/images/next.svg +0 -3
  190. package/dist/paginator/images/nextPage.svg +0 -3
  191. package/dist/paginator/images/previous.svg +0 -3
  192. package/dist/paginator/images/previousPage.svg +0 -3
  193. package/dist/paginator/readme.md +0 -50
  194. package/dist/progress-bar/ProgressBar.js +0 -185
  195. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  196. package/dist/progress-bar/readme.md +0 -63
  197. package/dist/radio/Radio.stories.js +0 -166
  198. package/dist/radio/readme.md +0 -70
  199. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  200. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  201. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  202. package/dist/select/Select.js +0 -473
  203. package/dist/select/Select.stories.js +0 -235
  204. package/dist/select/readme.md +0 -72
  205. package/dist/sidenav/Sidenav.js +0 -128
  206. package/dist/slider/Slider.js +0 -266
  207. package/dist/slider/Slider.stories.js +0 -241
  208. package/dist/slider/readme.md +0 -64
  209. package/dist/spinner/Spinner.js +0 -193
  210. package/dist/spinner/Spinner.stories.js +0 -183
  211. package/dist/spinner/readme.md +0 -65
  212. package/dist/switch/Switch.js +0 -199
  213. package/dist/switch/Switch.stories.js +0 -134
  214. package/dist/switch/readme.md +0 -133
  215. package/dist/table/Table.js +0 -105
  216. package/dist/tabs/Tabs.js +0 -185
  217. package/dist/tabs/Tabs.stories.js +0 -130
  218. package/dist/tabs/readme.md +0 -78
  219. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  220. package/dist/tabs-for-sections/readme.md +0 -78
  221. package/dist/tag/Tag.js +0 -249
  222. package/dist/textarea/Textarea.js +0 -227
  223. package/dist/toggle/Toggle.stories.js +0 -297
  224. package/dist/toggle/readme.md +0 -80
  225. package/dist/toggle-group/ToggleGroup.js +0 -226
  226. package/dist/toggle-group/readme.md +0 -82
  227. package/dist/upload/Upload.stories.js +0 -72
  228. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  229. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  230. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  231. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  232. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  233. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  234. package/dist/upload/file-upload/FileToUpload.js +0 -158
  235. package/dist/upload/file-upload/audio-icon.svg +0 -4
  236. package/dist/upload/file-upload/close.svg +0 -4
  237. package/dist/upload/file-upload/file-icon.svg +0 -4
  238. package/dist/upload/file-upload/video-icon.svg +0 -4
  239. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  240. package/dist/upload/readme.md +0 -37
  241. package/dist/upload/transaction/Transaction.js +0 -155
  242. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  243. package/dist/upload/transaction/audio-icon.svg +0 -4
  244. package/dist/upload/transaction/error-icon.svg +0 -4
  245. package/dist/upload/transaction/file-icon-err.svg +0 -4
  246. package/dist/upload/transaction/file-icon.svg +0 -4
  247. package/dist/upload/transaction/image-icon-err.svg +0 -4
  248. package/dist/upload/transaction/image-icon.svg +0 -4
  249. package/dist/upload/transaction/success-icon.svg +0 -4
  250. package/dist/upload/transaction/video-icon-err.svg +0 -4
  251. package/dist/upload/transaction/video-icon.svg +0 -4
  252. package/dist/upload/transactions/Transactions.js +0 -120
  253. package/dist/wizard/Wizard.js +0 -340
  254. package/dist/wizard/invalid_icon.svg +0 -6
  255. package/dist/wizard/valid_icon.svg +0 -6
  256. package/dist/wizard/validation-wrong.svg +0 -6
  257. package/test/Accordion.test.js +0 -33
  258. package/test/AccordionGroup.test.js +0 -111
  259. package/test/Alert.test.js +0 -53
  260. package/test/Box.test.js +0 -10
  261. package/test/Button.test.js +0 -18
  262. package/test/Card.test.js +0 -30
  263. package/test/Checkbox.test.js +0 -45
  264. package/test/Chip.test.js +0 -25
  265. package/test/Date.test.js +0 -393
  266. package/test/Dialog.test.js +0 -23
  267. package/test/Dropdown.test.js +0 -130
  268. package/test/Footer.test.js +0 -99
  269. package/test/Header.test.js +0 -39
  270. package/test/Heading.test.js +0 -35
  271. package/test/InputText.test.js +0 -240
  272. package/test/Link.test.js +0 -42
  273. package/test/Paginator.test.js +0 -194
  274. package/test/ProgressBar.test.js +0 -35
  275. package/test/Radio.test.js +0 -37
  276. package/test/ResultsetTable.test.js +0 -304
  277. package/test/Select.test.js +0 -192
  278. package/test/Sidenav.test.js +0 -45
  279. package/test/Slider.test.js +0 -82
  280. package/test/Spinner.test.js +0 -27
  281. package/test/Switch.test.js +0 -45
  282. package/test/Table.test.js +0 -36
  283. package/test/Tabs.test.js +0 -88
  284. package/test/TabsForSections.test.js +0 -34
  285. package/test/Tag.test.js +0 -32
  286. package/test/TextArea.test.js +0 -52
  287. package/test/ToggleGroup.test.js +0 -81
  288. package/test/Upload.test.js +0 -60
  289. package/test/Wizard.test.js +0 -130
  290. package/test/mocks/pngMock.js +0 -1
  291. 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
-