You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We’re using this library with conf.brand set to 'nhsuk', and importing nhsuk-frontend to style the generated component markup.
In most cases this works because there’s reasonable closeness between the CSS classes used by govuk-frontend, and those used by nhsuk-frontend:
<%= govuk_link_to 'A regular hyperlink', '#' %>
<!-- nhsuk-frontend provides styles for `nhsuk-link` --><aclass="nhsuk-link" href="#">A regular hyperlink</a>
However, given the following component, which has no equivalent in nhsuk-frontend:
<%= govuk_panel(
title_text: "Application complete",
text: "You will soon receive an email confirmation."
) %>
<!-- nhsuk-frontend does not provide styles for `nhsuk-panel` --><divclass="nhsuk-panel nhsuk-panel--confirmation"><h1class="nhsuk-panel__title">Application complete</h1><divclass="nhsuk-panel__body">You will soon receive an email confirmation.</div></div>
Because nhsuk-frontend doesn’t support these classes, we need to do the following in our SCSS (approximated):
// Configure and import GOV.UK Frontend$govuk-font-family: "Frutiger W01", Arial, sans-serif;
$govuk-brand-colour: #005eb8;
// Import panel component styles@import"govuk-frontend/dist/govuk/components/panel/index";
// Apply the panel component styles to the nhsuk- prefixed component.nhsuk-panel {
@extend.govuk-panel;
&--confirmation {
@extend.govuk-panel--confirmation;
}
&__title {
@extend.govuk-panel__title;
}
}
Proposal
By allowing brand to be set at the component level, components can opt in or out of a configured brand, or use multiple brand prefixes. The above would therefore become:
<%= govuk_panel(
title_text: "Application complete",
text: "You will soon receive an email confirmation.",
brand: "govuk"
) %>
<divclass="govuk-panel govuk-panel--confirmation"><h1class="govuk-panel__title">Application complete</h1><divclass="govuk-panel__body">You will soon receive an email confirmation.</div></div>
There are some components in the GOV.UK Design System that don't appear
in the NHS design system. Currently teams who want to use these
components need to manually copy and adjust chunks of SCSS, replacing
`govuk` for `nhsuk` - a laborious process.
We can make this a little easier by allowing the brand to be configured
on a component-by-component basis, reducing the amount of custom styles
needed.
The reason this approach was taken and not just passing in a `brand`
override to each component is that there's no easy way of passing
arguments through to the slots without [converting them all to
lambdas](https://viewcomponent.org/guide/slots.html#lambda-slots).
This will likely be a really niche feature.
Fixes#547
We’re using this library with
conf.brand
set to'nhsuk'
, and importingnhsuk-frontend
to style the generated component markup.In most cases this works because there’s reasonable closeness between the CSS classes used by
govuk-frontend
, and those used bynhsuk-frontend
:However, given the following component, which has no equivalent in
nhsuk-frontend
:Because
nhsuk-frontend
doesn’t support these classes, we need to do the following in our SCSS (approximated):Proposal
By allowing
brand
to be set at the component level, components can opt in or out of a configured brand, or use multiple brand prefixes. The above would therefore become:The text was updated successfully, but these errors were encountered: