@desynova-digital/components 8.19.33 → 8.19.35
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/label/label.js +33 -3
- package/atoms/textarea/textarea.js +45 -27
- package/molecules/table/table.js +2 -2
- package/package.json +2 -2
package/atoms/label/label.js
CHANGED
|
@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
|
|
7
|
-
var _templateObject = _taggedTemplateLiteral(["\n position: relative;\n padding: 3px;\n border-radius: 2px;\n display: inline-block;\n color: ", ";\n background-color: ", ";\n font-size: 10px;\n line-height: 1;\n text-transform: uppercase;\n font-family: \"SFUIText-Medium\";\n"], ["\n position: relative;\n padding: 3px;\n border-radius: 2px;\n display: inline-block;\n color: ", ";\n background-color: ", ";\n font-size: 10px;\n line-height: 1;\n text-transform: uppercase;\n font-family: \"SFUIText-Medium\";\n"])
|
|
7
|
+
var _templateObject = _taggedTemplateLiteral(["\n position: relative;\n padding: 3px;\n border-radius: 2px;\n display: inline-block;\n color: ", ";\n background-color: ", ";\n font-size: 10px;\n line-height: 1;\n text-transform: uppercase;\n font-family: \"SFUIText-Medium\";\n"], ["\n position: relative;\n padding: 3px;\n border-radius: 2px;\n display: inline-block;\n color: ", ";\n background-color: ", ";\n font-size: 10px;\n line-height: 1;\n text-transform: uppercase;\n font-family: \"SFUIText-Medium\";\n"]),
|
|
8
|
+
_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n width: 60px;\n height: 20px;\n background-color: ", ";\n border-radius: 2px;\n\n .filler {\n position: absolute;\n width: ", ";\n top: 0;\n left: 0;\n height: 100%;\n background-color: ", ";\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n transition: width 0.5s;\n }\n\n .percentage-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ", ";\n font-size: 12px;\n font-weight: 700;\n }\n"], ["\n position: relative;\n width: 60px;\n height: 20px;\n background-color: ", ";\n border-radius: 2px;\n\n .filler {\n position: absolute;\n width: ", ";\n top: 0;\n left: 0;\n height: 100%;\n background-color: ", ";\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n transition: width 0.5s;\n }\n\n .percentage-label {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: ", ";\n font-size: 12px;\n font-weight: 700;\n }\n"]);
|
|
8
9
|
|
|
9
10
|
var _react = require("react");
|
|
10
11
|
|
|
@@ -30,6 +31,20 @@ var LabelStyles = _styledComponents2.default.div(_templateObject, function (_ref
|
|
|
30
31
|
return hex.background || "#AFB2BA";
|
|
31
32
|
});
|
|
32
33
|
|
|
34
|
+
var PercentageBox = _styledComponents2.default.div(_templateObject2, function (_ref3) {
|
|
35
|
+
var percentageField = _ref3.percentageField;
|
|
36
|
+
return percentageField.backgroundColor || '#red';
|
|
37
|
+
}, function (_ref4) {
|
|
38
|
+
var fillerWidth = _ref4.fillerWidth;
|
|
39
|
+
return fillerWidth || '0px';
|
|
40
|
+
}, function (_ref5) {
|
|
41
|
+
var percentageField = _ref5.percentageField;
|
|
42
|
+
return percentageField.fillerColor || '#ccc';
|
|
43
|
+
}, function (_ref6) {
|
|
44
|
+
var percentageField = _ref6.percentageField;
|
|
45
|
+
return percentageField.textColor || '#fff';
|
|
46
|
+
});
|
|
47
|
+
|
|
33
48
|
var LABEL_STYLES = [{
|
|
34
49
|
code: ["cancelled", "error", "failed", "upload_cancelled_by_user", "rejected"],
|
|
35
50
|
hex: {
|
|
@@ -64,9 +79,24 @@ var LABEL_STYLES = [{
|
|
|
64
79
|
}];
|
|
65
80
|
|
|
66
81
|
var Label = function Label(props) {
|
|
67
|
-
var status = props.status
|
|
82
|
+
var status = props.status,
|
|
83
|
+
percentageStatus = props.percentageStatus,
|
|
84
|
+
percentageField = props.percentageField;
|
|
85
|
+
|
|
86
|
+
if (percentageStatus) {
|
|
87
|
+
var value = Math.round(parseFloat(percentageStatus)) + '%';
|
|
88
|
+
return _react2.default.createElement(
|
|
89
|
+
PercentageBox,
|
|
90
|
+
{ fillerWidth: value, percentageField: percentageField },
|
|
91
|
+
_react2.default.createElement("div", { "class": "filler" }),
|
|
92
|
+
_react2.default.createElement(
|
|
93
|
+
"div",
|
|
94
|
+
{ "class": "percentage-label" },
|
|
95
|
+
value
|
|
96
|
+
)
|
|
97
|
+
);
|
|
98
|
+
}
|
|
68
99
|
// eg. status = Upload Cancelled By User
|
|
69
|
-
|
|
70
100
|
var arr = status ? status.toLowerCase().split(" ") : []; // [upload, cancelled, by, user]
|
|
71
101
|
var formatted = arr.reduce(function (acc, curr, index, org) {
|
|
72
102
|
if (index + 1 === arr.length) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
@@ -6,23 +6,24 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
|
|
7
7
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
8
8
|
|
|
9
|
-
var _templateObject = _taggedTemplateLiteral([
|
|
10
|
-
_templateObject2 = _taggedTemplateLiteral([
|
|
11
|
-
_templateObject3 = _taggedTemplateLiteral([
|
|
9
|
+
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: ", ";\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 > textarea:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n > textarea ~ label.floaton {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: ", ";\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: ", ";\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 > textarea:focus ~ label {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n > textarea ~ label.floaton {\n top: -10px;\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n"]),
|
|
10
|
+
_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"]),
|
|
11
|
+
_templateObject3 = _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"]),
|
|
12
|
+
_templateObject4 = _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: 7px 0px 2px;\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: 7px 0px 2px;\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"]);
|
|
12
13
|
|
|
13
|
-
var _react = require(
|
|
14
|
+
var _react = require("react");
|
|
14
15
|
|
|
15
16
|
var _react2 = _interopRequireDefault(_react);
|
|
16
17
|
|
|
17
|
-
var _styledComponents = require(
|
|
18
|
+
var _styledComponents = require("styled-components");
|
|
18
19
|
|
|
19
20
|
var _styledComponents2 = _interopRequireDefault(_styledComponents);
|
|
20
21
|
|
|
21
|
-
var _propTypes = require(
|
|
22
|
+
var _propTypes = require("prop-types");
|
|
22
23
|
|
|
23
24
|
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
24
25
|
|
|
25
|
-
var _tokens = require(
|
|
26
|
+
var _tokens = require("@desynova-digital/tokens");
|
|
26
27
|
|
|
27
28
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
28
29
|
|
|
@@ -42,14 +43,18 @@ var InputError = _styledComponents2.default.span(_templateObject2, function (pro
|
|
|
42
43
|
return _tokens.colors[props.theme].inputError.color;
|
|
43
44
|
});
|
|
44
45
|
|
|
46
|
+
var CountWrappper = _styledComponents2.default.div(_templateObject3);
|
|
47
|
+
|
|
45
48
|
var Textarea = function Textarea(_ref) {
|
|
46
49
|
var defaultValue = _ref.defaultValue,
|
|
50
|
+
maxlength = _ref.maxlength,
|
|
51
|
+
showLengthCount = _ref.showLengthCount,
|
|
47
52
|
type = _ref.type,
|
|
48
|
-
props = _objectWithoutProperties(_ref, [
|
|
53
|
+
props = _objectWithoutProperties(_ref, ["defaultValue", "maxlength", "showLengthCount", "type"]);
|
|
49
54
|
|
|
50
55
|
if (props.masked) {
|
|
51
56
|
var length = defaultValue ? defaultValue.length : 8;
|
|
52
|
-
var maskedValue = new Array(length).join(
|
|
57
|
+
var maskedValue = new Array(length).join("•");
|
|
53
58
|
return _react2.default.createElement(Textarea.Element, _extends({
|
|
54
59
|
value: props.value,
|
|
55
60
|
type: type
|
|
@@ -68,24 +73,35 @@ var Textarea = function Textarea(_ref) {
|
|
|
68
73
|
return _react2.default.createElement(
|
|
69
74
|
TextareaDiv,
|
|
70
75
|
{ theme: props.theme },
|
|
71
|
-
_react2.default.createElement(Textarea.Element, _extends({
|
|
76
|
+
_react2.default.createElement(Textarea.Element, _extends({
|
|
77
|
+
type: type,
|
|
78
|
+
value: props.value,
|
|
79
|
+
defaultValue: defaultValue
|
|
80
|
+
}, props)),
|
|
72
81
|
props.label ? _react2.default.createElement(
|
|
73
|
-
|
|
82
|
+
"label",
|
|
74
83
|
{
|
|
75
84
|
htmlFor: props.id,
|
|
76
|
-
className: props.value && props.value.length > 0 ?
|
|
85
|
+
className: props.value && props.value.length > 0 ? "floaton" : ""
|
|
77
86
|
},
|
|
78
|
-
|
|
79
|
-
) :
|
|
87
|
+
"" + props.label + (props.isRequired ? "*" : "")
|
|
88
|
+
) : "",
|
|
80
89
|
errorMesssage ? _react2.default.createElement(
|
|
81
90
|
InputError,
|
|
82
91
|
{ value: props.value, theme: props.theme, error: props.error },
|
|
83
92
|
errorMesssage
|
|
84
|
-
) :
|
|
93
|
+
) : "",
|
|
94
|
+
maxlength && showLengthCount && _react2.default.createElement(
|
|
95
|
+
CountWrappper,
|
|
96
|
+
null,
|
|
97
|
+
props.value.length,
|
|
98
|
+
"/",
|
|
99
|
+
maxlength
|
|
100
|
+
)
|
|
85
101
|
);
|
|
86
102
|
};
|
|
87
103
|
|
|
88
|
-
Textarea.Element = _styledComponents2.default.textarea(
|
|
104
|
+
Textarea.Element = _styledComponents2.default.textarea(_templateObject4, function (props) {
|
|
89
105
|
return _tokens.colors[props.theme].inputCommon.background;
|
|
90
106
|
}, function (props) {
|
|
91
107
|
if (props.error) {
|
|
@@ -96,7 +112,7 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject3, functio
|
|
|
96
112
|
}, function (props) {
|
|
97
113
|
return _tokens.colors[props.theme].inputCommon.color;
|
|
98
114
|
}, function (props) {
|
|
99
|
-
return props.readOnly ?
|
|
115
|
+
return props.readOnly ? "not-allowed" : "text";
|
|
100
116
|
}, function (props) {
|
|
101
117
|
if (props.error) {
|
|
102
118
|
return _tokens.colors[props.theme].inputError.borderHover;
|
|
@@ -110,11 +126,11 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject3, functio
|
|
|
110
126
|
}, function (props) {
|
|
111
127
|
return _tokens.colors[props.theme].inputCommon.colorDisabled;
|
|
112
128
|
}, function (props) {
|
|
113
|
-
return props.label ?
|
|
129
|
+
return props.label ? "transparent" : function (props) {
|
|
114
130
|
return _tokens.colors[props.theme].inputCommon.placeholder;
|
|
115
131
|
};
|
|
116
132
|
}, function (props) {
|
|
117
|
-
return props.label ?
|
|
133
|
+
return props.label ? "0" : "1";
|
|
118
134
|
}, function (props) {
|
|
119
135
|
return props.placeholder ? function (props) {
|
|
120
136
|
return _tokens.colors[props.theme].inputCommon.placeholder;
|
|
@@ -122,7 +138,7 @@ Textarea.Element = _styledComponents2.default.textarea(_templateObject3, functio
|
|
|
122
138
|
return _tokens.colors[props.theme].inputCommon.placeholder;
|
|
123
139
|
};
|
|
124
140
|
}, function (props) {
|
|
125
|
-
return props.placeholder ?
|
|
141
|
+
return props.placeholder ? "1" : "1";
|
|
126
142
|
});
|
|
127
143
|
|
|
128
144
|
Textarea.propTypes = {
|
|
@@ -148,9 +164,10 @@ Textarea.propTypes = {
|
|
|
148
164
|
/** The (HTML) maxlength for the textarea. */
|
|
149
165
|
maxlength: _propTypes2.default.number,
|
|
150
166
|
|
|
151
|
-
theme: _propTypes2.default.oneOf([
|
|
167
|
+
theme: _propTypes2.default.oneOf(["light", "dark"]),
|
|
152
168
|
|
|
153
|
-
row: _propTypes2.default.number
|
|
169
|
+
row: _propTypes2.default.number,
|
|
170
|
+
showLengthCount: _propTypes2.default.bool
|
|
154
171
|
|
|
155
172
|
/** deprecate error string prop */
|
|
156
173
|
// _error: props => deprecate(props, { name: 'error', replacement: 'hasError' })
|
|
@@ -161,11 +178,12 @@ Textarea.defaultProps = {
|
|
|
161
178
|
code: false,
|
|
162
179
|
error: null,
|
|
163
180
|
onChange: null,
|
|
164
|
-
type:
|
|
181
|
+
type: "text",
|
|
165
182
|
maxlength: 50,
|
|
166
|
-
theme:
|
|
167
|
-
value:
|
|
168
|
-
rows: 3
|
|
183
|
+
theme: "light",
|
|
184
|
+
value: "",
|
|
185
|
+
rows: 3,
|
|
186
|
+
showLengthCount: false
|
|
169
187
|
};
|
|
170
188
|
|
|
171
189
|
exports.default = Textarea;
|
package/molecules/table/table.js
CHANGED
|
@@ -462,10 +462,10 @@ var Table = function (_Component) {
|
|
|
462
462
|
if (tableLoading) {
|
|
463
463
|
return _react2.default.createElement(_Shimmer2.default, { height: "16px", width: "100%" });
|
|
464
464
|
} else {
|
|
465
|
-
if (item[column.field]) {
|
|
465
|
+
if (item[column.field] || column.percentageField && column.percentageField.field && item[column.percentageField.field]) {
|
|
466
466
|
return _react2.default.createElement(
|
|
467
467
|
_label2.default,
|
|
468
|
-
{ status: item[column.field] },
|
|
468
|
+
{ percentageStatus: column.percentageField && column.percentageField.field && item[column.percentageField.field], percentageField: column.percentageField, status: item[column.field] },
|
|
469
469
|
item[column.field]
|
|
470
470
|
);
|
|
471
471
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.19.
|
|
3
|
+
"version": "8.19.35",
|
|
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.35",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|