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

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,
@@ -21,13 +22,16 @@ import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 export function Default() {
   const { register, panel } = useTabs();
+
   return (
     <Tabs>
+      <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
       <TabsList>
-        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
-        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+        <TabsListItem {...register('citizen')} open>Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem {...register('cases')}>Οι υποθέσεις τους</TabsListItem>
+        <TabsListItem {...register('history')}>Ιστορικό</TabsListItem>
       </TabsList>
-      <TabsPanel {...panel('a')}>
+      <TabsPanel {...panel('citizen')}>
         <Heading size="md" element="h3">
           Στοιχεία πολίτη
         </Heading>
@@ -36,7 +40,6 @@ export function Default() {
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
             <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link href="#">
                 Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
               </Link>
@@ -50,21 +53,25 @@ export function Default() {
             <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
             <SummaryListItemValue>6941234567</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link>
-                {' '}
                 Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
               </Link>
             </SummaryListItemAction>
           </SummaryListItem>
         </SummaryList>
       </TabsPanel>
-      <TabsPanel {...panel('b')}>
+      <TabsPanel {...panel('cases')}>
         <Heading size="md" element="h3">
-          Yποθέσεις
+          Οι υποθέσεις τους
         </Heading>
         Περιεχόμενα υποθέσεων
       </TabsPanel>
+      <TabsPanel {...panel('history')}>
+        <Heading size="md" element="h3">
+          Ιστορικό
+        </Heading>
+        Περιεχόμενο ιστορικού
+      </TabsPanel>
     </Tabs>
   );
 }

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,