Bump NHS App frontend v5.0.0 (#381)

Author: davidhunter08

.eleventy.js

@@ -1,6 +1,6 @@
 import path from 'path'
 import nunjucks from 'nunjucks'
-import sass from 'sass'
+import * as sass from 'sass'
 import fs from 'fs-extra'
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
 import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
@@ -10,9 +10,6 @@ import anchor from 'markdown-it-anchor'
 import matter from 'gray-matter'
 import prettier from 'prettier'
 
-// Import redirects from separate file
-import redirects from './redirects.js'
-
 const nunjucksEnv = nunjucks.configure([
   // Our own styles and assets
   'src/styles',
@@ -22,9 +19,11 @@ const nunjucksEnv = nunjucks.configure([
   'docs/_includes',
   'docs/assets',
 
-  // NHS.UK frontend components
-  'node_modules/nhsuk-frontend/packages/components',
-  'node_modules/nhsuk-frontend/packages/macros'
+  // NHS.UK frontend components (updated for v10)
+  'node_modules/nhsuk-frontend/dist', // allow resolving paths like nhsuk/macros/attributes.njk
+  'node_modules/nhsuk-frontend/dist/nhsuk',
+  'node_modules/nhsuk-frontend/dist/nhsuk/components',
+  'node_modules/nhsuk-frontend/dist/nhsuk/macros'
 ])
 
 export default function (eleventyConfig) {
@@ -58,27 +57,23 @@ export default function (eleventyConfig) {
   // Watch for changes in these directories and files
   eleventyConfig.addWatchTarget('./src/')
   eleventyConfig.addWatchTarget('./docs/assets/')
-  eleventyConfig.addWatchTarget('./redirects.js') // Watch redirects file for changes
 
   // Add images to docs
   eleventyConfig.addPassthroughCopy('docs/assets/images')
 
-  // Add NHSUK frontend JS components to docs
+  // Add NHSUK frontend JS/components
   eleventyConfig.addPassthroughCopy({
-    'node_modules/nhsuk-frontend/packages': 'nhsuk-frontend'
+    'node_modules/nhsuk-frontend/dist': 'nhsuk-frontend/dist'
   })
 
-  // Add NHSUK frontend compiled JS/CSS to docs
+  // Copy the NHS assets folder to /assets so default assetPath (/assets) works
   eleventyConfig.addPassthroughCopy({
-    'node_modules/nhsuk-frontend/dist': 'nhsuk-frontend/dist'
+    'node_modules/nhsuk-frontend/dist/nhsuk/assets': 'assets'
   })
 
   // Add syntax highlighting to code blocks
   eleventyConfig.addPlugin(syntaxHighlight)
 
-  // Make redirects available as global data
-  eleventyConfig.addGlobalData('redirects', redirects)
-
   eleventyConfig.addTemplateFormats('scss')
   eleventyConfig.addExtension('scss', {
     outputFileExtension: 'css',
@@ -117,6 +112,12 @@ export default function (eleventyConfig) {
       .trim()
     let { data, content: nunjucksCode } = matter(exampleFile)
 
+    // Always show Nunjucks tab unless explicitly disabled
+    let showNunjucksAuto = true
+    if (typeof data.showNunjucks === 'boolean') {
+      showNunjucksAuto = data.showNunjucks
+    }
+
     const rawHtmlCode = nunjucksEnv.renderString(nunjucksCode)
     const prettyHtmlCode = await prettier.format(rawHtmlCode, {
       parser: 'html'
@@ -138,7 +139,9 @@ export default function (eleventyConfig) {
       hub: data.hub,
       backlink: data.backlink || data.backLink || false,
       backLinkHref: data.backLinkHref,
-      backLinkText: data.backLinkText
+      backLinkText: data.backLinkText,
+      arguments: data.arguments, // existing
+      showNunjucks: showNunjucksAuto // computed visibility
     }
     return nunjucksEnv.render('example.njk', templateData)
   })

CHANGELOG.md

@@ -1,5 +1,183 @@
 # NHS App Frontend Changelog
 
+## `v5.0.0` - UNRELEASED
+
+### 💥 Breaking changes
+
+Bumped `nhsuk-frontend` version to `v10.0.0` in [pull request #378](https://github.com/nhsuk/nhsapp-frontend/pull/378) - details are in the [nhsuk frontend release notes](https://github.com/nhsuk/nhsuk-frontend/releases).
+
+#### Button group
+
+Deprecated `nhsapp-button-group` component in [pull request #378](https://github.com/nhsuk/nhsapp-frontend/pull/378), as now available in `nhsuk-frontend`.
+
+Swap `nhsapp-button-group` → with `nhsuk-button-group`.
+
+Before:
+
+```
+<div class="nhsapp-button-group">
+  <button class="nhsuk-button nhsapp-button">
+    Continue
+  </button>
+  <button class="nhsuk-button nhsuk-button--secondary nhsapp-button">
+    Try again
+  </button>
+</div>
+```
+
+After:
+
+```
+<div class="nhsuk-button-group">
+  <button class="nhsuk-button nhsapp-button">
+    Continue
+  </button>
+  <button class="nhsuk-button nhsuk-button--secondary nhsapp-button">
+    Try again
+  </button>
+</div>
+```
+
+#### Section heading
+
+Deprecated `nhsapp-section heading` component in [pull request #378](https://github.com/nhsuk/nhsapp-frontend/pull/378).
+
+A heading and description option has been added to the `cardGroup`.
+
+Before:
+
+```
+<div class="nhsapp-section-heading">
+  <h2 class="nhsuk-heading-s">Upcoming appointments</h2>
+</div>
+<p class="nhsuk-u-margin-bottom-5">1 upcoming appointment</p>
+<ul class="nhsapp-cards nhsapp-cards--stacked">
+  <li class="nhsapp-card">
+    ...
+  </li>
+</ul>
+```
+
+After:
+
+```
+<h2 class="nhsapp-cards__heading">Upcoming appointments</h2>
+<p class="nhsapp-cards__description">1 upcoming appointment</p>
+<ul class="nhsapp-cards nhsapp-cards--stacked">
+  <li class="nhsapp-card">
+    ...
+  </li>
+</ul>
+```
+
+Custom html can be added using `params.headingHtml`, that will support the depreaction of the `view all` link, for example:
+
+```
+{{ nhsappCardGroup({
+  stacked: true,
+  headingHtml:
+    '<div class="nhsapp-cards__heading" style="justify-content: space-between; align-items: center; display: flex;">
+      <h2 class="nhsuk-heading-s nhsuk-u-margin-bottom-0">Services</h2>
+      <a class="nhsuk-u-font-size-19 nhsuk-link nhsuk-link--no-visited-state nhsuk-u-nowrap" href="#">View all <span class="nhsuk-u-visually-hidden">services</span></a>
+    </div>',
+  cards: [
+    {
+      ...
+    }
+  ]
+}) }}
+```
+
+#### Icons
+
+Updated icon names, following nhsuk frontend naming conventions in [pull request #381](https://github.com/nhsuk/nhsapp-frontend/pull/389).
+
+Before:
+
+`nhsapp-icon nhsapp-icon__account`
+
+After:
+
+`nhsapp-icon nhsapp-icon--account`
+
+#### Card links
+
+Replaced `params.html` with `params.descriptionHtml` in [pull request 403](https://github.com/nhsuk/nhsapp-frontend/pull/403).
+
+Before:
+
+```
+{{ nhsappCard({
+  title: '...',
+  html: '...'
+}) }}
+```
+
+After:
+
+```
+{{ nhsappCard({
+  title: '...',
+  descriptionHtml: '...'
+}) }}
+```
+
+Updated logic for a card with no link and removed `params.readOnly`.
+
+Before:
+
+```
+{{ nhsappCard({
+  title: 'Card title',
+  readOnly: 'true'
+}) }}
+```
+
+After:
+
+```
+{{ nhsappCard({
+  title: 'Card title'
+}) }}
+```
+
+Removed the card link with an icon in [pull request 405](https://github.com/nhsuk/nhsapp-frontend/pull/405).
+
+## 🆕 New features
+
+### New (web) header component
+
+Added (web) header component in [pull request #390](https://github.com/nhsuk/nhsapp-frontend/pull/390), extending the NHS design system header and adding modifier classes, `nhsapp-u-hide-from-tablet` and `nhsapp-u-hide-until-tablet`, to show and hide nav items on different screen sizes.
+
+### New NHS App colours
+
+Added NHS App colours in [pull request #389](https://github.com/nhsuk/nhsapp-frontend/pull/392).
+
+These are tints and shades extended from the NHS design system used on the NHS App tag and card links components.
+
+Example:
+
+`nhsapp-colour("green-light")`
+
+Before:
+
+`$color_tag-green-background: #c9e6d8;`
+
+After:
+
+`$color_tag-green-background: nhsapp-colour("green-light");`
+
+### Card links
+
+Updated card links component styling in [pull request #382](https://github.com/nhsuk/nhsapp-frontend/pull/382).
+
+Added new variants for the:
+
+- **Account card** - using the class `nhsapp-card--blue-light`.
+- **Campaign card** - using the classes `nhsapp-card--blue-dark` and `nhsapp-card--with-media`.
+
+Added `isListItem` argument to `cardGroup` macro. If true (default) wrapper is `<ul>` with each card as `<li>`. If false uses `<div>`.
+
 ## `v4.0.0` - 17 June 2025
 
 ### Breaking changes

docs/_data/redirects.js

@@ -0,0 +1,20 @@
+/**
+ * Redirects configuration (auto-loaded by Eleventy because it is in docs/_data)
+ * Each object needs a leading and trailing slash on `from` so the generated
+ * permalink produces /path/index.html
+ */
+export default [
+  {
+    from: '/components/panel/',
+    to: 'https://service-manual.nhs.uk/design-system/components/panel'
+  },
+  {
+    from: '/patterns/confirmation-page/',
+    to: 'https://service-manual.nhs.uk/design-system/patterns/confirmation-page'
+  },
+  {
+    from: '/get-started/github-and-heroku/',
+    to: '/get-started/nhsapp-prototype/'
+  }
+  // Add more redirects here as needed
+]

docs/_includes/example.njk

@@ -24,16 +24,21 @@
 </div>
 
 <div class="app-tabs" data-module="app-tabs">
+  {% set showNunjucksTab = showNunjucks is not defined or showNunjucks != false %}
   <ul class="app-tabs__list" role="tablist">
-    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
-    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#nunjucks-default-{{ id }}" role="tab" id="tab_nunjucks-default-{{ id }}" aria-controls="nunjucks-default-{{ id }}">Nunjucks</a></li>
+    {%- if showNunjucksTab -%}
+      <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
+      <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#nunjucks-default-{{ id }}" role="tab" id="tab_nunjucks-default-{{ id }}" aria-controls="nunjucks-default-{{ id }}">Nunjucks</a></li>
+    {%- else -%}
+      <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
+    {%- endif -%}
     {%- if jsCode %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#js-default-{{ id }}" role="tab" id="tab_js-default-{{ id }}" aria-controls="js-default-{{ id }}">JavaScript</a></li>{% endif -%}
     {%- if figmaLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#figma-default-{{ id }}" role="tab" id="tab_figma-default-{{ id }}" aria-controls="figma-default-{{ id }}">Figma</a></li>{% endif -%}
     {%- if vueLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab nhsuk-link--no-visited-state" href="#vue-default-{{ id }}" role="tab" id="tab_vue-default-{{ id }}" aria-controls="vue-default-{{ id }}">Vue</a></li>{% endif -%}
   </ul>
 
   <div class="app-tabs__panel app-tabs__panel--hidden" id="html-default-{{ id }}" role="tabpanel" aria-labelledby="tab_html-default-{{ id }}">
-    <button class="app-copy__button app-u-hidden" data-module="app-copy" data-clipboard-target="#html-default-{{ id }}-code">Copy code</button>
+    <button class="app-copy__button" data-module="app-copy" data-clipboard-target="#html-default-{{ id }}-code">Copy code</button>
     <div id="html-default-{{ id }}-code">
       {%- highlight "html" -%}
         {{ htmlCode | safe }}
@@ -42,23 +47,35 @@
   </div>
 
   <div class="app-tabs__panel app-tabs__panel--hidden" id="nunjucks-default-{{ id }}" role="tabpanel" aria-labelledby="tab_nunjucks-default-{{ id }}">
-    <button class="app-copy__button app-u-hidden" data-module="app-copy" data-clipboard-target="#nunjucks-default-{{ id }}-code">Copy code</button>
 
     {%- if arguments -%}
-      <details class="nhsuk-details nhsuk-u-padding-3" data-module="nhsuk-details">
+      <details class="nhsuk-details nhsuk-u-padding-top-4 nhsuk-u-padding-left-4 nhsuk-u-padding-right-4" data-module="nhsuk-details">
         <summary class="nhsuk-details__summary">
           <span class="nhsuk-details__summary-text">
             Nunjucks macro options
           </span>
         </summary>
         <div class="nhsuk-details__text">
-
-          {% include "./arguments/" + arguments + ".md" %}
-
+          <p>Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.</p>
+          <p>Some options are required for the macro to work; these are marked as "Required" in the option description.</p>
+          <p>If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">cross-site scripting exploits</a>.</p>
+          {% if arguments %}
+            {% set macroOptionsPath = "nhsapp/components/" + arguments + "/macro-options.md" %}
+            {% if arguments == "card" %}
+              {% set macroOptionsPath = "nhsapp/components/card/macro-options-card.md" %}
+            {% elif arguments == "card-group" %}
+              {% set macroOptionsPath = "nhsapp/components/card/macro-options-card-group.md" %}
+            {% endif %}
+            <div class="app-table--scroll">
+              {% include macroOptionsPath ignore missing %}
+            </div>
+          {% endif %}
         </div>
       </details>
     {%- endif -%}
 
+    <button class="app-copy__button" data-module="app-copy" data-clipboard-target="#nunjucks-default-{{ id }}-code">Copy code</button>
+
 <div id="nunjucks-default-{{ id }}-code">
 
 ```jinja2