diff --git a/app/assets/stylesheets/govuk-component/_button.scss b/app/assets/stylesheets/govuk-component/_button.scss
new file mode 100644
index 000000000..cad7ab176
--- /dev/null
+++ b/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
diff --git a/app/assets/stylesheets/govuk-component/_component.scss b/app/assets/stylesheets/govuk-component/_component.scss
index ee92093a4..4a3abc38f 100644
--- a/app/assets/stylesheets/govuk-component/_component.scss
+++ b/app/assets/stylesheets/govuk-component/_component.scss
@@ -23,3 +23,4 @@
@import "organisation-logo";
@import "taxonomy-sidebar";
@import "search";
+@import "button";
diff --git a/app/assets/stylesheets/govuk-component/_govspeak.scss b/app/assets/stylesheets/govuk-component/_govspeak.scss
index 653f0ccfd..aa19d920e 100644
--- a/app/assets/stylesheets/govuk-component/_govspeak.scss
+++ b/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";
diff --git a/app/assets/stylesheets/govuk-component/govspeak/_button.scss b/app/assets/stylesheets/govuk-component/govspeak/_button.scss
new file mode 100644
index 000000000..20eac8a29
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/app/assets/stylesheets/govuk-component/govspeak/_typography.scss b/app/assets/stylesheets/govuk-component/govspeak/_typography.scss
index 905b6f6c2..ba2c0cc69 100644
--- a/app/assets/stylesheets/govuk-component/govspeak/_typography.scss
+++ b/app/assets/stylesheets/govuk-component/govspeak/_typography.scss
@@ -66,12 +66,6 @@
text-decoration: underline;
}
- // Buttons
-
- .button {
- text-decoration: none;
- }
-
// Lists
ol,
diff --git a/app/views/govuk_component/button.raw.html.erb b/app/views/govuk_component/button.raw.html.erb
new file mode 100644
index 000000000..401d6042d
--- /dev/null
+++ b/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 %>
+>
+<% if info_text %>
+
+ <%= info_text.try(:html_safe) %>
+
+<% end %>
diff --git a/app/views/govuk_component/docs/button.yml b/app/views/govuk_component/docs/button.yml
new file mode 100644
index 000000000..b8d95a24d
--- /dev/null
+++ b/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: "#"
diff --git a/app/views/govuk_component/docs/govspeak.yml b/app/views/govuk_component/docs/govspeak.yml
index db7fb70ba..d6b000e42 100644
--- a/app/views/govuk_component/docs/govspeak.yml
+++ b/app/views/govuk_component/docs/govspeak.yml
@@ -591,3 +591,8 @@ fixtures:
+ button:
+ content: |
+
+ Start now
+
diff --git a/test/govuk_component/button_test.rb b/test/govuk_component/button_test.rb
new file mode 100644
index 000000000..878bdf668
--- /dev/null
+++ b/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