@dxc-technology/halstack-react 0.0.0-e07428e → 0.0.0-e081e21

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 (292) 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/accordion-group/AccordionGroup.js +184 -0
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.d.ts +4 -0
  12. package/alert/Alert.js +290 -0
  13. package/alert/types.d.ts +49 -0
  14. package/alert/types.js +5 -0
  15. package/badge/Badge.js +59 -0
  16. package/{dist/box → box}/Box.js +42 -26
  17. package/box/index.d.ts +25 -0
  18. package/button/Button.d.ts +4 -0
  19. package/button/Button.js +182 -0
  20. package/button/Button.stories.tsx +306 -0
  21. package/button/types.d.ts +57 -0
  22. package/button/types.js +5 -0
  23. package/card/Card.js +200 -0
  24. package/card/index.d.ts +22 -0
  25. package/checkbox/Checkbox.d.ts +4 -0
  26. package/checkbox/Checkbox.js +253 -0
  27. package/checkbox/types.d.ts +61 -0
  28. package/checkbox/types.js +5 -0
  29. package/chip/Chip.js +221 -0
  30. package/chip/index.d.ts +22 -0
  31. package/{dist/common → common}/OpenSans.css +0 -0
  32. package/{dist/common → common}/RequiredComponent.js +5 -19
  33. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  37. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  38. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  39. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  43. package/common/utils.js +22 -0
  44. package/common/variables.js +1569 -0
  45. package/{dist/date → date}/Date.js +121 -90
  46. package/date/index.d.ts +27 -0
  47. package/date-input/DateInput.js +396 -0
  48. package/date-input/index.d.ts +95 -0
  49. package/dialog/Dialog.js +184 -0
  50. package/dialog/index.d.ts +18 -0
  51. package/dropdown/Dropdown.js +450 -0
  52. package/dropdown/index.d.ts +26 -0
  53. package/file-input/FileInput.js +532 -0
  54. package/file-input/FileItem.js +193 -0
  55. package/file-input/index.d.ts +81 -0
  56. package/footer/Footer.js +297 -0
  57. package/footer/Icons.js +77 -0
  58. package/footer/index.d.ts +25 -0
  59. package/header/Header.js +326 -0
  60. package/header/Icons.js +59 -0
  61. package/header/index.d.ts +25 -0
  62. package/heading/Heading.js +176 -0
  63. package/heading/index.d.ts +17 -0
  64. package/input-text/Icons.js +22 -0
  65. package/input-text/InputText.js +611 -0
  66. package/input-text/index.d.ts +36 -0
  67. package/layout/ApplicationLayout.js +235 -0
  68. package/layout/Icons.js +55 -0
  69. package/link/Link.js +183 -0
  70. package/link/index.d.ts +23 -0
  71. package/main.d.ts +44 -0
  72. package/{dist/main.js → main.js} +143 -43
  73. package/number-input/NumberInput.js +128 -0
  74. package/{dist/ThemeContext.js → number-input/NumberInputContext.js} +3 -2
  75. package/number-input/index.d.ts +113 -0
  76. package/package.json +39 -24
  77. package/paginator/Icons.js +66 -0
  78. package/paginator/Paginator.d.ts +4 -0
  79. package/paginator/Paginator.js +198 -0
  80. package/paginator/types.d.ts +38 -0
  81. package/paginator/types.js +5 -0
  82. package/password-input/PasswordInput.js +199 -0
  83. package/password-input/index.d.ts +94 -0
  84. package/progress-bar/ProgressBar.js +188 -0
  85. package/progress-bar/index.d.ts +18 -0
  86. package/{dist/radio → radio}/Radio.js +48 -44
  87. package/radio/index.d.ts +23 -0
  88. package/resultsetTable/ResultsetTable.js +274 -0
  89. package/resultsetTable/index.d.ts +19 -0
  90. package/select/Select.js +865 -0
  91. package/select/index.d.ts +131 -0
  92. package/sidenav/Sidenav.js +145 -0
  93. package/sidenav/index.d.ts +13 -0
  94. package/slider/Slider.js +340 -0
  95. package/slider/index.d.ts +29 -0
  96. package/spinner/Spinner.js +267 -0
  97. package/spinner/index.d.ts +17 -0
  98. package/switch/Switch.d.ts +4 -0
  99. package/switch/Switch.js +179 -0
  100. package/switch/types.d.ts +58 -0
  101. package/switch/types.js +5 -0
  102. package/table/Table.js +118 -0
  103. package/table/index.d.ts +13 -0
  104. package/tabs/Tabs.js +259 -0
  105. package/tabs/index.d.ts +19 -0
  106. package/tag/Tag.js +208 -0
  107. package/tag/index.d.ts +24 -0
  108. package/text-input/TextInput.js +825 -0
  109. package/text-input/index.d.ts +135 -0
  110. package/textarea/Textarea.js +317 -0
  111. package/textarea/index.d.ts +117 -0
  112. package/{dist/toggle → toggle}/Toggle.js +30 -67
  113. package/toggle/index.d.ts +21 -0
  114. package/toggle-group/ToggleGroup.js +243 -0
  115. package/toggle-group/index.d.ts +21 -0
  116. package/{dist/upload → upload}/Upload.js +23 -22
  117. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  118. package/upload/buttons-upload/Icons.js +40 -0
  119. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  120. package/upload/dragAndDropArea/Icons.js +39 -0
  121. package/upload/file-upload/FileToUpload.js +115 -0
  122. package/upload/file-upload/Icons.js +66 -0
  123. package/upload/files-upload/FilesToUpload.js +109 -0
  124. package/upload/index.d.ts +15 -0
  125. package/upload/transaction/Icons.js +160 -0
  126. package/upload/transaction/Transaction.js +104 -0
  127. package/upload/transactions/Transactions.js +94 -0
  128. package/useTheme.js +22 -0
  129. package/wizard/Icons.js +65 -0
  130. package/wizard/Wizard.js +271 -0
  131. package/wizard/index.d.ts +18 -0
  132. package/README.md +0 -66
  133. package/babel.config.js +0 -4
  134. package/dist/accordion/Accordion.js +0 -264
  135. package/dist/accordion/Accordion.stories.js +0 -207
  136. package/dist/accordion/readme.md +0 -96
  137. package/dist/alert/Alert.js +0 -302
  138. package/dist/alert/Alert.stories.js +0 -158
  139. package/dist/alert/close.svg +0 -4
  140. package/dist/alert/error.svg +0 -4
  141. package/dist/alert/info.svg +0 -4
  142. package/dist/alert/readme.md +0 -43
  143. package/dist/alert/success.svg +0 -4
  144. package/dist/alert/warning.svg +0 -4
  145. package/dist/button/Button.js +0 -183
  146. package/dist/button/Button.stories.js +0 -224
  147. package/dist/button/readme.md +0 -93
  148. package/dist/card/Card.js +0 -246
  149. package/dist/checkbox/Checkbox.js +0 -224
  150. package/dist/checkbox/Checkbox.stories.js +0 -144
  151. package/dist/checkbox/readme.md +0 -116
  152. package/dist/chip/Chip.js +0 -170
  153. package/dist/common/services/example-service.js +0 -10
  154. package/dist/common/services/example-service.test.js +0 -12
  155. package/dist/common/utils.js +0 -42
  156. package/dist/common/variables.js +0 -197
  157. package/dist/date/Date.stories.js +0 -205
  158. package/dist/date/calendar.svg +0 -1
  159. package/dist/date/calendar_dark.svg +0 -1
  160. package/dist/date/readme.md +0 -73
  161. package/dist/dialog/Dialog.js +0 -193
  162. package/dist/dialog/Dialog.stories.js +0 -217
  163. package/dist/dialog/readme.md +0 -32
  164. package/dist/dropdown/Dropdown.js +0 -412
  165. package/dist/dropdown/Dropdown.stories.js +0 -249
  166. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  167. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  168. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  169. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  170. package/dist/dropdown/readme.md +0 -69
  171. package/dist/footer/Footer.js +0 -341
  172. package/dist/footer/Footer.stories.js +0 -94
  173. package/dist/footer/dxc_logo_wht.png +0 -0
  174. package/dist/footer/readme.md +0 -41
  175. package/dist/header/Header.js +0 -350
  176. package/dist/header/Header.stories.js +0 -176
  177. package/dist/header/close_icon.svg +0 -1
  178. package/dist/header/dxc_logo_black.png +0 -0
  179. package/dist/header/dxc_logo_white.png +0 -0
  180. package/dist/header/hamb_menu_black.svg +0 -1
  181. package/dist/header/hamb_menu_white.svg +0 -1
  182. package/dist/header/readme.md +0 -33
  183. package/dist/heading/Heading.js +0 -159
  184. package/dist/input-text/InputText.js +0 -519
  185. package/dist/input-text/InputText.stories.js +0 -209
  186. package/dist/input-text/error.svg +0 -1
  187. package/dist/input-text/readme.md +0 -91
  188. package/dist/link/Link.js +0 -129
  189. package/dist/link/readme.md +0 -51
  190. package/dist/paginator/Paginator.js +0 -178
  191. package/dist/paginator/images/next.svg +0 -3
  192. package/dist/paginator/images/nextPage.svg +0 -3
  193. package/dist/paginator/images/previous.svg +0 -3
  194. package/dist/paginator/images/previousPage.svg +0 -3
  195. package/dist/paginator/readme.md +0 -50
  196. package/dist/progress-bar/ProgressBar.js +0 -189
  197. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  198. package/dist/progress-bar/readme.md +0 -63
  199. package/dist/radio/Radio.stories.js +0 -166
  200. package/dist/radio/readme.md +0 -70
  201. package/dist/resultsetTable/ResultsetTable.js +0 -334
  202. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  203. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  204. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  205. package/dist/select/Select.js +0 -442
  206. package/dist/select/Select.stories.js +0 -235
  207. package/dist/select/readme.md +0 -72
  208. package/dist/sidenav/Sidenav.js +0 -217
  209. package/dist/sidenav/arrow_icon.svg +0 -3
  210. package/dist/slider/Slider.js +0 -258
  211. package/dist/slider/Slider.stories.js +0 -241
  212. package/dist/slider/readme.md +0 -64
  213. package/dist/spinner/Spinner.js +0 -196
  214. package/dist/spinner/Spinner.stories.js +0 -183
  215. package/dist/spinner/readme.md +0 -65
  216. package/dist/switch/Switch.js +0 -195
  217. package/dist/switch/Switch.stories.js +0 -134
  218. package/dist/switch/readme.md +0 -133
  219. package/dist/table/Table.js +0 -84
  220. package/dist/tabs/Tabs.js +0 -183
  221. package/dist/tabs/Tabs.stories.js +0 -130
  222. package/dist/tabs/readme.md +0 -78
  223. package/dist/tabs-for-sections/TabsForSections.js +0 -107
  224. package/dist/tabs-for-sections/readme.md +0 -78
  225. package/dist/tag/Tag.js +0 -217
  226. package/dist/textarea/Textarea.js +0 -226
  227. package/dist/toggle/Toggle.stories.js +0 -297
  228. package/dist/toggle/readme.md +0 -80
  229. package/dist/upload/Upload.stories.js +0 -72
  230. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -125
  231. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  232. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  233. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -282
  234. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  235. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  236. package/dist/upload/file-upload/FileToUpload.js +0 -158
  237. package/dist/upload/file-upload/audio-icon.svg +0 -4
  238. package/dist/upload/file-upload/close.svg +0 -4
  239. package/dist/upload/file-upload/file-icon.svg +0 -4
  240. package/dist/upload/file-upload/video-icon.svg +0 -4
  241. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  242. package/dist/upload/readme.md +0 -37
  243. package/dist/upload/transaction/Transaction.js +0 -155
  244. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  245. package/dist/upload/transaction/audio-icon.svg +0 -4
  246. package/dist/upload/transaction/error-icon.svg +0 -4
  247. package/dist/upload/transaction/file-icon-err.svg +0 -4
  248. package/dist/upload/transaction/file-icon.svg +0 -4
  249. package/dist/upload/transaction/image-icon-err.svg +0 -4
  250. package/dist/upload/transaction/image-icon.svg +0 -4
  251. package/dist/upload/transaction/success-icon.svg +0 -4
  252. package/dist/upload/transaction/video-icon-err.svg +0 -4
  253. package/dist/upload/transaction/video-icon.svg +0 -4
  254. package/dist/upload/transactions/Transactions.js +0 -120
  255. package/dist/wizard/Wizard.js +0 -310
  256. package/dist/wizard/invalid_icon.svg +0 -6
  257. package/dist/wizard/valid_icon.svg +0 -6
  258. package/dist/wizard/validation-wrong.svg +0 -6
  259. package/test/Accordion.test.js +0 -33
  260. package/test/Alert.test.js +0 -53
  261. package/test/Box.test.js +0 -10
  262. package/test/Button.test.js +0 -18
  263. package/test/Card.test.js +0 -30
  264. package/test/Checkbox.test.js +0 -45
  265. package/test/Chip.test.js +0 -25
  266. package/test/Date.test.js +0 -393
  267. package/test/Dialog.test.js +0 -23
  268. package/test/Dropdown.test.js +0 -130
  269. package/test/Footer.test.js +0 -99
  270. package/test/Header.test.js +0 -39
  271. package/test/Heading.test.js +0 -35
  272. package/test/InputText.test.js +0 -236
  273. package/test/Link.test.js +0 -25
  274. package/test/Paginator.test.js +0 -165
  275. package/test/ProgressBar.test.js +0 -35
  276. package/test/Radio.test.js +0 -37
  277. package/test/ResultsetTable.test.js +0 -282
  278. package/test/Select.test.js +0 -191
  279. package/test/Sidenav.test.js +0 -87
  280. package/test/Slider.test.js +0 -65
  281. package/test/Spinner.test.js +0 -27
  282. package/test/Switch.test.js +0 -45
  283. package/test/Table.test.js +0 -36
  284. package/test/Tabs.test.js +0 -88
  285. package/test/TabsForSections.test.js +0 -34
  286. package/test/Tag.test.js +0 -32
  287. package/test/TextArea.test.js +0 -52
  288. package/test/Toggle.test.js +0 -43
  289. package/test/Upload.test.js +0 -60
  290. package/test/Wizard.test.js +0 -130
  291. package/test/mocks/pngMock.js +0 -1
  292. 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,341 +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
- function _templateObject11() {
35
- var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: none;\n color: ", ";\n font-size: 12px;\n"]);
36
-
37
- _templateObject11 = function _templateObject11() {
38
- return data;
39
- };
40
-
41
- return data;
42
- }
43
-
44
- function _templateObject10() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0px 10px;\n color: ", ";\n"]);
46
-
47
- _templateObject10 = function _templateObject10() {
48
- return data;
49
- };
50
-
51
- return data;
52
- }
53
-
54
- function _templateObject9() {
55
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n height: 25px;\n width: 25px;\n fill: ", ";\n }\n"]);
56
-
57
- _templateObject9 = function _templateObject9() {
58
- return data;
59
- };
60
-
61
- return data;
62
- }
63
-
64
- function _templateObject8() {
65
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n display: inline-flex;\n margin-left: ", ";\n }\n"]);
66
-
67
- _templateObject8 = function _templateObject8() {
68
- return data;
69
- };
70
-
71
- return data;
72
- }
73
-
74
- function _templateObject7() {
75
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 34px;\n width: auto;\n"]);
76
-
77
- _templateObject7 = function _templateObject7() {
78
- return data;
79
- };
80
-
81
- return data;
82
- }
83
-
84
- function _templateObject6() {
85
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: 12px;\n color: ", ";\n max-width: ", ";\n width: ", ";\n text-align: ", ";\n"]);
86
-
87
- _templateObject6 = function _templateObject6() {
88
- return data;
89
- };
90
-
91
- return data;
92
- }
93
-
94
- function _templateObject5() {
95
- 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"]);
96
-
97
- _templateObject5 = function _templateObject5() {
98
- return data;
99
- };
100
-
101
- return data;
102
- }
103
-
104
- function _templateObject4() {
105
- 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"]);
106
-
107
- _templateObject4 = function _templateObject4() {
108
- return data;
109
- };
110
-
111
- return data;
112
- }
113
-
114
- function _templateObject3() {
115
- 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"]);
116
-
117
- _templateObject3 = function _templateObject3() {
118
- return data;
119
- };
120
-
121
- return data;
122
- }
123
-
124
- function _templateObject2() {
125
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n"]);
126
-
127
- _templateObject2 = function _templateObject2() {
128
- return data;
129
- };
130
-
131
- return data;
132
- }
133
-
134
- function _templateObject() {
135
- var data = (0, _taggedTemplateLiteral2["default"])(["\n & {\n padding: ", ";\n font-family: \"Open Sans\", sans-serif;\n background-color: ", ";\n margin-top: ", ";\n }\n"]);
136
-
137
- _templateObject = function _templateObject() {
138
- return data;
139
- };
140
-
141
- return data;
142
- }
143
-
144
- var DxcFooter = function DxcFooter(_ref) {
145
- var _ref$socialLinks = _ref.socialLinks,
146
- socialLinks = _ref$socialLinks === void 0 ? [] : _ref$socialLinks,
147
- _ref$bottomLinks = _ref.bottomLinks,
148
- bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
149
- _ref$copyright = _ref.copyright,
150
- copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
151
- _ref$logoSrc = _ref.logoSrc,
152
- logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
153
- children = _ref.children,
154
- padding = _ref.padding,
155
- margin = _ref.margin;
156
- var ref = (0, _react.useRef)(null);
157
-
158
- var _useState = (0, _react.useState)(),
159
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
160
- refSize = _useState2[0],
161
- setRefSize = _useState2[1];
162
-
163
- var _useState3 = (0, _react.useState)(false),
164
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
165
- isResponsiveTablet = _useState4[0],
166
- setIsResponsiveTablet = _useState4[1];
167
-
168
- var _useState5 = (0, _react.useState)(false),
169
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
170
- isResponsivePhone = _useState6[0],
171
- setIsResponsivePhone = _useState6[1];
172
-
173
- var colorsTheme = (0, _react.useContext)(_ThemeContext["default"]) || _variables.colors;
174
-
175
- var handleResize = function handleResize(refWidth) {
176
- if (ref.current) {
177
- setRefSize(refWidth);
178
-
179
- if (refWidth <= _variables.responsiveSizes.tablet && refWidth > _variables.responsiveSizes.mobileLarge) {
180
- setIsResponsiveTablet(true);
181
- setIsResponsivePhone(false);
182
- } else if (refWidth <= _variables.responsiveSizes.tablet && refWidth <= _variables.responsiveSizes.mobileLarge) {
183
- setIsResponsivePhone(true);
184
- setIsResponsiveTablet(false);
185
- } else {
186
- setIsResponsiveTablet(false);
187
- setIsResponsivePhone(false);
188
- }
189
- }
190
- };
191
-
192
- var handleEventListener = function handleEventListener() {
193
- handleResize(ref.current.offsetWidth);
194
- };
195
-
196
- (0, _react.useEffect)(function () {
197
- window.addEventListener("resize", handleEventListener);
198
- handleResize(ref.current.offsetWidth);
199
- return function () {
200
- window.removeEventListener("resize", handleEventListener);
201
- };
202
- }, []);
203
- var socialLink = socialLinks.map(function (link, index) {
204
- return _react["default"].createElement(SocialAnchor, {
205
- key: "social".concat(index).concat(link.href),
206
- index: index,
207
- href: link && link.href ? link.href : ""
208
- }, link && link.logoSrc && _react["default"].createElement(SocialIcon, {
209
- src: link.logoSrc
210
- }));
211
- });
212
- var bottomLink = bottomLinks.map(function (link, index) {
213
- return _react["default"].createElement("span", {
214
- key: "bottom".concat(index).concat(link.text)
215
- }, _react["default"].createElement(BottomLink, {
216
- href: link && link.href ? link.href : ""
217
- }, link && link.text ? link.text : ""), _react["default"].createElement(Point, {
218
- index: index
219
- }, "\xB7"));
220
- });
221
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
222
- theme: colorsTheme
223
- }, _react["default"].createElement(FooterContainer, {
224
- margin: margin,
225
- refSize: refSize,
226
- ref: ref
227
- }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
228
- logoSrc: logoSrc,
229
- src: logoSrc === "default" ? _dxc_logo_wht["default"] : logoSrc
230
- }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
231
- className: "footerFooter",
232
- refSize: refSize
233
- }, _react["default"].createElement(BottomLinks, {
234
- refSize: refSize
235
- }, bottomLink), _react["default"].createElement(Copyright, {
236
- refSize: refSize
237
- }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && _react["default"].createElement("div", null, _react["default"].createElement(ChildComponents, {
238
- padding: padding
239
- }, children), _react["default"].createElement(FooterFooter, {
240
- className: "footerFooter"
241
- }, _react["default"].createElement(BottomLinks, {
242
- refSize: refSize
243
- }, bottomLink), _react["default"].createElement(Copyright, {
244
- refSize: refSize
245
- }, copyright)))));
246
- };
247
-
248
- var FooterContainer = _styledComponents["default"].div(_templateObject(), function (props) {
249
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "20px 60px 20px 20px";
250
- }, function (props) {
251
- return props.theme.black;
252
- }, function (props) {
253
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
254
- });
255
-
256
- var FooterHeader = _styledComponents["default"].div(_templateObject2());
257
-
258
- var FooterFooter = _styledComponents["default"].div(_templateObject3(), function (props) {
259
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "column" : "row";
260
- }, function (props) {
261
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
262
- });
263
-
264
- var BottomLinks = _styledComponents["default"].div(_templateObject4(), function (props) {
265
- return props.theme.yellow;
266
- }, function (props) {
267
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "60%";
268
- }, function (props) {
269
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
270
- }, function (props) {
271
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "40px 0 40px 0" : "";
272
- });
273
-
274
- var ChildComponents = _styledComponents["default"].div(_templateObject5(), function (props) {
275
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
276
- }, function (props) {
277
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
278
- }, function (props) {
279
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
280
- }, function (props) {
281
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
282
- }, function (props) {
283
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
284
- }, function (props) {
285
- return props.theme.white;
286
- });
287
-
288
- var Copyright = _styledComponents["default"].div(_templateObject6(), function (props) {
289
- return props.theme.white;
290
- }, function (props) {
291
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "40%";
292
- }, function (props) {
293
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "100%" : "";
294
- }, function (props) {
295
- return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "right";
296
- });
297
-
298
- var LogoIcon = _styledComponents["default"].img(_templateObject7());
299
-
300
- var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
301
- return props.index === 0 ? "0px" : "15px";
302
- });
303
-
304
- var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
305
- return props.theme.white;
306
- });
307
-
308
- var Point = _styledComponents["default"].span(_templateObject10(), function (props) {
309
- return props.theme.white;
310
- });
311
-
312
- var BottomLink = _styledComponents["default"].a(_templateObject11(), function (props) {
313
- return props.theme.white;
314
- });
315
-
316
- DxcFooter.propTypes = {
317
- logoSrc: _propTypes["default"].string,
318
- socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
319
- logoSrc: _propTypes["default"].string.isRequired,
320
- href: _propTypes["default"].string
321
- })),
322
- bottomLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
323
- text: _propTypes["default"].string.isRequired,
324
- href: _propTypes["default"].string
325
- })),
326
- copyright: _propTypes["default"].string,
327
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
328
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
329
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
330
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
331
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
332
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
333
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
334
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
335
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
336
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
337
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
338
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
339
- };
340
- var _default = DxcFooter;
341
- exports["default"] = _default;