@dxc-technology/halstack-react 0.0.0-20fc09e → 0.0.0-23f04da

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 (137) hide show
  1. package/README.md +1 -1
  2. package/dist/ThemeContext.js +40 -38
  3. package/dist/V3Select/V3Select.js +549 -0
  4. package/dist/V3Select/index.d.ts +27 -0
  5. package/dist/V3Textarea/index.d.ts +27 -0
  6. package/dist/accordion/index.d.ts +28 -0
  7. package/dist/accordion-group/index.d.ts +16 -0
  8. package/dist/alert/Alert.js +1 -1
  9. package/dist/box/index.d.ts +25 -0
  10. package/dist/button/Button.js +3 -3
  11. package/dist/button/index.d.ts +24 -0
  12. package/dist/card/index.d.ts +22 -0
  13. package/dist/checkbox/Checkbox.js +4 -5
  14. package/dist/checkbox/index.d.ts +24 -0
  15. package/dist/chip/index.d.ts +22 -0
  16. package/dist/common/variables.js +128 -123
  17. package/dist/date/Date.js +6 -6
  18. package/dist/date/index.d.ts +27 -0
  19. package/dist/dialog/index.d.ts +18 -0
  20. package/dist/dropdown/index.d.ts +26 -0
  21. package/dist/file-input/FileItem.js +8 -1
  22. package/dist/file-input/index.d.ts +1 -1
  23. package/dist/footer/index.d.ts +25 -0
  24. package/dist/header/Header.js +61 -25
  25. package/dist/header/index.d.ts +25 -0
  26. package/dist/heading/Heading.js +12 -0
  27. package/dist/heading/index.d.ts +17 -0
  28. package/dist/input-text/Icons.js +22 -0
  29. package/dist/input-text/InputText.js +7 -9
  30. package/dist/input-text/index.d.ts +36 -0
  31. package/dist/layout/ApplicationLayout.js +4 -8
  32. package/dist/layout/Icons.js +55 -0
  33. package/dist/link/index.d.ts +23 -0
  34. package/dist/main.d.ts +36 -4
  35. package/dist/main.js +9 -17
  36. package/dist/paginator/Icons.js +66 -0
  37. package/dist/paginator/Paginator.js +53 -37
  38. package/dist/paginator/index.d.ts +20 -0
  39. package/dist/password-input/PasswordInput.js +6 -1
  40. package/dist/progress-bar/index.d.ts +18 -0
  41. package/dist/radio/index.d.ts +23 -0
  42. package/dist/resultsetTable/index.d.ts +19 -0
  43. package/dist/select/Select.js +848 -301
  44. package/dist/{new-select → select}/index.d.ts +1 -1
  45. package/dist/sidenav/index.d.ts +13 -0
  46. package/dist/slider/Slider.js +16 -6
  47. package/dist/slider/index.d.ts +29 -0
  48. package/dist/spinner/index.d.ts +17 -0
  49. package/dist/switch/index.d.ts +24 -0
  50. package/dist/table/index.d.ts +13 -0
  51. package/dist/tabs/index.d.ts +19 -0
  52. package/dist/tag/index.d.ts +24 -0
  53. package/dist/text-input/TextInput.js +8 -5
  54. package/dist/toggle/index.d.ts +21 -0
  55. package/dist/toggle-group/index.d.ts +21 -0
  56. package/dist/upload/Upload.js +3 -3
  57. package/dist/upload/buttons-upload/ButtonsUpload.js +7 -11
  58. package/dist/upload/buttons-upload/Icons.js +40 -0
  59. package/dist/upload/dragAndDropArea/DragAndDropArea.js +14 -14
  60. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  61. package/dist/upload/file-upload/FileToUpload.js +26 -21
  62. package/dist/upload/file-upload/Icons.js +66 -0
  63. package/dist/upload/index.d.ts +15 -0
  64. package/dist/upload/transaction/Icons.js +160 -0
  65. package/dist/upload/transaction/Transaction.js +11 -38
  66. package/dist/wizard/Icons.js +65 -0
  67. package/dist/wizard/Wizard.js +3 -9
  68. package/dist/wizard/index.d.ts +18 -0
  69. package/package.json +5 -9
  70. package/test/Date.test.js +34 -36
  71. package/test/Heading.test.js +60 -12
  72. package/test/InputText.test.js +16 -24
  73. package/test/Paginator.test.js +5 -1
  74. package/test/ResultsetTable.test.js +5 -4
  75. package/test/Select.test.js +374 -171
  76. package/test/Slider.test.js +9 -17
  77. package/test/TextInput.test.js +5 -5
  78. package/test/Upload.test.js +4 -4
  79. package/test/V3Select.test.js +212 -0
  80. package/dist/checkbox/Checkbox.stories.js +0 -144
  81. package/dist/checkbox/readme.md +0 -116
  82. package/dist/date/Date.stories.js +0 -205
  83. package/dist/date/readme.md +0 -73
  84. package/dist/input-text/error.svg +0 -1
  85. package/dist/input-text/readme.md +0 -91
  86. package/dist/layout/facebook.svg +0 -45
  87. package/dist/layout/linkedin.svg +0 -50
  88. package/dist/layout/twitter.svg +0 -53
  89. package/dist/link/readme.md +0 -51
  90. package/dist/new-select/NewSelect.js +0 -836
  91. package/dist/paginator/images/next.svg +0 -3
  92. package/dist/paginator/images/nextPage.svg +0 -3
  93. package/dist/paginator/images/previous.svg +0 -3
  94. package/dist/paginator/images/previousPage.svg +0 -3
  95. package/dist/paginator/readme.md +0 -50
  96. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  97. package/dist/progress-bar/readme.md +0 -63
  98. package/dist/radio/Radio.stories.js +0 -166
  99. package/dist/radio/readme.md +0 -70
  100. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  101. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  102. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  103. package/dist/slider/readme.md +0 -64
  104. package/dist/spinner/Spinner.stories.js +0 -183
  105. package/dist/spinner/readme.md +0 -65
  106. package/dist/switch/Switch.stories.js +0 -134
  107. package/dist/switch/readme.md +0 -133
  108. package/dist/tabs/Tabs.stories.js +0 -130
  109. package/dist/tabs/readme.md +0 -78
  110. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  111. package/dist/tabs-for-sections/readme.md +0 -78
  112. package/dist/toggle/Toggle.stories.js +0 -297
  113. package/dist/toggle/readme.md +0 -80
  114. package/dist/upload/Upload.stories.js +0 -72
  115. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  116. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  117. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  118. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  119. package/dist/upload/file-upload/audio-icon.svg +0 -4
  120. package/dist/upload/file-upload/close.svg +0 -4
  121. package/dist/upload/file-upload/file-icon.svg +0 -4
  122. package/dist/upload/file-upload/video-icon.svg +0 -4
  123. package/dist/upload/readme.md +0 -37
  124. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  125. package/dist/upload/transaction/audio-icon.svg +0 -4
  126. package/dist/upload/transaction/error-icon.svg +0 -4
  127. package/dist/upload/transaction/file-icon-err.svg +0 -4
  128. package/dist/upload/transaction/file-icon.svg +0 -4
  129. package/dist/upload/transaction/image-icon-err.svg +0 -4
  130. package/dist/upload/transaction/image-icon.svg +0 -4
  131. package/dist/upload/transaction/success-icon.svg +0 -4
  132. package/dist/upload/transaction/video-icon-err.svg +0 -4
  133. package/dist/upload/transaction/video-icon.svg +0 -4
  134. package/dist/wizard/invalid_icon.svg +0 -5
  135. package/dist/wizard/valid_icon.svg +0 -5
  136. package/dist/wizard/validation-wrong.svg +0 -6
  137. package/test/TabsForSections.test.js +0 -34
@@ -50,4 +50,4 @@ type Props = {
50
50
  ref?: React.RefObject<HTMLDivElement>;
51
51
  };
52
52
 
53
- export default function DxcNewSelect(props: Props): JSX.Element;
53
+ export default function DxcSelect(props: Props): JSX.Element;
@@ -0,0 +1,13 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Padding = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ padding?: Space | Padding;
11
+ };
12
+
13
+ export default function DxcSidenav(props: Props): JSX.Element;
@@ -25,7 +25,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
25
 
26
26
  var _propTypes = _interopRequireDefault(require("prop-types"));
27
27
 
28
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
28
+ var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
29
29
 
30
30
  var _variables = require("../common/variables.js");
31
31
 
@@ -36,7 +36,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
36
36
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
37
 
38
38
  function _templateObject7() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n label + .MuiInput-formControl {\n margin-top: 2px;\n }\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n label + .MuiInput-formControl {\n margin-top: 2px;\n }\n max-width: 70px;\n"]);
40
40
 
41
41
  _templateObject7 = function _templateObject7() {
42
42
  return data;
@@ -160,12 +160,22 @@ var DxcSlider = function DxcSlider(_ref) {
160
160
  };
161
161
 
162
162
  var handlerInputChange = function handlerInputChange(event) {
163
+ var intValue = parseInt(event.value, 10);
164
+
163
165
  if (value == null) {
164
- setInnerValue(event > maxValue ? maxValue : event);
166
+ if (!Number.isNaN(intValue)) {
167
+ setInnerValue(intValue > maxValue ? maxValue : intValue);
168
+ } else {
169
+ setInnerValue("");
170
+ }
165
171
  }
166
172
 
167
173
  if (typeof onChange === "function") {
168
- onChange(event > maxValue ? maxValue : event);
174
+ if (!Number.isNaN(intValue)) {
175
+ onChange(intValue > maxValue ? maxValue : intValue);
176
+ } else {
177
+ onChange("");
178
+ }
169
179
  }
170
180
  };
171
181
 
@@ -194,12 +204,12 @@ var DxcSlider = function DxcSlider(_ref) {
194
204
  backgroundType: backgroundType,
195
205
  disabled: disabled,
196
206
  step: step
197
- }, maxLabel), showInput && _react["default"].createElement(StyledTextInput, null, _react["default"].createElement(_InputText["default"], {
207
+ }, maxLabel), showInput && _react["default"].createElement(StyledTextInput, null, _react["default"].createElement(_TextInput["default"], {
198
208
  name: name,
199
209
  value: value != null && value >= 0 && value || innerValue,
200
210
  disabled: disabled,
201
211
  onChange: handlerInputChange,
202
- size: "small"
212
+ size: "fillParent"
203
213
  })))));
204
214
  };
205
215
 
@@ -0,0 +1,29 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ label?: string;
12
+ helperText?: string;
13
+ minValue?: number;
14
+ maxValue?: number;
15
+ step?: number;
16
+ value?: number;
17
+ showLimitsValues?: boolean;
18
+ showInput?: boolean;
19
+ name?: string;
20
+ onChange?: void;
21
+ onDragEnd?: void;
22
+ disabled?: boolean;
23
+ marks?: boolean;
24
+ labelFormatCallback?: void;
25
+ margin?: Space | Margin;
26
+ size?: Size;
27
+ };
28
+
29
+ export default function DxcSlider(props: Props): JSX.Element;
@@ -0,0 +1,17 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ label?: string;
11
+ value?: number;
12
+ showValue?: boolean;
13
+ mode?: "large" | "small" | "overlay";
14
+ margin?: Space | Margin;
15
+ };
16
+
17
+ export default function DxcSpinner(props: Props): JSX.Element;
@@ -0,0 +1,24 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ checked?: boolean;
12
+ value?: any;
13
+ label?: string;
14
+ labelPosition?: "before" | "after";
15
+ name?: string,
16
+ disabled?: boolean;
17
+ onChange?: void;
18
+ required?: boolean;
19
+ margin?: Space | Margin;
20
+ size?: Size;
21
+ tabIndex?: number;
22
+ };
23
+
24
+ export default function DxcSwitch(props: Props): JSX.Element;
@@ -0,0 +1,13 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ margin?: Space | Margin;
11
+ };
12
+
13
+ export default function DxcTable(props: Props): JSX.Element;
@@ -0,0 +1,19 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ activeTabIndex?: number;
11
+ tabs?: any;
12
+ onTabClick?: void;
13
+ onTabHover?: void;
14
+ iconPosition?: "top" | "left";
15
+ margin?: Space | Margin;
16
+ tabIndex?: number;
17
+ };
18
+
19
+ export default function DxcTabs(props: Props): JSX.Element;
@@ -0,0 +1,24 @@
1
+ type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
+ top?: Space;
5
+ bottom?: Space;
6
+ left?: Space;
7
+ right?: Space;
8
+ };
9
+
10
+ type Props = {
11
+ icon?: any;
12
+ iconSrc?: string;
13
+ label?: string;
14
+ linkHref?: string;
15
+ onClick?: void,
16
+ iconBgColor?: string;
17
+ labelPosition?: "before" | "after";
18
+ newWindow?: boolean;
19
+ margin?: Space | Margin;
20
+ size?: Size;
21
+ tabIndex?: number;
22
+ };
23
+
24
+ export default function DxcTag(props: Props): JSX.Element;
@@ -126,7 +126,7 @@ function _templateObject9() {
126
126
  }
127
127
 
128
128
  function _templateObject8() {
129
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 3px;\n margin-left: calc(1rem * 0.25);\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n svg {\n line-height: 18px;\n }\n"]);
129
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 2px;\n padding: 3px;\n margin-left: calc(1rem * 0.25);\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n svg {\n line-height: 18px;\n }\n"]);
130
130
 
131
131
  _templateObject8 = function _templateObject8() {
132
132
  return data;
@@ -243,6 +243,8 @@ var patternMatch = function patternMatch(pattern, value) {
243
243
  };
244
244
 
245
245
  var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
246
+ var _action$title;
247
+
246
248
  var _ref$label = _ref.label,
247
249
  label = _ref$label === void 0 ? "" : _ref$label,
248
250
  _ref$name = _ref.name,
@@ -649,11 +651,11 @@ var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
649
651
  var noMatchedWords = suggestion.replace(regEx, "");
650
652
  return _react["default"].createElement(Suggestion, {
651
653
  id: "suggestion-".concat(index),
652
- onMouseDown: function onMouseDown() {
653
- changeIsActiveSuggestion(true);
654
+ onMouseDown: function onMouseDown(event) {
655
+ event.button === 0 && changeIsActiveSuggestion(true);
654
656
  },
655
- onMouseUp: function onMouseUp() {
656
- if (isActiveSuggestion) {
657
+ onMouseUp: function onMouseUp(event) {
658
+ if (event.button === 0 && isActiveSuggestion) {
657
659
  changeValue(suggestion);
658
660
  changeIsActiveSuggestion(false);
659
661
  closeSuggestions();
@@ -745,6 +747,7 @@ var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
745
747
  ref: actionRef,
746
748
  disabled: disabled,
747
749
  onClick: action.onClick,
750
+ title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
748
751
  backgroundType: backgroundType,
749
752
  tabIndex: tabIndex
750
753
  }, typeof action.icon === "string" ? _react["default"].createElement(ActionIcon, {
@@ -0,0 +1,21 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ label?: string;
11
+ helperText?: string;
12
+ value?: any;
13
+ onChange?: void;
14
+ disabled?: boolean,
15
+ options?: any;
16
+ multiple?: boolean;
17
+ margin?: Space | Margin;
18
+ tabIndex?: number;
19
+ };
20
+
21
+ export default function DxcToggle(props: Props): JSX.Element;
@@ -0,0 +1,21 @@
1
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
2
+ type Margin = {
3
+ top?: Space;
4
+ bottom?: Space;
5
+ left?: Space;
6
+ right?: Space;
7
+ };
8
+
9
+ type Props = {
10
+ label?: string;
11
+ helperText?: string;
12
+ value?: any;
13
+ onChange?: void;
14
+ disabled?: boolean;
15
+ options?: any;
16
+ multiple?: boolean;
17
+ margin?: Space | Margin;
18
+ tabIndex?: number;
19
+ };
20
+
21
+ export default function DxcToggleGroup(props: Props): JSX.Element;
@@ -41,7 +41,7 @@ function _templateObject() {
41
41
  return data;
42
42
  }
43
43
 
44
- var V3DxcUpload = function V3DxcUpload(_ref) {
44
+ var DxcUpload = function DxcUpload(_ref) {
45
45
  var callbackUpload = _ref.callbackUpload,
46
46
  margin = _ref.margin,
47
47
  _ref$tabIndex = _ref.tabIndex,
@@ -178,7 +178,7 @@ var V3DxcUpload = function V3DxcUpload(_ref) {
178
178
  }));
179
179
  };
180
180
 
181
- V3DxcUpload.propTypes = {
181
+ DxcUpload.propTypes = {
182
182
  callbackUpload: _propTypes["default"].func,
183
183
  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
184
184
  top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
@@ -201,5 +201,5 @@ var DXCUpload = _styledComponents["default"].div(_templateObject(), function (pr
201
201
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
202
202
  });
203
203
 
204
- var _default = V3DxcUpload;
204
+ var _default = DxcUpload;
205
205
  exports["default"] = _default;
@@ -19,16 +19,14 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
19
 
20
20
  var _Button = _interopRequireDefault(require("../../button/Button"));
21
21
 
22
- var _uploadButton = _interopRequireDefault(require("./upload-button.svg"));
23
-
24
- var _dragDropIcon = _interopRequireDefault(require("./drag-drop-icon.svg"));
22
+ var _Icons = require("./Icons");
25
23
 
26
24
  var _useTheme = _interopRequireDefault(require("../../useTheme.js"));
27
25
 
28
26
  var _BackgroundColorContext = require("../../BackgroundColorContext.js");
29
27
 
30
28
  function _templateObject3() {
31
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n margin-right: 5px;\n"]);
29
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n margin-right: 5px;\n & svg {\n fill: ", ";\n }\n"]);
32
30
 
33
31
  _templateObject3 = function _templateObject3() {
34
32
  return data;
@@ -81,7 +79,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
81
79
  theme: colorsTheme.upload
82
80
  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
83
81
  color: colorsTheme.upload.backgroundColor
84
- }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIcon, null), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
82
+ }, _react["default"].createElement(DXCButtonsUpload, null, _react["default"].createElement(DragAndDropLabel, null, _react["default"].createElement(DragAndDropIconContainer, null, _Icons.dragAndDropIcon), "Drag and Drop area"), _react["default"].createElement(_Button["default"], {
85
83
  margin: {
86
84
  right: "small"
87
85
  },
@@ -99,7 +97,7 @@ var DxcButtonsUpload = function DxcButtonsUpload(_ref) {
99
97
  }), _react["default"].createElement(_Button["default"], {
100
98
  label: "UPLOAD",
101
99
  iconPosition: "after",
102
- iconSrc: _uploadButton["default"],
100
+ icon: _Icons.uploadIcon,
103
101
  onClick: onUpload
104
102
  }))));
105
103
  };
@@ -125,14 +123,12 @@ var DragAndDropLabel = _styledComponents["default"].div(_templateObject2(), func
125
123
  return props.theme.dragAndDropAreaTextFontColor;
126
124
  });
127
125
 
128
- var DragAndDropIcon = _styledComponents["default"].div(_templateObject3(), function (props) {
129
- return props.theme.dragAndDropAreaIconColor;
130
- }, _dragDropIcon["default"], function (props) {
131
- return "".concat(props.theme.dragAndDropAreaIconSize, " ").concat(props.theme.dragAndDropAreaIconSize);
132
- }, function (props) {
126
+ var DragAndDropIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
133
127
  return props.theme.dragAndDropAreaIconSize;
134
128
  }, function (props) {
135
129
  return props.theme.dragAndDropAreaIconSize;
130
+ }, function (props) {
131
+ return props.theme.dragAndDropAreaIconColor;
136
132
  });
137
133
 
138
134
  var _default = DxcButtonsUpload;
@@ -0,0 +1,40 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.dragAndDropIcon = exports.uploadIcon = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var uploadIcon = _react["default"].createElement("svg", {
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: "24",
15
+ height: "24",
16
+ viewBox: "0 0 24 24",
17
+ fill: "#FFFFFF"
18
+ }, _react["default"].createElement("path", {
19
+ d: "M0 0h24v24H0z",
20
+ fill: "none"
21
+ }), _react["default"].createElement("path", {
22
+ d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"
23
+ }));
24
+
25
+ exports.uploadIcon = uploadIcon;
26
+
27
+ var dragAndDropIcon = _react["default"].createElement("svg", {
28
+ xmlns: "http://www.w3.org/2000/svg",
29
+ width: "24",
30
+ height: "24",
31
+ viewBox: "0 0 24 24",
32
+ fill: "#666666"
33
+ }, _react["default"].createElement("path", {
34
+ fill: "none",
35
+ d: "M0 0h24v24H0V0z"
36
+ }), _react["default"].createElement("path", {
37
+ d: "M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"
38
+ }));
39
+
40
+ exports.dragAndDropIcon = dragAndDropIcon;
@@ -19,11 +19,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
19
 
20
20
  var _propTypes = _interopRequireDefault(require("prop-types"));
21
21
 
22
- require("../../common/variables.js");
23
-
24
- var _upload_file = _interopRequireDefault(require("./upload_file.svg"));
25
-
26
- var _upload_drop = _interopRequireDefault(require("./upload_drop.svg"));
22
+ var _Icons = require("./Icons");
27
23
 
28
24
  var _Button = _interopRequireDefault(require("../../button/Button"));
29
25
 
@@ -42,7 +38,7 @@ function _templateObject11() {
42
38
  }
43
39
 
44
40
  function _templateObject10() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n"]);
41
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n & svg {\n fill: ", ";\n height: ", ";\n width: ", ";\n }\n"]);
46
42
 
47
43
  _templateObject10 = function _templateObject10() {
48
44
  return data;
@@ -102,7 +98,7 @@ function _templateObject5() {
102
98
  }
103
99
 
104
100
  function _templateObject4() {
105
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n mask: url(", ") no-repeat center;\n mask-size: ", ";\n height: ", ";\n width: ", ";\n margin-bottom: 20px;\n"]);
101
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n margin-bottom: 20px;\n & svg {\n fill: ", ";\n height: ", ";\n width: ", ";\n }\n"]);
106
102
 
107
103
  _templateObject4 = function _templateObject4() {
108
104
  return data;
@@ -216,7 +212,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
216
212
  onDragOver: handleDrag,
217
213
  onDragLeave: handleDragOut,
218
214
  dashed: dashed
219
- }, !dragging && !dashed && _react["default"].createElement(DXCDragAndDropArea, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
215
+ }, !dragging && !dashed && _react["default"].createElement(DXCDragAndDropArea, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null, _Icons.uploadFileIcon), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
220
216
  label: "CHOOSE FILES",
221
217
  onClick: handleClick,
222
218
  tabIndex: tabIndexValue
@@ -228,7 +224,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
228
224
  style: {
229
225
  display: "none"
230
226
  }
231
- })))), !dragging && dashed && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement(ButtonChooseFiles, null, _react["default"].createElement(_Button["default"], {
227
+ })))), !dragging && dashed && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropContent, null, _react["default"].createElement(DragAndDropIcon, null, _Icons.uploadFileIcon), _react["default"].createElement(DragAndDropText, null, _react["default"].createElement(DragAndDropTitle, null, text), _react["default"].createElement(DragAndDropDescription, null, description)), _react["default"].createElement(ButtonChooseFiles, null, _react["default"].createElement(_Button["default"], {
232
228
  theme: "light",
233
229
  label: "CHOOSE FILES",
234
230
  onClick: handleClick,
@@ -241,7 +237,7 @@ var DxcDragAndDropArea = function DxcDragAndDropArea(_ref) {
241
237
  style: {
242
238
  display: "none"
243
239
  }
244
- })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null)))));
240
+ })))), dragging && _react["default"].createElement(DragAndDropContentHover, null, _react["default"].createElement(DragAndDropTextHover, null, textHover), _react["default"].createElement(DragAndDropIconHover, null, _Icons.dropFileIcon)))));
245
241
  };
246
242
 
247
243
  DxcDragAndDropArea.propTypes = {
@@ -262,9 +258,11 @@ var DXCDragAndDropArea = _styledComponents["default"].div(_templateObject2(), fu
262
258
  var DragAndDropContent = _styledComponents["default"].div(_templateObject3());
263
259
 
264
260
  var DragAndDropIcon = _styledComponents["default"].div(_templateObject4(), function (props) {
261
+ return props.theme.dragAndDropIconSize;
262
+ }, function (props) {
263
+ return props.theme.dragAndDropIconSize;
264
+ }, function (props) {
265
265
  return props.theme.dragAndDropIconColor;
266
- }, _upload_file["default"], function (props) {
267
- return "".concat(props.theme.dragAndDropIconSize, " ").concat(props.theme.dragAndDropIconSize);
268
266
  }, function (props) {
269
267
  return props.theme.dragAndDropIconSize;
270
268
  }, function (props) {
@@ -304,9 +302,11 @@ var DragAndDropContentHover = _styledComponents["default"].div(_templateObject9(
304
302
  });
305
303
 
306
304
  var DragAndDropIconHover = _styledComponents["default"].div(_templateObject10(), function (props) {
305
+ return props.theme.dragAndDropDraggingStateIconSize;
306
+ }, function (props) {
307
+ return props.theme.dragAndDropDraggingStateIconSize;
308
+ }, function (props) {
307
309
  return props.theme.dragAndDropDraggingStateIconColor;
308
- }, _upload_drop["default"], function (props) {
309
- return "".concat(props.theme.dragAndDropDraggingStateIconSize, " ").concat(props.theme.dragAndDropDraggingStateIconSize);
310
310
  }, function (props) {
311
311
  return props.theme.dragAndDropDraggingStateIconSize;
312
312
  }, function (props) {
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.uploadFileIcon = exports.dropFileIcon = void 0;
9
+
10
+ var _react = _interopRequireDefault(require("react"));
11
+
12
+ var dropFileIcon = _react["default"].createElement("svg", {
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ width: "74.5",
15
+ height: "74.5",
16
+ viewBox: "0 0 24 24",
17
+ fill: "#666666"
18
+ }, _react["default"].createElement("path", {
19
+ fill: "none",
20
+ d: "M0 0h24v24H0z"
21
+ }), _react["default"].createElement("path", {
22
+ d: "M11 5v5.59H7.5l4.5 4.5 4.5-4.5H13V5h-2zm-5 9c0 3.31 2.69 6 6 6s6-2.69 6-6h-2c0 2.21-1.79 4-4 4s-4-1.79-4-4H6z"
23
+ }));
24
+
25
+ exports.dropFileIcon = dropFileIcon;
26
+
27
+ var uploadFileIcon = _react["default"].createElement("svg", {
28
+ xmlns: "http://www.w3.org/2000/svg",
29
+ width: "43.5",
30
+ height: "43.5",
31
+ viewBox: "0 0 24 24"
32
+ }, _react["default"].createElement("path", {
33
+ d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"
34
+ }), _react["default"].createElement("path", {
35
+ d: "M0 0h24v24H0z",
36
+ fill: "none"
37
+ }));
38
+
39
+ exports.uploadFileIcon = uploadFileIcon;