@desynova-digital/components 8.19.53 → 8.19.54

package/molecules/tabs/tabs.js

@@ -9,9 +9,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 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; }; }();
 
 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  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']);
+    _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  position: relative;\n  color: ', ';\n  cursor: ', ';\n  pointer-events: ', ';\n  border-bottom: 1px solid\n    ', ';\n  text-align: center;\n  &:hover {\n    color: ', ';\n    ', ';\n  }\n  &:hover {\n    .option-list {\n      opacity: 1;\n      pointer-events: all;\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  position: relative;\n  color: ', ';\n  cursor: ', ';\n  pointer-events: ', ';\n  border-bottom: 1px solid\n    ', ';\n  text-align: center;\n  &:hover {\n    color: ', ';\n    ', ';\n  }\n  &:hover {\n    .option-list {\n      opacity: 1;\n      pointer-events: all;\n    }\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  position: absolute;\n  display: flex;\n  padding: 15px;\n  flex-direction: column;\n  gap: 10px;\n  z-index: 5;\n  border-radius: 10px;\n  background: #15212f;\n  top: 72px;\n  width: 130px;\n  color: #fff;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: opacity 0.3s ease-out;\n  text-transform: capitalize;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  opacity: 0;\n  .active {\n    color: #07d5cd;\n  }\n  .option {\n    cursor: pointer;\n    font-family: \'SFUIText-Regular\';\n    font-size: 10px;\n    font-style: normal;\n    font-weight: 300;\n    line-height: 18px;\n    display: flex;\n    align-self: stretch;\n    &:hover {\n      color: #07d5cd;\n    }\n  }\n  &:before {\n    content: \'\';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 5px solid #00cec6;\n    top: -5px;\n    left: 50%;\n    transform: translate(-50%);\n    border-radius: 5px;\n  }\n'], ['\n  position: absolute;\n  display: flex;\n  padding: 15px;\n  flex-direction: column;\n  gap: 10px;\n  z-index: 5;\n  border-radius: 10px;\n  background: #15212f;\n  top: 72px;\n  width: 130px;\n  color: #fff;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: opacity 0.3s ease-out;\n  text-transform: capitalize;\n  justify-content: center;\n  align-items: center;\n  pointer-events: none;\n  opacity: 0;\n  .active {\n    color: #07d5cd;\n  }\n  .option {\n    cursor: pointer;\n    font-family: \'SFUIText-Regular\';\n    font-size: 10px;\n    font-style: normal;\n    font-weight: 300;\n    line-height: 18px;\n    display: flex;\n    align-self: stretch;\n    &:hover {\n      color: #07d5cd;\n    }\n  }\n  &:before {\n    content: \'\';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 5px solid #00cec6;\n    top: -5px;\n    left: 50%;\n    transform: translate(-50%);\n    border-radius: 5px;\n  }\n']),
+    _templateObject4 = _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']),
+    _templateObject5 = _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');
 
@@ -48,7 +49,7 @@ var TabLink = _styledComponents2.default.a(_templateObject2, function (props) {
 }, function (props) {
   return props.selected ? 'default' : 'pointer';
 }, function (props) {
-  return props.selected ? 'none' : 'all';
+  return props.selected && !props.allowPointerEvents ? 'none' : 'all';
 }, function (props) {
   return props.selected ? _tokens.colors[props.theme].tabs.navsSelectedBorder : _tokens.colors[props.theme].tabs.navsDefaultBorder;
 }, function (props) {
@@ -56,12 +57,13 @@ var TabLink = _styledComponents2.default.a(_templateObject2, function (props) {
 }, function (props) {
   return !props.selected ? 'border-bottom: 1px solid' + _tokens.colors[props.theme].tabs.navsSelectedBorder : null;
 });
+var OptionList = _styledComponents2.default.div(_templateObject3);
 
-var TabLinkGroup = _styledComponents2.default.div(_templateObject3, function (props) {
+var TabLinkGroup = _styledComponents2.default.div(_templateObject4, function (props) {
   return _tokens.colors[props.theme].tabs.navsBackground;
 });
 
-var TabContent = _styledComponents2.default.div(_templateObject4, function (props) {
+var TabContent = _styledComponents2.default.div(_templateObject5, function (props) {
   return _tokens.colors[props.theme].tabs.contentBackground;
 });
 
@@ -81,7 +83,12 @@ var Tabs = function (_React$Component) {
         return child ? _react2.default.cloneElement(child, { theme: props.theme }) : null;
       });
     }
-    _this.state = { selectedIndex: _this.getSelectedTabFromChildProps(_this.tabs) };
+
+    // Initialize separate state for selected indices of main tabs and nested tabs
+    _this.state = {
+      selectedMainTabIndex: _this.getSelectedTabFromChildProps(_this.tabs),
+      selectedNestedTabIndex: null
+    };
     return _this;
   }
 
@@ -93,8 +100,8 @@ var Tabs = function (_React$Component) {
       if (!cosmosKey) return;
 
       var storedIndex = tabStore[cosmosKey];
-      if (storedIndex && storedIndex !== this.state.selectedIndex) {
-        this.setState({ selectedIndex: tabStore[cosmosKey] });
+      if (storedIndex && storedIndex !== this.state.selectedMainTabIndex) {
+        this.setState({ selectedMainTabIndex: tabStore[cosmosKey] });
       }
     }
   }, {
@@ -130,9 +137,8 @@ var Tabs = function (_React$Component) {
           if (cosmosKey) {
             tabStore[cosmosKey] = nextIndex;
           }
-
-          this.setState({ selectedIndex: nextIndex });
         }
+        this.setState({ selectedIndex: nextIndex, selectedNestedTabIndex: null });
       }
     }
   }, {
@@ -144,10 +150,62 @@ var Tabs = function (_React$Component) {
 
       return selectedIndex;
     }
+  }, {
+    key: 'changeNestedTab',
+    value: function changeNestedTab(nextIndex, parentTabIndex) {
+      // Deselect main tab when changing the nested tab
+      this.setState({ selectedNestedTabIndex: nextIndex, selectedIndex: null });
+      if (this.props.onSelect) {
+        this.props.onSelect(nextIndex, parentTabIndex);
+      }
+    }
+  }, {
+    key: 'renderNestedTabs',
+    value: function renderNestedTabs(tab, index) {
+      var _this2 = this;
+
+      if (!tab.props.children || !Array.isArray(tab.props.children)) {
+        return null;
+      }
+
+      var parentTabRef = _react2.default.createRef();
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'nested-tab-container', style: { position: 'relative' } },
+        _react2.default.createElement(
+          TabLink,
+          {
+            ref: parentTabRef,
+            selected: this.state.selectedIndex === index,
+            allowPointerEvents: true,
+            theme: this.props.theme,
+            className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
+          tab.props.label,
+          _react2.default.createElement(
+            OptionList,
+            { className: 'option-list', style: {} },
+            tab.props.children.map(function (nestedTab, nestedIndex) {
+              return _react2.default.createElement(
+                'div',
+                {
+                  key: nestedTab.props.label,
+                  className: _this2.state.selectedNestedTabIndex === nestedIndex ? 'option active' : 'option',
+                  theme: _this2.props.theme,
+                  onClick: function onClick() {
+                    return _this2.changeNestedTab(nestedIndex, index);
+                  } },
+                nestedTab.props.label
+              );
+            })
+          )
+        )
+      );
+    }
   }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var selectedIndex = this.getSelectedTabFromPropsOrState();
 
@@ -161,17 +219,20 @@ var Tabs = function (_React$Component) {
             return val1.props.index - val2.props.index;
           }).map(function (tab, index) {
             return _react2.default.createElement(
-              TabLink,
-              {
-                onClick: function onClick() {
-                  return _this2.changeTab(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
+              'div',
+              { key: tab.props.label, className: 'tab-container' },
+              !Array.isArray(tab.props.children) && _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' },
+                tab.props.label
+              ),
+              tab.props.children && _this3.renderNestedTabs(tab, index)
             );
           })
         ),

package/package.json

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