@desynova-digital/components 8.19.52 → 8.19.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/atoms/button/button.js +2 -2
  2. package/molecules/tabs/tabs.js +84 -23
  3. package/package.json +2 -2
package/atoms/button/button.js CHANGED
@@ -102,7 +102,7 @@ var getAttributes = function getAttributes(props) {
102
102
  }
103
103
 
104
104
  if (props.width) {
105
- styles.width = props.width;
105
+ styles.width = props.width + 'px';
106
106
  }
107
107
 
108
108
  if (props.stretchWidth) {
@@ -241,7 +241,7 @@ var Button = function Button(_ref) {
241
241
  };
242
242
 
243
243
  Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
244
- return getAttributes(props).width ? getAttributes(props).width + "px" : "auto";
244
+ return getAttributes(props).width ? getAttributes(props).width : "auto";
245
245
  }, function (props) {
246
246
  return props.width ? props.width + "px" : props.stretchWidth ? '100%' : "auto";
247
247
  }, function (props) {
package/molecules/tabs/tabs.js CHANGED
@@ -9,9 +9,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
9
9
  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; }; }();
10
10
 
11
11
  var _templateObject = _taggedTemplateLiteral(['\n height: 100%;\n'], ['\n height: 100%;\n']),
12
- _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']),
13
- _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']),
14
- _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']);
12
+ _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']),
13
+ _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']),
14
+ _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']),
15
+ _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']);
15
16
 
16
17
  var _react = require('react');
17
18
 
@@ -48,7 +49,7 @@ var TabLink = _styledComponents2.default.a(_templateObject2, function (props) {
48
49
  }, function (props) {
49
50
  return props.selected ? 'default' : 'pointer';
50
51
  }, function (props) {
51
- return props.selected ? 'none' : 'all';
52
+ return props.selected && !props.allowPointerEvents ? 'none' : 'all';
52
53
  }, function (props) {
53
54
  return props.selected ? _tokens.colors[props.theme].tabs.navsSelectedBorder : _tokens.colors[props.theme].tabs.navsDefaultBorder;
54
55
  }, function (props) {
@@ -56,12 +57,13 @@ var TabLink = _styledComponents2.default.a(_templateObject2, function (props) {
56
57
  }, function (props) {
57
58
  return !props.selected ? 'border-bottom: 1px solid' + _tokens.colors[props.theme].tabs.navsSelectedBorder : null;
58
59
  });
60
+ var OptionList = _styledComponents2.default.div(_templateObject3);
59
61
 
60
- var TabLinkGroup = _styledComponents2.default.div(_templateObject3, function (props) {
62
+ var TabLinkGroup = _styledComponents2.default.div(_templateObject4, function (props) {
61
63
  return _tokens.colors[props.theme].tabs.navsBackground;
62
64
  });
63
65
 
64
- var TabContent = _styledComponents2.default.div(_templateObject4, function (props) {
66
+ var TabContent = _styledComponents2.default.div(_templateObject5, function (props) {
65
67
  return _tokens.colors[props.theme].tabs.contentBackground;
66
68
  });
67
69
 
@@ -81,7 +83,12 @@ var Tabs = function (_React$Component) {
81
83
  return child ? _react2.default.cloneElement(child, { theme: props.theme }) : null;
82
84
  });
83
85
  }
84
- _this.state = { selectedIndex: _this.getSelectedTabFromChildProps(_this.tabs) };
86
+
87
+ // Initialize separate state for selected indices of main tabs and nested tabs
88
+ _this.state = {
89
+ selectedMainTabIndex: _this.getSelectedTabFromChildProps(_this.tabs),
90
+ selectedNestedTabIndex: null
91
+ };
85
92
  return _this;
86
93
  }
87
94
 
@@ -93,8 +100,8 @@ var Tabs = function (_React$Component) {
93
100
  if (!cosmosKey) return;
94
101
 
95
102
  var storedIndex = tabStore[cosmosKey];
96
- if (storedIndex && storedIndex !== this.state.selectedIndex) {
97
- this.setState({ selectedIndex: tabStore[cosmosKey] });
103
+ if (storedIndex && storedIndex !== this.state.selectedMainTabIndex) {
104
+ this.setState({ selectedMainTabIndex: tabStore[cosmosKey] });
98
105
  }
99
106
  }
100
107
  }, {
@@ -130,9 +137,8 @@ var Tabs = function (_React$Component) {
130
137
  if (cosmosKey) {
131
138
  tabStore[cosmosKey] = nextIndex;
132
139
  }
133
-
134
- this.setState({ selectedIndex: nextIndex });
135
140
  }
141
+ this.setState({ selectedIndex: nextIndex, selectedNestedTabIndex: null });
136
142
  }
137
143
  }
138
144
  }, {
@@ -144,10 +150,62 @@ var Tabs = function (_React$Component) {
144
150
 
145
151
  return selectedIndex;
146
152
  }
153
+ }, {
154
+ key: 'changeNestedTab',
155
+ value: function changeNestedTab(nextIndex, parentTabIndex) {
156
+ // Deselect main tab when changing the nested tab
157
+ this.setState({ selectedNestedTabIndex: nextIndex, selectedIndex: null });
158
+ if (this.props.onSelect) {
159
+ this.props.onSelect(nextIndex, parentTabIndex);
160
+ }
161
+ }
162
+ }, {
163
+ key: 'renderNestedTabs',
164
+ value: function renderNestedTabs(tab, index) {
165
+ var _this2 = this;
166
+
167
+ if (!tab.props.children || !Array.isArray(tab.props.children)) {
168
+ return null;
169
+ }
170
+
171
+ var parentTabRef = _react2.default.createRef();
172
+
173
+ return _react2.default.createElement(
174
+ 'div',
175
+ { className: 'nested-tab-container', style: { position: 'relative' } },
176
+ _react2.default.createElement(
177
+ TabLink,
178
+ {
179
+ ref: parentTabRef,
180
+ selected: this.state.selectedIndex === index,
181
+ allowPointerEvents: true,
182
+ theme: this.props.theme,
183
+ className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
184
+ tab.props.label,
185
+ _react2.default.createElement(
186
+ OptionList,
187
+ { className: 'option-list', style: {} },
188
+ tab.props.children.map(function (nestedTab, nestedIndex) {
189
+ return _react2.default.createElement(
190
+ 'div',
191
+ {
192
+ key: nestedTab.props.label,
193
+ className: _this2.state.selectedNestedTabIndex === nestedIndex ? 'option active' : 'option',
194
+ theme: _this2.props.theme,
195
+ onClick: function onClick() {
196
+ return _this2.changeNestedTab(nestedIndex, index);
197
+ } },
198
+ nestedTab.props.label
199
+ );
200
+ })
201
+ )
202
+ )
203
+ );
204
+ }
147
205
  }, {
148
206
  key: 'render',
149
207
  value: function render() {
150
- var _this2 = this;
208
+ var _this3 = this;
151
209
 
152
210
  var selectedIndex = this.getSelectedTabFromPropsOrState();
153
211
 
@@ -161,17 +219,20 @@ var Tabs = function (_React$Component) {
161
219
  return val1.props.index - val2.props.index;
162
220
  }).map(function (tab, index) {
163
221
  return _react2.default.createElement(
164
- TabLink,
165
- {
166
- onClick: function onClick() {
167
- return _this2.changeTab(index);
168
- },
169
- key: tab.props.label,
170
- selected: selectedIndex === index,
171
- theme: _this2.props.theme,
172
- className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item'
173
- },
174
- tab.props.label
222
+ 'div',
223
+ { key: tab.props.label, className: 'tab-container' },
224
+ !Array.isArray(tab.props.children) && _react2.default.createElement(
225
+ TabLink,
226
+ {
227
+ onClick: function onClick() {
228
+ return _this3.changeTab(index);
229
+ },
230
+ selected: selectedIndex === index,
231
+ theme: _this3.props.theme,
232
+ className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
233
+ tab.props.label
234
+ ),
235
+ tab.props.children && _this3.renderNestedTabs(tab, index)
175
236
  );
176
237
  })
177
238
  ),
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.52",
3
+ "version": "8.19.54",
4
4
  "description": "Components for Desynova Digital",
5
5
  "main": "index.js",
6
6
  "author": "desynova-digital",
7
7
  "license": "MIT",
8
8
  "repository": "desynova-digital",
9
9
  "dependencies": {
10
- "@desynova-digital/tokens": "8.19.52",
10
+ "@desynova-digital/tokens": "8.19.54",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },