Results-Alert Component

frontend/models/index.tsx

@@ -7,6 +7,7 @@ import { passwordToggleViews } from "./password-aid"
 import { PrimaryInputNames, primaryInputValidation } from "./primary-input"
 import { states } from "./state-select"
 import { GeoJson, Filter, Data, CityProperties } from "./visualizations"
+import { SearchResultsTypes, alertContent } from "./results-alert"
 
 export {
  AppRoutes,
@@ -20,6 +21,8 @@ export {
  primaryInputValidation,
  states,
  tooltipContent,
- TooltipTypes
+ TooltipTypes,
+ SearchResultsTypes,
+ alertContent
 }
 export type { GeoJson, Filter, Data, CityProperties }

frontend/models/results-alert.ts

@@ -0,0 +1,9 @@
+export enum SearchResultsTypes {
+ NOSEARCHPARAMS = "nosearch",
+ NORESULTS = "noresults"
+}
+
+export const alertContent: { [key in SearchResultsTypes]: string } = {
+ [SearchResultsTypes.NOSEARCHPARAMS]: "You must provide at least one field",
+ [SearchResultsTypes.NORESULTS]: "No matching results found"
+}

frontend/shared-components/index.tsx

@@ -7,6 +7,7 @@ import PrimaryInput from "./primary-input/primary-input"
 import ResponseTextArea from "./response-textarea/response-textarea"
 import USAStateInput from "./state-input/state-input"
 import PrimaryButton from "./primary-button/primary-button"
+import ResultsAlert from "./results-alert/results-alert"
 
 export {
  ExternalLink,
@@ -17,5 +18,6 @@ export {
  PrimaryButton,
  PrimaryInput,
  ResponseTextArea,
- USAStateInput
+ USAStateInput,
+ ResultsAlert
 }

frontend/shared-components/results-alert/results-alert.module.css

@@ -0,0 +1,30 @@
+.outerBox {
+ position: relative;
+ width: 24rem;
+ height: 10rem;
+ z-index: 100;
+ margin: 16rem auto;
+ background: #ffffff;
+ border: 0.25rem solid #000000;
+ box-sizing: border-box;
+ border-radius: 8px;
+}
+
+.innerBox {
+ display: flex;
+ font-size: 0.75rem;
+ color: red;
+ padding: 0.5rem;
+ margin: 1rem 2rem 1.5rem 2rem;
+ border: 2px solid #bf1212;
+ box-sizing: border-box;
+ border-radius: 3px;
+}
+
+.alertMessage {
+ font-weight: bold;
+}
+
+.innerBox svg {
+ margin: 0.1rem 0.5rem;
+}

frontend/shared-components/results-alert/results-alert.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import ResultsAlert from "./results-alert"
+import { SearchResultsTypes } from "../../models/results-alert"
+
+export default {
+ title: "Shared Components/Results Alert",
+ component: ResultsAlert
+} as ComponentMeta<typeof ResultsAlert>
+
+const Template: ComponentStory<typeof ResultsAlert> = (args: any) => <ResultsAlert {...args} />
+
+export const NoResults = Template.bind({})
+NoResults.args = {
+ type: SearchResultsTypes.NORESULTS,
+ returnHandler: () => {}
+}
+export const NoParams = Template.bind({})
+NoParams.args = {
+ type: SearchResultsTypes.NOSEARCHPARAMS,
+ returnHandler: () => {}
+}

frontend/shared-components/results-alert/results-alert.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+import styles from "./results-alert.module.css"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons"
+import { alertContent, SearchResultsTypes } from "../../models"
+import { PrimaryButton } from "../"
+
+interface ResultsAlertProps {
+ type: SearchResultsTypes
+ returnHandler(): any
+}
+
+export default function ResultsAlert({ type, returnHandler }: ResultsAlertProps) {
+ const alertMessage = alertContent[type]
+ return (
+ <div className={styles.outerBox} role="alert">
+ <div className={styles.innerBox}>
+ <FontAwesomeIcon size="2x" icon={faExclamationTriangle} />
+ <div>
+ <span className={styles.alertMessage}>{alertMessage}</span>
+ <p>Please revise search or explore map</p>
+ </div>
+ </div>
+
+ <PrimaryButton onClick={returnHandler}>Return</PrimaryButton>
+ </div>
+ )
+}

frontend/tests/snapshots/__snapshots__/results-alert.test.tsx.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders no results alert correctly 1`] = `
+<div>
+ <div
+ class="outerBox"
+ role="alert"
+ >
+ <div
+ class="innerBox"
+ >
+ <svg
+ aria-hidden="true"
+ class="svg-inline--fa fa-exclamation-triangle fa-w-18 fa-2x "
+ data-icon="exclamation-triangle"
+ data-prefix="fas"
+ focusable="false"
+ role="img"
+ viewBox="0 0 576 512"
+ xmlns="https://www.w3.org/2000/svg"
+ >
+ <path
+ d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+ fill="currentColor"
+ />
+ </svg>
+ <div>
+ <span
+ class="alertMessage"
+ >
+ No matching results found
+ </span>
+ <p>
+ Please revise search or explore map
+ </p>
+ </div>
+ </div>
+ <button
+ class="primaryButton"
+ type="submit"
+ >
+ Return
+ </button>
+ </div>
+</div>
+`;
+
+exports[`renders no search params alert correctly 1`] = `
+<div>
+ <div
+ class="outerBox"
+ role="alert"
+ >
+ <div
+ class="innerBox"
+ >
+ <svg
+ aria-hidden="true"
+ class="svg-inline--fa fa-exclamation-triangle fa-w-18 fa-2x "
+ data-icon="exclamation-triangle"
+ data-prefix="fas"
+ focusable="false"
+ role="img"
+ viewBox="0 0 576 512"
+ xmlns="https://www.w3.org/2000/svg"
+ >
+ <path
+ d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+ fill="currentColor"
+ />
+ </svg>
+ <div>
+ <span
+ class="alertMessage"
+ >
+ You must provide at least one field
+ </span>
+ <p>
+ Please revise search or explore map
+ </p>
+ </div>
+ </div>
+ <button
+ class="primaryButton"
+ type="submit"
+ >
+ Return
+ </button>
+ </div>
+</div>
+`;

frontend/tests/snapshots/results-alert.test.tsx

@@ -0,0 +1,17 @@
+import { ResultsAlert } from "../../shared-components"
+import { render } from "../test-utils"
+import { SearchResultsTypes } from "../../models"
+
+it("renders no results alert correctly", () => {
+ const { container } = render(
+ <ResultsAlert type={SearchResultsTypes.NORESULTS} returnHandler={() => {}} />
+ )
+ expect(container).toMatchSnapshot()
+})
+
+it("renders no search params alert correctly", () => {
+ const { container } = render(
+ <ResultsAlert type={SearchResultsTypes.NOSEARCHPARAMS} returnHandler={() => {}} />
+ )
+ expect(container).toMatchSnapshot()
+})