govuk_publishing_components 23.12.2 → 23.15.0

data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb

@@ -1,17 +1,22 @@
 <% if navigation_items.any? %>
   <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
-  <nav class="gem-c-header__nav">
-    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end" aria-label="Top Level Navigation">
+  <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
+    <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>
-        <li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
-          <%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
+        <%
+          li_classes = %w(govuk-header__navigation-item)
+          li_classes << "govuk-header__navigation-item--active" if item[:active]
+          li_classes << "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu]
+        %>
+        <%= tag.li class: li_classes do %>
           <%= link_to(
             item[:text],
             item[:href],
             class: 'govuk-header__link',
+            data: item[:data],
           ) %>
-        </li>
+        <% end %>
       <% end %>
     </ul>
-  </nav>
+  <% end %>
 <% end %>

data/config/initializers/assets.rb

@@ -27,6 +27,9 @@ Rails.application.config.assets.precompile += %w[
   govuk_publishing_components/icon-important.svg
   govuk_publishing_components/chevron-banner/*.svg
   govuk_publishing_components/crests/*.png
+  govuk_publishing_components/take-action-amber.svg
+  govuk_publishing_components/take-action-green.svg
+  govuk_publishing_components/take-action-red.svg
 ]
 
 # GOV.UK Frontend assets

data/config/locales/cy.yml

@@ -12,4 +12,9 @@ cy:
       transition:
         title: "Brexit"
         link_path: "/transition.cy"
-        link_text: "Darganfyddwch sut mae’r rheolau Brexit newydd yn effeithio arnoch chi"
+        link_text: "Gwiriwch beth sydd angen i chi ei wneud"
+      take_action_list:
+        red: Gwiriwch
+        amber: Newidiwch
+        green: Ewch
+        aria_label: Ymgyrch slogan Brexit, Gwiriwch, Newidiwch, Ewch.

data/config/locales/en.yml

@@ -79,7 +79,12 @@ en:
       transition:
         title: "Brexit"
         link_path: "/transition"
-        link_text: "Check how the new Brexit rules affect you"
+        link_text: "Check what you need to do"
+      take_action_list:
+        red: Check
+        amber: Change
+        green: Go
+        aria_label: Brexit campaign slogan, Check, Change, Go.
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"
@@ -92,8 +97,8 @@ en:
     step_by_step_nav:
       show: "Show"
       hide: "Hide"
-      show_all: "Show all"
-      hide_all: "Hide all"
+      show_all: "Show all steps"
+      hide_all: "Hide all steps"
     step_by_step_nav_related:
       part_of: "Part of"
     subscription_links:

data/lib/govuk_publishing_components/presenters/contextual_navigation.rb

@@ -113,8 +113,130 @@ module GovukPublishingComponents
         tagged_to_brexit? && (page_content_id != brexit_start_page_content_id)
       end
 
-      def transition_countdown_exception?
-        content_item["content_id"] == "c3752802-f091-43a9-ba90-33568fccf391"
+      def brexit_cta_document_exceptions
+        # /government/news/30-creative-teams-awarded-up-to-100000-each-for-festival-uk-2022-rd-project
+        %w[c3752802-f091-43a9-ba90-33568fccf391]
+      end
+
+      def brexit_cta_document_exception?
+        brexit_cta_document_exceptions.include?(content_item["content_id"])
+      end
+
+      def brexit_cta_document_type_exceptions
+        %w[
+          aaib_report
+          answer
+          asylum_support_decision
+          fatality_notice
+          maib_report
+          raib_report
+          simple_smart_answer
+          transaction
+        ]
+      end
+
+      def brexit_cta_document_type_exception?
+        brexit_cta_document_type_exceptions.include?(content_item["document_type"])
+      end
+
+      def brexit_cta_taxon_allow_list
+        # Entering and staying in the UK
+        # Going and being abroad
+        # Corporate information
+        # Transport
+        # Environment
+        # International
+        # Defence and armed forces
+        # Society and culture
+        # Government
+        # Work
+        # Welfare
+        # Money
+        # Business and industry
+        # Health and social care
+        # Education > Further and higher education
+        # Education > Teaching and leadership
+        # Education > Funding and finance for students
+        # Coronavirus (COVID-19)
+        %w[
+          ba3a9702-da22-487f-86c1-8334a730e559
+          9597c30a-605a-4e36-8bc1-47e5cdae41b3
+          a544d48b-1e9e-47fb-b427-7a987c658c14
+          a4038b29-b332-4f13-98b1-1c9709e216bc
+          3cf97f69-84de-41ae-bc7b-7e2cc238fa58
+          37d0fa26-abed-4c74-8835-b3b51ae1c8b2
+          e491505c-77ae-45b2-84be-8c94b94f6a2b
+          e2ca2f1a-0ff3-43ce-b813-16645ff27904
+          e48ab80a-de80-4e83-bf59-26316856a5f9
+          d0f1e5a3-c8f4-4780-8678-994f19104b21
+          dded88e2-f92e-424f-b73e-6ad24a839c51
+          6acc9db4-780e-4a46-92b4-1812e3c2c48a
+          495afdb6-47be-4df1-8b38-91c8adb1eefc
+          8124ead8-8ebc-4faf-88ad-dd5cbcc92ba8
+          dd767840-363e-43ad-8835-c9ab516633de
+          ff00b8b2-dcdb-4659-93c2-291c9be354f3
+          23265b25-7ec3-4960-8517-4ff8d4d92cac
+          5b7b9532-a775-4bd2-a3aa-6ce380184b6c
+        ]
+      end
+
+      def brexit_cta_taxon_allow_list?
+        taxons = content_item.dig("links", "taxons").to_a
+        taxons.each do |taxon|
+          if brexit_cta_taxon_allow_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, brexit_cta_taxon_allow_list)
+            return true
+          end
+        end
+        false
+      end
+
+      def parent_taxon_include?(taxon, taxon_list)
+        if taxon.present?
+          if taxon.dig("links", "parent_taxons").to_a.any? { |taxon_item| taxon_list.include?(taxon_item["content_id"]) }
+            return true
+          end
+
+          taxon.dig("links", "parent_taxons").to_a.any? { |taxon_item| parent_taxon_include?(taxon_item, taxon_list) }
+        else
+          false
+        end
+      end
+
+      def brexit_cta_taxon_exception_list
+        # Entering and staying in the UK > Immigration offences
+        # Entering and staying in the UK > Inspections of border, immigration and asylum services
+        # Entering and staying in the UK > Refugees, asylum and human rights
+        # Transport > Local transport
+        # Education > Further and higher education > Education in prisons
+        %w[
+          fa13521f-9285-45b0-bd65-4a472a8037e7
+          0fab9131-f877-4286-b4d8-922fbfb402b6
+          08a8a69f-2825-4fe2-a4cf-c83458a5629e
+          3b4d6319-fcef-4637-b35a-e3df76321894
+          6426d1c5-93c8-4659-85d5-1f0d3368a124
+        ]
+      end
+
+      def brexit_cta_taxon_exception_list?
+        taxons = content_item.dig("links", "taxons").to_a
+        taxons.each do |taxon|
+          if brexit_cta_taxon_exception_list.include?(taxon["content_id"]) || parent_taxon_include?(taxon, brexit_cta_taxon_exception_list)
+            return true
+          end
+        end
+        false
+      end
+
+      def brexit_cta_exception?
+        brexit_cta_document_exception? ||
+          brexit_cta_document_type_exception? ||
+          brexit_cta_taxon_exception_list?
+      end
+
+      def show_brexit_cta?
+        brexit_cta_taxon_allow_list? &&
+          step_by_step_count.zero? &&
+          !brexit_cta_exception?
       end
 
       def step_by_step_count

data/lib/govuk_publishing_components/presenters/meta_tags.rb

@@ -31,6 +31,8 @@ module GovukPublishingComponents
         meta_tags["govuk:publishing-application"] = content_item[:publishing_app] if content_item[:publishing_app]
         meta_tags["govuk:schema-name"] = content_item[:schema_name] if content_item[:schema_name]
         meta_tags["govuk:content-id"] = content_item[:content_id] if content_item[:content_id]
+        meta_tags["govuk:navigation-page-type"] = content_item[:navigation_page_type] if content_item[:navigation_page_type]
+        meta_tags["govuk:section"] = content_item[:section] if content_item[:section]
         meta_tags["govuk:withdrawn"] = "withdrawn" if content_item[:withdrawn_notice].present?
         meta_tags["govuk:content-has-history"] = "true" if has_content_history?
         meta_tags["govuk:static-analytics:strip-dates"] = "true" if should_strip_dates_pii?(content_item, local_assigns)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "23.12.2".freeze
+  VERSION = "23.15.0".freeze
 end

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

@@ -1959,6 +1959,58 @@ ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
     $input.closest('label')
 };
 
+function NotificationBanner ($module) {
+  this.$module = $module;
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module;
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus();
+};
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module;
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1');
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex');
+    });
+  }
+
+  $module.focus();
+};
+
 function Header ($module) {
   this.$module = $module;
   this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle');
@@ -2476,6 +2528,11 @@ function initAll (options) {
   var $toggleButton = scope.querySelector('[data-module="govuk-header"]');
   new Header($toggleButton).init();
 
+  var $notificationBanners = scope.querySelectorAll('[data-module="govuk-notification-banner"]');
+  nodeListForEach($notificationBanners, function ($notificationBanner) {
+    new NotificationBanner($notificationBanner).init();
+  });
+
   var $radios = scope.querySelectorAll('[data-module="govuk-radios"]');
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init();

data/node_modules/govuk-frontend/govuk/components/_all.scss

@@ -19,6 +19,7 @@
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";
+@import "notification-banner/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

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

@@ -24,7 +24,8 @@
                     }
                 ]
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "with additional descriptions",
@@ -55,7 +56,8 @@
                     }
                 ]
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "with one section open",
@@ -81,7 +83,8 @@
                     }
                 ]
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "with all sections already open",
@@ -108,7 +111,8 @@
                     }
                 ]
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "with focusable elements inside",
@@ -133,11 +137,13 @@
                     }
                 ]
             },
-            "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>"
+            "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>",
+            "hidden": false
         },
         {
             "name": "classes",
             "options": {
+                "id": "accordion-classes",
                 "classes": "myClass",
                 "items": [
                     {
@@ -150,11 +156,13 @@
                     }
                 ]
             },
-            "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>"
+            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\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=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
+            "hidden": true
         },
         {
             "name": "attributes",
             "options": {
+                "id": "accordion-attributes",
                 "attributes": {
                     "data-attribute": "value"
                 },
@@ -169,11 +177,13 @@
                     }
                 ]
             },
-            "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>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" 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=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
+            "hidden": true
         },
         {
             "name": "custom heading level",
             "options": {
+                "id": "accordion-heading",
                 "headingLevel": 3,
                 "items": [
                     {
@@ -186,11 +196,13 @@
                     }
                 ]
             },
-            "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>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\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=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
+            "hidden": true
         },
         {
             "name": "heading html",
             "options": {
+                "id": "accordion-heading-html",
                 "items": [
                     {
                         "heading": {
@@ -202,11 +214,13 @@
                     }
                 ]
             },
-            "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>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\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=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
+            "hidden": true
         },
         {
             "name": "with falsey values",
             "options": {
+                "id": "accordion-falsey",
                 "items": [
                     {
                         "heading": {
@@ -229,7 +243,8 @@
                     }
                 ]
             },
-            "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>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\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=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-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=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
+            "hidden": true
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json

@@ -6,7 +6,8 @@
             "options": {
                 "href": "#"
             },
-            "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>"
+            "html": "<a href=\"#\" class=\"govuk-back-link\">Back</a>",
+            "hidden": false
         },
         {
             "name": "with custom text",
@@ -14,7 +15,8 @@
                 "href": "#",
                 "text": "Back to home"
             },
-            "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>"
+            "html": "<a href=\"#\" class=\"govuk-back-link\">Back to home</a>",
+            "hidden": false
         },
         {
             "name": "classes",
@@ -22,7 +24,8 @@
                 "classes": "app-back-link--custom-class",
                 "href": "#"
             },
-            "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>"
+            "html": "<a href=\"#\" class=\"govuk-back-link app-back-link--custom-class\">Back</a>",
+            "hidden": true
         },
         {
             "name": "html as text",
@@ -30,7 +33,8 @@
                 "text": "<b>Home</b>",
                 "href": "#"
             },
-            "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>"
+            "html": "<a href=\"#\" class=\"govuk-back-link\">&lt;b&gt;Home&lt;/b&gt;</a>",
+            "hidden": true
         },
         {
             "name": "html",
@@ -38,7 +42,8 @@
                 "html": "<b>Back</b>",
                 "href": "#"
             },
-            "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>"
+            "html": "<a href=\"#\" class=\"govuk-back-link\"><b>Back</b></a>",
+            "hidden": true
         },
         {
             "name": "attributes",
@@ -50,7 +55,8 @@
                     "aria-label": "Back to home"
                 }
             },
-            "html": "<a href=\"#\" class=\"govuk-back-link\" data-test=\"attribute\" aria-label=\"Back to home\"><b>Back to home</b></a>"
+            "html": "<a href=\"#\" class=\"govuk-back-link\" data-test=\"attribute\" aria-label=\"Back to home\"><b>Back to home</b></a>",
+            "hidden": true
         }
     ]
 }