Merge pull request #429 from DFE-Digital/inverse-buttons

Add support for inverse buttons

guide/content/form-elements/submit.slim

@@ -23,6 +23,11 @@ p.govuk-body
   caption: 'Generating a warning submit button',
   code: warning_button)
 
+== render('/partials/example.*',
+  caption: 'Generating submit button with inverted colours',
+  code: inverse_button,
+  render_on_brand_background: true)
+
 == render('/partials/example.*',
   caption: 'Generating a submit button with a custom class',
   code: custom_classes_button)

guide/content/stylesheets/application.scss

@@ -54,3 +54,41 @@ $x-govuk-brand-colour: #28a;
     background: govuk-tint(govuk-colour("purple"), 10%);
   }
 }
+
+.branded-background {
+  background: govuk-colour(blue);
+}
+
+// inverse buttons, this can be removed once the functionality is supported by
+// the design system. https://github.com/alphagov/govuk-frontend/pull/3556
+$govuk-inverse-button-colour: govuk-colour("white");
+$govuk-inverse-button-text-colour: govuk-colour("blue");
+$govuk-inverse-button-hover-colour: govuk-tint($govuk-inverse-button-text-colour, 90%);
+$govuk-inverse-button-shadow-colour: govuk-shade($govuk-inverse-button-text-colour, 30%);
+
+.govuk-button--inverse {
+  background-color: $govuk-inverse-button-colour;
+  box-shadow: 0 2px 0 $govuk-inverse-button-shadow-colour;
+
+  &,
+  &:link,
+  &:visited,
+  &:active,
+  &:hover {
+    color: $govuk-inverse-button-text-colour;
+  }
+
+  @include _govuk-compatibility(govuk_template) {
+    &:link:focus {
+      color: $govuk-inverse-button-text-colour;
+    }
+  }
+
+  &:hover {
+    background-color: $govuk-inverse-button-hover-colour;
+
+    &[disabled] {
+      background-color: $govuk-inverse-button-colour;
+    }
+  }
+}

guide/layouts/partials/example.slim

@@ -89,7 +89,7 @@ figure.app-example
         a.govuk-tabs__tab href=%(#output-html-#{anchor_id(caption)})
           | HTML
 
-    .govuk-tabs__panel id=%(output-rendered-#{anchor_id(caption)})
+    .govuk-tabs__panel id=%(output-rendered-#{anchor_id(caption)}) class=("branded-background" if defined?(render_on_brand_background) && render_on_brand_background)
       == format_slim(code, f: builder(display_errors), **form_data)
 
     .govuk-tabs__panel id=%(output-html-#{anchor_id(caption)})

guide/lib/examples/submit.rb

@@ -12,6 +12,10 @@ def warning_button
       "= f.govuk_submit 'Delete all records', warning: true"
     end
 
+    def inverse_button
+      "= f.govuk_submit 'Find out more', inverse: true"
+    end
+
     def custom_classes_button
       "= f.govuk_submit 'Big purple button', class: 'big-purple-button'"
     end

lib/govuk_design_system_formbuilder/builder.rb

@@ -857,6 +857,7 @@ def govuk_check_box_divider(text = config.default_check_box_divider_text)
     # @param text [String,Proc] the button text. When a +Proc+ is provided its contents will be rendered within the button element
     # @param warning [Boolean] makes the button red ({https://design-system.service.gov.uk/components/button/#warning-buttons warning}) when true
     # @param secondary [Boolean] makes the button grey ({https://design-system.service.gov.uk/components/button/#secondary-buttons secondary}) when true
+    # @param inverse [Boolean] inverts the colours of the button. Note this isn't yet part of the design system.
     # @param prevent_double_click [Boolean] adds JavaScript to safeguard the
     #   form from being submitted more than once
     # @param validate [Boolean] adds the formnovalidate to the submit button when true, this disables all
@@ -881,8 +882,8 @@ def govuk_check_box_divider(text = config.default_check_box_divider_text)
     #   = f.govuk_submit "Proceed", prevent_double_click: true do
     #     = link_to 'Cancel', some_other_path, class: 'govuk-button__secondary'
     #
-    def govuk_submit(text = config.default_submit_button_text, warning: false, secondary: false, prevent_double_click: true, validate: config.default_submit_validate, disabled: false, **kwargs, &block)
-      Elements::Submit.new(self, text, warning: warning, secondary: secondary, prevent_double_click: prevent_double_click, validate: validate, disabled: disabled, **kwargs, &block).html
+    def govuk_submit(text = config.default_submit_button_text, warning: false, secondary: false, inverse: false, prevent_double_click: true, validate: config.default_submit_validate, disabled: false, **kwargs, &block)
+      Elements::Submit.new(self, text, warning: warning, secondary: secondary, inverse: inverse, prevent_double_click: prevent_double_click, validate: validate, disabled: disabled, **kwargs, &block).html
     end
 
     # Generates three inputs for the +day+, +month+ and +year+ components of a date

lib/govuk_design_system_formbuilder/elements/submit.rb

@@ -5,7 +5,7 @@ class Submit < Base
       include Traits::HTMLClasses
       include Traits::HTMLAttributes
 
-      def initialize(builder, text, warning:, secondary:, prevent_double_click:, validate:, disabled:, **kwargs, &block)
+      def initialize(builder, text, warning:, secondary:, inverse:, prevent_double_click:, validate:, disabled:, **kwargs, &block)
         super(builder, nil, nil)
 
         fail ArgumentError, 'buttons can be warning or secondary' if warning && secondary
@@ -14,6 +14,7 @@ def initialize(builder, text, warning:, secondary:, prevent_double_click:, valid
         @prevent_double_click = prevent_double_click
         @warning              = warning
         @secondary            = secondary
+        @inverse              = inverse
         @validate             = validate
         @disabled             = disabled
         @html_attributes      = kwargs
@@ -68,6 +69,7 @@ def classes
           "button--warning" => @warning,
           "button--secondary" => @secondary,
           "button--disabled" => @disabled,
+          "button--inverse" => @inverse,
         ).prefix(brand)
       end
     end