@desynova-digital/components 8.10.3 → 8.13.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/atoms/icon/icons.json
CHANGED
|
@@ -1265,6 +1265,11 @@
|
|
|
1265
1265
|
"paths" :["M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"],
|
|
1266
1266
|
"width": 24,
|
|
1267
1267
|
"height": 24
|
|
1268
|
+
},
|
|
1269
|
+
"users":{
|
|
1270
|
+
"paths":["M6.75 10.3125C4.995 10.3125 1.5 11.19 1.5 12.9375V14.25H12V12.9375C12 11.19 8.505 10.3125 6.75 10.3125ZM3.255 12.75C3.885 12.315 5.4075 11.8125 6.75 11.8125C8.0925 11.8125 9.615 12.315 10.245 12.75H3.255ZM6.75 9C8.1975 9 9.375 7.8225 9.375 6.375C9.375 4.9275 8.1975 3.75 6.75 3.75C5.3025 3.75 4.125 4.9275 4.125 6.375C4.125 7.8225 5.3025 9 6.75 9ZM6.75 5.25C7.3725 5.25 7.875 5.7525 7.875 6.375C7.875 6.9975 7.3725 7.5 6.75 7.5C6.1275 7.5 5.625 6.9975 5.625 6.375C5.625 5.7525 6.1275 5.25 6.75 5.25ZM12.03 10.3575C12.9 10.9875 13.5 11.8275 13.5 12.9375V14.25H16.5V12.9375C16.5 11.4225 13.875 10.56 12.03 10.3575ZM11.25 9C12.6975 9 13.875 7.8225 13.875 6.375C13.875 4.9275 12.6975 3.75 11.25 3.75C10.845 3.75 10.47 3.8475 10.125 4.0125C10.5975 4.68 10.875 5.4975 10.875 6.375C10.875 7.2525 10.5975 8.07 10.125 8.7375C10.47 8.9025 10.845 9 11.25 9Z"],
|
|
1271
|
+
"width":18,
|
|
1272
|
+
"height":18
|
|
1268
1273
|
}
|
|
1269
1274
|
}
|
|
1270
1275
|
}
|
|
@@ -8,7 +8,7 @@ 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(['\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\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\n > input ~ label.floaton {\n top: -5px;\n left: 0px;\n font-size: 10px;\n color: #999999;\n text-transform: capitalize;\n }\n']),
|
|
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 &:first-letter {\n text-transform: ', '\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 &:first-letter {\n text-transform: ', '\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
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
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
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']),
|
|
@@ -38,7 +38,9 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
|
|
|
38
38
|
|
|
39
39
|
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
40
40
|
|
|
41
|
-
var InputTextDiv = _styledComponents2.default.div(_templateObject)
|
|
41
|
+
var InputTextDiv = _styledComponents2.default.div(_templateObject, function (props) {
|
|
42
|
+
return props.capitalizeFirstLetter ? 'capitalize' : '';
|
|
43
|
+
});
|
|
42
44
|
|
|
43
45
|
var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
|
|
44
46
|
return _tokens.colors[props.theme].inputError.color;
|
|
@@ -53,7 +55,8 @@ var InputText = function InputText(_ref) {
|
|
|
53
55
|
defaultValue = _ref.defaultValue,
|
|
54
56
|
type = _ref.type,
|
|
55
57
|
showLengthCount = _ref.showLengthCount,
|
|
56
|
-
|
|
58
|
+
capitalizeFirstLetter = _ref.capitalizeFirstLetter,
|
|
59
|
+
props = _objectWithoutProperties(_ref, ['maxlength', 'defaultValue', 'type', 'showLengthCount', 'capitalizeFirstLetter']);
|
|
57
60
|
|
|
58
61
|
var _useState = (0, _react.useState)(true),
|
|
59
62
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -85,7 +88,7 @@ var InputText = function InputText(_ref) {
|
|
|
85
88
|
|
|
86
89
|
return _react2.default.createElement(
|
|
87
90
|
InputTextDiv,
|
|
88
|
-
{ theme: props.theme },
|
|
91
|
+
{ theme: props.theme, capitalizeFirstLetter: capitalizeFirstLetter || '' },
|
|
89
92
|
_react2.default.createElement(InputText.Element, _extends({ type: hidden ? type : 'text', value: props.value, defaultValue: defaultValue }, props, { maxLength: maxlength || '' })),
|
|
90
93
|
props.label ? _react2.default.createElement(
|
|
91
94
|
'label',
|
|
@@ -195,6 +198,7 @@ InputText.propTypes = {
|
|
|
195
198
|
/** The (HTML) maxlength for the input. */
|
|
196
199
|
maxlength: _propTypes2.default.number,
|
|
197
200
|
showLengthCount: _propTypes2.default.bool,
|
|
201
|
+
capitalizeFirstLetter: _propTypes2.default.bool,
|
|
198
202
|
theme: _propTypes2.default.oneOf(['light', 'dark'])
|
|
199
203
|
|
|
200
204
|
/** deprecate error string prop */
|
|
@@ -66,14 +66,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
66
66
|
return console.log(e.target.value);
|
|
67
67
|
}, placeholder: 'Enter Name max 10', required: true }),
|
|
68
68
|
_react2.default.createElement(_components.InputText, { theme: 'dark', type: 'password', label: 'Middle Name', minLength: 3, maxLength: 6, placeholder: 'Show as password', required: true }),
|
|
69
|
-
_react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', value: "hello", label: 'Label and default value', required: true })
|
|
69
|
+
_react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', value: "hello there i am using", label: 'Label and default value', required: true })
|
|
70
70
|
),
|
|
71
71
|
_react2.default.createElement(
|
|
72
72
|
_storyHelpers.Stack,
|
|
73
73
|
null,
|
|
74
74
|
_react2.default.createElement(_components.InputText, { theme: 'dark', type: 'number', placeholder: 'number field & no Label', required: true, maxLength: 10 }),
|
|
75
75
|
_react2.default.createElement(_components.InputText, { theme: 'dark', type: 'number', id: 'input-text-1', label: 'Label \'For\'-\'id\' prop', placeholder: 'No Label & Number Field', required: true, maxLength: 10 }),
|
|
76
|
-
_react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', value: "
|
|
76
|
+
_react2.default.createElement(_components.InputText, { theme: 'dark', capitalizeFirstLetter: true, type: 'text', value: "no label and default value", onChange: function onChange(e) {
|
|
77
77
|
alert("some Handler code");
|
|
78
78
|
}, placeholder: 'Placeholder text', required: true })
|
|
79
79
|
),
|
package/atoms/popup/popup.js
CHANGED
|
@@ -10,7 +10,7 @@ var _templateObject = _taggedTemplateLiteral(['\n margin: 0;\n'], ['\n margin:
|
|
|
10
10
|
_templateObject2 = _taggedTemplateLiteral(['\n margin: 0;\n background: ', ';\n border-color: ', ';\n color: ', ';\n transition: all 0.4s ease-in-out;\n &:hover {\n background: ', ';\n border-color: ', ';\n box-shadow: none;\n color: ', ';\n }\n'], ['\n margin: 0;\n background: ', ';\n border-color: ', ';\n color: ', ';\n transition: all 0.4s ease-in-out;\n &:hover {\n background: ', ';\n border-color: ', ';\n box-shadow: none;\n color: ', ';\n }\n']),
|
|
11
11
|
_templateObject3 = _taggedTemplateLiteral(['\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1000;\n'], ['\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 1000;\n']),
|
|
12
12
|
_templateObject4 = _taggedTemplateLiteral(['\n background: ', ';\n width: 100%;\n height: 100%;\n'], ['\n background: ', ';\n width: 100%;\n height: 100%;\n']),
|
|
13
|
-
_templateObject5 = _taggedTemplateLiteral(['\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width:
|
|
13
|
+
_templateObject5 = _taggedTemplateLiteral(['\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width: 440px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n\n width: 440px;\n border-radius: 10px;\n background: ', ';\n\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n box-sizing: border-box;\n padding: 40px;\n\n .header-title {\n font-family: SFUIText-Light;\n font-size: 18px;\n line-height: 1;\n color: ', ';\n }\n .display-flex {\n display: flex;\n .pr-20{\n padding-right: 20px;\n }\n }\n .count-wrapper {\n font-size: 14px;\n line-height: 24px;\n color: #AFB2BA;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n path {\n fill: ', ';\n }\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n .popup-body {\n padding: 0 40px 40px 40px;\n .popup-action-block {\n margin: 0 auto;\n display: flex;\n justify-content: center;\n \n button {\n padding: 10px 0;\n margin: 0 10px;\n min-width: 150px;\n }\n }\n .popup-message {\n font-family: SFUIText-Light;\n font-size: 14px;\n line-height: 1.5;\n text-align: center;\n color: ', ';\n margin-bottom: 40px;\n }\n }\n\n .loading-box{\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: wait;\n background-color: rgb(21 21 21 / 60%);\n border-radius: 10px;\n }\n'], ['\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width: 440px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n\n width: 440px;\n border-radius: 10px;\n background: ', ';\n\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n box-sizing: border-box;\n padding: 40px;\n\n .header-title {\n font-family: SFUIText-Light;\n font-size: 18px;\n line-height: 1;\n color: ', ';\n }\n .display-flex {\n display: flex;\n .pr-20{\n padding-right: 20px;\n }\n }\n .count-wrapper {\n font-size: 14px;\n line-height: 24px;\n color: #AFB2BA;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n path {\n fill: ', ';\n }\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n .popup-body {\n padding: 0 40px 40px 40px;\n .popup-action-block {\n margin: 0 auto;\n display: flex;\n justify-content: center;\n \n button {\n padding: 10px 0;\n margin: 0 10px;\n min-width: 150px;\n }\n }\n .popup-message {\n font-family: SFUIText-Light;\n font-size: 14px;\n line-height: 1.5;\n text-align: center;\n color: ', ';\n margin-bottom: 40px;\n }\n }\n\n .loading-box{\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: wait;\n background-color: rgb(21 21 21 / 60%);\n border-radius: 10px;\n }\n']);
|
|
14
14
|
|
|
15
15
|
var _react = require('react');
|
|
16
16
|
|
|
@@ -121,7 +121,10 @@ var Popup = function (_Component) {
|
|
|
121
121
|
acceptButtonText = _props.acceptButtonText,
|
|
122
122
|
cancelButtonText = _props.cancelButtonText,
|
|
123
123
|
loading = _props.loading,
|
|
124
|
-
loaderName = _props.loaderName
|
|
124
|
+
loaderName = _props.loaderName,
|
|
125
|
+
showSharedUsers = _props.showSharedUsers,
|
|
126
|
+
sharedUserCount = _props.sharedUserCount,
|
|
127
|
+
openPopup = _props.openPopup;
|
|
125
128
|
|
|
126
129
|
return _react2.default.createElement(
|
|
127
130
|
_react2.default.Fragment,
|
|
@@ -146,16 +149,42 @@ var Popup = function (_Component) {
|
|
|
146
149
|
{ className: 'header-title' },
|
|
147
150
|
title
|
|
148
151
|
),
|
|
149
|
-
_react2.default.createElement(
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
152
|
+
_react2.default.createElement(
|
|
153
|
+
'div',
|
|
154
|
+
{ className: 'display-flex' },
|
|
155
|
+
showSharedUsers && sharedUserCount > 0 ? _react2.default.createElement(
|
|
156
|
+
'div',
|
|
157
|
+
{
|
|
158
|
+
className: 'display-flex pr-20',
|
|
159
|
+
onClick: function onClick() {
|
|
160
|
+
openPopup('SHARED_USERS');
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
_react2.default.createElement(_button2.default, {
|
|
164
|
+
appearance: 'cta',
|
|
165
|
+
iconWidth: 18,
|
|
166
|
+
iconHeight: 18,
|
|
167
|
+
icon: 'users',
|
|
168
|
+
iconBackground: 'tansparent'
|
|
169
|
+
|
|
170
|
+
}),
|
|
171
|
+
_react2.default.createElement(
|
|
172
|
+
'p',
|
|
173
|
+
{ className: 'count-wrapper' },
|
|
174
|
+
sharedUserCount
|
|
175
|
+
)
|
|
176
|
+
) : null,
|
|
177
|
+
_react2.default.createElement(_button2.default, {
|
|
178
|
+
appearance: 'cta',
|
|
179
|
+
iconWidth: 12,
|
|
180
|
+
iconHeight: 12,
|
|
181
|
+
icon: 'cross',
|
|
182
|
+
iconBackground: 'tansparent',
|
|
183
|
+
onClick: function onClick() {
|
|
184
|
+
_this2.cancelClick();
|
|
185
|
+
}
|
|
186
|
+
})
|
|
187
|
+
)
|
|
159
188
|
),
|
|
160
189
|
_react2.default.createElement(
|
|
161
190
|
'div',
|
|
@@ -33,7 +33,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
33
33
|
onCancelClick: function onCancelClick() {
|
|
34
34
|
console.log('onCancelClick func() called...');
|
|
35
35
|
},
|
|
36
|
-
theme: 'dark'
|
|
36
|
+
theme: 'dark',
|
|
37
|
+
showSharedUsers: true,
|
|
38
|
+
sharedUserCount: 5,
|
|
39
|
+
openPopup: function openPopup(view) {
|
|
40
|
+
return console.log(view);
|
|
41
|
+
}
|
|
37
42
|
})
|
|
38
43
|
)
|
|
39
44
|
);
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.13.1",
|
|
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.
|
|
10
|
+
"@desynova-digital/tokens": "8.13.1",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|