Add in-page filtering to implementation record

[andysellick]

What

Adds filters to pages on the GA4 implementation record to allow users to 'search' through lists of events and attributes.

I've tried to write the script as generically as possible so it can be applied to other things if needed. It's written as a GOVUK module, so is initialised by the modules script in the gem. It uses data attributes on the list of things to filter. For the list of events by type I've extended the script to check for titles and items, and hide the titles if all of the items in that section are hidden. I've also included the name of the event in a hidden span to improve the filtering (if you're searching for the title, it matches the children, e.g. the select_content events aren't actually called that, but if you search for that you'll find them).

I'm not entirely happy with this code for a few reasons, but it might be the best we can manage for now. Specifically:

• there's no test for the JavaScript, because there are no JavaScript tests for the dev docs. Setting them up would involve installing and configuring Jasmine and including it in the build pipeline, which seems like a lot of effort to go to for one script. One alternative was to put the script in the components gem (where writing a test would be easy) and there's already a similar filtering script that this could replace (for filtering the list of components in the component guide) but I wanted to put it in /component_guide because it relates to that, but scripts in there aren't available to import from the gem currently.
• the nice icon for the filter form (input component from the gem) wouldn't display, I think because of something unusual about how components are rendered in the dev docs compared to our usual Rails applications. The workaround I came up with was to put a copy of the search icon in the stylesheets directory, where the CSS is looking for it. It's not ideal, but I didn't want to write a style override to point to a copy of the image somewhere more sensible. An alternative could be just to do without it.

Why

Part of a number of changes to improve the usability of the implementation record.

Visual changes

Trello card: https://trello.com/c/m6vL7lJy/186-add-filters-to-events-and-attributes-pages-on-implementation-record

[AshGDS]

Nice work, LGTM 👍

This is irrelevant to this PR, but the Cookies link in the footer 404's on the analytics page, as it's trying to go to /analytics/cookies instead of /cookies. Thought it might be worth fixing in this PR but I'm happy for it to be a separate PR that one of us does.

[AshGDS]

Nitpick: since e is never used, does it need to be defined here?

[andysellick]

Good point, have removed.

[AshGDS]

Nitpick: standardx would add a space between if( here. E.g. if (!this.$module.input) {

Slightly off topic, but we could add standardx to this repo by running yarn add standardx and then adding this to the package.json - but I guess as it's not a part of the CI it would only be useful for devs.

  "standardx": {
    "ignore": []
  },
  "eslintConfig": {
    "rules": {
      "no-var": 0
    }
  }

[andysellick]

Have changed. Yeah, standardx could be useful, let's think about it for a separate PR.

[andysellick]

@AshGDS have fixed following your comments and fixed the cookies link in the footer - good spot, thanks.