@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-75e5086d

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

@@ -1,15 +1,14 @@
 import React from 'react';
 import Link from '@digigov/ui/navigation/Link';
-import NavList, {
-  isNavListItemLinkInterface,
+import {
   Nav,
-  NavListItem,
-  NavMenu,
+  NavList,
+  NavListItemAction,
   NavMenuContainer,
-  NavMenuContainerContent,
-  NavMenuContainerContentList,
-  NavMenuContainerContentListItem,
-  NavMenuContainerTitle,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
 } from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
@@ -53,41 +52,34 @@ const links = [
 export const NavVerticalLayout = () => {
   const layout = 'vertical';
   const border = false;
-  const { container, registerButton, registerLink } = useNavList();
+  const { registerNavItemMenu, registerNavItem } = useNavList();
 
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
 
-  const setRegisterLink = (name: string) => {
-    return { ...registerLink(name) };
-  };
 
   return (
-    <Nav open={true} layout={layout} border={border}>
-      <NavList>
+    <Nav open={true}  border={border}>
+      <NavList layout={layout}>
         {links.map((item, key) => (
           <React.Fragment key={key}>
-            <NavListItem
-              link={item}
-              setRegisterButton={setRegisterButton}
-              setRegisterLink={setRegisterLink}
-            />
-            <NavMenu layout={layout} {...container(item.name)}>
+            <NavListItemAction {...registerNavItem(item)} >
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu &&
               <NavMenuContainer
                 layout={layout}
                 paddingLeft={5}
                 paddingRight={5}
+                {...registerNavItemMenu(item.name)}
               >
-                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
-                <NavMenuContainerContent>
-                  <NavMenuContainerContentList role="menu">
+                <NavMenuTitle>{item.label}</NavMenuTitle>
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
-                        isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem
-                            role="presentation"
+                        subMenu?.href && (
+                          <NavMenuContentListItem
                             key={menuIndex}
+                            role="presentation"
                           >
                             <Link
                               role="menuitem"
@@ -96,14 +88,14 @@ export const NavVerticalLayout = () => {
                             >
                               {subMenu.label}
                             </Link>
-                          </NavMenuContainerContentListItem>
+                          </NavMenuContentListItem>
                         )
                       );
                     })}
-                  </NavMenuContainerContentList>
-                </NavMenuContainerContent>
+                  </NavMenuContentList>
+                </NavMenuContent>
               </NavMenuContainer>
-            </NavMenu>
+            }
           </React.Fragment>
         ))}
       </NavList>

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

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

package/src/navigation/NavList/index.tsx

@@ -1,21 +1,20 @@
-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/NavListItemAction';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemActionContainer';
+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

@@ -1,10 +1,19 @@
 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;
+  subMenu?: NavLinkInterface[]
+  menu?: NavListItemMenuInterface
+}
 export interface NavListAutoProps extends NavProps {
   children?: React.ReactNode;
   className?: string;
@@ -24,23 +33,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 +64,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;

package/src/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             }
           ],

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

@@ -10,6 +10,7 @@ import {
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Tabs,
+  TabsHeading,
   TabsList,
   TabsListItem,
   TabsPanel,
@@ -23,6 +24,7 @@ export function Default() {
   const { register, panel } = useTabs();
   return (
     <Tabs>
+      <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
       <TabsList>
         <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
         <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>

package/src/navigation/Tabs/index.mdx

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

package/src/navigation/Tabs/index.tsx

@@ -24,7 +24,7 @@ export const useTabs = (): UseTabsReturn => {
   }, []);
   const { register, opened, ...rest } = useTogglableTab({
     singleOpen: true,
-    toggleProperty: 'selected',
+    toggleProperty: 'open',
     onToggleProperty: 'onClick',
     firstOpen: true,
     ariaNavigation: true,