Sidebar fixes (#47)

* fix sidebar issues with a simpler, non-modal style

also improves some accessibility issues

* listen for click instead of mousedown

* export constants, add missing event

* fix indent

* update package version

Author: jivey

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -68,6 +68,7 @@
     "@sentry/react": "^7.48.0",
     "classnames": "^2.3.1",
     "crypto": "npm:crypto-browserify@^3.12.0",
+    "react-aria": "^3.34.1",
     "react-aria-components": "^1.3.1",
     "stream": "npm:stream-browserify@^3.0.0"
   }

src/components/SidebarNav.spec.tsx

@@ -90,19 +90,9 @@ describe("SidebarNav", () => {
     });
 
     expect(screen.getByRole("navigation")).not.toHaveClass("collapsed");
-
-    act(() => {
-      fireEvent.click(screen.getByTestId("sidebarnav-toggle"));
-    });
-    // Separate act so the classname gets updated
-    act(() => {
-      fireEvent.animationEnd(screen.getByTestId("sidebarnav"));
-    });
-
-    expect(screen.getByRole("navigation")).not.toHaveClass("expanding");
   });
 
-  it("displays modal on mobile", async () => {
+  it("is dismissable on mobile", async () => {
     render(
       <SidebarNav isMobile={true}>
         {({ setNavIsCollapsed }) => (
@@ -120,14 +110,60 @@ describe("SidebarNav", () => {
       fireEvent.click(screen.getByTestId("sidebarnav-toggle"));
     });
 
-    expect(screen.getByRole("dialog")).toBeInTheDocument();
-
     act(() => {
       user.type(document.body, "{Escape}");
     });
 
     await waitFor(() => {
-      expect(screen.queryByTestId("sidebarnav-modal")).not.toBeInTheDocument();
+      expect(screen.getByRole("navigation")).toHaveClass("collapsed");
+    });
+  });
+
+  it("collapses on outside click", async () => {
+    render(
+      <SidebarNav isMobile={true}>
+        Content
+      </SidebarNav>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByTestId("sidebarnav-toggle"));
+    });
+
+    fireEvent.mouseDown(screen.getByTestId("sidebarnav"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("sidebarnav")).not.toHaveClass("collapsed");
+    });
+
+    fireEvent.mouseDown(document);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("sidebarnav")).toHaveClass("collapsed");
+    });
+  });
+
+  it("doesn't collapse on outside click when mobile is false", async () => {
+    render(
+      <SidebarNav isMobile={false}>
+        Content
+      </SidebarNav>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("sidebarnav")).not.toHaveClass("collapsed");
+    });
+
+    fireEvent.mouseDown(screen.getByTestId("sidebarnav"));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("sidebarnav")).not.toHaveClass("collapsed");
+    });
+
+    fireEvent.mouseDown(document);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("sidebarnav")).not.toHaveClass("collapsed");
     });
   });
 });

src/components/SidebarNav.stories.tsx

@@ -1,6 +1,7 @@
 import { useMatchMediaQuery } from "../../src/hooks";
-import styled, { createGlobalStyle } from "styled-components";
+import styled, { createGlobalStyle, css } from "styled-components";
 import { SidebarNav, SidebarNavStyles } from "./SidebarNav";
+import React from "react";
 
 const GlobalStyle = createGlobalStyle`
   html, body, #ladle-root {
@@ -32,6 +33,7 @@ const Wrapper = styled.div`
 `;
 
 const StyledSidebarNav = styled(SidebarNav)`
+  overflow: auto;
   grid-area: nav;
   padding: 6rem 2rem;
 
@@ -47,33 +49,58 @@ const StyledMain = styled.main`
   }
 `;
 
+const NavItem = styled.li`
+  a {
+    text-decoration: none;
+    color: black;
+    padding: 0.5rem 1rem;
+    display: block;
+    border-radius: 4px;
+
+    ${(props: { active: boolean }) =>
+      props.active &&
+      css`
+        background-color: #007bff;
+        color: white;
+      `}
+  }
+`;
+
+const items = ["Home", "About", "Services", "Contact", ...Array.from({length: 50}, (_, i)=> (i + 1).toString())];
+
 export const Default = () => {
   const isMobile = useMatchMediaQuery("(max-width: 620px)");
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
 
   return <>
     <GlobalStyle />
     <Wrapper>
-      <StyledSidebarNav aria-label="Example Sidebar Nav" isMobile={isMobile}>
-        {({ navIsCollapsed, setNavIsCollapsed }) => (
-          <>
+      <StyledSidebarNav isMobile={isMobile}>
+        {({ setNavIsCollapsed, navIsCollapsed }) =>
             <ul>
-              <li>
-                <a href="#" onClick={() => setNavIsCollapsed(!navIsCollapsed)}>
-                  {navIsCollapsed ? "H" : "Home"}
-                </a>
-              </li>
-              <li>
-                <a href="#" onClick={() => setNavIsCollapsed(!navIsCollapsed)}>
-                  {navIsCollapsed ? "A" : "About"}
-                </a>
-              </li>
+              {items.map((item, index) => (
+                <NavItem key={index} active={activeItem === item}>
+                  <a href="#" onClick={(e) => {
+                    e.preventDefault();
+                    if (navIsCollapsed) {
+                      setNavIsCollapsed(false);
+                    } else {
+                      setActiveItem(item);
+                      setNavIsCollapsed(isMobile);
+                    }
+                  }}>
+                    {item}
+                  </a>
+                </NavItem>
+              ))}
             </ul>
-            {!navIsCollapsed ? <p>Some other content</p> : null}
-          </>
-        )}
+        }
       </StyledSidebarNav>
-        <StyledMain style={{ padding: "4rem", marginLeft: (isMobile ? SidebarNavStyles.collapsedWidth : '') }}>
-        <h1>Main content</h1>
+      <StyledMain style={{ padding: "4rem", marginLeft: (isMobile ? SidebarNavStyles.collapsedWidth : '') }}>
+        <h1>
+          Main content
+          <p><a href="#">focusable element</a></p>
+        </h1>
       </StyledMain>
     </Wrapper>
   </>