@occmundial/occ-atomic 2.0.0-beta.1 → 2.0.0-beta.3

package/build/NavAside/__snapshots__/NavAside.test.js.snap

@@ -0,0 +1,116 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalPortal matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`NavAside matches the snapshot 1`] = `ShallowWrapper {}`;
+
+exports[`NavAside styles matches the snapshot 1`] = `
+Object {
+  "@global": Object {
+    "body": Object {
+      "overflow": "hidden",
+    },
+  },
+  "@keyframes asideShow": Object {
+    "from": Object {
+      "left": [Function],
+    },
+    "to": Object {
+      "left": "0px",
+    },
+  },
+  "@keyframes asideShowRight": Object {
+    "from": Object {
+      "right": [Function],
+    },
+    "to": Object {
+      "right": "0px",
+    },
+  },
+  "@keyframes overlayFadeIn": Object {
+    "from": Object {
+      "opacity": 0,
+    },
+    "to": Object {
+      "opacity": 1,
+    },
+  },
+  "OpenElement": Object {
+    "animation": "0.3s asideShow ease-out",
+    "left": "0px !important",
+  },
+  "OpenElementRight": Object {
+    "animation": "0.3s asideShowRight ease-out",
+    "right": "0px !important",
+  },
+  "ShowElement": Object {
+    "backgroundColor": "#ffffff",
+    "height": "100%",
+    "left": "-320px",
+    "maxWidth": "calc(100% - 32px)",
+    "opacity": "1 !important",
+    "overflow": "hidden",
+    "position": "fixed",
+    "top": "0",
+    "transition": "0.4s all",
+    "width": "320px",
+  },
+  "card": Object {
+    "cursor": "auto",
+    "height": "100%",
+    "overflow": "auto",
+    "padding": 0,
+  },
+  "closeIcon": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "height": 32,
+  },
+  "content": Object {
+    "@media screen and (min-width:768px)": Object {
+      "padding": 32,
+    },
+    "backgroundColor": "#ffffff",
+    "padding": 16,
+  },
+  "customeWidth": Object {
+    "left": [Function],
+    "width": [Function],
+  },
+  "customeWidthRight": Object {
+    "right": [Function],
+    "width": [Function],
+  },
+  "overlay": Object {
+    "background": "rgba(0, 0, 5, 0.85)",
+    "cursor": "pointer",
+    "height": "100%",
+    "left": 0,
+    "opacity": 0,
+    "position": "fixed",
+    "top": 0,
+    "transition": "0.3s opacity",
+    "transitionDelay": "0.2s",
+    "width": "100%",
+    "zIndex": 1000,
+  },
+  "overlayShow": Object {
+    "animation": "0.3s overlayFadeIn linear",
+    "opacity": 1,
+  },
+  "showRight": Object {
+    "left": "auto",
+    "right": "-320px",
+  },
+  "top": Object {
+    "@media screen and (min-width:768px)": Object {
+      "padding": 32,
+    },
+    "backgroundColor": "#f5f5f8",
+    "padding": 16,
+  },
+  "topContent": Object {
+    "minWidth": 0,
+  },
+}
+`;

package/build/NavAside/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,8 +19,6 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -27,29 +27,33 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 var NavAside = (0, _reactJss["default"])(_styles["default"])(_NavAside["default"]);
 
-var NavAsidePortal =
-/*#__PURE__*/
-function (_React$Component) {
+var NavAsidePortal = /*#__PURE__*/function (_React$Component) {
   _inherits(NavAsidePortal, _React$Component);
 
+  var _super = _createSuper(NavAsidePortal);
+
   function NavAsidePortal(props) {
     var _this;
 
     _classCallCheck(this, NavAsidePortal);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(NavAsidePortal).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       mount: false
     };
@@ -81,12 +85,12 @@ function (_React$Component) {
           container = _this$props.container,
           show = _this$props.show;
 
-      var NavAsideComponent = _react["default"].createElement(NavAside, _extends({}, this.props, {
+      var NavAsideComponent = /*#__PURE__*/_react["default"].createElement(NavAside, _extends({}, this.props, {
         onTransitionEnd: !show && mount ? this.onTransitionEnd : null
       }));
 
       if (container) {
-        return mount ? _reactDom["default"].createPortal(NavAsideComponent, container) : null;
+        return mount ? /*#__PURE__*/_reactDom["default"].createPortal(NavAsideComponent, container) : null;
       } else {
         return mount ? NavAsideComponent : null;
       }

package/build/NavIcon/NavIcon.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,33 +17,35 @@ var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a 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); } }
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-var NavIcon =
-/*#__PURE__*/
-function (_React$Component) {
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var NavIcon = /*#__PURE__*/function (_React$Component) {
   _inherits(NavIcon, _React$Component);
 
+  var _super = _createSuper(NavIcon);
+
   function NavIcon() {
     _classCallCheck(this, NavIcon);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(NavIcon).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(NavIcon, [{
@@ -53,21 +57,25 @@ function (_React$Component) {
           label = _this$props.label,
           onClick = _this$props.onClick,
           direction = _this$props.direction,
-          className = _this$props.className;
-      return _react["default"].createElement("div", {
+          className = _this$props.className,
+          testId = _this$props.testId,
+          id = _this$props.id;
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.cont).concat(selected ? " ".concat(classes.selected) : '').concat(className ? " ".concat(className) : ''),
-        onClick: onClick
-      }, _react["default"].createElement(_Flexbox["default"], {
+        onClick: onClick,
+        "data-testid": testId,
+        id: id
+      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         direction: direction,
         justifyContent: "center",
         alignItems: "center",
         className: classes.flex
-      }, _react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.icon
-      }), label && _react["default"].createElement(_Text["default"], {
+      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         micro: true
-      }, _react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.text
       }, label))));
     }
@@ -85,7 +93,11 @@ NavIcon.propTypes = {
   width: _propTypes["default"].number,
   showBar: _propTypes["default"].bool,
   direction: _propTypes["default"].oneOf(['col', 'row']),
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string,
+  id: _propTypes["default"].string
 };
 var _default = NavIcon;
 exports["default"] = _default;

package/build/NavItem/NavItem.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,8 +15,6 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -23,26 +23,30 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
 /** This component is used inside the NavTab component. You can just pass a link and a text, wrap it or send a custom link component. */
-var NavItem =
-/*#__PURE__*/
-function (_React$Component) {
+var NavItem = /*#__PURE__*/function (_React$Component) {
   _inherits(NavItem, _React$Component);
 
+  var _super = _createSuper(NavItem);
+
   function NavItem() {
     _classCallCheck(this, NavItem);
 
-    return _possibleConstructorReturn(this, _getPrototypeOf(NavItem).apply(this, arguments));
+    return _super.apply(this, arguments);
   }
 
   _createClass(NavItem, [{
@@ -60,19 +64,24 @@ function (_React$Component) {
           notification = _this$props.notification,
           white = _this$props.white,
           small = _this$props.small,
-          className = _this$props.className;
+          className = _this$props.className,
+          testId = _this$props.testId,
+          id = _this$props.id;
       var AnchorTag = customComponent ? customComponent : 'a';
-      return _react["default"].createElement(AnchorTag, _extends({
+      return /*#__PURE__*/_react["default"].createElement(AnchorTag, _extends({
         className: "".concat(classes.link).concat(className ? " ".concat(className) : ''),
         href: !selected ? link : null,
         onClick: !selected ? onClick : null,
         target: target
-      }, customComponent && customProps), _react["default"].createElement(_Text["default"], {
+      }, customComponent && customProps, {
+        "data-testid": testId,
+        id: id
+      }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "span",
         white: white,
         small: small,
         className: "".concat(classes.text).concat(selected ? " ".concat(classes.selected) : '')
-      }, children), notification && _react["default"].createElement("span", {
+      }, children), notification && /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.notification
       }));
     }
@@ -111,7 +120,11 @@ NavItem.propTypes = {
 
   /** Custom properties to apply directly to the custom component. */
   customProps: _propTypes["default"].object,
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string,
+  id: _propTypes["default"].string
 };
 var _default = NavItem;
 exports["default"] = _default;

package/build/NavTab/NavTab.js

@@ -1,5 +1,7 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,8 +35,6 @@ var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -43,27 +43,31 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var NavTab =
-/*#__PURE__*/
-function (_React$Component) {
+var NavTab = /*#__PURE__*/function (_React$Component) {
   _inherits(NavTab, _React$Component);
 
+  var _super = _createSuper(NavTab);
+
   function NavTab(props) {
     var _this;
 
     _classCallCheck(this, NavTab);
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(NavTab).call(this, props));
+    _this = _super.call(this, props);
     _this.state = {
       show: true,
       currentScroll: 0
@@ -116,7 +120,7 @@ function (_React$Component) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           blue = _this$props2.blue;
-      return _react["default"].createElement(_NavItem["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_NavItem["default"], _extends({
         white: blue
       }, item, {
         className: classes.navItem
@@ -128,12 +132,12 @@ function (_React$Component) {
       var _this$props3 = this.props,
           classes = _this$props3.classes,
           blue = _this$props3.blue;
-      return _react["default"].createElement(_NavItem["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_NavItem["default"], _extends({
         white: blue
       }, item, {
         selected: false,
         className: classes.navItem
-      }), item.text, " ", _react["default"].createElement(_Icon["default"], {
+      }), item.text, " ", /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "arrowDown",
         className: "".concat(classes.arrow).concat(item.selected ? " ".concat(classes.arrowUp) : ''),
         colors: blue ? [_colors["default"].white] : [_colors["default"].grey900]
@@ -143,7 +147,7 @@ function (_React$Component) {
     key: "renderButton",
     value: function renderButton(item) {
       var classes = this.props.classes;
-      return _react["default"].createElement(_Button["default"], _extends({
+      return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
         className: classes.button
       }, item), item.text);
     }
@@ -153,10 +157,10 @@ function (_React$Component) {
       var _this$props4 = this.props,
           classes = _this$props4.classes,
           blue = _this$props4.blue;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.iconWrap,
         key: item.key
-      }, _react["default"].createElement(_NavIcon["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_NavIcon["default"], _extends({
         className: classes.icon,
         white: blue
       }, item)));
@@ -165,7 +169,8 @@ function (_React$Component) {
     key: "renderLogo",
     value: function renderLogo(item) {
       var classes = this.props.classes;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": item.testId,
         className: classes.logo,
         key: item.key
       }, item.logo);
@@ -173,7 +178,8 @@ function (_React$Component) {
   }, {
     key: "renderCustom",
     value: function renderCustom(item) {
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": item.testId,
         key: item.key
       }, item.custom);
     }
@@ -199,32 +205,32 @@ function (_React$Component) {
           winWidth = _this$props5.winWidth,
           zIndex = _this$props5.zIndex;
       var isFluid = winWidth < _grid["default"].xl;
-      return _react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.container).concat(fixed ? " ".concat(classes.fixed, " ").concat(show ? classes.show : classes.hide).concat(currentScroll > 0 ? " ".concat(classes.isScrolled) : '').concat(bottom ? " ".concat(classes.bottom) : '') : '').concat(className ? " ".concat(className) : ''),
         style: zIndex ? {
           zIndex: zIndex
         } : null
-      }, top && _react["default"].createElement(_NavTop["default"], {
+      }, top && /*#__PURE__*/_react["default"].createElement(_NavTop["default"], {
         blue: blue,
         top: top,
         isFluid: isFluid
-      }), _react["default"].createElement("div", {
+      }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.nav, " ").concat(blue ? classes.blue : classes.white)
-      }, _react["default"].createElement(_Grid["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         className: classes.grid,
         fluid: isFluid
-      }, _react["default"].createElement(_Flexbox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         justifyContent: "between",
         alignItems: "center",
         className: classes.tab
-      }, left && _react["default"].createElement(_Flexbox["default"], {
+      }, left && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         className: classes.left,
         alignItems: "center"
       }, left.map(function (item) {
         return _this2.renderItem(item);
-      })), flexCenter ? _react["default"].createElement(_Flexbox["default"], {
+      })), flexCenter ? /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         flex: "1",
         className: classes.flexCenter,
@@ -232,15 +238,15 @@ function (_React$Component) {
         justifyContent: "between"
       }, flexCenter.map(function (item) {
         return _this2.renderItem(item);
-      })) : _react["default"].createElement(_Flexbox["default"], {
+      })) : /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         flex: "1"
-      }), right && _react["default"].createElement(_Flexbox["default"], {
+      }), right && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         className: classes.right,
         alignItems: "center"
       }, right.map(function (item) {
         return _this2.renderItem(item);
-      })), center && _react["default"].createElement(_Flexbox["default"], {
+      })), center && /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
         display: "flex",
         className: classes.center,
         alignItems: "center"
@@ -262,7 +268,8 @@ var positionPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].shap
   link: _propTypes["default"].string,
   theme: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'tertiaryWhite', 'ghostPink', 'ghostGrey', 'ghostWhite']),
   iconName: _propTypes["default"].string,
-  custom: _propTypes["default"].node
+  custom: _propTypes["default"].node,
+  testId: _propTypes["default"].string
 }));
 
 NavTab.propTypes = {