@digigov/ui 0.30.0-navlist.alpha.2 → 0.30.0

package/esm/core/NavList/NavListItemAuto.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["item", "children", "role"];
+import React, { useContext } from 'react';
+import Divider from '@digigov/react-core/SectionBreak';
+import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
+import NavListContext from '@digigov/ui/core/NavList/NavListContext';
+
+var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
+
+export var NavListItemAuto = function NavListItemAuto(_ref) {
+  var item = _ref.item,
+      children = _ref.children,
+      role = _ref.role,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(NavListContext),
+      layout = _useContext.layout,
+      showDividers = _useContext.showDividers,
+      links = _useContext.links,
+      container = _useContext.container,
+      setRegister = _useContext.setRegister;
+
+  var _ref2 = links.find(function (link) {
+    return link.name === item.name;
+  }) || {},
+      subMenu = _ref2.subMenu;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListItemBase, _extends({
+    container: container,
+    setRegister: setRegister,
+    item: item,
+    layout: layout,
+    role: role
+  }, props), subMenu && (subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) > 0 && /*#__PURE__*/React.createElement(NavListSubMenu, {
+    links: subMenu
+  })), showDividers && _ref3);
+};
+export default NavListItemAuto;

package/esm/core/NavList/NavListItemBase.js

@@ -1,137 +1,49 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick", "role"];
-import React, { useState, useEffect } from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-import ExpandMore from '@material-ui/icons/ExpandMore';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["container", "setRegister", "children", "item", "layout", "role"];
+import React from 'react';
 import Link from '@digigov/ui/core/Link';
-import { useRouter } from '@digigov/ui/router';
-var TRAILING_SLASH = /\/$/gm;
-export var useNavListItemBaseStyles = makeStyles(function (theme) {
-  var transition = {
-    duration: theme.transitions.duration.shortest
-  };
-  return {
-    root: _extends({
-      position: 'relative',
-      listStyle: 'none',
-      boxSizing: 'border-box',
-      textAlign: 'left',
-      margin: theme.spacing(0)
-    }, theme.typography.body1, {
-      '&$horizontal': {
-        flexDirection: 'column'
-      }
-    }),
-    link: {
-      display: 'flex',
-      flexGrow: 1,
-      padding: theme.spacing(1),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    selected: {
-      fontWeight: 'bolder',
-      '&$horizontal': {
-        borderStyle: 'solid',
-        borderColor: theme.palette.secondary.main,
-        borderTop: 0,
-        borderLeft: 0,
-        borderRight: 0
-      },
-      '&$vertical': {
-        border: 0
-      }
-    },
-    // Pseudoclasses - do not remove //
-    horizontal: {},
-    vertical: {},
-    // End Pseudoclasses //
-    label: {
-      display: 'flex',
-      alignItems: 'center',
-      flex: 'auto'
-    },
-    icon: {
-      display: 'flex',
-      alignItems: 'center',
-      transform: 'rotate(0deg)',
-      transition: theme.transitions.create('transform', transition),
-      '&$open': {
-        transform: 'rotate(180deg)'
-      }
-    },
-    submenu: {
-      display: 'flex'
-    },
-
-    /* Pseudo-class applied to the Expand icon if `open={true}`. */
-    open: {}
-  };
-}, {
-  name: 'MuiNavListItemBase'
-});
-
-var _ref2 = /*#__PURE__*/React.createElement(ExpandMore, null);
-
-export var NavListItemBase = /*#__PURE__*/React.forwardRef(function NavListItemBase(_ref, ref) {
-  var _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '#' : _ref$href,
-      label = _ref.label,
+import { isNavListItemLinkInterface } from '@digigov/ui/core/NavList/types';
+import NavListItem from '@digigov/ui/core/NavList/NavListItem';
+import NavMenu from '@digigov/ui/core/NavList/NavMenu';
+import NavMenuContainer from '@digigov/ui/core/NavList/NavMenuContainer';
+import NavMenuContainerTitle from '@digigov/ui/core/NavList/NavMenuContainerTitle';
+import NavMenuContainerContent from '@digigov/ui/core/NavList/NavMenuContainerContent';
+import NavMenuContainerContentList from '@digigov/ui/core/NavList/NavMenuContainerContentList';
+import NavMenuContainerContentListItem from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
+export var NavListItemBase = function NavListItemBase(_ref) {
+  var _item$subMenu;
+
+  var container = _ref.container,
+      setRegister = _ref.setRegister,
       children = _ref.children,
-      className = _ref.className,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
-      _ref$horizontal = _ref.horizontal,
-      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
-      _ref$selected = _ref.selected,
-      selected = _ref$selected === void 0 ? false : _ref$selected,
-      isNested = _ref.isNested,
-      expandOn = _ref.expandOn,
-      onClick = _ref.onClick,
+      item = _ref.item,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = useNavListItemBaseStyles();
-
-  var _useState = useState(selected),
-      _useState2 = _slicedToArray(_useState, 2),
-      privateSelected = _useState2[0],
-      setPrivateSelected = _useState2[1];
-
-  var _useRouter = useRouter(),
-      router = _useRouter.router;
-
-  useEffect(function () {
-    var asPath = router === null || router === void 0 ? void 0 : router.asPath.split('?').shift();
-    var isSelected = (asPath === null || asPath === void 0 ? void 0 : asPath.replace(TRAILING_SLASH, '')) === href.replace(TRAILING_SLASH, '');
-
-    if (isSelected !== privateSelected) {
-      setPrivateSelected(isSelected);
-    }
-  }, [href, router === null || router === void 0 ? void 0 : router.asPath, selected, privateSelected]);
-  return /*#__PURE__*/React.createElement("li", {
-    ref: ref,
-    className: clsx(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick,
-    role: "none"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: clsx(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
-  }, /*#__PURE__*/React.createElement(Link, _extends({
-    href: href,
-    className: classes.link
-  }, props, {
-    role: role
-  }), /*#__PURE__*/React.createElement("span", {
-    className: classes.label
-  }, label), /*#__PURE__*/React.createElement("span", {
-    className: clsx(classes.icon, open && classes.open)
-  }, isNested && _ref2))), /*#__PURE__*/React.createElement("div", {
-    className: classes.submenu
-  }, children));
-});
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListItem, _extends({
+    layout: layout,
+    link: item,
+    setRegister: setRegister,
+    role: "menuitem"
+  }, props)), /*#__PURE__*/React.createElement(NavMenu, _extends({
+    layout: layout
+  }, container && container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+    layout: layout,
+    paddingLeft: 5,
+    paddingRight: 5
+  }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
+    layout: layout
+  }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+    layout: layout
+  }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+    return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+      key: menuIndex
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: subMenu.href
+    }, subMenu.label));
+  }))))));
+};
 export default NavListItemBase;

package/esm/core/NavList/NavListItemButton.js

@@ -0,0 +1,3 @@
+import NavListItemButton from '@digigov/react-core/NavListItemButton';
+export * from '@digigov/react-core/NavListItemButton';
+export default NavListItemButton;

package/esm/core/NavList/NavListItemLink.js

@@ -0,0 +1,3 @@
+import NavListItemLink from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemLink';
+export default NavListItemLink;

package/esm/core/NavList/NavListSubMenu.js

@@ -10,17 +10,15 @@ export var NavListSubMenu = function NavListSubMenu(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = useContext(NavListContext),
-      horizontal = _useContext.horizontal;
+      layout = _useContext.layout;
 
   return /*#__PURE__*/React.createElement(NavListBase, _extends({
     subMenu: true,
-    floating: horizontal
+    floating: layout === 'horizontal'
   }, props), links && links.map(function (subMenuLink, key) {
     return /*#__PURE__*/React.createElement(NavListItemBase, {
-      expandOn: "hover",
       key: key,
-      href: subMenuLink.href,
-      label: subMenuLink.label
+      item: subMenuLink
     });
   }));
 };

package/esm/core/NavList/NavMenu.js

@@ -1,3 +1,3 @@
 import NavMenu from '@digigov/react-core/NavMenu';
-export { NavMenu };
+export * from '@digigov/react-core/NavMenu';
 export default NavMenu;

package/esm/core/NavList/NavMenuContainer.js

@@ -1,3 +1,3 @@
 import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
-export { NavMenuContainer };
+export * from '@digigov/react-core/NavMenuContainer';
 export default NavMenuContainer;

package/esm/core/NavList/NavMenuContainerContent.js

@@ -1,3 +1,3 @@
 import NavMenuContainerContent from '@digigov/react-core/NavMenuContainerContent';
-export { NavMenuContainerContent };
+export * from '@digigov/react-core/NavMenuContainerContent';
 export default NavMenuContainerContent;

package/esm/core/NavList/NavMenuContainerContentList.js

@@ -1,3 +1,3 @@
 import NavMenuContainerContentList from '@digigov/react-core/NavMenuContainerContentList';
-export { NavMenuContainerContentList };
+export * from '@digigov/react-core/NavMenuContainerContentList';
 export default NavMenuContainerContentList;

package/esm/core/NavList/NavMenuContainerContentListItem.js

@@ -1,3 +1,3 @@
 import NavMenuContainerContentListItem from '@digigov/react-core/NavMenuContainerContentListItem';
-export { NavMenuContainerContentListItem };
+export * from '@digigov/react-core/NavMenuContainerContentListItem';
 export default NavMenuContainerContentListItem;

package/esm/core/NavList/NavMenuContainerTitle.js

@@ -1,3 +1,3 @@
 import NavMenuContainerTitle from '@digigov/react-core/NavMenuContainerTitle';
-export { NavMenuContainerTitle };
+export * from '@digigov/react-core/NavMenuContainerTitle';
 export default NavMenuContainerTitle;

package/esm/core/NavList/NavVertical.js

@@ -1,3 +1,3 @@
 import NavVertical from '@digigov/react-core/NavVertical';
-export { NavVertical };
+export * from '@digigov/react-core/NavVertical';
 export default NavVertical;

package/esm/core/NavList/NavVerticalItem.js

@@ -1,3 +1,3 @@
 import NavVerticalItem from '@digigov/react-core/NavVerticalItem';
-export { NavVerticalItem };
+export * from '@digigov/react-core/NavVerticalItem';
 export default NavVerticalItem;

package/esm/core/NavList/__snapshots__/index.spec.tsx.snap

@@ -1,334 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ThemeProvider
-  theme={
-    Object {
-      "breakpoints": Object {
-        "between": [Function],
-        "down": [Function],
-        "keys": Array [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-          "xl",
-        ],
-        "only": [Function],
-        "up": [Function],
-        "values": Object {
-          "lg": 1280,
-          "md": 960,
-          "sm": 600,
-          "xl": 1920,
-          "xs": 0,
-        },
-        "width": [Function],
-      },
-      "direction": "ltr",
-      "footer": Object {
-        "contrastText": "",
-        "link": "",
-        "main": "",
-      },
-      "header": Object {
-        "border": Object {
-          "background": "",
-          "height": "",
-          "width": "",
-        },
-        "height": "",
-        "logo": Object {
-          "component": "",
-          "height": "",
-        },
-      },
-      "mixins": Object {
-        "gutters": [Function],
-        "toolbar": Object {
-          "@media (min-width:0px) and (orientation: landscape)": Object {
-            "minHeight": 48,
-          },
-          "@media (min-width:600px)": Object {
-            "minHeight": 64,
-          },
-          "minHeight": 56,
-        },
-      },
-      "overrides": Object {},
-      "palette": Object {
-        "action": Object {
-          "activatedOpacity": 0.12,
-          "active": "rgba(0, 0, 0, 0.54)",
-          "disabled": "rgba(0, 0, 0, 0.26)",
-          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-          "disabledOpacity": 0.38,
-          "focus": "rgba(0, 0, 0, 0.12)",
-          "focusOpacity": 0.12,
-          "hover": "rgba(0, 0, 0, 0.04)",
-          "hoverOpacity": 0.04,
-          "selected": "rgba(0, 0, 0, 0.08)",
-          "selectedOpacity": 0.08,
-        },
-        "augmentColor": [Function],
-        "background": Object {
-          "default": "#fafafa",
-          "paper": "#fff",
-        },
-        "common": Object {
-          "black": "#000",
-          "white": "#fff",
-        },
-        "contrastThreshold": 3,
-        "divider": "rgba(0, 0, 0, 0.12)",
-        "error": Object {
-          "contrastText": "#fff",
-          "dark": "#d32f2f",
-          "light": "#e57373",
-          "main": "#f44336",
-        },
-        "getContrastText": [Function],
-        "grey": Object {
-          "100": "#f5f5f5",
-          "200": "#eeeeee",
-          "300": "#e0e0e0",
-          "400": "#bdbdbd",
-          "50": "#fafafa",
-          "500": "#9e9e9e",
-          "600": "#757575",
-          "700": "#616161",
-          "800": "#424242",
-          "900": "#212121",
-          "A100": "#d5d5d5",
-          "A200": "#aaaaaa",
-          "A400": "#303030",
-          "A700": "#616161",
-        },
-        "info": Object {
-          "contrastText": "#fff",
-          "dark": "#1976d2",
-          "light": "#64b5f6",
-          "main": "#2196f3",
-        },
-        "primary": Object {
-          "contrastText": "#fff",
-          "dark": "#303f9f",
-          "light": "#7986cb",
-          "main": "#3f51b5",
-        },
-        "secondary": Object {
-          "contrastText": "#fff",
-          "dark": "#c51162",
-          "light": "#ff4081",
-          "main": "#f50057",
-        },
-        "success": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#388e3c",
-          "light": "#81c784",
-          "main": "#4caf50",
-        },
-        "text": Object {
-          "disabled": "rgba(0, 0, 0, 0.38)",
-          "hint": "rgba(0, 0, 0, 0.38)",
-          "primary": "rgba(0, 0, 0, 0.87)",
-          "secondary": "rgba(0, 0, 0, 0.54)",
-        },
-        "tonalOffset": 0.2,
-        "type": "light",
-        "warning": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#f57c00",
-          "light": "#ffb74d",
-          "main": "#ff9800",
-        },
-      },
-      "props": Object {},
-      "shadows": Array [
-        "none",
-        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-      ],
-      "shape": Object {
-        "borderRadius": 4,
-      },
-      "spacing": [Function],
-      "transitions": Object {
-        "create": [Function],
-        "duration": Object {
-          "complex": 375,
-          "enteringScreen": 225,
-          "leavingScreen": 195,
-          "short": 250,
-          "shorter": 200,
-          "shortest": 150,
-          "standard": 300,
-        },
-        "easing": Object {
-          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-        },
-        "getAutoHeightDuration": [Function],
-      },
-      "typography": Object {
-        "body1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.5,
-        },
-        "body2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.01071em",
-          "lineHeight": 1.43,
-        },
-        "button": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.02857em",
-          "lineHeight": 1.75,
-          "textTransform": "uppercase",
-        },
-        "caption": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.03333em",
-          "lineHeight": 1.66,
-        },
-        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-        "fontSize": 14,
-        "fontWeightBold": 700,
-        "fontWeightLight": 300,
-        "fontWeightMedium": 500,
-        "fontWeightRegular": 400,
-        "h1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "6rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.01562em",
-          "lineHeight": 1.167,
-        },
-        "h2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3.75rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.00833em",
-          "lineHeight": 1.2,
-        },
-        "h3": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.167,
-        },
-        "h4": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "2.125rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00735em",
-          "lineHeight": 1.235,
-        },
-        "h5": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.5rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.334,
-        },
-        "h6": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.25rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.0075em",
-          "lineHeight": 1.6,
-        },
-        "htmlFontSize": 16,
-        "overline": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.08333em",
-          "lineHeight": 2.66,
-          "textTransform": "uppercase",
-        },
-        "pxToRem": [Function],
-        "round": [Function],
-        "subtitle1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.75,
-        },
-        "subtitle2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.00714em",
-          "lineHeight": 1.57,
-        },
-      },
-      "zIndex": Object {
-        "appBar": 1100,
-        "drawer": 1200,
-        "mobileStepper": 1000,
-        "modal": 1300,
-        "snackbar": 1400,
-        "speedDial": 1050,
-        "tooltip": 1500,
-      },
-      Symbol(mui.nested): false,
-    }
-  }
->
-  <NavList>
-    <NavListProvider
-      links={Array []}
-      openSubMenus={false}
-    >
-      <NavListBase>
-        <nav>
-          <ul
-            className="MuiNavList-root MuiNavList-vertical"
-          >
-            this is some random warning text
-          </ul>
-          <div
-            className="MuiNavList-floatClear"
-          />
-        </nav>
-      </NavListBase>
-    </NavListProvider>
-  </NavList>
-</ThemeProvider>
+<ForwardRef(NavList)>
+  this is some random warning text
+</ForwardRef(NavList)>
 `;