@desynova-digital/components 8.19.50 → 8.19.52

package/atoms/button/button.js

@@ -241,7 +241,7 @@ var Button = function Button(_ref) {
 };
 
 Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
-  return getAttributes(props).width ? getAttributes(props).width : "auto";
+  return getAttributes(props).width ? getAttributes(props).width + "px" : "auto";
 }, function (props) {
   return props.width ? props.width + "px" : props.stretchWidth ? '100%' : "auto";
 }, function (props) {

package/atoms/inputText/inputText.js

@@ -130,6 +130,11 @@ var InputText = function InputText(_ref) {
 };
 var returnPadding = function returnPadding(props) {
   var digitCount = props.maxLength.toString().length;
+
+  if (props.type === 'password') {
+    return "7px 23px 2px 0px";
+  }
+
   switch (digitCount) {
     case 0:
       return "7px 0px 2px 0px";

package/molecules/tabs/tabs.js

@@ -10,7 +10,7 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 var _templateObject = _taggedTemplateLiteral(['\n  height: 100%;\n'], ['\n  height: 100%;\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  width: 100%;\n  font-family: SFUIText-Medium;\n  font-size: 14px;\n  padding: 20px 15px;\n  line-height: 19px;\n  text-transform: uppercase;\n  color: ', ';\n  cursor: ', ';\n  pointer-events: ', ';\n  border-bottom: 1px solid ', ';\n  text-align: center;\n  &:hover {\n    color: ', ';\n    ', ';\n  }\n'], ['\n  width: 100%;\n  font-family: SFUIText-Medium;\n  font-size: 14px;\n  padding: 20px 15px;\n  line-height: 19px;\n  text-transform: uppercase;\n  color: ', ';\n  cursor: ', ';\n  pointer-events: ', ';\n  border-bottom: 1px solid ', ';\n  text-align: center;\n  &:hover {\n    color: ', ';\n    ', ';\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n\n  /* Add this style in your CSS */\n  .nested-tab-list.vertical {\n    flex-direction: column; /* Display nested tabs vertically */\n    align-items: flex-start; /* Align nested tabs to the start */\n  }\n\n  /* Adjust existing styles for better spacing */\n  .nested-tab-list-item {\n    margin-right: 8px; /* Add some margin between nested tabs */\n  }\n  /* Add this style in your CSS */\n  . \n'], ['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n\n  /* Add this style in your CSS */\n  .nested-tab-list.vertical {\n    flex-direction: column; /* Display nested tabs vertically */\n    align-items: flex-start; /* Align nested tabs to the start */\n  }\n\n  /* Adjust existing styles for better spacing */\n  .nested-tab-list-item {\n    margin-right: 8px; /* Add some margin between nested tabs */\n  }\n  /* Add this style in your CSS */\n  . \n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n'], ['\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ', ';\n\n  &.tab-list{\n    align-items: stretch;\n  }\n']),
     _templateObject4 = _taggedTemplateLiteral(['\n  background:', ';\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n'], ['\n  background:', ';\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n']);
 
 var _react = require('react');
@@ -81,13 +81,7 @@ var Tabs = function (_React$Component) {
         return child ? _react2.default.cloneElement(child, { theme: props.theme }) : null;
       });
     }
-
-    // Initialize separate state for selected indices of main tabs and nested tabs
-    _this.state = {
-      selectedMainTabIndex: _this.getSelectedTabFromChildProps(_this.tabs),
-      selectedNestedTabIndex: null,
-      hoveredTabIndex: null
-    };
+    _this.state = { selectedIndex: _this.getSelectedTabFromChildProps(_this.tabs) };
     return _this;
   }
 
@@ -99,8 +93,8 @@ var Tabs = function (_React$Component) {
       if (!cosmosKey) return;
 
       var storedIndex = tabStore[cosmosKey];
-      if (storedIndex && storedIndex !== this.state.selectedMainTabIndex) {
-        this.setState({ selectedMainTabIndex: tabStore[cosmosKey] });
+      if (storedIndex && storedIndex !== this.state.selectedIndex) {
+        this.setState({ selectedIndex: tabStore[cosmosKey] });
       }
     }
   }, {
@@ -137,7 +131,7 @@ var Tabs = function (_React$Component) {
             tabStore[cosmosKey] = nextIndex;
           }
 
-          this.setState({ selectedIndex: nextIndex, selectedNestedTabIndex: null });
+          this.setState({ selectedIndex: nextIndex });
         }
       }
     }
@@ -150,87 +144,10 @@ var Tabs = function (_React$Component) {
 
       return selectedIndex;
     }
-  }, {
-    key: 'handleTabMouseEnter',
-    value: function handleTabMouseEnter(index) {
-      this.setState({ hoveredTabIndex: index });
-    }
-  }, {
-    key: 'handleTabMouseLeave',
-    value: function handleTabMouseLeave() {
-      this.setState({ hoveredTabIndex: null });
-    }
-
-    // changeMainTab(nextIndex) {
-    //   // Deselect nested tab when changing the main tab
-    //   this.setState({ selectedMainTabIndex: nextIndex, selectedNestedTabIndex: null });
-    //   if (this.props.onSelect) {
-    //     this.props.onSelect(nextIndex);
-    //   } else {
-    //     const { cosmosKey } = this.props;
-    //     if (cosmosKey) {
-    //       tabStore[cosmosKey] = nextIndex;
-    //     }
-    //   }
-    // }
-
-  }, {
-    key: 'changeNestedTab',
-    value: function changeNestedTab(nextIndex) {
-      // Deselect main tab when changing the nested tab
-      this.setState({ selectedNestedTabIndex: nextIndex, selectedIndex: null });
-      if (this.props.onSelect) {
-        this.props.onSelect(nextIndex);
-      }
-    }
-  }, {
-    key: 'renderNestedTabs',
-    value: function renderNestedTabs(tab, index) {
-      var _this2 = this;
-
-      if (!tab.props.children || !Array.isArray(tab.props.children)) {
-        return null;
-      }
-
-      var isVisible = this.state.hoveredTabIndex === index;
-
-      return _react2.default.createElement(
-        'div',
-        {
-          className: 'nested-tab-container',
-          style: { display: isVisible ? 'block' : 'none' },
-          onMouseEnter: function onMouseEnter() {
-            return _this2.handleTabMouseEnter(index);
-          },
-          onMouseLeave: function onMouseLeave() {
-            return _this2.handleTabMouseLeave();
-          }
-        },
-        _react2.default.createElement(
-          TabLinkGroup,
-          { theme: this.props.theme, className: 'nested-tab-list vertical' },
-          tab.props.children.map(function (nestedTab, nestedIndex) {
-            return _react2.default.createElement(
-              TabLink,
-              {
-                key: nestedTab.props.label,
-                selected: _this2.state.selectedNestedTabIndex === nestedIndex,
-                theme: _this2.props.theme,
-                className: _this2.state.selectedNestedTabIndex === nestedIndex ? 'nested-tab-list-item active' : 'nested-tab-list-item',
-                onClick: function onClick() {
-                  return _this2.changeNestedTab(nestedIndex);
-                }
-              },
-              nestedTab.props.label
-            );
-          })
-        )
-      );
-    }
   }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       var selectedIndex = this.getSelectedTabFromPropsOrState();
 
@@ -244,27 +161,17 @@ var Tabs = function (_React$Component) {
             return val1.props.index - val2.props.index;
           }).map(function (tab, index) {
             return _react2.default.createElement(
-              'div',
-              { key: tab.props.label, className: 'tab-container' },
-              _react2.default.createElement(
-                TabLink,
-                {
-                  onClick: function onClick() {
-                    return _this3.changeTab(index);
-                  },
-                  selected: selectedIndex === index,
-                  theme: _this3.props.theme,
-                  className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item',
-                  onMouseEnter: function onMouseEnter() {
-                    return _this3.handleTabMouseEnter(index);
-                  },
-                  onMouseLeave: function onMouseLeave() {
-                    return _this3.handleTabMouseLeave();
-                  }
+              TabLink,
+              {
+                onClick: function onClick() {
+                  return _this2.changeTab(index);
                 },
-                tab.props.label
-              ),
-              _this3.renderNestedTabs(tab, index)
+                key: tab.props.label,
+                selected: selectedIndex === index,
+                theme: _this2.props.theme,
+                className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
+              },
+              tab.props.label
             );
           })
         ),

package/molecules/tabs/tabs.story.js

@@ -110,44 +110,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
-});
-
-(0, _react3.storiesOf)('Tabs').add('dark - default selected with nested tabs', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'default', background: 'dark' },
-    _react2.default.createElement(
-      _components.Tabs,
-      { theme: 'dark' },
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { label: 'Tab 1' },
-        'This is tab 1'
-      ),
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { label: 'Tab 2' },
-        'You can render anything you want here'
-      ),
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { label: 'Tab 3 with Nested Tabs' },
-        _react2.default.createElement(
-          _components.Tabs.Tab,
-          { label: 'Nested Tab 1' },
-          'This is nested tab 1'
-        ),
-        _react2.default.createElement(
-          _components.Tabs.Tab,
-          { label: 'Nested Tab 2' },
-          'This is nested tab 2'
-        )
-      ),
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { selected: true, label: 'Tab 4' },
-        'Look, the fourth tab is selected by default!'
-      )
-    )
-  );
 });

package/package.json

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