@desynova-digital/components 8.19.32 → 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/icon/icons.json +7 -0
- 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/icon/icons.json
CHANGED
|
@@ -1544,6 +1544,13 @@
|
|
|
1544
1544
|
"clipRule": "evenodd",
|
|
1545
1545
|
"width": 21,
|
|
1546
1546
|
"height":16
|
|
1547
|
+
},
|
|
1548
|
+
"export-download-icon": {
|
|
1549
|
+
"paths": [
|
|
1550
|
+
"M7.35685 14.632C6.51241 14.5431 5.72907 14.3098 5.00685 13.932C4.28463 13.5543 3.65963 13.0654 3.13185 12.4654C2.60407 11.8654 2.19019 11.182 1.89019 10.4154C1.59019 9.6487 1.44019 8.83759 1.44019 7.98203C1.44019 6.25981 2.00407 4.76536 3.13185 3.4987C4.25963 2.23203 5.67352 1.50981 7.37352 1.33203V2.33203C5.9513 2.54314 4.77352 3.18203 3.84019 4.2487C2.90685 5.31536 2.44019 6.55981 2.44019 7.98203C2.44019 9.40425 2.90407 10.6487 3.83185 11.7154C4.75963 12.782 5.93463 13.4209 7.35685 13.632V14.632ZM8.09019 11.332L4.75685 7.9987L5.47352 7.28203L7.59019 9.3987V4.66536H8.59019V9.3987L10.7069 7.28203L11.4235 7.9987L8.09019 11.332ZM8.82352 14.632V13.632C9.33463 13.5654 9.8263 13.4348 10.2985 13.2404C10.7707 13.0459 11.2069 12.7876 11.6069 12.4654L12.3402 13.1987C11.8291 13.5876 11.2763 13.9098 10.6819 14.1654C10.0874 14.4209 9.46796 14.5765 8.82352 14.632ZM11.6235 3.51536C11.2013 3.21536 10.7569 2.96259 10.2902 2.75703C9.82352 2.55148 9.33463 2.40981 8.82352 2.33203V1.33203C9.46796 1.40981 10.0846 1.5737 10.6735 1.8237C11.2624 2.0737 11.818 2.39314 12.3402 2.78203L11.6235 3.51536ZM13.2902 12.1654L12.5735 11.4654C12.8957 11.0543 13.1513 10.6126 13.3402 10.1404C13.5291 9.66814 13.6569 9.17648 13.7235 8.66536H14.7402C14.6624 9.30981 14.5013 9.92925 14.2569 10.5237C14.0124 11.1181 13.6902 11.6654 13.2902 12.1654ZM13.7235 7.2987C13.6569 6.78759 13.5291 6.29314 13.3402 5.81536C13.1513 5.33759 12.8957 4.8987 12.5735 4.4987L13.3569 3.81536C13.7457 4.32648 14.0569 4.87648 14.2902 5.46536C14.5235 6.05425 14.6735 6.66536 14.7402 7.2987H13.7235Z"
|
|
1551
|
+
],
|
|
1552
|
+
"width": 17,
|
|
1553
|
+
"height":16
|
|
1547
1554
|
}
|
|
1548
1555
|
}
|
|
1549
1556
|
}
|
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
|
},
|