[Rated Disabilities] - Migrate v1 components to v3 components (#28163)

* updated the tab underline * Removed uswds * update App.jsx * updated NeedHelp and RatedDisabilityList * update components to be v3 * updates to TotalRatingStates.jsx * updated some components that were added to the service that have uswds true * update to needhelp
department-of-veterans-affairs · Mar 18, 2024 · 66fc0b9 · 66fc0b9
1 parent 9b0df41
commit 66fc0b9
Show file tree

Hide file tree

Showing 12 changed files with 19 additions and 36 deletions.
diff --git a/src/applications/rated-disabilities/components/FeatureFlagsLoaded.jsx b/src/applications/rated-disabilities/components/FeatureFlagsLoaded.jsx
@@ -6,7 +6,6 @@ const loadingIndicator = (
     <va-loading-indicator
       data-testid="feature-flags-loading"
       message="Loading your information..."
-      uswds="false"
     />
   </div>
 );

diff --git a/src/applications/rated-disabilities/components/Learn.jsx b/src/applications/rated-disabilities/components/Learn.jsx
@@ -18,7 +18,6 @@ export default function Learn() {
       <va-link
         href="/disability/about-disability-ratings"
         text="About VA disability ratings"
-        uswds="false"
       />
     </div>
   );

diff --git a/src/applications/rated-disabilities/components/MVIError.jsx b/src/applications/rated-disabilities/components/MVIError.jsx
@@ -9,7 +9,7 @@ export const headline =
 
 export default function MVIError() {
   return (
-    <va-alert status="warning" uswds="false">
+    <va-alert status="warning">
       <h2 slot="headline">{headline}</h2>
       <div>
         <p>
@@ -28,7 +28,6 @@ export default function MVIError() {
           <va-link
             href={facilityLocatorUrl}
             text="Find your nearest VA medical center"
-            uswds="false"
           />
         </p>
       </div>

diff --git a/src/applications/rated-disabilities/components/NeedHelp.jsx b/src/applications/rated-disabilities/components/NeedHelp.jsx
@@ -3,14 +3,12 @@ import { CONTACTS } from '@department-of-veterans-affairs/component-library/cont
 
 export default function NeedHelp() {
   return (
-    <va-need-help class="vads-u-margin-y--3" uswds="false">
+    <va-need-help class="vads-u-margin-y--3">
       <div slot="content">
         <p>
-          You can call us at{' '}
-          <va-telephone contact={CONTACTS.VA_BENEFITS} uswds="false" />. We’re
-          here Monday through Friday, 8:00 a.m to 9:00 p.m. ET. If you have
-          hearing loss, call{' '}
-          <va-telephone contact={CONTACTS['711']} tty uswds="false" />
+          You can call us at <va-telephone contact={CONTACTS.VA_BENEFITS} />.
+          We’re here Monday through Friday, 8:00 a.m to 9:00 p.m. ET. If you
+          have hearing loss, call <va-telephone contact={CONTACTS['711']} tty />
         </p>
       </div>
     </va-need-help>

diff --git a/src/applications/rated-disabilities/components/NoCombinedRating.jsx b/src/applications/rated-disabilities/components/NoCombinedRating.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function NoCombinedRating() {
   return (
-    <va-alert status="info" uswds>
+    <va-alert status="info">
       <h3 slot="headline">
         We don’t have a combined disability rating on file for you
       </h3>

diff --git a/src/applications/rated-disabilities/components/RatedDisabilityList.jsx b/src/applications/rated-disabilities/components/RatedDisabilityList.jsx
@@ -42,8 +42,8 @@ const noDisabilityRatingContent = errorCode => {
         </p>
         <p className="vads-u-font-size--base">
           If you get this error again, please call the VA.gov help desk at{' '}
-          <va-telephone contact={CONTACTS.VA_311} uswds="false" /> (
-          <va-telephone contact={CONTACTS['711']} tty uswds="false" />
+          <va-telephone contact={CONTACTS.VA_311} /> (
+          <va-telephone contact={CONTACTS['711']} tty />
           ). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.
         </p>
       </>
@@ -73,9 +73,7 @@ const noDisabilityRatingContent = errorCode => {
 
   return (
     <div className="vads-u-margin-y--5">
-      <va-alert status={status} uswds="false">
-        {content}
-      </va-alert>
+      <va-alert status={status}>{content}</va-alert>
     </div>
   );
 };
@@ -103,12 +101,7 @@ const RatedDisabilityList = ({
   };
 
   if (!ratedDisabilities) {
-    return (
-      <va-loading-indicator
-        message="Loading your information..."
-        uswds="false"
-      />
-    );
+    return <va-loading-indicator message="Loading your information..." />;
   }
 
   if (

diff --git a/src/applications/rated-disabilities/components/RatedDisabilityListItem.jsx b/src/applications/rated-disabilities/components/RatedDisabilityListItem.jsx
@@ -17,7 +17,7 @@ const RatedDisabilityListItem = ({ ratedDisability }) => {
   const headingText = getHeadingText(ratedDisability);
 
   return (
-    <va-card class="vads-u-margin-bottom--2" uswds="false">
+    <va-card class="vads-u-margin-bottom--2">
       <h4 className="vads-u-margin-y--0 vads-u-font-size--h3">{headingText}</h4>
       {effectiveDate !== null && (
         <div className="vads-u-margin-top--2">

diff --git a/src/applications/rated-disabilities/components/RatingLists/NoRatings.jsx b/src/applications/rated-disabilities/components/RatingLists/NoRatings.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function NoRatings() {
   return (
-    <va-alert uswds>
+    <va-alert>
       <h3 slot="headline">
         We don’t have any rated disabilities on file for you
       </h3>

diff --git a/src/applications/rated-disabilities/components/ServerError.jsx b/src/applications/rated-disabilities/components/ServerError.jsx
@@ -3,7 +3,7 @@ import { CONTACTS } from '@department-of-veterans-affairs/component-library/cont
 
 export default function ServerError() {
   return (
-    <va-alert status="error" uswds>
+    <va-alert status="error">
       <h2 slot="headline">We’re sorry. Something went wrong on our end.</h2>
       <p className="vads-u-font-size--base">
         Please refresh this page or check back later. You can also sign out of

diff --git a/src/applications/rated-disabilities/components/SortSelect.jsx b/src/applications/rated-disabilities/components/SortSelect.jsx
@@ -33,7 +33,6 @@ const SortSelect = ({ onSelect, sortBy }) => {
       name="sort-by"
       value={sortBy}
       onVaSelect={handleSelect}
-      uswds="false"
     >
       {sortOptions.map(({ label, value }, i) => (
         <option key={i} value={value}>

diff --git a/src/applications/rated-disabilities/components/TotalRatedDisabilities.jsx b/src/applications/rated-disabilities/components/TotalRatedDisabilities.jsx
@@ -17,10 +17,7 @@ const TotalRatedDisabilities = ({ error, loading, totalDisabilityRating }) => {
   // If there is a rating, display the rating and content
   if (loading) {
     content = (
-      <va-loading-indicator
-        message="Loading your total disability rating..."
-        uswds="false"
-      />
+      <va-loading-indicator message="Loading your total disability rating..." />
     );
   } else if (errorCode && isServerError(errorCode)) {
     content = errorMessage();

diff --git a/src/applications/rated-disabilities/components/TotalRatingStates.jsx b/src/applications/rated-disabilities/components/TotalRatingStates.jsx
@@ -3,7 +3,7 @@ import { recordEvent } from '@department-of-veterans-affairs/platform-monitoring
 import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
 
 export const errorMessage = () => (
-  <va-alert status="error" uswds="false">
+  <va-alert status="error">
     <h2 slot="headline" className="vads-u-margin-y--0 vads-u-font-size--h3">
       We’re sorry. Something went wrong on our end
     </h2>
@@ -13,15 +13,15 @@ export const errorMessage = () => (
     </p>
     <p className="vads-u-font-size--base">
       If you get this error again, please call the VA.gov help desk at{' '}
-      <va-telephone contact={CONTACTS.VA_311} uswds="false" /> (
-      <va-telephone contact={CONTACTS['711']} tty uswds="false" />
+      <va-telephone contact={CONTACTS.VA_311} /> (
+      <va-telephone contact={CONTACTS['711']} tty />
       ). We’re here Monday though Friday, 8:00 a.m. to 8:00 p.m. ET.
     </p>
   </va-alert>
 );
 
 export const missingTotalMessage = () => (
-  <va-alert status="info" uswds="false">
+  <va-alert status="info">
     <h2 slot="headline" className="vads-u-margin-y--0 vads-u-font-size--h3">
       We don’t have a combined disability rating on file for you
     </h2>
@@ -33,7 +33,6 @@ export const missingTotalMessage = () => (
     <va-link
       href="/disability/how-to-file-claim"
       text="Learn how to file a claim for disability compensation"
-      uswds="false"
     />
   </va-alert>
 );
@@ -42,7 +41,7 @@ export const totalRatingMessage = totalDisabilityRating => {
   const heading = `Your combined disability rating is ${totalDisabilityRating}%`;
 
   return (
-    <va-summary-box uswds="false">
+    <va-summary-box>
       <h3 slot="headline">{heading}</h3>
       <p>
         This rating doesn’t include any conditions from claims that we’re still