Refactor/lint onboarding slides (#4240)

app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap

@@ -122,8 +122,8 @@ preact-render-spy (1 nodes)
         <label htmlFor="checked_code_of_conduct">
           <input
             type="checkbox"
-            name="checked_code_of_conduct"
             id="checked_code_of_conduct"
+            name="checked_code_of_conduct"
             checked={false}
             onChange={[Function bound handleChange]}
            />

app/javascript/onboarding/components/EmailListTermsConditionsForm.jsx

@@ -1,3 +1,5 @@
+/* eslint camelcase: "off" */
+
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 
@@ -115,8 +117,10 @@ class EmailTermsConditionsForm extends Component {
               BACK
             </button>
             <div
+              /* eslint-disable react/no-danger */
               dangerouslySetInnerHTML={{ __html: textShowing }}
               style={{ height: '360px', overflow: 'scroll' }}
+              /* eslint-enable react/no-danger */
             />
           </div>
         </div>
@@ -131,8 +135,8 @@ class EmailTermsConditionsForm extends Component {
             <label htmlFor="checked_code_of_conduct">
               <input
                 type="checkbox"
-                name="checked_code_of_conduct"
                 id="checked_code_of_conduct"
+                name="checked_code_of_conduct"
                 checked={checked_code_of_conduct}
                 onChange={this.handleChange}
               />

app/javascript/onboarding/components/PersonalInfoForm.jsx

@@ -1,10 +1,16 @@
+/* eslint camelcase: "off" */
+
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 
 import Navigation from './Navigation';
 import { getContentOfToken } from '../utilities';
 
-const setupFormTextField = ({ labelText = '', entityName = '', onChangeCallback }) => {
+const setupFormTextField = ({
+  labelText = '',
+  entityName = '',
+  onChangeCallback,
+}) => {
   return (
     <label htmlFor={entityName}>
       {labelText}
@@ -16,8 +22,8 @@ const setupFormTextField = ({ labelText = '', entityName = '', onChangeCallback
         maxLength="60"
       />
     </label>
-  )
-}
+  );
+};
 
 class PersonalInfoForm extends Component {
   constructor(props) {
@@ -96,27 +102,21 @@ class PersonalInfoForm extends Component {
         <div className="onboarding-content about">
           <h2>About You!</h2>
           <form>
-            {
-              setupFormTextField({
-                labelText: 'Where are you located?',
-                entityName: 'location',
-                onChangeCallback: this.handleChange
-              })
-            }
-            {
-              setupFormTextField({
-                labelText: 'What is your title?',
-                entityName: 'employment_title',
-                onChangeCallback: this.handleChange
-              })
-            }
-            {
-              setupFormTextField({
-                labelText: 'Where do you work?',
-                entityName: 'employer_name',
-                onChangeCallback: this.handleChange
-              })
-            }
+            {setupFormTextField({
+              labelText: 'Where are you located?',
+              entityName: 'location',
+              onChangeCallback: this.handleChange,
+            })}
+            {setupFormTextField({
+              labelText: 'What is your title?',
+              entityName: 'employment_title',
+              onChangeCallback: this.handleChange,
+            })}
+            {setupFormTextField({
+              labelText: 'Where do you work?',
+              entityName: 'employer_name',
+              onChangeCallback: this.handleChange,
+            })}
           </form>
         </div>
         <Navigation prev={prev} next={this.onSubmit} />
@@ -125,6 +125,12 @@ class PersonalInfoForm extends Component {
   }
 }
 
+setupFormTextField.propTypes = {
+  labelText: PropTypes.string.isRequired,
+  entityName: PropTypes.string.isRequired,
+  onChangeCallback: PropTypes.func.isRequired,
+};
+
 PersonalInfoForm.propTypes = {
   prev: PropTypes.func.isRequired,
   next: PropTypes.string.isRequired,

app/javascript/onboarding/components/SlideContent.jsx

@@ -24,10 +24,10 @@ const SlideContent = ({
 );
 
 SlideContent.propTypes = {
-  imageSource: PropTypes.string,
-  imageAlt: PropTypes.string,
-  content: PropTypes.string,
-  style: PropTypes.object,
+  imageSource: PropTypes.string.isRequired,
+  imageAlt: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  style: PropTypes.shape().isRequired, // bypassing shape validator to allow for additional attributes
 };
 
 export default SlideContent;