add count to list header

opentech/apply/funds/templates/funds/includes/batch_update_reviewer_form.html

 <div class="modal modal--secondary" id="batch-update-reviewers">
     <h4 class="modal__header-bar">Add Reviewers</h4>
+    <div class="modal__list-item modal__list-item--meta" aria-live="polite">
+        <span class="js-batch-title-count"></span>
+        <a href="#" class="modal__hide-link js-toggle-batch-list">Hide</a>
+    </div>
     <div class="modal__list js-batch-titles" aria-live="polite"></div>
     {% include 'funds/includes/delegated_form_base.html' with form=batch_reviewer_form value='Update'%}
 </div>

opentech/static_src/src/javascript/apply/batch-actions.js

@@ -8,6 +8,7 @@
     const $changeStatusForm = $('.js-batch-update-status');
     const $batchReviewersButton = $('.js-batch-update-reviewers');
     const $batchTitles = $('.js-batch-titles');
+    const $batchTitleCount = $('.js-batch-title-count');
     const $hiddenIDlist = $('#id_submission_ids');
     const activeClass = 'batch-actions-enabled';
 
@@ -48,6 +49,7 @@
     // append selected project titles to batch update reviewer modal
     $batchReviewersButton.click(function () {
         $batchTitles.html('');
+        $batchTitleCount.html('');
         let selectedIDs = [];
 
         $checkbox.each(function () {
@@ -56,6 +58,8 @@
                 selectedIDs.push($(this).parents('tr').data('record-id'));
             }
         });
+
+        $batchTitleCount.append(`${selectedIDs.length} submissions selected`);
         $hiddenIDlist.val(selectedIDs.join(','));
     });
 

opentech/static_src/src/sass/apply/components/_modal.scss

@@ -15,7 +15,7 @@
     &__header-bar {
         color: $color--white;
         background-color: $color--dark-blue;
-        margin: -24px -24px 8px;
+        margin: -24px -24px 0;
         padding: 15px;
         text-align: center;
     }
@@ -34,5 +34,17 @@
         padding: 12px 28px;
         border-bottom: 2px solid $color--light-mid-grey;
         margin: 0;
+
+        &--meta {
+            color: $color--dark-blue;
+            font-weight: $weight--semibold;
+            display: flex;
+            justify-content: space-between;
+            margin: 0 -24px 0;
+        }
+    }
+
+    &__hide-link {
+        text-decoration: underline;
     }
 }