@desynova-digital/components 8.17.11 → 8.18.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.
Files changed (5) hide show
  1. package/atoms/cardV2/thumbnail.js +7 -2
  2. package/atoms/icon/icons.json +7 -0
  3. package/atoms/sideBar/sidebar.js +1 -1
  4. package/atoms/sideBar/sidebar.jsx +1 -1
  5. package/package.json +2 -2
package/atoms/cardV2/thumbnail.js CHANGED
@@ -10,7 +10,7 @@ var _templateObject = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5
10
10
  _templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n background: ", ";\n background-size: cover;\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: ", ";\n overflow: hidden;\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n"], ["\n position: relative;\n background: ", ";\n background-size: cover;\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: ", ";\n overflow: hidden;\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n"]),
11
11
  _templateObject3 = _taggedTemplateLiteral(["\n z-index:2;\n .uploadWrapper{\n border-radius: 50%;\n background: ", ";\n color: ", ";\n width: 25px;\n height: 25px;\n display:flex;\n justify-content: center;\n align-items:center;\n .wrapper{\n font-size: 10px;\n font-family: 'SFUIText-Regular';\n line-height:1.1;\n text-transform:uppercase;\n }\n }\n"], ["\n z-index:2;\n .uploadWrapper{\n border-radius: 50%;\n background: ", ";\n color: ", ";\n width: 25px;\n height: 25px;\n display:flex;\n justify-content: center;\n align-items:center;\n .wrapper{\n font-size: 10px;\n font-family: 'SFUIText-Regular';\n line-height:1.1;\n text-transform:uppercase;\n }\n }\n"]),
12
12
  _templateObject4 = _taggedTemplateLiteral(["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"], ["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"]),
13
- _templateObject5 = _taggedTemplateLiteral(["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"], ["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"]),
13
+ _templateObject5 = _taggedTemplateLiteral(["\n ", ";\n\n .tooltip{\n position: absolute;\n bottom: 130%;\n left: 30%;\n transform: translateX(-50%);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color:#fff;\n border-radius: 10px;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: \"\";\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: 'SFUIText-Regular';\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: 'SFUIText-Light';\n text-transform: none;\n font-size: 10px;\n } \n }\n\n &:hover {\n background-color: #00cec6;\n .tooltip{\n opacity:1;\n visibility:visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"], ["\n ", ";\n\n .tooltip{\n position: absolute;\n bottom: 130%;\n left: 30%;\n transform: translateX(-50%);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color:#fff;\n border-radius: 10px;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: \"\";\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: 'SFUIText-Regular';\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: 'SFUIText-Light';\n text-transform: none;\n font-size: 10px;\n } \n }\n\n &:hover {\n background-color: #00cec6;\n .tooltip{\n opacity:1;\n visibility:visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"]),
14
14
  _templateObject6 = _taggedTemplateLiteral(["\n display:flex;\n justify-content:space-between;\n padding:10px;\n"], ["\n display:flex;\n justify-content:space-between;\n padding:10px;\n"]);
15
15
 
16
16
  var _react = require("react");
@@ -233,7 +233,12 @@ var Thumbnail = function Thumbnail(props) {
233
233
  actionClick(e, item.field);
234
234
  }
235
235
  },
236
- _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 })
236
+ _react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 }),
237
+ _react2.default.createElement(
238
+ "div",
239
+ { className: "tooltip" },
240
+ item.title
241
+ )
237
242
  );
238
243
  }) || null
239
244
  )
package/atoms/icon/icons.json CHANGED
@@ -1405,6 +1405,13 @@
1405
1405
  ],
1406
1406
  "width": 12,
1407
1407
  "height": 12
1408
+ },
1409
+ "tool_actions": {
1410
+ "paths": [
1411
+ "M1.00004 0V1.33333H6.72671L0.333374 7.72667L1.27337 8.66667L7.66671 2.27333V8H9.00004V0H1.00004Z"
1412
+ ],
1413
+ "width": 12,
1414
+ "height": 12
1408
1415
  }
1409
1416
  }
1410
1417
  }
package/atoms/sideBar/sidebar.js CHANGED
@@ -9,7 +9,7 @@ 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\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 .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 .bodyContainer-without-footer {\n height: 100% !important;\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 .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 .bodyContainer-without-footer {\n height: 100% !important;\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 .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 .bodyContainer-without-footer {\n height: calc(100% - 70px) !important;\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 .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 .bodyContainer-without-footer {\n height: calc(100% - 70px) !important;\n }\n\n']),
13
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');
package/atoms/sideBar/sidebar.jsx CHANGED
@@ -96,7 +96,7 @@ const SideBarBlock = styled.div`
96
96
  }
97
97
 
98
98
  .bodyContainer-without-footer {
99
- height: 100% !important;
99
+ height: calc(100% - 70px) !important;
100
100
  }
101
101
 
102
102
  `;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.17.11",
3
+ "version": "8.18.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.17.11",
10
+ "@desynova-digital/tokens": "8.18.0",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },