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.

@jon-kirwan jon-kirwan force-pushed the update-inverse-header branch from df6e0cc to b0fbdac Compare October 20, 2025 14:24
@govuk-ci govuk-ci temporarily deployed to govuk-frontend-app-pr-5034 October 20, 2025 14:24 Inactive
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.
@jon-kirwan jon-kirwan force-pushed the update-inverse-header branch from b0fbdac to 8eccbf1 Compare November 3, 2025 10:51
Copy link
Contributor

@MartinJJones MartinJJones left a comment

Choose a reason for hiding this comment

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

This change also looks good to me, just needs to include the latest version of the gem that includes the latest inverse header style changes and it's good to 🚀

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.

5 participants