fix: build (#806)

* fix: node version in the cypress workflow

* chore: remove unused symbols

* chore: update package lock

* fix: add missing dependency for React.useEffect

* chore: cosmetics/indentation

* chore: sync and upgrade some actions versions

Author: seewerah

.github/workflows/cypress.yml

@@ -17,10 +17,14 @@ jobs:
         node-version: [16.x]
 
     steps:
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v6
         with:
           build: npm run build
           start: npm start

.github/workflows/index.yml

@@ -18,15 +18,19 @@ jobs:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        node-version: [16.x]
+
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: ${{ matrix.node-version }}
 
       - name: Cache dependencies
         uses: actions/cache@v4

.github/workflows/lighthouse.yml

@@ -15,15 +15,15 @@ jobs:
         node-version: [16.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies

components/site/baseNavigation.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import { getWindow } from 'utils/ssr';
 import Link from 'next/link';
 import { Box, BoxProps, ScreenReaderOnly, styles } from '@sparkpost/matchbox';
-import {
-  KeyboardArrowDown,
-  KeyboardArrowUp,
-} from '@sparkpost/matchbox-icons';
+import { KeyboardArrowDown, KeyboardArrowUp } from '@sparkpost/matchbox-icons';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import { tokens } from '@sparkpost/design-tokens';
@@ -36,22 +33,22 @@ export const StyledLink = styled.a<{ $active?: boolean; $level?: number }>`
   &:active {
     text-decoration: none;
     ${({ $active, $level }) =>
-    css({
-      py: '200',
-      pr: '700',
-      pl: `calc(${tokens.spacing_500} + ${tokens.spacing_200} * ${$level})`,
-      bg: $active ? 'blue.700' : 'transparent',
-      color: $active ? 'white' : 'gray.900',
-    })}
+      css({
+        py: '200',
+        pr: '700',
+        pl: `calc(${tokens.spacing_500} + ${tokens.spacing_200} * ${$level})`,
+        bg: $active ? 'blue.700' : 'transparent',
+        color: $active ? 'white' : 'gray.900',
+      })}
   }
 
   &:hover {
     ${({ $active }) => {
-    return css({
-      bg: $active ? 'blue.700' : 'gray.200',
-      color: $active ? 'white' : 'gray.900',
-    });
-  }}
+      return css({
+        bg: $active ? 'blue.700' : 'gray.200',
+        color: $active ? 'white' : 'gray.900',
+      });
+    }}
   }
 `;
 
@@ -116,15 +113,15 @@ const Chevron = (props: { expanded: boolean }): JSX.Element => {
   return expanded ? <KeyboardArrowUp size={18} /> : <KeyboardArrowDown size={18} />;
 };
 
-const StyledChevronWrapper = styled(Box) <BoxProps & { $active?: boolean }>`
+const StyledChevronWrapper = styled(Box)<BoxProps & { $active?: boolean }>`
   ${styles.buttonReset}
   cursor: pointer;
   &:hover {
     ${({ $active }) => {
-    return css({
-      color: $active ? 'white' : 'blue.700',
-    });
-  }}
+      return css({
+        color: $active ? 'white' : 'blue.700',
+      });
+    }}
   }
   ${({ $active }) => {
     return css({
@@ -148,7 +145,7 @@ const Item = (props: NavigationItemProps): JSX.Element => {
 
     setExpanded(isExpanded);
     setActive(isActive);
-  }, [link, activeUrl]);
+  }, [link, activeUrl, hasActiveChild]);
 
   return (
     <Box fontSize="200" lineHeight="200" position="relative">

components/site/docsHomePageContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Feedback, HelpOutline, QuestionAnswer } from '@sparkpost/matchbox-icons';
+import { Feedback, HelpOutline } from '@sparkpost/matchbox-icons';
 import Link from 'next/link';
 import { Elixir, PHP, Java, NodeMailer, Python, Node, Go } from './icons';
 import BaseHomePageContent, { SimpleStyledLink } from './baseHomePageContent';

components/site/navigation.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Link from 'next/link';
 import { Box } from '@sparkpost/matchbox';
 import {
-  Forum,
   PeopleOutline,
   Code,
   DeviceHub,