Render the inverse button on a blue background

x-govuk · May 23, 2023 · a66ce10 · a66ce10
1 parent 73328a4
commit a66ce10
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/guide/content/form-elements/submit.slim b/guide/content/form-elements/submit.slim
@@ -25,7 +25,8 @@ p.govuk-body
 
 == render('/partials/example.*',
   caption: 'Generating submit button with inverted colours',
-  code: inverse_button)
+  code: inverse_button,
+  render_on_brand_background: true)
 
 == render('/partials/example.*',
   caption: 'Generating a submit button with a custom class',

diff --git a/guide/content/stylesheets/application.scss b/guide/content/stylesheets/application.scss
@@ -55,6 +55,10 @@ $x-govuk-brand-colour: #28a;
   }
 }
 
+.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");

diff --git 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)})