Add print styles for contents list component

* Create contents list helper for styles shared between print and screen (just the table layout styles for lists with formatted numbers) * Disable default print styles * Use our own indent to nest dashed items when printing * Hide the default list item marker when printing for numbered and nested lists * Put print styles on all pages Component guide requires fix before print styles are visible: alphagov/govuk_publishing_components#19
alphagov · Aug 8, 2017 · eeb461f · eeb461f
1 parent fbac1f3
commit eeb461f
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 42 deletions.
diff --git a/app/assets/stylesheets/components/_contents-list.scss b/app/assets/stylesheets/components/_contents-list.scss
@@ -1,3 +1,5 @@
+@import "helpers/contents-list-helper";
+
 .app-c-contents-list {
   // Always render the contents list above a
   // back to contents link
@@ -52,28 +54,3 @@
     vertical-align: top;
   }
 }
-
-.app-c-contents-list__list-item--numbered {
-  .app-c-contents-list__link {
-    display: table;
-  }
-}
-
-.app-c-contents-list__number,
-.app-c-contents-list__numbered-text {
-  display: table-cell;
-}
-
-.app-c-contents-list__number {
-  min-width: 1.5em;
-}
-
-.app-c-contents-list__numbered-text {
-  $contents-text-padding: 0.3em;
-  padding-left: $contents-text-padding;
-
-  .direction-rtl & {
-    padding-left: 0;
-    padding-right: $contents-text-padding;
-  }
-}
diff --git a/app/assets/stylesheets/components/helpers/_contents-list-helper.scss b/app/assets/stylesheets/components/helpers/_contents-list-helper.scss
@@ -0,0 +1,25 @@
+// Contents list helper is used in both print and screen stylesheets
+.app-c-contents-list__list-item--numbered {
+  .app-c-contents-list__link {
+    display: table;
+  }
+}
+
+.app-c-contents-list__number,
+.app-c-contents-list__numbered-text {
+  display: table-cell;
+}
+
+.app-c-contents-list__number {
+  min-width: 1.5em;
+}
+
+.app-c-contents-list__numbered-text {
+  $contents-text-padding: 0.3em;
+  padding-left: $contents-text-padding;
+
+  .direction-rtl & {
+    padding-left: 0;
+    padding-right: $contents-text-padding;
+  }
+}
diff --git a/app/assets/stylesheets/components/print/_contents-list.scss b/app/assets/stylesheets/components/print/_contents-list.scss
@@ -0,0 +1,19 @@
+@import "../helpers/contents-list-helper";
+
+// Override default browser indentation
+.app-c-contents-list__list,
+.app-c-contents-list__nested-list {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+// Put indentation back where we use list style types
+.app-c-contents-list__list-item--dashed {
+  margin-left: $gutter / 2;
+  list-style-type: disc;
+}
+
+.app-c-contents-list__list-item--numbered,
+.app-c-contents-list__list-item--parent {
+  list-style-type: none;
+}
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
@@ -1,2 +1,5 @@
+// govuk_frontend_toolkit imports
+@import 'measurements';
+
 @import 'components/print/*';
 @import 'print/html-publication';
diff --git a/app/assets/stylesheets/print/_html-publication.scss b/app/assets/stylesheets/print/_html-publication.scss
@@ -1,4 +1,4 @@
-.print-wrapper {
+.html-publication .print-wrapper {
   .print-meta-data {
     page-break-before: always;
     page-break-after: always;
@@ -12,11 +12,3 @@
     }
   }
 }
-
-.html-publication {
-  .contents-list {
-    li {
-      list-style: none;
-    }
-  }
-}
diff --git a/app/views/components/_contents-list.html.erb b/app/views/components/_contents-list.html.erb
@@ -15,7 +15,7 @@
     <h2>
       <%= t("content_item.contents") %>
     </h2>
-    <ol>
+    <ol class="app-c-contents-list__list">
       <% contents.each do |contents_item| %>
         <li
           class="app-c-contents-list__list-item app-c-contents-list__list-item--<%= parent_list_item_modifier %>"
@@ -24,7 +24,7 @@
             <%= format_numbers ? wrap_numbers_with_spans(contents_item[:text]) : contents_item[:text] %>
           <% end %>
           <% if contents_item[:items] && contents_item[:items].any? %>
-            <ol>
+            <ol class="app-c-contents-list__nested-list">
               <% contents_item[:items].each do |nested_contents_item| %>
                 <li class="app-c-contents-list__list-item app-c-contents-list__list-item--dashed">
                   <%= link_to nested_contents_item[:href], class: 'app-c-contents-list__link' do %>

diff --git a/app/views/content_items/html_publication.html.erb b/app/views/content_items/html_publication.html.erb
@@ -1,9 +1,3 @@
-<%- if params[:medium] == 'print' %>
-  <%= stylesheet_link_tag "print.css", :media => "screen", integrity: true, crossorigin: 'anonymous' %>
-<%- else %>
-  <%= stylesheet_link_tag "print.css", :media => "print", integrity: true, crossorigin: 'anonymous' %>
-<%- end %>
-
 <%
   content_for :title, @content_item.title
   content_for :simple_header, true

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -6,6 +6,11 @@
   <!--[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]-->
+  <% if Rails.env.test? && params[:medium] == 'print' %>
+    <%= stylesheet_link_tag "print.css", :media => "screen", integrity: true, crossorigin: 'anonymous' %>
+  <% else %>
+    <%= stylesheet_link_tag "print.css", :media => "print", integrity: true, crossorigin: 'anonymous' %>
+  <% end %>
   <%= javascript_include_tag "application", integrity: true, crossorigin: 'anonymous' %>
   <%= csrf_meta_tags %>
   <%= render partial: 'govuk_component/analytics_meta_tags', locals: { content_item: @content_item.content_item } %>