@digigov/ui 1.0.0-8ae63a77 → 1.0.0-rc.1

package/es/feedback/NotificationBanner/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "title", "link", "children"];
+var _excluded = ["variant", "title", "link", "dense", "children"];
 import React from 'react';
 import NotificationBannerContainer from '@digigov/react-core/NotificationBannerContainer';
 import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
@@ -14,11 +14,13 @@ export var NotificationBanner = function NotificationBanner(_ref) {
   var variant = _ref.variant,
       title = _ref.title,
       link = _ref.link,
+      dense = _ref.dense,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(NotificationBannerContainer, _extends({
-    variant: variant
+    variant: variant,
+    dense: dense
   }, props), title && /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children, _ref2, link && /*#__PURE__*/React.createElement(NotificationBannerLink, {
     href: link.href
   }, link.label))));

package/es/feedback/WarningText/WarningText.stories.js

@@ -7,4 +7,5 @@ export default {
   displayName: 'WarningText'
 };
 export * from '@digigov/ui/feedback/WarningText/__stories__/Default';
-export * from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
+export * from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
+export * from '@digigov/ui/feedback/WarningText/__stories__/Dense';

package/es/feedback/WarningText/__stories__/Dense.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+
+var _ref = /*#__PURE__*/React.createElement(WarningText, {
+  dense: true
+}, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF \u03BD\u03B1 \u03C3\u03B1\u03C2 \u03B5\u03C0\u03B9\u03B2\u03BB\u03B7\u03B8\u03B5\u03AF \u03C0\u03C1\u03CC\u03C3\u03C4\u03B9\u03BC\u03BF \u03AD\u03C9\u03C2 \u03BA\u03B1\u03B9 5.000 \u03B5\u03C5\u03C1\u03CE \u03B5\u03AC\u03BD \u03B4\u03B5\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03B5\u03AF\u03C4\u03B5.");
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/Button/Button.stories.js

@@ -14,6 +14,7 @@ export * from './__stories__/GroupingButtons';
 export * from './__stories__/GroupingButtonsAndLinks';
 export * from './__stories__/CallToActionButton';
 export * from './__stories__/Disabled';
+export * from './__stories__/Dense';
 export * from './__stories__/ButtonLinkButton';
 export * from './__stories__/Back';
 export * from './__stories__/WithVariantLink';

package/es/form/Button/__stories__/Dense.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from '@digigov/ui/form/Button';
+
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  dense: true,
+  "aria-label": "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5"
+}, "\u03A0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5");
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/Checkbox/Checkbox.stories.js

@@ -14,4 +14,5 @@ export * from '@digigov/ui/form/Checkbox/__stories__/WithHint';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
 export * from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/Checkbox/__stories__/Dense';

package/es/form/Checkbox/__stories__/Dense.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "feeling-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkbox, {
+  dense: true
+}, /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "feeling",
+  value: "cold"
+}, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "feeling",
+  value: "fever"
+}, "\u0388\u03C7\u03C9 \u03C0\u03C5\u03C1\u03B5\u03C4\u03CC"), /*#__PURE__*/React.createElement(CheckboxItem, {
+  name: "feeling",
+  value: "fatigue"
+}, "\u0391\u03B9\u03C3\u03B8\u03AC\u03BD\u03BF\u03BC\u03B1\u03B9 \u03BA\u03BF\u03CD\u03C1\u03B1\u03C3\u03B7"))));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/DateInputContainer/DateInputContainer.stories.js

@@ -9,4 +9,5 @@ export default {
 export * from '@digigov/ui/form/DateInputContainer/__stories__/Default';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+export * from '@digigov/ui/form/DateInputContainer/__stories__/Dense';

package/es/form/DateInputContainer/__stories__/Dense.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DateInputContainer, DateInputItem } from '@digigov/ui/form/DateInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  "aria-describedby": "passport-hint"
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "md"
+}, "\u03A0\u03CC\u03C4\u03B5 \u03B5\u03BA\u03B4\u03CC\u03B8\u03B7\u03BA\u03B5 \u03C4\u03BF \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03AE\u03C1\u03B9\u03CC \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(DateInputContainer, {
+  dense: true
+}, /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "day"
+}, "\u0397\u03BC\u03AD\u03C1\u03B1"), /*#__PURE__*/React.createElement(DateInputItem, {
+  name: "month"
+}, "\u039C\u03AE\u03BD\u03B1\u03C2"), /*#__PURE__*/React.createElement(DateInputItem, {
+  width: 4,
+  name: "year"
+}, "\u0388\u03C4\u03BF\u03C2"))));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/RadioContainer/RadioContainer.stories.js

@@ -14,4 +14,5 @@ export * from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
 export * from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
-export * from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
+export * from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
+export * from '@digigov/ui/form/RadioContainer/__stories__/Dense';

package/es/form/RadioContainer/__stories__/Dense.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03AC \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(RadioContainer, {
+  dense: true
+}, /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "greece"
+}, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "cyprus"
+}, "\u039A\u03CD\u03C0\u03C1\u03BF\u03C2"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "eu"
+}, "\u03A7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u0395\u03C5\u03C1\u03C9\u03C0\u03B1\u03CA\u03BA\u03AE\u03C2 \u0388\u03BD\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "country",
+  value: "us"
+}, "H\u03BD\u03C9\u03BC\u03AD\u03BD\u03B5\u03C2 \u03A0\u03BF\u03BB\u03B9\u03C4\u03B5\u03AF\u03B5\u03C2 \u03C4\u03B7\u03C2 \u0391\u03BC\u03B5\u03C1\u03B9\u03BA\u03AE\u03C2"))));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/SelectContainer/SelectContainer.stories.js

@@ -8,4 +8,5 @@ export default {
 };
 export * from '@digigov/ui/form/SelectContainer/__stories__/Default';
 export * from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
-export * from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+export * from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+export * from '@digigov/ui/form/SelectContainer/__stories__/Dense';

package/es/form/SelectContainer/__stories__/Dense.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { SelectContainer, SelectOption } from '@digigov/ui/form/SelectContainer';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(SelectContainer, {
+  dense: true,
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
+}, /*#__PURE__*/React.createElement(SelectOption, {
+  value: "popular"
+}, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "recent"
+}, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "views"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/React.createElement(SelectOption, {
+  value: "comments"
+}, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/TextArea/TextArea.stories.js

@@ -12,4 +12,5 @@ export * from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
 export * from '@digigov/ui/form/TextArea/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/TextArea/__stories__/LimitedCharacters';
 export * from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextArea/__stories__/Dense';

package/es/form/TextArea/__stories__/Dense.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextArea } from '@digigov/ui/form/TextArea';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B4\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03BB\u03B7\u03C1\u03BF\u03C6\u03BF\u03C1\u03AF\u03B5\u03C2;", /*#__PURE__*/React.createElement(TextArea, {
+  dense: true,
+  name: "textarea"
+})));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/form/TextInput/TextInput.stories.js

@@ -13,4 +13,5 @@ export * from '@digigov/ui/form/TextInput/__stories__/FluidWidths';
 export * from '@digigov/ui/form/TextInput/__stories__/WithHint';
 export * from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
 export * from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
-export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/Dense';

package/es/form/TextInput/__stories__/Dense.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(LabelContainer, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2", /*#__PURE__*/React.createElement(TextInput, {
+  dense: true,
+  name: "inputext"
+})));
+
+export var Dense = function Dense() {
+  return _ref;
+};
+export default Dense;

package/es/navigation/Link/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "href"];
-import * as React from 'react';
+import React from 'react';
 import LinkBase from '@digigov/react-core/LinkBase';
 export var CommonLink = function CommonLink(props) {
   return /*#__PURE__*/React.createElement(LinkBase, props, props.children);

package/es/navigation/NavList/NavList.stories.js

@@ -7,8 +7,10 @@ export default {
   displayName: 'NavList'
 };
 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';
+export * from '@digigov/ui/navigation/NavList/__stories__/Vertical';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav';
+export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto';
+export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';

package/es/navigation/NavList/NavList.stories.playwright.json

@@ -7,14 +7,34 @@
           "actions": [
             {
               "name": "hover",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(1)>a"
+              }
+            }
+          ],
+          "id": "dHQxEQCIJ4bJ",
+          "title": "Hover item"
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--horizontal-with-submenu": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>button"
               }
             }
           ],
-          "id": "FO0jt9D4koTE",
-          "title": "Hover Item"
-        },
+          "id": "2DykhuHWrXMe",
+          "title": "Open submenu"
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--vertical-with-submenu": {
+      "actionSets": [
         {
           "actions": [
             {
@@ -24,7 +44,7 @@
               }
             }
           ],
-          "id": "pSAeXNWiklxX",
+          "id": "yTIrKHLeGZkx",
           "title": "Open submenu"
         }
       ]

package/es/navigation/NavList/NavListAuto/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["layout", "border", "fixed", "links"];
+var _excluded = ["layout", "links"];
 import React from 'react';
 import { useNavList } from '../hooks/useNavList';
 import NavListItemAction from '@digigov/react-core/NavListItemAction';
@@ -14,8 +14,6 @@ import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
 import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
 export var NavListAuto = function NavListAuto(_ref) {
   var layout = _ref.layout,
-      border = _ref.border,
-      fixed = _ref.fixed,
       _ref$links = _ref.links,
       links = _ref$links === void 0 ? [] : _ref$links,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -24,22 +22,18 @@ export var NavListAuto = function NavListAuto(_ref) {
       registerNavItemMenu = _useNavList.registerNavItemMenu,
       registerNavItem = _useNavList.registerNavItem;
 
-  return /*#__PURE__*/React.createElement(Nav, _extends({
-    open: true,
-    border: border,
-    fixed: fixed
-  }, props), /*#__PURE__*/React.createElement(NavList, {
+  return /*#__PURE__*/React.createElement(Nav, props, /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, links.map(function (item, key) {
-    var _item$menu, _item$menu2, _item$menu$links;
+    var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
-    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.menu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
       layout: layout
-    }, registerNavItemMenu(item.name)), ((_item$menu = item.menu) === null || _item$menu === void 0 ? void 0 : _item$menu.title) && /*#__PURE__*/React.createElement(NavMenuTitle, null, (_item$menu2 = item.menu) === null || _item$menu2 === void 0 ? void 0 : _item$menu2.title), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+    }, registerNavItemMenu(item.name)), (item.subMenuHeading || item.label) && /*#__PURE__*/React.createElement(NavMenuTitle, null, item.subMenuHeading || item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
       role: "menu"
-    }, (_item$menu$links = item.menu.links) === null || _item$menu$links === void 0 ? void 0 : _item$menu$links.map(function (subMenu, menuIndex) {
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
       return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
         key: menuIndex,
         role: "presentation"

package/es/navigation/NavList/__stories__/Default.js

@@ -1,38 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
-var links = [{
-  name: 'home',
-  href: '#home',
-  label: 'Αρχική',
-  active: true
-}, {
-  name: 'new_form',
-  href: '#new_form',
-  label: 'Καταχώριση φόρμας'
-}, {
-  name: 'news',
-  href: '#news',
-  label: 'Νέα'
-}, {
-  name: 'contact',
-  href: '#contact',
-  label: 'Επικοινωνία'
-}];
+import links from './NavLinksOneLevel.json';
 export var Default = function Default() {
   var _useNavList = useNavList(),
       registerNavItem = _useNavList.registerNavItem;
 
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
+
   return /*#__PURE__*/React.createElement(Nav, {
-    role: "menubar",
     "aria-orientation": "horizontal",
-    "aria-label": "Nav list",
-    fixed: false
+    role: "menubar",
+    "aria-label": "navigation list"
   }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
-    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({
-      key: key
-    }, registerNavItem(item), {
-      active: item === null || item === void 0 ? void 0 : item.active
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({}, registerNavItem(item), {
+      key: key,
+      active: item.name === useActive,
+      onClick: function onClick() {
+        return setUseActive(item.name);
+      }
     }), item.label);
   })));
 };

package/es/navigation/NavList/__stories__/HorizontalWithDrawer.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { Fragment, useState } from 'react';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle, useNavList } from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import links from './NavLinksWithSubmenu.json';
+import { Button } from '@digigov/ui/form/Button';
+import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+import CloseButton from '@digigov/react-core/CloseButton';
+
+var _ref = /*#__PURE__*/React.createElement(BurgerIcon, null);
+
+export var HorizontalWithDrawer = function HorizontalWithDrawer() {
+  var layout = 'horizontal';
+  var drawer = 'mdDown';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    mdUpHidden: true
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", _ref), /*#__PURE__*/React.createElement(Nav, {
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list",
+    open: open,
+    drawer: drawer
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    mdUpHidden: true,
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF"), /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  }))));
+};
+export default HorizontalWithDrawer;

package/{esm/navigation/NavList/__stories__/WithSubMenu.js → es/navigation/NavList/__stories__/HorizontalWithoutDrawer.js}

@@ -2,40 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { Fragment } from 'react';
 import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle, useNavList } from '@digigov/ui/navigation/NavList';
 import { Link } from '@digigov/ui/navigation/Link';
-var links = [{
-  name: 'home',
-  href: '#home',
-  label: 'Αρχική'
-}, {
-  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: 'Άλλα κείμενα'
-  }]
-}, {
-  name: 'news',
-  href: '#news',
-  label: 'Νέα'
-}];
-export var WithSubMenu = function WithSubMenu() {
+import links from './NavLinksWithSubmenu.json';
+export var HorizontalWithoutDrawer = function HorizontalWithoutDrawer() {
   var layout = 'horizontal';
   var border = false;
 
@@ -44,9 +12,9 @@ export var WithSubMenu = function WithSubMenu() {
       registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/React.createElement(Nav, {
-    open: true,
     border: border,
-    "aria-orientation": layout
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
   }, /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, links.map(function (item, key) {
@@ -70,4 +38,4 @@ export var WithSubMenu = function WithSubMenu() {
     })))));
   })));
 };
-export default WithSubMenu;
+export default HorizontalWithoutDrawer;

package/es/navigation/NavList/__stories__/NavLinksOneLevel.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "home",
+    "href": "#home",
+    "label": "Αρχική"
+  },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "href": "#educational"
+  },
+  {
+    "name": "news",
+    "href": "#news",
+    "label": "Νέα"
+  }
+]

package/es/navigation/NavList/__stories__/NavLinksWithSubmenu.json

@@ -0,0 +1,36 @@
+[
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "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": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]

package/es/navigation/NavList/__stories__/NavListWithoutNav.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+export var NavListWithoutNav = function NavListWithoutNav() {
+  var layout = 'vertical';
+
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({}, registerNavItem(item), {
+      key: key
+    }), item.label);
+  }));
+};
+export default NavListWithoutNav;