Improve how JavaScript works in GOV.UK Frontend

[timpaul]

What

We know there are issues with our current JavaScript setup, code and tooling which we should improve. Some of this work will help us unlock future work, i.e: more complex components (like modals) and supporting translations.

Done when

• [x] https://github.com/alphagov/govuk-frontend/issues/2478
• [x] https://github.com/alphagov/govuk-frontend/issues/711
• [x] https://github.com/alphagov/govuk-frontend/issues/2503 (EPIC)
• [ ] https://github.com/alphagov/govuk-frontend/issues/2621 (EPIC)
• [x] https://github.com/alphagov/govuk-frontend/issues/2558
• [ ] https://github.com/alphagov/govuk-frontend/issues/1722 (EPIC)
• [x] https://github.com/alphagov/govuk-frontend/issues/2559
• [ ] https://github.com/alphagov/govuk-frontend/issues/2563
• [ ] https://github.com/alphagov/govuk-frontend/issues/1708 (EPIC)

Stretch goals

• [ ] https://github.com/alphagov/govuk-frontend/issues/2564
• [ ] https://github.com/alphagov/govuk-frontend/issues/2502
  • [ ] https://github.com/alphagov/govuk-frontend/issues/2242
  • [ ] https://github.com/alphagov/govuk-frontend/issues/2303
  • [ ] https://github.com/alphagov/govuk-frontend/issues/2565
  • [ ] Consider whether there are any benefits to adding end-to-end tests for complex components
• [ ] Allow users to hook into events in component JavaScript

[frankieroberto]

@timpaul might be worth adding that the Character Count component also has hardcoded English text (see code), and so whichever solution is proposed for translation can be adopted there too?

[kellylee-gds]

Previous body of issue:

Goal

We can publish more complex components involving JavaScript, in a consistent way that can be adopted by service teams.

Why

Doing this work allows us to publish more complex components like modal dialogue and autocomplete, both of which we know are needed by users.

Related stories

• [x] Cannot import standard ES6 modules from npm #711
• [ ] Accordion has hardcoded English text in javascript file #1325
• [x] Expose better ways to set values on components (https://github.com/alphagov/govuk-frontend/issues/1028)
• [ ] Investigate components being initialised more than once #1127

[owenatgov]

JS Squad to decide which of the epics in this card to work on at the present moment in time and move them into the epics column.

[36degrees]

Closing this as the scope is too broad to be useful at the minute (there's always more we can do to improve!) and the few remaining stories are better covered in other epics (or are epics themselves):

• #3478
• #2621
• #2502