|
| 1 | +# Upgrading to 6.0 |
| 2 | + |
| 3 | +There are some breaking changes you'll need to be aware of when upgrading to v6. These are mostly related to us upgrading our dependency on [nhsuk-frontend to v10](https://github.com/nhsuk/nhsuk-frontend/releases/tag/v10.0.0) which also includes breaking changes. |
| 4 | + |
| 5 | +## Breaking changes |
| 6 | + |
| 7 | +### Update the JavaScript supported script snippet |
| 8 | + |
| 9 | +You must now use the NHS.UK frontend v10.x feature detection snippet to check for `<script type="module">`. This change enables styling for JavaScript only features in [supported browsers]() only: |
| 10 | + |
| 11 | +```patch |
| 12 | +- <body class="js-enabled"> |
| 13 | ++ <body> |
| 14 | ++ <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' nhsuk-frontend-supported' : '');</script> |
| 15 | +``` |
| 16 | + |
| 17 | +### Header |
| 18 | + |
| 19 | +The header component has been updated in NHS.UK frontend v10.0.0 and you will need to: |
| 20 | + |
| 21 | +- remove the wrapping `<Header.Container>` component |
| 22 | +- remove the wrapping `<Header.Content>` component |
| 23 | +- remove the automatically created `<HeaderComponent.ServiceName>` component |
| 24 | +- remove the automatically created `<Header.NavDropdownMenu>` component |
| 25 | +- rename the `<Header.Nav>` component to `<Header.Navigation>` |
| 26 | +- rename the `<Header.NavItem>` component to `<Header.NavigationItem>` |
| 27 | + |
| 28 | +```patch |
| 29 | + <Header> |
| 30 | +- <Header.Container> |
| 31 | +- <Header.Logo href="/" /> |
| 32 | +- <Header.Content> |
| 33 | +- <Header.Search /> |
| 34 | +- </Header.Content> |
| 35 | +- </Header.Container> |
| 36 | ++ <Header.Logo href="/" /> |
| 37 | ++ <Header.Search /> |
| 38 | +- <Header.Nav> |
| 39 | +- <Header.NavItem href="#">Example 1</Header.NavItem> |
| 40 | +- <Header.NavItem href="#">Example 2</Header.NavItem> |
| 41 | +- <Header.NavItem href="#">Example 3</Header.NavItem> |
| 42 | +- <Header.NavItem href="#">Example 4</Header.NavItem> |
| 43 | +- <Header.NavDropdownMenu /> |
| 44 | +- </Header.Nav> |
| 45 | ++ <Header.Navigation> |
| 46 | ++ <Header.NavigationItem href="#">Example 1</Header.NavigationItem> |
| 47 | ++ <Header.NavigationItem href="#">Example 2</Header.NavigationItem> |
| 48 | ++ <Header.NavigationItem href="#">Example 3</Header.NavigationItem> |
| 49 | ++ <Header.NavigationItem href="#">Example 4</Header.NavigationItem> |
| 50 | ++ </Header.Navigation> |
| 51 | + </Header> |
| 52 | +``` |
0 commit comments