Percy example combinations - patterns/search-and-filter

[jmuzina]

Please review #5176 first as this depends on the vertical spacing introduced by #5176.

Search prompt script change

Introduces a change to the _search-prompt-script to make sure it is only called against search & filter components that actually have search prompt elements.

Why?

Without this check, the search & filter script is also called against search & filter components that aren't meant to have the search prompt script run against it, as more search & filter components are now in the DOM. This causes errors at the clear.addEventListener and prompt.addEventListener steps as those elements are not found.

What's the change?

Majority of the change is tabbing/formatting. The bit that is actually changed is here:

// Add click handler for clicks on elements with aria-controls
[].slice
  .call(document.querySelectorAll('.p-search-and-filter'))
  .filter(function (pattern) { // filter step was added to check if the component has a search prompt
    return pattern.querySelector('.p-search-and-filter__search-prompt');
  })
  .forEach(function (pattern) {
// setup search prompt controls....

QA

• Review combined search & filter example
• Verify there are no console errors in the combined example & the search & filter JS functionality works.

[webteam-app]

Demo

Jenkins

demos.haus