@terraware/web-components 2.0.6 → 2.0.7

package/components/Navbar/NavItem.d.ts

@@ -1,11 +1,14 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { IconName } from '../Icon/icons';
 import './styles.scss';
+import { SubNavbarProps } from './SubNavbar';
 export interface NavItemProps {
     label: string;
     icon?: IconName;
+    children?: ReactElement<SubNavbarProps>;
     selected?: boolean;
-    onClick?: () => void;
+    isSubItem?: boolean;
+    onClick?: (open: boolean | undefined) => void;
     id?: string;
     isFooter?: boolean;
 }

package/components/Navbar/NavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavItem.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAuBhE"}
+{"version":3,"file":"NavItem.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/NavItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAmDhE"}

package/components/Navbar/NavItem.js

@@ -7,28 +7,65 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = NavItem;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon/Icon"));
 
 require("./styles.scss");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function NavItem(props) {
   var label = props.label,
       icon = props.icon,
+      children = props.children,
       selected = props.selected,
       onClick = props.onClick,
       id = props.id,
       isFooter = props.isFooter;
+  var hasChildrenSelected = (0, _react.useCallback)(function () {
+    if (children) {
+      if (children.props.children) {
+        var subChildren = children.props.children;
+
+        if (Array.isArray(subChildren)) {
+          return subChildren.some(function (subChild) {
+            return subChild.props.selected;
+          });
+        }
+
+        return subChildren.props.selected;
+      }
+    }
+
+    return false;
+  }, [children]);
+
+  _react.default.useEffect(function () {
+    if (children && hasChildrenSelected()) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }, [children, hasChildrenSelected, selected]);
+
+  var _React$useState = _react.default.useState(hasChildrenSelected()),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
 
   var onClickHandler = function onClickHandler() {
     if (onClick) {
-      onClick();
+      onClick(!open);
     }
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "\n        nav-item\n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n      ")
+    className: "\n        nav-item\n        ".concat(selected ? 'nav-item--selected' : '', "\n        ").concat(hasChildrenSelected() ? 'nav-item--children-selected' : '', "\n        ").concat(isFooter ? 'nav-item--footer' : '', "\n      ")
   }, /*#__PURE__*/_react.default.createElement("button", {
     className: "nav-item-content",
     onClick: onClickHandler,
@@ -38,5 +75,8 @@ function NavItem(props) {
     className: "nav-item--icon"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "nav-item--label"
-  }, label)));
+  }, label), children && !open && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: 'chevronDown',
+    className: "nav-item--arrow"
+  })), children && open && children);
 }

package/components/Navbar/SubNavbar.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { NavItemProps } from './NavItem';
+import './styles.scss';
+export interface SubNavbarProps {
+    children: ReactElement<NavItemProps> | ReactElement<NavItemProps>[];
+}
+export default function SubNavbar(props: SubNavbarProps): JSX.Element;
+//# sourceMappingURL=SubNavbar.d.ts.map

package/components/Navbar/SubNavbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/SubNavbar.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,YAAY,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAIpE"}

package/components/Navbar/SubNavbar.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SubNavbar;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.scss");
+
+function SubNavbar(props) {
+  var children = props.children;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "subnavbar"
+  }, children);
+}

package/components/Navbar/styles.scss

@@ -9,7 +9,7 @@
 .navbar {
   height: 100%;
   position: fixed;
-  z-index: 1100;
+  z-index: 1101;
   width: $tw-sz-nvgtn-side-nav-width;
   display: flex;
   flex-direction: column;
@@ -80,13 +80,13 @@
     }
 
     &--children-selected {
-      background-color: $tw-clr-bg-secondary-hover;
+      background-color: transparent;
 
       &:hover {
-        background-color: $tw-clr-bg-secondary-hover;
+        background-color: transparent;
 
         & > .nav-item-content {
-          background-color: $tw-clr-bg-secondary;
+          background-color: transparent;
         }
       }
 
@@ -96,6 +96,11 @@
         &:hover {
           background-color: $tw-clr-bg-ghost-hover;
         }
+
+        &--selected {
+          background-color: $tw-clr-bg-ghost-hover;
+          position: relative;
+        }
       }
     }
 
@@ -123,8 +128,8 @@
     }
 
     .subnavbar .nav-item {
+      padding-left: $tw-spc-base-small;
       padding-right: $tw-spc-base-small;
-      background-color: $tw-clr-bg-secondary-hover;
 
       &-content {
         padding-left: calc(#{$tw-spc-base-small} * 2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {

package/stories/Navbar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,EAAE,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;;;;;;AAI3E,wBAIE;AAkCF,eAAO,MAAM,OAAO,oBAAoB,CAAC"}
+{"version":3,"file":"Navbar.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Navbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEzC,OAAO,MAAM,EAAE,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;;;;;;AAK3E,wBAIE;AAsCF,eAAO,MAAM,OAAO,oBAAoB,CAAC"}