@desynova-digital/components 8.19.39 → 8.19.40
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.
- package/atoms/inputText/inputText.js +63 -47
- package/atoms/inputText/inputText.story.js +249 -85
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
@@ -8,29 +8,29 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
8
8
|
|
|
9
9
|
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
|
|
10
10
|
|
|
11
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
12
|
-
_templateObject2 = _taggedTemplateLiteral([
|
|
13
|
-
_templateObject3 = _taggedTemplateLiteral([
|
|
14
|
-
_templateObject4 = _taggedTemplateLiteral([
|
|
15
|
-
_templateObject5 = _taggedTemplateLiteral([
|
|
11
|
+
var _templateObject = _taggedTemplateLiteral(["\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n"], ["\n background: transparent;\n font-family: \"SFUIText-Medium\";\n position: relative;\n width: 100%;\n display: block;\n\n > label {\n color: #999999;\n font-size: 14px;\n\n font-family: inherit;\n position: absolute;\n pointer-events: none;\n left: 0px;\n top: 5px;\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n > input:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n"]),
|
|
12
|
+
_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"], ["\n color: ", ";\n padding-top: 5px;\n display: inline-block;\n font-size: 12px;\n font-family: inherit;\n width: 100%;\n text-align: left;\n"]),
|
|
13
|
+
_templateObject3 = _taggedTemplateLiteral(["\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n"], ["\n background: none;\n border: none;\n cursor: pointer;\n position: absolute;\n right: 0;\n top: 5px;\n &:focus {\n outline: none;\n }\n"]),
|
|
14
|
+
_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"], ["\n position: absolute;\n right: 0px;\n top: 0px;\n background-color: #303f51;\n border-radius: 12px;\n font-size: 12px;\n padding: 5px 10px;\n color: #ffffff;\n"]),
|
|
15
|
+
_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n\n cursor: ", ";\n\n font-size: 14px;\n padding: ", ";\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ", ";\n }\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n"], ["\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n border-bottom: 1px solid\n ", ";\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n\n cursor: ", ";\n\n font-size: 14px;\n padding: ", ";\n margin-top: 15px;\n display: block;\n\n &:hover {\n border-color: ", ";\n }\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n\n opacity: ", ";\n transition: 0.2s ease all;\n }\n\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n"]);
|
|
16
16
|
|
|
17
|
-
var _react = require(
|
|
17
|
+
var _react = require("react");
|
|
18
18
|
|
|
19
19
|
var _react2 = _interopRequireDefault(_react);
|
|
20
20
|
|
|
21
|
-
var _styledComponents = require(
|
|
21
|
+
var _styledComponents = require("styled-components");
|
|
22
22
|
|
|
23
23
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
24
24
|
|
|
25
|
-
var _icon = require(
|
|
25
|
+
var _icon = require("../icon");
|
|
26
26
|
|
|
27
27
|
var _icon2 = _interopRequireDefault(_icon);
|
|
28
28
|
|
|
29
|
-
var _propTypes = require(
|
|
29
|
+
var _propTypes = require("prop-types");
|
|
30
30
|
|
|
31
31
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
32
32
|
|
|
33
|
-
var _tokens = require(
|
|
33
|
+
var _tokens = require("@desynova-digital/tokens");
|
|
34
34
|
|
|
35
35
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
36
36
|
|
|
@@ -53,7 +53,7 @@ var InputText = function InputText(_ref) {
|
|
|
53
53
|
defaultValue = _ref.defaultValue,
|
|
54
54
|
type = _ref.type,
|
|
55
55
|
showLengthCount = _ref.showLengthCount,
|
|
56
|
-
props = _objectWithoutProperties(_ref, [
|
|
56
|
+
props = _objectWithoutProperties(_ref, ["maxLength", "defaultValue", "type", "showLengthCount"]);
|
|
57
57
|
|
|
58
58
|
var _useState = (0, _react.useState)(true),
|
|
59
59
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -62,7 +62,7 @@ var InputText = function InputText(_ref) {
|
|
|
62
62
|
|
|
63
63
|
if (props.masked) {
|
|
64
64
|
var length = defaultValue ? defaultValue.length : 8;
|
|
65
|
-
var maskedValue = new Array(length).join(
|
|
65
|
+
var maskedValue = new Array(length).join("•");
|
|
66
66
|
return _react2.default.createElement(InputText.Element, _extends({
|
|
67
67
|
value: props.value,
|
|
68
68
|
type: type
|
|
@@ -86,51 +86,67 @@ var InputText = function InputText(_ref) {
|
|
|
86
86
|
return _react2.default.createElement(
|
|
87
87
|
InputTextDiv,
|
|
88
88
|
{ theme: props.theme },
|
|
89
|
-
_react2.default.createElement(InputText.Element, _extends({
|
|
89
|
+
_react2.default.createElement(InputText.Element, _extends({
|
|
90
|
+
type: hidden ? type : "text",
|
|
91
|
+
value: props.value,
|
|
92
|
+
defaultValue: defaultValue
|
|
93
|
+
}, props, {
|
|
94
|
+
maxLength: maxLength || "",
|
|
95
|
+
showLengthCount: showLengthCount || false
|
|
96
|
+
})),
|
|
90
97
|
props.label ? _react2.default.createElement(
|
|
91
|
-
|
|
98
|
+
"label",
|
|
92
99
|
{
|
|
93
100
|
htmlFor: props.id,
|
|
94
|
-
className: props.value && props.value.length > 0 ?
|
|
101
|
+
className: props.value && props.value.length > 0 ? "floaton" : ""
|
|
95
102
|
},
|
|
96
|
-
|
|
97
|
-
) :
|
|
103
|
+
"" + props.label + (props.isRequired ? "*" : "")
|
|
104
|
+
) : "",
|
|
98
105
|
errorMesssage ? _react2.default.createElement(
|
|
99
106
|
InputError,
|
|
100
107
|
{ value: props.value, theme: props.theme, error: props.error },
|
|
101
108
|
errorMesssage
|
|
102
|
-
) :
|
|
109
|
+
) : "",
|
|
103
110
|
maxLength && showLengthCount && _react2.default.createElement(
|
|
104
111
|
CountWrappper,
|
|
105
112
|
null,
|
|
106
113
|
props.value.length,
|
|
107
|
-
|
|
114
|
+
"/",
|
|
108
115
|
maxLength
|
|
109
116
|
),
|
|
110
|
-
type ==
|
|
117
|
+
type == "password" || passwordButton ? _react2.default.createElement(
|
|
111
118
|
PasswordToggleButton,
|
|
112
119
|
{
|
|
113
|
-
type:
|
|
114
|
-
className:
|
|
120
|
+
type: "button",
|
|
121
|
+
className: "password-toggle",
|
|
115
122
|
onClick: function onClick() {
|
|
116
123
|
return togglePassword(!hidden);
|
|
117
124
|
},
|
|
118
125
|
hiddenEye: errorMesssage ? true : false
|
|
119
126
|
},
|
|
120
|
-
hidden ? _react2.default.createElement(_icon2.default, {
|
|
121
|
-
|
|
122
|
-
width: 18,
|
|
123
|
-
height: 15,
|
|
124
|
-
color: '#999'
|
|
125
|
-
}) : _react2.default.createElement(_icon2.default, {
|
|
126
|
-
name: 'hide-password',
|
|
127
|
-
width: 18,
|
|
128
|
-
height: 15,
|
|
129
|
-
color: '#999'
|
|
130
|
-
})
|
|
131
|
-
) : ''
|
|
127
|
+
hidden ? _react2.default.createElement(_icon2.default, { name: "show-password", width: 18, height: 15, color: "#999" }) : _react2.default.createElement(_icon2.default, { name: "hide-password", width: 18, height: 15, color: "#999" })
|
|
128
|
+
) : ""
|
|
132
129
|
);
|
|
133
130
|
};
|
|
131
|
+
var returnPadding = function returnPadding(props) {
|
|
132
|
+
var digitCount = props.maxLength.toString().length;
|
|
133
|
+
switch (digitCount) {
|
|
134
|
+
case 0:
|
|
135
|
+
return "7px 0px 2px 0px";
|
|
136
|
+
case 1:
|
|
137
|
+
return "7px 40px 2px 0px";
|
|
138
|
+
case 2:
|
|
139
|
+
return "7px 60px 2px 0px";
|
|
140
|
+
case 3:
|
|
141
|
+
return "7px 75px 2px 0px";
|
|
142
|
+
case 4:
|
|
143
|
+
return "7px 90px 2px 0px";
|
|
144
|
+
case 5:
|
|
145
|
+
return "7px 110px 2px 0px";
|
|
146
|
+
default:
|
|
147
|
+
return "7px 0px 2px 0px";
|
|
148
|
+
}
|
|
149
|
+
};
|
|
134
150
|
|
|
135
151
|
InputText.Element = _styledComponents2.default.input(_templateObject5, function (props) {
|
|
136
152
|
return _tokens.colors[props.theme].inputCommon.background;
|
|
@@ -143,9 +159,9 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
|
|
|
143
159
|
}, function (props) {
|
|
144
160
|
return _tokens.colors[props.theme].inputCommon.color;
|
|
145
161
|
}, function (props) {
|
|
146
|
-
return props.readOnly ?
|
|
162
|
+
return props.readOnly ? "not-allowed" : "text";
|
|
147
163
|
}, function (props) {
|
|
148
|
-
return props
|
|
164
|
+
return returnPadding(props || "");
|
|
149
165
|
}, function (props) {
|
|
150
166
|
if (props.error) {
|
|
151
167
|
return _tokens.colors[props.theme].inputError.borderHover;
|
|
@@ -159,19 +175,19 @@ InputText.Element = _styledComponents2.default.input(_templateObject5, function
|
|
|
159
175
|
}, function (props) {
|
|
160
176
|
return _tokens.colors[props.theme].inputCommon.colorDisabled;
|
|
161
177
|
}, function (props) {
|
|
162
|
-
return props.label ?
|
|
163
|
-
return props.theme ===
|
|
178
|
+
return props.label ? "transparent" : function (props) {
|
|
179
|
+
return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
|
|
164
180
|
};
|
|
165
181
|
}, function (props) {
|
|
166
|
-
return props.label ?
|
|
182
|
+
return props.label ? "0" : "1";
|
|
167
183
|
}, function (props) {
|
|
168
184
|
return props.placeholder ? function (props) {
|
|
169
|
-
return props.theme ===
|
|
185
|
+
return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
|
|
170
186
|
} : function (props) {
|
|
171
|
-
return props.theme ===
|
|
187
|
+
return props.theme === "light" ? _tokens.colors[props.theme].inputCommon.placeholder : _tokens.colors[props.theme].input.placeholder;
|
|
172
188
|
};
|
|
173
189
|
}, function (props) {
|
|
174
|
-
return props.placeholder ?
|
|
190
|
+
return props.placeholder ? "1" : "1";
|
|
175
191
|
});
|
|
176
192
|
|
|
177
193
|
InputText.propTypes = {
|
|
@@ -197,7 +213,7 @@ InputText.propTypes = {
|
|
|
197
213
|
/** The (HTML) maxLength for the input. */
|
|
198
214
|
maxLength: _propTypes2.default.number,
|
|
199
215
|
showLengthCount: _propTypes2.default.bool,
|
|
200
|
-
theme: _propTypes2.default.oneOf([
|
|
216
|
+
theme: _propTypes2.default.oneOf(["light", "dark"])
|
|
201
217
|
|
|
202
218
|
/** deprecate error string prop */
|
|
203
219
|
// _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
|
|
@@ -208,10 +224,10 @@ InputText.defaultProps = {
|
|
|
208
224
|
code: false,
|
|
209
225
|
error: null,
|
|
210
226
|
onChange: null,
|
|
211
|
-
type:
|
|
227
|
+
type: "text",
|
|
212
228
|
// maxLength: 50,
|
|
213
|
-
theme:
|
|
214
|
-
value:
|
|
229
|
+
theme: "light",
|
|
230
|
+
value: "",
|
|
215
231
|
showLengthCount: false
|
|
216
232
|
};
|
|
217
233
|
|
|
@@ -1,97 +1,261 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
|
-
var _react = require(
|
|
3
|
+
var _react = require("react");
|
|
4
4
|
|
|
5
5
|
var _react2 = _interopRequireDefault(_react);
|
|
6
6
|
|
|
7
|
-
var _react3 = require(
|
|
7
|
+
var _react3 = require("@storybook/react");
|
|
8
8
|
|
|
9
|
-
var _storyHelpers = require(
|
|
9
|
+
var _storyHelpers = require("../../_helpers/story-helpers");
|
|
10
10
|
|
|
11
|
-
var _components = require(
|
|
11
|
+
var _components = require("../../components");
|
|
12
12
|
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
14
|
|
|
15
|
-
(0, _react3.storiesOf)(
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
15
|
+
(0, _react3.storiesOf)("InputText").add("light theme", function () {
|
|
16
|
+
return _react2.default.createElement(
|
|
17
|
+
_storyHelpers.Example,
|
|
18
|
+
{ title: "Appearances" },
|
|
19
|
+
_react2.default.createElement(
|
|
20
|
+
_storyHelpers.Stack,
|
|
21
|
+
null,
|
|
22
|
+
_react2.default.createElement(_components.InputText, {
|
|
23
|
+
type: "text",
|
|
24
|
+
label: "First Name",
|
|
25
|
+
onKeyPress: function onKeyPress(e) {
|
|
26
|
+
return undefined.value = e.target.value;
|
|
27
|
+
},
|
|
28
|
+
onChange: function onChange(e) {
|
|
29
|
+
return console.log(e.target.value);
|
|
30
|
+
},
|
|
31
|
+
placeholder: "Enter Name max 10",
|
|
32
|
+
value: "asd",
|
|
33
|
+
required: true
|
|
34
|
+
}),
|
|
35
|
+
_react2.default.createElement(_components.InputText, {
|
|
36
|
+
type: "password",
|
|
37
|
+
label: "Middle Name",
|
|
38
|
+
minLength: 3,
|
|
39
|
+
maxLength: 6,
|
|
40
|
+
placeholder: "Show as password",
|
|
41
|
+
required: true
|
|
42
|
+
}),
|
|
43
|
+
_react2.default.createElement(_components.InputText, {
|
|
44
|
+
type: "text",
|
|
45
|
+
value: "hello",
|
|
46
|
+
label: "Label and default value",
|
|
47
|
+
required: true
|
|
48
|
+
})
|
|
49
|
+
),
|
|
50
|
+
_react2.default.createElement(
|
|
51
|
+
_storyHelpers.Stack,
|
|
52
|
+
null,
|
|
53
|
+
_react2.default.createElement(_components.InputText, {
|
|
54
|
+
type: "number",
|
|
55
|
+
placeholder: "number field & no Label",
|
|
56
|
+
required: true,
|
|
57
|
+
maxLength: 10
|
|
58
|
+
}),
|
|
59
|
+
_react2.default.createElement(_components.InputText, {
|
|
60
|
+
type: "number",
|
|
61
|
+
id: "input-text-1",
|
|
62
|
+
label: "Label 'For'-'id' prop",
|
|
63
|
+
placeholder: "No Label & Number Field",
|
|
64
|
+
required: true,
|
|
65
|
+
maxLength: 10
|
|
66
|
+
}),
|
|
67
|
+
_react2.default.createElement(_components.InputText, {
|
|
68
|
+
type: "text",
|
|
69
|
+
value: "No Label and default value",
|
|
70
|
+
onChange: function onChange(e) {
|
|
71
|
+
alert("some Handler code");
|
|
72
|
+
},
|
|
73
|
+
placeholder: "Placeholder text",
|
|
74
|
+
required: true
|
|
75
|
+
})
|
|
76
|
+
),
|
|
77
|
+
_react2.default.createElement(
|
|
78
|
+
_storyHelpers.Stack,
|
|
79
|
+
null,
|
|
80
|
+
_react2.default.createElement(_components.InputText, {
|
|
81
|
+
type: "number",
|
|
82
|
+
label: "number & max 5",
|
|
83
|
+
placeholder: "max length 5",
|
|
84
|
+
required: true,
|
|
85
|
+
minLength: 3,
|
|
86
|
+
maxLength: 5
|
|
87
|
+
}),
|
|
88
|
+
_react2.default.createElement(_components.InputText, {
|
|
89
|
+
type: "text",
|
|
90
|
+
error: "Invalid text",
|
|
91
|
+
placeholder: "Display error",
|
|
92
|
+
required: true
|
|
93
|
+
}),
|
|
94
|
+
_react2.default.createElement(_components.InputText, {
|
|
95
|
+
readOnly: true,
|
|
96
|
+
type: "text",
|
|
97
|
+
value: "hello",
|
|
98
|
+
onChange: function onChange(e) {
|
|
99
|
+
alert("some Handler code");
|
|
100
|
+
},
|
|
101
|
+
placeholder: "Placeholder text",
|
|
102
|
+
required: true
|
|
103
|
+
})
|
|
104
|
+
),
|
|
105
|
+
_react2.default.createElement(
|
|
106
|
+
_storyHelpers.Stack,
|
|
107
|
+
null,
|
|
108
|
+
_react2.default.createElement(_components.InputText, {
|
|
109
|
+
type: "password",
|
|
110
|
+
value: "this@is$passw0rd",
|
|
111
|
+
placeholder: "This is password toggle",
|
|
112
|
+
passwordButton: true
|
|
113
|
+
}),
|
|
114
|
+
_react2.default.createElement(_components.InputText, {
|
|
115
|
+
label: "Label 'For'-'id' prop",
|
|
116
|
+
type: "password",
|
|
117
|
+
value: "this@is$passw0rd",
|
|
118
|
+
placeholder: "This is password toggle",
|
|
119
|
+
passwordButton: true
|
|
120
|
+
}),
|
|
121
|
+
_react2.default.createElement(_components.InputText, {
|
|
122
|
+
label: "Label 'For'-'id' ",
|
|
123
|
+
error: " this is error",
|
|
124
|
+
type: "password",
|
|
125
|
+
value: "this@is$passw0rd",
|
|
126
|
+
placeholder: "This is password toggle",
|
|
127
|
+
passwordButton: true
|
|
128
|
+
})
|
|
129
|
+
)
|
|
130
|
+
);
|
|
56
131
|
});
|
|
57
132
|
|
|
58
|
-
(0, _react3.storiesOf)(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
133
|
+
(0, _react3.storiesOf)("InputText").add("dark theme", function () {
|
|
134
|
+
return _react2.default.createElement(
|
|
135
|
+
_storyHelpers.Example,
|
|
136
|
+
{ title: "Appearances", background: "dark" },
|
|
137
|
+
_react2.default.createElement(
|
|
138
|
+
_storyHelpers.Stack,
|
|
139
|
+
null,
|
|
140
|
+
_react2.default.createElement(_components.InputText, {
|
|
141
|
+
theme: "dark",
|
|
142
|
+
type: "text",
|
|
143
|
+
label: "First Name",
|
|
144
|
+
showLengthCount: true,
|
|
145
|
+
value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m",
|
|
146
|
+
maxLength: 100,
|
|
147
|
+
onChange: function onChange(e) {
|
|
148
|
+
return console.log(e.target.value);
|
|
149
|
+
},
|
|
150
|
+
placeholder: "Enter Name max 10",
|
|
151
|
+
required: true
|
|
152
|
+
}),
|
|
153
|
+
_react2.default.createElement(_components.InputText, {
|
|
154
|
+
theme: "dark",
|
|
155
|
+
type: "password",
|
|
156
|
+
label: "Middle Name",
|
|
157
|
+
minLength: 3,
|
|
158
|
+
maxLength: 6,
|
|
159
|
+
placeholder: "Show as password",
|
|
160
|
+
required: true
|
|
161
|
+
}),
|
|
162
|
+
_react2.default.createElement(_components.InputText, {
|
|
163
|
+
theme: "dark",
|
|
164
|
+
type: "text",
|
|
165
|
+
value: "hello there i am using",
|
|
166
|
+
label: "Label and default value",
|
|
167
|
+
required: true
|
|
168
|
+
})
|
|
169
|
+
),
|
|
170
|
+
_react2.default.createElement(
|
|
171
|
+
_storyHelpers.Stack,
|
|
172
|
+
null,
|
|
173
|
+
_react2.default.createElement(_components.InputText, {
|
|
174
|
+
theme: "dark",
|
|
175
|
+
type: "number",
|
|
176
|
+
placeholder: "number field & no Label",
|
|
177
|
+
required: true,
|
|
178
|
+
maxLength: 10
|
|
179
|
+
}),
|
|
180
|
+
_react2.default.createElement(_components.InputText, {
|
|
181
|
+
theme: "dark",
|
|
182
|
+
type: "number",
|
|
183
|
+
id: "input-text-1",
|
|
184
|
+
label: "Label 'For'-'id' prop",
|
|
185
|
+
placeholder: "No Label & Number Field",
|
|
186
|
+
required: true,
|
|
187
|
+
maxLength: 10
|
|
188
|
+
}),
|
|
189
|
+
_react2.default.createElement(_components.InputText, {
|
|
190
|
+
theme: "dark",
|
|
191
|
+
capitalizeFirstLetter: true,
|
|
192
|
+
type: "text",
|
|
193
|
+
value: "no label and default value",
|
|
194
|
+
onChange: function onChange(e) {
|
|
195
|
+
alert("some Handler code");
|
|
196
|
+
},
|
|
197
|
+
placeholder: "Placeholder text",
|
|
198
|
+
required: true
|
|
199
|
+
})
|
|
200
|
+
),
|
|
201
|
+
_react2.default.createElement(
|
|
202
|
+
_storyHelpers.Stack,
|
|
203
|
+
null,
|
|
204
|
+
_react2.default.createElement(_components.InputText, {
|
|
205
|
+
theme: "dark",
|
|
206
|
+
type: "number",
|
|
207
|
+
label: "number & max 5",
|
|
208
|
+
placeholder: "max length 5",
|
|
209
|
+
required: true,
|
|
210
|
+
minLength: 3,
|
|
211
|
+
maxLength: 5
|
|
212
|
+
}),
|
|
213
|
+
_react2.default.createElement(_components.InputText, {
|
|
214
|
+
theme: "dark",
|
|
215
|
+
type: "text",
|
|
216
|
+
error: "Invalid text",
|
|
217
|
+
placeholder: "Display error",
|
|
218
|
+
required: true
|
|
219
|
+
}),
|
|
220
|
+
_react2.default.createElement(_components.InputText, {
|
|
221
|
+
theme: "dark",
|
|
222
|
+
readOnly: true,
|
|
223
|
+
type: "text",
|
|
224
|
+
value: "hello",
|
|
225
|
+
onChange: function onChange(e) {
|
|
226
|
+
alert("some Handler code");
|
|
227
|
+
},
|
|
228
|
+
placeholder: "Placeholder text",
|
|
229
|
+
required: true
|
|
230
|
+
})
|
|
231
|
+
),
|
|
232
|
+
_react2.default.createElement(
|
|
233
|
+
_storyHelpers.Stack,
|
|
234
|
+
null,
|
|
235
|
+
_react2.default.createElement(_components.InputText, {
|
|
236
|
+
theme: "dark",
|
|
237
|
+
type: "password",
|
|
238
|
+
value: "this@is$passw0rd",
|
|
239
|
+
placeholder: "This is password toggle",
|
|
240
|
+
passwordButton: true
|
|
241
|
+
}),
|
|
242
|
+
_react2.default.createElement(_components.InputText, {
|
|
243
|
+
theme: "dark",
|
|
244
|
+
label: "Label 'For'-'id' prop",
|
|
245
|
+
type: "password",
|
|
246
|
+
value: "this@is$passw0rd",
|
|
247
|
+
placeholder: "This is password toggle",
|
|
248
|
+
passwordButton: true
|
|
249
|
+
}),
|
|
250
|
+
_react2.default.createElement(_components.InputText, {
|
|
251
|
+
theme: "dark",
|
|
252
|
+
label: "Label 'For'-'id' ",
|
|
253
|
+
error: " this is error",
|
|
254
|
+
type: "password",
|
|
255
|
+
value: "this@is$passw0rd",
|
|
256
|
+
placeholder: "This is password toggle",
|
|
257
|
+
passwordButton: true
|
|
258
|
+
})
|
|
259
|
+
)
|
|
260
|
+
);
|
|
97
261
|
});
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.19.
|
|
3
|
+
"version": "8.19.40",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "8.19.
|
|
10
|
+
"@desynova-digital/tokens": "8.19.40",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|