Internal service header

[michaelcattell]

Hello, we'd like to use this open discussion on the use of the Internal service header component:

Some discussion points to get things going:
Have you used or know where this component has been used?
Do you know if there's been any research or testing done on it or around it?
Do you agree with the user need?
Things we don’t know enough?

Useful link: dwp/design-system-community-backlog#58

[petejobesdigitaldwp]

I'd be interested to know why the blue border has been removed. GDS guidance for agent facing services is:

If your service is not on a service.gov.uk domain, you cannot use the GOV.UK crown logo.

It makes sense for public-facing services to look and feel like part of GOV.UK, so users know they’re in the right place. This is not necessary for internal services.

You also will not be able to use the New Transport font. Use the Helvetica or Arial CSS font stacks instead.

https://www.gov.uk/service-manual/design/services-for-government-users#logos-and-fonts

If we're diverging from the way things are done across government we should have a supported and evidenced reason. It's a small example, but civil servants move between departments so we should only deviate if we have an evidenced reason.

[jonhurrell]

Thanks for your feedback Pete. We certainly don't plan divergence without consideration, our goal is always to work in the open and be present within the community to give us the service context we need.

In this case we're designing an internal component. As the guidance says, it's not necessary for internal services to look like GOV.UK, but we've reviewed existing practice on internal DWP services and based our version on what was shared: for example, we have plenty of internal services that don't include the blue bar:

or because of how the colour stacks with other components, don't realise it's there:

When stacked with other components of similar function and placement, we've seen the bar completely masked but add more size and weight to other components e.g. key details, or worse, when paired with the nav with an active blue state, breaks the visual indication.

We think this is a low-risk change to the basic pattern that doesn't contradict existing guidance and will help improve the design of internal services. We're happy to be wrong though; let's keep the discussion going.

[petejobesdigitaldwp]

Thanks for explaining @jonhurrell - I know it's not necessary for internal services to look like GOV.UK, I just think that it's good to know why a change was made rather than just that it was. Appreciate you explaining.

We have a separate issue in health to normalise the colour of the components used in the header as there's variance across the teams.

[deadlyhifi]

I’ve just pulled in the Internal service header and am having an issue with the with the container: true parameter. The code examples don't contain the CSS for .dwp-header__container--constrained.

node_modules/@dwp/dwp-frontend/components/internal-service-header/_internal-service-header.scss does contain it, so the example needs updating.

Or rather, replace dwp-header__container--constrained class with govuk-width-container which is provided by gov.uk prototype kit and adds the 960px max-width constraint. (@dwp/dwp-frontend/components/internal-service-header/template.njk)

And further, maybe a slightly different discussion, rather than copying CSS into my project from the example documents it would be nice to directly import the CSS or SCSS…

Which I tried but I get an "Undefined mixin." error for govuk-media-query. A compiled version that I could include would also mean that on version releases any changed styles wouldn't get out of sync with the copied examples.

[simoneduca]

Thanks for catching this. Not sure I understand the issue with the container param though. The header examples don't have that class because they're not examples with the parameter switched to true. Would including such example help?

[jonhurrell]

@deadlyhifi We have released a bug fix to address the container issue.

[deadlyhifi]

Both the HTML examples on https://design-system.dwp.gov.uk/components/internal-service-header have dwp-header__container--constrained, but the CSS examples don't.

I was under the impression I needed to copy the CSS from the examples even when using the nunjucks component but it seems not - my comment above about importing the CSS is irrelevant. Carry on :)

The update has fixed my issues - thanks for the quick response.

[timcooper-DWP]

Hello,
Just a small one, but I'm looking at the font stack recommended for internal services:
$govuk-font-family: Helvetica, Arial, sans-serif;

... should the stack in the component be the same? It's currently:

.dwp-key-details-bar {
background-color: $govuk-brand-colour;
color: #fff;
font-family: Arial, sans-serif;

Thanks