@desynova-digital/components 9.0.26 → 9.1.0

package/molecules/tabs/tabs.js

@@ -1,50 +1,27 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-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; };
-
-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  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: ', ';\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: ', ';\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 ', ';\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: ', ';\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: ', ';\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 ', ';\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');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _uniqueId = require('../../_helpers/uniqueId');
-
-var _uniqueId2 = _interopRequireDefault(_uniqueId);
-
-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"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Wrapper = _styledComponents2.default.div(_templateObject);
-
-var TabLink = _styledComponents2.default.a(_templateObject2, function (props) {
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tokens = require("@desynova-digital/tokens");
+var _uniqueId = _interopRequireDefault(require("../../_helpers/uniqueId"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+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)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  height: 100%;\n"])));
+var TabLink = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
   return props.selected ? _tokens.colors[props.theme].tabs.navsSelectColor : _tokens.colors[props.theme].tabs.navsDefaultColor;
 }, function (props) {
   return props.selected ? 'default' : 'pointer';
@@ -57,36 +34,32 @@ 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, function (props) {
+var OptionList = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\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: ", ";\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: ", ";\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 ", ";\n    top: -5px;\n    left: 50%;\n    transform: translate(-50%);\n    border-radius: 5px;\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].tabs.lightthemeColor;
 }, function (props) {
   return _tokens.colors[props.theme].tabs.lightthemeColor;
 }, function (props) {
   return _tokens.colors[props.theme].tabs.OptionListBorder;
 });
-
-var TabLinkGroup = _styledComponents2.default.div(_templateObject4, function (props) {
+var TabLinkGroup = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n  background: ", ";\n\n  &.tab-list {\n    align-items: stretch;\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].tabs.navsBackground;
 });
-
-var TabContent = _styledComponents2.default.div(_templateObject5, function (props) {
+var TabContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  background: ", ";\n  display: flex;\n  justify-content: stretch;\n  align-items: center;\n"])), function (props) {
   return _tokens.colors[props.theme].tabs.contentBackground;
 });
 
 /* Used to keep selected tab on uncontrolled Tabs instances */
 var tabStore = {};
-
-var Tabs = function (_React$Component) {
-  _inherits(Tabs, _React$Component);
-
+var Tabs = /*#__PURE__*/function (_React$Component) {
   function Tabs(props) {
-    _classCallCheck(this, Tabs);
-
-    var _this = _possibleConstructorReturn(this, (Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call(this, props));
-
+    var _this;
+    (0, _classCallCheck2["default"])(this, Tabs);
+    _this = _callSuper(this, Tabs, [props]);
     if (props.children) {
-      _this.tabs = _react2.default.Children.map(props.children, function (child) {
-        return child ? _react2.default.cloneElement(child, { theme: props.theme }) : null;
+      _this.tabs = _react["default"].Children.map(props.children, function (child) {
+        return child ? /*#__PURE__*/_react["default"].cloneElement(child, {
+          theme: props.theme
+        }) : null;
       });
     }
 
@@ -97,32 +70,32 @@ var Tabs = function (_React$Component) {
     };
     return _this;
   }
-
-  _createClass(Tabs, [{
-    key: 'componentDidUpdate',
+  (0, _inherits2["default"])(Tabs, _React$Component);
+  return (0, _createClass2["default"])(Tabs, [{
+    key: "componentDidUpdate",
     value: function componentDidUpdate() {
       var cosmosKey = this.props.cosmosKey;
-
       if (!cosmosKey) return;
-
       var storedIndex = tabStore[cosmosKey];
       if (storedIndex && storedIndex !== this.state.selectedMainTabIndex) {
-        this.setState({ selectedMainTabIndex: tabStore[cosmosKey] });
+        this.setState({
+          selectedMainTabIndex: tabStore[cosmosKey]
+        });
       }
     }
   }, {
-    key: 'componentWillReceiveProps',
+    key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(newProps) {
-      this.tabs = _react2.default.Children.toArray(newProps.children);
-      this.setState({ selectedIndex: this.getSelectedTabFromChildProps(this.tabs) });
+      this.tabs = _react["default"].Children.toArray(newProps.children);
+      this.setState({
+        selectedIndex: this.getSelectedTabFromChildProps(this.tabs)
+      });
     }
   }, {
-    key: 'getSelectedTabFromChildProps',
+    key: "getSelectedTabFromChildProps",
     value: function getSelectedTabFromChildProps(tabs) {
       var selected = this.props.selected;
-
       if (selected) return selected;
-
       for (var index = 0; index < tabs.length; index++) {
         if (tabs[index].props.selected) return index;
       }
@@ -130,190 +103,145 @@ var Tabs = function (_React$Component) {
       return 0;
     }
   }, {
-    key: 'changeTab',
+    key: "changeTab",
     value: function changeTab(nextIndex) {
       var currentIndex = this.getSelectedTabFromPropsOrState();
-
       if (currentIndex !== nextIndex) {
         if (this.props.onSelect) {
           this.props.onSelect(nextIndex);
         } else {
           var cosmosKey = this.props.cosmosKey;
-
           if (cosmosKey) {
             tabStore[cosmosKey] = nextIndex;
           }
         }
-        this.setState({ selectedIndex: nextIndex, selectedNestedTabIndex: null });
+        this.setState({
+          selectedIndex: nextIndex,
+          selectedNestedTabIndex: null
+        });
       }
     }
   }, {
-    key: 'getSelectedTabFromPropsOrState',
+    key: "getSelectedTabFromPropsOrState",
     value: function getSelectedTabFromPropsOrState() {
       var stateSelectedIndex = this.state.selectedIndex;
       var propsSelectedIndex = this.props.selected;
       var selectedIndex = typeof propsSelectedIndex !== 'undefined' ? propsSelectedIndex : stateSelectedIndex;
-
       return selectedIndex;
     }
   }, {
-    key: 'getNestedTabFromPropsOrState',
+    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',
+    key: "changeNestedTab",
     value: function changeNestedTab(nextIndex, parentTabIndex) {
       // Deselect main tab when changing the nested tab
-      this.setState({ selectedNestedTabIndex: nextIndex, selectedIndex: null });
+      this.setState({
+        selectedNestedTabIndex: nextIndex,
+        selectedIndex: null
+      });
       if (this.props.onSelect) {
         this.props.onSelect(nextIndex, parentTabIndex);
       }
     }
   }, {
-    key: 'renderNestedTabs',
+    key: "renderNestedTabs",
     value: function renderNestedTabs(tab, index) {
       var _this2 = this;
-
       if (!tab.props.children || !Array.isArray(tab.props.children)) {
         return null;
       }
-
       var nestedIdx = this.getNestedTabFromPropsOrState();
-
-      return _react2.default.createElement(
-        _react2.default.Fragment,
-        null,
-        _react2.default.createElement(
-          TabLink,
-          {
-            selected: this.state.selectedIndex === index,
-            allowPointerEvents: true,
-            key: tab.props.label,
-            theme: this.props.theme,
-            className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
-          },
-          tab.props.label,
-          _react2.default.createElement(
-            OptionList,
-            { theme: this.props.theme, className: 'option-list', style: {} },
-            tab.props.children.map(function (nestedTab, nestedIndex) {
-              return nestedTab ? _react2.default.createElement(
-                'div',
-                {
-                  key: nestedTab.props.label,
-                  className: nestedIdx === nestedIndex ? 'option active' : 'option',
-                  theme: _this2.props.theme,
-                  onClick: function onClick() {
-                    return _this2.changeNestedTab(nestedIndex, index);
-                  }
-                },
-                nestedTab.props.label
-              ) : null;
-            })
-          )
-        )
-      );
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TabLink, {
+        selected: this.state.selectedIndex === index,
+        allowPointerEvents: true,
+        key: tab.props.label,
+        theme: this.props.theme,
+        className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
+      }, tab.props.label, /*#__PURE__*/_react["default"].createElement(OptionList, {
+        theme: this.props.theme,
+        className: "option-list",
+        style: {}
+      }, tab.props.children.map(function (nestedTab, nestedIndex) {
+        return nestedTab ? /*#__PURE__*/_react["default"].createElement("div", {
+          key: nestedTab.props.label,
+          className: nestedIdx === nestedIndex ? 'option active' : 'option',
+          theme: _this2.props.theme,
+          onClick: function onClick() {
+            return _this2.changeNestedTab(nestedIndex, index);
+          }
+        }, nestedTab.props.label) : null;
+      }))));
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this3 = this;
-
       var selectedIndex = this.getSelectedTabFromPropsOrState();
-
-      return _react2.default.createElement(
-        Wrapper,
-        null,
-        _react2.default.createElement(
-          TabLinkGroup,
-          { theme: this.props.theme, className: 'tab-list' },
-          this.tabs.sort(function (val1, val2) {
-            return val1.props.index - val2.props.index;
-          }).map(function (tab, index) {
-            return _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              !tab.props.abstract ? _react2.default.createElement(
-                TabLink,
-                {
-                  onClick: function onClick() {
-                    return _this3.changeTab(index);
-                  },
-                  key: tab.props.label,
-                  selected: selectedIndex === index,
-                  theme: _this3.props.theme,
-                  className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
-                },
-                tab.props.label
-              ) : _this3.renderNestedTabs(tab, index)
-            );
-          })
-        ),
-        this.tabs[selectedIndex]
-      );
+      return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(TabLinkGroup, {
+        theme: this.props.theme,
+        className: "tab-list"
+      }, this.tabs.sort(function (val1, val2) {
+        return val1.props.index - val2.props.index;
+      }).map(function (tab, index) {
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !tab.props["abstract"] ? /*#__PURE__*/_react["default"].createElement(TabLink, {
+          onClick: function onClick() {
+            return _this3.changeTab(index);
+          },
+          key: tab.props.label,
+          selected: selectedIndex === index,
+          theme: _this3.props.theme,
+          className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
+        }, tab.props.label) : _this3.renderNestedTabs(tab, index));
+      })), this.tabs[selectedIndex]);
     }
   }]);
-
-  return Tabs;
-}(_react2.default.Component);
-
+}(_react["default"].Component);
 Tabs.Tab = TabContent;
-
 Tabs.propTypes = {
   /** Children should be an array of Tabs.Tab */
-  children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
+  children: _propTypes["default"].arrayOf(_propTypes["default"].element).isRequired,
   /** Selected should be the index of the desired selected tab */
-  selected: _propTypes2.default.number,
+  selected: _propTypes["default"].number,
   /** 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,
-
-  selectedNestedTabIndex: _propTypes2.default.number
+  onSelect: _propTypes["default"].func,
+  index: _propTypes["default"].number,
+  selectedNestedTabIndex: _propTypes["default"].number
 };
-
 Tabs.defaultProps = {
   theme: 'dark',
   children: []
 };
-
 var generateKey = function generateKey(WrappedComponent) {
-  return function (_React$Component2) {
-    _inherits(KeyWrapper, _React$Component2);
-
+  return /*#__PURE__*/function (_React$Component2) {
     function KeyWrapper() {
-      _classCallCheck(this, KeyWrapper);
-
-      return _possibleConstructorReturn(this, (KeyWrapper.__proto__ || Object.getPrototypeOf(KeyWrapper)).apply(this, arguments));
+      (0, _classCallCheck2["default"])(this, KeyWrapper);
+      return _callSuper(this, KeyWrapper, arguments);
     }
-
-    _createClass(KeyWrapper, [{
-      key: 'shouldComponentUpdate',
+    (0, _inherits2["default"])(KeyWrapper, _React$Component2);
+    return (0, _createClass2["default"])(KeyWrapper, [{
+      key: "shouldComponentUpdate",
       value: function shouldComponentUpdate(nextProps) {
         var selected = this.props.selected;
-
         if (typeof selected === 'undefined') return false;
-
         return selected !== nextProps.selected;
       }
     }, {
-      key: 'render',
+      key: "render",
       value: function render() {
-        var key = (0, _uniqueId2.default)('tab');
-        return this.props.selected ? _react2.default.createElement(WrappedComponent, this.props) : _react2.default.createElement(WrappedComponent, _extends({}, this.props, { cosmosKey: key }));
+        var key = (0, _uniqueId["default"])('tab');
+        return this.props.selected ? /*#__PURE__*/_react["default"].createElement(WrappedComponent, this.props) : /*#__PURE__*/_react["default"].createElement(WrappedComponent, (0, _extends2["default"])({}, this.props, {
+          cosmosKey: key
+        }));
       }
     }]);
-
-    return KeyWrapper;
-  }(_react2.default.Component);
+  }(_react["default"].Component);
 };
-
 var TabWithKey = generateKey(Tabs);
 TabWithKey.Tab = TabContent;
-
-exports.default = Tabs;
+var _default = exports["default"] = Tabs;

package/molecules/tabs/tabs.story.js

@@ -1,139 +1,72 @@
-'use strict';
+"use strict";
 
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _components = require('../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Tabs').add('default', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'default' },
-    _react2.default.createElement(
-      _components.Tabs,
-      null,
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { index: 1, label: 'Tab 1' },
-        'This is tab 1'
-      ),
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { index: 0, label: 'Tab 2' },
-        'You can render anything you want here'
-      ),
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { index: 2, label: 'Tab 3' },
-        'Look, third tab is selected by default!'
-      )
-    )
-  );
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _components = require("../../components");
+(0, _react2.storiesOf)('Tabs').add('default', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "default"
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs, null, /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    index: 1,
+    label: "Tab 1"
+  }, "This is tab 1"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    index: 0,
+    label: "Tab 2"
+  }, "You can render anything you want here"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    index: 2,
+    label: "Tab 3"
+  }, "Look, third tab is selected by default!")));
 });
-
-(0, _react3.storiesOf)('Tabs').add('default selected', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'default' },
-    _react2.default.createElement(
-      _components.Tabs,
-      null,
-      _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,
-        { selected: true, label: 'Tab 3' },
-        'Look, third tab is selected by default!'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Tabs').add('default selected', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "default"
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs, null, /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 1"
+  }, "This is tab 1"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 2"
+  }, "You can render anything you want here"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    selected: true,
+    label: "Tab 3"
+  }, "Look, third tab is selected by default!")));
 });
-
-(0, _react3.storiesOf)('Tabs').add('null tab in children', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'default' },
-    _react2.default.createElement(
-      _components.Tabs,
-      null,
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { label: 'Tab 1' },
-        'This is tab 1'
-      ),
-      null,
-      _react2.default.createElement(
-        _components.Tabs.Tab,
-        { label: 'Tab 2' },
-        'You can render anything you want here'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Tabs').add('null tab in children', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "default"
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs, null, /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 1"
+  }, "This is tab 1"), null, /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 2"
+  }, "You can render anything you want here")));
 });
-
-(0, _react3.storiesOf)('Tabs').add('dark - default selected', 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,
-        { selected: true, label: 'Tab 3' },
-        'Look, third tab is selected by default!'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Tabs').add('dark - default selected', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "default",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs, {
+    theme: 'dark'
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 1"
+  }, "This is tab 1"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 2"
+  }, "You can render anything you want here"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    selected: true,
+    label: "Tab 3"
+  }, "Look, third tab is selected by default!")));
 });
-
-(0, _react3.storiesOf)('Tabs').add('nexc - default selected', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'default', background: 'dark' },
-    _react2.default.createElement(
-      _components.Tabs,
-      { theme: 'nexc' },
-      _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,
-        { selected: true, label: 'Tab 3' },
-        'Look, third tab is selected by default!'
-      )
-    )
-  );
+(0, _react2.storiesOf)('Tabs').add('nexc - default selected', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "default",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs, {
+    theme: 'nexc'
+  }, /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 1"
+  }, "This is tab 1"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    label: "Tab 2"
+  }, "You can render anything you want here"), /*#__PURE__*/_react["default"].createElement(_components.Tabs.Tab, {
+    selected: true,
+    label: "Tab 3"
+  }, "Look, third tab is selected by default!")));
 });