govspeak 6.5.2 → 6.5.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eaa4aea2a5ad557426d34d0d17ef75ae5d538862cc293ad6d6403a663797667f
-  data.tar.gz: 3950f3fdd4bc77f5b00ceb5bede0ffca988f2c910739ee0906fa49431be95ae0
+  metadata.gz: 753ae3784f7f2ea1afcba0ab048130ea81a12d18e6b83297c0044a029b9a7f96
+  data.tar.gz: 66b4612a2f7f821e94b5e0b5bc1a2471e40cc171506337f4c76dd3c95c087921
 SHA512:
-  metadata.gz: 90a7401f005a80646a8390723c04b4e2754d39b42559189d70aab1c1214223b62e805f6cb640b4c1acc3dd37401fe059849884af56f533295fa4b24af760f7f8
-  data.tar.gz: 18f85c38c237de6fc51b62b15c69b7bf236e0957c218e8ee246ba7fd572102231b129f6728461b5b9e57f2884107a0c419327e8ce522e8c70fe38fd3c4b1f066
+  metadata.gz: 979a24087e5278d5c5c045f02bbd65bd2b9265ba255af4d00de3697d44af9024330973d477177aacf117ac3cfa5210c209bc545117d4a1731e9b0b2cdfd4fbb9
+  data.tar.gz: b6e1a3e1d72f7c83b747cdc204b32efc7824dbea550cd9bdc3d965cd685952ff1dee44066dd9d3215c04f050abe8647b30584a3fca7d43c181a3d2eed2ae4b9b

data/CHANGELOG.md

@@ -1,8 +1,13 @@
+## 6.5.3
+
+* Use button component for buttons (PR#176)
+
 ## 6.5.2
 
 * Allow `data` attributes on `div` tags (PR#173)
 
 ## 6.5.1
+
 * Change unicode testing characters after external gem change
 * Move from govuk-lint to rubocop-govuk
 * Allow version 6 of actionview

data/README.md

@@ -619,8 +619,7 @@ will output
 
 An accessible way to add button links into content, that can also allow cross domain tracking with [Google Analytics](https://support.google.com/analytics/answer/7372977?hl=en)
 
-This button component is [extended from static](http://govuk-static.herokuapp.com/component-guide/button) for [use in govspeak](http://govuk-static.herokuapp.com/component-guide/govspeak/button)
-Note: Ideally we'd use the original component directly but this currently isnt possible
+This button component uses the component from the [components gem](https://components.publishing.service.gov.uk/component-guide/button) for use in govspeak.
 
 You must use the [link](https://daringfireball.net/projects/markdown/syntax#link) syntax within the button tags.
 
@@ -635,7 +634,7 @@ To get the most basic button.
 which outputs
 
 ```html
-<a role="button" class="button" href="https://gov.uk/random">
+<a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">
   Continue
 </a>
 ```
@@ -649,8 +648,9 @@ To turn a button into a ['Start now' button](https://www.gov.uk/service-manual/d
 which outputs
 
 ```html
-<a role="button" class="button button-start" href="https://gov.uk/random">
+<a role="button" class="gem-c-button govuk-button govuk-button--start" href="https://gov.uk/random">
   Start Now
+  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg>
 </a>
 ```
 
@@ -667,12 +667,13 @@ which outputs
 ```html
 <a
   role="button"
-  class="button button-start"
+  class="gem-c-button govuk-button govuk-button--start"
   href="https://example.com/external-service/start-now"
   data-module="cross-domain-tracking"
   data-tracking-code="UA-XXXXXX-Y"
   data-tracking-name="govspeakButtonTracker"
 >
   Start Now
+  <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg>
 </a>
 ```

data/lib/govspeak.rb

@@ -161,10 +161,10 @@ module Govspeak
       {\/button} # match ending bracket
       (?:\r|\n|$) # non-capturing match to make sure end of line and linebreak
     }x) { |attributes, text, href|
-      button_classes = "button"
-      button_classes << " button-start" if attributes =~ /start/
+      button_classes = "govuk-button"
       /cross-domain-tracking:(?<cross_domain_tracking>.[^\s*]+)/ =~ attributes
       data_attribute = ""
+      data_attribute << " data-start='true'" if attributes =~ /start/
       if cross_domain_tracking
         data_attribute << " data-module='cross-domain-tracking'"
         data_attribute << " data-tracking-code='#{cross_domain_tracking.strip}'"

data/lib/govspeak/html_sanitizer.rb

@@ -51,10 +51,12 @@ class Govspeak::HtmlSanitizer
   def sanitize_config
     Sanitize::Config.merge(
       Sanitize::Config::RELAXED,
-      elements: Sanitize::Config::RELAXED[:elements] + %w[govspeak-embed-attachment govspeak-embed-attachment-link],
+      elements: Sanitize::Config::RELAXED[:elements] + %w[govspeak-embed-attachment govspeak-embed-attachment-link svg path],
       attributes: {
         :all => Sanitize::Config::RELAXED[:attributes][:all] + %w[role aria-label],
         "a"  => Sanitize::Config::RELAXED[:attributes]["a"] + [:data],
+        "svg" => Sanitize::Config::RELAXED[:attributes][:all] + %w[xmlns width height viewbox focusable],
+        "path" => Sanitize::Config::RELAXED[:attributes][:all] + %w[fill d],
         "div" => [:data],
         "th"  => Sanitize::Config::RELAXED[:attributes]["th"] + %w[style],
         "td"  => Sanitize::Config::RELAXED[:attributes]["td"] + %w[style],

data/lib/govspeak/post_processor.rb

@@ -100,6 +100,24 @@ module Govspeak
       end
     end
 
+    extension("use gem component for buttons") do |document|
+      document.css(".govuk-button").map do |el|
+        button_html = GovukPublishingComponents.render(
+          "govuk_publishing_components/components/button",
+          text: el.content,
+          href: el["href"],
+          start: el["data-start"],
+          data_attributes: {
+            module: el["data-module"],
+            "tracking-code": el["data-tracking-code"],
+            "tracking-name": el["data-tracking-name"],
+          },
+        ).squish.gsub("> <", "><").gsub!(/\s+/, " ")
+
+        el.swap(button_html)
+      end
+    end
+
     attr_reader :input, :govspeak_document
 
     def initialize(html, govspeak_document)

data/lib/govspeak/version.rb

@@ -1,3 +1,3 @@
 module Govspeak
-  VERSION = "6.5.2".freeze
+  VERSION = "6.5.3".freeze
 end

data/test/govspeak_button_test.rb

@@ -9,34 +9,34 @@ class GovspeakTest < Minitest::Test
   include GovspeakTestHelper
 
   test_given_govspeak "{button start cross-domain-tracking:UA-23066786-5}[Start now](https://www.registertovote.service.gov.uk/register-to-vote/start){/button}" do
-    assert_html_output '<p><a role="button" class="button button-start" href="https://www.registertovote.service.gov.uk/register-to-vote/start" data-module="cross-domain-tracking" data-tracking-code="UA-23066786-5" data-tracking-name="govspeakButtonTracker">Start now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button govuk-button--start" role="button" data-module="cross-domain-tracking" data-tracking-code="UA-23066786-5" data-tracking-name="govspeakButtonTracker" href="https://www.registertovote.service.gov.uk/register-to-vote/start"> Start now <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewbox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a></p>'
     assert_text_output "Start now"
   end
 
   # The same as above but with line breaks
   test_given_govspeak "{button start cross-domain-tracking:UA-23066786-5}\n\n\n[Start now](https://www.registertovote.service.gov.uk/register-to-vote/start)\n\n\n{/button}" do
-    assert_html_output '<p><a role="button" class="button button-start" href="https://www.registertovote.service.gov.uk/register-to-vote/start" data-module="cross-domain-tracking" data-tracking-code="UA-23066786-5" data-tracking-name="govspeakButtonTracker">Start now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button govuk-button--start" role="button" data-module="cross-domain-tracking" data-tracking-code="UA-23066786-5" data-tracking-name="govspeakButtonTracker" href="https://www.registertovote.service.gov.uk/register-to-vote/start"> Start now <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewbox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a></p>'
     assert_text_output "Start now"
   end
 
   test_given_govspeak "{button cross-domain-tracking:UA-23066786-5}[Start now](https://www.registertovote.service.gov.uk/register-to-vote/start){/button}" do
-    assert_html_output '<p><a role="button" class="button" href="https://www.registertovote.service.gov.uk/register-to-vote/start" data-module="cross-domain-tracking" data-tracking-code="UA-23066786-5" data-tracking-name="govspeakButtonTracker">Start now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button" role="button" data-module="cross-domain-tracking" data-tracking-code="UA-23066786-5" data-tracking-name="govspeakButtonTracker" href="https://www.registertovote.service.gov.uk/register-to-vote/start">Start now</a></p>'
     assert_text_output "Start now"
   end
 
   test_given_govspeak "{button start}[Start now](https://www.registertovote.service.gov.uk/register-to-vote/start){/button}" do
-    assert_html_output '<p><a role="button" class="button button-start" href="https://www.registertovote.service.gov.uk/register-to-vote/start">Start now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://www.registertovote.service.gov.uk/register-to-vote/start"> Start now <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewbox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a></p>'
     assert_text_output "Start now"
   end
 
   test_given_govspeak "{button}[Start now](https://www.registertovote.service.gov.uk/register-to-vote/start){/button}" do
-    assert_html_output '<p><a role="button" class="button" href="https://www.registertovote.service.gov.uk/register-to-vote/start">Start now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button" role="button" href="https://www.registertovote.service.gov.uk/register-to-vote/start">Start now</a></p>'
     assert_text_output "Start now"
   end
 
   # Test other text outputs
   test_given_govspeak "{button}[Something else](https://www.registertovote.service.gov.uk/register-to-vote/start){/button}" do
-    assert_html_output '<p><a role="button" class="button" href="https://www.registertovote.service.gov.uk/register-to-vote/start">Something else</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button" role="button" href="https://www.registertovote.service.gov.uk/register-to-vote/start">Something else</a></p>'
     assert_text_output "Something else"
   end
 
@@ -49,7 +49,7 @@ class GovspeakTest < Minitest::Test
     assert_html_output %{
       <p>Text before the button with line breaks</p>
 
-      <p><a role="button" class="button" href="http://www.gov.uk">Start Now</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="http://www.gov.uk">Start Now</a></p>
 
       <p>test after the button</p>
     }
@@ -58,17 +58,17 @@ class GovspeakTest < Minitest::Test
 
   # Test README examples
   test_given_govspeak "{button}[Continue](https://gov.uk/random){/button}" do
-    assert_html_output '<p><a role="button" class="button" href="https://gov.uk/random">Continue</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">Continue</a></p>'
     assert_text_output "Continue"
   end
 
   test_given_govspeak "{button start}[Start Now](https://gov.uk/random){/button}" do
-    assert_html_output '<p><a role="button" class="button button-start" href="https://gov.uk/random">Start Now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start Now <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewbox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a></p>'
     assert_text_output "Start Now"
   end
 
   test_given_govspeak "{button start cross-domain-tracking:UA-XXXXXX-Y}[Start Now](https://example.com/external-service/start-now){/button}" do
-    assert_html_output '<p><a role="button" class="button button-start" href="https://example.com/external-service/start-now" data-module="cross-domain-tracking" data-tracking-code="UA-XXXXXX-Y" data-tracking-name="govspeakButtonTracker">Start Now</a></p>'
+    assert_html_output '<p><a class="gem-c-button govuk-button govuk-button--start" role="button" data-module="cross-domain-tracking" data-tracking-code="UA-XXXXXX-Y" data-tracking-name="govspeakButtonTracker" href="https://example.com/external-service/start-now"> Start Now <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewbox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a></p>'
     assert_text_output "Start Now"
   end
 
@@ -83,21 +83,21 @@ class GovspeakTest < Minitest::Test
   # Make sure button renders when typical linebreaks are before it, seen in publishing applications
   test_given_govspeak "{button}[Line breaks](https://gov.uk/random){/button}\r\n\r\n{button}[Continue](https://gov.uk/random){/button}\r\n\r\n{button}[Continue](https://gov.uk/random){/button}" do
     assert_html_output %{
-      <p><a role="button" class="button" href="https://gov.uk/random">Line breaks</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">Line breaks</a></p>
 
-      <p><a role="button" class="button" href="https://gov.uk/random">Continue</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">Continue</a></p>
 
-      <p><a role="button" class="button" href="https://gov.uk/random">Continue</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">Continue</a></p>
     }
   end
 
   test_given_govspeak "{button}[More line breaks](https://gov.uk/random){/button}\n\n{button}[Continue](https://gov.uk/random){/button}\n\n{button}[Continue](https://gov.uk/random){/button}" do
     assert_html_output %{
-      <p><a role="button" class="button" href="https://gov.uk/random">More line breaks</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">More line breaks</a></p>
 
-      <p><a role="button" class="button" href="https://gov.uk/random">Continue</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">Continue</a></p>
 
-      <p><a role="button" class="button" href="https://gov.uk/random">Continue</a></p>
+      <p><a class="gem-c-button govuk-button" role="button" href="https://gov.uk/random">Continue</a></p>
     }
   end
 
@@ -122,7 +122,7 @@ class GovspeakTest < Minitest::Test
       <p>lorem lorem lorem
       lorem lorem lorem</p>
 
-      <p><a role="button" class="button button-start" href="https://gov.uk/random">Start Now</a></p>
+      <p><a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start Now <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewbox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a></p>
 
       <p>lorem lorem lorem
       lorem lorem lorem</p>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govspeak
 version: !ruby/object:Gem::Version
-  version: 6.5.2
+  version: 6.5.3
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-12-16 00:00:00.000000000 Z
+date: 2020-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -365,23 +365,23 @@ signing_key:
 specification_version: 4
 summary: Markup language for single domain
 test_files:
-- test/govspeak_link_extractor_test.rb
-- test/govspeak_structured_headers_test.rb
-- test/govspeak_images_bang_test.rb
-- test/govspeak_button_test.rb
-- test/govspeak_table_with_headers_test.rb
-- test/govspeak_extract_contact_content_ids_test.rb
 - test/blockquote_extra_quote_remover_test.rb
 - test/govspeak_test_helper.rb
-- test/govspeak_link_test.rb
-- test/govspeak_images_test.rb
+- test/govspeak_structured_headers_test.rb
 - test/govspeak_attachment_link_test.rb
-- test/govspeak_contacts_test.rb
+- test/govspeak_attachments_image_test.rb
 - test/test_helper.rb
-- test/html_validator_test.rb
-- test/html_sanitizer_test.rb
 - test/govspeak_attachments_inline_test.rb
-- test/govspeak_test.rb
+- test/html_sanitizer_test.rb
+- test/govspeak_button_test.rb
+- test/govspeak_images_bang_test.rb
+- test/govspeak_images_test.rb
+- test/html_validator_test.rb
 - test/govspeak_attachment_test.rb
-- test/govspeak_attachments_image_test.rb
+- test/govspeak_extract_contact_content_ids_test.rb
+- test/govspeak_test.rb
+- test/govspeak_link_extractor_test.rb
+- test/govspeak_link_test.rb
+- test/govspeak_contacts_test.rb
 - test/presenters/h_card_presenter_test.rb
+- test/govspeak_table_with_headers_test.rb