@dxc-technology/halstack-react 3.4.1 → 4.0.0

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 (233) hide show
  1. package/{dist/BackgroundColorContext.js → BackgroundColorContext.js} +0 -0
  2. package/{dist/ThemeContext.js → ThemeContext.js} +74 -64
  3. package/{dist/select/Select.js → V3Select/V3Select.js} +127 -163
  4. package/V3Select/index.d.ts +27 -0
  5. package/{dist/textarea/Textarea.js → V3Textarea/V3Textarea.js} +4 -4
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +0 -0
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +0 -0
  10. package/accordion-group/index.d.ts +16 -0
  11. package/{dist/alert → alert}/Alert.js +6 -6
  12. package/alert/index.d.ts +51 -0
  13. package/{dist/badge → badge}/Badge.js +0 -0
  14. package/{dist/box → box}/Box.js +0 -0
  15. package/box/index.d.ts +25 -0
  16. package/{dist/button → button}/Button.js +3 -3
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +0 -0
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +4 -5
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +0 -0
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/{dist/common → common}/utils.js +0 -0
  38. package/{dist/common → common}/variables.js +344 -138
  39. package/{dist/date → date}/Date.js +4 -6
  40. package/date/index.d.ts +27 -0
  41. package/{dist/new-date/NewDate.js → date-input/DateInput.js} +69 -72
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +0 -0
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +0 -0
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +44 -18
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +122 -55
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/{dist/heading → heading}/Heading.js +12 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +7 -9
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +5 -9
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +4 -8
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +37 -29
  67. package/{dist/number/Number.js → number-input/NumberInput.js} +9 -11
  68. package/{dist/number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +21 -16
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +53 -37
  73. package/paginator/index.d.ts +20 -0
  74. package/{dist/password/Password.js → password-input/PasswordInput.js} +17 -14
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +1 -1
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +0 -0
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +1 -1
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +6 -4
  85. package/sidenav/index.d.ts +13 -0
  86. package/{dist/slider → slider}/Slider.js +104 -19
  87. package/slider/index.d.ts +29 -0
  88. package/{dist/spinner → spinner}/Spinner.js +0 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +0 -0
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +0 -0
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +0 -0
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +26 -32
  97. package/tag/index.d.ts +24 -0
  98. package/{dist/new-input-text/NewInputText.js → text-input/TextInput.js} +343 -312
  99. package/text-input/index.d.ts +135 -0
  100. package/{dist/new-textarea/NewTextarea.js → textarea/Textarea.js} +68 -45
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/{dist/toggle-group → toggle-group}/ToggleGroup.js +132 -28
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +0 -0
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +7 -11
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +14 -14
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +26 -21
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +0 -0
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +11 -38
  117. package/{dist/upload → upload}/transactions/Transactions.js +0 -0
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +3 -9
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/checkbox/Checkbox.stories.js +0 -144
  125. package/dist/checkbox/readme.md +0 -116
  126. package/dist/date/Date.stories.js +0 -205
  127. package/dist/date/readme.md +0 -73
  128. package/dist/footer/Footer.stories.js +0 -94
  129. package/dist/footer/dxc_logo.svg +0 -15
  130. package/dist/footer/readme.md +0 -41
  131. package/dist/header/Header.stories.js +0 -176
  132. package/dist/header/close_icon.svg +0 -1
  133. package/dist/header/dxc_logo_black.svg +0 -8
  134. package/dist/header/hamb_menu_black.svg +0 -1
  135. package/dist/header/hamb_menu_white.svg +0 -1
  136. package/dist/header/readme.md +0 -33
  137. package/dist/input-text/InputText.stories.js +0 -209
  138. package/dist/input-text/error.svg +0 -1
  139. package/dist/input-text/readme.md +0 -91
  140. package/dist/layout/facebook.svg +0 -45
  141. package/dist/layout/linkedin.svg +0 -50
  142. package/dist/layout/twitter.svg +0 -53
  143. package/dist/link/readme.md +0 -51
  144. package/dist/paginator/images/next.svg +0 -3
  145. package/dist/paginator/images/nextPage.svg +0 -3
  146. package/dist/paginator/images/previous.svg +0 -3
  147. package/dist/paginator/images/previousPage.svg +0 -3
  148. package/dist/paginator/readme.md +0 -50
  149. package/dist/password/styles.css +0 -3
  150. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  151. package/dist/progress-bar/readme.md +0 -63
  152. package/dist/radio/Radio.stories.js +0 -166
  153. package/dist/radio/readme.md +0 -70
  154. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  155. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  156. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  157. package/dist/select/Select.stories.js +0 -235
  158. package/dist/select/readme.md +0 -72
  159. package/dist/slider/Slider.stories.js +0 -241
  160. package/dist/slider/readme.md +0 -64
  161. package/dist/spinner/Spinner.stories.js +0 -183
  162. package/dist/spinner/readme.md +0 -65
  163. package/dist/switch/Switch.stories.js +0 -134
  164. package/dist/switch/readme.md +0 -133
  165. package/dist/tabs/Tabs.stories.js +0 -130
  166. package/dist/tabs/readme.md +0 -78
  167. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  168. package/dist/tabs-for-sections/readme.md +0 -78
  169. package/dist/toggle/Toggle.stories.js +0 -297
  170. package/dist/toggle/readme.md +0 -80
  171. package/dist/upload/Upload.stories.js +0 -72
  172. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  173. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  174. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  175. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  176. package/dist/upload/file-upload/audio-icon.svg +0 -4
  177. package/dist/upload/file-upload/close.svg +0 -4
  178. package/dist/upload/file-upload/file-icon.svg +0 -4
  179. package/dist/upload/file-upload/video-icon.svg +0 -4
  180. package/dist/upload/readme.md +0 -37
  181. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  182. package/dist/upload/transaction/audio-icon.svg +0 -4
  183. package/dist/upload/transaction/error-icon.svg +0 -4
  184. package/dist/upload/transaction/file-icon-err.svg +0 -4
  185. package/dist/upload/transaction/file-icon.svg +0 -4
  186. package/dist/upload/transaction/image-icon-err.svg +0 -4
  187. package/dist/upload/transaction/image-icon.svg +0 -4
  188. package/dist/upload/transaction/success-icon.svg +0 -4
  189. package/dist/upload/transaction/video-icon-err.svg +0 -4
  190. package/dist/upload/transaction/video-icon.svg +0 -4
  191. package/dist/wizard/invalid_icon.svg +0 -5
  192. package/dist/wizard/valid_icon.svg +0 -5
  193. package/dist/wizard/validation-wrong.svg +0 -6
  194. package/test/Accordion.test.js +0 -33
  195. package/test/AccordionGroup.test.js +0 -125
  196. package/test/Alert.test.js +0 -53
  197. package/test/Box.test.js +0 -10
  198. package/test/Button.test.js +0 -18
  199. package/test/Card.test.js +0 -30
  200. package/test/Checkbox.test.js +0 -45
  201. package/test/Chip.test.js +0 -25
  202. package/test/Date.test.js +0 -393
  203. package/test/Dialog.test.js +0 -23
  204. package/test/Dropdown.test.js +0 -145
  205. package/test/Footer.test.js +0 -99
  206. package/test/Header.test.js +0 -39
  207. package/test/Heading.test.js +0 -35
  208. package/test/InputText.test.js +0 -240
  209. package/test/Link.test.js +0 -43
  210. package/test/NewDate.test.js +0 -203
  211. package/test/NewInputText.test.js +0 -817
  212. package/test/NewTextarea.test.js +0 -201
  213. package/test/Number.test.js +0 -241
  214. package/test/Paginator.test.js +0 -177
  215. package/test/Password.test.js +0 -76
  216. package/test/ProgressBar.test.js +0 -35
  217. package/test/Radio.test.js +0 -37
  218. package/test/ResultsetTable.test.js +0 -330
  219. package/test/Select.test.js +0 -189
  220. package/test/Sidenav.test.js +0 -45
  221. package/test/Slider.test.js +0 -82
  222. package/test/Spinner.test.js +0 -32
  223. package/test/Switch.test.js +0 -45
  224. package/test/Table.test.js +0 -36
  225. package/test/Tabs.test.js +0 -109
  226. package/test/TabsForSections.test.js +0 -34
  227. package/test/Tag.test.js +0 -32
  228. package/test/TextArea.test.js +0 -52
  229. package/test/ToggleGroup.test.js +0 -81
  230. package/test/Upload.test.js +0 -60
  231. package/test/Wizard.test.js +0 -130
  232. package/test/mocks/pngMock.js +0 -1
  233. 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,94 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _react = _interopRequireDefault(require("react"));
6
-
7
- var _react2 = require("@storybook/react");
8
-
9
- var _addonActions = require("@storybook/addon-actions");
10
-
11
- require("../common/OpenSans.css");
12
-
13
- var _addonKnobs = require("@storybook/addon-knobs");
14
-
15
- var _linkedin = _interopRequireDefault(require("../../.storybook/public/linkedin.svg"));
16
-
17
- var _facebook = _interopRequireDefault(require("../../.storybook/public/facebook.svg"));
18
-
19
- var _twitter = _interopRequireDefault(require("../../.storybook/public/twitter.svg"));
20
-
21
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
22
-
23
- var _readme = _interopRequireDefault(require("./readme.md"));
24
-
25
- var _Footer = _interopRequireDefault(require("./Footer"));
26
-
27
- var social = [{
28
- href: "https://www.linkedin.com/company/dxctechnology",
29
- logoSrc: _linkedin["default"]
30
- }, {
31
- href: "https://twitter.com/dxctechnology",
32
- logoSrc: _twitter["default"]
33
- }, {
34
- href: "https://www.facebook.com/DXCTechnology/",
35
- logoSrc: _facebook["default"]
36
- }];
37
- var bottom = [{
38
- href: "https://www.linkedin.com/company/dxctechnology",
39
- text: "Linkedin"
40
- }, {
41
- href: "https://twitter.com/dxctechnology",
42
- text: "Twitter"
43
- }, {
44
- href: "https://www.facebook.com/DXCTechnology/",
45
- text: "Facebook"
46
- }];
47
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Component", function () {
48
- return _react["default"].createElement("div", null, _react["default"].createElement(_Footer["default"], {
49
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
50
- bottomLinks: bottom,
51
- socialLinks: social
52
- }), _react["default"].createElement("div", {
53
- style: {
54
- marginTop: "20px"
55
- }
56
- }, _react["default"].createElement(_Footer["default"], {
57
- copyright: "\xA9 DXC Technology 2019. All rights reserved.",
58
- bottomLinks: bottom,
59
- socialLinks: social
60
- }, _react["default"].createElement(_InputText["default"], {
61
- assistiveText: "text input component",
62
- label: "Footer Child",
63
- theme: "dark"
64
- }), _react["default"].createElement(_InputText["default"], {
65
- assistiveText: "text input component",
66
- label: "Footer Child",
67
- theme: "dark"
68
- }), _react["default"].createElement(_InputText["default"], {
69
- assistiveText: "text input component",
70
- label: "Footer Child",
71
- theme: "dark"
72
- }), _react["default"].createElement(_InputText["default"], {
73
- assistiveText: "text input component",
74
- label: "Footer Child",
75
- theme: "dark"
76
- }))));
77
- }, {
78
- notes: {
79
- markdown: _readme["default"]
80
- }
81
- });
82
-
83
- var knobProps = function knobProps() {
84
- return {};
85
- };
86
-
87
- (0, _react2.storiesOf)("Form Components|Footer", module).add("Knobs example", function () {
88
- var props = knobProps();
89
- return _react["default"].createElement("div", null);
90
- }, {
91
- notes: {
92
- markdown: _readme["default"]
93
- }
94
- });
@@ -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>