Merge pull request #1104 from alphagov/add-button-component

Add button component

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

@@ -0,0 +1,43 @@
+%pub-c-button,
+.pub-c-button {
+  @include button;
+
+  @media(max-width: 425px) {
+    box-sizing: border-box;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+%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

@@ -23,3 +23,4 @@
 @import "organisation-logo";
 @import "taxonomy-sidebar";
 @import "search";
+@import "button";

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

@@ -1,5 +1,6 @@
 @import "govspeak/advisory";
 @import "govspeak/attachment";
+@import "govspeak/button";
 @import "govspeak/call-to-action";
 @import "govspeak/charts";
 @import "govspeak/contact";

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

@@ -0,0 +1,9 @@
+.govuk-govspeak {
+  .button {
+    @extend %pub-c-button;
+  }
+
+  .button-start {
+    @extend %pub-c-button--start;
+  }
+}

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

@@ -66,12 +66,6 @@
     text-decoration: underline;
   }
 
-  // Buttons
-
-  .button {
-    text-decoration: none;
-  }
-
   // Lists
 
   ol,

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

@@ -0,0 +1,26 @@
+<%
+  start ||= false
+  href ||= false
+  info_text ||= false
+  text ||= ""
+  tag_name = href ? "a" : "button"
+%>
+<<%= tag_name %>
+  class="
+    pub-c-button
+    <% if start == true %>
+      pub-c-button--start
+    <% end %>
+  "
+  <% if href %>
+    href="<%= href.try(:html_safe) %>"
+    role="button"
+  <% end %>
+>
+  <%= text %>
+</<%= tag_name %>>
+<% 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,52 @@
+name: "Button"
+description: "Use buttons to move though a transaction, aim to use only one button per page."
+body: |
+  Button text should be short and describe the action the button performs.
+
+  [GOV.UK Elements has more information](https://govuk-elements.herokuapp.com/buttons/) on how buttons should be used.
+
+  Note: We do not consume GOV.UK Elements directly due to the naming conventions being leaky,
+  in time this component will be a wrapper for the [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) project's button component.
+
+  Global button styles seen at `app/assets/stylesheets/helpers/_buttons.scss`
+  should be considered deprecated with this component replacing any instances.
+
+  govuk-* namespace replaced with pub-c-* otherwise we will conflict with [GOV.UK Frontend's namespace](https://github.com/alphagov/govuk-frontend/blob/master/docs/components.md)
+
+  This component is also [extended for use in govspeak](http://govuk-component-guide.herokuapp.com/components/govspeak/fixtures/button).
+
+  These instances of buttons are added by Content Designers, ideally this duplication would not exist but we currently don't have shared markup
+  via our components within the generated [govspeak](https://github.com/alphagov/govspeak).
+  (This is a challenge to the reader)
+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
+fixtures:
+  default:
+    text: "Submit"
+  link_button:
+    text: "I'm really a link sssh"
+    href: "#"
+  start_now_button:
+    text: "Start now"
+    href: "#"
+    start: true
+  start_now_button_with_info_text:
+    text: "Start now"
+    href: "#"
+    start: true
+    info_text: "Sometimes you want to explain where a user is going to."
+  extreme_text:
+    text: "I'm a button with lots of text to test how the component scales at extremes."
+    href: "#"
+  extreme_text_start_now_button:
+    text: "I'm a start now button with lots of text to test how the component scales at extremes."
+    start: true
+    href: "#"

app/views/govuk_component/docs/govspeak.yml

@@ -591,3 +591,8 @@ fixtures:
       <div class="summary">
         <p>This is a summary</p>
       </div>
+  button:
+    content: |
+      <a href="#" class="button button-start" role="button">
+        Start now
+      </a>

test/govuk_component/button_test.rb

@@ -0,0 +1,50 @@
+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
+end