Merge pull request #420 from alphagov/contents-list-components

Create contents list component

Gemfile

@@ -10,7 +10,7 @@ gem 'dalli'
 gem 'gds-api-adapters', '~> 43.0'
 gem 'govuk_ab_testing', '~> 2.0'
 gem 'govuk_frontend_toolkit', '5.1.0'
-gem 'govuk_publishing_components', '~> 0.4.2', require: ENV['RAILS_ENV'] != "production" || ENV['HEROKU_APP_NAME'].to_s.length.positive?
+gem 'govuk_publishing_components', '~> 0.5.0', require: ENV['RAILS_ENV'] != "production" || ENV['HEROKU_APP_NAME'].to_s.length.positive?
 gem 'htmlentities', '4.3.4'
 gem 'logstasher', '0.6.1'
 gem 'plek', '1.11'

Gemfile.lock

@@ -107,7 +107,7 @@ GEM
       sass (>= 3.2.0)
     govuk_navigation_helpers (6.3.0)
       gds-api-adapters (>= 43.0)
-    govuk_publishing_components (0.4.2)
+    govuk_publishing_components (0.5.0)
       govspeak (~> 5.0.3)
       govuk_frontend_toolkit
       rails (~> 5.0.0, >= 5.0.0.1)
@@ -315,7 +315,7 @@ DEPENDENCIES
   govuk_ab_testing (~> 2.0)
   govuk_frontend_toolkit (= 5.1.0)
   govuk_navigation_helpers (~> 6.3)
-  govuk_publishing_components (~> 0.4.2)
+  govuk_publishing_components (~> 0.5.0)
   govuk_schemas
   htmlentities (= 4.3.4)
   jasmine-rails (~> 0.14.0)

app/assets/stylesheets/application.scss

@@ -12,14 +12,16 @@
 
 // helpers for common page elements
 @import 'helpers/back-to-content';
-@import 'helpers/contents-list';
 @import 'helpers/sidebar-with-body';
 @import 'helpers/share-buttons';
 @import 'helpers/national_statistics_logo';
 @import 'helpers/organisation-links';
 @import 'helpers/taxonomy-sidebar';
 @import 'helpers/parts';
 
+// components
+@import 'components/*';
+
 // pages specific view imports
 @import 'views/case-studies';
 @import 'views/coming-soon';
@@ -45,13 +47,3 @@
 @import 'views/answer';
 @import 'views/help-page';
 @import "views/guide";
-
-// components
-@import 'components/print-link';
-@import 'components/download-link';
-@import 'components/lead-paragraph';
-@import 'components/subscription-links';
-@import 'components/heading';
-@import 'components/translation-nav';
-@import 'components/banner';
-@import 'components/notice';

app/assets/stylesheets/components/_contents-list.scss

@@ -0,0 +1,56 @@
+@import "helpers/contents-list-helper";
+
+.app-c-contents-list {
+  // Always render the contents list above a
+  // back to contents link
+  position: relative;
+  margin-bottom: $gutter-two-thirds;
+  z-index: 1;
+  background: $white;
+  box-shadow: 0 20px 15px -10px $white;
+}
+
+// Remove underlines from lists of links
+// to improve legibility
+.app-c-contents-list__link {
+  text-decoration: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline;
+  }
+
+  .app-c-contents-list__list-item--parent > & {
+    font-weight: bold;
+  }
+}
+
+.app-c-contents-list__list-item {
+  padding-top: $gutter / 4;
+  line-height: 1.3;
+  list-style-type: none;
+}
+
+.app-c-contents-list__list-item--dashed {
+  $contents-spacing: $gutter-half + 5;
+  margin-left: $contents-spacing;
+  padding-right: $contents-spacing;
+
+  &:before {
+    content: "— ";
+    margin-left: -$contents-spacing;
+  }
+
+  // Focus styles on IE8 and older include the
+  // left margin, creating an odd white box with
+  // orange border around the em dash.
+  // Use inline-block and vertical alignment to
+  // fix focus styles
+  //
+  // https://github.com/alphagov/government-frontend/pull/420#issuecomment-320632386
+  .lte-ie8 & .app-c-contents-list__link {
+    display: inline-block;
+    vertical-align: top;
+  }
+}

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;
+  }
+}

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;
+}

app/assets/stylesheets/print.scss

@@ -1,3 +1,5 @@
-// PRINT STYLESHEET COMPILER
+// govuk_frontend_toolkit imports
+@import 'measurements';
 
-@import "print/html-publication";
+@import 'components/print/*';
+@import 'print/html-publication';

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;
-    }
-  }
-}

app/helpers/contents_list_helper.rb

@@ -11,7 +11,7 @@ def wrap_numbers_with_spans(content_item_link)
 
     if number
       words = content_item_text.sub(number.to_s, '').strip #remove the number from the text
-      content_item_link.sub(content_item_text, "<span class=\"contents-number\">#{number}</span><span class=\"contents-text\">#{words}</span>").squish.html_safe
+      content_item_link.sub(content_item_text, "<span class=\"app-c-contents-list__number\">#{number}</span><span class=\"app-c-contents-list__numbered-text\">#{words}</span>").squish.html_safe
     else
       content_item_link
     end

app/presenters/contents_list.rb

@@ -3,27 +3,15 @@ module ContentsList
   include TypographyHelper
 
   def contents
-    @contents ||= contents_items.map do |item|
-      contents_link(item[:text], item[:id])
+    @contents ||= contents_items.each do |item|
+      item[:href] = "##{item[:id]}"
     end
   end
 
   def contents_items
     extract_headings_with_ids(body)
   end
 
-  def contents_link(text, id)
-    link_to(
-      text,
-      "##{id}",
-      data: {
-        track_category: 'contentsClicked',
-        track_action: 'leftColumnH2',
-        track_label: id
-      }
-    )
-  end
-
 private
 
   def extract_headings_with_ids(html)

app/presenters/specialist_document_presenter.rb

@@ -4,17 +4,18 @@ class SpecialistDocumentPresenter < ContentItemPresenter
   include Linkable
   include TitleAndContext
   include Metadata
-
-  def nested_contents
-    content_item["details"]["headers"] || []
-  end
+  include TypographyHelper
 
   def title_and_context
     super.tap do |t|
       t.delete(:context)
     end
   end
 
+  def contents
+    @contents ||= headers_to_contents(nested_headers.clone)
+  end
+
   def metadata
     super.tap do |m|
       facets_with_friendly_values.each do |facet|
@@ -64,6 +65,26 @@ def will_continue_on
 
 private
 
+  def nested_headers
+    content_item["details"]["headers"] || []
+  end
+
+  def headers_to_contents(headers)
+    headers.map do |header|
+      header.deep_symbolize_keys!
+      header[:href] = "##{header[:id]}"
+      header.delete(:level)
+      header[:text] = strip_trailing_colons(header[:text])
+
+      if header[:headers]
+        header[:items] = headers_to_contents(header[:headers])
+        header.delete(:headers)
+      end
+
+      header
+    end
+  end
+
   def value_or_array_of_values(values)
     values.length == 1 ? values.first : values
   end