orcs-design-system 3.0.2 → 3.0.4

package/es/components/SideNav/SideNav.stories.js

@@ -3,8 +3,14 @@ import PropTypes from "prop-types";
 import SideNav from ".";
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import { H5, P } from "../Typography";
+import Box from "../Box";
 export default {
   title: "Components/SideNav",
+  decorators: [function (storyFn) {
+    return /*#__PURE__*/React.createElement(Box, {
+      minHeight: "450px"
+    }, storyFn());
+  }],
   component: SideNav
 };
 var LinkComponent = function LinkComponent(_ref) {

package/es/components/SideNav/index.js

@@ -20,7 +20,7 @@ var SideNavWrapper = styled("div").withConfig({
     bg: themeGet("colors.white")(props),
     color: themeGet("colors.greyDarkest")(props),
     minHeight: props.sideNavHeight,
-    height: "100%",
+    height: props.sideNavHeight,
     maxWidth: "max-content",
     fontFamily: themeGet("fonts.main")(props),
     borderRadius: themeGet("radii.2")(props),
@@ -59,6 +59,11 @@ var SideNavItems = styled("div").withConfig({
     alignItems: "center",
     justifyContent: "flex-start",
     textAlign: "center",
+    // "&:hover, &:focus": {
+    //   "& .sideNavItemName": {
+    //     display: "block"
+    //   }
+    // },
     "@media screen and (max-width: 900px)": {
       height: themeGet("appScale.navBarSize")(props),
       flexDirection: "row",
@@ -147,12 +152,19 @@ var SideNavItemPopover = styled(Popover).withConfig({
           zIndex: "-100",
           visibility: "hidden",
           pointerEvents: "none",
+          justifyContent: "space-around",
           display: "none"
         }
+        // "&:hover, &:focus": {
+        //   "& .sideNavItemName": {
+        //     display: "none"
+        //   }
+        // }
       }
     }
   });
 });
+
 var SideNavItem = styled("button").attrs(function (props) {
   return {
     className: props.badge ? "Sidebar__Badge" : ""
@@ -174,6 +186,8 @@ var SideNavItem = styled("button").attrs(function (props) {
     cursor: "pointer",
     border: "none",
     padding: "s",
+    // marginBottom: props.bottomAligned ? "0" : "s",
+    // marginTop: props.bottomAligned ? "s" : "0",
     fontSize: "1.4rem",
     fontWeight: themeGet("fontWeights.1")(props),
     color: themeGet("colors.greyDarker")(props),
@@ -190,7 +204,11 @@ var SideNavItem = styled("button").attrs(function (props) {
       "& .sideNavItemName": {
         color: themeGet("colors.primary")(props)
       }
+      // "& .sideNavItemName": {
+      //   color: themeGet("colors.primary")(props)
+      // }
     },
+
     "@media screen and (max-width: 900px)": {
       width: "auto"
     }
@@ -201,9 +219,9 @@ var SideNavItem = styled("button").attrs(function (props) {
     path: {
       fill: themeGet("colors.white")(props)
     },
-    "& .sideNavItemName": {
-      color: themeGet("colors.white")(props)
-    },
+    // "& .sideNavItemName": {
+    //   color: themeGet("colors.white")(props)
+    // },
     "&:hover, &:focus": {
       path: {
         fill: themeGet("colors.white")(props)
@@ -211,9 +229,13 @@ var SideNavItem = styled("button").attrs(function (props) {
       "& .sideNavItemName": {
         color: themeGet("colors.white")(props)
       }
+      // "& .sideNavItemName": {
+      //   color: themeGet("colors.white")(props)
+      // }
     }
   });
 });
+
 var SideNavItemLink = styled("div").attrs(function (props) {
   return {
     className: props.badge ? "Sidebar__Badge" : ""
@@ -223,38 +245,34 @@ var SideNavItemLink = styled("div").attrs(function (props) {
   componentId: "sc-1heo0i9-6"
 })(function (props) {
   return css({
-    cursor: "pointer",
-    padding: "s",
-    textDecoration: "none",
-    borderRadius: themeGet("radii.2")(props),
-    width: "100%",
-    path: {
-      transition: themeGet("transition.transitionDefault")(props),
-      fill: themeGet("colors.greyDarker")(props)
-    },
-    "&:hover, &:focus": {
-      "& .sideNavItemName": {
-        color: themeGet("colors.primary")(props)
-      },
-      path: {
-        fill: themeGet("colors.primary")(props)
-      }
-    },
-    "@media screen and (max-width: 900px)": {
-      width: "auto"
-    },
     "& > a": {
-      fontFamily: themeGet("fonts.main")(props),
+      cursor: "pointer",
+      padding: "s",
       textDecoration: "none",
+      borderRadius: themeGet("radii.2")(props),
+      width: "100%",
+      path: {
+        transition: themeGet("transition.transitionDefault")(props),
+        fill: themeGet("colors.greyDarker")(props)
+      },
+      fontFamily: themeGet("fonts.main")(props),
       position: "relative",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      width: "100%",
+      // width: "100%",
       transition: themeGet("transition.transitionDefault")(props),
       bg: "transparent",
       fontSize: "1.4rem",
       fontWeight: themeGet("fontWeights.1")(props),
+      "&:hover, &:focus": {
+        "& .sideNavItemName": {
+          color: themeGet("colors.primary")(props)
+        },
+        path: {
+          fill: themeGet("colors.primary")(props)
+        }
+      },
       "@media screen and (max-width: 900px)": {
         width: "auto"
       },
@@ -269,19 +287,24 @@ var SideNavItemLink = styled("div").attrs(function (props) {
   });
 }, function (props) {
   return props.active && css({
-    bg: themeGet("colors.primary")(props),
-    path: {
-      fill: themeGet("colors.white")(props)
-    },
-    "& .sideNavItemName": {
-      color: themeGet("colors.white")(props)
-    },
-    "&:hover, &:focus": {
+    "& > a": {
+      bg: themeGet("colors.primary")(props),
       path: {
         fill: themeGet("colors.white")(props)
       },
-      "& .sideNavItemName": {
-        color: themeGet("colors.white")(props)
+      "&:hover, &:focus": {
+        path: {
+          fill: themeGet("colors.white")(props)
+        }
+        // "& .sideNavItemName": {
+        //   color: themeGet("colors.white")(props)
+        // }
+      },
+
+      "&:focus": {
+        path: {
+          fill: themeGet("colors.white")(props)
+        }
       }
     }
   });
@@ -322,32 +345,31 @@ var BadgeNumber = styled("div").withConfig({
     justifyContent: "center"
   });
 });
-var SideNavItemName = styled("div").withConfig({
-  displayName: "SideNav__SideNavItemName",
-  componentId: "sc-1heo0i9-9"
-})(function (props) {
-  return css({
-    lineHeight: "0",
-    marginLeft: themeGet("space.r")(props),
-    fontSize: themeGet("fontSizes.1")(props),
-    whiteSpace: "nowrap",
-    textDecoration: "none",
-    color: themeGet("colors.greyDarker")(props),
-    "&:hover, &:focus": {
-      color: themeGet("colors.primary")(props)
-    }
-  });
-});
+
+// const SideNavItemName = styled("div")((props) =>
+//   css({
+//     lineHeight: "0",
+//     marginLeft: themeGet("space.r")(props),
+//     fontSize: themeGet("fontSizes.1")(props),
+//     whiteSpace: "nowrap",
+//     textDecoration: "none",
+//     color: themeGet("colors.greyDarker")(props),
+//     "&:hover, &:focus": {
+//       color: themeGet("colors.primary")(props)
+//     }
+//   })
+// );
+
 var SideNavExpanded = styled("div").withConfig({
   displayName: "SideNav__SideNavExpanded",
-  componentId: "sc-1heo0i9-10"
+  componentId: "sc-1heo0i9-9"
 })(function (props) {
   return css({
     position: "relative",
     display: props.active ? "block" : "none",
     minWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
     maxWidth: props.large ? "calc(" + themeGet("appScale.sidebarMaxWidthLarge")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")" : "calc(" + themeGet("appScale.sidebarMaxWidth")(props) + " - " + themeGet("appScale.navBarSize")(props) + ")",
-    height: props.sideNavHeight,
+    height: "inherit",
     overflowY: "auto",
     padding: "r",
     borderLeft: "solid 1px ".concat(themeGet("colors.greyLighter")(props)),
@@ -365,8 +387,7 @@ var NavItem = function NavItem(_ref) {
   var item = _ref.item,
     Component = _ref.Component,
     activeItem = _ref.activeItem,
-    handleItemClick = _ref.handleItemClick,
-    showItemNames = _ref.showItemNames;
+    handleItemClick = _ref.handleItemClick;
   // Use the ternary operator to render the appropriate component based on actionType
   var accessibilityProps = _objectSpread(_objectSpread({}, item.actionType === "component" && {
     "aria-expanded": item.index === activeItem ? "true" : "false"
@@ -378,37 +399,36 @@ var NavItem = function NavItem(_ref) {
     textAlign: "center",
     width: "100px",
     active: item.index === activeItem,
-    bottomAligned: item.bottomAligned,
-    showItemNames: showItemNames
+    bottomAligned: item.bottomAligned
+    // showItemNames={showItemNames}
   }, /*#__PURE__*/React.createElement(SideNavItemLink, {
     key: item.index,
     active: item.index === activeItem,
-    bottomAligned: item.bottomAligned
+    bottomAligned: item.bottomAligned,
+    onClick: function onClick() {
+      return handleItemClick(item);
+    }
   }, /*#__PURE__*/React.createElement(Component, {
     item: item
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["far", item.iconName]
-  }), showItemNames && /*#__PURE__*/React.createElement(SideNavItemName, {
-    className: "sideNavItemName"
-  }, item.name)))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
+  })))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
     text: item.name,
     textAlign: "center",
     width: "100px",
     active: item.index === activeItem,
-    bottomAligned: item.bottomAligned,
-    showItemNames: showItemNames
+    bottomAligned: item.bottomAligned
+    // showItemNames={showItemNames}
   }, /*#__PURE__*/React.createElement(SideNavItem, _extends({
     key: item.index,
     active: item.index === activeItem,
     onClick: function onClick() {
-      return handleItemClick(item.index, item.actionType, item.onClick);
+      return handleItemClick(item);
     },
     bottomAligned: item.bottomAligned
   }, accessibilityProps), item.badgeNumber && /*#__PURE__*/React.createElement(BadgeNumber, null, item.badgeNumber), /*#__PURE__*/React.createElement(Icon, {
     icon: ["far", item.iconName]
-  }), showItemNames && /*#__PURE__*/React.createElement(SideNavItemName, {
-    className: "sideNavItemName"
-  }, item.name)));
+  })));
 };
 var SideNav = function SideNav(_ref2) {
   var items = _ref2.items,
@@ -421,12 +441,16 @@ var SideNav = function SideNav(_ref2) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeItem = _useState4[0],
     setActiveItem = _useState4[1];
-  var handleItemClick = function handleItemClick(itemIndex, actionType, onButtonClick) {
+  var handleItemClick = function handleItemClick(item) {
+    var itemIndex = item.index,
+      actionType = item.actionType,
+      onButtonClick = item.onClick;
     if (actionType === "link" || actionType === "button") {
       setExpandedItem(null);
-      onButtonClick && onButtonClick();
+      onButtonClick && onButtonClick(item);
     } else {
       setExpandedItem(itemIndex === expandedItem ? null : itemIndex);
+      onButtonClick && onButtonClick(item);
     }
     setActiveItem(itemIndex === activeItem ? null : itemIndex);
   };
@@ -470,15 +494,11 @@ var SideNav = function SideNav(_ref2) {
   });
 
   // Toggle nav item names on click of panel control button
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showItemNames = _useState8[0],
-    setShowItemNames = _useState8[1];
-  var toggleItemNames = function toggleItemNames() {
-    setShowItemNames(function (prevState) {
-      return !prevState;
-    });
-  };
+  // const [showItemNames, setShowItemNames] = useState(false);
+  // const toggleItemNames = () => {
+  //   setShowItemNames((prevState) => !prevState);
+  // };
+
   return /*#__PURE__*/React.createElement(SideNavWrapper, {
     sideNavHeight: sideNavHeight
   }, /*#__PURE__*/React.createElement(SideNavItems, null, topAlignedItems.map(function (item) {
@@ -486,8 +506,9 @@ var SideNav = function SideNav(_ref2) {
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component,
-      showItemNames: showItemNames,
+      Component: Component
+      // showItemNames={showItemNames}
+      ,
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
@@ -506,43 +527,33 @@ var SideNav = function SideNav(_ref2) {
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component,
-      showItemNames: showItemNames,
+      Component: Component
+      // showItemNames={showItemNames}
+      ,
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
   })), bottomAlignedItems.length > 0 && (
   // Render the special-container only if there are bottom-aligned items
-  isGreaterThan900 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BottomAlignedNavItems, null, bottomAlignedItems.map(function (item) {
+  isGreaterThan900 ? /*#__PURE__*/React.createElement(BottomAlignedNavItems, null, bottomAlignedItems.map(function (item) {
     var Component = item.component;
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component,
-      showItemNames: showItemNames,
+      Component: Component
+      // showItemNames={showItemNames}
+      ,
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
-  })), /*#__PURE__*/React.createElement(PanelControlTooltip, {
-    width: "180px",
-    textAlign: "center",
-    mt: "r",
-    showItemNames: showItemNames,
-    text: showItemNames === true ? "Hide navigation item names" : "Show navigation item names"
-  }, /*#__PURE__*/React.createElement(PanelControl, {
-    onClick: toggleItemNames,
-    "aria-label": "toggle navigation item names"
-  }, showItemNames === true ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-left"]
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "chevron-right"]
-  })))) : bottomAlignedItems.map(function (item) {
+  })) : bottomAlignedItems.map(function (item) {
     var Component = item.component;
     return /*#__PURE__*/React.createElement(NavItem, {
       key: item.index,
       item: item,
-      Component: Component,
-      showItemNames: showItemNames,
+      Component: Component
+      // showItemNames={showItemNames}
+      ,
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
@@ -558,7 +569,7 @@ var SideNav = function SideNav(_ref2) {
     text: "Hide panel"
   }, /*#__PURE__*/React.createElement(PanelControl, {
     onClick: function onClick() {
-      return handleItemClick(allItems[expandedItem].index, allItems[expandedItem].actionType, allItems[expandedItem].onClick);
+      return handleItemClick(allItems[expandedItem]);
     },
     "aria-label": "toggle panel"
   }, isGreaterThan900 === true ? /*#__PURE__*/React.createElement(Icon, {
@@ -571,9 +582,10 @@ NavItem.propTypes = {
   item: PropTypes.object,
   Component: PropTypes.elementType,
   activeItem: PropTypes.string,
-  handleItemClick: PropTypes.func,
-  showItemNames: PropTypes.bool
+  handleItemClick: PropTypes.func
+  // showItemNames: PropTypes.bool
 };
+
 SideNav.propTypes = {
   sideNavHeight: PropTypes.string.isRequired,
   // Used to specify the height of the sideNav

package/es/hooks/isVisible.js

@@ -9,9 +9,11 @@ export default function useIsVisible() {
   useEffect(function () {
     if (!ref.current) return;
     var interval = window.setInterval(function () {
-      var currentIsVisible = window.getComputedStyle(ref.current).visibility === "visible";
-      if (isVisible !== currentIsVisible) {
-        setIsVisible(currentIsVisible);
+      if (ref.current) {
+        var currentIsVisible = window.getComputedStyle(ref.current).visibility === "visible";
+        if (isVisible !== currentIsVisible) {
+          setIsVisible(currentIsVisible);
+        }
       }
     }, 250);
     return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",
@@ -34,11 +34,10 @@
     "deploy-stack": "serverless deploy",
     "deploy-client": "serverless client deploy  --no-confirm",
     "storybook": "storybook dev -s ./lib/assets",
-    "build-storybook": "storybook build -s .storybook/static",
+    "build-storybook": "storybook build -s .storybook/static -o .build_storybook",
     "deploy-storybook": "storybook-to-ghpages",
     "playroom": "playroom start",
-    "build-playroom": "playroom build",
-    "percy:storybook": "storybook build -o .build_storybook && percy storybook .build_storybook --config .percy.yaml"
+    "build-playroom": "playroom build"
   },
   "dependencies": {
     "@styled-system/css": "^5.1.5",
@@ -50,6 +49,7 @@
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
     "react-cool-onclickoutside": "^1.5.9",
+    "react-dates": "^21.8.0",
     "react-docgen": "^5.3.0",
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
@@ -58,8 +58,7 @@
     "react-router-dom": "^5.2.0",
     "react-select": "^5.7.4",
     "react-test-renderer": "^18.2.0",
-    "styled-system": "^5.1.5",
-    "react-dates": "^21.8.0"
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.10",
@@ -75,8 +74,6 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@percy/cli": "^1.26.3",
-    "@percy/storybook": "^4.3.6",
     "@storybook/addon-a11y": "^7.3.2",
     "@storybook/addon-actions": "^7.3.2",
     "@storybook/addon-docs": "^7.3.2",