@desynova-digital/components 8.19.55 → 8.19.57

package/atoms/button/button.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+// import  colors  from "../../../tokens/colors";
+
 
 var _templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  &:hover {\n    .tooltip-block {\n      display: block;\n    }\n  }\n  .tooltip-block {\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    background: #000;\n    padding: 10px 8px;\n    border-radius: 5px;\n    font-size: 12px;\n    text-transform: initial;\n    display: none;\n    color: #fff;\n    font-family: SFUIText-Regular;\n    left: 50%;\n    transform: translateX(-50%);\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n\n      ", "\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n"], ["\n  position: relative;\n  &:hover {\n    .tooltip-block {\n      display: block;\n    }\n  }\n  .tooltip-block {\n    position: absolute;\n    z-index: 1;\n    top: ", ";\n    background: #000;\n    padding: 10px 8px;\n    border-radius: 5px;\n    font-size: 12px;\n    text-transform: initial;\n    display: none;\n    color: #fff;\n    font-family: SFUIText-Regular;\n    left: 50%;\n    transform: translateX(-50%);\n    &:after {\n      content: \"\";\n      position: absolute;\n      border-left: 5px solid transparent;\n      border-right: 5px solid transparent;\n\n      ", "\n      left: 50%;\n      transform: translateX(-50%);\n    }\n  }\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width:  ", ";\n  /* width: ", "; */\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width:  ", ";\n  /* width: ", "; */\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"]),
+    _templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width:  ", ";\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  text-transform: uppercase;\n  text-align: center;\n  font-size: 14px;\n  position: relative;\n  align-items: center;\n  font-weight: 600;\n  top: 0;\n  margin: 0 auto;\n  width:  ", ";\n  height: ", ";\n  border: ", ";\n  background: ", ";\n  border-color: ", ";\n\n  color: ", ";\n\n  padding: ", ";\n\n  opacity: ", ";\n  cursor: ", ";\n  pointer-events: ", ";\n\n  border-radius: ", ";\n\n  /* box-shadow: ", ";\n  transition: ", "; */\n\n  ", " {\n    position: relative;\n    top: 0px;\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    background: ", ";\n    border-radius: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &:hover {\n    transition: all 0.4s;\n    color: ", ";\n    box-shadow: ", ";\n    /* top: ", "; */\n    background: ", ";\n    border-color: ", ";\n    transition: ", ";\n    box-shadow: ", ";\n    \n    ", " {\n\n      path{\n       \n      ", "\n      ", "\n       \n      }\n    }\n  }\n\n  &:focus {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n\n  &:active {\n    background: ", ";\n    border-color: ", ";\n    outline: none;\n  }\n  .loader-wrapper{\n    position: absolute;\n    top:50%;\n    left:50%;\n    transform: translate(-50%, -50%);\n  }\n"]),
     _templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: middle;\n"], ["\n  display: inline-block;\n  vertical-align: middle;\n"]);
 
 var _react = require("react");
@@ -242,8 +244,6 @@ var Button = function Button(_ref) {
 
 Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
   return getAttributes(props).width ? getAttributes(props).width : "auto";
-}, function (props) {
-  return props.width ? props.width + "px" : props.stretchWidth ? '100%' : "auto";
 }, function (props) {
   return props.height ? props.height + "px" : "auto";
 }, function (props) {

package/atoms/button/button.story.js

@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       null,
       _react2.default.createElement(
         _components.Button,
-        null,
+        { theme: 'nexc' },
         'Button'
       ),
       _react2.default.createElement(

package/atoms/graphs/circleDonut/circleDonut.js

@@ -116,6 +116,7 @@ var CircleDonut = function (_Component) {
             var pathD = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].d : circleList['donutDefault'].d;
             var circleCircumference = _this.props.data.graph_type && _this.props.data.graph_type != '' ? circleList[_this.props.data.graph_type].c : circleList['donutDefault'].c;
             var graphTitleName = _this.props.data && _this.props.data.data && _this.props.data.data.name ? _this.props.data.data.name : new Date().getTime() + '';
+            graphTitleName = graphTitleName.replaceAll(" ", '');
 
             return _react2.default.createElement(
                 StyledCircleDonut,

package/molecules/tabs/tabs.js

@@ -151,6 +151,15 @@ var Tabs = function (_React$Component) {
       return selectedIndex;
     }
   }, {
+    key: 'getNestedTabFromPropsOrState',
+    value: function getNestedTabFromPropsOrState() {
+      var stateSelectedIndex = this.state.selectedNestedTabIndex;
+      var propsSelectedIndex = this.props.selectedNestedTabIndex;
+      var selectedIndex = typeof propsSelectedIndex !== 'undefined' ? propsSelectedIndex : stateSelectedIndex;
+
+      return selectedIndex;
+    }
+  }, {
     key: 'changeNestedTab',
     value: function changeNestedTab(nextIndex, parentTabIndex) {
       // Deselect main tab when changing the nested tab
@@ -168,7 +177,7 @@ var Tabs = function (_React$Component) {
         return null;
       }
 
-      var parentTabRef = _react2.default.createRef();
+      var nestedIdx = this.getNestedTabFromPropsOrState();
 
       return _react2.default.createElement(
         _react2.default.Fragment,
@@ -176,7 +185,6 @@ var Tabs = function (_React$Component) {
         _react2.default.createElement(
           TabLink,
           {
-            ref: parentTabRef,
             selected: this.state.selectedIndex === index,
             allowPointerEvents: true,
             key: tab.props.label,
@@ -191,7 +199,7 @@ var Tabs = function (_React$Component) {
                 'div',
                 {
                   key: nestedTab.props.label,
-                  className: _this2.state.selectedNestedTabIndex === nestedIndex ? 'option active' : 'option',
+                  className: nestedIdx === nestedIndex ? 'option active' : 'option',
                   theme: _this2.props.theme,
                   onClick: function onClick() {
                     return _this2.changeNestedTab(nestedIndex, index);
@@ -255,7 +263,9 @@ Tabs.propTypes = {
   /** onSelect will be called with the new index when a new tab is selected by the user */
   onSelect: _propTypes2.default.func,
 
-  index: _propTypes2.default.number
+  index: _propTypes2.default.number,
+
+  selectedNestedTabIndex: _propTypes2.default.number
 };
 
 Tabs.defaultProps = {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "8.19.55",
+  "version": "8.19.57",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.19.55",
+    "@desynova-digital/tokens": "8.19.57",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },