govuk_publishing_components 23.12.0 → 23.13.1

data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss

@@ -72,4 +72,9 @@
       list-style: none;
     }
   }
+
+  .mc-toggle-button,
+  .mc-chart-container {
+    display: none;
+  }
 }

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

@@ -1,4 +1,5 @@
 <%
+  # button_helper.css_classes generates "gem-c-button"
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   local_assigns[:classes] = shared_helper.classes
   button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns)

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

@@ -5,6 +5,7 @@
   search ||= false
   search_left ||= false
   navigation_items ||= []
+  navigation_aria_label ||= "Top level"
   remove_bottom_border ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
@@ -28,7 +29,7 @@
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
         <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
       </div>
     <% else %>
@@ -37,7 +38,7 @@
           <%= 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  %>
+          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
         <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">

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

@@ -9,7 +9,7 @@
 <% structured_data = GovukPublishingComponents::Presenters::SchemaOrg.new(page).structured_data %>
 
 <script type="application/ld+json">
-  <%= raw JSON.pretty_generate(structured_data) %>
+  <%= raw(json_escape(JSON.pretty_generate(structured_data))) %>
 </script>
 
 <link rel="canonical" href="<%= page.canonical_url %>" />

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

@@ -24,8 +24,8 @@
     <%= "data-id=#{tracking_id}" if tracking_id %>
     data-show-text="<%= t("govuk_component.step_by_step_nav.show", default: "show") %>"
     data-hide-text="<%= t("govuk_component.step_by_step_nav.hide", default: "hide") %>"
-    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all") %>"
-    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all") %>"
+    data-show-all-text="<%= t("govuk_component.step_by_step_nav.show_all", default: "Show all steps") %>"
+    data-hide-all-text="<%= t("govuk_component.step_by_step_nav.hide_all", default: "Hide all steps") %>"
   >
     <ol class="gem-c-step-nav__steps">
       <% steps.each_with_index do |step, step_index| %>

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

@@ -1,4 +1,7 @@
 <%
+  # DO NOT MAKE CHANGES TO THIS FILE
+  # It is a temporary copy of _subscription_links.html.erb and will be deleted shortly
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
 

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

@@ -0,0 +1,82 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+
+  sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
+  local_assigns[:margin_bottom] ||= 0
+  local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
+
+  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
+
+  hide_heading ||= false
+
+  email_signup_link_text_locale = local_assigns[:email_signup_link_text_locale].presence
+  feed_link_text_locale = local_assigns[:feed_link_text_locale].presence
+%>
+<% if sl_helper.component_data_is_valid? %>
+  <%= tag.section class: css_classes, data: data do %>
+    <% unless hide_heading %>
+      <h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
+    <% end %>
+    <ul
+      class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
+      <%= "data-module=track-click" if sl_helper.tracking_is_present? %>
+    >
+      <% 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 %>" >
+          <% 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
+          } %>
+        </li>
+      <% end %>
+
+      <% 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 %>">
+          <% 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__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 %>">
+        <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: {
+              text: "Copy and paste this URL into your feed reader"
+            },
+            name: "feed-reader-box",
+            value: feed_link_box_value
+          } %>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/govuk_publishing_components/components/_translation-nav.html.erb

@@ -1,4 +1,7 @@
 <%
+  # DO NOT MAKE CHANGES TO THIS FILE
+  # It is a temporary copy of _translation_nav.html.erb and will be deleted shortly
+
   brand ||= false
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
   translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)

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

@@ -0,0 +1,30 @@
+<%
+  brand ||= false
+  brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
+  translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
+%>
+<% if translation_helper.has_translations? %>
+  <nav role="navigation"
+    class="gem-c-translation-nav <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
+    aria-label="<%= t("common.translations") %>"
+    <%= "data-module=\"track-click\"" if translation_helper.tracking_is_present? %>
+  >
+    <ul class="gem-c-translation-nav__list">
+      <% translation_helper.translations.each.with_index do |translation, i| %>
+        <li class="gem-c-translation-nav__list-item">
+          <% if translation[:active] %>
+            <span lang="<%= translation[:locale] %>"><%= translation[:text] %></span>
+          <% else %>
+            <%= link_to translation[:text], translation[:base_path],
+              hreflang: translation[:locale],
+              lang: translation[:locale],
+              rel: "alternate",
+              class: "gem-c-translation-nav__link #{brand_helper.color_class}",
+              data: translation[:data_attributes]
+            %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+<% end %>

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

@@ -60,6 +60,27 @@ examples:
       - text: News and communications
         href: "item-6"
         active: true
+  with_custom_navigation_aria_label:
+    description: The navigation has `aria-label="Top level"` by default. This option is here for when the `aria-label` needs to be more descriptive than that.
+    data:
+      search_left: true
+      navigation_aria_label: "Departments and policy"
+      navigation_items:
+      - text: Departments
+        href: "item-1"
+      - text: Worldwide
+        href: "item-2"
+      - text: How government works
+        href: "item-3"
+      - text: Get involved
+        href: "item-4"
+      - text: Consultations
+        href: "item-4"
+      - text: Statistics
+        href: "item-5"
+      - text: News and communications
+        href: "item-6"
+        active: true
   full_width:
     description: |
       This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.

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

@@ -4,11 +4,43 @@ body: |
   This takes a content-store links hash like object which it can then turn into
   the correct analytics identifier metadata tags.
 
-  The code which reads the meta tags can be found <a href="https://github.com/alphagov/static/blob/master/app/assets/javascripts/analytics/static-analytics.js#L76-L96">in static-analytics.js</a>.
+  These are additionally used by the <a href="https://github.com/alphagov/govuk-browser-extension">GOV.UK browser extension</a> to provide details about a given page. 
+
+  The code which reads the meta tags can be found <a href="https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/javascripts/govuk_publishing_components/analytics/custom-dimensions.js">in custom-dimensions.js</a>.
 accessibility_criteria: |
   The analytics meta tags component should not be visible to any users.
 display_html: true
 examples:
+  with_core_tags:
+    data:
+      content_item:
+        document_type: "html_publication"
+        publishing_app: "whitehall"
+        schema_name: "html_publication"
+        content_id: "00000000-0000-0000-0000-00000000000"
+        navigation_page_type: "Taxon Page"
+        section: "business tax"
+        withdrawn_notice: true
+  with_content_history_tags:
+    description: |
+      The tags in this object will generate the `content-has-history` tag, set to true. This tag is triggered when either, within `content_item`:
+      
+      1. `public_updated_at` and `first_public_at` within `details` are both present and they aren't the same value
+      2. `change_history` within `details` is present and it has a value of more than 1
+
+      See below example for specific details.
+    data:
+      content_item:
+        public_updated_at: "2021-01-15T12:30:45.000+00:00"
+        details:
+          first_public_at: "2020-11-03T09:15:00.000+00:00"
+          change_history: "5"
+  with_date_and_postcode_stripping_for_static_analytics:
+    data:
+      content_item:
+      local_assigns:
+        strip_dates_pii: true
+        strip_postcodes_pii: true
   with_organisations:
     data:
       content_item:
@@ -24,3 +56,69 @@ examples:
         links:
           world_locations:
           - analytics_identifier: WL3
+  with_political_tags:
+    data:
+      content_item:
+        details:
+          political: true
+          government:
+            current: true
+            slug: "2010-to-2015-conservative-and-liberal-democrat-coalition-government"
+  with_historic_political_tags:
+    data:
+      content_item:
+        details:
+          political: true
+          government:
+            current: false
+            slug: "2010-to-2015-conservative-and-liberal-democrat-coalition-government"
+  with_non-political_tags:
+    data:
+      content_item:
+        details:
+          political: false
+          government:
+            slug: "2010-to-2015-conservative-and-liberal-democrat-coalition-government"
+  with_taxonomy_added_via_document_type:
+    description: |
+      You can trigger taxonomy tag rendering by either including a `document_type` attributes of "taxon" or including the `parent_taxons` or `taxons` attributes under the `links` attribute.
+    data:
+      content_item:
+        content_id: "00000000-0000-0000-0000-000000000000"
+        document_type: "taxon"
+        base_path: "/example-of-taxons"
+  with_taxonomy_added_via_links:
+    data:
+      content_item:
+        links:
+          taxons:
+            - content_id: "11111111-1111-1111-1111-111111111111"
+              document_type: "taxon"
+              base_path: "/disabilities-benefits"
+            - content_id: "22222222-2222-2222-2222-222222222222"
+              document_type: "taxon"
+              base_path: "/childcare-parenting/childrens-social-care-providers"
+              links:
+                parent_taxons:
+                  - content_id: "33333333-3333-3333-3333-333333333333"
+                    document_type: "taxon"
+                    base_path: "/childcare-parenting"
+  with_multiple_step_by_step_tags:
+    data:
+      content_item:
+        links:
+          part_of_step_navs:
+            - content_id: "00000000-0000-0000-0000-000000000000"
+            - content_id: "11111111-1111-1111-1111-111111111111"
+  with_primary_step_by_step_tag:
+    data:
+      content_item:
+        links:
+          part_of_step_navs:
+            - content_id: "00000000-0000-0000-0000-000000000000"
+  with_secondary_step_by_step_tag:
+    data:
+      content_item:
+        links:
+          secondary_to_step_navs:
+            - content_id: "22222222-2222-2222-2222-222222222222"

data/app/views/govuk_publishing_components/components/docs/subscription-links.yml

@@ -1,3 +1,6 @@
+# DO NOT MAKE CHANGES TO THIS FILE
+# It is a temporary copy of subscription_links.yml and will be deleted shortly
+
 name: Subscription links
 description: Links to ‘Get emails’ and ‘Subscribe to feed’
 body: |

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

@@ -0,0 +1,100 @@
+name: Subscription links
+description: Links to ‘Get emails’ and ‘Subscribe to feed’
+body: |
+  <strong>NOTE: This component includes a h2 heading by default but can be suppressed by using `hide_heading` option (see below)<strong>
+accessibility_criteria: |
+  Icons in subscription links must be presentational and ignored by screen readers.
+
+  Toggle elements in the component must:
+
+  - be usable with a keyboard
+  - be usable with touch
+  - be recognised by screen readers as a button
+  - announce to screen readers whether they are expanded or collapsed
+  - show hidden elements by default when Javascript is disabled
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+  with_margin:
+    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 having no margin bottom, although some margin is supplied by the links themselves (so that when they stack on mobile there is space between them).
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      margin_bottom: 9
+  with_only_email_signup_link:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+  with_only_feed_link:
+    data:
+      feed_link: '/foreign-travel-advice/singapore.atom'
+  with_custom_text:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      email_signup_link_text: 'Get notifications'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      feed_link_text: 'View feed'
+  with_copyable_feed_link:
+    description: |
+      This option changes the feed link to a toggle control, which opens a hidden element containing an input prepopulated with the value passed to the component, usually a URL to an atom feed. This uses the [form input](/component-guide/input) component.
+
+      Note that this option overrides the feed_link option, so if both are passed feed_link is ignored. Note that a value for email_signup_link can also be passed as normal.
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
+  with_branding:
+    description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
+    data:
+      brand: 'attorney-generals-office'
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+  with_tracking:
+    description: Data attributes can be passed for each link as shown.
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      email_signup_link_data_attributes: {
+        track_category: 'email_link_category',
+        track_action: 1.1,
+        track_label: 'email_link_label',
+        track_options: {
+          dimension28: 1,
+          dimension29: 'dimension29EmailLink'
+        }
+      }
+      feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
+      feed_link_data_attributes: {
+        track_category: 'feed_link_category',
+        track_action: 1.2,
+        track_label: 'feed_link_label',
+        track_options: {
+          dimension28: 7,
+          dimension29: 'dimension29feedLink'
+        }
+      }
+  as_small_form:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      small_form: true
+  without_heading:
+    description: |
+      By default the component includes an h2 heading. The component could be used anywhere on the page and could mean that it produces invalid markup or make the site unaccessible.
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      hide_heading: true
+  with_a_different_language:
+    data:
+      email_signup_link: '/foreign-travel-advice/singapore/email-signup'
+      email_signup_link_text: 'Recevez des notifications'
+      email_signup_link_text_locale: 'fr'
+      feed_link: '/foreign-travel-advice/singapore.atom'
+      feed_link_text: 'Flux RSS'
+      feed_link_text_locale: 'fr'
+    description: |
+      The component is used on translated pages that don't have a translation for the text strings. 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.