@digigov/ui 0.12.2 → 0.13.0

package/es/core/NavList/NavListItemBase.js

@@ -0,0 +1,133 @@
+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"];
+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 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,
+      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,
+      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
+  }, /*#__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), /*#__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));
+});
+export default NavListItemBase;

package/es/core/NavList/NavListSubMenu.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["links"];
+import React, { useContext } from 'react';
+import { NavListBase } from '@digigov/ui/core/NavList';
+import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import NavListContext from '@digigov/ui/core/NavList/NavListContext';
+export var NavListSubMenu = function NavListSubMenu(_ref) {
+  var links = _ref.links,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(NavListContext),
+      horizontal = _useContext.horizontal;
+
+  return /*#__PURE__*/React.createElement(NavListBase, _extends({
+    subMenu: true,
+    floating: horizontal
+  }, props), links && links.map(function (subMenuLink, key) {
+    return /*#__PURE__*/React.createElement(NavListItemBase, {
+      expandOn: "hover",
+      key: key,
+      href: subMenuLink.href,
+      label: subMenuLink.label
+    });
+  }));
+};
+export default NavListSubMenu;

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

@@ -0,0 +1,334 @@
+// 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>
+`;

package/es/core/NavList/index.js

@@ -0,0 +1,5 @@
+export { NavList as default } from '@digigov/ui/core/NavList/NavList';
+export * from '@digigov/ui/core/NavList/NavList';
+export * from '@digigov/ui/core/NavList/NavListItem';
+export * from '@digigov/ui/core/NavList/NavListSubMenu';
+export * from '@digigov/ui/core/NavList/NavListContext';

package/es/core/NavList/index.mdx

@@ -0,0 +1,185 @@
+---
+title: NavList
+parent: docs/ui/components
+---
+
+import NavList, {
+  NavListProvider,
+  NavListItem,
+  NavListSubMenu,
+} from '@digigov/ui/core/NavList';
+import PropsDoc from '@docs-components/propsDoc';
+
+## Examples
+
+### Vertical
+
+```jsx live path=core/NavList
+() => {
+  return (
+    <NavList>
+      <NavListItem href="/">Home</NavListItem>
+      <NavListItem href="/docs/ui/api/core/NavList/">
+        NavList Example
+      </NavListItem>
+      <NavListItem href="/docs/ui/">Contact</NavListItem>
+    </NavList>
+  );
+};
+```
+
+<br />
+
+### Horizontal
+
+```jsx live path=core/NavList
+() => {
+  return (
+    <NavList horizontal>
+      <NavListItem href="/">Home</NavListItem>
+      <NavListItem href="/docs/ui/api/core/NavList/">
+        NavList Example
+      </NavListItem>
+      <NavListItem href="/docs/ui/">Contact</NavListItem>
+    </NavList>
+  );
+};
+```
+
+<br />
+<br />
+
+## Examples using React Context
+
+### Horizontal
+
+```jsx live path=core/NavList
+() => {
+  const links = [
+    { name: 'index', href: '/docs/ui/api/core/NavList', label: 'Αρχική' },
+    {
+      name: 'epathla',
+      href: '/docs/ui',
+      label: 'Η υπηρεσία',
+      subMenu: [
+        {
+          name: 'epathla/skopos',
+          href: '/docs/ui',
+          label: 'Γραφείο Προϊσταμένης',
+        },
+        {
+          name: 'epathla/domi',
+          href: '/docs/ui',
+          label: 'Μητρώο',
+        },
+        {
+          name: 'epathla/omades-ergasias',
+          href: '/docs/ui',
+          label: 'Ταμείο',
+        },
+      ],
+    },
+  ];
+  return (
+    <NavList horizontal links={links}>
+      {links.map((link, key) => (
+        <NavListItem key={key} name={link.name} />
+      ))}
+    </NavList>
+  );
+};
+```
+
+<br />
+
+### Vertical
+
+```jsx live path=core/NavList
+() => {
+  const links = [
+    { name: 'home', href: '/docs/ui/api/core/NavList', label: 'Αρχική' },
+    {
+      name: 'docs',
+      href: '/docs/ui',
+      label: 'Η υπηρεσία',
+      subMenu: [
+        { href: '/docs/ui', label: 'Γραφείο Προϊσταμένης' },
+        { href: '/docs/ui', label: 'Μητρώο' },
+        { href: '/docs/ui', label: 'Ταμείο' },
+      ],
+    },
+    { name: 'contact', href: '/docs/ui', label: 'Επικοινωνία' },
+  ];
+  return (
+    <NavList vertical links={links}>
+      {links.map((link, key) => (
+        <NavListItem key={key} name={link.name} />
+      ))}
+    </NavList>
+  );
+};
+```
+
+<br />
+
+### Vertical with open submenus
+
+```jsx live path=core/NavList
+() => {
+  const links = [
+    { name: 'index', href: '/docs/ui/api/core/NavList', label: 'Αρχική' },
+    {
+      name: 'epathla',
+      href: '/docs/ui',
+      label: 'Η υπηρεσία',
+      subMenu: [
+        {
+          name: 'epathla/office',
+          href: '/docs/ui',
+          label: 'Γραφείο Προϊσταμένης',
+        },
+        {
+          name: 'epathla/office',
+          href: '/docs/ui',
+          label: 'Μητρώο',
+        },
+        {
+          name: 'epathla/office',
+          href: '/docs/ui',
+          label: 'Αρχική',
+        },
+        {
+          name: 'epathla/office',
+          href: '/docs/ui',
+          label: 'Ταμείο',
+        },
+      ],
+    },
+    { name: 'epathla/office', href: '/docs/ui', label: 'Επικοινωνία' },
+  ];
+  return (
+    <NavList openSubMenus vertical links={links}>
+      {links.map((link, key) => (
+        <NavListItem key={key} name={link.name} />
+      ))}
+    </NavList>
+  );
+};
+```
+
+<br />
+
+## API
+
+### Properties
+
+<PropsDoc data={NavList.__doc__} />
+<br />
+
+<PropsDoc data={NavListProvider.__doc__} />
+<br />
+
+<PropsDoc data={NavListItem.__doc__} />
+<br />
+
+<PropsDoc data={NavListSubMenu.__doc__} />

package/es/core/NavList/index.spec.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
+import Component from '@digigov/ui/core/NavList';
+
+var _ref = /*#__PURE__*/React.createElement(Component, null, "this is some random warning text");
+
+it('renders the ErrorSummary with sample data', function () {
+  expect(mountWithTheme(_ref)).toMatchSnapshot();
+});