@digigov/ui 0.21.2 → 0.23.0

package/core/Link/__stories__/NoUnderline.js

@@ -12,9 +12,11 @@ var _react = _interopRequireDefault(require("react"));
 var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#",
   underline: false
-}, " govgr link ");
+}, "govgr link");
 
 var NoUnderline = function NoUnderline() {
   return _ref;

package/core/Link/link.mdx

@@ -0,0 +1,34 @@
+---
+id: link
+title: Link
+---
+
+```bash
+import Link from '@digigov/ui/core/Link';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="core/Link" story="Default.tsx" />
+
+### No Underline
+
+<Story packageName="@digigov/ui" component="core/Link" story="NoUnderline.tsx" />
+
+### Opens in a new tab
+
+<Story packageName="@digigov/ui" component="core/Link" story="OpensInNewTab.tsx" />
+
+### At dark background
+
+<Story packageName="@digigov/ui" component="core/Link" story="DarkBackground.tsx" />
+
+### At dark background and no underline
+
+<Story packageName="@digigov/ui" component="core/Link" story="DarkBackgroundNoUnderline.tsx" />
+
+You can read more about the accessibility patterns used in our Link
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.

package/core/List/index.mdx

@@ -1,8 +1,27 @@
 ---
+id: list
 title: List
-parent: docs/ui/components
 ---
 
-import List, { ListItem } from '@digigov/ui/core/List';
 
-## Examples
+```bash
+import List from '@digigov/ui/core/List';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="core/List" story="Default.tsx" />
+
+### List with bullets
+
+<Story packageName="@digigov/ui" component="core/List" story="BulletList.tsx" />
+
+### List with numbers
+
+<Story packageName="@digigov/ui" component="core/List" story="NumberedList.tsx" />
+
+### List with extra space
+
+<Story packageName="@digigov/ui" component="core/List" story="WithExtraSpace.tsx" />

package/core/Masthead/masthead.mdx

@@ -0,0 +1,14 @@
+---
+id: masthead
+title: Masthead
+---
+
+# Masthead
+
+```bash
+import Masthead from '@digigov/ui/core/Masthead';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/Masthead" story="Default.tsx" />

package/core/NavList/NavList.d.ts

@@ -1,17 +1,4 @@
 import React from 'react';
-import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
-export declare const useNavListStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vertical" | "root" | "subMenu" | "floating" | "floatClear">;
-export interface NavListProps {
-    children?: React.ReactNode;
-    className?: string;
-    horizontal?: boolean;
-    openSubMenus?: boolean;
-    floating?: boolean;
-    subMenu?: boolean;
-    links?: NavLinkInterface[];
-    style?: BaseCSSProperties;
-}
-export declare const NavListBase: React.FC<NavListProps>;
+import { NavListProps } from '@digigov/ui/core/NavList/types';
 export declare const NavList: React.FC<NavListProps>;
 export default NavList;

package/core/NavList/NavList.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNavListStyles = exports["default"] = exports.NavListBase = exports.NavList = void 0;
+exports["default"] = exports.NavList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,84 +13,27 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _styles = require("@material-ui/core/styles");
-
 var _NavListContext = require("@digigov/ui/core/NavList/NavListContext");
 
-var _excluded = ["className", "children", "floating", "horizontal", "subMenu"],
-    _excluded2 = ["horizontal", "openSubMenus", "links"];
-var useNavListStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(0),
-      margin: theme.spacing(0),
-      display: 'flex',
-      '&$vertical': {
-        flexDirection: 'column'
-      }
-    },
-    subMenu: {
-      marginLeft: theme.spacing(3)
-    },
-    floating: {
-      left: 0,
-      zIndex: 99,
-      position: 'absolute',
-      background: theme.palette.grey['100'],
-      borderTop: "1px solid ".concat(theme.palette.grey['500']),
-      borderRight: "1px solid ".concat(theme.palette.grey['500']),
-      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
-      margin: theme.spacing(1.5, 0, 0, 0),
-      boxShadow: theme.shadows[3],
-      '& > li': {
-        width: '100%',
-        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
-        margin: 0
-      }
-    },
-    vertical: {},
-    floatClear: {
-      clear: 'both'
-    }
-  };
-}, {
-  name: 'MuiNavList'
-});
-exports.useNavListStyles = useNavListStyles;
-
-var NavListBase = function NavListBase(_ref) {
-  var className = _ref.className,
-      children = _ref.children,
-      floating = _ref.floating,
-      horizontal = _ref.horizontal,
-      subMenu = _ref.subMenu,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useNavListStyles();
-  return /*#__PURE__*/_react["default"].createElement("nav", null, /*#__PURE__*/_react["default"].createElement("ul", {
-    style: props.style,
-    className: (0, _clsx["default"])(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
-  }, children), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.floatClear
-  }));
-};
+var _NavListBase = require("@digigov/ui/core/NavList/NavListBase");
 
-exports.NavListBase = NavListBase;
+var _excluded = ["horizontal", "openSubMenus", "links", "role"];
 
-var NavList = function NavList(_ref2) {
-  var horizontal = _ref2.horizontal,
-      _ref2$openSubMenus = _ref2.openSubMenus,
-      openSubMenus = _ref2$openSubMenus === void 0 ? false : _ref2$openSubMenus,
-      _ref2$links = _ref2.links,
-      links = _ref2$links === void 0 ? [] : _ref2$links,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+var NavList = function NavList(_ref) {
+  var horizontal = _ref.horizontal,
+      _ref$openSubMenus = _ref.openSubMenus,
+      openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
+      _ref$links = _ref.links,
+      links = _ref$links === void 0 ? [] : _ref$links,
+      role = _ref.role,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_NavListContext.NavListProvider, {
     openSubMenus: openSubMenus,
     horizontal: horizontal,
     links: links
-  }, /*#__PURE__*/_react["default"].createElement(NavListBase, (0, _extends2["default"])({
-    horizontal: horizontal
+  }, /*#__PURE__*/_react["default"].createElement(_NavListBase.NavListBase, (0, _extends2["default"])({
+    horizontal: horizontal,
+    role: role
   }, props)));
 };
 

package/core/NavList/NavList.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export const title: string;
+    export { NavList as component };
+}
+export default _default;
+export * from "@digigov/ui/core/NavList/__stories__/Default";
+export * from "@digigov/ui/core/NavList/__stories__/NavHorizontalLayout";
+import NavList from "@digigov/ui/core/NavList";

package/core/NavList/NavList.stories.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _NavList = _interopRequireDefault(require("@digigov/ui/core/NavList"));
+
+var _Default = require("@digigov/ui/core/NavList/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+
+var _NavHorizontalLayout = require("@digigov/ui/core/NavList/__stories__/NavHorizontalLayout");
+
+Object.keys(_NavHorizontalLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavHorizontalLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavHorizontalLayout[key];
+    }
+  });
+});
+var _default = {
+  title: 'Digigov UI/core/NavList',
+  component: _NavList["default"]
+};
+exports["default"] = _default;

package/core/NavList/NavListBase.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
+export declare const useNavListStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vertical" | "root" | "subMenu" | "floating" | "floatClear">;
+export declare const NavListBase: React.FC<NavListProps>;

package/core/NavList/NavListBase.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNavListStyles = exports.NavListBase = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
+var useNavListStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      padding: theme.spacing(0),
+      margin: theme.spacing(0),
+      display: 'flex',
+      '&$vertical': {
+        flexDirection: 'column'
+      }
+    },
+    subMenu: {
+      marginLeft: theme.spacing(3)
+    },
+    floating: {
+      left: 0,
+      zIndex: 99,
+      position: 'absolute',
+      background: theme.palette.grey['100'],
+      borderTop: "1px solid ".concat(theme.palette.grey['500']),
+      borderRight: "1px solid ".concat(theme.palette.grey['500']),
+      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
+      margin: theme.spacing(1.5, 0, 0, 0),
+      boxShadow: theme.shadows[3],
+      '& > li': {
+        width: '100%',
+        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
+        margin: 0
+      }
+    },
+    vertical: {},
+    floatClear: {
+      clear: 'both'
+    }
+  };
+}, {
+  name: 'MuiNavList'
+});
+exports.useNavListStyles = useNavListStyles;
+
+var NavListBase = function NavListBase(_ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      floating = _ref.floating,
+      horizontal = _ref.horizontal,
+      subMenu = _ref.subMenu,
+      role = _ref.role,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var classes = useNavListStyles();
+  return /*#__PURE__*/_react["default"].createElement("nav", null, /*#__PURE__*/_react["default"].createElement("ul", {
+    style: props.style,
+    role: role,
+    className: (0, _clsx["default"])(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
+  }, children), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.floatClear
+  }));
+};
+
+exports.NavListBase = NavListBase;

package/core/NavList/NavListItem.d.ts

@@ -7,6 +7,7 @@ export interface NavListItemProps {
     href?: string;
     selected?: boolean;
     expandOn?: 'hover' | 'click';
+    role?: string;
 }
 export declare const useNavListItemStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "root" | "selected">;
 export declare const NavListItem: React.FC<NavListItemProps>;

package/core/NavList/NavListItem.js

@@ -29,7 +29,7 @@ var _NavListSubMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/N
 
 var _NavListContext = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListContext"));
 
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected"];
+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); }
 
@@ -68,6 +68,7 @@ var NavListItem = function NavListItem(_ref) {
       href = _ref.href,
       className = _ref.className,
       passSelected = _ref.selected,
+      role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -159,6 +160,7 @@ var NavListItem = function NavListItem(_ref) {
     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,

package/core/NavList/NavListItemBase.d.ts

@@ -11,6 +11,7 @@ export interface NavListItemBaseProps {
     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

@@ -27,7 +27,7 @@ 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"];
+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); }
 
@@ -119,6 +119,7 @@ var NavListItemBase = /*#__PURE__*/_react["default"].forwardRef(function NavList
       isNested = _ref.isNested,
       expandOn = _ref.expandOn,
       onClick = _ref.onClick,
+      role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var classes = useNavListItemBaseStyles();
 
@@ -141,13 +142,16 @@ var NavListItemBase = /*#__PURE__*/_react["default"].forwardRef(function NavList
   return /*#__PURE__*/_react["default"].createElement("li", {
     ref: ref,
     className: (0, _clsx["default"])(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick
+    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), /*#__PURE__*/_react["default"].createElement("span", {
+  }, 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)

package/core/NavList/NavListSubMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NavListProps } from '@digigov/ui/core/NavList';
+import { NavListProps } from '@digigov/ui/core/NavList/types';
 import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
 export interface NavListSubMenuProps extends NavListProps {
     links: NavLinkInterface[];

package/core/NavList/NavListSubMenu.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _NavList = require("@digigov/ui/core/NavList");
+var _NavListBase = require("@digigov/ui/core/NavList/NavListBase");
 
 var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
 
@@ -34,7 +34,7 @@ var NavListSubMenu = function NavListSubMenu(_ref) {
   var _useContext = (0, _react.useContext)(_NavListContext["default"]),
       horizontal = _useContext.horizontal;
 
-  return /*#__PURE__*/_react["default"].createElement(_NavList.NavListBase, (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(_NavListBase.NavListBase, (0, _extends2["default"])({
     subMenu: true,
     floating: horizontal
   }, props), links && links.map(function (subMenuLink, key) {

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+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,3 @@
+/// <reference types="react" />
+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.mdx

@@ -1,4 +1,25 @@
 ---
+id: NavList
 title: NavList
-parent: docs/ui/components
 ---
+
+```bash
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+```
+
+## How to use
+
+### Vertical NavList
+
+<Story packageName="@digigov/ui" component="core/NavList" story="Default.tsx" />
+
+### Horizontal NavList
+
+<Story packageName="@digigov/ui" component="core/NavList" story="NavHorizontalLayout.tsx" />
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our NavList
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Menu or Menu bar](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).

package/core/NavList/types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
+import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+export interface NavListProps {
+    children?: React.ReactNode;
+    className?: string;
+    horizontal?: boolean;
+    role?: string;
+    openSubMenus?: boolean;
+    floating?: boolean;
+    subMenu?: boolean;
+    links?: NavLinkInterface[];
+    style?: BaseCSSProperties;
+}