@dxc-technology/halstack-react 0.0.0-0daea0a → 0.0.0-0ddd74a

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 (165) hide show
  1. package/babel.config.js +6 -2
  2. package/dist/BackgroundColorContext.js +46 -0
  3. package/dist/ThemeContext.js +235 -2
  4. package/dist/V3Textarea/V3Textarea.js +264 -0
  5. package/dist/accordion/Accordion.js +174 -63
  6. package/dist/accordion-group/AccordionGroup.js +186 -0
  7. package/dist/alert/Alert.js +184 -83
  8. package/dist/alert/index.d.ts +51 -0
  9. package/dist/badge/Badge.js +63 -0
  10. package/dist/box/Box.js +31 -23
  11. package/dist/button/Button.js +82 -27
  12. package/dist/card/Card.js +72 -35
  13. package/dist/checkbox/Checkbox.js +108 -32
  14. package/dist/chip/Chip.js +129 -35
  15. package/dist/common/RequiredComponent.js +2 -8
  16. package/dist/common/utils.js +2 -22
  17. package/dist/common/variables.js +1454 -228
  18. package/dist/date/Date.js +86 -64
  19. package/dist/date-input/DateInput.js +400 -0
  20. package/dist/date-input/index.d.ts +95 -0
  21. package/dist/dialog/Dialog.js +58 -37
  22. package/dist/dropdown/Dropdown.js +229 -68
  23. package/dist/file-input/FileInput.js +644 -0
  24. package/dist/file-input/FileItem.js +280 -0
  25. package/dist/file-input/index.d.ts +81 -0
  26. package/dist/footer/Footer.js +122 -47
  27. package/dist/footer/Icons.js +77 -0
  28. package/dist/header/Header.js +171 -91
  29. package/dist/header/Icons.js +59 -0
  30. package/dist/heading/Heading.js +81 -22
  31. package/dist/input-text/Icons.js +22 -0
  32. package/dist/input-text/InputText.js +293 -107
  33. package/dist/layout/ApplicationLayout.js +327 -0
  34. package/dist/layout/Icons.js +55 -0
  35. package/dist/link/Link.js +136 -35
  36. package/dist/main.d.ts +8 -0
  37. package/dist/main.js +111 -7
  38. package/dist/new-select/NewSelect.js +836 -0
  39. package/dist/new-select/index.d.ts +53 -0
  40. package/dist/number-input/NumberInput.js +136 -0
  41. package/dist/number-input/NumberInputContext.js +16 -0
  42. package/dist/number-input/index.d.ts +113 -0
  43. package/dist/paginator/Icons.js +66 -0
  44. package/dist/paginator/Paginator.js +162 -57
  45. package/dist/password-input/PasswordInput.js +198 -0
  46. package/dist/password-input/index.d.ts +94 -0
  47. package/dist/progress-bar/ProgressBar.js +95 -38
  48. package/dist/radio/Radio.js +39 -21
  49. package/dist/resultsetTable/ResultsetTable.js +93 -69
  50. package/dist/select/Select.js +250 -143
  51. package/dist/sidenav/Sidenav.js +85 -143
  52. package/dist/slider/Slider.js +219 -73
  53. package/dist/spinner/Spinner.js +249 -64
  54. package/dist/switch/Switch.js +51 -26
  55. package/dist/table/Table.js +63 -15
  56. package/dist/tabs/Tabs.js +208 -35
  57. package/dist/tabs-for-sections/TabsForSections.js +1 -16
  58. package/dist/tag/Tag.js +100 -35
  59. package/dist/text-input/TextInput.js +971 -0
  60. package/dist/text-input/index.d.ts +135 -0
  61. package/dist/textarea/Textarea.js +250 -107
  62. package/dist/textarea/index.d.ts +117 -0
  63. package/dist/toggle/Toggle.js +16 -19
  64. package/dist/toggle-group/ToggleGroup.js +327 -0
  65. package/dist/upload/Upload.js +16 -11
  66. package/dist/upload/buttons-upload/ButtonsUpload.js +35 -25
  67. package/dist/upload/buttons-upload/Icons.js +40 -0
  68. package/dist/upload/dragAndDropArea/DragAndDropArea.js +78 -31
  69. package/dist/upload/file-upload/FileToUpload.js +50 -24
  70. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  71. package/dist/upload/readme.md +2 -2
  72. package/dist/upload/transaction/Icons.js +160 -0
  73. package/dist/upload/transaction/Transaction.js +42 -49
  74. package/dist/upload/transactions/Transactions.js +38 -20
  75. package/dist/useTheme.js +22 -0
  76. package/dist/wizard/Icons.js +65 -0
  77. package/dist/wizard/Wizard.js +141 -56
  78. package/package.json +14 -6
  79. package/test/AccordionGroup.test.js +125 -0
  80. package/test/Date.test.js +49 -45
  81. package/test/DateInput.test.js +242 -0
  82. package/test/Dropdown.test.js +19 -4
  83. package/test/FileInput.test.js +201 -0
  84. package/test/Footer.test.js +2 -7
  85. package/test/Header.test.js +5 -10
  86. package/test/InputText.test.js +53 -41
  87. package/test/Link.test.js +25 -7
  88. package/test/NumberInput.test.js +259 -0
  89. package/test/Paginator.test.js +72 -60
  90. package/test/PasswordInput.test.js +83 -0
  91. package/test/ResultsetTable.test.js +66 -19
  92. package/test/Select.test.js +55 -34
  93. package/test/Sidenav.test.js +22 -64
  94. package/test/Slider.test.js +24 -15
  95. package/test/Spinner.test.js +5 -0
  96. package/test/Tabs.test.js +21 -0
  97. package/test/TextInput.test.js +732 -0
  98. package/test/Textarea.test.js +193 -0
  99. package/test/ToggleGroup.test.js +85 -0
  100. package/test/Upload.test.js +5 -5
  101. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  102. package/dist/accordion/Accordion.stories.js +0 -207
  103. package/dist/accordion/readme.md +0 -96
  104. package/dist/alert/Alert.stories.js +0 -158
  105. package/dist/alert/close.svg +0 -4
  106. package/dist/alert/error.svg +0 -4
  107. package/dist/alert/info.svg +0 -4
  108. package/dist/alert/readme.md +0 -43
  109. package/dist/alert/success.svg +0 -4
  110. package/dist/alert/warning.svg +0 -4
  111. package/dist/button/Button.stories.js +0 -224
  112. package/dist/button/readme.md +0 -93
  113. package/dist/common/services/example-service.js +0 -10
  114. package/dist/common/services/example-service.test.js +0 -12
  115. package/dist/date/calendar.svg +0 -1
  116. package/dist/date/calendar_dark.svg +0 -1
  117. package/dist/dialog/Dialog.stories.js +0 -217
  118. package/dist/dialog/readme.md +0 -32
  119. package/dist/dropdown/Dropdown.stories.js +0 -249
  120. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  121. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  122. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  123. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  124. package/dist/dropdown/readme.md +0 -69
  125. package/dist/footer/Footer.stories.js +0 -94
  126. package/dist/footer/dxc_logo_wht.png +0 -0
  127. package/dist/footer/readme.md +0 -41
  128. package/dist/header/Header.stories.js +0 -176
  129. package/dist/header/close_icon.svg +0 -1
  130. package/dist/header/dxc_logo_black.png +0 -0
  131. package/dist/header/dxc_logo_white.png +0 -0
  132. package/dist/header/hamb_menu_black.svg +0 -1
  133. package/dist/header/hamb_menu_white.svg +0 -1
  134. package/dist/header/readme.md +0 -33
  135. package/dist/input-text/InputText.stories.js +0 -209
  136. package/dist/input-text/error.svg +0 -1
  137. package/dist/input-text/readme.md +0 -91
  138. package/dist/paginator/images/next.svg +0 -3
  139. package/dist/paginator/images/nextPage.svg +0 -3
  140. package/dist/paginator/images/previous.svg +0 -3
  141. package/dist/paginator/images/previousPage.svg +0 -3
  142. package/dist/paginator/readme.md +0 -50
  143. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  144. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  145. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  146. package/dist/select/Select.stories.js +0 -235
  147. package/dist/select/readme.md +0 -72
  148. package/dist/sidenav/arrow_icon.svg +0 -3
  149. package/dist/slider/Slider.stories.js +0 -241
  150. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  151. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  152. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  153. package/dist/upload/transaction/audio-icon.svg +0 -4
  154. package/dist/upload/transaction/error-icon.svg +0 -4
  155. package/dist/upload/transaction/file-icon-err.svg +0 -4
  156. package/dist/upload/transaction/file-icon.svg +0 -4
  157. package/dist/upload/transaction/image-icon-err.svg +0 -4
  158. package/dist/upload/transaction/image-icon.svg +0 -4
  159. package/dist/upload/transaction/success-icon.svg +0 -4
  160. package/dist/upload/transaction/video-icon-err.svg +0 -4
  161. package/dist/upload/transaction/video-icon.svg +0 -4
  162. package/dist/wizard/invalid_icon.svg +0 -6
  163. package/dist/wizard/valid_icon.svg +0 -6
  164. package/dist/wizard/validation-wrong.svg +0 -6
  165. package/test/Toggle.test.js +0 -43
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="12.41" height="12" viewBox="0 0 12.41 12">
2
- <path id="Path_2463" data-name="Path 2463" d="M18.41,16.59,13.82,12l4.59-4.59L17,6l-6,6,6,6ZM6,6H8V18H6Z" transform="translate(-6 -6)"/>
3
- </svg>
@@ -1,50 +0,0 @@
1
- # DXC Paginator 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>currentPage: number</td>
13
- <td><code>1</code></td>
14
- <td>Current page.</td>
15
- </tr>
16
- <tr>
17
- <td>itemsPerPage: number</td>
18
- <td><code>5</code></td>
19
- <td>Number of items to be displayed on each page.</td>
20
- </tr>
21
- <tr>
22
- <td>totalItems: number</td>
23
- <td></td>
24
- <td>Total number of items.</td>
25
- </tr>
26
- <tr>
27
- <td>nextFunction: function</td>
28
- <td></td>
29
- <td>This function will be called when the user clicks the next page button.<br>
30
- </td>
31
- </tr>
32
- <tr>
33
- <td>prevFunction: function</td>
34
- <td></td>
35
- <td>This function will be called when the user clicks the previous page button.<br>
36
- </td>
37
- </tr>
38
- <tr>
39
- <td>lastFunction: function</td>
40
- <td></td>
41
- <td>This function will be called when the user clicks the last page button.<br>
42
- </td>
43
- </tr>
44
- <tr>
45
- <td>firstFunction: function</td>
46
- <td></td>
47
- <td>This function will be called when the user clicks the first page button.<br>
48
- </td>
49
- </tr>
50
- </table>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="white"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>
@@ -1,235 +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
- var _amazon = _interopRequireDefault(require("../../.storybook/public/amazon.svg"));
28
-
29
- var _ebay = _interopRequireDefault(require("../../.storybook/public/ebay.svg"));
30
-
31
- var _apple = _interopRequireDefault(require("../../.storybook/public/apple.svg"));
32
-
33
- var _addonKnobs = require("@storybook/addon-knobs");
34
-
35
- var _readme = _interopRequireDefault(require("./readme.md"));
36
-
37
- var _Select = _interopRequireDefault(require("./Select"));
38
-
39
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
40
-
41
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
42
-
43
- var onChange = (0, _addonActions.action)("onChange");
44
-
45
- onChange.toString = function () {
46
- return "onChangeHandler";
47
- };
48
-
49
- var selectOptions = [{
50
- value: 1,
51
- label: "Amazon",
52
- iconSrc: _amazon["default"]
53
- }, {
54
- value: 2,
55
- label: "Ebay",
56
- iconSrc: _ebay["default"]
57
- }, {
58
- value: 3,
59
- label: "Apple",
60
- iconSrc: _apple["default"]
61
- }];
62
- var selectOptionsWithoutIcon = [{
63
- value: 1,
64
- label: "Amazon"
65
- }, {
66
- value: 2,
67
- label: "Ebay"
68
- }, {
69
- value: 3,
70
- label: "Apple"
71
- }];
72
- var selectOptionsWithoutLabel = [{
73
- value: 1,
74
- label: "",
75
- iconSrc: _amazon["default"]
76
- }, {
77
- value: 2,
78
- label: "",
79
- iconSrc: _ebay["default"]
80
- }, {
81
- value: 3,
82
- label: "",
83
- iconSrc: _apple["default"]
84
- }];
85
- (0, _react2.storiesOf)("Form Components|Select", module).add("Component", function () {
86
- return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
87
- disabled: false,
88
- theme: "light",
89
- name: "selectName",
90
- label: "Select Label",
91
- options: selectOptionsWithoutIcon,
92
- required: false,
93
- onChange: onChange,
94
- iconPosition: "before"
95
- })), _react["default"].createElement("h4", null, "Multiple"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
96
- disabled: false,
97
- theme: "light",
98
- multiple: true,
99
- name: "selectNameMultiple",
100
- label: "Select Multiple",
101
- options: selectOptionsWithoutIcon,
102
- required: false,
103
- onChange: onChange,
104
- iconPosition: "after"
105
- })), _react["default"].createElement("h4", null, "Only Icons"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
106
- disabled: false,
107
- theme: "light",
108
- multiple: true,
109
- name: "selectNameOnlyIcons",
110
- label: "Only icons",
111
- options: selectOptionsWithoutLabel,
112
- required: false,
113
- onChange: onChange,
114
- iconPosition: "before"
115
- })), _react["default"].createElement("h2", null, "Dark"), _react["default"].createElement("div", {
116
- style: {
117
- background: "black"
118
- }
119
- }, _react["default"].createElement(_Select["default"], {
120
- disabled: false,
121
- theme: "dark",
122
- name: "selectNameDark",
123
- label: "Select Label Dark",
124
- options: selectOptions,
125
- required: false,
126
- onChange: onChange,
127
- iconPosition: "before"
128
- }), _react["default"].createElement("h4", null, "Multiple"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
129
- disabled: false,
130
- theme: "dark",
131
- multiple: true,
132
- name: "selectNameMultipleDark",
133
- label: "Select Multiple",
134
- options: selectOptions,
135
- required: false,
136
- onChange: onChange,
137
- iconPosition: "after"
138
- })), _react["default"].createElement("h4", null, "Only Icons"), _react["default"].createElement("div", null, _react["default"].createElement(_Select["default"], {
139
- disabled: false,
140
- theme: "dark",
141
- multiple: true,
142
- name: "selectNameOnlyIcons",
143
- label: "Only icons",
144
- options: selectOptionsWithoutLabel,
145
- required: false,
146
- onChange: onChange,
147
- iconPosition: "before"
148
- }))));
149
- }, {
150
- notes: {
151
- markdown: _readme["default"]
152
- }
153
- });
154
- (0, _react2.storiesOf)("Form Components|Select", module).add("Controlled Component", function () {
155
- var ControlledStory =
156
- /*#__PURE__*/
157
- function (_React$Component) {
158
- (0, _inherits2["default"])(ControlledStory, _React$Component);
159
-
160
- function ControlledStory(props) {
161
- var _this;
162
-
163
- (0, _classCallCheck2["default"])(this, ControlledStory);
164
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
165
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onValueChange", function (value) {
166
- return _this.setState({
167
- value: value
168
- });
169
- });
170
- _this.state = {
171
- value: []
172
- };
173
- return _this;
174
- }
175
-
176
- (0, _createClass2["default"])(ControlledStory, [{
177
- key: "render",
178
- value: function render() {
179
- var props = _objectSpread({}, this.props, {
180
- onChange: this.onValueChange,
181
- value: this.state.value
182
- });
183
-
184
- return _react["default"].createElement(_Select["default"], props);
185
- }
186
- }]);
187
- return ControlledStory;
188
- }(_react["default"].Component);
189
-
190
- var props = {
191
- disabled: false,
192
- theme: "light",
193
- name: "selectName",
194
- multiple: true,
195
- options: selectOptions,
196
- required: false,
197
- iconPosition: "before",
198
- label: "Select label"
199
- };
200
- return _react["default"].createElement(ControlledStory, props);
201
- });
202
-
203
- var knobProps = function knobProps() {
204
- return {
205
- label: (0, _addonKnobs.text)("label", "Test Select"),
206
- theme: (0, _addonKnobs.select)("theme", {
207
- light: "light",
208
- dark: "dark"
209
- }, "light"),
210
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
211
- required: (0, _addonKnobs["boolean"])("required", false),
212
- iconPosition: (0, _addonKnobs.select)("icon poistion", {
213
- before: "before",
214
- after: "after"
215
- }, "before") // ,
216
- // multiple: boolean("multiple", false)
217
-
218
- };
219
- };
220
-
221
- (0, _react2.storiesOf)("Form Components|Select", module).add("Knobs example", function () {
222
- var props = knobProps();
223
- return _react["default"].createElement("div", {
224
- style: {
225
- background: props.theme === "dark" && "black" || "transparent"
226
- }
227
- }, _react["default"].createElement(_Select["default"], (0, _extends2["default"])({}, props, {
228
- options: selectOptions,
229
- onChange: onChange
230
- })));
231
- }, {
232
- notes: {
233
- markdown: _readme["default"]
234
- }
235
- });
@@ -1,72 +0,0 @@
1
- # DXC Select 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>options: object[]</td>
13
- <td><code>[]</code></td>
14
- <td>An array of objects representing the selectable options. Each object has the following properties:
15
- <ul>
16
- <li><b>value</b>: Option inner value</li>
17
- <li><b>label</b>: Option display value</li>
18
- <li><b>iconSrc</b>: URL of the icon that will be placed next to the option label</li>
19
- </ul>
20
- </td>
21
- </tr>
22
- <tr>
23
- <td>iconPosition: 'before' | 'after'</td>
24
- <td><code>'before'</code></td>
25
- <td>In case options include an icon, whether the icon should appear after or before the label.</td>
26
- </tr>
27
- <tr>
28
- <td>value: string | string[]</td>
29
- <td><code>[]</code></td>
30
- <td>The key of the selected value/values. If the select component doesn't allow multiple selection, value must be a string. If the select component allows multiple selection, value must be an array of strings</td>
31
- </tr>
32
- <tr>
33
- <td>multiple: boolean</td>
34
- <td><code>false</code></td>
35
- <td>If true, the select component will support multiple selection. In that case, value must be an array of strings with the keys of the selected values, otherwise value must be a string.</td>
36
- </tr>
37
- <tr>
38
- <td>label: string</td>
39
- <td></td>
40
- <td>Text to be placed next to the select.</td>
41
- </tr>
42
- <tr>
43
- <td>theme: 'light' | 'dark'</td>
44
- <td><code>'light'</code></td>
45
- <td>Uses one of the available component themes.</td>
46
- </tr>
47
- <tr>
48
- <td>name: string</td>
49
- <td></td>
50
- <td>Name attribute of the input element.</td>
51
- </tr>
52
- <tr>
53
- <td>disabled: boolean</td>
54
- <td><code>false</code></td>
55
- <td>If true, the component will be disabled.</td>
56
- </tr>
57
- <tr>
58
- <td>required: boolean</td>
59
- <td><code>false</code></td>
60
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
61
- </tr>
62
- <tr>
63
- <td>disableRipple: boolean</td>
64
- <td><code>false</code></td>
65
- <td>If true, the ripple effect will be disabled.</td>
66
- </tr>
67
- <tr>
68
- <td>onChange: function</td>
69
- <td></td>
70
- <td>This function will be called every time the selection changes. The string with the key of the selected value will be passed as a parameter to this function. If multiple selection is allowed, an array of keys will be passed</td>
71
- </tr>
72
- </table>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="15.995" height="10.01" viewBox="0 0 15.995 10.01">
2
- <path id="arrow-to-right" d="M17.71,11.29l-4-4a1,1,0,0,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,1,0,1.42,1.42l4-4a1.034,1.034,0,0,0,0-1.42Z" transform="translate(-2 -6.996)"/>
3
- </svg>
@@ -1,241 +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 _Slider = _interopRequireDefault(require("./Slider"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- var onDragEnd = (0, _addonActions.action)("onDragEnd");
26
-
27
- onDragEnd.toString = function () {
28
- return "onDragEnd";
29
- };
30
-
31
- var onChangeInput = (0, _addonActions.action)("onChangeInput");
32
-
33
- onChangeInput.toString = function () {
34
- return "onChangeInputHandler";
35
- };
36
-
37
- (0, _react2.storiesOf)("Form Components|Slider", module).add("Component", function () {
38
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
39
- minValue: 0,
40
- maxValue: 100,
41
- showLimitsValues: true,
42
- showInput: false,
43
- name: "input",
44
- disabled: false,
45
- required: true,
46
- theme: "light",
47
- step: 1,
48
- marks: false,
49
- onChange: onChange,
50
- onDragEnd: onDragEnd,
51
- onChangeInput: onChangeInput
52
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
53
- minValue: 0,
54
- maxValue: 50,
55
- showLimitsValues: true,
56
- showInput: false,
57
- name: "input",
58
- disabled: false,
59
- required: true,
60
- theme: "light",
61
- step: 10,
62
- marks: true,
63
- onChange: onChange,
64
- onDragEnd: onDragEnd,
65
- onChangeInput: onChangeInput
66
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
67
- minValue: 0,
68
- maxValue: 50,
69
- showLimitsValues: false,
70
- showInput: false,
71
- name: "input",
72
- disabled: false,
73
- required: true,
74
- theme: "light",
75
- step: 10,
76
- marks: false,
77
- onChange: onChange,
78
- onDragEnd: onDragEnd,
79
- onChangeInput: onChangeInput
80
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
81
- minValue: 0,
82
- maxValue: 50,
83
- showLimitsValues: true,
84
- showInput: true,
85
- name: "input",
86
- disabled: false,
87
- required: true,
88
- theme: "light",
89
- step: 5,
90
- marks: true,
91
- onChange: onChange,
92
- onDragEnd: onDragEnd,
93
- onChangeInput: onChangeInput
94
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", null, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
95
- minValue: 0,
96
- maxValue: 50,
97
- showLimitsValues: true,
98
- showInput: true,
99
- name: "input",
100
- disabled: true,
101
- required: true,
102
- theme: "light",
103
- step: 5,
104
- marks: true,
105
- onChange: onChange,
106
- onDragEnd: onDragEnd,
107
- onChangeInput: onChangeInput
108
- }))), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
109
- style: {
110
- background: "black"
111
- }
112
- }, _react["default"].createElement("p", {
113
- style: {
114
- color: "white"
115
- }
116
- }, "Slider"), _react["default"].createElement("div", null, _react["default"].createElement(_Slider["default"], {
117
- minValue: 0,
118
- maxValue: 100,
119
- showLimitsValues: true,
120
- showInput: false,
121
- name: "input",
122
- disabled: false,
123
- required: true,
124
- theme: "dark",
125
- step: 1,
126
- marks: false,
127
- onChange: onChange,
128
- onDragEnd: onDragEnd,
129
- onChangeInput: onChangeInput
130
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
131
- style: {
132
- color: "white"
133
- }
134
- }, "Slider with marks"), _react["default"].createElement(_Slider["default"], {
135
- minValue: 0,
136
- maxValue: 50,
137
- showLimitsValues: true,
138
- showInput: false,
139
- name: "input",
140
- disabled: false,
141
- required: true,
142
- theme: "dark",
143
- step: 10,
144
- marks: true,
145
- onChange: onChange,
146
- onDragEnd: onDragEnd,
147
- onChangeInput: onChangeInput
148
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
149
- style: {
150
- color: "white"
151
- }
152
- }, "Slider without limit values"), _react["default"].createElement(_Slider["default"], {
153
- minValue: 0,
154
- maxValue: 50,
155
- showLimitsValues: false,
156
- showInput: false,
157
- name: "input",
158
- disabled: false,
159
- required: true,
160
- theme: "dark",
161
- step: 10,
162
- marks: false,
163
- onChange: onChange,
164
- onDragEnd: onDragEnd,
165
- onChangeInput: onChangeInput
166
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
167
- style: {
168
- color: "white"
169
- }
170
- }, "Slider with limits, input and marks"), _react["default"].createElement(_Slider["default"], {
171
- minValue: 0,
172
- maxValue: 50,
173
- showLimitsValues: true,
174
- showInput: true,
175
- name: "input",
176
- disabled: false,
177
- required: true,
178
- theme: "dark",
179
- step: 5,
180
- marks: true,
181
- onChange: onChange,
182
- onDragEnd: onDragEnd,
183
- onChangeInput: onChangeInput
184
- })), _react["default"].createElement("div", null, _react["default"].createElement("p", {
185
- style: {
186
- color: "white"
187
- }
188
- }, "Slider with limits, input, marks and disabled"), _react["default"].createElement(_Slider["default"], {
189
- minValue: 0,
190
- maxValue: 50,
191
- showLimitsValues: true,
192
- showInput: true,
193
- name: "input",
194
- disabled: true,
195
- required: true,
196
- theme: "dark",
197
- step: 5,
198
- marks: true,
199
- onChange: onChange,
200
- onDragEnd: onDragEnd,
201
- onChangeInput: onChangeInput
202
- }))));
203
- }, {
204
- notes: {
205
- markdown: _readme["default"]
206
- }
207
- });
208
-
209
- var knobProps = function knobProps() {
210
- return {
211
- minValue: (0, _addonKnobs.number)("minvalue", 0),
212
- maxValue: (0, _addonKnobs.number)("maxvalue", 100),
213
- showLimitsValues: (0, _addonKnobs["boolean"])("showLimits", true),
214
- showInput: (0, _addonKnobs["boolean"])("showInput", true),
215
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
216
- theme: (0, _addonKnobs.select)("theme", {
217
- light: "light",
218
- dark: "dark"
219
- }, "light"),
220
- step: (0, _addonKnobs.number)("step", 1),
221
- marks: (0, _addonKnobs["boolean"])("marks", false)
222
- };
223
- };
224
-
225
- (0, _react2.storiesOf)("Form Components|Slider", module).add("Knobs example", function () {
226
- var props = knobProps();
227
- return _react["default"].createElement("div", {
228
- style: {
229
- background: props.theme === "dark" && "black" || "transparent"
230
- }
231
- }, _react["default"].createElement(_Slider["default"], (0, _extends2["default"])({}, props, {
232
- onChange: onChange,
233
- onDragEnd: onDragEnd,
234
- onChangeInput: onChangeInput,
235
- name: "sliderImput"
236
- })));
237
- }, {
238
- notes: {
239
- markdown: _readme["default"]
240
- }
241
- });
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#666666">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.89 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9c-1.11 0-2 .9-2 2v10c0 1.1.89 2 2 2h10c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z"/>
4
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zM8 15c0-1.66 1.34-3 3-3 .35 0 .69.07 1 .18V6h5v2h-3v7.03c-.02 1.64-1.35 2.97-3 2.97-1.66 0-3-1.34-3-3z"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path 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 12z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D0011B">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#D9D9D9">
2
- <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>