@stokr/components-library 2.3.5 → 2.3.6-beta.1
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/dist/components/Input/Input.js +13 -4
- package/dist/components/Input/Input.styles.js +6 -2
- package/dist/components/Input/InputPassword.js +1 -1
- package/dist/components/Input/Select.js +16 -7
- package/dist/components/Input/Select.styles.js +4 -8
- package/dist/components/Text/Text.styles.js +6 -2
- package/dist/components/TransactionInfo/TransactionInfo.js +4 -1
- package/package.json +1 -1
|
@@ -29,7 +29,11 @@ var Input = function Input(props) {
|
|
|
29
29
|
touched = props.touched,
|
|
30
30
|
readOnly = props.readOnly,
|
|
31
31
|
inverted = props.inverted,
|
|
32
|
-
dashboard = props.dashboard
|
|
32
|
+
dashboard = props.dashboard,
|
|
33
|
+
disabled = props.disabled,
|
|
34
|
+
inputWrapStyle = props.inputWrapStyle,
|
|
35
|
+
wrapperStyle = props.wrapperStyle,
|
|
36
|
+
autoHeightLabel = props.autoHeightLabel;
|
|
33
37
|
var _useState = (0, _react.useState)(false),
|
|
34
38
|
_useState2 = _slicedToArray(_useState, 2),
|
|
35
39
|
labelUp = _useState2[0],
|
|
@@ -66,15 +70,20 @@ var Input = function Input(props) {
|
|
|
66
70
|
setLabelUp(focus || !!value);
|
|
67
71
|
};
|
|
68
72
|
return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, {
|
|
69
|
-
inverted: inverted
|
|
73
|
+
inverted: inverted,
|
|
74
|
+
style: wrapperStyle
|
|
70
75
|
}, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
|
|
71
76
|
isUp: labelUp,
|
|
72
77
|
active: hasFocus,
|
|
73
78
|
error: error && touched,
|
|
74
|
-
htmlFor: id
|
|
79
|
+
htmlFor: id,
|
|
80
|
+
autoHeightLabel: autoHeightLabel
|
|
75
81
|
}, label), /*#__PURE__*/_react.default.createElement(_Input.InputWrap, {
|
|
76
82
|
error: error && touched,
|
|
77
|
-
dashboard: dashboard
|
|
83
|
+
dashboard: dashboard,
|
|
84
|
+
disabled: disabled,
|
|
85
|
+
style: inputWrapStyle,
|
|
86
|
+
autoHeightLabel: autoHeightLabel
|
|
78
87
|
}, /*#__PURE__*/_react.default.createElement("input", _extends({
|
|
79
88
|
type: type,
|
|
80
89
|
id: id,
|
|
@@ -22,8 +22,10 @@ exports.Wrapper = Wrapper;
|
|
|
22
22
|
var Label = _styledComponents.default.label.withConfig({
|
|
23
23
|
displayName: "Inputstyles__Label",
|
|
24
24
|
componentId: "sc-1osolkh-1"
|
|
25
|
-
})(["z-index:11;display:block;position:absolute;left:0;top:-2px;font-weight:500;height:12px;font-size:11px;line-height:20px;letter-spacing:2px;text-transform:uppercase;color:", ";pointer-events:none;transform:translateY(15px);transition:transform 0.2s,font-size 0.2s;", " ", " ", ""], function (props) {
|
|
25
|
+
})(["z-index:11;display:block;position:absolute;left:0;top:-2px;font-weight:500;height:12px;font-size:11px;line-height:20px;letter-spacing:2px;text-transform:uppercase;color:", ";pointer-events:none;transform:translateY(15px);transition:transform 0.2s,font-size 0.2s;", " ", " ", " ", ""], function (props) {
|
|
26
26
|
return _theme.default.cBlack;
|
|
27
|
+
}, function (props) {
|
|
28
|
+
return props.autoHeightLabel && "\n height:auto;\n position: relative;\n ";
|
|
27
29
|
}, function (props) {
|
|
28
30
|
return props.isUp && "\n font-size: 10px;\n transform: translateY(0);\n ";
|
|
29
31
|
}, function (props) {
|
|
@@ -35,10 +37,12 @@ exports.Label = Label;
|
|
|
35
37
|
var InputWrap = _styledComponents.default.div.withConfig({
|
|
36
38
|
displayName: "Inputstyles__InputWrap",
|
|
37
39
|
componentId: "sc-1osolkh-2"
|
|
38
|
-
})(["position:relative;& > input{z-index:0;font-family:'Open sans';display:block;width:100%;height:40px;font-weight:600;font-size:12px;line-height:18px;padding:15px 0;padding-bottom:5px;box-shadow:none;border:0;outline:0;border-top:1px solid transparent;border-bottom:1px solid ", ";color:", ";background-color:transparent;transition:border-color 0.2s
|
|
40
|
+
})(["position:relative;& > input{z-index:0;font-family:'Open sans';display:block;width:100%;height:40px;font-weight:600;font-size:12px;line-height:18px;padding:15px 0;padding-bottom:5px;box-shadow:none;border:0;outline:0;border-top:1px solid transparent;border-bottom:1px solid ", ";color:", ";background-color:transparent;transition:border-color 0.2s;", " &:focus,&:hover{border-top-color:transparent;border-bottom-color:", ";}&::placeholder{color:transparent;opacity:0;}}", " ", ""], function (props) {
|
|
39
41
|
return _theme.default.cGrey;
|
|
40
42
|
}, function (props) {
|
|
41
43
|
return _theme.default.cBlack;
|
|
44
|
+
}, function (props) {
|
|
45
|
+
return props.autoHeightLabel && "\n height:20px;\n padding-top:0;\n ";
|
|
42
46
|
}, function (props) {
|
|
43
47
|
return _theme.default.cPrimary;
|
|
44
48
|
}, function (props) {
|
|
@@ -126,7 +126,7 @@ var InputPassword = function InputPassword(props) {
|
|
|
126
126
|
// <InfoIcon position="bottom" title={info} noMarginLeft />
|
|
127
127
|
// </InfoIconWrapper>
|
|
128
128
|
// )
|
|
129
|
-
_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_InputPassword.CapslockIndicator, null, isCapslockOn &&
|
|
129
|
+
_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_InputPassword.CapslockIndicator, null, isCapslockOn && /*#__PURE__*/_react.default.createElement(_SvgIcons.CapsLockSvg, null))));
|
|
130
130
|
};
|
|
131
131
|
exports.InputPassword = InputPassword;
|
|
132
132
|
InputPassword.propTypes = {
|
|
@@ -37,7 +37,8 @@ var SelectMenuListWithScroll = function SelectMenuListWithScroll(props) {
|
|
|
37
37
|
var children = props.children;
|
|
38
38
|
return /*#__PURE__*/_react.default.createElement(_Select.SelectMenuList, {
|
|
39
39
|
autoHeight: true,
|
|
40
|
-
autoHeightMax: 300
|
|
40
|
+
autoHeightMax: 300,
|
|
41
|
+
fullHeight: true
|
|
41
42
|
}, children);
|
|
42
43
|
};
|
|
43
44
|
SelectMenuListWithScroll.propTypes = {
|
|
@@ -113,22 +114,30 @@ var Select = function Select(props) {
|
|
|
113
114
|
control: function control() {
|
|
114
115
|
return _Select.SelectControl;
|
|
115
116
|
},
|
|
116
|
-
menu: function menu() {
|
|
117
|
-
return
|
|
117
|
+
menu: function menu(baseStyle, state) {
|
|
118
|
+
return _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
119
|
+
marginTop: 0,
|
|
120
|
+
zIndex: 1000,
|
|
121
|
+
SelectMenu: _Select.SelectMenu
|
|
122
|
+
});
|
|
118
123
|
},
|
|
119
|
-
option: function option() {
|
|
120
|
-
return
|
|
124
|
+
option: function option(baseStyle, state) {
|
|
125
|
+
return _objectSpread({
|
|
126
|
+
fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
|
|
127
|
+
cursor: 'pointer'
|
|
128
|
+
}, _Select.SelectOption);
|
|
121
129
|
},
|
|
122
130
|
selectContainer: function selectContainer() {
|
|
123
131
|
return _Select.SelectContainer;
|
|
124
132
|
},
|
|
125
133
|
valueContainer: function valueContainer(baseStyle) {
|
|
126
134
|
return _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
127
|
-
padding: 0
|
|
128
|
-
marginLeft: '-2px'
|
|
135
|
+
padding: 0
|
|
136
|
+
//marginLeft: '-2px',
|
|
129
137
|
});
|
|
130
138
|
}
|
|
131
139
|
},
|
|
140
|
+
|
|
132
141
|
components: {
|
|
133
142
|
DropdownIndicator: DropdownIndicator,
|
|
134
143
|
IndicatorSeparator: null,
|
|
@@ -15,24 +15,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
15
15
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
16
16
|
var SelectControl = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &&& {\n z-index: 10 !important;\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n height: 40px;\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n padding: 15px 0;\n padding-bottom: 5px;\n border-radius: 0;\n box-shadow: none;\n border: 0;\n border-top: 1px solid transparent;\n border-bottom: 1px solid #e1e1e1;\n color: #202020;\n background-color: transparent;\n transition: border-color 0.2s;\n cursor: pointer;\n\n &:hover {\n box-shadow: none;\n border-top-color: transparent;\n border-bottom-color: #0050ca;\n }\n\n &.active {\n z-index: 12 !important;\n }\n }\n"])));
|
|
17
17
|
exports.SelectControl = SelectControl;
|
|
18
|
-
var SelectMenu = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n
|
|
18
|
+
var SelectMenu = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-top: -1px;\n border-radius: 0;\n box-shadow: none;\n border: 0;\n border-top: 1px solid #e1e1e1 !important;\n border-bottom: 1px solid #e1e1e1 !important;\n background-color: #ffffff;\n opacity: 999 !important;\n"])));
|
|
19
19
|
exports.SelectMenu = SelectMenu;
|
|
20
20
|
var SelectMenuList = (0, _styledComponents.default)(_ComponentScroll2.default).withConfig({
|
|
21
21
|
displayName: "Selectstyles__SelectMenuList",
|
|
22
22
|
componentId: "sc-1wc1ybn-0"
|
|
23
|
-
})(["", "{right:6px;}"], _ComponentScroll.TrackV);
|
|
23
|
+
})(["&&&{overflow:hidden;", "{right:6px;}}"], _ComponentScroll.TrackV);
|
|
24
24
|
exports.SelectMenuList = SelectMenuList;
|
|
25
|
-
var SelectOption = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n
|
|
26
|
-
return props.isFocused && "\n font-weight: bold;\n ";
|
|
27
|
-
}, function (props) {
|
|
28
|
-
return props.isSelected && "\n font-weight: bold;\n ";
|
|
29
|
-
});
|
|
25
|
+
var SelectOption = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n cursor: pointer;\n padding: 8px 0 !important;\n padding-left: 4px !important;\n font-size: 12px;\n line-height: 18px;\n border: 0;\n background-color: transparent;\n color: #202020;\n\n &:hover {\n background-color: transparent;\n font-weight: bold;\n }\n"])));
|
|
30
26
|
exports.SelectOption = SelectOption;
|
|
31
27
|
var SelectContainer = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n z-index: 100;\n ", "\n"])), function (props) {
|
|
32
28
|
return props.selectProps.menuIsOpen && "\n z-index: 150 !important;\n ";
|
|
33
29
|
});
|
|
34
30
|
exports.SelectContainer = SelectContainer;
|
|
35
|
-
var SelectValueContainer = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &&& {\n
|
|
31
|
+
var SelectValueContainer = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &&& {\n padding-left: 0;\n margin-left: -2px;\n }\n"])));
|
|
36
32
|
exports.SelectValueContainer = SelectValueContainer;
|
|
37
33
|
var SelectIcon = _styledComponents.default.i.attrs({
|
|
38
34
|
className: 'ion ion-ios-arrow-down'
|
|
@@ -13,11 +13,15 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
13
13
|
var Text = _styledComponents.default.div.withConfig({
|
|
14
14
|
displayName: "Textstyles__Text",
|
|
15
15
|
componentId: "sc-xkpyal-0"
|
|
16
|
-
})(["display:block;", " ", " h1{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.18;letter-spacing:0.8px;text-transform:uppercase;margin-top:1em;margin-bottom:32px;", "}h2{font-family:'Open Sans';font-weight:300;font-size:34px;line-height:1.18em;letter-spacing:1.5px;margin-top:1em;margin-bottom:0.18em;", " ", "}h4{font-family:'Open Sans';font-weight:300;font-size:
|
|
16
|
+
})(["display:block;", " ", " h1{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.18;letter-spacing:0.8px;text-transform:uppercase;margin-top:1em;margin-bottom:32px;", "}h2{font-family:'Open Sans';font-weight:300;font-size:34px;line-height:1.18em;letter-spacing:1.5px;margin-top:1em;margin-bottom:0.18em;", " ", "}h4{font-family:'Open Sans';font-weight:300;font-size:17px;line-height:1.27em;letter-spacing:0.8px;margin-top:1em;margin-bottom:0.27em;opacity:0.5;", " ", "}h3{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;margin-top:1em;margin-bottom:0.27em;text-transform:uppercase;", " @media screen and (max-width:991px) and (min-width:768px){", "}}h5{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;text-transform:uppercase;}p{font-family:'Open Sans';font-weight:300;font-size:16px;line-height:1.5em;letter-spacing:0.6px;margin:1em 0;", " ", " a{text-decoration:underline;transition:color 0.2s;color:", ";&:hover{color:", ";}}", "}ul{margin:16px;li{font-size:14px;font-weight:300;font-style:normal;font-stretch:normal;line-height:2;letter-spacing:0.6px;}@media screen and (max-width:479px){padding-left:15px;}}> *:first-child{margin-top:0;}> *:last-child{margin-bottom:0;}"], function (props) {
|
|
17
17
|
return props.fullWidth && 'width: 100%;';
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.center && "\n text-align: center;\n ";
|
|
20
|
-
}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 34px;\n letter-spacing: 1.5px;\n margin-bottom: 45px;\n "]))), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 42px;\n "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 50px;\n "]))), _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 34px;\n "]))),
|
|
20
|
+
}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 34px;\n letter-spacing: 1.5px;\n margin-bottom: 45px;\n "]))), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 42px;\n "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 50px;\n "]))), _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n //font-size: 34px;\n "]))), function (props) {
|
|
21
|
+
return props.blockchainLoadingMsg && "\n width: 100% !important;\n ";
|
|
22
|
+
}, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 34px;\n "]))), function (props) {
|
|
23
|
+
return props.responsiveFont && "\n font-size: 22px;\n ";
|
|
24
|
+
}, function (props) {
|
|
21
25
|
return props.small && "\n font-size:12px;\n ";
|
|
22
26
|
}, _rwd.default.XLarge(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 20px;\n\n ", "\n\n "])), function (props) {
|
|
23
27
|
return props.small && "\n font-size:16px;\n ";
|
|
@@ -18,7 +18,10 @@ var TransactionInfo = function TransactionInfo(_ref) {
|
|
|
18
18
|
name2 = _ref.name2,
|
|
19
19
|
owner2 = _ref.owner2,
|
|
20
20
|
green = _ref.green,
|
|
21
|
-
red = _ref.red
|
|
21
|
+
red = _ref.red,
|
|
22
|
+
sent = _ref.sent,
|
|
23
|
+
received = _ref.received,
|
|
24
|
+
tokenDecimals = _ref.tokenDecimals;
|
|
22
25
|
return /*#__PURE__*/_react.default.createElement(_TransactionInfo.Container, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Account, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Name, {
|
|
23
26
|
green: green,
|
|
24
27
|
red: red
|