govuk_publishing_components 34.2.0 → 34.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 04ff78073c27727492f6e443164f9d15d35abdc2e22ac407693c2de1150fac51
-  data.tar.gz: 22829eace73fc47e3d43e5848e4f8c8ddb8588562787e600c408ae6dc5d67a15
+  metadata.gz: 54771399098f08d7e3116e65b9c98eaa7036d1214eebc3e7a5c086083ad4c2c1
+  data.tar.gz: 362003c9ad5faea353aa8a47aa5a1f94dbe8f60074be83176af996fb5583f58d
 SHA512:
-  metadata.gz: d47fbb815b2d0538852f85e51d847d2fde2f93d88c043ced2209bcf186618e057423adf39742f204170464b76423321e571be23b94105ffab5eba1bc9824c935
-  data.tar.gz: a61767144465f49e6668ec69ed7b0b705685295930e19205ddd0e134f7cbd34e1e29460c8c4528df78206afb6ef3d63ee71a6911d1d55a07d81f24e6dca9e7f6
+  metadata.gz: c735097c6bd48644ddde9390b4484ee4b66c3742883e8fa8b3d3ab98793a937e62f240335c835f052fdc28876bc4e063a8a7311aa0ccc15267ff872a1b1eed8e
+  data.tar.gz: e852b2021cd42f28bde7905896931be1443aaec8bef0ffcee808fcf4836429181f4985a13c3a28920df8b6c424d12c6408964ff72c6213e5e5c96e0c3103211e

data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss

@@ -95,32 +95,24 @@
   margin-bottom: 0;
   width: 100%;
 
-  &:hover {
-    // backup style for browsers that don't support rgba
-    background: govuk-colour("mid-grey");
-    background: rgba(govuk-colour("black"), .2);
-    color: govuk-colour("black");
-  }
-
-  &:active:focus:not(:hover) {
-    background: govuk-colour("yellow");
-  }
   @include govuk-media-query($from: tablet) {
     @include govuk-font(16);
   }
-}
-
-.gem-c-feedback__email-link,
-.gem-c-feedback__prompt-link {
-  position: relative;
 
+  &:focus,
   &:focus:not(:active):not(:hover) {
+    background: govuk-colour("yellow");
     border-color: govuk-colour("black");
+    box-shadow: 0 5px  0 govuk-colour("black");
   }
 
-  &:focus,
   &:active {
-    color: $govuk-focus-text-colour;
+    color: govuk-colour("black");
+  }
+
+  &:hover {
+    background: govuk-colour("mid-grey");
+    color: govuk-colour("black");
   }
 }
 
@@ -231,13 +223,17 @@
 }
 
 .gem-c-feedback__email-link {
-  display: block;
+  display: inline-block;
   margin-top: govuk-spacing(4);
 
   @include govuk-media-query($from: desktop) {
-    display: inline-block;
     margin-top: govuk-spacing(2);
   }
+
+  &:focus,
+  &:active {
+    color: $govuk-focus-text-colour;
+  }
 }
 
 // static.css on GOV.UK overwrites the component styles using input[type="text"]

data/app/assets/stylesheets/govuk_publishing_components/components/_subscription-links.scss

@@ -123,7 +123,6 @@
   .gem-c-subscription-links__item--link {
     padding: govuk-spacing(2) govuk-spacing(2) govuk-spacing(2) 0;
     border: 1px solid transparent;
-    border-bottom: 1px solid govuk-colour("dark-grey", $legacy: "grey-1");
 
     &:focus {
       border-bottom-color: transparent;

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_steps.scss

@@ -3,21 +3,38 @@
   .steps {
     padding-left: 0;
     margin-left: 0;
-    overflow: hidden;
 
     > li {
-      background-position: 0 .87em;
-      background-repeat: no-repeat;
-      list-style-type: decimal;
+      list-style-type: none;
       margin-left: 0;
       padding: .75em 0 .75em 2.5em;
+      position: relative;
+
+      // IE doesn't render this correctly with this element as display:block
+      // (it leaves a space for the :before pseudo element) by setting to
+      // display inline block and a width of 100% it works correctly.
+      display: inline-block;
+      width: 100%;
+      box-sizing: border-box;
+
+      &:before {
+        background-color: govuk-colour("black");
+        border-radius: 50%;
+        color: govuk-colour("white");
+        float: left;
+        font-size: 80%;
+        height: 1.75em;
+        left: .3em;
+        line-height: 1.75em;
+        position: absolute;
+        text-align: center;
+        top: .9em;
+        width: 1.75em;
+      }
 
       @for $i from 1 through 30 {
-        &:nth-child(#{$i}) {
-          background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250' preserveAspectRatio='xMinYMin meet'%3E%3Cg%3E%3Ccircle r='50%25' cx='50%25' cy='50%25' class='circle-back'%3E%3C/circle%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='0.3em' font-family='nta,arial,sans-serif' font-size='8rem' fill='%23ffffff'%3E#{$i}%3C/text%3E%3C/g%3E%3C/svg%3E ");
-          background-repeat: no-repeat;
-          background-position: .2em .7em;
-          background-size: 1.4em 1.4em;
+        &:nth-child(#{$i}):before {
+          content: "#{$i}";
         }
       }
     }

data/app/controllers/govuk_publishing_components/application_controller.rb

@@ -5,19 +5,6 @@ module GovukPublishingComponents
     before_action :set_x_frame_options_header
     before_action :set_disable_slimmer_header
 
-    if defined? content_security_policy
-      content_security_policy do |p|
-        # don't do anything if the app doesn't have a content security policy
-        next unless p.directives.any?
-
-        # Unfortunately the axe core script uses a dependency that uses eval
-        # see: https://github.com/dequelabs/axe-core/issues/1175
-        # Thus all components shown by govuk_publishing_components need this
-        # enabled
-        p.script_src(*p.script_src, :unsafe_eval)
-      end
-    end
-
   private
 
     def set_x_frame_options_header

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

@@ -12,8 +12,8 @@
   accordion_classes << (shared_helper.get_margin_bottom)
 
   translations = {
-    show_text: "components.accordion.show",
-    hide_text: "components.accordion.hide",
+    show_text: "common.show",
+    hide_text: "common.hide",
     show_all_text: "components.accordion.show_all",
     hide_all_text: "components.accordion.hide_all",
     this_section_visually_hidden: "components.accordion.this_section_visually_hidden",

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

@@ -4,12 +4,13 @@
   css_classes = %w( gem-c-error-message govuk-error-message )
   css_classes << classes if classes
   items ||= []
+  right_to_left ||= false
 
   if items.any?
     errors = items.map { |item| capture { item[:text] } }
     text = raw(errors.join("<br />"))
   end
 %>
-<%= tag.p id: id, class: css_classes do %>
+<%= tag.p id: id, class: css_classes, dir: right_to_left ? "rtl" : nil do %>
   <span class="govuk-visually-hidden">Error:</span> <%= text %>
 <% end %>

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

@@ -7,7 +7,7 @@
     gtm_attributes << "gtm_preview=" + gtm_preview if gtm_preview
   gtm_attributes = gtm_attributes.join('&')
 %>
-<script>
+<%= javascript_tag nonce: true do -%>
 var doNotTrack = ( navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes' || navigator.msDoNotTrack === '1' || window.doNotTrack === '1' )
 if (!doNotTrack) {
   (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -16,4 +16,4 @@ if (!doNotTrack) {
   'https://www.googletagmanager.com/gtm.js?id='+i+dl+'&<%= raw gtm_attributes %>';f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','<%= gtm_id %>');
 }
-</script>
+<% end -%>

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

@@ -1,11 +1,12 @@
 <%
   id ||= "hint-#{SecureRandom.hex(4)}"
+  right_to_left ||= false
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   css_classes = %w( gem-c-hint govuk-hint )
   css_classes << shared_helper.get_margin_bottom
 %>
 
-<%= tag.div id: id, class: css_classes do %>
+<%= tag.div id: id, class: css_classes, dir: right_to_left ? "rtl" : nil do %>
   <%= text %>
 <% 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

@@ -81,9 +81,9 @@
     <%= 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/_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/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/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/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/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/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>

data/app/views/govuk_publishing_components/components/related_navigation/_section.html.erb

@@ -54,10 +54,10 @@
           class="gem-c-related-navigation__toggle"
           data-controls="toggle_<%= section_title %>"
           data-expanded="false"
-          data-toggled-text="<%= t("components.metadata.toggle_less") %>">
-          <%= t("components.metadata.toggle_more",
-                number: related_nav_helper.remaining_link_count(links),
-                default: "+ #{related_nav_helper.remaining_link_count(links)} more") %>
+          data-toggled-text="<%= t("common.toggle_less") %>">
+          <%= t("common.toggle_more",
+            show: t('common.show'),
+            number: related_nav_helper.remaining_link_count(links)) %>
         </a>
       </li>
 

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -23,9 +23,9 @@
     <%= yield :extra_headers %>
   </head>
   <body class="gem-c-layout-for-admin govuk-template__body <%= 'hide-header-and-footer' if @preview %>">
-    <script>
+    <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-    </script>
+    <% end -%>
     <% if @preview %>
       <main id="wrapper" class="govuk-width-container">
         <%= yield %>

data/config/locales/ar.yml

@@ -1,12 +1,14 @@
 ---
 ar:
   common:
+    hide: إخفاء
+    show: إظهار
+    toggle_less: عرض أقل
+    toggle_more: زيادة بمقدار %{show} %{number}
     translations: الترجمات
   components:
     accordion:
-      hide: إخفاء
       hide_all: إخفاء كل الأقسام
-      show: إظهار
       show_all: إظهار كل الأقسام
       this_section_visually_hidden: " هذا القسم"
     article_schema:
@@ -129,8 +131,6 @@ ar:
       part_of: جزء من
       published: منشورة
       see_all_updates: اطلع على كل التحديثات
-      toggle_less: عرض أقل
-      toggle_more: زيادة بمقدار + %{number}
     modal_dialogue:
       close_modal: إغلاق مربع الحوار المشروط
     notice:

data/config/locales/az.yml

@@ -1,12 +1,14 @@
 ---
 az:
   common:
+    hide: Gizlət
+    show: Göstər
+    toggle_less: Daha azını göstər
+    toggle_more: "%{show} %{number} daha çox"
     translations: Tərcümələr
   components:
     accordion:
-      hide: Gizlət
       hide_all: Bütün bölmələri gizlət
-      show: Göstər
       show_all: Bütün bölmələri göstər
       this_section_visually_hidden: " bu bölmə"
     article_schema:
@@ -126,8 +128,6 @@ az:
       part_of: Hissə
       published: Dərc edilib
       see_all_updates: Bütün yeniləmələrə baxın
-      toggle_less: Daha azını göstər
-      toggle_more: "+ %{number} daha çox"
     modal_dialogue:
       close_modal: Modal dialoqu bağla
     notice:

data/config/locales/be.yml

@@ -1,12 +1,14 @@
 ---
 be:
   common:
+    hide: Схаваць
+    show: Паказаць
+    toggle_less: Паказаць меньш
+    toggle_more: "%{show} %{number} болей"
     translations: Пераклады
   components:
     accordion:
-      hide: Схаваць
       hide_all: Схаваць усе секцыi
-      show: Паказаць
       show_all: Паказаць усе секцыi
       this_section_visually_hidden: " гэта секцыя"
     article_schema:
@@ -132,8 +134,6 @@ be:
       part_of: Частка
       published: Апублікаваны
       see_all_updates: Паглядзець усе абнаўленні
-      toggle_less: Паказаць меньш
-      toggle_more: "+ %{number} болей"
     modal_dialogue:
       close_modal: Зачыніць мадальны дыялог
     notice:

data/config/locales/bg.yml

@@ -1,12 +1,14 @@
 ---
 bg:
   common:
+    hide: Скриване
+    show: Показване
+    toggle_less: Показване на по-малко
+    toggle_more: "%{show} %{number} повече"
     translations: Translations
   components:
     accordion:
-      hide: Скриване
       hide_all: Скриване на всички раздели
-      show: Показване
       show_all: Показване на всички раздели
       this_section_visually_hidden: " този раздел"
     article_schema:
@@ -130,8 +132,6 @@ bg:
       part_of: Част от
       published: Публикуван
       see_all_updates: Вижте всички актуализации
-      toggle_less: Показване на по-малко
-      toggle_more: "+ %{number} повече"
     modal_dialogue:
       close_modal: Затваряне на модалния диалог
     notice: