Merge pull request #1401 from alphagov/revert-1384-remove-button-comp…

…onent

Revert "Remove button component"

app/assets/stylesheets/govuk-component/_button.scss

@@ -0,0 +1,54 @@
+%pub-c-button,
+.pub-c-button {
+  @include button;
+
+  @media(max-width: 425px) {
+    box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+  }
+
+  &:focus {
+    outline: 3px solid $focus-colour;
+  }
+}
+
+// this will be moved and extended into a model for general component spacing
+// once this has been decided upon and other work completed, see:
+// https://trello.com/c/KEkNsxG3/142-3-implement-customisable-spacing-for-components
+.pub-c-button--bottom-margin {
+  @include responsive-bottom-margin;
+}
+
+%pub-c-button--start,
+.pub-c-button--start {
+  @include bold-24($line-height: (24 / 20));
+  display: inline-block;
+  padding: 0.6em 1.7em 0.45em 0.67em;
+
+  @include media(tablet) {
+    padding-top: 0.3em;
+    padding-bottom: 0.15em;
+  }
+
+  background-image: image-url("icon-pointer.png");
+  background-position: 100% 50%;
+  background-repeat: no-repeat;
+
+  @include media-down(mobile) {
+    background-position: center right -.35em;
+  }
+
+  @include device-pixel-ratio() {
+    background-image: image-url("icon-pointer-2x.png");
+    background-size: 30px 19px;
+  }
+}
+
+// scss-lint:disable SelectorFormat
+.pub-c-button__info-text {
+  display: block;
+  margin-top: .5em;
+  max-width: 14em;
+}
+// scss-lint:enable SelectorFormat

app/assets/stylesheets/govuk-component/_component.scss

@@ -20,4 +20,5 @@
 @import "breadcrumbs";
 @import "related-items";
 @import "organisation-logo";
+@import "button";
 @import "lead-paragraph";

app/assets/stylesheets/govuk-component/govspeak/_button.scss

@@ -1,11 +1,9 @@
-@import "govuk_publishing_components/components/button";
-
 .govuk-govspeak {
   .button {
-    @extend %gem-c-button;
+    @extend %pub-c-button;
   }
 
   .button-start {
-    @extend %gem-c-button--start;
+    @extend %pub-c-button--start;
   }
 }

app/views/govuk_component/button.raw.html.erb

@@ -0,0 +1,29 @@
+<%
+  start ||= false
+  href ||= false
+  info_text ||= false
+  rel ||= false
+  text ||= ""
+  margin_bottom ||= false
+  data_attributes ||= false
+  title ||= false
+  css_classes = %w(pub-c-button)
+  css_classes << "pub-c-button--start" if start
+  css_classes << "pub-c-button--bottom-margin" if margin_bottom
+  css_classes = css_classes.join(" ")
+  html_options = { class: css_classes }
+  html_options[:role] = "button" if href
+  html_options[:rel] = rel if rel
+  html_options[:data] = data_attributes if data_attributes
+  html_options[:title] = title if title
+%>
+<% if href %>
+  <%= link_to(text, href.try(:html_safe), html_options) %>
+<% else %>
+  <%= button_tag(text, html_options) %>
+<% end %>
+<% if info_text %>
+  <span class="pub-c-button__info-text">
+    <%= info_text.try(:html_safe) %>
+  </span>
+<% end %>

app/views/govuk_component/docs/button.yml

@@ -0,0 +1,62 @@
+name: Button (deprecated)
+description: Use buttons to move though a transaction, aim to use only one button per page.
+body: |
+  **Don't use this**. Use the [new component in the gem instead](https://govuk-publishing-components.herokuapp.com/component-guide/button)
+accessibility_criteria: |
+  The button must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - indicate when it has focus
+  - activate when focused and space is pressed
+  - activate when focused and enter is pressed
+  - have a role of button
+  - have an accessible label
+examples:
+  default:
+    data:
+      text: "Submit"
+  link_button:
+    data:
+      text: "I'm really a link sssh"
+      href: "#"
+  start_now_button:
+    data:
+      text: "Start now"
+      href: "#"
+      start: true
+      rel: "external"
+  start_now_button_with_info_text:
+    data:
+      text: "Start now"
+      href: "#"
+      start: true
+      info_text: "Sometimes you want to explain where a user is going to."
+  with_margin_bottom:
+    description: "Sometimes it's useful to break up a page, for example if a button is at the bottom of a page."
+    data:
+      text: "Submit"
+      margin_bottom: true
+  extreme_text:
+    data:
+      text: "I'm a button with lots of text to test how the component scales at extremes."
+      href: "#"
+  extreme_text_start_now_button:
+    data:
+      text: "I'm a start now button with lots of text to test how the component scales at extremes."
+      start: true
+      href: "#"
+  with_data_attributes:
+    data:
+      text: "Track this!"
+      margin_bottom: true
+      data_attributes: {
+        "module": "cross-domain-tracking",
+        "tracking-code": "GA-123ABC",
+        "tracking-name": "transactionTracker"
+      }
+  with_title_attribute:
+    data:
+      text: "Click me"
+      margin_bottom: true
+      title: "A button to click"

test/govuk_component/button_test.rb

@@ -0,0 +1,104 @@
+require 'govuk_component_test_helper'
+
+class ButtonTestCase < ComponentTestCase
+  def component_name
+    "button"
+  end
+
+  test "no error if no parameters passed in" do
+    assert_nothing_raised do
+      render_component({})
+      assert_select ".pub-c-button"
+    end
+  end
+
+  test "renders the correct defaults" do
+    render_component(text: "Submit")
+    assert_select ".pub-c-button", text: "Submit"
+    assert_select ".pub-c-button--start", false
+    assert_select ".pub-c-button__info-text", false
+  end
+
+  test "renders text correctly" do
+    render_component(text: "Submit")
+    assert_select ".pub-c-button", text: "Submit"
+  end
+
+  test "renders start now button" do
+    render_component(text: "Start now", href: "#", start: true)
+    assert_select ".pub-c-button", text: "Start now", href: "#"
+    assert_select ".pub-c-button--start"
+  end
+
+  test "renders an anchor if href set" do
+    render_component(text: "Start now", href: "#")
+    assert_select "a.pub-c-button"
+    assert_select "button.pub-c-button", false
+  end
+
+  test "renders a button if href not set" do
+    render_component(text: "Start now")
+    assert_select "button.pub-c-button"
+    assert_select "a.pub-c-button", false
+  end
+
+  test "renders info text" do
+    render_component(text: "Start now", info_text: "Information text")
+    assert_select ".pub-c-button", text: "Start now"
+    assert_select ".pub-c-button__info-text", text: "Information text"
+  end
+
+  test "renders rel attribute correctly" do
+    render_component(text: "Start now", rel: "nofollow")
+    assert_select ".pub-c-button[rel='nofollow']", text: "Start now"
+
+    render_component(text: "Start now", rel: "nofollow preload")
+    assert_select ".pub-c-button[rel='nofollow preload']", text: "Start now"
+  end
+
+  test "renders margin bottom class correctly" do
+    render_component(text: "Submit")
+    assert_select ".pub-c-button", text: "Submit"
+    assert_select ".pub-c-button--bottom-margin", count: 0
+
+    render_component(text: "Submit", margin_bottom: true)
+    assert_select ".pub-c-button.pub-c-button--bottom-margin", text: "Submit"
+  end
+
+  test "renders data attributes correctly for buttons" do
+    render_component(
+      text: "Submit",
+      data_attributes: {
+        "module": "cross-domain-tracking",
+        "tracking-code": "GA-123ABC",
+        "tracking-name": "transactionTracker"
+      }
+    )
+
+    assert_select "button.pub-c-button[data-module='cross-domain-tracking']"
+    assert_select "button.pub-c-button[data-tracking-code='GA-123ABC']"
+    assert_select "button.pub-c-button[data-tracking-name='transactionTracker']"
+  end
+
+  test "renders data attributes correctly for links" do
+    render_component(
+      text: "Submit",
+      href: "/foo",
+      data_attributes: {
+        "module": "cross-domain-tracking",
+        "tracking-code": "GA-123ABC",
+        "tracking-name": "transactionTracker"
+      }
+    )
+
+    assert_select "a.pub-c-button[data-module='cross-domain-tracking']"
+    assert_select "a.pub-c-button[data-tracking-code='GA-123ABC']"
+    assert_select "a.pub-c-button[data-tracking-name='transactionTracker']"
+  end
+
+  test "renders a title attribute" do
+    render_component(text: "Submit", title: "Do it!")
+
+    assert_select ".pub-c-button[title='Do it!']"
+  end
+end