@desynova-digital/components 9.1.41 → 9.1.43

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 +29 -29
  2. package/atoms/icon/icons.json +16 -0
  3. package/atoms/sideBar/sidebar.js +10 -10
  4. package/atoms/sideBar/sidebar.jsx +165 -153
  5. package/package.json +2 -2
package/atoms/cardV2/thumbnail.js CHANGED
@@ -22,38 +22,38 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
23
  var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n background: rgba(0, 0, 0, 0.5);\n"])));
24
24
  var assetStyles = {
25
- "folder": {
26
- backgroundColor: '#121D29',
27
- backgroundSize: 'inherit'
25
+ folder: {
26
+ backgroundColor: "#121D29",
27
+ backgroundSize: "inherit"
28
28
  },
29
- "asset": {
30
- backgroundColor: 'inherit',
31
- backgroundSize: 'cover'
29
+ asset: {
30
+ backgroundColor: "inherit",
31
+ backgroundSize: "cover"
32
32
  }
33
33
  };
34
- var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background: ", ";\n background-color:", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n cursor: ", ";\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 }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: #182738;\n }\n"])), function (_ref) {
34
+ var ThumbnailStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background: ", ";\n background-color: ", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n cursor: ", ";\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 }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: #182738;\n }\n"])), function (_ref) {
35
35
  var thumbnail = _ref.thumbnail;
36
36
  return "url(".concat(thumbnail, ") no-repeat 50%");
37
37
  }, function (_ref2) {
38
38
  var data_type = _ref2.data_type;
39
- return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : 'inherit';
39
+ return assetStyles[data_type] && assetStyles[data_type].backgroundColor ? assetStyles[data_type].backgroundColor : "inherit";
40
40
  }, function (_ref3) {
41
41
  var data_type = _ref3.data_type;
42
- return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : 'cover';
42
+ return assetStyles[data_type] && assetStyles[data_type].backgroundSize ? assetStyles[data_type].backgroundSize : "cover";
43
43
  }, function (_ref4) {
44
44
  var width = _ref4.width;
45
- return width === 'sm' ? '90px' : width === 'md' ? '125px' : '222px';
45
+ return width === "sm" ? "90px" : width === "md" ? "125px" : "222px";
46
46
  }, function (_ref5) {
47
47
  var width = _ref5.width;
48
- return width === 'sm' ? '50px' : width === 'md' ? '70px' : '126px';
48
+ return width === "sm" ? "50px" : width === "md" ? "70px" : "126px";
49
49
  }, function (_ref6) {
50
50
  var isClickPrevented = _ref6.isClickPrevented;
51
- return !isClickPrevented ? 'pointer' : 'default';
51
+ return !isClickPrevented ? "pointer" : "default";
52
52
  });
53
- var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2;\n .uploadWrapper {\n border-radius: 50%;\n background: ", ";\n\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"])), function (props) {
54
- return props.upload_type === 'rc' ? '#FF6327' : _tokens.colors[props.theme].card.themeColor;
53
+ var UploadTypeContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 2;\n .uploadWrapper {\n border-radius: 50%;\n background: ", ";\n\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"])), function (props) {
54
+ return props.upload_type === "rc" ? "#FF6327" : _tokens.colors[props.theme].card.themeColor;
55
55
  }, function (props) {
56
- return props.upload_type === 'rc' ? '#FFFFFF' : '#0C141D';
56
+ return props.upload_type === "rc" ? "#FFFFFF" : "#0C141D";
57
57
  });
58
58
  var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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"])), OverlayBackgroundStyles, function (_ref7) {
59
59
  var hex = _ref7.hex;
@@ -61,7 +61,7 @@ var StatusBoxStyles = _styledComponents["default"].div(_templateObject4 || (_tem
61
61
  });
62
62
  var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
63
63
  return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
64
- })(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"])), OverlayBackgroundStyles, function (props) {
64
+ })(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"])), OverlayBackgroundStyles, function (props) {
65
65
  return _tokens.colors[props.theme].card.themeColor;
66
66
  });
67
67
  var CardHeader = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"])));
@@ -91,7 +91,7 @@ var Thumbnail = function Thumbnail(props) {
91
91
  var hoverPointerRef = (0, _react.useRef)(null);
92
92
  (0, _react.useEffect)(function () {
93
93
  if (actions && actions.length > 0 && actions.some(function (item) {
94
- return item.field === 'upload' || item.field === 'phupload_ingest';
94
+ return item.field === "upload" || item.field === "phupload_ingest";
95
95
  }) // can add multiple condition in future to prevent click
96
96
  ) {
97
97
  setClickPreventation(true);
@@ -106,7 +106,7 @@ var Thumbnail = function Thumbnail(props) {
106
106
  * @const
107
107
  */
108
108
  var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
109
- return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
109
+ return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
110
110
  });
111
111
  setStatusIndex(index);
112
112
  }, [upload_status, card_status]);
@@ -121,13 +121,13 @@ var Thumbnail = function Thumbnail(props) {
121
121
  var iframeOffsetHeight = offsetHeight / iframeCount;
122
122
  var imageChangePoint = offsetWidth / iframeCount;
123
123
  var offsetTop = Math.abs(iframeBlockHeight - iframeOffsetHeight) / 2;
124
- hoverPointerRef.current.style.left = event.offsetX + 'px';
124
+ hoverPointerRef.current.style.left = event.offsetX + "px";
125
125
  var imageNum = parseInt(event.offsetX / imageChangePoint) || 1;
126
126
  var imageTop = iframeOffsetHeight * imageNum + offsetTop;
127
127
  if (imageTop > offsetHeight) {
128
128
  imageTop = offsetHeight + offsetTop - iframeOffsetHeight;
129
129
  }
130
- iframeImageRef.current.style.top = '-' + imageTop + 'px';
130
+ iframeImageRef.current.style.top = "-" + imageTop + "px";
131
131
  }
132
132
  }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
133
133
 
@@ -138,7 +138,7 @@ var Thumbnail = function Thumbnail(props) {
138
138
  */
139
139
  var handleThumbnailClick = (0, _react.useCallback)(function (e) {
140
140
  if (!isClickPrevented) {
141
- actionClick(e, 'play', ingest_db_id);
141
+ actionClick(e, "play", ingest_db_id);
142
142
  } else {
143
143
  e.preventDefault();
144
144
  }
@@ -166,10 +166,10 @@ var Thumbnail = function Thumbnail(props) {
166
166
  position: "relative",
167
167
  zIndex: "2",
168
168
  marginLeft: "auto"
169
- }, (card_status || upload_status) && statusIndex > -1 && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
169
+ }, (card_status || upload_status) && /*#__PURE__*/_react["default"].createElement(StatusBoxStyles, {
170
170
  theme: props.theme,
171
171
  hex: _tokens2.CARD_ASSET_STATUS[statusIndex] ? _tokens2.CARD_ASSET_STATUS[statusIndex].hex : {
172
- background: '#AFB2BA'
172
+ background: "#AFB2BA"
173
173
  }
174
174
  }, /*#__PURE__*/_react["default"].createElement("div", {
175
175
  className: "status-color"
@@ -192,7 +192,7 @@ var Thumbnail = function Thumbnail(props) {
192
192
  height: "26px",
193
193
  padding: "0px",
194
194
  width: "26px",
195
- margin: actions.length === i + 1 ? '0' : '0 5px 0px 0px',
195
+ margin: actions.length === i + 1 ? "0" : "0 5px 0px 0px",
196
196
  onClick: function onClick(e) {
197
197
  e.stopPropagation();
198
198
  actionClick(e, item.field);
@@ -227,7 +227,7 @@ var Thumbnail = function Thumbnail(props) {
227
227
  })) || null);
228
228
  };
229
229
  Thumbnail.propTypes = {
230
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
230
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
231
231
  width: _propTypes["default"].string,
232
232
  thumbnail: _propTypes["default"].string,
233
233
  file_type: _propTypes["default"].string,
@@ -239,9 +239,9 @@ Thumbnail.propTypes = {
239
239
  actionClick: _propTypes["default"].func
240
240
  };
241
241
  Thumbnail.defaultProps = {
242
- theme: 'dark',
243
- width: 'lg',
244
- thumbnail: 'https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png',
245
- iframeurl: ''
242
+ theme: "dark",
243
+ width: "lg",
244
+ thumbnail: "https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png",
245
+ iframeurl: ""
246
246
  };
247
247
  var _default = exports["default"] = Thumbnail;
package/atoms/icon/icons.json CHANGED
@@ -1815,6 +1815,22 @@
1815
1815
  ],
1816
1816
  "width": 15,
1817
1817
  "height": 8
1818
+ },
1819
+ "close-fullscreen": {
1820
+ "paths": [
1821
+ "M0 11H3V14H5V9H0V11ZM3 3H0V5H5V0H3V3ZM9 14H11V11H14V9H9V14ZM11 3V0H9V5H14V3H11Z"
1822
+ ],
1823
+ "width": 14,
1824
+ "height": 14
1825
+ },
1826
+ "toggle-fullscreen": {
1827
+ "paths": [
1828
+ "M4 3C2.343 3 1 4.343 1 6V18C1 19.657 2.343 21 4 21H20C21.657 21 23 19.657 23 18V6C23 4.343 21.657 3 20 3H4ZM3 6C3 5.448 3.448 5 4 5H14V19H4C3.448 19 3 18.552 3 18V6ZM16 19H20C20.552 19 21 18.552 21 18V6C21 5.448 20.552 5 20 5H16V19Z"
1829
+ ],
1830
+ "width": 24,
1831
+ "height": 24,
1832
+ "fillRule": "evenodd",
1833
+ "clipRule": "evenodd"
1818
1834
  }
1819
1835
  }
1820
1836
  }
package/atoms/sideBar/sidebar.js CHANGED
@@ -26,11 +26,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
26
26
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
27
27
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
28
28
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
29
- var SideBarOverlay = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
30
- return props.open ? 'visible' : 'hidden';
29
+ var SideBarOverlay = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
30
+ return props.open ? "visible" : "hidden";
31
31
  });
32
- var SideBarBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), _index["default"].Element);
33
- var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n }\n }\n\n .default{\n background: #303F51;\n\n :hover{\n color:", ";\n }\n }\n \n .primary {\n color: rgb(12, 20, 29);\n background: ", ";\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"])), function (props) {
32
+ var SideBarBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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,\n .bodyContainer,\n .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 10px 0px 20px;\n overflow-x: hidden;\n }\n\n .bodyContainer-without-footer {\n height: calc(100% - 70px) !important;\n }\n"])), _index["default"].Element);
33
+ var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\n }\n }\n\n .default {\n background: #303f51;\n\n :hover {\n color: ", ";\n }\n }\n\n .primary {\n color: rgb(12, 20, 29);\n background: ", ";\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"])), function (props) {
34
34
  return _tokens.colors[props.theme].sideBar.themeColor;
35
35
  }, function (props) {
36
36
  return _tokens.colors[props.theme].sideBar.lightthemeColor;
@@ -87,7 +87,7 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
87
87
  open: showSideBar
88
88
  }), /*#__PURE__*/_react["default"].createElement(SideBarBlock, {
89
89
  theme: theme,
90
- className: showSideBar ? 'open' : 'close'
90
+ className: showSideBar ? "open" : "close"
91
91
  }, /*#__PURE__*/_react["default"].createElement("div", {
92
92
  className: "sidebar-header"
93
93
  }, /*#__PURE__*/_react["default"].createElement("p", {
@@ -100,17 +100,17 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
100
100
  icon: "cross",
101
101
  iconBackground: false,
102
102
  onClick: function onClick() {
103
- _this2.buttonClick('cancel');
103
+ _this2.buttonClick("cancel");
104
104
  }
105
105
  })), /*#__PURE__*/_react["default"].createElement("div", {
106
- className: "bodyContainer ".concat(!sideBarButtonObject.length && 'bodyContainer-without-footer')
106
+ className: "bodyContainer ".concat(!sideBarButtonObject.length && "bodyContainer-without-footer")
107
107
  }, content), sideBarButtonObject && sideBarButtonObject.length ? /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
108
108
  theme: theme,
109
109
  className: "button-container"
110
110
  }, sideBarButtonObject.map(function (object) {
111
111
  return /*#__PURE__*/_react["default"].createElement("div", {
112
112
  key: object.field,
113
- className: "btn ".concat(object.type || 'default'),
113
+ className: "btn ".concat(object.type || "default"),
114
114
  onClick: function onClick() {
115
115
  _this2.buttonClick(object.field);
116
116
  }
@@ -123,7 +123,7 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
123
123
  }]);
124
124
  }(_react.Component);
125
125
  SideBar.propTypes = {
126
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
126
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
127
127
  showSideBar: _propTypes["default"].bool,
128
128
  title: _propTypes["default"].string,
129
129
  content: _propTypes["default"].object,
@@ -132,5 +132,5 @@ SideBar.propTypes = {
132
132
  onButtonClick: _propTypes["default"].func
133
133
  };
134
134
  SideBar.defaultProps = {
135
- theme: 'dark'
135
+ theme: "dark"
136
136
  };
package/atoms/sideBar/sidebar.jsx CHANGED
@@ -1,158 +1,159 @@
1
- import React, { Component } from 'react';
2
- import PropTypes from 'prop-types';
3
- import styled from 'styled-components';
4
- import Button from '../button/index';
5
- import { Loader } from '../../components'
6
- import { colors } from '@desynova-digital/tokens';
1
+ import React, { Component } from "react";
2
+ import PropTypes from "prop-types";
3
+ import styled from "styled-components";
4
+ import Button from "../button/index";
5
+ import { Loader } from "../../components";
6
+ import { colors } from "@desynova-digital/tokens";
7
7
  const SideBarOverlay = styled.div`
8
8
  position: fixed;
9
9
  width: 100%;
10
10
  height: 100%;
11
11
  top: 0;
12
12
  left: 0;
13
- background: rgba(0,0,0,0.5);
13
+ background: rgba(0, 0, 0, 0.5);
14
14
  z-index: 100;
15
- visibility: ${((props) => props.open ? 'visible' : 'hidden')};
15
+ visibility: ${(props) => (props.open ? "visible" : "hidden")};
16
16
  `;
17
17
 
18
18
  const SideBarBlock = styled.div`
19
- height: 100%;
20
- position: fixed;
21
- z-index: 101;
22
- top: 0;
23
- right: 0px;
24
- background-color: #121D29;
25
- box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);
26
- overflow: hidden;
27
- width:0px;
28
-
29
- transition: width 250ms ease-in-out;
30
-
31
- .ball{
32
- background-color:#151717
33
- }
19
+ height: 100%;
20
+ position: fixed;
21
+ z-index: 101;
22
+ top: 0;
23
+ right: 0px;
24
+ background-color: #121d29;
25
+ box-shadow: 0px 2px 44px rgba(0, 0, 0, 0.5);
26
+ overflow: hidden;
27
+ width: 0px;
34
28
 
35
- .circle{
36
- border:4px solid #1d2020;
37
- height:10px;
38
- width:10px
39
- }
29
+ transition: width 250ms ease-in-out;
40
30
 
41
- div.loader-holder > div{
42
- height:20px;
43
- margin-left:5px;
44
- }
31
+ .ball {
32
+ background-color: #151717;
33
+ }
45
34
 
46
- .parentBox{
47
- width:18px;
48
- height:18px;
49
- }
35
+ .circle {
36
+ border: 4px solid #1d2020;
37
+ height: 10px;
38
+ width: 10px;
39
+ }
50
40
 
51
- &.open{
52
- width:400px;
53
- .sidebar-header, .bodyContainer, .button-container {
54
- opacity: 1;
55
- }
41
+ div.loader-holder > div {
42
+ height: 20px;
43
+ margin-left: 5px;
44
+ }
45
+
46
+ .parentBox {
47
+ width: 18px;
48
+ height: 18px;
49
+ }
50
+
51
+ &.open {
52
+ width: 400px;
53
+ .sidebar-header,
54
+ .bodyContainer,
55
+ .button-container {
56
+ opacity: 1;
56
57
  }
58
+ }
57
59
 
58
- .sidebar-header {
59
- transition: opacity 50ms ease-in-out 250ms;
60
- opacity:0;
61
- padding:20px;
62
- display: flex;
63
- justify-content: space-between;
64
- align-items: center;
65
- box-sizing: border-box;
66
-
67
- .header-title {
68
- font-family: SFUIText-Light;
69
- line-height: 14px;
70
- font-size: 16px;
71
- line-height: 14px;
72
- color: #FFFFFF;
73
- }
74
- ${Button.Element} {
75
- margin: 0;
60
+ .sidebar-header {
61
+ transition: opacity 50ms ease-in-out 250ms;
62
+ opacity: 0;
63
+ padding: 20px;
64
+ display: flex;
65
+ justify-content: space-between;
66
+ align-items: center;
67
+ box-sizing: border-box;
68
+
69
+ .header-title {
70
+ font-family: SFUIText-Light;
71
+ line-height: 14px;
72
+ font-size: 16px;
73
+ line-height: 14px;
74
+ color: #ffffff;
75
+ }
76
+ ${Button.Element} {
77
+ margin: 0;
78
+ background: transparent;
79
+ border-color: transparent;
80
+ padding: 0;
81
+ &:hover {
76
82
  background: transparent;
77
83
  border-color: transparent;
78
- padding: 0;
79
- &:hover {
80
- background: transparent;
81
- border-color: transparent;
82
- }
83
84
  }
84
85
  }
86
+ }
85
87
 
86
- .bodyContainer {
87
- opacity:0;
88
- transition: opacity 50ms ease-in-out 250ms;
89
- color:white;
90
- font-family: SFUIText-Regular;
91
- overflow-y: scroll;
92
- overflow-x: hidden;
93
- height: calc(100% - 110px);
94
- padding:0px 20px 0px 20px;
95
- overflow-x: hidden;
96
- }
97
-
98
- .bodyContainer-without-footer {
99
- height: calc(100% - 70px) !important;
100
- }
88
+ .bodyContainer {
89
+ opacity: 0;
90
+ transition: opacity 50ms ease-in-out 250ms;
91
+ color: white;
92
+ font-family: SFUIText-Regular;
93
+ overflow-y: scroll;
94
+ overflow-x: hidden;
95
+ height: calc(100% - 110px);
96
+ padding: 0px 10px 0px 20px;
97
+ overflow-x: hidden;
98
+ }
101
99
 
100
+ .bodyContainer-without-footer {
101
+ height: calc(100% - 70px) !important;
102
+ }
102
103
  `;
103
104
 
104
105
  const ButtonContainer = styled.div`
105
- font-family: SFUIText-Regular;
106
- display: flex;
107
- justify-content:center;
106
+ font-family: SFUIText-Regular;
107
+ display: flex;
108
+ justify-content: center;
109
+ padding: 10px 0;
110
+ background: #182738;
111
+ box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);
112
+ width: 100%;
113
+ bottom: 0;
114
+ position: absolute;
115
+ opacity: 0;
116
+ transition: opacity 50ms ease-in-out 250ms;
117
+
118
+ .btn {
119
+ border-radius: 22px;
120
+ color: #ffffff;
121
+ font-size: 12px;
122
+ line-height: 12px;
123
+ text-align: center;
124
+ min-width: 150px;
125
+ text-transform: uppercase;
108
126
  padding: 10px 0;
109
- background: #182738;
110
- box-shadow: 0px -12px 24px rgb(0 0 0 / 20%);
111
- width: 100%;
112
- bottom:0;
113
- position: absolute;
114
- opacity:0;
115
- transition: opacity 50ms ease-in-out 250ms;
116
-
117
- .btn{
118
- border-radius: 22px;
119
- color: #FFFFFF;
120
- font-size: 12px;
121
- line-height: 12px;
122
- text-align: center;
123
- min-width: 150px;
124
- text-transform: uppercase;
125
- padding: 10px 0;
126
- margin: 0 10px;
127
- max-width: 150px;
128
- cursor: pointer;
129
- display:flex;
130
- justify-content:center;
131
- align-items:center;
132
-
133
- :hover{
134
- color: ${props => colors[props.theme].sideBar.themeColor};
135
- }
127
+ margin: 0 10px;
128
+ max-width: 150px;
129
+ cursor: pointer;
130
+ display: flex;
131
+ justify-content: center;
132
+ align-items: center;
133
+
134
+ :hover {
135
+ color: ${(props) => colors[props.theme].sideBar.themeColor};
136
136
  }
137
+ }
137
138
 
138
- .default{
139
- background: #303F51;
139
+ .default {
140
+ background: #303f51;
140
141
 
141
- :hover{
142
- color:${props => colors[props.theme].sideBar.lightthemeColor};
143
- }
142
+ :hover {
143
+ color: ${(props) => colors[props.theme].sideBar.lightthemeColor};
144
144
  }
145
-
146
- .primary {
147
- color: rgb(12, 20, 29);
148
- background: ${props => colors[props.theme].sideBar.themeColor};
149
-
150
- :hover{
151
- color: rgb(12, 20, 29);
152
- transition: all 0.2s ease-in-out 0s;
153
- box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
154
- }
145
+ }
146
+
147
+ .primary {
148
+ color: rgb(12, 20, 29);
149
+ background: ${(props) => colors[props.theme].sideBar.themeColor};
150
+
151
+ :hover {
152
+ color: rgb(12, 20, 29);
153
+ transition: all 0.2s ease-in-out 0s;
154
+ box-shadow: rgb(7 213 205 / 20%) 0px 12px 24px 0px;
155
155
  }
156
+ }
156
157
  `;
157
158
 
158
159
  /**
@@ -165,14 +166,14 @@ export default class SideBar extends Component {
165
166
  super(props);
166
167
  this.state = {
167
168
  show: false,
168
- renderFlag: false
169
+ renderFlag: false,
169
170
  };
170
171
  }
171
172
  componentDidMount = () => {
172
173
  this.setState({
173
- renderFlag: true
174
- })
175
- }
174
+ renderFlag: true,
175
+ });
176
+ };
176
177
 
177
178
  cancelClick() {
178
179
  const { onCancelClick } = this.props;
@@ -183,52 +184,63 @@ export default class SideBar extends Component {
183
184
  const { onButtonClick } = this.props;
184
185
  onButtonClick(field);
185
186
  this.setState({
186
- ...this.state
187
- })
187
+ ...this.state,
188
+ });
188
189
  }
189
190
  render() {
190
- const { title, content, sideBarButtonObject, showSideBar, loadingBtn,theme } = this.props;
191
+ const {
192
+ title,
193
+ content,
194
+ sideBarButtonObject,
195
+ showSideBar,
196
+ loadingBtn,
197
+ theme,
198
+ } = this.props;
191
199
 
192
200
  return (
193
201
  <React.Fragment>
194
202
  <SideBarOverlay open={showSideBar} />
195
- <SideBarBlock theme={theme} className={showSideBar ? 'open' : 'close'}>
203
+ <SideBarBlock theme={theme} className={showSideBar ? "open" : "close"}>
196
204
  <div className="sidebar-header">
197
205
  <p className="header-title">{title}</p>
198
206
  <Button
199
- theme={theme}
207
+ theme={theme}
200
208
  appearance="cta"
201
209
  iconWidth={12}
202
210
  iconHeight={12}
203
211
  icon="cross"
204
212
  iconBackground={false}
205
213
  onClick={() => {
206
- this.buttonClick('cancel');
214
+ this.buttonClick("cancel");
207
215
  }}
208
216
  />
209
217
  </div>
210
- <div className={`bodyContainer ${!sideBarButtonObject.length && 'bodyContainer-without-footer'}`}>
218
+ <div
219
+ className={`bodyContainer ${!sideBarButtonObject.length &&
220
+ "bodyContainer-without-footer"}`}
221
+ >
211
222
  {content}
212
223
  </div>
213
- {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer theme={theme} className="button-container" >
214
- {
215
- sideBarButtonObject.map((object) => {
224
+ {sideBarButtonObject && sideBarButtonObject.length ? (
225
+ <ButtonContainer theme={theme} className="button-container">
226
+ {sideBarButtonObject.map((object) => {
216
227
  return (
217
228
  <div
218
229
  key={object.field}
219
- className={`btn ${object.type || 'default'}`}
220
- onClick={() => { this.buttonClick(object.field) }}
230
+ className={`btn ${object.type || "default"}`}
231
+ onClick={() => {
232
+ this.buttonClick(object.field);
233
+ }}
221
234
  >
222
235
  {object.title}
223
- {object.isLoading ?
224
- <Loader theme={theme} loaderName='SpinningLoader' />
225
- : null}
236
+ {object.isLoading ? (
237
+ <Loader theme={theme} loaderName="SpinningLoader" />
238
+ ) : null}
226
239
  </div>
227
- )
228
- })
229
- }
230
- </ButtonContainer> : null
231
- }
240
+ );
241
+ })}
242
+ </ButtonContainer>
243
+ ) : null}
232
244
  </SideBarBlock>
233
245
  </React.Fragment>
234
246
  );
@@ -236,15 +248,15 @@ export default class SideBar extends Component {
236
248
  }
237
249
 
238
250
  SideBar.propTypes = {
239
- theme: PropTypes.oneOf(['light', 'dark', 'nexc']),
251
+ theme: PropTypes.oneOf(["light", "dark", "nexc"]),
240
252
  showSideBar: PropTypes.bool,
241
253
  title: PropTypes.string,
242
254
  content: PropTypes.object,
243
255
  sideBarButtonObject: PropTypes.object,
244
256
  onCancelClick: PropTypes.func,
245
- onButtonClick: PropTypes.func
246
- }
257
+ onButtonClick: PropTypes.func,
258
+ };
247
259
 
248
260
  SideBar.defaultProps = {
249
- theme: 'dark'
250
- };
261
+ theme: "dark",
262
+ };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.41",
3
+ "version": "9.1.43",
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.41",
10
+ "@desynova-digital/tokens": "9.1.43",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },