govspeak 5.1.0 → 5.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ebdbbfa89f69d8876bdd0728e13474e97f43eb88
-  data.tar.gz: 757ccbe46be1e4f503251b349e97a39985091733
+  metadata.gz: a4a6fee8680d3b04ed7c86d26efcfdd73fa58f5b
+  data.tar.gz: f3102b0907209a598118940cf7fc1b81258be172
 SHA512:
-  metadata.gz: b8edf0d8658ada877429cf8b8747b205a4734f697bc3a9c5bec444edee15a334f9ae92faf4029344646483f3fba05174be6b2c4d13225ef037b965ad8652f521
-  data.tar.gz: bd9cea16633290ef7a5eb6d7b4c4d05430d28cb09c8be44fbe8dbee0c17f939e44cee3f92c6b558432e991db5424f6f9a9081131302aad7bd100e340f546264e
+  metadata.gz: 62b7674a6488a733859c07147734a663a9e0217d9ee7527a1d79cf9d8f04d0bfc50cb3c3d57736e3e87bcd2547a481d31cd5f91e6c923f134c7932a46a7fdd8b
+  data.tar.gz: 56c16ff2616269cd93089a480fa373ba6b6251f66cda4f725e354359a6d7d8141f604e7765304425bd93ff9d0ed6df4fcc5fd6a3bc90bdb6053dd81b9aa73682

data/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 5.2.0
+* Add button component for govspeak [#114](https://github.com/alphagov/govspeak/pull/114) see README for usage
+
 ## 5.1.0
 * Update Kramdown version to 1.15.0
 

data/README.md

@@ -525,3 +525,65 @@ will output
   </div>
 </div>
 ```
+
+### Button
+
+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
+
+You must use the [link](https://daringfireball.net/projects/markdown/syntax#link) syntax within the button tags.
+
+#### Examples
+
+To get the most basic button.
+
+```
+{button}[Continue](https://gov.uk/random){/button}
+```
+
+which outputs
+
+```html
+<a role="button" class="button" href="https://gov.uk/random">
+  Continue
+</a>
+```
+
+To turn a button into a ['Start now' button](https://www.gov.uk/service-manual/design/start-pages#start-page-elements), you can pass `start` to the button tag.
+
+```
+{button start}[Start Now](https://gov.uk/random){/button}
+```
+
+which outputs
+
+```html
+<a role="button" class="button button-start" href="https://gov.uk/random">
+  Start Now
+</a>
+```
+
+You can pass a Google Analytics [tracking id](https://support.google.com/analytics/answer/7372977?hl=en) which will send page views to another domain, this is used to help services understand the start of their users journeys.
+
+```
+{button start cross-domain-tracking:UA-XXXXXX-Y}
+  [Start Now](https://example.com/external-service/start-now)
+{/button}
+```
+
+which outputs
+
+```html
+<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>
+```

data/lib/govspeak.rb

@@ -135,6 +135,33 @@ module Govspeak
       parser.new(body.strip).to_html.sub(/^<p>(.*)<\/p>$/,"<p><strong>\\1</strong></p>")
     end
 
+    extension('button', %r{
+      {button(.*?)} # match opening bracket and capture attributes
+        \s* # any whitespace between opening bracket and link
+        \[ # match start of link markdown
+          ([^\]]+) # capture inside of link markdown
+        \] # match end of link markdown
+        \( # match start of link text markdown
+          ([^)]+)  # capture inside of link text markdown
+        \) # match end of link text markdown
+        \s*  # any whitespace between opening bracket and link
+      {\/button} # match ending bracket
+    }x) { |attributes, text, href|
+      button_classes = "button"
+      button_classes << " button-start" if attributes =~ /start/
+      /cross-domain-tracking:(?<cross_domain_tracking>.[^\s*]+)/ =~ attributes
+      data_attribute = ""
+      if cross_domain_tracking
+        data_attribute << " data-module='cross-domain-tracking'"
+        data_attribute << " data-tracking-code='#{cross_domain_tracking.strip}'"
+        data_attribute << " data-tracking-name='govspeakButtonTracker'"
+      end
+      text = text.strip
+      href = href.strip
+
+      %{\n<a role="button" class="#{button_classes}" href="#{href}" #{data_attribute}>#{text}</a>\n}
+    }
+
     extension('highlight-answer') { |body|
       %{\n\n<div class="highlight-answer">
 #{Govspeak::Document.new(body.strip).to_html}</div>\n}

data/lib/govspeak/html_sanitizer.rb

@@ -57,11 +57,19 @@ class Govspeak::HtmlSanitizer
     Sanitize.clean(@dirty_html, config)
   end
 
+  def button_sanitize_config
+    [
+      "data-module='cross-domain-tracking'",
+      "data-tracking-code",
+      "data-tracking-name"
+    ]
+  end
+
   def sanitize_config
     deep_merge(Sanitize::Config::RELAXED, {
       attributes: {
         :all => Sanitize::Config::RELAXED[:attributes][:all] + [ "id", "class", "role", "aria-label" ],
-        "a"  => Sanitize::Config::RELAXED[:attributes]["a"] + [ "rel" ],
+        "a"  => Sanitize::Config::RELAXED[:attributes]["a"] + ["rel"] + button_sanitize_config,
         "th"  => Sanitize::Config::RELAXED[:attributes]["th"] + [ "style" ],
         "td"  => Sanitize::Config::RELAXED[:attributes]["td"] + [ "style" ],
       },

data/lib/govspeak/version.rb

@@ -1,3 +1,3 @@
 module Govspeak
-  VERSION = "5.1.0".freeze
+  VERSION = "5.2.0".freeze
 end

data/test/govspeak_button_test.rb

@@ -0,0 +1,85 @@
+# encoding: UTF-8
+
+require 'test_helper'
+require 'govspeak_test_helper'
+
+require 'ostruct'
+
+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_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_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_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_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_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_text_output "Something else"
+  end
+
+  # Test that nothing renders when not given a link
+  test_given_govspeak "{button}I shouldn't render a button{/button}" do
+    assert_html_output '<p>{button}I shouldn’t render a button{/button}</p>'
+  end
+
+  test_given_govspeak "Text before the button {button}[Start Now](http://www.gov.uk){/button} test after the button" do
+    # rubocop:disable Layout/TrailingWhitespace
+    assert_html_output %{
+      <p>Text before the button 
+      <a role="button" class="button" href="http://www.gov.uk">Start Now</a>
+       test after the button</p>
+    }
+    # rubocop:enable Layout/TrailingWhitespace
+    assert_text_output "Text before the button Start Now test after the button"
+  end
+
+  test_given_govspeak "Text before the button with line breaks \n\n\n{button}[Start Now](http://www.gov.uk){/button}\n\n\n test after the button" do
+    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>test after the button</p>
+    }
+    assert_text_output "Text before the button with line breaks Start Now test after the button"
+  end
+
+  # 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_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_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_text_output "Start Now"
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govspeak
 version: !ruby/object:Gem::Version
-  version: 5.1.0
+  version: 5.2.0
 platform: ruby
 authors:
 - Ben Griffiths
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-27 00:00:00.000000000 Z
+date: 2017-11-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: kramdown
@@ -285,6 +285,7 @@ files:
 - test/govspeak_attachments_image_test.rb
 - test/govspeak_attachments_inline_test.rb
 - test/govspeak_attachments_test.rb
+- test/govspeak_button_test.rb
 - test/govspeak_contacts_test.rb
 - test/govspeak_link_test.rb
 - test/govspeak_structured_headers_test.rb
@@ -319,17 +320,18 @@ signing_key:
 specification_version: 4
 summary: Markup language for single domain
 test_files:
+- test/blockquote_extra_quote_remover_test.rb
+- test/govspeak_test_helper.rb
+- test/govspeak_structured_headers_test.rb
+- test/govspeak_attachments_image_test.rb
 - test/govspeak_attachments_test.rb
-- test/govspeak_attachments_inline_test.rb
-- test/govspeak_link_test.rb
-- test/govspeak_contacts_test.rb
 - test/test_helper.rb
-- test/govspeak_test.rb
-- test/govspeak_attachments_image_test.rb
+- test/govspeak_attachments_inline_test.rb
+- test/html_sanitizer_test.rb
+- test/govspeak_button_test.rb
 - test/with_deep_merge_test.rb
 - test/html_validator_test.rb
-- test/govspeak_structured_headers_test.rb
-- test/blockquote_extra_quote_remover_test.rb
+- test/govspeak_test.rb
+- test/govspeak_link_test.rb
+- test/govspeak_contacts_test.rb
 - test/presenters/h_card_presenter_test.rb
-- test/govspeak_test_helper.rb
-- test/html_sanitizer_test.rb