@dxc-technology/halstack-react 0.0.0-c24450b → 0.0.0-c6243ef

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 (129) 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/accordion/Accordion.js +170 -81
  5. package/dist/accordion-group/AccordionGroup.js +186 -0
  6. package/dist/alert/Alert.js +184 -83
  7. package/dist/alert/index.d.ts +51 -0
  8. package/dist/badge/Badge.js +63 -0
  9. package/dist/box/Box.js +31 -23
  10. package/dist/button/Button.js +82 -27
  11. package/dist/card/Card.js +72 -35
  12. package/dist/checkbox/Checkbox.js +108 -32
  13. package/dist/chip/Chip.js +129 -35
  14. package/dist/common/RequiredComponent.js +2 -8
  15. package/dist/common/utils.js +2 -22
  16. package/dist/common/variables.js +1457 -210
  17. package/dist/date/Date.js +81 -59
  18. package/dist/dialog/Dialog.js +58 -37
  19. package/dist/dropdown/Dropdown.js +229 -68
  20. package/dist/file-input/FileInput.js +644 -0
  21. package/dist/file-input/FileItem.js +280 -0
  22. package/dist/file-input/index.d.ts +81 -0
  23. package/dist/footer/Footer.js +87 -38
  24. package/dist/footer/dxc_logo.svg +15 -0
  25. package/dist/footer/readme.md +1 -1
  26. package/dist/header/Header.js +121 -72
  27. package/dist/header/dxc_logo_black.svg +8 -0
  28. package/dist/header/readme.md +1 -1
  29. package/dist/heading/Heading.js +81 -22
  30. package/dist/input-text/InputText.js +289 -101
  31. package/dist/layout/ApplicationLayout.js +331 -0
  32. package/dist/layout/facebook.svg +45 -0
  33. package/dist/layout/linkedin.svg +50 -0
  34. package/dist/layout/twitter.svg +53 -0
  35. package/dist/link/Link.js +136 -35
  36. package/dist/main.d.ts +8 -0
  37. package/dist/main.js +105 -1
  38. package/dist/new-date/NewDate.js +400 -0
  39. package/dist/new-date/index.d.ts +95 -0
  40. package/dist/new-select/NewSelect.js +836 -0
  41. package/dist/new-select/index.d.ts +53 -0
  42. package/dist/new-textarea/NewTextarea.js +369 -0
  43. package/dist/new-textarea/index.d.ts +117 -0
  44. package/dist/number/Number.js +136 -0
  45. package/dist/number/NumberContext.js +16 -0
  46. package/dist/number/index.d.ts +113 -0
  47. package/dist/paginator/Paginator.js +160 -49
  48. package/dist/password-input/PasswordInput.js +198 -0
  49. package/dist/password-input/index.d.ts +94 -0
  50. package/dist/progress-bar/ProgressBar.js +97 -44
  51. package/dist/radio/Radio.js +39 -21
  52. package/dist/resultsetTable/ResultsetTable.js +93 -69
  53. package/dist/select/Select.js +250 -143
  54. package/dist/sidenav/Sidenav.js +85 -143
  55. package/dist/slider/Slider.js +206 -70
  56. package/dist/spinner/Spinner.js +249 -64
  57. package/dist/switch/Switch.js +51 -26
  58. package/dist/table/Table.js +63 -15
  59. package/dist/tabs/Tabs.js +208 -35
  60. package/dist/tabs-for-sections/TabsForSections.js +1 -16
  61. package/dist/tag/Tag.js +100 -35
  62. package/dist/text-input/TextInput.js +971 -0
  63. package/dist/text-input/index.d.ts +135 -0
  64. package/dist/textarea/Textarea.js +81 -43
  65. package/dist/toggle/Toggle.js +16 -19
  66. package/dist/toggle-group/ToggleGroup.js +327 -0
  67. package/dist/upload/Upload.js +13 -8
  68. package/dist/upload/buttons-upload/ButtonsUpload.js +34 -20
  69. package/dist/upload/dragAndDropArea/DragAndDropArea.js +78 -31
  70. package/dist/upload/file-upload/FileToUpload.js +50 -24
  71. package/dist/upload/files-upload/FilesToUpload.js +16 -16
  72. package/dist/upload/transaction/Transaction.js +44 -24
  73. package/dist/upload/transactions/Transactions.js +38 -20
  74. package/dist/useTheme.js +22 -0
  75. package/dist/wizard/Wizard.js +142 -51
  76. package/dist/wizard/invalid_icon.svg +4 -5
  77. package/dist/wizard/valid_icon.svg +4 -5
  78. package/package.json +14 -6
  79. package/test/AccordionGroup.test.js +125 -0
  80. package/test/Date.test.js +13 -13
  81. package/test/Dropdown.test.js +19 -4
  82. package/test/FileInput.test.js +201 -0
  83. package/test/InputText.test.js +30 -26
  84. package/test/Link.test.js +25 -7
  85. package/test/NewDate.test.js +232 -0
  86. package/test/NewTextarea.test.js +195 -0
  87. package/test/Number.test.js +257 -0
  88. package/test/Paginator.test.js +72 -60
  89. package/test/PasswordInput.test.js +83 -0
  90. package/test/ResultsetTable.test.js +66 -19
  91. package/test/Select.test.js +55 -34
  92. package/test/Sidenav.test.js +22 -64
  93. package/test/Slider.test.js +17 -0
  94. package/test/Spinner.test.js +5 -0
  95. package/test/Tabs.test.js +21 -0
  96. package/test/TextInput.test.js +732 -0
  97. package/test/ToggleGroup.test.js +85 -0
  98. package/dist/accordion/Accordion.stories.js +0 -207
  99. package/dist/accordion/readme.md +0 -96
  100. package/dist/alert/Alert.stories.js +0 -158
  101. package/dist/alert/close.svg +0 -4
  102. package/dist/alert/error.svg +0 -4
  103. package/dist/alert/info.svg +0 -4
  104. package/dist/alert/readme.md +0 -43
  105. package/dist/alert/success.svg +0 -4
  106. package/dist/alert/warning.svg +0 -4
  107. package/dist/button/Button.stories.js +0 -224
  108. package/dist/button/readme.md +0 -93
  109. package/dist/common/services/example-service.js +0 -10
  110. package/dist/common/services/example-service.test.js +0 -12
  111. package/dist/date/calendar.svg +0 -1
  112. package/dist/date/calendar_dark.svg +0 -1
  113. package/dist/dialog/Dialog.stories.js +0 -217
  114. package/dist/dialog/readme.md +0 -32
  115. package/dist/dropdown/Dropdown.stories.js +0 -249
  116. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  117. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  118. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  119. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  120. package/dist/dropdown/readme.md +0 -69
  121. package/dist/footer/Footer.stories.js +0 -94
  122. package/dist/footer/dxc_logo_wht.png +0 -0
  123. package/dist/header/dxc_logo_black.png +0 -0
  124. package/dist/header/dxc_logo_white.png +0 -0
  125. package/dist/input-text/InputText.stories.js +0 -209
  126. package/dist/select/Select.stories.js +0 -235
  127. package/dist/select/readme.md +0 -72
  128. package/dist/sidenav/arrow_icon.svg +0 -3
  129. package/test/Toggle.test.js +0 -43
@@ -1,224 +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 _run_icon_black = _interopRequireDefault(require("../../.storybook/public/run_icon_black.png"));
16
-
17
- var _readme = _interopRequireDefault(require("./readme.md"));
18
-
19
- var _Button = _interopRequireDefault(require("./Button"));
20
-
21
- var onClick = (0, _addonActions.action)("onClick");
22
-
23
- onClick.toString = function () {
24
- return "onClickHandler";
25
- };
26
-
27
- (0, _react2.storiesOf)("Form Components|Button", module).add("Types", function () {
28
- return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
29
- mode: "basic",
30
- theme: "light",
31
- label: "Basic Button",
32
- onClick: onClick
33
- }), _react["default"].createElement(_Button["default"], {
34
- mode: "raised",
35
- theme: "light",
36
- label: "Raised Button",
37
- onClick: onClick
38
- }), _react["default"].createElement(_Button["default"], {
39
- mode: "flat",
40
- theme: "light",
41
- label: "Flat Button",
42
- onClick: onClick
43
- }), _react["default"].createElement(_Button["default"], {
44
- mode: "outlined",
45
- theme: "light",
46
- label: "Outlined Button",
47
- onClick: onClick
48
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
49
- disabled: true,
50
- mode: "basic",
51
- theme: "light",
52
- label: "Basic Button",
53
- onClick: onClick
54
- }), _react["default"].createElement(_Button["default"], {
55
- disabled: true,
56
- mode: "raised",
57
- theme: "light",
58
- label: "Raised Button",
59
- onClick: onClick
60
- }), _react["default"].createElement(_Button["default"], {
61
- disabled: true,
62
- mode: "flat",
63
- theme: "light",
64
- label: "Flat Button",
65
- onClick: onClick
66
- }), _react["default"].createElement(_Button["default"], {
67
- disabled: true,
68
- mode: "outlined",
69
- theme: "light",
70
- label: "Outlined Button",
71
- onClick: onClick
72
- })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
73
- style: {
74
- background: "black"
75
- }
76
- }, _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
77
- mode: "basic",
78
- theme: "dark",
79
- label: "Basic Button",
80
- onClick: onClick
81
- }), _react["default"].createElement(_Button["default"], {
82
- mode: "raised",
83
- theme: "dark",
84
- label: "Raised Button",
85
- onClick: onClick
86
- }), _react["default"].createElement(_Button["default"], {
87
- mode: "flat",
88
- theme: "dark",
89
- label: "Flat Button",
90
- onClick: onClick
91
- }), _react["default"].createElement(_Button["default"], {
92
- mode: "outlined",
93
- theme: "dark",
94
- label: "Outlined Button",
95
- onClick: onClick
96
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
97
- disabled: true,
98
- mode: "basic",
99
- theme: "dark",
100
- label: "Basic Button",
101
- onClick: onClick
102
- }), _react["default"].createElement(_Button["default"], {
103
- disabled: true,
104
- mode: "raised",
105
- theme: "dark",
106
- label: "Raised Button",
107
- onClick: onClick
108
- }), _react["default"].createElement(_Button["default"], {
109
- disabled: true,
110
- mode: "flat",
111
- theme: "dark",
112
- label: "Flat Button",
113
- onClick: onClick
114
- }), _react["default"].createElement(_Button["default"], {
115
- disabled: true,
116
- mode: "outlined",
117
- theme: "dark",
118
- label: "Outlined Button",
119
- onClick: onClick
120
- }))), _react["default"].createElement("h3", null, "With icon"), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
121
- mode: "basic",
122
- theme: "light",
123
- label: "Basic Button",
124
- onClick: onClick,
125
- iconPosition: "after",
126
- iconSrc: _run_icon_black["default"]
127
- }), _react["default"].createElement(_Button["default"], {
128
- mode: "raised",
129
- theme: "light",
130
- label: "Raised Button",
131
- onClick: onClick,
132
- iconPosition: "after",
133
- iconSrc: _run_icon_black["default"]
134
- }), _react["default"].createElement(_Button["default"], {
135
- mode: "flat",
136
- theme: "light",
137
- label: "Flat Button",
138
- onClick: onClick,
139
- iconSrc: _run_icon_black["default"]
140
- }), _react["default"].createElement(_Button["default"], {
141
- mode: "outlined",
142
- theme: "light",
143
- label: "Outlined Button",
144
- onClick: onClick,
145
- iconPosition: "after",
146
- iconSrc: _run_icon_black["default"]
147
- })), _react["default"].createElement("div", null, _react["default"].createElement(_Button["default"], {
148
- disabled: true,
149
- mode: "basic",
150
- theme: "light",
151
- label: "Basic Button",
152
- onClick: onClick,
153
- iconPosition: "after",
154
- iconSrc: _run_icon_black["default"]
155
- }), _react["default"].createElement(_Button["default"], {
156
- disabled: true,
157
- mode: "raised",
158
- theme: "light",
159
- label: "Raised Button",
160
- onClick: onClick,
161
- iconPosition: "after",
162
- iconSrc: _run_icon_black["default"]
163
- }), _react["default"].createElement(_Button["default"], {
164
- disabled: true,
165
- mode: "flat",
166
- theme: "light",
167
- label: "Flat Button",
168
- onClick: onClick,
169
- iconPosition: "after",
170
- iconSrc: _run_icon_black["default"]
171
- }), _react["default"].createElement(_Button["default"], {
172
- disabled: true,
173
- mode: "outlined",
174
- theme: "light",
175
- label: "Outlined Button",
176
- onClick: onClick,
177
- iconPosition: "after",
178
- iconSrc: _run_icon_black["default"]
179
- })));
180
- }, {
181
- notes: {
182
- markdown: _readme["default"]
183
- }
184
- });
185
-
186
- var knobProps = function knobProps() {
187
- return {
188
- label: (0, _addonKnobs.text)("label", "Test Button"),
189
- mode: (0, _addonKnobs.select)("mode", {
190
- basic: "basic",
191
- raised: "raised",
192
- flat: "flat",
193
- outlined: "outlined"
194
- }, "basic"),
195
- theme: (0, _addonKnobs.select)("theme", {
196
- light: "light",
197
- dark: "dark"
198
- }, "light"),
199
- disabled: (0, _addonKnobs["boolean"])("disabled", false),
200
- iconPosition: (0, _addonKnobs.select)("icon position", {
201
- before: "before",
202
- after: "after"
203
- }, "before"),
204
- icon: (0, _addonKnobs["boolean"])("With Icon", true)
205
- };
206
- };
207
-
208
- (0, _react2.storiesOf)("Form Components|Button", module).add("Knobs example", function () {
209
- var props = knobProps();
210
- return _react["default"].createElement("div", {
211
- style: {
212
- background: props.theme === "dark" && "black" || "transparent"
213
- }
214
- }, props.icon && _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
215
- onClick: onClick,
216
- iconSrc: _run_icon_black["default"]
217
- })) || _react["default"].createElement(_Button["default"], (0, _extends2["default"])({}, props, {
218
- onClick: onClick
219
- })));
220
- }, {
221
- notes: {
222
- markdown: _readme["default"]
223
- }
224
- });
@@ -1,93 +0,0 @@
1
- # DXC Button Component
2
-
3
- ## Usage
4
-
5
- ```js
6
- import { DxcButton } from "@dxc-technology/halstack-react";
7
-
8
- <DxcButton onClick={handleClick} label="Test Button" />;
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>mode: 'basic' | 'outlined' | 'raised' | 'flat'</td>
21
- <td><code>'basic'</code></td>
22
- <td>Uses on of the available button modes.</td>
23
- </tr>
24
- <tr>
25
- <td>theme: 'light' |'dark'</td>
26
- <td><code>'light'</code></td>
27
- <td>Uses one of the available button modes.</td>
28
- </tr>
29
- <tr>
30
- <td>label: string</td>
31
- <td><code>'basic'</code></td>
32
- <td>Text to be placed next to the button.</td>
33
- </tr>
34
- <tr>
35
- <td>iconSrc: string</td>
36
- <td></td>
37
- <td>URL of the icon that will be placed next to the button label.</td>
38
- </tr>
39
- <tr>
40
- <td>iconPosition: 'before' | 'after'</td>
41
- <td><code>'before'</code></td>
42
- <td>Whether the icon should appear after or before the label.</td>
43
- </tr>
44
- <tr>
45
- <td>disabled: boolean</td>
46
- <td><code>false</code></td>
47
- <td>If true, the component will be disabled.</td>
48
- </tr>
49
- <tr>
50
- <td>disableRipple: boolean</td>
51
- <td><code>false</code></td>
52
- <td>If true, the ripple effect will be disabled.</td>
53
- </tr>
54
- <tr>
55
- <td>onClick: function</td>
56
- <td></td>
57
- <td>This function will be called when the user clicks the button. The event object will be passed as a parameter.</td>
58
- </tr>
59
-
60
- </table>
61
-
62
- ## Examples
63
-
64
- - Basic button - Light theme - Enabled - Icon after label - With ripple
65
-
66
- ```js
67
- import React from "react";
68
-
69
- import { DxcButton } from "@dxc-technology/halstack-react";
70
-
71
- function App() {
72
- const handleOnClick = event => {
73
- console.log("Button clicked");
74
- };
75
-
76
- return (
77
- <div>
78
- <DxcButton
79
- label="Basic"
80
- mode="basic"
81
- disabled={false}
82
- theme="light"
83
- disableRipple={false}
84
- iconPosition="after"
85
- iconSrc="/images/run_icon.png"
86
- onClick={handleOnClick}
87
- />
88
- </div>
89
- );
90
- }
91
-
92
- export default App;
93
- ```
@@ -1,10 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports["default"] = testFunction;
7
-
8
- function testFunction(num1, num2) {
9
- return num1 + num2;
10
- }
@@ -1,12 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _exampleService = _interopRequireDefault(require("./example-service"));
6
-
7
- describe("warnings array creation", function () {
8
- it("Function sums values", function () {
9
- var result = (0, _exampleService["default"])(2, 3);
10
- expect(result).toEqual(5);
11
- });
12
- });
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z" fill="#ffed00"/><path d="M0 0h24v24H0z" fill="none"/></svg>
@@ -1,217 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
6
-
7
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
8
-
9
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
-
11
- var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
12
-
13
- var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
-
15
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
16
-
17
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
18
-
19
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
20
-
21
- var _react = _interopRequireDefault(require("react"));
22
-
23
- var _react2 = require("@storybook/react");
24
-
25
- var _addonActions = require("@storybook/addon-actions");
26
-
27
- require("../common/OpenSans.css");
28
-
29
- var _addonKnobs = require("@storybook/addon-knobs");
30
-
31
- var _readme = _interopRequireDefault(require("./readme.md"));
32
-
33
- var _Dialog = _interopRequireDefault(require("./Dialog"));
34
-
35
- var _Button = _interopRequireDefault(require("../button/Button"));
36
-
37
- var _Switch = _interopRequireDefault(require("../switch/Switch"));
38
-
39
- var _Date = _interopRequireDefault(require("../date/Date"));
40
-
41
- var _InputText = _interopRequireDefault(require("../input-text/InputText"));
42
-
43
- var onChange = (0, _addonActions.action)("onChange");
44
-
45
- onChange.toString = function () {
46
- return "onChangeHandler";
47
- };
48
-
49
- (0, _react2.storiesOf)("Form Components|Dialog", module).add("Component", function () {
50
- var ControlledStory =
51
- /*#__PURE__*/
52
- function (_React$Component) {
53
- (0, _inherits2["default"])(ControlledStory, _React$Component);
54
-
55
- function ControlledStory(props) {
56
- var _this;
57
-
58
- (0, _classCallCheck2["default"])(this, ControlledStory);
59
- _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(ControlledStory).call(this, props));
60
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler", function () {
61
- _this.setState({
62
- opened: !_this.state.opened
63
- });
64
- });
65
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler1", function () {
66
- _this.setState({
67
- opened1: !_this.state.opened1
68
- });
69
- });
70
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dialogHandler2", function () {
71
- _this.setState({
72
- opened2: !_this.state.opened2
73
- });
74
- });
75
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "contentHandler", function () {
76
- _this.setState({
77
- content: !_this.state.content
78
- });
79
- });
80
- _this.state = {
81
- opened: false,
82
- opened1: false,
83
- opened2: false,
84
- content: false
85
- };
86
- return _this;
87
- }
88
-
89
- (0, _createClass2["default"])(ControlledStory, [{
90
- key: "render",
91
- value: function render() {
92
- return _react["default"].createElement("div", null, _react["default"].createElement(_Dialog["default"], {
93
- isVisible: this.state.opened,
94
- isCloseVisible: true,
95
- onClose: this.dialogHandler,
96
- overlay: true
97
- }, _react["default"].createElement("div", {
98
- style: {
99
- display: "flex",
100
- justifyContent: "center",
101
- width: "100%"
102
- }
103
- }, _react["default"].createElement(_Switch["default"], {
104
- label: "Content",
105
- checked: false,
106
- onChange: this.contentHandler
107
- })), this.state.content && _react["default"].createElement("div", {
108
- style: {
109
- fontFamily: "Open Sans, sans serif"
110
- }
111
- }, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."))), _react["default"].createElement(_Button["default"], {
112
- onClick: this.dialogHandler,
113
- label: "Click me"
114
- }), _react["default"].createElement(_Dialog["default"], {
115
- isVisible: this.state.opened1,
116
- isCloseVisible: true,
117
- onClose: this.dialogHandler1,
118
- overlay: false
119
- }, _react["default"].createElement("div", {
120
- style: {
121
- fontFamily: "Open Sans, sans serif"
122
- }
123
- }, _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis."), _react["default"].createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipiscing elit aliquam class orci, est lectus eros praesent rhoncus dui etiam nascetur a mauris, luctus bibendum facilisis senectus sodales lobortis condimentum porta posuere. Massa varius ac imperdiet mauris quis rhoncus, nisl interdum gravida ullamcorper aliquam aptent pellentesque, consequat leo quam nec montes. Ridiculus mollis augue nam erat volutpat nibh congue, nostra habitasse dignissim pulvinar libero iaculis taciti et, bibendum morbi potenti lobortis purus laoreet."), _react["default"].createElement("p", null, "Netus justo auctor consequat enim potenti et luctus dis, felis facilisi varius conubia mollis gravida neque integer, phasellus tempus congue eu donec egestas metus. Volutpat blandit vehicula posuere montes purus leo inceptos magnis, molestie justo sodales massa laoreet pharetra cum lacus, nulla curabitur cursus per maecenas auctor iaculis. Aliquet ultricies litora lectus integer molestie sociosqu dictum sagittis vel erat porttitor quam vitae, class ultrices vestibulum fusce potenti natoque nam feugiat sapien eleifend eros nisl. Laoreet facilisi fusce est massa fames pellentesque magnis sem, eros pharetra montes ornare volutpat conubia vestibulum quisque, nisl taciti malesuada enim ridiculus venenatis sagittis.")), _react["default"].createElement("div", {
124
- style: {
125
- display: "flex",
126
- justifyContent: "center",
127
- width: "100%"
128
- }
129
- }, _react["default"].createElement(_Button["default"], {
130
- mode: "raised",
131
- theme: "light",
132
- label: "OK",
133
- onClick: this.dialogHandler1
134
- }), _react["default"].createElement(_Button["default"], {
135
- mode: "flat",
136
- theme: "light",
137
- label: "CANCEL",
138
- onClick: this.dialogHandler1
139
- }))), _react["default"].createElement(_Button["default"], {
140
- onClick: this.dialogHandler1,
141
- label: "Click me"
142
- }), _react["default"].createElement(_Dialog["default"], {
143
- isVisible: this.state.opened2,
144
- isCloseVisible: false,
145
- onClose: this.dialogHandler2,
146
- overlay: true
147
- }, _react["default"].createElement("div", {
148
- style: {
149
- display: "flex",
150
- justifyContent: "center",
151
- alignItems: "center",
152
- width: "100%"
153
- }
154
- }, _react["default"].createElement(_Date["default"], {
155
- name: "date",
156
- format: "dd/MM/yyyy",
157
- label: "BirthDate",
158
- theme: "light",
159
- assistiveText: "Assistive Text Here",
160
- onInputChange: function onInputChange(event) {
161
- return console.log(event);
162
- }
163
- }), _react["default"].createElement(_InputText["default"], {
164
- disabled: false,
165
- label: "Amount",
166
- multiline: false,
167
- sufix: "K",
168
- prefix: "\u20AC",
169
- theme: "light",
170
- assistiveText: "Assistive Text Here"
171
- })), _react["default"].createElement("div", {
172
- style: {
173
- display: "flex",
174
- justifyContent: "center",
175
- width: "100%"
176
- }
177
- }, _react["default"].createElement(_Button["default"], {
178
- onClick: this.dialogHandler2,
179
- label: "Close"
180
- }))), _react["default"].createElement(_Button["default"], {
181
- onClick: this.dialogHandler2,
182
- label: "Click me"
183
- }));
184
- }
185
- }]);
186
- return ControlledStory;
187
- }(_react["default"].Component);
188
-
189
- return _react["default"].createElement(ControlledStory, null);
190
- }, {
191
- notes: {
192
- markdown: _readme["default"]
193
- }
194
- });
195
-
196
- var knobProps = function knobProps() {
197
- return {
198
- isVisible: (0, _addonKnobs["boolean"])("Visible", false),
199
- isCloseVisible: (0, _addonKnobs["boolean"])("Close Visible", false),
200
- overlay: (0, _addonKnobs["boolean"])("Overlay", false)
201
- };
202
- };
203
-
204
- (0, _react2.storiesOf)("Form Components|Dialog", module).add("Knobs example", function () {
205
- var props = knobProps();
206
- return _react["default"].createElement("div", null, _react["default"].createElement("p", {
207
- style: {
208
- fontFamily: "Open Sans, sans serif"
209
- }
210
- }, "Check visible"), _react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({
211
- onClose: close
212
- }, props), "This is a knobs example"));
213
- }, {
214
- notes: {
215
- markdown: _readme["default"]
216
- }
217
- });
@@ -1,32 +0,0 @@
1
- # DXC Dialog Component
2
-
3
- ## Props
4
-
5
- <table>
6
- <tr style="background-color: grey">
7
- <td>Name</td>
8
- <td>Default</td>
9
- <td>Description</td>
10
- </tr>
11
- <tr>
12
- <td>isVisible: boolean</td>
13
- <td>true</td>
14
- <td>If true, the modal should be visible</td>
15
- </tr>
16
- <tr>
17
- <td>isCloseVisible: boolean</td>
18
- <td>true</td>
19
- <td>If true, the close button should be visible</td>
20
- </tr>
21
- <tr>
22
- <td>onClose: function</td>
23
- <td></td>
24
- <td>This function will be called when the user clicks the close button. If there is no function we should close the modal by default</td>
25
- </tr>
26
- <tr>
27
- <td>overlay: boolean</td>
28
- <td>true</td>
29
- <td>If true, the modal will be over a darker background</td>
30
- </tr>
31
- </table>
32
-