Skip to content

Conversation

@hannalaakso
Copy link
Member

@hannalaakso hannalaakso commented Sep 30, 2025

What

Remove the white text styles from the Service Manual and Service Toolkit headers, as well as making links black.

Update the CSV preview to use the HTML publication variant of the inverse header.

Why

This aligns the typography styles inside the header on the Service Manual and Service Toolkit with the updated the new style gem inverse header component.

A design decision was made to retain the deeper blue header colour in the context of document views for now, so the header on the CSV preview will use the HTML publication variant of the inverse header which is keeping its blue background.

https://gov-uk.atlassian.net/jira/software/c/projects/NAV/boards/1422?selectedIssue=NAV-18210

Screenshots?

The 'After' include the updates to to the gem component - see 'Depends on'.

Before

Screenshot 2025-10-06 at 12 58 53

After

Screenshot 2025-10-06 at 13 02 38

Before

Screenshot 2025-10-06 at 13 00 50

After

Screenshot 2025-10-06 at 13 00 36

Before

Screenshot 2025-10-06 at 13 05 14

After (no difference)

Screenshot 2025-10-08 at 15 20 17

Depends on

alphagov/govuk_publishing_components#5053 - I've added a Do Not Merge label until the gem PR has been merged.

Fixes https://gov-uk.atlassian.net/jira/software/c/projects/NAV/boards/1422?selectedIssue=NAV-18210.

@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 September 30, 2025 15:50 Inactive
@govuk-ci govuk-ci had a problem deploying to govuk-frontend-app-pr-5034 September 30, 2025 15:52 Failure
@govuk-ci govuk-ci had a problem deploying to govuk-frontend-app-pr-5034 September 30, 2025 16:06 Failure
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 September 30, 2025 16:08 Inactive
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 September 30, 2025 18:01 Inactive
@hannalaakso hannalaakso force-pushed the update-inverse-header branch from c279f33 to 4303e94 Compare October 6, 2025 11:02
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 October 6, 2025 11:02 Inactive
@hannalaakso hannalaakso changed the title Update inverse header Align inverse headers with the new styles of the gem component Oct 6, 2025
@hannalaakso hannalaakso force-pushed the update-inverse-header branch from 4303e94 to 40c4726 Compare October 8, 2025 11:33
@govuk-ci govuk-ci had a problem deploying to govuk-frontend-app-pr-5034 October 8, 2025 11:33 Failure
@hannalaakso hannalaakso force-pushed the update-inverse-header branch from 40c4726 to 54f4c2f Compare October 8, 2025 11:35
@govuk-ci govuk-ci had a problem deploying to govuk-frontend-app-pr-5034 October 8, 2025 11:35 Failure
@govuk-ci govuk-ci had a problem deploying to govuk-frontend-app-pr-5034 October 8, 2025 11:49 Failure
@hannalaakso hannalaakso force-pushed the update-inverse-header branch from 6913d6a to c916ab6 Compare October 8, 2025 12:51
@govuk-ci govuk-ci had a problem deploying to govuk-frontend-app-pr-5034 October 8, 2025 12:51 Failure
@hannalaakso hannalaakso force-pushed the update-inverse-header branch from c916ab6 to 1f1671d Compare October 8, 2025 12:54
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 October 8, 2025 12:54 Inactive
@hannalaakso hannalaakso force-pushed the update-inverse-header branch from 1f1671d to df6e0cc Compare October 8, 2025 17:52
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 October 8, 2025 17:52 Inactive
@hannalaakso hannalaakso marked this pull request as ready for review October 8, 2025 17:56
Copy link
Contributor

@jon-kirwan jon-kirwan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work. All looks good to me!

<% end %>
<%= render "govuk_publishing_components/components/lead_paragraph", {
text: lead_para,
inverse: true,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, I guess we should be able to fully remove this option once it's removed from https://github.com/alphagov/collections/blob/main/app/views/taxons/_page_header.html.erb#L17.

As the new style inverse header (with light blue background) doesn't require white text, remove setting it with inverse styles.

Add class to links to style with the new inverse header style black.
A design decision was made to retain the blue background on the CSV previews for now, reflecting the fact that the context is different than for the full page header that will be light blue with the new style inverse header.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants