govuk_publishing_components 23.3.0 → 23.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 023220040cfb5795cd3e6b148e22b442144f18028ef8e09853e764b004a5de0a
-  data.tar.gz: 5b2a54316ce8efa8ae221bf8dddf3948934a2472838f629abbda0b2d56bc7f42
+  metadata.gz: c709998b8885c2971dd9a8748371d99a0153037f2d39e7776eadcad3dfc9870b
+  data.tar.gz: 6e71541e40cc1c636639c8b09650a526d29745161db15b1f99a821375395f07b
 SHA512:
-  metadata.gz: 62418105d4b33b8d133b05dcbbf7f440fd0159e07144f8a9c9de272ccb2061c832b54d1233efdbecf91269aa0b98a97fa589ffba74591e86ae9892deef1cfb82
-  data.tar.gz: 21a872c9340a3f6d8d95dcfa60a4935d1d945d75f24cd5a3427649679d062948d34e8f38a60429ca14f85243bc322beff2c87756ea489b828ca60fcdf714a689
+  metadata.gz: 865a9b6d06c7bb7cbae057bb37e289e784a3ffec53352e491e1492a0d71bd774d2f5596d78379b6c4da1ffab046a01b7de597669e9606c5410caffe5c2a2df6b
+  data.tar.gz: e91cd02916c1bb0c8f25687c481b7ce61890f51c404ea5625b64411ef38e2347c978c833916103465acfea5e31560dfa81209e619576bbb507538e85649342f8

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -49,8 +49,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // true if it's a 'multiple' table
     // this means multiple bars per rows, but not stacked.
-    var moreThanTwoTDs = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('td').length > 2
-    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoTDs)
+    var moreThanTwoCells = this.$table.querySelectorAll('tbody tr')[0].querySelectorAll('th, td').length > 2
+
+    this.options.multiple = !this.options.stacked && (this.$table.classList.contains('mc-multiple') || moreThanTwoCells)
 
     // set the outdent options
     // which can be set via classes or overriden by setting the value to true
@@ -118,11 +119,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     tr.classList.add('mc-tr')
 
     var output = ''
-    var allTheTHs = this.$table.querySelectorAll('th')
+    var allTheTHsInTableHead = this.$table.querySelectorAll('thead th')
 
-    for (var i = 0; i < allTheTHs.length; i++) {
+    for (var i = 0; i < allTheTHsInTableHead.length; i++) {
       output += '<div class="mc-th">'
-      output += allTheTHs[i].innerHTML
+      output += allTheTHsInTableHead[i].innerHTML
       output += '</div>'
     }
 
@@ -143,11 +144,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       tr.classList.add('mc-tr')
 
       var cellsOutput = ''
-      var allTheTds = allTheTbodyTrs[i].querySelectorAll('td')
+      var allTheTableBodyCells = allTheTbodyTrs[i].querySelectorAll('th, td')
 
-      for (var j = 0; j < allTheTds.length; j++) {
+      for (var j = 0; j < allTheTableBodyCells.length; j++) {
         cellsOutput += '<div class="mc-td">'
-        cellsOutput += allTheTds[j].innerHTML
+        cellsOutput += allTheTableBodyCells[j].innerHTML
         cellsOutput += '</div>'
       }
       tr.innerHTML = cellsOutput

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -88,6 +88,7 @@
     height: 100%;
     $ie-background: rgba(255, 255, 255, 0);
     background: $ie-background; // because internet explorer
+    -ms-high-contrast-adjust: none;
   }
 
   @include govuk-media-query($from: mobile, $until: tablet) {

data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss

@@ -18,49 +18,3 @@
     padding-left: govuk-spacing(6);
   }
 }
-
-.gem-c-input__wrapper {
-  display: flex;
-  display: -ms-flexbox;
-
-  .gem-c-input {
-    display: inline-block;
-    flex: 0 1 auto;
-  }
-
-  .gem-c-input:focus {
-    z-index: 1; // increase z-index on focus so it appears over the suffix
-  }
-}
-
-.gem-c-input__prefix,
-.gem-c-input__suffix {
-  @include govuk-font($size: 19);
-
-  background-color: govuk-colour("light-grey", $legacy: "grey-3");
-  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
-  box-sizing: border-box;
-  cursor: default; // emphasise non-editable status of prefixes and suffixes
-  display: inline-block;
-  flex: 0 0 auto;
-  height: 40px;
-  margin-top: 0;
-  min-width: 40px;
-  padding: govuk-spacing(1);
-  text-align: center;
-  white-space: nowrap;
-  width: auto;
-
-  @if $govuk-typography-use-rem {
-    height: govuk-px-to-rem(40px);
-    min-width: govuk-px-to-rem(40px);
-  }
-}
-
-.gem-c-input__prefix {
-  border-right: 0;
-}
-
-.gem-c-input__suffix {
-  border-left: 0;
-}

data/app/views/govuk_publishing_components/components/_input.html.erb

@@ -107,17 +107,17 @@
   %>
 
   <% if prefix && suffix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
       <% # The line below relies on in-line styling for legacy browsers and it's whitespace-sensitive %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+      <%= tag.span prefix, class: "govuk-input__prefix", aria: { hidden: true } %><%= input_tag %><%= tag.span suffix, class: "govuk-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% elsif prefix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= tag.span prefix, class: "gem-c-input__prefix", aria: { hidden: true } %><%= input_tag %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
+      <%= tag.span prefix, class: "govuk-input__prefix", aria: { hidden: true } %><%= input_tag %>
     <% end %>
   <% elsif suffix %>
-    <%= tag.div class: "gem-c-input__wrapper" do %>
-      <%= input_tag %><%= tag.span suffix, class: "gem-c-input__suffix", aria: { hidden: true } %>
+    <%= tag.div class: "govuk-input__wrapper" do %>
+      <%= input_tag %><%= tag.span suffix, class: "govuk-input__suffix", aria: { hidden: true } %>
     <% end %>
   <% else %>
     <%= input_tag %>

data/app/views/govuk_publishing_components/components/docs/govspeak.yml

@@ -236,6 +236,20 @@ examples:
             </tr>
           </tbody>
         </table>
+  chart_with_multiple_headings:
+    data:
+      block: |
+        <table id="multiple-table-chart" class="js-barchart-table mc-multiple">
+          <caption>Multiple Table</caption>
+          <thead>
+            <tr><th>Some Data</th><th>YES</th><th>NO</th><th>MAYBE</th></tr>
+          </thead>
+          <tbody>
+            <tr><th>Testing One</th><td>5</td><td>6</td><td>11</td></tr>
+            <tr><th>Testing Two</th><td>6</td><td>2</td><td>8</td></tr>
+            <tr><th>Testing Three</th><td>3</td><td>9</td><td>12</td></tr>
+          </tbody>
+        </table>
   address:
     data:
       block: |

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.3.0".freeze
+  VERSION = "23.4.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1961,55 +1961,49 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
 
 function Header ($module) {
   this.$module = $module;
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  );
 }
 
+/**
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
 Header.prototype.init = function () {
-  // Check for module
-  var $module = this.$module;
-  if (!$module) {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
     return
   }
 
-  // Check for button
-  var $toggleButton = $module.querySelector('.govuk-js-header-toggle');
-  if (!$toggleButton) {
-    return
-  }
-
-  // Handle $toggleButton click events
-  $toggleButton.addEventListener('click', this.handleClick.bind(this));
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation--open'));
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this));
 };
 
 /**
-* Toggle class
-* @param {object} node element
-* @param {string} className to toggle
-*/
-Header.prototype.toggleClass = function (node, className) {
-  if (node.className.indexOf(className) > 0) {
-    node.className = node.className.replace(' ' + className, '');
-  } else {
-    node.className += ' ' + className;
-  }
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible);
+  this.$menuButton.setAttribute('aria-expanded', isVisible);
 };
 
 /**
-* An event handler for click event on $toggleButton
-* @param {object} event event
-*/
-Header.prototype.handleClick = function (event) {
-  var $module = this.$module;
-  var $toggleButton = event.target || event.srcElement;
-  var $target = $module.querySelector('#' + $toggleButton.getAttribute('aria-controls'));
-
-  // If a button with aria-controls, handle click
-  if ($toggleButton && $target) {
-    this.toggleClass($target, 'govuk-header__navigation--open');
-    this.toggleClass($toggleButton, 'govuk-header__menu-button--open');
-
-    $toggleButton.setAttribute('aria-expanded', $toggleButton.getAttribute('aria-expanded') !== 'true');
-    $target.setAttribute('aria-hidden', $target.getAttribute('aria-hidden') === 'false');
-  }
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation--open');
+  this.syncState(isVisible);
 };
 
 function Radios ($module) {

data/node_modules/govuk-frontend/govuk/components/accordion/README.md

@@ -6,7 +6,7 @@ See the [main README quick start guide](https://github.com/alphagov/govuk-fronte
 
 ## Guidance and Examples
 
-Find out when to use the details component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
+Find out when to use the accordion component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/accordion).
 
 ## Component options
 

data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss

@@ -47,7 +47,6 @@
 
   // JavaScript enabled
   .js-enabled {
-
     .govuk-accordion {
       // Border at the bottom of the whole accordion
       border-bottom: 1px solid $govuk-border-colour;

data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json

@@ -0,0 +1,235 @@
+{
+    "component": "accordion",
+    "fixtures": [
+        {
+            "name": "default",
+            "options": {
+                "id": "default-example",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with additional descriptions",
+            "options": {
+                "id": "with-descriptions",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Test"
+                        },
+                        "summary": {
+                            "text": "Additional description"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Test 2"
+                        },
+                        "summary": {
+                            "html": "<span class=\"govuk-!-font-weight-regular\">Additional description</span>"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with one section open",
+            "options": {
+                "id": "one-section-open-example",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "expanded": true,
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with all sections already open",
+            "options": {
+                "id": "all-sections-open-example",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "expanded": true,
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "expanded": true,
+                        "content": {
+                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with focusable elements inside",
+            "options": {
+                "id": "with-focusable-elements",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "html": "<a class=\"govuk-link\" href=\"#\">Link A</a>"
+                        }
+                    },
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "html": "<a class=\"govuk-link\" href=\"#\">Link B</a>"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n          <a class=\"govuk-link\" href=\"#\">Link A</a>\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n          <a class=\"govuk-link\" href=\"#\">Link B</a>\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "classes",
+            "options": {
+                "classes": "myClass",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "attributes",
+            "options": {
+                "attributes": {
+                    "data-attribute": "value"
+                },
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "custom heading level",
+            "options": {
+                "headingLevel": 3,
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "heading html",
+            "options": {
+                "items": [
+                    {
+                        "heading": {
+                            "html": "<span class=\"myClass\">Section A</span>"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        },
+        {
+            "name": "with falsey values",
+            "options": {
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    },
+                    false,
+                    "",
+                    null,
+                    {
+                        "heading": {
+                            "text": "Section B"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>"
+        }
+    ]
+}