@hig/side-nav - npm Package Compare versions

Comparing version 0.1.0-alpha.c4dcd454 to 0.1.0-alpha.d089bd7a

build/index.es.js

 import React, { Component } from 'react';
-import SkeletonItem from '@hig/skeleton-item';
-import { ThemeContext } from '@hig/themes';
 import PropTypes from 'prop-types';
 import Icon, { names, sizes } from '@hig/icon';
+import { ThemeContext } from '@hig/themes';
+import IconButton, { types } from '@hig/icon-button';
+import SkeletonItem from '@hig/skeleton-item';
 
@@ -63,4 +64,2 @@ function createCommonjsModule(fn, module) {
 
-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; };
-
 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; }; }();
@@ -74,89 +73,14 @@
 
-var skeletonItemStyles = Object.freeze([{
-  maxWidth: "180px",
-  marginBottom: "48px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "124px",
-  marginBottom: "48px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "124px"
-}]);
-
-var SideNavSkeleton = function (_Component) {
-  _inherits(SideNavSkeleton, _Component);
-
-  function SideNavSkeleton() {
-    _classCallCheck(this, SideNavSkeleton);
-
-    return _possibleConstructorReturn(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
-  }
-
-  _createClass(SideNavSkeleton, [{
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        ThemeContext.Consumer,
-        null,
-        function (_ref) {
-          var themeClass = _ref.themeClass;
-          return React.createElement(
-            "div",
-            { className: classnames("hig__side-nav-skeleton", themeClass) },
-            skeletonItemStyles.map(function (style, index) {
-              return (
-                // eslint-disable-next-line react/no-array-index-key
-                React.createElement(SkeletonItem, _extends({ key: index }, style))
-              );
-            })
-          );
-        }
-      );
-    }
-  }]);
-
-  return SideNavSkeleton;
-}(Component);
-SideNavSkeleton.__docgenInfo = {
-  "description": "",
-  "displayName": "SideNavSkeleton"
-};
-
-var _createClass$1 = 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; }; }();
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /** @todo Consider replacing with an IconButton */
 
 var CollapseButton = function (_Component) {
-  _inherits$1(CollapseButton, _Component);
+  _inherits(CollapseButton, _Component);
 
   function CollapseButton() {
-    _classCallCheck$1(this, CollapseButton);
+    _classCallCheck(this, CollapseButton);
 
-    return _possibleConstructorReturn$1(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
   }
 
-  _createClass$1(CollapseButton, [{
+  _createClass(CollapseButton, [{
     key: "render",
@@ -239,20 +163,20 @@ value: function render() {
 
-var _createClass$2 = 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; }; }();
+var _createClass$1 = 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; }; }();
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var Group = function (_Component) {
-  _inherits$2(Group, _Component);
+  _inherits$1(Group, _Component);
 
   function Group() {
-    _classCallCheck$2(this, Group);
+    _classCallCheck$1(this, Group);
 
-    return _possibleConstructorReturn$2(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
+    return _possibleConstructorReturn$1(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
   }
 
-  _createClass$2(Group, [{
+  _createClass$1(Group, [{
     key: "render",
@@ -302,2 +226,56 @@ value: function render() {
 
+var _createClass$2 = 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; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ExternalLinkIcon = function (_Component) {
+  _inherits$2(ExternalLinkIcon, _Component);
+
+  function ExternalLinkIcon() {
+    _classCallCheck$2(this, ExternalLinkIcon);
+
+    return _possibleConstructorReturn$2(this, (ExternalLinkIcon.__proto__ || Object.getPrototypeOf(ExternalLinkIcon)).apply(this, arguments));
+  }
+
+  _createClass$2(ExternalLinkIcon, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(Icon, { name: names.EXTERNAL_LINK, size: this.props.size });
+    }
+  }]);
+
+  return ExternalLinkIcon;
+}(Component);
+
+ExternalLinkIcon.propTypes = {
+  /** Size of the icon */
+  size: PropTypes.oneOf(Object.values(sizes))
+};
+ExternalLinkIcon.defaultProps = {
+  size: sizes.PX_24
+};
+ExternalLinkIcon.__docgenInfo = {
+  "description": "",
+  "displayName": "ExternalLinkIcon",
+  "props": {
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "Object.values(iconSizes)"
+      },
+      "required": false,
+      "description": "Size of the icon",
+      "defaultValue": {
+        "value": "iconSizes.PX_24",
+        "computed": true
+      }
+    }
+  }
+};
+
 var _createClass$3 = 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; }; }();
@@ -328,3 +306,3 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn$3(this, (_ref = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
-      return _this.props.target === "_blank" && React.createElement(Icon, { name: names.EXTERNAL_LINK, size: sizes.PX_16 });
+      return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
     }, _temp), _possibleConstructorReturn$3(_this, _ret);
@@ -476,3 +454,3 @@ }
     return _ret = (_temp = (_this = _possibleConstructorReturn$4(this, (_ref = Module.__proto__ || Object.getPrototypeOf(Module)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
-      return _this.props.target === "_blank" && React.createElement(Icon, { name: names.EXTERNAL_LINK, size: sizes.PX_24 });
+      return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, null);
     }, _temp), _possibleConstructorReturn$4(_this, _ret);
@@ -714,3 +692,3 @@ }
 
-var _extends$1 = 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; };
+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; };
 
@@ -742,3 +720,3 @@ var _createClass$5 = 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; }; }();
     _this.renderPresenter = function (presenterBag) {
-      var presenterProps = _extends$1({}, _this.props, presenterBag);
+      var presenterProps = _extends({}, _this.props, presenterBag);
 
@@ -933,4 +911,143 @@ var children = presenterProps.children,
 
+var ModuleCompact = function (_Component) {
+  _inherits$6(ModuleCompact, _Component);
+
+  function ModuleCompact() {
+    _classCallCheck$6(this, ModuleCompact);
+
+    return _possibleConstructorReturn$6(this, (ModuleCompact.__proto__ || Object.getPrototypeOf(ModuleCompact)).apply(this, arguments));
+  }
+
+  _createClass$6(ModuleCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          icon = _props.icon,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return classnames(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React.createElement(
+                "a",
+                {
+                  className: linkClasses(themeClass),
+                  onClick: onClickTitle,
+                  role: "button",
+                  tabIndex: 0
+                },
+                React.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                )
+              )
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return ModuleCompact;
+}(Component);
+
+ModuleCompact.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node.isRequired,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the icon */
+  onMouseOver: PropTypes.func
+};
+ModuleCompact.defaultProps = {
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {}
+};
+ModuleCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "ModuleCompact",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": true,
+      "description": "An instance of @hig/icon"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the icon",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$7 = 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; }; }();
+
+function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$7(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$7(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var Submodule = function (_Component) {
-  _inherits$6(Submodule, _Component);
+  _inherits$7(Submodule, _Component);
 
@@ -942,3 +1059,3 @@ function Submodule() {
 
-    _classCallCheck$6(this, Submodule);
+    _classCallCheck$7(this, Submodule);
 
@@ -949,8 +1066,8 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$6(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
-      return _this.props.target === "_blank" && React.createElement(Icon, { name: names.EXTERNAL_LINK, size: sizes.PX_16 });
-    }, _temp), _possibleConstructorReturn$6(_this, _ret);
+    return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React.createElement(ExternalLinkIcon, { size: sizes.PX_16 });
+    }, _temp), _possibleConstructorReturn$7(_this, _ret);
   }
 
-  _createClass$6(Submodule, [{
+  _createClass$7(Submodule, [{
     key: "render",
@@ -1076,2 +1193,455 @@ value: function render() {
 
-export { SideNavSkeleton, CollapseButton, Group, Link, Module$1 as Module, Submodule };
+var _createClass$8 = 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; }; }();
+
+function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$8(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$8(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var SideNav = function (_Component) {
+  _inherits$8(SideNav, _Component);
+
+  function SideNav() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$8(this, SideNav);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$8(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
+      var _this$props = _this.props,
+          headerLabel = _this$props.headerLabel,
+          headerLink = _this$props.headerLink,
+          superHeaderLabel = _this$props.superHeaderLabel,
+          superHeaderLink = _this$props.superHeaderLink;
+
+
+      if (!(superHeaderLabel || headerLabel)) {
+        return null;
+      }
+
+      return React.createElement(
+        "div",
+        { className: "hig__side-nav__headers" },
+        superHeaderLabel && React.createElement(
+          "h3",
+          { className: "hig__side-nav__super-header" },
+          React.createElement(
+            "a",
+            {
+              className: "hig__side-nav__super-header-link",
+              href: superHeaderLink
+            },
+            superHeaderLabel
+          )
+        ),
+        headerLabel && React.createElement(
+          "h4",
+          { className: "hig__side-nav__header" },
+          React.createElement(
+            "a",
+            { className: "hig__side-nav__header-link", href: headerLink },
+            headerLabel
+          )
+        )
+      );
+    }, _temp), _possibleConstructorReturn$8(_this, _ret);
+  }
+
+  _createClass$8(SideNav, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          copyright = _props.copyright,
+          groups = _props.groups,
+          links = _props.links,
+          onMinimize = _props.onMinimize,
+          showMinimizeButton = _props.showMinimizeButton;
+
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React.createElement(
+            "nav",
+            { className: classes(themeClass) },
+            React.createElement(
+              "div",
+              { className: "hig__side-nav__overflow" },
+              _this2._renderHeaders(),
+              groups && React.createElement(
+                "div",
+                { className: "hig__side-nav__groups" },
+                groups
+              ),
+              children && React.createElement(
+                "div",
+                { className: "hig__side-nav__slot" },
+                children
+              ),
+              links && React.createElement(
+                "div",
+                { className: "hig__side-nav__links" },
+                links
+              ),
+              copyright && React.createElement(
+                "div",
+                { className: "hig__side-nav__copyright" },
+                copyright
+              )
+            ),
+            showMinimizeButton && React.createElement(
+              "div",
+              { className: "hig__side-nav__minimize" },
+              React.createElement(IconButton, {
+                type: types.TRANSPARENT,
+                name: names.BACK,
+                title: "Minimize",
+                "aria-label": "Minimize",
+                onClick: onMinimize
+              })
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return SideNav;
+}(Component);
+
+SideNav.propTypes = {
+  /** Additional content to include below navigation items */
+  children: PropTypes.node,
+  /** Copyright text to include  */
+  copyright: PropTypes.string,
+  /** 0 or more SideNav Groups */
+  groups: PropTypes.node,
+  /** Subtitle at the top of the SideNav */
+  headerLabel: PropTypes.string,
+  /** An href for the SideNav Subtitle */
+  headerLink: PropTypes.string,
+  /** 0 or more SideNav Links */
+  links: PropTypes.node,
+  /** Called when minimize button is clicked */
+  onMinimize: PropTypes.func,
+  /** Renders a button to minimize the SideNav */
+  showMinimizeButton: PropTypes.bool,
+  /** Title at the top of the SideNav */
+  superHeaderLabel: PropTypes.string,
+  /** An href for the SideNav Title */
+  superHeaderLink: PropTypes.string
+};
+SideNav.defaultProps = {
+  onMinimize: function onMinimize() {},
+  showMinimizeButton: false
+};
+SideNav.__docgenInfo = {
+  "description": "",
+  "displayName": "SideNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Additional content to include below navigation items"
+    },
+    "copyright": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Copyright text to include"
+    },
+    "groups": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Groups"
+    },
+    "headerLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Subtitle at the top of the SideNav"
+    },
+    "headerLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Subtitle"
+    },
+    "links": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Links"
+    },
+    "onMinimize": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when minimize button is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "showMinimizeButton": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Renders a button to minimize the SideNav",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "superHeaderLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title at the top of the SideNav"
+    },
+    "superHeaderLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Title"
+    }
+  }
+};
+
+var _extends$1 = 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; };
+
+var _createClass$9 = 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; }; }();
+
+function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$9(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$9(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var skeletonItemStyles = Object.freeze([{
+  maxWidth: "180px",
+  marginBottom: "48px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "124px",
+  marginBottom: "48px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "124px"
+}]);
+
+var SideNavSkeleton = function (_Component) {
+  _inherits$9(SideNavSkeleton, _Component);
+
+  function SideNavSkeleton() {
+    _classCallCheck$9(this, SideNavSkeleton);
+
+    return _possibleConstructorReturn$9(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
+  }
+
+  _createClass$9(SideNavSkeleton, [{
+    key: "render",
+    value: function render() {
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            { className: classnames("hig__side-nav-skeleton", themeClass) },
+            skeletonItemStyles.map(function (style, index) {
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                React.createElement(SkeletonItem, _extends$1({ key: index }, style))
+              );
+            })
+          );
+        }
+      );
+    }
+  }]);
+
+  return SideNavSkeleton;
+}(Component);
+SideNavSkeleton.__docgenInfo = {
+  "description": "",
+  "displayName": "SideNavSkeleton"
+};
+
+var _createClass$10 = 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; }; }();
+
+function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$10(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$10(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Docked = function (_Component) {
+  _inherits$10(Docked, _Component);
+
+  function Docked() {
+    _classCallCheck$10(this, Docked);
+
+    return _possibleConstructorReturn$10(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
+  }
+
+  _createClass$10(Docked, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav-container--docked");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            { className: classes(themeClass) },
+            _this2.props.children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Docked;
+}(Component);
+
+Docked.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node
+};
+Docked.__docgenInfo = {
+  "description": "",
+  "displayName": "Docked",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    }
+  }
+};
+
+var _createClass$11 = 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; }; }();
+
+function _classCallCheck$11(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$11(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$11(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var BelowTopNav = function (_Component) {
+  _inherits$11(BelowTopNav, _Component);
+
+  function BelowTopNav() {
+    _classCallCheck$11(this, BelowTopNav);
+
+    return _possibleConstructorReturn$11(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
+  }
+
+  _createClass$11(BelowTopNav, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav-container--below-top-nav");
+      };
+
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React.createElement(
+            "div",
+            { className: classes(themeClass) },
+            _this2.props.children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNav;
+}(Component);
+
+BelowTopNav.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node
+};
+BelowTopNav.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    }
+  }
+};
+
+SideNav.CollapseButton = CollapseButton;
+SideNav.Group = Group;
+SideNav.Link = Link;
+SideNav.Module = Module$1;
+SideNav.ModuleCompact = ModuleCompact;
+SideNav.Submodule = Submodule;
+
+export default SideNav;
+export { SideNavSkeleton, Docked, BelowTopNav };

build/index.js

@@ -9,7 +9,9 @@ 'use strict';
 var React__default = _interopDefault(React);
-var SkeletonItem = _interopDefault(require('@hig/skeleton-item'));
-var themes = require('@hig/themes');
 var PropTypes = _interopDefault(require('prop-types'));
 var Icon = require('@hig/icon');
 var Icon__default = _interopDefault(Icon);
+var themes = require('@hig/themes');
+var IconButton = require('@hig/icon-button');
+var IconButton__default = _interopDefault(IconButton);
+var SkeletonItem = _interopDefault(require('@hig/skeleton-item'));
 
@@ -72,4 +74,2 @@ function createCommonjsModule(fn, module) {
 
-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; };
-
 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; }; }();
@@ -83,89 +83,14 @@
 
-var skeletonItemStyles = Object.freeze([{
-  maxWidth: "180px",
-  marginBottom: "48px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "124px",
-  marginBottom: "48px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "180px",
-  marginBottom: "24px"
-}, {
-  maxWidth: "124px"
-}]);
-
-var SideNavSkeleton = function (_Component) {
-  _inherits(SideNavSkeleton, _Component);
-
-  function SideNavSkeleton() {
-    _classCallCheck(this, SideNavSkeleton);
-
-    return _possibleConstructorReturn(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
-  }
-
-  _createClass(SideNavSkeleton, [{
-    key: "render",
-    value: function render() {
-      return React__default.createElement(
-        themes.ThemeContext.Consumer,
-        null,
-        function (_ref) {
-          var themeClass = _ref.themeClass;
-          return React__default.createElement(
-            "div",
-            { className: classnames("hig__side-nav-skeleton", themeClass) },
-            skeletonItemStyles.map(function (style, index) {
-              return (
-                // eslint-disable-next-line react/no-array-index-key
-                React__default.createElement(SkeletonItem, _extends({ key: index }, style))
-              );
-            })
-          );
-        }
-      );
-    }
-  }]);
-
-  return SideNavSkeleton;
-}(React.Component);
-SideNavSkeleton.__docgenInfo = {
-  "description": "",
-  "displayName": "SideNavSkeleton"
-};
-
-var _createClass$1 = 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; }; }();
-
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /** @todo Consider replacing with an IconButton */
 
 var CollapseButton = function (_Component) {
-  _inherits$1(CollapseButton, _Component);
+  _inherits(CollapseButton, _Component);
 
   function CollapseButton() {
-    _classCallCheck$1(this, CollapseButton);
+    _classCallCheck(this, CollapseButton);
 
-    return _possibleConstructorReturn$1(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (CollapseButton.__proto__ || Object.getPrototypeOf(CollapseButton)).apply(this, arguments));
   }
 
-  _createClass$1(CollapseButton, [{
+  _createClass(CollapseButton, [{
     key: "render",
@@ -248,20 +173,20 @@ value: function render() {
 
-var _createClass$2 = 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; }; }();
+var _createClass$1 = 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; }; }();
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var Group = function (_Component) {
-  _inherits$2(Group, _Component);
+  _inherits$1(Group, _Component);
 
   function Group() {
-    _classCallCheck$2(this, Group);
+    _classCallCheck$1(this, Group);
 
-    return _possibleConstructorReturn$2(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
+    return _possibleConstructorReturn$1(this, (Group.__proto__ || Object.getPrototypeOf(Group)).apply(this, arguments));
   }
 
-  _createClass$2(Group, [{
+  _createClass$1(Group, [{
     key: "render",
@@ -311,2 +236,56 @@ value: function render() {
 
+var _createClass$2 = 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; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ExternalLinkIcon = function (_Component) {
+  _inherits$2(ExternalLinkIcon, _Component);
+
+  function ExternalLinkIcon() {
+    _classCallCheck$2(this, ExternalLinkIcon);
+
+    return _possibleConstructorReturn$2(this, (ExternalLinkIcon.__proto__ || Object.getPrototypeOf(ExternalLinkIcon)).apply(this, arguments));
+  }
+
+  _createClass$2(ExternalLinkIcon, [{
+    key: "render",
+    value: function render() {
+      return React__default.createElement(Icon__default, { name: Icon.names.EXTERNAL_LINK, size: this.props.size });
+    }
+  }]);
+
+  return ExternalLinkIcon;
+}(React.Component);
+
+ExternalLinkIcon.propTypes = {
+  /** Size of the icon */
+  size: PropTypes.oneOf(Object.values(Icon.sizes))
+};
+ExternalLinkIcon.defaultProps = {
+  size: Icon.sizes.PX_24
+};
+ExternalLinkIcon.__docgenInfo = {
+  "description": "",
+  "displayName": "ExternalLinkIcon",
+  "props": {
+    "size": {
+      "type": {
+        "name": "enum",
+        "computed": true,
+        "value": "Object.values(iconSizes)"
+      },
+      "required": false,
+      "description": "Size of the icon",
+      "defaultValue": {
+        "value": "iconSizes.PX_24",
+        "computed": true
+      }
+    }
+  }
+};
+
 var _createClass$3 = 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; }; }();
@@ -337,3 +316,3 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn$3(this, (_ref = Link.__proto__ || Object.getPrototypeOf(Link)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
-      return _this.props.target === "_blank" && React__default.createElement(Icon__default, { name: Icon.names.EXTERNAL_LINK, size: Icon.sizes.PX_16 });
+      return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, { size: Icon.sizes.PX_16 });
     }, _temp), _possibleConstructorReturn$3(_this, _ret);
@@ -485,3 +464,3 @@ }
     return _ret = (_temp = (_this = _possibleConstructorReturn$4(this, (_ref = Module.__proto__ || Object.getPrototypeOf(Module)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
-      return _this.props.target === "_blank" && React__default.createElement(Icon__default, { name: Icon.names.EXTERNAL_LINK, size: Icon.sizes.PX_24 });
+      return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, null);
     }, _temp), _possibleConstructorReturn$4(_this, _ret);
@@ -723,3 +702,3 @@ }
 
-var _extends$1 = 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; };
+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; };
 
@@ -751,3 +730,3 @@ var _createClass$5 = 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; }; }();
     _this.renderPresenter = function (presenterBag) {
-      var presenterProps = _extends$1({}, _this.props, presenterBag);
+      var presenterProps = _extends({}, _this.props, presenterBag);
 
@@ -942,4 +921,143 @@ var children = presenterProps.children,
 
+var ModuleCompact = function (_Component) {
+  _inherits$6(ModuleCompact, _Component);
+
+  function ModuleCompact() {
+    _classCallCheck$6(this, ModuleCompact);
+
+    return _possibleConstructorReturn$6(this, (ModuleCompact.__proto__ || Object.getPrototypeOf(ModuleCompact)).apply(this, arguments));
+  }
+
+  _createClass$6(ModuleCompact, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          active = _props.active,
+          activeChildren = _props.activeChildren,
+          icon = _props.icon,
+          onClickTitle = _props.onClickTitle,
+          onMouseOver = _props.onMouseOver;
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav__module");
+      };
+
+      var linkClasses = function linkClasses(themeClass) {
+        return classnames(themeClass, "hig__side-nav__module__link", {
+          "hig__side-nav__module__link--active": active,
+          "hig__side-nav__module__link--active-children": activeChildren
+        });
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            { className: classes(themeClass), onMouseOver: onMouseOver },
+            React__default.createElement(
+              "div",
+              { className: "hig__side-nav__module__row" },
+              React__default.createElement(
+                "a",
+                {
+                  className: linkClasses(themeClass),
+                  onClick: onClickTitle,
+                  role: "button",
+                  tabIndex: 0
+                },
+                React__default.createElement(
+                  "div",
+                  { className: "hig__side-nav__module__link__icon" },
+                  icon
+                )
+              )
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return ModuleCompact;
+}(React.Component);
+
+ModuleCompact.propTypes = {
+  /** Indicates this module is currently active */
+  active: PropTypes.bool,
+  /** Indicates a nested submodule is currently active */
+  activeChildren: PropTypes.bool,
+  /** An instance of @hig/icon */
+  icon: PropTypes.node.isRequired,
+  /** Called when clicking on the title */
+  onClickTitle: PropTypes.func,
+  /** Called when hovering over the icon */
+  onMouseOver: PropTypes.func
+};
+ModuleCompact.defaultProps = {
+  onClickTitle: function onClickTitle() {},
+  onMouseOver: function onMouseOver() {}
+};
+ModuleCompact.__docgenInfo = {
+  "description": "",
+  "displayName": "ModuleCompact",
+  "props": {
+    "active": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates this module is currently active"
+    },
+    "activeChildren": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates a nested submodule is currently active"
+    },
+    "icon": {
+      "type": {
+        "name": "node"
+      },
+      "required": true,
+      "description": "An instance of @hig/icon"
+    },
+    "onClickTitle": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when clicking on the title",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "onMouseOver": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when hovering over the icon",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    }
+  }
+};
+
+var _createClass$7 = 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; }; }();
+
+function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$7(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$7(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var Submodule = function (_Component) {
-  _inherits$6(Submodule, _Component);
+  _inherits$7(Submodule, _Component);
 
@@ -951,3 +1069,3 @@ function Submodule() {
 
-    _classCallCheck$6(this, Submodule);
+    _classCallCheck$7(this, Submodule);
 
@@ -958,8 +1076,8 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$6(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
-      return _this.props.target === "_blank" && React__default.createElement(Icon__default, { name: Icon.names.EXTERNAL_LINK, size: Icon.sizes.PX_16 });
-    }, _temp), _possibleConstructorReturn$6(_this, _ret);
+    return _ret = (_temp = (_this = _possibleConstructorReturn$7(this, (_ref = Submodule.__proto__ || Object.getPrototypeOf(Submodule)).call.apply(_ref, [this].concat(args))), _this), _this._renderExternalLinkIcon = function () {
+      return _this.props.target === "_blank" && React__default.createElement(ExternalLinkIcon, { size: Icon.sizes.PX_16 });
+    }, _temp), _possibleConstructorReturn$7(_this, _ret);
   }
 
-  _createClass$6(Submodule, [{
+  _createClass$7(Submodule, [{
     key: "render",
@@ -1085,7 +1203,457 @@ value: function render() {
 
+var _createClass$8 = 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; }; }();
+
+function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$8(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$8(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var SideNav = function (_Component) {
+  _inherits$8(SideNav, _Component);
+
+  function SideNav() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$8(this, SideNav);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$8(this, (_ref = SideNav.__proto__ || Object.getPrototypeOf(SideNav)).call.apply(_ref, [this].concat(args))), _this), _this._renderHeaders = function () {
+      var _this$props = _this.props,
+          headerLabel = _this$props.headerLabel,
+          headerLink = _this$props.headerLink,
+          superHeaderLabel = _this$props.superHeaderLabel,
+          superHeaderLink = _this$props.superHeaderLink;
+
+
+      if (!(superHeaderLabel || headerLabel)) {
+        return null;
+      }
+
+      return React__default.createElement(
+        "div",
+        { className: "hig__side-nav__headers" },
+        superHeaderLabel && React__default.createElement(
+          "h3",
+          { className: "hig__side-nav__super-header" },
+          React__default.createElement(
+            "a",
+            {
+              className: "hig__side-nav__super-header-link",
+              href: superHeaderLink
+            },
+            superHeaderLabel
+          )
+        ),
+        headerLabel && React__default.createElement(
+          "h4",
+          { className: "hig__side-nav__header" },
+          React__default.createElement(
+            "a",
+            { className: "hig__side-nav__header-link", href: headerLink },
+            headerLabel
+          )
+        )
+      );
+    }, _temp), _possibleConstructorReturn$8(_this, _ret);
+  }
+
+  _createClass$8(SideNav, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          copyright = _props.copyright,
+          groups = _props.groups,
+          links = _props.links,
+          onMinimize = _props.onMinimize,
+          showMinimizeButton = _props.showMinimizeButton;
+
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var themeClass = _ref2.themeClass;
+          return React__default.createElement(
+            "nav",
+            { className: classes(themeClass) },
+            React__default.createElement(
+              "div",
+              { className: "hig__side-nav__overflow" },
+              _this2._renderHeaders(),
+              groups && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__groups" },
+                groups
+              ),
+              children && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__slot" },
+                children
+              ),
+              links && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__links" },
+                links
+              ),
+              copyright && React__default.createElement(
+                "div",
+                { className: "hig__side-nav__copyright" },
+                copyright
+              )
+            ),
+            showMinimizeButton && React__default.createElement(
+              "div",
+              { className: "hig__side-nav__minimize" },
+              React__default.createElement(IconButton__default, {
+                type: IconButton.types.TRANSPARENT,
+                name: Icon.names.BACK,
+                title: "Minimize",
+                "aria-label": "Minimize",
+                onClick: onMinimize
+              })
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return SideNav;
+}(React.Component);
+
+SideNav.propTypes = {
+  /** Additional content to include below navigation items */
+  children: PropTypes.node,
+  /** Copyright text to include  */
+  copyright: PropTypes.string,
+  /** 0 or more SideNav Groups */
+  groups: PropTypes.node,
+  /** Subtitle at the top of the SideNav */
+  headerLabel: PropTypes.string,
+  /** An href for the SideNav Subtitle */
+  headerLink: PropTypes.string,
+  /** 0 or more SideNav Links */
+  links: PropTypes.node,
+  /** Called when minimize button is clicked */
+  onMinimize: PropTypes.func,
+  /** Renders a button to minimize the SideNav */
+  showMinimizeButton: PropTypes.bool,
+  /** Title at the top of the SideNav */
+  superHeaderLabel: PropTypes.string,
+  /** An href for the SideNav Title */
+  superHeaderLink: PropTypes.string
+};
+SideNav.defaultProps = {
+  onMinimize: function onMinimize() {},
+  showMinimizeButton: false
+};
+SideNav.__docgenInfo = {
+  "description": "",
+  "displayName": "SideNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Additional content to include below navigation items"
+    },
+    "copyright": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Copyright text to include"
+    },
+    "groups": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Groups"
+    },
+    "headerLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Subtitle at the top of the SideNav"
+    },
+    "headerLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Subtitle"
+    },
+    "links": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "0 or more SideNav Links"
+    },
+    "onMinimize": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when minimize button is clicked",
+      "defaultValue": {
+        "value": "() => {}",
+        "computed": false
+      }
+    },
+    "showMinimizeButton": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Renders a button to minimize the SideNav",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "superHeaderLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title at the top of the SideNav"
+    },
+    "superHeaderLink": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "An href for the SideNav Title"
+    }
+  }
+};
+
+var _extends$1 = 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; };
+
+var _createClass$9 = 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; }; }();
+
+function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$9(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$9(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var skeletonItemStyles = Object.freeze([{
+  maxWidth: "180px",
+  marginBottom: "48px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "124px",
+  marginBottom: "48px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "180px",
+  marginBottom: "24px"
+}, {
+  maxWidth: "124px"
+}]);
+
+var SideNavSkeleton = function (_Component) {
+  _inherits$9(SideNavSkeleton, _Component);
+
+  function SideNavSkeleton() {
+    _classCallCheck$9(this, SideNavSkeleton);
+
+    return _possibleConstructorReturn$9(this, (SideNavSkeleton.__proto__ || Object.getPrototypeOf(SideNavSkeleton)).apply(this, arguments));
+  }
+
+  _createClass$9(SideNavSkeleton, [{
+    key: "render",
+    value: function render() {
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            { className: classnames("hig__side-nav-skeleton", themeClass) },
+            skeletonItemStyles.map(function (style, index) {
+              return (
+                // eslint-disable-next-line react/no-array-index-key
+                React__default.createElement(SkeletonItem, _extends$1({ key: index }, style))
+              );
+            })
+          );
+        }
+      );
+    }
+  }]);
+
+  return SideNavSkeleton;
+}(React.Component);
+SideNavSkeleton.__docgenInfo = {
+  "description": "",
+  "displayName": "SideNavSkeleton"
+};
+
+var _createClass$10 = 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; }; }();
+
+function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$10(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$10(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Docked = function (_Component) {
+  _inherits$10(Docked, _Component);
+
+  function Docked() {
+    _classCallCheck$10(this, Docked);
+
+    return _possibleConstructorReturn$10(this, (Docked.__proto__ || Object.getPrototypeOf(Docked)).apply(this, arguments));
+  }
+
+  _createClass$10(Docked, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav-container--docked");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            { className: classes(themeClass) },
+            _this2.props.children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Docked;
+}(React.Component);
+
+Docked.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node
+};
+Docked.__docgenInfo = {
+  "description": "",
+  "displayName": "Docked",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    }
+  }
+};
+
+var _createClass$11 = 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; }; }();
+
+function _classCallCheck$11(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$11(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$11(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var BelowTopNav = function (_Component) {
+  _inherits$11(BelowTopNav, _Component);
+
+  function BelowTopNav() {
+    _classCallCheck$11(this, BelowTopNav);
+
+    return _possibleConstructorReturn$11(this, (BelowTopNav.__proto__ || Object.getPrototypeOf(BelowTopNav)).apply(this, arguments));
+  }
+
+  _createClass$11(BelowTopNav, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var classes = function classes(themeClass) {
+        return classnames(themeClass, "hig__side-nav-container--below-top-nav");
+      };
+
+      return React__default.createElement(
+        themes.ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var themeClass = _ref.themeClass;
+          return React__default.createElement(
+            "div",
+            { className: classes(themeClass) },
+            _this2.props.children
+          );
+        }
+      );
+    }
+  }]);
+
+  return BelowTopNav;
+}(React.Component);
+
+BelowTopNav.propTypes = {
+  /** A SideNav element */
+  children: PropTypes.node
+};
+BelowTopNav.__docgenInfo = {
+  "description": "",
+  "displayName": "BelowTopNav",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "A SideNav element"
+    }
+  }
+};
+
+SideNav.CollapseButton = CollapseButton;
+SideNav.Group = Group;
+SideNav.Link = Link;
+SideNav.Module = Module$1;
+SideNav.ModuleCompact = ModuleCompact;
+SideNav.Submodule = Submodule;
+
+exports.default = SideNav;
 exports.SideNavSkeleton = SideNavSkeleton;
-exports.CollapseButton = CollapseButton;
-exports.Group = Group;
-exports.Link = Link;
-exports.Module = Module$1;
-exports.Submodule = Submodule;
+exports.Docked = Docked;
+exports.BelowTopNav = BelowTopNav;

package.json

 {
   "name": "@hig/side-nav",
-  "version": "0.1.0-alpha.c4dcd454",
+  "version": "0.1.0-alpha.d089bd7a",
   "description": "HIG SideNav components",
@@ -18,11 +18,11 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icon": "0.1.0-alpha.c4dcd454",
-    "@hig/icon-button": "0.1.0-alpha.c4dcd454",
-    "@hig/skeleton-item": "0.1.0-alpha.c4dcd454",
-    "@hig/themes": "0.1.0-alpha.c4dcd454"
+    "@hig/icon": "0.1.0-alpha.d089bd7a",
+    "@hig/icon-button": "0.1.0-alpha.d089bd7a",
+    "@hig/skeleton-item": "0.1.0-alpha.d089bd7a",
+    "@hig/themes": "0.1.0-alpha.d089bd7a"
   },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.c4dcd454",
-    "@hig/scripts": "0.2.0-alpha.c4dcd454",
-    "@hig/styles": "0.1.0-alpha.c4dcd454"
+    "@hig/babel-preset": "0.2.0-alpha.d089bd7a",
+    "@hig/scripts": "0.2.0-alpha.d089bd7a",
+    "@hig/styles": "0.1.0-alpha.d089bd7a"
   },
@@ -29,0 +29,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

202725

increased by51.03%

Lines of code

4532

increased by57.58%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@hig/icon@0.1.0-alpha.d089bd7a(transitive)

• + Added@hig/icon-button@0.1.0-alpha.d089bd7a(transitive)

• + Added@hig/icons@0.1.0-alpha.d089bd7a(transitive)

• + Added@hig/skeleton-item@0.1.0-alpha.d089bd7a(transitive)

• + Added@hig/themes@0.1.0-alpha.d089bd7a(transitive)

• - Removed@hig/icon@0.1.0-alpha.c4dcd454(transitive)

• - Removed@hig/icon-button@0.1.0-alpha.c4dcd454(transitive)

• - Removed@hig/icons@0.1.0-alpha.c4dcd454(transitive)

• - Removed@hig/skeleton-item@0.1.0-alpha.c4dcd454(transitive)

• - Removed@hig/themes@0.1.0-alpha.c4dcd454(transitive)

• Updated@hig/icon@0.1.0-alpha.d089bd7a

• Updated@hig/icon-button@0.1.0-alpha.d089bd7a

• Updated@hig/skeleton-item@0.1.0-alpha.d089bd7a

• Updated@hig/themes@0.1.0-alpha.d089bd7a