feat: Implement Smart/Stateful Navbar

src/components/navigation/index.ts

@@ -3,3 +3,4 @@ export * from "./navbar-brand";
 export * from "./navbar-burger";
 export * from "./navbar-item";
 export * from "./navbar-menu";
+export * from "./smart-navbar";

src/components/navigation/navbar-menu/NavbarMenu.tsx

@@ -30,7 +30,7 @@ export const NavbarMenu = ({
   const navbarEnd = end && <div className="navbar-end">{end}</div>;
 
   return (
-    <div className={className}>
+    <div className={className} role="menu">
       {navbarStart}
       {children}
       {navbarEnd}

src/components/navigation/smart-navbar/SmartNavbar.test.tsx

@@ -0,0 +1,72 @@
+import { screen, render, waitFor } from "@testing-library/react";
+import { SmartNavbar } from "./SmartNavbar";
+import user from "@testing-library/user-event";
+import { Fragment } from "react";
+import { NavbarItem } from "..";
+import { Buttons, Button } from "../..";
+
+const getNavbarBurger = () =>
+  screen.getByRole("button", { name: "Navigation Menu Toggle" });
+
+const getNavbarMenu = () => screen.getByRole("menu");
+
+it("by default does not mark the hamburger and menu as being active", () => {
+  render(<SmartNavbar />);
+  expect(getNavbarBurger()).not.toHaveClass("is-active");
+  expect(getNavbarMenu()).not.toHaveClass("is-active");
+});
+
+it("marks the hamburger and menu as being active when the hamburger menu is clicked once", async () => {
+  render(<SmartNavbar />);
+  user.click(getNavbarBurger());
+  await waitFor(() => expect(getNavbarBurger()).toHaveClass("is-active"));
+  await waitFor(() => expect(getNavbarMenu()).toHaveClass("is-active"));
+});
+
+it("marks the hamburger and menu as being inactive when the hamburger menu is clicked twice", async () => {
+  render(<SmartNavbar />);
+  user.click(getNavbarBurger());
+  user.click(getNavbarBurger());
+  await waitFor(() => expect(getNavbarBurger()).not.toHaveClass("is-active"));
+  await waitFor(() => expect(getNavbarMenu()).not.toHaveClass("is-active"));
+});
+
+it("renders the given content in its slots", () => {
+  render(
+    <SmartNavbar
+      brandItems={
+        <NavbarItem link={{ href: "https://bulma.io" }}>
+          <img
+            src="https://bulma.io/images/bulma-logo.png"
+            alt="Logo"
+            width="112"
+            height="28"
+          />
+        </NavbarItem>
+      }
+      menuStartItems={
+        <Fragment>
+          <NavbarItem link={{ href: "https://bulma.io" }}>Home</NavbarItem>
+          <NavbarItem link={{ href: "https://bulma.io" }}>
+            Documentation
+          </NavbarItem>
+        </Fragment>
+      }
+      menuEndItems={
+        <NavbarItem>
+          <Buttons>
+            <Button color="primary">
+              <strong>Sign up</strong>
+            </Button>
+            <Button color="light">Log in</Button>
+          </Buttons>
+        </NavbarItem>
+      }
+    />
+  );
+  expect(screen.getByAltText("Logo")).toBeInTheDocument();
+  expect(screen.getByText("Home")).toBeInTheDocument();
+  expect(screen.getByText("Documentation")).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Sign up" })).toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "Log in" })).toBeInTheDocument();
+});

src/components/navigation/smart-navbar/SmartNavbar.tsx

@@ -0,0 +1,47 @@
+import { ReactNode, useState } from "react";
+import { Navbar, NavbarProps } from "../navbar";
+import { NavbarBrand } from "../navbar-brand";
+import { NavbarBurger } from "../navbar-burger";
+import { NavbarMenu } from "../navbar-menu";
+
+export type SmartNavbarProps = NavbarProps & {
+  brandItems?: ReactNode;
+  menuStartItems?: ReactNode;
+  menuEndItems?: ReactNode;
+};
+
+/**
+ * SmartNavbar is a stateful Navigation bar that is built upon the
+ * decoupled and atomic Navbar elements that includes wired up stateful
+ * logic around menu visibility.
+ *
+ * It is suggested to use SmartNavbar if you want a standard responsive
+ * navigation bar out-of-the-box. If you wish for more customization / flexibility,
+ * I suggest using the provided `Navbar` components for a more declarative customized
+ * approach.
+ */
+export const SmartNavbar = ({
+  brandItems,
+  menuStartItems,
+  menuEndItems,
+  ...props
+}: SmartNavbarProps): JSX.Element => {
+  const [menuIsVisible, setMenuIsVisible] = useState(false);
+  const toggleMenuVisibility = () => setMenuIsVisible(!menuIsVisible);
+
+  return (
+    <Navbar {...props}>
+      <NavbarBrand
+        items={brandItems}
+        burger={
+          <NavbarBurger onClick={toggleMenuVisibility} active={menuIsVisible} />
+        }
+      />
+      <NavbarMenu
+        active={menuIsVisible}
+        start={menuStartItems}
+        end={menuEndItems}
+      />
+    </Navbar>
+  );
+};

src/components/navigation/smart-navbar/index.ts

@@ -0,0 +1 @@
+export * from "./SmartNavbar";

src/stories/navigation/NavbarBurger.stories.tsx

@@ -1,11 +1,10 @@
 import { Story, Meta } from "@storybook/react";
-import "./NavbarItem.story.css";
 
 import { NavbarBurger, NavbarBurgerProps } from "../../components";
 
 export default {
-  component: NavbarBurger,
   title: "Navigation/NavbarBurger",
+  component: NavbarBurger,
   argTypes: {
     active: {
       control: {

src/stories/navigation/SmartNavbar.stories.tsx

@@ -0,0 +1,50 @@
+import { Story, Meta } from "@storybook/react";
+import { Fragment } from "react";
+
+import {
+  Button,
+  Buttons,
+  NavbarItem,
+  SmartNavbar,
+  SmartNavbarProps,
+} from "../../components";
+
+export default {
+  component: SmartNavbar,
+  title: "Navigation/SmartNavbar",
+} as Meta<SmartNavbarProps>;
+
+const Template: Story<SmartNavbarProps> = () => (
+  <SmartNavbar
+    brandItems={
+      <NavbarItem link={{ href: "https://bulma.io" }}>
+        <img
+          src="https://bulma.io/images/bulma-logo.png"
+          alt="Logo"
+          width="112"
+          height="28"
+        />
+      </NavbarItem>
+    }
+    menuStartItems={
+      <Fragment>
+        <NavbarItem link={{ href: "https://bulma.io" }}>Home</NavbarItem>
+        <NavbarItem link={{ href: "https://bulma.io" }}>
+          Documentation
+        </NavbarItem>
+      </Fragment>
+    }
+    menuEndItems={
+      <NavbarItem>
+        <Buttons>
+          <Button color="primary">
+            <strong>Sign up</strong>
+          </Button>
+          <Button color="light">Log in</Button>
+        </Buttons>
+      </NavbarItem>
+    }
+  />
+);
+
+export const StandardSmartNavbar = Template.bind({});