@dxc-technology/halstack-react 0.0.0-0c95354 → 0.0.0-0da54d8

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 (319) 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.d.ts +4 -0
  8. package/accordion/Accordion.js +258 -0
  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/alert/Alert.js +290 -0
  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 +38 -34
  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/button/Button.js +182 -0
  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/card/Card.js +165 -0
  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/checkbox/Checkbox.js +253 -0
  34. package/checkbox/types.d.ts +60 -0
  35. package/checkbox/types.js +5 -0
  36. package/chip/Chip.js +221 -0
  37. package/chip/index.d.ts +22 -0
  38. package/{dist/common → common}/OpenSans.css +0 -0
  39. package/{dist/common → common}/RequiredComponent.js +5 -19
  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/common/utils.js +22 -0
  51. package/common/variables.js +1569 -0
  52. package/{dist/date → date}/Date.js +93 -77
  53. package/date/index.d.ts +27 -0
  54. package/date-input/DateInput.d.ts +4 -0
  55. package/date-input/DateInput.js +361 -0
  56. package/date-input/types.d.ts +100 -0
  57. package/date-input/types.js +5 -0
  58. package/dialog/Dialog.d.ts +4 -0
  59. package/dialog/Dialog.js +165 -0
  60. package/dialog/types.d.ts +43 -0
  61. package/dialog/types.js +5 -0
  62. package/dropdown/Dropdown.d.ts +4 -0
  63. package/dropdown/Dropdown.js +417 -0
  64. package/dropdown/types.d.ts +89 -0
  65. package/dropdown/types.js +5 -0
  66. package/file-input/FileInput.js +532 -0
  67. package/file-input/FileItem.js +193 -0
  68. package/file-input/index.d.ts +81 -0
  69. package/footer/Footer.d.ts +4 -0
  70. package/footer/Footer.js +266 -0
  71. package/footer/Icons.js +77 -0
  72. package/footer/types.d.ts +61 -0
  73. package/footer/types.js +5 -0
  74. package/header/Header.js +326 -0
  75. package/header/Icons.js +59 -0
  76. package/header/index.d.ts +25 -0
  77. package/heading/Heading.js +176 -0
  78. package/heading/index.d.ts +17 -0
  79. package/input-text/Icons.js +22 -0
  80. package/input-text/InputText.js +611 -0
  81. package/input-text/index.d.ts +36 -0
  82. package/layout/ApplicationLayout.js +235 -0
  83. package/layout/Icons.js +55 -0
  84. package/link/Link.js +183 -0
  85. package/link/index.d.ts +23 -0
  86. package/main.d.ts +44 -0
  87. package/{dist/main.js → main.js} +143 -43
  88. package/number-input/NumberInput.js +128 -0
  89. package/number-input/NumberInput.stories.jsx +115 -0
  90. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  91. package/number-input/index.d.ts +113 -0
  92. package/package.json +39 -24
  93. package/paginator/Icons.js +66 -0
  94. package/paginator/Paginator.d.ts +4 -0
  95. package/paginator/Paginator.js +198 -0
  96. package/paginator/types.d.ts +38 -0
  97. package/paginator/types.js +5 -0
  98. package/password-input/PasswordInput.js +199 -0
  99. package/password-input/PasswordInput.stories.jsx +131 -0
  100. package/password-input/index.d.ts +94 -0
  101. package/progress-bar/ProgressBar.d.ts +4 -0
  102. package/progress-bar/ProgressBar.js +170 -0
  103. package/progress-bar/types.d.ts +37 -0
  104. package/progress-bar/types.js +5 -0
  105. package/radio/Radio.d.ts +4 -0
  106. package/radio/Radio.js +174 -0
  107. package/radio/types.d.ts +54 -0
  108. package/radio/types.js +5 -0
  109. package/resultsetTable/ResultsetTable.js +274 -0
  110. package/resultsetTable/index.d.ts +19 -0
  111. package/select/Select.js +865 -0
  112. package/select/index.d.ts +131 -0
  113. package/sidenav/Sidenav.js +145 -0
  114. package/sidenav/index.d.ts +13 -0
  115. package/slider/Slider.d.ts +4 -0
  116. package/slider/Slider.js +306 -0
  117. package/slider/types.d.ts +83 -0
  118. package/slider/types.js +5 -0
  119. package/spinner/Spinner.js +267 -0
  120. package/spinner/index.d.ts +17 -0
  121. package/switch/Switch.d.ts +4 -0
  122. package/switch/Switch.js +179 -0
  123. package/switch/types.d.ts +58 -0
  124. package/switch/types.js +5 -0
  125. package/table/Table.js +118 -0
  126. package/table/index.d.ts +13 -0
  127. package/tabs/Tabs.d.ts +4 -0
  128. package/tabs/Tabs.js +211 -0
  129. package/tabs/types.d.ts +71 -0
  130. package/tabs/types.js +5 -0
  131. package/tag/Tag.js +208 -0
  132. package/tag/index.d.ts +24 -0
  133. package/text-input/TextInput.js +825 -0
  134. package/text-input/index.d.ts +135 -0
  135. package/textarea/Textarea.js +317 -0
  136. package/textarea/Textarea.stories.jsx +135 -0
  137. package/textarea/index.d.ts +117 -0
  138. package/{dist/toggle → toggle}/Toggle.js +30 -67
  139. package/toggle/index.d.ts +21 -0
  140. package/toggle-group/ToggleGroup.js +243 -0
  141. package/toggle-group/index.d.ts +21 -0
  142. package/{dist/upload → upload}/Upload.js +23 -22
  143. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  144. package/upload/buttons-upload/Icons.js +40 -0
  145. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  146. package/upload/dragAndDropArea/Icons.js +39 -0
  147. package/upload/file-upload/FileToUpload.js +115 -0
  148. package/upload/file-upload/Icons.js +66 -0
  149. package/upload/files-upload/FilesToUpload.js +109 -0
  150. package/upload/index.d.ts +15 -0
  151. package/upload/transaction/Icons.js +160 -0
  152. package/upload/transaction/Transaction.js +104 -0
  153. package/upload/transactions/Transactions.js +94 -0
  154. package/useTheme.js +22 -0
  155. package/wizard/Icons.js +65 -0
  156. package/wizard/Wizard.js +271 -0
  157. package/wizard/index.d.ts +18 -0
  158. package/README.md +0 -66
  159. package/babel.config.js +0 -4
  160. package/dist/accordion/Accordion.js +0 -264
  161. package/dist/accordion/Accordion.stories.js +0 -207
  162. package/dist/accordion/readme.md +0 -96
  163. package/dist/alert/Alert.js +0 -302
  164. package/dist/alert/Alert.stories.js +0 -158
  165. package/dist/alert/close.svg +0 -4
  166. package/dist/alert/error.svg +0 -4
  167. package/dist/alert/info.svg +0 -4
  168. package/dist/alert/readme.md +0 -43
  169. package/dist/alert/success.svg +0 -4
  170. package/dist/alert/warning.svg +0 -4
  171. package/dist/button/Button.js +0 -183
  172. package/dist/button/Button.stories.js +0 -224
  173. package/dist/button/readme.md +0 -93
  174. package/dist/card/Card.js +0 -217
  175. package/dist/checkbox/Checkbox.js +0 -224
  176. package/dist/checkbox/Checkbox.stories.js +0 -144
  177. package/dist/checkbox/readme.md +0 -116
  178. package/dist/chip/Chip.js +0 -170
  179. package/dist/common/services/example-service.js +0 -10
  180. package/dist/common/services/example-service.test.js +0 -12
  181. package/dist/common/utils.js +0 -42
  182. package/dist/common/variables.js +0 -296
  183. package/dist/date/Date.stories.js +0 -205
  184. package/dist/date/calendar.svg +0 -1
  185. package/dist/date/calendar_dark.svg +0 -1
  186. package/dist/date/readme.md +0 -73
  187. package/dist/dialog/Dialog.js +0 -197
  188. package/dist/dialog/Dialog.stories.js +0 -217
  189. package/dist/dialog/readme.md +0 -32
  190. package/dist/dropdown/Dropdown.js +0 -412
  191. package/dist/dropdown/Dropdown.stories.js +0 -249
  192. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  193. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  194. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  195. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  196. package/dist/dropdown/readme.md +0 -69
  197. package/dist/footer/Footer.js +0 -346
  198. package/dist/footer/Footer.stories.js +0 -94
  199. package/dist/footer/dxc_logo_wht.png +0 -0
  200. package/dist/footer/readme.md +0 -41
  201. package/dist/header/Header.js +0 -354
  202. package/dist/header/Header.stories.js +0 -176
  203. package/dist/header/close_icon.svg +0 -1
  204. package/dist/header/dxc_logo_black.png +0 -0
  205. package/dist/header/dxc_logo_white.png +0 -0
  206. package/dist/header/hamb_menu_black.svg +0 -1
  207. package/dist/header/hamb_menu_white.svg +0 -1
  208. package/dist/header/readme.md +0 -33
  209. package/dist/heading/Heading.js +0 -159
  210. package/dist/input-text/InputText.js +0 -519
  211. package/dist/input-text/InputText.stories.js +0 -209
  212. package/dist/input-text/error.svg +0 -1
  213. package/dist/input-text/readme.md +0 -91
  214. package/dist/link/Link.js +0 -136
  215. package/dist/link/readme.md +0 -51
  216. package/dist/paginator/Paginator.js +0 -178
  217. package/dist/paginator/images/next.svg +0 -3
  218. package/dist/paginator/images/nextPage.svg +0 -3
  219. package/dist/paginator/images/previous.svg +0 -3
  220. package/dist/paginator/images/previousPage.svg +0 -3
  221. package/dist/paginator/readme.md +0 -50
  222. package/dist/progress-bar/ProgressBar.js +0 -189
  223. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  224. package/dist/progress-bar/readme.md +0 -63
  225. package/dist/radio/Radio.js +0 -191
  226. package/dist/radio/Radio.stories.js +0 -166
  227. package/dist/radio/readme.md +0 -70
  228. package/dist/resultsetTable/ResultsetTable.js +0 -334
  229. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  230. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  231. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  232. package/dist/select/Select.js +0 -442
  233. package/dist/select/Select.stories.js +0 -235
  234. package/dist/select/readme.md +0 -72
  235. package/dist/sidenav/Sidenav.js +0 -237
  236. package/dist/sidenav/arrow_icon.svg +0 -3
  237. package/dist/slider/Slider.js +0 -258
  238. package/dist/slider/Slider.stories.js +0 -241
  239. package/dist/slider/readme.md +0 -64
  240. package/dist/spinner/Spinner.js +0 -196
  241. package/dist/spinner/Spinner.stories.js +0 -183
  242. package/dist/spinner/readme.md +0 -65
  243. package/dist/switch/Switch.js +0 -197
  244. package/dist/switch/Switch.stories.js +0 -134
  245. package/dist/switch/readme.md +0 -133
  246. package/dist/table/Table.js +0 -84
  247. package/dist/tabs/Tabs.js +0 -170
  248. package/dist/tabs/Tabs.stories.js +0 -130
  249. package/dist/tabs/readme.md +0 -78
  250. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  251. package/dist/tabs-for-sections/readme.md +0 -78
  252. package/dist/tag/Tag.js +0 -217
  253. package/dist/textarea/Textarea.js +0 -226
  254. package/dist/toggle/Toggle.stories.js +0 -297
  255. package/dist/toggle/readme.md +0 -80
  256. package/dist/upload/Upload.stories.js +0 -72
  257. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -125
  258. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  259. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  260. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -282
  261. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  262. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  263. package/dist/upload/file-upload/FileToUpload.js +0 -158
  264. package/dist/upload/file-upload/audio-icon.svg +0 -4
  265. package/dist/upload/file-upload/close.svg +0 -4
  266. package/dist/upload/file-upload/file-icon.svg +0 -4
  267. package/dist/upload/file-upload/video-icon.svg +0 -4
  268. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  269. package/dist/upload/readme.md +0 -37
  270. package/dist/upload/transaction/Transaction.js +0 -155
  271. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  272. package/dist/upload/transaction/audio-icon.svg +0 -4
  273. package/dist/upload/transaction/error-icon.svg +0 -4
  274. package/dist/upload/transaction/file-icon-err.svg +0 -4
  275. package/dist/upload/transaction/file-icon.svg +0 -4
  276. package/dist/upload/transaction/image-icon-err.svg +0 -4
  277. package/dist/upload/transaction/image-icon.svg +0 -4
  278. package/dist/upload/transaction/success-icon.svg +0 -4
  279. package/dist/upload/transaction/video-icon-err.svg +0 -4
  280. package/dist/upload/transaction/video-icon.svg +0 -4
  281. package/dist/upload/transactions/Transactions.js +0 -120
  282. package/dist/wizard/Wizard.js +0 -320
  283. package/dist/wizard/invalid_icon.svg +0 -6
  284. package/dist/wizard/valid_icon.svg +0 -6
  285. package/dist/wizard/validation-wrong.svg +0 -6
  286. package/test/Accordion.test.js +0 -33
  287. package/test/Alert.test.js +0 -53
  288. package/test/Box.test.js +0 -10
  289. package/test/Button.test.js +0 -18
  290. package/test/Card.test.js +0 -30
  291. package/test/Checkbox.test.js +0 -45
  292. package/test/Chip.test.js +0 -25
  293. package/test/Date.test.js +0 -393
  294. package/test/Dialog.test.js +0 -23
  295. package/test/Dropdown.test.js +0 -130
  296. package/test/Footer.test.js +0 -99
  297. package/test/Header.test.js +0 -39
  298. package/test/Heading.test.js +0 -35
  299. package/test/InputText.test.js +0 -236
  300. package/test/Link.test.js +0 -25
  301. package/test/Paginator.test.js +0 -165
  302. package/test/ProgressBar.test.js +0 -35
  303. package/test/Radio.test.js +0 -37
  304. package/test/ResultsetTable.test.js +0 -282
  305. package/test/Select.test.js +0 -191
  306. package/test/Sidenav.test.js +0 -87
  307. package/test/Slider.test.js +0 -65
  308. package/test/Spinner.test.js +0 -27
  309. package/test/Switch.test.js +0 -45
  310. package/test/Table.test.js +0 -36
  311. package/test/Tabs.test.js +0 -88
  312. package/test/TabsForSections.test.js +0 -34
  313. package/test/Tag.test.js +0 -32
  314. package/test/TextArea.test.js +0 -52
  315. package/test/Toggle.test.js +0 -43
  316. package/test/Upload.test.js +0 -60
  317. package/test/Wizard.test.js +0 -130
  318. package/test/mocks/pngMock.js +0 -1
  319. package/test/mocks/svgMock.js +0 -1
@@ -1,249 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
14
-
15
- var _addonKnobs = require("@storybook/addon-knobs");
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _Dropdown = _interopRequireDefault(require("./Dropdown"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- var optionsWithoutIcon = [{
28
- value: 1,
29
- label: "Amazon"
30
- }, {
31
- value: 2,
32
- label: "Ebay"
33
- }, {
34
- value: 3,
35
- label: "Apple"
36
- }];
37
- var optionsWithIcon = [{
38
- value: 1,
39
- label: "Amazon",
40
- iconSrc: _amazon["default"]
41
- }, {
42
- value: 2,
43
- label: "Ebay",
44
- iconSrc: _amazon["default"]
45
- }, {
46
- value: 3,
47
- label: "Apple",
48
- iconSrc: _amazon["default"]
49
- }];
50
-
51
- var selectOption = function selectOption(option) {
52
- console.log(option);
53
- };
54
-
55
- (0, _react2.storiesOf)("Form Components|Dropdown", module).add("Component", function () {
56
- return _react["default"].createElement("div", null, _react["default"].createElement("div", {
57
- style: {
58
- height: "200px",
59
- display: "flex",
60
- flexWrap: "wrap"
61
- }
62
- }, _react["default"].createElement(_Dropdown["default"], {
63
- options: optionsWithoutIcon,
64
- onSelectOption: selectOption,
65
- iconSrc: _amazon["default"],
66
- label: "Basic dropdown",
67
- theme: "light",
68
- mode: "basic",
69
- optionsIconPosition: "before"
70
- }), _react["default"].createElement(_Dropdown["default"], {
71
- options: optionsWithIcon,
72
- onSelectOption: selectOption,
73
- iconSrc: _amazon["default"],
74
- label: "Outlined dropdown",
75
- theme: "light",
76
- mode: "outlined",
77
- optionsIconPosition: "after"
78
- }), _react["default"].createElement(_Dropdown["default"], {
79
- options: optionsWithoutIcon,
80
- onSelectOption: selectOption,
81
- label: "Basic dropdown",
82
- theme: "light",
83
- mode: "basic",
84
- optionsIconPosition: "before"
85
- }), _react["default"].createElement(_Dropdown["default"], {
86
- options: optionsWithoutIcon,
87
- onSelectOption: selectOption,
88
- label: "Outlined dropdown",
89
- theme: "light",
90
- mode: "outlined",
91
- optionsIconPosition: "after"
92
- }), _react["default"].createElement(_Dropdown["default"], {
93
- options: optionsWithIcon,
94
- onSelectOption: selectOption,
95
- iconSrc: _amazon["default"],
96
- label: "",
97
- theme: "light",
98
- mode: "basic",
99
- caretHidden: true,
100
- optionsIconPosition: "before"
101
- }), _react["default"].createElement(_Dropdown["default"], {
102
- options: optionsWithIcon,
103
- onSelectOption: selectOption,
104
- iconSrc: _amazon["default"],
105
- label: "",
106
- theme: "light",
107
- mode: "outlined",
108
- caretHidden: true,
109
- optionsIconPosition: "after"
110
- }), _react["default"].createElement(_Dropdown["default"], {
111
- options: optionsWithIcon,
112
- onSelectOption: selectOption,
113
- iconSrc: _amazon["default"],
114
- label: "",
115
- theme: "light",
116
- mode: "basic",
117
- caretHidden: false,
118
- optionsIconPosition: "before"
119
- }), _react["default"].createElement(_Dropdown["default"], {
120
- options: optionsWithIcon,
121
- onSelectOption: selectOption,
122
- iconSrc: _amazon["default"],
123
- label: "",
124
- theme: "light",
125
- mode: "outlined",
126
- caretHidden: false,
127
- optionsIconPosition: "after"
128
- })), _react["default"].createElement("div", {
129
- style: {
130
- background: "black",
131
- display: "flex",
132
- height: "250px",
133
- flexWrap: "wrap"
134
- }
135
- }, _react["default"].createElement(_Dropdown["default"], {
136
- options: optionsWithIcon,
137
- onSelectOption: selectOption,
138
- iconSrc: _amazon["default"],
139
- label: "Basic dropdown",
140
- theme: "dark",
141
- mode: "basic",
142
- optionsIconPosition: "before"
143
- }), _react["default"].createElement(_Dropdown["default"], {
144
- options: optionsWithIcon,
145
- onSelectOption: selectOption,
146
- iconSrc: _amazon["default"],
147
- label: "Outlined dropdown",
148
- theme: "dark",
149
- mode: "outlined",
150
- optionsIconPosition: "after"
151
- }), _react["default"].createElement(_Dropdown["default"], {
152
- options: optionsWithoutIcon,
153
- onSelectOption: selectOption,
154
- label: "Basic dropdown",
155
- theme: "dark",
156
- mode: "basic",
157
- optionsIconPosition: "before"
158
- }), _react["default"].createElement(_Dropdown["default"], {
159
- options: optionsWithoutIcon,
160
- onSelectOption: selectOption,
161
- label: "Outlined dropdown",
162
- theme: "dark",
163
- mode: "outlined",
164
- optionsIconPosition: "after"
165
- }), _react["default"].createElement(_Dropdown["default"], {
166
- options: optionsWithIcon,
167
- onSelectOption: selectOption,
168
- iconSrc: _amazon["default"],
169
- label: "",
170
- theme: "dark",
171
- mode: "basic",
172
- caretHidden: true,
173
- optionsIconPosition: "before"
174
- }), _react["default"].createElement(_Dropdown["default"], {
175
- options: optionsWithIcon,
176
- onSelectOption: selectOption,
177
- iconSrc: _amazon["default"],
178
- label: "",
179
- theme: "dark",
180
- mode: "outlined",
181
- caretHidden: true,
182
- optionsIconPosition: "after"
183
- }), _react["default"].createElement(_Dropdown["default"], {
184
- options: optionsWithIcon,
185
- onSelectOption: selectOption,
186
- iconSrc: _amazon["default"],
187
- label: "",
188
- theme: "dark",
189
- mode: "basic",
190
- caretHidden: false,
191
- optionsIconPosition: "before"
192
- }), _react["default"].createElement(_Dropdown["default"], {
193
- options: optionsWithIcon,
194
- onSelectOption: selectOption,
195
- iconSrc: _amazon["default"],
196
- label: "",
197
- theme: "dark",
198
- mode: "outlined",
199
- caretHidden: false,
200
- optionsIconPosition: "after"
201
- })));
202
- }, {
203
- notes: {
204
- markdown: _readme["default"]
205
- }
206
- });
207
-
208
- var knobProps = function knobProps() {
209
- return {
210
- optionsIconPosition: (0, _addonKnobs.select)("Options Icon Position", {
211
- before: "before",
212
- after: "after"
213
- }, "before"),
214
- iconPosition: (0, _addonKnobs.select)("Icon Position", {
215
- before: "before",
216
- after: "after"
217
- }, "before"),
218
- label: (0, _addonKnobs.text)("Label", "Test Dropdown"),
219
- theme: (0, _addonKnobs.select)("Theme", {
220
- light: "light",
221
- dark: "dark"
222
- }, "light"),
223
- mode: (0, _addonKnobs.select)("Mode", {
224
- basic: "basic",
225
- outlined: "outlined"
226
- }, "basic"),
227
- caretHidden: (0, _addonKnobs["boolean"])("Caret Hidden", false),
228
- disableRipple: (0, _addonKnobs["boolean"])("Disable Ripple", false)
229
- };
230
- };
231
-
232
- (0, _react2.storiesOf)("Form Components|Dropdown", module).add("Knobs example", function () {
233
- var props = knobProps();
234
- return _react["default"].createElement("div", {
235
- style: {
236
- paddingTop: "20px",
237
- height: "200px",
238
- background: props.theme === "dark" && "black" || "transparent"
239
- }
240
- }, _react["default"].createElement(_Dropdown["default"], (0, _extends2["default"])({}, props, {
241
- iconSrc: _amazon["default"],
242
- options: optionsWithIcon,
243
- onSelectOption: selectOption
244
- })));
245
- }, {
246
- notes: {
247
- markdown: _readme["default"]
248
- }
249
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1,4 +0,0 @@
1
- <svg id="baseline-arrow_drop_down-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path id="Trazado_2384" data-name="Trazado 2384" d="M7,10l5,5,5-5Z" fill="#fff"/>
3
- <path id="Trazado_2385" data-name="Trazado 2385" d="M0,0H24V24H0Z" fill="none"/>
4
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7 14l5-5 5 5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1,4 +0,0 @@
1
- <svg id="baseline-arrow_drop_up-24px" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
2
- <path id="Trazado_2386" data-name="Trazado 2386" d="M7,14l5-5,5,5Z" fill="#fff"/>
3
- <path id="Trazado_2387" data-name="Trazado 2387" d="M0,0H24V24H0Z" fill="none"/>
4
- </svg>
@@ -1,69 +0,0 @@
1
- # DXC Dropdown 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>options: object[]</td>
13
- <td><code>[]</code></td>
14
- <td>An array of objects representing the options. Each object has the following properties:
15
- <ul>
16
- <li><b>label</b>: Option display value</li>
17
- <li><b>iconSrc</b>: URL of the icon that will be placed next to the option label (Optional)</li>
18
- <li><b>value</b>: Option inner value</li>
19
- <li><b>options</b>: array for nested</li>
20
- </ul>
21
- </td>
22
- </tr>
23
- <tr>
24
- <td>optionsIconPosition: 'before' | 'after'</td>
25
- <td><code>'before'</code></td>
26
- <td>In case options include an icon, whether the icon should appear after or before the label.</td>
27
- </tr>
28
- <tr>
29
- <td>iconSrc: string</td>
30
- <td><code></code></td>
31
- <td>URL of the icon that will be placed next to the option label (Optional)</td>
32
- </tr>
33
- <tr>
34
- <td>iconPosition: 'before' | 'after'</td>
35
- <td><code>'before'</code></td>
36
- <td>Whether the icon should appear after or before the label.</td>
37
- </tr>
38
- <tr>
39
- <td>label: string</td>
40
- <td></td>
41
- <td>Text to be placed within the dropdown.</td>
42
- </tr>
43
- <tr>
44
- <td>theme: 'light' | 'dark'</td>
45
- <td><code>'light'</code></td>
46
- <td>Uses one of the available component themes.</td>
47
- </tr>
48
- <tr>
49
- <td>mode: 'basic' | 'outlined'</td>
50
- <td><code>'basic'</code></td>
51
- <td>Uses one of the available component modes.</td>
52
- </tr>
53
- <tr>
54
- <td>showCaret: boolean</td>
55
- <td><code>true</code></td>
56
- <td>Whether the arrow next to the labe must be displayed or not.</td>
57
- </tr>
58
- <tr>
59
- <td>disableRipple: boolean</td>
60
- <td><code>false</code></td>
61
- <td>If true, the ripple effect will be disabled.</td>
62
- </tr>
63
- <tr>
64
- <td>onSelectOption: function</td>
65
- <td></td>
66
- <td>This function will be called every time the selection changes. The string with the key of the selected value will be passed as a parameter to this function.</td>
67
- </tr>
68
- </table>
69
-
@@ -1,346 +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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _dxc_logo_wht = _interopRequireDefault(require("./dxc_logo_wht.png"));
27
-
28
- require("../common/OpenSans.css");
29
-
30
- var _variables = require("../common/variables.js");
31
-
32
- var _ThemeContext = _interopRequireDefault(require("../ThemeContext.js"));
33
-
34
- var _utils = require("../common/utils.js");
35
-
36
- function _templateObject11() {
37
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n color: ", ";\n font-size: 12px;\n"]);
38
-
39
- _templateObject11 = function _templateObject11() {
40
- return data;
41
- };
42
-
43
- return data;
44
- }
45
-
46
- function _templateObject10() {
47
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px 10px;\n color: ", ";\n"]);
48
-
49
- _templateObject10 = function _templateObject10() {
50
- return data;
51
- };
52
-
53
- return data;
54
- }
55
-
56
- function _templateObject9() {
57
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: 25px;\n width: 25px;\n fill: ", ";\n }\n"]);
58
-
59
- _templateObject9 = function _templateObject9() {
60
- return data;
61
- };
62
-
63
- return data;
64
- }
65
-
66
- function _templateObject8() {
67
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n margin-left: ", ";\n }\n"]);
68
-
69
- _templateObject8 = function _templateObject8() {
70
- return data;
71
- };
72
-
73
- return data;
74
- }
75
-
76
- function _templateObject7() {
77
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 34px;\n width: auto;\n"]);
78
-
79
- _templateObject7 = function _templateObject7() {
80
- return data;
81
- };
82
-
83
- return data;
84
- }
85
-
86
- function _templateObject6() {
87
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 12px;\n color: ", ";\n max-width: ", ";\n width: ", ";\n text-align: ", ";\n"]);
88
-
89
- _templateObject6 = function _templateObject6() {
90
- return data;
91
- };
92
-
93
- return data;
94
- }
95
-
96
- function _templateObject5() {
97
- var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 15px;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n color: ", ";\n overflow: hidden;\n"]);
98
-
99
- _templateObject5 = function _templateObject5() {
100
- return data;
101
- };
102
-
103
- return data;
104
- }
105
-
106
- function _templateObject4() {
107
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding-top: 6px;\n border-top: 2px solid ", ";\n display: inline-flex;\n flex-wrap: wrap;\n max-width: ", ";\n width: ", ";\n & > span:last-child span {\n display: none;\n }\n margin: ", ";\n"]);
108
-
109
- _templateObject4 = function _templateObject4() {
110
- return data;
111
- };
112
-
113
- return data;
114
- }
115
-
116
- function _templateObject3() {
117
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n flex-direction: ", ";\n align-items: ", ";\n"]);
118
-
119
- _templateObject3 = function _templateObject3() {
120
- return data;
121
- };
122
-
123
- return data;
124
- }
125
-
126
- function _templateObject2() {
127
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n"]);
128
-
129
- _templateObject2 = function _templateObject2() {
130
- return data;
131
- };
132
-
133
- return data;
134
- }
135
-
136
- function _templateObject() {
137
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n padding: ", ";\n font-family: \"Open Sans\", sans-serif;\n background-color: ", ";\n margin-top: ", ";\n }\n"]);
138
-
139
- _templateObject = function _templateObject() {
140
- return data;
141
- };
142
-
143
- return data;
144
- }
145
-
146
- var DxcFooter = function DxcFooter(_ref) {
147
- var _ref$socialLinks = _ref.socialLinks,
148
- socialLinks = _ref$socialLinks === void 0 ? [] : _ref$socialLinks,
149
- _ref$bottomLinks = _ref.bottomLinks,
150
- bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
151
- _ref$copyright = _ref.copyright,
152
- copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
153
- _ref$logoSrc = _ref.logoSrc,
154
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
155
- children = _ref.children,
156
- padding = _ref.padding,
157
- margin = _ref.margin;
158
- var ref = (0, _react.useRef)(null);
159
-
160
- var _useState = (0, _react.useState)(),
161
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
162
- refSize = _useState2[0],
163
- setRefSize = _useState2[1];
164
-
165
- var _useState3 = (0, _react.useState)(false),
166
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
167
- isResponsiveTablet = _useState4[0],
168
- setIsResponsiveTablet = _useState4[1];
169
-
170
- var _useState5 = (0, _react.useState)(false),
171
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
172
- isResponsivePhone = _useState6[0],
173
- setIsResponsivePhone = _useState6[1];
174
-
175
- var customTheme = (0, _react.useContext)(_ThemeContext["default"]);
176
- var colorsTheme = (0, _react.useMemo)(function () {
177
- return (0, _utils.getCustomTheme)(_variables.theme, (0, _utils.getCustomTheme)(_variables.defaultTheme, customTheme));
178
- }, [customTheme]);
179
-
180
- var handleResize = function handleResize(refWidth) {
181
- if (ref.current) {
182
- setRefSize(refWidth);
183
-
184
- if (refWidth <= _variables.responsiveSizes.tablet && refWidth > _variables.responsiveSizes.mobileLarge) {
185
- setIsResponsiveTablet(true);
186
- setIsResponsivePhone(false);
187
- } else if (refWidth <= _variables.responsiveSizes.tablet && refWidth <= _variables.responsiveSizes.mobileLarge) {
188
- setIsResponsivePhone(true);
189
- setIsResponsiveTablet(false);
190
- } else {
191
- setIsResponsiveTablet(false);
192
- setIsResponsivePhone(false);
193
- }
194
- }
195
- };
196
-
197
- var handleEventListener = function handleEventListener() {
198
- handleResize(ref.current.offsetWidth);
199
- };
200
-
201
- (0, _react.useEffect)(function () {
202
- window.addEventListener("resize", handleEventListener);
203
- handleResize(ref.current.offsetWidth);
204
- return function () {
205
- window.removeEventListener("resize", handleEventListener);
206
- };
207
- }, []);
208
- var socialLink = socialLinks.map(function (link, index) {
209
- return _react["default"].createElement(SocialAnchor, {
210
- key: "social".concat(index).concat(link.href),
211
- index: index,
212
- href: link && link.href ? link.href : ""
213
- }, link && link.logoSrc && _react["default"].createElement(SocialIcon, {
214
- src: link.logoSrc
215
- }));
216
- });
217
- var bottomLink = bottomLinks.map(function (link, index) {
218
- return _react["default"].createElement("span", {
219
- key: "bottom".concat(index).concat(link.text)
220
- }, _react["default"].createElement(BottomLink, {
221
- href: link && link.href ? link.href : ""
222
- }, link && link.text ? link.text : ""), _react["default"].createElement(Point, {
223
- index: index
224
- }, "\xB7"));
225
- });
226
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
227
- theme: colorsTheme.footer
228
- }, _react["default"].createElement(FooterContainer, {
229
- margin: margin,
230
- refSize: refSize,
231
- ref: ref
232
- }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
233
- logoSrc: logoSrc,
234
- src: logoSrc === "default" ? _dxc_logo_wht["default"] : logoSrc
235
- }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
236
- className: "footerFooter",
237
- refSize: refSize
238
- }, _react["default"].createElement(BottomLinks, {
239
- refSize: refSize
240
- }, bottomLink), _react["default"].createElement(Copyright, {
241
- refSize: refSize
242
- }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && _react["default"].createElement("div", null, _react["default"].createElement(ChildComponents, {
243
- padding: padding
244
- }, children), _react["default"].createElement(FooterFooter, {
245
- className: "footerFooter"
246
- }, _react["default"].createElement(BottomLinks, {
247
- refSize: refSize
248
- }, bottomLink), _react["default"].createElement(Copyright, {
249
- refSize: refSize
250
- }, copyright)))));
251
- };
252
-
253
- var FooterContainer = _styledComponents["default"].div(_templateObject(), function (props) {
254
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "20px 60px 20px 20px";
255
- }, function (props) {
256
- return props.theme.backgroundColor;
257
- }, function (props) {
258
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
259
- });
260
-
261
- var FooterHeader = _styledComponents["default"].div(_templateObject2());
262
-
263
- var FooterFooter = _styledComponents["default"].div(_templateObject3(), function (props) {
264
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "column" : "row";
265
- }, function (props) {
266
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
267
- });
268
-
269
- var BottomLinks = _styledComponents["default"].div(_templateObject4(), function (props) {
270
- return props.theme.lineColor;
271
- }, function (props) {
272
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "60%";
273
- }, function (props) {
274
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
275
- }, function (props) {
276
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "40px 0 40px 0" : "";
277
- });
278
-
279
- var ChildComponents = _styledComponents["default"].div(_templateObject5(), function (props) {
280
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
281
- }, function (props) {
282
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
283
- }, function (props) {
284
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
285
- }, function (props) {
286
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
287
- }, function (props) {
288
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
289
- }, function (props) {
290
- return props.theme.fontColor;
291
- });
292
-
293
- var Copyright = _styledComponents["default"].div(_templateObject6(), function (props) {
294
- return props.theme.fontColor;
295
- }, function (props) {
296
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "40%";
297
- }, function (props) {
298
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
299
- }, function (props) {
300
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "right";
301
- });
302
-
303
- var LogoIcon = _styledComponents["default"].img(_templateObject7());
304
-
305
- var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
306
- return props.index === 0 ? "0px" : "15px";
307
- });
308
-
309
- var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
310
- return props.theme.fontColor;
311
- });
312
-
313
- var Point = _styledComponents["default"].span(_templateObject10(), function (props) {
314
- return props.theme.fontColor;
315
- });
316
-
317
- var BottomLink = _styledComponents["default"].a(_templateObject11(), function (props) {
318
- return props.theme.fontColor;
319
- });
320
-
321
- DxcFooter.propTypes = {
322
- logoSrc: _propTypes["default"].string,
323
- socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
324
- logoSrc: _propTypes["default"].string.isRequired,
325
- href: _propTypes["default"].string
326
- })),
327
- bottomLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
328
- text: _propTypes["default"].string.isRequired,
329
- href: _propTypes["default"].string
330
- })),
331
- copyright: _propTypes["default"].string,
332
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
333
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
334
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
335
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
336
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
337
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
338
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
339
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
340
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
341
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
342
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
343
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
344
- };
345
- var _default = DxcFooter;
346
- exports["default"] = _default;