@desynova-digital/components 9.1.5 → 9.1.7
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 +14 -0
- package/molecules/table/table.js +9 -2
- package/package.json +2 -2
package/atoms/icon/icons.json
CHANGED
|
@@ -1657,6 +1657,20 @@
|
|
|
1657
1657
|
],
|
|
1658
1658
|
"width": 8,
|
|
1659
1659
|
"height": 8
|
|
1660
|
+
},
|
|
1661
|
+
"no-comments-found": {
|
|
1662
|
+
"paths": [
|
|
1663
|
+
"M50.5373 44.7091H52.1844V27.8156H33.6438L30.8282 25H52.1844C53.733 25 55 26.267 55 27.8156V49.1718L50.5373 44.7091ZM49.3688 30.6312H36.4594L39.275 33.4467H49.3688V30.6312ZM49.3688 34.8545H40.6828L43.4984 37.6701H49.3688V34.8545ZM49.3688 41.8935V39.0779H44.9061L47.7217 41.8935H49.3688ZM54.8592 53.015L52.8742 55L45.3848 47.5246H29.6598C28.1112 47.5246 26.8442 46.2576 26.8442 44.7091V28.984L25 27.1258L26.985 25.1408L54.8592 53.015ZM42.5692 44.7091L39.7536 41.8935H32.4754V39.0779H36.9381L35.5303 37.6701H32.4754V34.8545H32.7147L29.6598 31.7996V44.7091H42.5692Z"
|
|
1664
|
+
],
|
|
1665
|
+
"width": 80,
|
|
1666
|
+
"height": 80
|
|
1667
|
+
},
|
|
1668
|
+
"no-comments-filter": {
|
|
1669
|
+
"paths": [
|
|
1670
|
+
"M1.05622 3.06251L3.37187 0.74686C3.54271 0.576005 3.54271 0.298997 3.37187 0.12814C3.20102 -0.0427132 2.92399 -0.0427132 2.75315 0.12814L0.12814 2.75315C-0.0427132 2.924 -0.0427132 3.20101 0.12814 3.37187L2.75315 5.99685C2.92399 6.1677 3.20102 6.1677 3.37187 5.99685C3.54271 5.826 3.54271 5.549 3.37187 5.37815L1.05622 3.06251Z"
|
|
1671
|
+
],
|
|
1672
|
+
"width": 80,
|
|
1673
|
+
"height": 80
|
|
1660
1674
|
}
|
|
1661
1675
|
}
|
|
1662
1676
|
}
|
package/molecules/table/table.js
CHANGED
|
@@ -1120,7 +1120,8 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1120
1120
|
display: 'flex'
|
|
1121
1121
|
},
|
|
1122
1122
|
className: "table-title-holder",
|
|
1123
|
-
theme: this.props.theme
|
|
1123
|
+
theme: this.props.theme,
|
|
1124
|
+
isDownlaodingReport: isDownlaodingReport
|
|
1124
1125
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
1125
1126
|
className: "table-title"
|
|
1126
1127
|
}, /*#__PURE__*/_react["default"].createElement("p", null, this.props.tableTitle)), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tableLoading && !tableLoadingAction && /*#__PURE__*/_react["default"].createElement(TableTitleLoadingInitial, {
|
|
@@ -1342,16 +1343,22 @@ Table.SelectedAction = _styledComponents["default"].div(_templateObject3 || (_te
|
|
|
1342
1343
|
Table.Card = (0, _styledComponents["default"])(_card["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n height: 100%;\n // overflow-x: auto;\n // overflow-y: hidden;\n margin: 10px 0;\n /* box-shadow: 0 0 10px 0 rgba(18, 29, 41); */\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);\n position:relative\n\n ", "\n\ninput[type='checkbox']{ height: 0; width: 0; display:none;}\n\ninput[type='checkbox'] + label{\n position: relative;\n display: flex;\n margin:0;\n align-items: center;\n color: #9e9e9e;\n transition: color 250ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox'] + label > span{\n display: flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9E9E9E;\n border-radius: 50%;\n cursor: pointer; \n transition: all 250ms cubic-bezier(.4,.0,.23,1);\n}\n\n\ninput[type='checkbox'] + label:hover > span,\ninput[type='checkbox']:focus + label > span{\n background: rgba(255,255,255,.1);\n}\n\ninput[type='checkbox']:checked + label > span{\n border: 10px solid #49dad0\n animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);\n}\ninput[type='checkbox']:checked + label > span:before{\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(.4,.0,.23,1) forwards;\n}\n\n@keyframes shrink-bounce{\n 0%{\n transform: scale(1);\n }\n 33%{ \n transform: scale(.85);\n }\n 100%{\n transform: scale(1); \n }\n}\n@keyframes checkbox-check{\n 0%{\n width: 0;\n height: 0;\n border-color: #FFF;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 33%{\n width: 4px;\n height: 0;\n transform: translate3d(0,0,0) rotate(45deg);\n }\n 100%{ \n width: 4px;\n height: 9px; \n border-color: #FFF;\n transform: translate3d(0,-.5em,0) rotate(45deg);\n }\n}\n \n"])), function (props) {
|
|
1343
1344
|
// console.log(props.theme);
|
|
1344
1345
|
});
|
|
1345
|
-
Table.Title = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: ", ";\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed ", ";\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill:
|
|
1346
|
+
Table.Title = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 20px;\n .table-title {\n font-family: 'SFUIText-Medium';\n font-size: 18px;\n letter-spacing: 0.3px;\n color: ", ";\n }\n .title-right-area {\n display: flex;\n align-items: center;\n & > div {\n margin-left: 10px;\n }\n\n .refresh-section {\n position: relative;\n\n @keyframes glowing {\n 0% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 15% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 30% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 45% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 60% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 0%);\n }\n 75% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 90% {\n box-shadow: 0 2px 8px 4px rgb(0 206 198 / 54%);\n }\n 100% {\n box-shadow: 0 8px 8px 0 rgba(18, 29, 41, 0.2);\n }\n }\n\n .red-dot {\n position: absolute;\n top: 0;\n right 0;\n width: 16px\n height: 16px;\n border-radius: 100%;\n background-color: rgba(255, 108, 86, 0.1);\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 6px;\n height: 6px;\n background-color: #FF6C56;\n border-radius: 100%;\n transform: translate(-50%, -50%);\n }\n \n }\n\n .tooltip {\n font-family: 'SFUIText-Regular';\n font-size: 12px;\n top: -38px;\n right: -66px;\n position: absolute;\n display: flex;\n justify-content: center;\n width: 170px;\n background-color: ", ";\n color: #0c141d;\n border-radius: 20px;\n padding: 10px 5px;\n &:after {\n content: '';\n border-top: 6px dashed ", ";\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n position: absolute;\n bottom: -6px;\n right: 76px;\n }\n }\n\n .refresh-btn {\n background-color: #121d28;\n border: 1px solid #121d28;\n padding: 7px;\n border-radius: 50%;\n cursor: pointer;\n\n &:hover {\n path {\n fill: ", ";\n }\n cursor: ", ";\n }\n \n &.active {\n background-color: ", ";\n border-color: ", ";\n transition: all 0.2s ease-in-out;\n path {\n transition: all 0.2s ease-in-out;\n fill: #fff;\n }\n }\n\n &.active {\n animation: glowing 5000ms infinite;\n }\n\n > button {\n border: none;\n background-color: transparent;\n position: relative;\n path {\n fill: #afb2ba;\n }\n cursor: ", ";\n }\n }\n }\n }\n .column-show-holder {\n position: relative;\n text-align: left;\n\n .column-show-icon {\n width: 30px;\n height: 30px;\n background: #121d28;\n border-radius: 50%;\n padding: 7px 7px;\n\n &:hover {\n path {\n fill: #fff;\n transition: all 0.4s ease-out;\n }\n }\n }\n\n .column-show-list-box {\n position: absolute;\n display: none;\n //display:block;\n width: 345px;\n right: 0;\n z-index: 101;\n padding-top: 7px;\n top: 29px;\n\n & > div {\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 1);\n }\n\n &:before {\n content: '';\n position: absolute;\n /* left: 42%; */\n /* top: 100%; */\n width: 0;\n height: 0;\n\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 6px solid ", ";\n transform: translate(327px, -6px);\n }\n\n .column-show-info {\n background: #182738;\n color: #afb2ba;\n font-family: 'SFUIText-Regular';\n padding: 15px;\n font-size: 12px;\n border-bottom: solid 1px #303f51;\n line-height: 15px;\n border-top-left-radius: 2px;\n border-top-right-radius: 2px;\n .column-show-info-header {\n font-family: SFUIText-Medium;\n font-size: 14px;\n padding-bottom: 5px;\n }\n }\n\n .column-show-list {\n background: #182738;\n color: #fff;\n padding: 5px;\n border-bottom-left-radius: 2px;\n border-bottom-right-radius: 2px;\n & .label {\n margin-right: 0px;\n\n & > input {\n & ~ span {\n color: #fff;\n background: #303f51;\n &:hover {\n background: #303f51;\n color: ", ";\n }\n }\n\n &:checked ~ span {\n background: ", ";\n &:hover {\n background: ", ";\n color: #fff;\n }\n }\n }\n }\n }\n }\n\n &:hover {\n .column-show-list-box {\n display: block;\n }\n }\n }\n"])), function (props) {
|
|
1346
1347
|
return _tokens.colors[props.theme].table.titleColor;
|
|
1347
1348
|
}, function (props) {
|
|
1348
1349
|
return _tokens.colors[props.theme].table.titleBackgroundColor;
|
|
1349
1350
|
}, function (props) {
|
|
1350
1351
|
return _tokens.colors[props.theme].table.titleBorderTop;
|
|
1352
|
+
}, function (props) {
|
|
1353
|
+
return props.isDownlaodingReport ? "#FAFAFA" : "#afb2ba";
|
|
1354
|
+
}, function (props) {
|
|
1355
|
+
return props.isDownlaodingReport ? "pointer" : "not-allowed";
|
|
1351
1356
|
}, function (props) {
|
|
1352
1357
|
return _tokens.colors[props.theme].table.titleActiveBackgroundColor;
|
|
1353
1358
|
}, function (props) {
|
|
1354
1359
|
return _tokens.colors[props.theme].table.titleActiveBorderColor;
|
|
1360
|
+
}, function (props) {
|
|
1361
|
+
return props.isDownlaodingReport ? "pointer" : "not-allowed";
|
|
1355
1362
|
}, function (props) {
|
|
1356
1363
|
return _tokens.colors[props.theme].table.titleBeforeBorderBottom;
|
|
1357
1364
|
}, function (props) {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.7",
|
|
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": "9.1.
|
|
10
|
+
"@desynova-digital/tokens": "9.1.7",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|