@desynova-digital/components 8.19.63 → 9.0.0

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  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']),
+    _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']);
 
@@ -57,7 +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 OptionList = _styledComponents2.default.div(_templateObject3, 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) {
   return _tokens.colors[props.theme].tabs.navsBackground;
@@ -189,11 +195,12 @@ var Tabs = function (_React$Component) {
             allowPointerEvents: true,
             key: tab.props.label,
             theme: this.props.theme,
-            className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
+            className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
+          },
           tab.props.label,
           _react2.default.createElement(
             OptionList,
-            { className: 'option-list', style: {} },
+            { theme: this.props.theme, className: 'option-list', style: {} },
             tab.props.children.map(function (nestedTab, nestedIndex) {
               return nestedTab ? _react2.default.createElement(
                 'div',
@@ -203,7 +210,8 @@ var Tabs = function (_React$Component) {
                   theme: _this2.props.theme,
                   onClick: function onClick() {
                     return _this2.changeNestedTab(nestedIndex, index);
-                  } },
+                  }
+                },
                 nestedTab.props.label
               ) : null;
             })
@@ -239,7 +247,8 @@ var Tabs = function (_React$Component) {
                   key: tab.props.label,
                   selected: selectedIndex === index,
                   theme: _this3.props.theme,
-                  className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
+                  className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
+                },
                 tab.props.label
               ) : _this3.renderNestedTabs(tab, index)
             );

package/molecules/tabs/tabs.story.js

@@ -110,4 +110,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
       )
     )
   );
+});
+
+(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!'
+      )
+    )
+  );
 });

package/package.json

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