@desynova-digital/components 8.17.6 → 8.17.8
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
|
@@ -1378,6 +1378,20 @@
|
|
|
1378
1378
|
"width": 18,
|
|
1379
1379
|
"height": 18
|
|
1380
1380
|
},
|
|
1381
|
+
"subtitle-edit": {
|
|
1382
|
+
"paths": [
|
|
1383
|
+
"M4.10384 7.75047L5.56217 6.29214H9.16634V7.75047H4.10384ZM1.45801 7.12547H1.91634L6.53092 2.51089L6.07259 2.05256L1.45801 6.66714V7.12547ZM7.85384 2.06297L6.52051 0.729641L6.95801 0.292141C7.07606 0.174085 7.22363 0.116794 7.40072 0.120266C7.5778 0.123738 7.72537 0.184502 7.84343 0.302558L8.29134 0.750474C8.4094 0.86853 8.46843 1.01436 8.46843 1.18797C8.46843 1.36159 8.4094 1.50742 8.29134 1.62547L7.85384 2.06297ZM7.41634 2.50047L2.16634 7.75047H0.833008V6.41714L6.08301 1.16714L7.41634 2.50047ZM6.30176 2.28172L6.07259 2.05256L6.53092 2.51089L6.30176 2.28172Z"
|
|
1384
|
+
],
|
|
1385
|
+
"width": 10,
|
|
1386
|
+
"height": 8
|
|
1387
|
+
},
|
|
1388
|
+
"subtitle-line-edit": {
|
|
1389
|
+
"paths": [
|
|
1390
|
+
"M11.805 1.75476C12.065 2.01533 12.065 2.43447 11.805 2.69504L10.5852 3.91471L8.08553 1.41534L9.30542 0.194782C9.56539 -0.0649274 9.9853 -0.0649274 10.2453 0.194782L11.805 1.75476ZM0 12V9.50063L7.3723 2.12847L9.87199 4.62784L2.49969 12H0Z"
|
|
1391
|
+
],
|
|
1392
|
+
"width": 12,
|
|
1393
|
+
"height": 12
|
|
1394
|
+
},
|
|
1381
1395
|
"triangle-carat": {
|
|
1382
1396
|
"paths": [
|
|
1383
1397
|
"M3.5 5.6001L7 9.77516e-05H0L3.5 5.6001Z"
|
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
|
|
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']),
|
|
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');
|
|
@@ -130,10 +130,10 @@ var SideBar = function (_Component) {
|
|
|
130
130
|
),
|
|
131
131
|
_react2.default.createElement(
|
|
132
132
|
'div',
|
|
133
|
-
{ className: 'bodyContainer' },
|
|
133
|
+
{ className: 'bodyContainer ' + (!sideBarButtonObject.length && 'bodyContainer-without-footer') },
|
|
134
134
|
content
|
|
135
135
|
),
|
|
136
|
-
_react2.default.createElement(
|
|
136
|
+
sideBarButtonObject && sideBarButtonObject.length ? _react2.default.createElement(
|
|
137
137
|
ButtonContainer,
|
|
138
138
|
{ className: 'button-container' },
|
|
139
139
|
sideBarButtonObject.map(function (object) {
|
|
@@ -150,7 +150,7 @@ var SideBar = function (_Component) {
|
|
|
150
150
|
object.isLoading ? _react2.default.createElement(_components.Loader, { theme: 'dark', loaderName: 'SpinningLoader' }) : null
|
|
151
151
|
);
|
|
152
152
|
})
|
|
153
|
-
)
|
|
153
|
+
) : null
|
|
154
154
|
)
|
|
155
155
|
);
|
|
156
156
|
}
|
|
@@ -83,7 +83,6 @@ const SideBarBlock = styled.div`
|
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
|
|
87
86
|
.bodyContainer {
|
|
88
87
|
opacity:0;
|
|
89
88
|
transition: opacity 50ms ease-in-out 250ms;
|
|
@@ -91,11 +90,15 @@ const SideBarBlock = styled.div`
|
|
|
91
90
|
font-family: SFUIText-Regular;
|
|
92
91
|
overflow-y: scroll;
|
|
93
92
|
overflow-x: hidden;
|
|
94
|
-
height:
|
|
93
|
+
height: calc(100% - 110px);
|
|
95
94
|
padding:0px 20px 0px 20px;
|
|
96
95
|
overflow-x: hidden;
|
|
97
96
|
}
|
|
98
97
|
|
|
98
|
+
.bodyContainer-without-footer {
|
|
99
|
+
height: 100% !important;
|
|
100
|
+
}
|
|
101
|
+
|
|
99
102
|
`;
|
|
100
103
|
|
|
101
104
|
const ButtonContainer = styled.div`
|
|
@@ -203,10 +206,10 @@ export default class SideBar extends Component {
|
|
|
203
206
|
}}
|
|
204
207
|
/>
|
|
205
208
|
</div>
|
|
206
|
-
<div className=
|
|
209
|
+
<div className={`bodyContainer ${!sideBarButtonObject.length && 'bodyContainer-without-footer'}`}>
|
|
207
210
|
{content}
|
|
208
211
|
</div>
|
|
209
|
-
<ButtonContainer className="button-container" >
|
|
212
|
+
{sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer className="button-container" >
|
|
210
213
|
{
|
|
211
214
|
sideBarButtonObject.map((object) => {
|
|
212
215
|
return (
|
|
@@ -223,8 +226,8 @@ export default class SideBar extends Component {
|
|
|
223
226
|
)
|
|
224
227
|
})
|
|
225
228
|
}
|
|
226
|
-
</ButtonContainer>
|
|
227
|
-
|
|
229
|
+
</ButtonContainer> : null
|
|
230
|
+
}
|
|
228
231
|
</SideBarBlock>
|
|
229
232
|
</React.Fragment>
|
|
230
233
|
);
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.17.
|
|
3
|
+
"version": "8.17.8",
|
|
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.
|
|
10
|
+
"@desynova-digital/tokens": "8.17.8",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|