ISAICP-6603: Style the facets summary (selected facets chips).

config/sync/views.view.search.yml

@@ -396,7 +396,7 @@ display:
           group_type: group
           admin_label: ''
           empty: false
-          content: 'Search Results (@total)'
+          content: 'SEARCH RESULTS ( @total )'
           plugin_id: result
         views_block_area:
           id: views_block_area

tests/features/joinup_search/search.feature

@@ -195,7 +195,7 @@ Feature: Global search
     When I select "Luxembourg" from the "spatial coverage" select facet form
     And I click Search in facets form
     Then the option with text "Luxembourg (2)" from select facet form "spatial coverage" is selected
-    And I should see the text "Search Results (2)"
+    And I should see the text "SEARCH RESULTS ( 2 )"
     # The countries are still sorted alphabetically even though the Luxembourg value is selected and has more results.
     And the "spatial coverage" select facet form should contain the following options:
       | Any location     |
@@ -264,18 +264,18 @@ Feature: Global search
 
     # "Alpha" is used in all the rdf entities titles.
     When I enter "Alpha" in the search bar and press enter
-    Then I should see the text "Search Results (5)"
+    Then I should see the text "SEARCH RESULTS ( 5 )"
     And the page should show the tiles "Collection alpha, Solution alpha, Release Alpha, Licence Alpha, Video alpha"
 
     # "Omega" is used in all the node entities titles. Since the content of
     # custom pages is added to their collection, we also match the collection.
     When I enter "omega" in the search bar and press enter
-    Then I should see the text "Search Results (6)"
+    Then I should see the text "SEARCH RESULTS ( 6 )"
     And the page should show the tiles "Collection alpha, News omega, Event Omega, Document omega, Discussion omega, Page omega"
 
     # "Beta" is used in all the rdf entities body fields.
     When I enter "beta" in the search bar and press enter
-    Then I should see the text "Search Results (4)"
+    Then I should see the text "SEARCH RESULTS ( 4 )"
     And the page should show the tiles "Collection alpha, Solution alpha, Release Alpha, Licence Alpha"
 
     # "Epsilon" is used in all the node entities body fields.
@@ -588,7 +588,7 @@ Feature: Global search
     When I am on the homepage
     And I enter "Relativity" in the search bar and press enter
     Then the option "Relevance" should be selected
-    And I should see the text "Search Results (3)"
+    And I should see the text "SEARCH RESULTS ( 3 )"
     And I should see the following tiles in the correct order:
       | Relativity news: Relativity theory |
       | Relativity is the word             |

tests/src/Context/JoinupSearchContext.php

@@ -772,21 +772,16 @@ protected function getSearchBarElement(): NodeElement {
    * @When I should see the following facet summary :labels
    */
   public function assertFacetSummary(string $labels): void {
-    $labels = $this->explodeCommaSeparatedStepArgument($labels);
+    $present_labels = $this->explodeCommaSeparatedStepArgument($labels);
     $xpath = "//div[contains(concat(' ', normalize-space(@class), ' '), ' block-facets-summary-blocksearch-facets-summary ')]//li[contains(concat(' ', normalize-space(@class), ' '), ' facet-summary-item--facet ')]";
     $elements = $this->getSession()->getPage()->findAll('xpath', $xpath);
-    $present = $present_labels = [];
+    $present = [];
 
     /** @var \Behat\Mink\Element\NodeElement $element */
     foreach ($elements as $element) {
       $present[] = $element->getText();
     }
 
-    // Add label close in front of label.
-    foreach ($labels as $label) {
-      $present_labels[] = $label . ' close';
-    }
-
     $present = array_map('trim', $present);
     $present_labels = array_map('trim', $present_labels);
     Assert::assertEquals($present_labels, $present);

web/themes/ventuno/src/scss/components/_search-results.scss

@@ -0,0 +1,16 @@
+// Search results
+
+.view-search {
+  .view-header {
+    color: $primary;
+  }
+}
+.block-facets-summary {
+  margin-top: $spacer * 2;
+  ul {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+  }
+}

web/themes/ventuno/src/scss/main.scss

@@ -11,3 +11,4 @@
 // Components
 @import "components/navbar";
 @import "components/footer";
+@import "components/search-results";

web/themes/ventuno/templates/search_api/facets-result-item--summary.html.twig

@@ -16,12 +16,11 @@
  * @ingroup themeable
  */
 #}
-<span class="mdl-chip mdl-chip--deletable">
-  <span class="mdl-chip__text facet-item__value">{{ value }}</span>
-  {% if is_active %}
-    <button type="button" class="facet-item__status js-facet-deactivate mdl-chip__action" aria-label="{{ 'Close'|t }}"><i class="material-icons">close</i></button>
-  {% endif %}
-  {% if show_count %}
-    <span class="facet-item__count">({{ count }})</span>
-  {% endif %}
-</span>
+
+{{ pattern('badge', {
+  label: value,
+  background: "primary",
+  rounded_pill: true,
+  dismissible: true,
+  attributes: create_attribute().addClass(["me-2 mb-2 fs-6 js-facet-deactivate"]),
+}) }}

web/themes/ventuno/ventuno.theme

@@ -226,3 +226,13 @@ function ventuno_smart_trim(string $string, int $length, bool $ellipsis = TRUE):
   $truncate = new TruncateHTML();
   return $truncate->truncateChars($string, $length, $ellipsis ? '…' : '');
 }
+
+/**
+ * Implements hook_preprocess().
+ */
+function ventuno_preprocess(&$variables) {
+  /** @var \Drupal\Core\Extension\ThemeHandler $themeHandler */
+  $themeHandler = \Drupal::service('theme_handler');
+  $ventuno = $themeHandler->getTheme('ventuno')->getPath();
+  $variables['icons_path'] = base_path() . $ventuno . '/assets/icons/bootstrap-icons.svg';
+}