Skip to content

[v6.0.0-beta] Organisational logo re-paint/re-render #286

Closed

Description

@Dylan-fa

State 1:

Image

State 2:

Image

State 1:

<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" data-module="nhsuk-header" role="banner">
   <div class="nhsuk-width-container nhsuk-header__container">
      <div class="nhsuk-header__service">
         <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
            <title>NHS</title>
            <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"></path>
         </svg>
         <span class="nhsuk-header__organisation-name">Royal Surrey</span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
      </div>
      <nav class="nhsuk-header__account" aria-label="Account">
         <ul class="nhsuk-header__account-list">
            <li class="nhsuk-header__account-item">
               <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
                  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"></path>
               </svg>
               Dylan Farrar
            </li>
            <li class="nhsuk-header__account-item"><a class="nhsuk-header__account-link" href="#">Log out</a></li>
         </ul>
      </nav>
   </div>
   <nav class="nhsuk-header__navigation" aria-label="Menu">
      <div class="nhsuk-width-container nhsuk-header__navigation-container">
         <ul class="nhsuk-header__navigation-list">
            <li class="nhsuk-header__navigation-item"><a class="nhsuk-header__navigation-link"></a></li>
            <li class="nhsuk-header__menu" hidden=""><button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false"><span class="nhsuk-u-visually-hidden">Browse </span>More</button></li>
         </ul>
      </div>
   </nav>
</header>

State 2:

<header class="nhsuk-header nhsuk-header--organisation nhsuk-header--white" data-module="nhsuk-header" role="banner" data-nhsuk-header-init="">
   <div class="nhsuk-width-container nhsuk-header__container">
      <div class="nhsuk-header__service">
         <a class="nhsuk-header__service-logo" href="/" aria-label="NHS Royal Surrey homepage">
            <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
               <title>NHS</title>
               <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z"></path>
            </svg>
            <span class="nhsuk-header__organisation-name">Royal Surrey</span><span class="nhsuk-header__organisation-name-descriptor">NHS Foundation Trust</span>
         </a>
      </div>
      <nav class="nhsuk-header__account" aria-label="Account">
         <ul class="nhsuk-header__account-list">
            <li class="nhsuk-header__account-item">
               <svg class="nhsuk-icon nhsuk-icon--user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
                  <path d="M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm0 2a9 9 0 0 0-5 16.5V18a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1.5A9 9 0 0 0 12 3Zm0 3a3.5 3.5 0 1 1-3.5 3.5A3.4 3.4 0 0 1 12 6Z"></path>
               </svg>
               Dylan Farrar
            </li>
            <li class="nhsuk-header__account-item"><a class="nhsuk-header__account-link" href="#">Log out</a></li>
         </ul>
      </nav>
   </div>
   <nav class="nhsuk-header__navigation" aria-label="Menu">
      <div class="nhsuk-width-container nhsuk-header__navigation-container">
         <ul class="nhsuk-header__navigation-list">
            <li class="nhsuk-header__navigation-item"><a class="nhsuk-header__navigation-link"></a></li>
            <li class="nhsuk-header__menu" hidden=""><button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link" id="toggle-menu" aria-expanded="false"><span class="nhsuk-u-visually-hidden">Browse </span>More</button></li>
         </ul>
      </div>
   </nav>
</header>

Activity

  1. colinrotherham commented on Oct 13, 2025

    @colinrotherham
    Collaborator

    If you're able to npm link from #285 does it fix the issue?

    We've released v6.0.0-beta.2 if you can please check the issue again

    The old approach to push state updates "up" via child component props (into context) didn’t work with RSC either
    so I’ve fixed it by moving logo and service into props, not child components

  2. Dylan-fa commented on Oct 21, 2025

    @Dylan-fa
    Author

    Thanks, yes this looks fixed now.

  3. added this to the v6.0.0 milestone on Oct 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions