govuk_publishing_components 5.6.0 → 5.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a741268b6b87bdca3271b0988eef9a43ec7e9b01ad03b59a0bdcdc1611c72278
-  data.tar.gz: e5bd85deb2d496c428100b9e3711a78982e42b39d7aff181b5802e6b1e2a4cf7
+  metadata.gz: ce80409c0f807cc7819ef704621d4ea7fba120eb3c236cfdb0f08416989273fb
+  data.tar.gz: 3f80608cb59362aac2d3be655530e0da2c985847f93c4a50ef5413d5d4b5c7af
 SHA512:
-  metadata.gz: 17e7019b89f86cec1c4e3a80f89495e34ba94ae01350308d23f4795138d673f69112edc8b65668b2337696dcdf62d4cdf2499d0a1b95bc5e315e32a3c0c76812
-  data.tar.gz: cc2f4a5a5124f7e8ba80db9b995f0c14c673b3fcdb5222c08565087ccfafc5a23ed2a15203b5abf5d3cab97e28cd449c799475a1cfb56d2310db545fe0ccb367
+  metadata.gz: 5e9a0fd1f8c25254e8d945c05cda605ebbdbad784916ca5544e9f77e9eb6c0f86f8e94f6f507dd366840d1935374c6cfbe6f8d92498eaa25dc4a43c2df6d53d1
+  data.tar.gz: 1f81579d4f44e2e62be07291827ca3ace6ab1ca1002a2f54467a961a3ecf1721a45fd27b7b54daeaf2da6fb42e1e588f14c3c551d692e14b450d0054b6e4da6c

data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js

@@ -27,7 +27,7 @@
     var rememberShownStep = false;
     var stepNavSize;
     var sessionStoreLink = 'govuk-step-nav-active-link';
-    var activeLinkClass = 'gem-c-step-nav__link--active';
+    var activeLinkClass = 'gem-c-step-nav__list-item--active';
     var activeLinkHref = '#content';
 
     this.start = function ($element) {
@@ -45,7 +45,7 @@
       var $steps = $element.find('.js-step');
       var $stepHeaders = $element.find('.js-toggle-panel');
       var totalSteps = $element.find('.js-panel').length;
-      var totalLinks = $element.find('.gem-c-step-nav__link-item').length;
+      var totalLinks = $element.find('.gem-c-step-nav__link').length;
 
       var $showOrHideAllButton;
 
@@ -170,7 +170,6 @@
 
       function bindToggleForSteps(stepNavTracker) {
         $element.find('.js-toggle-panel').click(function (event) {
-          preventLinkFollowingForCurrentTab(event);
           var $step = $(this).closest('.js-step');
 
           var stepView = new StepView($step);
@@ -250,16 +249,6 @@
         });
       }
 
-      function preventLinkFollowingForCurrentTab(event) {
-        // If the user is holding the ⌘ or Ctrl key, they're trying
-        // to open the link in a new window, so let the click happen
-        if (event.metaKey || event.ctrlKey) {
-          return;
-        }
-
-        event.preventDefault();
-      }
-
       function bindToggleShowHideAllButton(stepNavTracker) {
         $showOrHideAllButton = $element.find('.js-step-controls-button');
         $showOrHideAllButton.on('click', function () {
@@ -437,7 +426,7 @@
 
       function trackClick() {
         var tracking_options = {label: $(event.target).attr('href') + " : " + stepNavSize};
-        var dimension28 = $(event.target).closest('.gem-c-step-nav__links').attr('data-length');
+        var dimension28 = $(event.target).closest('.gem-c-step-nav__list').attr('data-length');
 
         if (dimension28) {
           tracking_options['dimension28'] = dimension28;

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -3,7 +3,8 @@
   background-color: $govuk-blue;
   color: $white;
   margin-bottom: $gutter;
-  padding: $gutter-half;
+  padding: $gutter-half $gutter $gutter;
+  box-sizing: border-box;
 }
 
 .gem-c-inverse-header a {
@@ -13,4 +14,5 @@
 .gem-c-inverse-header--full-width {
   padding-left: 0;
   padding-right: 0;
+  padding-bottom: $gutter-half;
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss

@@ -29,11 +29,3 @@
     margin-top: 5px;
   }
 }
-
-.gem-c-step-nav-related__link {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}

data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss

@@ -286,7 +286,7 @@ $top-border: solid 2px $grey-3;
   margin: 0;
   font-size: inherit;
 
-  + .gem-c-step-nav__links {
+  + .gem-c-step-nav__list {
     margin-top: -5px;
 
     .gem-c-step-nav--large & {
@@ -307,7 +307,7 @@ $top-border: solid 2px $grey-3;
   font-weight: bold;
 }
 
-.gem-c-step-nav__links {
+.gem-c-step-nav__list {
   padding: 0;
   padding-bottom: 10px;
 
@@ -318,30 +318,30 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-step-nav__links--choice {
+.gem-c-step-nav__list--choice {
   $links-margin: 20px;
 
   margin-left: $links-margin;
   list-style: disc;
 
-  .gem-c-step-nav__link--active:before {
+  .gem-c-step-nav__list-item--active:before {
     left: -($gutter + $gutter-half) - $links-margin;
   }
 
   .gem-c-step-nav--large & {
     @include media(tablet) {
-      .gem-c-step-nav__link--active:before {
+      .gem-c-step-nav__list-item--active:before {
         left: -($gutter * 2) - $links-margin;
       }
     }
   }
 }
 
-.gem-c-step-nav__link {
+.gem-c-step-nav__list-item {
   margin-bottom: 10px;
 }
 
-.gem-c-step-nav__link--active {
+.gem-c-step-nav__list-item--active {
   position: relative;
 
   &:before {
@@ -369,7 +369,7 @@ $top-border: solid 2px $grey-3;
     }
   }
 
-  .gem-c-step-nav__link-item {
+  .gem-c-step-nav__link {
     color: $black;
     text-decoration: none;
 

data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb

@@ -74,24 +74,12 @@
             %>
             <% step[:contents].each do |element| %>
               <%= step_nav_helper.render_step_nav_element(element, options) %>
+
               <%
                 if element[:type] == 'list'
                   options[:link_index] += element[:contents].length
                 end
               %>
-
-              <% if element[:type] == 'substep' %>
-                <% if in_substep %>
-                  </div>
-                  <% in_substep = false %>
-                <% end %>
-                <div class="gem-c-step-nav__substep <% if element[:optional] %>gem-c-step-nav__substep--optional<% end %>">
-                <% in_substep = true %>
-              <% end %>
-            <% end %>
-
-            <% if in_substep %>
-              </div>
             <% end %>
 
             <% if step_nav_url && step[:show_help_link] %>

data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb

@@ -1,7 +1,6 @@
 <%
   links ||= false
   pretitle ||= t("govuk_component.step_by_step_nav_related.part_of", default: "Part of")
-  tracking_id ||= false
 %>
 <% if links %>
   <div class="gem-c-step-nav-related" data-module="track-click">
@@ -15,7 +14,7 @@
             data-track-label="<%= links[0][:href] %>"
             data-track-dimension="<%= links[0][:text] %>"
             data-track-dimension-index="29"
-            data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
+            data-track-options='{"dimension96" : "<%= links[0][:tracking_id] %>" }'>
             <%= links[0][:text] %>
           </a>
         </h2>
@@ -31,7 +30,7 @@
                 data-track-label="<%= link[:href] %>"
                 data-track-dimension="<%= link[:text] %>"
                 data-track-dimension-index="29"
-                data-track-options='{"dimension96" : "<%= tracking_id %>" }'>
+                data-track-options='{"dimension96" : "<%= link[:tracking_id] %>" }'>
                 <%= link[:text] %>
               </a>
             </li>

data/app/views/govuk_publishing_components/components/docs/inverse_header.yml

@@ -28,6 +28,17 @@ examples:
             Education, Training and Skills
           </h1>
         </div>
+  html_publication_header:
+    description: "The inverse header component is used on HTMl publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
+    data:
+      block: |
+        <div class="pub-c-title pub-c-title--inverse pub-c-title--bottom-margin">
+          <p class="pub-c-title__context">Notice</p>
+          <h1 class="pub-c-title__text">
+            LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application
+          </h1>
+        </div>
+        <p class="publication-header__last-changed">Published 22 April 2016</p>
   with_breadcrumbs_and_paragraph:
     data:
       block: |

data/app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml

@@ -72,7 +72,7 @@ examples:
       ]
   with_unique_tracking:
     description: |
-      We need to uniquely identify each step by step navigation in Google Analytics. If this parameter is added to the component, its value is included in any tracking events, specifically in dimension96.
+      In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav page.
 
       This includes show/hide all, show/hide step and any link clicks.
     data:
@@ -295,26 +295,28 @@ examples:
             },
             {
               type: 'substep',
-              optional: true
-            },
-            {
-              type: 'heading',
-              text: 'Get help completing this step'
-            },
-            {
-              type: 'list',
+              optional: true,
               contents: [
                 {
-                  href: '#',
-                  text: 'Apply online'
-                },
-                {
-                  href: '#',
-                  text: 'Talk to one of our advisers'
+                  type: 'heading',
+                  text: 'Get help completing this step'
                 },
                 {
-                  href: '#',
-                  text: 'Search our website'
+                  type: 'list',
+                  contents: [
+                    {
+                      href: '#',
+                      text: 'Apply online'
+                    },
+                    {
+                      href: '#',
+                      text: 'Talk to one of our advisers'
+                    },
+                    {
+                      href: '#',
+                      text: 'Search our website'
+                    }
+                  ]
                 }
               ]
             }
@@ -523,18 +525,20 @@ examples:
             },
             {
               type: 'substep',
-              optional: true
-            },
-            {
-              type: 'paragraph',
-              text: 'This paragraph is inside the sub step.'
-            },
-            {
-              type: 'list',
+              optional: true,
               contents: [
                 {
-                  href: '/test6',
-                  text: 'This link is also inside the sub step'
+                  type: 'paragraph',
+                  text: 'This paragraph is inside the sub step.'
+                },
+                {
+                  type: 'list',
+                  contents: [
+                    {
+                      href: '/test6',
+                      text: 'This link is also inside the sub step'
+                    }
+                  ]
                 }
               ]
             }
@@ -550,38 +554,44 @@ examples:
             },
             {
               type: 'substep',
-              optional: false
-            },
-            {
-              type: 'paragraph',
-              text: 'This paragraph is inside a required sub step.'
+              optional: false,
+              contents: [
+                {
+                  type: 'paragraph',
+                  text: 'This paragraph is inside a required sub step.'
+                }
+              ]
             },
             {
               type: 'substep',
-              optional: true
-            },
-            {
-              type: 'paragraph',
-              text: 'This paragraph is inside an optional sub step.'
-            },
-            {
-              type: 'list',
+              optional: true,
               contents: [
                 {
-                  href: '/test7',
-                  text: 'This link is inside an optional sub step as well',
-                  active: true
-                }
+                  type: 'paragraph',
+                  text: 'This paragraph is inside an optional sub step.'
+                },
+                {
+                  type: 'list',
+                  contents: [
+                    {
+                      href: '/test7',
+                      text: 'This link is inside an optional sub step as well',
+                      active: true
+                    }
+                  ]
+                },
               ]
             },
             {
               type: 'substep',
-              optional: false
+              optional: false,
+              contents: [
+                {
+                  type: 'paragraph',
+                  text: 'This paragraph is inside a required sub step.'
+                }
+              ]
             },
-            {
-              type: 'paragraph',
-              text: 'This paragraph is inside a required sub step.'
-            }
           ]
         },
         {
@@ -730,28 +740,30 @@ examples:
             },
             {
               type: 'substep',
-              optional: true
-            },
-            {
-              type: 'heading',
-              text: 'Optional steps'
-            },
-            {
-              type: 'paragraph',
-              text: 'These steps are not required.'
-            },
-            {
-              type: 'list',
-              style: 'choice',
+              optional: true,
               contents: [
                 {
-                  href: 'https://www.google.co.uk/',
-                  text: "Get annoyed when it doesn't work"
+                  type: 'heading',
+                  text: 'Optional steps'
                 },
                 {
-                  href: 'http://www.google.com',
-                  text: 'Try to find someone else who knows how to do it',
-                  context: '1 to 10 minutes'
+                  type: 'paragraph',
+                  text: 'These steps are not required.'
+                },
+                {
+                  type: 'list',
+                  style: 'choice',
+                  contents: [
+                    {
+                      href: 'https://www.google.co.uk/',
+                      text: "Get annoyed when it doesn't work"
+                    },
+                    {
+                      href: 'http://www.google.com',
+                      text: 'Try to find someone else who knows how to do it',
+                      context: '1 to 10 minutes'
+                    }
+                  ]
                 }
               ]
             }
@@ -921,28 +933,30 @@ examples:
             },
             {
               type: 'substep',
-              optional: true
-            },
-            {
-              type: 'heading',
-              text: 'Optional steps'
-            },
-            {
-              type: 'paragraph',
-              text: 'These steps are not required.'
-            },
-            {
-              type: 'list',
-              style: 'choice',
+              optional: true,
               contents: [
                 {
-                  href: 'https://www.google.co.uk/',
-                  text: "Get annoyed when it doesn't work"
+                  type: 'heading',
+                  text: 'Optional steps'
                 },
                 {
-                  href: 'http://www.google.com',
-                  text: 'Try to find someone else who knows how to do it',
-                  context: '1 to 10 minutes'
+                  type: 'paragraph',
+                  text: 'These steps are not required.'
+                },
+                {
+                  type: 'list',
+                  style: 'choice',
+                  contents: [
+                    {
+                      href: 'https://www.google.co.uk/',
+                      text: "Get annoyed when it doesn't work"
+                    },
+                    {
+                      href: 'http://www.google.com',
+                      text: 'Try to find someone else who knows how to do it',
+                      context: '1 to 10 minutes'
+                    }
+                  ]
                 }
               ]
             }

data/app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml

@@ -17,7 +17,7 @@ examples:
       title: 'Having children: step by step'
       path: /childcare-parenting/pregnancy-and-birth
   with_unique_tracking:
-    description: We need to uniquely identify each step by step navigation in Google Analytics. If this parameter is added to the component, its value is included in any tracking events, specifically in dimension96.
+    description: In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav that the component links to.
     data:
       title: 'With a tracking id'
       path: '#'

data/app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml

@@ -53,12 +53,12 @@ examples:
         }
       ]
   with_unique_tracking:
-    description: We need to uniquely identify each step by step navigation in Google Analytics. If this parameter is added to the component, its value is included in any tracking events, specifically in dimension96.
+    description: In order to identify the step by step navigation the component is part of, we need to track a unique ID of the navigation in Google Analytics. This ID should be the same across all pages that are linked from and are part of that navigation. Its value is included in any tracking events, specifically in dimension96. It refers to the ID of the step nav that the component links to. Where there are multiple links, they will have different tracking IDs.
     data:
-      tracking_id: 'this-is-the-tracking-id'
       links: [
         {
           href: '#',
-          text: 'With a tracking id'
+          text: 'With a tracking id',
+          tracking_id: 'this-is-the-tracking-id'
         }
       ]

data/lib/govuk_publishing_components/app_helpers/step_nav.rb

@@ -13,6 +13,10 @@ module GovukPublishingComponents
         content_item[:base_path]
       end
 
+      def content_id
+        content_item[:content_id]
+      end
+
       def content
         content_item.dig(:details, :step_by_step_nav)
       end

data/lib/govuk_publishing_components/app_helpers/step_nav_helper.rb

@@ -28,7 +28,8 @@ module GovukPublishingComponents
         step_navs.map do |step_nav|
           {
             href: step_nav.base_path,
-            text: step_nav.title
+            text: step_nav.title,
+            tracking_id: step_nav.content_id
           }
         end
       end
@@ -37,7 +38,7 @@ module GovukPublishingComponents
         if show_sidebar?
           @sidebar ||= first_step_nav.content.tap do |sb|
             configure_for_sidebar(sb)
-            sb.merge!(small: true, heading_level: 3)
+            sb.merge!(small: true, heading_level: 3, tracking_id: first_step_nav.content_id)
           end
         end
       end
@@ -46,7 +47,8 @@ module GovukPublishingComponents
         if show_header?
           {
             title: first_step_nav.title,
-            path: first_step_nav.base_path
+            path: first_step_nav.base_path,
+            tracking_id: first_step_nav.content_id
           }
         else
           {}

data/lib/govuk_publishing_components/presenters/step_by_step_nav_helper.rb

@@ -17,6 +17,8 @@ module GovukPublishingComponents
           heading(element[:text])
         when "list"
           list(element)
+        when "substep"
+          substep(element)
         end
       end
 
@@ -46,7 +48,7 @@ module GovukPublishingComponents
       def list(element)
         content_tag(
           get_list_element(element[:style]),
-          class: "gem-c-step-nav__links #{get_list_style(element[:style])}",
+          class: "gem-c-step-nav__list #{get_list_style(element[:style])}",
           data: {
             length: element[:contents].length
           }
@@ -55,7 +57,7 @@ module GovukPublishingComponents
             concat(
               content_tag(
                 :li,
-                class: "gem-c-step-nav__link js-list-item #{link_active(contents[:active])}"
+                class: "gem-c-step-nav__list-item js-list-item #{link_active(contents[:active])}"
               ) do
                 create_list_item_content(contents)
               end
@@ -64,6 +66,20 @@ module GovukPublishingComponents
         end
       end
 
+      def substep(element)
+        optional = "gem-c-step-nav__substep--optional" if element[:optional] == true
+        content_tag(
+          :div,
+          class: "gem-c-step-nav__substep #{optional}"
+        ) do
+          element[:contents].collect { |contents|
+            concat(
+              render_step_nav_element(contents, @options)
+            )
+          }
+        end
+      end
+
       def create_list_item_content(link)
         if link[:href]
           @link_index += 1
@@ -76,7 +92,7 @@ module GovukPublishingComponents
             data: {
               position: "#{@options[:step_index] + 1}.#{@link_index}"
             },
-            class: "gem-c-step-nav__link-item js-link"
+            class: "gem-c-step-nav__link js-link"
           ) do
             text
           end
@@ -90,7 +106,7 @@ module GovukPublishingComponents
       end
 
       def get_list_style(style)
-        "gem-c-step-nav__links--choice" if style == "choice"
+        "gem-c-step-nav__list--choice" if style == "choice"
       end
 
       def get_list_element(style)
@@ -106,7 +122,7 @@ module GovukPublishingComponents
       end
 
       def link_active(active)
-        "gem-c-step-nav__link--active" if active
+        "gem-c-step-nav__list-item--active" if active
       end
     end
   end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '5.6.0'.freeze
+  VERSION = '5.7.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 5.6.0
+  version: 5.7.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-20 00:00:00.000000000 Z
+date: 2018-03-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails