Merge branch 'main' into check-branches

Author: colinrotherham

CHANGELOG.md

@@ -1,5 +1,66 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:boom: **Breaking changes**
+
+You must make the following changes when you migrate to this release, or your service might break.
+
+#### Rename component `HTML` param to `html`
+
+If you're using the `card`, `details`, `insetText` or `warningCallout` Nunjucks macros, you need to rename the `HTML` param to `html`.
+
+Before:
+
+```njk
+{{ insetText({
+  HTML: "<p>You'll need to stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>"
+}) }}
+```
+
+After:
+
+```njk
+{{ insetText({
+  html: "<p>You'll need to stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>"
+}) }}
+```
+
+This change was made in [pull request #1259: Review legacy Nunjucks params](https://github.com/nhsuk/nhsuk-frontend/pull/1259).
+
+#### Rename details component `text` param to `summaryText`
+
+If you're using the `details` Nunjucks macro you need to rename the `text` param to `summaryText`.
+
+Before:
+
+```njk
+{{ details({
+  text: "Where can I find my NHS number?",
+  html: "<p>An NHS number is a 10 digit number, like 485 777 3456.</p>"
+}) }}
+```
+
+After:
+
+```njk
+{{ details({
+  summaryText: "Where can I find my NHS number?",
+  html: "<p>An NHS number is a 10 digit number, like 485 777 3456.</p>"
+}) }}
+```
+
+This change ensures consistency with other components, where `text` or `html` params are alternatives and cannot be used together. For example, when only text content is necessary:
+
+```njk
+{{ details({
+  summaryText: "Where can I find my NHS number?",
+  text: "An NHS number is a 10 digit number, like 485 777 3456."
+}) }}
+```
+
+This change was made in [pull request #1259: Review legacy Nunjucks params](https://github.com/nhsuk/nhsuk-frontend/pull/1259).
+
 ## 9.6.0 - 20 May 2025
 
 :new: **New features**

app/components/all.njk

@@ -311,7 +311,7 @@
       }) }}
 
       {% call details({
-        "text": "Where can I find my NHS number?"
+        "summaryText": "Where can I find my NHS number?"
       }) %}
         <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
         <p>You can find your NHS number on any document sent to you by the NHS. This may include:</p>
@@ -326,7 +326,7 @@
       {% endcall %}
 
       {% call details({
-        "text": "Opening times",
+        "summaryText": "Opening times",
         "classes": "nhsuk-expander"
       }) %}
         {{ table({
@@ -402,7 +402,7 @@
 
       <div class="nhsuk-expander-group">
         {% call details({
-          "text": "How to measure your blood glucose levels",
+          "summaryText": "How to measure your blood glucose levels",
           "classes": "nhsuk-expander"
         }) %}
           <p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.</p>
@@ -416,7 +416,7 @@
         {% endcall %}
 
         {% call details({
-          "text": "When to check your blood glucose level",
+          "summaryText": "When to check your blood glucose level",
           "classes": "nhsuk-expander"
         }) %}
           <p>Try to check your blood:</p>

app/components/details/expander-group.njk

@@ -7,7 +7,7 @@
     <div class="nhsuk-grid-column-two-thirds">
       <div class="nhsuk-expander-group">
         {% call details({
-          "text": "How to measure your blood glucose levels",
+          "summaryText": "How to measure your blood glucose levels",
           "classes": "nhsuk-expander"
         }) %}
           <p>Testing your blood at home is quick and easy, although it can be uncomfortable. It does get better.</p>
@@ -21,7 +21,7 @@
         {% endcall %}
 
         {% call details({
-          "text": "When to check your blood glucose level",
+          "summaryText": "When to check your blood glucose level",
           "classes": "nhsuk-expander"
         }) %}
           <p>Try to check your blood:</p>

app/components/details/expander.njk

@@ -7,7 +7,7 @@
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">
       {% call details({
-        "text": "Opening times",
+        "summaryText": "Opening times",
         "classes": "nhsuk-expander"
       }) %}
         {{ table({

app/components/details/index.njk

@@ -7,7 +7,7 @@
     <div class="nhsuk-grid-column-two-thirds">
 
       {% call details({
-        "text": "Where can I find my NHS number?"
+        "summaryText": "Where can I find my NHS number?"
       }) %}
         <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
         <p>You can find your NHS number on any document sent to you by the NHS. This may include:</p>

app/components/typography.njk

@@ -315,7 +315,7 @@
       <p>This is a paragraph using no class. Aliquam pulvinar posuere elementum. Fusce tincidunt interdum mauris non pretium.</p>
 
       {% call details({
-        "text": "Where can I find my NHS number?"
+        "summaryText": "Where can I find my NHS number?"
       }) %}
         <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
         <p>You can find your NHS number on any document sent to you by the NHS. This may include:</p>

packages/components/card/template.njk

@@ -46,8 +46,6 @@
 {%- endif %}
 {%- if caller or params.descriptionHtml %}
   {{ caller() if caller else params.descriptionHtml | safe }}
-{%- elif params.HTML %}
-  {{ params.HTML | safe }}
 {%- elif params.description %}
   <p class="nhsuk-card__description">{{ params.description | safe }}</p>
 {%- else %}

packages/components/details/template.njk

@@ -5,11 +5,14 @@
 {{- nhsukAttributes(params.attributes) }} {{- " open" if params.open }}>
   <summary class="nhsuk-details__summary">
     <span class="nhsuk-details__summary-text">
-      {{ params.text }}
+      {{ params.summaryHtml | safe | trim | indent(6) if params.summaryHtml else params.summaryText }}
     </span>
   </summary>
   <div class="nhsuk-details__text">
-    {# params.HTML supported for backwards compatibility - see issue #1089 #}
-    {{- caller() if caller else (params.html or params.HTML) | safe }}
+    {% if caller or params.html -%}
+      {{ caller() if caller else params.html | safe | trim | indent(4) }}
+    {% elif params.text -%}
+      {{ params.text }}
+    {% endif %}
   </div>
 </details>

packages/components/inset-text/template.njk

@@ -4,9 +4,8 @@
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {{- nhsukAttributes(params.attributes) }}>
   <span class="nhsuk-u-visually-hidden">Information: </span>
-  {# params.HTML supported for backwards compatibility - see issue #950 #}
-  {% if caller or params.html or params.HTML -%}
-    {{ caller() if caller else (params.html or params.HTML) | safe | trim | indent(2) }}
+  {% if caller or params.html -%}
+    {{ caller() if caller else params.html | safe | trim | indent(2) }}
   {% elif params.text -%}
     <p>{{ params.text }}</p>
   {% endif %}

packages/components/warning-callout/template.njk

@@ -14,8 +14,8 @@
     </span>
     {%- endif %}
   </h{{ headingLevel }}>
-  {% if caller or params.html or params.HTML -%}
-    {{ caller() if caller else (params.html or params.HTML) | safe }}
+  {% if caller or params.html -%}
+    {{ caller() if caller else params.html | safe }}
   {% elif params.text -%}
     <p>{{ params.text }}</p>
   {% endif %}