Fix inset-text not supporting html param (#951)

* Fix inset-text not supporting html param
nhsuk · May 21, 2024 · 0e68189 · 0e68189
1 parent 3b9d77c
commit 0e68189
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - Removing classes from icon card that are not doing anything
 - Align label bottom margins with fieldset legend bottom margins ([PR 946](https://github.com/nhsuk/nhsuk-frontend/pull/946)).
+- Fixed bug with inset-text component requiring uppercase `html` argument. Fixes [Issue 950](https://github.com/nhsuk/nhsuk-frontend/issues/950).
 
 ## 8.1.1 - 14 March 2024
 

diff --git a/app/components/inset-text/index.njk b/app/components/inset-text/index.njk
@@ -11,7 +11,7 @@
       <div class="nhsuk-grid-row">
         <div class="nhsuk-grid-column-two-thirds">
           {{ insetText({
-            "HTML": "<p>You can report any suspected side effect to the <a href=\"https://yellowcard.mhra.gov.uk/\" title=\"External website\">UK safety scheme</a>.</p>"
+            "html": "<p>You can report any suspected side effect to the <a href=\"https://yellowcard.mhra.gov.uk/\" title=\"External website\">UK safety scheme</a>.</p>"
           }) }}
         </div>
       </div>

diff --git a/packages/components/inset-text/README.md b/packages/components/inset-text/README.md
@@ -25,7 +25,7 @@ If you’re using Nunjucks macros in production be aware that using `html` argum
 {% from 'components/inset-text/macro.njk' import insetText %}
 
 {{ insetText({
-  "HTML": "<p>You can report any suspected side effect to the <a href=\"https://yellowcard.mhra.gov.uk/\" title=\"External website\">UK safety scheme</a>.</p>"
+  "html": "<p>You can report any suspected side effect to the <a href=\"https://yellowcard.mhra.gov.uk/\" title=\"External website\">UK safety scheme</a>.</p>"
 }) }}
 ```
 
@@ -35,7 +35,7 @@ The inset text Nunjucks macro takes the following arguments:
 
 | Name           | Type   | Required | Description                                                                                       |
 | -------------- | ------ | -------- | ------------------------------------------------------------------------------------------------- |
-| **HTML**       | string | Yes      | HTML content to be used within the inset text component.                                          |
+| **html**       | string | Yes      | HTML content to be used within the inset text component.                                          |
 | **classes**    | string | No       | Optional additional classes to add to the inset text container. Separate each class with a space. |
 | **attributes** | object | No       | Any extra HTML attributes (for example data attributes) to add to the inset text container.       |
 

diff --git a/packages/components/inset-text/template.njk b/packages/components/inset-text/template.njk
@@ -2,5 +2,6 @@
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <span class="nhsuk-u-visually-hidden">Information: </span>
-  {{ params.HTML | safe }}
+  {# params.HTML supported for backwards compatibility - see issue #950 #}
+  {{ (params.html or params.HTML) | safe }}
 </div>