@digigov/ui 0.30.2 → 0.31.0

package/src/core/NavList/__stories__/NavListEpathlaExample.tsx

@@ -19,7 +19,7 @@ const DEFAULT_HREF_FLAG = true;
 const epathlaLinks = [
   {
     name: 'index',
-    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}`,
+    href: DEFAULT_HREF_FLAG ? '#index' : `/${LANG}`,
     label: 'Αρχική',
   },
   {
@@ -108,7 +108,7 @@ const epathlaLinks = [
   },
   {
     name: 'news',
-    href: DEFAULT_HREF_FLAG ? '#' : `/${LANG}/news`,
+    href: DEFAULT_HREF_FLAG ? '#news' : `/${LANG}/news`,
     label: 'Νέα',
   },
   {
@@ -129,10 +129,14 @@ const epathlaLinks = [
 ];
 
 export const NavListEpathlaExample = () => {
-  const { container, register } = useNavList();
+  const { container, registerButton, registerLink } = useNavList();
 
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
+  };
+
+  const setRegisterLink = (name: string) => {
+    return { ...registerLink(name) };
   };
 
   return (
@@ -141,29 +145,46 @@ export const NavListEpathlaExample = () => {
         layout={'horizontal'}
         links={epathlaLinks}
         aria-label="Nav list"
-        role="menu"
       >
         {epathlaLinks.map((item, key) => (
           <React.Fragment key={key}>
-            <NavListItem link={item} setRegister={setRegister} />
-            <NavMenu {...container(item.name)}>
-              <NavMenuContainer paddingLeft={5} paddingRight={5}>
-                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
-                <NavMenuContainerContent>
-                  <NavMenuContainerContentList>
-                    {item.subMenu?.map((subMenu, menuIndex) => {
-                      return (
-                        isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem key={menuIndex}>
-                            <Link href={subMenu.href}>{subMenu.label}</Link>
-                          </NavMenuContainerContentListItem>
-                        )
-                      );
-                    })}
-                  </NavMenuContainerContentList>
-                </NavMenuContainerContent>
-              </NavMenuContainer>
-            </NavMenu>
+            <NavListItem
+              link={item}
+              setRegisterButton={setRegisterButton}
+              setRegisterLink={setRegisterLink}
+            />
+            {item?.subMenu && (
+              <NavMenu
+                {...container(item.name)}
+                aria-expanded={container(item.name)?.active}
+              >
+                <NavMenuContainer paddingLeft={5} paddingRight={5}>
+                  <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
+                  <NavMenuContainerContent>
+                    <NavMenuContainerContentList role="menu">
+                      {item.subMenu?.map((subMenu, menuIndex) => {
+                        return (
+                          isNavListItemLinkInterface(subMenu) && (
+                            <NavMenuContainerContentListItem
+                              key={menuIndex}
+                              role="presentation"
+                            >
+                              <Link
+                                role="menuitem"
+                                id={`${item.name}-${menuIndex}`}
+                                href={subMenu.href}
+                              >
+                                {subMenu.label}
+                              </Link>
+                            </NavMenuContainerContentListItem>
+                          )
+                        );
+                      })}
+                    </NavMenuContainerContentList>
+                  </NavMenuContainerContent>
+                </NavMenuContainer>
+              </NavMenu>
+            )}
           </React.Fragment>
         ))}
       </NavListAuto>

package/src/core/NavList/__stories__/NavListHorizontalAutoExample.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+
+const links = [
+  {
+    name: 'Nav1',
+    label: 'Nav list item 1',
+    href: '#',
+  },
+  {
+    name: 'Nav2',
+    label: 'Nav list item 2',
+    menu: {
+      title: 'This is the first Menu',
+      links: [
+        {
+          name: 'Nav2.1',
+          label: 'link navigation',
+          href: '#',
+        },
+        {
+          name: 'Nav2.2',
+          label: 'link navigation',
+          href: '#',
+        },
+        {
+          name: 'Nav2.3',
+          label: 'link navigation',
+          href: '#',
+        },
+        {
+          name: 'Nav2.4',
+          label: 'link navigation',
+          href: '#',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Nav3',
+    label: 'Nav list item 3',
+    href: '#',
+  },
+];
+
+export const NavListHorizontalAutoExample = () => {
+  const layout = 'horizontal';
+  const border = true;
+
+  return (
+    <NavListAuto
+      layout={layout}
+      border={border}
+      links={links}
+      aria-label="Nav list"
+    >
+      {links.map((item, key) => (
+        <NavListItemAuto key={key} item={item} />
+      ))}
+    </NavListAuto>
+  );
+};
+
+export default NavListHorizontalAutoExample;

package/src/core/NavList/__stories__/NavListSecondaryAutoExample.tsx

@@ -0,0 +1,284 @@
+import React, { useState } from 'react';
+import { NavListAuto, NavListLayout } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+import FieldContainer, { Fieldset } from '@digigov/ui/core/FieldContainer';
+import Hint from '@digigov/ui/typography/Hint';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+
+const links = [
+  {
+    name: 'Nav1',
+    label: 'Item list 1',
+    menu: {
+      title: 'This is the first Menu',
+      links: [
+        {
+          name: 'Nav1__Nav1.1',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav1__Nav1.2',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Nav2',
+    label: 'Item list 2',
+    menu: {
+      title: 'This is the second Menu',
+      links: [
+        {
+          name: 'Nav2__Nav2.1',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav2__Nav2.2',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav2__Nav2.3',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav2__Nav2.4',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav2__Nav2.5',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav2__Nav2.6',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+        {
+          name: 'Nav2__Nav2.7',
+          label: 'link navigation',
+          href: '?q=item',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Nav3',
+    label: 'Item list 3',
+    subMenu: [
+      {
+        name: 'Nav3__Nav3.1',
+        label: 'Item list 4',
+        href: '?q=item4',
+      },
+      {
+        name: 'Nav3__Nav3.2',
+        label: 'Item list 5',
+        subMenu: [
+          {
+            name: 'Nav3__Nav3.2__Nav3.2.1',
+            label: 'Item list 5.2',
+            menu: {
+              title: 'This is the fifth Menu',
+              links: [
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.1',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.2',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.3',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.4',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.5',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.6',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+                {
+                  name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.7',
+                  label: 'link navigation',
+                  href: '?q=item',
+                },
+              ],
+            },
+          },
+        ],
+      },
+      {
+        name: 'Nav3__Nav3.3',
+        label: 'Item list 6',
+        menu: {
+          title: 'This is the sixth Menu',
+          links: [
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.1',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.2',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.3',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.4',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.5',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.6',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.7',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.8',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.9',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.10',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+            {
+              name: 'Nav3__Nav3.3__Nav3.3.11',
+              label: 'link navigation',
+              href: '?q=item',
+            },
+          ],
+        },
+      },
+    ],
+  },
+];
+
+export const NavListSecondaryAutoExample = () => {
+  const [layout, setLayout] = useState<NavListLayout>('horizontal');
+  const [border, setBorder] = useState<string>('no');
+  const [fixed, setFixed] = useState<string>('no');
+
+  return (
+    <>
+      <NavListAuto
+        layout={layout}
+        border={border === 'yes'}
+        fixed={fixed === 'yes'}
+        links={links}
+        aria-label="Nav list"
+      >
+        {links.map((item, key) => (
+          <NavListItemAuto key={key} item={item} />
+        ))}
+      </NavListAuto>
+      <SectionBreak visible={false} size="l" />
+      <FieldContainer>
+        <Fieldset aria-describedby="name-hint">
+          <Hint id="name-hint">Layout options:</Hint>
+          <RadioContainer inline>
+            <RadioItem
+              defaultChecked={layout === 'vertical'}
+              name="changed_display"
+              value="vertical"
+              onClick={() => setLayout('vertical')}
+            >
+              Vertical
+            </RadioItem>
+            <RadioItem
+              defaultChecked={layout === 'horizontal'}
+              name="changed_display"
+              value="horizontal"
+              onClick={() => setLayout('horizontal')}
+            >
+              Horizontal
+            </RadioItem>
+          </RadioContainer>
+          <Hint id="name-hint">Bottom border:</Hint>
+          <RadioContainer inline>
+            <RadioItem
+              defaultChecked={border === 'yes'}
+              name="changed_border"
+              value="yes"
+              onClick={() => setBorder('yes')}
+            >
+              Yes
+            </RadioItem>
+            <RadioItem
+              defaultChecked={border === 'no'}
+              name="changed_border"
+              value="no"
+              onClick={() => setBorder('no')}
+            >
+              No
+            </RadioItem>
+          </RadioContainer>
+          <Hint id="name-hint">Position fixed:</Hint>
+          <RadioContainer inline>
+            <RadioItem
+              defaultChecked={fixed === 'yes'}
+              name="changed_position"
+              value="yes"
+              onClick={() => setFixed('yes')}
+            >
+              Yes
+            </RadioItem>
+            <RadioItem
+              defaultChecked={fixed === 'no'}
+              name="changed_position"
+              value="no"
+              onClick={() => setFixed('no')}
+            >
+              No
+            </RadioItem>
+          </RadioContainer>
+        </Fieldset>
+      </FieldContainer>
+    </>
+  );
+};
+
+export default NavListSecondaryAutoExample;

package/src/core/NavList/__stories__/NavListVerticalAutoExample.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+
+const links = [
+  {
+    name: 'Nav1',
+    label: 'Nav list item 1',
+    href: '#',
+  },
+  {
+    name: 'Nav2',
+    label: 'Nav list item 2',
+    menu: {
+      title: 'This is the first Menu',
+      links: [
+        {
+          name: 'Nav2.1',
+          label: 'link navigation',
+          href: '#',
+        },
+        {
+          name: 'Nav2.2',
+          label: 'link navigation',
+          href: '#',
+        },
+        {
+          name: 'Nav2.3',
+          label: 'link navigation',
+          href: '#',
+        },
+        {
+          name: 'Nav2.4',
+          label: 'link navigation',
+          href: '#',
+        },
+      ],
+    },
+  },
+  {
+    name: 'Nav3',
+    label: 'Nav list item 3',
+    href: '#',
+  },
+];
+
+export const NavListVerticalAutoExample = () => {
+  const layout = 'vertical';
+  const border = false;
+
+  return (
+    <NavListAuto
+      layout={layout}
+      border={border}
+      links={links}
+      aria-label="Nav list"
+    >
+      {links.map((item, key) => (
+        <NavListItemAuto key={key} item={item} />
+      ))}
+    </NavListAuto>
+  );
+};
+
+export default NavListVerticalAutoExample;

package/src/core/NavList/index.tsx

@@ -1,11 +1,8 @@
 export * from '@digigov/ui/core/NavList/NavListItem';
-export * from '@digigov/ui/core/NavList/NavListAuto';
-export * from '@digigov/ui/core/NavList/NavListItemAuto';
-export * from '@digigov/ui/core/NavList/NavListSubMenu';
-export * from '@digigov/ui/core/NavList/NavListContext';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 export * from '@digigov/ui/core/NavList/Nav';
 export * from '@digigov/ui/core/NavList/NavList';
-export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListItemLink';
 export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';

package/src/core/NavList/types.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
-import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
+import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import { NavProps } from '@digigov/ui/core/NavList';
 
 export type NavListLayout = 'horizontal' | 'vertical';
 
-export interface NavListAutoProps {
+export interface NavListAutoProps extends NavProps {
   children?: React.ReactNode;
   className?: string;
   layout?: NavListLayout;
+  border?: boolean;
+  fixed?: boolean;
   role?: string;
   openSubMenus?: boolean;
   floating?: boolean;
@@ -16,6 +19,14 @@ export interface NavListAutoProps {
   style?: BaseCSSProperties;
 }
 
+export interface NavListHeaderItemType {
+  name: string;
+  label?: string;
+  title?: string;
+  children?: React.ReactNode;
+  subMenu: NavListItemLinkInterface[];
+}
+
 interface NavListItemInterface {
   name: string;
   label?: string;
@@ -27,18 +38,20 @@ interface NavListItemLinkInterface extends NavListItemInterface {
   href: string;
 }
 
-export interface NavListHeaderItemType {
-  name: string;
-  label?: string;
-  title?: string;
-  children?: React.ReactNode;
-  subMenu: NavListItemLinkInterface[];
+interface NavListItemMenuInterface extends NavListItemInterface {
+  links: NavListItemLinkInterface[];
 }
 
 export type NavListItemType =
   | NavListItemLinkInterface
+  | NavListItemMenuContainerInterface
   | NavListItemSubMenuInterface;
 
+export interface NavListItemMenuContainerInterface
+  extends NavListItemInterface {
+  menu: NavListItemMenuInterface[];
+}
+
 export interface NavListItemSubMenuInterface extends NavListItemInterface {
   subMenu: NavListItemType[];
 }
@@ -61,5 +74,6 @@ export interface NavListItemProps {
   link?: NavListItemType;
   layout?: NavListLayout;
   active?: boolean;
-  setRegister?: (name: string) => any;
+  setRegisterButton?: (name: string) => any;
+  setRegisterLink?: (name: string) => any;
 }

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

@@ -8,7 +8,7 @@ import {
   useTabs,
 } from '@digigov/ui/core/Tabs';
 
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
 import {
@@ -30,9 +30,9 @@ export function Default() {
         <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
       </TabsList>
       <TabsPanel {...panel('a')}>
-        <Title size="md" element="h3">
+        <Heading size="m" element="h3">
           Στοιχεία πολίτη
-        </Title>
+        </Heading>
         <SummaryList>
           <SummaryListItem>
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
@@ -62,9 +62,9 @@ export function Default() {
         </SummaryList>
       </TabsPanel>
       <TabsPanel {...panel('b')}>
-        <Title size="md" element="h3">
+        <Heading size="m" element="h3">
           Yποθέσεις
-        </Title>
+        </Heading>
         Περιεχόμενα υποθέσεων
       </TabsPanel>
     </Tabs>

package/src/core/Tabs/index.tsx

@@ -1,20 +1,16 @@
 import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
 import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
+  useTogglableTab,
+  UseTogglableTabReturn,
+} from '@digigov/ui/hooks/useTogglableTab';
 
-export interface UseTabsReturn extends UseTogglableSectionsReturn {
+export interface UseTabsReturn extends UseTogglableTabReturn {
   panel: (key: string) => { active: boolean; tabIndex: number; id: string };
 }
 export const useTabs = (): UseTabsReturn => {
   const registeredPanels = useRef({});
   const goTo = useCallback((key: string) => {
-    console.log(
-      registeredPanels.current[key].offsetTop -
-        rest.registered.current[key].offsetTop
-    );
     if (
       registeredPanels.current[key].offsetTop -
         rest.registered.current[key].offsetTop >=
@@ -26,7 +22,7 @@ export const useTabs = (): UseTabsReturn => {
       });
     }
   }, []);
-  const { register, opened, ...rest } = useTogglableSections({
+  const { register, opened, ...rest } = useTogglableTab({
     singleOpen: true,
     toggleProperty: 'selected',
     onToggleProperty: 'onClick',