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

Allow brand to be configured on a per-component basis #547

Closed
paulrobertlloyd opened this issue Jul 29, 2024 · 0 comments · Fixed by #552
Closed

Allow brand to be configured on a per-component basis #547

paulrobertlloyd opened this issue Jul 29, 2024 · 0 comments · Fixed by #552

Comments

@paulrobertlloyd
Copy link
Contributor

paulrobertlloyd commented Jul 29, 2024

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` -->
<a class="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` -->
<div class="nhsuk-panel nhsuk-panel--confirmation">
  <h1 class="nhsuk-panel__title">Application complete</h1>
  <div class="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"
) %>
<div class="govuk-panel govuk-panel--confirmation">
  <h1 class="govuk-panel__title">Application complete</h1>
  <div class="govuk-panel__body">You will soon receive an email confirmation.</div>
</div>
// Configure and import GOV.UK Frontend
$govuk-font-family: "Frutiger W01", Arial, sans-serif;
$govuk-brand-colour: #005eb8;

@import "govuk-frontend/dist/govuk/components/panel/index";
github-merge-queue bot pushed a commit that referenced this issue Sep 5, 2024
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
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 a pull request may close this issue.

1 participant