@dxc-technology/halstack-react 0.0.0-e30cba6 → 0.0.0-e3347c0

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 (182) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6708 -0
  3. package/dist/index.d.ts +6708 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +79 -67
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -240
  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/badge/Badge.js +0 -63
  14. package/dist/box/Box.js +0 -156
  15. package/dist/button/Button.js +0 -238
  16. package/dist/card/Card.js +0 -254
  17. package/dist/checkbox/Checkbox.js +0 -300
  18. package/dist/checkbox/Checkbox.stories.js +0 -144
  19. package/dist/checkbox/readme.md +0 -116
  20. package/dist/chip/Chip.js +0 -265
  21. package/dist/common/OpenSans.css +0 -81
  22. package/dist/common/RequiredComponent.js +0 -40
  23. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  24. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  33. package/dist/common/utils.js +0 -22
  34. package/dist/common/variables.js +0 -1367
  35. package/dist/date/Date.js +0 -381
  36. package/dist/date/Date.stories.js +0 -205
  37. package/dist/date/readme.md +0 -73
  38. package/dist/dialog/Dialog.js +0 -218
  39. package/dist/dropdown/Dropdown.js +0 -544
  40. package/dist/footer/Footer.js +0 -395
  41. package/dist/footer/Footer.stories.js +0 -94
  42. package/dist/footer/dxc_logo.svg +0 -15
  43. package/dist/footer/readme.md +0 -41
  44. package/dist/header/Header.js +0 -403
  45. package/dist/header/Header.stories.js +0 -176
  46. package/dist/header/close_icon.svg +0 -1
  47. package/dist/header/dxc_logo_black.svg +0 -8
  48. package/dist/header/hamb_menu_black.svg +0 -1
  49. package/dist/header/hamb_menu_white.svg +0 -1
  50. package/dist/header/readme.md +0 -33
  51. package/dist/heading/Heading.js +0 -218
  52. package/dist/input-text/InputText.js +0 -707
  53. package/dist/input-text/InputText.stories.js +0 -209
  54. package/dist/input-text/error.svg +0 -1
  55. package/dist/input-text/readme.md +0 -91
  56. package/dist/layout/ApplicationLayout.js +0 -331
  57. package/dist/layout/facebook.svg +0 -45
  58. package/dist/layout/linkedin.svg +0 -50
  59. package/dist/layout/twitter.svg +0 -53
  60. package/dist/link/Link.js +0 -241
  61. package/dist/link/readme.md +0 -51
  62. package/dist/main.js +0 -351
  63. package/dist/new-date/NewDate.js +0 -403
  64. package/dist/new-input-text/NewInputText.js +0 -961
  65. package/dist/new-textarea/NewTextarea.js +0 -346
  66. package/dist/number/Number.js +0 -138
  67. package/dist/number/NumberContext.js +0 -16
  68. package/dist/paginator/Paginator.js +0 -289
  69. package/dist/paginator/images/next.svg +0 -3
  70. package/dist/paginator/images/nextPage.svg +0 -3
  71. package/dist/paginator/images/previous.svg +0 -3
  72. package/dist/paginator/images/previousPage.svg +0 -3
  73. package/dist/paginator/readme.md +0 -50
  74. package/dist/password/Password.js +0 -200
  75. package/dist/password/styles.css +0 -3
  76. package/dist/progress-bar/ProgressBar.js +0 -242
  77. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  78. package/dist/progress-bar/readme.md +0 -63
  79. package/dist/radio/Radio.js +0 -209
  80. package/dist/radio/Radio.stories.js +0 -166
  81. package/dist/radio/readme.md +0 -70
  82. package/dist/resultsetTable/ResultsetTable.js +0 -358
  83. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  84. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  85. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  86. package/dist/select/Select.js +0 -585
  87. package/dist/select/Select.stories.js +0 -235
  88. package/dist/select/readme.md +0 -72
  89. package/dist/sidenav/Sidenav.js +0 -177
  90. package/dist/slider/Slider.js +0 -319
  91. package/dist/slider/Slider.stories.js +0 -241
  92. package/dist/slider/readme.md +0 -64
  93. package/dist/spinner/Spinner.js +0 -218
  94. package/dist/spinner/Spinner.stories.js +0 -183
  95. package/dist/spinner/readme.md +0 -65
  96. package/dist/switch/Switch.js +0 -222
  97. package/dist/switch/Switch.stories.js +0 -134
  98. package/dist/switch/readme.md +0 -133
  99. package/dist/table/Table.js +0 -132
  100. package/dist/tabs/Tabs.js +0 -343
  101. package/dist/tabs/Tabs.stories.js +0 -130
  102. package/dist/tabs/readme.md +0 -78
  103. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  104. package/dist/tabs-for-sections/readme.md +0 -78
  105. package/dist/tag/Tag.js +0 -288
  106. package/dist/textarea/Textarea.js +0 -264
  107. package/dist/toggle/Toggle.js +0 -220
  108. package/dist/toggle/Toggle.stories.js +0 -297
  109. package/dist/toggle/readme.md +0 -80
  110. package/dist/toggle-group/ToggleGroup.js +0 -223
  111. package/dist/upload/Upload.js +0 -205
  112. package/dist/upload/Upload.stories.js +0 -72
  113. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  114. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  115. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  116. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  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/FileToUpload.js +0 -184
  120. package/dist/upload/file-upload/audio-icon.svg +0 -4
  121. package/dist/upload/file-upload/close.svg +0 -4
  122. package/dist/upload/file-upload/file-icon.svg +0 -4
  123. package/dist/upload/file-upload/video-icon.svg +0 -4
  124. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  125. package/dist/upload/readme.md +0 -37
  126. package/dist/upload/transaction/Transaction.js +0 -175
  127. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  128. package/dist/upload/transaction/audio-icon.svg +0 -4
  129. package/dist/upload/transaction/error-icon.svg +0 -4
  130. package/dist/upload/transaction/file-icon-err.svg +0 -4
  131. package/dist/upload/transaction/file-icon.svg +0 -4
  132. package/dist/upload/transaction/image-icon-err.svg +0 -4
  133. package/dist/upload/transaction/image-icon.svg +0 -4
  134. package/dist/upload/transaction/success-icon.svg +0 -4
  135. package/dist/upload/transaction/video-icon-err.svg +0 -4
  136. package/dist/upload/transaction/video-icon.svg +0 -4
  137. package/dist/upload/transactions/Transactions.js +0 -138
  138. package/dist/useTheme.js +0 -22
  139. package/dist/wizard/Wizard.js +0 -411
  140. package/dist/wizard/invalid_icon.svg +0 -5
  141. package/dist/wizard/valid_icon.svg +0 -5
  142. package/dist/wizard/validation-wrong.svg +0 -6
  143. package/test/Accordion.test.js +0 -33
  144. package/test/AccordionGroup.test.js +0 -125
  145. package/test/Alert.test.js +0 -53
  146. package/test/Box.test.js +0 -10
  147. package/test/Button.test.js +0 -18
  148. package/test/Card.test.js +0 -30
  149. package/test/Checkbox.test.js +0 -45
  150. package/test/Chip.test.js +0 -25
  151. package/test/Date.test.js +0 -393
  152. package/test/Dialog.test.js +0 -23
  153. package/test/Dropdown.test.js +0 -145
  154. package/test/Footer.test.js +0 -99
  155. package/test/Header.test.js +0 -39
  156. package/test/Heading.test.js +0 -35
  157. package/test/InputText.test.js +0 -240
  158. package/test/Link.test.js +0 -43
  159. package/test/NewDate.test.js +0 -203
  160. package/test/NewInputText.test.js +0 -817
  161. package/test/NewTextarea.test.js +0 -201
  162. package/test/Number.test.js +0 -241
  163. package/test/Paginator.test.js +0 -177
  164. package/test/Password.test.js +0 -76
  165. package/test/ProgressBar.test.js +0 -35
  166. package/test/Radio.test.js +0 -37
  167. package/test/ResultsetTable.test.js +0 -330
  168. package/test/Select.test.js +0 -189
  169. package/test/Sidenav.test.js +0 -45
  170. package/test/Slider.test.js +0 -82
  171. package/test/Spinner.test.js +0 -27
  172. package/test/Switch.test.js +0 -45
  173. package/test/Table.test.js +0 -36
  174. package/test/Tabs.test.js +0 -109
  175. package/test/TabsForSections.test.js +0 -34
  176. package/test/Tag.test.js +0 -32
  177. package/test/TextArea.test.js +0 -52
  178. package/test/ToggleGroup.test.js +0 -81
  179. package/test/Upload.test.js +0 -60
  180. package/test/Wizard.test.js +0 -130
  181. package/test/mocks/pngMock.js +0 -1
  182. package/test/mocks/svgMock.js +0 -1
@@ -1,222 +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 _propTypes = _interopRequireDefault(require("prop-types"));
25
-
26
- var _core = require("@material-ui/core");
27
-
28
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
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 _templateObject2() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n opacity: 1;\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n cursor: ", ";\n ", "\n"]);
40
-
41
- _templateObject2 = function _templateObject2() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- function _templateObject() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n display: inline-flex;\n align-items: center;\n flex-direction: ", ";\n\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n cursor: ", ";\n opacity: 1;\n \n .MuiSwitch-root {\n align-items: center;\n width: ", ";\n height: 45px;\n margin: 3px;\n\n .Mui-focusVisible {\n border: ", ";\n padding: 7px;\n }\n\n .MuiSwitch-track {\n /*Enabled and unchecked bar*/\n background-color: ", ";\n height: ", ";\n }\n\n .MuiSwitch-switchBase + .MuiSwitch-track {\n opacity: 1;\n }\n\n .MuiIconButton-root {\n /*Enabled and unchecked*/\n top: unset;\n .MuiSwitch-thumb {\n /*Only for thumb in all states*/\n width: ", ";\n height: ", ";\n }\n color: ", ";\n &:hover {\n background-color: transparent;\n }\n &.Mui-disabled {\n /*Disabled and unchecked*/\n color: ", ";\n + .MuiSwitch-track {\n /*Disabled and unchecked bar*/\n background-color: ", ";\n }\n }\n &.Mui-disabled.Mui-checked {\n /*Disabled and checked*/\n color: ", ";\n + .MuiSwitch-track {\n /*Disabled and checked bar*/\n background-color: ", ";\n }\n }\n &.Mui-checked {\n /*Enabled and checked*/\n color: ", ";\n transform: translateX(", ");\n &:hover {\n background-color: transparent;\n }\n + .MuiSwitch-track {\n /*Enabled and checked bar*/\n background-color: ", ";\n }\n }\n }\n }\n"]);
50
-
51
- _templateObject = function _templateObject() {
52
- return data;
53
- };
54
-
55
- return data;
56
- }
57
-
58
- var DxcSwitch = function DxcSwitch(_ref) {
59
- var checked = _ref.checked,
60
- value = _ref.value,
61
- label = _ref.label,
62
- _ref$labelPosition = _ref.labelPosition,
63
- labelPosition = _ref$labelPosition === void 0 ? "before" : _ref$labelPosition,
64
- name = _ref.name,
65
- _ref$disabled = _ref.disabled,
66
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
67
- onChange = _ref.onChange,
68
- _ref$required = _ref.required,
69
- required = _ref$required === void 0 ? false : _ref$required,
70
- margin = _ref.margin,
71
- _ref$size = _ref.size,
72
- size = _ref$size === void 0 ? "fitContent" : _ref$size,
73
- _ref$tabIndex = _ref.tabIndex,
74
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
75
-
76
- var _useState = (0, _react.useState)(0),
77
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
78
- innerChecked = _useState2[0],
79
- setInnerChecked = _useState2[1];
80
-
81
- var colorsTheme = (0, _useTheme["default"])();
82
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
83
-
84
- var handlerSwitchChange = function handlerSwitchChange(newValue) {
85
- if (checked === undefined) {
86
- var isChecked = newValue.target.checked === undefined ? !innerChecked : newValue.target.checked;
87
- setInnerChecked(isChecked);
88
-
89
- if (typeof onChange === "function") {
90
- onChange(isChecked);
91
- }
92
- } else {
93
- if (typeof onChange === "function") {
94
- onChange(!checked);
95
- }
96
- }
97
- };
98
-
99
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
100
- theme: colorsTheme["switch"]
101
- }, _react["default"].createElement(SwitchContainer, {
102
- margin: margin,
103
- disabled: disabled,
104
- labelPosition: labelPosition,
105
- size: size,
106
- backgroundType: backgroundType
107
- }, _react["default"].createElement(_core.Switch, {
108
- checked: checked != undefined ? checked : innerChecked,
109
- inputProps: {
110
- name: name,
111
- tabIndex: tabIndex
112
- },
113
- onChange: handlerSwitchChange,
114
- value: value,
115
- disabled: disabled,
116
- disableRipple: true
117
- }), _react["default"].createElement(LabelContainer, {
118
- labelPosition: labelPosition,
119
- onClick: disabled === true ? function () {} : handlerSwitchChange,
120
- disabled: disabled,
121
- backgroundType: backgroundType
122
- }, required && _react["default"].createElement(_RequiredComponent["default"], null), label)));
123
- };
124
-
125
- var sizes = {
126
- small: "60px",
127
- medium: "240px",
128
- large: "480px",
129
- fillParent: "100%",
130
- fitContent: "unset"
131
- };
132
-
133
- var calculateWidth = function calculateWidth(margin, size) {
134
- if (size === "fillParent") {
135
- return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
136
- }
137
-
138
- return sizes[size];
139
- };
140
-
141
- var SwitchContainer = _styledComponents["default"].div(_templateObject(), function (props) {
142
- return calculateWidth(props.margin, props.size);
143
- }, function (props) {
144
- return props.labelPosition === "after" ? "row" : "row-reverse";
145
- }, function (props) {
146
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
147
- }, function (props) {
148
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
149
- }, function (props) {
150
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
151
- }, function (props) {
152
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
153
- }, function (props) {
154
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
155
- }, function (props) {
156
- return props.disabled ? "not-allowed" : "default";
157
- }, function (props) {
158
- return props.theme.trackWidth;
159
- }, function (props) {
160
- return "".concat(props.backgroundType === "dark" ? props.theme.thumbFocusColorOnDark : props.theme.thumbFocusColor, " solid 2px");
161
- }, function (props) {
162
- return props.backgroundType === "dark" ? props.theme.uncheckedTrackBackgroundColorOnDark : props.theme.uncheckedTrackBackgroundColor;
163
- }, function (props) {
164
- return props.theme.trackHeight;
165
- }, function (props) {
166
- return props.theme.thumbWidth;
167
- }, function (props) {
168
- return props.theme.thumbHeight;
169
- }, function (props) {
170
- return props.backgroundType === "dark" ? props.theme.uncheckedThumbBackgroundColorOnDark : props.theme.uncheckedThumbBackgroundColor;
171
- }, function (props) {
172
- return props.backgroundType === "dark" ? props.theme.disabledUncheckedThumbBackgroundColorOnDark : props.theme.disabledUncheckedThumbBackgroundColor;
173
- }, function (props) {
174
- return props.backgroundType === "dark" ? props.theme.disabledUncheckedTrackBackgroundColorOnDark : props.theme.disabledUncheckedTrackBackgroundColor;
175
- }, function (props) {
176
- return props.backgroundType === "dark" ? props.theme.disabledCheckedThumbBackgroundColorOnDark : props.theme.disabledCheckedThumbBackgroundColor;
177
- }, function (props) {
178
- return props.backgroundType === "dark" ? props.theme.disabledCheckedTrackBackgroundColorOnDark : props.theme.disabledCheckedTrackBackgroundColor;
179
- }, function (props) {
180
- return props.backgroundType === "dark" ? props.theme.checkedThumbBackgroundColorOnDark : props.theme.checkedThumbBackgroundColor;
181
- }, function (props) {
182
- return props.theme.thumbShift;
183
- }, function (props) {
184
- return props.backgroundType === "dark" ? props.theme.checkedTrackBackgroundColorOnDark : props.theme.checkedTrackBackgroundColor;
185
- });
186
-
187
- var LabelContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
188
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
189
- }, function (props) {
190
- return props.theme.labelFontFamily;
191
- }, function (props) {
192
- return props.theme.labelFontSize;
193
- }, function (props) {
194
- return props.disabled ? props.theme.disabledLabelFontStyle : props.theme.labelFontStyle;
195
- }, function (props) {
196
- return props.theme.labelFontWeight;
197
- }, function (props) {
198
- return props.disabled === true ? "not-allowed" : "pointer";
199
- }, function (props) {
200
- return props.labelPosition === "after" ? "margin-left: ".concat(props.theme.spaceBetweenLabelSwitch, ";") : "margin-right: ".concat(props.theme.spaceBetweenLabelSwitch, ";");
201
- });
202
-
203
- DxcSwitch.propTypes = {
204
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
205
- checked: _propTypes["default"].bool,
206
- value: _propTypes["default"].any,
207
- label: _propTypes["default"].string,
208
- labelPosition: _propTypes["default"].oneOf(["after", "before", ""]),
209
- name: _propTypes["default"].string,
210
- disabled: _propTypes["default"].bool,
211
- onChange: _propTypes["default"].func,
212
- required: _propTypes["default"].bool,
213
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
214
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
215
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
216
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
217
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
218
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
219
- tabIndex: _propTypes["default"].number
220
- };
221
- var _default = DxcSwitch;
222
- exports["default"] = _default;
@@ -1,134 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _react2 = require("@storybook/react");
10
-
11
- var _addonActions = require("@storybook/addon-actions");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _readme = _interopRequireDefault(require("./readme.md"));
16
-
17
- var _Switch = _interopRequireDefault(require("./Switch"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- (0, _react2.storiesOf)("Form Components|Switch", module).add("Component", function () {
26
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Switch["default"], {
27
- checked: false,
28
- label: "Switch component",
29
- labelPosition: "after",
30
- theme: "light",
31
- onChange: onChange
32
- }), _react["default"].createElement(_Switch["default"], {
33
- checked: false,
34
- label: "Label before",
35
- labelPosition: "before",
36
- theme: "light",
37
- onChange: onChange
38
- }), _react["default"].createElement(_Switch["default"], {
39
- checked: false,
40
- label: "Label after",
41
- labelPosition: "after",
42
- theme: "light",
43
- onChange: onChange
44
- }), _react["default"].createElement(_Switch["default"], {
45
- checked: false,
46
- label: "Disabled",
47
- labelPosition: "after",
48
- theme: "light",
49
- disabled: true,
50
- onChange: onChange
51
- }), _react["default"].createElement(_Switch["default"], {
52
- checked: false,
53
- required: true,
54
- label: "Required",
55
- labelPosition: "after",
56
- theme: "light",
57
- disabled: false,
58
- onChange: onChange
59
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
60
- style: {
61
- background: "black"
62
- }
63
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Switch["default"], {
64
- checked: false,
65
- label: "Switch component",
66
- labelPosition: "after",
67
- theme: "dark",
68
- onChange: onChange
69
- }), _react["default"].createElement(_Switch["default"], {
70
- checked: false,
71
- label: "Label before",
72
- labelPosition: "before",
73
- theme: "dark",
74
- onChange: onChange
75
- }), _react["default"].createElement(_Switch["default"], {
76
- checked: false,
77
- label: "Label after",
78
- labelPosition: "after",
79
- theme: "dark",
80
- onChange: onChange
81
- }), _react["default"].createElement(_Switch["default"], {
82
- checked: false,
83
- label: "Disabled",
84
- labelPosition: "after",
85
- theme: "dark",
86
- disabled: true,
87
- onChange: onChange
88
- }), _react["default"].createElement(_Switch["default"], {
89
- checked: false,
90
- required: true,
91
- label: "Required",
92
- labelPosition: "after",
93
- theme: "dark",
94
- disabled: false,
95
- onChange: onChange
96
- }))));
97
- }, {
98
- notes: {
99
- markdown: _readme["default"]
100
- }
101
- });
102
-
103
- var knobProps = function knobProps() {
104
- return {
105
- label: (0, _addonKnobs.text)("Label", "Switch"),
106
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
107
- labelPosition: (0, _addonKnobs.select)("Label position", {
108
- before: "before",
109
- after: "after"
110
- }, "before"),
111
- theme: (0, _addonKnobs.select)("Theme", {
112
- light: "light",
113
- dark: "dark"
114
- }, "light"),
115
- disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
116
- required: (0, _addonKnobs["boolean"])("Required", false)
117
- };
118
- };
119
-
120
- (0, _react2.storiesOf)("Form Components|Switch", module).add("Knobs example", function () {
121
- var props = knobProps();
122
- return _react["default"].createElement("div", {
123
- style: {
124
- background: props.theme === "dark" && "black" || "transparent"
125
- }
126
- }, _react["default"].createElement(_Switch["default"], (0, _extends2["default"])({}, props, {
127
- value: "TestValue",
128
- onChange: onChange
129
- })));
130
- }, {
131
- notes: {
132
- markdown: _readme["default"]
133
- }
134
- });
@@ -1,133 +0,0 @@
1
- # DXC Checkbox Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcSwitch } from "@dxc-technology/halstack-react";
7
-
8
- <DxcSwitch onChange={handleNewValue} label="Test Switch" checked={checked} />;
9
- ```
10
-
11
- ## Props
12
-
13
- The API properties are the following:
14
-
15
- <table>
16
- <tr style="background-color: grey">
17
- <td>Name</td>
18
- <td>Type</td>
19
- <td>Default</td>
20
- <td>Required</td>
21
- <td>Description</td>
22
- </tr>
23
- <tr>
24
- <td>checked</td>
25
- <td><code> boolean </code></td>
26
- <td>false</td>
27
- <td>No</td>
28
- <td>If true, the component is checked.</td>
29
- </tr>
30
- <tr>
31
- <td>value</td>
32
- <td><code> any </code></td>
33
- <td></td>
34
- <td>No</td>
35
- <td>Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the switch is checked </td>
36
- </tr>
37
- <tr>
38
- <td>label</td>
39
- <td><code>string</code></td>
40
- <td></td>
41
- <td>No</td>
42
- <td>Text to be placed next to the switch.</td>
43
- </tr>
44
- <tr>
45
- <td>labelPosition</td>
46
- <td><code>string: 'before' | 'after'</code></td>
47
- <td><code>'before'</code></td>
48
- <td>No</td>
49
- <td>Whether the label should appear after or before the switch.</td>
50
- </tr>
51
- <tr>
52
- <td>theme</td>
53
- <td><code> string: 'light' |
54
- 'dark'</code></td>
55
- <td><code>'light'</code></td>
56
- <td>No</td>
57
- <td>Uses one of the available component themes.</td>
58
- </tr>
59
- <tr>
60
- <td>name</td>
61
- <td><code>string</code></td>
62
- <td><code>false</code></td>
63
- <td></td>
64
- <td>Name attribute of the input element.</td>
65
- </tr>
66
- <tr>
67
- <td>disabled</td>
68
- <td><code>boolean</code></td>
69
- <td><code>false</code></td>
70
- <td>No</td>
71
- <td>If true, the component will be disabled.</td>
72
- </tr>
73
- <tr>
74
- <td>disableRipple</td>
75
- <td><code>boolean</code></td>
76
- <td><code>false</code></td>
77
- <td>No</td>
78
- <td>If true, the ripple effect will be disabled.</td>
79
- </tr>
80
- <tr>
81
- <td>onChange</td>
82
- <td><code>function</code></td>
83
- <td></td>
84
- <td>No</td>
85
- <td>This function will be called when the user clicks the radio. The new value will be passed as a parameter.<br>
86
- </tr>
87
- </table>
88
-
89
- ## Examples
90
-
91
- - Basic switch - Light theme - Enabled - Label after switch - With ripple
92
-
93
- ```js
94
- import React from "react";
95
- import { DxcSwitch } from "@dxc-technology/halstack-react";
96
-
97
- class App extends React.Component {
98
- state = {
99
- isChecked: true
100
- };
101
- constructor() {
102
- super();
103
- this.handleChange = this.handleChange.bind(this);
104
- }
105
-
106
- handleChange(checked) {
107
- this.setState({
108
- isChecked: checked
109
- });
110
- }
111
-
112
- render() {
113
- return (
114
- <div>
115
- <DxcSwitch
116
- checked={this.state.isChecked}
117
- value="Switch1"
118
- label="Switch 1"
119
- labelPosition="after"
120
- theme="light"
121
- name="Checkbox"
122
- disabled={false}
123
- disableRipple={false}
124
- onChange={event => this.handleChange(event)}
125
- />
126
- </div>
127
- );
128
- }
129
- }
130
- export default App;
131
-
132
-
133
- ```
@@ -1,132 +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 _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
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 _variables = require("../common/variables.js");
21
-
22
- var _utils = require("../common/utils.js");
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- var _BackgroundColorContext = require("../BackgroundColorContext.js");
27
-
28
- function _templateObject2() {
29
- var data = (0, _taggedTemplateLiteral2["default"])(["\n border-collapse: collapse;\n width: 100%;\n\n & tr {\n border-bottom: ", ";\n }\n & td {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th:first-child {\n border-top-left-radius: ", ";\n }\n & th:last-child {\n border-top-right-radius: ", ";\n }\n"]);
30
-
31
- _templateObject2 = function _templateObject2() {
32
- return data;
33
- };
34
-
35
- return data;
36
- }
37
-
38
- function _templateObject() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n overflow: hidden auto;\n &::-webkit-scrollbar {\n width: 8px;\n }\n &::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 6px;\n }\n &::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 6px;\n }\n"]);
40
-
41
- _templateObject = function _templateObject() {
42
- return data;
43
- };
44
-
45
- return data;
46
- }
47
-
48
- var DxcTable = function DxcTable(_ref) {
49
- var children = _ref.children,
50
- margin = _ref.margin;
51
- var colorsTheme = (0, _useTheme["default"])();
52
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
53
- theme: colorsTheme.table
54
- }, _react["default"].createElement(DxcTableContainer, {
55
- margin: margin
56
- }, _react["default"].createElement(DxcTableContent, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
57
- color: colorsTheme.table.dataBackgroundColor
58
- }, children))));
59
- };
60
-
61
- var calculateWidth = function calculateWidth(margin) {
62
- return "calc(100% - ".concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
63
- };
64
-
65
- var DxcTableContainer = _styledComponents["default"].div(_templateObject(), function (props) {
66
- return calculateWidth(props.margin);
67
- }, function (props) {
68
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
69
- }, function (props) {
70
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
71
- }, function (props) {
72
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
73
- }, function (props) {
74
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
75
- }, function (props) {
76
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
77
- }, function (props) {
78
- return props.theme.scrollBarThumbColor;
79
- }, function (props) {
80
- return props.theme.scrollBarTrackColor;
81
- });
82
-
83
- var DxcTableContent = _styledComponents["default"].table(_templateObject2(), function (props) {
84
- return "".concat(props.theme.rowSeparatorThickness, " ").concat(props.theme.rowSeparatorStyle, " ").concat(props.theme.rowSeparatorColor);
85
- }, function (props) {
86
- return props.theme.dataBackgroundColor;
87
- }, function (props) {
88
- return props.theme.dataFontFamily;
89
- }, function (props) {
90
- return props.theme.dataFontSize;
91
- }, function (props) {
92
- return props.theme.dataFontStyle;
93
- }, function (props) {
94
- return props.theme.dataFontWeight;
95
- }, function (props) {
96
- return props.theme.dataFontColor;
97
- }, function (props) {
98
- return props.theme.dataFontTextTransform;
99
- }, function (props) {
100
- return props.theme.dataTextAlign;
101
- }, function (props) {
102
- return props.theme.dataTextLineHeight;
103
- }, function (props) {
104
- return "".concat(props.theme.dataPaddingTop, " ").concat(props.theme.dataPaddingRight, " ").concat(props.theme.dataPaddingBottom, " ").concat(props.theme.dataPaddingLeft);
105
- }, function (props) {
106
- return props.theme.headerBackgroundColor;
107
- }, function (props) {
108
- return props.theme.headerFontFamily;
109
- }, function (props) {
110
- return props.theme.headerFontSize;
111
- }, function (props) {
112
- return props.theme.headerFontStyle;
113
- }, function (props) {
114
- return props.theme.headerFontWeight;
115
- }, function (props) {
116
- return props.theme.headerFontColor;
117
- }, function (props) {
118
- return props.theme.headerFontTextTransform;
119
- }, function (props) {
120
- return props.theme.headerTextAlign;
121
- }, function (props) {
122
- return props.theme.headerTextLineHeight;
123
- }, function (props) {
124
- return "".concat(props.theme.headerPaddingTop, " ").concat(props.theme.headerPaddingRight, " ").concat(props.theme.headerPaddingBottom, " ").concat(props.theme.headerPaddingLeft);
125
- }, function (props) {
126
- return props.theme.headerBorderRadius;
127
- }, function (props) {
128
- return props.theme.headerBorderRadius;
129
- });
130
-
131
- var _default = DxcTable;
132
- exports["default"] = _default;