From 47896573999c7f1181ac129ddd1c1a70a26650d1 Mon Sep 17 00:00:00 2001 From: Alex Scott Date: Wed, 3 Mar 2021 17:31:58 +0100 Subject: [PATCH 1/3] Adding the Navbar and PrimaryMenu as components. --- src/components/Navbar/Navbar.stories.mdx | 40 +++++++++++++++ src/components/Navbar/doc.mdx | 30 +++++++++++ src/components/Navbar/index.jsx | 23 +++++++++ src/components/Navbar/navbar.test.jsx | 50 +++++++++++++++++++ .../PrimaryNav/PrimaryNav.stories.mdx | 38 ++++++++++++++ src/components/PrimaryNav/doc.mdx | 32 ++++++++++++ src/components/PrimaryNav/index.jsx | 32 ++++++++++++ .../PrimaryNav/primary-nav.test.jsx | 46 +++++++++++++++++ 8 files changed, 291 insertions(+) create mode 100644 src/components/Navbar/Navbar.stories.mdx create mode 100644 src/components/Navbar/doc.mdx create mode 100644 src/components/Navbar/index.jsx create mode 100644 src/components/Navbar/navbar.test.jsx create mode 100644 src/components/PrimaryNav/PrimaryNav.stories.mdx create mode 100644 src/components/PrimaryNav/doc.mdx create mode 100644 src/components/PrimaryNav/index.jsx create mode 100644 src/components/PrimaryNav/primary-nav.test.jsx 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..8c7bf9ed --- /dev/null +++ b/src/components/PrimaryNav/index.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import DynamicLink from '../DynamicLink/index'; + +const PrimaryNav = ({ + navLinks, + 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(); +}) From 3052d099265b1839f84c074ce8839a50e035ca8e Mon Sep 17 00:00:00 2001 From: Alex Scott Date: Tue, 9 Mar 2021 16:48:27 +0100 Subject: [PATCH 2/3] Adding a NavList component for defining different classes. --- src/components/NavList.jsx | 38 +++++++++++++++++++++++++++++ src/components/NavList/NavList.jsx | 23 +++++++++++++++++ src/components/PrimaryNav/index.jsx | 20 ++++----------- 3 files changed, 66 insertions(+), 15 deletions(-) create mode 100644 src/components/NavList.jsx create mode 100644 src/components/NavList/NavList.jsx diff --git a/src/components/NavList.jsx b/src/components/NavList.jsx new file mode 100644 index 00000000..273a86cb --- /dev/null +++ b/src/components/NavList.jsx @@ -0,0 +1,38 @@ +import React from 'react' + + + + + // const isPrimary = type ? type === 'primary' : primary + // const isSecondary = type ? type === 'secondary' : secondary + // const isSubnav = type ? type === 'subnav' : subnav + // const isMegamenu = type ? type === 'megamenu' : megamenu + // const isFooterSecondary = type ? type === 'footerSecondary' : footerSecondary + + // const ulClasses = classnames( + // { + // 'usa-nav__primary usa-accordion': isPrimary, + // 'usa-nav__secondary-links': isSecondary, + // 'usa-nav__submenu': isSubnav, + // 'usa-nav__submenu-list': isMegamenu, + // 'usa-list usa-list--unstyled': isFooterSecondary, + // }, + // className + // ) + + // const liClasses = classnames({ + // 'usa-nav__primary-item': isPrimary, + // 'usa-nav__secondary-item': isSecondary, + // 'usa-nav__submenu-item': isSubnav || isMegamenu, + // 'usa-footer__secondary-link': isFooterSecondary, + // }) + + // return ( + //
    + // {items.map((item, i) => ( + //
  • + // {item} + //
    • + // ))} + //
+ // ) 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 ( +
    + {items.map((item, index) => ( +
  • + {item.label} +
    • + ))} +
+ ); +}; + +export default NavList; + +NavList.propTypes = { + items: PropTypes.arrayOf(PropTypes.object).isRequired +}; diff --git a/src/components/PrimaryNav/index.jsx b/src/components/PrimaryNav/index.jsx index 8c7bf9ed..aa8fe7ec 100644 --- a/src/components/PrimaryNav/index.jsx +++ b/src/components/PrimaryNav/index.jsx @@ -1,30 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; import DynamicLink from '../DynamicLink/index'; +import NavList from '../NavList/NavList.jsx'; const PrimaryNav = ({ - navLinks, name, items }) => { return ( -