Align the code for radio and checkbox component

[huwd]

What

We recently did some work on both the checkboxes and radios components. The two components are very similar in function but have quite a different layout in code.

Specifically, the Checkbox code takes a wedge of data, passes it to a helper, which then allows for simple calls throughout the rest of the page.

The radio box code does similar work but within the view itself.

I propose we:

• Move the radio button code into a helper that looks like the checkbox code
• Update both to use best practices (prefer local variables to instance where possible, private methods where they're not to be used in the view)
• Also audit other components to find out how widespread this difference is between similar components and create further tickets to amend.

Why

The work here was slowed by the implementation difference between very similar components. I think this is a bit of code archeology. Consistency in a codebase should help us iterate faster in future and act as good prior art for any new components created in the future, to further enforce consistency.

[alex-ju]

I can try and provide some background on how I think this happened. When we started to migrate components from govuk-frontend (Design System) to govuk_publishing_components there was already a checkboxes component but there was no radio component. So we've built the radio component following the component API from govuk-frontend (including the name – hence the difference between the two) whereas the checkbox component was later updated (in a bit of a rush to meet the needs around the brexit-related work) and no one dedicated the time to align the two.

Are you fine with me rephrasing this issue as "Align the code for radio and checkbox component" as it's more than markup, it's also about CSS and JavaScript.