Remove Frontend Toolkit colour and spacing variables

- Some spacing and layout tweaks to ensure that these changes are visually consistent with previous version
alphagov · Sep 16, 2019 · 45ef40e · 45ef40e
1 parent 83431b9
commit 45ef40e
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 54 deletions.
diff --git a/app/assets/stylesheets/hacks/_header-tweaks.scss b/app/assets/stylesheets/hacks/_header-tweaks.scss
@@ -2,7 +2,7 @@
 // this work, we need to slightly tweak the header's CSS from our app.
 .header-title {
   float: left;
-  color: $white;
+  color: govuk-colour("white");
   @include bold-24;
 
   // When the title appears on its own line (the search box is hidden and only a

diff --git a/app/assets/stylesheets/mixins/_margins.scss b/app/assets/stylesheets/mixins/_margins.scss
@@ -1,16 +1,16 @@
 @mixin responsive-bottom-margin {
-  margin-bottom: $gutter-half;
+  margin-bottom: govuk-spacing(3);
 
   @include media(tablet) {
-    margin-bottom: $gutter * 1.5;
+    margin-bottom: govuk-spacing(7);
   }
 }
 
 @mixin responsive-top-margin {
-  margin-top: $gutter-half;
+  margin-top: govuk-spacing(3);
 
   @include media(tablet) {
-    margin-top: $gutter * 1.5;
+    margin-top: govuk-spacing(7);
   }
 }
 
@@ -21,11 +21,11 @@
 
 
 @mixin gutter-bottom-margin {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(6);
 }
 
 @mixin gutter-top-margin {
-  margin-top: $gutter;
+  margin-top: govuk-spacing(6);
 }
 
 @mixin gutter-vertical-margins {
@@ -34,9 +34,9 @@
 }
 
 @mixin gutter-bottom-margin-to-double {
-  margin-bottom: $gutter;
+  margin-bottom: govuk-spacing(3);
 
   @include media(tablet) {
-    margin-bottom: $gutter * 2;
+    margin-bottom: govuk-spacing(9);
   }
 }
diff --git a/app/assets/stylesheets/modules/_collection.scss b/app/assets/stylesheets/modules/_collection.scss
@@ -1,12 +1,12 @@
 .collection {
-  border-bottom: 1px solid $border-colour;
+  border-bottom: 1px solid $govuk-border-colour;
 
-  padding-bottom: $gutter-half;
-  margin-bottom: $gutter-half;
+  padding-bottom: govuk-spacing(3);
+  margin-bottom: govuk-spacing(3);
 
   @include media(tablet) {
-    padding-bottom: $gutter;
-    margin-bottom: $gutter;
+    padding-bottom: govuk-spacing(6);
+    margin-bottom: govuk-spacing(6);
   }
 
   &:last-child {
@@ -22,7 +22,7 @@
 
   &__description {
     @include core-24;
-    color: $secondary-text-colour;
+    color: $govuk-secondary-text-colour;
     margin-top: 0;
   }
 

diff --git a/app/assets/stylesheets/modules/_govspeak-wrapper.scss b/app/assets/stylesheets/modules/_govspeak-wrapper.scss
@@ -10,7 +10,7 @@
   .govuk-govspeak ul {
     line-height: 1.45;
     // govspeak margin bottom is 20px
-    margin-bottom: $gutter-half;
+    margin-bottom: govuk-spacing(3);
   }
 
   .govuk-govspeak h2 {

diff --git a/app/assets/stylesheets/modules/_notice.scss b/app/assets/stylesheets/modules/_notice.scss
@@ -1,17 +1,17 @@
 .notice {
   clear: both;
   @include responsive-bottom-margin;
-  padding: $gutter-half;
+  padding: govuk-spacing(3);
 
-  border: 5px solid $govuk-blue;
+  border: 5px solid $govuk-brand-colour;
 
   @include media(tablet) {
-    padding: $gutter-two-thirds;
+    padding: govuk-spacing(4);
   }
 
   &__title {
     @include bold-36;
-    margin-bottom: $gutter-one-third;
+    margin-bottom: govuk-spacing(2);
   }
 
   &__description {

diff --git a/app/assets/stylesheets/modules/_related-content.scss b/app/assets/stylesheets/modules/_related-content.scss
@@ -1,6 +1,6 @@
 .related {
   @include media(tablet) {
-    border-top: 1px solid $border-colour;
+    border-top: 1px solid $govuk-border-colour;
   }
 }
 

diff --git a/app/presenters/topic_presenter.rb b/app/presenters/topic_presenter.rb
@@ -37,12 +37,12 @@ def visually_collapsed?
     @visually_collapsed
   end
 
-  def expanded?
+  def visually_expanded?
     !visually_collapsed?
   end
 
   def display_as_accordion?
-    groups.count > 1 && visually_collapsed?
+    groups.count > 2 && visually_collapsed?
   end
 
   def accordion_content
@@ -51,20 +51,6 @@ def accordion_content
     #
     # This method returns the content in the required shape from the hash
     # supplied by the `groups` method.
-    #
-    # The hash for each accordion section is required to have `name`,
-    # `description`, and `linked_items`. Minimal example:
-    # {
-    #   name: 'Accordion section heading',
-    #   description: 'Accordion section summary',
-    #   linked_items: [
-    #     {
-    #       label: 'Link to example',
-    #       href: 'http://example.com',
-    #     }
-    #   ],
-    # }
-
 
     groups.map { |section|
       {
@@ -77,7 +63,7 @@ def accordion_content
         content: {
           html: accordion_section_links(section.linked_items),
         },
-        expanded: expanded?,
+        expanded: visually_expanded?,
       }
     }
   end

diff --git a/app/views/content_items/topic.html.erb b/app/views/content_items/topic.html.erb
@@ -22,33 +22,33 @@
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <%= render "govuk_publishing_components/components/accordion", {
-        items: @content_item.accordion_content
-      } if @content_item.display_as_accordion? %>
-
-      <% unless @content_item.display_as_accordion? %>
-        <% @content_item.groups.each_with_index do |link_group, idx| %>
+      <% if @content_item.display_as_accordion? %>
+        <%= render "govuk_publishing_components/components/accordion", {
+          items: @content_item.accordion_content
+        } %>
+      <% else %>
+        <% @content_item.groups.each_with_index { |link_group| %>
           <% if link_group.name.present? %>
             <div class="subsection__header govuk-!-margin-bottom-3">
-              <h2 class="govuk-heading-m govuk-!-margin-bottom-1 subsection__title" id="<%= link_group.name.parameterize %>"><%= link_group.name %></h2>
+              <h2 class="govuk-heading-m govuk-!-margin-bottom-1 govuk-!-margin-top-3 subsection__title" id="<%= link_group.name.parameterize %>"><%= link_group.name %></h2>
             <% if link_group.description.present? %>
               <p class="govuk-body govuk-!-margin-bottom-1 subsection__description"><%= link_group.description %></p>
             <% end %>
             </div>
           <% end %>
           <ul class="govuk-list subsection__list govuk-!-margin-bottom-9">
-            <% link_group.linked_items.each do |linked_item| %>
+            <% link_group.linked_items.each { |linked_item| %>
               <li class="subsection__list-item">
                 <%= link_to linked_item.label, linked_item.href, class: 'govuk-link' %>
               </li>
-            <% end %>
+            <% } %>
           </ul>
-        <% end %>
+        <% } %>
       <% end %>
     </div>
 
     <div class="govuk-grid-column-one-third">
-      <aside class="related">
+      <aside class="related govuk-!-margin-top-3">
       <% if @content_item.content_owners.any? %>
         <div class="related-item govuk-!-padding-top-4 govuk-!-margin-bottom-5">
           <h2 class="related-item__title govuk-heading-s govuk-!-margin-bottom-2" id="related-communities">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,8 +2,11 @@
 <html>
 <head>
   <title><%= yield :title %> - GOV.UK</title>
-  <% # TODO: revert this to include IE specific and print specific stylesheets %>
-  <%= stylesheet_link_tag "application" %>
+  <!--[if gt IE 8]><!--><%= stylesheet_link_tag "application" %><!--<![endif]-->
+  <!--[if IE 6]><%= stylesheet_link_tag "application-ie6" %><script>var ieVersion = 6;</script><![endif]-->
+  <!--[if IE 7]><%= stylesheet_link_tag "application-ie7" %><script>var ieVersion = 7;</script><![endif]-->
+  <!--[if IE 8]><%= stylesheet_link_tag "application-ie8" %><script>var ieVersion = 8;</script><![endif]-->
+  <%= stylesheet_link_tag "print", media: "print" %>
 
   <%= javascript_include_tag "application" %>
   <%= javascript_include_tag "start-modules" if Rails.env.test? %>

diff --git a/app/views/shared/_change_history.html.erb b/app/views/shared/_change_history.html.erb
@@ -7,6 +7,6 @@
 <time datetime="<%= time.iso8601 %>" class="<%= time_class %>">
   <%= l time, format: :short_ordinal %>
 </time>
-<p class="govuk-body-s app-c-change-history__change-note">
+<p class="govuk-body-s app-c-change-history__change-note govuk-!-width-two-thirds">
   <%= change.note %>
 </p>
diff --git a/app/views/shared/_custom_phase_message.html.erb b/app/views/shared/_custom_phase_message.html.erb
@@ -1 +1 @@
-Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>.
+Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>.
diff --git a/app/views/shared/_custom_phase_message_homepage.html.erb b/app/views/shared/_custom_phase_message_homepage.html.erb
@@ -1 +1 @@
-Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>.
+Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>.
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer" %>.
		Complete our quick 5-question survey to <%= link_to "help us improve our content", survey_url, target: "_blank", rel: "noopener noreferrer", class: "govuk-link" %>.