@dxc-technology/halstack-react 3.2.0 → 4.0.0

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 (265) hide show
  1. package/BackgroundColorContext.js +46 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +119 -50
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +33 -1
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +27 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +16 -9
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +89 -23
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +63 -21
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/common/utils.js +22 -0
  38. package/common/variables.js +1567 -0
  39. package/{dist/date → date}/Date.js +60 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +44 -29
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +162 -74
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +79 -37
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +157 -72
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/heading/Heading.js +230 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +162 -66
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +7 -11
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +76 -39
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +71 -15
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +86 -42
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +88 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +28 -9
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +65 -40
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +47 -23
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +42 -14
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +45 -11
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +37 -19
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +50 -36
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +992 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +1 -5
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +28 -16
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +61 -25
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +52 -25
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +3 -3
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +37 -41
  117. package/{dist/upload → upload}/transactions/Transactions.js +24 -8
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +106 -56
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -201
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -318
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -40
  138. package/dist/button/Button.js +0 -219
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/utils.js +0 -42
  144. package/dist/common/variables.js +0 -523
  145. package/dist/date/Date.stories.js +0 -205
  146. package/dist/date/calendar.svg +0 -1
  147. package/dist/date/calendar_dark.svg +0 -1
  148. package/dist/date/readme.md +0 -73
  149. package/dist/dialog/Dialog.stories.js +0 -217
  150. package/dist/dialog/readme.md +0 -32
  151. package/dist/dropdown/Dropdown.stories.js +0 -249
  152. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  153. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  154. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  156. package/dist/dropdown/readme.md +0 -69
  157. package/dist/footer/Footer.stories.js +0 -94
  158. package/dist/footer/dxc_logo_wht.png +0 -0
  159. package/dist/footer/readme.md +0 -41
  160. package/dist/header/Header.stories.js +0 -176
  161. package/dist/header/close_icon.svg +0 -1
  162. package/dist/header/dxc_logo_black.png +0 -0
  163. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  164. package/dist/header/dxc_logo_white.png +0 -0
  165. package/dist/header/hamb_menu_black.svg +0 -1
  166. package/dist/header/hamb_menu_white.svg +0 -1
  167. package/dist/header/readme.md +0 -33
  168. package/dist/heading/Heading.js +0 -163
  169. package/dist/input-text/InputText.stories.js +0 -209
  170. package/dist/input-text/error.svg +0 -1
  171. package/dist/input-text/readme.md +0 -91
  172. package/dist/layout/facebook.svg +0 -45
  173. package/dist/layout/linkedin.svg +0 -50
  174. package/dist/layout/twitter.svg +0 -53
  175. package/dist/link/readme.md +0 -51
  176. package/dist/paginator/images/next.svg +0 -3
  177. package/dist/paginator/images/nextPage.svg +0 -3
  178. package/dist/paginator/images/previous.svg +0 -3
  179. package/dist/paginator/images/previousPage.svg +0 -3
  180. package/dist/paginator/readme.md +0 -50
  181. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  182. package/dist/progress-bar/readme.md +0 -63
  183. package/dist/radio/Radio.stories.js +0 -166
  184. package/dist/radio/readme.md +0 -70
  185. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  188. package/dist/select/Select.js +0 -490
  189. package/dist/select/Select.stories.js +0 -235
  190. package/dist/select/readme.md +0 -72
  191. package/dist/slider/Slider.js +0 -267
  192. package/dist/slider/Slider.stories.js +0 -241
  193. package/dist/slider/readme.md +0 -64
  194. package/dist/spinner/Spinner.js +0 -198
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/textarea/Textarea.js +0 -238
  204. package/dist/toggle/Toggle.stories.js +0 -297
  205. package/dist/toggle/readme.md +0 -80
  206. package/dist/toggle-group/ToggleGroup.js +0 -223
  207. package/dist/toggle-group/readme.md +0 -82
  208. package/dist/upload/Upload.stories.js +0 -72
  209. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  210. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  211. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  212. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  213. package/dist/upload/file-upload/audio-icon.svg +0 -4
  214. package/dist/upload/file-upload/close.svg +0 -4
  215. package/dist/upload/file-upload/file-icon.svg +0 -4
  216. package/dist/upload/file-upload/video-icon.svg +0 -4
  217. package/dist/upload/readme.md +0 -37
  218. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  219. package/dist/upload/transaction/audio-icon.svg +0 -4
  220. package/dist/upload/transaction/error-icon.svg +0 -4
  221. package/dist/upload/transaction/file-icon-err.svg +0 -4
  222. package/dist/upload/transaction/file-icon.svg +0 -4
  223. package/dist/upload/transaction/image-icon-err.svg +0 -4
  224. package/dist/upload/transaction/image-icon.svg +0 -4
  225. package/dist/upload/transaction/success-icon.svg +0 -4
  226. package/dist/upload/transaction/video-icon-err.svg +0 -4
  227. package/dist/upload/transaction/video-icon.svg +0 -4
  228. package/dist/wizard/invalid_icon.svg +0 -6
  229. package/dist/wizard/valid_icon.svg +0 -6
  230. package/dist/wizard/validation-wrong.svg +0 -6
  231. package/test/Accordion.test.js +0 -33
  232. package/test/AccordionGroup.test.js +0 -125
  233. package/test/Alert.test.js +0 -53
  234. package/test/Box.test.js +0 -10
  235. package/test/Button.test.js +0 -18
  236. package/test/Card.test.js +0 -30
  237. package/test/Checkbox.test.js +0 -45
  238. package/test/Chip.test.js +0 -25
  239. package/test/Date.test.js +0 -393
  240. package/test/Dialog.test.js +0 -23
  241. package/test/Dropdown.test.js +0 -130
  242. package/test/Footer.test.js +0 -99
  243. package/test/Header.test.js +0 -39
  244. package/test/Heading.test.js +0 -35
  245. package/test/InputText.test.js +0 -240
  246. package/test/Link.test.js +0 -42
  247. package/test/Paginator.test.js +0 -177
  248. package/test/ProgressBar.test.js +0 -35
  249. package/test/Radio.test.js +0 -37
  250. package/test/ResultsetTable.test.js +0 -330
  251. package/test/Select.test.js +0 -192
  252. package/test/Sidenav.test.js +0 -45
  253. package/test/Slider.test.js +0 -82
  254. package/test/Spinner.test.js +0 -27
  255. package/test/Switch.test.js +0 -45
  256. package/test/Table.test.js +0 -36
  257. package/test/Tabs.test.js +0 -109
  258. package/test/TabsForSections.test.js +0 -34
  259. package/test/Tag.test.js +0 -32
  260. package/test/TextArea.test.js +0 -52
  261. package/test/ToggleGroup.test.js +0 -81
  262. package/test/Upload.test.js +0 -60
  263. package/test/Wizard.test.js +0 -130
  264. package/test/mocks/pngMock.js +0 -1
  265. 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,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
- });
Binary file
@@ -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,176 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@storybook/react");
8
-
9
- var _addonActions = require("@storybook/addon-actions");
10
-
11
- require("../common/OpenSans.css");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Header = _interopRequireDefault(require("./Header"));
18
-
19
- var _Dropdown = _interopRequireDefault(require("../dropdown/Dropdown"));
20
-
21
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
22
-
23
- var selectOption = function selectOption(option) {
24
- console.log(option);
25
- };
26
-
27
- var onChange = (0, _addonActions.action)("onChange");
28
- var onClick = (0, _addonActions.action)("headerLogo Clicked");
29
- var optionsWithoutIcon = [{
30
- value: 1,
31
- label: "Amazon"
32
- }, {
33
- value: 2,
34
- label: "Ebay"
35
- }, {
36
- value: 3,
37
- label: "Apple"
38
- }];
39
- (0, _react2.storiesOf)("Form Components|Header", module).add("Component", function () {
40
- return _react["default"].createElement("div", {
41
- style: {
42
- background: "lightgrey"
43
- }
44
- }, _react["default"].createElement("div", null, _react["default"].createElement("div", {
45
- style: {
46
- marginBottom: "20px"
47
- }
48
- }, _react["default"].createElement(_Header["default"], {
49
- theme: "light",
50
- underlined: false,
51
- onClick: onClick
52
- }, _react["default"].createElement(_Dropdown["default"], {
53
- theme: "light",
54
- onSelectOption: selectOption,
55
- options: optionsWithoutIcon
56
- }), _react["default"].createElement(_Dropdown["default"], {
57
- theme: "light",
58
- onSelectOption: selectOption,
59
- label: "Dropdown",
60
- options: optionsWithoutIcon
61
- }), _react["default"].createElement(_Switch["default"], {
62
- checked: false,
63
- label: "Switch component",
64
- labelPosition: "after",
65
- theme: "dark",
66
- onChange: onChange
67
- }))), _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
68
- theme: "light",
69
- underlined: true,
70
- onClick: onClick
71
- }, _react["default"].createElement(_Dropdown["default"], {
72
- theme: "light",
73
- onSelectOption: selectOption,
74
- options: optionsWithoutIcon,
75
- mode: "outlined"
76
- }), _react["default"].createElement(_Dropdown["default"], {
77
- theme: "light",
78
- onSelectOption: selectOption,
79
- label: "Dropdown",
80
- options: optionsWithoutIcon,
81
- mode: "outlined"
82
- }), _react["default"].createElement(_Switch["default"], {
83
- checked: false,
84
- label: "Switch component",
85
- labelPosition: "after",
86
- theme: "light",
87
- onChange: onChange
88
- })))), _react["default"].createElement("div", {
89
- style: {
90
- paddingTop: "20px",
91
- height: "200px"
92
- }
93
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Header["default"], {
94
- theme: "dark",
95
- underlined: false
96
- }, _react["default"].createElement(_Dropdown["default"], {
97
- theme: "dark",
98
- onSelectOption: selectOption,
99
- options: optionsWithoutIcon,
100
- mode: "basic"
101
- }), _react["default"].createElement(_Dropdown["default"], {
102
- theme: "dark",
103
- onSelectOption: selectOption,
104
- label: "Dropdown",
105
- options: optionsWithoutIcon,
106
- mode: "basic"
107
- }), _react["default"].createElement(_Switch["default"], {
108
- checked: false,
109
- label: "Switch component",
110
- labelPosition: "after",
111
- theme: "light",
112
- onChange: onChange
113
- }))), _react["default"].createElement("div", {
114
- style: {
115
- marginTop: "20px"
116
- }
117
- }, _react["default"].createElement(_Header["default"], {
118
- theme: "dark",
119
- underlined: true
120
- }, _react["default"].createElement(_Dropdown["default"], {
121
- theme: "dark",
122
- onSelectOption: selectOption,
123
- options: optionsWithoutIcon,
124
- mode: "outlined"
125
- }), _react["default"].createElement(_Dropdown["default"], {
126
- theme: "dark",
127
- onSelectOption: selectOption,
128
- label: "Dropdown",
129
- options: optionsWithoutIcon,
130
- mode: "outlined"
131
- }), _react["default"].createElement(_Switch["default"], {
132
- checked: false,
133
- label: "Switch component",
134
- labelPosition: "after",
135
- theme: "dark",
136
- onChange: onChange
137
- })))));
138
- }, {
139
- notes: {
140
- markdown: _readme["default"]
141
- }
142
- });
143
-
144
- var knobProps = function knobProps() {
145
- return {
146
- theme: (0, _addonKnobs.select)("Theme", {
147
- light: "light",
148
- dark: "dark"
149
- }, "light"),
150
- underlined: (0, _addonKnobs["boolean"])("Underlined", false)
151
- };
152
- };
153
-
154
- (0, _react2.storiesOf)("Form Components|Header", module).add("Knobs example", function () {
155
- var props = knobProps();
156
- return _react["default"].createElement("div", {
157
- style: {
158
- height: "250px",
159
- background: props.theme === "dark" && "black" || "transparent"
160
- }
161
- }, _react["default"].createElement(_Header["default"], props, _react["default"].createElement(_Dropdown["default"], {
162
- theme: props.theme,
163
- mode: props.underlined ? "outlined" : "basic",
164
- onSelectOption: selectOption,
165
- options: optionsWithoutIcon,
166
- label: "Dropdown"
167
- })), _react["default"].createElement("div", {
168
- style: {
169
- marginTop: "20px"
170
- }
171
- }, _react["default"].createElement(_Header["default"], props)));
172
- }, {
173
- notes: {
174
- markdown: _readme["default"]
175
- }
176
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
Binary file
@@ -1,6 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="300.5" height="48" viewBox="0 0 300.5 48">
2
- <g id="Grupo_1" data-name="Grupo 1" transform="translate(-38 103)">
3
- <rect id="Rectángulo_1" data-name="Rectángulo 1" width="300.5" height="48" transform="translate(38 -103)" fill="none"/>
4
- <path id="Trazado_2" data-name="Trazado 2" d="M49.867,46.715a8.248,8.248,0,0,0-8.284-8.3h-3.6V55h3.6a8.244,8.244,0,0,0,8.284-8.285m6.476,2.693L50.476,59.54h11.7Zm0-5.386,5.835-10.131h-11.7Zm6.444,2.693A8.244,8.244,0,0,0,71.071,55h3.605V38.412H71.071a8.248,8.248,0,0,0-8.284,8.3M330.638,60.21c-1.337,3.391-3.016,5.008-6.842,5.008a13.99,13.99,0,0,1-2.208-.156V60.8a11.909,11.909,0,0,0,1.679.187c1.275,0,2.084-.5,2.737-2.084l.4-.995-6.9-16.142h5.536l4.012,9.921,3.7-9.89h5.226L330.638,60.21M308.869,53.9a4.1,4.1,0,0,1,0-8.18,4.1,4.1,0,0,1,0,8.18m8.988,4.261V41.767H312.85v2.364a5.837,5.837,0,0,0-5.07-2.769c-4.7,0-7.806,3.639-7.806,8.46,0,4.79,3.234,8.18,7.868,8.18a5.85,5.85,0,0,0,4.946-2.488v2.768c0,2.3-1.213,3.577-3.639,3.577-2.146,0-3.328-1-3.546-2.457h-5.039c.28,3.576,3.111,6.127,8.46,6.127,5.941,0,8.833-2.675,8.833-7.371M289.43,53.9a3.821,3.821,0,0,1-3.795-4.075A3.819,3.819,0,1,1,289.43,53.9m0,4.385c5.6,0,8.926-3.888,8.926-8.46,0-4.6-3.328-8.491-8.926-8.491-5.536,0-8.895,3.888-8.895,8.491,0,4.572,3.359,8.46,8.895,8.46m-16.422-.435h5.07V34.52h-5.07ZM261.624,53.9a3.82,3.82,0,0,1-3.794-4.075,3.819,3.819,0,1,1,3.794,4.075m0,4.385c5.6,0,8.927-3.888,8.927-8.46,0-4.6-3.328-8.491-8.927-8.491-5.536,0-8.895,3.888-8.895,8.491,0,4.572,3.359,8.46,8.895,8.46m-27.37-.435h5.07v-8.4c0-2.27,1.058-3.732,3.11-3.732,2.178,0,2.862,1.337,2.862,3.265v8.865h5.069V48.609c0-4.541-1.99-7.247-6.064-7.247a5.4,5.4,0,0,0-5.039,2.737V41.767h-5.008Zm-19.314,0h5.07v-8.4c0-2.27,1.057-3.732,3.11-3.732,2.177,0,2.861,1.337,2.861,3.265v8.865h5.07V48.609c0-4.541-1.991-7.247-6.065-7.247A5.333,5.333,0,0,0,220.01,44.1V34.52h-5.07Zm-2.271-9.891c-.622-3.732-3.39-6.625-8.242-6.625a8.479,8.479,0,1,0,0,16.951c4.852,0,7.62-2.892,8.242-6.625h-5.1a3.122,3.122,0,0,1-3.11,2.333c-2.24,0-3.671-1.9-3.671-4.168s1.431-4.2,3.671-4.2a3.087,3.087,0,0,1,3.079,2.333Zm-26.934-3.017a3.2,3.2,0,0,1,3.359,3.11h-6.811a3.255,3.255,0,0,1,3.452-3.11m7.931,8.025h-4.821a3.19,3.19,0,0,1-3.048,1.648,3.315,3.315,0,0,1-3.546-3.483h11.695a14.55,14.55,0,0,0,.124-1.9c0-4.261-2.954-7.9-8.273-7.9-5.474,0-8.46,3.826-8.46,8.491,0,4.634,3.017,8.46,8.522,8.46,4.386,0,7-2.333,7.807-5.318m-29.454-11.2v3.981h2.519v6.531c0,4.417,2.115,5.816,5.941,5.816a18.617,18.617,0,0,0,3.172-.248V53.772a17.282,17.282,0,0,1-2.021.187c-1.307,0-2.022-.436-2.022-2.053V45.748h3.67V41.767H171.8V37.008h-5.07v4.759Zm-6.871,13.125a3.233,3.233,0,1,0,3.232-3.235,3.231,3.231,0,0,0-3.232,3.235m-12.41,3.359c6.438,0,9.952-3.857,10.637-8.771h-5.319a5.088,5.088,0,0,1-5.194,4.074c-4.012,0-6.1-3.2-6.1-6.9s2.084-6.905,6.1-6.905a5.089,5.089,0,0,1,5.194,4.074h5.319c-.685-4.914-4.2-8.77-10.637-8.77-7.185,0-11.353,5.474-11.353,11.6s4.168,11.6,11.353,11.6m-17.449-.4h6.159l-7.247-11.259,7.184-11.135h-6.033L123.1,42.824l-4.51-7.371H112.46l7.216,11.135L112.4,57.847h6l4.573-7.465ZM100.765,39.994a6.392,6.392,0,0,1,6.5,6.656,6.409,6.409,0,0,1-6.5,6.656H98.06V39.994ZM92.8,57.847h8.211c7.465,0,11.633-5.474,11.633-11.2s-4.2-11.2-11.633-11.2H92.8Z" transform="translate(0.021 -126.891)"/>
5
- </g>
6
- </svg>
Binary file
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="black"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z" fill="white"/></svg>