govuk_publishing_components 27.11.0 → 27.14.1

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss

@@ -2,7 +2,7 @@
   margin-bottom: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-bottom: govuk-spacing(6) * 1.5;
+    margin-bottom: govuk-spacing(7);
   }
 }
 
@@ -10,7 +10,7 @@
   margin-top: govuk-spacing(3);
 
   @include govuk-media-query($from: tablet) {
-    margin-top: govuk-spacing(6) * 1.5;
+    margin-top: govuk-spacing(7);
   }
 }
 

data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_prefixed-transform.scss

@@ -0,0 +1,5 @@
+@mixin prefixed-transform($translateY: 0, $rotate: 0, $scale: 1) {
+  -webkit-transform: translateY($translateY) rotate($rotate) scale($scale);
+  -ms-transform: translateY($translateY) rotate($rotate) scale($scale);
+  transform: translateY($translateY) rotate($rotate) scale($scale);
+}

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

@@ -17,3 +17,12 @@ $gem-quiet-button-colour: govuk-colour("dark-grey", $legacy: "grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
 $gem-hover-dark-background: #dddcdb;
+
+$govuk-colours-organisations: map-merge(
+  $govuk-colours-organisations,
+  (
+    "department-for-levelling-up-housing-and-communities": (
+      colour: #012169,
+    ),
+  )
+);

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

@@ -1,5 +1,4 @@
 <%
-  href ||= nil
   number ||= nil
   label ||= nil
   href ||= nil

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

@@ -1,13 +1,16 @@
 <%
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  id ||= "input-#{SecureRandom.hex(4)}"
-  value ||= nil
-  type ||= "text"
-  describedby ||= nil
+  autocomplete ||= nil
   controls ||= nil
   data ||= nil
-  autocomplete ||= nil
+  describedby ||= nil
+  enterkeyhint ||= nil
+  id ||= "input-#{SecureRandom.hex(4)}"
+  type ||= "text"
+  value ||= nil
+  inputmode ||= nil
+  pattern ||= nil
 
   label ||= nil
   hint ||= nil
@@ -32,6 +35,7 @@
   css_classes << "govuk-input--error" if has_error
   css_classes << "govuk-input--width-#{width}" if [2, 3, 4, 5, 10, 20, 30].include?(width)
   css_classes << "gem-c-input--with-search-icon" if search_icon
+
   form_group_css_classes = %w(govuk-form-group)
   form_group_css_classes << "govuk-form-group--error" if has_error && !grouped
 
@@ -44,14 +48,21 @@
     aria_described_by = aria_described_by.join(" ")
   end
 
+  checked_enterkeyhint = enterkeyhint if [
+    "done",
+    "enter",
+    "go",
+    "next",
+    "previous",
+    "search",
+    "send",
+  ].include?(enterkeyhint)
+
   if type == "number"
     type = "text"
     inputmode = "numeric"
     pattern = "[0-9]*"
   end
-
-  inputmode ||= nil
-  pattern ||= nil
 %>
 
 <%= content_tag :div, class: form_group_css_classes do %>
@@ -87,24 +98,26 @@
     } %>
   <% end %>
 
-  <% input_tag = tag.input name: name,
-    value: value,
-    class: css_classes,
-    id: id,
-    type: type,
-    data: data,
+  <% input_tag = tag.input({
+    aria: {
+      describedby: aria_described_by,
+      controls: controls
+    },
     autocomplete: autocomplete,
-    tabindex: tabindex,
     autofocus: autofocus,
-    readonly: readonly,
-    maxlength: maxlength,
+    class: css_classes,
+    data: data,
+    enterkeyhint: checked_enterkeyhint,
+    id: id,
     inputmode: inputmode,
+    maxlength: maxlength,
+    name: name,
     pattern: pattern,
-    aria: {
-      describedby: aria_described_by,
-      controls: controls
-    }
-  %>
+    readonly: readonly,
+    tabindex: tabindex,
+    type: type,
+    value: value,
+  }) %>
 
   <% if prefix && suffix %>
     <%= tag.div class: "govuk-input__wrapper" do %>

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

@@ -133,7 +133,7 @@
                 class="gem-c-layout-super-navigation-header__navigation-dropdown-menu"
                 id="super-navigation-menu__section-<%= unique_id %>"
               >
-                <div class="govuk-width-container">
+                <div class="govuk-width-container gem-c-layout-super-navigation-header__width-container">
                   <div class="govuk-grid-row">
                     <div class="govuk-grid-column-one-third-from-desktop">
                       <% if link[:description].present? %>
@@ -144,7 +144,7 @@
                     </div>
                     <div class="govuk-grid-column-two-thirds-from-desktop">
                       <% if link[:menu_contents].present? %>
-                          <ul class="govuk-list gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
+                          <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= link[:label].parameterize %>">
                             <% link[:menu_contents].each do | item | %>
                               <%
                                 has_description = item[:description].present?
@@ -163,7 +163,7 @@
                                     track_dimension_index: "29",
                                   }
                                 } %>
-                                <%= tag.p item[:description], class: "govuk-body govuk-!-margin-0 govuk-!-margin-top-1" if has_description %>
+                                <%= tag.p item[:description], class: "gem-c-layout-super-navigation-header__navigation-second-item-description" if has_description %>
                               </li>
                             <% end %>
                           </ul>

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

@@ -11,9 +11,11 @@
   direction_class = ""
   direction_class = " direction-#{direction}" if local_assigns.include?(:direction)
 
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   classes = %w(gem-c-metadata)
   classes << "direction-#{direction}" if local_assigns.include?(:direction)
   classes << "gem-c-metadata--inverse" if inverse
+  classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle" } do %>
   <dl data-module="gem-track-click">

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

@@ -43,6 +43,7 @@
       aria: {
         controls: aria_controls,
       },
+      enterkeyhint: "search",
       class: "gem-c-search__item gem-c-search__input js-class-toggle",
       id: id,
       name: name,
@@ -51,7 +52,7 @@
       value: value,
     ) %>
     <div class="gem-c-search__item gem-c-search__submit-wrapper">
-      <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes do %>
+      <%= tag.button class: "gem-c-search__submit", type: "submit", data: data_attributes, enterkeyhint: "search" do %>
         <%= button_text %>
         <%= render "govuk_publishing_components/components/search/search_icon" %>
       <% end %>

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

@@ -1,23 +1,17 @@
 <%
-  page ||= ''
-  data_attributes ||= {}
-  base_path ||= nil
-  local_assigns[:margin_bottom] ||= 3
-  already_subscribed ||= false
-  text ||= already_subscribed ? t('components.single_page_notification_button.unsubscribe_text') : t('components.single_page_notification_button.subscribe_text')
-
+  component_helper = GovukPublishingComponents::Presenters::SinglePageNotificationButtonHelper.new(local_assigns)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+
   wrapper_classes = %w(gem-c-single-page-notification-button govuk-!-display-none-print)
   wrapper_classes << shared_helper.get_margin_bottom
-  classes = "govuk-body-s gem-c-single-page-notification-button__submit"
 %>
 <% button_text = capture do %>
-  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= text %>
+  <svg class="gem-c-single-page-notification-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 459.334 459.334"><path fill="currentColor" d="M177.216 404.514c-.001.12-.009.239-.009.359 0 30.078 24.383 54.461 54.461 54.461s54.461-24.383 54.461-54.461c0-.12-.008-.239-.009-.359H175.216zM403.549 336.438l-49.015-72.002v-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485C254.152 10.963 243.19 0 229.667 0s-24.485 10.963-24.485 24.485v27.663c-57.237 11.381-100.381 61.879-100.381 122.459v89.83l-49.015 72.002a24.76 24.76 0 0 0 20.468 38.693H383.08a24.761 24.761 0 0 0 20.469-38.694z"/></svg><%= component_helper.button_text %>
 <% end %>
-<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: data_attributes do %>
-  <input type="hidden" name="base_path" value="<%= base_path %>">
+<%= tag.form class: wrapper_classes, action: "/email/subscriptions/single-page/new", method: "POST", data: component_helper.data do %>
+  <input type="hidden" name="base_path" value="<%= component_helper.base_path %>">
   <%= content_tag(:button, button_text, {
-    class: classes,
+    class: "govuk-body-s gem-c-single-page-notification-button__submit",
     type: "submit",
   }) %>
-<% end if base_path.presence %>
+<% end if component_helper.base_path %>

data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb

@@ -1,10 +1,9 @@
 <% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
-<% cta_helper = GovukPublishingComponents::Presenters::BrexitCtaHelper.new(content_item) %>
 <%
-  title = t(cta_helper.title_key)
-  link_text = t(cta_helper.link_text_key)
-  link_path = t(cta_helper.link_path_key)
-  lang = shared_helper.t_locale(cta_helper.title_key)
+  title = t("components.related_navigation.transition.title")
+  link_text = t("components.related_navigation.transition.link_text")
+  link_path = t("components.related_navigation.transition.link_path")
+  lang = shared_helper.t_locale("components.related_navigation.transition.title")
 %>
 
 <% data_attributes = {

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

@@ -811,12 +811,6 @@ examples:
         <div class="place">
           <p>This is a place</p>
         </div>
-  summary:
-    data:
-      block: |
-        <div class="summary">
-          <p>This is a summary</p>
-        </div>
   buttons:
     data:
       block: |

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

@@ -170,3 +170,13 @@ examples:
       name: "lead-times"
       width: 10
       suffix: "days"
+  with_enterhintkey_attribute:
+    description: |
+      To help users with virtual keyboards this changes the "enter" key to be a word that's more descriptive of the action.
+
+      Must be one of `enter`, `done`, `go`, `next`, `previous`, `search`, or `send`. See the [list of values and descriptions on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint#values).
+    data:
+      label:
+        text: "Given name"
+      name: given-name
+      enterkeyhint: "next"

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

@@ -357,3 +357,10 @@ examples:
         Applies to: England, Scotland, and Wales (see detailed guidance for <a href="http://www.dardni.gov.uk/news-dard-pa022-a-13-new-procedure-for" rel="external">Northern Ireland</a>)
     context:
       dark_background: true
+  with_custom_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 the `margin-bottom` values defined in the [responsive-bottom-margin mixin](https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/mixins/_margins.scss#L1)
+    data:
+      first_published: 14 June 2014
+      last_updated: 10 September 2015
+      margin_bottom: 2

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

@@ -1,9 +1,10 @@
 name: Single page notification button
 description: A button that subscribes the user to email notifications to a page
 body: |
-  By default, the component displays with the "Get emails about this page" state. The component does not render without the `base_path` parameter.
+  By default, the component displays with the "Get emails about this page" state.
+  If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
 
-  The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
+  The component does not render without the `base_path` parameter. The `base_path` is necessary for [checking if an email subscription is active on page load](https://github.com/alphagov/account-api/blob/main/docs/api.md#get-apipersonalisationcheck-email-subscriptiontopic_slug) and the creation/deletion of an email notification subscription.
 
   When the button is clicked, the `base_path` is submitted to an endpoint which proceeds to check the user's authentication status and whether they are already subscribed to the page or not. Depending on these factors, they will be routed accordingly.
 accessibility_criteria: |
@@ -23,10 +24,27 @@ examples:
     data:
       base_path: '/current-page-path'
       data_attributes:
-        category: fancyButtons
+        test_attribute: "testing"
   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 having a margin bottom of 15px.
     data:
       base_path: '/current-page-path'
       margin_bottom: 5
+  with_js_enhancement:
+    description: |
+      If the `js-enhancement` flag is present, the component uses JavaScript to check if the user has already subscribed to email notifications on the current page. If yes, the state of the component updates accordingly.
+    data:
+      base_path: '/current-page-path'
+      js_enhancement: true
+  with_button_location:
+    description: |
+      When there is more than one button on a page, we should specify their location so that Analytics can differentiate between them.
+
+      The location should have one of two values: "top" or "bottom".
+
+      When this parameter is passed, its value is reflected in the `data-action` attribute (i.e "Unsubscribe-button-top"). When the flag is not present, `data-action` defaults to "Subscribe-button" or "Unsubscribe-button", depending on the state of the button.
+    data:
+      base_path: '/current-page-path'
+      js_enhancement: true
+      button_location: 'top'

data/config/locales/ar.yml

@@ -166,9 +166,6 @@ ar:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/az.yml

@@ -166,9 +166,6 @@ az:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/be.yml

@@ -166,9 +166,6 @@ be:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/bg.yml

@@ -166,9 +166,6 @@ bg:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/bn.yml

@@ -166,9 +166,6 @@ bn:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/cs.yml

@@ -166,9 +166,6 @@ cs:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/cy.yml

@@ -166,9 +166,6 @@ cy:
       topical_events:
       topics: Archwilio’r pwnc
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title: Gwiriwr Brexit
         link_path: "/brexit.cy"
         link_text: Cael rhestr bersonol o gamau gweithredu
         title: Brexit

data/config/locales/da.yml

@@ -166,9 +166,6 @@ da:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/de.yml

@@ -166,9 +166,6 @@ de:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/dr.yml

@@ -166,9 +166,6 @@ dr:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/el.yml

@@ -166,9 +166,6 @@ el:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/en.yml

@@ -125,8 +125,6 @@ en:
           href: "/browse/benefits"
         - label: Births, death, marriages and care
           href: "/browse/births-deaths-marriages"
-        - label: Brexit
-          href: "/brexit"
         - label: Business and self-employed
           href: "/browse/business"
         - label: Childcare and parenting
@@ -179,7 +177,7 @@ en:
           description: Consultations and strategy
         - label: Transparency
           href: "/search/transparency-and-freedom-of-information-releases"
-          description: Government data, Freedom of Information releases and corporate reports
+          description: Data, Freedom of Information releases and corporate reports
         footer_links:
         - label: How government works
           href: "/government/how-government-works"
@@ -240,9 +238,6 @@ en:
       topical_events: Topical event
       topics: Explore the topic
       transition:
-        hub_page_link_path: "/transition-check/questions"
-        hub_page_link_text: Get a personalised list of actions
-        hub_page_title: Brexit checker
         link_path: "/brexit"
         link_text: Check what you need to do
         title: Brexit

data/config/locales/es-419.yml

@@ -166,9 +166,6 @@ es-419:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/es.yml

@@ -166,9 +166,6 @@ es:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/et.yml

@@ -166,9 +166,6 @@ et:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/fa.yml

@@ -166,9 +166,6 @@ fa:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/fi.yml

@@ -166,9 +166,6 @@ fi:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/fr.yml

@@ -166,9 +166,6 @@ fr:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/gd.yml

@@ -166,9 +166,6 @@ gd:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/gu.yml

@@ -166,9 +166,6 @@ gu:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/he.yml

@@ -166,9 +166,6 @@ he:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/hi.yml

@@ -166,9 +166,6 @@ hi:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/hr.yml

@@ -166,9 +166,6 @@ hr:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/hu.yml

@@ -166,9 +166,6 @@ hu:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/hy.yml

@@ -166,9 +166,6 @@ hy:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/id.yml

@@ -166,9 +166,6 @@ id:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title:

data/config/locales/is.yml

@@ -166,9 +166,6 @@ is:
       topical_events:
       topics:
       transition:
-        hub_page_link_path:
-        hub_page_link_text:
-        hub_page_title:
         link_path:
         link_text:
         title: