diff --git a/src/components/NavList/NavList.jsx b/src/components/NavList/NavList.jsx new file mode 100644 index 00000000..b1634b83 --- /dev/null +++ b/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 ( + + ); +}; + +export default NavList; + +NavList.propTypes = { + items: PropTypes.arrayOf(PropTypes.object).isRequired +}; diff --git a/src/components/Navbar/Navbar.stories.mdx b/src/components/Navbar/Navbar.stories.mdx new file mode 100644 index 00000000..522f2774 --- /dev/null +++ b/src/components/Navbar/Navbar.stories.mdx @@ -0,0 +1,40 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import Navbar from './index'; + + + +# Navbar + + + + + + diff --git a/src/components/Navbar/doc.mdx b/src/components/Navbar/doc.mdx new file mode 100644 index 00000000..44050525 --- /dev/null +++ b/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 + +
+ +
+ + +## Navbar Variants + +
+ +
+ + + +## Properties + diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx new file mode 100644 index 00000000..b154a289 --- /dev/null +++ b/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 ( + + ) +} + +Navbar.defaultProps = { + + } + +Navbar.propTypes = { + + } + +export default Navbar; diff --git a/src/components/Navbar/navbar.test.jsx b/src/components/Navbar/navbar.test.jsx new file mode 100644 index 00000000..94842c5a --- /dev/null +++ b/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 = [ + + Simple link one + , + + Simple link two + , + ] + +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(); + }); +}); diff --git a/src/components/PrimaryNav/PrimaryNav.stories.mdx b/src/components/PrimaryNav/PrimaryNav.stories.mdx new file mode 100644 index 00000000..c3696ab4 --- /dev/null +++ b/src/components/PrimaryNav/PrimaryNav.stories.mdx @@ -0,0 +1,38 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; +import PrimaryNav from './index'; + + + +# Card + + + + + diff --git a/src/components/PrimaryNav/doc.mdx b/src/components/PrimaryNav/doc.mdx new file mode 100644 index 00000000..42907528 --- /dev/null +++ b/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 + + + + +## Card Variants + + + + +## Media Variants + + + + + + +## Properties + diff --git a/src/components/PrimaryNav/index.jsx b/src/components/PrimaryNav/index.jsx new file mode 100644 index 00000000..48fba1a9 --- /dev/null +++ b/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 ( + + ); +}; + +export default PrimaryNav; + +PrimaryNav.propTypes = { + name: PropTypes.string, + items: PropTypes.arrayOf(PropTypes.object).isRequired +} diff --git a/src/components/PrimaryNav/primary-nav.test.jsx b/src/components/PrimaryNav/primary-nav.test.jsx new file mode 100644 index 00000000..e2467314 --- /dev/null +++ b/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(' { + test('renders a nav element.', () => { + const { queryByRole } = render( + + ); + expect(queryByRole('navigation')).toBeInTheDocument() + }); +}); + +it('renders items', () => { + const { getByText } = render( + + ) + expect(getByText('Home')).toBeInTheDocument(); + expect(getByText('Datasets')).toBeInTheDocument(); +})