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

package/src/core/NavList/__snapshots__/index.spec.tsx.snap

@@ -1,334 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ThemeProvider
-  theme={
-    Object {
-      "breakpoints": Object {
-        "between": [Function],
-        "down": [Function],
-        "keys": Array [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-          "xl",
-        ],
-        "only": [Function],
-        "up": [Function],
-        "values": Object {
-          "lg": 1280,
-          "md": 960,
-          "sm": 600,
-          "xl": 1920,
-          "xs": 0,
-        },
-        "width": [Function],
-      },
-      "direction": "ltr",
-      "footer": Object {
-        "contrastText": "",
-        "link": "",
-        "main": "",
-      },
-      "header": Object {
-        "border": Object {
-          "background": "",
-          "height": "",
-          "width": "",
-        },
-        "height": "",
-        "logo": Object {
-          "component": "",
-          "height": "",
-        },
-      },
-      "mixins": Object {
-        "gutters": [Function],
-        "toolbar": Object {
-          "@media (min-width:0px) and (orientation: landscape)": Object {
-            "minHeight": 48,
-          },
-          "@media (min-width:600px)": Object {
-            "minHeight": 64,
-          },
-          "minHeight": 56,
-        },
-      },
-      "overrides": Object {},
-      "palette": Object {
-        "action": Object {
-          "activatedOpacity": 0.12,
-          "active": "rgba(0, 0, 0, 0.54)",
-          "disabled": "rgba(0, 0, 0, 0.26)",
-          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-          "disabledOpacity": 0.38,
-          "focus": "rgba(0, 0, 0, 0.12)",
-          "focusOpacity": 0.12,
-          "hover": "rgba(0, 0, 0, 0.04)",
-          "hoverOpacity": 0.04,
-          "selected": "rgba(0, 0, 0, 0.08)",
-          "selectedOpacity": 0.08,
-        },
-        "augmentColor": [Function],
-        "background": Object {
-          "default": "#fafafa",
-          "paper": "#fff",
-        },
-        "common": Object {
-          "black": "#000",
-          "white": "#fff",
-        },
-        "contrastThreshold": 3,
-        "divider": "rgba(0, 0, 0, 0.12)",
-        "error": Object {
-          "contrastText": "#fff",
-          "dark": "#d32f2f",
-          "light": "#e57373",
-          "main": "#f44336",
-        },
-        "getContrastText": [Function],
-        "grey": Object {
-          "100": "#f5f5f5",
-          "200": "#eeeeee",
-          "300": "#e0e0e0",
-          "400": "#bdbdbd",
-          "50": "#fafafa",
-          "500": "#9e9e9e",
-          "600": "#757575",
-          "700": "#616161",
-          "800": "#424242",
-          "900": "#212121",
-          "A100": "#d5d5d5",
-          "A200": "#aaaaaa",
-          "A400": "#303030",
-          "A700": "#616161",
-        },
-        "info": Object {
-          "contrastText": "#fff",
-          "dark": "#1976d2",
-          "light": "#64b5f6",
-          "main": "#2196f3",
-        },
-        "primary": Object {
-          "contrastText": "#fff",
-          "dark": "#303f9f",
-          "light": "#7986cb",
-          "main": "#3f51b5",
-        },
-        "secondary": Object {
-          "contrastText": "#fff",
-          "dark": "#c51162",
-          "light": "#ff4081",
-          "main": "#f50057",
-        },
-        "success": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#388e3c",
-          "light": "#81c784",
-          "main": "#4caf50",
-        },
-        "text": Object {
-          "disabled": "rgba(0, 0, 0, 0.38)",
-          "hint": "rgba(0, 0, 0, 0.38)",
-          "primary": "rgba(0, 0, 0, 0.87)",
-          "secondary": "rgba(0, 0, 0, 0.54)",
-        },
-        "tonalOffset": 0.2,
-        "type": "light",
-        "warning": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#f57c00",
-          "light": "#ffb74d",
-          "main": "#ff9800",
-        },
-      },
-      "props": Object {},
-      "shadows": Array [
-        "none",
-        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-      ],
-      "shape": Object {
-        "borderRadius": 4,
-      },
-      "spacing": [Function],
-      "transitions": Object {
-        "create": [Function],
-        "duration": Object {
-          "complex": 375,
-          "enteringScreen": 225,
-          "leavingScreen": 195,
-          "short": 250,
-          "shorter": 200,
-          "shortest": 150,
-          "standard": 300,
-        },
-        "easing": Object {
-          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-        },
-        "getAutoHeightDuration": [Function],
-      },
-      "typography": Object {
-        "body1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.5,
-        },
-        "body2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.01071em",
-          "lineHeight": 1.43,
-        },
-        "button": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.02857em",
-          "lineHeight": 1.75,
-          "textTransform": "uppercase",
-        },
-        "caption": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.03333em",
-          "lineHeight": 1.66,
-        },
-        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-        "fontSize": 14,
-        "fontWeightBold": 700,
-        "fontWeightLight": 300,
-        "fontWeightMedium": 500,
-        "fontWeightRegular": 400,
-        "h1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "6rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.01562em",
-          "lineHeight": 1.167,
-        },
-        "h2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3.75rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.00833em",
-          "lineHeight": 1.2,
-        },
-        "h3": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.167,
-        },
-        "h4": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "2.125rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00735em",
-          "lineHeight": 1.235,
-        },
-        "h5": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.5rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.334,
-        },
-        "h6": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.25rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.0075em",
-          "lineHeight": 1.6,
-        },
-        "htmlFontSize": 16,
-        "overline": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.08333em",
-          "lineHeight": 2.66,
-          "textTransform": "uppercase",
-        },
-        "pxToRem": [Function],
-        "round": [Function],
-        "subtitle1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.75,
-        },
-        "subtitle2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.00714em",
-          "lineHeight": 1.57,
-        },
-      },
-      "zIndex": Object {
-        "appBar": 1100,
-        "drawer": 1200,
-        "mobileStepper": 1000,
-        "modal": 1300,
-        "snackbar": 1400,
-        "speedDial": 1050,
-        "tooltip": 1500,
-      },
-      Symbol(mui.nested): false,
-    }
-  }
->
-  <NavList>
-    <NavListProvider
-      links={Array []}
-      openSubMenus={false}
-    >
-      <NavListBase>
-        <nav>
-          <ul
-            className="MuiNavList-root MuiNavList-vertical"
-          >
-            this is some random warning text
-          </ul>
-          <div
-            className="MuiNavList-floatClear"
-          />
-        </nav>
-      </NavListBase>
-    </NavListProvider>
-  </NavList>
-</ThemeProvider>
+<ForwardRef(NavList)>
+  this is some random warning text
+</ForwardRef(NavList)>
 `;

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

@@ -1,5 +1,17 @@
 import React from 'react';
-import { NavList, NavListItem } from '@digigov/ui/core/NavList';
+import NavList, {
+  isNavListItemLinkInterface,
+  Nav,
+  NavListItem,
+  NavMenu,
+  NavMenuContainer,
+  NavMenuContainerContent,
+  NavMenuContainerContentList,
+  NavMenuContainerContentListItem,
+  NavMenuContainerTitle,
+} from '@digigov/ui/core/NavList';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+import { Link } from '@digigov/ui/core';
 const links = [
   { name: 'Nav1', href: '#', label: 'Nav list item 1' },
   {
@@ -32,20 +44,53 @@ const links = [
   { name: 'Nav3', href: '#', label: 'Nav list item 3' },
 ];
 
-export const Default = () => (
-  <>
-    <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'}
-        />
-      ))}
-    </NavList>
-  </>
-);
+export const Default = () => {
+  const layout = 'vertical';
+  const { container, register } = useNavList();
+
+  const setRegister = (name: string) => {
+    return { ...register(name) };
+  };
+
+  return (
+    <Nav open={true} layout={layout}>
+      <NavList layout={layout}>
+        {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>
+    </Nav>
+  );
+};
 
 export default Default;

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

@@ -1,25 +1,24 @@
 import React from 'react';
-import {
-  NavHorizontalListItem,
-  NavHorizontal,
-  NavHorizontalList,
+import NavList, {
+  isNavListItemLinkInterface,
+  Nav,
+  NavListItem,
   NavMenu,
   NavMenuContainer,
   NavMenuContainerContent,
   NavMenuContainerContentList,
   NavMenuContainerContentListItem,
   NavMenuContainerTitle,
-  useNavList,
-  NavListItemType,
-  isNavListItemSubMenuInterface,
-  isNavListItemLinkInterface,
 } from '@digigov/ui/core/NavList';
-import { Link } from '@digigov/ui/core';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+import Link from '@digigov/ui/core/Link';
 
-const navItemArray: NavListItemType[] = [
+const links = [
+  { name: 'Nav1', href: '#', label: 'Nav list item 1' },
   {
-    name: 'Nav1',
-    label: 'Item list 1',
+    name: 'Nav2',
+    href: '#',
+    label: 'Nav list item 2',
     subMenu: [
       {
         name: 'Nav2.1',
@@ -38,48 +37,54 @@ const navItemArray: NavListItemType[] = [
       },
     ],
   },
-  { name: 'Nav3', href: '#', label: 'Item list 3' },
+  { name: 'Nav3', href: '#', label: 'Nav list item 3' },
 ];
 
 export const NavHorizontalLayout = () => {
+  const layout = 'horizontal';
   const { container, register } = useNavList();
 
   const setRegister = (name: string) => {
     return { ...register(name) };
   };
-
   return (
-    <NavHorizontal open={true}>
-      <NavHorizontalList>
-        {navItemArray.map((item, index) => {
-          return (
-            <React.Fragment key={index}>
-              <NavHorizontalListItem link={item} setRegister={setRegister} />
-              {/* <SectionBreak visible={true} /> */}
-              <NavMenu {...container(item.name)}>
-                <NavMenuContainer paddingLeft={5} paddingRight={5}>
-                  <NavMenuContainerTitle>{item.name}</NavMenuContainerTitle>
-                  <NavMenuContainerContent>
-                    <NavMenuContainerContentList>
-                      {isNavListItemSubMenuInterface(item) &&
-                        item?.subMenu?.map((subMenu, menuIndex) => {
-                          return (
-                            <NavMenuContainerContentListItem key={menuIndex}>
-                              {isNavListItemLinkInterface(subMenu) && (
-                                <Link href={subMenu.href}>{subMenu.label}</Link>
-                              )}
-                            </NavMenuContainerContentListItem>
-                          );
-                        })}
-                    </NavMenuContainerContentList>
-                  </NavMenuContainerContent>
-                </NavMenuContainer>
-              </NavMenu>
-            </React.Fragment>
-          );
-        })}
-      </NavHorizontalList>
-    </NavHorizontal>
+    <Nav open={true} layout={layout}>
+      <NavList layout={layout}>
+        {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>
+    </Nav>
   );
 };
 

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { NavListAuto, NavListItemAuto } from '@digigov/ui/core/NavList';
+
+const links = [
+  { name: 'Nav1', href: '#', label: 'Nav list item 1' },
+  {
+    name: 'Nav2',
+    href: '#',
+    label: 'Nav list item 2',
+    subMenu: [
+      {
+        name: 'Nav2.1',
+        href: '#',
+        label: 'Nav list item 2.1',
+      },
+      {
+        name: 'Nav2.2',
+        href: '#',
+        label: 'Nav list item 2.2',
+      },
+      {
+        name: 'Nav2.3',
+        href: '#',
+        label: 'Nav list item 2.3',
+      },
+      {
+        name: 'Nav2.4',
+        href: '#',
+        label: 'Nav list item 2.4',
+      },
+    ],
+  },
+  { name: 'Nav3', href: '#', label: 'Nav list item 3' },
+];
+
+export const NavListAutoExample = () => {
+  const layout = 'horizontal';
+
+  return (
+    <NavListAuto
+      layout={layout}
+      links={links}
+      aria-label="Nav list"
+      role="menu"
+    >
+      {links.map((item, key) => (
+        <NavListItemAuto key={key} item={item} role="menuitem" />
+      ))}
+    </NavListAuto>
+  );
+};
+
+export default NavListAutoExample;