@digigov/ui 0.28.2 → 0.28.3

package/core/NavList/NavListItem.js

@@ -0,0 +1,173 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavListItemStyles = exports["default"] = exports.NavListItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _SectionBreak = _interopRequireDefault(require("@digigov/react-core/SectionBreak"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
+
+var _NavListSubMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListSubMenu"));
+
+var _NavListContext = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListContext"));
+
+var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useNavListItemStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {},
+    link: {
+      padding: theme.spacing(0.5, 2),
+      textDecoration: 'none',
+      '&:hover': {
+        textDecoration: 'underline'
+      }
+    },
+    selected: {
+      borderStyle: 'solid',
+      borderColor: theme.palette.secondary.main,
+      fontWeight: 'bolder'
+    }
+  };
+}, {
+  name: 'MuiNavListItem'
+});
+exports.useNavListItemStyles = useNavListItemStyles;
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
+
+var NavListItem = function NavListItem(_ref) {
+  var _ref$current2, _ref$current3;
+
+  var name = _ref.name,
+      _ref$expandOn = _ref.expandOn,
+      expandOn = _ref$expandOn === void 0 ? 'click' : _ref$expandOn,
+      children = _ref.children,
+      href = _ref.href,
+      className = _ref.className,
+      passSelected = _ref.selected,
+      role = _ref.role,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)({}),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      style = _useState4[0],
+      setStyle = _useState4[1];
+
+  var ref = (0, _react.useRef)(null);
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      delayHandler = _useState6[0],
+      setDelayHandler = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(passSelected || false),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selected = _useState8[0],
+      setSelected = _useState8[1];
+
+  var classes = useNavListItemStyles();
+
+  var _useContext = (0, _react.useContext)(_NavListContext["default"]),
+      openSubMenus = _useContext.openSubMenus,
+      horizontal = _useContext.horizontal,
+      showDividers = _useContext.showDividers,
+      activeLink = _useContext.activeLink,
+      links = _useContext.links;
+
+  var _ref2 = links.find(function (link) {
+    return link.name === name;
+  }) || {},
+      contextHref = _ref2.href,
+      label = _ref2.label,
+      subMenu = _ref2.subMenu;
+
+  (0, _react.useEffect)(function () {
+    if (activeLink !== null && activeLink !== void 0 && activeLink.name && name) {
+      setSelected(activeLink.name === name);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [activeLink === null || activeLink === void 0 ? void 0 : activeLink.name]);
+
+  var toggleOpen = function toggleOpen() {
+    setOpen(!open);
+  };
+
+  var handleOpen = function handleOpen() {
+    if (subMenu && subMenu.length) {
+      setDelayHandler(setTimeout(function () {
+        setOpen(true);
+      }, 300));
+    }
+  };
+
+  var handleClose = function handleClose() {
+    if (subMenu && subMenu.length) {
+      if (delayHandler) clearTimeout(delayHandler);
+      setOpen(false);
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    var _ref$current;
+
+    if (ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.clientWidth && horizontal && ref.current.clientWidth !== style.width) {
+      setStyle({
+        top: ref.current.clientHeight - 12,
+        width: ref.current.clientWidth
+      });
+    }
+  }, [horizontal, style.width, (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.clientWidth, (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.clientHeight]);
+  var handlerProps = expandOn === 'hover' ? {
+    onMouseEnter: handleOpen,
+    onMouseLeave: handleClose
+  } : {
+    onClick: toggleOpen
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavListItemBase["default"], (0, _extends2["default"])({
+    ref: ref,
+    href: contextHref || href,
+    label: label || children,
+    expandOn: expandOn,
+    open: open,
+    selected: selected,
+    isNested: subMenu && subMenu.length > 0,
+    horizontal: horizontal,
+    role: role,
+    className: (0, _clsx["default"])(className, classes.root)
+  }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/_react["default"].createElement(_NavListSubMenu["default"], {
+    style: style,
+    links: subMenu
+  })), !horizontal && showDividers && _ref3);
+};
+
+exports.NavListItem = NavListItem;
+var _default = NavListItem;
+exports["default"] = _default;

package/core/NavList/NavListItemBase.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare const useNavListItemBaseStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "open" | "selected" | "horizontal" | "vertical" | "root" | "icon" | "submenu">;
+export interface NavListItemBaseProps {
+    children?: React.ReactNode;
+    href?: string;
+    label?: React.ReactNode;
+    className?: string;
+    expandOn?: 'hover' | 'click';
+    selected?: boolean;
+    isNested?: boolean;
+    horizontal?: boolean;
+    open?: boolean;
+    onClick?: (e: any) => void;
+    role?: string;
+}
+export declare const NavListItemBase: React.ForwardRefExoticComponent<NavListItemBaseProps & React.RefAttributes<HTMLLIElement>>;
+export default NavListItemBase;

package/core/NavList/NavListItemBase.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavListItemBaseStyles = exports["default"] = exports.NavListItemBase = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
+
+var _router = require("@digigov/ui/router");
+
+var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick", "role"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TRAILING_SLASH = /\/$/gm;
+var useNavListItemBaseStyles = (0, _styles.makeStyles)(function (theme) {
+  var transition = {
+    duration: theme.transitions.duration.shortest
+  };
+  return {
+    root: (0, _extends2["default"])({
+      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'
+});
+exports.useNavListItemBaseStyles = useNavListItemBaseStyles;
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null);
+
+var NavListItemBase = /*#__PURE__*/_react["default"].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,
+      role = _ref.role,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = useNavListItemBaseStyles();
+
+  var _useState = (0, _react.useState)(selected),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      privateSelected = _useState2[0],
+      setPrivateSelected = _useState2[1];
+
+  var _useRouter = (0, _router.useRouter)(),
+      router = _useRouter.router;
+
+  (0, _react.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["default"].createElement("li", {
+    ref: ref,
+    className: (0, _clsx["default"])(className, classes.root, horizontal && classes.horizontal),
+    onClick: onClick,
+    role: "none"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _clsx["default"])(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
+  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], (0, _extends2["default"])({
+    href: href,
+    className: classes.link
+  }, props, {
+    role: role
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.label
+  }, label), /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _clsx["default"])(classes.icon, open && classes.open)
+  }, isNested && _ref2))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.submenu
+  }, children));
+});
+
+exports.NavListItemBase = NavListItemBase;
+var _default = NavListItemBase;
+exports["default"] = _default;

package/core/NavList/NavListSubMenu.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
+import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
+export interface NavListSubMenuProps extends NavListProps {
+    links: NavLinkInterface[];
+}
+export declare const NavListSubMenu: React.FC<NavListSubMenuProps>;
+export default NavListSubMenu;

package/core/NavList/NavListSubMenu.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListSubMenu = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NavListBase = require("@digigov/ui/core/NavList/NavListBase");
+
+var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
+
+var _NavListContext = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListContext"));
+
+var _excluded = ["links"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var NavListSubMenu = function NavListSubMenu(_ref) {
+  var links = _ref.links,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_NavListContext["default"]),
+      horizontal = _useContext.horizontal;
+
+  return /*#__PURE__*/_react["default"].createElement(_NavListBase.NavListBase, (0, _extends2["default"])({
+    subMenu: true,
+    floating: horizontal
+  }, props), links && links.map(function (subMenuLink, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavListItemBase["default"], {
+      expandOn: "hover",
+      key: key,
+      href: subMenuLink.href,
+      label: subMenuLink.label
+    });
+  }));
+};
+
+exports.NavListSubMenu = NavListSubMenu;
+var _default = NavListSubMenu;
+exports["default"] = _default;

package/core/NavList/NavVertical.d.ts

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

package/core/NavList/NavVertical.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NavVertical", {
+  enumerable: true,
+  get: function get() {
+    return _NavVertical["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _NavVertical = _interopRequireDefault(require("@digigov/react-core/NavVertical"));
+
+var _default = _NavVertical["default"];
+exports["default"] = _default;

package/core/NavList/NavVerticalItem.d.ts

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

package/core/NavList/NavVerticalItem.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NavVerticalItem", {
+  enumerable: true,
+  get: function get() {
+    return _NavVerticalItem["default"];
+  }
+});
+exports["default"] = void 0;
+
+var _NavVerticalItem = _interopRequireDefault(require("@digigov/react-core/NavVerticalItem"));
+
+var _default = _NavVerticalItem["default"];
+exports["default"] = _default;

package/core/NavList/__stories__/Default.d.ts

@@ -0,0 +1,2 @@
+export declare const Default: () => JSX.Element;
+export default Default;

package/core/NavList/__stories__/Default.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }, {
+    name: 'Nav2.4',
+    href: '#',
+    label: 'Nav list item 2.4'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+    links: links,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
+      key: key,
+      name: link.name,
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false'
+    });
+  })));
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/core/NavList/__stories__/NavHorizontalLayout.d.ts

@@ -0,0 +1,2 @@
+export declare const NavHorizontalLayout: () => JSX.Element;
+export default NavHorizontalLayout;

package/core/NavList/__stories__/NavHorizontalLayout.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavHorizontalLayout = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+
+var NavHorizontalLayout = function NavHorizontalLayout() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+    horizontal: true,
+    links: links,
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false',
+      key: key,
+      name: link.name
+    });
+  })));
+};
+
+exports.NavHorizontalLayout = NavHorizontalLayout;
+var _default = NavHorizontalLayout;
+exports["default"] = _default;

package/core/NavList/index.d.ts

@@ -0,0 +1,12 @@
+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';
+export * from '@digigov/ui/core/NavList/NavHorizontal';
+export * from '@digigov/ui/core/NavList/NavHorizontalList';
+export * from '@digigov/ui/core/NavList/NavHorizontalListItem';
+export * from '@digigov/ui/core/NavList/NavVertical';
+export * from '@digigov/ui/core/NavList/NavVerticalItem';
+export * from '@digigov/ui/core/NavList/types';
+import NavList from '@digigov/ui/core/NavList/NavList';
+export default NavList;