Allow for booleans and numbers to be passed via data attributes

What

Ensure that config passed by data attributes is typed sensibly for the way we want to use it.

Why

Attributes passed via data attributes will always be strings, but in some cases we want to be able to treat them as booleans or numbers.

For example:

• data-prevent-double-click on buttons which is a boolean
• data-maxlength on the character count which is a number

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• Attributes that we expect to be booleans or numbers are typed as such when used as config in a component
• We have good test coverage of any function(s) required to implement this

[36degrees]

We touched on it briefly in https://github.com/alphagov/govuk-frontend/issues/2736#issuecomment-1208303510 but I think the biggest downsides were:

• It means that you need a way to JSON encode things from the ‘view’ layer (so that we can convert the Nunjucks options for i18n into the JSON object). We have this in Nunjucks via the dump filter but we weren’t confident that port maintainers would have this available in every templating language
• It felt messier in terms of dealing with quotes and escaping

As flagged in the linked issue, Bootstrap now support this via data-bs-config but that’s in addition to the individual data attributes.

[colinrotherham]

For options/config did the https://github.com/alphagov/govuk-frontend/issues/2736 JSON approach get ruled out?

Input: JSON string from data attribute

<div id="my-component" data-config='{ "points": 100, "default": true }'>
  <!-- Example -->
</div>

Output: JavaScript object with types

const component = document.getElementById('module')
const config = JSON.parse(component.dataset.config)

console.log(config) // { points: 100, default: true }