@occmundial/occ-atomic 2.0.0-beta.0 → 2.0.0-beta.10

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
 });
@@ -13,9 +15,11 @@ var _Text = _interopRequireDefault(require("../Text"));
 
 var _Flexbox = _interopRequireDefault(require("../Flexbox"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _Icon = _interopRequireDefault(require("../Icon"));
 
-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); }
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+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"); } }
 
@@ -23,25 +27,29 @@ 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; } }
 
-var NavIcon =
-/*#__PURE__*/
-function (_React$Component) {
+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 +61,29 @@ 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,
+          iconName = _this$props.iconName,
+          white = _this$props.white;
+      var iconColor = white ? _colors["default"].bgWhite : _colors["default"].grey600;
+      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", {
-        className: classes.icon
-      }), label && _react["default"].createElement(_Text["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: iconName,
+        colors: [iconColor]
+      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         micro: true
-      }, _react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("span", {
         className: classes.text
       }, label))));
     }
@@ -85,7 +101,12 @@ 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,
+  white: _propTypes["default"].bool
 };
 var _default = NavIcon;
 exports["default"] = _default;

package/build/NavIcon/styles.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
-
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -22,9 +20,9 @@ var _default = {
     height: _spacing["default"].xLarge,
     cursor: 'pointer',
     position: 'relative',
-    '&:hover $icon': {
-      background: function background(props) {
-        return _icons["default"].base(_icons["default"][props.iconName].icon([props.white ? _colors["default"].bgWhite : _colors["default"].grey900]));
+    '&:hover $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].bgWhite : _colors["default"].grey900;
       },
       opacity: function opacity(props) {
         return props.white ? 0.6 : null;
@@ -53,9 +51,9 @@ var _default = {
     height: _spacing["default"].xLarge
   },
   selected: {
-    '& $icon, &:hover $icon': {
-      background: function background(props) {
-        return _icons["default"].base(_icons["default"][props.iconName].icon([props.white ? _colors["default"].bgWhite : _colors["default"].prim]));
+    '& $svg, &:hover $svg': {
+      fill: function fill(props) {
+        return props.white ? _colors["default"].bgWhite : _colors["default"].prim;
       }
     },
     '& $text, &:hover $text': {
@@ -69,14 +67,6 @@ var _default = {
       }
     }
   },
-  icon: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    background: function background(props) {
-      return _icons["default"].base(_icons["default"][props.iconName].icon([props.white ? _colors["default"].bgWhite : _colors["default"].grey600]));
-    },
-    transition: '0.3s all'
-  },
   text: {
     color: function color(props) {
       return props.white ? _colors["default"].white : _colors["default"].inkLight;

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;