@digigov/ui 0.30.0-navlist.alpha.2 → 0.30.0

package/es/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -2,53 +2,88 @@
 
 exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side children  1`] = `
 <ForwardRef(Layout)>
-  <div
+  <ForwardRef(Base)
+    as="div"
     className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
   >
-    <withDeprecationComponent>
+    <div
+      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    >
       <ForwardRef(Top)>
-        <div
+        <ForwardRef(Base)
+          as="div"
           className="govgr-top"
-        >
-          Header content
-        </div>
-      </ForwardRef(Top)>
-    </withDeprecationComponent>
-    <withDeprecationComponent>
-      <ForwardRef(Container)>
-        <div
-          className="govgr-width-container"
         >
           <div
-            className="govgr-main-wrapper"
+            className="govgr-top"
+          >
+            Header content
+          </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Top)>
+      <withDeprecationComponent>
+        <ForwardRef(Container)>
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-width-container"
           >
-            <ForwardRef(Main)>
-              <main
-                className="govgr-grid-column-two-thirds"
+            <div
+              className="govgr-width-container"
+            >
+              <ForwardRef(Base)
+                as="div"
+                className="govgr-main-wrapper"
               >
-                Main content
-              </main>
-            </ForwardRef(Main)>
-            <withDeprecationComponent>
-              <ForwardRef(Aside)>
-                <aside
-                  className="govgr-grid-column-one-third"
+                <div
+                  className="govgr-main-wrapper"
                 >
-                  Side content
-                </aside>
-              </ForwardRef(Aside)>
-            </withDeprecationComponent>
+                  <ForwardRef(Main)>
+                    <ForwardRef(Base)
+                      as="main"
+                      className="govgr-grid-column-two-thirds"
+                      id="main-content"
+                    >
+                      <main
+                        className="govgr-grid-column-two-thirds"
+                        id="main-content"
+                      >
+                        Main content
+                      </main>
+                    </ForwardRef(Base)>
+                  </ForwardRef(Main)>
+                  <withDeprecationComponent>
+                    <ForwardRef(Aside)>
+                      <ForwardRef(Base)
+                        as="aside"
+                        className="govgr-grid-column-one-third"
+                      >
+                        <aside
+                          className="govgr-grid-column-one-third"
+                        >
+                          Side content
+                        </aside>
+                      </ForwardRef(Base)>
+                    </ForwardRef(Aside)>
+                  </withDeprecationComponent>
+                </div>
+              </ForwardRef(Base)>
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Container)>
+      </withDeprecationComponent>
+      <ForwardRef(Bottom)>
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-bottom"
+        >
+          <div
+            className="govgr-bottom"
+          >
+            Bottom content
           </div>
-        </div>
-      </ForwardRef(Container)>
-    </withDeprecationComponent>
-    <ForwardRef(Bottom)>
-      <div
-        className="govgr-bottom"
-      >
-        Bottom content
-      </div>
-    </ForwardRef(Bottom)>
-  </div>
+        </ForwardRef(Base)>
+      </ForwardRef(Bottom)>
+    </div>
+  </ForwardRef(Base)>
 </ForwardRef(Layout)>
 `;

package/es/registry.js

@@ -31,6 +31,8 @@ import * as _digigov_ui_api_useResourceAction from '@digigov/ui/api/useResourceA
 import * as _digigov_ui_api_useResourceQuery from '@digigov/ui/api/useResourceQuery';
 import * as _digigov_ui_api_utils from '@digigov/ui/api/utils';
 import * as _digigov_ui_app_App from '@digigov/ui/app/App';
+import * as _digigov_ui_app_BottomInfoContainer from '@digigov/ui/app/BottomInfoContainer';
+import * as _digigov_ui_app_BottomInfoContent from '@digigov/ui/app/BottomInfoContent';
 import * as _digigov_ui_app_Confirmation from '@digigov/ui/app/Confirmation';
 import * as _digigov_ui_app_Footer from '@digigov/ui/app/Footer';
 import * as _digigov_ui_app_Header_HeaderContent from '@digigov/ui/app/Header/HeaderContent';
@@ -53,6 +55,7 @@ import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 import * as _digigov_ui_app_QrCodeViewer_qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 import * as _digigov_ui_app_QrCodeViewer_types from '@digigov/ui/app/QrCodeViewer/types';
 import * as _digigov_ui_app_QrCodeViewer_utils from '@digigov/ui/app/QrCodeViewer/utils';
+import * as _digigov_ui_app_ThemeSelectorOptions from '@digigov/ui/app/ThemeSelectorOptions';
 import * as _digigov_ui_core_Accordion from '@digigov/ui/core/Accordion';
 import * as _digigov_ui_core_BackLink from '@digigov/ui/core/BackLink';
 import * as _digigov_ui_core_Base from '@digigov/ui/core/Base';
@@ -88,16 +91,16 @@ import * as _digigov_ui_core_List_ListItemText from '@digigov/ui/core/List/ListI
 import * as _digigov_ui_core_List_ListItemTitle from '@digigov/ui/core/List/ListItemTitle';
 import * as _digigov_ui_core_Masthead from '@digigov/ui/core/Masthead';
 import * as _digigov_ui_core_NavList from '@digigov/ui/core/NavList';
-import * as _digigov_ui_core_NavList_NavHorizontal from '@digigov/ui/core/NavList/NavHorizontal';
-import * as _digigov_ui_core_NavList_NavHorizontalList from '@digigov/ui/core/NavList/NavHorizontalList';
-import * as _digigov_ui_core_NavList_NavHorizontalListItem from '@digigov/ui/core/NavList/NavHorizontalListItem';
-import * as _digigov_ui_core_NavList_NavHorizontalListItemButton from '@digigov/ui/core/NavList/NavHorizontalListItemButton';
-import * as _digigov_ui_core_NavList_NavHorizontalListItemLink from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
+import * as _digigov_ui_core_NavList_Nav from '@digigov/ui/core/NavList/Nav';
 import * as _digigov_ui_core_NavList_NavList from '@digigov/ui/core/NavList/NavList';
+import * as _digigov_ui_core_NavList_NavListAuto from '@digigov/ui/core/NavList/NavListAuto';
 import * as _digigov_ui_core_NavList_NavListBase from '@digigov/ui/core/NavList/NavListBase';
 import * as _digigov_ui_core_NavList_NavListContext from '@digigov/ui/core/NavList/NavListContext';
 import * as _digigov_ui_core_NavList_NavListItem from '@digigov/ui/core/NavList/NavListItem';
+import * as _digigov_ui_core_NavList_NavListItemAuto from '@digigov/ui/core/NavList/NavListItemAuto';
 import * as _digigov_ui_core_NavList_NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
+import * as _digigov_ui_core_NavList_NavListItemButton from '@digigov/ui/core/NavList/NavListItemButton';
+import * as _digigov_ui_core_NavList_NavListItemLink from '@digigov/ui/core/NavList/NavListItemLink';
 import * as _digigov_ui_core_NavList_NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
 import * as _digigov_ui_core_NavList_NavMenu from '@digigov/ui/core/NavList/NavMenu';
 import * as _digigov_ui_core_NavList_NavMenuContainer from '@digigov/ui/core/NavList/NavMenuContainer';
@@ -144,8 +147,10 @@ import * as _digigov_ui_govgr from '@digigov/ui/govgr';
 import * as _digigov_ui_hooks_useDebounce from '@digigov/ui/hooks/useDebounce';
 import * as _digigov_ui_hooks_useKeypress from '@digigov/ui/hooks/useKeypress';
 import * as _digigov_ui_hooks_useLatest from '@digigov/ui/hooks/useLatest';
+import * as _digigov_ui_hooks_useNavList from '@digigov/ui/hooks/useNavList';
 import * as _digigov_ui_hooks_useOutdatedBrowserCheck from '@digigov/ui/hooks/useOutdatedBrowserCheck';
 import * as _digigov_ui_hooks_useSearch from '@digigov/ui/hooks/useSearch';
+import * as _digigov_ui_hooks_useTheme from '@digigov/ui/hooks/useTheme';
 import * as _digigov_ui_hooks_useTogglableSections from '@digigov/ui/hooks/useTogglableSections';
 import * as _digigov_ui from '@digigov/ui';
 import * as _digigov_ui_layouts_Basic_Aside from '@digigov/ui/layouts/Basic/Aside';
@@ -226,6 +231,8 @@ export 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),
@@ -248,6 +255,7 @@ export 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),
@@ -283,16 +291,16 @@ export 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),
@@ -339,8 +347,10 @@ export 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/esm/admin/Drawer/__stories__/Default.js

@@ -1,9 +1,12 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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() {
   var _useState = useState(true),
@@ -59,6 +62,15 @@ export var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
+  var _useNavList = useNavList(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return _extends({}, register(name));
+  };
+
+  var layout = 'vertical';
   return /*#__PURE__*/React.createElement(Drawer, {
     direction: "left",
     open: open
@@ -66,18 +78,37 @@ export var Default = function Default() {
     onClick: function onClick() {
       return toggleDrawer();
     }
-  }, _ref), /*#__PURE__*/React.createElement(NavList, {
+  }, _ref), /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
     links: links,
     "aria-label": "Nav list",
     role: "menu"
-  }, links.map(function (link, key) {
-    return /*#__PURE__*/React.createElement(NavListItem, {
-      key: key,
-      name: link.name,
-      "aria-label": link.label,
-      role: "menuitem",
-      "aria-haspopup": link.subMenu ? 'true' : 'false'
-    });
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItem, {
+      layout: layout,
+      link: item,
+      setRegister: setRegister
+    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
+      layout: layout
+    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      layout: layout,
+      paddingLeft: 5,
+      paddingRight: 5
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
+      layout: layout
+    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      layout: layout
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+        key: menuIndex
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: subMenu.href
+      }, subMenu.label));
+    }))))));
   })));
 };
 export default Default;

package/esm/app/BottomInfoContainer/index.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import Container from '@digigov/react-core/Container';
+
+/**
+ * Bottom BottomInfoContainer is used inside the Bottom component and it must be the first component in order.
+ */
+export var BottomInfoContainer = /*#__PURE__*/React.forwardRef(function BottomInfoContainer(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    ref: ref,
+    className: "govgr-bottom-info__container"
+  }, props), children);
+});
+export default BottomInfoContainer;

package/esm/app/BottomInfoContent/index.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "xs", "md", "lg", "xl", "children"];
+import React from 'react';
+import Grid from '@digigov/react-core/Grid';
+
+/**
+ * BottomInfoContent is used inside the BottomInfoContainer component.
+ */
+export var BottomInfoContent = /*#__PURE__*/React.forwardRef(function BottomInfoContent(_ref, ref) {
+  var className = _ref.className,
+      _ref$xs = _ref.xs,
+      xs = _ref$xs === void 0 ? 3 : _ref$xs,
+      _ref$md = _ref.md,
+      md = _ref$md === void 0 ? 3 : _ref$md,
+      _ref$lg = _ref.lg,
+      lg = _ref$lg === void 0 ? 3 : _ref$lg,
+      _ref$xl = _ref.xl,
+      xl = _ref$xl === void 0 ? 3 : _ref$xl,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Grid, _extends({
+    item: true,
+    xs: xs,
+    md: md,
+    lg: lg,
+    xl: xl,
+    ref: ref,
+    className: "govgr-bottom-info__content"
+  }, props), children);
+});
+export default BottomInfoContent;