Migrated components to Typescript (#1806)

Co-authored-by: Kyle Holmberg <[email protected]>

components/Footer/__tests__/__snapshots__/Footer.test.tsx.snap

@@ -219,7 +219,6 @@ exports[`Footer > should render with no props passed 1`] = `
       </ForwardRef(LinkComponent)>
       <OutboundLink
         analyticsEventLabel="Privacy footer link"
-        hasIcon={true}
         href="https://www.iubenda.com/privacy-policy/8174861"
       >
         Privacy

components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.js.snap

@@ -13,7 +13,7 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
     Professional Details
   </h3>
   <div
-    className="flex flex-col my-6 mx-0 items-center"
+    className="flex flex-col items-center mx-0 my-6"
   >
     <label
       htmlFor="steps-indicator"

components/Nav/Nav.js → components/Nav/Nav.tsx

@@ -25,11 +25,6 @@ export const Nav = () => {
     document.body.style.overflow = 'auto';
   };
 
-  const redirectRightClick = event_ => {
-    event_.preventDefault();
-    Router.push('/branding');
-  };
-
   useEffect(() => {
     Router.events.on('routeChangeComplete', closeMobileMenu);
 
@@ -54,7 +49,10 @@ export const Nav = () => {
             <Link href="/" key="Home">
               <a
                 className={classNames(styles.logoLink, styles.link)}
-                onContextMenu={redirectRightClick}
+                onContextMenu={event => {
+                  event.preventDefault();
+                  Router.push('/branding');
+                }}
               >
                 <Logo className={styles.logo} style={{ width: 224, height: 42 }} fill="#f7f7f7" />
               </a>
@@ -66,7 +64,9 @@ export const Nav = () => {
                   key={navItem.name}
                   {...navItem}
                   icon={
-                    navItem.icon === 'UserLogo' ? <UserLogo className={styles.navIcon} /> : null
+                    'icon' in navItem && navItem.icon === 'UserLogo' ? (
+                      <UserLogo className={styles.navIcon} />
+                    ) : null
                   }
                 />
               ))}

components/Nav/NavListItem/NavListItem.js → components/Nav/NavListItem/NavListItem.tsx

@@ -1,33 +1,39 @@
 import { useState } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { arrayOf, shape, string, element } from 'prop-types';
 import PlusIcon from 'static/images/icons/plus.svg';
 import MinusIcon from 'static/images/icons/minus.svg';
 import styles from './NavListItem.module.css';
 
-NavListItem.propTypes = {
-  href: string.isRequired,
-  name: string.isRequired,
-  sublinks: arrayOf(
-    shape({
-      name: string.isRequired,
-      href: string.isRequired,
-    }),
-  ),
-  icon: element,
+type SublinkType = {
+  name: string;
+  href: string;
 };
 
-NavListItem.defaultProps = {
-  sublinks: [],
-  icon: null,
+export type NavListItemPropsType = {
+  /**
+   * Text used for the label.
+   */
+  name: string;
+  /**
+   * Url to be passed to the base anchor element.
+   */
+  href: string;
+  /**
+   * List of child links containing the `name` and `href`
+   */
+  sublinks?: SublinkType[];
+  /**
+   * Includes an optional icon.
+   */
+  icon?: React.ReactElement | null;
 };
 
-function NavListItem({ sublinks, href, name, icon }) {
+function NavListItem({ sublinks, href, name, icon = null }: NavListItemPropsType) {
   const [areSublinksVisible, setSublinksVisible] = useState(false);
 
-  const handleKeyDown = (event, indexKeyedOn) => {
-    const lastSublinkIndex = sublinks.length - 1;
+  const handleKeyDown = (event: React.KeyboardEvent, indexKeyedOn: number) => {
+    const lastSublinkIndex = sublinks && sublinks.length - 1;
     const isLastSublink = indexKeyedOn === lastSublinkIndex;
     const isFirstSublink = indexKeyedOn === 0;
 
@@ -43,7 +49,7 @@ function NavListItem({ sublinks, href, name, icon }) {
     }
   };
 
-  const hasSublinks = sublinks.length > 0;
+  const hasSublinks = sublinks && sublinks.length > 0;
   const exposeSublinks = () => setSublinksVisible(true);
   const hideSublinks = () => setSublinksVisible(false);
   const invertSublinkVisibility = () => setSublinksVisible(previousState => !previousState);

components/Nav/NavListItem/__tests__/NavListItem.test.js → components/Nav/NavListItem/__tests__/NavListItem.test.tsx

@@ -60,7 +60,7 @@ describe('NavListItem', () => {
   it('should have visible sublinks on when button is clicked', () => {
     const { container } = render(<NavListItem {...testDataWithSublinks} />);
 
-    const button = container.querySelector('button');
+    const button = container.querySelector('button')!;
 
     fireEvent.click(button);
 
@@ -73,7 +73,9 @@ describe('NavListItem', () => {
     expect(queryByTestId('minus-icon')).toBeNull();
     expect(queryByTestId('plus-icon')).not.toBeNull();
 
-    fireEvent.mouseEnter(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.mouseEnter(button);
 
     expect(queryByTestId('minus-icon')).not.toBeNull();
     expect(queryByTestId('plus-icon')).toBeNull();
@@ -86,14 +88,18 @@ describe('NavListItem', () => {
     fireEvent.mouseEnter(link);
     expect(container.querySelector('ul')).not.toHaveClass('invisible');
 
-    fireEvent.click(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.click(button);
     expect(container.querySelector('ul')).toHaveClass('invisible');
   });
 
   it('should show sublinks on click, then hide them on pressing Shift+Tab on first sublink', () => {
     const { container, getByTestId } = render(<NavListItem {...testDataWithSublinks} />);
 
-    fireEvent.click(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.click(button);
     expect(container.querySelector('ul')).not.toHaveClass('invisible');
 
     fireEvent.keyDown(getByTestId('Nav Item Test - 1'), KEY_CODES.TAB_AND_SHIFT);
@@ -103,7 +109,9 @@ describe('NavListItem', () => {
   it('should show sublinks on click, then hide them on pressing Tab on last sublink', () => {
     const { container, getByTestId } = render(<NavListItem {...testDataWithSublinks} />);
 
-    fireEvent.click(container.querySelector('button'));
+    const button = container.querySelector('button')!;
+
+    fireEvent.click(button);
     expect(container.querySelector('ul')).not.toHaveClass('invisible');
 
     fireEvent.keyDown(getByTestId('Nav Item Test - 2'), KEY_CODES.TAB);

components/Nav/NavMobile/NavMobile.js → 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 (
     <header className={styles.NavMobile} data-testid="Mobile Nav Container">
       <Link href="/">
@@ -64,9 +91,7 @@ function NavMobile({ isOpen, openMenu, closeMenu, navItems }) {
           <ul className={styles.ul}>
             <li className={styles.li} key="Home">
               <Link href="/">
-                <a className={styles.link} name="dropdown">
-                  Home
-                </a>
+                <a className={styles.link}>Home</a>
               </Link>
             </li>
             {navItems.map(navlink => (

components/Nav/NavMobile/__tests__/NavMobile.test.js → components/Nav/NavMobile/__tests__/NavMobile.test.tsx

@@ -49,7 +49,9 @@ describe('NavMobile', () => {
       />,
     );
 
-    fireEvent.click(wrapper.queryByTestId('Hamburger Button'));
+    const hamburgerButton = wrapper.queryByTestId('Hamburger Button')!;
+
+    fireEvent.click(hamburgerButton);
 
     expect(mockOpen).toHaveBeenCalled();
   });
@@ -61,7 +63,9 @@ describe('NavMobile', () => {
       <NavMobile navItems={mobileNavItems} isOpen openMenu={() => {}} closeMenu={mockClose} />,
     );
 
-    fireEvent.click(wrapper.queryByTestId(CLOSE_BUTTON));
+    const closeButton = wrapper.queryByTestId(CLOSE_BUTTON)!;
+
+    fireEvent.click(closeButton);
 
     expect(mockClose).toHaveBeenCalled();
   });

components/Nav/__tests__/Nav.test.js → components/Nav/__tests__/Nav.test.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error
 import cookie from 'js-cookie';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { CLOSE_BUTTON } from 'common/constants/testIDs';
@@ -25,7 +26,9 @@ describe('Nav', () => {
 
     expect(screen.queryByTestId('Mobile Nav')).toBeNull();
 
-    fireEvent.click(screen.queryByTestId('Hamburger Button'));
+    const hamburgerButton = screen.queryByTestId('Hamburger Button')!;
+
+    fireEvent.click(hamburgerButton);
 
     expect(await screen.findByTestId('Mobile Nav')).not.toBeNull();
   });

components/OutboundLink/OutboundLink.js → components/OutboundLink/OutboundLink.tsx

@@ -1,33 +1,43 @@
-import { bool, node, string } from 'prop-types';
 import { gtag } from 'common/utils/thirdParty/gtag';
 import ExternalLinkIcon from 'static/images/icons/FontAwesome/external-link-square-alt-solid.svg';
 import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import classNames from 'node_modules/classnames/index';
 
-OutboundLink.propTypes = {
-  // will report this label plus the URL from where it was clicked
-  analyticsEventLabel: string.isRequired,
-  children: node.isRequired,
-  className: string,
-  'data-testid': string,
-  hasIcon: bool,
-  href: string.isRequired,
-};
-
-OutboundLink.defaultProps = {
-  className: undefined,
-  'data-testid': undefined,
-  hasIcon: true,
+export type OutboundLinkPropsType = {
+  /**
+   * will report this label plus the URL from where it was clicked
+   */
+  analyticsEventLabel: string;
+  /**
+   * Url path for the link.
+   */
+  href: string;
+  /**
+   * Content to be rendered as the link.
+   */
+  children: React.ReactNode;
+  /**
+   * Name of style class to use.
+   */
+  className?: string;
+  /**
+   * Sets an id to the base element for testing.
+   */
+  'data-testid'?: string;
+  /**
+   * Adds an an icon to identify link is an external link.
+   */
+  hasIcon?: boolean;
 };
 
 function OutboundLink({
   analyticsEventLabel,
   children,
   'data-testid': testID,
   className,
-  hasIcon,
+  hasIcon = true,
   href,
-}) {
+}: OutboundLinkPropsType) {
   const isNotMailToLink = !href.startsWith('mailto:');
 
   const trackOutboundLinkClick = () => {

components/OutboundLink/__stories__/OutboundLink.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { descriptions } from 'common/constants/descriptions';
+import OutboundLink from '../OutboundLink';
+
+type OutboudLinkStoryType = StoryObj<typeof OutboundLink>;
+
+const meta: Meta<typeof OutboundLink> = {
+  title: 'OutboundLink',
+  component: OutboundLink,
+  args: {
+    analyticsEventLabel: 'Event label',
+    children: descriptions.short,
+    href: '#',
+  },
+};
+
+export default meta;
+
+export const Default: OutboudLinkStoryType = {
+  render: args => <OutboundLink {...args} />,
+};