govuk_publishing_components 24.9.0 → 24.10.0

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

@@ -40,21 +40,21 @@ examples:
     data:
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_supplied_identification:
     description: |
       An `id` is optional as it's automatically generated, but it can be supplied if a specific `id` is required.
@@ -66,29 +66,29 @@ examples:
       id: with-supplied-id-thats-unique-across-the-domain
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_summary:
     description: Adds a subheading below each section heading.
     data:
       items:
         - heading:
-            text: "Understanding agile project management"
+            text: Understanding agile project management
           summary:
-            text: "Introductions, methods, core features."
+            text: Introductions, methods, core features.
           content:
             html:
               '<ul class="govuk-list">
@@ -103,9 +103,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Working with agile methods"
+            text: Working with agile methods
           summary:
-            text: "Workspaces, tools and techniques, user stories, planning."
+            text: Workspaces, tools and techniques, user stories, planning.
           content:
             html:
               '<ul class="govuk-list">
@@ -132,9 +132,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Governing agile services"
+            text: Governing agile services
           summary:
-            text: "Principles, measuring progress, spending money."
+            text: Principles, measuring progress, spending money.
           content:
             html:
               '<ul class="govuk-list">
@@ -158,9 +158,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Phases of an agile project"
+            text: Phases of an agile project
           summary:
-            text: "Discovery, alpha, beta, live and retirement."
+            text: Discovery, alpha, beta, live and retirement.
           content:
             html:
               '<ul class="govuk-list">
@@ -190,54 +190,54 @@ examples:
 
     data:
       data_attributes:
-          gtm: 'gtm-accordion'
-          ga: 'ga-accordion'
+          gtm: gtm-accordion
+          ga: ga-accordion
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-1'
+            gtm: gtm-accordion-item-1
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-2'
+            gtm: gtm-accordion-item-2
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-3'
+            gtm: gtm-accordion-item-3
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
           data_attributes:
-            gtm: 'gtm-accordion-item-4'
+            gtm: gtm-accordion-item-4
   different_heading_level:
     description: This will alter the level of the heading, not the appearance of the heading.
     data:
       heading_level: 3
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   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 30px.
@@ -245,35 +245,35 @@ examples:
       margin_bottom: 0
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
   with_section_open:
     description: |
       Adding `expanded: true` to the item will mean the section will default to being open, rather than closed. Once a user has opened or closed a section, the state of each section will be remembered - this can override a section's default.
     data:
       items:
         - heading:
-            text: "Writing well for the web"
+            text: Writing well for the web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
           expanded: true
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   with_the_anchor_link_navigation:
     description: |
       Some apps require custom ids per accordion section heading for linking between those specific sections, sometimes across multiple pages. An example of this is on manuals pages where multiple manuals will each include large sets of accordions and will reference between specific sections for ease of access to that content. [Live example](https://www.gov.uk/guidance/how-to-publish-on-gov-uk/creating-and-updating-pages#associations).
@@ -287,22 +287,22 @@ examples:
       anchor_navigation: true
       items:
         - heading:
-            text: "Writing well for the web"
-            id: "writing-well-for-the-web"
+            text: Writing well for the web
+            id: writing-well-for-the-web
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for the web.</p>
         - heading:
-            text: "Writing well for specialists"
+            text: Writing well for specialists
           content:
-            html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
+            html: <p class="govuk-body">This is the content for Writing well for specialists.</p>
         - heading:
-            text: "Know your audience"
+            text: Know your audience
           content:
-            html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
+            html: <p class="govuk-body">This is the content for Know your audience.</p>
         - heading:
-            text: "How people read"
+            text: How people read
           content:
-            html: "<p class='govuk-body'>This is the content for How people read.</p>"
+            html: <p class="govuk-body">This is the content for How people read.</p>
   condensed_layout:
     description: |
       This is for when a smaller accordion is required. Since smaller screens trigger a single column layout, this modifier only makes the accordion smaller when viewed on large screens.
@@ -310,7 +310,7 @@ examples:
       condensed: true
       items:
         - heading:
-            text: "Understanding agile project management"
+            text: Understanding agile project management
           content:
             html:
               '<ul class="govuk-list">
@@ -325,9 +325,9 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Working with agile methods"
+            text: Working with agile methods
           summary:
-            text: "Workspaces, tools and techniques, user stories, planning."
+            text: Workspaces, tools and techniques, user stories, planning.
           content:
             html:
               '<ul class="govuk-list">
@@ -354,7 +354,7 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Governing agile services"
+            text: Governing agile services
           content:
             html:
               '<ul class="govuk-list">
@@ -378,7 +378,7 @@ examples:
                   </li>
               </ul>'
         - heading:
-            text: "Phases of an agile project"
+            text: Phases of an agile project
           content:
             html:
               '<ul class="govuk-list">
@@ -397,4 +397,4 @@ examples:
                   <li>
                     <a class="govuk-link govuk-body-s" href="#">Retiring your service</a>
                   </li>
-              </ul>'
+              </ul>'

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/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: {

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."
@@ -44,7 +50,7 @@ en:
       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,9 @@ en:
       search_button: "Search GOV.UK"
       show_button: "Show search"
       hide_button: "Hide search"
+      top_level: "Top level"
+      nav_items_aria_label: "Show or hide Top Level Navigation"
+      menu: "Menu"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
@@ -79,11 +88,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/presenters/contextual_navigation.rb

@@ -206,8 +206,6 @@ module GovukPublishingComponents
         # Environment
         # International
         # Defence and armed forces
-        # Society and culture
-        # Government
         # Work
         # Welfare
         # Money
@@ -225,8 +223,6 @@ module GovukPublishingComponents
           3cf97f69-84de-41ae-bc7b-7e2cc238fa58
           37d0fa26-abed-4c74-8835-b3b51ae1c8b2
           e491505c-77ae-45b2-84be-8c94b94f6a2b
-          e2ca2f1a-0ff3-43ce-b813-16645ff27904
-          e48ab80a-de80-4e83-bf59-26316856a5f9
           d0f1e5a3-c8f4-4780-8678-994f19104b21
           dded88e2-f92e-424f-b73e-6ad24a839c51
           6acc9db4-780e-4a46-92b4-1812e3c2c48a

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "24.9.0".freeze
+  VERSION = "24.10.0".freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 24.9.0
+  version: 24.10.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-07 00:00:00.000000000 Z
+date: 2021-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -192,6 +192,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 +416,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