Merge pull request #2297 from 18F/pphillips/2256-consistency-update

Update State Cost Categories section for consistency

CHANGELOG.md

@@ -8,6 +8,7 @@ Anticipated release: June 29, 2020
 - Update Actual Costs page to use "Actual Expenditures" ([#2291])
 - Build the "Summary Budget by Activity" table to see staffing across all activities and not just by activity ([#2170])
 - Update styling on the Program Activities page ([#2288])
+- Update State Cost Categories section for consistency ([#2256])
 
 #### 🐛 Bugs fixed
 
@@ -17,7 +18,7 @@ Anticipated release: June 29, 2020
 #### ⚙️ Behind the scenes
 
 - Prevent negative FTE values from being entered in State Cost forms ([#2229])
-- Cleanup propType errors, other test errors/warnings ([#2309])
+- [Tech Debt] Cleanup propType errors, other test errors/warnings ([#2309])
 
 # Previous releases
 
@@ -31,3 +32,4 @@ See our [release history](https://github.com/18F/cms-hitech-apd/releases)
 [#2291]: https://github.com/18F/cms-hitech-apd/issues/2291
 [#2170]: https://github.com/18F/cms-hitech-apd/issues/2170
 [#2288]: https://github.com/18F/cms-hitech-apd/issues/2288
+[#2256]: https://github.com/18F/cms-hitech-apd/issues/2256

web/src/components/PersonCostForm.js

@@ -18,7 +18,7 @@ const PersonCostForm = ({ items, costLabel, fteLabel, setCost, setFTE }) => {
     <div>
       {Object.entries(items).map(([year, { amt, perc }]) => (
         <Fragment key={year}>
-          <h5 className="ds-h5">{year} Costs</h5>
+          <h5 className="ds-h5">FFY {year} Cost</h5>
           <div className="ds-c-choice__checkedChild ds-u-padding-y--0">
             <DollarField
               label={costLabel}
@@ -56,7 +56,7 @@ PersonCostForm.propTypes = {
 };
 
 PersonCostForm.defaultProps = {
-  costLabel: 'Costs with benefits',
+  costLabel: 'Cost with benefits',
   fteLabel: 'Number of FTEs'
 };
 

web/src/containers/ApdKeyPerson/ApdKeyPersonReview.js

@@ -17,8 +17,7 @@ const ApdStateKeyPerson = ({
         {hasCosts ? (
           Object.keys(costs).map(year => (
             <div key={year}>
-              <strong>{year} </strong>
-              <strong>Costs: </strong>
+              <strong>FFY {year} Cost: </strong>
               <Dollars>{costs[year]}</Dollars> | <strong>FTE: </strong>
               {fte[year]} | <strong>Total: </strong>
               <Dollars>{costs[year] * fte[year]}</Dollars>

web/src/containers/activity/NonPersonnelCost/NonPersonnelCostReview.js

@@ -21,7 +21,7 @@ const NonPersonnelCostReview = ({
       <div className="ds-u-margin-top--2">
         {Object.entries(years).map(([year, cost]) => (
           <div key={year}>
-            <strong>{year} Costs:</strong> <Dollars>{cost}</Dollars>
+            <strong>FFY {year} Cost:</strong> <Dollars>{cost}</Dollars>
           </div>
         ))}
       </div>

web/src/containers/activity/StatePerson/StatePersonReview.js

@@ -21,8 +21,7 @@ const StatePersonReview = ({
       <div className="ds-u-margin-top--2">
         {Object.entries(years).map(([year, { amt, perc }]) => (
           <div key={year}>
-            <strong>{year} </strong>
-            <strong>Costs: </strong>
+            <strong>FFY {year} Cost: </strong>
             <Dollars>{amt}</Dollars> | <strong>FTEs: </strong>
             {perc} | <strong>Total: </strong>
             <Dollars>{amt * perc}</Dollars>

web/src/containers/viewOnly/ApdStateProfile.js

@@ -9,8 +9,7 @@ const ApdStateProfile = ({ stateProfile, keyPersonnel }) => {
       <div>
         {Object.keys(person.costs).map(year => (
           <div key={year}>
-            <strong>{year} </strong>
-            <strong>Costs: </strong>
+            <strong>FFY {year} Cost: </strong>
             <Dollars>{person.costs[year]}</Dollars> | <strong>FTE: </strong>
             {person.fte[year]} | <strong>Total: </strong>
             <Dollars>{person.costs[year] * person.fte[year]}</Dollars>

web/src/containers/viewOnly/activities/Activity.js

@@ -60,7 +60,7 @@ const Activity = ({ activity, activityIndex }) => {
         <ul className="ds-c-list--bare">
           {Object.entries(person.years).map(([year, { amt, perc }]) => (
             <li key={year}>
-              <strong>{year} Costs:</strong> <Dollars>{amt}</Dollars> |{' '}
+              <strong>FFY {year} Cost:</strong> <Dollars>{amt}</Dollars> |{' '}
               <strong>FTEs:</strong> {perc} | <strong>Total:</strong>{' '}
               <Dollars>{perc * amt}</Dollars>
             </li>
@@ -82,7 +82,7 @@ const Activity = ({ activity, activityIndex }) => {
         <ul className="ds-c-list--bare">
           {Object.entries(expense.years).map(([year, cost]) => (
             <li key={year}>
-              <strong>{year} Costs:</strong> <Dollars>{cost}</Dollars>
+              <strong>FFY {year} Cost:</strong> <Dollars>{cost}</Dollars>
             </li>
           ))}
         </ul>
@@ -116,7 +116,7 @@ const Activity = ({ activity, activityIndex }) => {
         <ul className="ds-c-list--bare">
           {Object.entries(contractor.years).map(([year, cost]) => (
             <li key={year}>
-              <strong>{year} Costs:</strong> <Dollars>{cost}</Dollars>
+              <strong>FFY {year} Cost:</strong> <Dollars>{cost}</Dollars>
               {contractor.hourly.useHourly === true && (
                 <Fragment>
                   <p>Number of hours: {contractor.hourly.data[year].hours}</p>
@@ -130,7 +130,7 @@ const Activity = ({ activity, activityIndex }) => {
           ))}
         </ul>
         <p>
-          <strong>Total cost: </strong>
+          <strong>Total Cost: </strong>
           <Dollars>{contractor.totalCost}</Dollars>
         </p>
       </Fragment>