govuk_publishing_components 46.4.0 → 48.0.0

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

@@ -4,12 +4,14 @@
   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_role("navigation")
+  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 +29,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/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/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/heading.yml

@@ -15,7 +15,7 @@ accessibility_criteria: |
   - be part of a correct heading structure for a page
   - be semantically represented as a heading
   - convey the heading level
-uses_component_wrapper_helper: true  
+uses_component_wrapper_helper: true
 examples:
   default:
     data:
@@ -26,7 +26,7 @@ examples:
       heading_level: 3
   different_font_sizes:
     description: |
-      Set a different font size for the heading. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/typography/#headings) but defaults to 27px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
+      Set a different font size for the heading. Uses the [GOV.UK Frontend heading sizes](https://design-system.service.gov.uk/styles/headings/) but defaults to 27px for legacy reasons. Valid options are `xl`, `l`, `m` and `s`.
 
       This option is not tied to the `heading_level` option in order to give flexibility.
     data:
@@ -47,14 +47,6 @@ examples:
     data:
       text: 'Really big bottom margin'
       margin_bottom: 9
-  with_mobile_top_margin:
-    description: |
-      On publications and consultations the layout of the page requires that the heading component have spacing above it on mobile. Since this is a specific use case, this is now an option on the component rather than the default behaviour.
-
-      It is intended that this option will ultimately be deprecated once more of the frontend is componentised and a general component model of margins is implemented.
-    data:
-      text: 'Consultation description'
-      mobile_top_margin: true
   with_border:
     description: A top border can be applied to the component of different thicknesses. Accepted values are `1` (`1px`), `2` (`2px`) and `5` (`5px`). Note that this works best with padding applied.
     data:
@@ -82,3 +74,35 @@ examples:
     data:
       text: "Ein gweinidogion"
       lang: "cy"
+  with_context:
+    description: Context is applied sometimes where the heading is used as a page title H1. Note that the text size of the context is larger than the default size of the heading, so a larger `font_size` should be applied as shown.
+    data:
+      text: I like toast
+      context: Food opinion
+      font_size: "xl"
+  with_context_inside:
+    description: |
+      If the context should be considered part of the page heading, you can nest the context within the <code><h1></code>.
+    data:
+      context: Publication
+      text: My page title
+      font_size: "xl"
+      context_inside: true
+  with_context_language_labelled:
+    description: |
+      Sometimes this component appears on a page that has been translated. The title will naturally be supplied in the required language but the context string may fall back to the default. In these instances we need to label the language so the page remains semantic and screenreaders can handle the switch.
+
+      The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
+    data:
+      context: Publication
+      context_locale: en
+      text: My page title
+      font_size: "xl"
+  with_context_inverted:
+    data:
+      context: Publication
+      text: My page title
+      font_size: "xl"
+      inverse: true
+    context:
+      dark_background: true

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/inverse_header.yml

@@ -3,7 +3,7 @@ description: A wrapper to contain header content in white text
 body: |
   This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings but unopinionated about its contents.
 
-  If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/typography/#links-on-dark-backgrounds).
+  If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/links/#links-on-dark-backgrounds).
 uses_component_wrapper_helper: true
 accessibility_criteria: |
   The component must:

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/organisation_logo.yml

@@ -183,6 +183,15 @@ examples:
         brand: cabinet-office
         crest: 'single-identity'
       inline: true
+  no_underline_until_hover:
+    description: Remove the underline text-decoration unless hovered. Useful when combined with the `inverse` option.
+    data:
+      organisation:
+        name: Cabinet Office
+        url: '/government/organisations/cabinet-office'
+        brand: cabinet-office
+        crest: 'single-identity'
+      hide_underline: true
   on_a_dark_background:
     data:
       organisation:

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/skip_link.yml

@@ -11,6 +11,7 @@ accessibility_criteria: |
   - is the first items that screen readers hear and that keyboard users tab to
 accessibility_excluded_rules:
   - skip-link # This component is creating a reference to #content which is part of the layout
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -12,6 +12,7 @@ accessibility_criteria: |
   Always place the step by step navigation header at the top of a page, before the `<main>` element. Placing the component here means that the "Skip to main content" link allows the user to skip all navigation links, including the step by step navigation header.
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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

@@ -16,6 +16,7 @@ accessibility_criteria: |
   - display multiple links outside of a heading in a separate list
 shared_accessibility_criteria:
   - link
+uses_component_wrapper_helper: true
 examples:
   default:
     data:

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_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/config/locales/ar.yml

@@ -36,14 +36,6 @@ ar:
       type:
         characters: أحرف
         words: كلمات
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: أو
     contents_list:

data/config/locales/az.yml

@@ -32,14 +32,6 @@ az:
       type:
         characters: simvol
         words: söz
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: və ya
     contents_list:

data/config/locales/be.yml

@@ -34,14 +34,6 @@ be:
       type:
         characters: знакаў
         words: словаў
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: або
     contents_list:

data/config/locales/bg.yml

@@ -32,14 +32,6 @@ bg:
       type:
         characters: символа
         words: думи
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: или
     contents_list:

data/config/locales/bn.yml

@@ -32,14 +32,6 @@ bn:
       type:
         characters: ক্যারেক্টার
         words: শব্দসমষ্টি
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: অথবা
     contents_list:

data/config/locales/cs.yml

@@ -33,14 +33,6 @@ cs:
       type:
         characters: znaky
         words: slova
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: nebo
     contents_list:

data/config/locales/cy.yml

@@ -36,14 +36,6 @@ cy:
       type:
         characters: nodau
         words: geiriau
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: neu
     contents_list:

data/config/locales/da.yml

@@ -32,14 +32,6 @@ da:
       type:
         characters: Tegn
         words: ord
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: eller
     contents_list:

data/config/locales/de.yml

@@ -32,14 +32,6 @@ de:
       type:
         characters: Zeichen
         words: Wörter
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: oder
     contents_list:

data/config/locales/dr.yml

@@ -35,14 +35,6 @@ dr:
       type:
         characters: ارقام
         words: کلمات
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: یا
     contents_list:

data/config/locales/el.yml

@@ -32,14 +32,6 @@ el:
       type:
         characters: χαρακτήρες
         words: λέξεις
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: ή
     contents_list:

data/config/locales/en.yml

@@ -32,14 +32,6 @@ en:
       type:
         characters: characters
         words: words
-    chart:
-      table_dropdown: View data as a table
-      accessibility_html: This chart is a visual representation of the data available in the table.
-      accessibility_link: Skip to "%{chart_heading}" data table
-      accessibility_heading: Data table for "%{chart_heading}"
-    chat_entry:
-      heading: Ask GOV.UK Chat
-      description: Get quick, tailored answers to your business questions with GOV.UK’s new AI tool
     checkboxes:
       or: or
     contents_list:

data/config/locales/es-419.yml

@@ -32,14 +32,6 @@ es-419:
       type:
         characters: caracteres
         words: palabras
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: o
     contents_list:

data/config/locales/es.yml

@@ -32,14 +32,6 @@ es:
       type:
         characters: caracteres
         words: palabras
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: o bien
     contents_list:

data/config/locales/et.yml

@@ -32,14 +32,6 @@ et:
       type:
         characters: tähemärki
         words: sõnu
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: või
     contents_list:

data/config/locales/fa.yml

@@ -32,14 +32,6 @@ fa:
       type:
         characters: کاراکتر
         words: کلمه
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: یا
     contents_list:

data/config/locales/fi.yml

@@ -32,14 +32,6 @@ fi:
       type:
         characters: merkkejä
         words: sanoja
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: tai
     contents_list:

data/config/locales/fr.yml

@@ -32,14 +32,6 @@ fr:
       type:
         characters: caractères
         words: mots
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: ou
     contents_list:

data/config/locales/gd.yml

@@ -34,14 +34,6 @@ gd:
       type:
         characters: Figiúr
         words: Carachtar
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: Cá háit
     contents_list:

data/config/locales/gu.yml

@@ -32,14 +32,6 @@ gu:
       type:
         characters: અક્ષરો
         words: શબ્દો
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: અથવા
     contents_list:

data/config/locales/he.yml

@@ -32,14 +32,6 @@ he:
       type:
         characters: תווים
         words: מילים
-    chart:
-      accessibility_heading:
-      accessibility_html:
-      accessibility_link:
-      table_dropdown:
-    chat_entry:
-      description:
-      heading:
     checkboxes:
       or: או
     contents_list: