Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Header breaking changes nunjucks params #1109

Open
wants to merge 23 commits into
base: header-breaking-changes
Choose a base branch
from
Open

Header breaking changes nunjucks params #1109

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4bd7d27
Update nunjucks params for logo and service
frankieroberto Jan 31, 2025
167f369
Merge branch 'header-breaking-changes' into header-breaking-changes-n…
frankieroberto Jan 31, 2025
efec30d
Merge branch 'header-breaking-changes' into header-breaking-changes-n…
frankieroberto Jan 31, 2025
b391315
style fix
frankieroberto Jan 31, 2025
fde7e1f
Update CSS classes to remove 'transactional'
frankieroberto Jan 31, 2025
96297d3
Update example names
frankieroberto Jan 31, 2025
8e56724
Use service href if logo combined with service name
frankieroberto Jan 31, 2025
2efdc9e
Update docs in component README
frankieroberto Jan 31, 2025
7b3dbae
Move `src` to `logo` object.
frankieroberto Jan 31, 2025
c08850c
Merge remote-tracking branch 'origin/header-breaking-changes' into he…
colinrotherham Feb 13, 2025
e738c8b
Allow logo or service name to be unlinked
frankieroberto Feb 13, 2025
c6b664c
Remove 'transactional' references
frankieroberto Feb 13, 2025
37271b8
Update documentation in README
frankieroberto Feb 13, 2025
3ab5ae7
Code style fix
frankieroberto Feb 13, 2025
f932bb8
Merge branch 'header-breaking-changes' into header-breaking-changes-n…
frankieroberto Feb 17, 2025
61548a4
Update backstop references
frankieroberto Feb 17, 2025
5a89bd9
Rename css to follow BEM convention
frankieroberto Feb 17, 2025
f6e7673
Change CSS names
frankieroberto Feb 17, 2025
7ee325a
CSS fixes
frankieroberto Feb 17, 2025
b5933b1
Update backstop images
frankieroberto Feb 17, 2025
9801de7
Merge branch 'header-breaking-changes' into header-breaking-changes-n…
colinrotherham Feb 22, 2025
0a33d85
Fix
frankieroberto Feb 22, 2025
9b5cb9c
Update class name
frankieroberto Feb 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/header/header-account-custom-html.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
]
},
service: {
name: "Profile manager"
text: "Profile manager"
}
}) }}
{% endblock %}
2 changes: 1 addition & 1 deletion app/components/header/header-account-logged-in.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block body %}
{{ header({
service: {
name: "Manage patients"
text: "Manage patients"
},
account: {
items: [
Expand Down
2 changes: 1 addition & 1 deletion app/components/header/header-account-logged-out.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block body %}
{{ header({
service: {
name: "Manage patients"
text: "Manage patients"
},
account: {
items: [
Expand Down
2 changes: 1 addition & 1 deletion app/components/header/header-account-rbac.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% block body %}
{{ header({
service: {
name: "Manage patients"
text: "Manage patients"
},
search: {
placeholder: "NHS number, Date of birth",
Expand Down
3 changes: 3 additions & 0 deletions app/components/header/header-org-white-account.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@

{{ header({
classes: "nhsuk-header--white nhsuk-header--white-nav",
logo: {
href: "#"
},
organisation: {
name: "Anytown Anyplace",
split: "Anywhere",
Expand Down
3 changes: 3 additions & 0 deletions app/components/header/header-org-white-nav.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@

{{ header({
classes: "nhsuk-header--white nhsuk-header--white-nav",
logo: {
href: "#"
},
organisation: {
name: "Anytown Anyplace",
split: "Anywhere",
Expand Down
3 changes: 3 additions & 0 deletions app/components/header/header-org-white.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@

{{ header({
classes: "nhsuk-header--white",
logo: {
href: "#"
},
organisation: {
name: "Anytown Anyplace",
split: "Anywhere",
Expand Down
3 changes: 3 additions & 0 deletions app/components/header/header-org.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
{% block body %}

{{ header({
logo: {
href: "#"
},
organisation: {
name: "Anytown Anyplace",
split: "Anywhere",
Expand Down
10 changes: 7 additions & 3 deletions ...der/header-transactional-service-name.njk → ...eader-service-name-combined-with-logo.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Header transactional with service name' %}
{% set title = 'Header with service name' %}
{% from 'components/header/macro.njk' import header %}
{% extends 'layout.njk' %}

{% block body %}

{{ header({
transactionalService: {
name: "Find your NHS number"
logo: {
includeWithServiceLink: true
},
service: {
text: "Prototype kit",
href: "#"
}
}) }}

Expand Down
3 changes: 2 additions & 1 deletion app/components/header/header-service-name-with-account-search-nav.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
{% block body %}
{{ header({
service: {
name: "Search patient directory"
text: "Search patient directory",
href: "#"
},
search: {
visuallyHiddenLabel: "Search patient directory"
Expand Down
6 changes: 5 additions & 1 deletion app/components/header/header-service-name-with-nav.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
{% block body %}

{{ header({
logo: {
href: "#"
},
service: {
name: "Digital service manual"
text: "Digital service manual",
href: "#"
},
search: {
visuallyHiddenLabel: "Search the NHS digital service manual"
Expand Down
9 changes: 7 additions & 2 deletions app/components/header/header-service-name.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Header with service name' %}
{% set title = 'Header transactional with service name' %}
{% from 'components/header/macro.njk' import header %}
{% extends 'layout.njk' %}

{% block body %}

{{ header({
logo: {
href: "#",
ariaLabel: "NHS homepage"
},
service: {
name: "Prototype kit"
text: "Find your NHS number",
href: "#"
}
}) }}

Expand Down
2 changes: 1 addition & 1 deletion app/pages/examples.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,9 +84,9 @@
<li><a href="../components/header/header-account-rbac.html">Header with account (logged in, RBAC)</a></li>
<li><a href="../components/header/header-logo.html">Header with logo only</a></li>
<li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
<li><a href="../components/header/header-service-name-combined-with-logo.html">Header with a service name combined with NHS logo</a></li>
<li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
<li><a href="../components/header/header-service-name-with-account-search-nav.html">Header with a service name, account, search and navigation</a></li>
<li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
<li><a href="../components/header/header-org.html">Header organisational</a></li>
<li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
<li><a href="../components/header/header-org-white-account.html">Header organisational with white header and account (logged in)</a></li>
Expand Down
65 changes: 34 additions & 31 deletions packages/components/header/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,22 +296,22 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen

---

### Header transactional with service name
### Header with service name

[Preview the header transactional with service name component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-transactional-service-name.html)
[Preview the header with service name component](https://nhsuk.github.io/nhsuk-frontend/components/header/header-service-name.html)

#### HTML markup

```HTML
<header class="nhsuk-header nhsuk-header__transactional" role="banner">
<header class="nhsuk-header" role="banner">
<div class="nhsuk-width-container nhsuk-header__container">
<div class="nhsuk-header__logo">
<a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
<svg class="nhsuk-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 16" height="40" width="100"><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"/></svg>
</a>
</div>
<div class="nhsuk-header__transactional-service-name">
<a class="nhsuk-header__transactional-service-name--link" href="https://www.nhs.uk/nhs-services/online-services/find-nhs-number/">Find your NHS number</a>
<div class="nhsuk-header__service-name">
<a class="nhsuk-header__service-name--link" href="https://www.nhs.uk/nhs-services/online-services/find-nhs-number/">Find your NHS number</a>
</div>
</div>
</header>
Expand All @@ -323,8 +323,8 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
{% from 'components/header/macro.njk' import header %}

{{ header({
"transactionalService": {
"name": "Find your NHS number",
"service": {
"text": "Find your NHS number",
"href": "https://www.nhs.uk/nhs-services/online-services/find-nhs-number/"
}
}) }}
Expand Down Expand Up @@ -672,29 +672,32 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen

The header Nunjucks macro takes the following arguments:

| Name | Type | Required | Description |
| ------------------------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| **homeHref** | string | No | The href of the link for the logo and mobile home link in the navigation links. Defaults to "/". |
| **ariaLabel** | string | No | Aria label for the logo href. Defaults to "NHS homepage". |
| **organisation** | object | No | Settings for header with organisational logo. |
| **organisation.name** | string | No | Organisation name value. |
| **organisation.split** | string | No | Longer organisation names can be split onto multiple lines. |
| **organisation.descriptor** | string | No | Organisation descriptor. |
| **organisation.logoURL** | string | No | Organisation logo if using a static asset, such as PNG, is preferred. |
| **primaryLinks** | array | No | Array of navigation links for use in the header. |
| **primaryLinks[].href** | string | No | The href of a navigation item in the header. |
| **primaryLinks[].text** | string | No | The link text of a navigation item in the header. |
| **primaryLinks[].current** | boolean | No | Set to true if this links to the current page being shown. |
| **primaryLinks[].active** | boolean | No | Set to true if the current page is within this section, but the link doesn’t necessarily link to the current page |
| **primaryLinks[].classes** | string | No | Optional additional classes to add to the list item. |
| **primaryLinks[].attributes** | string | No | Any extra HTML attributes (for example data attributes) to add to the list item. |
| **transactionalService** | object | No | Object containing the _name_ and _href_ of the transactional service. |
| **service** | object | No | Object containing the _name_ and optional boolean _longName_ of the service. Set this to "true" if the service name is longer than 22 characters. |
| **search** | object | No | Settings for the search input. |
| **search.action** | string | No | The search action endpoint. Defaults to <https://www.nhs.uk/search> |
| **search.name** | string | No | The name for the search field. Defaults to "q" |
| **search.visuallyHiddenLabel** | string | No | The label for the search field. Defaults to "Search the NHS website" |
| **classes** | string | No | Optional additional classes to add to the header container. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the header container. |
| Name | Type | Required | Description |
| ------------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **logo** | object | No | Object containing details of the logo |
| **logo.ariaLabel** | string | No | ARIA label for the logo. Defaults to "NHS homepage". |
| **logo.href** | string | No | The href of the link for the logo. Defaults to "/". |
| **logo.includeWithServiceLink** | boolean | No | If set to true, then the logo will be included within the same link as the service name, and the `href` for the service will be used. |
| **logo.src ** | string | No | Logo path, for custom organisation logos. |
| **service** | object | No | Object containing the name and href of the service. |
| **service.text** | string | No | Name of the service |
| **service.href** | string | No | URL path that the service name links to. Defaults to '/'. |
| **organisation** | object | No | Settings for header with organisational logo. |
| **organisation.name** | string | No | Organisation name value. |
| **organisation.split** | string | No | Longer organisation names can be split onto multiple lines. |
| **organisation.descriptor** | string | No | Organisation descriptor. |
| **primaryLinks** | array | No | Array of navigation links for use in the header. |
| **primaryLinks[].href** | string | No | The href of a navigation item in the header. |
| **primaryLinks[].text** | string | No | The link text of a navigation item in the header. |
| **primaryLinks[].current** | boolean | No | Set to true if this links to the current page being shown. |
| **primaryLinks[].active** | boolean | No | Set to true if the current page is within this section, but the link doesn’t necessarily link to the current page |
| **primaryLinks[].classes** | string | No | Optional additional classes to add to the list item. |
| **primaryLinks[].attributes** | string | No | Any extra HTML attributes (for example data attributes) to add to the list item. |
| **search** | object | No | Settings for the search input. |
| **search.action** | string | No | The search action endpoint. Defaults to <https://www.nhs.uk/search> |
| **search.name** | string | No | The name for the search field. Defaults to "q" |
| **search.visuallyHiddenLabel** | string | No | The label for the search field. Defaults to "Search the NHS website" |
| **classes** | string | No | Optional additional classes to add to the header container. Separate each class with a space. |
| **attributes** | object | No | Any extra HTML attributes (for example data attributes) to add to the header container. |

If you are using Nunjucks macros in production be aware that using `html` arguments, or ones ending with `html` can be a [security risk](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting). Read more about this in the [Nunjucks documentation](https://mozilla.github.io/nunjucks/api.html#user-defined-templates-warning).
12 changes: 6 additions & 6 deletions packages/components/header/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@
*/
.nhsuk-header__logo {
display: flex;
flex-grow: 999;
flex-grow: 0;
}

.nhsuk-header__transactional & {
flex-grow: 0;
}
.nhsuk-header__link--service .nhsuk-header__logo {
flex-grow: 999;
}

.nhsuk-header__link {
Expand All @@ -63,7 +63,7 @@
}

.nhsuk-header__link,
.nhsuk-header__transactional-service-name--link {
.nhsuk-header__service-name--link {
@include nhsuk-font(19, $line-height: 1.1);
@include nhsuk-link-style-header;
text-decoration: none;
Expand All @@ -74,7 +74,7 @@
}
}

.nhsuk-header__transactional-service-name {
.nhsuk-header__service-name {
align-items: center;
display: flex;
flex-grow: 1;
Expand Down
Loading
Loading