@dxc-technology/halstack-react 0.0.0-0355f44 → 0.0.0-04a7d7c

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 (189) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +3914 -0
  3. package/dist/index.d.ts +3914 -0
  4. package/dist/index.js +14376 -0
  5. package/dist/index.mjs +14288 -0
  6. package/package.json +91 -68
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -248
  10. package/dist/accordion/Accordion.js +0 -353
  11. package/dist/accordion-group/AccordionGroup.js +0 -186
  12. package/dist/alert/Alert.js +0 -403
  13. package/dist/alert/index.d.ts +0 -51
  14. package/dist/badge/Badge.js +0 -63
  15. package/dist/box/Box.js +0 -156
  16. package/dist/button/Button.js +0 -238
  17. package/dist/card/Card.js +0 -254
  18. package/dist/checkbox/Checkbox.js +0 -300
  19. package/dist/checkbox/Checkbox.stories.js +0 -144
  20. package/dist/checkbox/readme.md +0 -116
  21. package/dist/chip/Chip.js +0 -265
  22. package/dist/common/OpenSans.css +0 -81
  23. package/dist/common/RequiredComponent.js +0 -40
  24. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  34. package/dist/common/utils.js +0 -22
  35. package/dist/common/variables.js +0 -1569
  36. package/dist/date/Date.js +0 -379
  37. package/dist/date/Date.stories.js +0 -205
  38. package/dist/date/readme.md +0 -73
  39. package/dist/date-input/DateInput.js +0 -400
  40. package/dist/date-input/index.d.ts +0 -95
  41. package/dist/dialog/Dialog.js +0 -218
  42. package/dist/dropdown/Dropdown.js +0 -544
  43. package/dist/file-input/FileInput.js +0 -644
  44. package/dist/file-input/FileItem.js +0 -280
  45. package/dist/file-input/index.d.ts +0 -81
  46. package/dist/footer/Footer.js +0 -395
  47. package/dist/footer/dxc_logo.svg +0 -15
  48. package/dist/footer/readme.md +0 -41
  49. package/dist/header/Header.js +0 -403
  50. package/dist/header/Header.stories.js +0 -176
  51. package/dist/header/close_icon.svg +0 -1
  52. package/dist/header/dxc_logo_black.svg +0 -8
  53. package/dist/header/hamb_menu_black.svg +0 -1
  54. package/dist/header/hamb_menu_white.svg +0 -1
  55. package/dist/header/readme.md +0 -33
  56. package/dist/heading/Heading.js +0 -218
  57. package/dist/input-text/InputText.js +0 -707
  58. package/dist/input-text/error.svg +0 -1
  59. package/dist/input-text/readme.md +0 -91
  60. package/dist/layout/ApplicationLayout.js +0 -331
  61. package/dist/layout/facebook.svg +0 -45
  62. package/dist/layout/linkedin.svg +0 -50
  63. package/dist/layout/twitter.svg +0 -53
  64. package/dist/link/Link.js +0 -237
  65. package/dist/link/readme.md +0 -51
  66. package/dist/main.d.ts +0 -8
  67. package/dist/main.js +0 -367
  68. package/dist/new-select/NewSelect.js +0 -836
  69. package/dist/new-select/index.d.ts +0 -53
  70. package/dist/new-textarea/NewTextarea.js +0 -369
  71. package/dist/new-textarea/index.d.ts +0 -117
  72. package/dist/number-input/NumberInput.js +0 -136
  73. package/dist/number-input/NumberInputContext.js +0 -16
  74. package/dist/number-input/index.d.ts +0 -113
  75. package/dist/paginator/Paginator.js +0 -289
  76. package/dist/paginator/images/next.svg +0 -3
  77. package/dist/paginator/images/nextPage.svg +0 -3
  78. package/dist/paginator/images/previous.svg +0 -3
  79. package/dist/paginator/images/previousPage.svg +0 -3
  80. package/dist/paginator/readme.md +0 -50
  81. package/dist/password-input/PasswordInput.js +0 -198
  82. package/dist/password-input/index.d.ts +0 -94
  83. package/dist/progress-bar/ProgressBar.js +0 -242
  84. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  85. package/dist/progress-bar/readme.md +0 -63
  86. package/dist/radio/Radio.js +0 -209
  87. package/dist/radio/Radio.stories.js +0 -166
  88. package/dist/radio/readme.md +0 -70
  89. package/dist/resultsetTable/ResultsetTable.js +0 -358
  90. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  91. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  92. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  93. package/dist/select/Select.js +0 -549
  94. package/dist/sidenav/Sidenav.js +0 -179
  95. package/dist/slider/Slider.js +0 -394
  96. package/dist/slider/readme.md +0 -64
  97. package/dist/spinner/Spinner.js +0 -381
  98. package/dist/spinner/Spinner.stories.js +0 -183
  99. package/dist/spinner/readme.md +0 -65
  100. package/dist/switch/Switch.js +0 -222
  101. package/dist/switch/Switch.stories.js +0 -134
  102. package/dist/switch/readme.md +0 -133
  103. package/dist/table/Table.js +0 -132
  104. package/dist/tabs/Tabs.js +0 -343
  105. package/dist/tabs/Tabs.stories.js +0 -130
  106. package/dist/tabs/readme.md +0 -78
  107. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  108. package/dist/tabs-for-sections/readme.md +0 -78
  109. package/dist/tag/Tag.js +0 -282
  110. package/dist/text-input/TextInput.js +0 -971
  111. package/dist/text-input/index.d.ts +0 -135
  112. package/dist/textarea/Textarea.js +0 -264
  113. package/dist/toggle/Toggle.js +0 -220
  114. package/dist/toggle/Toggle.stories.js +0 -297
  115. package/dist/toggle/readme.md +0 -80
  116. package/dist/toggle-group/ToggleGroup.js +0 -327
  117. package/dist/upload/Upload.js +0 -205
  118. package/dist/upload/Upload.stories.js +0 -72
  119. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  120. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  121. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  122. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  123. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  124. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  125. package/dist/upload/file-upload/FileToUpload.js +0 -184
  126. package/dist/upload/file-upload/audio-icon.svg +0 -4
  127. package/dist/upload/file-upload/close.svg +0 -4
  128. package/dist/upload/file-upload/file-icon.svg +0 -4
  129. package/dist/upload/file-upload/video-icon.svg +0 -4
  130. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  131. package/dist/upload/readme.md +0 -37
  132. package/dist/upload/transaction/Transaction.js +0 -175
  133. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  134. package/dist/upload/transaction/audio-icon.svg +0 -4
  135. package/dist/upload/transaction/error-icon.svg +0 -4
  136. package/dist/upload/transaction/file-icon-err.svg +0 -4
  137. package/dist/upload/transaction/file-icon.svg +0 -4
  138. package/dist/upload/transaction/image-icon-err.svg +0 -4
  139. package/dist/upload/transaction/image-icon.svg +0 -4
  140. package/dist/upload/transaction/success-icon.svg +0 -4
  141. package/dist/upload/transaction/video-icon-err.svg +0 -4
  142. package/dist/upload/transaction/video-icon.svg +0 -4
  143. package/dist/upload/transactions/Transactions.js +0 -138
  144. package/dist/useTheme.js +0 -22
  145. package/dist/wizard/Wizard.js +0 -411
  146. package/dist/wizard/invalid_icon.svg +0 -5
  147. package/dist/wizard/valid_icon.svg +0 -5
  148. package/dist/wizard/validation-wrong.svg +0 -6
  149. package/test/Accordion.test.js +0 -33
  150. package/test/AccordionGroup.test.js +0 -125
  151. package/test/Alert.test.js +0 -53
  152. package/test/Box.test.js +0 -10
  153. package/test/Button.test.js +0 -18
  154. package/test/Card.test.js +0 -30
  155. package/test/Checkbox.test.js +0 -45
  156. package/test/Chip.test.js +0 -25
  157. package/test/Date.test.js +0 -397
  158. package/test/DateInput.test.js +0 -242
  159. package/test/Dialog.test.js +0 -23
  160. package/test/Dropdown.test.js +0 -145
  161. package/test/FileInput.test.js +0 -201
  162. package/test/Footer.test.js +0 -99
  163. package/test/Header.test.js +0 -39
  164. package/test/Heading.test.js +0 -35
  165. package/test/InputText.test.js +0 -248
  166. package/test/Link.test.js +0 -43
  167. package/test/NewTextarea.test.js +0 -195
  168. package/test/NumberInput.test.js +0 -259
  169. package/test/Paginator.test.js +0 -177
  170. package/test/PasswordInput.test.js +0 -83
  171. package/test/ProgressBar.test.js +0 -35
  172. package/test/Radio.test.js +0 -37
  173. package/test/ResultsetTable.test.js +0 -329
  174. package/test/Select.test.js +0 -212
  175. package/test/Sidenav.test.js +0 -45
  176. package/test/Slider.test.js +0 -82
  177. package/test/Spinner.test.js +0 -32
  178. package/test/Switch.test.js +0 -45
  179. package/test/Table.test.js +0 -36
  180. package/test/Tabs.test.js +0 -109
  181. package/test/TabsForSections.test.js +0 -34
  182. package/test/Tag.test.js +0 -32
  183. package/test/TextArea.test.js +0 -52
  184. package/test/TextInput.test.js +0 -732
  185. package/test/ToggleGroup.test.js +0 -85
  186. package/test/Upload.test.js +0 -60
  187. package/test/Wizard.test.js +0 -130
  188. package/test/mocks/pngMock.js +0 -1
  189. package/test/mocks/svgMock.js +0 -1
@@ -1,179 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _react = _interopRequireDefault(require("react"));
17
-
18
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
19
-
20
- var _propTypes = _interopRequireDefault(require("prop-types"));
21
-
22
- var _variables = require("../common/variables.js");
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
27
-
28
- function _templateObject4() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n text-decoration: ", ";\n margin: ", ";\n cursor: pointer;\n\n :focus-visible {\n outline: 2px solid ", ";\n outline-offset: 1px;\n }\n"]);
30
-
31
- _templateObject4 = function _templateObject4() {
32
- return data;
33
- };
34
-
35
- return data;
36
- }
37
-
38
- function _templateObject3() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n margin-bottom: 4px;\n"]);
40
-
41
- _templateObject3 = function _templateObject3() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject2() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n margin-bottom: 16px;\n"]);
50
-
51
- _templateObject2 = function _templateObject2() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n background-color: ", ";\n max-width: 300px;\n width: ", ";\n padding: ", ";\n\n overflow-y: auto;\n overflow-x: hidden;\n ::-webkit-scrollbar {\n width: 2px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n"]);
60
-
61
- _templateObject = function _templateObject() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- var DxcSidenav = function DxcSidenav(_ref) {
69
- var padding = _ref.padding,
70
- children = _ref.children;
71
- var colorsTheme = (0, _useTheme["default"])();
72
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
73
- theme: colorsTheme.sidenav
74
- }, _react["default"].createElement(SideNavContainer, {
75
- padding: padding
76
- }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
77
- color: colorsTheme.sidenav.backgroundColor
78
- }, children)));
79
- };
80
-
81
- var Title = function Title(_ref2) {
82
- var children = _ref2.children;
83
- return _react["default"].createElement(SideNavMenuTitle, null, children);
84
- };
85
-
86
- var Subtitle = function Subtitle(_ref3) {
87
- var children = _ref3.children;
88
- return _react["default"].createElement(SideNavMenuSubTitle, null, children);
89
- };
90
-
91
- var Link = function Link(_ref4) {
92
- var href = _ref4.href,
93
- onClick = _ref4.onClick,
94
- children = _ref4.children;
95
- return _react["default"].createElement(SideNavMenuLink, {
96
- href: href,
97
- onClick: onClick
98
- }, children);
99
- };
100
-
101
- var SideNavContainer = _styledComponents["default"].div(_templateObject(), function (props) {
102
- return props.theme.backgroundColor;
103
- }, function (props) {
104
- return props.padding ? "calc(300px - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "300px";
105
- }, function (props) {
106
- return props.padding ? _variables.spaces[props.padding] : "";
107
- }, function (props) {
108
- return props.theme.scrollBarTrackColor;
109
- }, function (props) {
110
- return props.theme.scrollBarThumbColor;
111
- });
112
-
113
- var SideNavMenuTitle = _styledComponents["default"].div(_templateObject2(), function (props) {
114
- return props.theme.titleFontFamily;
115
- }, function (props) {
116
- return props.theme.titleFontSize;
117
- }, function (props) {
118
- return props.theme.titleFontStyle;
119
- }, function (props) {
120
- return props.theme.titleFontWeight;
121
- }, function (props) {
122
- return props.theme.titleFontColor;
123
- }, function (props) {
124
- return props.theme.titleFontLetterSpacing;
125
- }, function (props) {
126
- return props.theme.titleFontTextTransform;
127
- });
128
-
129
- var SideNavMenuSubTitle = _styledComponents["default"].div(_templateObject3(), function (props) {
130
- return props.theme.subtitleFontFamily;
131
- }, function (props) {
132
- return props.theme.subtitleFontSize;
133
- }, function (props) {
134
- return props.theme.subtitleFontStyle;
135
- }, function (props) {
136
- return props.theme.subtitleFontWeight;
137
- }, function (props) {
138
- return props.theme.subtitleFontColor;
139
- }, function (props) {
140
- return props.theme.subtitleFontLetterSpacing;
141
- }, function (props) {
142
- return props.theme.subtitleFontTextTransform;
143
- });
144
-
145
- var SideNavMenuLink = _styledComponents["default"].a(_templateObject4(), function (props) {
146
- return props.theme.linkFontFamily;
147
- }, function (props) {
148
- return props.theme.linkFontSize;
149
- }, function (props) {
150
- return props.theme.linkFontStyle;
151
- }, function (props) {
152
- return props.theme.linkFontWeight;
153
- }, function (props) {
154
- return props.theme.linkFontColor;
155
- }, function (props) {
156
- return props.theme.linkFontLetterSpacing;
157
- }, function (props) {
158
- return props.theme.linkFontTextTransform;
159
- }, function (props) {
160
- return props.theme.linkTextDecoration;
161
- }, function (props) {
162
- return "".concat(props.theme.linkMarginTop, " ").concat(props.theme.linkMarginRight, " ").concat(props.theme.linkMarginBottom, " ").concat(props.theme.linkMarginLeft);
163
- }, function (props) {
164
- return props.theme.linkFocusColor;
165
- });
166
-
167
- DxcSidenav.propTypes = {
168
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
169
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
170
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
171
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
172
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
173
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
174
- };
175
- DxcSidenav.Title = Title;
176
- DxcSidenav.Subtitle = Subtitle;
177
- DxcSidenav.Link = Link;
178
- var _default = DxcSidenav;
179
- exports["default"] = _default;
@@ -1,394 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _Slider = _interopRequireDefault(require("@material-ui/lab/Slider"));
23
-
24
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
29
-
30
- var _variables = require("../common/variables.js");
31
-
32
- var _utils = require("../common/utils.js");
33
-
34
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
-
36
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
-
38
- function _templateObject7() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: ", ";\n label + .MuiInput-formControl {\n margin-top: 2px;\n }\n"]);
40
-
41
- _templateObject7 = function _templateObject7() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject6() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-left: ", ";\n"]);
50
-
51
- _templateObject6 = function _templateObject6() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- function _templateObject5() {
59
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n margin-right: ", ";\n"]);
60
-
61
- _templateObject5 = function _templateObject5() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject4() {
69
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: 48px;\n align-items: center;\n\n .MultiSlider-root {\n display: flex;\n align-items: center;\n }\n .MuiSlider-container {\n padding: 30px 24px;\n }\n .MuiSlider-root.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n .Mui-disabled {\n & .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n }\n & .MuiSlider-track {\n background-color: ", ";\n }\n & .MuiSlider-rail {\n background-color: ", ";\n }\n & > .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", " !important;\n }\n & > .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n }\n .MuiSlider-thumb {\n height: ", ";\n width: ", ";\n background-color: ", ";\n top: ", ";\n border-radius: 9999px;\n\n :hover,\n &.Mui-focusVisible {\n box-shadow: none;\n }\n &.MuiSlider-active {\n box-shadow: none;\n }\n :focus {\n outline: ", "\n auto 1px;\n outline-offset: 2px;\n background-color: ", ";\n }\n :hover {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n height: ", ";\n width: ", ";\n top: ", ";\n }\n :active {\n background-color: ", ";\n transform: scale(", ");\n transform-origin: center;\n }\n }\n .MuiSlider-track {\n background-color: ", ";\n height: ", ";\n top: ", ";\n border-radius: 9999px;\n }\n .MuiSlider-track.MuiSlider-trackAfter {\n background-color: ", ";\n }\n .MuiSlider-rail {\n background-color: ", ";\n height: ", ";\n top: ", ";\n }\n .MuiSlider-mark.MuiSlider-markActive {\n background-color: ", ";\n }\n .MuiSlider-mark {\n background-color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 18px;\n top: ", ";\n }\n"]);
70
-
71
- _templateObject4 = function _templateObject4() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject3() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
80
-
81
- _templateObject3 = function _templateObject3() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject2() {
89
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
90
-
91
- _templateObject2 = function _templateObject2() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject() {
99
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n width: ", ";\n"]);
100
-
101
- _templateObject = function _templateObject() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- var DxcSlider = function DxcSlider(_ref) {
109
- var label = _ref.label,
110
- helperText = _ref.helperText,
111
- _ref$minValue = _ref.minValue,
112
- minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
113
- _ref$maxValue = _ref.maxValue,
114
- maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
115
- _ref$step = _ref.step,
116
- step = _ref$step === void 0 ? 1 : _ref$step,
117
- value = _ref.value,
118
- _ref$showLimitsValues = _ref.showLimitsValues,
119
- showLimitsValues = _ref$showLimitsValues === void 0 ? false : _ref$showLimitsValues,
120
- _ref$showInput = _ref.showInput,
121
- showInput = _ref$showInput === void 0 ? false : _ref$showInput,
122
- name = _ref.name,
123
- onChange = _ref.onChange,
124
- onDragEnd = _ref.onDragEnd,
125
- _ref$disabled = _ref.disabled,
126
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
127
- _ref$marks = _ref.marks,
128
- marks = _ref$marks === void 0 ? false : _ref$marks,
129
- labelFormatCallback = _ref.labelFormatCallback,
130
- margin = _ref.margin,
131
- _ref$size = _ref.size,
132
- size = _ref$size === void 0 ? "fillParent" : _ref$size;
133
-
134
- var _useState = (0, _react.useState)(0),
135
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
136
- innerValue = _useState2[0],
137
- setInnerValue = _useState2[1];
138
-
139
- var colorsTheme = (0, _useTheme["default"])();
140
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
141
- var minLabel = (0, _react.useMemo)(function () {
142
- return labelFormatCallback ? labelFormatCallback(minValue) : minValue;
143
- }, [labelFormatCallback, minValue]);
144
- var maxLabel = (0, _react.useMemo)(function () {
145
- return labelFormatCallback ? labelFormatCallback(maxValue) : maxValue;
146
- }, [labelFormatCallback, maxValue]);
147
-
148
- var handlerSliderChange = function handlerSliderChange(event, newValue) {
149
- if (value == null) {
150
- var valueToCheck = value !== undefined ? value : innerValue;
151
-
152
- if (valueToCheck !== newValue) {
153
- setInnerValue(newValue);
154
- }
155
- }
156
-
157
- if (typeof onChange === "function") {
158
- onChange(newValue);
159
- }
160
- };
161
-
162
- var handlerInputChange = function handlerInputChange(event) {
163
- if (value == null) {
164
- setInnerValue(event > maxValue ? maxValue : event);
165
- }
166
-
167
- if (typeof onChange === "function") {
168
- onChange(event > maxValue ? maxValue : event);
169
- }
170
- };
171
-
172
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
173
- theme: colorsTheme.slider
174
- }, _react["default"].createElement(Container, {
175
- margin: margin,
176
- size: size
177
- }, _react["default"].createElement(Label, null, label), _react["default"].createElement(HelperText, null, helperText), _react["default"].createElement(SliderContainer, {
178
- backgroundType: backgroundType
179
- }, showLimitsValues && _react["default"].createElement(MinLabelContainer, {
180
- backgroundType: backgroundType,
181
- disabled: disabled
182
- }, minLabel), _react["default"].createElement(_Slider["default"], {
183
- value: value != null && value >= 0 && value || innerValue,
184
- min: minValue,
185
- max: maxValue,
186
- onChange: handlerSliderChange,
187
- onChangeCommitted: onDragEnd && function (event, selectedValue) {
188
- return onDragEnd(selectedValue);
189
- },
190
- step: step,
191
- marks: marks || [],
192
- disabled: disabled
193
- }), showLimitsValues && _react["default"].createElement(MaxLabelContainer, {
194
- backgroundType: backgroundType,
195
- disabled: disabled,
196
- step: step
197
- }, maxLabel), showInput && _react["default"].createElement(StyledTextInput, null, _react["default"].createElement(_InputText["default"], {
198
- name: name,
199
- value: value != null && value >= 0 && value || innerValue,
200
- disabled: disabled,
201
- onChange: handlerInputChange,
202
- size: "small"
203
- })))));
204
- };
205
-
206
- var sizes = {
207
- medium: "240px",
208
- large: "480px",
209
- fillParent: "100%"
210
- };
211
-
212
- var calculateWidth = function calculateWidth(margin, size) {
213
- return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
214
- };
215
-
216
- var Container = _styledComponents["default"].div(_templateObject(), function (props) {
217
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
218
- }, function (props) {
219
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
220
- }, function (props) {
221
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
222
- }, function (props) {
223
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
224
- }, function (props) {
225
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
226
- }, function (props) {
227
- return calculateWidth(props.margin, props.size);
228
- });
229
-
230
- var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
231
- return props.theme.labelFontColor;
232
- }, function (props) {
233
- return props.theme.labelFontFamily;
234
- }, function (props) {
235
- return props.theme.labelFontSize;
236
- }, function (props) {
237
- return props.theme.labelFontStyle;
238
- }, function (props) {
239
- return props.theme.labelFontWeight;
240
- }, function (props) {
241
- return props.theme.labelLineHeight;
242
- });
243
-
244
- var HelperText = _styledComponents["default"].span(_templateObject3(), function (props) {
245
- return props.theme.helperTextFontColor;
246
- }, function (props) {
247
- return props.theme.helperTextFontFamily;
248
- }, function (props) {
249
- return props.theme.helperTextFontSize;
250
- }, function (props) {
251
- return props.theme.helperTextFontstyle;
252
- }, function (props) {
253
- return props.theme.helperTextFontWeight;
254
- }, function (props) {
255
- return props.theme.helperTextLineHeight;
256
- });
257
-
258
- var SliderContainer = _styledComponents["default"].div(_templateObject4(), function (props) {
259
- return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
260
- }, function (props) {
261
- return props.theme.thumbHeight;
262
- }, function (props) {
263
- return props.theme.thumbWidth;
264
- }, function (props) {
265
- return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
266
- }, function (props) {
267
- return props.theme.disabledThumbVerticalPosition;
268
- }, function (props) {
269
- return props.backgroundType === "dark" ? props.theme.disabledTrackLineColorOnDark : props.theme.disabledTrackLineColor;
270
- }, function (props) {
271
- return props.backgroundType === "dark" ? props.theme.disabledTotalLineColorOnDark : props.theme.disabledTotalLineColor;
272
- }, function (props) {
273
- return props.backgroundType === "dark" ? props.theme.disabledTickBackgroundColorOnDark : props.theme.disabledTickBackgroundColor;
274
- }, function (props) {
275
- return props.backgroundType === "dark" ? props.theme.disabledTickBackgroundColorOnDark : props.theme.disabledTickBackgroundColor;
276
- }, function (props) {
277
- return props.theme.tickHeight;
278
- }, function (props) {
279
- return props.theme.tickWidth;
280
- }, function (props) {
281
- return props.theme.disabledTickVerticalPosition;
282
- }, function (props) {
283
- return props.theme.thumbHeight;
284
- }, function (props) {
285
- return props.theme.thumbWidth;
286
- }, function (props) {
287
- return props.backgroundType === "dark" ? props.theme.thumbBackgroundColorOnDark : props.theme.thumbBackgroundColor;
288
- }, function (props) {
289
- return props.theme.thumbVerticalPosition;
290
- }, function (props) {
291
- return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
292
- }, function (props) {
293
- return props.backgroundType === "dark" ? props.theme.focusThumbBackgroundColorOnDark : props.theme.focusThumbBackgroundColor;
294
- }, function (props) {
295
- return props.backgroundType === "dark" ? props.theme.hoverThumbBackgroundColorOnDark : props.theme.hoverThumbBackgroundColor;
296
- }, function (props) {
297
- return props.theme.hoverThumbScale;
298
- }, function (props) {
299
- return props.theme.hoverThumbHeight;
300
- }, function (props) {
301
- return props.theme.hoverThumbWidth;
302
- }, function (props) {
303
- return props.theme.hoverThumbVerticalPosition;
304
- }, function (props) {
305
- return props.backgroundType === "dark" ? props.theme.activeThumbBackgroundColorOnDark : props.theme.activeThumbBackgroundColor;
306
- }, function (props) {
307
- return props.theme.activeThumbScale;
308
- }, function (props) {
309
- return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
310
- }, function (props) {
311
- return props.theme.trackLineThickness;
312
- }, function (props) {
313
- return props.theme.trackLineVerticalPosition;
314
- }, function (props) {
315
- return props.backgroundType === "dark" ? props.theme.trackLineColorOnDark : props.theme.trackLineColor;
316
- }, function (props) {
317
- return props.backgroundType === "dark" ? props.theme.totalLineColorOnDark : props.theme.totalLineColor;
318
- }, function (props) {
319
- return props.theme.totalLineThickness;
320
- }, function (props) {
321
- return props.theme.totalLineVerticalPosition;
322
- }, function (props) {
323
- return props.backgroundType === "dark" ? props.theme.tickBackgroundColorOnDark : props.theme.tickBackgroundColor;
324
- }, function (props) {
325
- return props.backgroundType === "dark" ? props.theme.tickBackgroundColorOnDark : props.theme.tickBackgroundColor;
326
- }, function (props) {
327
- return props.theme.tickHeight;
328
- }, function (props) {
329
- return props.theme.tickWidth;
330
- }, function (props) {
331
- return props.theme.tickVerticalPosition;
332
- });
333
-
334
- var MinLabelContainer = _styledComponents["default"].span(_templateObject5(), function (props) {
335
- return props.theme.fontFamily;
336
- }, function (props) {
337
- return props.theme.fontSize;
338
- }, function (props) {
339
- return props.theme.fontStyle;
340
- }, function (props) {
341
- return props.theme.fontWeight;
342
- }, function (props) {
343
- return props.disabled ? props.theme.disabledFontColor : props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
344
- }, function (props) {
345
- return props.theme.fontLetterSpacing;
346
- }, function (props) {
347
- return props.theme.floorLabelMarginRight;
348
- });
349
-
350
- var MaxLabelContainer = _styledComponents["default"].span(_templateObject6(), function (props) {
351
- return props.theme.fontFamily;
352
- }, function (props) {
353
- return props.theme.fontSize;
354
- }, function (props) {
355
- return props.theme.fontStyle;
356
- }, function (props) {
357
- return props.theme.fontWeight;
358
- }, function (props) {
359
- return props.disabled ? props.theme.disabledFontColor : props.backgroundType === "dark" ? props.theme.fontColorOnDark : props.theme.fontColor;
360
- }, function (props) {
361
- return props.theme.fontLetterSpacing;
362
- }, function (props) {
363
- return props.step === 1 ? props.theme.ceilLabelMarginLeft : "1.25rem";
364
- });
365
-
366
- var StyledTextInput = _styledComponents["default"].div(_templateObject7(), function (props) {
367
- return props.theme.inputMarginLeft;
368
- });
369
-
370
- DxcSlider.propTypes = {
371
- label: _propTypes["default"].string,
372
- helperText: _propTypes["default"].string,
373
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
374
- minValue: _propTypes["default"].number,
375
- maxValue: _propTypes["default"].number,
376
- step: _propTypes["default"].number,
377
- value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
378
- showLimitsValues: _propTypes["default"].bool,
379
- showInput: _propTypes["default"].bool,
380
- name: _propTypes["default"].string,
381
- onChange: _propTypes["default"].func,
382
- onDragEnd: _propTypes["default"].func,
383
- disabled: _propTypes["default"].bool,
384
- marks: _propTypes["default"].bool,
385
- labelFormatCallback: _propTypes["default"].func,
386
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
387
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
388
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
389
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
390
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
391
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
392
- };
393
- var _default = DxcSlider;
394
- exports["default"] = _default;
@@ -1,64 +0,0 @@
1
- # DXC Slider Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { Slider } from "@dxc-technology/halstack-react";
7
-
8
- <DxcSlider min={0} max={100} step={1} value={value} />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>min: number</td>
21
- <td><code>0</code></td>
22
- <td>The minimum value available for selection.</td>
23
- </tr>
24
- <tr>
25
- <td>max: number</td>
26
- <td><code>100</code></td>
27
- <td>The maximum value available for selection.</td>
28
- </tr>
29
- <tr>
30
- <td>step: number</td>
31
- <td><code>1</code></td>
32
- <td>The step interval between values available for selection.</td>
33
- </tr>
34
- <tr>
35
- <td>value: number</td>
36
- <td><code>0</code></td>
37
- <td>The selected value.</td>
38
- </tr>
39
- <tr>
40
- <td>showLimitValues: boolean</td>
41
- <td><code>false</code></td>
42
- <td>Whether the min/max value labels should be displayed next to the slider.</td>
43
- </tr>
44
- <tr>
45
- <td>showInput: boolean</td>
46
- <td><code>false</code></td>
47
- <td>Whether the input number for displaying/controlling the slider value should be displayed next to the slider.</td>
48
- </tr>
49
- <tr>
50
- <td>name: string</td>
51
- <td></td>
52
- <td>Name attribute of the input element.</td>
53
- </tr>
54
- <tr>
55
- <td>onChange: function</td>
56
- <td></td>
57
- <td>This function will be called when the slider changes its value, as it's being dragged. The new value will be passed as a parameter when this function is executed</td>
58
- </tr>
59
- <tr>
60
- <td>onDragEnd: function</td>
61
- <td></td>
62
- <td>This function will be called when the slider changes its value, but only when the thumb is released. The new value will be passed as a parameter when this function is executed</td>
63
- </tr>
64
- </table>