orcs-design-system 3.0.1 → 3.0.3

package/es/components/Popover/Popover.stories.js

@@ -117,6 +117,7 @@ export var tooltipWithLinkExample = function tooltipWithLinkExample() {
       small: true,
       target: "_blank"
     }, "link to TeamForm")),
+    arialLabel: "Link to TeamForm",
     direction: "right",
     variant: "tooltip",
     enableSelectAll: false

package/es/components/Popover/index.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll"];
-import React, { useState } from "react";
+var _excluded = ["children", "direction", "width", "textAlign", "text", "inlineBlock", "theme", "variant", "enableSelectAll", "tabIndex"];
+import React, { useId, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
@@ -10,16 +10,17 @@ import { keys } from "lodash";
 import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
 import { useKeepInView, directions } from "../../hooks/keepInView";
+import useIsVisible from "../../hooks/isVisible";
 var Container = styled.div.withConfig({
   displayName: "Popover__Container",
   componentId: "sc-1bwoak-0"
 })(["", " ", " display:", ";position:relative;&:hover,&:focus-within{.popoverText{opacity:1;z-index:100;visibility:visible;pointer-events:auto;}}"], space, layout, function (props) {
   return props.inlineBlock ? "inline-block !important" : "block !important";
 });
-var TooltipControl = styled.div.withConfig({
+var TooltipControl = styled.button.withConfig({
   displayName: "Popover__TooltipControl",
   componentId: "sc-1bwoak-1"
-})(["cursor:help;transition:", ";&:hover,&:focus{outline:0;color:", ";}"], function (props) {
+})(["border:none;background:none;padding:0;cursor:help;font-size:1em;transition:", ";&:hover,&:focus{outline:0;color:", ";}"], function (props) {
   return themeGet("transition.transitionDefault")(props);
 }, function (props) {
   return themeGet("colors.primary")(props);
@@ -79,11 +80,18 @@ export default function Popover(_ref2) {
     variant = _ref2.variant,
     _ref2$enableSelectAll = _ref2.enableSelectAll,
     enableSelectAll = _ref2$enableSelectAll === void 0 ? true : _ref2$enableSelectAll,
+    _ref2$tabIndex = _ref2.tabIndex,
+    tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _useState = useState(direction),
     _useState2 = _slicedToArray(_useState, 2),
     inViewDirection = _useState2[0],
     setInViewDirection = _useState2[1];
+  var _useIsVisible = useIsVisible(),
+    _useIsVisible2 = _slicedToArray(_useIsVisible, 2),
+    isActive = _useIsVisible2[0],
+    tooltip = _useIsVisible2[1];
+  var toolTipId = useId();
   var _useKeepInView = useKeepInView({
       direction: direction,
       callback: setInViewDirection
@@ -91,6 +99,13 @@ export default function Popover(_ref2) {
     _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
     ref = _useKeepInView2[0],
     setIsShown = _useKeepInView2[1];
+  var ariaLabel = useMemo(function () {
+    if (props.ariaLabel) {
+      return props.ariaLabel;
+    } else if (typeof text === "string") {
+      return text;
+    }
+  }, [props.ariaLabel, text]);
   var component = /*#__PURE__*/React.createElement(Container, _extends({
     inlineBlock: inlineBlock
   }, props, {
@@ -100,19 +115,27 @@ export default function Popover(_ref2) {
     onMouseLeave: function onMouseLeave() {
       return setIsShown(false);
     }
-  }), !!text && /*#__PURE__*/React.createElement(Text, {
+  }), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
+    tabIndex: tabIndex,
+    "aria-label": ariaLabel,
+    "aria-expanded": "".concat(isActive),
+    "aria-describedby": toolTipId
+  }, /*#__PURE__*/React.createElement(Icon, {
+    transform: "grow-4",
+    icon: ["fas", "question-circle"]
+  })), !!text && /*#__PURE__*/React.createElement(Text, {
     ref: ref,
+    role: "list",
     className: "popoverText",
     textAlign: textAlign,
     direction: inViewDirection,
     width: width,
     enableSelectAll: enableSelectAll
-  }, text), variant === "tooltip" && /*#__PURE__*/React.createElement(TooltipControl, {
-    tabIndex: "0"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    transform: "grow-4",
-    icon: ["fas", "question-circle"]
-  })), children);
+  }, /*#__PURE__*/React.createElement("span", {
+    id: toolTipId,
+    role: "listitem",
+    ref: tooltip
+  }, text)), children);
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -135,7 +158,11 @@ Popover.propTypes = {
   /** Specifies the system design theme. */
   theme: PropTypes.object,
   /** Specifies whether enable select all behaviour */
-  enableSelectAll: PropTypes.bool
+  enableSelectAll: PropTypes.bool,
+  /** Provide an aria-label if text is not a string */
+  ariaLabel: PropTypes.string,
+  /** Provide a tab index for accessibilty, defaults to 0 */
+  tabIndex: PropTypes.number
 };
 Popover.__docgenInfo = {
   "description": "This popover component is intended to be used to supplement buttons (or other elements) that require some helper text. It supports customisation of direction and width. This is so that you can ensure that the popover doesn't run off the screen, and that the width suits the amount of text in the popover.\n\nIf you don't specify a width, 200px is the default, but as a general guide try and keep widths somewhere between 150-250 if you are modifying. Make sure if setting width you include the unit you want it to use, e.g. pixels, %.",
@@ -153,6 +180,17 @@ Popover.__docgenInfo = {
       "required": false,
       "description": "Specifies whether enable select all behaviour"
     },
+    "tabIndex": {
+      "defaultValue": {
+        "value": "0",
+        "computed": false
+      },
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "Provide a tab index for accessibilty, defaults to 0"
+    },
     "children": {
       "type": {
         "name": "element"
@@ -224,6 +262,13 @@ Popover.__docgenInfo = {
       },
       "required": false,
       "description": "Specifies the system design theme."
+    },
+    "ariaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Provide an aria-label if text is not a string"
     }
   }
 };

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/components/TextInput/index.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _excluded = ["numberProps"];
 import React, { useMemo } from "react";
-import NumberFormat from "react-number-format";
+import { NumericFormat } from "react-number-format";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { space, layout, compose } from "styled-system";
@@ -82,7 +82,7 @@ var Input = styled("input").attrs(function (props) {
   displayName: "TextInput__Input",
   componentId: "shde0o-1"
 })(["", ""], InputStyle);
-var NumberInput = styled(NumberFormat).attrs(function (props) {
+var NumberInput = styled(NumericFormat).attrs(function (props) {
   return {
     "data-testid": props["data-testid"] ? props["data-testid"] : null
   };

package/es/hooks/isVisible.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useRef, useState } from "react";
+export default function useIsVisible() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var ref = useRef();
+  useEffect(function () {
+    if (!ref.current) return;
+    var interval = window.setInterval(function () {
+      var currentIsVisible = window.getComputedStyle(ref.current).visibility === "visible";
+      if (isVisible !== currentIsVisible) {
+        setIsVisible(currentIsVisible);
+      }
+    }, 250);
+    return function () {
+      clearInterval(interval);
+    };
+  }, [ref, isVisible]);
+  return [isVisible, ref];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "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",
@@ -54,7 +53,7 @@
     "react-docgen": "^5.3.0",
     "react-intersection-observer": "^9.4.3",
     "react-moment-proptypes": "^1.8.1",
-    "react-number-format": "^4.4.1",
+    "react-number-format": "^5.3.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^5.7.4",
@@ -75,33 +74,33 @@
     "@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.2.1",
-    "@storybook/addon-actions": "^7.2.1",
-    "@storybook/addon-docs": "^7.2.1",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-actions": "^7.3.2",
+    "@storybook/addon-docs": "^7.3.2",
     "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/addon-mdx-gfm": "^7.2.1",
-    "@storybook/addon-storyshots": "^7.2.1",
-    "@storybook/addon-toolbars": "^7.2.1",
-    "@storybook/addon-viewport": "^7.2.1",
-    "@storybook/addons": "^7.2.1",
-    "@storybook/api": "^7.2.1",
-    "@storybook/blocks": "^7.2.1",
-    "@storybook/components": "^7.2.1",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-mdx-gfm": "^7.3.2",
+    "@storybook/addon-storyshots": "^7.3.2",
+    "@storybook/addon-toolbars": "^7.3.2",
+    "@storybook/addon-viewport": "^7.3.2",
+    "@storybook/addons": "^7.3.2",
+    "@storybook/api": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/components": "^7.3.2",
+    "@storybook/core-events": "^7.3.2",
+    "@storybook/manager-api": "^7.3.2",
     "@storybook/mdx1-csf": "^1.0.0",
-    "@storybook/preset-create-react-app": "^7.2.1",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
-    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/preset-create-react-app": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/storybook-deployer": "2.8.16",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@types/jest": "^26.0.19",
     "@types/styled-components": "^5.1.7",
     "audit-ci": "^6.1.2",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^8.2.5",
+    "babel-eslint": "^10.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-react-docgen": "^4.1.0",
     "babel-plugin-styled-components": "^1.10.7",
@@ -120,11 +119,11 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "npm-run-all": "^4.1.5",
-    "playroom": "^0.27.7",
+    "playroom": "^0.32.1",
     "prettier": "^2.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.2.1",
+    "storybook": "^7.3.2",
     "style-loader": "^2.0.0",
     "styled-components": "^5.2.1",
     "webpack": "^5.88.2",
@@ -135,6 +134,12 @@
     "react-dom": "^18.2.0",
     "styled-components": "^5.2.1"
   },
+  "overrides": {
+    "nth-check": "2.1.0",
+    "parse-url": "8.1.0",
+    "react-scripts": "5.0.1",
+    "remark-parse": "10.0.2"
+  },
   "browserslist": {
     "development": [
       "last 2 chrome versions",