Merge pull request #277 from nhsuk/update-to-frontend-8.1.0

Update to 8.1.0
nhsuk · Feb 22, 2024 · f029232 · f029232
2 parents f3096ef + 0d8add7
commit f029232
Show file tree

Hide file tree

Showing 11 changed files with 126 additions and 77 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,15 +1,17 @@
 # NHS.UK prototype kit Changelog
 
-## TBC
+## 4.10.0 - 22 February 2024
 
 :wrench: Fixes
 
-- Add aria-label to coronavirus hub page navigation links
-- Add aria-label to mental health page navigation links
+- Add aria-labels to coronavirus hub page and mental health pagenavigation links
 - Removed the duplicate selector in '\_related-nav.scss'
+- Removed Covid banner from 'Social care and support guide' and 'NHS Services' templates 
 - Use 'String#startsWith' method instead of getting the index of a substring in utils.js
 - Change unexpected var for const in gulpfile.js
-- Upgrade node version to v20 (nunjucks v3.2.4, gulp-rename v3.2.4, gulp-sass v3.2.4, keypather v3.2.4, express v4.18.2, express-session v1.17.3)
+- Update 'Social care and support guide' template to use primary cards with chevrons
+- Upgrade node version to v20
+- Update NHS.UK frontend to [v8.1.0](https://github.com/nhsuk/nhsuk-frontend/releases/tag/v8.1.0), includes updates to header and footer components
 
 ## 4.9.0 - 1 June 2023
 

diff --git a/docs/views/layout.html b/docs/views/layout.html
@@ -52,7 +52,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </li>
  </ul>
  <div>
- <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
+ <p class="nhsuk-footer__copyright">&copy; NHS England</p>
  </div>
  </div>
  </div>

diff --git a/docs/views/templates/nhsuk-coronavirus-hub.html b/docs/views/templates/nhsuk-coronavirus-hub.html
@@ -550,7 +550,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div> 

diff --git a/docs/views/templates/nhsuk-healthaz.html b/docs/views/templates/nhsuk-healthaz.html
@@ -4190,7 +4190,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div> 

diff --git a/docs/views/templates/nhsuk-livewell.html b/docs/views/templates/nhsuk-livewell.html
@@ -404,7 +404,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div> 

diff --git a/docs/views/templates/nhsuk-mentalhealth.html b/docs/views/templates/nhsuk-mentalhealth.html
@@ -403,7 +403,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div> 

diff --git a/docs/views/templates/nhsuk-nhs-services.html b/docs/views/templates/nhsuk-nhs-services.html
@@ -96,21 +96,6 @@
 {% endblock %}
 
 {% block beforeContent %}
-<!-- Coronavirus (COVID-19) banner -->
-<div class="app-global-alert" id="app-global-alert" role="complementary">
- <div class="nhsuk-width-container">
- <div class="nhsuk-grid-row">
- <div class="nhsuk-grid-column-full">
- <div class="app-global-alert__content">
- <div class="app-global-alert__message">
- <h2>Coronavirus (COVID-19)</h2>
- <p><a href="">Get the latest advice about COVID-19</a></p>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
 <!-- Breadcrumbs -->
 <nav class="nhsuk-breadcrumb beta-breadcrumb" aria-label="Breadcrumb">
  <div class="nhsuk-width-container">
@@ -462,7 +447,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div> 

diff --git a/docs/views/templates/nhsuk-pregnancy.html b/docs/views/templates/nhsuk-pregnancy.html
@@ -390,7 +390,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div> 

diff --git a/docs/views/templates/nhsuk-socialcare.html b/docs/views/templates/nhsuk-socialcare.html
@@ -93,21 +93,6 @@
 {% endblock %}
 
 {% block beforeContent %}
-<!-- Coronavirus (COVID-19) banner -->
-<div class="app-global-alert" id="app-global-alert" role="complementary">
- <div class="nhsuk-width-container">
- <div class="nhsuk-grid-row">
- <div class="nhsuk-grid-column-full">
- <div class="app-global-alert__content">
- <div class="app-global-alert__message">
- <h2>Coronavirus (COVID-19)</h2>
- <p><a href="">Get the latest advice about COVID-19</a></p>
- </div>
- </div>
- </div>
- </div>
- </div>
-</div>
 <!-- Breadcrumbs -->
 <nav class="nhsuk-breadcrumb" aria-label="Breadcrumb">
  <div class="nhsuk-width-container">
@@ -141,144 +126,221 @@ <h1>Social care and support guide</h1>
 
 
  <!-- Introduction to care and support -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Introduction to care and support
  </a>
  </h2>
  <p class="nhsuk-card__description">A quick guide for people who have care and support needs and their carers.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
 
 
  <!-- Help from social services and charities -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Help from social services and charities
  </a>
  </h2>
  <p class="nhsuk-card__description">Includes helplines, needs assessments, advocacy and reporting abuse.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
 
 
  <!-- Care services, equipment and care homes -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Care services, equipment and care homes
  </a>
  </h2>
  <p class="nhsuk-card__description">Includes home adaptations, help at home from a paid carer, staying safe and housing.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
- </ul>
-
- <ul class="nhsuk-grid-row nhsuk-card-group">
 
 
  <!-- Money, work and benefits -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Money, work and benefits
  </a>
  </h2>
  <p class="nhsuk-card__description">How to pay for care and support, and where you can get help with costs.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
 
 
  <!-- Care after a hospital stay -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Care after a hospital stay
  </a>
  </h2>
  <p class="nhsuk-card__description">Includes hospital discharge and care and support afterwards.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
 
 
  <!-- Support and benefits for carers -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Support and benefits for carers
  </a>
  </h2>
  <p class="nhsuk-card__description">Includes carer&#x27;s assessments, support from local councils, respite care and help for young carers.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
- </ul>
-
- <ul class="nhsuk-grid-row nhsuk-card-group">
 
 
  <!-- Practical tips if you care for someone -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Practical tips if you care for someone
  </a>
  </h2>
  <p class="nhsuk-card__description">Includes advice on challenging behaviour, moving and lifting people and medicines.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
 
 
  <!-- Caring for children and young people -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Caring for children and young people
  </a>
  </h2>
  <p class="nhsuk-card__description">Services, support and tips if you care for someone under 21, and moving to adult social services.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
 
 
  <!-- Sexual health -->
- <li class="nhsuk-grid-column-one-third nhsuk-card-group__item">
+ <li class="nhsuk-grid-column-one-half nhsuk-card-group__item">
  <div class="nhsuk-card nhsuk-card--clickable">
- <div class="nhsuk-card__content">
+ <div class="nhsuk-card__content nhsuk-card__content--primary">
  <h2 class="nhsuk-card__heading nhsuk-heading-m">
  <a class="nhsuk-card__link" href="">
  Making decisions for someone else
  </a>
  </h2>
  <p class="nhsuk-card__description">Includes powers of attorney and mental capacity.</p>
+
+ <svg class="nhsuk-icon nhsuk-icon nhsuk-icon__chevron-right-circle" xmlns="http://www.w3.org/2000/svg" width="27" height="27" aria-hidden="true" focusable="false">
+ <circle cx="13.333" cy="13.333" r="13.333" fill="" />
+ <g data-name="Group 1" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2.667">
+ <path d="M15.438 13l-3.771 3.771" />
+ <path data-name="Path" d="M11.667 9.229L15.438 13" />
+ </g>
+ </svg>
+
  </div>
  </div>
  </li>
+
+
  </ul>
  </article>
 
@@ -330,7 +392,7 @@ <h2 class="nhsuk-u-visually-hidden">Support links</h2>
  </ul>
  </div> 
  <div>
- <p class="nhsuk-footer__copyright">© Crown copyright</p>
+ <p class="nhsuk-footer__copyright">© NHS England</p>
  </div>
  </div> 
  </div>