update to frontend v8

nhsuk · Sep 11, 2024 · 0ee536f · 0ee536f
1 parent 9cd8b97
commit 0ee536f
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Wagtail NHS.UK frontend
 
-A wagtail implementation of the [NHS frontend v6.2.0](https://github.com/nhsuk/nhsuk-frontend) standard components.
+A wagtail implementation of the [NHS frontend v8.1.0](https://github.com/nhsuk/nhsuk-frontend) standard components.
 
 ## Installation
 

diff --git a/testapp/testapp/templates/base.html b/testapp/testapp/templates/base.html
@@ -40,6 +40,7 @@
     </head>
 
     <body class="{% block body_class %}{% endblock %}">
+        <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
         {% wagtailuserbar %}
 
         {% include "wagtailnhsukfrontend/skip_link.html" %}

diff --git a/wagtailnhsukfrontend/static/wagtailnhsukfrontend/css/nhsuk.min.css b/wagtailnhsukfrontend/static/wagtailnhsukfrontend/css/nhsuk.min.css
diff --git a/wagtailnhsukfrontend/static/wagtailnhsukfrontend/js/nhsuk.min.js b/wagtailnhsukfrontend/static/wagtailnhsukfrontend/js/nhsuk.min.js
diff --git a/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/breadcrumb_back.html b/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/breadcrumb_back.html
@@ -1,3 +1,6 @@
 {% load wagtailcore_tags %}
 
-<a href="{% pageurl page %}" class="nhsuk-breadcrumb__backlink">Back to {{ page.title }}</a>
+<a href="{% pageurl page %}" class="nhsuk-breadcrumb__backlink">
+  <span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
+  {{ page.title }}
+</a>
diff --git a/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/footer.html b/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/footer.html
@@ -1,13 +1,24 @@
 <footer role="contentinfo">
-  <div class="nhsuk-footer" id="nhsuk-footer">
+  <div class="nhsuk-footer-container">
     <div class="nhsuk-width-container">
       <h2 class="nhsuk-u-visually-hidden">Support links</h2>
-      <ul class="nhsuk-footer__list">
-      {% for item in primary_links %}
-        {% include './footer_link.html' %}
-      {% endfor %}
-      </ul>
+      <div class="nhsuk-footer">
+        {% for column in footer_columns %}
+          {% if column.column_title %}
+          <h4 class="nhsuk-u-visually-hidden">
+            {{ column.column_title }}
+          </h4>
+          {% endif %}
+          <ul class="nhsuk-footer__list">
+            {% for link in column.links %}
+              {% include './footer_link.html' %}
+            {% endfor %}
+          </ul>
+        {% endfor %}
+    </div>
+    <div>
       <p class="nhsuk-footer__copyright">&copy; Crown copyright</p>
     </div>
   </div>
-</footer>
+</div>
+</footer>
diff --git a/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/footer_link.html b/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/footer_link.html
@@ -1 +1,5 @@
-<li class="nhsuk-footer__list-item"><a class="nhsuk-footer__list-item-link" href="{{ item.url }}">{{ item.label }}</a></li>
+<li class="nhsuk-footer__list-item">
+  <a class="nhsuk-footer__list-item-link" href="{{ link.url }}">
+    {{ link.label }}
+  </a>
+</li>
diff --git a/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header.html b/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header.html
@@ -1,19 +1,13 @@
 <header class="nhsuk-header{% if transactional %} nhsuk-header--transactional{% endif %}{% if organisation_name %} nhsuk-header--organisation{% if organisation_white %} nhsuk-header--white{% endif %}{% endif %}" role="banner">
-  <div class="nhsuk-width-container nhsuk-header__container">
+  <div class="nhsuk-header__container">
     {% include 'wagtailnhsukfrontend/header/logo.html' %}
-
     {% if not primary_links and not show_search %}
       {% if service_name and transactional and not organisation_name %}
         <div class="nhsuk-header__transactional-service-name{% if service_long_name %} nhsuk-header__transactional-service-name--long {% endif %}">
           <a class="nhsuk-header__transactional-service-name--link" href="{{ service_href|default:"/" }}">{{ service_name }}</a>
         </div>
       {% endif %}
     {% else %}
-      <div class="nhsuk-header__content" id="content-header">
-        {% if primary_links %}
-          {% include 'wagtailnhsukfrontend/header/menu_toggle.html' %}
-        {% endif %}
-
         {% if show_search %}
           {% include 'wagtailnhsukfrontend/header/search.html' %}
         {% endif %}
@@ -22,7 +16,7 @@
 
   </div>
 
-  {% if primary_links %}
-    {% include 'wagtailnhsukfrontend/header/menu.html' %}
-  {% endif %}
-</header>
+ {% if primary_links %} 
+  {% include 'wagtailnhsukfrontend/header/menu.html' %} 
+{% endif %} 
+</header>
diff --git a/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header/menu.html b/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header/menu.html
@@ -1,25 +1,28 @@
-<nav class="nhsuk-header__navigation" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
-  <div class="nhsuk-width-container">
-    <p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
-      <button class="nhsuk-header__navigation-close" id="close-menu">
-        <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" height="27" width="27">
-          <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-        </svg>
-        <span class="nhsuk-u-visually-hidden">Close menu</span>
-      </button>
-    </p>
+<div class="nhsuk-navigation-container {% if organisation_white %} nhsuk-header--white{% endif %}">
+  <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
     <ul class="nhsuk-header__navigation-list">
-      <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--for-mobile">
-        <a class="nhsuk-header__navigation-link" href="{{ logo_href|default:"/" }}" >
+      {% for item in primary_links %}
+      <li class="nhsuk-header__navigation-item">
+        <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
+          {{item.label}}
+          {# % include 'wagtailnhsukfrontend/header/menu_link.html' % #}
+        </a>
+      </li>
+      {% endfor %}
+      <li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
+        <a class="nhsuk-header__navigation-link"  href="{{ logo_href|default:"/">
           Home
-          <svg class="nhsuk-icon nhsuk-icon__chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" height="34" width="34">
+        </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>
-        </a>
+        </button>
       </li>
-      {% for item in primary_links %}
-        {% include 'wagtailnhsukfrontend/header/menu_link.html' %}
-      {% endfor %}
     </ul>
-  </div>
-</nav>
+  </nav>
+</div>
diff --git a/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header/search.html b/wagtailnhsukfrontend/templates/wagtailnhsukfrontend/header/search.html
@@ -1,26 +1,15 @@
-<div class="nhsuk-header__search">
-  <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
-    <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
-      <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>
-  <div class="nhsuk-header__search-wrap" id="wrap-search">
-    <form class="nhsuk-header__search-form" id="search" action="{{ search_action|default:"/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="{{ search_field_name|default:"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" width="27" height="27">
-          <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>
-      <button class="nhsuk-search__close" id="close-search">
-        <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" height="27" width="27">
-          <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
-        </svg>
-        <span class="nhsuk-u-visually-hidden">Close search</span>
-      </button>
-    </form>
-  </div>
-</div>
+<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="{{ search_action|default:"/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="{{ search_field_name|default:"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>