Skip to content

Commit

Permalink
Merge branch 'main' into split-up-test-jobs
Browse files Browse the repository at this point in the history
  • Loading branch information
frankieroberto authored Nov 7, 2024
2 parents 13d900f + bff8434 commit da34752
Show file tree
Hide file tree
Showing 23 changed files with 556 additions and 44 deletions.
7 changes: 6 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
# NHS.UK frontend Changelog

## Unreleased
## 9.1.0 - 4 November 2024

:new: **New features**

- Add task list component ([PR 969](https://github.com/nhsuk/nhsuk-frontend/pull/969))

:wrench: **Fixes**

- Fix navigation items not flowing into the overflow drop-down menu on desktop ([PR 1062](https://github.com/nhsuk/nhsuk-frontend/pull/1062))
- 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))

Expand Down
81 changes: 81 additions & 0 deletions app/components/task-list/index.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Task list' %}
{% from 'components/task-list/macro.njk' import taskList %}
{% extends 'layout.njk' %}

{% block body %}

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
{{ taskList({
idPrefix: "your-health",
items: [
{
title: {
text: "Exercise"
},
href: "#",
status: {
text: "Completed",
classes: "nhsuk-task-list__status--completed"
}
},
{
title: {
text: "Personal health"
},
href: "#",
status: {
text: "Completed",
classes: "nhsuk-task-list__status--completed"
}
},
{
title: {
text: "Family health history"
},
hint: {
text: "Details of your parents and siblings"
},
href: "#",
status: {
tag: {
text: "Incomplete",
classes: "nhsuk-tag--blue"
}
}
},
{
title: {
text: "Smoking history"
},
href: "#",
status: {
tag: {
text: "Incomplete",
classes: "nhsuk-tag--blue"
}
}
},
{
title: {
text: "Blood test"
},
status: {
text: "Cannot start yet",
classes: "nhsuk-task-list__status--cannot-start-yet"
}
}
]
}) }}

</div>
</div>

</main>
</div>

{% endblock %}
118 changes: 118 additions & 0 deletions app/components/task-list/multiple-sections.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
{% set html_style = 'background-color: #f0f4f5;' %}
{% set title = 'Task list' %}
{% from 'components/task-list/macro.njk' import taskList %}
{% from 'components/button/macro.njk' import button %}
{% extends 'layout.njk' %}

{% block body %}

<div class="nhsuk-width-container">
<main class="nhsuk-main-wrapper" id="maincontent">

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<h1 class="nhsuk-heading-l">Service name</h1>

<h2 class="nhsuk-heading-m">Check before you start</h2>
{{ taskList({
idPrefix: "before-you-start",
items: [
{
title: {
text: "Check eligibility"
},
href: "#",
status: {
text: "Completed",
classes: "nhsuk-task-list__status--completed"
}
},
{
title: {
text: "Read declaration"
},
href: "#",
status: {
tag: {
text: "Incomplete",
classes: "nhsuk-tag--blue"
}
}
}
]
}) }}

<h2 class="nhsuk-heading-m">Prepare application</h2>

{{ taskList({
idPrefix: "your-health",
items: [
{
title: {
text: "Exercise"
},
href: "#",
status: {
text: "Completed",
classes: "nhsuk-task-list__status--completed"
}
},
{
title: {
text: "Personal health"
},
href: "#",
status: {
text: "Completed",
classes: "nhsuk-task-list__status--completed"
}
},
{
title: {
text: "Family health history"
},
hint: {
text: "Details of your parents and siblings"
},
href: "#",
status: {
tag: {
text: "Incomplete",
classes: "nhsuk-tag--blue"
}
}
},
{
title: {
text: "Smoking history"
},
href: "#",
status: {
tag: {
text: "Incomplete",
classes: "nhsuk-tag--blue"
}
}
},
{
title: {
text: "Blood test"
},
status: {
text: "Cannot start yet",
classes: "nhsuk-task-list__status--cannot-start-yet"
}
}
]
}) }}

{{ button({
text: "Continue"
}) }}
</div>
</div>

</main>
</div>

{% endblock %}
2 changes: 2 additions & 0 deletions app/pages/examples.njk
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@
<li><a href="../components/tables/tables-panel.html">Table as a panel</a></li>
<li><a href="../components/tabs/index.html">Tabs</a> <strong class="nhsuk-tag nhsuk-tag--yellow">Experimental</strong></li>
<li><a href="../components/tag/index.html">Tag</a></li>
<li><a href="../components/task-list/index.html">Task list</a></li>
<li><a href="../components/task-list/multiple-sections.html">Task list with multiple sections</a></li>
<li><a href="../components/textarea/index.html">Textarea</a></li>
<li><a href="../components/textarea/autocomplete.html">Textarea with autocomplete attribute</a></li>
<li><a href="../components/textarea/error.html">Textarea with error message</a></li>
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nhsuk-frontend",
"version": "9.0.1",
"version": "9.1.0",
"description": "NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services.",
"engines": {
"node": ">=20.0.0"
Expand Down
16 changes: 3 additions & 13 deletions packages/components/header/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -412,10 +412,6 @@
padding-right: 23px;
}

@include mq($from: desktop) {
display: none;
}

.nhsuk-icon__chevron-down {
right: -3px;
}
Expand Down Expand Up @@ -498,19 +494,13 @@
left: 0;

.nhsuk-header__navigation-link {
color: $color_nhsuk-blue;
padding: 12px nhsuk-spacing(3);
@include govuk-width-container;
@include nhsuk-link-style-no-visited-state;
padding: 12px 0;
}

.nhsuk-header__navigation-item {
border-top: 1px solid $color_nhsuk-grey-5;
margin-bottom: 0;

@include mq($from: large-desktop) {
border-top: 0;
margin: 0;
text-align: center;
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/components/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ class Header {
*/

updateNavigation() {
const availableSpace = this.navigation.offsetWidth
const availableSpace = this.navigationList.offsetWidth
let itemsVisible = this.navigationList.children.length

if (availableSpace < this.breakpoints[itemsVisible - 1]) {
Expand Down
Loading

0 comments on commit da34752

Please sign in to comment.