feat: add navbar components

Author: RickEyre

package-lock.json

@@ -28,5 +28,8 @@
   "homepage": "https://github.com/Lemonpeach/panda-san#readme",
   "devDependencies": {
     "lerna": "^3.16.4"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6"
   }
 }

package.json

@@ -1 +1,14 @@
-export { Navbar } from './navbar'
+import { NavbarBrandIcon } from './navbar-brand-icon'
+import { NavbarBrand } from './navbar-brand'
+import { NavbarBurger } from './navbar-burger'
+import { NavbarMenuItem } from './navbar-menu-item'
+import { NavbarMenu } from './navbar-menu'
+import { Navbar } from './navbar'
+
+Navbar.BrandIcon = NavbarBrandIcon
+Navbar.Brand = NavbarBrand
+Navbar.Burger = NavbarBurger
+Navbar.MenuItem = NavbarMenuItem
+Navbar.Menu = NavbarMenu
+
+export { Navbar }

packages/tiger-san/src/navbar/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export const NavbarBrandIcon = ({ children, href, text }) => (
+  <a className="navbar__brand__icon" role="link" href={href}>
+    <span className="hidden">{text}</span>
+    {children}
+  </a>
+)
+
+NavbarBrandIcon.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]).isRequired,
+  href: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+}

packages/tiger-san/src/navbar/navbar-brand-icon.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export const NavbarBrand = ({ children }) => (
+  <div className="navbar__brand">
+    {children}
+  </div>
+)
+
+NavbarBrand.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]).isRequired
+}

packages/tiger-san/src/navbar/navbar-brand.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const getBurgerClassName = ({ toggled }) => (
+  classnames('navbar__burger', { 'navbar__burger--active': toggled })
+)
+
+export const NavbarBurger = ({ children, toggled, onClick }) => (
+  <div className={getBurgerClassName({ toggled })}>
+    <button
+      role="button"
+      aria-haspopup="true"
+      aria-expanded={toggled}
+      aria-controls="navbar-menu"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  </div>
+)
+
+NavbarBurger.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]).isRequired,
+  toggled: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired
+}

packages/tiger-san/src/navbar/navbar-burger.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export const NavbarMenuItem = ({ children, href }) => (
+  <li role="none" className="navbar__item">
+    <a
+      role="menuitem"
+      href={href}
+      className="navbar__item navbar__item--link"
+    >
+      {children}
+    </a>
+  </li>
+)
+
+NavbarMenuItem.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]).isRequired,
+  href: PropTypes.string.isRequired
+}

packages/tiger-san/src/navbar/navbar-menu-item.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+const getMenuClassNames = ({ toggled }) => (
+  classnames('navbar__menu', { 'navbar__menu--active': toggled })
+)
+
+export const NavbarMenu = ({ children, toggled }) => (
+  <ul id="navbar-menu" role="menu" className={getMenuClassNames({ toggled })}>
+    {children}
+  </ul>
+)
+
+NavbarMenu.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.element,
+    PropTypes.elementType,
+    PropTypes.func
+  ]).isRequired,
+  toggled: PropTypes.bool.isRequired
+}