@desynova-digital/components 9.2.24 → 9.2.26

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 (4) hide show
  1. package/atoms/icon/icons.json +31 -0
  2. package/atoms/sideBar/sidebar.js +16 -11
  3. package/atoms/sideBar/sidebar.jsx +154 -165
  4. package/package.json +2 -2
package/atoms/icon/icons.json CHANGED
@@ -146,6 +146,21 @@
146
146
  ],
147
147
  "width": 16,
148
148
  "height": 16
149
+ },
150
+ "search_filter": {
151
+ "paths": [
152
+ "M9.6224 2.33594H6.41406",
153
+ "M4.58333 2.33594H1.375",
154
+ "M9.625 6H5.5",
155
+ "M3.66667 6H1.375",
156
+ "M9.6276 9.66406H7.33594",
157
+ "M5.5 9.66406H1.375",
158
+ "M6.41406 1.41406V3.2474",
159
+ "M3.66406 5.08594V6.91927",
160
+ "M7.33594 8.75V10.5833"
161
+ ],
162
+ "width": 11,
163
+ "height": 11
149
164
  },
150
165
  "dashboard": {
151
166
  "paths": [
@@ -1988,6 +2003,22 @@
1988
2003
  ],
1989
2004
  "width": 10,
1990
2005
  "height": 10
2006
+ },
2007
+ "check-circle": {
2008
+ "viewBox": "0 -960 960 960",
2009
+ "paths": [
2010
+ "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
2011
+ ],
2012
+ "width": 14,
2013
+ "height": 14
2014
+ },
2015
+ "valid_error-circle": {
2016
+ "viewBox": "0 -960 960 960",
2017
+ "paths": [
2018
+ "M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
2019
+ ],
2020
+ "width": 14,
2021
+ "height": 14
1991
2022
  }
1992
2023
  }
1993
2024
  }
package/atoms/sideBar/sidebar.js CHANGED
@@ -26,11 +26,13 @@ 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,\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) {
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: ", ";\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"])), function (props) {
33
+ return props.width || '400px';
34
+ }, _index["default"].Element);
35
+ 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
36
  return _tokens.colors[props.theme].sideBar.themeColor;
35
37
  }, function (props) {
36
38
  return _tokens.colors[props.theme].sideBar.lightthemeColor;
@@ -82,12 +84,14 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
82
84
  sideBarButtonObject = _this$props.sideBarButtonObject,
83
85
  showSideBar = _this$props.showSideBar,
84
86
  loadingBtn = _this$props.loadingBtn,
85
- theme = _this$props.theme;
87
+ theme = _this$props.theme,
88
+ width = _this$props.width;
86
89
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SideBarOverlay, {
87
90
  open: showSideBar
88
91
  }), /*#__PURE__*/_react["default"].createElement(SideBarBlock, {
89
92
  theme: theme,
90
- className: showSideBar ? "open" : "close"
93
+ width: width,
94
+ className: showSideBar ? 'open' : 'close'
91
95
  }, /*#__PURE__*/_react["default"].createElement("div", {
92
96
  className: "sidebar-header"
93
97
  }, /*#__PURE__*/_react["default"].createElement("p", {
@@ -100,17 +104,17 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
100
104
  icon: "cross",
101
105
  iconBackground: false,
102
106
  onClick: function onClick() {
103
- _this2.buttonClick("cancel");
107
+ _this2.buttonClick('cancel');
104
108
  }
105
109
  })), /*#__PURE__*/_react["default"].createElement("div", {
106
- className: "bodyContainer ".concat(!sideBarButtonObject.length && "bodyContainer-without-footer")
110
+ className: "bodyContainer ".concat(!sideBarButtonObject.length && 'bodyContainer-without-footer')
107
111
  }, content), sideBarButtonObject && sideBarButtonObject.length ? /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
108
112
  theme: theme,
109
113
  className: "button-container"
110
114
  }, sideBarButtonObject.map(function (object) {
111
115
  return /*#__PURE__*/_react["default"].createElement("div", {
112
116
  key: object.field,
113
- className: "btn ".concat(object.type || "default"),
117
+ className: "btn ".concat(object.type || 'default'),
114
118
  onClick: function onClick() {
115
119
  _this2.buttonClick(object.field);
116
120
  }
@@ -123,7 +127,7 @@ var SideBar = exports["default"] = /*#__PURE__*/function (_Component) {
123
127
  }]);
124
128
  }(_react.Component);
125
129
  SideBar.propTypes = {
126
- theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
130
+ theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
127
131
  showSideBar: _propTypes["default"].bool,
128
132
  title: _propTypes["default"].string,
129
133
  content: _propTypes["default"].object,
@@ -132,5 +136,6 @@ SideBar.propTypes = {
132
136
  onButtonClick: _propTypes["default"].func
133
137
  };
134
138
  SideBar.defaultProps = {
135
- theme: "dark"
139
+ theme: 'dark',
140
+ width: '400px'
136
141
  };
package/atoms/sideBar/sidebar.jsx CHANGED
@@ -1,159 +1,158 @@
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
- }
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
- }
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
+ }
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,
54
- .bodyContainer,
55
- .button-container {
56
- opacity: 1;
41
+ div.loader-holder > div{
42
+ height:20px;
43
+ margin-left:5px;
57
44
  }
58
- }
59
45
 
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;
46
+ .parentBox{
47
+ width:18px;
48
+ height:18px;
49
+ }
68
50
 
69
- .header-title {
70
- font-family: SFUIText-Light;
71
- line-height: 14px;
72
- font-size: 16px;
73
- line-height: 14px;
74
- color: #ffffff;
51
+ &.open{
52
+ width: ${props => props.width || '400px'};
53
+ .sidebar-header, .bodyContainer, .button-container {
54
+ opacity: 1;
55
+ }
75
56
  }
76
- ${Button.Element} {
77
- margin: 0;
78
- background: transparent;
79
- border-color: transparent;
80
- padding: 0;
81
- &:hover {
57
+
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;
82
76
  background: transparent;
83
77
  border-color: transparent;
78
+ padding: 0;
79
+ &:hover {
80
+ background: transparent;
81
+ border-color: transparent;
82
+ }
84
83
  }
85
84
  }
86
- }
87
85
 
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
- }
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
+ }
99
101
 
100
- .bodyContainer-without-footer {
101
- height: calc(100% - 70px) !important;
102
- }
103
102
  `;
104
103
 
105
104
  const ButtonContainer = styled.div`
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;
126
- padding: 10px 0;
127
- margin: 0 10px;
128
- max-width: 150px;
129
- cursor: pointer;
105
+ font-family: SFUIText-Regular;
130
106
  display: flex;
131
- justify-content: center;
132
- align-items: center;
133
-
134
- :hover {
135
- color: ${(props) => colors[props.theme].sideBar.themeColor};
107
+ justify-content:center;
108
+ 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
+ }
136
136
  }
137
- }
138
137
 
139
- .default {
140
- background: #303f51;
138
+ .default{
139
+ background: #303F51;
141
140
 
142
- :hover {
143
- color: ${(props) => colors[props.theme].sideBar.lightthemeColor};
141
+ :hover{
142
+ color:${props => colors[props.theme].sideBar.lightthemeColor};
143
+ }
144
144
  }
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;
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
+ }
155
155
  }
156
- }
157
156
  `;
158
157
 
159
158
  /**
@@ -166,14 +165,14 @@ export default class SideBar extends Component {
166
165
  super(props);
167
166
  this.state = {
168
167
  show: false,
169
- renderFlag: false,
168
+ renderFlag: false
170
169
  };
171
170
  }
172
171
  componentDidMount = () => {
173
172
  this.setState({
174
- renderFlag: true,
175
- });
176
- };
173
+ renderFlag: true
174
+ })
175
+ }
177
176
 
178
177
  cancelClick() {
179
178
  const { onCancelClick } = this.props;
@@ -184,63 +183,52 @@ export default class SideBar extends Component {
184
183
  const { onButtonClick } = this.props;
185
184
  onButtonClick(field);
186
185
  this.setState({
187
- ...this.state,
188
- });
186
+ ...this.state
187
+ })
189
188
  }
190
189
  render() {
191
- const {
192
- title,
193
- content,
194
- sideBarButtonObject,
195
- showSideBar,
196
- loadingBtn,
197
- theme,
198
- } = this.props;
190
+ const { title, content, sideBarButtonObject, showSideBar, loadingBtn,theme, width } = this.props;
199
191
 
200
192
  return (
201
193
  <React.Fragment>
202
194
  <SideBarOverlay open={showSideBar} />
203
- <SideBarBlock theme={theme} className={showSideBar ? "open" : "close"}>
195
+ <SideBarBlock theme={theme} width={width} className={showSideBar ? 'open' : 'close'}>
204
196
  <div className="sidebar-header">
205
197
  <p className="header-title">{title}</p>
206
198
  <Button
207
- theme={theme}
199
+ theme={theme}
208
200
  appearance="cta"
209
201
  iconWidth={12}
210
202
  iconHeight={12}
211
203
  icon="cross"
212
204
  iconBackground={false}
213
205
  onClick={() => {
214
- this.buttonClick("cancel");
206
+ this.buttonClick('cancel');
215
207
  }}
216
208
  />
217
209
  </div>
218
- <div
219
- className={`bodyContainer ${!sideBarButtonObject.length &&
220
- "bodyContainer-without-footer"}`}
221
- >
210
+ <div className={`bodyContainer ${!sideBarButtonObject.length && 'bodyContainer-without-footer'}`}>
222
211
  {content}
223
212
  </div>
224
- {sideBarButtonObject && sideBarButtonObject.length ? (
225
- <ButtonContainer theme={theme} className="button-container">
226
- {sideBarButtonObject.map((object) => {
213
+ {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer theme={theme} className="button-container" >
214
+ {
215
+ sideBarButtonObject.map((object) => {
227
216
  return (
228
217
  <div
229
218
  key={object.field}
230
- className={`btn ${object.type || "default"}`}
231
- onClick={() => {
232
- this.buttonClick(object.field);
233
- }}
219
+ className={`btn ${object.type || 'default'}`}
220
+ onClick={() => { this.buttonClick(object.field) }}
234
221
  >
235
222
  {object.title}
236
- {object.isLoading ? (
237
- <Loader theme={theme} loaderName="SpinningLoader" />
238
- ) : null}
223
+ {object.isLoading ?
224
+ <Loader theme={theme} loaderName='SpinningLoader' />
225
+ : null}
239
226
  </div>
240
- );
241
- })}
242
- </ButtonContainer>
243
- ) : null}
227
+ )
228
+ })
229
+ }
230
+ </ButtonContainer> : null
231
+ }
244
232
  </SideBarBlock>
245
233
  </React.Fragment>
246
234
  );
@@ -248,15 +236,16 @@ export default class SideBar extends Component {
248
236
  }
249
237
 
250
238
  SideBar.propTypes = {
251
- theme: PropTypes.oneOf(["light", "dark", "nexc"]),
239
+ theme: PropTypes.oneOf(['light', 'dark', 'nexc']),
252
240
  showSideBar: PropTypes.bool,
253
241
  title: PropTypes.string,
254
242
  content: PropTypes.object,
255
243
  sideBarButtonObject: PropTypes.object,
256
244
  onCancelClick: PropTypes.func,
257
- onButtonClick: PropTypes.func,
258
- };
245
+ onButtonClick: PropTypes.func
246
+ }
259
247
 
260
248
  SideBar.defaultProps = {
261
- theme: "dark",
262
- };
249
+ theme: 'dark',
250
+ width: '400px'
251
+ };
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.2.24",
3
+ "version": "9.2.26",
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.2.24",
10
+ "@desynova-digital/tokens": "9.2.26",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },