Dm 5109 additional search filters accessibility

.github/workflows/run-tests.yml

@@ -10,14 +10,15 @@ on:
     branches:
       [
         "master",
+        "feature/DM-4866-search-results-refresh",
         "ci-migration",
         "ci-migration-cv",
         "ci-migration-en",
         "ci-migration-pd",
         "ci-migration-bj",
       ]
   pull_request:
-    branches: ["master"]
+    branches: ["master", "feature/DM-4866-search-results-refresh"]
 jobs:
   build:
     name: rspec

app/assets/javascripts/_practice_card_utilities.es6

@@ -41,11 +41,9 @@ function toggleFocusStylingForPracticeTitle() {
 function replaceImagePlaceholders() {
     $('.dm-practice-card').each(function() {
         const placeholder = $(this).find('.practice-card-img-placeholder');
-
         const practiceId = placeholder.attr('data-practice-id');
         const imagePath = placeholder.attr('data-practice-image');
         const practiceName = placeholder.attr('data-practice-name');
-
         if (practiceId && imagePath) {
             fetchSignedResource(imagePath).then(signedUrl => {
                 replacePlaceholderWithImage(signedUrl, practiceId, practiceName);
@@ -74,6 +72,48 @@ function replacePlaceholderWithImage(imageUrl, practiceId, practiceName) {
     });
 }
 
+function replaceSearchPageImagePlaceholders(practiceEls) {
+    $('.dm-search-result').each(function() {
+        const $resultElement = $(this);
+        const placeholder = $resultElement.find('.search-result-img-container');
+
+        if (placeholder.find('img').length > 0) {
+            return;
+        }
+
+        const practiceId = placeholder.attr('data-practice-id');
+        const imagePath = placeholder.attr('data-practice-image');
+        const practiceName = placeholder.attr('data-practice-name');
+
+        if (practiceId && imagePath) {
+            fetchSignedResource(imagePath).then(signedUrl => {
+
+                replaceSearchResultPlaceholderImage(signedUrl, practiceId, practiceName).then(updatedElement => {
+                    practiceEls[practiceId] = updatedElement;
+                });
+            });
+        }
+    });
+}
+
+function replaceSearchResultPlaceholderImage(imageUrl, practiceId, practiceName) {
+    return new Promise((resolve, reject) => {
+        loadImage(imageUrl, function(loadedImageSrc) {
+            const imgElement = $('<img>')
+                .attr('data-resource-id', practiceId)
+                .attr('src', loadedImageSrc)
+                .attr('alt', '')
+                .addClass('search-result-img');
+
+            const placeholder = $('.search-result-img-container[data-practice-id="' + practiceId + '"]');
+            placeholder.empty().append(imgElement);
+            placeholder.addClass('loaded-image');
+
+            resolve(placeholder.closest('.dm-search-result').get(0).outerHTML);
+        });
+    });
+}
+
 function loadImage(imageSrc, callback) {
     var img = new Image();
     img.onload = function() {

app/assets/stylesheets/dm/components/_search_result.scss

@@ -0,0 +1,78 @@
+.dm-search-result {
+  border-top: 2px solid #e6e6e6 !important;
+  position: relative;
+  @include u-display(block);
+  @include u-width('full');
+  @include u-padding-y(4);
+
+  .dm-practice-retired-banner {
+    position: absolute;
+    width: 80px;
+    height: 24px;
+    justify-content: center;
+    background-color: color($theme-color-base-light);
+    padding: 5px;
+    border-radius: 0px 2px 2px 0px;
+    z-index: 2;
+    top: 20px;
+    left: 12px;
+    display: flex;
+    align-items: center;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: color($theme-color-base-ink);
+    font-size: 13px;
+    line-height: 115%;
+  }
+
+  .search-result-img-container {
+    height: 133px;
+    background-color: color($theme-color-base-lightest);
+    display: flex;
+    @include u-margin-bottom(3);
+
+    img {
+      flex-shrink: 0;
+      @include at-media(tablet) {
+        min-height: 100%;
+        min-width: 100%;
+      }
+    }
+
+    h3 {
+      align-self: flex-end;
+      color: color($theme-color-dm-white);
+    }
+
+    @include at-media(tablet) {
+      flex: 0 0 220px;
+      margin-right: 30px;
+      margin-bottom: unset;
+    }
+  }
+
+  .search-result-img-container.loaded-image {
+   background-color: unset;
+  }
+
+  .search-result-description {
+    @include grid-col(12);
+
+    h3 {
+      @include u-margin-top(0);
+      @include u-margin-bottom(2);
+      @include u-text('normal');
+    }
+
+    .innovation-tagline {
+      display: block;
+      @include u-height(10);
+      overflow: hidden;
+    }
+
+    .originating-facility {
+      @include u-font('sans','2xs');
+      @include u-text('italic');
+    }
+  }
+}

app/assets/stylesheets/dm/pages/_search.scss

@@ -1,10 +1,59 @@
 // Styles for the practice search page
 #search-page {
-  .usa-checkbox__label:before {
-    border-radius: 0 !important;
+  .applied-filter {
+    @extend .usa-tag;
+    @extend .usa-tag--big;
+    display: block;
+    @include at-media(tablet) {
+      display: inline-block;
+    }
+  }
+
+  .applied-filter-1 {
+    @include transition-btn-colors;
+  }
+
+  .applied-filter-2 {
+    background-color: color("blue-10");
+    color: color("blue-60");
+
+    &:hover {
+      background-color: color("blue-20");
+    }
+
+    &:active {
+      background-color: color("blue-40");
+    }
+  }
+
+  .applied-filter-3 {
+    background-color: color("gray-60");
+    color: white;
+
+    &:hover {
+      background-color: color("gray-50");
+    }
+
+    &:active {
+      background-color: color("gray-80");
+    }
+  }
+
+  .applied-filter-4 {
+    background-color: color("gray-30");
+    color: black;
+
+    &:hover {
+      background-color: color("gray-20");
+    }
+
+    &:active {
+      background-color: color("gray-50");
+    }
   }
 
-  .usa-combo-box__toggle-list, .usa-combo-box__clear-input {
+  .usa-combo-box__toggle-list,
+  .usa-combo-box__clear-input {
     top: 2.3em !important;
   }
 
@@ -23,15 +72,44 @@
   .button-box {
     margin-bottom: 24px;
   }
-}
 
-.dm-search-practices {
+  .category-filters {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+  }
+
+  .category-filters::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .category-filters::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .category-filters::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+  }
+
+  .category-filters::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  .filter-submit-button {
+    @include transition-btn-colors;
+  }
+
   hr {
     border: none;
-    height: 2px;
+    height: 1px;
     background: #dcdee0;
   }
+}
 
+.dm-search-practices {
   mark {
     background: color($theme-color-accent-warm);
     font-weight: bold;
@@ -57,7 +135,7 @@
     height: calc(1em * 1.5 * 2);
   }
   .three-lines {
-    -webkit-line-clamp : 3;
+    -webkit-line-clamp: 3;
     height: calc(1em * 1.5 * 3);
   }
   .four-lines {
@@ -73,7 +151,7 @@
   /* Adapted from: http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
   .img-box {
     position: relative;
-    width: 100%;  /* desired width */
+    width: 100%; /* desired width */
   }
 
   .img-box-content {
@@ -82,11 +160,11 @@
     width: 100%;
     height: 210px;
 
-    @media all and (min-width: 640px){
+    @media all and (min-width: 640px) {
       height: 200px;
     }
 
-    @media all and (min-width: 870px){
+    @media all and (min-width: 870px) {
       width: 254px;
       height: 257px;
     }
@@ -120,25 +198,9 @@
   .fa-times {
     display: block !important;
   }
-
-  .search-category-filters, .search-originating-facility-filter, .search-adopting-facility-filter {
-    @include u-margin-bottom(1);
-
-    @media screen and (min-width: 1024px) {
-      @include u-margin-bottom(0);
-    }
-  }
-
-  #update-search-results-button {
-    @include transition-btn-colors;
-  }
 }
 
 #update-search-results-form {
-  #mobile_filters_button {
-    @include transition-btn-colors;
-  }
-
   #dm-practice-search-button {
     @include transition-btn-colors;
     background-image: none !important;
@@ -158,24 +220,19 @@
   }
 }
 
-#close_filters_modal {
-  background: none !important;
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.category-container, .originating-facility-container, .adopting-facility-container {
+.category-container,
+.originating-facility-container,
+.adopting-facility-container {
   background-color: color($theme-color-secondary-light);
 
   @media screen and (min-width: 1024px) {
     background-color: color($theme-color-dm-white);
   }
 }
 
-.category-container, {
+.category-container {
   .desktop\:grid-col-4 {
-    @include u-padding-right('05');
+    @include u-padding-right("05");
   }
   div:last-child {
     .usa-checkbox {
@@ -196,22 +253,9 @@
   }
 }
 
-.mobile-modal-container {
-  position: relative;
-  padding-bottom: 93px;
-  min-height: 100vh;
-
-  @media screen and (min-width: 1024px) {
-    position: unset;
-    padding-bottom: 0;
-    min-height: unset;
-  }
-}
-
 #filter_button_container {
   @media screen and (max-width: 1023px) {
-    position: absolute;
     bottom: 0;
     width: 100%;
   }
-}
+}

app/views/home/index.html.erb

@@ -66,7 +66,7 @@
                   </li>
                 <% end %>
               </ul>
-              <a class="browse-all-link text-bold" href="<%= search_path %>?filters=open">Browse all Tags</a>
+              <a class="browse-all-link text-bold" href="<%= search_path %>">Browse all Tags</a>
             </div>
 
             <div class="result-section" data-type="community">