@dxc-technology/halstack-react 0.0.0-51a5c42 → 0.0.0-522074c

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 (265) hide show
  1. package/BackgroundColorContext.js +50 -0
  2. package/ThemeContext.js +246 -0
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +38 -132
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/V3Textarea → V3Textarea}/V3Textarea.js +10 -14
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/accordion/Accordion.d.ts +4 -0
  8. package/{dist/accordion → accordion}/Accordion.js +35 -130
  9. package/accordion/types.d.ts +68 -0
  10. package/accordion/types.js +5 -0
  11. package/accordion-group/AccordionGroup.d.ts +7 -0
  12. package/accordion-group/AccordionGroup.js +170 -0
  13. package/accordion-group/types.d.ts +72 -0
  14. package/accordion-group/types.js +5 -0
  15. package/alert/Alert.d.ts +4 -0
  16. package/{dist/alert → alert}/Alert.js +38 -151
  17. package/alert/types.d.ts +49 -0
  18. package/alert/types.js +5 -0
  19. package/badge/Badge.js +59 -0
  20. package/{dist/box → box}/Box.js +9 -13
  21. package/box/index.d.ts +25 -0
  22. package/button/Button.d.ts +4 -0
  23. package/{dist/button → button}/Button.js +16 -72
  24. package/button/Button.stories.tsx +293 -0
  25. package/button/types.d.ts +57 -0
  26. package/button/types.js +5 -0
  27. package/card/Card.d.ts +4 -0
  28. package/{dist/card → card}/Card.js +32 -121
  29. package/card/types.d.ts +69 -0
  30. package/card/types.js +5 -0
  31. package/checkbox/Checkbox.d.ts +4 -0
  32. package/{dist/checkbox → checkbox}/Checkbox.js +16 -63
  33. package/checkbox/types.d.ts +60 -0
  34. package/checkbox/types.js +5 -0
  35. package/{dist/chip → chip}/Chip.js +17 -61
  36. package/chip/index.d.ts +22 -0
  37. package/{dist/common → common}/OpenSans.css +0 -0
  38. package/{dist/common → common}/RequiredComponent.js +3 -11
  39. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  40. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  41. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  42. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  43. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  44. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  45. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  46. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  47. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  48. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  49. package/{dist/common → common}/utils.js +0 -0
  50. package/{dist/common → common}/variables.js +133 -133
  51. package/{dist/date → date}/Date.js +21 -27
  52. package/date/index.d.ts +27 -0
  53. package/date-input/DateInput.d.ts +4 -0
  54. package/{dist/date-input → date-input}/DateInput.js +22 -61
  55. package/date-input/types.d.ts +100 -0
  56. package/date-input/types.js +5 -0
  57. package/{dist/dialog → dialog}/Dialog.js +16 -50
  58. package/dialog/index.d.ts +18 -0
  59. package/dropdown/Dropdown.d.ts +4 -0
  60. package/{dist/dropdown → dropdown}/Dropdown.js +44 -171
  61. package/dropdown/types.d.ts +89 -0
  62. package/dropdown/types.js +5 -0
  63. package/{dist/file-input → file-input}/FileInput.js +49 -161
  64. package/{dist/file-input → file-input}/FileItem.js +36 -123
  65. package/{dist/file-input → file-input}/index.d.ts +1 -1
  66. package/{dist/footer → footer}/Footer.js +53 -151
  67. package/footer/Icons.js +77 -0
  68. package/footer/index.d.ts +25 -0
  69. package/{dist/header → header}/Header.js +62 -170
  70. package/{dist/header → header}/Icons.js +11 -11
  71. package/header/index.d.ts +25 -0
  72. package/{dist/heading → heading}/Heading.js +30 -72
  73. package/heading/index.d.ts +17 -0
  74. package/input-text/Icons.js +22 -0
  75. package/{dist/input-text → input-text}/InputText.js +37 -133
  76. package/input-text/index.d.ts +36 -0
  77. package/{dist/layout → layout}/ApplicationLayout.js +35 -131
  78. package/layout/Icons.js +55 -0
  79. package/{dist/link → link}/Link.js +18 -72
  80. package/link/index.d.ts +23 -0
  81. package/main.d.ts +44 -0
  82. package/{dist/main.js → main.js} +93 -97
  83. package/{dist/number-input → number-input}/NumberInput.js +5 -13
  84. package/{dist/number-input → number-input}/NumberInputContext.js +1 -1
  85. package/{dist/number-input → number-input}/index.d.ts +0 -0
  86. package/package.json +32 -25
  87. package/paginator/Icons.js +66 -0
  88. package/paginator/Paginator.d.ts +4 -0
  89. package/paginator/Paginator.js +198 -0
  90. package/paginator/types.d.ts +38 -0
  91. package/paginator/types.js +5 -0
  92. package/{dist/password-input → password-input}/PasswordInput.js +23 -22
  93. package/password-input/PasswordInput.stories.jsx +131 -0
  94. package/{dist/password-input → password-input}/index.d.ts +0 -0
  95. package/progress-bar/ProgressBar.d.ts +4 -0
  96. package/{dist/progress-bar → progress-bar}/ProgressBar.js +19 -91
  97. package/progress-bar/types.d.ts +37 -0
  98. package/progress-bar/types.js +5 -0
  99. package/radio/Radio.d.ts +4 -0
  100. package/{dist/radio → radio}/Radio.js +15 -50
  101. package/radio/types.d.ts +54 -0
  102. package/radio/types.js +5 -0
  103. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +35 -119
  104. package/resultsetTable/index.d.ts +19 -0
  105. package/select/Select.js +865 -0
  106. package/select/index.d.ts +131 -0
  107. package/{dist/sidenav → sidenav}/Sidenav.js +15 -49
  108. package/sidenav/index.d.ts +13 -0
  109. package/slider/Slider.d.ts +4 -0
  110. package/{dist/slider → slider}/Slider.js +48 -136
  111. package/slider/types.d.ts +83 -0
  112. package/slider/types.js +5 -0
  113. package/{dist/spinner → spinner}/Spinner.js +38 -152
  114. package/spinner/index.d.ts +17 -0
  115. package/switch/Switch.d.ts +4 -0
  116. package/{dist/switch → switch}/Switch.js +26 -69
  117. package/switch/types.d.ts +58 -0
  118. package/switch/types.js +5 -0
  119. package/{dist/table → table}/Table.js +10 -24
  120. package/table/index.d.ts +13 -0
  121. package/{dist/tabs → tabs}/Tabs.js +26 -110
  122. package/tabs/index.d.ts +19 -0
  123. package/{dist/tag → tag}/Tag.js +22 -96
  124. package/tag/index.d.ts +24 -0
  125. package/{dist/text-input → text-input}/TextInput.js +244 -390
  126. package/{dist/text-input → text-input}/index.d.ts +0 -0
  127. package/{dist/textarea → textarea}/Textarea.js +20 -72
  128. package/textarea/Textarea.stories.jsx +135 -0
  129. package/{dist/textarea → textarea}/index.d.ts +0 -0
  130. package/{dist/toggle → toggle}/Toggle.js +15 -49
  131. package/toggle/index.d.ts +21 -0
  132. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +23 -107
  133. package/toggle-group/index.d.ts +21 -0
  134. package/{dist/upload → upload}/Upload.js +14 -18
  135. package/upload/buttons-upload/ButtonsUpload.js +111 -0
  136. package/upload/buttons-upload/Icons.js +40 -0
  137. package/upload/dragAndDropArea/DragAndDropArea.js +225 -0
  138. package/upload/dragAndDropArea/Icons.js +39 -0
  139. package/upload/file-upload/FileToUpload.js +115 -0
  140. package/upload/file-upload/Icons.js +66 -0
  141. package/{dist/upload → upload}/files-upload/FilesToUpload.js +12 -26
  142. package/upload/index.d.ts +15 -0
  143. package/upload/transaction/Icons.js +160 -0
  144. package/upload/transaction/Transaction.js +104 -0
  145. package/upload/transactions/Transactions.js +94 -0
  146. package/{dist/useTheme.js → useTheme.js} +0 -0
  147. package/wizard/Icons.js +65 -0
  148. package/{dist/wizard → wizard}/Wizard.js +32 -172
  149. package/wizard/index.d.ts +18 -0
  150. package/README.md +0 -66
  151. package/babel.config.js +0 -8
  152. package/dist/BackgroundColorContext.js +0 -46
  153. package/dist/ThemeContext.js +0 -248
  154. package/dist/accordion-group/AccordionGroup.js +0 -186
  155. package/dist/alert/index.d.ts +0 -51
  156. package/dist/badge/Badge.js +0 -63
  157. package/dist/checkbox/Checkbox.stories.js +0 -144
  158. package/dist/checkbox/readme.md +0 -116
  159. package/dist/date/Date.stories.js +0 -205
  160. package/dist/date/readme.md +0 -73
  161. package/dist/date-input/index.d.ts +0 -95
  162. package/dist/footer/dxc_logo.svg +0 -15
  163. package/dist/footer/readme.md +0 -41
  164. package/dist/input-text/error.svg +0 -1
  165. package/dist/input-text/readme.md +0 -91
  166. package/dist/layout/facebook.svg +0 -45
  167. package/dist/layout/linkedin.svg +0 -50
  168. package/dist/layout/twitter.svg +0 -53
  169. package/dist/link/readme.md +0 -51
  170. package/dist/main.d.ts +0 -8
  171. package/dist/new-select/NewSelect.js +0 -836
  172. package/dist/new-select/index.d.ts +0 -53
  173. package/dist/paginator/Paginator.js +0 -289
  174. package/dist/paginator/images/next.svg +0 -3
  175. package/dist/paginator/images/nextPage.svg +0 -3
  176. package/dist/paginator/images/previous.svg +0 -3
  177. package/dist/paginator/images/previousPage.svg +0 -3
  178. package/dist/paginator/readme.md +0 -50
  179. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  180. package/dist/progress-bar/readme.md +0 -63
  181. package/dist/radio/Radio.stories.js +0 -166
  182. package/dist/radio/readme.md +0 -70
  183. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  184. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  185. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  186. package/dist/slider/readme.md +0 -64
  187. package/dist/spinner/Spinner.stories.js +0 -183
  188. package/dist/spinner/readme.md +0 -65
  189. package/dist/switch/Switch.stories.js +0 -134
  190. package/dist/switch/readme.md +0 -133
  191. package/dist/tabs/Tabs.stories.js +0 -130
  192. package/dist/tabs/readme.md +0 -78
  193. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  194. package/dist/tabs-for-sections/readme.md +0 -78
  195. package/dist/toggle/Toggle.stories.js +0 -297
  196. package/dist/toggle/readme.md +0 -80
  197. package/dist/upload/Upload.stories.js +0 -72
  198. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  199. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  200. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  201. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  202. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  203. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  204. package/dist/upload/file-upload/FileToUpload.js +0 -184
  205. package/dist/upload/file-upload/audio-icon.svg +0 -4
  206. package/dist/upload/file-upload/close.svg +0 -4
  207. package/dist/upload/file-upload/file-icon.svg +0 -4
  208. package/dist/upload/file-upload/video-icon.svg +0 -4
  209. package/dist/upload/readme.md +0 -37
  210. package/dist/upload/transaction/Transaction.js +0 -175
  211. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  212. package/dist/upload/transaction/audio-icon.svg +0 -4
  213. package/dist/upload/transaction/error-icon.svg +0 -4
  214. package/dist/upload/transaction/file-icon-err.svg +0 -4
  215. package/dist/upload/transaction/file-icon.svg +0 -4
  216. package/dist/upload/transaction/image-icon-err.svg +0 -4
  217. package/dist/upload/transaction/image-icon.svg +0 -4
  218. package/dist/upload/transaction/success-icon.svg +0 -4
  219. package/dist/upload/transaction/video-icon-err.svg +0 -4
  220. package/dist/upload/transaction/video-icon.svg +0 -4
  221. package/dist/upload/transactions/Transactions.js +0 -138
  222. package/dist/wizard/invalid_icon.svg +0 -5
  223. package/dist/wizard/valid_icon.svg +0 -5
  224. package/dist/wizard/validation-wrong.svg +0 -6
  225. package/test/Accordion.test.js +0 -33
  226. package/test/AccordionGroup.test.js +0 -125
  227. package/test/Alert.test.js +0 -53
  228. package/test/Box.test.js +0 -10
  229. package/test/Button.test.js +0 -18
  230. package/test/Card.test.js +0 -30
  231. package/test/Checkbox.test.js +0 -45
  232. package/test/Chip.test.js +0 -25
  233. package/test/Date.test.js +0 -397
  234. package/test/DateInput.test.js +0 -242
  235. package/test/Dialog.test.js +0 -23
  236. package/test/Dropdown.test.js +0 -145
  237. package/test/FileInput.test.js +0 -201
  238. package/test/Footer.test.js +0 -99
  239. package/test/Header.test.js +0 -34
  240. package/test/Heading.test.js +0 -35
  241. package/test/InputText.test.js +0 -248
  242. package/test/Link.test.js +0 -43
  243. package/test/NumberInput.test.js +0 -259
  244. package/test/Paginator.test.js +0 -177
  245. package/test/PasswordInput.test.js +0 -83
  246. package/test/ProgressBar.test.js +0 -35
  247. package/test/Radio.test.js +0 -37
  248. package/test/ResultsetTable.test.js +0 -329
  249. package/test/Select.test.js +0 -212
  250. package/test/Sidenav.test.js +0 -45
  251. package/test/Slider.test.js +0 -82
  252. package/test/Spinner.test.js +0 -32
  253. package/test/Switch.test.js +0 -45
  254. package/test/Table.test.js +0 -36
  255. package/test/Tabs.test.js +0 -109
  256. package/test/TabsForSections.test.js +0 -34
  257. package/test/Tag.test.js +0 -32
  258. package/test/TextInput.test.js +0 -732
  259. package/test/Textarea.test.js +0 -193
  260. package/test/ToggleGroup.test.js +0 -85
  261. package/test/Upload.test.js +0 -60
  262. package/test/V3TextArea.test.js +0 -51
  263. package/test/Wizard.test.js +0 -130
  264. package/test/mocks/pngMock.js +0 -1
  265. package/test/mocks/svgMock.js +0 -1
@@ -1,144 +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 _Checkbox = _interopRequireDefault(require("./Checkbox"));
18
-
19
- var onChange = (0, _addonActions.action)("onChange");
20
-
21
- onChange.toString = function () {
22
- return "onChangeHandler";
23
- };
24
-
25
- (0, _react2.storiesOf)("Form Components|Checkbox", 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(_Checkbox["default"], {
27
- checked: false,
28
- theme: "light",
29
- value: "TestValue",
30
- label: "Checkbox",
31
- labelPosition: "after",
32
- onChange: onChange
33
- }), _react["default"].createElement(_Checkbox["default"], {
34
- checked: false,
35
- theme: "light",
36
- value: "TestValue",
37
- label: "Label before",
38
- labelPosition: "before",
39
- onChange: onChange
40
- }), _react["default"].createElement(_Checkbox["default"], {
41
- checked: false,
42
- theme: "light",
43
- value: "TestValue",
44
- label: "Label after",
45
- labelPosition: "after",
46
- onChange: onChange,
47
- required: true
48
- }), _react["default"].createElement(_Checkbox["default"], {
49
- checked: false,
50
- disabled: true,
51
- theme: "light",
52
- value: "TestValue",
53
- label: "Disabled unchecked",
54
- labelPosition: "after",
55
- onChange: onChange
56
- }), _react["default"].createElement(_Checkbox["default"], {
57
- checked: true,
58
- disabled: true,
59
- theme: "light",
60
- value: "TestValue",
61
- label: "Disabled checked",
62
- labelPosition: "after",
63
- onChange: onChange
64
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
65
- style: {
66
- background: "black"
67
- }
68
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
69
- checked: false,
70
- theme: "dark",
71
- value: "TestValue",
72
- label: "Checkbox",
73
- labelPosition: "after",
74
- onChange: onChange,
75
- required: true
76
- }), _react["default"].createElement(_Checkbox["default"], {
77
- checked: false,
78
- theme: "dark",
79
- value: "TestValue",
80
- label: "Label before",
81
- labelPosition: "before",
82
- onChange: onChange
83
- }), _react["default"].createElement(_Checkbox["default"], {
84
- checked: false,
85
- theme: "dark",
86
- value: "TestValue",
87
- label: "Label after",
88
- labelPosition: "after",
89
- onChange: onChange
90
- }), _react["default"].createElement(_Checkbox["default"], {
91
- checked: false,
92
- disabled: true,
93
- theme: "dark",
94
- value: "TestValue",
95
- label: "Disabled unchecked",
96
- labelPosition: "after",
97
- onChange: onChange
98
- }), _react["default"].createElement(_Checkbox["default"], {
99
- checked: true,
100
- disabled: true,
101
- theme: "dark",
102
- value: "TestValue",
103
- label: "Disabled checked",
104
- labelPosition: "after",
105
- onChange: onChange
106
- }))));
107
- }, {
108
- notes: {
109
- markdown: _readme["default"]
110
- }
111
- });
112
-
113
- var knobProps = function knobProps() {
114
- return {
115
- label: (0, _addonKnobs.text)("Label", "Test Checkbox"),
116
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
117
- labelPosition: (0, _addonKnobs.select)("Label position", {
118
- before: "before",
119
- after: "after"
120
- }, "before"),
121
- theme: (0, _addonKnobs.select)("Theme", {
122
- light: "light",
123
- dark: "dark"
124
- }, "light"),
125
- disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
126
- required: (0, _addonKnobs["boolean"])("Required", false)
127
- };
128
- };
129
-
130
- (0, _react2.storiesOf)("Form Components|Checkbox", module).add("Knobs example", function () {
131
- var props = knobProps();
132
- return _react["default"].createElement("div", {
133
- style: {
134
- background: props.theme === "dark" && "black" || "transparent"
135
- }
136
- }, _react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({}, props, {
137
- value: "TestValue",
138
- onChange: onChange
139
- })));
140
- }, {
141
- notes: {
142
- markdown: _readme["default"]
143
- }
144
- });
@@ -1,116 +0,0 @@
1
- # DXC Checkbox Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcCheckbox } from "@dxc-technology/halstack-react";
7
-
8
- <DxcCheckbox onChange={handleNewValue} label="Test Checkbox" checked={checked} />;
9
- ```
10
-
11
- ## Props
12
-
13
- <table>
14
- <tr style="background-color: grey">
15
- <td>Name</td>
16
- <td>Default</td>
17
- <td>Description</td>
18
- </tr>
19
- <tr>
20
- <td>checked: boolean</td>
21
- <td><code>false</code></td>
22
- <td>If true, the component is checked.</td>
23
- </tr>
24
- <tr>
25
- <td>value: any</td>
26
- <td></td>
27
- <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 checkbox is checked </td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td></td>
32
- <td>Text to be placed next to the checkbox.</td>
33
- </tr>
34
- <tr>
35
- <td>labelPosition: 'before' | 'after'</td>
36
- <td><code>'before'</code></td>
37
- <td>Whether the label should appear after or before the checkbox.</td>
38
- </tr>
39
- <tr>
40
- <td>theme: 'light' | 'dark'</td>
41
- <td><code>'light'</code></td>
42
- <td>Uses one of the available component themes.</td>
43
- </tr>
44
- <tr>
45
- <td>name: string</td>
46
- <td></td>
47
- <td>Name attribute of the input element.</td>
48
- </tr>
49
- <tr>
50
- <td>disabled: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the component will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>required: boolean</td>
56
- <td><code>false</code></td>
57
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
58
- </tr>
59
- <tr>
60
- <td>disableRipple: boolean</td>
61
- <td><code>false</code></td>
62
- <td>If true, the ripple effect will be disabled.</td>
63
- </tr>
64
- <tr>
65
- <td>onChange: function</td>
66
- <td></td>
67
- <td>This function will be called when the user clicks the checkbox. The new value will be passed as a parameter.<br>
68
- </td>
69
- </tr>
70
- </table>
71
-
72
- ## Examples
73
-
74
- - Basic checkbox - Light theme - Enabled - Label after checkbox - With ripple
75
-
76
- ```js
77
- import React from "react";
78
- import { DxcCheckbox } from "@dxc-technology/halstack-react";
79
-
80
- class App extends React.Component {
81
- state = {
82
- isChecked: true
83
- };
84
- constructor() {
85
- super();
86
- this.handleChange = this.handleChange.bind(this);
87
- }
88
-
89
- handleChange(checked) {
90
- this.setState({
91
- isChecked: checked
92
- });
93
- }
94
-
95
- render() {
96
- return (
97
- <div>
98
- <DxcCheckbox
99
- checked={this.state.isChecked}
100
- value="Checkbox1"
101
- label="Checkbox 1"
102
- labelPosition="after"
103
- theme="light"
104
- name="Checkbox"
105
- disabled={false}
106
- disableRipple={false}
107
- onChange={event => this.handleChange(event)}
108
- />
109
- </div>
110
- );
111
- }
112
- }
113
- export default App;
114
-
115
-
116
- ```
@@ -1,205 +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 _moment = _interopRequireDefault(require("moment"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _Date = _interopRequireDefault(require("./Date"));
20
-
21
- var onChange = (0, _addonActions.action)("onChange");
22
-
23
- onChange.toString = function () {
24
- return "onChangeHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Date", module).add("Component", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("div", null, _react["default"].createElement(_Date["default"], {
29
- name: "date1",
30
- format: "dd-MM-yyyy",
31
- label: "Date",
32
- theme: "light",
33
- assistiveText: "Assistive text",
34
- onInputChange: function onInputChange(event) {
35
- return console.log(event);
36
- },
37
- onChange: onChange
38
- }), _react["default"].createElement(_Date["default"], {
39
- name: "date2",
40
- format: "dd-MM-yy",
41
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
42
- label: "Default value",
43
- theme: "light",
44
- assistiveText: "Assistive text",
45
- onInputChange: function onInputChange(event) {
46
- return console.log(event);
47
- },
48
- onChange: onChange
49
- }), _react["default"].createElement(_Date["default"], {
50
- name: "date3",
51
- format: "dd/MM/yy",
52
- label: "Invalid Date",
53
- theme: "light",
54
- assistiveText: "Assistive text",
55
- onInputChange: function onInputChange(event) {
56
- return console.log(event);
57
- },
58
- onChange: onChange,
59
- invalid: true
60
- }), _react["default"].createElement(_Date["default"], {
61
- name: "date4",
62
- format: "dd/MM/yy",
63
- label: "Disabled Date",
64
- theme: "light",
65
- assistiveText: "Assistive text",
66
- onInputChange: function onInputChange(event) {
67
- return console.log(event);
68
- },
69
- onChange: onChange,
70
- invalid: true,
71
- disabled: true
72
- }), _react["default"].createElement(_Date["default"], {
73
- name: "date5",
74
- format: "dd/MM/yy",
75
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
76
- label: "Disabled Default Date",
77
- theme: "light",
78
- assistiveText: "Assistive text",
79
- onInputChange: function onInputChange(event) {
80
- return console.log(event);
81
- },
82
- onChange: onChange,
83
- invalid: true,
84
- disabled: true
85
- }), _react["default"].createElement(_Date["default"], {
86
- name: "date6",
87
- format: "dd/MM/yy",
88
- label: "Required Date",
89
- theme: "light",
90
- assistiveText: "Assistive text",
91
- onInputChange: function onInputChange(event) {
92
- return console.log(event);
93
- },
94
- onChange: onChange,
95
- required: true
96
- })), _react["default"].createElement("div", {
97
- style: {
98
- background: "black",
99
- height: "150px"
100
- }
101
- }, _react["default"].createElement(_Date["default"], {
102
- name: "date1",
103
- format: "dd/MM/yyyy",
104
- label: "Date",
105
- theme: "dark",
106
- assistiveText: "Assistive text",
107
- onInputChange: function onInputChange(event) {
108
- return console.log(event);
109
- },
110
- onChange: onChange
111
- }), _react["default"].createElement(_Date["default"], {
112
- name: "date2",
113
- format: "dd/MM/yyyy",
114
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
115
- label: "Default value",
116
- theme: "dark",
117
- assistiveText: "Assistive text",
118
- onInputChange: function onInputChange(event) {
119
- return console.log(event);
120
- },
121
- onChange: onChange
122
- }), _react["default"].createElement(_Date["default"], {
123
- name: "date3",
124
- format: "dd/MM/yy",
125
- label: "Invalid Date",
126
- theme: "dark",
127
- assistiveText: "Assistive text",
128
- onInputChange: function onInputChange(event) {
129
- return console.log(event);
130
- },
131
- onChange: onChange,
132
- invalid: true
133
- }), _react["default"].createElement(_Date["default"], {
134
- name: "date4",
135
- format: "dd/MM/yy",
136
- label: "Disabled Date",
137
- theme: "dark",
138
- assistiveText: "Assistive text",
139
- onInputChange: function onInputChange(event) {
140
- return console.log(event);
141
- },
142
- onChange: onChange,
143
- invalid: true,
144
- disabled: true
145
- }), _react["default"].createElement(_Date["default"], {
146
- name: "date5",
147
- format: "dd/MM/yy",
148
- value: (0, _moment["default"])("03/12/1995", "DD/MM/YYYY"),
149
- label: "Disabled Default Date",
150
- theme: "dark",
151
- assistiveText: "Assistive text",
152
- onInputChange: function onInputChange(event) {
153
- return console.log(event);
154
- },
155
- onChange: onChange,
156
- invalid: true,
157
- disabled: true
158
- }), _react["default"].createElement(_Date["default"], {
159
- name: "date6",
160
- format: "dd/MM/yy",
161
- label: "Required Date",
162
- theme: "dark",
163
- assistiveText: "Assistive text",
164
- onInputChange: function onInputChange(event) {
165
- return console.log(event);
166
- },
167
- onChange: onChange,
168
- required: true
169
- })));
170
- }, {
171
- notes: {
172
- markdown: _readme["default"]
173
- }
174
- });
175
-
176
- var knobProps = function knobProps() {
177
- return {
178
- label: (0, _addonKnobs.text)("Label", "Label"),
179
- assistiveText: (0, _addonKnobs.text)("Assistive Text", "Assistive Text"),
180
- format: (0, _addonKnobs.text)("Format", "dd/MM/yyyy"),
181
- theme: (0, _addonKnobs.select)("Theme", {
182
- light: "light",
183
- dark: "dark"
184
- }, "light"),
185
- disabled: (0, _addonKnobs["boolean"])("Disabled", false),
186
- dissableRipple: (0, _addonKnobs["boolean"])("Disable Ripple", false),
187
- invalid: (0, _addonKnobs["boolean"])("Invalid", false),
188
- required: (0, _addonKnobs["boolean"])("Required", false)
189
- };
190
- };
191
-
192
- (0, _react2.storiesOf)("Form Components|Date", module).add("Knobs example", function () {
193
- var props = knobProps();
194
- return _react["default"].createElement("div", {
195
- style: {
196
- background: props.theme === "dark" && "black" || "transparent"
197
- }
198
- }, _react["default"].createElement(_Date["default"], (0, _extends2["default"])({}, props, {
199
- onChange: onChange
200
- })));
201
- }, {
202
- notes: {
203
- markdown: _readme["default"]
204
- }
205
- });
@@ -1,73 +0,0 @@
1
- # DXC Date 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>value: string</td>
13
- <td></td>
14
- <td>The value of the input element.</td>
15
- </tr>
16
- <tr>
17
- <td>format: string</td>
18
- <td></td>
19
- <td>The format in which the date value will be displayed. User must use this format when editing the input.</td>
20
- </tr>
21
- <tr>
22
- <td>label: string</td>
23
- <td></td>
24
- <td>Text to be placed next to the date component.</td>
25
- </tr>
26
- <tr>
27
- <td>theme: 'light' | 'dark'</td>
28
- <td><code>'light'</code></td>
29
- <td>Uses one of the available component themes.</td>
30
- </tr>
31
- <tr>
32
- <td>name: string</td>
33
- <td></td>
34
- <td>Name attribute of the input element.</td>
35
- </tr>
36
- <tr>
37
- <td>iconSrc: string</td>
38
- <td></td>
39
- <td>The path of an icon to replace the default calendar icon.</td>
40
- </tr>
41
- <tr>
42
- <td>disabled: boolean</td>
43
- <td><code>false</code></td>
44
- <td>If true, the component will be disabled.</td>
45
- </tr>
46
- <tr>
47
- <td>required: boolean</td>
48
- <td><code>false</code></td>
49
- <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
50
- </tr>
51
- <tr>
52
- <td>assistiveText: string</td>
53
- <td></td>
54
- <td>Assistive text to be placed at the bottom of the input.</td>
55
- </tr>
56
- <tr>
57
- <td>invalid: boolean</td>
58
- <td><code>false</code></td>
59
- <td>If true, the input will change its appearence, showing that the value is not valid.</td>
60
- </tr>
61
- <tr>
62
- <td>disableRipple: boolean</td>
63
- <td><code>false</code></td>
64
- <td>If true, the ripple effect will be disabled.</td>
65
- </tr>
66
- <tr>
67
- <td>onChange: function</td>
68
- <td></td>
69
- <td>This function will be called when the user types within the input. A string with the current value will be passed to this function and also a date object if the string typed is a valid date<br>
70
- </td>
71
- </tr>
72
- </table>
73
-
@@ -1,95 +0,0 @@
1
- type Size = "small" | "medium" | "large" | "fillParent";
2
- type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- type Margin = {
4
- top?: Space;
5
- bottom?: Space;
6
- left?: Space;
7
- right?: Space;
8
- };
9
-
10
- type Props = {
11
- /**
12
- * Text to be placed above the date.
13
- */
14
- label?: string;
15
- /**
16
- * Name attribute of the input element.
17
- */
18
- name?: string;
19
- /**
20
- * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
21
- */
22
- value?: string;
23
- /**
24
- * The format in which the date value will be displayed. User must use this format when editing the value or it will be considered as an invalid date.
25
- */
26
- format?: string;
27
- /**
28
- * Helper text to be placed above the date.
29
- */
30
- helperText?: string;
31
- /**
32
- * If true, the date format will appear as placeholder in the field.
33
- */
34
- placeholder?: boolean;
35
- /**
36
- * If true, the date input will have an action to clear the entered value.
37
- */
38
- clearable?: boolean;
39
- /**
40
- * If true, the component will be disabled.
41
- */
42
- disabled?: boolean;
43
- /**
44
- * If true, the date will be optional, showing '(Optional)'
45
- * next to the label. Otherwise, the field will be considered required and an error will be
46
- * passed as a parameter to the OnBlur and onChange functions when it has
47
- * not been filled.
48
- */
49
- optional?: boolean;
50
- /**
51
- * This function will be called when the user types within the input
52
- * element of the component. An object including the string value, the
53
- * error and the date value will be passed to this function.
54
- * If the string value is a valid date, error will
55
- * be null. Also, if the string value is not a valid date, date will be null.
56
- */
57
- onChange?: (val: { value: string; error: string; date: Date }) => void;
58
- /**
59
- * This function will be called when the input element loses the focus.
60
- * An object including the string value, the error and the date value
61
- * will be passed to this function. If the string value is a valid date, error will
62
- * be null. Also, if the string value is not a valid date, date will be null.
63
- */
64
- onBlur?: (val: { value: string; error: string; date: Date }) => void;
65
- /**
66
- * If it is defined, the component will change its appearance, showing
67
- * the error below the date input component. If it is not defined, the error
68
- * messages will be managed internally, but never displayed on its own.
69
- */
70
- error?: string;
71
- /**
72
- * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input value.
73
- * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
74
- */
75
- autocomplete?: string;
76
- /**
77
- * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
78
- * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
79
- */
80
- margin?: Space | Margin;
81
- /**
82
- * Size of the component ('medium' | 'large' | 'fillParent').
83
- */
84
- size?: Size;
85
- /**
86
- * Value of the tabindex attribute.
87
- */
88
- tabIndex?: number;
89
- /**
90
- * Reference to the component.
91
- */
92
- ref?: React.RefObject<HTMLDivElement>;
93
- };
94
-
95
- export default function DxcDateInput(props: Props): JSX.Element;
@@ -1,15 +0,0 @@
1
- <svg id="g10" xmlns="http://www.w3.org/2000/svg" width="280.781" height="32" viewBox="0 0 280.781 32">
2
- <g id="g12">
3
- <path id="path14" d="M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5" transform="translate(-68.528 65.45)" fill="#fff"/>
4
- <path id="path16" d="M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96" transform="translate(-77.56 65.45)" fill="#fff"/>
5
- <path id="path18" d="M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813" transform="translate(-86.019 65.583)" fill="#fff"/>
6
- <path id="path20" d="M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594" transform="translate(-95.903 65.45)" fill="#fff"/>
7
- <path id="path22" d="M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058" transform="translate(-105.869 65.45)" fill="#fff"/>
8
- <path id="path24" d="M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145" transform="translate(-115.631 65.583)" fill="#fff"/>
9
- <path id="path26" d="M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786" transform="translate(-126.654 65.45)" fill="#fff"/>
10
- <path id="path28" d="M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145" transform="translate(-135.016 65.583)" fill="#fff"/>
11
- <path id="path30" d="M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5" transform="translate(-145.284 65.583)" fill="#fff"/>
12
- <path id="path32" d="M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46" transform="translate(-154.162 65.45)" fill="#fff"/>
13
- <path id="path34" d="M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892" transform="translate(-21.08 69.298)" fill="#fff"/>
14
- </g>
15
- </svg>