@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/sideBar/sidebar.js

@@ -10,7 +10,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 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']),
     _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']),
-    _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']);
+    _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: ', ';\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'], ['\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']);
 
 var _react = require('react');
 
@@ -30,6 +30,8 @@ var _index2 = _interopRequireDefault(_index);
 
 var _components = require('../../components');
 
+var _tokens = require('@desynova-digital/tokens');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -46,7 +48,13 @@ var SideBarOverlay = _styledComponents2.default.div(_templateObject, function (p
 
 var SideBarBlock = _styledComponents2.default.div(_templateObject2, _index2.default.Element);
 
-var ButtonContainer = _styledComponents2.default.div(_templateObject3);
+var ButtonContainer = _styledComponents2.default.div(_templateObject3, function (props) {
+  return _tokens.colors[props.theme].sideBar.themeColor;
+}, function (props) {
+  return _tokens.colors[props.theme].sideBar.lightthemeColor;
+}, function (props) {
+  return _tokens.colors[props.theme].sideBar.themeColor;
+});
 
 /**
  * @component
@@ -99,7 +107,8 @@ var SideBar = function (_Component) {
           content = _props.content,
           sideBarButtonObject = _props.sideBarButtonObject,
           showSideBar = _props.showSideBar,
-          loadingBtn = _props.loadingBtn;
+          loadingBtn = _props.loadingBtn,
+          theme = _props.theme;
 
 
       return _react2.default.createElement(
@@ -108,7 +117,7 @@ var SideBar = function (_Component) {
         _react2.default.createElement(SideBarOverlay, { open: showSideBar }),
         _react2.default.createElement(
           SideBarBlock,
-          { className: showSideBar ? 'open' : 'close' },
+          { theme: this.props.theme, className: showSideBar ? 'open' : 'close' },
           _react2.default.createElement(
             'div',
             { className: 'sidebar-header' },
@@ -135,7 +144,7 @@ var SideBar = function (_Component) {
           ),
           sideBarButtonObject && sideBarButtonObject.length ? _react2.default.createElement(
             ButtonContainer,
-            { className: 'button-container' },
+            { theme: this.props.theme, className: 'button-container' },
             sideBarButtonObject.map(function (object) {
               return _react2.default.createElement(
                 'div',
@@ -163,10 +172,15 @@ exports.default = SideBar;
 
 
 SideBar.propTypes = {
+  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
   showSideBar: _propTypes2.default.bool,
   title: _propTypes2.default.string,
   content: _propTypes2.default.object,
   sideBarButtonObject: _propTypes2.default.object,
   onCancelClick: _propTypes2.default.func,
   onButtonClick: _propTypes2.default.func
+};
+
+SideBar.defaultProps = {
+  theme: 'light'
 };

package/atoms/sideBar/sidebar.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Button from '../button/index';
 import { Loader } from '../../components'
-
+import { colors } from '@desynova-digital/tokens';
 const SideBarOverlay = styled.div`
   position: fixed;
   width: 100%;
@@ -131,7 +131,7 @@ const ButtonContainer = styled.div`
         align-items:center;
         
         :hover{
-            color: #00CEC6;
+            color: ${props => colors[props.theme].sideBar.themeColor};
         }
     }
 
@@ -139,13 +139,13 @@ const ButtonContainer = styled.div`
         background: #303F51;
 
         :hover{
-            color: rgb(0, 206, 198);
+            color:${props => colors[props.theme].sideBar.lightthemeColor};
         }
     }
     
     .primary {
         color: rgb(12, 20, 29);
-        background: #00CEC6;
+        background: ${props => colors[props.theme].sideBar.themeColor};
 
         :hover{
             color: rgb(12, 20, 29);
@@ -187,12 +187,12 @@ export default class SideBar extends Component {
     })
   }
   render() {
-    const { title, content, sideBarButtonObject, showSideBar, loadingBtn } = this.props;
+    const { title, content, sideBarButtonObject, showSideBar, loadingBtn,theme } = this.props;
 
     return (
       <React.Fragment>
         <SideBarOverlay open={showSideBar} />
-        <SideBarBlock className={showSideBar ? 'open' : 'close'}>
+        <SideBarBlock theme={this.props.theme} className={showSideBar ? 'open' : 'close'}>
           <div className="sidebar-header">
             <p className="header-title">{title}</p>
             <Button
@@ -209,7 +209,7 @@ export default class SideBar extends Component {
           <div className={`bodyContainer ${!sideBarButtonObject.length && 'bodyContainer-without-footer'}`}>
             {content}
           </div>
-          {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer className="button-container" >
+          {sideBarButtonObject && sideBarButtonObject.length ? <ButtonContainer theme={this.props.theme} className="button-container" >
             {
               sideBarButtonObject.map((object) => {
                 return (
@@ -235,10 +235,15 @@ export default class SideBar extends Component {
 }
 
 SideBar.propTypes = {
+  theme: PropTypes.oneOf(['light', 'dark', 'nexc']),
   showSideBar: PropTypes.bool,
   title: PropTypes.string,
   content: PropTypes.object,
   sideBarButtonObject: PropTypes.object,
   onCancelClick: PropTypes.func,
   onButtonClick: PropTypes.func
-}
+}
+
+SideBar.defaultProps = {
+  theme: 'light'
+};

package/atoms/switch/switch.js

@@ -1,7 +1,7 @@
 'use strict';
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
 
 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; }; }();
@@ -16,7 +16,7 @@ var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _tokens = require('../../../tokens');
+var _tokens = require('@desynova-digital/tokens');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,91 +31,97 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 //import './switch.css'
 
 var Switch = function (_React$Component) {
-    _inherits(Switch, _React$Component);
+  _inherits(Switch, _React$Component);
 
-    function Switch(props) {
-        _classCallCheck(this, Switch);
+  function Switch(props) {
+    _classCallCheck(this, Switch);
 
-        var _this = _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).call(this, props));
+    var _this = _possibleConstructorReturn(this, (Switch.__proto__ || Object.getPrototypeOf(Switch)).call(this, props));
 
-        _this.state = {
-            isChecked: props.checked ? true : false
-        };
-        _this._handleChange = _this._handleChange.bind(_this);
-        return _this;
+    _this.state = {
+      isChecked: props.checked ? true : false
+    };
+    _this._handleChange = _this._handleChange.bind(_this);
+    return _this;
+  }
+
+  _createClass(Switch, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      //this.setState( { isChecked: this.props.isChecked } );
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        SwitchContainer,
+        { theme: this.props.theme },
+        _react2.default.createElement(
+          'label',
+          null,
+          _react2.default.createElement('input', {
+            disabled: this.props.disabled ? 'disabled' : '',
+            ref: 'switch',
+            checked: this.props.checked ? true : false,
+            onChange: this._handleChange,
+            className: 'switch',
+            type: 'checkbox'
+          }),
+          this.props.label ? _react2.default.createElement(
+            'span',
+            { className: 'label-text' },
+            this.props.label
+          ) : null,
+          _react2.default.createElement(
+            'div',
+            { className: 'switch-box' },
+            _react2.default.createElement('div', null)
+          )
+        )
+      );
+    }
+  }, {
+    key: '_handleChange',
+    value: function _handleChange() {
+      // this.setState( { isChecked: !this.state.isChecked },
+      // ()=>{
+      this.props.onChangeCheck(this.props.checked);
+      //} );
     }
+  }]);
 
-    _createClass(Switch, [{
-        key: 'componentWillMount',
-        value: function componentWillMount() {
-            //this.setState( { isChecked: this.props.isChecked } );
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-
-            return _react2.default.createElement(
-                SwitchContainer,
-                { theme: this.props.theme },
-                _react2.default.createElement(
-                    'label',
-                    null,
-                    _react2.default.createElement('input', { disabled: this.props.disabled ? 'disabled' : '', ref: 'switch', checked: this.props.checked ? true : false, onChange: this._handleChange, className: 'switch', type: 'checkbox' }),
-                    this.props.label ? _react2.default.createElement(
-                        'span',
-                        { className: 'label-text' },
-                        this.props.label
-                    ) : null,
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'switch-box' },
-                        _react2.default.createElement('div', null)
-                    )
-                )
-            );
-        }
-    }, {
-        key: '_handleChange',
-        value: function _handleChange() {
-            // this.setState( { isChecked: !this.state.isChecked },
-            // ()=>{
-            this.props.onChangeCheck(this.props.checked);
-            //} );
-        }
-    }]);
-
-    return Switch;
+  return Switch;
 }(_react2.default.Component);
 
 var SwitchContainer = _styledComponents2.default.div(_templateObject, function (props) {
-    return _tokens.colors[props.theme].switch.label;
+  return _tokens.colors[props.theme].switch.label;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.background;
+  return _tokens.colors[props.theme].switch.background;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.border;
+  return _tokens.colors[props.theme].switch.border;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedLabel;
+  return _tokens.colors[props.theme].switch.checkedLabel;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedBorder;
+  return _tokens.colors[props.theme].switch.checkedBorder;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.circleBackground;
+  return _tokens.colors[props.theme].switch.circleBackground;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.circleBorder;
+  return _tokens.colors[props.theme].switch.circleBorder;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedCircleBackground;
+  return _tokens.colors[props.theme].switch.checkedCircleBackground;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedCircleBorder;
+  return _tokens.colors[props.theme].switch.checkedCircleBorder;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.backgroundDisabled;
+  return _tokens.colors[props.theme].switch.backgroundDisabled;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.borderDisabled;
+  return _tokens.colors[props.theme].switch.borderDisabled;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedBorderDisabled;
+  return _tokens.colors[props.theme].switch.checkedBorderDisabled;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.borderDisabled;
+  return _tokens.colors[props.theme].switch.borderDisabled;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedBorderDisabled;
+  return _tokens.colors[props.theme].switch.checkedBorderDisabled;
 }, function (props) {
-    return _tokens.colors[props.theme].switch.checkedBorderDisabled;
+  return _tokens.colors[props.theme].switch.checkedBorderDisabled;
 });
 exports.default = Switch;