Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into header-navigation-mar…
Browse files Browse the repository at this point in the history 
…gins-option-2 and add changelog
  • Loading branch information
@anandamaryon1
anandamaryon1 committed Oct 23, 2024
2 parents 64b0b06 + 946a655 commit 65b3605
Show file tree
Hide file tree
Showing 21 changed files with 82 additions and 139 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# NHS.UK frontend Changelog

## Unreleased

:wrench: **Fixes**

- Update header styles so that `.nhsuk-header__search-no-nav` class is no longer needed when header contains a search field but no navigation ([PR 1046](https://github.com/nhsuk/nhsuk-frontend/pull/1046))
- Update navigation list item padding to vertically align navigation items with width container ([PR 1033](https://github.com/nhsuk/nhsuk-frontend/pull/1033))

## 9.0.1 - 9 October 2024

:wrench: **Fixes**
Expand Down
7 changes: 2 additions & 5 deletions packages/components/header/_header-transactional.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,9 @@
*/

.nhsuk-header__transactional-service-name {
margin-bottom: -(nhsuk-spacing(1));
padding-left: nhsuk-spacing(3);
padding-top: 3px;

@include mq($until: tablet) {
padding-bottom: nhsuk-spacing(3);
}
padding-top: 2px;

@include mq($until: tablet) {
padding-left: 0;
Expand Down
7 changes: 7 additions & 0 deletions packages/components/header/_header-white.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@
background-color: $color_nhsuk-blue;
}

.nhsuk-navigation {
.nhsuk-header__navigation-list {
border-top: none;
}
}

.nhsuk-logo {
.nhsuk-logo__background {
fill: $color_nhsuk-blue;
Expand Down Expand Up @@ -100,6 +106,7 @@
.nhsuk-navigation-container {
background-color: $color_nhsuk-white;
}

.nhsuk-navigation {
background-color: $color_nhsuk-white;

Expand Down
22 changes: 10 additions & 12 deletions packages/components/header/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,7 @@
@include govuk-width-container;
padding: 20px 0;

@include mq($until: tablet) {
padding-bottom: 0;
}

@include mq($from: tablet) {
border-bottom: 1px solid $color_transparent_nhsuk-white-20;
display: flex;
justify-content: space-between;
}
Expand Down Expand Up @@ -113,9 +108,6 @@
.nhsuk-header__logo--only {
max-width: 100%;

@include mq($until: tablet) {
padding-bottom: nhsuk-spacing(3);
}
@include mq($from: tablet) {
.nhsuk-header__link--service {
align-items: center;
Expand Down Expand Up @@ -155,10 +147,6 @@
}
}

.nhsuk-header__search-no-nav {
padding-bottom: nhsuk-spacing(3);
}

.nhsuk-header__search-form {
height: 100%;
overflow: visible;
Expand Down Expand Up @@ -491,6 +479,10 @@
.nhsuk-navigation-container {
@include print-hide();
position: relative;

@include mq($until: tablet) {
margin-top: -20px;
}
}

// ul of hidden nav
Expand Down Expand Up @@ -541,6 +533,12 @@
}
}

.nhsuk-header__navigation-list {
@include mq($from: tablet) {
border-top: 1px solid $color_transparent_nhsuk-white-20;
}
}

.nhsuk-header__navigation-list--left-aligned {
@include mq($from: desktop) {
justify-content: initial;
Expand Down
178 changes: 56 additions & 122 deletions packages/components/header/template.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
{%- if params.organisation and params.organisation.name %} nhsuk-header--organisation{% endif %}
{%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
{{- nhsukAttributes(params.attributes) }}>

<div class="nhsuk-header__container">
<div class="nhsuk-header__logo
<div class="nhsuk-header__logo
{%- if showNav == "false" and showSearch == "false" and params.transactionalService %} nhsuk-header__transactional--logo{% endif %}
{%- if showNav == "false" and showSearch == "false" and not params.transactionalService %} nhsuk-header__logo--only{% endif %}">
{%- if params.organisation %}
Expand All @@ -42,128 +42,62 @@
</a>
{%- endif %}
</div>


{%- if showNav == "false" and showSearch == "false"%}

{%- if params.transactionalService%}
<div class="nhsuk-header__transactional-service-name">
<a class="nhsuk-header__transactional-service-name--link" href="{% if params.transactionalService.href %}{{ params.transactionalService.href }}{% else %}/{% endif %}">{{ params.transactionalService.name }}</a>
</div>

{%- endif %}

</div>{# close nhsuk-header__container #}


{% endif -%}

{% if showNav == "true" and params.primaryLinks and showSearch == "true" %}

<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="{{ params.searchAction if params.searchAction else 'https://www.nhs.uk/search/' }}" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="{{ params.searchInputName if params.searchInputName else "search-field" }}" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
</div>
</div>

</div>{# close nhsuk-header__container #}
<div class="nhsuk-navigation-container">
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
<ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
{%- for item in params.primaryLinks %}
<li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
<a class="nhsuk-header__navigation-link" href="{{item.url}}">
{{item.label}}
</a>
</li>
{%- endfor %}
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
<a class="nhsuk-header__navigation-link" href="/">
Home
</a>
</li>
<li class="nhsuk-mobile-menu-container">
<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
<svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</button>
</li>
</ul>
</nav>
{%- if showNav == "false" and showSearch == "false"%}
{%- if params.transactionalService%}
<div class="nhsuk-header__transactional-service-name">
<a class="nhsuk-header__transactional-service-name--link" href="{% if params.transactionalService.href %}{{ params.transactionalService.href }}{% else %}/{% endif %}">{{ params.transactionalService.name }}</a>
</div>


{% endif -%}

{% if showSearch == "true" and showNav == "false" %}

<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__search nhsuk-header__search-no-nav">
<div class="nhsuk-header__search-wrap js-show" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="{{ params.searchAction if params.searchAction else 'https://www.nhs.uk/search/' }}" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="{{ params.searchInputName if params.searchInputName else "search-field" }}" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
{%- endif %}
{% endif -%}

{% if showSearch == "true" %}
<div class="nhsuk-header__content" id="content-header">
<div class="nhsuk-header__search">
<div class="nhsuk-header__search-wrap" id="wrap-search">
<form class="nhsuk-header__search-form" id="search" action="{{ params.searchAction if params.searchAction else 'https://www.nhs.uk/search/' }}" method="get" role="search">
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
<input class="nhsuk-search__input" id="search-field" name="{{ params.searchInputName if params.searchInputName else "search-field" }}" type="search" placeholder="Search" autocomplete="off" >
<button class="nhsuk-search__submit" type="submit">
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
</svg>
<span class="nhsuk-u-visually-hidden">Search</span>
</button>
</form>
</div>
</div>

</div>{# close nhsuk-header__container #}

{% endif -%}

{% if showNav == "true" and params.primaryLinks and showSearch == "false" %}

</div>{# close nhsuk-header__container #}

<div class="nhsuk-navigation-container">
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
<ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
{%- for item in params.primaryLinks %}
<li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
<a class="nhsuk-header__navigation-link" href="{{item.url}}">
{{item.label}}
</a>
</li>
{%- endfor %}
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
<a class="nhsuk-header__navigation-link" href="/">
Home
</a>
</li>
<li class="nhsuk-mobile-menu-container">
<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
<svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>

{% endif -%}

{% endif -%}
</div>{# close nhsuk-header__container #}

{% if showNav == "true" and params.primaryLinks %}
<div class="nhsuk-navigation-container">
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
<ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
{%- for item in params.primaryLinks %}
<li class="nhsuk-header__navigation-item {%- if item.classes %} {{ item.classes }}{% endif %}" {{- nhsukAttributes(item.attributes) }}>
<a class="nhsuk-header__navigation-link" href="{{item.url}}">
{{item.label}}
</a>
</li>
{%- endfor %}
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
<a class="nhsuk-header__navigation-link" href="/">
Home
</a>
</li>
<li class="nhsuk-mobile-menu-container">
<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
<svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
</svg>
</button>
</li>
</ul>
</nav>
</div>
{% endif -%}
</header>
Binary file modified ...ce/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ntend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nd_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ganisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nce/nhsuk-frontend_Header_transactional_with_service_name_0_document_2_iPad.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ontend_Header_transactional_with_service_name_0_document_3_Surface_iPad_Pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eference/nhsuk-frontend_Header_with_a_service_name_0_document_0_iPhone_5_SE.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...reference/nhsuk-frontend_Header_with_a_service_name_0_document_1_iPhone_6-8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nce/nhsuk-frontend_Header_with_a_service_name_0_document_3_Surface_iPad_Pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...aps_reference/nhsuk-frontend_Header_with_logo_only_0_document_0_iPhone_5_SE.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...maps_reference/nhsuk-frontend_Header_with_logo_only_0_document_1_iPhone_6-8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eference/nhsuk-frontend_Header_with_logo_only_0_document_3_Surface_iPad_Pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...itmaps_reference/nhsuk-frontend_Header_with_search_0_document_0_iPhone_5_SE.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_1_iPhone_6-8.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...kstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 65b3605

Please sign in to comment.