Merge branch 'main' into header-breaking-changes

Author: frankieroberto

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Fix appearance of disabled warning buttons ([Issue 1034]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034]))
 - Fix reverse button text colour ([PR 1080]([https://github.com/nhsuk/nhsuk-frontend/pull/1080]))
+- Fix details component requiring html param in uppercase ([PR 1090](https://github.com/nhsuk/nhsuk-frontend/pull/1090), [Issue 1089](https://github.com/nhsuk/nhsuk-frontend/issues/1089))
 
 :boom: **Breaking changes**
 

app/components/details/index.njk

@@ -13,7 +13,7 @@
 
         {{ details({
           "text": "Where can I find my NHS number?",
-          "HTML": "
+          "html": "
           <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>
           <ul>

gulpfile.js

@@ -29,7 +29,7 @@ sass.compiler = require('sass')
 function compileCSS() {
   return gulp
     .src(['packages/nhsuk.scss'])
-    .pipe(sass())
+    .pipe(sass().on('error', sass.logError))
     .pipe(gulp.dest('dist/'))
     .on('error', (err) => {
       console.log(err)

packages/components/details/README.md

@@ -45,7 +45,7 @@ For this component to be accessible and compatible with older browsers, include
 
 {{ details({
   "text": "Where can I find my NHS number?",
-  "HTML": "
+  "html": "
   <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>
   <ul>
@@ -259,7 +259,7 @@ The details Nunjucks macro takes the following arguments:
 | Name       | Type    | Required | Description                                                                             |
 | ---------- | ------- | -------- | --------------------------------------------------------------------------------------- |
 | text       | string  | Yes      | Text to be displayed on the expander component.                                         |
-| HTML       | string  | Yes      | HTML content to be displayed within the expander component                              |
+| html       | string  | Yes      | HTML content to be displayed within the expander component                              |
 | id         | string  | false    | Id to add to the details element.                                                       |
 | open       | boolean | false    | If true, details element will be expanded.                                              |
 | classes    | string  | No       | Optional additional classes to add to the anchor tag. Separate each class with a space. |

packages/components/details/template.njk

@@ -9,6 +9,7 @@
     </span>
   </summary>
   <div class="nhsuk-details__text">
-    {{- params.HTML | safe }}
+    {# params.HTML supported for backwards compatibility - see issue #1089 #}
+    {{- (params.html or params.HTML) | safe }}
   </div>
 </details>