merged with dev and resolved conflicts

feedback-module/package.json

@@ -24,6 +24,7 @@
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.11.1",
+    "react-loader-spinner": "^4.0.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

feedback-module/public/index.html

@@ -32,9 +32,10 @@
       id="feedback-widget"
       lang="en"
       pagetitle="{this current page}"
-      endpoint="xedh26krnxt1ti"
+      endpoint=""
       gaid="G-GTL37H4YS0"
     ></div>
+    <!-- xedh26krnxt1ti -->
     <!-- "G-GTL37H4YS0" -->
     <!--
       This HTML file is a template.

feedback-module/src/components/LightContainer.js

@@ -1,8 +1,6 @@
 import React from "react";
 import { Grid } from "@trussworks/react-uswds";
 
-import { SCREEN_CONTAINER_STYLE } from "../assets/styling_classnames";
-
 function LightContainer({ children, formID }) {
   const isChildNull = (children) => {
     /* returns true if there are no elements outside of the form element
@@ -12,7 +10,7 @@ function LightContainer({ children, formID }) {
   return isChildNull(children) ? (
     children
   ) : (
-    <Grid className={SCREEN_CONTAINER_STYLE}>{children}</Grid>
+    <Grid className="feedback-module__main">{children}</Grid>
   );
 }
 

feedback-module/src/components/Module.js

@@ -2,14 +2,6 @@ import React, { useEffect, useState, useRef } from "react";
 import { GridContainer, Grid, Form } from "@trussworks/react-uswds";
 import { useTranslation } from "react-i18next";
 
-import {
-  MODULE_CONTAINER_STYLE,
-  SCREEN_CONTAINER_STYLE,
-  H1_DARK_STYLE,
-  H1_WHITE_STYLE,
-  FORM_STYLE,
-  PLAINTEXT_STYLE,
-} from "../assets/styling_classnames";
 import { SCREENS, INITIAL_SCREEN } from "../lib/constants";
 import requestService from "../services/requestService";
 import googleAnalytics from "../lib/hooks/googleAnalytics";
@@ -62,12 +54,8 @@ function Module({ pagetitle, endpoint, dir }) {
   const { t, i18n } = useTranslation();
   const en = i18n.getFixedT("en");
 
-  const {
-    trackFutureResearch,
-    pageTitleAsScreen,
-    pageChange,
-    moduleOnScreen,
-  } = googleAnalytics();
+  const { trackFutureResearch, pageTitleAsScreen, pageChange, moduleOnScreen } =
+    googleAnalytics();
 
   const moduleVisibleRef = useRef();
 
@@ -167,37 +155,41 @@ function Module({ pagetitle, endpoint, dir }) {
       <GridContainer
         desktop={{ col: 2 }}
         mobile={{ col: "fill" }}
-        className={MODULE_CONTAINER_STYLE}
+        className="feedback-module"
         dir={dir}
       >
         {moduleOnScreen(moduleVisibleRef)}
         <Header innerRef={headerRef} />
         {screen.titleInverse && (
-          <Grid className={`bg-primary ${SCREEN_CONTAINER_STYLE}`}>
+          <Grid className={"bg-primary feedback-module__main"}>
             <p
-              className={`${H1_WHITE_STYLE} ${dir === "rtl" && "text-right"}`}
+              className="font-sans-md2 feedback-module__heading feedback-module__heading--inverse"
               dangerouslySetInnerHTML={{ __html: t(screen.titleInverse) }}
             ></p>
           </Grid>
         )}
         {
           <LightContainer formID={screen.formID}>
             {screen.title && (
-              <p
-                className={`${H1_DARK_STYLE} ${dir === "rtl" && "text-right"}`}
-              >
+              <p className="font-sans-md2 feedback-module__heading feedback-module__heading--default">
                 {`${t(screen.title, { page: pagetitle })}${
                   screen.checkboxes && screen.checkboxes.required ? "*" : ""
                 }`}
               </p>
             )}
-            {screen.plainText && (
-              <p
-                className={PLAINTEXT_STYLE}
-                dangerouslySetInnerHTML={{ __html: t(screen.plainText) }}
-              ></p>
-            )}
-            <Form className={FORM_STYLE} onSubmit={handleSubmit}>
+            {screen.plainText &&
+              t(screen.plainText) &&
+              t(screen.plainText).map((paragraph, index) => {
+                return (
+                  <p
+                    className="font-sans-md feedback-module__plaintext"
+                    key={index}
+                  >
+                    {paragraph}
+                  </p>
+                );
+              })}
+            <Form onSubmit={handleSubmit}>
               {screen.checkboxes && t(screen.checkboxes.labels) && (
                 <>
                   {checkboxError && (
@@ -231,8 +223,7 @@ function Module({ pagetitle, endpoint, dir }) {
                     return (
                       <ModuleButton
                         buttonText={t(text)}
-                        isRight={type === "submit"}
-                        className={dir === "rtl" ? "text-right" : ""}
+                        className={`usa-button--${type}`}
                         onClick={() =>
                           changeScreen(text, nextScreen, feedbackID)
                         }

feedback-module/src/components/common/Button.js

@@ -1,19 +1,12 @@
 import React from "react";
 import { Button } from "@trussworks/react-uswds";
 
-import {
-  BUTTON_STYLE,
-  BUTTON_RIGHT_STYLE,
-} from "../../assets/styling_classnames";
-
-function ModuleButton({ buttonText, onClick, isRight, className }) {
+function ModuleButton({ buttonText, onClick, className }) {
   return (
     <Button
       aria-label={buttonText}
       onClick={onClick}
-      className={`${
-        isRight && BUTTON_RIGHT_STYLE
-      } ${BUTTON_STYLE} ${className}`}
+      className={className}
       type="button"
     >
       {buttonText}

feedback-module/src/components/common/Checkbox.js

@@ -1,8 +1,6 @@
 import React from "react";
 import { Checkbox } from "@trussworks/react-uswds";
 
-import { CHECKBOX_STYLE } from "../../assets/styling_classnames";
-
 function ModuleCheckbox({ label, id, onCheck, firstCheckRef }) {
   // Sets checkbox to checked when user presses enter
   const handleKeyDown = (e) => {
@@ -17,7 +15,6 @@ function ModuleCheckbox({ label, id, onCheck, firstCheckRef }) {
       id={id}
       label={label}
       color="primary"
-      className={CHECKBOX_STYLE}
       onChange={onCheck}
       onKeyDown={handleKeyDown}
       inputRef={firstCheckRef}

feedback-module/src/components/common/Header.js

@@ -1,17 +1,16 @@
 import React from "react";
 import { GridContainer } from "@trussworks/react-uswds";
 
-import Logo from "../../assets/header_logo.png";
-import { HEADER_STYLE } from "../../assets/styling_classnames";
+import Logo from "../../assets/header_logo.svg";
 
 function Header({ innerRef }) {
   return (
     <>
       {/* Using dummy empty div to host headerRef since ref does not work with GridContainer  */}
       <div ref={innerRef}></div>
-      <GridContainer className={HEADER_STYLE}>
+      <GridContainer className="feedback-module__header">
         <img
-          className="width-auto height-2 mobile-lg:height-205 mobile-lg-height-205"
+          className="feedback-module__logo"
           src={Logo}
           alt="New York City feedback module logo"
         />

feedback-module/src/components/common/LoadingSpinner.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Loader from "react-loader-spinner";
+
+import styles from "../../styles/export.module.scss";
+
+function LoadingSpinner() {
+  return (
+    <div>
+      <Loader
+        type="TailSpin"
+        color={styles.primaryColor}
+        height={75}
+        width={75}
+        className="text-center"
+      />
+    </div>
+  );
+}
+
+export default LoadingSpinner;

feedback-module/src/components/common/Textbox.js

@@ -1,11 +1,6 @@
 import React from "react";
 import { TextInput, Label, CharacterCount } from "@trussworks/react-uswds";
 
-import {
-  LABEL_STYLE,
-  TEXTAREA_STYLE,
-  TEXTINPUT_STYLE,
-} from "../../assets/styling_classnames";
 import { TEXTAREA_MAX_CHAR, OTHER_MAX_CHAR } from "../../lib/constants";
 
 function Textbox({
@@ -22,15 +17,14 @@ function Textbox({
 }) {
   return (
     <>
-      <Label className={`${className} ${LABEL_STYLE}`} htmlFor={id}>
+      <Label className={className} htmlFor={id}>
         {`${label}${required ? "*" : ""}`}
       </Label>
       {showErrors}
       {type === "textarea" ? (
         <CharacterCount
           id={id}
           name={label}
-          className={`${TEXTAREA_STYLE} ${invalid && "margin-top-3"} `}
           onChange={onChange}
           aria-invalid={invalid}
           aria-describedby={invalid ? describedBy : undefined}
@@ -43,9 +37,6 @@ function Textbox({
           id={id}
           name={label}
           type={type}
-          className={`${className} ${TEXTINPUT_STYLE} ${
-            invalid && "margin-top-3"
-          } margin-right-2px`}
           onChange={onChange}
           aria-invalid={invalid}
           aria-describedby={invalid ? describedBy : undefined}
@@ -57,9 +48,7 @@ function Textbox({
           id={id}
           name={label}
           type={type}
-          className={`${className} ${TEXTINPUT_STYLE} ${
-            invalid && "margin-top-3"
-          }`}
+          className={className}
           onChange={onChange}
           aria-invalid={invalid}
           aria-describedby={invalid ? describedBy : undefined}

feedback-module/src/index.js

@@ -6,6 +6,8 @@ import "./styles/index.scss";
 import App from "./App";
 import GA4React from "ga-4-react";
 
+import LoadingSpinner from "./components/common/LoadingSpinner";
+
 const WidgetDivs = document.querySelectorAll("#feedback-widget");
 
 const renderApp = (Div, lang, pagetitle, endpoint) => {
@@ -15,7 +17,7 @@ const renderApp = (Div, lang, pagetitle, endpoint) => {
 
   ReactDOM.render(
     <React.StrictMode>
-      <Suspense fallback="... is loading">
+      <Suspense fallback={<LoadingSpinner />}>
         <App
           domElement={Div}
           lang={lang}

feedback-module/src/lib/hooks/useCheckboxes.js

@@ -40,7 +40,6 @@ export default function useCheckboxes(initialFields = null, initialOther = "") {
   };
 
   const otherFieldValidated = () => {
-    console.log(otherField.length);
     return otherField.length <= OTHER_MAX_CHAR;
   };