@dxc-technology/halstack-react 0.0.0-66de2f8 → 0.0.0-678cc08

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 (202) 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 +92 -67
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -216
  10. package/dist/accordion/Accordion.js +0 -346
  11. package/dist/accordion/Accordion.stories.js +0 -207
  12. package/dist/accordion/readme.md +0 -96
  13. package/dist/accordion-group/AccordionGroup.js +0 -188
  14. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  15. package/dist/accordion-group/readme.md +0 -70
  16. package/dist/alert/Alert.js +0 -388
  17. package/dist/alert/Alert.stories.js +0 -158
  18. package/dist/alert/close.svg +0 -4
  19. package/dist/alert/error.svg +0 -4
  20. package/dist/alert/info.svg +0 -4
  21. package/dist/alert/readme.md +0 -43
  22. package/dist/alert/success.svg +0 -4
  23. package/dist/alert/warning.svg +0 -4
  24. package/dist/badge/Badge.js +0 -63
  25. package/dist/box/Box.js +0 -164
  26. package/dist/button/Button.js +0 -232
  27. package/dist/button/Button.stories.js +0 -224
  28. package/dist/button/readme.md +0 -93
  29. package/dist/card/Card.js +0 -254
  30. package/dist/checkbox/Checkbox.js +0 -294
  31. package/dist/checkbox/Checkbox.stories.js +0 -144
  32. package/dist/checkbox/readme.md +0 -116
  33. package/dist/chip/Chip.js +0 -269
  34. package/dist/common/OpenSans.css +0 -81
  35. package/dist/common/RequiredComponent.js +0 -40
  36. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  40. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  41. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  42. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  43. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  44. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  45. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  46. package/dist/common/utils.js +0 -22
  47. package/dist/common/variables.js +0 -1305
  48. package/dist/date/Date.js +0 -381
  49. package/dist/date/Date.stories.js +0 -205
  50. package/dist/date/readme.md +0 -73
  51. package/dist/dialog/Dialog.js +0 -235
  52. package/dist/dialog/Dialog.stories.js +0 -217
  53. package/dist/dialog/readme.md +0 -32
  54. package/dist/dropdown/Dropdown.js +0 -493
  55. package/dist/dropdown/Dropdown.stories.js +0 -249
  56. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  57. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  58. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  59. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  60. package/dist/dropdown/readme.md +0 -69
  61. package/dist/footer/Footer.js +0 -407
  62. package/dist/footer/Footer.stories.js +0 -94
  63. package/dist/footer/dxc_logo.svg +0 -15
  64. package/dist/footer/readme.md +0 -41
  65. package/dist/header/Header.js +0 -431
  66. package/dist/header/Header.stories.js +0 -176
  67. package/dist/header/close_icon.svg +0 -1
  68. package/dist/header/dxc_logo_black.svg +0 -8
  69. package/dist/header/hamb_menu_black.svg +0 -1
  70. package/dist/header/hamb_menu_white.svg +0 -1
  71. package/dist/header/readme.md +0 -33
  72. package/dist/heading/Heading.js +0 -222
  73. package/dist/input-text/InputText.js +0 -672
  74. package/dist/input-text/InputText.stories.js +0 -209
  75. package/dist/input-text/error.svg +0 -1
  76. package/dist/input-text/readme.md +0 -91
  77. package/dist/layout/ApplicationLayout.js +0 -331
  78. package/dist/layout/facebook.svg +0 -45
  79. package/dist/layout/linkedin.svg +0 -50
  80. package/dist/layout/twitter.svg +0 -53
  81. package/dist/link/Link.js +0 -241
  82. package/dist/link/readme.md +0 -51
  83. package/dist/main.js +0 -343
  84. package/dist/new-date/NewDate.js +0 -391
  85. package/dist/new-input-text/NewInputText.js +0 -929
  86. package/dist/number/Number.js +0 -127
  87. package/dist/number/NumberContext.js +0 -16
  88. package/dist/paginator/Paginator.js +0 -283
  89. package/dist/paginator/images/next.svg +0 -3
  90. package/dist/paginator/images/nextPage.svg +0 -3
  91. package/dist/paginator/images/previous.svg +0 -3
  92. package/dist/paginator/images/previousPage.svg +0 -3
  93. package/dist/paginator/readme.md +0 -50
  94. package/dist/password/Password.js +0 -139
  95. package/dist/password/styles.css +0 -3
  96. package/dist/progress-bar/ProgressBar.js +0 -206
  97. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  98. package/dist/progress-bar/readme.md +0 -63
  99. package/dist/radio/Radio.js +0 -209
  100. package/dist/radio/Radio.stories.js +0 -166
  101. package/dist/radio/readme.md +0 -70
  102. package/dist/resultsetTable/ResultsetTable.js +0 -358
  103. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  104. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  105. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  106. package/dist/select/Select.js +0 -563
  107. package/dist/select/Select.stories.js +0 -235
  108. package/dist/select/readme.md +0 -72
  109. package/dist/sidenav/Sidenav.js +0 -183
  110. package/dist/slider/Slider.js +0 -315
  111. package/dist/slider/Slider.stories.js +0 -241
  112. package/dist/slider/readme.md +0 -64
  113. package/dist/spinner/Spinner.js +0 -214
  114. package/dist/spinner/Spinner.stories.js +0 -183
  115. package/dist/spinner/readme.md +0 -65
  116. package/dist/switch/Switch.js +0 -222
  117. package/dist/switch/Switch.stories.js +0 -134
  118. package/dist/switch/readme.md +0 -133
  119. package/dist/table/Table.js +0 -128
  120. package/dist/tabs/Tabs.js +0 -343
  121. package/dist/tabs/Tabs.stories.js +0 -130
  122. package/dist/tabs/readme.md +0 -78
  123. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  124. package/dist/tabs-for-sections/readme.md +0 -78
  125. package/dist/tag/Tag.js +0 -280
  126. package/dist/textarea/Textarea.js +0 -260
  127. package/dist/toggle/Toggle.js +0 -220
  128. package/dist/toggle/Toggle.stories.js +0 -297
  129. package/dist/toggle/readme.md +0 -80
  130. package/dist/toggle-group/ToggleGroup.js +0 -241
  131. package/dist/toggle-group/readme.md +0 -82
  132. package/dist/upload/Upload.js +0 -205
  133. package/dist/upload/Upload.stories.js +0 -72
  134. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -135
  135. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  136. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  137. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -325
  138. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  139. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  140. package/dist/upload/file-upload/FileToUpload.js +0 -184
  141. package/dist/upload/file-upload/audio-icon.svg +0 -4
  142. package/dist/upload/file-upload/close.svg +0 -4
  143. package/dist/upload/file-upload/file-icon.svg +0 -4
  144. package/dist/upload/file-upload/video-icon.svg +0 -4
  145. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  146. package/dist/upload/readme.md +0 -37
  147. package/dist/upload/transaction/Transaction.js +0 -171
  148. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  149. package/dist/upload/transaction/audio-icon.svg +0 -4
  150. package/dist/upload/transaction/error-icon.svg +0 -4
  151. package/dist/upload/transaction/file-icon-err.svg +0 -4
  152. package/dist/upload/transaction/file-icon.svg +0 -4
  153. package/dist/upload/transaction/image-icon-err.svg +0 -4
  154. package/dist/upload/transaction/image-icon.svg +0 -4
  155. package/dist/upload/transaction/success-icon.svg +0 -4
  156. package/dist/upload/transaction/video-icon-err.svg +0 -4
  157. package/dist/upload/transaction/video-icon.svg +0 -4
  158. package/dist/upload/transactions/Transactions.js +0 -138
  159. package/dist/useTheme.js +0 -22
  160. package/dist/wizard/Wizard.js +0 -411
  161. package/dist/wizard/invalid_icon.svg +0 -5
  162. package/dist/wizard/valid_icon.svg +0 -5
  163. package/dist/wizard/validation-wrong.svg +0 -6
  164. package/test/Accordion.test.js +0 -33
  165. package/test/AccordionGroup.test.js +0 -125
  166. package/test/Alert.test.js +0 -53
  167. package/test/Box.test.js +0 -10
  168. package/test/Button.test.js +0 -18
  169. package/test/Card.test.js +0 -30
  170. package/test/Checkbox.test.js +0 -45
  171. package/test/Chip.test.js +0 -25
  172. package/test/Date.test.js +0 -393
  173. package/test/Dialog.test.js +0 -23
  174. package/test/Dropdown.test.js +0 -130
  175. package/test/Footer.test.js +0 -99
  176. package/test/Header.test.js +0 -39
  177. package/test/Heading.test.js +0 -35
  178. package/test/InputText.test.js +0 -240
  179. package/test/Link.test.js +0 -43
  180. package/test/NewDate.test.js +0 -189
  181. package/test/NewInputText.test.js +0 -663
  182. package/test/Number.test.js +0 -205
  183. package/test/Paginator.test.js +0 -177
  184. package/test/Password.test.js +0 -63
  185. package/test/ProgressBar.test.js +0 -35
  186. package/test/Radio.test.js +0 -37
  187. package/test/ResultsetTable.test.js +0 -330
  188. package/test/Select.test.js +0 -192
  189. package/test/Sidenav.test.js +0 -45
  190. package/test/Slider.test.js +0 -82
  191. package/test/Spinner.test.js +0 -27
  192. package/test/Switch.test.js +0 -45
  193. package/test/Table.test.js +0 -36
  194. package/test/Tabs.test.js +0 -109
  195. package/test/TabsForSections.test.js +0 -34
  196. package/test/Tag.test.js +0 -32
  197. package/test/TextArea.test.js +0 -52
  198. package/test/ToggleGroup.test.js +0 -81
  199. package/test/Upload.test.js +0 -60
  200. package/test/Wizard.test.js +0 -130
  201. package/test/mocks/pngMock.js +0 -1
  202. package/test/mocks/svgMock.js +0 -1
@@ -1,235 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
31
-
32
- function _templateObject4() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n"]);
34
-
35
- _templateObject4 = function _templateObject4() {
36
- return data;
37
- };
38
-
39
- return data;
40
- }
41
-
42
- function _templateObject3() {
43
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: ", ";\n right: ", ";\n cursor: pointer;\n padding: 0;\n margin: 0;\n background: none;\n width: ", ";\n height: ", ";\n border: none;\n"]);
44
-
45
- _templateObject3 = function _templateObject3() {
46
- return data;
47
- };
48
-
49
- return data;
50
- }
51
-
52
- function _templateObject2() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow-y: auto;\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n\n & * {\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n"]);
54
-
55
- _templateObject2 = function _templateObject2() {
56
- return data;
57
- };
58
-
59
- return data;
60
- }
61
-
62
- function _templateObject() {
63
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow: unset;\n font-family: ", ";\n\n .MuiBackdrop-root {\n background-color: ", ";\n opacity: ", " !important;\n }\n .MuiDialog-paperWidthSm {\n background-color: ", ";\n max-width: ", ";\n min-width: ", ";\n box-sizing: border-box;\n min-height: ", ";\n box-shadow: ", ";\n\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n }\n"]);
64
-
65
- _templateObject = function _templateObject() {
66
- return data;
67
- };
68
-
69
- return data;
70
- }
71
-
72
- var DxcDialog = function DxcDialog(_ref) {
73
- var _ref$isCloseVisible = _ref.isCloseVisible,
74
- isCloseVisible = _ref$isCloseVisible === void 0 ? true : _ref$isCloseVisible,
75
- onCloseClick = _ref.onCloseClick,
76
- children = _ref.children,
77
- _ref$overlay = _ref.overlay,
78
- overlay = _ref$overlay === void 0 ? true : _ref$overlay,
79
- onBackgroundClick = _ref.onBackgroundClick,
80
- padding = _ref.padding,
81
- _ref$tabIndex = _ref.tabIndex,
82
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
83
-
84
- var _useState = (0, _react.useState)(),
85
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
86
- isResponsive = _useState2[0],
87
- setIsResponsive = _useState2[1];
88
-
89
- var colorsTheme = (0, _useTheme["default"])();
90
-
91
- var handleClose = function handleClose() {
92
- if (typeof onCloseClick === "function") {
93
- onCloseClick();
94
- }
95
- };
96
-
97
- var handleOverlayClick = function handleOverlayClick() {
98
- if (typeof onBackgroundClick === "function") {
99
- onBackgroundClick();
100
- }
101
- };
102
-
103
- var handleResize = function handleResize(width) {
104
- if (width) {
105
- if (width <= _variables.responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false)) ;
106
- }
107
- };
108
-
109
- var handleEventListener = function handleEventListener() {
110
- handleResize(window.innerWidth);
111
- };
112
-
113
- (0, _react.useEffect)(function () {
114
- window.addEventListener("resize", handleEventListener);
115
- handleResize(window.innerWidth);
116
- return function () {
117
- window.removeEventListener("resize", handleEventListener);
118
- };
119
- }, []);
120
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
121
- theme: colorsTheme.dialog
122
- }, _react["default"].createElement(DialogContainer, {
123
- open: true,
124
- isCloseVisible: isCloseVisible,
125
- onClose: handleOverlayClick,
126
- overlay: overlay,
127
- padding: padding,
128
- isResponsive: isResponsive
129
- }, isCloseVisible && _react["default"].createElement(CloseIconContainer, {
130
- onClick: handleClose,
131
- tabIndex: tabIndex
132
- }, _react["default"].createElement(CloseIcon, {
133
- xmlns: "http://www.w3.org/2000/svg",
134
- width: "24",
135
- height: "24",
136
- viewBox: "0 0 24 24"
137
- }, _react["default"].createElement("path", {
138
- d: "M0 0h24v24H0V0z",
139
- fill: "none"
140
- }), _react["default"].createElement("path", {
141
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
142
- }))), _react["default"].createElement(Children, null, children)));
143
- };
144
-
145
- var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject(), function (props) {
146
- return props.theme.fontFamily;
147
- }, function (props) {
148
- return props.overlay === true ? props.theme.overlayColor : "transparent";
149
- }, function (props) {
150
- return props.overlay === true && props.theme.overlayOpacity;
151
- }, function (props) {
152
- return props.theme.backgroundColor;
153
- }, function (props) {
154
- return props.isResponsive ? "92%" : "80%";
155
- }, function (props) {
156
- return props.isResponsive ? "92%" : "800px";
157
- }, function (props) {
158
- return props.isCloseVisible ? "72px" : "";
159
- }, function (props) {
160
- return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);
161
- }, function (props) {
162
- return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : _variables.spaces["small"];
163
- }, function (props) {
164
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
165
- }, function (props) {
166
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
167
- }, function (props) {
168
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
169
- }, function (props) {
170
- return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
171
- });
172
-
173
- var Children = _styledComponents["default"].div(_templateObject2(), function (props) {
174
- return props.theme.fontFamily;
175
- }, function (props) {
176
- return props.theme.fontSize;
177
- }, function (props) {
178
- return props.theme.fontWeight;
179
- }, function (props) {
180
- return props.theme.fontColor;
181
- }, function (props) {
182
- return props.theme.scrollBarTrackColor;
183
- }, function (props) {
184
- return props.theme.scrollBarThumbColor;
185
- }, function (props) {
186
- return props.theme.scrollBarTrackColor;
187
- }, function (props) {
188
- return props.theme.scrollBarThumbColor;
189
- });
190
-
191
- var CloseIconContainer = _styledComponents["default"].button(_templateObject3(), function (props) {
192
- return props.theme.closeIconColor;
193
- }, function (props) {
194
- return props.theme.closeIconTopPosition;
195
- }, function (props) {
196
- return props.theme.closeIconRightPosition;
197
- }, function (props) {
198
- return props.theme.closeIconWidth;
199
- }, function (props) {
200
- return props.theme.closeIconHeight;
201
- });
202
-
203
- var CloseIcon = _styledComponents["default"].svg(_templateObject4(), function (props) {
204
- return props.theme.closeIconBackgroundColor;
205
- }, function (props) {
206
- return props.theme.closeIconWidth;
207
- }, function (props) {
208
- return props.theme.closeIconHeight;
209
- }, function (props) {
210
- return props.theme.closeIconBorderRadius;
211
- }, function (props) {
212
- return props.theme.closeIconBorderThickness;
213
- }, function (props) {
214
- return props.theme.closeIconBorderStyle;
215
- }, function (props) {
216
- return props.theme.closeIconBorderColor;
217
- });
218
-
219
- DxcDialog.propTypes = {
220
- padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
221
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
222
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
223
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
224
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
225
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
226
- isVisible: _propTypes["default"].bool,
227
- isCloseVisible: _propTypes["default"].bool,
228
- onClose: _propTypes["default"].func,
229
- onCloseClick: _propTypes["default"].func,
230
- onBackgroundClick: _propTypes["default"].func,
231
- overlay: _propTypes["default"].bool,
232
- tabIndex: _propTypes["default"].number
233
- };
234
- var _default = DxcDialog;
235
- exports["default"] = _default;
@@ -1,217 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
8
-
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
-
11
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
12
-
13
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
-
15
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
16
-
17
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
18
-
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
20
-
21
- var _react = _interopRequireDefault(require("react"));
22
-
23
- var _react2 = require("@storybook/react");
24
-
25
- var _addonActions = require("@storybook/addon-actions");
26
-
27
- require("../common/OpenSans.css");
28
-
29
- var _addonKnobs = require("@storybook/addon-knobs");
30
-
31
- var _readme = _interopRequireDefault(require("./readme.md"));
32
-
33
- var _Dialog = _interopRequireDefault(require("./Dialog"));
34
-
35
- var _Button = _interopRequireDefault(require("../button/Button"));
36
-
37
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
38
-
39
- var _Date = _interopRequireDefault(require("../date/Date"));
40
-
41
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
42
-
43
- var onChange = (0, _addonActions.action)("onChange");
44
-
45
- onChange.toString = function () {
46
- return "onChangeHandler";
47
- };
48
-
49
- (0, _react2.storiesOf)("Form Components|Dialog", module).add("Component", function () {
50
- var ControlledStory =
51
- /*#__PURE__*/
52
- function (_React$Component) {
53
- (0, _inherits2["default"])(ControlledStory, _React$Component);
54
-
55
- function ControlledStory(props) {
56
- var _this;
57
-
58
- (0, _classCallCheck2["default"])(this, ControlledStory);
59
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
60
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler", function () {
61
- _this.setState({
62
- opened: !_this.state.opened
63
- });
64
- });
65
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler1", function () {
66
- _this.setState({
67
- opened1: !_this.state.opened1
68
- });
69
- });
70
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler2", function () {
71
- _this.setState({
72
- opened2: !_this.state.opened2
73
- });
74
- });
75
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "contentHandler", function () {
76
- _this.setState({
77
- content: !_this.state.content
78
- });
79
- });
80
- _this.state = {
81
- opened: false,
82
- opened1: false,
83
- opened2: false,
84
- content: false
85
- };
86
- return _this;
87
- }
88
-
89
- (0, _createClass2["default"])(ControlledStory, [{
90
- key: "render",
91
- value: function render() {
92
- return _react["default"].createElement("div", null, _react["default"].createElement(_Dialog["default"], {
93
- isVisible: this.state.opened,
94
- isCloseVisible: true,
95
- onClose: this.dialogHandler,
96
- overlay: true
97
- }, _react["default"].createElement("div", {
98
- style: {
99
- display: "flex",
100
- justifyContent: "center",
101
- width: "100%"
102
- }
103
- }, _react["default"].createElement(_Switch["default"], {
104
- label: "Content",
105
- checked: false,
106
- onChange: this.contentHandler
107
- })), this.state.content && _react["default"].createElement("div", {
108
- style: {
109
- fontFamily: "Open Sans, sans serif"
110
- }
111
- }, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."))), _react["default"].createElement(_Button["default"], {
112
- onClick: this.dialogHandler,
113
- label: "Click me"
114
- }), _react["default"].createElement(_Dialog["default"], {
115
- isVisible: this.state.opened1,
116
- isCloseVisible: true,
117
- onClose: this.dialogHandler1,
118
- overlay: false
119
- }, _react["default"].createElement("div", {
120
- style: {
121
- fontFamily: "Open Sans, sans serif"
122
- }
123
- }, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis.")), _react["default"].createElement("div", {
124
- style: {
125
- display: "flex",
126
- justifyContent: "center",
127
- width: "100%"
128
- }
129
- }, _react["default"].createElement(_Button["default"], {
130
- mode: "raised",
131
- theme: "light",
132
- label: "OK",
133
- onClick: this.dialogHandler1
134
- }), _react["default"].createElement(_Button["default"], {
135
- mode: "flat",
136
- theme: "light",
137
- label: "CANCEL",
138
- onClick: this.dialogHandler1
139
- }))), _react["default"].createElement(_Button["default"], {
140
- onClick: this.dialogHandler1,
141
- label: "Click me"
142
- }), _react["default"].createElement(_Dialog["default"], {
143
- isVisible: this.state.opened2,
144
- isCloseVisible: false,
145
- onClose: this.dialogHandler2,
146
- overlay: true
147
- }, _react["default"].createElement("div", {
148
- style: {
149
- display: "flex",
150
- justifyContent: "center",
151
- alignItems: "center",
152
- width: "100%"
153
- }
154
- }, _react["default"].createElement(_Date["default"], {
155
- name: "date",
156
- format: "dd/MM/yyyy",
157
- label: "BirthDate",
158
- theme: "light",
159
- assistiveText: "Assistive Text Here",
160
- onInputChange: function onInputChange(event) {
161
- return console.log(event);
162
- }
163
- }), _react["default"].createElement(_InputText["default"], {
164
- disabled: false,
165
- label: "Amount",
166
- multiline: false,
167
- sufix: "K",
168
- prefix: "\u20AC",
169
- theme: "light",
170
- assistiveText: "Assistive Text Here"
171
- })), _react["default"].createElement("div", {
172
- style: {
173
- display: "flex",
174
- justifyContent: "center",
175
- width: "100%"
176
- }
177
- }, _react["default"].createElement(_Button["default"], {
178
- onClick: this.dialogHandler2,
179
- label: "Close"
180
- }))), _react["default"].createElement(_Button["default"], {
181
- onClick: this.dialogHandler2,
182
- label: "Click me"
183
- }));
184
- }
185
- }]);
186
- return ControlledStory;
187
- }(_react["default"].Component);
188
-
189
- return _react["default"].createElement(ControlledStory, null);
190
- }, {
191
- notes: {
192
- markdown: _readme["default"]
193
- }
194
- });
195
-
196
- var knobProps = function knobProps() {
197
- return {
198
- isVisible: (0, _addonKnobs["boolean"])("Visible", false),
199
- isCloseVisible: (0, _addonKnobs["boolean"])("Close Visible", false),
200
- overlay: (0, _addonKnobs["boolean"])("Overlay", false)
201
- };
202
- };
203
-
204
- (0, _react2.storiesOf)("Form Components|Dialog", module).add("Knobs example", function () {
205
- var props = knobProps();
206
- return _react["default"].createElement("div", null, _react["default"].createElement("p", {
207
- style: {
208
- fontFamily: "Open Sans, sans serif"
209
- }
210
- }, "Check visible"), _react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({
211
- onClose: close
212
- }, props), "This is a knobs example"));
213
- }, {
214
- notes: {
215
- markdown: _readme["default"]
216
- }
217
- });
@@ -1,32 +0,0 @@
1
- # DXC Dialog Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>isVisible: boolean</td>
13
- <td>true</td>
14
- <td>If true, the modal should be visible</td>
15
- </tr>
16
- <tr>
17
- <td>isCloseVisible: boolean</td>
18
- <td>true</td>
19
- <td>If true, the close button should be visible</td>
20
- </tr>
21
- <tr>
22
- <td>onClose: function</td>
23
- <td></td>
24
- <td>This function will be called when the user clicks the close button. If there is no function we should close the modal by default</td>
25
- </tr>
26
- <tr>
27
- <td>overlay: boolean</td>
28
- <td>true</td>
29
- <td>If true, the modal will be over a darker background</td>
30
- </tr>
31
- </table>
32
-