@digigov/ui 1.0.0-8ae63a77 → 1.0.0-8bbf3ef2

package/src/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/src/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/src/navigation/NavList/__stories__/NavListWithoutNav.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  NavList,
+  NavListItemAction,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+
+export const NavListWithoutNav = () => {
+  const layout = 'vertical';
+  const { registerNavItem } = useNavList();
+
+  return (
+    <NavList layout={layout}>
+      {links.map((item, key) => (
+        <NavListItemAction {...registerNavItem(item)} key={key}>
+          {item.label}
+        </NavListItemAction>
+      ))}
+    </NavList>
+  );
+};
+
+export default NavListWithoutNav;

package/src/navigation/NavList/__stories__/UsingHeaderButton.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
+import {
+  Header,
+  HeaderSection,
+  HeaderContent,
+  HeaderTitle,
+} from '@digigov/ui/app/Header';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import {
+  Nav,
+  NavMenuContainer,
+  NavMenuTitle,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+} from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Button } from '@digigov/ui/form/Button';
+import ArrowIcon from '@digigov/react-icons/ArrowIcon';
+
+const links: any = [];
+for (let index = 0; index < 14; index++) {
+  links.push({
+    name: `Nav${index}`,
+    label: `σύνδεσμος ${index + 1}`,
+    href: `?q=item${index + 1}`,
+  });
+}
+
+const menuLabel = 'Επιλογές';
+const menuTitle = 'Επιλογές της υπηρεσίας';
+
+export const UsingHeaderButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Top>
+      <Header>
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo href="#" />
+            <HeaderTitle>Τίτλος Υπηρεσίας</HeaderTitle>
+          </HeaderSection>
+          <HeaderSection>
+            <Button variant="link" onClick={() => setOpen(!open)}>
+              {menuLabel}<ArrowIcon direction={open? 'up' : "down"} />
+            </Button>
+          </HeaderSection>
+        </HeaderContent>
+      </Header>
+      <Nav
+        open={open}
+        drawer="smDown"
+        onClose={() => setOpen(false)}
+        closeButtonLabel="Κλείσιμο"
+        aria-label="navigation list"
+      >
+        <NavMenuContainer active={open}>
+          <NavMenuContent md={12}>
+            <Paragraph>
+              Εξερευνήστε τις δυνατότητες της Υπηρεσίας, επιλέγοντας από τους παρακάτω συνδέσμους:
+            </Paragraph>
+          </NavMenuContent>
+          <NavMenuTitle>{menuTitle || menuLabel}</NavMenuTitle>
+          <NavMenuContent>
+            <NavMenuContentList role="menu">
+              {links &&
+                links.map((item, menuIndex) => {
+                  return (
+                    <NavMenuContentListItem key={menuIndex} role="presentation">
+                      {item?.href && (
+                        <Link role="menuitem" id={item.name} href={item.href}>
+                          {item.label}
+                        </Link>
+                      )}
+                    </NavMenuContentListItem>
+                  );
+                })}
+            </NavMenuContentList>
+          </NavMenuContent>
+        </NavMenuContainer>
+      </Nav>
+    </Top>
+  );
+};
+
+export default UsingHeaderButton;

package/src/navigation/NavList/__stories__/UsingNavListAuto.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  NavListAuto,
+} from '@digigov/ui/navigation/NavList';
+import links from './NavLinksWithSubmenu.json';
+import { Button } from '@digigov/ui/form/Button';
+import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+
+export const UsingNavListAuto = () => {
+  const layout = 'horizontal';
+  const drawer = 'smDown';
+  const border = true;
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button color="secondary" onClick={() => setOpen(!open)} smUpHidden>
+        Επιλογές <BurgerIcon />
+      </Button>
+      <NavListAuto
+        layout={layout}
+        border={border}
+        drawer={drawer}
+        open={open}
+        links={links}
+        onClose={() => setOpen(false)}
+        aria-label="Nav list"
+      ></NavListAuto>
+    </>
+  );
+};
+
+export default UsingNavListAuto;

package/src/navigation/NavList/__stories__/Vertical.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+
+export const Vertical = () => {
+  const layout = 'vertical';
+  const { registerNavItem } = useNavList();
+  const [useActive, setUseActive] = useState("");
+
+  return (
+    <Nav aria-orientation={layout || 'horizontal'} aria-label="navigation list">
+      <NavList layout={layout}>
+        {links.map((item, key) => (
+          <NavListItemAction
+            {...registerNavItem(item)}
+            key={key}
+            active={item.name === useActive}
+            onClick={() => setUseActive(item.name)}
+          >
+            {item.label}
+          </NavListItemAction>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default Vertical;

package/src/navigation/NavList/__stories__/{NavVerticalLayout.tsx → VerticalWithoutDrawer.tsx}

@@ -12,59 +12,26 @@ import {
 } from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
-const links = [
-  { name: 'home', href: '#home', label: 'Αρχική' },
-  {
-    name: 'educational',
-    // href: '#',
-    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: 'Νέα' },
-];
+import links from './NavLinksWithSubmenu.json';
 
-export const NavVerticalLayout = () => {
+export const VerticalWithoutDrawer = () => {
   const layout = 'vertical';
   const border = false;
   const { registerNavItemMenu, registerNavItem } = useNavList();
 
-
-
   return (
-    <Nav open={true}  border={border}>
+    <Nav
+      border={border}
+      aria-orientation={layout || 'horizontal'}
+      aria-label="navigation list"
+    >
       <NavList layout={layout}>
         {links.map((item, key) => (
           <React.Fragment key={key}>
-            <NavListItemAction {...registerNavItem(item)} >
+            <NavListItemAction {...registerNavItem(item)}>
               {item.label}
             </NavListItemAction>
-            {item.subMenu &&
+            {item.subMenu && (
               <NavMenuContainer
                 layout={layout}
                 paddingLeft={5}
@@ -95,7 +62,7 @@ export const NavVerticalLayout = () => {
                   </NavMenuContentList>
                 </NavMenuContent>
               </NavMenuContainer>
-            }
+            )}
           </React.Fragment>
         ))}
       </NavList>
@@ -103,4 +70,4 @@ export const NavVerticalLayout = () => {
   );
 };
 
-export default NavVerticalLayout;
+export default VerticalWithoutDrawer;

package/src/navigation/NavList/index.mdx

@@ -9,13 +9,19 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
 
 ## How to use
 
-### Vertical NavList
+### Horizontal NavList
 
 <Story packageName="@digigov/ui" component="navigation/NavList" story="Default.tsx" />
 
-### Horizontal NavList
+### Vertical NavList
+
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Vertical.tsx" />
+
+
+### NavListAuto
+
+<Story packageName="@digigov/ui" component="navigation/NavList" story="UsingNavListAuto.tsx" />
 
-<Story packageName="@digigov/ui" component="navigation/NavList" story="NavVerticalLayout.tsx" />
 
 ## Accessibility
 

package/src/navigation/NavList/index.tsx

@@ -11,10 +11,8 @@ export * from '@digigov/react-core/NavMenuContent';
 export * from '@digigov/react-core/NavMenuContentListBase';
 export * from '@digigov/react-core/NavMenuContentListItem';
 export * from '@digigov/react-core/NavMenuTitle';
-export * from '@digigov/react-core/NavListItemAction';
-export * from '@digigov/react-core/NavListItemAction';
 export * from '@digigov/react-core/NavListItemActionContainer';
+export * from '@digigov/react-core/NavListItemAction';
 export * from '@digigov/react-core/NavListItemLink';
 export * from '@digigov/react-core/NavListItemButton';
-export * from '@digigov/react-core/NavListItemAction';
 export default NavList;

package/src/navigation/NavList/types.tsx

@@ -11,6 +11,7 @@ export interface NavLinkInterface {
   label?: string;
   name: string;
   href?: string;
+  subMenuHeading?: string;
   subMenu?: NavLinkInterface[]
   menu?: NavListItemMenuInterface
 }

package/src/registry.js

@@ -177,6 +177,7 @@ import * as _digigov_ui_utils_Kitchensink_KitchensinkByLetter from '@digigov/ui/
 import * as _digigov_ui_utils_Kitchensink_KitchensinkComponent from '@digigov/ui/utils/Kitchensink/KitchensinkComponent';
 import * as _digigov_ui_utils_Kitchensink_KitchensinkDashboard from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
 import * as _digigov_ui_utils_SvgIcon from '@digigov/ui/utils/SvgIcon';
+import * as _digigov_ui_utils_Typography from '@digigov/ui/utils/Typography';
 import * as _digigov_ui_utils_VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 import * as _digigov_ui_utils_withDeprecation from '@digigov/ui/utils/withDeprecation'
 function lazyImport(pkgImport) {
@@ -377,6 +378,7 @@ export default {
   '@digigov/ui/utils/Kitchensink/KitchensinkComponent': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkComponent),
   '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkDashboard),
   '@digigov/ui/utils/SvgIcon': lazyImport(_digigov_ui_utils_SvgIcon),
+  '@digigov/ui/utils/Typography': lazyImport(_digigov_ui_utils_Typography),
   '@digigov/ui/utils/VisuallyHidden': lazyImport(_digigov_ui_utils_VisuallyHidden),
   '@digigov/ui/utils/withDeprecation': lazyImport(_digigov_ui_utils_withDeprecation)
 };

package/src/utils/Typography/index.tsx

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

package/utils/Typography/index.d.ts

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

package/utils/Typography/index.js

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

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

@@ -1,37 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
-var links = [{
-  name: 'link_1',
-  href: '#link_1',
-  label: 'Σύνδεσμος 1',
-  active: true
-}, {
-  name: 'link_2',
-  href: '#link_2',
-  label: 'Σύνδεσμος 2'
-}, {
-  name: 'link_3',
-  href: '#link_3',
-  label: 'Σύνδεσμος 3'
-}];
-export var NavVertical = function NavVertical() {
-  var _useNavList = useNavList(),
-      registerNavItem = _useNavList.registerNavItem;
-
-  return /*#__PURE__*/React.createElement(Nav, {
-    "aria-orientation": "vertical",
-    "aria-label": "Nav list",
-    fixed: false,
-    border: false
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: "vertical"
-  }, 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
-    }), item.label);
-  })));
-};
-export default NavVertical;

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

@@ -1,43 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
-import { Heading } from '@digigov/ui/typography/Heading';
-var links = [{
-  name: 'link_1',
-  href: '#link_1',
-  label: 'Σύνδεσμος 1',
-  active: true
-}, {
-  name: 'link_2',
-  href: '#link_2',
-  label: 'Σύνδεσμος 2'
-}, {
-  name: 'link_3',
-  href: '#link_3',
-  label: 'Σύνδεσμος 3'
-}];
-
-var _ref = /*#__PURE__*/React.createElement(Heading, {
-  size: "sm"
-}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03BF\u03AF \u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03B9");
-
-export var NavVerticalWithTitle = function NavVerticalWithTitle() {
-  var _useNavList = useNavList(),
-      registerNavItem = _useNavList.registerNavItem;
-
-  return /*#__PURE__*/React.createElement("div", null, _ref, /*#__PURE__*/React.createElement(Nav, {
-    "aria-orientation": "vertical",
-    "aria-label": "Nav list",
-    fixed: false,
-    border: false
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: "vertical"
-  }, 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
-    }), item.label);
-  }))));
-};
-export default NavVerticalWithTitle;

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

@@ -1,56 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
-import NavList from '@digigov/ui/navigation/NavList/NavList';
-import { BurgerIcon } from '@digigov/ui/icons';
-import { Nav, NavListItemAction } from '@digigov/ui/navigation/NavList';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
-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: 'Επικοινωνία'
-}];
-export var WithBurgerIcon = function WithBurgerIcon() {
-  var _useNavList = useNavList(),
-      registerNavItem = _useNavList.registerNavItem;
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BurgerIcon, {
-    mdUpHidden: true,
-    size: "lg",
-    onClick: function onClick() {
-      setOpen(!open);
-    }
-  }), /*#__PURE__*/React.createElement(Nav, {
-    role: "menubar",
-    "aria-orientation": "horizontal",
-    "aria-label": "Nav list",
-    fixed: false,
-    border: false,
-    open: open
-  }, /*#__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
-    }), item.label);
-  }))));
-};
-export default WithBurgerIcon;

package/esm/navigation/NavList/__stories__/NavVertical.js

@@ -1,37 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
-var links = [{
-  name: 'link_1',
-  href: '#link_1',
-  label: 'Σύνδεσμος 1',
-  active: true
-}, {
-  name: 'link_2',
-  href: '#link_2',
-  label: 'Σύνδεσμος 2'
-}, {
-  name: 'link_3',
-  href: '#link_3',
-  label: 'Σύνδεσμος 3'
-}];
-export var NavVertical = function NavVertical() {
-  var _useNavList = useNavList(),
-      registerNavItem = _useNavList.registerNavItem;
-
-  return /*#__PURE__*/React.createElement(Nav, {
-    "aria-orientation": "vertical",
-    "aria-label": "Nav list",
-    fixed: false,
-    border: false
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: "vertical"
-  }, 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
-    }), item.label);
-  })));
-};
-export default NavVertical;

package/esm/navigation/NavList/__stories__/NavVerticalWithTitle.js

@@ -1,43 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
-import { Heading } from '@digigov/ui/typography/Heading';
-var links = [{
-  name: 'link_1',
-  href: '#link_1',
-  label: 'Σύνδεσμος 1',
-  active: true
-}, {
-  name: 'link_2',
-  href: '#link_2',
-  label: 'Σύνδεσμος 2'
-}, {
-  name: 'link_3',
-  href: '#link_3',
-  label: 'Σύνδεσμος 3'
-}];
-
-var _ref = /*#__PURE__*/React.createElement(Heading, {
-  size: "sm"
-}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03BF\u03AF \u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03B9");
-
-export var NavVerticalWithTitle = function NavVerticalWithTitle() {
-  var _useNavList = useNavList(),
-      registerNavItem = _useNavList.registerNavItem;
-
-  return /*#__PURE__*/React.createElement("div", null, _ref, /*#__PURE__*/React.createElement(Nav, {
-    "aria-orientation": "vertical",
-    "aria-label": "Nav list",
-    fixed: false,
-    border: false
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: "vertical"
-  }, 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
-    }), item.label);
-  }))));
-};
-export default NavVerticalWithTitle;