@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

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__/VerticalWithoutDrawer.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Link from '@digigov/ui/navigation/Link';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  NavMenuContainer,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
+} from '@digigov/ui/navigation/NavList';
+import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+
+import links from './NavLinksWithSubmenu.json';
+
+export const VerticalWithoutDrawer = () => {
+  const layout = 'vertical';
+  const border = false;
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+
+  return (
+    <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)}>
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu && (
+              <NavMenuContainer
+                layout={layout}
+                paddingLeft={5}
+                paddingRight={5}
+                {...registerNavItemMenu(item.name)}
+              >
+                <NavMenuTitle>{item.label}</NavMenuTitle>
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
+                    {item.subMenu?.map((subMenu, menuIndex) => {
+                      return (
+                        subMenu?.href && (
+                          <NavMenuContentListItem
+                            key={menuIndex}
+                            role="presentation"
+                          >
+                            <Link
+                              role="menuitem"
+                              id={subMenu.name}
+                              href={subMenu.href}
+                            >
+                              {subMenu.label}
+                            </Link>
+                          </NavMenuContentListItem>
+                        )
+                      );
+                    })}
+                  </NavMenuContentList>
+                </NavMenuContent>
+              </NavMenuContainer>
+            )}
+          </React.Fragment>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default VerticalWithoutDrawer;

package/src/navigation/NavList/hooks/useNavList.ts

@@ -5,7 +5,7 @@ import {
 } from '@digigov/ui/navigation/NavList/hooks/useTogglableNav';
 
 export interface UseNavListReturn extends UseTogglableNavReturn {
-  container: (key: string) => { active: boolean; id: string };
+  registerNavItemMenu: (key: string) => { active: boolean; id: string };
 }
 export const useNavList = (): UseNavListReturn => {
   const registeredContainers = useRef({});
@@ -18,7 +18,7 @@ export const useNavList = (): UseNavListReturn => {
     onToggleProperty: 'onClick',
     ariaNavigation: true,
   });
-  const container = useCallback(
+  const registerNavItemMenu = useCallback(
     (key: string) => {
       return {
         ref: (el) => {
@@ -32,5 +32,5 @@ export const useNavList = (): UseNavListReturn => {
     },
     [opened]
   );
-  return { registerButton, registerLink, opened, container, ...rest };
+  return { registerButton, registerLink, opened, registerNavItemMenu, ...rest };
 };

package/src/navigation/NavList/hooks/useTogglableNav.tsx

@@ -15,6 +15,7 @@ export interface UseTogglableNavInterface {
 export interface UseTogglableNavReturn {
   registerButton: (el: string) => any;
   registerLink: (el: string) => any;
+  registerNavItem: (item: any) => any;
   registered: { current: Record<string, { el: HTMLElement; type: string }> };
   opened: Record<string, boolean>;
   toggle: (id: string) => void;
@@ -40,25 +41,7 @@ export function useTogglableNav({
   );
   const openedKeys = useRef<string[]>([]);
 
-  const registerButtonRef = useCallback((el) => {
-    if (!el) return;
-    const key = el.getAttribute('aria-controls') as string;
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el,
-      type: 'button',
-    };
-  }, []);
 
-  const registerLinkRef = useCallback((el) => {
-    if (!el) return;
-    const key = el.getAttribute('aria-controls') as string;
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el,
-      type: 'link',
-    };
-  }, []);
 
   const toggle = useCallback((e) => {
     const key = e.currentTarget.getAttribute('aria-controls') as string;
@@ -254,7 +237,25 @@ export function useTogglableNav({
         break;
     }
   }, []);
+  const registerButtonRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el,
+      type: 'button',
+    };
+  }, []);
 
+  const registerLinkRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el,
+      type: 'link',
+    };
+  }, []);
   const registerButton = useCallback(
     (key) => {
       const isOpen = !!opened[key];
@@ -279,9 +280,20 @@ export function useTogglableNav({
     },
     [opened]
   );
-
+  const registerNavItem = useCallback(
+    (item) => {
+      if(item.subMenu || item.menu) {
+        return {...registerButton(item.name), role: 'button'};
+      }else if (item.href) {
+        return {...registerLink(item.name), href: item.href};
+      }else {
+        console.error(item)
+        throw new Error('Invalid nav item. Must be either button or link');
+      }
+    },[opened])
   return useMemo(
     () => ({
+      registerNavItem,
       registerButton,
       registerLink,
       registered,

package/src/navigation/NavList/index.mdx

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

package/src/navigation/NavList/index.tsx

@@ -1,21 +1,18 @@
-export * from '@digigov/ui/navigation/NavList/NavListItem';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
-export * from '@digigov/ui/navigation/NavList/Nav';
-export * from '@digigov/ui/navigation/NavList/NavList';
-export * from '@digigov/ui/navigation/NavList/NavListItemLink';
-export * from '@digigov/ui/navigation/NavList/NavListItemButton';
-export * from '@digigov/ui/navigation/NavList/NavMenu';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainer';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerTitle';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContent';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContentList';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem';
-export * from '@digigov/ui/navigation/NavList/NavVertical';
-export * from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList from '@digigov/react-core/NavList';
+export * from '@digigov/ui/navigation/NavList/NavListAuto';
+export * from '@digigov/ui/navigation/NavList/NavMenuContentList';
 export * from '@digigov/ui/navigation/NavList/types';
 export * from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
-import NavList from '@digigov/ui/navigation/NavList/NavList';
+export * from '@digigov/react-core/Nav';
+export * from '@digigov/react-core/NavList';
+export * from '@digigov/react-core/NavMenuContainer';
+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/NavListItemActionContainer';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemButton';
 export default NavList;

package/src/navigation/NavList/types.tsx

@@ -1,10 +1,20 @@
 import React from 'react';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 import { NavProps } from '@digigov/ui/navigation/NavList';
-import { NavLinkInterface } from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
 
 export type NavListLayout = 'horizontal' | 'vertical';
-
+interface NavListItemMenuInterface {
+  links: NavListItemLinkInterface[];
+  title?: string;
+}
+export interface NavLinkInterface {
+  label?: string;
+  name: string;
+  href?: string;
+  subMenuHeading?: string;
+  subMenu?: NavLinkInterface[]
+  menu?: NavListItemMenuInterface
+}
 export interface NavListAutoProps extends NavProps {
   children?: React.ReactNode;
   className?: string;
@@ -24,23 +34,22 @@ export interface NavListHeaderItemType {
   label?: string;
   title?: string;
   children?: React.ReactNode;
-  subMenu: NavListItemLinkInterface[];
+  menu: {
+    links: NavListItemLinkInterface[]
+  };
 }
 
 interface NavListItemInterface {
   name: string;
   label?: string;
-  title?: string;
-  children?: React.ReactNode;
+
 }
 
 interface NavListItemLinkInterface extends NavListItemInterface {
   href: string;
 }
 
-interface NavListItemMenuInterface extends NavListItemInterface {
-  links: NavListItemLinkInterface[];
-}
+
 
 export type NavListItemType =
   | NavListItemLinkInterface
@@ -56,23 +65,3 @@ export interface NavListItemSubMenuInterface extends NavListItemInterface {
   subMenu: NavListItemType[];
 }
 
-export const isNavListItemLinkInterface = (
-  item: any
-): item is NavListItemLinkInterface => {
-  return item && 'href' in item;
-};
-
-export const isNavListItemSubMenuInterface = (
-  item: any
-): item is NavListItemSubMenuInterface => {
-  return item && 'subMenu' in item;
-};
-
-export interface NavListItemProps {
-  children?: React.ReactNode;
-  role?: string;
-  link?: NavListItemType;
-  active?: boolean;
-  setRegisterButton?: (name: string) => any;
-  setRegisterLink?: (name: string) => any;
-}

package/src/navigation/Pagination/__stories__/Default.tsx

@@ -14,7 +14,7 @@ import {
 export const Default = () => (
   <I18NProvider t={(str: string) => str}>
     <Pagination>
-      <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
+      <PaginationLabel start={21} end={30} total={90}></PaginationLabel>
       <PaginationList>
         <PaginationListItem>
           <Link>
@@ -51,81 +51,7 @@ export const Default = () => (
     <SectionBreak size="lg" />
 
     <Pagination>
-      <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
-      <PaginationList>
-        <PaginationListItem inactive>
-          <Link>
-            <ArrowIcon direction="left" />
-            Προηγούμενο
-          </Link>
-        </PaginationListItem>
-        <PaginationListItem currentPage>1</PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page2">2</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page3">3</Link>
-        </PaginationListItem>
-        <PaginationListItem variant="dots"></PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page7">7</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page8">8</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page9">9</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link>
-            Επόμενο
-            <ArrowIcon direction="right" />
-          </Link>
-        </PaginationListItem>
-      </PaginationList>
-    </Pagination>
-
-    <SectionBreak size="lg" />
-
-    <Pagination>
-      <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
-      <PaginationList>
-        <PaginationListItem>
-          <Link>
-            <ArrowIcon direction="left" />
-            Προηγούμενο
-          </Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page1">1</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link>2</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page3">3</Link>
-        </PaginationListItem>
-        <PaginationListItem variant="dots"></PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page7">7</Link>
-        </PaginationListItem>
-        <PaginationListItem>
-          <Link href="#page8">8</Link>
-        </PaginationListItem>
-        <PaginationListItem currentPage>9</PaginationListItem>
-        <PaginationListItem inactive>
-          <Link>
-            Επόμενο
-            <ArrowIcon direction="right" />
-          </Link>
-        </PaginationListItem>
-      </PaginationList>
-    </Pagination>
-
-    <SectionBreak size="lg" />
-
-    <Pagination>
-      <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
+      <PaginationLabel start={81} end={90} total={197}></PaginationLabel>
       <PaginationList>
         <PaginationListItem>
           <Link>

package/src/navigation/Pagination/__stories__/PaginationSmall.tsx

@@ -16,7 +16,7 @@ export const PaginationSmall = () => (
     <Pagination>
       <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
       <PaginationList>
-        <PaginationListItem inactive>
+        <PaginationListItem active={false}>
           <Link>
             <ArrowIcon direction="left" />
           </Link>

package/src/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx

@@ -19,7 +19,7 @@ import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
 export const PaginationWithSmallFont = () => (
   <div className="example">
     <I18NProvider t={(str: string) => str}>
-      <Pagination fontSize="sm">
+      <Pagination size="sm">
         <PaginationLabel start={1} end={10} total={15}></PaginationLabel>
         <LabelContainer>
           Αποτελέσματα ανά σελίδα

package/src/navigation/Pagination/__stories__/WithInactiveValues.tsx

@@ -16,7 +16,7 @@ export const WithInactiveValues = () => (
     <Pagination>
       <PaginationLabel start={10} end={20} total={10000}></PaginationLabel>
       <PaginationList>
-        <PaginationListItem inactive>
+        <PaginationListItem active={false}>
           <Link>
             <ArrowIcon direction="left" />
             Προηγούμενο
@@ -74,7 +74,7 @@ export const WithInactiveValues = () => (
           <Link href="#page8">8</Link>
         </PaginationListItem>
         <PaginationListItem currentPage>9</PaginationListItem>
-        <PaginationListItem inactive>
+        <PaginationListItem active={false}>
           <Link>
             Επόμενο
             <ArrowIcon direction="right" />

package/src/navigation/Pagination/index.mdx

@@ -9,27 +9,19 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="Default.tsx"/>
 
 ## With inactive values
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithInactiveValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="WithInactiveValues.tsx" />
+
+## With small fonts
+
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="PaginationWithSmallFont.tsx" />
 
 ## With results per page
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithResultsPerPage.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="WithResultsPerPage.tsx" />
 
 ## API
 

package/src/navigation/SkipLink/SkipLink.stories.js

@@ -0,0 +1,9 @@
+import SkipLink from '@digigov/ui/navigation/SkipLink';
+export default {
+  title: 'Digigov UI/navigation/SkipLink',
+  description:
+    'Use the skip link component to help keyboard-only users skip to the main content on a page.',
+  component: SkipLink,
+  displayName: 'SkipLink',
+};
+export * from '@digigov/ui/navigation/SkipLink/__stories__/Default';

package/src/navigation/SkipLink/__stories__/Default.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SkipLink } from '@digigov/ui/navigation/SkipLink';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const Default = () => (
+  <>
+    <Paragraph>
+      Για να εμφανιστεί ο σύνδεσμος, περιηγηθείτε με το κουμπί tab ή κάνοντας κλικ στο περιεχόμενο και μετά πατήστε το κουμπί tab.
+    </Paragraph>
+    <SkipLink>Μετάβαση στο βασικό περιεχόμενο</SkipLink>
+
+  </>
+);
+
+export default Default;