Skip to content

Conversation

owenatgov
Copy link
Contributor

What

Changes the toggling system in the review app so that now you have to opt in to see the old brand rather than the other way around. Specifically, /set-rebrand is now /unset-rebrand which sets a use_old_brand cookie rather than a use_rebrand cookie which negatively effects the setting of useRebrand rather than positively.

This also updates tests and the docs for the toggling system.

Why

It's been out for a while now!

Imforned naturally as part of work on #6247. It's easier on the designers doing the auditing to see the new brand over the old brand without having to turn it on and set their cookies.

Notes

The only reason I've observed to keep the cookie which sets it to default old or default new is for checking the full page examples. Otherwise I wonder if we need to set cookies at all and can just rely on the 'show all states' functionality to see the old brand in action.

I wonder how useful that doc is and if any of the design system devs have referred to it over the course of the rebrand work rather than just checking the code + commit history.

@owenatgov owenatgov requested a review from a team October 2, 2025 16:17
Copy link

github-actions bot commented Oct 2, 2025

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/template-default.html b/packages/govuk-frontend/dist/govuk/components/task-list/template-default.html
index 339af36b7..2d920b8a8 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/template-default.html
@@ -1,8 +1,8 @@
 
 <ul class="govuk-task-list">
-  <li class="govuk-task-list__item govuk-task-list__item--with-link">
+  <li class="govuk-task-list__item govuk-task-list__item--with-link :hover">
     <div class="govuk-task-list__name-and-hint">
-      <a class="govuk-link govuk-task-list__link" href="#" aria-describedby="task-list-1-status">
+      <a class="govuk-link govuk-task-list__link :hover" href="#" aria-describedby="task-list-1-status">
         Company Directors
       </a>
     </div>

Action run for c8816fb

Copy link

github-actions bot commented Oct 2, 2025

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json b/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
index fc95b555f..187fd691f 100644
--- a/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/task-list/fixtures.json
@@ -7,12 +7,14 @@
                 "items": [
                     {
                         "title": {
-                            "text": "Company Directors"
+                            "text": "Company Directors",
+                            "classes": ":hover"
                         },
                         "href": "#",
                         "status": {
                             "text": "Completed"
-                        }
+                        },
+                        "classes": ":hover"
                     },
                     {
                         "title": {
@@ -44,7 +46,7 @@
             "description": "",
             "pageTemplateOptions": {},
             "screenshot": false,
-            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
+            "html": "<ul class=\"govuk-task-list\">\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link :hover\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link :hover\" href=\"#\" aria-describedby=\"task-list-1-status\">\n        Company Directors\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-1-status\">\n      Completed\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-2-status\">\n        Registered company details\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-2-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n  <li class=\"govuk-task-list__item govuk-task-list__item--with-link\">\n    <div class=\"govuk-task-list__name-and-hint\">\n      <a class=\"govuk-link govuk-task-list__link\" href=\"#\" aria-describedby=\"task-list-3-status\">\n        Business plan\n      </a>\n    </div>\n    <div class=\"govuk-task-list__status\" id=\"task-list-3-status\">\n      <strong class=\"govuk-tag govuk-tag--blue\">\n        Incomplete\n      </strong>\n    </div>\n  </li>\n</ul>"
         },
         {
             "name": "with hint text and additional states",

Action run for c8816fb

Copy link

github-actions bot commented Oct 2, 2025

📋 Stats

No changes to any distributed file sizes!


Action run for c8816fb

@owenatgov
Copy link
Contributor Author

Those percy tests throw a wrench in this...

We're setting rebranded examples of specific components manually using rebrand options in components and the pageTemplateOptions param to set the rebrand template class, on the assumption that the review app isn't using the new brand by default.

It's much trickier to reverse the polarity so that most examples are using the rebrand and these odd examples are using the old brand because the rebrand feature flag is 'addative' to the govuk-frontend baseline experience and we don't have a way to reaach in and remove that class from within examples. If we build a system for that it might get complicated.

I'm putting this back into draft for now and will have a think about if this is feasible without making the review app more messy or more complex.

@owenatgov owenatgov marked this pull request as draft October 3, 2025 15:12
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 this pull request may close these issues.

1 participant