@dxc-technology/halstack-react 0.0.0-8d633bd → 0.0.0-8d998c7

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 (282) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +38 -132
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +14 -18
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/{dist/accordion → accordion}/Accordion.js +35 -130
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/{dist/alert → alert}/Alert.js +41 -154
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +9 -13
  21. package/box/Box.stories.jsx +132 -0
  22. package/box/index.d.ts +25 -0
  23. package/button/Button.d.ts +4 -0
  24. package/{dist/button → button}/Button.js +16 -72
  25. package/button/Button.stories.tsx +293 -0
  26. package/button/types.d.ts +57 -0
  27. package/button/types.js +5 -0
  28. package/card/Card.d.ts +4 -0
  29. package/{dist/card → card}/Card.js +32 -121
  30. package/card/types.d.ts +69 -0
  31. package/card/types.js +5 -0
  32. package/checkbox/Checkbox.d.ts +4 -0
  33. package/{dist/checkbox → checkbox}/Checkbox.js +16 -63
  34. package/checkbox/types.d.ts +60 -0
  35. package/checkbox/types.js +5 -0
  36. package/{dist/chip → chip}/Chip.js +17 -61
  37. package/chip/index.d.ts +22 -0
  38. package/{dist/common → common}/OpenSans.css +0 -0
  39. package/{dist/common → common}/RequiredComponent.js +3 -11
  40. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  49. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  50. package/{dist/common → common}/utils.js +0 -0
  51. package/{dist/common → common}/variables.js +250 -98
  52. package/{dist/date → date}/Date.js +20 -28
  53. package/date/index.d.ts +27 -0
  54. package/date-input/DateInput.d.ts +4 -0
  55. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +88 -130
  56. package/date-input/types.d.ts +100 -0
  57. package/date-input/types.js +5 -0
  58. package/{dist/dialog → dialog}/Dialog.js +16 -50
  59. package/dialog/index.d.ts +18 -0
  60. package/dropdown/Dropdown.d.ts +4 -0
  61. package/{dist/dropdown → dropdown}/Dropdown.js +44 -171
  62. package/dropdown/types.d.ts +89 -0
  63. package/dropdown/types.js +5 -0
  64. package/{dist/file-input → file-input}/FileInput.js +57 -166
  65. package/file-input/FileItem.js +193 -0
  66. package/file-input/index.d.ts +81 -0
  67. package/footer/Footer.d.ts +4 -0
  68. package/footer/Footer.js +266 -0
  69. package/footer/Icons.js +77 -0
  70. package/footer/types.d.ts +61 -0
  71. package/footer/types.js +5 -0
  72. package/header/Header.js +326 -0
  73. package/header/Icons.js +59 -0
  74. package/header/index.d.ts +25 -0
  75. package/{dist/heading → heading}/Heading.js +30 -72
  76. package/heading/index.d.ts +17 -0
  77. package/input-text/Icons.js +22 -0
  78. package/{dist/input-text → input-text}/InputText.js +37 -133
  79. package/input-text/index.d.ts +36 -0
  80. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  81. package/layout/Icons.js +55 -0
  82. package/{dist/link → link}/Link.js +18 -72
  83. package/link/index.d.ts +23 -0
  84. package/main.d.ts +44 -0
  85. package/{dist/main.js → main.js} +100 -96
  86. package/{dist/number/Number.js → number-input/NumberInput.js} +10 -20
  87. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  88. package/number-input/index.d.ts +113 -0
  89. package/package.json +32 -25
  90. package/paginator/Icons.js +66 -0
  91. package/paginator/Paginator.d.ts +4 -0
  92. package/paginator/Paginator.js +198 -0
  93. package/paginator/types.d.ts +38 -0
  94. package/paginator/types.js +5 -0
  95. package/{dist/password/Password.js → password-input/PasswordInput.js} +29 -30
  96. package/password-input/PasswordInput.stories.jsx +131 -0
  97. package/password-input/index.d.ts +94 -0
  98. package/progress-bar/ProgressBar.d.ts +4 -0
  99. package/{dist/progress-bar → progress-bar}/ProgressBar.js +19 -91
  100. package/progress-bar/types.d.ts +37 -0
  101. package/progress-bar/types.js +5 -0
  102. package/radio/Radio.d.ts +4 -0
  103. package/{dist/radio → radio}/Radio.js +15 -50
  104. package/radio/types.d.ts +54 -0
  105. package/radio/types.js +5 -0
  106. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  107. package/resultsetTable/index.d.ts +19 -0
  108. package/select/Select.js +865 -0
  109. package/select/index.d.ts +131 -0
  110. package/{dist/sidenav → sidenav}/Sidenav.js +15 -49
  111. package/sidenav/index.d.ts +13 -0
  112. package/slider/Slider.d.ts +4 -0
  113. package/{dist/slider → slider}/Slider.js +90 -103
  114. package/slider/types.d.ts +83 -0
  115. package/slider/types.js +5 -0
  116. package/{dist/spinner → spinner}/Spinner.js +38 -152
  117. package/spinner/index.d.ts +17 -0
  118. package/switch/Switch.d.ts +4 -0
  119. package/{dist/switch → switch}/Switch.js +26 -69
  120. package/switch/types.d.ts +58 -0
  121. package/switch/types.js +5 -0
  122. package/{dist/table → table}/Table.js +10 -24
  123. package/table/index.d.ts +13 -0
  124. package/tabs/Tabs.d.ts +4 -0
  125. package/tabs/Tabs.js +211 -0
  126. package/tabs/types.d.ts +71 -0
  127. package/tabs/types.js +5 -0
  128. package/{dist/tag → tag}/Tag.js +22 -96
  129. package/{dist/alert → tag}/index.d.ts +9 -11
  130. package/text-input/TextInput.js +825 -0
  131. package/text-input/index.d.ts +135 -0
  132. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +73 -121
  133. package/textarea/Textarea.stories.jsx +135 -0
  134. package/textarea/index.d.ts +117 -0
  135. package/{dist/toggle → toggle}/Toggle.js +15 -49
  136. package/toggle/index.d.ts +21 -0
  137. package/toggle-group/ToggleGroup.js +243 -0
  138. package/toggle-group/index.d.ts +21 -0
  139. package/{dist/upload → upload}/Upload.js +11 -15
  140. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  141. package/upload/buttons-upload/Icons.js +40 -0
  142. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  143. package/upload/dragAndDropArea/Icons.js +39 -0
  144. package/upload/file-upload/FileToUpload.js +115 -0
  145. package/upload/file-upload/Icons.js +66 -0
  146. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  147. package/upload/index.d.ts +15 -0
  148. package/upload/transaction/Icons.js +160 -0
  149. package/upload/transaction/Transaction.js +104 -0
  150. package/upload/transactions/Transactions.js +94 -0
  151. package/{dist/useTheme.js → useTheme.js} +0 -0
  152. package/wizard/Icons.js +65 -0
  153. package/{dist/wizard → wizard}/Wizard.js +32 -172
  154. package/wizard/index.d.ts +18 -0
  155. package/README.md +0 -66
  156. package/babel.config.js +0 -8
  157. package/dist/BackgroundColorContext.js +0 -46
  158. package/dist/ThemeContext.js +0 -240
  159. package/dist/accordion-group/AccordionGroup.js +0 -186
  160. package/dist/badge/Badge.js +0 -63
  161. package/dist/checkbox/Checkbox.stories.js +0 -144
  162. package/dist/checkbox/readme.md +0 -116
  163. package/dist/date/Date.stories.js +0 -205
  164. package/dist/date/readme.md +0 -73
  165. package/dist/file-input/FileItem.js +0 -263
  166. package/dist/footer/Footer.js +0 -395
  167. package/dist/footer/Footer.stories.js +0 -94
  168. package/dist/footer/dxc_logo.svg +0 -15
  169. package/dist/footer/readme.md +0 -41
  170. package/dist/header/Header.js +0 -403
  171. package/dist/header/Header.stories.js +0 -176
  172. package/dist/header/close_icon.svg +0 -1
  173. package/dist/header/dxc_logo_black.svg +0 -8
  174. package/dist/header/hamb_menu_black.svg +0 -1
  175. package/dist/header/hamb_menu_white.svg +0 -1
  176. package/dist/header/readme.md +0 -33
  177. package/dist/input-text/InputText.stories.js +0 -209
  178. package/dist/input-text/error.svg +0 -1
  179. package/dist/input-text/readme.md +0 -91
  180. package/dist/layout/facebook.svg +0 -45
  181. package/dist/layout/linkedin.svg +0 -50
  182. package/dist/layout/twitter.svg +0 -53
  183. package/dist/link/readme.md +0 -51
  184. package/dist/main.d.ts +0 -2
  185. package/dist/new-input-text/NewInputText.js +0 -977
  186. package/dist/paginator/Paginator.js +0 -289
  187. package/dist/paginator/images/next.svg +0 -3
  188. package/dist/paginator/images/nextPage.svg +0 -3
  189. package/dist/paginator/images/previous.svg +0 -3
  190. package/dist/paginator/images/previousPage.svg +0 -3
  191. package/dist/paginator/readme.md +0 -50
  192. package/dist/password/styles.css +0 -3
  193. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  194. package/dist/progress-bar/readme.md +0 -63
  195. package/dist/radio/Radio.stories.js +0 -166
  196. package/dist/radio/readme.md +0 -70
  197. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  198. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  199. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  200. package/dist/slider/Slider.stories.js +0 -241
  201. package/dist/slider/readme.md +0 -64
  202. package/dist/spinner/Spinner.stories.js +0 -183
  203. package/dist/spinner/readme.md +0 -65
  204. package/dist/switch/Switch.stories.js +0 -134
  205. package/dist/switch/readme.md +0 -133
  206. package/dist/tabs/Tabs.js +0 -343
  207. package/dist/tabs/Tabs.stories.js +0 -130
  208. package/dist/tabs/readme.md +0 -78
  209. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  210. package/dist/tabs-for-sections/readme.md +0 -78
  211. package/dist/toggle/Toggle.stories.js +0 -297
  212. package/dist/toggle/readme.md +0 -80
  213. package/dist/toggle-group/ToggleGroup.js +0 -223
  214. package/dist/upload/Upload.stories.js +0 -72
  215. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  216. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  217. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  218. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  219. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  220. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  221. package/dist/upload/file-upload/FileToUpload.js +0 -184
  222. package/dist/upload/file-upload/audio-icon.svg +0 -4
  223. package/dist/upload/file-upload/close.svg +0 -4
  224. package/dist/upload/file-upload/file-icon.svg +0 -4
  225. package/dist/upload/file-upload/video-icon.svg +0 -4
  226. package/dist/upload/readme.md +0 -37
  227. package/dist/upload/transaction/Transaction.js +0 -175
  228. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  229. package/dist/upload/transaction/audio-icon.svg +0 -4
  230. package/dist/upload/transaction/error-icon.svg +0 -4
  231. package/dist/upload/transaction/file-icon-err.svg +0 -4
  232. package/dist/upload/transaction/file-icon.svg +0 -4
  233. package/dist/upload/transaction/image-icon-err.svg +0 -4
  234. package/dist/upload/transaction/image-icon.svg +0 -4
  235. package/dist/upload/transaction/success-icon.svg +0 -4
  236. package/dist/upload/transaction/video-icon-err.svg +0 -4
  237. package/dist/upload/transaction/video-icon.svg +0 -4
  238. package/dist/upload/transactions/Transactions.js +0 -138
  239. package/dist/wizard/invalid_icon.svg +0 -5
  240. package/dist/wizard/valid_icon.svg +0 -5
  241. package/dist/wizard/validation-wrong.svg +0 -6
  242. package/test/Accordion.test.js +0 -33
  243. package/test/AccordionGroup.test.js +0 -125
  244. package/test/Alert.test.js +0 -53
  245. package/test/Box.test.js +0 -10
  246. package/test/Button.test.js +0 -18
  247. package/test/Card.test.js +0 -30
  248. package/test/Checkbox.test.js +0 -45
  249. package/test/Chip.test.js +0 -25
  250. package/test/Date.test.js +0 -393
  251. package/test/Dialog.test.js +0 -23
  252. package/test/Dropdown.test.js +0 -145
  253. package/test/FileInput.test.js +0 -39
  254. package/test/Footer.test.js +0 -99
  255. package/test/Header.test.js +0 -39
  256. package/test/Heading.test.js +0 -35
  257. package/test/InputText.test.js +0 -240
  258. package/test/Link.test.js +0 -43
  259. package/test/NewDate.test.js +0 -203
  260. package/test/NewInputText.test.js +0 -866
  261. package/test/NewTextarea.test.js +0 -252
  262. package/test/Number.test.js +0 -241
  263. package/test/Paginator.test.js +0 -177
  264. package/test/Password.test.js +0 -76
  265. package/test/ProgressBar.test.js +0 -35
  266. package/test/Radio.test.js +0 -37
  267. package/test/ResultsetTable.test.js +0 -329
  268. package/test/Select.test.js +0 -212
  269. package/test/Sidenav.test.js +0 -45
  270. package/test/Slider.test.js +0 -82
  271. package/test/Spinner.test.js +0 -32
  272. package/test/Switch.test.js +0 -45
  273. package/test/Table.test.js +0 -36
  274. package/test/Tabs.test.js +0 -109
  275. package/test/TabsForSections.test.js +0 -34
  276. package/test/Tag.test.js +0 -32
  277. package/test/TextArea.test.js +0 -52
  278. package/test/ToggleGroup.test.js +0 -81
  279. package/test/Upload.test.js +0 -60
  280. package/test/Wizard.test.js +0 -130
  281. package/test/mocks/pngMock.js +0 -1
  282. package/test/mocks/svgMock.js +0 -1
@@ -1,94 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@storybook/react");
8
-
9
- var _addonActions = require("@storybook/addon-actions");
10
-
11
- require("../common/OpenSans.css");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _linkedin = _interopRequireDefault(require("../../.storybook/public/linkedin.svg"));
16
-
17
- var _facebook = _interopRequireDefault(require("../../.storybook/public/facebook.svg"));
18
-
19
- var _twitter = _interopRequireDefault(require("../../.storybook/public/twitter.svg"));
20
-
21
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
22
-
23
- var _readme = _interopRequireDefault(require("./readme.md"));
24
-
25
- var _Footer = _interopRequireDefault(require("./Footer"));
26
-
27
- var social = [{
28
- href: "https://www.linkedin.com/company/dxctechnology",
29
- logoSrc: _linkedin["default"]
30
- }, {
31
- href: "https://twitter.com/dxctechnology",
32
- logoSrc: _twitter["default"]
33
- }, {
34
- href: "https://www.facebook.com/DXCTechnology/",
35
- logoSrc: _facebook["default"]
36
- }];
37
- var bottom = [{
38
- href: "https://www.linkedin.com/company/dxctechnology",
39
- text: "Linkedin"
40
- }, {
41
- href: "https://twitter.com/dxctechnology",
42
- text: "Twitter"
43
- }, {
44
- href: "https://www.facebook.com/DXCTechnology/",
45
- text: "Facebook"
46
- }];
47
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Component", function () {
48
- return _react["default"].createElement("div", null, _react["default"].createElement(_Footer["default"], {
49
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
50
- bottomLinks: bottom,
51
- socialLinks: social
52
- }), _react["default"].createElement("div", {
53
- style: {
54
- marginTop: "20px"
55
- }
56
- }, _react["default"].createElement(_Footer["default"], {
57
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
58
- bottomLinks: bottom,
59
- socialLinks: social
60
- }, _react["default"].createElement(_InputText["default"], {
61
- assistiveText: "text input component",
62
- label: "Footer Child",
63
- theme: "dark"
64
- }), _react["default"].createElement(_InputText["default"], {
65
- assistiveText: "text input component",
66
- label: "Footer Child",
67
- theme: "dark"
68
- }), _react["default"].createElement(_InputText["default"], {
69
- assistiveText: "text input component",
70
- label: "Footer Child",
71
- theme: "dark"
72
- }), _react["default"].createElement(_InputText["default"], {
73
- assistiveText: "text input component",
74
- label: "Footer Child",
75
- theme: "dark"
76
- }))));
77
- }, {
78
- notes: {
79
- markdown: _readme["default"]
80
- }
81
- });
82
-
83
- var knobProps = function knobProps() {
84
- return {};
85
- };
86
-
87
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Knobs example", function () {
88
- var props = knobProps();
89
- return _react["default"].createElement("div", null);
90
- }, {
91
- notes: {
92
- markdown: _readme["default"]
93
- }
94
- });
@@ -1,15 +0,0 @@
1
- <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
2
- <g id="g12">
3
- <path id="path14" d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5" transform="translate(-68.528 65.45)" fill="#fff"/>
4
- <path id="path16" d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96" transform="translate(-77.56 65.45)" fill="#fff"/>
5
- <path id="path18" d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813" transform="translate(-86.019 65.583)" fill="#fff"/>
6
- <path id="path20" d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594" transform="translate(-95.903 65.45)" fill="#fff"/>
7
- <path id="path22" d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058" transform="translate(-105.869 65.45)" fill="#fff"/>
8
- <path id="path24" d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145" transform="translate(-115.631 65.583)" fill="#fff"/>
9
- <path id="path26" d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786" transform="translate(-126.654 65.45)" fill="#fff"/>
10
- <path id="path28" d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145" transform="translate(-135.016 65.583)" fill="#fff"/>
11
- <path id="path30" d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5" transform="translate(-145.284 65.583)" fill="#fff"/>
12
- <path id="path32" d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46" transform="translate(-154.162 65.45)" fill="#fff"/>
13
- <path id="path34" d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892" transform="translate(-21.08 69.298)" fill="#fff"/>
14
- </g>
15
- </svg>
@@ -1,41 +0,0 @@
1
- # DXC Footer Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>logoSrc: string</td>
13
- <td></td>
14
- <td>The path of an icon to replace the theme logo.</td>
15
- </tr>
16
- <tr>
17
- <td>socialLinks: object[]</td>
18
- <td><code>[]</code></td>
19
- <td>An array of objects representing the links that will be rendered at the bottom part of the footer. Each object has the following properties:
20
- <ul>
21
- <li><b>logoSrc</b>: The path of an icon for the link</li>
22
- <li><b>href</b>: URL of the page the link goes to</li>
23
- </ul>
24
- </td>
25
- </tr>
26
- <tr>
27
- <td>bottomLinks: object[]</td>
28
- <td><code>[]</code></td>
29
- <td>An array of objects representing the incon links that will be rendered at the top-right side of the footer. Each object has the following properties:
30
- <ul>
31
- <li><b>text</b>: Text for the link</li>
32
- <li><b>href</b>: URL of the page the link goes to</li>
33
- </ul>
34
- </td>
35
- </tr>
36
- <tr>
37
- <td>copyright: string</td>
38
- <td></td>
39
- <td>The text that will be displayed as copyright disclaimer.</td>
40
- </tr>
41
- </table>
@@ -1,403 +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 _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
-
36
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
37
-
38
- function _templateObject12() {
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 opacity: ", " !important;\n visibility: ", ";\n opacity: ", ";\n display: ", ";\n transition: opacity 0.2s 0.2s ease-in-out;\n z-index: ", ";\n"]);
40
-
41
- _templateObject12 = function _templateObject12() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject11() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n :focus {\n outline: ", " auto 1px;\n }\n"]);
50
-
51
- _templateObject11 = function _templateObject11() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject10() {
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
- _templateObject10 = function _templateObject10() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject9() {
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: ", ";\n width: ", ";\n height: 100vh;\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
- _templateObject9 = function _templateObject9() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject8() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-grow: 1;\n"]);
80
-
81
- _templateObject8 = function _templateObject8() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject7() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-style: ", ";\n font-size: ", ";\n text-transform: ", ";\n font-weight: ", ";\n color: ", ";\n"]);
90
-
91
- _templateObject7 = function _templateObject7() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject6() {
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
- _templateObject6 = function _templateObject6() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject5() {
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
- _templateObject5 = function _templateObject5() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject4() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: ", ";\n width: ", ";\n vertical-align: middle;\n"]);
120
-
121
- _templateObject4 = function _templateObject4() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- function _templateObject3() {
129
- var data = (0, _taggedTemplateLiteral2["default"])(["\n ", "\n"]);
130
-
131
- _templateObject3 = function _templateObject3() {
132
- return data;
133
- };
134
-
135
- return data;
136
- }
137
-
138
- function _templateObject2() {
139
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-bottom: ", ";\n\n &.MuiAppBar-colorPrimary {\n background-color: ", ";\n border-bottom: ", ";\n\n &.MuiPaper-elevation4 {\n box-shadow: none;\n }\n .ChildComponents {\n display: flex;\n align-items: center;\n }\n }\n & {\n min-height: ", ";\n }\n &.MuiAppBar-root {\n flex-direction: row;\n align-items: center;\n padding: ", ";\n justify-content: space-between;\n }\n"]);
140
-
141
- _templateObject2 = function _templateObject2() {
142
- return data;
143
- };
144
-
145
- return data;
146
- }
147
-
148
- function _templateObject() {
149
- var data = (0, _taggedTemplateLiteral2["default"])(["\n button {\n background-color: transparent;\n :hover {\n background-color: transparent;\n }\n }\n"]);
150
-
151
- _templateObject = function _templateObject() {
152
- return data;
153
- };
154
-
155
- return data;
156
- }
157
-
158
- var Dropdown = function Dropdown(props) {
159
- return _react["default"].createElement(HeaderDropdown, null, _react["default"].createElement(_Dropdown["default"], props));
160
- };
161
-
162
- var HeaderDropdown = _styledComponents["default"].div(_templateObject());
163
-
164
- var DxcHeader = function DxcHeader(_ref) {
165
- var _ref$underlined = _ref.underlined,
166
- underlined = _ref$underlined === void 0 ? false : _ref$underlined,
167
- _ref$logoSrc = _ref.logoSrc,
168
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
169
- onClick = _ref.onClick,
170
- content = _ref.content,
171
- responsiveContent = _ref.responsiveContent,
172
- margin = _ref.margin,
173
- padding = _ref.padding,
174
- _ref$tabIndex = _ref.tabIndex,
175
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
176
- var colorsTheme = (0, _useTheme["default"])();
177
- var ref = (0, _react.useRef)(null);
178
-
179
- var _useState = (0, _react.useState)(),
180
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
181
- refSize = _useState2[0],
182
- setRefSize = _useState2[1];
183
-
184
- var _useState3 = (0, _react.useState)(),
185
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
186
- isResponsive = _useState4[0],
187
- setIsResponsive = _useState4[1];
188
-
189
- var _useState5 = (0, _react.useState)(false),
190
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
191
- isMenuVisible = _useState6[0],
192
- setIsMenuVisible = _useState6[1];
193
-
194
- var handleResize = function handleResize(refWidth) {
195
- if (refWidth) {
196
- setRefSize(refWidth);
197
-
198
- if (refWidth <= _variables.responsiveSizes.tablet && !isResponsive) {
199
- setIsResponsive(true);
200
- } else {
201
- setIsResponsive(false);
202
- }
203
- }
204
- };
205
-
206
- var handleMenu = function handleMenu() {
207
- if (isResponsive && !isMenuVisible) {
208
- setIsMenuVisible(!isMenuVisible);
209
- } else {
210
- setIsMenuVisible(!isMenuVisible);
211
- }
212
- };
213
-
214
- var getLogoRendered = function getLogoRendered(intoMenu) {
215
- return _react["default"].createElement(LogoIcon, {
216
- logoSrc: logoSrc,
217
- src: intoMenu && logoSrc === "default" ? colorsTheme.header.logoResponsive : !intoMenu && logoSrc === "default" ? colorsTheme.header.logo : logoSrc
218
- });
219
- };
220
-
221
- var handleEventListener = function handleEventListener() {
222
- handleResize(ref.current.offsetWidth);
223
- };
224
-
225
- (0, _react.useEffect)(function () {
226
- if (ref.current) {
227
- window.addEventListener("resize", handleEventListener);
228
- handleResize(ref.current.offsetWidth);
229
- }
230
-
231
- return function () {
232
- window.removeEventListener("resize", handleEventListener);
233
- };
234
- }, []);
235
-
236
- var HamburgerIcon = function HamburgerIcon() {
237
- return _react["default"].createElement("svg", {
238
- xmlns: "http://www.w3.org/2000/svg",
239
- viewBox: "0 0 24 24",
240
- width: "24",
241
- height: "24"
242
- }, _react["default"].createElement("path", {
243
- 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"
244
- }));
245
- };
246
-
247
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
248
- theme: colorsTheme.header
249
- }, _react["default"].createElement(HeaderContainer, {
250
- underlined: underlined,
251
- position: "static",
252
- margin: margin,
253
- ref: ref
254
- }, _react["default"].createElement(LogoAnchor, {
255
- tabIndex: typeof onClick === "function" ? tabIndex : -1,
256
- interactuable: typeof onClick === "function",
257
- onClick: onClick
258
- }, getLogoRendered(false)), isResponsive && responsiveContent && _react["default"].createElement(MainContainer, null, _react["default"].createElement(ChildContainer, {
259
- padding: padding
260
- }, _react["default"].createElement(HamburguerItem, {
261
- tabIndex: tabIndex,
262
- underlined: underlined,
263
- onClick: handleMenu
264
- }, _react["default"].createElement(HamburgerIcon, null), _react["default"].createElement(HamburguerTitle, null, "Menu"))), _react["default"].createElement("div", null, _react["default"].createElement(ResponsiveMenu, {
265
- hasVisibility: isMenuVisible,
266
- refSize: refSize
267
- }, getLogoRendered(true), _react["default"].createElement(MenuContent, null, responsiveContent(handleMenu)), _react["default"].createElement(CloseContainer, {
268
- tabIndex: tabIndex,
269
- onClick: handleMenu,
270
- src: _close_icon["default"],
271
- className: "closeIcon"
272
- })), _react["default"].createElement(Overlay, {
273
- onClick: handleMenu,
274
- hasVisibility: isMenuVisible,
275
- refSize: refSize
276
- }))), !isResponsive && _react["default"].createElement(ChildContainer, {
277
- padding: padding
278
- }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
279
- color: colorsTheme.header.backgroundColor
280
- }, content))));
281
- };
282
-
283
- DxcHeader.Dropdown = Dropdown;
284
- var HeaderContainer = (0, _styledComponents["default"])(_AppBar["default"])(_templateObject2(), function (props) {
285
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
286
- }, function (props) {
287
- return props.theme.backgroundColor;
288
- }, function (props) {
289
- return props.underlined && "".concat(props.theme.underlinedThickness, " ").concat(props.theme.underlinedStyle, " ").concat(props.theme.underlinedColor);
290
- }, function (props) {
291
- return props.theme.minHeight;
292
- }, function (props) {
293
- return "".concat(props.theme.paddingTop, " ").concat(props.theme.paddingRight, " ").concat(props.theme.paddingBottom, " ").concat(props.theme.paddingLeft);
294
- });
295
-
296
- var LogoAnchor = _styledComponents["default"].a(_templateObject3(), function (props) {
297
- if (!props.interactuable) {
298
- return "cursor: default; outline:none;";
299
- } else {
300
- return "cursor: pointer;";
301
- }
302
- });
303
-
304
- var LogoIcon = _styledComponents["default"].img(_templateObject4(), function (props) {
305
- return props.theme.logoHeight;
306
- }, function (props) {
307
- return props.theme.logoWidth;
308
- });
309
-
310
- var ChildContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
311
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
312
- }, function (props) {
313
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
314
- }, function (props) {
315
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
316
- }, function (props) {
317
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
318
- }, function (props) {
319
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
320
- });
321
-
322
- var HamburguerItem = _styledComponents["default"].div(_templateObject6(), function (props) {
323
- return props.theme.hamburguerHoverColor;
324
- }, function (props) {
325
- return props.theme.hamburguerFocusColor;
326
- }, function (props) {
327
- return props.theme.hamburguerIconColor;
328
- });
329
-
330
- var HamburguerTitle = _styledComponents["default"].span(_templateObject7(), function (props) {
331
- return props.theme.hamburguerFontFamily;
332
- }, function (props) {
333
- return props.theme.hamburguerFontStyle;
334
- }, function (props) {
335
- return props.theme.hamburguerFontSize;
336
- }, function (props) {
337
- return props.theme.hamburguerTextTransform;
338
- }, function (props) {
339
- return props.theme.hamburguerFontWeight;
340
- }, function (props) {
341
- return props.theme.hamburguerFontColor;
342
- });
343
-
344
- var MainContainer = _styledComponents["default"].div(_templateObject8());
345
-
346
- var ResponsiveMenu = _styledComponents["default"].div(_templateObject9(), function (props) {
347
- return props.theme.menuBackgroundColor;
348
- }, function (props) {
349
- return props.theme.menuZindex;
350
- }, function (props) {
351
- return props.refSize <= _variables.responsiveSizes.laptop && props.refSize > _variables.responsiveSizes.mobileLarge ? "".concat(function (props) {
352
- return props.theme.menuTabletWidth;
353
- }) : "".concat(function (props) {
354
- return props.theme.menuMobileWidth;
355
- });
356
- }, function (props) {
357
- return props.hasVisibility ? "translateX(0)" : "translateX(100vw)";
358
- }, function (props) {
359
- return props.hasVisibility ? "1" : "0.96";
360
- }, _variables.spaces.xxsmall);
361
-
362
- var MenuContent = _styledComponents["default"].div(_templateObject10());
363
-
364
- var CloseContainer = _styledComponents["default"].img(_templateObject11(), function (props) {
365
- return props.theme.hamburguerFocusColor;
366
- });
367
-
368
- var Overlay = _styledComponents["default"].div(_templateObject12(), function (props) {
369
- return props.theme.overlayColor;
370
- }, function (props) {
371
- return props.theme.overlayOpacity;
372
- }, function (props) {
373
- return props.hasVisibility ? "visible" : "hidden";
374
- }, function (props) {
375
- return props.hasVisibility ? "1" : "0";
376
- }, function (props) {
377
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "none" : "";
378
- }, function (props) {
379
- return props.theme.overlayZindex;
380
- });
381
-
382
- DxcHeader.propTypes = {
383
- logoSrc: _propTypes["default"].string,
384
- underlined: _propTypes["default"].bool,
385
- onClick: _propTypes["default"].func,
386
- margin: _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
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
393
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
394
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
395
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
396
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
397
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
398
- content: _propTypes["default"].object,
399
- responsiveContent: _propTypes["default"].func,
400
- tabIndex: _propTypes["default"].number
401
- };
402
- var _default = DxcHeader;
403
- exports["default"] = _default;