Merge pull request #523 from alphagov/add-warning-button-style

Add destructive modifier to button component
alphagov · Sep 21, 2018 · 90f4af2 · 90f4af2
2 parents 7ea38e8 + fc755bd
commit 90f4af2
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Add table component (PR #531)
+* Add destructive modifier to button component (PR #523)
 
 ## 9.25.0
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_button.scss b/app/assets/stylesheets/govuk_publishing_components/components/_button.scss
@@ -8,9 +8,14 @@ $gem-secondary-button-colour: #00823b;
 $gem-secondary-button-hover-colour: darken($gem-secondary-button-colour, 5%);
 $gem-secondary-button-background-colour: govuk-colour("white");
 $gem-secondary-button-hover-background-colour: govuk-colour("grey-4");
+
 $gem-quiet-button-colour: govuk-colour("grey-1");
 $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
 
+$gem-destructive-button-background-colour: govuk-colour("red");
+$gem-destructive-button-hover-background-colour: darken($gem-destructive-button-background-colour, 5%);
+$gem-destructive-button-border-colour: govuk-colour("black");
+
 @import "../../../../node_modules/govuk-frontend/components/button/button";
 
 @import "mixins/margins";
@@ -97,6 +102,21 @@ $gem-quiet-button-hover-colour: darken($gem-quiet-button-colour, 5%);
   }
 }
 
+.gem-c-button--destructive {
+  background-color: $gem-destructive-button-background-colour;
+  box-shadow: 0 2px 0 $gem-destructive-button-border-colour;
+
+  &:link,
+  &:visited,
+  &:active {
+    background-color: $gem-destructive-button-background-colour;
+  }
+
+  &:hover {
+    background-color: $gem-destructive-button-hover-background-colour;
+  }
+}
+
 // Begin adjustments for font baseline offset
 // These should be removed when the font is updated with the correct baseline
 // For the 1px addition please see https://github.com/alphagov/govuk-frontend/pull/365#discussion_r154349428

diff --git a/app/views/govuk_publishing_components/components/docs/button.yml b/app/views/govuk_publishing_components/components/docs/button.yml
@@ -51,6 +51,12 @@ examples:
       href: "#"
       secondary_quiet: true
       rel: "external"
+  destructive_button:
+    data:
+      text: "Destructive button"
+      href: "#"
+      destructive: true
+      rel: "external"
   start_now_button_with_info_text:
     data:
       text: "Start now"

diff --git a/lib/govuk_publishing_components/presenters/button_helper.rb b/lib/govuk_publishing_components/presenters/button_helper.rb
@@ -4,7 +4,7 @@ module GovukPublishingComponents
   module Presenters
     class ButtonHelper
       attr_reader :href, :text, :title, :info_text, :rel, :data_attributes,
-        :start, :secondary, :secondary_quiet, :margin_bottom, :target
+        :margin_bottom, :target, :start, :secondary, :secondary_quiet, :destructive
 
       def initialize(local_assigns)
         @href = local_assigns[:href]
@@ -13,11 +13,12 @@ def initialize(local_assigns)
         @info_text = local_assigns[:info_text]
         @rel = local_assigns[:rel]
         @data_attributes = local_assigns[:data_attributes]
+        @margin_bottom = local_assigns[:margin_bottom]
+        @target = local_assigns[:target]
         @start = local_assigns[:start]
         @secondary = local_assigns[:secondary]
         @secondary_quiet = local_assigns[:secondary_quiet]
-        @margin_bottom = local_assigns[:margin_bottom]
-        @target = local_assigns[:target]
+        @destructive = local_assigns[:destructive]
       end
 
       def link?
@@ -42,6 +43,7 @@ def css_classes
         classes << "govuk-button--start" if start
         classes << "gem-c-button--secondary" if secondary
         classes << "gem-c-button--secondary-quiet" if secondary_quiet
+        classes << "gem-c-button--destructive" if destructive
         classes << "gem-c-button--bottom-margin" if margin_bottom
         classes.join(" ")
       end

diff --git a/spec/components/button_spec.rb b/spec/components/button_spec.rb
@@ -40,6 +40,12 @@ def component_name
     assert_select ".gem-c-button--secondary-quiet"
   end
 
+  it "renders destructive button" do
+    render_component(text: "Warning", href: "#", destructive: true)
+    assert_select ".gem-c-button--destructive[href='#']", text: "Warning"
+    assert_select ".gem-c-button--destructive"
+  end
+
   it "renders an anchor if href set" do
     render_component(text: "Start now", href: "#")
     assert_select "a.govuk-button"