@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/layouts/Stack/__stories__/Spacing.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Spacing = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Card = _interopRequireDefault(require("@digigov/ui/content/Card"));
+
+var _Stack = _interopRequireDefault(require("@digigov/ui/layouts/Stack"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  spacing: 6
+}, /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row"
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 4
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 8
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+  direction: "row",
+  spacing: 12
+}, /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+  variant: "border"
+}, " Item 4 ")));
+
+var Spacing = function Spacing() {
+  return _ref;
+};
+
+exports.Spacing = Spacing;
+var _default = Spacing;
+exports["default"] = _default;

package/layouts/Stack/index.d.ts

@@ -0,0 +1,2 @@
+import Stack from '@digigov/react-core/Stack';
+export default Stack;

package/layouts/Stack/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Stack = _interopRequireDefault(require("@digigov/react-core/Stack"));
+
+var _default = _Stack["default"];
+exports["default"] = _default;

package/layouts/index.d.ts

@@ -2,6 +2,7 @@ export * from '@digigov/ui/layouts/Admin';
 export * from '@digigov/ui/layouts/Basic';
 export * from '@digigov/ui/layouts/Divider';
 export * from '@digigov/ui/layouts/Grid';
+export * from '@digigov/ui/layouts/Stack';
 export * from '@digigov/ui/layouts/Hidden';
 export * from '@digigov/ui/layouts/SectionBreak';
 export { default as AdminLayout } from '@digigov/ui/layouts/Admin';
@@ -9,3 +10,4 @@ export { default as BasicLayout } from '@digigov/ui/layouts/Basic';
 export { default as Divider } from '@digigov/ui/layouts/Divider';
 export { default as SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 export { default as Grid } from '@digigov/ui/layouts/Grid';
+export { default as Stack } from '@digigov/ui/layouts/Stack';

package/layouts/index.js

@@ -10,6 +10,7 @@ var _exportNames = {
   BasicLayout: true,
   Divider: true,
   Grid: true,
+  Stack: true,
   SectionBreak: true
 };
 Object.defineProperty(exports, "AdminLayout", {
@@ -42,6 +43,12 @@ Object.defineProperty(exports, "SectionBreak", {
     return _SectionBreak["default"];
   }
 });
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function get() {
+    return _Stack["default"];
+  }
+});
 
 var _Admin = _interopRequireWildcard(require("@digigov/ui/layouts/Admin"));
 
@@ -99,6 +106,20 @@ Object.keys(_Grid).forEach(function (key) {
   });
 });
 
+var _Stack = _interopRequireWildcard(require("@digigov/ui/layouts/Stack"));
+
+Object.keys(_Stack).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Stack[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Stack[key];
+    }
+  });
+});
+
 var _Hidden = require("@digigov/ui/layouts/Hidden");
 
 Object.keys(_Hidden).forEach(function (key) {

package/navigation/BackLink/index.mdx

@@ -13,11 +13,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/BackLink" story="Default.tsx" />
 
 ## API
 

package/navigation/Breadcrumbs/index.mdx

@@ -15,11 +15,12 @@ import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Breadcrumbs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Breadcrumbs" story="Default.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Breadcrumbs
+implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) section.
 
 ## API
 

package/navigation/Drawer/__stories__/Default.js

@@ -9,20 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _Drawer = require("@digigov/ui/navigation/Drawer");
 
-var _Link = require("@digigov/ui/navigation/Link");
-
 var _NavList = require("@digigov/ui/navigation/NavList");
 
-var _useNavList2 = require("@digigov/ui/navigation/NavList/hooks/useNavList");
-
 var _Title = require("@digigov/ui/typography/Title");
 
 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); }
@@ -49,27 +43,29 @@ var links = [{
 }, {
   name: 'educational',
   label: 'Εκπαιδευτικό υλικό',
-  subMenu: [{
-    name: 'elearning',
-    href: '#elearning',
-    label: 'Εκπαιδευτική πλατφόρμα'
-  }, {
-    name: 'videos',
-    href: '#videos',
-    label: 'Βίντεο'
-  }, {
-    name: 'presentations',
-    href: '#presentations',
-    label: 'Παρουσιάσεις'
-  }, {
-    name: 'promoting',
-    href: '#promoting',
-    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
-  }, {
-    name: 'other-texts',
-    href: '#other-texts',
-    label: 'Άλλα κείμενα'
-  }]
+  menu: {
+    links: [{
+      name: 'elearning',
+      href: '#elearning',
+      label: 'Εκπαιδευτική πλατφόρμα'
+    }, {
+      name: 'videos',
+      href: '#videos',
+      label: 'Βίντεο'
+    }, {
+      name: 'presentations',
+      href: '#presentations',
+      label: 'Παρουσιάσεις'
+    }, {
+      name: 'promoting',
+      href: '#promoting',
+      label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
+    }, {
+      name: 'other-texts',
+      href: '#other-texts',
+      label: 'Άλλα κείμενα'
+    }]
+  }
 }, {
   name: 'news',
   href: '#news',
@@ -86,19 +82,6 @@ var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
-  var _useNavList = (0, _useNavList2.useNavList)(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return (0, _extends2["default"])({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return (0, _extends2["default"])({}, registerLink(name));
-  };
-
   var layout = 'vertical';
   var border = false;
   var fixed = false;
@@ -116,34 +99,7 @@ var Default = function Default() {
     border: border,
     fixed: fixed,
     "aria-label": "Nav list"
-  }, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
-      key: key
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
-      role: "menu"
-    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return (0, _NavList.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentListItem, {
-        key: menuIndex,
-        role: "presentation"
-      }, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    }))))));
-  })));
+  }));
 };
 
 exports.Default = Default;

package/navigation/Drawer/index.mdx

@@ -9,11 +9,7 @@ import Drawer from '@digigov/ui/app/Drawer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Drawer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
 
 ## API
 

package/navigation/Dropdown/__stories__/AlignRight.js

@@ -21,9 +21,7 @@ var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
-
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   align: "right"
@@ -40,16 +38,18 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {

package/navigation/Dropdown/__stories__/Default.js

@@ -21,9 +21,7 @@ var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
-
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
@@ -38,16 +36,18 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {

package/navigation/Dropdown/__stories__/PlacementTop.js

@@ -21,9 +21,7 @@ var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
-
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
@@ -40,16 +38,18 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownConte
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {

package/navigation/Dropdown/index.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import DropdownBase, { DropdownBaseProps } from '@digigov/react-core/DropdownBase';
 export * from '@digigov/react-core/DropdownButton';
 export * from '@digigov/react-core/DropdownContent';
-export * from '@digigov/react-core/DropdownArrowDown';
 export interface DropdownProps extends DropdownBaseProps {
     /**
      * Use closeBehaviour to set the way that the Dropdown will close.

package/navigation/Dropdown/index.js

@@ -55,20 +55,6 @@ Object.keys(_DropdownContent).forEach(function (key) {
     }
   });
 });
-
-var _DropdownArrowDown = require("@digigov/react-core/DropdownArrowDown");
-
-Object.keys(_DropdownArrowDown).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DropdownArrowDown[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _DropdownArrowDown[key];
-    }
-  });
-});
 var _excluded = ["closeBehaviour", "float"];
 
 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); }

package/navigation/Dropdown/index.mdx

@@ -11,34 +11,20 @@ import Dropdown from '@digigov/ui/navigation/Dropdown';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="AlignRight.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="PlacementTop.tsx" />
 
-You can read more about the accessibility patterns used in our Dropdown
-implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 

package/navigation/Link/index.mdx

@@ -11,43 +11,25 @@ import Link from '@digigov/ui/navigation/Link';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="Default.tsx" />
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="NoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link"story="NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="OpensInNewTab.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
+
+### Accessibility
 
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at

package/navigation/NavList/NavList.stories.d.ts

@@ -7,5 +7,9 @@ declare namespace _default {
 }
 export default _default;
 export * from "@digigov/ui/navigation/NavList/__stories__/Default";
+export * from "@digigov/ui/navigation/NavList/__stories__/NavVertical";
+export * from "@digigov/ui/navigation/NavList/__stories__/NavVerticalWithTitle";
+export * from "@digigov/ui/navigation/NavList/__stories__/WithSubMenu";
 export * from "@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout";
+export * from "@digigov/ui/navigation/NavList/__stories__/WithBurgerIcon";
 import NavList from "@digigov/ui/navigation/NavList";

package/navigation/NavList/NavList.stories.js

@@ -24,6 +24,48 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
+var _NavVertical = require("@digigov/ui/navigation/NavList/__stories__/NavVertical");
+
+Object.keys(_NavVertical).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavVertical[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavVertical[key];
+    }
+  });
+});
+
+var _NavVerticalWithTitle = require("@digigov/ui/navigation/NavList/__stories__/NavVerticalWithTitle");
+
+Object.keys(_NavVerticalWithTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavVerticalWithTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavVerticalWithTitle[key];
+    }
+  });
+});
+
+var _WithSubMenu = require("@digigov/ui/navigation/NavList/__stories__/WithSubMenu");
+
+Object.keys(_WithSubMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithSubMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithSubMenu[key];
+    }
+  });
+});
+
 var _NavVerticalLayout = require("@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout");
 
 Object.keys(_NavVerticalLayout).forEach(function (key) {
@@ -37,6 +79,20 @@ Object.keys(_NavVerticalLayout).forEach(function (key) {
     }
   });
 });
+
+var _WithBurgerIcon = require("@digigov/ui/navigation/NavList/__stories__/WithBurgerIcon");
+
+Object.keys(_WithBurgerIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithBurgerIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithBurgerIcon[key];
+    }
+  });
+});
 var _default = {
   title: 'Digigov UI/navigation/NavList',
   description: 'Use the navigation list component only when you need to show more options in one page.',