govuk_publishing_components 46.4.0 → 47.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7972dc1e95cf1c1175ee81653f3b298d0d2d930b62bbd8c1035ba110fbbdcb72
-  data.tar.gz: f55e702ced40190a656f098fc3f192738b1478cf989a0b532051a778a308126b
+  metadata.gz: fd401f42bccab58df5ab5fb8d73e8faca9662f68038087b3fe103f0fd383bd21
+  data.tar.gz: 14202a57ad52922b57252c5484bfe7540dbc0d1e2c83690881bf4aed17cc185b
 SHA512:
-  metadata.gz: a588ba7241dc601438da646c2fc3ca9f5ddc93750cdaebac5e913f9a006acb8b13f61d7fe28b30936b41ba5268817876de7c235e4016f50790d5732d313a3939
-  data.tar.gz: d4f317981b263f21b71a8768600f6582c4a0592c22721f858a3e712f6756dca05c86e0cac787872043703df463456a8c7fed95b63cbc0377657dbdbbe35f960e
+  metadata.gz: ef6d0b85a5a028746ca5df2d9dd301cae0401b22d3b9aac4bad2beeeba292ba128940284539b68c1ccc9d6ecd175ab9173bb4e7e49e411f2d252b3a53dda17e9
+  data.tar.gz: 9692404de6256b99bd839ab47e7dd26b52d3641cf51c503caa7d530a7c5a98cf826e47af9deb3f26701805ff8048e9ba2bb2824d69988388cce1ae3412bb294c

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -19,7 +19,6 @@
 @import "components/button";
 @import "components/cards";
 @import "components/character-count";
-@import "components/chat-entry";
 @import "components/checkboxes";
 @import "components/contents-list";
 @import "components/contextual-guidance";

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

@@ -1,6 +1,7 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.gem-c-heading {
+.gem-c-heading,
+.gem-c-heading__text {
   margin: 0;
 }
 
@@ -9,18 +10,6 @@
   @include govuk-font(27, $weight: bold);
 }
 
-// special case for publications and consultations pages
-// separated to allow normalisation of the component for wider use
-.gem-c-heading--mobile-top-margin {
-  margin-top: govuk-spacing(6);
-  margin-bottom: govuk-spacing(3);
-
-  @include govuk-media-query($from: tablet) {
-    margin-top: 0;
-    margin-bottom: govuk-spacing(6);
-  }
-}
-
 .gem-c-heading--padding {
   padding: govuk-spacing(3) 0;
 }
@@ -43,7 +32,10 @@
 }
 
 .gem-c-heading--inverse {
-  color: govuk-colour("white");
+  .gem-c-heading__context,
+  .gem-c-heading__text {
+    color: govuk-colour("white");
+  }
 }
 
 // stylelint-disable declaration-no-important

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -82,6 +82,10 @@
   }
 }
 
+.gem-c-organisation-logo__link-hide-underline:link:not(:hover) {
+  text-decoration: none;
+}
+
 .gem-c-organisation-logo--inverse {
   .gem-c-organisation-logo__container {
     border-color: govuk-colour("white");

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_highlight-answer.scss

@@ -9,8 +9,8 @@ $highlight-answer-color: govuk-colour("white");
     background-color: $highlight-answer-bg-color;
     color: $highlight-answer-color;
     text-align: center;
-    padding: 1.75em .75em 1.25em;
-    margin: 0 0 1em;
+    padding: govuk-spacing(5) govuk-spacing(2) govuk-spacing(4);
+    margin: 0 0 govuk-spacing(2);
 
     p {
       color: $highlight-answer-color;
@@ -18,7 +18,7 @@ $highlight-answer-color: govuk-colour("white");
 
       em {
         display: block;
-        padding-top: .1em;
+        padding-top: govuk-spacing(2);
         color: $highlight-answer-color;
         @include govuk-font($size: 80, $weight: bold);
       }
@@ -29,7 +29,7 @@ $highlight-answer-color: govuk-colour("white");
     }
 
     @include govuk-media-query($until: tablet) {
-      margin: 0 0 1em;
+      margin: 0 0 govuk-spacing(2);
       @include govuk-font($size: 48);
 
       p {

data/app/models/govuk_publishing_components/component_doc.rb

@@ -83,7 +83,7 @@ module GovukPublishingComponents
     end
 
     def github_search_url
-      params = { q: "org:alphagov components/components/#{id}", type: "Code" }
+      params = { q: "org:alphagov #{partial_path}", type: "Code" }
       "https://github.com/search?#{params.to_query}"
     end
 

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

@@ -3,21 +3,36 @@
 
   brand ||= false
   lang = local_assigns[:lang].presence
+  context ||= false
+  context_locale ||= false
+  context_inside ||= false
 
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   heading_helper = GovukPublishingComponents::Presenters::HeadingHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
 
-  classes = %w(gem-c-heading)
-  classes << heading_helper.classes
-  classes << brand_helper.brand_class
-  classes << brand_helper.border_color_class
-
-  component_helper.add_class(classes.join(" "))
+  component_helper.add_class("gem-c-heading")
+  component_helper.add_class(heading_helper.classes)
+  component_helper.add_class(brand_helper.brand_class)
+  component_helper.add_class(brand_helper.border_color_class)
   component_helper.set_id(heading_helper.id)
-  element = shared_helper.get_heading_level
 %>
-<%= content_tag(element, component_helper.all_attributes) do %>
-  <%= text %>
+<% context_block = capture do %>
+  <span class="govuk-caption-xl gem-c-heading__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
+    <%= context %>
+  </span>
+<% end %>
+
+<%= tag.div(**component_helper.all_attributes) do %>
+  <% if context && !context_inside %>
+    <%= context_block %>
+  <% end %>
+
+  <%= content_tag(shared_helper.get_heading_level, class: heading_helper.heading_classes) do %>
+    <% if context && context_inside %>
+      <%= context_block %>
+    <% end %>
+    <%= text %>
+  <% end %>
 <% end %>

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

@@ -3,5 +3,10 @@
 
   href ||= '#main-content'
   text ||= t('components.skip_link.text')
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-skip-link govuk-skip-link govuk-!-display-none-print")
+  component_helper.add_data_attribute({ module: "govuk-skip-link" })
+
 %>
-<%= link_to(text, href, class: "gem-c-skip-link govuk-skip-link govuk-!-display-none-print", data: { module: "govuk-skip-link" }) %>
+<%= link_to(text, href, **component_helper.all_attributes) %>

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

@@ -10,10 +10,11 @@
   ]
   breadcrumb_presenter = GovukPublishingComponents::Presenters::Breadcrumbs.new(breadcrumbs)
 
-  data = {}
-  data[:module] = "ga4-link-tracker" unless disable_ga4
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-step-nav-header")
 
   unless disable_ga4
+    component_helper.add_data_attribute({ module: "ga4-link-tracker" })
     ga4_data = {
       event_name: "navigation",
       type: "super breadcrumb",
@@ -21,17 +22,13 @@
       index_total: "1",
     }.to_json
   end
-
-  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = %w[gem-c-step-nav-header]
-  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <% if title %>
   <script type="application/ld+json">
     <%= raw JSON.pretty_generate(breadcrumb_presenter.structured_data) %>
   </script>
 
-  <%= tag.div(class: classes, data: data) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <strong class="gem-c-step-nav-header__part-of">Part of</strong>
     <% if path %>
       <a href="<%= path %>"

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

@@ -4,13 +4,14 @@
   links ||= []
   pretitle ||= t("components.step_by_step_nav_related.part_of")
   always_display_as_list ||= false
-  classes = %w(gem-c-step-nav-related)
-  classes << "gem-c-step-nav-related--singular" if links.length == 1
-  data = {}
-  data[:module] = "ga4-link-tracker" unless disable_ga4
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-step-nav-related")
+  component_helper.add_class("gem-c-step-nav-related--singular") if links.length == 1
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
 %>
 <% if links.any? %>
-  <%= tag.div(class: classes, data: data) do %>
+  <%= tag.div(**component_helper.all_attributes) do %>
     <h2 class="gem-c-step-nav-related__heading">
       <span class="gem-c-step-nav-related__pretitle"><%= pretitle %></span>
       <% if links.length == 1 && !always_display_as_list %>

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/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/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/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/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: