govuk_publishing_components 47.0.0 → 49.0.0

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

@@ -4,12 +4,13 @@
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-translation-nav govuk-!-display-none-print #{translation_helper.classes} #{brand_helper.brand_class}")
+  component_helper.add_aria_attribute({ label: t("common.translations") })
 %>
 <% if translation_helper.has_translations? %>
-  <nav role="navigation"
-    class="gem-c-translation-nav govuk-!-display-none-print <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
-    aria-label="<%= t("common.translations") %>"
-  >
+  <%= tag.nav(**component_helper.all_attributes) do %>
     <ul class="gem-c-translation-nav__list">
       <% translation_helper.translations.each.with_index do |translation, i| %>
         <li class="gem-c-translation-nav__list-item">
@@ -27,5 +28,5 @@
         </li>
       <% end %>
     </ul>
-  </nav>
+  <% end %>
 <% end %>

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

@@ -14,9 +14,13 @@
   text_classes << "gem-c-warning-text__text--no-indent" if text_icon.empty?
   text_classes << "gem-c-warning-text__text--large" if large_font
   text_classes << "gem-c-warning-text__text--highlight" if highlight_text
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.set_id(id)
+  component_helper.add_class("gem-c-warning-text govuk-warning-text")
 %>
 
-<%= tag.div id: id, class: "gem-c-warning-text govuk-warning-text" do %>
+<%= tag.div(**component_helper.all_attributes) do %>
   <% unless text_icon.empty? %>
     <%= tag.span text_icon, class: "govuk-warning-text__icon", "aria-hidden": "true" %>
   <% end %>

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

@@ -17,6 +17,7 @@ shared_accessibility_criteria:
 accessibility_criteria: |
   The thumbnail image, and the link wrapping it, must not focusable or shown to
   screenreaders.
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -89,7 +90,7 @@ examples:
       details_ga4_attributes: {
         index_section_count: 4
       }
-  with_data_attributes:
+  with_data_attributes_on_url:
     data:
       attachment:
         title: "Department for Transport information asset register"
@@ -97,7 +98,7 @@ examples:
         filename: department-for-transport-information-asset-register.csv
         content_type: application/pdf
         file_size: 20000
-      data_attributes:
+      url_data_attributes:
         gtm: "attachment-preview"
   with_margin_bottom:
     description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to no margin bottom.

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

@@ -14,6 +14,7 @@ accessibility_criteria: |
     Attachment links within paragraphs of text do not need to meet the 24 by 24 CSS pixels requirements.    
 shared_accessibility_criteria:
 - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -58,10 +59,10 @@ examples:
         title: "Temporary snow ploughs: guidance note"
         url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf
       target: _blank
-  with_data_attributes:
+  with_data_attributes_on_url:
     data:
       attachment:
         title: "Temporary snow ploughs: guidance note"
         url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/259634/temporary-snow-ploughs.pdf
-      data_attributes:
+      url_data_attributes:
         gtm: "attachment-preview"

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

@@ -48,22 +48,26 @@ examples:
     data:
       number: 23
       href: "/government/organisations#ministerial_departments"
-  with_data_attributes:
+  with_nested_data_attributes:
     description: |
-      If a `href` attribute is present, `data_attributes` will apply to the `span` containing the number value (see below).
+      If a `href` attribute is present, `nested_data_attributes` will apply to the `a` containing the number value (see below). If a `href` is not present, it will apply to the `span` containing the number value.
+
+      For parent level data attributes, use `data_attributes` which comes from this component having the component wrapper.
 
       Note that the component does not include built in tracking. If this is required consider using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/trackers/ga4-link-tracker.md).
     data:
       number: 23
       label: Ministerial departments
       href: "/government/organisations#ministerial_departments"
-      data_attributes:
+      nested_data_attributes:
         department-count: true
-  with_data_attributes_but_no_link:
+  with_nested_data_attributes_but_no_link:
+    description: |
+      If a `href` is not present, the data attributes will be applied to the `span` containing the big number. For parent level data attributes, use `data_attributes` which comes from this component having the component wrapper.
     data:
       number: 23
       label: Ministerial departments
-      data_attributes:
+      nested_data_attributes:
         department-count: true
   with_aria_attributes:
     description: Aria attributes are applied to the whole component instance

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

@@ -72,7 +72,7 @@ examples:
         northern_ireland:
           applicable: false
           alternative_url: /
-      type: consultation
+      content_type: consultation
   applies_to_one_nation_individual_guidance_available:
     description: Specify alternative type for the content e.g. Guidance
     data:
@@ -82,7 +82,7 @@ examples:
         northern_ireland:
           applicable: false
           alternative_url: /
-      type: detailed_guide
+      content_type: detailed_guide
   specific_heading level:
     description: Use a different heading level for the main link title. Defaults to `h2` if not passed.
     data:
@@ -104,5 +104,5 @@ examples:
         northern_ireland:
           applicable: false
           alternative_url: /
-      type: detailed_guide
+      content_type: detailed_guide
       disable_ga4: true

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

@@ -246,8 +246,7 @@ examples:
           document_type: 'Statistical data set'
   with_equal_item_spacing:
     description: |
-      The new search UI has consistently equal spacing between items in the document list, instead
-      of the original larger bottom padding.
+      Use this option to add equal spacing between items in the document list.
     data:
       equal_item_spacing: true
       items:

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

@@ -842,12 +842,6 @@ examples:
             The water in the mouth of a blue whale weighs more than its body.
           </p>
         </div>
-  advisory:
-    data:
-      block: |
-        <h3 role="note" aria-label="Important" class="advisory">
-          <span>This is a very important message or warning</span>
-        </h3>
   form_download:
     data:
       block: |

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

@@ -21,6 +21,7 @@ shared_accessibility_criteria:
   - link
 accessibility_excluded_rules:
   - landmark-unique # aria-label attributes will be duplicated in component examples list
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -20,17 +20,8 @@ accessibility_criteria: |
 
     Note: This decision has been made based on prior experience seeing removal of overuse of `<nav>` elements from www.GOV.UK, which made it confusing for users of assistive technologies to know what were the most important navigation aspects of GOV.UK.
     Should be challenged if user research indicates this is an issue.
-
-  - have a role of [`contentinfo`](https://www.w3.org/TR/wai-aria-1.1/#contentinfo) at the root of the component (`<footer>`)
-
-    Note: This decision has been made given that most uses of this role tend to be used directly on a `<footer>` element.
-    Assumption made is that is most predictable for users of assistive technologies.
-    The spec indicates that `contentinfo` is useful for "Examples of information included in this region of the page are copyrights and links to privacy statements.", which may indicate that it might be better placed around the 'meta' section of this component.
-    Should be challenged if user research indicates this is an issue.
 shared_accessibility_criteria:
   - link
-accessibility_excluded_rules:
-  - landmark-contentinfo-is-top-level # The footer element can not be top level in the examples
 examples:
   default:
     data: {}

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

@@ -26,6 +26,7 @@ accessibility_excluded_rules:
   - duplicate-id-aria
   - landmark-no-duplicate-banner
   - landmark-unique
+uses_component_wrapper_helper: true
 examples:
   default:
   with_custom_logo_link:

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

@@ -5,6 +5,7 @@ body: |
 
   The `items` parameter can include HTML to display - such as links or another
   list. This HTML can either be directly coded or come from another component.
+uses_component_wrapper_helper: true
 accessibility_criteria: |
   The list must:
 
@@ -31,7 +32,8 @@ examples:
   unordered_list_with_aria-label:
     description: "A list with an aria-label"
     data:
-      aria_label: "A list of delicious chocolate bars."
+      aria:
+        label: "A list of delicious chocolate bars."
       <<: *default-example-data
   unordered_list_with_bullet_points:
     description: "An unordered list with visible bullet points."

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

@@ -24,6 +24,7 @@ accessibility_criteria: |
   - return focus to last focused element on close
 
 display_preview: false
+uses_component_wrapper_helper: true
 examples:
   default:
     embed: |
@@ -100,20 +101,3 @@ examples:
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
           <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>
-  with_data_attributes:
-    embed: |
-      <%= render "govuk_publishing_components/components/button", {
-        text: "Open modal with data attributes",
-        data_attributes: {
-          toggle: "modal",
-          target: "modal-with-data-attributes"
-        }
-      } %>
-      <%= component %>
-    data:
-      id: modal-with-data-attributes
-      data_attributes:
-        gtm: modal
-      block: |
-        <h1 class="govuk-heading-l">Modal title</h1>
-        <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet fringilla dictum. Morbi at vehicula augue. Pellentesque varius orci et augue pellentesque, sed elementum massa posuere. Curabitur egestas consectetur arcu, in porta lorem sagittis eu. Nulla facilisi. Sed scelerisque ligula lectus. Nulla et ligula a eros laoreet lacinia nec et ipsum. Ut sagittis sapien est, ut blandit risus laoreet at. Vestibulum vitae erat sed dolor ultricies efficitur.</p>

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

@@ -12,7 +12,7 @@ accessibility_criteria: |
 
   - be used inside a form with the role of 'search', to indicate it as a [search landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_lh_search)
   - have a clear label to identify the search functionality, which is visible to all users
-
+uses_component_wrapper_helper: true
 examples:
   default:
     data: {}
@@ -49,7 +49,7 @@ examples:
       label_text: "Search"
   set_id_for_search_input:
     data:
-      id: "my_unique_id"
+      label_id: "my_unique_id"
   large_version:
     data:
       size: "large"

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

@@ -14,6 +14,7 @@ accessibility_criteria: |
   - show hidden elements by default when JavaScript is disabled
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -7,6 +7,7 @@ accessibility_criteria: |
     assistive tech
   - Should have a role of ‘alert’ to communicate that is a important and
     time sensitive message
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -5,6 +5,7 @@ accessibility_criteria: |
   - be focusable with a keyboard
   - be usable with a keyboard
   - indicate when it has focus
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -9,6 +9,7 @@ shared_accessibility_criteria:
   - link
 govuk_frontend_components:
   - summary-list
+uses_component_wrapper_helper: true
 examples:
   default:
     data: &default-example-data

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

@@ -16,6 +16,7 @@ shared_accessibility_criteria:
   - link
 accessibility_excluded_rules:
   - landmark-unique # aria-label attributes will be duplicated in component examples list
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -5,6 +5,7 @@ govuk_frontend_components:
   - warning-text
 accessibility_criteria: |
   All text must have a contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb

@@ -12,7 +12,7 @@
     <div class="govuk-grid-column-two-thirds">
       <div id="wrapper">
         <%= yield :before_content %>
-        <main role="main" id="content">
+        <main id="content">
           <%= yield %>
         </main>
       </div>

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

@@ -21,7 +21,7 @@
 >
   <%= render "govuk_publishing_components/components/search", {
     button_text: t("components.layout_header.search_button"),
-    id: "site-search-text",
+    label_id: "site-search-text",
     margin_bottom: 0,
     no_border: true,
     disable_corrections: true,

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -1,5 +1,4 @@
-<nav role="navigation"
-     class="gem-c-related-navigation__nav-section"
+<nav class="gem-c-related-navigation__nav-section"
      aria-labelledby="related-nav-<%= section_title %>-<%= random %>"
      data-module="gem-toggle">
 

data/lib/govuk_publishing_components/presenters/component_wrapper_helper.rb

@@ -14,6 +14,10 @@ module GovukPublishingComponents
         check_hidden_is_valid(@options[:hidden]) if @options.include?(:hidden)
         check_tabindex_is_valid(@options[:tabindex]) if @options.include?(:tabindex)
         check_dir_is_valid(@options[:dir]) if @options.include?(:dir)
+        check_type_is_valid(@options[:type]) if @options.include?(:type)
+        check_draggable_is_valid(@options[:draggable]) if @options.include?(:draggable)
+        check_rel_is_valid(@options[:rel]) if @options.include?(:rel)
+        check_target_is_valid(@options[:target]) if @options.include?(:target)
         check_margin_bottom_is_valid(@options[:margin_bottom]) if @options.include?(:margin_bottom)
       end
 
@@ -33,6 +37,11 @@ module GovukPublishingComponents
         attributes[:hidden] = @options[:hidden] unless @options[:hidden].nil?
         attributes[:tabindex] = @options[:tabindex] unless @options[:tabindex].blank?
         attributes[:dir] = @options[:dir] unless @options[:dir].blank?
+        attributes[:type] = @options[:type] unless @options[:type].blank?
+        attributes[:draggable] = @options[:draggable] unless @options[:draggable].blank?
+        attributes[:rel] = @options[:rel] unless @options[:rel].blank?
+        attributes[:target] = @options[:target] unless @options[:target].blank?
+        attributes[:title] = @options[:title] unless @options[:title].blank?
 
         attributes
       end
@@ -87,6 +96,35 @@ module GovukPublishingComponents
         @options[:dir] = dir_attribute
       end
 
+      def set_type(type_attribute)
+        check_type_is_valid(type_attribute)
+        @options[:type] = type_attribute
+      end
+
+      def set_draggable(draggable_attribute)
+        check_draggable_is_valid(draggable_attribute)
+        @options[:draggable] = draggable_attribute
+      end
+
+      def add_rel(rel_attribute)
+        check_rel_is_valid(rel_attribute)
+        extend_string(:rel, rel_attribute)
+      end
+
+      def set_rel(rel_attribute)
+        check_rel_is_valid(rel_attribute)
+        @options[:rel] = rel_attribute
+      end
+
+      def set_target(target_attribute)
+        check_target_is_valid(target_attribute)
+        @options[:target] = target_attribute
+      end
+
+      def set_title(title_attribute)
+        @options[:title] = title_attribute
+      end
+
       def set_margin_bottom(margin_bottom)
         check_margin_bottom_is_valid(margin_bottom)
         @options[:margin_bottom] = margin_bottom
@@ -184,7 +222,7 @@ module GovukPublishingComponents
       end
 
       def check_dir_is_valid(dir_attribute)
-        return if dir_attribute.nil?
+        return if dir_attribute.blank?
 
         options = %w[ltr rtl auto]
         unless options.include? dir_attribute
@@ -192,6 +230,43 @@ module GovukPublishingComponents
         end
       end
 
+      def check_type_is_valid(type_attribute)
+        return if type_attribute.blank?
+
+        options = %w[button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week]
+        unless options.include? type_attribute
+          raise(ArgumentError, "type attribute (#{type_attribute}) is not recognised")
+        end
+      end
+
+      def check_draggable_is_valid(draggable_attribute)
+        return if draggable_attribute.blank?
+
+        options = %w[true false]
+        unless options.include? draggable_attribute
+          raise(ArgumentError, "draggable attribute (#{draggable_attribute}) is not recognised")
+        end
+      end
+
+      def check_rel_is_valid(rel_attribute)
+        return if rel_attribute.blank?
+
+        options = %w[alternate author bookmark canonical dns-prefetch external expect help icon license manifest me modulepreload next nofollow noopener noreferrer opener pingback preconnect prefetch preload prerender prev privacy-policy search stylesheet tag terms-of-service]
+        rel_array = rel_attribute.split(" ")
+        unless rel_array.all? { |r| options.include? r }
+          raise(ArgumentError, "rel attribute (#{rel_attribute}) is not recognised")
+        end
+      end
+
+      def check_target_is_valid(target_attribute)
+        return if target_attribute.blank?
+
+        options = %w[_self _blank _parent _top _unfencedTop]
+        unless options.include? target_attribute
+          raise(ArgumentError, "target attribute (#{target_attribute}) is not recognised")
+        end
+      end
+
       def extend_string(option, string)
         ((@options[option] ||= "") << " #{string}").strip!
       end

data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb

@@ -1,11 +1,11 @@
 module GovukPublishingComponents
   module Presenters
     class DevolvedNationsHelper
-      attr_reader :national_applicability, :type
+      attr_reader :national_applicability, :content_type
 
       def initialize(local_assigns)
         @national_applicability = local_assigns[:national_applicability]
-        @type = local_assigns[:type] || "publication"
+        @content_type = local_assigns[:content_type] || "publication"
       end
 
       def applicable_nations_title_text(use_english_translation = nil)
@@ -42,8 +42,8 @@ module GovukPublishingComponents
       def alternative_content_text(name)
         nation = I18n.t("components.devolved_nations.#{name}")
 
-        if I18n.exists?("components.devolved_nations.type.#{@type}")
-          I18n.t("components.devolved_nations.type.#{@type}", nation:)
+        if I18n.exists?("components.devolved_nations.type.#{@content_type}")
+          I18n.t("components.devolved_nations.type.#{@content_type}", nation:)
         else
           I18n.t("components.devolved_nations.type.publication", nation:)
         end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "47.0.0".freeze
+  VERSION = "49.0.0".freeze
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 47.0.0
+  version: 49.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 bindir: bin
 cert_chain: []
-date: 2025-01-07 00:00:00.000000000 Z
+date: 2025-01-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -505,6 +505,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/lib/trigger-event.js
 - app/assets/javascripts/govuk_publishing_components/load-analytics.js
 - app/assets/javascripts/govuk_publishing_components/modules.js
+- app/assets/javascripts/govuk_publishing_components/rum-custom-data.js
 - app/assets/javascripts/govuk_publishing_components/rum-loader.js
 - app/assets/javascripts/govuk_publishing_components/single-consent-functions.js
 - app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-measurer.js
@@ -593,7 +594,6 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_title.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
-- app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_button.scss
 - app/assets/stylesheets/govuk_publishing_components/components/govspeak/_call-to-action.scss

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss

@@ -1,36 +0,0 @@
-$info-background: #d5e8f3;
-$high-alert-border: #cc0000;
-
-.govspeak, // Legacy class name that's still used in some content items - needs to be kept until `.govspeak` is removed from the content items.
-.gem-c-govspeak {
-  .advisory {
-    background-image: url("govuk_publishing_components/icon-important.svg");
-    background-repeat: no-repeat;
-    background-size: 30px 30px;
-    background-position: 98% center;
-    background-color: $info-background;
-    line-height: 1.3em;
-    margin: 0 0 1em;
-    padding: govuk-spacing(3) govuk-spacing(8) govuk-spacing(3) govuk-spacing(3);
-    text-align: left;
-
-    p {
-      margin: 0 .75em 0 0;
-      min-height: 1.75em;
-      padding-right: 3em;
-    }
-
-    strong {
-      font-weight: 400;
-    }
-
-    &.high-alert {
-      background-color: govuk-colour("light-grey");
-      border: 1px solid $high-alert-border;
-    }
-
-    @include govuk-media-query($until: tablet) {
-      margin: 0 0 1em;
-    }
-  }
-}