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();
+})