Merge pull request #1384 from GSA/dev

Benefit Finder Release v0.4.0.beta.1
GSA · May 31, 2024 · 8b9a424 · 8b9a424
2 parents ab22a83 + d811d80
commit 8b9a424
Show file tree

Hide file tree

Showing 30 changed files with 366 additions and 525 deletions.
diff --git a/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/App/__tests__/__snapshots__/index.spec.jsx.snap
@@ -358,19 +358,18 @@ exports[`loads window query scenario 1 1`] = `
                     class="bf-usa-list usa-list"
                   >
                     <li>
-                      For full eligibility and requirements visit each agency providing the benefit.
+                      Visit each agency’s website to find full eligibility requirements.
                     </li>
                     <li>
-                      Modifying your responses and completing more questions may open your eligibility to other benefits.
+                      Your results may change if you answer more questions or modify your answers.
                     </li>
                     <li>
-                      To re-start the form
 
                       <a
                         class="bf-usa-summary-box__link usa-summary-box__link"
                         href="#"
                       >
-                        click here
+                        Clear my answers and restart the form.
                       </a>
                     </li>
                   </ul>
@@ -7115,19 +7114,18 @@ exports[`loads window query scenario 2 1`] = `
                     class="bf-usa-list usa-list"
                   >
                     <li>
-                      For full eligibility and requirements visit each agency providing the benefit.
+                      Visit each agency’s website to find full eligibility requirements.
                     </li>
                     <li>
-                      Modifying your responses and completing more questions may open your eligibility to other benefits.
+                      Your results may change if you answer more questions or modify your answers.
                     </li>
                     <li>
-                      To re-start the form
 
                       <a
                         class="bf-usa-summary-box__link usa-summary-box__link"
                         href="#"
                       >
-                        click here
+                        Clear my answers and restart the form.
                       </a>
                     </li>
                   </ul>

diff --git a/benefit-finder/src/shared/api/mock-data/current.js b/benefit-finder/src/shared/api/mock-data/current.js
diff --git a/benefit-finder/src/shared/api/mock-data/current.json b/benefit-finder/src/shared/api/mock-data/current.json
diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/index.spec.jsx b/benefit-finder/src/shared/components/BenefitAccordionGroup/__tests__/index.spec.jsx
@@ -22,7 +22,7 @@ describe('BenefitAccordionGroup', () => {
   })
 
   it('renders (en inglés) when flagged as TRUE', () => {
-    b.benefit.SourceIsEnglish = 'TRUE' // ensure true
+    b.benefit.SourceIsEnglish = true // ensure true
     render(
       <BenefitAccordionGroup
         ui={es.resultsView}
@@ -35,7 +35,7 @@ describe('BenefitAccordionGroup', () => {
   })
 
   it('does not render (en inglés) when flagged as FALSE', () => {
-    b.benefit.SourceIsEnglish = 'FALSE' // ensure false
+    b.benefit.SourceIsEnglish = false // ensure false
     render(
       <BenefitAccordionGroup
         ui={es.resultsView}

diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.jsx
@@ -210,7 +210,7 @@ const BenefitAccordionGroup = ({
                 rel="noopener noreferrer"
               >
                 {visitLabel} {agency.title}{' '}
-                {sourceIsEnglish && SourceIsEnglish === 'TRUE'
+                {sourceIsEnglish && SourceIsEnglish === true
                   ? sourceIsEnglish
                   : ''}
               </ObfuscatedLink>

diff --git a/benefit-finder/src/shared/components/BenefitAccordionGroup/index.stories.jsx b/benefit-finder/src/shared/components/BenefitAccordionGroup/index.stories.jsx
@@ -10,8 +10,8 @@ const entryKey = Object.keys(b[0])
 const { resultsView } = en
 
 const SourceIsEnglishBenefits = b.slice(5, 7)
-SourceIsEnglishBenefits[0].benefit.SourceIsEnglish = 'TRUE' // ensure true
-SourceIsEnglishBenefits[1].benefit.SourceIsEnglish = 'FALSE' // ensure false
+SourceIsEnglishBenefits[0].benefit.SourceIsEnglish = true // ensure true
+SourceIsEnglishBenefits[1].benefit.SourceIsEnglish = false // ensure false
 
 export default {
   component: BenefitAccordionGroup,

diff --git a/benefit-finder/src/shared/components/Button/_index.scss b/benefit-finder/src/shared/components/Button/_index.scss
@@ -33,6 +33,10 @@
 
 .bf-usa-button--outline:hover {
   background-color: color.$white;
-  box-shadow: inset 0 0 0 2px color.$marine;
   color: color.$marine;
+  box-shadow: inset 0 0 0 2px color.$marine;
+}
+
+.bf-usa-button--outline:focus {
+  box-shadow: inset 0 0 0 2px color.$white;
 }
diff --git a/benefit-finder/src/shared/components/Date/index.jsx b/benefit-finder/src/shared/components/Date/index.jsx
@@ -6,8 +6,12 @@ import './_index.scss'
  * a parse our date object
  * @component
  * @param {func} onChange - inherited change handler
- * @param {string} required - inherited string value to manage required state
  * @param {object} value - inherited state values
+ * @param {boolean} required - inherited boolean value to manage required state
+  * @param {object} ui - inherited ui object values
+ * @param {string} id - inherited string value for id specificity
+ * @param {boolean} invalid - inherited boolean value to manage error state
+
  * @return {Date} returns a tandard format Date ie 1995-12-17T03:24:00
  */
 const Date = ({ onChange, value, required, ui, id, invalid }) => {
@@ -43,12 +47,12 @@ const Date = ({ onChange, value, required, ui, id, invalid }) => {
         </div>
         <select
           className={`bf-usa-select usa-select ${
-            required === 'TRUE' ? 'required-field' : ''
+            required === true ? 'required-field' : ''
           }`}
           id={`date_of_birth_month-${id}`}
           name={`date_of_birth_month-${id}`}
           aria-describedby={`month-description-${id}`}
-          required={required === 'TRUE'}
+          required={required === true}
           value={(value && value.month) || ''}
           onChange={onChange}
           aria-invalid={invalid === true}
@@ -74,14 +78,14 @@ const Date = ({ onChange, value, required, ui, id, invalid }) => {
           Enter two numerals for day
         </div>
         <input
-          className={`bf-usa-input usa-input ${required === 'TRUE' ? 'required-field' : ''}`}
+          className={`bf-usa-input usa-input ${required === true ? 'required-field' : ''}`}
           aria-describedby={`day-description-${id}`}
           id={`date_of_birth_day-${id}`}
           name={`date_of_birth_day-${id}`}
           inputMode="numeric"
           value={(value && value.day) || ''}
           onChange={onChange}
-          required={required === 'TRUE'}
+          required={required === true}
           aria-invalid={invalid === true}
         />
       </div>
@@ -96,14 +100,14 @@ const Date = ({ onChange, value, required, ui, id, invalid }) => {
           Enter four numerals for year
         </div>
         <input
-          className={`bf-usa-input usa-input ${required === 'TRUE' ? 'required-field' : ''}`}
+          className={`bf-usa-input usa-input ${required === true ? 'required-field' : ''}`}
           aria-describedby={`year-description-${id}`}
           id={`date_of_birth_year-${id}`}
           name={`date_of_birth_year-${id}`}
           inputMode="numeric"
           value={(value && value.year) || ''}
           onChange={onChange}
-          required={required === 'TRUE'}
+          required={required === true}
           aria-invalid={invalid === true}
         />
       </div>
@@ -113,8 +117,11 @@ const Date = ({ onChange, value, required, ui, id, invalid }) => {
 
 Date.propTypes = {
   onChange: PropTypes.func,
-  required: PropTypes.string,
   value: PropTypes.object,
+  required: PropTypes.bool,
+  ui: PropTypes.object,
+  id: PropTypes.string,
+  invalid: PropTypes.bool,
 }
 
 export default Date
diff --git a/benefit-finder/src/shared/components/Fieldset/index.jsx b/benefit-finder/src/shared/components/Fieldset/index.jsx
@@ -46,7 +46,7 @@ const Fieldset = ({
 
   // determine if we need to include a reqired hint
   const handleRequired =
-    required === 'FALSE' ? <Legend>{legend}</Legend> : RequiredFlag()
+    required === false ? <Legend>{legend}</Legend> : RequiredFlag()
 
   return (
     <fieldset

diff --git a/benefit-finder/src/shared/components/Fieldset/index.stories.jsx b/benefit-finder/src/shared/components/Fieldset/index.stories.jsx
@@ -8,14 +8,14 @@ export default {
     children: <TextInput label="Text input label" />,
     legend: 'Legend',
     hint: 'Hint',
-    required: 'FALSE',
+    required: false,
   },
 }
 
 export const Primary = {}
 export const Required = {
   args: {
     ...Primary.args,
-    required: 'TRUE',
+    required: true,
   },
 }
diff --git a/benefit-finder/src/shared/components/LifeEventSection/index.jsx b/benefit-finder/src/shared/components/LifeEventSection/index.jsx
@@ -244,7 +244,7 @@ const LifeEventSection = ({
   const handleDateRequired = (values, item) => {
     return Object.keys(values?.value).length === 3 &&
       values?.value?.year?.length === 4
-      ? 'FALSE'
+      ? false
       : item.fieldset.required
   }
 

diff --git a/benefit-finder/src/shared/components/Radio/_index.scss b/benefit-finder/src/shared/components/Radio/_index.scss
@@ -5,13 +5,18 @@
   padding-bottom: space.$padding-bottom-md-plus;
 }
 
-.usa-input--error + .bf-usa-radio__label::before {
-  box-shadow: 0 0 0 3px color.$alert-red;
-}
-
 .bf-usa-radio__input:checked + .bf-usa-radio__label::before {
   background-color: #005ea2;
   box-shadow:
     0 0 0 2px #005ea2,
     inset 0 0 0 2px white;
+  outline-offset: 4px;
+}
+
+.bf-usa-radio__input:checked.usa-input--error + .bf-usa-radio__label::before {
+  background-color: #005ea2;
+  box-shadow:
+    0 0 0 3px color.$alert-red,
+    inset 0 0 0 2px white;
+  outline-offset: 4px;
 }
diff --git a/benefit-finder/src/shared/components/Radio/index.jsx b/benefit-finder/src/shared/components/Radio/index.jsx
@@ -25,7 +25,7 @@ const Radio = ({
   className,
   name,
 }) => {
-  const handleRequired = required === 'TRUE' ? ['required-field'] : ''
+  const handleRequired = required === true ? ['required-field'] : ''
   const defaultClasses = ['bf-usa-radio__input usa-radio__input']
   const utilityClasses = handleRequired
   return (
@@ -55,9 +55,13 @@ const Radio = ({
 }
 
 Radio.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string,
   value: PropTypes.string,
-  defaultChecked: PropTypes.bool,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  name: PropTypes.string,
 }
 
 export default Radio
diff --git a/benefit-finder/src/shared/components/Radio/index.stories.jsx b/benefit-finder/src/shared/components/Radio/index.stories.jsx
@@ -17,3 +17,13 @@ export const DefaultChecked = {
     checked: true,
   },
 }
+
+export const Error = {
+  args: {
+    ...Primary.args,
+    required: true,
+    checked: true,
+    invalid: true,
+    className: 'bf-usa-input--error usa-input--error',
+  },
+}
diff --git a/benefit-finder/src/shared/components/ResultsView/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/ResultsView/__tests__/__snapshots__/index.spec.jsx.snap
@@ -98,19 +98,18 @@ exports[`loads view 1`] = `
                   class="bf-usa-list usa-list"
                 >
                   <li>
-                    For full eligibility and requirements visit each agency providing the benefit.
+                    Visit each agency’s website to find full eligibility requirements.
                   </li>
                   <li>
-                    Modifying your responses and completing more questions may open your eligibility to other benefits.
+                    Your results may change if you answer more questions or modify your answers.
                   </li>
                   <li>
-                    To re-start the form
 
                     <a
                       class="bf-usa-summary-box__link usa-summary-box__link"
                       href="#"
                     >
-                      click here
+                      Clear my answers and restart the form.
                     </a>
                   </li>
                 </ul>
@@ -6698,19 +6697,18 @@ exports[`scenario 1 loads in view with the correct amount of likely eligible ite
                   class="bf-usa-list usa-list"
                 >
                   <li>
-                    For full eligibility and requirements visit each agency providing the benefit.
+                    Visit each agency’s website to find full eligibility requirements.
                   </li>
                   <li>
-                    Modifying your responses and completing more questions may open your eligibility to other benefits.
+                    Your results may change if you answer more questions or modify your answers.
                   </li>
                   <li>
-                    To re-start the form
 
                     <a
                       class="bf-usa-summary-box__link usa-summary-box__link"
                       href="#"
                     >
-                      click here
+                      Clear my answers and restart the form.
                     </a>
                   </li>
                 </ul>

diff --git a/benefit-finder/src/shared/components/Select/_index.scss b/benefit-finder/src/shared/components/Select/_index.scss
@@ -13,5 +13,9 @@
     height: auto;
     border-radius: 3px;
     border-color: color.$alert-red;
+
+    &:focus {
+      outline-offset: 2px;
+    }
   }
 }
diff --git a/benefit-finder/src/shared/components/Select/index.jsx b/benefit-finder/src/shared/components/Select/index.jsx
@@ -28,7 +28,7 @@ function Select({
   invalid,
 }) {
   const { labelSelect, defaultValue } = ui
-  const handleRequired = required === 'TRUE' ? ['required-field'] : ''
+  const handleRequired = required === true ? ['required-field'] : ''
   const defaultClasses = ['bf-usa-select usa-select']
   const utilityClasses = handleRequired
   /**
@@ -60,7 +60,7 @@ function Select({
         id={htmlFor}
         onChange={onChange}
         value={selected || ''}
-        required={required === 'TRUE'}
+        required={required === true}
         aria-invalid={invalid}
       >
         <option value="" key="default" disabled>
@@ -78,8 +78,10 @@ Select.propTypes = {
   options: PropTypes.array,
   selected: PropTypes.string,
   onChange: PropTypes.func,
+  required: PropTypes.bool,
   ui: PropTypes.object,
   className: PropTypes.string,
+  invalid: PropTypes.bool,
 }
 
 export default Select
diff --git a/benefit-finder/src/shared/components/Select/index.stories.jsx b/benefit-finder/src/shared/components/Select/index.stories.jsx
@@ -19,3 +19,12 @@ export default {
 }
 
 export const Primary = {}
+
+export const Error = {
+  args: {
+    ...Primary.args,
+    required: true,
+    invalid: true,
+    className: 'bf-usa-input--error usa-input--error',
+  },
+}
diff --git a/benefit-finder/src/shared/components/Summary/__tests__/__snapshots__/index.spec.jsx.snap b/benefit-finder/src/shared/components/Summary/__tests__/__snapshots__/index.spec.jsx.snap
@@ -25,18 +25,18 @@ exports[`Summary > renders a match to the previous snapshot 1`] = `
           class="bf-usa-list usa-list"
         >
           <li>
-            For full eligibility and requirements visit each agency providing the benefit.
+            Visit each agency’s website to find full eligibility requirements.
           </li>
           <li>
-            Modifying your responses and completing more questions may open your eligibility to other benefits.
+            Your results may change if you answer more questions or modify your answers.
           </li>
           <li>
-            To re-start the form 
+             
             <a
               class="bf-usa-summary-box__link usa-summary-box__link"
               href="#"
             >
-              click here
+              Clear my answers and restart the form.
             </a>
           </li>
         </ul>

diff --git a/benefit-finder/src/shared/components/TextInput/_index.scss b/benefit-finder/src/shared/components/TextInput/_index.scss
@@ -0,0 +1,3 @@
+.bf-usa-input.usa-input--error {
+  outline-offset: 2px;
+}