Merge pull request #1142 from alphagov/title-component-margin

Implement customisable spacing for title component
alphagov · Sep 14, 2017 · 29aa8b7 · 29aa8b7
2 parents 04f6f7f + b1a903d
commit 29aa8b7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/app/assets/stylesheets/govuk-component/_title.scss b/app/assets/stylesheets/govuk-component/_title.scss
@@ -1,6 +1,13 @@
 // scss-lint:disable SelectorFormat
 .pub-c-title {
-  @include responsive-vertical-margins;
+  @include responsive-top-margin;
+}
+
+// this will be moved and extended into a model for general component spacing
+// once this has been decided upon and other work completed, see:
+// https://trello.com/c/KEkNsxG3/142-3-implement-customisable-spacing-for-components
+.pub-c-title--bottom-margin {
+  @include responsive-bottom-margin;
 }
 
 .pub-c-title--inverse {

diff --git a/app/views/govuk_component/docs/title.yml b/app/views/govuk_component/docs/title.yml
@@ -27,11 +27,12 @@ examples:
       context: Publication
       title: My page title which is often really long and verbose and has lots of extra words it doesn't need
       average_title_length: long
-  title_on_dark_background:
-    description: Page titles with dark backgrounds are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
+  in_html_publication:
+    description: Page titles are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
     data:
       context: Publication
-      title: My inverse page title
+      title: HTML publication page title
       inverse: true
+      margin_bottom: 0
     context:
       dark_background: true
diff --git a/app/views/govuk_component/title.raw.html.erb b/app/views/govuk_component/title.raw.html.erb
@@ -2,8 +2,12 @@
   average_title_length ||= false
   context ||= false
   inverse ||= false
+  margin_bottom ||= 1
+  margin_bottom_class = "pub-c-title--bottom-margin" if margin_bottom == 1
 %>
-<div class="pub-c-title <% if inverse %>pub-c-title--inverse<% end %>">
+<div class="pub-c-title
+  <% if inverse %>pub-c-title--inverse<% end %>
+  <%= margin_bottom_class %>">
   <% if context %>
     <p class="pub-c-title__context"><%= context %></p>
   <% end %>