govuk_publishing_components 62.2.1 → 63.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b14ee30fabb3db7ed08c6e18da64893341f1173eb25ce7af31ea9943d04396ac
-  data.tar.gz: edce4972ce2cd377cec0ad3de2991a4dbcf42a3959f23d164dc47a610af7cb6c
+  metadata.gz: 90f9e9423db2ea202bab6f85c3e7074c123d71a9905b1736355eca6b0487d0ef
+  data.tar.gz: 512dc157f628a2e58004215a191f9ea2fadc95157e711107a8ab4e2d37da4fac
 SHA512:
-  metadata.gz: a0e490bcafa5edfdd2013aa4ef0e3c66628cfd734d5edf2e3ffbde3d50a21b54fdd5720931a68ec026aec99033d9b3c783e40dde03c78289857573209b9f0958
-  data.tar.gz: cc9f3d8671616a1b69dcc8e0c092c735edd087211bda3f5c1d394b9383c79e9a479e4a431453fcbee3fe5ec736bde31446d1a882e510628ee318d5e0227f09b3
+  metadata.gz: afc7f05626ebca0e9ae1f224580c07feff4d0dd44fff9eb25afcd054665246cde4c98270ca73838767ffb6dcf5ba0ec36df04a1f976f36c4d7682e36012f9a53
+  data.tar.gz: 814ab32a098c3f9709579f7c34604927f96668f3aeb615d4e4b0f512d041f3f58a2cea640085d6351e8f91748135de87bce7cac9e35157489d58e8f0a9bc5a30

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -10,7 +10,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       applyOnInit: true,
       autoOutdent: false,
       outdentAll: false,
-      chartVisibleText: 'Change to table and accessible view',
+      chartVisibleText: 'Change to table view',
       tableVisibleText: 'Change to chart view',
       chartAlertText: 'Chart visible',
       tableAlertText: 'Table visible',
@@ -418,17 +418,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   MagnaCharta.prototype.insert = function () {
-    var label = document.createElement('span')
-    var labelId = 'mc-chart-not-accessible-' + this.chartId
-
-    label.innerHTML = 'This content is not accessible - switch to table'
-    label.className = 'mc-hidden'
-    label.id = labelId
-
-    this.$graphContainer.setAttribute('aria-labelledby', labelId)
     this.$graphContainer.appendChild(this.$graph)
-    this.$graphContainer.appendChild(label)
-
     this.$table.insertAdjacentElement('afterend', this.$graphContainer)
   }
 

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

@@ -65,7 +65,7 @@
 @import "components/panel";
 @import "components/password-input";
 @import "components/phase-banner";
-@import "components/previous-and-next-navigation";
+@import "components/pagination";
 @import "components/print-link";
 @import "components/published-dates";
 @import "components/radio";

data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss

@@ -170,53 +170,6 @@
   }
 }
 
-// Ensure the YouTube video has a fluid width
-// https://alistapart.com/article/creating-intrinsic-ratios-for-video/
-.gem-c-image-card__youtube-video-embed {
-  position: relative;
-  padding-bottom: 56.25%; /* 16:9 */
-  height: 0;
-}
-
-.gem-c-image-card__youtube-video-embed iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.gem-c-image-card__youtube-thumbnail-image-container {
-  position: relative;
-
-  &::before {
-    background: url("govuk_publishing_components/youtube-play-icon.png");
-    background: url("govuk_publishing_components/youtube-play-icon.svg"), linear-gradient(transparent, transparent);
-    background-repeat: no-repeat;
-    background-position: 50%;
-    background-size: 75px auto;
-    content: "";
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 1;
-  }
-}
-
-.gem-c-image-card__youtube-thumbnail-image {
-  filter: brightness(.9);
-}
-
-.gem-c-image-card__youtube-thumbnail-container-text {
-  margin-top: 10px;
-}
-
-.gem-c-image-card__youtube-thumbnail-container:focus .gem-c-image-card__youtube-thumbnail-container-text {
-  @include govuk-focused-text;
-}
-
 // stylelint-disable declaration-no-important
 @include govuk-media-query($media-type: print) {
   .gem-c-image-card__title[class*="govuk-heading-"] {

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

@@ -33,7 +33,6 @@
   ]
   extra_link_classes << brand_helper.color_class
 
-  component_helper.add_data_attribute({ module: "image-card" }) if card_helper.youtube_video_id
   component_helper.set_lang(card_helper.lang)
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>

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

@@ -20,6 +20,7 @@
   show_cross_service_header ||= false
   draft_watermark ||= false
   title ||= "GOV.UK - The best place to find government services and information"
+  title_lang ||= nil
 
   show_account_layout ||= false
   account_nav_location ||= nil
@@ -34,7 +35,7 @@
 <html class="govuk-template govuk-template--rebranded" lang="<%= html_lang %>">
   <head>
     <meta charset="utf-8">
-    <title><%= title %></title>
+    <%= tag.title title, lang: title_lang %>
 
     <%= javascript_include_tag "govuk_publishing_components/vendor/lux/lux-measurer", { async: true } %>
     <%= javascript_include_tag "govuk_publishing_components/rum-custom-data", type: "module" %>
@@ -70,10 +71,12 @@
     <%= javascript_tag nonce: true do -%>
       document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
     <% end %>
-    <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
-    <%= render "govuk_publishing_components/components/skip_link", {
-      href: "#content",
-    } %>
+    <% I18n.with_locale(:en) do %>
+      <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
+      <%= render "govuk_publishing_components/components/skip_link", {
+        href: "#content",
+      } %>
+    <% end %>
     <% unless omit_header %>
       <% if show_cross_service_header %>
         <%= render "govuk_publishing_components/components/cross_service_header", {
@@ -120,15 +123,19 @@
 
     <% unless omit_feedback_form %>
       <div class="govuk-width-container">
-        <%= render "govuk_publishing_components/components/feedback" %>
+        <% I18n.with_locale(:en) do %>
+          <%= render "govuk_publishing_components/components/feedback" %>
+        <% end %>
       </div>
     <% end %>
 
     <% unless local_assigns[:hide_footer_links] %>
-      <%= render "govuk_publishing_components/components/layout_footer", {
-        navigation: omit_footer_navigation ? nil : layout_helper.footer_navigation,
-        meta: layout_helper.footer_meta,
-      } %>
+      <% I18n.with_locale(:en) do %>
+        <%= render "govuk_publishing_components/components/layout_footer", {
+          navigation: omit_footer_navigation ? nil : layout_helper.footer_navigation,
+          meta: layout_helper.footer_meta,
+        } %>
+      <% end %>
     <% end %>
     <%= javascript_include_tag "application", type: "module" %>
     <% if GovukPublishingComponents::Config.use_es6_components %>

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

@@ -0,0 +1,40 @@
+<%
+  add_gem_component_stylesheet("pagination")
+  disable_ga4 ||= false
+  items ||= nil
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("govuk-pagination")
+  component_helper.add_class("govuk-pagination--block") if items.blank?
+  component_helper.add_aria_attribute({ label: t("components.pagination.pagination") })
+  component_helper.add_data_attribute({ module: "ga4-link-tracker" }) unless disable_ga4
+%>
+<% prev_icon = capture do %>
+  <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+  </svg>
+<% end %>
+<% next_icon = capture do %>
+  <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+    <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+  </svg>
+<% end %>
+<%
+  if local_assigns[:next_page].present?
+    local_assigns[:next_page][:icon] = next_icon
+  end
+
+  if local_assigns[:previous_page].present?
+    local_assigns[:previous_page][:icon] = prev_icon
+  end
+
+  pagination_helper = GovukPublishingComponents::Presenters::PaginationHelper.new(local_assigns)
+
+  if pagination_helper.has_links?
+%>
+  <%= tag.nav(**component_helper.all_attributes) do %>
+    <%= pagination_helper.prev_link %>
+    <%= pagination_helper.page_links %>
+    <%= pagination_helper.next_link %>
+  <% end %>
+<% end %>

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

@@ -223,29 +223,6 @@ examples:
       <div class="govuk-!-width-full">
         <%= component %>
       </div>
-  youtube_video:
-    description: |
-      Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.
-
-      Youtube does not support embeds on Internet Explorer versions lower than 10. In addition, Youtube's website will block any version of Internet Explorer using it. There is therefore no fallback for IE9 and lower.
-    data:
-      youtube_video_id: "XnP6jaK7ZAY"
-      href: "/still-not-a-page"
-      youtube_video_alt: "The vision for GOV.UK"
-      context:
-        date: 2017-06-14 11:30:00
-        text: "Announcement"
-      description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you."
-      extra_details: [
-        {
-          text: "Link to video transcript",
-          href: "/1"
-        }
-      ]
-    embed: |
-      <div class="govuk-!-width-full">
-        <%= component %>
-      </div>
   with_ga4_tracking:
     description: The component does not include an option for GA4 tracking, but data attributes to enable the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) can be passed as shown.
     data:

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

@@ -126,3 +126,9 @@ examples:
           cookie_preferences:
             text: How GOV.UK accounts use cookies
             href: https://www.gov.uk/government/publications/govuk-accounts-trial-full-privacy-notice-and-accessibility-statement
+  with_title_lang_attribute:
+    data:
+      title: 'Example layout'
+      title_lang: 'cy'
+      block: |
+        <h1>Page content goes here</h1>

data/app/views/govuk_publishing_components/components/docs/{previous_and_next_navigation.yml → pagination.yml}

@@ -1,16 +1,27 @@
-name: Previous and next navigation
+name: Pagination
 description: Navigational links that allow users to navigate within a series of pages
   or elements.
 body: |
-  This component accepts 2 optional parameters, previous and next.
+  This component accepts 3 optional parameters: previous, next and items.
 
-  Each optional parameter accepts:
+  The next and previous parameters accept:
 
   - an URL for the link
   - a title for the URL
   - a label that can add extra info (ie page number) that will be displayed under the title
 
   If one of the 2 parameters is nil, no link will appear.
+
+  The item parameter accepts an array of objects with the following parameters:
+
+  - an href for the link
+  - a number of the page (required if ellipsis not set)
+  - current, if set then the item will be styled as the current page
+  - ellipsis, if set then the item will not be a link but will be a seperator with the text of "..."
+  - visually hidden text, which will override the default aria label of the page link (Page NUMBER)
+
+  For more guidance on best practice, please refer to the [GOV.UK Design System's Pagination guidance](https://design-system.service.gov.uk/components/pagination/).
+
 accessibility_criteria: |
   Icons in the component must not be announced by screen readers.
 
@@ -28,41 +39,41 @@ examples:
   default:
     data:
       previous_page:
-        url: previous-page
+        href: previous-page
         title: Previous page
         label: 1 of 3
   only_next:
     data:
       next_page:
-        url: next-page
+        href: next-page
         title: Next page
         label: Tax disc
   both_previous_and_next:
     data:
       previous_page:
-        url: previous-page
+        href: previous-page
         title: Previous page
         label: 1 of 3
       next_page:
-        url: next-page
+        href: next-page
         title: Next page
         label: 3 of 3
   both_previous_and_next_no_labels:
     data:
       previous_page:
-        url: previous-page
+        href: previous-page
         title: Previous page
       next_page:
-        url: next-page
+        href: next-page
         title: Next page
   become_a_lorry_bus_driver_example:
     data:
       previous_page:
-        url: previous-page
+        href: previous-page
         title: Previous
         label: Applying for a provisional lorry or bus licence
       next_page:
-        url: next-page
+        href: next-page
         title: Next
         label: 'Driver CPC part 1 test: theory'
   without_ga4_tracking:
@@ -70,10 +81,54 @@ examples:
     data:
       disable_ga4: true
       previous_page:
-        url: previous-page
+        href: previous-page
         title: Previous
         label: Applying for a provisional lorry or bus licence
       next_page:
-        url: next-page
+        href: next-page
         title: Next
         label: 'Driver CPC part 1 test: theory'
+  both_previous_and_next_with_items:
+    data:
+      previous_page:
+        href: previous-page
+      next_page:
+        href: next-page
+      items:
+      - number: 1
+        href: "#"
+      - ellipsis: true
+      - number: 6
+        href: "#"
+      - number: 7
+        href: "#"
+        current: true
+      - number: 8
+        href: "#"
+      - ellipsis: true
+      - number: 42
+        href: "#"
+  next_with_items:
+    data:
+      next_page:
+        href: next-page
+      items:
+      - number: 1
+        href: "#"
+        current: true
+      - number: 2
+        href: "#"
+      - number: 3
+        href: "#"
+  previous_with_items:
+    data:
+      previous_page:
+        href: next-page
+      items:
+      - number: 1
+        href: "#"
+      - number: 2
+        href: "#"
+      - number: 3
+        href: "#"
+        current: true

data/config/locales/ar.yml

@@ -166,7 +166,7 @@ ar:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: ترقيم الصفحات
       previous:

data/config/locales/az.yml

@@ -163,7 +163,7 @@ az:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Səhifələrə bölmə
       previous:

data/config/locales/be.yml

@@ -169,7 +169,7 @@ be:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Месцаванне старонак
       previous:

data/config/locales/bg.yml

@@ -167,7 +167,7 @@ bg:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Страниране
       previous:

data/config/locales/bn.yml

@@ -164,7 +164,7 @@ bn:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: পেজিনেশন
       previous:

data/config/locales/cs.yml

@@ -168,7 +168,7 @@ cs:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Stránkování
       previous:

data/config/locales/cy.yml

@@ -108,7 +108,7 @@ cy:
     figure:
       image_credit: 'Delwedd gan: %{credit}'
     intervention:
-      accessible_link_text_suffix:
+      accessible_link_text_suffix: " (yn agor tab newydd)"
     layout_footer:
       copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Hawlfraint y Goron</a>
       licence_html: Mae'r holl gynnwys ar gael o dan <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Drwydded Agored y Llywodraeth v3.0</a>, ac eithrio ble nodir yn wahanol
@@ -167,7 +167,7 @@ cy:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Tudalennu
       previous:

data/config/locales/da.yml

@@ -164,7 +164,7 @@ da:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Paginering
       previous:

data/config/locales/de.yml

@@ -167,7 +167,7 @@ de:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Seitenzahlen
       previous:

data/config/locales/dr.yml

@@ -165,7 +165,7 @@ dr:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: صفحه گذاری
       previous:

data/config/locales/el.yml

@@ -163,7 +163,7 @@ el:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Σελιδοποίηση
       previous:

data/config/locales/en.yml

@@ -270,7 +270,7 @@ en:
       label: Password
       password_hidden_announcement: Your password is hidden
       password_shown_announcement: Your password is visible
-    previous_and_next_navigation:
+    pagination:
       next: Next
       pagination: Pagination
       previous: Previous

data/config/locales/es-419.yml

@@ -163,7 +163,7 @@ es-419:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Paginación
       previous:

data/config/locales/es.yml

@@ -163,7 +163,7 @@ es:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Paginación
       previous:

data/config/locales/et.yml

@@ -166,7 +166,7 @@ et:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Lehekülgede jaotus
       previous:

data/config/locales/fa.yml

@@ -162,7 +162,7 @@ fa:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: صفحه‌بندی
       previous:

data/config/locales/fi.yml

@@ -165,7 +165,7 @@ fi:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Sivunumerointi
       previous:

data/config/locales/fr.yml

@@ -163,7 +163,7 @@ fr:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Pagination
       previous:

data/config/locales/gd.yml

@@ -165,7 +165,7 @@ gd:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Leathanach
       previous:

data/config/locales/gu.yml

@@ -163,7 +163,7 @@ gu:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: પૃષ્ઠ ક્રમાંકન
       previous:

data/config/locales/he.yml

@@ -163,7 +163,7 @@ he:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: חלוקה לעמודים
       previous:

data/config/locales/hi.yml

@@ -163,7 +163,7 @@ hi:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: पृष्ठांकन
       previous:

data/config/locales/hr.yml

@@ -164,7 +164,7 @@ hr:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Paginacija
       previous:

data/config/locales/hu.yml

@@ -166,7 +166,7 @@ hu:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Lapszámozás
       previous:

data/config/locales/hy.yml

@@ -167,7 +167,7 @@ hy:
       label:
       password_hidden_announcement:
       password_shown_announcement:
-    previous_and_next_navigation:
+    pagination:
       next:
       pagination: Էջադրում
       previous: