Support other design systems #127
Conversation
It is intended to be used to configure the form builder to work with other compatible design systems, the NHS's for example https://service-manual.nhs.uk/design-system
Most of the classes throughout the form builder are stored alone in strings or in arrays. Removing the `govuk-` prefix and allowing it to be configured should require as little intervention as possible. This is the first attempt.
This is the first major step in making the form builder more flexible
with regards to the underlying design system. All hardcoded references
to `govuk` have been replaced with calls to the brand method, `prefix`
is used to simplify the branding of arrays of classes.
Manually checked that nothing in ./lib matches the following search:
$ ag -s govuk lib/govuk_design_system_formbuilder/{elements,containers,traits}
No new tests yet but existing ones pass!
This doesn't test every eventuality and combination but ensures that with the default options, when a custom branding is set, it replaces the default one in the output. Refs #127
This should come in handy when working with third party design systems and make the code more predictable and consistent Refs #127
|
@peteryates are you able to get in contact with either myself (Mark Sutton) or Nuno Costa who are both working on the PHE project who you have adapted this for? |
|
It appears that there are some deeper differences between the NHS Design System and the GOV.UK Design System than initially thought. Some JavaScript functionality in the NHS DS isn't properly triggered because of slightly-differing class names/attributes. The NHS team using the form builder have had to monkey patch some methods to bring them in line. This gem will not claim that it supports the NHS DS, but the work in this PR is still valid and could be used as the basis for a companion gem that applies refinements/monkey patches where required to add the necessary markup needed by the NHS DS; it would also need its own set of tests.
|
It looks like the NHS design system isn't as close a match as initially thought. The branding functionality is still a move in the right direction but claiming support for the NHS DS is a step too far; an wrapper library that amends the relevant HTML attributes will be required in between.
|
Code Climate has analyzed commit 9c12e3c and detected 0 issues on this pull request. The test coverage on the diff in this pull request is 100.0% (50% is the threshold). This pull request will bring the total coverage in the repository to 99.9% (0.0% change). View more on Code Climate. |
A team from the NHS working on COVID19 response projects reached out, they would like to use this form builder to aid their work.
This is an exploratory branch testing out the feasibility of the form builder supporting other compatible design systems, namely that used by the NHS.
By compatible, I'm referring to design systems where the form elements match the GOV.UK version in all but the prefixes of the class names.
In the NHS version, it appears that
govukhas just been replaced withnhsuk, so a label would look like this:How it works
There is a new configuration option called
brandthat defaults togovuk.All hard-coded references to
govukthroughout the form builder have been replaced to calls to the#brandmethod which in turn pulls the value from the config.What's left to do
1.2.0(beta pushed,1.2.0b1)brandis used, eg= form.nhsuk_text_field(...)READMEaccordinglyPreview