Navbar, and Primary nav

src/components/NavList/NavList.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// TODO // use classes conditionally, and as props. See the Same component in uswds-react.
+const NavList = ({
+ items
+}) => {
+ return (
+ <ul className="usa-nav__primary usa-accordion">
+ {items.map((item, index) => (
+ <li key={index} className="usa-nav__primary-item">
+ <a href={item.url}>{item.label}</a>
+ </li>
+ ))}
+ </ul>
+ );
+};
+
+export default NavList;
+
+NavList.propTypes = {
+ items: PropTypes.arrayOf(PropTypes.object).isRequired
+};

src/components/Navbar/Navbar.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import Navbar from './index';
+
+<Meta title="USWDS/Navbar" component={Navbar} />
+
+# Navbar
+
+<Canvas>
+ <Story name="Basic">
+ <Navbar
+ items={[
+ {
+ "label": "Home",
+ "url": "/",
+ "target": "_top"
+ },
+ {
+ "label": "Datasets",
+ "url": "/search",
+ "target": "_top"
+ },
+ {
+ "label": "Publishers",
+ "url": "/publishers",
+ "target": "_top"
+ },
+ {
+ "label": "About",
+ "url": "/about",
+ "target": "_top"
+ },
+ {
+ "label": "API",
+ "url": "/api",
+ "target": "_top"
+ }
+ ]}
+ />
+ </Story>
+</Canvas>

src/components/Navbar/doc.mdx

@@ -0,0 +1,30 @@
+---
+name: Navbar
+menu: Components
+route: /components/navbar
+---
+
+import { Playground, Props } from 'docz'
+import Navbar from './index'
+
+# Navbar Docs
+
+The Navbar is a horizontal rectangle which contains a primary navigation menu and a menu toggling widget.
+
+## Basic usage
+<Playground>
+<div>
+
+</div>
+</Playground>
+
+## Navbar Variants
+<Playground>
+<div>
+
+</div>
+</Playground>
+
+
+## Properties
+<Props of={Navbar} />

src/components/Navbar/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PrimaryNav from '../PrimaryNav';
+
+
+const Navbar = ({navLinks, items}) => {
+ return (
+ <PrimaryNav
+ navItems={navLinks}
+ items={items}
+ />
+ )
+}
+
+Navbar.defaultProps = {
+
+ }
+
+Navbar.propTypes = {
+
+ }
+
+export default Navbar;

src/components/Navbar/navbar.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Navbar from './index';
+import DynamicLink from '../DynamicLink/index';
+
+const testItems = [
+ <a className="usa-current" href="#linkOne" key="one">
+ Simple link one
+ </a>,
+ <a href="#linkTwo" key="two">
+ Simple link two
+ </a>,
+ ]
+
+const nav = {
+ "main": [
+ {
+ "label": "Home",
+ "url": "/",
+ "target": "_top"
+ },
+ {
+ "label": "Datasets",
+ "url": "/search",
+ "target": "_top"
+ },
+ {
+ "label": "Publishers",
+ "url": "/publishers",
+ "target": "_top"
+ },
+ {
+ "label": "About",
+ "url": "/about",
+ "target": "_top"
+ },
+ {
+ "label": "API",
+ "url": "/api",
+ "target": "_top"
+ }
+ ]
+ };
+
+describe('Should render a Navigation bar.', () => {
+ test('renders', () => {
+ render(<Navbar navLinks={nav.main} items={testItems} />);
+ });
+});

src/components/PrimaryNav/PrimaryNav.stories.mdx

@@ -0,0 +1,38 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import PrimaryNav from './index';
+
+<Meta title="USWDS/PrimaryNav" component={PrimaryNav} />
+
+# Card
+<Canvas>
+ <Story name="Basic">
+ <PrimaryNav items={[
+ {
+ "label": "Home",
+ "url": "/",
+ "target": "_top"
+ },
+ {
+ "label": "Datasets",
+ "url": "/search",
+ "target": "_top"
+ },
+ {
+ "label": "Publishers",
+ "url": "/publishers",
+ "target": "_top"
+ },
+ {
+ "label": "About",
+ "url": "/about",
+ "target": "_top"
+ },
+ {
+ "label": "API",
+ "url": "/api",
+ "target": "_top"
+ },
+ ]
+ } />
+ </Story>
+</Canvas>

src/components/PrimaryNav/doc.mdx

@@ -0,0 +1,32 @@
+---
+name: Card
+menu: Components
+route: /components/primary-nav
+---
+
+import { Playground, Props } from 'docz'
+import PrimaryNav from './index'
+
+# Primary Nav Docs
+
+Details here in doc.mds.
+
+## Basic usage
+<Playground>
+
+</Playground>
+
+## Card Variants
+<Playground>
+
+</Playground>
+
+## Media Variants
+
+
+
+
+
+
+## Properties
+<Props of={PrimaryNav} />

src/components/PrimaryNav/index.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DynamicLink from '../DynamicLink/index';
+import NavList from '../NavList/NavList.jsx';
+
+const PrimaryNav = ({
+ name,
+ items
+}) => {
+ return (
+ <nav className="usa-nav float-none" title={name}>
+ <NavList items={items} type="primary" />
+ </nav>
+ );
+};
+
+export default PrimaryNav;
+
+PrimaryNav.propTypes = {
+ name: PropTypes.string,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired
+}

src/components/PrimaryNav/primary-nav.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, screen, getByRole, getByText } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import PrimaryNav from './index';
+
+const nav = {
+ "main": [
+ {
+ "label": "Home",
+ "url": "/"
+ },
+ {
+ "label": "Datasets",
+ "url": "/search"
+ },
+ {
+ "label": "Publishers",
+ "url": "/publishers"
+ },
+ {
+ "label": "About",
+ "url": "/about"
+ },
+ {
+ "label": "API",
+ "url": "/api"
+ }
+ ]
+}
+
+describe('<PrimaryNav',() => {
+ test('renders a nav element.', () => {
+ const { queryByRole } = render(
+ <PrimaryNav items={nav.main} />
+ );
+ expect(queryByRole('navigation')).toBeInTheDocument()
+ });
+});
+
+it('renders items', () => {
+ const { getByText } = render(
+ <PrimaryNav items={nav.main} />
+ )
+ expect(getByText('Home')).toBeInTheDocument();
+ expect(getByText('Datasets')).toBeInTheDocument();
+})