@desynova-digital/components 8.11.0 → 8.13.0
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 +5 -0
- package/atoms/popup/popup.js +38 -12
- package/atoms/popup/popup.story.js +6 -1
- package/package.json +2 -2
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
|
}
|
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 }\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 }\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,39 @@ 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 ? _react2.default.createElement(
|
|
156
|
+
'div',
|
|
157
|
+
{ className: 'display-flex pr-20' },
|
|
158
|
+
_react2.default.createElement(_button2.default, {
|
|
159
|
+
appearance: 'cta',
|
|
160
|
+
iconWidth: 18,
|
|
161
|
+
iconHeight: 18,
|
|
162
|
+
icon: 'users',
|
|
163
|
+
iconBackground: 'tansparent',
|
|
164
|
+
onClick: function onClick() {
|
|
165
|
+
openPopup('SHARED_USERS');
|
|
166
|
+
}
|
|
167
|
+
}),
|
|
168
|
+
_react2.default.createElement(
|
|
169
|
+
'p',
|
|
170
|
+
{ className: 'count-wrapper' },
|
|
171
|
+
sharedUserCount
|
|
172
|
+
)
|
|
173
|
+
) : null,
|
|
174
|
+
_react2.default.createElement(_button2.default, {
|
|
175
|
+
appearance: 'cta',
|
|
176
|
+
iconWidth: 12,
|
|
177
|
+
iconHeight: 12,
|
|
178
|
+
icon: 'cross',
|
|
179
|
+
iconBackground: 'tansparent',
|
|
180
|
+
onClick: function onClick() {
|
|
181
|
+
_this2.cancelClick();
|
|
182
|
+
}
|
|
183
|
+
})
|
|
184
|
+
)
|
|
159
185
|
),
|
|
160
186
|
_react2.default.createElement(
|
|
161
187
|
'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.0",
|
|
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.0",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|