HMPO / hmpo-components

MIT License
6 stars 8 forks source link

Using hmpo-radios the govuk-frontend radio button divider does not get translated #136

Closed gds-jbentham closed 1 year ago

gds-jbentham commented 1 year ago

When using the hmpo-radios component. If you add a divider to your radio button in the fields.js like the below


    newRadioButtons: {
      type: "radios",
      label: "",
      legend: "",
      items: [{value:"Option One"}, {value:"Option Two"}, {divider: "or"}, {value:"Option Three"}],
      validate: ["required"],
    },

https://design-system.service.gov.uk/components/radios/

Screenshot 2023-02-01 at 17 23 06

When you add locales the divider text does not get translated like the other items. If you add this line
if (item.divider) item.divider = translate(contentKey + '.items.' + item.divider + '.label'); Into globals.js hmpoGetItems. Then you can use the same syntax in your locales files to translate the divider text fields.yml

newRadioButtons:
  items:
    or:
      label: <or in desired language>
HughePaul commented 1 year ago

I'd rather leave the legacy/govuk behaviour where the divider being a string is what gets rendered. instead i propose having: { divider: true } to use a default localisation key lookup of fields.newRadioButtons.divider.label and fields.default.divider.label or specifying a key: { divider: true, key: 'full.localisation.key' } to match key specifying functionality of items.

https://github.com/HMPO/hmpo-components/pull/139/files

Also the divider items should be ignored in hmpo-form-wizard when auto-adding an items validator:

https://github.com/HMPO/hmpo-form-wizard/pull/189/files

HughePaul commented 1 year ago

merged and released (including hmpo-form-wizard update to ignore divider items)