Make it easier to set checkbox radio checked options

[frankieroberto]

This adds a new param to both the Checkboxes and Radios components to make it easier to set which items should be checked by default.

This behaviour matches the Checkbox and Radios components within GOV.UK Frontend.

Description

Currently to set which radio or checkbox items should be pre-ticked, you have to set a checked boolean on the relevant items.

When using the NHS prototype kit, this means code like this:

{{ radios({
  idPrefix: "injectionSite",
  name: "injectionSite",
  fieldset: {
    legend: {
      text: "Where did you give the injection?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  items: [
    {
      value: "Left arm",
      text: "Left arm",
      checked: (data.injectionSite == 'Left arm')
    },
    {
      value: "Right arm",
      text: "Right arm",
      checked: (data.injectionSite == 'Right arm')
    }
]}) }}

This pull request makes this simpler and less error-prone by allowing you to set the current selected value, and having the nunjucks macro set the matching item as checked, like this:

{{ radios({
  idPrefix: "injectionSite",
  name: "injectionSite",
  fieldset: {
    legend: {
      text: "Where did you give the injection?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  value: data.injectionSite,
  items: [
    {
      value: "Left arm",
      text: "Left arm"
    },
    {
      value: "Right arm",
      text: "Right arm"
    }
]}) }}

A similar feature has been added for checkboxes, except that the param is called values, and works with an array of values which should be checked:

{{ checkboxes({
  idPrefix: "eligibility",
  name: "eligibility",
  fieldset: {
    legend: {
      text: "Why are you giving them the vaccine?",
      classes: "nhsuk-fieldset__legend--l",
      isPageHeading: true
    }
  },
  values: data.eligibility,
  items: [
    {
      value: "age-based"
      text: "Based on age"
    },
    {
      value: "pregnant"
      text: "Pregnant"
    },
    {
      value: "immunosuppressed",
      text: "Immunosuppressed"
    }
  ]
}) }}

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[paulrobertlloyd]

In this (or a separate PR) might we also be able to make it so that the first item in the radio or checklist isn’t suffixed with -1 (this makes it easier to link to a radio or checkbox fieldset from an error summary using the field’s name).

[colinrotherham]

Looks ace

[paulrobertlloyd]

Does this fix #988?

[frankieroberto]

@paulrobertlloyd opps yes, must have forgotten to link the PR to the issue.