Make Accessible Autocomplete a GOV.UK Prototype Kit plugin

[joelanman]

• adds a config file to make the JS and CSS available to the kit as a plugin
• adds info to the Readme so people know how to use it as a plugin

[joelanman]

are there any changes I need to make to this?

[joelanman]

might need guidance or preferably code to style it like gov.uk

[joelanman]

Hi is this something I can help with or shall I close it?

[colinrotherham]

@joelanman I've rebased this PR for you and we've added it to the "After next" milestone

You'll see one extra commit https://github.com/alphagov/accessible-autocomplete/pull/598/commits/0be7e76a26cad2f85eaed2e3a4640ccccba12bf9 to avoid https://github.com/alphagov/govuk-prototype-kit/issues/1950

Looks good to me

[joelanman]

@colinrotherham cheers! The only other thing I can think of is that the autocomplete isn't styled to GOV.UK by default (the font is the most obvious difference). I wonder if it's easy to make that happen when it's installed as a plugin, or if we just give people instructions on how to do it.

Related:

• https://github.com/alphagov/accessible-autocomplete/issues/285

[colinrotherham]

@joelanman Ah good thinking, forgot I replied to that one back in the day

We can review whether GDS Transport is allowed within .govuk-form-group only perhaps

But I've pushed up some of those tweaks to fix #285 too

[joelanman]

@colinrotherham nice! Just to check is the intention to

• apply some non branded but 'nice' default styling
• add gov.uk styling if the autocomplete is inside a govuk-form-group class?

If so, that seems nice, but I think there's a danger people don't use the govuk-form-group class.

My idea is to add another css/sass file purely for gov.uk branding. In the kit this could be included by default (via the plugin config) - others could opt in manually (with instructions in the readme). What do you think?

[colinrotherham]

@joelanman Yeah exactly that

I've made sure the defaults use Arial and align with GOV.UK Frontend

Prototype Kit plugin stylesheet sounds like a great idea if there's no nice way to opt-in GOV.UK services too

[romaricpascal]

Anticipating some breaking changes from Colin making the autocomplete catch-up with GOV.UK Frontend's style, we're going to split them in their own PR we can add to the current release, which already brings some breaking changes.

I think I'd be keen to have the styling currently set through .govuk-form-group (and only that part necessary to integrate with the Prototype Kit) in its own stylesheet specific for the Prototype Kit, and listed in the plugin.

That being said, I'm also wondering if that's not something we could solve by making sure you can control the fonts inside the component by setting a class on its root element (or a wrapper) and let the values be inherited when necessary. Will give it a quick try.

[colinrotherham]

I've moved the CSS tweaks to https://github.com/alphagov/accessible-autocomplete/pull/644

We're still unsure on how best to serve a separate stylesheet (or styles) for GOV.UK services

[joelanman]

is there anything I can help with on this?

[romaricpascal]

is there anything I can help with on this?

@joelanman, thanks for your patience, we'd scheduled this PR for further review after the next release of the accessible autocomplete, which just happened.

I think the main thing that remains to sort is how to provide a default styling for the accessible autocomplete when used in the Prototype Kit. I'd personally be keen to avoid coupling the accessible autocomplete to GOV.UK Frontend's classes and avoid having styles specific to the Prototype Kit in the 'default' CSS which will be included outside of the Prototype Kit. Acknowledging that this would mean building a new, separate, stylesheet so will double check with the team.