[MHV-55186] Update all V1 components to V3 web components on SM MHV

src/applications/mhv/secure-messaging/components/Alerts/CernerTransitioningFacilityAlert.jsx

@@ -16,8 +16,8 @@
 import FEATURE_FLAG_NAMES from '@department-of-veterans-affairs/platform-utilities/featureFlagNames';
 import { useSelector } from 'react-redux';
 import { selectUser } from '@department-of-veterans-affairs/platform-user/selectors';
 import { selectEhrDataByVhaId } from 'platform/site-wide/drupal-static-data/source-files/vamc-ehr/selectors';
 import { getVamcSystemNameFromVhaId } from 'platform/site-wide/drupal-static-data/source-files/vamc-ehr/utils';
 import { CernerTransitioningFacilities } from '../../util/constants';
 
 const CernerTransitioningFacilityAlert = () => {
@@ -66,14 +66,14 @@
       }
       return null;
     },
     [userFacilities, ehrFacilities],
   );
 
   const contentT30 = useMemo(
     () => {
       return (
         isTranstioningFacility && (
-          <va-alert status="warning" class="vads-u-margin-y--2">
+          <va-alert status="warning" class="vads-u-margin-y--2" uswds>
             <h1 slot="headline">
               Your health facility is moving to My VA Health
             </h1>
@@ -105,7 +105,7 @@
     () => {
       return (
         isTranstioningFacility && (
-          <va-alert status="warning" class="vads-u-margin-y--2">
+          <va-alert status="warning" class="vads-u-margin-y--2" uswds>
             <h1 slot="headline">
               You can’t send messages to some of your care teams right now
             </h1>

src/applications/mhv/secure-messaging/components/AttachmentsList.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import recordEvent from 'platform/monitoring/record-event';
 import { focusElement } from '@department-of-veterans-affairs/platform-utilities/ui';
 import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import RemoveAttachmentModal from './Modals/RemoveAttachmentModal';
@@ -66,7 +66,7 @@
         setAttachFileSuccess(false);
       }
     },
     [attachments],
   );
 
   const removeAttachment = file => {
@@ -123,6 +123,7 @@
       {attachFileSuccess &&
         attachments.length > 0 && (
           <VaAlert
+            uswds
             aria-live="polite"
             aria-label="file successfully attached"
             ref={attachFileAlertRef}
@@ -135,8 +136,13 @@
             status="success"
             onCloseEvent={handleSuccessAlertClose}
           >
-            <p className="vads-u-margin-bottom--0">File attached</p>
+            <h3
+              slot="headline"
+              className="vads-u-margin-bottom--0 vads-u-font-size--base vads-font-family-sans-serif"
+            >
+              File attached
+            </h3>
             <button
               className="close-success-alert-button vads-u-padding--0p5"
               id="close-success-alert-button"
               data-testid="close-success-alert-button"
@@ -186,7 +192,7 @@
                     <span>{file.name} </span>(
                     {getSize(file.size || file.attachmentSize)})
                   </span>
                   <button
                     type="button"
                     onClick={() => {
                       setIsModalVisible(true);

src/applications/mhv/secure-messaging/components/BeforeMessageAddlInfo.jsx

@@ -3,6 +3,7 @@ import { VaAdditionalInfo } from '@department-of-veterans-affairs/component-libr
 
 const BeforeMessageAddlInfo = () => (
   <VaAdditionalInfo
+    uswds
     trigger="Before you send a message"
     disable-analytics={false}
     disable-border={false}

src/applications/mhv/secure-messaging/components/ComposeForm/CategoryInput.jsx

@@ -28,6 +28,7 @@ const CategoryInput = props => {
 
       {categories?.length > 0 && (
         <VaRadio
+          uswds
           required
           enable-analytics
           data-testid="compose-message-categories"
@@ -38,6 +39,7 @@ const CategoryInput = props => {
         >
           {categories?.map((item, i) => (
             <VaRadioOption
+              uswds
               data-dd-privacy="mask"
               data-testid="compose-category-radio-button"
               data-dd-action-name="Compose Category Radio Button"

src/applications/mhv/secure-messaging/components/ComposeForm/ComposeForm.jsx

@@ -162,7 +162,7 @@
         setMessageBody('');
       }
     },
     [recipients, draft],
   );
 
   useEffect(() => {
@@ -197,7 +197,7 @@
     }
 
     // The Blocked Triage Group alert should stay visible until the draft is sent or user navigates away
   }, []);
 
   useEffect(
     () => {
@@ -228,7 +228,7 @@
           .catch(setSendMessageFlag(false));
       }
     },
     [sendMessageFlag, isSaving],
   );
 
   useEffect(
@@ -560,6 +560,7 @@
       <form className="compose-form" id="sm-compose-form">
         {saveError && (
           <VaModal
+            uswds
             modalTitle={saveError.title}
             onCloseEvent={() => {
               setSaveError(null);
@@ -573,6 +574,7 @@
             <p>{saveError.p1}</p>
             {saveError.p2 && <p>{saveError.p2}</p>}
             <va-button
+              uswds
               text="Continue editing"
               onClick={() => setSaveError(null)}
             />
@@ -620,6 +622,7 @@
             !allTriageGroupsBlocked && (
               <>
                 <VaSelect
+                  uswds
                   enable-analytics
                   id="recipient-dropdown"
                   label="To"
@@ -665,6 +668,7 @@
               <ViewOnlyDraftSection title={FormLabels.SUBJECT} body={subject} />
             ) : (
               <va-text-input
+                uswds
                 label={FormLabels.SUBJECT}
                 required
                 type="text"
@@ -678,8 +682,6 @@
                 data-dd-privacy="mask"
                 data-dd-action-name="Compose Message Subject Input Field"
                 maxlength="50"
-                uswds
-                charcount
               />
             )}
           </div>
@@ -691,6 +693,7 @@
               />
             ) : (
               <va-textarea
+                uswds
                 label={FormLabels.MESSAGE}
                 required
                 id="compose-message-body"

src/applications/mhv/secure-messaging/components/ComposeForm/ComposeFormActionButtons.jsx

@@ -21,6 +21,7 @@ const ComposeFormActionButtons = ({
     <div className="compose-form-actions vads-u-display--flex vads-u-flex--1">
       {!cannotReply && (
         <va-button
+          uswds
           text="Send"
           label="Send"
           id="send-button"

src/applications/mhv/secure-messaging/components/ComposeForm/DraftSavedInfo.jsx

@@ -23,6 +23,7 @@ const DraftSavedInfo = () => {
   if (saveError) {
     return (
       <va-alert
+        uswds
         background-only
         class="last-save-time"
         full-width="false"
@@ -40,6 +41,7 @@ const DraftSavedInfo = () => {
     return (
       <>
         <va-alert
+          uswds
           aria-live="polite"
           background-only
           class="last-save-time"

src/applications/mhv/secure-messaging/components/ComposeForm/FileInput.jsx

@@ -139,6 +139,7 @@ const FileInput = props => {
           />
 
           <va-button
+            uswds
             onClick={useFileInput}
             secondary
             text={

src/applications/mhv/secure-messaging/components/ComposeForm/ReplyDraftItem.jsx

@@ -399,6 +399,7 @@ const ReplyDraftItem = props => {
     <>
       {saveError && (
         <VaModal
+          uswds
           modalTitle={saveError.title}
           onPrimaryButtonClick={() => setSaveError(null)}
           onCloseEvent={() => setSaveError(null)}
@@ -467,6 +468,7 @@ const ReplyDraftItem = props => {
             </section>
           ) : (
             <va-textarea
+              uswds
               ref={textareaRef}
               data-dd-privacy="mask"
               label="Message"
@@ -526,6 +528,7 @@ const ReplyDraftItem = props => {
             {draft.body}
           </p>
           <va-button
+            uswds
             secondary
             text={`Edit draft ${draftsequence}`}
             id="edit-draft-button"

src/applications/mhv/secure-messaging/components/CrisisLineConnectButton.jsx

@@ -36,6 +36,8 @@ const CrisisLineConnectButton = () => {
 
   return (
     <va-button
+      class="vads-u-margin-y--1"
+      uswds
       secondary="true"
       text="Connect with the Veterans Crisis Line"
       onClick={e => {

src/applications/mhv/secure-messaging/components/Dashboard/DashboardUnreadMessages.jsx

@@ -35,7 +35,7 @@ const DashboardUnreadMessages = props => {
   );
 
   return (
-    <va-alert status="info" visible>
+    <va-alert status="info" visible uswds>
       {unreadCountHeader}
       <div className="vads-u-margin-top--1p5">
         <Link

src/applications/mhv/secure-messaging/components/EmergencyNote.jsx

@@ -46,6 +46,7 @@ const EmergencyNote = props => {
         </va-alert-expandable>
       ) : (
         <va-alert
+          uswds
           background-only
           class="vads-u-margin-bottom--1"
           close-btn-aria-label="Close notification"

src/applications/mhv/secure-messaging/components/FrequentlyAskedQuestions.jsx

@@ -17,8 +17,8 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
       <h2 className="vads-u-margin-top--1">
         Questions about this messaging tool
       </h2>
-      <va-accordion open-single bordered>
-        <va-accordion-item data-testid="faq-accordion-item">
+      <va-accordion uswds open-single bordered>
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">Who can I send messages to?</h3>
           <p>
             You can send messages to VA providers and staff on your care team.
@@ -59,7 +59,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </p>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             What if I have an emergency or an urgent question?
           </h3>
@@ -92,7 +92,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </ul>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             Will VA protect my personal health information?
           </h3>
@@ -107,7 +107,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </p>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             What happened to my settings from My HealtheVet secure messaging?
           </h3>
@@ -136,7 +136,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </p>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             Will I need to pay a copay for using this messaging tool?
           </h3>
@@ -174,8 +174,8 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
     <div className="secure-messaging-faq">
       <h2 className="vads-u-margin-top--1">Questions about using messages</h2>
 
-      <va-accordion open-single>
-        <va-accordion-item data-testid="faq-accordion-item">
+      <va-accordion uswds open-single>
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">Who can I communicate with in messages?</h3>
           <p>
             You can communicate with VA providers on your care team. Most VA
@@ -213,7 +213,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </p>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             What if I have an emergency or an urgent question?
           </h3>
@@ -231,6 +231,8 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
               or night.
               <br />
               <va-button
+                uswds
+                class="vads-u-margin-y--1"
                 secondary="true"
                 text="Connect with the Veterans Crisis Line"
                 onClick={openCrisisModal}
@@ -244,7 +246,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </ul>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             Will VA protect my personal health information?
           </h3>
@@ -259,7 +261,7 @@ const FrequentlyAskedQuestions = ({ prefLink }) => {
           </p>
         </va-accordion-item>
 
-        <va-accordion-item data-testid="faq-accordion-item">
+        <va-accordion-item uswds data-testid="faq-accordion-item">
           <h3 slot="headline">
             What happened to my settings from My HealtheVet secure messaging?
           </h3>

src/applications/mhv/secure-messaging/components/HowToAttachFiles.jsx

@@ -4,6 +4,7 @@ import { VaAdditionalInfo } from '@department-of-veterans-affairs/component-libr
 const HowToAttachFiles = () => {
   return (
     <VaAdditionalInfo
+      uswds
       trigger="What to know about attaching files"
       disable-analytics={false}
       disable-border={false}

src/applications/mhv/secure-messaging/components/ManageFolderButtons.jsx

@@ -144,6 +144,7 @@ const ManageFolderButtons = props => {
       )}
       {isEmptyWarning && (
         <VaModal
+          uswds
           className="modal"
           data-testid="error-folder-not-empty"
           visible={isEmptyWarning}
@@ -156,6 +157,7 @@ const ManageFolderButtons = props => {
         >
           <p>{Alerts.Folder.DELETE_FOLDER_ERROR_NOT_EMPTY_BODY}</p>
           <va-button
+            uswds
             ref={emptyFolderConfirmBtn}
             text="Ok"
             onClick={() => {
@@ -166,6 +168,7 @@ const ManageFolderButtons = props => {
       )}
       {!isEmptyWarning && (
         <VaModal
+          uswds
           className="modal"
           data-testid="remove-this-folder"
           visible={deleteModal}
@@ -176,12 +179,14 @@ const ManageFolderButtons = props => {
         >
           <p>{Alerts.Folder.DELETE_FOLDER_CONFIRM_BODY}</p>
           <va-button
+            uswds
             ref={removeButton}
             text="Yes, remove this folder"
             onClick={confirmDelFolder}
             data-dd-action-name="Confirm Remove Folder Button"
           />
           <va-button
+            uswds
             secondary
             text="No, keep this folder"
             onClick={closeDelModal}
@@ -190,6 +195,7 @@ const ManageFolderButtons = props => {
         </VaModal>
       )}
       <VaModal
+        uswds
         className="modal"
         data-testid="rename-folder-modal"
         visible={renameModal}
@@ -199,6 +205,7 @@ const ManageFolderButtons = props => {
         data-dd-action-name="Rename Folder Modal Closed"
       >
         <VaTextInput
+          uswds
           data-dd-privacy="mask"
           ref={folderNameInput}
           label={Alerts.Folder.CREATE_FOLDER_MODAL_LABEL}
@@ -215,11 +222,13 @@ const ManageFolderButtons = props => {
           charcount
         />
         <va-button
+          uswds
           text="Save"
           onClick={confirmRenameFolder}
           data-dd-action-name="Save Rename Folder Button"
         />
         <va-button
+          uswds
           secondary="true"
           text="Cancel"
           onClick={closeRenameModal}