diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 0c336d808..85aba52b9 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -12,7 +12,16 @@ jobs:
- name: Install dependencies
run: npm install
-
+
+ - name: Sonar analysis
+ uses: sonarsource/sonarcloud-github-action@master
+ with:
+ projectBaseDir: .
+ env:
+ GITHUB_TOKEN: ${{ secrets.TOKEN_GITHUB }}
+ SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+ SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+
- name: Run linting
run: npm run lint
diff --git a/.prettierignore b/.prettierignore
index 9b6142ef4..390d36ab9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,6 @@
node_modules/*
dist/*
+.cache/*
tests/backstop/*
.github/*
coverage/*
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07f1ea996..f130c20aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,131 @@
# NHS.UK frontend Changelog
-## 7.0.1 - TBA
+## 8.2.0 - 12 June 2024
+
+:recycle: **Changes**
+
+- Align label bottom margins with fieldset legend bottom margins ([PR 946](https://github.com/nhsuk/nhsuk-frontend/pull/946))
+
+:wrench: **Fixes**
+
+- Change example link to hash ([PR 962](https://github.com/nhsuk/nhsuk-frontend/pull/962))
+- Adjust nested list spacing ([PR 961](https://github.com/nhsuk/nhsuk-frontend/pull/961))
+- Fix header navigation item alignment ([PR 054](https://github.com/nhsuk/nhsuk-frontend/pull/954))
+- Fix bug with inset text component requiring uppercase `html` argument ([Issue 950](https://github.com/nhsuk/nhsuk-frontend/issues/950))
+- Remove unused CSS from icon card component ([PR 943](https://github.com/nhsuk/nhsuk-frontend/pull/943))
+- Remove unused CSS from breadcrumbs component ([PR 943](https://github.com/nhsuk/nhsuk-frontend/pull/943))
+- Add `aria-hidden` to responsive labels in responsive tables, to avoid screen readers repeating them ([PR 942](https://github.com/nhsuk/nhsuk-frontend/pull/942))
+- Add `opacity: 1` to header search placeholder, to increase colour contrast on Firefox ([PR 939](https://github.com/nhsuk/nhsuk-frontend/pull/939))
+
+## 8.1.1 - 14 March 2024
+
+:wrench: **Fixes**
+
+- Fix alignment of copyright footer
+- Add missing/outdated backstop images
+- Don't limit input heights to `40px`, to prevent vertical overflow
+
+## 8.1.0 - 11 January 2024
+
+:wrench: **Fixes**
+
+- Updated header component unit tests ([PR 900](https://github.com/nhsuk/nhsuk-frontend/pull/900)).
+- Fixed bug where the header didn't align with the main width container ([PR 902](https://github.com/nhsuk/nhsuk-frontend/pull/902)). This fixes [Issue 901](https://github.com/nhsuk/nhsuk-frontend/issues/901)
+- Clicking the chevron image on a 'Primary Card (With Chevron)' card element now focuses the link ([PR 905](https://github.com/nhsuk/nhsuk-frontend/pull/905)).
+- Added font licensing guidance to the relevant package READMEs and updated the copyright guidance to include NHS England ([PR 915](https://github.com/nhsuk/nhsuk-frontend/pull/915)).
+
+:new: **New features**
+
+- Add and export new `initAll` method in `nhsuk.js`, and pass document by default, but allowing smaller DOM scopes to be passed. This allows new nhsuk-frontend JS components to be initialised after page load, such as in new pieces of DOM added by JavaScript.
+ - This fixes [issue 906](https://github.com/nhsuk/nhsuk-frontend/issues/906) where button elements added _after_ the page has loaded would not benefit from the button component's JS behaviours (double click prevention and space bar activation for links). ([PR 907](https://github.com/nhsuk/nhsuk-frontend/pull/907)).
+
+## 8.0.2 - 19 October 2023
+
+:wrench: **Fixes**
+
+- Resolves the bug of the drop down menu covering the main content of the page ([PR 898](https://github.com/nhsuk/nhsuk-frontend/pull/898)).
+
+## 8.0.1 - 02 October 2023
+
+:wrench: **Fixes**
+
+- Updated design examples for suffix and prefix, and added backstop regression images ([PR 826](https://github.com/nhsuk/nhsuk-frontend/pull/826)).
+- Fix focus padding for the search input ([PR 896](https://github.com/nhsuk/nhsuk-frontend/pull/896)).
+- Remove card component Javascript from documentation ([PR 891](https://github.com/nhsuk/nhsuk-frontend/pull/891)).
+
+## 8.0.0 - 28 September 2023
+
+:boom: **Breaking changes**
+
+- Updated header and footer to use the new styles and functionality to match the live nhs.uk site ([PR 881](https://github.com/nhsuk/nhsuk-frontend/pull/881))
+
+As well as changes to the styles, this added an example of a footer with it's links in columns, and removed the redundant example of "Header transactional". This also fixes the issue ([Issue 805](https://github.com/nhsuk/nhsuk-frontend/issues/805)).
+
+In the header variants, the menu toggle button has been replaced with a dropdown menu, that becomes visible when the screen width is below 768px (tablet width). The search toggle has been removed, and instead the search input automatically adjusts according to the screen width.
+
+Instead of having this:
+
+```
+// menu toggle
+
+
+
+ Close menu
+
+```
+
+You will now only need this:
+
+```
+
+
+
{{ card({
"href": "#",
+ "primary": "true",
"clickable": "true",
"heading": "Introduction to care and support",
"headingClasses": "nhsuk-heading-m",
@@ -26,28 +27,31 @@
{{ card({
"href": "#",
+ "primary": "true",
"clickable": "true",
"heading": "Help from social services and charities",
"headingClasses": "nhsuk-heading-m",
- "description": "Includes helplines, needs assessments, advocacy and reporting abuse"
+ "description": "Includes helplines, needs assessments, advocacy and reporting abuse."
}) }}
{{ card({
"href": "#",
+ "primary": "true",
"clickable": "true",
- "heading": "Money, work and benefits",
+ "heading": "Care services, equipment and care homes",
"headingClasses": "nhsuk-heading-m",
- "description": "How to pay for care and support, and where you can get help with costs"
+ "description": "Includes home adaptations, help at home from a carer, social care you can get for free and housing."
}) }}
{{ card({
"href": "#",
+ "primary": "true",
"clickable": "true",
- "heading": "Care after a hospital stay",
+ "heading": "Money, work and benefits",
"headingClasses": "nhsuk-heading-m",
- "description": "Includes hospital discharge and care and support afterwards"
+ "description": "How to pay for care and support, and where you can get help with costs"
}) }}
diff --git a/app/components/card/card-primary.njk b/app/components/card/card-primary.njk
new file mode 100644
index 000000000..02617d995
--- /dev/null
+++ b/app/components/card/card-primary.njk
@@ -0,0 +1,25 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - primary card (with chevron)' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+
+
+
+
+ {{ card({
+ "href": "#",
+ "primary": "true",
+ "clickable": "true",
+ "heading": "Introduction to care and support",
+ "headingClasses": "nhsuk-heading-m",
+ "description": "A quick guide for people who have care and support needs and their carers"
+ }) }}
+
+
+
+
+
+{% endblock %}
diff --git a/app/components/card/card-secondary.njk b/app/components/card/card-secondary.njk
new file mode 100644
index 000000000..be3ccd2c6
--- /dev/null
+++ b/app/components/card/card-secondary.njk
@@ -0,0 +1,29 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - secondary' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+
+
+
+
+
+
+ {{ card({
+ "href": "#",
+ "clickable": "true",
+ "secondary": "true",
+ "heading": "Urgent and emergency care services",
+ "headingClasses": "nhsuk-heading-m",
+ "description": "Services the NHS provides if you need urgent or emergency medical help"
+ }) }}
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/app/components/card/top-task-card.njk b/app/components/card/top-task-card.njk
new file mode 100644
index 000000000..702cb0b44
--- /dev/null
+++ b/app/components/card/top-task-card.njk
@@ -0,0 +1,28 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Card - Clickable card' %}
+{% from 'components/card/macro.njk' import card %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+
A quick guide for people who have care and support needs and their carers
+
```
@@ -59,6 +58,7 @@ Find out more about the card component and when to use it in the [NHS digital se
{{ card({
"href": "#",
+ "primary": "true",
"clickable": "true",
"heading": "Introduction to care and support",
"headingClasses": "nhsuk-heading-m",
@@ -66,6 +66,38 @@ Find out more about the card component and when to use it in the [NHS digital se
}) }}
```
+### Secondary card
+
+[Preview the secondary card component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-secondary.html)
+
+#### HTML markup
+
+```
+
Services the NHS provides if you need urgent or emergency medical help
+
+
+```
+
+#### Nunjucks macro
+
+```
+{% from 'components/card/macro.njk' import card %}
+
+ {{ card({
+ "href": "#",
+ "clickable": "true",
+ "secondary": "true",
+ "heading": "Urgent and emergency care services",
+ "headingClasses": "nhsuk-heading-m",
+ "description": "Services the NHS provides if you need urgent or emergency medical help"
+ }) }}
+```
+
### Card with an image
[Preview the card with an image component](https://nhsuk.github.io/nhsuk-frontend/components/card/card-with-image.html)
@@ -535,6 +567,8 @@ The card Nunjucks macro takes the following arguments:
| **href** | string | No | The value of the card href attribute |
| **clickable** | boolean | No | If set to true, then the class `nhsuk-card--clickable` will be applied. |
| **feature** | boolean | No | If set to true, then the class `nhsuk-card__heading--feature` and `nhsuk-card__content--feature` will be applied. |
+| **primary** | boolean | No | If set to true, then the class `nhsuk-card__content--primary` will be applied. |
+| **secondary** | boolean | No | If set to true, then the class `nhsuk-card--secondary` and `nhsuk-card__content--secondary` will be applied. |
| **type** | string | No | Care card component variant type - non-urgent, urgent or emergency |
| **imgURL** | string | No | The URL of the image in the card |
| **imgALT** | string | No | The alternative text of the image in the card |
diff --git a/packages/components/card/card.scss b/packages/components/card/card.scss
index a56958e90..aba21b2af 100644
--- a/packages/components/card/card.scss
+++ b/packages/components/card/card.scss
@@ -272,3 +272,41 @@ $card-border-hover-color: $color_nhsuk-grey-3;
}
}
}
+
+/* Card primary
+ ========================================================================== */
+
+.nhsuk-card__content--primary {
+ padding-right: 75px;
+
+ @include mq($from: desktop) {
+ height: 100%;
+ }
+
+ .nhsuk-icon {
+ display: block;
+ fill: $color_nhsuk-blue;
+ margin-top: -(nhsuk-spacing(2));
+ pointer-events: none;
+ position: absolute;
+ right: nhsuk-spacing(4);
+ top: 50%;
+ }
+}
+
+/* Card secondary
+ ========================================================================== */
+
+.nhsuk-card--secondary {
+ background: transparent;
+ border-bottom: $card-border-bottom-width solid $card-border-color;
+ border-left: 0;
+ border-right: 0;
+ border-top: 0;
+}
+
+.nhsuk-card__content--secondary {
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+}
diff --git a/packages/components/card/template.njk b/packages/components/card/template.njk
index 34d225259..76738678e 100644
--- a/packages/components/card/template.njk
+++ b/packages/components/card/template.njk
@@ -2,8 +2,10 @@
diff --git a/packages/components/character-count/character-count.js b/packages/components/character-count/character-count.js
index 6a4f19552..8a96b2344 100644
--- a/packages/components/character-count/character-count.js
+++ b/packages/components/character-count/character-count.js
@@ -248,8 +248,8 @@ CharacterCount.prototype.defaults = {
wordCountAttribute: 'data-maxwords'
}
-export default () => {
- const characterCounts = document.querySelectorAll('[data-module="nhsuk-character-count"]')
+export default ({ scope = document } = {}) => {
+ const characterCounts = scope.querySelectorAll('[data-module="nhsuk-character-count"]')
characterCounts.forEach((el) => {
new CharacterCount(el).init()
})
diff --git a/packages/components/checkboxes/checkboxes.js b/packages/components/checkboxes/checkboxes.js
index 39650acf5..6b3ecc197 100644
--- a/packages/components/checkboxes/checkboxes.js
+++ b/packages/components/checkboxes/checkboxes.js
@@ -54,9 +54,9 @@ const unCheckExclusiveInputs = function unCheckExclusiveInputs(input) {
syncAllConditionalReveals(input)
}
-export default () => {
+export default ({ scope = document } = {}) => {
// Checkbox input DOMElements inside a conditional form group
- const checkboxInputs = document.querySelectorAll('.nhsuk-checkboxes .nhsuk-checkboxes__input')
+ const checkboxInputs = scope.querySelectorAll('.nhsuk-checkboxes .nhsuk-checkboxes__input')
/**
* Toggle classes and attributes
diff --git a/packages/components/contents-list/README.md b/packages/components/contents-list/README.md
index b8bc0e86f..79b637eab 100644
--- a/packages/components/contents-list/README.md
+++ b/packages/components/contents-list/README.md
@@ -41,26 +41,26 @@ Find out more about the contents list component and when to use it in the [NHS d
{{ contentsList({
items: [
{
- href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/",
+ href: "#",
text: "What is AMD?",
current: "true"
},
{
- href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/",
+ href: "#",
text: "Symptoms"
},
{
- href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/",
+ href: "#",
text: "Getting diagnosed"
}
,
{
- href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/",
+ href: "#",
text: "Treatments"
}
,
{
- href: "https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/",
+ href: "#",
text: "Living with AMD"
}
]
diff --git a/packages/components/details/details.js b/packages/components/details/details.js
index 09c5fe196..70cd993e5 100644
--- a/packages/components/details/details.js
+++ b/packages/components/details/details.js
@@ -5,7 +5,7 @@ import { toggleAttribute } from '../../common'
* Test at http://0.0.0.0:3000/components/details/index.html
*/
-export default () => {
+export default ({ scope = document } = {}) => {
// Does the browser support details component
const nativeSupport = typeof document.createElement('details').open === 'boolean'
if (nativeSupport) {
@@ -13,7 +13,7 @@ export default () => {
}
// Nodelist of all details elements
- const allDetails = document.querySelectorAll('details')
+ const allDetails = scope.querySelectorAll('details')
/**
* Adds all necessary functionality to a details element
@@ -28,11 +28,11 @@ export default () => {
if (!element.id) element.setAttribute('id', `nhsuk-details${index}`)
// Set content element and give it an ID if it doesn't already have one
- const content = document.querySelector(`#${element.id} .nhsuk-details__text`)
+ const content = scope.querySelector(`#${element.id} .nhsuk-details__text`)
if (!content.id) content.setAttribute('id', `nhsuk-details__text${index}`)
// Set summary element
- const summary = document.querySelector(`#${element.id} .nhsuk-details__summary`)
+ const summary = scope.querySelector(`#${element.id} .nhsuk-details__summary`)
// Set initial summary aria attributes
summary.setAttribute('role', 'button')
diff --git a/packages/components/error-summary/error-summary.js b/packages/components/error-summary/error-summary.js
index 35a584152..2c797c26a 100644
--- a/packages/components/error-summary/error-summary.js
+++ b/packages/components/error-summary/error-summary.js
@@ -101,9 +101,9 @@ function handleClick(event) {
}
}
-export default ({ focusOnPageLoad = true } = {}) => {
+export default ({ focusOnPageLoad = true, scope = document } = {}) => {
// Error summary component
- const errorSummary = document.querySelector('.nhsuk-error-summary')
+ const errorSummary = scope.querySelector('.nhsuk-error-summary')
if (errorSummary) {
// Focus error summary component if it exists
diff --git a/packages/components/footer/README.md b/packages/components/footer/README.md
index 2def8048c..34e016729 100644
--- a/packages/components/footer/README.md
+++ b/packages/components/footer/README.md
@@ -4,27 +4,43 @@
Find out more about the footer component and when to use it in the [NHS digital service manual](https://service-manual.nhs.uk/design-system/components/footer).
+Your copyright statement must reflect the ownership of your website or service. The NHS website is (c) Crown copyright but the NHS generally does not have Crown status.
+
## Quick start examples
-### Footer
+### Footer (default)
-[Preview the footer component](https://nhsuk.github.io/nhsuk-frontend/components/footer/index.html)
+[Preview the footer (default) component](https://nhsuk.github.io/nhsuk-frontend/components/footer/index.html)
#### HTML markup
```html
{# close nhsuk-footer-container #}
diff --git a/packages/components/header/README.md b/packages/components/header/README.md
index 36719bc1f..c97db6fa6 100644
--- a/packages/components/header/README.md
+++ b/packages/components/header/README.md
@@ -11,9 +11,9 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen
## Quick start examples
-### Header
+### Header (default)
-[Preview the header component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html)
+[Preview the header (default) component](https://nhsuk.github.io/nhsuk-frontend/components/header/index.html)
#### HTML markup
@@ -22,107 +22,83 @@ compiled JavaScript for all components `nhsuk.min.js` or the individual componen