@dxc-technology/halstack-react 0.0.0-f2bc144 → 0.0.0-f2ee373

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 (197) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6670 -0
  3. package/dist/index.d.ts +6670 -0
  4. package/dist/index.js +14289 -0
  5. package/dist/index.mjs +14232 -0
  6. package/package.json +74 -64
  7. package/babel.config.js +0 -8
  8. package/dist/ThemeContext.js +0 -180
  9. package/dist/accordion/Accordion.js +0 -268
  10. package/dist/accordion/Accordion.stories.js +0 -207
  11. package/dist/accordion/readme.md +0 -96
  12. package/dist/accordion-group/AccordionGroup.js +0 -156
  13. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  14. package/dist/accordion-group/readme.md +0 -70
  15. package/dist/alert/Alert.js +0 -303
  16. package/dist/alert/Alert.stories.js +0 -158
  17. package/dist/alert/close.svg +0 -4
  18. package/dist/alert/error.svg +0 -4
  19. package/dist/alert/info.svg +0 -4
  20. package/dist/alert/readme.md +0 -43
  21. package/dist/alert/success.svg +0 -4
  22. package/dist/alert/warning.svg +0 -4
  23. package/dist/badge/Badge.js +0 -42
  24. package/dist/box/Box.js +0 -145
  25. package/dist/button/Button.js +0 -199
  26. package/dist/button/Button.stories.js +0 -224
  27. package/dist/button/readme.md +0 -93
  28. package/dist/card/Card.js +0 -217
  29. package/dist/checkbox/Checkbox.js +0 -229
  30. package/dist/checkbox/Checkbox.stories.js +0 -144
  31. package/dist/checkbox/readme.md +0 -116
  32. package/dist/chip/Chip.js +0 -205
  33. package/dist/common/OpenSans.css +0 -81
  34. package/dist/common/RequiredComponent.js +0 -40
  35. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  36. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  40. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  41. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  42. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  43. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  44. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  45. package/dist/common/services/example-service.js +0 -10
  46. package/dist/common/services/example-service.test.js +0 -12
  47. package/dist/common/utils.js +0 -42
  48. package/dist/common/variables.js +0 -349
  49. package/dist/date/Date.js +0 -352
  50. package/dist/date/Date.stories.js +0 -205
  51. package/dist/date/calendar.svg +0 -1
  52. package/dist/date/calendar_dark.svg +0 -1
  53. package/dist/date/readme.md +0 -73
  54. package/dist/dialog/Dialog.js +0 -195
  55. package/dist/dialog/Dialog.stories.js +0 -217
  56. package/dist/dialog/readme.md +0 -32
  57. package/dist/dropdown/Dropdown.js +0 -446
  58. package/dist/dropdown/Dropdown.stories.js +0 -249
  59. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  60. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  61. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  62. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  63. package/dist/dropdown/readme.md +0 -69
  64. package/dist/footer/Footer.js +0 -366
  65. package/dist/footer/Footer.stories.js +0 -94
  66. package/dist/footer/dxc_logo_wht.png +0 -0
  67. package/dist/footer/readme.md +0 -41
  68. package/dist/header/Header.js +0 -368
  69. package/dist/header/Header.stories.js +0 -176
  70. package/dist/header/close_icon.svg +0 -1
  71. package/dist/header/dxc_logo_black.png +0 -0
  72. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  73. package/dist/header/dxc_logo_white.png +0 -0
  74. package/dist/header/hamb_menu_black.svg +0 -1
  75. package/dist/header/hamb_menu_white.svg +0 -1
  76. package/dist/header/readme.md +0 -33
  77. package/dist/heading/Heading.js +0 -153
  78. package/dist/input-text/InputText.js +0 -561
  79. package/dist/input-text/InputText.stories.js +0 -209
  80. package/dist/input-text/error.svg +0 -1
  81. package/dist/input-text/readme.md +0 -91
  82. package/dist/layout/ApplicationLayout.js +0 -330
  83. package/dist/layout/facebook.svg +0 -45
  84. package/dist/layout/linkedin.svg +0 -50
  85. package/dist/layout/twitter.svg +0 -53
  86. package/dist/link/Link.js +0 -187
  87. package/dist/link/readme.md +0 -51
  88. package/dist/main.js +0 -303
  89. package/dist/paginator/Paginator.js +0 -247
  90. package/dist/paginator/images/next.svg +0 -3
  91. package/dist/paginator/images/nextPage.svg +0 -3
  92. package/dist/paginator/images/previous.svg +0 -3
  93. package/dist/paginator/images/previousPage.svg +0 -3
  94. package/dist/paginator/readme.md +0 -50
  95. package/dist/progress-bar/ProgressBar.js +0 -184
  96. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  97. package/dist/progress-bar/readme.md +0 -63
  98. package/dist/radio/Radio.js +0 -190
  99. package/dist/radio/Radio.stories.js +0 -166
  100. package/dist/radio/readme.md +0 -70
  101. package/dist/resultsetTable/ResultsetTable.js +0 -327
  102. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  103. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  104. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  105. package/dist/select/Select.js +0 -475
  106. package/dist/select/Select.stories.js +0 -235
  107. package/dist/select/readme.md +0 -72
  108. package/dist/sidenav/Sidenav.js +0 -123
  109. package/dist/slider/Slider.js +0 -257
  110. package/dist/slider/Slider.stories.js +0 -241
  111. package/dist/slider/readme.md +0 -64
  112. package/dist/spinner/Spinner.js +0 -190
  113. package/dist/spinner/Spinner.stories.js +0 -183
  114. package/dist/spinner/readme.md +0 -65
  115. package/dist/switch/Switch.js +0 -190
  116. package/dist/switch/Switch.stories.js +0 -134
  117. package/dist/switch/readme.md +0 -133
  118. package/dist/table/Table.js +0 -102
  119. package/dist/tabs/Tabs.js +0 -302
  120. package/dist/tabs/Tabs.stories.js +0 -130
  121. package/dist/tabs/readme.md +0 -78
  122. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  123. package/dist/tabs-for-sections/readme.md +0 -78
  124. package/dist/tag/Tag.js +0 -249
  125. package/dist/textarea/Textarea.js +0 -220
  126. package/dist/toggle/Toggle.js +0 -223
  127. package/dist/toggle/Toggle.stories.js +0 -297
  128. package/dist/toggle/readme.md +0 -80
  129. package/dist/toggle-group/ToggleGroup.js +0 -209
  130. package/dist/toggle-group/readme.md +0 -82
  131. package/dist/upload/Upload.js +0 -200
  132. package/dist/upload/Upload.stories.js +0 -72
  133. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -122
  134. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  135. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  136. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -279
  137. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  138. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  139. package/dist/upload/file-upload/FileToUpload.js +0 -158
  140. package/dist/upload/file-upload/audio-icon.svg +0 -4
  141. package/dist/upload/file-upload/close.svg +0 -4
  142. package/dist/upload/file-upload/file-icon.svg +0 -4
  143. package/dist/upload/file-upload/video-icon.svg +0 -4
  144. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  145. package/dist/upload/readme.md +0 -37
  146. package/dist/upload/transaction/Transaction.js +0 -155
  147. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  148. package/dist/upload/transaction/audio-icon.svg +0 -4
  149. package/dist/upload/transaction/error-icon.svg +0 -4
  150. package/dist/upload/transaction/file-icon-err.svg +0 -4
  151. package/dist/upload/transaction/file-icon.svg +0 -4
  152. package/dist/upload/transaction/image-icon-err.svg +0 -4
  153. package/dist/upload/transaction/image-icon.svg +0 -4
  154. package/dist/upload/transaction/success-icon.svg +0 -4
  155. package/dist/upload/transaction/video-icon-err.svg +0 -4
  156. package/dist/upload/transaction/video-icon.svg +0 -4
  157. package/dist/upload/transactions/Transactions.js +0 -120
  158. package/dist/useTheme.js +0 -22
  159. package/dist/wizard/Wizard.js +0 -325
  160. package/dist/wizard/invalid_icon.svg +0 -6
  161. package/dist/wizard/valid_icon.svg +0 -6
  162. package/dist/wizard/validation-wrong.svg +0 -6
  163. package/test/Accordion.test.js +0 -33
  164. package/test/AccordionGroup.test.js +0 -109
  165. package/test/Alert.test.js +0 -53
  166. package/test/Box.test.js +0 -10
  167. package/test/Button.test.js +0 -18
  168. package/test/Card.test.js +0 -30
  169. package/test/Checkbox.test.js +0 -45
  170. package/test/Chip.test.js +0 -25
  171. package/test/Date.test.js +0 -393
  172. package/test/Dialog.test.js +0 -23
  173. package/test/Dropdown.test.js +0 -130
  174. package/test/Footer.test.js +0 -99
  175. package/test/Header.test.js +0 -39
  176. package/test/Heading.test.js +0 -35
  177. package/test/InputText.test.js +0 -240
  178. package/test/Link.test.js +0 -42
  179. package/test/Paginator.test.js +0 -177
  180. package/test/ProgressBar.test.js +0 -35
  181. package/test/Radio.test.js +0 -37
  182. package/test/ResultsetTable.test.js +0 -330
  183. package/test/Select.test.js +0 -192
  184. package/test/Sidenav.test.js +0 -45
  185. package/test/Slider.test.js +0 -82
  186. package/test/Spinner.test.js +0 -27
  187. package/test/Switch.test.js +0 -45
  188. package/test/Table.test.js +0 -36
  189. package/test/Tabs.test.js +0 -109
  190. package/test/TabsForSections.test.js +0 -34
  191. package/test/Tag.test.js +0 -32
  192. package/test/TextArea.test.js +0 -52
  193. package/test/ToggleGroup.test.js +0 -81
  194. package/test/Upload.test.js +0 -60
  195. package/test/Wizard.test.js +0 -130
  196. package/test/mocks/pngMock.js +0 -1
  197. package/test/mocks/svgMock.js +0 -1
@@ -1,349 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
-
10
- var _dxc_logo_blk_rgb = _interopRequireDefault(require("../header/dxc_logo_blk_rgb.svg"));
11
-
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
13
-
14
- var globalTokens = {
15
- black: "#000000",
16
- lightBlack: "#212121",
17
- yellow: "#FFED00",
18
- lightGrey: "#D9D9D9",
19
- darkRed: "#D0011B",
20
- lightRed: "#FF6161",
21
- lightBlue: "#CEE0F5",
22
- lightYellow: "#FCF2BD",
23
- lightPink: "#F9CFCF",
24
- lightGreen: "#DBF1C4",
25
- blue: "#005FCC",
26
- lighterGrey: "#F8F8F8",
27
- red: "#D0011B",
28
- violet: "#8800F6",
29
- darkBlue: "#006BF6",
30
- inherit: "inherit",
31
- transparent: "transparent",
32
- purple: "#6f2c91",
33
- mediumPurple: "#ead8f3",
34
- lightPurple: "#f5ebf9",
35
- lighterPurple: "#d0bddb",
36
- white: "#ffffff",
37
- darkGrey: "#666666",
38
- mediumGrey: "#bfbfbf",
39
- mediumWhite: "#f9f9f9",
40
- mediumBlue: "#0067b3",
41
- softBlue: "#b1cee6",
42
- darkWhite: "#eeeeee",
43
- lighterBlack: "#b1b1b1",
44
- mediumBlack: "#676767",
45
- mediumGreyBlack: "#dbdbdb",
46
- lightWhite: "#f2f2f2",
47
- softGrey: "#cecece",
48
- softBlack: "#565656"
49
- };
50
- exports.globalTokens = globalTokens;
51
- var componentTokens = {
52
- accordion: {
53
- backgroundColor: globalTokens.white,
54
- fontColor: globalTokens.darkGrey,
55
- arrowColor: globalTokens.purple,
56
- hoverBackgroundColor: globalTokens.lightPurple,
57
- disabledFontColor: globalTokens.mediumGrey,
58
- focusOutline: globalTokens.purple
59
- },
60
- alert: {
61
- overlayColor: globalTokens.black,
62
- infoColor: globalTokens.lightBlue,
63
- confirmColor: globalTokens.lightGreen,
64
- warningColor: globalTokens.lightYellow,
65
- errorColor: globalTokens.lightPink,
66
- focusColor: globalTokens.blue
67
- },
68
- button: {
69
- primaryBackgroundColor: globalTokens.purple,
70
- primaryHoverBackgroundColor: globalTokens.black,
71
- primaryFontColor: globalTokens.white,
72
- primaryHoverFontColor: globalTokens.white,
73
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
74
- disabledPrimaryBackgroundColor: globalTokens.lighterPurple,
75
- disabledPrimaryFontColor: globalTokens.white,
76
- secondaryOutlinedColor: globalTokens.purple,
77
- secondaryBackgroundColor: globalTokens.transparent,
78
- hoverOutlinedColor: globalTokens.black,
79
- secondaryFontColor: globalTokens.black,
80
- secondaryHoverFontColor: globalTokens.black,
81
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
82
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
83
- disabledSecondaryOutlinedColor: globalTokens.lighterPurple,
84
- disabledSecondaryFontColor: globalTokens.lighterBlack,
85
- textBackgroundColor: globalTokens.transparent,
86
- textHoverBackgroundColor: globalTokens.black,
87
- textFontColor: globalTokens.purple,
88
- textHoverFontColor: globalTokens.white,
89
- textActiveBackgroundColor: globalTokens.mediumBlack,
90
- disabledTextFontColor: globalTokens.lighterPurple,
91
- focusColor: globalTokens.blue
92
- },
93
- box: {
94
- backgroundColor: globalTokens.white
95
- },
96
- card: {
97
- backgroundColor: globalTokens.white
98
- },
99
- checkbox: {
100
- backgroundColorChecked: globalTokens.mediumBlue,
101
- borderColor: globalTokens.mediumBlue,
102
- checkColor: globalTokens.white,
103
- fontColor: globalTokens.inherit,
104
- disabledBackgroundColorChecked: globalTokens.softBlue,
105
- disabledBorderColor: globalTokens.softBlue,
106
- disabledCheckColor: globalTokens.white,
107
- disabledFontColor: globalTokens.lighterBlack,
108
- focusColor: globalTokens.blue
109
- },
110
- chip: {
111
- backgroundColor: globalTokens.darkWhite,
112
- outlinedColor: "",
113
- fontColor: globalTokens.black,
114
- disabledBackgroundColor: globalTokens.mediumWhite,
115
- disabledFontColor: globalTokens.lighterBlack
116
- },
117
- date: {
118
- pickerSelectedDateBackgroundColor: globalTokens.purple,
119
- pickerSelectedDateColor: globalTokens.white,
120
- pickerBackgroundColor: globalTokens.white,
121
- pickerFontColor: globalTokens.black,
122
- pickerActualDate: globalTokens.lightGrey,
123
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
124
- pickerHoverDateFontColor: globalTokens.black,
125
- scrollBarThumbColor: globalTokens.darkGrey,
126
- scrollBarTrackColor: globalTokens.lightGrey,
127
- focusColor: globalTokens.blue
128
- },
129
- dialog: {
130
- overlayColor: globalTokens.black,
131
- scrollBarThumbColor: globalTokens.darkGrey,
132
- scrollBarTrackColor: globalTokens.lightGrey,
133
- backgroundColor: globalTokens.white
134
- },
135
- dropdown: {
136
- backgroundColor: globalTokens.white,
137
- fontColor: globalTokens.black,
138
- dropdownBackgroundColor: globalTokens.white,
139
- dropdownFontColor: globalTokens.black,
140
- hoverBackgroundOption: globalTokens.white,
141
- hoverBackgroundColor: globalTokens.white,
142
- scrollBarThumbColor: globalTokens.darkGrey,
143
- scrollBarTrackColor: globalTokens.lightGrey,
144
- focusColor: globalTokens.blue
145
- },
146
- footer: {
147
- backgroundColor: globalTokens.black,
148
- fontColor: globalTokens.white,
149
- lineColor: globalTokens.mediumBlue,
150
- logo: _dxc_logo_wht["default"]
151
- },
152
- header: {
153
- backgroundColor: globalTokens.white,
154
- underlinedColor: globalTokens.black,
155
- fontColor: globalTokens.black,
156
- backgroundColorMenu: globalTokens.white,
157
- fontColorMenu: globalTokens.black,
158
- hamburguerColor: globalTokens.black,
159
- hoverHamburguerColor: globalTokens.mediumGreyBlack,
160
- overlayColor: globalTokens.softBlack,
161
- focusColor: globalTokens.blue,
162
- logo: _dxc_logo_blk_rgb["default"],
163
- logoResponsive: _dxc_logo_blk_rgb["default"]
164
- },
165
- inputText: {
166
- fontColor: globalTokens.black,
167
- disabledFontColor: globalTokens.lighterBlack,
168
- placeholderColor: globalTokens.lightGrey,
169
- error: globalTokens.red,
170
- selectedOptionBackgroundColor: globalTokens.lightWhite,
171
- hoverOptionColor: globalTokens.black,
172
- scrollBarThumbColor: globalTokens.darkGrey,
173
- scrollBarTrackColor: globalTokens.lightGrey
174
- },
175
- link: {
176
- fontColor: globalTokens.blue,
177
- visitedFontColor: globalTokens.violet,
178
- underlinedBackgroundColor: globalTokens.blue,
179
- visitedUnderlinedBackgroundColor: globalTokens.violet,
180
- disabledColor: globalTokens.lightGrey,
181
- disabledUnderlinedBackgroundColor: globalTokens.lightGrey,
182
- hoverFontColor: globalTokens.darkBlue
183
- },
184
- paginator: {
185
- paginatorBackgroundColor: globalTokens.darkWhite,
186
- paginatorFontColor: globalTokens.black
187
- },
188
- progressBar: {
189
- trackLine: globalTokens.purple,
190
- totalLine: globalTokens.softGrey,
191
- fontColor: globalTokens.inherit,
192
- overlayColor: globalTokens.black
193
- },
194
- radio: {
195
- color: globalTokens.black,
196
- disabledColor: globalTokens.lighterBlack,
197
- fontColor: globalTokens.inherit,
198
- disabledFontColor: globalTokens.lighterBlack,
199
- focusColor: globalTokens.blue
200
- },
201
- select: {
202
- selectedOptionBackgroundColor: globalTokens.lightGrey,
203
- color: globalTokens.black,
204
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
205
- error: globalTokens.red,
206
- scrollBarThumbColor: globalTokens.darkGrey,
207
- scrollBarTrackColor: globalTokens.lightGrey,
208
- disabledColor: globalTokens.lighterBlack,
209
- focusColor: globalTokens.blue
210
- },
211
- sidenav: {
212
- backgroundColor: globalTokens.lighterGrey,
213
- arrowContainerColor: globalTokens.lightGrey,
214
- arrowColor: globalTokens.black
215
- },
216
- slider: {
217
- thumbBackgroundColor: globalTokens.mediumBlue,
218
- dotsBackgroundColor: globalTokens.mediumBlue,
219
- trackLine: globalTokens.mediumBlue,
220
- totalLine: globalTokens.softBlue,
221
- disabledThumbBackgroundColor: globalTokens.softBlue,
222
- disabledDotsBackgroundColor: globalTokens.softBlue,
223
- disabledTrackLine: globalTokens.softBlue,
224
- focusColor: globalTokens.blue
225
- },
226
- spinner: {
227
- trackCircleColor: globalTokens.purple,
228
- totalCircleColor: globalTokens.white,
229
- fontColor: globalTokens.inherit,
230
- overlayColor: globalTokens.black
231
- },
232
- "switch": {
233
- checkedTrackBackgroundColor: globalTokens.purple,
234
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
235
- checkedThumbBackgroundColor: globalTokens.white,
236
- uncheckedThumbBackgroundColor: globalTokens.white,
237
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
238
- disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
239
- fontColor: globalTokens.black,
240
- disabledFontColor: globalTokens.lighterBlack,
241
- focusColor: globalTokens.blue
242
- },
243
- table: {
244
- headerBackgroundColor: globalTokens.purple,
245
- headerFontColor: globalTokens.white,
246
- separatorColor: globalTokens.lightGrey,
247
- bodyBackgroundColor: globalTokens.white,
248
- bodyFontColor: globalTokens.black
249
- },
250
- tabs: {
251
- selectedFontColor: globalTokens.purple,
252
- selectedIconColor: globalTokens.purple,
253
- selectedUnderlineColor: globalTokens.purple,
254
- backgroundColor: globalTokens.white,
255
- fontColor: globalTokens.darkGrey,
256
- disabledFontColor: globalTokens.mediumGrey,
257
- focusOutline: globalTokens.purple,
258
- divider: globalTokens.mediumGrey,
259
- hoverBackgroundColor: globalTokens.lightPurple,
260
- pressedBackgroundColor: globalTokens.mediumPurple
261
- },
262
- tag: {
263
- backgroundColor: globalTokens.white
264
- },
265
- textarea: {
266
- fontColor: globalTokens.black,
267
- placeholderColor: globalTokens.lightGrey,
268
- disabledFontColor: globalTokens.lighterBlack,
269
- error: globalTokens.red,
270
- scrollBarThumbColor: globalTokens.darkGrey,
271
- scrollBarTrackColor: globalTokens.lightGrey
272
- },
273
- toggleGroup: {
274
- selectedBackgroundColor: globalTokens.purple,
275
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
276
- selectedBackgroundHoverColor: globalTokens.black,
277
- selectedFontColor: globalTokens.white,
278
- selectedHoverFontColor: globalTokens.white,
279
- unselectedBackgroundColor: globalTokens.lightGrey,
280
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
281
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
282
- unselectedFontColor: globalTokens.black,
283
- unselectedHoverFontColor: globalTokens.black,
284
- disabledUnselectedFontColor: globalTokens.lighterBlack,
285
- disabledSelectedFontColor: globalTokens.white
286
- },
287
- wizard: {
288
- selectedBackgroundColor: globalTokens.purple,
289
- selectedFont: globalTokens.white,
290
- borderColor: globalTokens.black,
291
- fontColor: globalTokens.inherit,
292
- lineColor: globalTokens.lightGrey,
293
- disabledBackground: globalTokens.lightGrey,
294
- disabledFont: globalTokens.darkGrey
295
- }
296
- };
297
- exports.componentTokens = componentTokens;
298
- var spaces = {
299
- xxsmall: "6px",
300
- xsmall: "16px",
301
- small: "24px",
302
- medium: "36px",
303
- large: "48px",
304
- xlarge: "64px",
305
- xxlarge: "100px"
306
- };
307
- exports.spaces = spaces;
308
- var responsiveSizes = {
309
- mobileSmall: "320",
310
- mobileMedium: "375",
311
- mobileLarge: "425",
312
- tablet: "768",
313
- laptop: "1024",
314
- desktop: "1440"
315
- };
316
- exports.responsiveSizes = responsiveSizes;
317
- var typeface = {
318
- body: {
319
- fontSize: "16px",
320
- letterSpacing: "0.5",
321
- textTransform: "initial"
322
- },
323
- altBody: {
324
- fontSize: "14px",
325
- letterSpacing: "0.25",
326
- textTransform: "initial"
327
- },
328
- subtitle: {
329
- fontSize: "16px",
330
- letterSpacing: "0.15",
331
- textTransform: "initial"
332
- },
333
- altSubtitle: {
334
- fontSize: "14px",
335
- letterSpacing: "0.1",
336
- textTransform: "initial"
337
- },
338
- caption: {
339
- fontSize: "12px",
340
- letterSpacing: "0.4",
341
- textTransform: "initial"
342
- },
343
- overline: {
344
- fontSize: "12px",
345
- letterSpacing: "2",
346
- textTransform: "uppercase"
347
- }
348
- };
349
- exports.typeface = typeface;
package/dist/date/Date.js DELETED
@@ -1,352 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
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 _pickers = require("@material-ui/pickers");
23
-
24
- var _core = require("@material-ui/core");
25
-
26
- var _ClickAwayListener = _interopRequireDefault(require("@material-ui/core/ClickAwayListener"));
27
-
28
- var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
29
-
30
- var _moment = _interopRequireDefault(require("moment"));
31
-
32
- var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
33
-
34
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
35
-
36
- var _propTypes = _interopRequireDefault(require("prop-types"));
37
-
38
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
39
-
40
- require("../common/OpenSans.css");
41
-
42
- var _variables = require("../common/variables.js");
43
-
44
- var _calendar = _interopRequireDefault(require("./calendar.svg"));
45
-
46
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
47
-
48
- var _DxcDate$propTypes;
49
-
50
- function _templateObject() {
51
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: \"#FABADA\";\n"]);
52
-
53
- _templateObject = function _templateObject() {
54
- return data;
55
- };
56
-
57
- return data;
58
- }
59
-
60
- var DxcDate = function DxcDate(_ref) {
61
- var value = _ref.value,
62
- _ref$format = _ref.format,
63
- format = _ref$format === void 0 ? "dd-MM-yyyy" : _ref$format,
64
- _ref$label = _ref.label,
65
- label = _ref$label === void 0 ? "" : _ref$label,
66
- name = _ref.name,
67
- _ref$disabled = _ref.disabled,
68
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
69
- _ref$required = _ref.required,
70
- required = _ref$required === void 0 ? false : _ref$required,
71
- _ref$assistiveText = _ref.assistiveText,
72
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
73
- _ref$invalid = _ref.invalid,
74
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
75
- onChange = _ref.onChange,
76
- _ref$placeholder = _ref.placeholder,
77
- placeholder = _ref$placeholder === void 0 ? false : _ref$placeholder,
78
- _ref$onBlur = _ref.onBlur,
79
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
80
- margin = _ref.margin,
81
- _ref$size = _ref.size,
82
- size = _ref$size === void 0 ? "medium" : _ref$size;
83
-
84
- var _useState = (0, _react.useState)(""),
85
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
86
- innerValue = _useState2[0],
87
- setInnerValue = _useState2[1];
88
-
89
- var _useState3 = (0, _react.useState)(false),
90
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
91
- isOpen = _useState4[0],
92
- setIsOpen = _useState4[1];
93
-
94
- var _useState5 = (0, _react.useState)(null),
95
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
96
- anchorEl = _useState6[0],
97
- setAnchorEl = _useState6[1];
98
-
99
- var colorsTheme = (0, _useTheme["default"])();
100
-
101
- function handleMenuItemClick(date) {
102
- var stringValue = (0, _moment["default"])(date).format(format.toUpperCase());
103
-
104
- if (value == null) {
105
- setInnerValue(stringValue);
106
- }
107
-
108
- if (typeof onChange === "function") {
109
- onChange({
110
- stringValue: stringValue,
111
- dateValue: date && date.toJSON() ? date : null
112
- });
113
- }
114
- }
115
-
116
- var onChangeInput = function onChangeInput(string) {
117
- var momentDate = (0, _moment["default"])(string, format.toUpperCase(), true);
118
-
119
- if (value == null) {
120
- setInnerValue(string);
121
- }
122
-
123
- if (typeof onChange === "function") {
124
- onChange({
125
- stringValue: string,
126
- dateValue: momentDate.isValid() ? momentDate._d : null
127
- });
128
- }
129
- };
130
-
131
- var handlerInputBlur = function handlerInputBlur(inputString) {
132
- setInnerValue(inputString);
133
-
134
- if (onBlur) {
135
- onBlur(inputString);
136
- }
137
- };
138
-
139
- var getValueForPicker = function getValueForPicker() {
140
- return (0, _moment["default"])(value == null ? innerValue : value, format.toUpperCase(), true).format();
141
- };
142
-
143
- var openCalendar = function openCalendar(event) {
144
- if (event) {
145
- setIsOpen(!isOpen);
146
- setAnchorEl(event.currentTarget);
147
- }
148
- };
149
-
150
- var handlerPickerClose = function handlerPickerClose() {
151
- setIsOpen(false);
152
- handlerInputBlur(value == null ? innerValue : value);
153
- };
154
-
155
- var dateTheme = (0, _core.createMuiTheme)({
156
- overrides: {
157
- MuiPickersYearSelection: {
158
- container: {
159
- "&::-webkit-scrollbar": {
160
- width: "3px"
161
- },
162
- "&::-webkit-scrollbar-track": {
163
- backgroundColor: colorsTheme.date.scrollBarTrackColor,
164
- borderRadius: "3px"
165
- },
166
- "&::-webkit-scrollbar-thumb": {
167
- backgroundColor: colorsTheme.date.scrollBarThumbColor,
168
- borderRadius: "3px"
169
- }
170
- }
171
- },
172
- MuiPickersToolbar: {
173
- toolbar: {
174
- backgroundColor: colorsTheme.date.pickerBackgroundColor,
175
- color: colorsTheme.date.pickerFontColor
176
- }
177
- },
178
- MuiIconButton: {
179
- root: {
180
- height: "36px",
181
- width: "36px",
182
- padding: "0px"
183
- }
184
- },
185
- MuiTouchRipple: {
186
- child: {
187
- opacity: "0"
188
- }
189
- },
190
- MuiButtonBase: {
191
- root: {
192
- "&:focus": {
193
- outline: colorsTheme.date.focusColor + " 2px solid"
194
- }
195
- }
196
- },
197
- MuiPickersBasePicker: {
198
- pickerView: {
199
- minWidth: "unset",
200
- maxWidth: "unset",
201
- minHeight: "unset",
202
- padding: "0px 10px",
203
- height: "316px"
204
- }
205
- },
206
- MuiPickersToolbarText: {
207
- toolbarTxt: {
208
- color: colorsTheme.date.pickerFontColor
209
- },
210
- toolbarBtnSelected: {
211
- color: colorsTheme.date.pickerFontColor
212
- }
213
- },
214
- MuiPickersCalendarHeader: {
215
- switchHeader: {
216
- backgroundColor: colorsTheme.white,
217
- color: colorsTheme.date.pickerFontColor
218
- }
219
- },
220
- MuiPickersCalendar: {
221
- week: {
222
- marginBottom: "2px"
223
- }
224
- },
225
- MuiPickersDay: {
226
- current: {
227
- border: colorsTheme.date.pickerActualDate + " 2px solid",
228
- color: colorsTheme.date.pickerFontColor
229
- },
230
- day: {
231
- color: colorsTheme.date.pickerFontColor,
232
- "&:hover": {
233
- backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor,
234
- color: colorsTheme.date.pickerHoverDateFontColor
235
- }
236
- },
237
- daySelected: {
238
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
239
- color: colorsTheme.date.pickerSelectedDateColor,
240
- "&:hover": {
241
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
242
- color: colorsTheme.date.pickerSelectedDateColor,
243
- opacity: "1"
244
- }
245
- }
246
- },
247
- MuiPickersYear: {
248
- yearSelected: {
249
- color: colorsTheme.date.pickerSelectedDateColor,
250
- backgroundColor: colorsTheme.date.pickerSelectedDateBackgroundColor,
251
- margin: "0px 100px",
252
- borderRadius: "20px",
253
- fontSize: "16px"
254
- },
255
- root: {
256
- "&:focus": {
257
- color: colorsTheme.date.pickerHoverDateFontColor,
258
- backgroundColor: colorsTheme.date.pickerHoverDateBackgroundColor
259
- }
260
- }
261
- },
262
- MuiPickersModal: {
263
- dialogAction: {
264
- color: "pink"
265
- }
266
- }
267
- },
268
- typography: {
269
- fontFamily: '"Open Sans", sans-serif'
270
- }
271
- });
272
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
273
- theme: colorsTheme
274
- }, _react["default"].createElement(_core.MuiThemeProvider, {
275
- theme: dateTheme
276
- }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
277
- utils: _dateFns["default"]
278
- }, _react["default"].createElement(StyledDPicker, {
279
- margin: margin
280
- }, _react["default"].createElement(_InputText["default"], {
281
- label: label,
282
- name: name,
283
- suffixIconSrc: _calendar["default"],
284
- required: required,
285
- invalid: invalid,
286
- disabled: disabled,
287
- assistiveText: assistiveText,
288
- margin: margin,
289
- size: size,
290
- placeholder: placeholder ? format.toUpperCase() : null,
291
- value: value == null ? innerValue : value,
292
- onClickSuffix: openCalendar,
293
- onChange: onChangeInput,
294
- onBlur: onBlur && handlerInputBlur || null
295
- }), _react["default"].createElement(_Popover["default"], {
296
- open: isOpen,
297
- anchorEl: anchorEl,
298
- anchorOrigin: {
299
- vertical: "bottom",
300
- horizontal: "left"
301
- },
302
- transformOrigin: {
303
- vertical: "top",
304
- horizontal: "center"
305
- },
306
- PaperProps: {
307
- style: {
308
- marginTop: "10px"
309
- }
310
- }
311
- }, _react["default"].createElement(_ClickAwayListener["default"], {
312
- onClickAway: handlerPickerClose
313
- }, _react["default"].createElement(_core.Paper, null, _react["default"].createElement(_pickers.DatePicker, {
314
- variant: "static",
315
- value: getValueForPicker(),
316
- onChange: function onChange(date) {
317
- return handleMenuItemClick(date);
318
- },
319
- format: format,
320
- disabled: disabled
321
- }))))))));
322
- };
323
-
324
- var sizes = {
325
- medium: "240px",
326
- large: "480px",
327
- fillParent: "100%"
328
- };
329
-
330
- var StyledDPicker = _styledComponents["default"].div(_templateObject());
331
-
332
- DxcDate.propTypes = (_DxcDate$propTypes = {
333
- value: _propTypes["default"].string,
334
- format: _propTypes["default"].string,
335
- label: _propTypes["default"].string,
336
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
337
- name: _propTypes["default"].string,
338
- disabled: _propTypes["default"].bool,
339
- required: _propTypes["default"].bool,
340
- placeholder: _propTypes["default"].bool,
341
- assistiveText: _propTypes["default"].string,
342
- invalid: _propTypes["default"].bool,
343
- onChange: _propTypes["default"].func,
344
- onBlur: _propTypes["default"].func
345
- }, (0, _defineProperty2["default"])(_DxcDate$propTypes, "onChange", _propTypes["default"].func), (0, _defineProperty2["default"])(_DxcDate$propTypes, "size", _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes)))), (0, _defineProperty2["default"])(_DxcDate$propTypes, "margin", _propTypes["default"].oneOfType([_propTypes["default"].shape({
346
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
347
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
348
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
349
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
350
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])), _DxcDate$propTypes);
351
- var _default = DxcDate;
352
- exports["default"] = _default;