diff --git a/components/Nav/NavMobile/NavMobile.js b/components/Nav/NavMobile/NavMobile.tsx similarity index 68% rename from components/Nav/NavMobile/NavMobile.js rename to components/Nav/NavMobile/NavMobile.tsx index 90ea76707..840dc204e 100644 --- a/components/Nav/NavMobile/NavMobile.js +++ b/components/Nav/NavMobile/NavMobile.tsx @@ -1,5 +1,4 @@ import Link from 'next/link'; -import { func, bool, string, arrayOf, shape } from 'prop-types'; import classNames from 'classnames'; import { s3 } from 'common/constants/urls'; import HamburgerIcon from 'static/images/icons/hamburger.svg'; @@ -8,25 +7,53 @@ import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly'; import Image from 'next/image'; import styles from './NavMobile.module.css'; -NavMobile.propTypes = { - isOpen: bool.isRequired, - openMenu: func.isRequired, - closeMenu: func.isRequired, - navItems: arrayOf( - shape({ - href: string.isRequired, - name: string.isRequired, - sublinks: arrayOf( - shape({ - name: string.isRequired, - href: string.isRequired, - }), - ), - }), - ).isRequired, +type SublinkType = { + /** + * String used as the link label. + */ + name: string; + /** + * String used for the URL. + */ + href: string; }; -function NavMobile({ isOpen, openMenu, closeMenu, navItems }) { +type NavItemType = { + /** + * String used as the link label. + */ + name: string; + + /** + * String used for the URL. + */ + href: string; + /** + * Adds nested sublinks. + */ + sublinks?: SublinkType[]; +}; + +export type NavMobilePropsType = { + /** + * Sets if the mobile navigation is open or closed. + */ + isOpen: boolean; + /** + * Function called when open button is clicked. + */ + openMenu: () => void; + /** + * Function called when close button is clicked. + */ + closeMenu: () => void; + /** + * List of navigations items. + */ + navItems: NavItemType[]; +}; + +function NavMobile({ isOpen, openMenu, closeMenu, navItems }: NavMobilePropsType) { return (
@@ -64,9 +91,7 @@ function NavMobile({ isOpen, openMenu, closeMenu, navItems }) {