diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim index a1d0651d..faedfc81 100644 --- a/guide/content/form-elements/submit.slim +++ b/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) diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss index 8167835a..03cb06a0 100644 --- a/guide/content/stylesheets/application.scss +++ b/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; + } + } +} diff --git a/guide/layouts/partials/example.slim b/guide/layouts/partials/example.slim index 8e912320..ec5df8ca 100644 --- a/guide/layouts/partials/example.slim +++ b/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)}) diff --git a/guide/lib/examples/submit.rb b/guide/lib/examples/submit.rb index 5d23dc30..7c9bcbc0 100644 --- a/guide/lib/examples/submit.rb +++ b/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 diff --git a/lib/govuk_design_system_formbuilder/builder.rb b/lib/govuk_design_system_formbuilder/builder.rb index 588cf8aa..460b9555 100644 --- a/lib/govuk_design_system_formbuilder/builder.rb +++ b/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 diff --git a/lib/govuk_design_system_formbuilder/elements/submit.rb b/lib/govuk_design_system_formbuilder/elements/submit.rb index 7d1e1727..02208924 100644 --- a/lib/govuk_design_system_formbuilder/elements/submit.rb +++ b/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