(#97) Update app module architecture with NCIDS components

* Update header and footer within index.html
* Update webpack config sass-loader
* Add ncids-application-page.scss
* Add reference to cancer.gov ncids-minimal.css stylesheet within index.html
* Connect toggle / dropdown select to translation
* Add `ncids-application-page.scss` and updated `webpack.config` file to configure sass-loader with added load paths
* Update `css-loader` from `3.4.2` to `5.2.7`, `postcss-loader` from `3.0.0` to `4.3.0`
* Downgrade `sass-loader` from `10.4.1` t0 `10.2.0`
* Update `webpack.config`
* Remove reference to cancer.gov ncids-minimal.css stylesheet within index.html
* Create entrypoint in `webpack.config` that adds `ncids-minimal.css` and `ncids-application-page.css` to app
* Update current template to use ncids grid
* Add mobile menu
* Add tests for SideNav and ItemDetail view
* Added `svg-loader` config to webpack
* Fixed typo and pathing in `getSampleCallResults` which was causing api call failure
* Updated `PageNotFound` error page
* Removed all previous postcss related packages and replaced with `postcss`, postcss-loader` and `autoprefixer`
* Added fonts to `index.html`
* Reverted changes in `PageNotFound`. To be reconstructed in line with NCIDS layout/styling
* Added back `postcss-safe-parser` and `postcss-prefix-selector`
* Removed `generate-cgdp-legacy.js` file along with references in `package.json` to run build script, and `postcss-prefix-selector` which was used in the file.
* Removed `HomeNoSideNav` component and all references
* Updated `PageNotFound` component to conform with NCIDS styling
* Updated unit tests for `PageNotFound`

Closes #97

config/webpack.config.js

@@ -101,7 +101,7 @@ module.exports = function (webpackEnv) {
 					// 	}),
 					// 	// Adds PostCSS Normalize as the reset css with default options,
 					// 	// so that it honors browserslist config in package.json
-					// 	// which in turn let's users customize the target behavior as per their needs.
+					// 	// which in turn lets users customize the target behavior as per their needs.
 					// 	postcssNormalize(),
 					// ],
 					sourceMap: isEnvProduction && shouldUseSourceMap,

public/index.css

@@ -1,18 +1,3 @@
-body {
-	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-		sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	height: 100%;
-}
-
-code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-		monospace;
-}
-
 .general-page-body-container,
 .mock-header {
 	position: relative;

src/App.js

@@ -5,18 +5,17 @@ import track from 'react-tracking';
 import './styles/app.scss';
 
 import { useAppPaths } from './hooks';
-import { Home, HomeNoSideNav, ItemDetails, PageNotFound } from './views';
+import { Home, ItemDetails, PageNotFound } from './views';
 
 const App = () => {
 	// this should be a DUMB component that just displays our display(group) components
-	const { HomePath, HomeNoSideNavPath, ItemDetailsPath } = useAppPaths();
+	const { HomePath, ItemDetailsPath } = useAppPaths();
 
 	return (
 		<Router>
 			<Routes>
 				<Route path={HomePath()} element={<Home />} />
 				<Route path={ItemDetailsPath()} element={<ItemDetails />} />
-				<Route path={HomeNoSideNavPath()} element={<HomeNoSideNav />} />
 				<Route path="/*" element={<PageNotFound />} />
 			</Routes>
 		</Router>

src/views/ErrorBoundary/PageNotFound.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTracking } from 'react-tracking';
 
-import TextInput from '../../components/atomic/TextInput';
 import { useStateValue } from '../../store/store';
 import { i18n } from '../../utils';
 
@@ -78,29 +77,26 @@ const PageNotFound = () => {
 	return (
 		<>
 			{renderHelmet()}
-			<div className="error-container">
+			<div>
 				<h1>{i18n.pageNotFoundTitle[language]}</h1>
 				<>
 					{contentPar.map((content, index) => (
 						<p key={index}>{content}</p>
 					))}
 				</>
-				<div className="error-searchbar">
-					<TextInput
-						id="keywords"
-						action={updateTextInput}
-						classes="searchString"
-						label={i18n.search[language]}
-						labelHidden
-					/>
+				<div className="rap-error-searchbar">
+					<label className="usa-label usa-sr-only" id="input-type-text">
+						{i18n.search[language]}
+					</label>
 					<input
-						type="submit"
-						className="submit button postfix"
-						id="btnSearch"
-						title={i18n.search[language]}
-						value={i18n.search[language]}
-						onClick={executeSearch}
+						className="usa-input usa-input--inline"
+						id="keywords"
+						aria-labelledby="input-type-text"
+						onChange={updateTextInput}
 					/>
+					<button className="usa-button" onClick={executeSearch}>
+						{i18n.search[language]}
+					</button>
 				</div>
 			</div>
 		</>

src/views/ErrorBoundary/PageNotFound.scss

@@ -1,22 +1,9 @@
-.error-container {
-	.error-searchbar {
-		display: block;
-		div.searchString {
-			margin: 0;
-			padding: 0;
-		}
+.rap-error-searchbar {
+	display: block;
 
-		.button {
-			display: inline-block;
-			width: 20%;
-			margin-right: 1em;
-			margin-left: 1em;
-			top: -1px;
-
-			@media screen and (max-width: 414px) {
-				font-size: 14px;
-				width: 24%;
-			}
-		}
+	.usa-input--inline {
+		display: inline-block;
+		margin-right: 5px;
+		margin-bottom: 5px;
 	}
 }

src/views/ErrorBoundary/__tests__/PageNotFound.test.js

@@ -30,9 +30,12 @@ describe('PageNotFound component', () => {
 
 		const expectedPageTitle = 'Page Not Found';
 		expect(screen.getByText(expectedPageTitle)).toBeInTheDocument();
-		const inputBox = screen.getByLabelText('Search');
-		fireEvent.change(inputBox, { target: { value: 'chicken' } });
-		fireEvent.click(screen.getByText('Search'));
+		const searchBox = screen.getAllByLabelText('Search', {
+			selector: 'input',
+		});
+		const searchButton = screen.getByRole('button', { name: 'Search' });
+		fireEvent.change(searchBox[0], { target: { value: 'chicken' } });
+		fireEvent.click(searchButton);
 	});
 
 	it('should show error page title ( Espanol )', async () => {
@@ -57,8 +60,11 @@ describe('PageNotFound component', () => {
 
 		const expectedPageTitle = 'No se encontró la página';
 		expect(screen.getByText(expectedPageTitle)).toBeInTheDocument();
-		const inputBox = screen.getByLabelText('Buscar');
-		fireEvent.change(inputBox, { target: { value: 'pollo' } });
-		fireEvent.click(screen.getByText('Buscar'));
+		const searchBox = screen.getAllByLabelText('Buscar', {
+			selector: 'input',
+		});
+		const searchButton = screen.getByRole('button', { name: 'Buscar' });
+		fireEvent.change(searchBox[0], { target: { value: 'pollo' } });
+		fireEvent.click(searchButton);
 	});
 });

src/views/index.js

@@ -1,4 +1,3 @@
 export { ErrorBoundary, ErrorPage, PageNotFound } from './ErrorBoundary';
 export { default as Home } from './Home';
 export { default as ItemDetails } from './ItemDetails';
-export { default as HomeNoSideNav } from './HomeNoSideNav';