govuk_publishing_components 34.2.0 → 34.4.0

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

@@ -1,12 +1,14 @@
 <%
   sizes ||= false
   brand ||= false
+
   brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
-  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns)
+  card_helper = GovukPublishingComponents::Presenters::ImageCardHelper.new(local_assigns, brand_helper)
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
-  classes = "gem-c-image-card"
-  classes << " gem-c-image-card--large" if card_helper.large
-  classes << " gem-c-image-card--no-image" unless defined?(image_src)
+  classes = %w[gem-c-image-card]
+  classes << "gem-c-image-card--large" if card_helper.large
+  classes << "gem-c-image-card--no-image" unless (card_helper.image_src || card_helper.youtube_video_id)
+  classes << brand_helper.brand_class if brand_helper.brand_class
 
   font_size ||= card_helper.large ? 'm' : 's'
   heading_class = %w[gem-c-image-card__title]
@@ -23,11 +25,12 @@
   ]
   extra_link_classes << brand_helper.color_class
 
+  data_modules = %w[]
+  data_modules << "gem-track-click" if card_helper.is_tracking?
+  data_modules << "image-card" if card_helper.youtube_video_id
 %>
 <% if card_helper.href || card_helper.extra_details.any? %>
-  <div class="<%= classes %> <%= brand_helper.brand_class %>"
-    <%= "data-module=gem-track-click" if card_helper.is_tracking? %>
-    <%= "lang=#{card_helper.lang}" if card_helper.lang %>>
+  <%= content_tag(:div, class: classes, "data-module": data_modules, lang: card_helper.lang) do %>
     <div class="gem-c-image-card__text-wrapper">
       <div class="gem-c-image-card__header-and-context-wrapper">
         <% if card_helper.heading_text %>
@@ -65,6 +68,6 @@
         <p class="gem-c-image-card__metadata"><%= card_helper.metadata %></p>
       <% end %>
     </div>
-    <%= card_helper.image %>
-  </div>
+    <%= card_helper.media %>
+  <% end %>
 <% end %>

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

@@ -31,6 +31,8 @@
   heading_level ||= nil
   prefix ||= nil
   suffix ||= nil
+  right_to_left ||= false
+  right_to_left_help = right_to_left_help.nil? ? right_to_left : right_to_left_help
 
   css_classes = %w(gem-c-input govuk-input)
   css_classes << "govuk-input--error" if has_error
@@ -70,7 +72,8 @@
     <% label_markup = capture do %>
       <%= render "govuk_publishing_components/components/label", {
         html_for: id,
-        heading_size: heading_size
+        heading_size: heading_size,
+        right_to_left: right_to_left_help
       }.merge(label.symbolize_keys) %>
     <% end %>
 
@@ -86,7 +89,8 @@
   <% if hint %>
     <%= render "govuk_publishing_components/components/hint", {
       id: hint_id,
-      text: hint
+      text: hint,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -95,6 +99,7 @@
       id: error_id,
       text: error_message,
       items: error_items,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -107,6 +112,7 @@
     autofocus: autofocus,
     class: css_classes,
     data: data,
+    dir: right_to_left ? "rtl" : nil,
     enterkeyhint: checked_enterkeyhint,
     id: id,
     inputmode: inputmode,

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

@@ -7,6 +7,7 @@
   bold ||= false
   heading_size = false unless shared_helper.valid_heading_size?(heading_size)
   is_page_heading ||= false
+  right_to_left ||= false
 
   css_classes = %w[gem-c-label govuk-label]
   css_classes << "govuk-label--s" if bold
@@ -19,14 +20,14 @@
 
 <% if is_page_heading %>
   <%= tag.h1 text, class: "govuk-label-wrapper" do %>
-    <%= tag.label text, id: id, for: html_for, class: css_classes %>
+    <%= tag.label text, id: id, for: html_for, class: css_classes, dir: right_to_left ? "rtl" : nil %>
   <% end %>
 <% else %>
-  <%= tag.label text, id: id, for: html_for, class: css_classes %>
+  <%= tag.label text, id: id, for: html_for, class: css_classes, dir: right_to_left ? "rtl" : nil %>
 <% end %>
 
 <% if hint_text.present? %>
-  <%= tag.span id: hint_id, class: hint_text_css_classes do %>
+  <%= tag.div id: hint_id, class: hint_text_css_classes, dir: right_to_left ? "rtl" : nil do %>
     <%= hint_text %>
   <% end %>
 <% end %>

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

@@ -14,9 +14,9 @@
     <%= yield :head %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body">
-    <script>
+    <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-    </script>
+    <% end -%>
     <%= yield %>
     <%= javascript_include_tag "application" %>
   </body>

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

@@ -58,6 +58,7 @@
           "lux-reporter-script": path_to_javascript("govuk_publishing_components/vendor/lux/lux-reporter")
         }
       } %>
+    <%= javascript_include_tag "govuk_publishing_components/load-analytics" %>
 
     <%= csrf_meta_tags %>
 
@@ -78,12 +79,15 @@
     <% # The default og:image is added below :head so that scrapers see any custom metatags first, and this is just a fallback %>
     <meta property="og:image" content="<%= asset_path "govuk-opengraph-image.png" %>">
 
+    <% # Used for Google Analytics 4 debugging %>
+    <meta name="govuk:components_gem_version" content="<%= GovukPublishingComponents::VERSION %>" />
+
     <%= yield :head %>
   </head>
   <%= tag.body class: body_css_classes do %>
-    <script>
+    <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-    </script>
+    <% end -%>
     <%= render "govuk_publishing_components/components/skip_link", {
       href: "#content"
     } %>

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

@@ -1,10 +1,15 @@
-<% related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns) %>
-<% shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns) %>
+<%
+  related_nav_helper = GovukPublishingComponents::Presenters::RelatedNavigationHelper.new(local_assigns)
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
+  ga4_tracking ||= false
+  data = {}
+  data[:module] = "gem-track-click"
+  data[:module] << " ga4-link-tracker" if ga4_tracking
+%>
 
 <% if related_nav_helper.related_navigation? %>
   <% random = SecureRandom.hex(4) %>
-  <div class="gem-c-related-navigation">
-
+  <%= tag.div(class: "gem-c-related-navigation", data: data) do %>
     <% if local_assigns[:context] != :footer %>
       <h2 id="related-nav-related_items-<%= random %>"
           class="gem-c-related-navigation__main-heading"
@@ -33,7 +38,8 @@
         section_title: section_title,
         links: links,
         section_index: section_index,
-        random: random %>
+        random: random,
+        ga4_tracking: ga4_tracking %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>

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

@@ -36,7 +36,7 @@
             </svg><%= sl_helper.email_signup_link_text %>
           <% end %>
           <%= link_to email_link_text, sl_helper.email_signup_link, {
-            class: "govuk-link govuk-link--no-underline gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
+            class: "govuk-link 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
           } %>

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

@@ -17,6 +17,8 @@
   hint_id = "hint-#{SecureRandom.hex(4)}"
   has_error ||= error_message || error_items.any?
   error_id = "error-#{SecureRandom.hex(4)}"
+  right_to_left ||= false
+  right_to_left_help = right_to_left_help.nil? ? right_to_left : right_to_left_help
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
@@ -39,13 +41,17 @@
 
 <%= content_tag :div, class: form_group_css_classes do %>
   <% if label %>
-    <%= render "govuk_publishing_components/components/label", { html_for: id }.merge(label.symbolize_keys) %>
+    <%= render "govuk_publishing_components/components/label", {
+      html_for: id,
+      right_to_left: right_to_left_help
+    }.merge(label.symbolize_keys) %>
   <% end %>
 
   <% if hint %>
     <%= render "govuk_publishing_components/components/hint", {
       id: hint_id,
-      text: hint
+      text: hint,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
@@ -54,11 +60,13 @@
       id: error_id,
       text: error_message,
       items: error_items,
+      right_to_left: right_to_left_help
     } %>
   <% end %>
 
   <%= tag.textarea name: name,
     class: css_classes,
+    dir: right_to_left ? "rtl" : nil,
     id: id,
     rows: rows,
     maxlength: maxlength,

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

@@ -69,3 +69,46 @@ examples:
           ordered_related_items:
             - title: "Find an apprenticeship"
               base_path: "/apply-apprenticeship"
+  with_ga4_tracking:
+    description: Adds Google Analytics 4 tracking to the Related Navigation component, if it is visible.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          topics:
+          - title: Apprenticeships, 14 to 19 education and training for work
+            base_path: /browse/education/find-course
+            document_type: topic
+          - title: Finding a job
+            base_path: /browse/working/finding-job
+            document_type: topic
+          - title: Apprenticeships
+            base_path: /topic/further-education-skills/apprenticeships
+            document_type: topic
+          topical_events:
+          - title: UK-China High-Level People to People Dialogue 2017
+            base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
+            document_type: topical_event
+          related:
+          - title: Pest Control
+            base_path: /pest-control
+            document_type: contact
+          related_statistical_data_sets:
+          - title: International road fuel prices
+            base_path: /government/statistical-data-sets/comparisons-of-industrial-and-domestic-energy-prices-monthly-figures
+            document_type: statistical_data_set
+          - title: Weekly road fuel prices
+            base_path: /government/statistical-data-sets/oil-and-petroleum-products-weekly-statistics
+            document_type: statistical_data_set
+          world_locations:
+          - title: South Sudan
+            base_path: /world/south-sudan/news
+          - title: USA
+            base_path: /world/usa/news
+        details:
+          external_related_links:
+          - url: "http://media.slc.co.uk/sfe/1718/ft/sfe_terms_and_conditions_guide_1718_d.pdf"
+            title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)"
+          - title: The Student Room repaying your student loan
+            url: https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan

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

@@ -103,3 +103,61 @@ examples:
               title: "Russian invasion of Ukraine: UK government response"
               base_path: "/government/topical-events/russian-invasion-of-ukraine-uk-government-response"
               locale: "en"
+  with_ga4_tracking_on_related_navigation:
+    description: Adds Google Analytics 4 tracking to components within the sidebar. Currently only the Related Navigation and Step by Step navigation components accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "UK forces arrive to reinforce NATO’s eastern flank"
+        content_id: "a342fd46-d801-4c1e-9d8f-f41fba6da563"
+        locale: "en"
+        links:
+          ordered_related_items:
+          - title: Find an apprenticeship
+            base_path: /apply-apprenticeship
+          - title: Careers helpline for teenagers
+            base_path: /careers-helpline-for-teenagers
+          document_collections:
+          - title: Recruit an apprentice (formerly apprenticeship vacancies)
+            base_path: /government/collections/apprenticeship-vacancies
+            document_type: document_collection
+          - title: The future of jobs and skills
+            base_path: /government/collections/the-future-of-jobs-and-skills
+            document_type: document_collection
+  with_ga4_tracking_on_step_by_step:
+    description: Adds Google Analytics 4 tracking to components within the sidebar. Currently only the Related Navigation and Step by Step navigation components accept this option.
+    data:
+      ga4_tracking: true
+      content_item:
+        title: "A content item"
+        links:
+          part_of_step_navs:
+            - title: "Learn to drive a car: step by step"
+              base_path: "/micropigs-vs-micropugs"
+              details:
+                step_by_step_nav:
+                  title: 'Stay in the UK after it leaves the EU (''settled status''): step by step'
+                  steps:
+                  - title: Check you're allowed to drive
+                    contents:
+                    - type: paragraph
+                      text: Most people can start learning to drive when they’re 17.
+                    - type: list
+                      contents:
+                      - text: Check what age you can drive
+                        href: "/vehicles-can-drive"
+                    optional: false
+                  - title: Testing the and
+                    logic: and
+                    contents:
+                    - type: paragraph
+                      text: hello hello what's UP
+                  - title: Driving lessons and practice
+                    contents:
+                    - type: paragraph
+                      text: You need a provisional driving licence to take lessons or practice.
+                    - type: list
+                      contents:
+                      - text: The Highway Code
+                        href: "/guidance/the-highway-code"
+                    optional: false

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

@@ -7,7 +7,9 @@ body: |
 
 shared_accessibility_criteria:
   - link
-
+accessibility_excluded_rules:
+  - duplicate-id-aria # IDs will be duplicated in component examples list
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     description: |

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

@@ -21,3 +21,16 @@ examples:
       items:
         - text: Error 1
         - text: Error 2
+  with_dir_attribute:
+    description: Allows the correct display of right to left languages
+    data:
+      text: "An error message displayed right to left"
+      id: "error_id_2"
+      right_to_left: true
+  with_items_and_dir_attribute:
+    description: To allow the correct display of right to left languages on error items
+    data:
+      right_to_left: true
+      items:
+        - text: Error 1 displayed right to left
+        - text: Error 2 displayed right to left

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

@@ -19,3 +19,9 @@ examples:
     data:
       text: "You qualify if you were born in the UK before June 1960."
       margin_bottom: 9
+  with_dir_attribute:
+    description: |
+      Allows the correct display of right to left languages.
+    data:
+      text: "العربيَّة"
+      right_to_left: true

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

@@ -205,6 +205,29 @@ 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_data_attributes:
     description: Data attributes can be applied as required. Note that the component does not include built in tracking. If this is required consider using the [track click script](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics/track-click.md).
     data:
@@ -296,4 +319,4 @@ examples:
     embed: |
       <div class="govuk-!-width-full">
         <%= component %>
-      </div>
+      </div>

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

@@ -183,3 +183,35 @@ examples:
         text: "Given name"
       name: given-name
       enterkeyhint: "next"
+  with_dir_attribute:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the input element and the label both display text in a left to right direction.
+
+      When the `right_to_left` parameter of the input component is set to `true` both the input and the label, hint and error message display their content in a right to left direction. 
+    data:
+      label:
+        text: "Some input text to be displayed right to left with a label that displays in the same direction"
+      hint: "Some hint text that displays in the same text direction as the label"
+      error_message: "An error message that displays in the same text direction as the label"
+      name: rtl-input-text
+      value: "العربيَّة"
+      right_to_left: true
+
+  with_separate_dir_attributes_for_field_and_help_text:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the input element and the label both display text in a left to right direction.
+
+      If the input field and the help text (label, hint and error messages) are required to display in different directions the `right_to_left_help` attribute can be set as false to override the `right_to_left` attribute.
+    data:
+      label:
+        text: "Some input text that displays right to left with a label that displays left to right"
+      hint: "Some hint text that displays in the same text direction as the label"
+      name: rtl-input-text
+      value: "العربيَّة"
+      right_to_left: true
+      right_to_left_help: false
+      error_message: "An error message that displays in the same text direction as the label"

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

@@ -14,9 +14,10 @@ accessibility_criteria: |
   - have a border colour contrast ratio of more than 4.5:1 with its background to be visually distinct
   - prevent screen readers from announcing the dismiss link icon
 
-
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -65,3 +65,14 @@ examples:
       text: "Label with an ID"
       id: "id-for-the-label"
       html_for: "id-that-matches-input-6"
+  with_dir_attribute:
+    description: |
+      To allow the correct display of right to left languages.
+
+      When the `right_to_left` parameter is set to `true` any hint text displays in the same text direction as the label.
+    data:
+      text: "العربيَّة"
+      html_for: "id-that-matches-input-7"
+      hint_id: "should-match-aria-describedby-input"
+      hint_text: "Hint text displayed right to left"
+      right_to_left: true

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

@@ -7,6 +7,7 @@ govuk_frontend_components:
   - header
 accessibility_excluded_rules:
   - landmark-banner-is-top-level # The header element can not be top level in the examples
+  - duplicate-id # IDs will be duplicated in component examples list
   - duplicate-id-aria # IDs will be duplicated in component examples list
   - form-field-multiple-labels # Form labels will be ambiguous in component examples list
   - landmark-no-duplicate-banner # banners will be duplicated in component examples list

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

@@ -21,6 +21,8 @@ accessibility_criteria: |
 
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -306,3 +306,30 @@ examples:
               title: "Student loans: terms and conditions 2017 to 2018 (PDF, 136KB)"
             - title: The Student Room repaying your student loan
               url: https://www.thestudentroom.co.uk/content.php?r=5967-Repaying-your-student-loan
+  with_ga4_tracking:
+    description: Adds Google Analytics 4 tracking to the component, using the [GA4 link tracker](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md).
+    data:
+      ga4_tracking: true
+      content_item:
+        links:
+          ordered_related_items:
+            - title: Find an apprenticeship
+              base_path: /apply-apprenticeship
+            - title: Training and study at work
+              base_path: /training-study-work-your-rights
+            - title: Careers helpline for teenagers
+              base_path: /careers-helpline-for-teenagers
+          topics:
+            - title: Apprenticeships, 14 to 19 education and training for work
+              base_path: /browse/education/find-course
+              document_type: topic
+            - title: Finding a job
+              base_path: /browse/working/finding-job
+              document_type: topic
+            - title: Apprenticeships
+              base_path: /topic/further-education-skills/apprenticeships
+              document_type: topic
+          topical_events:
+            - title: UK-China High-Level People to People Dialogue 2017
+              base_path: /government/topical-events/uk-china-high-level-people-to-people-dialogue-2017
+              document_type: topical_event

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

@@ -110,3 +110,34 @@ examples:
       name: "with_data_attrbutes"
       data:
         module: "some-awesome-module-here"
+  with_dir_attribute:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the textarea element and the label both display text in a left to right direction.
+
+      When the `right_to_left` parameter of the textarea component is set to `true` all text desplays in a right to left direction.
+    data:
+      label:
+        text: "Some textarea text that displays right to left with a label that displays in the same direction"
+      hint: "Some hint text that displays in the same text direction as the label"
+      error_message: "An error message that displays in the same text direction as the label"
+      name: "rtl-textarea-text"
+      value: "العربيَّة"
+      right_to_left: true
+  with_separate_dir_attributes_for_field_and_help_text:
+    description: |
+      Allows the correct display of right to left languages.
+
+      By default the textarea element and the label both display text in a left to right direction.
+
+      If the textarea field and the help text (label, hint and error messages) are required to display in different directions the right_to_left_help attribute can be set as false to override the right_to_left attribute.
+    data:
+      label:
+        text: "Some textarea text that displays right to left with a label that displays left to right"
+      hint: "Some hint text that displays in the same text direction as the label"
+      error_message: "An error message that displays in the same text direction as the label"
+      name: rtl-textarea-text
+      value: "العربيَّة"
+      right_to_left: true
+      right_to_left_help: false

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

@@ -14,6 +14,8 @@ accessibility_criteria: |
     [Watch a screen reader pronounce text differently based on lang attribute](https://bit.ly/screenreaderpronunciation)
 shared_accessibility_criteria:
   - link
+accessibility_excluded_rules:
+  - landmark-unique # aria-label attributes will be duplicated in component examples list
 examples:
   default:
     data:

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

@@ -68,7 +68,7 @@
   # This seems to be a more reliable way to make sure the script is executed.
 %>
 
-<script>
+<%= javascript_tag nonce: true do -%>
   document.addEventListener("DOMContentLoaded", function () {
     var input = document.querySelector("#giraffe"),
       form = document.querySelector("#something-is-wrong")
@@ -80,4 +80,4 @@
       e.preventDefault();
     }
   });
-</script>
+<% end -%>

data/app/views/govuk_publishing_components/components/metadata/_sentence.html.erb

@@ -13,8 +13,10 @@
        class="gem-c-metadata__definition-link govuk-!-display-none-print"
        data-controls="toggle-<%= toggle_id %>"
        data-expanded="false"
-       data-toggled-text="<%= t("components.metadata.toggle_less") %>">
-        <%= t("components.metadata.toggle_more", number: remaining.length) %>
+       data-toggled-text="<%= t("common.toggle_less") %>">
+        <%= t("common.toggle_more",
+          show: t('common.show'),
+          number: remaining.length) %>
     </a>
   </div>
   <span id="toggle-<%= toggle_id %>" class="gem-c-metadata__toggle-items js-hidden"><%= remaining.to_sentence.html_safe %></span>