Bump nhsuk-frontend version v9.2.0 (#241)

Bump nhsuk frontend version
nhsuk · Feb 14, 2025 · 5d7a2b2 · 5d7a2b2
1 parent eecc363
commit 5d7a2b2
Show file tree

Hide file tree

Showing 17 changed files with 90 additions and 88 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -21,7 +21,8 @@ const nunjucksEnv = nunjucks.configure([
   'docs/assets',
 
   // NHS.UK frontend components
-  'node_modules/nhsuk-frontend/packages/components'
+  'node_modules/nhsuk-frontend/packages/components',
+  'node_modules/nhsuk-frontend/packages/macros'
 ])
 
 export default function (eleventyConfig) {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,48 +1,38 @@
 # NHS App Frontend Changelog
 
-## 0.1.0-alpha.0 (Prerelease) - 18 April 2024
-
-:tada: **Initial release of the NHS App Frontend**
+## `v3.0.0` - UNRELEASED
 
-## `v1.0.0` release of the NHS App Frontend package.
-
-A collection of HTML, CSS, Nunjucks templates and guidance for the NHS App. Built on top of the [nhsuk-frontend](https://github.com/nhsuk/nhsuk-frontend) styles.
-
-### Components and styles
+### Breaking changes
 
-- Badge
-- Bottom navigation (native)
-- Card links
-- Section heading
-- Tag
-- Timeline
-- Top Navigation (native)
+- Bumped `nhsuk-frontend` version to `v9.2.0` ([PR 241](https://github.com/nhsuk/nhsapp-frontend/pull/241)) - details are in the [nhsuk frontend release notes](https://github.com/nhsuk/nhsuk-frontend/releases)
+- Bumped `nhsuk-frontend` peer dependency version to `v9.0.0`
 
-## `v1.1.0`
+### Components
 
-Minor updates to guidance
+- Updated [Badge](https://design-system.nhsapp.service.nhs.uk/components/badge/) - removing small blue variant
 
-### Components and styles
+## `v2.3.0`
 
-- Summary list now supports a two column display on mobile
+### Fixes
 
-## `v1.2.0`
+- Icons now use `rem` sizing to ensure consitency in different contexts
 
-### Components and styles
+### Components
 
-- Button enhancements. Extending the `nhsuk-frontend` button styling to support default full width buttons on mobile.
+- New [Seconday Button](https://design-system.nhsapp.service.nhs.uk/components/buttons/) styling added
+- New [Confirmation Panel](https://design-system.nhsapp.service.nhs.uk/components/panel/) component
 
-## `v2.0.1`
+## `v2.2.0`
 
 ### Fixes
 
-Create symlink to `docs/_includes` so that the docs can include anything in `src`
-
-### Breaking changes
+- Badge count now displaying correctly when value is 1
+- Cards in combination with a section heading spacing now fixed
+- Added missing card param to Nunjucks macro `linkAriaLabel`
 
-Prefixed all Nunjucks macros with `nhsapp`.
+### Styles
 
-> ~~`card`~~ > `nhsappCard`
+New icons added. [See full commit](https://github.com/nhsuk/nhsapp-frontend/commit/201556e91df539d9ec6dce4eda50a0f478ed3b05) for list of icons.
 
 ## `v2.1.0`
 
@@ -57,31 +47,46 @@ Card link with badge accessibility fix. Added option to provide `aria-hidden` to
 - The card component now supports a footer section. The guidance for this will be coming very soon after this release
 - The card component now supports a "read only" view. The chevron icon is hidden and the title is no longer a link
 
-## `v2.2.0`
+## `v2.0.1`
 
 ### Fixes
 
-- Badge count now displaying correctly when value is 1
-- Cards in combination with a section heading spacing now fixed
-- Added missing card param to Nunjucks macro `linkAriaLabel`
+Create symlink to `docs/_includes` so that the docs can include anything in `src`
 
-### Styles
+### Breaking changes
 
-New icons added. [See full commit](https://github.com/nhsuk/nhsapp-frontend/commit/201556e91df539d9ec6dce4eda50a0f478ed3b05) for list of icons.
+Prefixed all Nunjucks macros with `nhsapp`.
 
-## `v2.3.0`
+> ~~`card`~~ > `nhsappCard`
 
-### Fixes
+## `v1.2.0`
 
-- Icons now use `rem` sizing to ensure consitency in different contexts
+### Components and styles
 
-### Components
+- Button enhancements. Extending the `nhsuk-frontend` button styling to support default full width buttons on mobile.
 
-- New [Seconday Button](https://design-system.nhsapp.service.nhs.uk/components/buttons/) styling added
-- New [Confirmation Panel](https://design-system.nhsapp.service.nhs.uk/components/panel/) component
+## `v1.1.0`
 
-## `v2.4.0` - UNRELEASED
+Minor updates to guidance
 
-### Components
+### Components and styles
 
-- Updated [Badge](https://design-system.nhsapp.service.nhs.uk/components/badge/) - removing small blue variant
+- Summary list now supports a two column display on mobile
+
+## `v1.0.0` release of the NHS App Frontend package.
+
+A collection of HTML, CSS, Nunjucks templates and guidance for the NHS App. Built on top of the [nhsuk-frontend](https://github.com/nhsuk/nhsuk-frontend) styles.
+
+### Components and styles
+
+- Badge
+- Bottom navigation (native)
+- Card links
+- Section heading
+- Tag
+- Timeline
+- Top Navigation (native)
+
+## 0.1.0-alpha.0 (Prerelease) - 18 April 2024
+
+:tada: **Initial release of the NHS App Frontend**
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -3,6 +3,7 @@
 {% from 'breadcrumb/macro.njk' import breadcrumb %}
 {% from 'skip-link/macro.njk' import skipLink %}
 {% from "icon/macro.njk" import nhsappIcon %}
+{% from 'attributes.njk' import nhsukAttributes %}
 
 <!DOCTYPE html>
 <html lang="en" {% if htmlClasses %} class="{{ htmlClasses }}"{% endif %}>
@@ -76,12 +77,10 @@
         }}
       {% endblock %}
 
-      {% block breadcrumb %}
-      {% endblock %}
-
       {% block container %}
         <div class="nhsuk-width-container{% if containerClasses %} {{ containerClasses }}{% endif %}">
-          <main role="main" id="maincontent" class="nhsuk-main-wrapper{% if mainClasses %} {{ mainClasses }}{% endif %}">
+          {% block beforeContent %}{% endblock %}
+          <main role="main" id="maincontent" class="nhsuk-main-wrapper {% if mainClasses %} {{ mainClasses }}{% endif %}">
             {% block main %}
               {{ content | safe }}
             {% endblock main %}

diff --git a/docs/_includes/layouts/community.njk b/docs/_includes/layouts/community.njk
@@ -2,7 +2,7 @@
 
 {%- from "./partials/side-navigation.njk" import appSideNavigation %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {% if title === "Community" %}
     {{ breadcrumb({
       href: "/",

diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk
@@ -2,7 +2,7 @@
 
 {%- from "./partials/side-navigation.njk" import appSideNavigation %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {% if title === "Components" %}
     {{ breadcrumb({
       href: "/",

diff --git a/docs/_includes/layouts/example-full-page-mobile-not-logged-in.njk b/docs/_includes/layouts/example-full-page-mobile-not-logged-in.njk
@@ -3,7 +3,6 @@
 {% block skiplink %}{% endblock %}
 
 {% set htmlClasses = "app-html-background-color-grey-5" %}
-{% set mainClasses = "nhsuk-main-wrapper--s" %}
 
 {% block header %}
   {% include "layouts/partials/header-native.njk" %}

diff --git a/docs/_includes/layouts/example-full-page-web.njk b/docs/_includes/layouts/example-full-page-web.njk
@@ -1,7 +1,5 @@
 {% extends "./base.njk" %}
 
-{% set mainClasses = "nhsuk-main-wrapper--s" %}
-
 {% block header %}
   {% include "layouts/partials/header-web.njk" %}
 {% endblock %}

diff --git a/docs/_includes/layouts/get-started.njk b/docs/_includes/layouts/get-started.njk
@@ -2,7 +2,7 @@
 
 {%- from "./partials/side-navigation.njk" import appSideNavigation %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {% if title === "Get started" %}
     {{ breadcrumb({
       href: "/",

diff --git a/docs/_includes/layouts/pattern.njk b/docs/_includes/layouts/pattern.njk
@@ -2,7 +2,7 @@
 
 {%- from "./partials/side-navigation.njk" import appSideNavigation %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {% if title === "Patterns" %}
     {{ breadcrumb({
       href: "/",

diff --git a/docs/_includes/layouts/plain.njk b/docs/_includes/layouts/plain.njk
@@ -1,6 +1,6 @@
 {% extends "./base.njk" %}
 
-{% block breadcrumb %}
+{% block beforeContent %}
   {{ breadcrumb({
     href: "/",
     text: "Home"

diff --git a/docs/_includes/layouts/sidebar.njk b/docs/_includes/layouts/sidebar.njk
@@ -2,6 +2,7 @@
 
 {% block container %}
   <div class="nhsuk-width-container">
+    {% block beforeContent %}{% endblock %}
     <div class="nhsuk-grid-row">
       <div class="nhsuk-grid-column-one-quarter">
         {% block sidebar_desktop %}
@@ -12,7 +13,7 @@
       </div>
 
       <div class="nhsuk-grid-column-three-quarters">
-        <main role="main" id="maincontent" class="nhsuk-main-wrapper app-content">
+        <main role="main" id="maincontent" class="nhsuk-main-wrapper nhsuk-main-wrapper--s app-content">
           {% block main %}
             {{ content | safe }}
           {% endblock main %}

diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
@@ -63,15 +63,6 @@ pre {
   }
 }
 
-// Frontend button colour overrides
-.nhsuk-button--reverse {
-  color: $color_nhsuk-black;
-
-  &:visited {
-    color: $color_nhsuk-black;
-  }
-}
-
 // Home page section
 .app-section {
   :last-child {

diff --git a/docs/assets/css/components/_header.scss b/docs/assets/css/components/_header.scss
@@ -3,24 +3,24 @@
   background-color: $app-brand-color;
 
   .nhsuk-header__navigation-link {
-    margin-right: 32px;
     padding-left: 0;
     padding-right: 0;
   }
 
   .nhsuk-header__menu-toggle--visible {
-    padding-right: 30px;
+    padding-right: 24px;
   }
 
   .nhsuk-header__drop-down {
     .nhsuk-header__navigation-link {
       padding: 12px 16px;
-      margin-right: 0;
+      margin: 0;
     }
   }
 
   .nhsuk-header__navigation-list {
     @include mq($from: desktop) {
+      gap: 32px;
       justify-content: flex-start;
     }
   }

diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss
@@ -6,11 +6,12 @@
   @include nhsuk-font($size: 16);
 
   display: block;
-  padding: nhsuk-spacing(2) 0 0;
+  padding: nhsuk-spacing(5) 0 0;
 }
 
 .app-side-navigation__title {
   @include nhsuk-font($size: 19);
+
   color: $color_nhsuk-grey-1;
   font-weight: normal;
   margin: 0;
@@ -88,7 +89,7 @@
 }
 
 .app-side-navigation--mobile {
-  padding-bottom: nhsuk-spacing(4);
+  padding: nhsuk-spacing(4) 0;
 
   .app-side-navigation {
     padding: 0 0 nhsuk-spacing(3);
@@ -102,6 +103,10 @@
     padding-top: nhsuk-spacing(3);
   }
 
+  .app-side-navigation__title {
+    font-weight: bold;
+  }
+
   .app-side-navigation__item {
     @include nhsuk-font(19);
   }

diff --git a/package-lock.json b/package-lock.json