@digigov/ui 1.0.0-88820b1e → 1.0.0-8bbf3ef2

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,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

@@ -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 active={false}>
-          <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 active={false}>
-          <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/index.mdx

@@ -9,8 +9,7 @@ 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
 

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

@@ -21,15 +21,17 @@ import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 export function Default() {
-  const { register, panel } = useTabs();
+  const { register, opened, panel } = useTabs();
+
   return (
     <Tabs>
       <TabsHeading size='md'>Περιεχόμενα</TabsHeading>
       <TabsList>
-        <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
-        <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+        <TabsListItem {...register('citizen')} open={Object.keys(opened).length === 0 || opened['citizen']}>Στοιχεία πολίτη</TabsListItem>
+        <TabsListItem {...register('cases')}>Οι υποθέσεις τους</TabsListItem>
+        <TabsListItem {...register('history')}>Ιστορικό</TabsListItem>
       </TabsList>
-      <TabsPanel {...panel('a')}>
+      <TabsPanel {...panel('citizen')} active={Object.keys(opened).length === 0 || opened['citizen']}>
         <Heading size="md" element="h3">
           Στοιχεία πολίτη
         </Heading>
@@ -38,7 +40,6 @@ export function Default() {
             <SummaryListItemKey>Όνομα</SummaryListItemKey>
             <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
             <SummaryListItemAction>
-              {' '}
               <Link href="#">
                 Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
               </Link>
@@ -52,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

@@ -13,6 +13,12 @@ import Tabs from '@digigov/ui/navigation/Tabs';
 
 <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
 
 <PropTypes packageName="@digigov/ui" component="Tabs" />

package/src/registry.js

@@ -117,6 +117,8 @@ import * as _digigov_ui_i18n from '@digigov/ui/i18n';
 import * as _digigov_ui_i18n_locales_el from '@digigov/ui/i18n/locales/el';
 import * as _digigov_ui_i18n_locales_en from '@digigov/ui/i18n/locales/en';
 import * as _digigov_ui_icons_Icon from '@digigov/ui/icons/Icon';
+import * as _digigov_ui_icons_ImageLogo from '@digigov/ui/icons/ImageLogo';
+import * as _digigov_ui_icons_ImageLogoSet from '@digigov/ui/icons/ImageLogoSet';
 import * as _digigov_ui_icons from '@digigov/ui/icons';
 import * as _digigov_ui from '@digigov/ui';
 import * as _digigov_ui_layouts_Admin from '@digigov/ui/layouts/Admin';
@@ -148,26 +150,8 @@ import * as _digigov_ui_navigation_NavList_hooks_useTogglableNav from '@digigov/
 import * as _digigov_ui_navigation_NavList from '@digigov/ui/navigation/NavList';
 import * as _digigov_ui_navigation_NavList_Nav from '@digigov/ui/navigation/NavList/Nav';
 import * as _digigov_ui_navigation_NavList_NavList from '@digigov/ui/navigation/NavList/NavList';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListBaseAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListContextAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemAnchorAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemButtonAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListMenuAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListSubMenuAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto';
-import * as _digigov_ui_navigation_NavList_NavListItem from '@digigov/ui/navigation/NavList/NavListItem';
-import * as _digigov_ui_navigation_NavList_NavListItemBase from '@digigov/ui/navigation/NavList/NavListItemBase';
-import * as _digigov_ui_navigation_NavList_NavListItemButton from '@digigov/ui/navigation/NavList/NavListItemButton';
-import * as _digigov_ui_navigation_NavList_NavListItemLink from '@digigov/ui/navigation/NavList/NavListItemLink';
-import * as _digigov_ui_navigation_NavList_NavMenu from '@digigov/ui/navigation/NavList/NavMenu';
-import * as _digigov_ui_navigation_NavList_NavMenuContainer from '@digigov/ui/navigation/NavList/NavMenuContainer';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContent from '@digigov/ui/navigation/NavList/NavMenuContainerContent';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContentList from '@digigov/ui/navigation/NavList/NavMenuContainerContentList';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContentListItem from '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerTitle from '@digigov/ui/navigation/NavList/NavMenuContainerTitle';
-import * as _digigov_ui_navigation_NavList_NavVertical from '@digigov/ui/navigation/NavList/NavVertical';
-import * as _digigov_ui_navigation_NavList_NavVerticalItem from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import * as _digigov_ui_navigation_NavList_NavListAuto from '@digigov/ui/navigation/NavList/NavListAuto';
+import * as _digigov_ui_navigation_NavList_NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
 import * as _digigov_ui_navigation_NavList_types from '@digigov/ui/navigation/NavList/types';
 import * as _digigov_ui_navigation_Pagination from '@digigov/ui/navigation/Pagination';
 import * as _digigov_ui_navigation_SkipLink from '@digigov/ui/navigation/SkipLink';
@@ -193,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) {
@@ -333,6 +318,8 @@ export default {
   '@digigov/ui/i18n/locales/el': lazyImport(_digigov_ui_i18n_locales_el),
   '@digigov/ui/i18n/locales/en': lazyImport(_digigov_ui_i18n_locales_en),
   '@digigov/ui/icons/Icon': lazyImport(_digigov_ui_icons_Icon),
+  '@digigov/ui/icons/ImageLogo': lazyImport(_digigov_ui_icons_ImageLogo),
+  '@digigov/ui/icons/ImageLogoSet': lazyImport(_digigov_ui_icons_ImageLogoSet),
   '@digigov/ui/icons': lazyImport(_digigov_ui_icons),
   '@digigov/ui': lazyImport(_digigov_ui),
   '@digigov/ui/layouts/Admin': lazyImport(_digigov_ui_layouts_Admin),
@@ -364,26 +351,8 @@ export default {
   '@digigov/ui/navigation/NavList': lazyImport(_digigov_ui_navigation_NavList),
   '@digigov/ui/navigation/NavList/Nav': lazyImport(_digigov_ui_navigation_NavList_Nav),
   '@digigov/ui/navigation/NavList/NavList': lazyImport(_digigov_ui_navigation_NavList_NavList),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListBaseAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListContextAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemAnchorAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemButtonAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListMenuAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListSubMenuAuto),
-  '@digigov/ui/navigation/NavList/NavListItem': lazyImport(_digigov_ui_navigation_NavList_NavListItem),
-  '@digigov/ui/navigation/NavList/NavListItemBase': lazyImport(_digigov_ui_navigation_NavList_NavListItemBase),
-  '@digigov/ui/navigation/NavList/NavListItemButton': lazyImport(_digigov_ui_navigation_NavList_NavListItemButton),
-  '@digigov/ui/navigation/NavList/NavListItemLink': lazyImport(_digigov_ui_navigation_NavList_NavListItemLink),
-  '@digigov/ui/navigation/NavList/NavMenu': lazyImport(_digigov_ui_navigation_NavList_NavMenu),
-  '@digigov/ui/navigation/NavList/NavMenuContainer': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainer),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContent': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContent),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContentList': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContentList),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContentListItem),
-  '@digigov/ui/navigation/NavList/NavMenuContainerTitle': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerTitle),
-  '@digigov/ui/navigation/NavList/NavVertical': lazyImport(_digigov_ui_navigation_NavList_NavVertical),
-  '@digigov/ui/navigation/NavList/NavVerticalItem': lazyImport(_digigov_ui_navigation_NavList_NavVerticalItem),
+  '@digigov/ui/navigation/NavList/NavListAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto),
+  '@digigov/ui/navigation/NavList/NavMenuContentList': lazyImport(_digigov_ui_navigation_NavList_NavMenuContentList),
   '@digigov/ui/navigation/NavList/types': lazyImport(_digigov_ui_navigation_NavList_types),
   '@digigov/ui/navigation/Pagination': lazyImport(_digigov_ui_navigation_Pagination),
   '@digigov/ui/navigation/SkipLink': lazyImport(_digigov_ui_navigation_SkipLink),
@@ -409,10 +378,12 @@ 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)
 };
-  import * as _digigov_ui_app_Footer_Footer_stories from '@digigov/ui/app/Footer/Footer.stories';
+  import * as _digigov_ui_app_BannerContainer_BannerContainer_stories from '@digigov/ui/app/BannerContainer/BannerContainer.stories';
+import * as _digigov_ui_app_Footer_Footer_stories from '@digigov/ui/app/Footer/Footer.stories';
 import * as _digigov_ui_app_Header_Header_stories from '@digigov/ui/app/Header/Header.stories';
 import * as _digigov_ui_app_Loader_Loader_stories from '@digigov/ui/app/Loader/Loader.stories';
 import * as _digigov_ui_app_Masthead_Masthead_stories from '@digigov/ui/app/Masthead/Masthead.stories';
@@ -445,7 +416,7 @@ import * as _digigov_ui_form_DateInputContainer_DateInputContainer_stories from
 import * as _digigov_ui_form_ErrorMessage_ErrorMessage_stories from '@digigov/ui/form/ErrorMessage/ErrorMessage.stories';
 import * as _digigov_ui_form_FileUpload_FileUpload_stories from '@digigov/ui/form/FileUpload/FileUpload.stories';
 import * as _digigov_ui_form_RadioContainer_RadioContainer_stories from '@digigov/ui/form/RadioContainer/RadioContainer.stories';
-import * as _digigov_ui_form_SelectContainer_Select_stories from '@digigov/ui/form/SelectContainer/Select.stories';
+import * as _digigov_ui_form_SelectContainer_SelectContainer_stories from '@digigov/ui/form/SelectContainer/SelectContainer.stories';
 import * as _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories from '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories';
 import * as _digigov_ui_form_TextArea_TextArea_stories from '@digigov/ui/form/TextArea/TextArea.stories';
 import * as _digigov_ui_form_TextInput_TextInput_stories from '@digigov/ui/form/TextInput/TextInput.stories';
@@ -470,7 +441,8 @@ import * as _digigov_ui_typography_Paragraph_Paragraph_stories from '@digigov/ui
 import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digigov/ui/utils/VisuallyHidden/VisuallyHidden.stories'
 
   export const stories = {
-      '@digigov/ui/app/Footer/Footer.stories': _digigov_ui_app_Footer_Footer_stories,
+      '@digigov/ui/app/BannerContainer/BannerContainer.stories': _digigov_ui_app_BannerContainer_BannerContainer_stories,
+  '@digigov/ui/app/Footer/Footer.stories': _digigov_ui_app_Footer_Footer_stories,
   '@digigov/ui/app/Header/Header.stories': _digigov_ui_app_Header_Header_stories,
   '@digigov/ui/app/Loader/Loader.stories': _digigov_ui_app_Loader_Loader_stories,
   '@digigov/ui/app/Masthead/Masthead.stories': _digigov_ui_app_Masthead_Masthead_stories,
@@ -503,7 +475,7 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/form/ErrorMessage/ErrorMessage.stories': _digigov_ui_form_ErrorMessage_ErrorMessage_stories,
   '@digigov/ui/form/FileUpload/FileUpload.stories': _digigov_ui_form_FileUpload_FileUpload_stories,
   '@digigov/ui/form/RadioContainer/RadioContainer.stories': _digigov_ui_form_RadioContainer_RadioContainer_stories,
-  '@digigov/ui/form/SelectContainer/Select.stories': _digigov_ui_form_SelectContainer_Select_stories,
+  '@digigov/ui/form/SelectContainer/SelectContainer.stories': _digigov_ui_form_SelectContainer_SelectContainer_stories,
   '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories': _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories,
   '@digigov/ui/form/TextArea/TextArea.stories': _digigov_ui_form_TextArea_TextArea_stories,
   '@digigov/ui/form/TextInput/TextInput.stories': _digigov_ui_form_TextInput_TextInput_stories,

package/src/typography/Hint/index.mdx

@@ -13,6 +13,8 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ### Font sizes
 
+<Story packageName="@digigov/ui" component="typography/Hint" story="FontSizes.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Hint" />

package/src/typography/NormalText/index.mdx

@@ -23,6 +23,8 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontWeight.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="NormalText" />

package/src/typography/Paragraph/index.mdx

@@ -27,6 +27,7 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Paragraph" />