@digigov/ui 0.30.0-navlist.alpha.3 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.30.0-navlist.alpha.3",
+  "version": "0.30.1",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -20,8 +20,8 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "0.20.0-navlist.alpha.3",
-    "@digigov/react-extensions": "0.20.3-navlist.alpha.3"
+    "@digigov/react-core": "0.20.1",
+    "@digigov/react-extensions": "0.20.5"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -32,6 +32,8 @@ declare var _default: {
     '@digigov/ui/api/useResourceQuery': {};
     '@digigov/ui/api/utils': {};
     '@digigov/ui/app/App': {};
+    '@digigov/ui/app/BottomInfoContainer': {};
+    '@digigov/ui/app/BottomInfoContent': {};
     '@digigov/ui/app/Confirmation': {};
     '@digigov/ui/app/Footer': {};
     '@digigov/ui/app/Header/HeaderContent': {};
@@ -54,6 +56,7 @@ declare var _default: {
     '@digigov/ui/app/QrCodeViewer/qrcodegen': {};
     '@digigov/ui/app/QrCodeViewer/types': {};
     '@digigov/ui/app/QrCodeViewer/utils': {};
+    '@digigov/ui/app/ThemeSelectorOptions': {};
     '@digigov/ui/core/Accordion': {};
     '@digigov/ui/core/BackLink': {};
     '@digigov/ui/core/Base': {};
@@ -89,16 +92,16 @@ declare var _default: {
     '@digigov/ui/core/List/ListItemTitle': {};
     '@digigov/ui/core/Masthead': {};
     '@digigov/ui/core/NavList': {};
-    '@digigov/ui/core/NavList/NavHorizontal': {};
-    '@digigov/ui/core/NavList/NavHorizontalList': {};
-    '@digigov/ui/core/NavList/NavHorizontalListItem': {};
-    '@digigov/ui/core/NavList/NavHorizontalListItemButton': {};
-    '@digigov/ui/core/NavList/NavHorizontalListItemLink': {};
+    '@digigov/ui/core/NavList/Nav': {};
     '@digigov/ui/core/NavList/NavList': {};
+    '@digigov/ui/core/NavList/NavListAuto': {};
     '@digigov/ui/core/NavList/NavListBase': {};
     '@digigov/ui/core/NavList/NavListContext': {};
     '@digigov/ui/core/NavList/NavListItem': {};
+    '@digigov/ui/core/NavList/NavListItemAuto': {};
     '@digigov/ui/core/NavList/NavListItemBase': {};
+    '@digigov/ui/core/NavList/NavListItemButton': {};
+    '@digigov/ui/core/NavList/NavListItemLink': {};
     '@digigov/ui/core/NavList/NavListSubMenu': {};
     '@digigov/ui/core/NavList/NavMenu': {};
     '@digigov/ui/core/NavList/NavMenuContainer': {};
@@ -145,8 +148,10 @@ declare var _default: {
     '@digigov/ui/hooks/useDebounce': {};
     '@digigov/ui/hooks/useKeypress': {};
     '@digigov/ui/hooks/useLatest': {};
+    '@digigov/ui/hooks/useNavList': {};
     '@digigov/ui/hooks/useOutdatedBrowserCheck': {};
     '@digigov/ui/hooks/useSearch': {};
+    '@digigov/ui/hooks/useTheme': {};
     '@digigov/ui/hooks/useTogglableSections': {};
     '@digigov/ui': {};
     '@digigov/ui/layouts/Basic/Aside': {};

package/registry.js

@@ -73,6 +73,10 @@ var _digigov_ui_api_utils = _interopRequireWildcard(require("@digigov/ui/api/uti
 
 var _digigov_ui_app_App = _interopRequireWildcard(require("@digigov/ui/app/App"));
 
+var _digigov_ui_app_BottomInfoContainer = _interopRequireWildcard(require("@digigov/ui/app/BottomInfoContainer"));
+
+var _digigov_ui_app_BottomInfoContent = _interopRequireWildcard(require("@digigov/ui/app/BottomInfoContent"));
+
 var _digigov_ui_app_Confirmation = _interopRequireWildcard(require("@digigov/ui/app/Confirmation"));
 
 var _digigov_ui_app_Footer = _interopRequireWildcard(require("@digigov/ui/app/Footer"));
@@ -117,6 +121,8 @@ var _digigov_ui_app_QrCodeViewer_types = _interopRequireWildcard(require("@digig
 
 var _digigov_ui_app_QrCodeViewer_utils = _interopRequireWildcard(require("@digigov/ui/app/QrCodeViewer/utils"));
 
+var _digigov_ui_app_ThemeSelectorOptions = _interopRequireWildcard(require("@digigov/ui/app/ThemeSelectorOptions"));
+
 var _digigov_ui_core_Accordion = _interopRequireWildcard(require("@digigov/ui/core/Accordion"));
 
 var _digigov_ui_core_BackLink = _interopRequireWildcard(require("@digigov/ui/core/BackLink"));
@@ -187,26 +193,26 @@ var _digigov_ui_core_Masthead = _interopRequireWildcard(require("@digigov/ui/cor
 
 var _digigov_ui_core_NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList"));
 
-var _digigov_ui_core_NavList_NavHorizontal = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavHorizontal"));
-
-var _digigov_ui_core_NavList_NavHorizontalList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavHorizontalList"));
-
-var _digigov_ui_core_NavList_NavHorizontalListItem = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavHorizontalListItem"));
-
-var _digigov_ui_core_NavList_NavHorizontalListItemButton = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavHorizontalListItemButton"));
-
-var _digigov_ui_core_NavList_NavHorizontalListItemLink = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavHorizontalListItemLink"));
+var _digigov_ui_core_NavList_Nav = _interopRequireWildcard(require("@digigov/ui/core/NavList/Nav"));
 
 var _digigov_ui_core_NavList_NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavList"));
 
+var _digigov_ui_core_NavList_NavListAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListAuto"));
+
 var _digigov_ui_core_NavList_NavListBase = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListBase"));
 
 var _digigov_ui_core_NavList_NavListContext = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListContext"));
 
 var _digigov_ui_core_NavList_NavListItem = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItem"));
 
+var _digigov_ui_core_NavList_NavListItemAuto = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemAuto"));
+
 var _digigov_ui_core_NavList_NavListItemBase = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemBase"));
 
+var _digigov_ui_core_NavList_NavListItemButton = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemButton"));
+
+var _digigov_ui_core_NavList_NavListItemLink = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListItemLink"));
+
 var _digigov_ui_core_NavList_NavListSubMenu = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavListSubMenu"));
 
 var _digigov_ui_core_NavList_NavMenu = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavMenu"));
@@ -299,10 +305,14 @@ var _digigov_ui_hooks_useKeypress = _interopRequireWildcard(require("@digigov/ui
 
 var _digigov_ui_hooks_useLatest = _interopRequireWildcard(require("@digigov/ui/hooks/useLatest"));
 
+var _digigov_ui_hooks_useNavList = _interopRequireWildcard(require("@digigov/ui/hooks/useNavList"));
+
 var _digigov_ui_hooks_useOutdatedBrowserCheck = _interopRequireWildcard(require("@digigov/ui/hooks/useOutdatedBrowserCheck"));
 
 var _digigov_ui_hooks_useSearch = _interopRequireWildcard(require("@digigov/ui/hooks/useSearch"));
 
+var _digigov_ui_hooks_useTheme = _interopRequireWildcard(require("@digigov/ui/hooks/useTheme"));
+
 var _digigov_ui_hooks_useTogglableSections = _interopRequireWildcard(require("@digigov/ui/hooks/useTogglableSections"));
 
 var _digigov_ui = _interopRequireWildcard(require("@digigov/ui"));
@@ -521,6 +531,8 @@ var _default = {
   '@digigov/ui/api/useResourceQuery': lazyImport(_digigov_ui_api_useResourceQuery),
   '@digigov/ui/api/utils': lazyImport(_digigov_ui_api_utils),
   '@digigov/ui/app/App': lazyImport(_digigov_ui_app_App),
+  '@digigov/ui/app/BottomInfoContainer': lazyImport(_digigov_ui_app_BottomInfoContainer),
+  '@digigov/ui/app/BottomInfoContent': lazyImport(_digigov_ui_app_BottomInfoContent),
   '@digigov/ui/app/Confirmation': lazyImport(_digigov_ui_app_Confirmation),
   '@digigov/ui/app/Footer': lazyImport(_digigov_ui_app_Footer),
   '@digigov/ui/app/Header/HeaderContent': lazyImport(_digigov_ui_app_Header_HeaderContent),
@@ -543,6 +555,7 @@ var _default = {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
+  '@digigov/ui/app/ThemeSelectorOptions': lazyImport(_digigov_ui_app_ThemeSelectorOptions),
   '@digigov/ui/core/Accordion': lazyImport(_digigov_ui_core_Accordion),
   '@digigov/ui/core/BackLink': lazyImport(_digigov_ui_core_BackLink),
   '@digigov/ui/core/Base': lazyImport(_digigov_ui_core_Base),
@@ -578,16 +591,16 @@ var _default = {
   '@digigov/ui/core/List/ListItemTitle': lazyImport(_digigov_ui_core_List_ListItemTitle),
   '@digigov/ui/core/Masthead': lazyImport(_digigov_ui_core_Masthead),
   '@digigov/ui/core/NavList': lazyImport(_digigov_ui_core_NavList),
-  '@digigov/ui/core/NavList/NavHorizontal': lazyImport(_digigov_ui_core_NavList_NavHorizontal),
-  '@digigov/ui/core/NavList/NavHorizontalList': lazyImport(_digigov_ui_core_NavList_NavHorizontalList),
-  '@digigov/ui/core/NavList/NavHorizontalListItem': lazyImport(_digigov_ui_core_NavList_NavHorizontalListItem),
-  '@digigov/ui/core/NavList/NavHorizontalListItemButton': lazyImport(_digigov_ui_core_NavList_NavHorizontalListItemButton),
-  '@digigov/ui/core/NavList/NavHorizontalListItemLink': lazyImport(_digigov_ui_core_NavList_NavHorizontalListItemLink),
+  '@digigov/ui/core/NavList/Nav': lazyImport(_digigov_ui_core_NavList_Nav),
   '@digigov/ui/core/NavList/NavList': lazyImport(_digigov_ui_core_NavList_NavList),
+  '@digigov/ui/core/NavList/NavListAuto': lazyImport(_digigov_ui_core_NavList_NavListAuto),
   '@digigov/ui/core/NavList/NavListBase': lazyImport(_digigov_ui_core_NavList_NavListBase),
   '@digigov/ui/core/NavList/NavListContext': lazyImport(_digigov_ui_core_NavList_NavListContext),
   '@digigov/ui/core/NavList/NavListItem': lazyImport(_digigov_ui_core_NavList_NavListItem),
+  '@digigov/ui/core/NavList/NavListItemAuto': lazyImport(_digigov_ui_core_NavList_NavListItemAuto),
   '@digigov/ui/core/NavList/NavListItemBase': lazyImport(_digigov_ui_core_NavList_NavListItemBase),
+  '@digigov/ui/core/NavList/NavListItemButton': lazyImport(_digigov_ui_core_NavList_NavListItemButton),
+  '@digigov/ui/core/NavList/NavListItemLink': lazyImport(_digigov_ui_core_NavList_NavListItemLink),
   '@digigov/ui/core/NavList/NavListSubMenu': lazyImport(_digigov_ui_core_NavList_NavListSubMenu),
   '@digigov/ui/core/NavList/NavMenu': lazyImport(_digigov_ui_core_NavList_NavMenu),
   '@digigov/ui/core/NavList/NavMenuContainer': lazyImport(_digigov_ui_core_NavList_NavMenuContainer),
@@ -634,8 +647,10 @@ var _default = {
   '@digigov/ui/hooks/useDebounce': lazyImport(_digigov_ui_hooks_useDebounce),
   '@digigov/ui/hooks/useKeypress': lazyImport(_digigov_ui_hooks_useKeypress),
   '@digigov/ui/hooks/useLatest': lazyImport(_digigov_ui_hooks_useLatest),
+  '@digigov/ui/hooks/useNavList': lazyImport(_digigov_ui_hooks_useNavList),
   '@digigov/ui/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/hooks/useSearch': lazyImport(_digigov_ui_hooks_useSearch),
+  '@digigov/ui/hooks/useTheme': lazyImport(_digigov_ui_hooks_useTheme),
   '@digigov/ui/hooks/useTogglableSections': lazyImport(_digigov_ui_hooks_useTogglableSections),
   '@digigov/ui': lazyImport(_digigov_ui),
   '@digigov/ui/layouts/Basic/Aside': lazyImport(_digigov_ui_layouts_Basic_Aside),

package/src/admin/Drawer/__stories__/Default.tsx

@@ -1,8 +1,20 @@
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/admin/Drawer';
-import { NavList, NavListItem } from '@digigov/ui/core/NavList';
+import {
+  isNavListItemLinkInterface,
+  NavListAuto,
+  NavListItem,
+  NavMenu,
+  NavMenuContainer,
+  NavMenuContainerContent,
+  NavMenuContainerContentList,
+  NavMenuContainerContentListItem,
+  NavMenuContainerTitle,
+} from '@digigov/ui/core/NavList';
+import { useNavList } from "@digigov/ui/hooks/useNavList";
 import { Title } from '@digigov/ui/typography/Title';
 import { DrawerHeading } from '@digigov/ui/admin/Drawer';
+import { Link } from '@digigov/ui/core';
 
 function useDrawer() {
   const [open, setOpen] = useState(true);
@@ -47,22 +59,58 @@ const links = [
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
 
+  const { container, register } = useNavList();
+  const setRegister = (name: string) => {
+    return { ...register(name) };
+  };
+
+  const layout = 'vertical';
+
   return (
     <Drawer direction="left" open={open}>
       <DrawerHeading onClick={() => toggleDrawer()}>
         <Title size="md">Menu</Title>
       </DrawerHeading>
-      <NavList links={links} aria-label="Nav list" role="menu">
-        {links.map((link, key) => (
-          <NavListItem
-            key={key}
-            name={link.name}
-            aria-label={link.label}
-            role="menuitem"
-            aria-haspopup={link.subMenu ? 'true' : 'false'}
-          />
+      <NavListAuto
+        layout={layout}
+        links={links}
+        aria-label="Nav list"
+        role="menu"
+      >
+        {links.map((item, key) => (
+          <React.Fragment key={key}>
+            <NavListItem
+              layout={layout}
+              link={item}
+              setRegister={setRegister}
+            />
+            <NavMenu layout={layout} {...container(item.name)}>
+              <NavMenuContainer
+                layout={layout}
+                paddingLeft={5}
+                paddingRight={5}
+              >
+                <NavMenuContainerTitle layout={layout}>
+                  {item.label}
+                </NavMenuContainerTitle>
+                <NavMenuContainerContent>
+                  <NavMenuContainerContentList layout={layout}>
+                    {item.subMenu?.map((subMenu, menuIndex) => {
+                      return (
+                        isNavListItemLinkInterface(subMenu) && (
+                          <NavMenuContainerContentListItem key={menuIndex}>
+                            <Link href={subMenu.href}>{subMenu.label}</Link>
+                          </NavMenuContainerContentListItem>
+                        )
+                      );
+                    })}
+                  </NavMenuContainerContentList>
+                </NavMenuContainerContent>
+              </NavMenuContainer>
+            </NavMenu>
+          </React.Fragment>
         ))}
-      </NavList>
+      </NavListAuto>
     </Drawer>
   );
 };

package/src/app/BottomInfoContainer/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Container, {ContainerProps} from '@digigov/react-core/Container';
+
+export interface BottomInfoContainerProps extends ContainerProps {}
+/**
+ * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
+ */
+export const BottomInfoContainer = React.forwardRef<
+  HTMLDivElement,
+  BottomInfoContainerProps
+>(function BottomInfoContainer({ className, children, ...props }, ref) {
+  return (
+    <Container ref={ref} className="govgr-bottom-info__container" {...props}>
+      {children}
+    </Container>
+  );
+});
+
+export default BottomInfoContainer;

package/src/app/BottomInfoContent/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
+
+export interface BottomInfoContentProps extends GridProps {}
+/**
+ * BottomInfoContent is used inside the BottomInfoContainer component.
+ */
+
+export const BottomInfoContent = React.forwardRef<
+  HTMLDivElement,
+  BottomInfoContentProps
+>(function BottomInfoContent(
+  { className, xs = 3, md = 3, lg = 3, xl = 3, children, ...props },
+  ref
+) {
+  return (
+    <Grid
+      item
+      xs={xs}
+      md={md}
+      lg={lg}
+      xl={xl}
+      ref={ref}
+      className="govgr-bottom-info__content"
+      {...props}
+    >
+      {children}
+    </Grid>
+  );
+});
+
+export default BottomInfoContent;