Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace govuk_formbuilder classes with nhsuk ones #327

Merged
merged 5 commits into from
Jul 13, 2023
Merged

Conversation

tvararu
Copy link
Member

@tvararu tvararu commented Jul 7, 2023

This should make the forms look more consistent with the prototype.

Bugs:

  • Nested radios don't appear

Before

image

After

image

@tvararu tvararu temporarily deployed to manage-vacci-nhsuk-form-3oaxet July 7, 2023 15:13 Inactive
@tvararu tvararu temporarily deployed to manage-vacci-nhsuk-form-3oaxet July 11, 2023 15:50 Inactive
This should make the forms look more consistent with the prototype.
@tvararu tvararu temporarily deployed to manage-vacci-nhsuk-form-3oaxet July 12, 2023 16:25 Inactive
@tvararu tvararu temporarily deployed to manage-vacci-nhsuk-form-3oaxet July 12, 2023 18:09 Inactive
tvararu added 4 commits July 13, 2023 12:44
The actual class is .nhsuk-u-visually-hidden, but when we use the
`config-brand` option for the GOVUK Form Builder to configure the
classes, it ends up inventing a .nhsuk-visually-hidden class. While we
could go and monkey patch all the relevant components to use the
correct class, it's easier to just add a new CSS rule.
Don't bold the inline labels, remove the size option that doesn't do
anything if the legend is hidden, and use a hint instead of a paragraph.
Stimulus relies on the MutationObserver browser API to work. Jest's
JSDOM doesn't implement this, so we need to shim it if we want to use
Jest to test our Stimulus controllers.
This implements a Stimulus controller shim to enhance `nhsuk-radios`
using the custom JS from `nhsuk-frontend`.

Because we're using GOVUK Radios HTML but with NHSUK Radios styling, we
need to manually add a `nhsuk-radios--conditional` class to the root
element.

In addition, NHSUK Radios use `aria-controls` on the server-rendered
HTML, but GOVUK Radios use `data-aria-controls` and enhance it when JS
initialises. Using `data-aria-controls` is the better solution, because
it means that the attribute doesn't kick in in a no-JS situation.
@tvararu tvararu temporarily deployed to manage-vacci-nhsuk-form-3oaxet July 13, 2023 11:57 Inactive
@tvararu tvararu marked this pull request as ready for review July 13, 2023 12:03
@tvararu tvararu requested a review from a team as a code owner July 13, 2023 12:03
@tvararu tvararu requested a review from misaka July 13, 2023 12:04
@tvararu tvararu merged commit 671a752 into main Jul 13, 2023
@tvararu tvararu deleted the nhsuk-forms branch July 13, 2023 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants