@desynova-digital/components 8.16.0 → 8.17.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/cardV2/content.js
CHANGED
|
@@ -12,7 +12,7 @@ var _templateObject = _taggedTemplateLiteral(["\n display: -webkit-box;\n -web
|
|
|
12
12
|
_templateObject2 = _taggedTemplateLiteral(["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"], ["\n font-family: SFUIText-Regular;\n top: ", ";\n word-break: break-all;\n\n &:after {\n content: \"\";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -5px;\n border-width: 5px;\n border-style: solid;\n border-color: transparent transparent #000;\n }\n"]),
|
|
13
13
|
_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"], ["\n ", ";\n padding: 0;\n margin-right: 10px;\n font-size: 10px;\n color: #afb2ba;\n -webkit-line-clamp: 1;\n height: 10px;\n"]),
|
|
14
14
|
_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"], ["\n ", ";\n font-family: SFUIText-Medium;\n -webkit-line-clamp: 2;\n height: 27px;\n cursor: ", ";\n"]),
|
|
15
|
-
_templateObject5 = _taggedTemplateLiteral(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:
|
|
15
|
+
_templateObject5 = _taggedTemplateLiteral(["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:165px;\n overflow:scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n \n .divider{\n height:1px;\n width:100%;\n margin:10px 0;\n background:#303F51;\n }\n .header-container{\n display:flex;\n position:relative;\n .thumbnail{\n width:100px;\n height:55px;\n background-size:cover !important;\n background-repeat:no-repeat !important;\n margin-right:10px;\n border-radius:2px;\n }\n .episod-title{\n font-size:12px;\n margin-bottom:8px;\n max-width:180px;\n line-height:14px;\n color:#fff;\n }\n .episod-details{\n font-size:10px;\n color:#AFB2BA;\n }\n }\n \n .overlappig-popup-title{\n font-size: 12px;\n line-height: 12px;\n color: #AFB2BA;\n margin-bottom:15px;\n }\n }\n }\n \n\n\n :hover{\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"], ["\n height: 74px;\n width: ", ";\n padding: ", ";\n background-color: ", ";\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: \" \";\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: rgb(0, 206, 198);\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container{\n position:absolute;\n bottom:100%;\n margin-right:110px;\n pointer-events: none;\n opacity:0;\n transition: opacity 0.3s ease-out;\n padding-bottom:10px;\n\n .overlappig-popup{\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding:12px;\n width:300px;\n z-index:10;\n\n .popup-pointer{\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid #00cec6;\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n \n .overlapping-episod-list-container{\n max-height:165px;\n overflow:scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n \n .divider{\n height:1px;\n width:100%;\n margin:10px 0;\n background:#303F51;\n }\n .header-container{\n display:flex;\n position:relative;\n .thumbnail{\n width:100px;\n height:55px;\n background-size:cover !important;\n background-repeat:no-repeat !important;\n margin-right:10px;\n border-radius:2px;\n }\n .episod-title{\n font-size:12px;\n margin-bottom:8px;\n max-width:180px;\n line-height:14px;\n color:#fff;\n }\n .episod-details{\n font-size:10px;\n color:#AFB2BA;\n }\n }\n \n .overlappig-popup-title{\n font-size: 12px;\n line-height: 12px;\n color: #AFB2BA;\n margin-bottom:15px;\n }\n }\n }\n \n\n\n :hover{\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px\n }\n }\n"]);
|
|
16
16
|
|
|
17
17
|
var _react = require("react");
|
|
18
18
|
|
package/atoms/icon/icon.story.js
CHANGED
|
@@ -98,7 +98,8 @@ console.log(iconsArr);
|
|
|
98
98
|
_react2.default.createElement(_components.Icon, { name: "triangle-double-right", width: 14, height: 13 }),
|
|
99
99
|
_react2.default.createElement(_components.Icon, { name: "delete", width: 12, height: 14 }),
|
|
100
100
|
_react2.default.createElement(_components.Icon, { name: "promo_review", width: 16, height: 14 }),
|
|
101
|
-
_react2.default.createElement(_components.Icon, { name: "data-refresh", width: 16, height: 18 })
|
|
101
|
+
_react2.default.createElement(_components.Icon, { name: "data-refresh", width: 16, height: 18 }),
|
|
102
|
+
_react2.default.createElement(_components.Icon, { name: "back-to-back", width: 16, height: 18 })
|
|
102
103
|
)
|
|
103
104
|
);
|
|
104
105
|
});
|
|
@@ -155,7 +156,8 @@ console.log(iconsArr);
|
|
|
155
156
|
_react2.default.createElement(_components.Icon, { name: "align_middle", width: 16, height: 16 }),
|
|
156
157
|
_react2.default.createElement(_components.Icon, { name: "align_right", width: 16, height: 16 }),
|
|
157
158
|
_react2.default.createElement(_components.Icon, { name: "comment", width: 13, height: 13 }),
|
|
158
|
-
_react2.default.createElement(_components.Icon, { name: "cut", width: 14, height: 15 })
|
|
159
|
+
_react2.default.createElement(_components.Icon, { name: "cut", width: 14, height: 15 }),
|
|
160
|
+
_react2.default.createElement(_components.Icon, { name: "back-to-back", width: 14, height: 15 })
|
|
159
161
|
)
|
|
160
162
|
);
|
|
161
163
|
});
|
|
@@ -205,7 +207,8 @@ console.log(iconsArr);
|
|
|
205
207
|
_react2.default.createElement(_components.Icon, { name: "upload-arrow", width: 12, height: 18 }),
|
|
206
208
|
_react2.default.createElement(_components.Icon, { name: "log-out", width: 12, height: 12 }),
|
|
207
209
|
_react2.default.createElement(_components.Icon, { name: "brief", width: 14, height: 12 }),
|
|
208
|
-
_react2.default.createElement(_components.Icon, { name: "upload-asset", width: 24, height: 24 })
|
|
210
|
+
_react2.default.createElement(_components.Icon, { name: "upload-asset", width: 24, height: 24 }),
|
|
211
|
+
_react2.default.createElement(_components.Icon, { name: "back-to-back", width: 14, height: 15 })
|
|
209
212
|
)
|
|
210
213
|
);
|
|
211
214
|
});
|
package/atoms/icon/icons.json
CHANGED
|
@@ -1363,6 +1363,14 @@
|
|
|
1363
1363
|
"width": 24,
|
|
1364
1364
|
"height": 24
|
|
1365
1365
|
},
|
|
1366
|
+
"back-to-back": {
|
|
1367
|
+
"paths": [
|
|
1368
|
+
"M1.49967 11.2707L0.395508 10.7082L5.45801 0.729004L6.56217 1.2915L1.49967 11.2707ZM6.99967 11.2707L5.89551 10.7082L10.958 0.729004L12.0622 1.2915L6.99967 11.2707ZM12.4997 11.2707L11.3955 10.7082L16.458 0.729004L17.5622 1.2915L12.4997 11.2707Z"
|
|
1369
|
+
],
|
|
1370
|
+
"fillRule": "nonzero",
|
|
1371
|
+
"width": 24,
|
|
1372
|
+
"height": 12
|
|
1373
|
+
},
|
|
1366
1374
|
"users": {
|
|
1367
1375
|
"paths": [
|
|
1368
1376
|
"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"
|
package/atoms/sideBar/sidebar.js
CHANGED
|
@@ -9,8 +9,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
9
9
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
10
10
|
|
|
11
11
|
var _templateObject = _taggedTemplateLiteral(['\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.5);\n z-index: 100;\n visibility: ', ';\n'], ['\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.5);\n z-index: 100;\n visibility: ', ';\n']),
|
|
12
|
-
_templateObject2 = _taggedTemplateLiteral(['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n'], ['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n']),
|
|
13
|
-
_templateObject3 = _taggedTemplateLiteral(['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n'], ['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n']);
|
|
12
|
+
_templateObject2 = _taggedTemplateLiteral(['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n\n .ball{\n background-color:#151717\n }\n\n .circle{\n border:4px solid #1d2020;\n height:10px;\n width:10px\n }\n\n div.loader-holder > div{\n height:20px;\n margin-left:5px;\n }\n\n .parentBox{\n width:18px;\n height:18px;\n }\n\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n'], ['\n height: 100%;\n position: fixed;\n z-index: 101;\n top: 0;\n right: 0px;\n background-color: #121D29;\n box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n width:0px;\n\n transition: width 250ms ease-in-out;\n\n .ball{\n background-color:#151717\n }\n\n .circle{\n border:4px solid #1d2020;\n height:10px;\n width:10px\n }\n\n div.loader-holder > div{\n height:20px;\n margin-left:5px;\n }\n\n .parentBox{\n width:18px;\n height:18px;\n }\n\n &.open{\n width:400px;\n .sidebar-header, .bodyContainer, .button-container {\n opacity: 1;\n }\n }\n\n .sidebar-header {\n transition: opacity 50ms ease-in-out 250ms;\n opacity:0;\n padding:20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n \n .header-title {\n font-family: SFUIText-Light;\n line-height: 14px;\n font-size: 16px;\n line-height: 14px;\n color: #FFFFFF;\n }\n ', ' {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n\n\n .bodyContainer {\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n color:white;\n font-family: SFUIText-Regular;\n overflow-y: scroll;\n overflow-x: hidden;\n height: calc(100% - 110px);\n padding:0px 20px 0px 20px;\n overflow-x: hidden;\n }\n\n']),
|
|
13
|
+
_templateObject3 = _taggedTemplateLiteral(['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n display:flex;\n justify-content:center;\n align-items:center;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n'], ['\n font-family: SFUIText-Regular;\n display: flex;\n justify-content:center;\n padding: 10px 0;\n background: #182738;\n box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);\n width: 100%;\n bottom:0;\n position: absolute;\n opacity:0;\n transition: opacity 50ms ease-in-out 250ms;\n \n .btn{\n border-radius: 22px;\n color: #FFFFFF;\n font-size: 12px;\n line-height: 12px;\n text-align: center;\n min-width: 150px;\n text-transform: uppercase;\n padding: 10px 0;\n margin: 0 10px;\n max-width: 150px;\n cursor: pointer;\n display:flex;\n justify-content:center;\n align-items:center;\n \n :hover{\n color: #00CEC6;\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color: rgb(0, 206, 198);\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: #00CEC6;\n\n :hover{\n color: rgb(12, 20, 29);\n transition: all 0.2s ease-in-out 0s;\n box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;\n }\n }\n']);
|
|
14
14
|
|
|
15
15
|
var _react = require('react');
|
|
16
16
|
|
|
@@ -28,6 +28,8 @@ var _index = require('../button/index');
|
|
|
28
28
|
|
|
29
29
|
var _index2 = _interopRequireDefault(_index);
|
|
30
30
|
|
|
31
|
+
var _components = require('../../components');
|
|
32
|
+
|
|
31
33
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
32
34
|
|
|
33
35
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
@@ -96,7 +98,8 @@ var SideBar = function (_Component) {
|
|
|
96
98
|
title = _props.title,
|
|
97
99
|
content = _props.content,
|
|
98
100
|
sideBarButtonObject = _props.sideBarButtonObject,
|
|
99
|
-
showSideBar = _props.showSideBar
|
|
101
|
+
showSideBar = _props.showSideBar,
|
|
102
|
+
loadingBtn = _props.loadingBtn;
|
|
100
103
|
|
|
101
104
|
|
|
102
105
|
return _react2.default.createElement(
|
|
@@ -143,7 +146,8 @@ var SideBar = function (_Component) {
|
|
|
143
146
|
_this2.buttonClick(object.field);
|
|
144
147
|
}
|
|
145
148
|
},
|
|
146
|
-
object.title
|
|
149
|
+
object.title,
|
|
150
|
+
object.isLoading ? _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader' }) : null
|
|
147
151
|
);
|
|
148
152
|
})
|
|
149
153
|
)
|
|
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import Button from '../button/index';
|
|
5
|
-
|
|
5
|
+
import { Loader } from '../../components'
|
|
6
6
|
|
|
7
7
|
const SideBarOverlay = styled.div`
|
|
8
8
|
position: fixed;
|
|
@@ -12,7 +12,7 @@ const SideBarOverlay = styled.div`
|
|
|
12
12
|
left: 0;
|
|
13
13
|
background: rgba(0,0,0,0.5);
|
|
14
14
|
z-index: 100;
|
|
15
|
-
visibility: ${(
|
|
15
|
+
visibility: ${((props) => props.open ? 'visible' : 'hidden')};
|
|
16
16
|
`;
|
|
17
17
|
|
|
18
18
|
const SideBarBlock = styled.div`
|
|
@@ -27,6 +27,27 @@ const SideBarBlock = styled.div`
|
|
|
27
27
|
width:0px;
|
|
28
28
|
|
|
29
29
|
transition: width 250ms ease-in-out;
|
|
30
|
+
|
|
31
|
+
.ball{
|
|
32
|
+
background-color:#151717
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.circle{
|
|
36
|
+
border:4px solid #1d2020;
|
|
37
|
+
height:10px;
|
|
38
|
+
width:10px
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
div.loader-holder > div{
|
|
42
|
+
height:20px;
|
|
43
|
+
margin-left:5px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.parentBox{
|
|
47
|
+
width:18px;
|
|
48
|
+
height:18px;
|
|
49
|
+
}
|
|
50
|
+
|
|
30
51
|
&.open{
|
|
31
52
|
width:400px;
|
|
32
53
|
.sidebar-header, .bodyContainer, .button-container {
|
|
@@ -102,6 +123,9 @@ const ButtonContainer = styled.div`
|
|
|
102
123
|
margin: 0 10px;
|
|
103
124
|
max-width: 150px;
|
|
104
125
|
cursor: pointer;
|
|
126
|
+
display:flex;
|
|
127
|
+
justify-content:center;
|
|
128
|
+
align-items:center;
|
|
105
129
|
|
|
106
130
|
:hover{
|
|
107
131
|
color: #00CEC6;
|
|
@@ -126,7 +150,7 @@ const ButtonContainer = styled.div`
|
|
|
126
150
|
box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
|
|
127
151
|
}
|
|
128
152
|
}
|
|
129
|
-
`;
|
|
153
|
+
`;
|
|
130
154
|
|
|
131
155
|
/**
|
|
132
156
|
* @component
|
|
@@ -138,7 +162,7 @@ export default class SideBar extends Component {
|
|
|
138
162
|
super(props);
|
|
139
163
|
this.state = {
|
|
140
164
|
show: false,
|
|
141
|
-
renderFlag:false
|
|
165
|
+
renderFlag: false
|
|
142
166
|
};
|
|
143
167
|
}
|
|
144
168
|
componentDidMount = () => {
|
|
@@ -146,7 +170,7 @@ export default class SideBar extends Component {
|
|
|
146
170
|
renderFlag: true
|
|
147
171
|
})
|
|
148
172
|
}
|
|
149
|
-
|
|
173
|
+
|
|
150
174
|
cancelClick() {
|
|
151
175
|
const { onCancelClick } = this.props;
|
|
152
176
|
onCancelClick();
|
|
@@ -160,45 +184,48 @@ export default class SideBar extends Component {
|
|
|
160
184
|
})
|
|
161
185
|
}
|
|
162
186
|
render() {
|
|
163
|
-
const { title, content, sideBarButtonObject, showSideBar } = this.props;
|
|
164
|
-
|
|
187
|
+
const { title, content, sideBarButtonObject, showSideBar, loadingBtn } = this.props;
|
|
188
|
+
|
|
165
189
|
return (
|
|
166
190
|
<React.Fragment>
|
|
167
191
|
<SideBarOverlay open={showSideBar} />
|
|
168
|
-
<SideBarBlock className={showSideBar ? 'open':'close'}>
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
192
|
+
<SideBarBlock className={showSideBar ? 'open' : 'close'}>
|
|
193
|
+
<div className="sidebar-header">
|
|
194
|
+
<p className="header-title">{title}</p>
|
|
195
|
+
<Button
|
|
196
|
+
appearance="cta"
|
|
197
|
+
iconWidth={12}
|
|
198
|
+
iconHeight={12}
|
|
199
|
+
icon="cross"
|
|
200
|
+
iconBackground={false}
|
|
201
|
+
onClick={() => {
|
|
202
|
+
this.buttonClick('cancel');
|
|
203
|
+
}}
|
|
204
|
+
/>
|
|
205
|
+
</div>
|
|
206
|
+
<div className="bodyContainer">
|
|
207
|
+
{content}
|
|
208
|
+
</div>
|
|
209
|
+
<ButtonContainer className="button-container" >
|
|
210
|
+
{
|
|
211
|
+
sideBarButtonObject.map((object) => {
|
|
212
|
+
return (
|
|
213
|
+
<div
|
|
214
|
+
key={object.field}
|
|
215
|
+
className={`btn ${object.type || 'default'}`}
|
|
216
|
+
onClick={() => { this.buttonClick(object.field) }}
|
|
217
|
+
>
|
|
218
|
+
{object.title}
|
|
219
|
+
{object.isLoading ?
|
|
220
|
+
<Loader theme="dark" loaderName='SpinningLoader' />
|
|
221
|
+
: null}
|
|
222
|
+
</div>
|
|
223
|
+
)
|
|
224
|
+
})
|
|
225
|
+
}
|
|
226
|
+
</ButtonContainer>
|
|
227
|
+
|
|
228
|
+
</SideBarBlock>
|
|
202
229
|
</React.Fragment>
|
|
203
230
|
);
|
|
204
231
|
}
|
|
@@ -207,7 +234,7 @@ export default class SideBar extends Component {
|
|
|
207
234
|
SideBar.propTypes = {
|
|
208
235
|
showSideBar: PropTypes.bool,
|
|
209
236
|
title: PropTypes.string,
|
|
210
|
-
content: PropTypes.object,
|
|
237
|
+
content: PropTypes.object,
|
|
211
238
|
sideBarButtonObject: PropTypes.object,
|
|
212
239
|
onCancelClick: PropTypes.func,
|
|
213
240
|
onButtonClick: PropTypes.func
|
|
@@ -271,7 +271,7 @@ var Filter = function (_Component) {
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
|
|
274
|
-
return "" + (element.title === 'Date' ? '' : element.title + "
|
|
274
|
+
return "" + (element.title === 'Date' ? '' : element.title + ": ") + label;
|
|
275
275
|
};
|
|
276
276
|
|
|
277
277
|
_this.toggleFiltersMenu = function (flag) {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.17.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.17.1",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|