govuk_publishing_components 21.67.1 → 23.0.0

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

@@ -10,6 +10,7 @@
   mobile_subtext ||= false
   light_text ||= false
   simple ||= false
+  simple_light ||= false
   dark_icon ||= false
   small_icon ||= false
   nhs_icon ||= false
@@ -24,6 +25,7 @@
   css_classes << "gem-c-action-link--transparent-icon" if transparent_icon
   css_classes << "gem-c-action-link--nhs" if nhs_icon
   css_classes << "gem-c-action-link--simple" if simple
+  css_classes << "gem-c-action-link--simple-light" if simple_light
   css_classes << "gem-c-action-link--with-subtext" if subtext
   css_classes << "gem-c-action-link--mobile-subtext" if mobile_subtext
   css_classes << (shared_helper.get_margin_bottom)

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

@@ -1,13 +1,10 @@
 <%-
   cl_helper = GovukPublishingComponents::Presenters::ContentsListHelper.new(local_assigns)
-  aria_label ||= "Contents"
+  aria_label ||= t("components.contents_list.contents")
   format_numbers ||= false
-  title_lang ||= false
-  title = local_assigns[:title].presence || t("components.contents_list.contents")
-  hide_title ||= false
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-
+  title_fallback = t("components.contents_list.contents", locale: I18n.locale, fallback: false, default: "en")
   classes = cl_helper.classes
   classes << brand_helper.brand_class
 -%>
@@ -21,14 +18,12 @@
       module: "track-click"
     }
   ) do %>
-    <% unless hide_title %>
-      <%= content_tag(
-        :h2,
-        class: "gem-c-contents-list__title",
-        lang: title_lang.presence
-      ) do %>
-        <%= title %>
-      <% end %>
+    <%= content_tag(
+      :h2, {class: "gem-c-contents-list__title"}.merge(
+        title_fallback == "en" ? {:lang => "en",} : {}
+      )
+    ) do %>
+      <%= t("components.contents_list.contents") %>
     <% end %>
 
     <ol class="gem-c-contents-list__list">

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

@@ -12,22 +12,18 @@
     <% if content.html_safe? %>
       <%= content %>
     <% else %>
-      <% puts "
-        You've passed in unsanitised HTML into the govspeak component as the
-        `content` param.
+      <% raise "
+        You've passed in unsanitised HTML into the Govspeak component as the
+        `content` parameter.
 
-        Passing in unsafe HTML is deprecated and will be removed in a future
-        version. You need to pass in a block instead or use the `capture` helper.
-
-        See the component guide for examples.
-
-        If you're 100% sure there's no unsanitised user input in the string you
-        could also call `.html_safe` on the string or use the `raw` helper before
-        passing it in.
+        To fix this use a `do` block with the sanitize method - see
+        https://components.publishing.service.gov.uk/component-guide/govspeak/
+        for the updated documentation and
+        https://github.com/alphagov/govuk_publishing_components/pull/1632/
+        for further examples.
 
         Called from #{caller_locations.find { |l| l.to_s.include?('.erb') }}
         " %>
-      <%= raw content %>
     <% end %>
   <% elsif block_given? %>
     <%= yield %>

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

@@ -1,4 +1,6 @@
 <%
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   id ||= "input-#{SecureRandom.hex(4)}"
   value ||= nil
   type ||= "text"
@@ -22,6 +24,7 @@
   error_id = "error-#{SecureRandom.hex(4)}"
   search_icon ||= nil
   heading_size = false unless ['s', 'm', 'l', 'xl'].include?(heading_size)
+  heading_level ||= nil
   prefix ||= nil
   suffix ||= nil
 
@@ -53,10 +56,20 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", {
-      html_for: id,
-      heading_size: heading_size
-    }.merge(label.symbolize_keys) %>
+    <% label_markup = capture do %>
+      <%= render "govuk_publishing_components/components/label", {
+        html_for: id,
+        heading_size: heading_size
+      }.merge(label.symbolize_keys) %>
+    <% end %>
+
+    <% if heading_level %>
+      <%= content_tag(shared_helper.get_heading_level, class: "govuk-label-wrapper") do %>
+        <%= label_markup %>
+      <% end %>
+    <% else %>
+      <%= label_markup %>
+    <% end %>
   <% end %>
 
   <% if hint %>

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

@@ -47,7 +47,6 @@
 
     <% unless omit_header %>
       <%= render "govuk_publishing_components/components/layout_header", {
-        environment: "public",
         search: show_search,
         # layout-header will always have border-bottom, unless the layout is full width
         remove_bottom_border: full_width,

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

@@ -1,6 +1,6 @@
 <%
-  product_name ||= "Publishing"
-  public_environment = environment.eql?("public")
+  product_name ||= nil
+  environment ||= nil
   full_width ||= false
   search ||= false
   search_left ||= false
@@ -8,8 +8,9 @@
   remove_bottom_border ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
+
   header_classes = %w(gem-c-layout-header govuk-header)
-  header_classes << "gem-c-layout-header--#{environment}"
+  header_classes << "gem-c-layout-header--#{environment}" if environment
   header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
   header_classes << "gem-c-layout-header--search-left" if search_left
 %>
@@ -19,7 +20,7 @@
     <% if search_left %>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
         <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
       </div>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
@@ -33,7 +34,7 @@
     <% else %>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
         <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
-          <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+          <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
         <div class="govuk-header__content gem-c-header__content">
           <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>

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

@@ -2,9 +2,11 @@
   description ||= false
   prepend ||= false
   append ||= false
+
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 %>
 <div class="gem-c-panel govuk-panel govuk-panel--confirmation">
-  <h2 class="govuk-panel__title">
+  <%= content_tag(shared_helper.get_heading_level, class: "govuk-panel__title") do %>
     <% if prepend %>
       <span class="gem-c-panel__prepend">
         <%= prepend %>
@@ -18,7 +20,8 @@
         <%= append %>
       </span>
     <% end %>
-  </h2>
+  <% end %>
+
   <% if description %>
     <div class="govuk-panel__body">
       <%= description %>

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

@@ -2,15 +2,19 @@
   text ||= t('components.print_link.text')
   href ||= nil
   data_attributes ||= {}
-
   require_js ||= href.nil?
+
   data_attributes[:module] = 'print-link' if require_js
+
+  classes = %w(govuk-link)
+  classes << "gem-c-print-link__button" if href.nil?
+  classes << "gem-c-print-link__link govuk-link--no-visited-state" if href.present?
 %>
 
 <% if require_js %>
   <div class="gem-c-print-link" >
     <%= content_tag(:button, text, {
-        class: %w(gem-c-print-link__button govuk-link),
+        class: classes,
         data: data_attributes
     }) %>
   </div>
@@ -19,9 +23,13 @@
     <%= link_to(
       text,
       href,
-      class: %w(gem-c-print-link__link govuk-link),
+      class: classes,
       rel: "alternate",
-      data: data_attributes
+      data: data_attributes,
+      role: "button",
+      data: {
+        module: "button",
+      },
     ) %>
   </div>
 <% end %>

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

@@ -16,7 +16,7 @@
 
   value ||= ""
   id ||= "search-main-" + SecureRandom.hex(4)
-  label_text ||= "Search GOV.UK"
+  label_text ||= "Search on GOV.UK"
   name ||= 'q'
   aria_controls ||= nil
 %>

data/app/views/govuk_publishing_components/components/_subscription-links.html.erb

@@ -11,6 +11,7 @@
   css_classes = %w( gem-c-subscription-links )
   css_classes << (shared_helper.get_margin_bottom) unless local_assigns[:margin_bottom] == 0
   css_classes << brand_helper.brand_class
+  css_classes << "gem-c-subscription-links--with-feed-box" if sl_helper.feed_link_box_value
 
   data = {"module": "gem-toggle"} if sl_helper.feed_link_box_value
 
@@ -30,9 +31,12 @@
     >
       <% if sl_helper.email_signup_link.present? %>
         <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>" >
-          <svg xmlns="http://www.w3.org/2000/svg" width="21" height="15.75" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M19.687 0H1.312C.589 0 0 .587 0 1.313v13.124c0 .726.588 1.313 1.313 1.313h18.374c.725 0 1.313-.587 1.313-1.313V1.313C21 .587 20.412 0 19.687 0zm-2.625 2.625L10.5 7.875l-6.563-5.25h13.126zm1.313 10.5H2.625V3.937L10.5 10.5l7.875-6.563v9.188z"/></svg>
-          <%= link_to sl_helper.email_signup_link_text, sl_helper.email_signup_link, {
-            class: "gem-c-subscription-links__link #{brand_helper.color_class}",
+          <% email_link_text = capture do %>
+           <svg xmlns="http://www.w3.org/2000/svg" width="21" height="15.75" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M19.687 0H1.312C.589 0 0 .587 0 1.313v13.124c0 .726.588 1.313 1.313 1.313h18.374c.725 0 1.313-.587 1.313-1.313V1.313C21 .587 20.412 0 19.687 0zm-2.625 2.625L10.5 7.875l-6.563-5.25h13.126zm1.313 10.5H2.625V3.937L10.5 10.5l7.875-6.563v9.188z"/></svg>
+           <%= sl_helper.email_signup_link_text %>
+          <% end %>
+          <%= link_to email_link_text, sl_helper.email_signup_link, {
+            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
             data: sl_helper.email_signup_link_data_attributes,
             lang: email_signup_link_text_locale
           } %>
@@ -41,21 +45,28 @@
 
       <% if sl_helper.feed_link_box_value || sl_helper.feed_link %>
         <li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>">
-          <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M1.996 11A2 2 0 0 0 0 12.993c0 1.101.895 1.99 1.996 1.99 1.106 0 2-.889 2-1.99a2 2 0 0 0-2-1.993zM.002 5.097V7.97c1.872 0 3.632.733 4.958 2.059A6.984 6.984 0 0 1 7.015 15h2.888c0-5.461-4.443-9.903-9.9-9.903zM.006 0v2.876c6.676 0 12.11 5.44 12.11 12.124H15C15 6.731 8.273 0 .006 0z"/></svg>
-          <%= link_to sl_helper.feed_link_text, sl_helper.feed_link,
+          <% feed_link_text = capture do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M1.996 11A2 2 0 0 0 0 12.993c0 1.101.895 1.99 1.996 1.99 1.106 0 2-.889 2-1.99a2 2 0 0 0-2-1.993zM.002 5.097V7.97c1.872 0 3.632.733 4.958 2.059A6.984 6.984 0 0 1 7.015 15h2.888c0-5.461-4.443-9.903-9.9-9.903zM.006 0v2.876c6.676 0 12.11 5.44 12.11 12.124H15C15 6.731 8.273 0 .006 0z"/></svg>
+           <%= sl_helper.feed_link_text %>
+          <% end %>
+          <%= tag.button feed_link_text, {
+            class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
+            data: sl_helper.feed_link_data_attributes,
+            lang: feed_link_text_locale
+          } if sl_helper.feed_link_box_value %>
+          <%= link_to feed_link_text, sl_helper.feed_link,
             {
-              class: "gem-c-subscription-links__link #{brand_helper.color_class}",
+              class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
               data: sl_helper.feed_link_data_attributes,
               lang: feed_link_text_locale
-            }
-          %>
+            } unless sl_helper.feed_link_box_value %>
         </li>
       <% end %>
     </ul>
 
     <% if sl_helper.feed_link_box_value %>
       <div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
-        <p class="gem-c-subscription-links__feed-hidden-description visuallyhidden"><%= sl_helper.feed_link_text %></p>
+        <h3 class="gem-c-subscription-links__feed-hidden-description visuallyhidden govuk-!-margin-top-0"><%= sl_helper.feed_link_text %></h3>
         <div lang="en">
           <%= render "govuk_publishing_components/components/input", {
             label: {

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

@@ -83,6 +83,14 @@ examples:
       text: Getting financial help and keeping your business safe
       href: "/financial-help"
       simple: true
+  simple_light_arrow:
+    data:
+      text: Getting financial help and keeping your business safe
+      href: "/financial-help"
+      light_text: true
+      simple_light: true
+    context:
+      dark_background: true
   with_small_icon:
     data:
       text: Coronavirus (COVID-19)

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

@@ -203,40 +203,3 @@ examples:
             text: 2. Numbers not parsed
           - href: "#third-thing"
             text: 3. Numbers are just text
-  without_a_title:
-    description: The component can be used to provide a list of links to other pages, in which case the 'Contents' title is inappropriate and can be removed.
-    data:
-      hide_title: true
-      contents:
-        - href: "#first-thing"
-          text: Community best practice
-          items:
-          - href: "#second-thing"
-            text: Guidance and regulation
-          - href: "#third-thing"
-            text: Consultations
-  with_a_custom_title:
-    description: Override the default title of "Contents" with a custom title
-    data:
-      title: "On this page"
-      contents:
-        - href: "#first-thing"
-          text: First thing
-        - href: "#second-thing"
-          text: Second thing
-        - href: "#third-thing"
-          text: Third thing
-  with_a_custom_title_locale:
-    description: |
-      This component is often used on translated pages that don’t have a translation for the title of the contents list. This means that it could display the fallback English string if the translate method can’t find an appropriate translation. This makes sure that the lang can be set to ensure that browsers understand which parts of the page are in each language.
-
-      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:
-      title_lang: "cy"
-      contents:
-        - href: "#first-thing"
-          text: First thing
-        - href: "#second-thing"
-          text: Second thing
-        - href: "#third-thing"
-          text: Third thing

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

@@ -24,12 +24,7 @@ examples:
     data:
       block: |
         <h2>This is a title</h2>
-          <p>This is some body text with <a href=#>a link</a></p>
-  with_content:
-    data:
-      content: |
-        <h2>This is a title</h2>
-        <p>This is some body text with <a href=#>a link</a></p>
+          <p>This is some body text with <a href="https://example.com">a link</a>.</p>
   heading_levels:
     data:
       block: |

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

@@ -125,12 +125,16 @@ examples:
       name: "search-box"
       type: "search"
       search_icon: true
-  with_custom_label_size:
-    description: Make the label different sizes. Valid options are 's', 'm', 'l' and 'xl'.
+  with_label_as_heading:
+    description: |
+      Wraps the label in a heading tag. Valid options are 1 to 6. To adjust the size of the label/heading, use the `heading_size` option. Valid options are 's', 'm', 'l' and 'xl'.
+
+      Based on the [heading/label pattern](https://design-system.service.gov.uk/patterns/question-pages/) in the Design System.
     data:
       label:
-        text: "What is your name?"
+        text: "This is a heading 1 and a label"
       name: "name"
+      heading_level: 1
       heading_size: "l"
   with_prefix:
     description: To help users understand how the input should look like. Often used for units of measurement.

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

@@ -44,7 +44,6 @@ examples:
     description: This supports pages where the search appears on the left with multiple navigation links on the right, such as the [How government works](https://www.gov.uk/government/how-government-works) page
     data:
       search_left: true
-      environment: public
       navigation_items:
       - text: Departments
         href: "item-1"
@@ -71,10 +70,8 @@ examples:
     description: This is useful for pages where a large full-width banner is the first thing to appear on the page, for example, the [GOV.UK homepage](https://www.gov.uk)
     data:
       remove_bottom_border: true
-      environment: 'public'
   with_search_bar:
     data:
-      environment: 'public'
       search: true
 
 accessibility_criteria: |

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

@@ -23,3 +23,7 @@ examples:
       prepend: The next bank holiday in England and Wales is
       title: 19 April
       append: Good Friday
+  with_different_heading_level:
+    data:
+      title: This is a H1
+      heading_level: 1

data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb

@@ -6,18 +6,18 @@
   <div class="gem-c-feedback__prompt-questions js-prompt-questions">
     <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful", default: "Is this page useful?") %></h2>
     <!-- Maybe button exists only to try and capture clicks by bots -->
-    <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link" data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
+    <button data-track-category="yesNoFeedbackForm" data-track-action="ffMaybeClick" aria-expanded="false" style="display: none" hidden="hidden" aria-hidden="true">
       <%= t("components.feedback.maybe", default: "Maybe") %>
     </button>
     
     <ul class="gem-c-feedback__option-list">
       <li class="gem-c-feedback__option-list-item">
-        <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">
+        <button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">
           <%= t("components.feedback.yes", default: "Yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful", default: "this page is useful") %></span>
         </button>
       </li>
       <li class="gem-c-feedback__option-list-item">
-        <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false">
+        <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false">
           <%= t("components.feedback.no", default: "No") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful", default: "this page is not useful") %></span>
         </button>
       </li>
@@ -27,8 +27,8 @@
     <%= t("components.feedback.thank_you_for_feedback", default: "Thank you for your feedback") %>
   </div>
   <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
-    <button class="govuk-button govuk-button--secondary gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
-      <%= t("components.feedback.anything_wrong", default: "Is there anything wrong with this page?") %>
+    <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
+      <%= t("components.feedback.something_wrong", default: "There is something wrong with this page") %>
     </button>
   </div>
 </div>