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

package/esm/layouts/Stack/__stories__/AlignItems.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "flex-start"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "center"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "flex-end"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "baseline"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  alignItems: "stretch"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  padding: 8
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 ")));
+
+export var AlignItems = function AlignItems() {
+  return _ref;
+};
+export default AlignItems;

package/esm/layouts/Stack/__stories__/Default.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 2
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 5 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 6 "));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/layouts/Stack/__stories__/JustifyContent.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "flex-start"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "center"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "flex-end"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-between"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-around"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 2,
+  justifyContent: "space-evenly"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")));
+
+export var JustifyContent = function JustifyContent() {
+  return _ref;
+};
+export default JustifyContent;

package/esm/layouts/Stack/__stories__/NoWrap.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 4,
+  direction: "row",
+  flexWrap: "nowrap"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 4 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 5 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Longer Item 6 "));
+
+export var NoWrap = function NoWrap() {
+  return _ref;
+};
+export default NoWrap;

package/esm/layouts/Stack/__stories__/Row.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 2,
+  direction: "row"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 5 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 6 "));
+
+export var Row = function Row() {
+  return _ref;
+};
+export default Row;

package/esm/layouts/Stack/__stories__/Spacing.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 6
+}, /*#__PURE__*/React.createElement(Stack, {
+  direction: "row"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 8
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 12
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")));
+
+export var Spacing = function Spacing() {
+  return _ref;
+};
+export default Spacing;

package/esm/layouts/Stack/index.js

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

package/esm/layouts/index.js

@@ -2,10 +2,12 @@ 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';
 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 Grid } from '@digigov/ui/layouts/Grid';
+export { default as Stack } from '@digigov/ui/layouts/Stack';

package/esm/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/esm/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/esm/navigation/Drawer/__stories__/Default.js

@@ -1,11 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/navigation/Drawer';
 import { DrawerHeading } from '@digigov/ui/navigation/Drawer';
-import { Link } from '@digigov/ui/navigation/Link';
-import { isNavListItemLinkInterface, NavListAuto, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/navigation/NavList';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+import { NavListAuto } from '@digigov/ui/navigation/NavList';
 import { Title } from '@digigov/ui/typography/Title';
 
 function useDrawer() {
@@ -28,27 +25,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',
@@ -65,19 +64,6 @@ export var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
-  var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
-
   var layout = 'vertical';
   var border = false;
   var fixed = false;
@@ -95,33 +81,6 @@ export var Default = function Default() {
     border: border,
     fixed: fixed,
     "aria-label": "Nav list"
-  }, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
-      role: "menu"
-    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
-        key: menuIndex,
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement(Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    }))))));
-  })));
+  }));
 };
 export default Default;

package/esm/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/esm/navigation/Dropdown/__stories__/AlignRight.js

@@ -6,8 +6,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   align: "right"
@@ -24,16 +23,18 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/React.createElement(NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {

package/esm/navigation/Dropdown/__stories__/Default.js

@@ -6,8 +6,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
@@ -22,16 +21,18 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.c
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/React.createElement(NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {

package/esm/navigation/Dropdown/__stories__/PlacementTop.js

@@ -6,8 +6,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
@@ -24,16 +23,18 @@ var _ref2 = /*#__PURE__*/React.createElement(DropdownContent, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/React.createElement(NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {

package/esm/navigation/Dropdown/index.js

@@ -5,7 +5,6 @@ import React, { useEffect, useRef } from 'react';
 import DropdownBase from '@digigov/react-core/DropdownBase';
 export * from '@digigov/react-core/DropdownButton';
 export * from '@digigov/react-core/DropdownContent';
-export * from '@digigov/react-core/DropdownArrowDown';
 
 /**
  * Dropdown component is used for showing more options with a button.

package/esm/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