@desynova-digital/components 8.19.54 → 8.19.56

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.
@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
 
7
7
  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; };
8
+ // import colors from "../../../tokens/colors";
9
+
8
10
 
9
11
  var _templateObject = _taggedTemplateLiteral(["\n position: relative;\n &:hover {\n .tooltip-block {\n display: block;\n }\n }\n .tooltip-block {\n position: absolute;\n z-index: 1;\n top: ", ";\n background: #000;\n padding: 10px 8px;\n border-radius: 5px;\n font-size: 12px;\n text-transform: initial;\n display: none;\n color: #fff;\n font-family: SFUIText-Regular;\n left: 50%;\n transform: translateX(-50%);\n &:after {\n content: \"\";\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n\n ", "\n left: 50%;\n transform: translateX(-50%);\n }\n }\n"], ["\n position: relative;\n &:hover {\n .tooltip-block {\n display: block;\n }\n }\n .tooltip-block {\n position: absolute;\n z-index: 1;\n top: ", ";\n background: #000;\n padding: 10px 8px;\n border-radius: 5px;\n font-size: 12px;\n text-transform: initial;\n display: none;\n color: #fff;\n font-family: SFUIText-Regular;\n left: 50%;\n transform: translateX(-50%);\n &:after {\n content: \"\";\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n\n ", "\n left: 50%;\n transform: translateX(-50%);\n }\n }\n"]),
10
- _templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n text-transform: uppercase;\n text-align: center;\n font-size: 14px;\n position: relative;\n align-items: center;\n font-weight: 600;\n top: 0;\n margin: 0 auto;\n width: ", ";\n /* width: ", "; */\n height: ", ";\n border: ", ";\n background: ", ";\n border-color: ", ";\n\n color: ", ";\n\n padding: ", ";\n\n opacity: ", ";\n cursor: ", ";\n pointer-events: ", ";\n\n border-radius: ", ";\n\n /* box-shadow: ", ";\n transition: ", "; */\n\n ", " {\n position: relative;\n top: 0px;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n background: ", ";\n border-radius: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n transition: all 0.4s;\n color: ", ";\n box-shadow: ", ";\n /* top: ", "; */\n background: ", ";\n border-color: ", ";\n transition: ", ";\n box-shadow: ", ";\n \n ", " {\n\n path{\n \n ", "\n ", "\n \n }\n }\n }\n\n &:focus {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n\n &:active {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n .loader-wrapper{\n position: absolute;\n top:50%;\n left:50%;\n transform: translate(-50%, -50%);\n }\n"], ["\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n text-transform: uppercase;\n text-align: center;\n font-size: 14px;\n position: relative;\n align-items: center;\n font-weight: 600;\n top: 0;\n margin: 0 auto;\n width: ", ";\n /* width: ", "; */\n height: ", ";\n border: ", ";\n background: ", ";\n border-color: ", ";\n\n color: ", ";\n\n padding: ", ";\n\n opacity: ", ";\n cursor: ", ";\n pointer-events: ", ";\n\n border-radius: ", ";\n\n /* box-shadow: ", ";\n transition: ", "; */\n\n ", " {\n position: relative;\n top: 0px;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n background: ", ";\n border-radius: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n transition: all 0.4s;\n color: ", ";\n box-shadow: ", ";\n /* top: ", "; */\n background: ", ";\n border-color: ", ";\n transition: ", ";\n box-shadow: ", ";\n \n ", " {\n\n path{\n \n ", "\n ", "\n \n }\n }\n }\n\n &:focus {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n\n &:active {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n .loader-wrapper{\n position: absolute;\n top:50%;\n left:50%;\n transform: translate(-50%, -50%);\n }\n"]),
12
+ _templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n text-transform: uppercase;\n text-align: center;\n font-size: 14px;\n position: relative;\n align-items: center;\n font-weight: 600;\n top: 0;\n margin: 0 auto;\n width: ", ";\n height: ", ";\n border: ", ";\n background: ", ";\n border-color: ", ";\n\n color: ", ";\n\n padding: ", ";\n\n opacity: ", ";\n cursor: ", ";\n pointer-events: ", ";\n\n border-radius: ", ";\n\n /* box-shadow: ", ";\n transition: ", "; */\n\n ", " {\n position: relative;\n top: 0px;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n background: ", ";\n border-radius: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n transition: all 0.4s;\n color: ", ";\n box-shadow: ", ";\n /* top: ", "; */\n background: ", ";\n border-color: ", ";\n transition: ", ";\n box-shadow: ", ";\n \n ", " {\n\n path{\n \n ", "\n ", "\n \n }\n }\n }\n\n &:focus {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n\n &:active {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n .loader-wrapper{\n position: absolute;\n top:50%;\n left:50%;\n transform: translate(-50%, -50%);\n }\n"], ["\n display: flex;\n box-sizing: border-box;\n justify-content: center;\n text-transform: uppercase;\n text-align: center;\n font-size: 14px;\n position: relative;\n align-items: center;\n font-weight: 600;\n top: 0;\n margin: 0 auto;\n width: ", ";\n height: ", ";\n border: ", ";\n background: ", ";\n border-color: ", ";\n\n color: ", ";\n\n padding: ", ";\n\n opacity: ", ";\n cursor: ", ";\n pointer-events: ", ";\n\n border-radius: ", ";\n\n /* box-shadow: ", ";\n transition: ", "; */\n\n ", " {\n position: relative;\n top: 0px;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n background: ", ";\n border-radius: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &:hover {\n transition: all 0.4s;\n color: ", ";\n box-shadow: ", ";\n /* top: ", "; */\n background: ", ";\n border-color: ", ";\n transition: ", ";\n box-shadow: ", ";\n \n ", " {\n\n path{\n \n ", "\n ", "\n \n }\n }\n }\n\n &:focus {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n\n &:active {\n background: ", ";\n border-color: ", ";\n outline: none;\n }\n .loader-wrapper{\n position: absolute;\n top:50%;\n left:50%;\n transform: translate(-50%, -50%);\n }\n"]),
11
13
  _templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n vertical-align: middle;\n"], ["\n display: inline-block;\n vertical-align: middle;\n"]);
12
14
 
13
15
  var _react = require("react");
@@ -242,8 +244,6 @@ var Button = function Button(_ref) {
242
244
 
243
245
  Button.Element = _styledComponents2.default.button(_templateObject2, function (props) {
244
246
  return getAttributes(props).width ? getAttributes(props).width : "auto";
245
- }, function (props) {
246
- return props.width ? props.width + "px" : props.stretchWidth ? '100%' : "auto";
247
247
  }, function (props) {
248
248
  return props.height ? props.height + "px" : "auto";
249
249
  }, function (props) {
@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
21
21
  null,
22
22
  _react2.default.createElement(
23
23
  _components.Button,
24
- null,
24
+ { theme: 'nexc' },
25
25
  'Button'
26
26
  ),
27
27
  _react2.default.createElement(
@@ -171,14 +171,15 @@ var Tabs = function (_React$Component) {
171
171
  var parentTabRef = _react2.default.createRef();
172
172
 
173
173
  return _react2.default.createElement(
174
- 'div',
175
- { className: 'nested-tab-container', style: { position: 'relative' } },
174
+ _react2.default.Fragment,
175
+ null,
176
176
  _react2.default.createElement(
177
177
  TabLink,
178
178
  {
179
179
  ref: parentTabRef,
180
180
  selected: this.state.selectedIndex === index,
181
181
  allowPointerEvents: true,
182
+ key: tab.props.label,
182
183
  theme: this.props.theme,
183
184
  className: this.state.selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
184
185
  tab.props.label,
@@ -186,7 +187,7 @@ var Tabs = function (_React$Component) {
186
187
  OptionList,
187
188
  { className: 'option-list', style: {} },
188
189
  tab.props.children.map(function (nestedTab, nestedIndex) {
189
- return _react2.default.createElement(
190
+ return nestedTab ? _react2.default.createElement(
190
191
  'div',
191
192
  {
192
193
  key: nestedTab.props.label,
@@ -196,7 +197,7 @@ var Tabs = function (_React$Component) {
196
197
  return _this2.changeNestedTab(nestedIndex, index);
197
198
  } },
198
199
  nestedTab.props.label
199
- );
200
+ ) : null;
200
201
  })
201
202
  )
202
203
  )
@@ -219,20 +220,20 @@ var Tabs = function (_React$Component) {
219
220
  return val1.props.index - val2.props.index;
220
221
  }).map(function (tab, index) {
221
222
  return _react2.default.createElement(
222
- 'div',
223
- { key: tab.props.label, className: 'tab-container' },
224
- !Array.isArray(tab.props.children) && _react2.default.createElement(
223
+ _react2.default.Fragment,
224
+ null,
225
+ !tab.props.abstract ? _react2.default.createElement(
225
226
  TabLink,
226
227
  {
227
228
  onClick: function onClick() {
228
229
  return _this3.changeTab(index);
229
230
  },
231
+ key: tab.props.label,
230
232
  selected: selectedIndex === index,
231
233
  theme: _this3.props.theme,
232
234
  className: selectedIndex === index ? 'tab-list-item active' : 'tab-list-item' },
233
235
  tab.props.label
234
- ),
235
- tab.props.children && _this3.renderNestedTabs(tab, index)
236
+ ) : _this3.renderNestedTabs(tab, index)
236
237
  );
237
238
  })
238
239
  ),
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "8.19.54",
3
+ "version": "8.19.56",
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.54",
10
+ "@desynova-digital/tokens": "8.19.56",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },