govuk_publishing_components 24.9.1 → 24.10.1

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

@@ -79,3 +79,13 @@ examples:
       error_items:
       - text: Look I keep telling you
       - text: This isn't your password
+  with_data_attributes:
+    description: Data attributes can be passed to add to the input element. If the data attribute starts with `data-button-` this attribute will be applied to the show/hide button, instead of the input. Note that if JS is disabled, all attributes are added to the input.
+    data:
+      label:
+        text: Your password
+      data:
+        example_1: value
+        example_2: thing
+        button_example_1: wotsit
+        button_example_2: doodad

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

@@ -24,6 +24,11 @@ examples:
     data:
       message: Message to alert the user to a successful action goes here
       title_id: my-custom-success-id
+  with_styled_link:
+    description: If you need to include a link in your success alert, you need to specify the `govuk-link` and `govuk-notification-banner__link` classes on that link element. This is in line with Design System guidance that the colour of the link in success notification banners can look jarring if any links are a different colour to the principal colour used by the success banner.
+    data:
+      message: Message to alert the user to a successful action goes here
+      description: <p class="govuk-body">A further description with <a href="/a-cool-page" class="govuk-link govuk-notification-banner__link">a link</a></p>
   long_example:
     data:
       message: |

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

@@ -28,7 +28,7 @@
   </div>
   <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
     <button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
-      <%= t("components.feedback.something_wrong", default: "There is something wrong with this page") %>
+      <%= t("components.feedback.something_wrong", default: "Report a problem with this page") %>
     </button>
   </div>
 </div>

data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb

@@ -7,7 +7,7 @@
     class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button"
     type="button"
   >
-    Menu
+    <%= t("components.layout_header.menu") %>
   </button>
   <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
     <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">

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

@@ -13,8 +13,8 @@
        class="gem-c-metadata__definition-link"
        data-controls="toggle-<%= toggle_id %>"
        data-expanded="false"
-       data-toggled-text="<%= t("govuk_component.metadata.toggle_less", default: "Show fewer") %>">
-        <%= t("govuk_component.metadata.toggle_more", number: remaining.length, default: "+ #{remaining.length} more") %>
+       data-toggled-text="<%= t("components.metadata.toggle_less", default: "Show fewer") %>">
+        <%= t("components.metadata.toggle_more", number: remaining.length, default: "+ #{remaining.length} more") %>
     </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

@@ -23,10 +23,11 @@
 
     <% links.each.with_index(1) do |link, index| %>
       <%
+        link_class = "govuk-link #{related_nav_helper.section_css_class("govuk-link gem-c-related-navigation__section-link", section_title, link: link, link_is_inline: (index >= section_link_limit))}"
         link_element = link_to(
           link[:text],
           link[:path],
-          class: related_nav_helper.section_css_class("gem-c-related-navigation__section-link", section_title, link: link, link_is_inline: (index >= section_link_limit)),
+          class: link_class,
           rel: link[:rel],
           lang: shared_helper.t_locale_check(link[:locale]),
           data: {
@@ -53,8 +54,8 @@
           class="gem-c-related-navigation__toggle"
           data-controls="toggle_<%= section_title %>"
           data-expanded="false"
-          data-toggled-text="<%= t("govuk_component.metadata.toggle_less", default: "Show fewer") %>">
-          <%= t("govuk_component.metadata.toggle_more",
+          data-toggled-text="<%= t("components.metadata.toggle_less", default: "Show fewer") %>">
+          <%= t("components.metadata.toggle_more",
                 number: related_nav_helper.remaining_link_count(links),
                 default: "+ #{related_nav_helper.remaining_link_count(links)} more") %>
         </a>

data/config/locales/cy.yml

@@ -13,8 +13,3 @@ cy:
         title: "Brexit"
         link_path: "/transition.cy"
         link_text: "Gwiriwch beth sydd angen i chi ei wneud"
-      take_action_list:
-        red: Gwiriwch
-        amber: Newidiwch
-        green: Ewch
-        aria_label: Ymgyrch slogan Brexit, Gwiriwch, Newidiwch, Ewch.

data/config/locales/en.yml

@@ -23,6 +23,12 @@ en:
   common:
     translations: "Translations"
   components:
+    accordion:
+      show: "Show"
+      hide: "Hide"
+      show_all: "Show all sections"
+      hide_all: "Hide all sections"
+      this_section_visually_hidden: " this section"
     attachment:
       opendocument_html: "This file is in an <a href='https://www.gov.uk/guidance/using-open-document-formats-odf-in-your-organisation' target=%{target} class='govuk-link'>OpenDocument</a> format"
       request_format_text: "This file may not be suitable for users of assistive technology."
@@ -38,13 +44,13 @@ en:
       contents: "Contents"
     feedback:
       is_this_page_useful: "Is this page useful?"
-      yes: "Yes"
-      no: "No"
+      "yes": "Yes"
+      "no": "No"
       maybe: "Maybe"
       is_useful: "this page is useful"
       is_not_useful: "this page is not useful"
       thank_you_for_feedback: "Thank you for your feedback"
-      something_wrong: "There is something wrong with this page"
+      something_wrong: "Report a problem with this page"
       close: "Close"
       help_us_improve_govuk: "Help us improve GOV.UK"
       more_about_visit: "To help us improve GOV.UK, we’d like to know more about your visit today. We’ll send you a link to a feedback form. It will take only 2 minutes to fill in. Don’t worry we won’t send you spam or share your email address with anyone."
@@ -58,6 +64,8 @@ en:
       search_button: "Search GOV.UK"
       show_button: "Show search"
       hide_button: "Hide search"
+      top_level: "Top level"
+      menu: "Menu"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
@@ -79,11 +87,6 @@ en:
         title: "Brexit"
         link_path: "/transition"
         link_text: "Check what you need to do"
-      take_action_list:
-        red: "Check"
-        amber: "Change"
-        green: "Go"
-        aria_label: "Brexit campaign slogan, Check, Change, Go."
     related_footer_navigation:
       collections: "Collections"
       policies: "Policies"

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.9.1".freeze
+  VERSION = "24.10.1".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.9.1
+  version: 24.10.1
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-09 00:00:00.000000000 Z
+date: 2021-05-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -164,6 +164,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2'
+- !ruby/object:Gem::Dependency
+  name: i18n-coverage
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: jasmine
   requirement: !ruby/object:Gem::Requirement
@@ -192,6 +206,26 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 3.0.0
+- !ruby/object:Gem::Dependency
+  name: percy-capybara
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.2
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.2
 - !ruby/object:Gem::Dependency
   name: pry-byebug
   requirement: !ruby/object:Gem::Requirement
@@ -396,7 +430,6 @@ files:
 - app/assets/javascripts/component_guide/filter-components.js
 - app/assets/javascripts/component_guide/vendor/bind-polyfill.js
 - app/assets/javascripts/component_guide/vendor/matches-polyfill.min.js
-- app/assets/javascripts/component_guide/visual-regression.js
 - app/assets/javascripts/govuk_publishing_components/all_components.js
 - app/assets/javascripts/govuk_publishing_components/analytics.js
 - app/assets/javascripts/govuk_publishing_components/analytics/analytics.js

data/app/assets/javascripts/component_guide/visual-regression.js

@@ -1,71 +0,0 @@
-(function (window, document) {
-  window.GOVUK = window.GOVUK || {}
-
-  window.GOVUK.VisualDiffTool = function (currentWindowLocation) {
-    var visualDiffSelector = 'visual-diff'
-    var existingIframe = document.getElementById(visualDiffSelector)
-    var windowLocation = currentWindowLocation || window.location
-
-    if (existingIframe) {
-      existingIframe.parentNode.removeChild(existingIframe)
-      document.body.style.filter = null
-    } else {
-      var iframe = document.createElement('iframe')
-      iframe.id = visualDiffSelector
-      iframe.setAttribute('scrolling', 'no')
-      _setElementStyles(iframe, {
-        width: '100%',
-        height: document.body.scrollHeight + 'px',
-        position: 'absolute',
-        top: '0',
-        'pointer-events': 'none',
-        border: '0'
-      })
-      iframe.style.setProperty('z-index', '999', 'important')
-
-      // For browsers that support it, do mix-blend-mode diff
-      if ('mix-blend-mode' in document.body.style) {
-        _setElementStyles(iframe, { 'mix-blend-mode': 'difference' })
-        document.body.style.filter = 'invert(100%)'
-      } else {
-        // Else do a simple overlay of the live page for comparison (IE and Edge)
-        _setElementStyles(iframe, { opacity: '0.7' })
-      }
-
-      iframe.src = _processComparisonURL(windowLocation)
-
-      if (iframe.src) {
-        document.body.appendChild(iframe)
-        console.log('comparing to ' + iframe.src)
-      }
-    }
-  }
-
-  var _processComparisonURL = function (url) {
-    var appName
-    var href = url.href
-    var host = url.host
-
-    if (href.includes('dev.gov.uk/component-guide')) {
-      appName = host.split('.')[0]
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
-    } else if (href.includes('dev.gov.uk')) {
-      return _forceHTTPS(href.replace(host, 'www.gov.uk'))
-    } else if (href.includes('-pr-')) {
-      appName = host.split('-pr')[0]
-      return _forceHTTPS(href.replace(host, appName + '.herokuapp.com'))
-    } else {
-      throw new Error('Visual Diff Tool: You need to run this tool against a page running on your local dev environment')
-    }
-  }
-
-  var _forceHTTPS = function (href) {
-    return href.replace('http://', 'https://')
-  }
-
-  var _setElementStyles = function (element, styles) {
-    for (var style in styles) {
-      element.style[style] = styles[style]
-    }
-  }
-})(window, document)