govuk_publishing_components 5.1.1 → 5.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27265d058d967524df2d0e420fab53b2bf9278d739dea1ed7aa8e20245413c8e
-  data.tar.gz: 20bfd7b105a9ddc4ed0464f10c6ed9c365e9edc9d267564a42c82c9a694c9ebf
+  metadata.gz: 82107111f850c84527a2eac1c33b99019069fd5fc4a1683f7b88f0cdae8dd30f
+  data.tar.gz: f0d5265c99e46d8edec4adb3e9023cd26d08f690c2717454f497c33b7593638a
 SHA512:
-  metadata.gz: 257c88b5dfadd6be3226e70a304d8d46e98c01926931ea9883f06dbe19d9a6cfcc16aa29973f56f1ec1b2a5a9fedd0bcc2819b040ffdc4fe2e64868560f06245
-  data.tar.gz: 37d7712fdce99007ba80f968f097ef0e449145a7a800eafbb74dc8ec739c412357805b0122695dbf636387dba63325b30c8732b83b839b974ca59e4fa4564898
+  metadata.gz: 12665b69dcfd60f4ed3e336aecf494cb5c0cfb425fd61e9efc512d405790e6fdddc9b66f4723418beb12cd97bf0e2b5edad6b47b6490d6697230268f44c75b60
+  data.tar.gz: 0e73ce2217730591b427993c0274cb80896eae3da8bac9f63d257421f5556a686975e970078c361c3a0b49c740f311607831a85ffc03d389bf4cf108574ebaf8

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

@@ -95,7 +95,7 @@
             linkText = actions.hideLinkText;
           }
           if (!$(this).find('.js-toggle-link').length) {
-            $(this).append('<span class="gem-c-step-nav__toggle-link js-toggle-link">' + linkText + '</span>');
+            $(this).find('.js-step-title-button').append('<span class="gem-c-step-nav__toggle-link js-toggle-link" aria-hidden="true">' + linkText + '</span>');
           }
         });
       }
@@ -155,22 +155,29 @@
           var $title = $step.find('.js-step-title');
           var contentId = $step.find('.js-panel').first().attr('id');
 
+          $title.wrapInner(
+            '<span class="js-step-title-text"></span>'
+          );
+
           $title.wrapInner(
             '<button ' +
             'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
             'aria-expanded="false" aria-controls="' + contentId + '">' +
-            '</button>' );
+            '</button>'
+          );
         });
       }
 
       function bindToggleForSteps(stepNavTracker) {
         $element.find('.js-toggle-panel').click(function (event) {
           preventLinkFollowingForCurrentTab(event);
+          var $step = $(this).closest('.js-step');
 
-          var stepView = new StepView($(this).closest('.js-step'));
+          var stepView = new StepView($step);
           stepView.toggle();
 
-          var toggleClick = new StepToggleClick(event, stepView, $steps, stepNavTracker);
+          var stepIsOptional = typeof $step.data('optional') !== 'undefined' ? true : false;
+          var toggleClick = new StepToggleClick(event, stepView, $steps, stepNavTracker, stepIsOptional);
           toggleClick.track();
 
           setShowHideAllText();
@@ -308,8 +315,7 @@
       var $stepContent = $stepElement.find('.js-panel');
       var shouldUpdateHash = rememberShownStep;
 
-      this.title = $stepElement.find('.js-step-title').text();
-      this.href = $titleLink.attr('href');
+      this.title = $stepElement.find('.js-step-title-text').text().trim();
       this.element = $stepElement;
 
       this.show = show;
@@ -377,29 +383,17 @@
       history.replaceState({}, '', newLocation);
     }
 
-    function StepToggleClick(event, stepView, $steps, stepNavTracker) {
+    function StepToggleClick(event, stepView, $steps, stepNavTracker, stepIsOptional) {
       this.track = trackClick;
       var $target = $(event.target);
 
       function trackClick() {
         var tracking_options = {label: trackingLabel(), dimension28: stepView.numberOfContentItems().toString()}
         stepNavTracker.track('pageElementInteraction', trackingAction(), tracking_options);
-
-        if (!stepView.isHidden()) {
-          stepNavTracker.track(
-            'stepNavLinkClicked',
-            String(stepIndex()),
-            {
-              label: stepView.href,
-              dimension28: String(stepView.numberOfContentItems()),
-              dimension29: stepView.title
-            }
-          )
-        }
       }
 
       function trackingLabel() {
-        return $target.closest('.js-toggle-panel').attr('data-position') + ' - ' + stepView.title + ' - ' + locateClickElement() + ": " + stepNavSize;
+        return $target.closest('.js-toggle-panel').attr('data-position') + ' - ' + stepView.title + ' - ' + locateClickElement() + ": " + stepNavSize + isOptional();
       }
 
       // returns index of the clicked step in the overall number of steps
@@ -426,12 +420,16 @@
       }
 
       function clickedOnHeading() {
-        return $target.hasClass('js-step-title-button');
+        return $target.hasClass('js-step-title-text');
       }
 
       function iconType() {
         return (stepView.isHidden() ? 'Minus' : 'Plus');
       }
+
+      function isOptional() {
+        return (stepIsOptional ? ' ; optional' : '');
+      }
     }
 
     function componentLinkClick(event, stepNavTracker, linkPosition) {

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

@@ -23,14 +23,4 @@
   @include bold-24;
 }
 
-.gem-c-step-nav-header__skip-link {
-  position: absolute;
-  top: 0;
-  right: 9999em;
-
-  &:focus {
-    right: 0;
-  }
-}
-
 // scss-lint:enable SelectorFormat

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

@@ -30,7 +30,13 @@ $top-border: solid 2px $grey-3;
 }
 
 .gem-c-step-nav {
-  margin-bottom: $gutter-half;
+  margin-bottom: $gutter;
+
+  &.gem-c-step-nav--large {
+    @include media(tablet) {
+      margin-bottom: $gutter * 2;
+    }
+  }
 }
 
 .gem-c-step-nav__controls {
@@ -69,6 +75,11 @@ $top-border: solid 2px $grey-3;
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
   padding: 0.5em 0;
+  text-decoration: underline;
+
+  &:hover {
+    color: $link-hover-colour;
+  }
 
   .gem-c-step-nav--large & {
     @include _core-font-generator(16px, 14px, 16px, 1, 1, false);
@@ -104,21 +115,6 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-step-nav__step--optional {
-  // broken line down the side of a step
-  &:after {
-    border-left-style: dotted;
-  }
-
-  .gem-c-step-nav--large & {
-    @include media(tablet) {
-      &:after {
-        border-width: $stroke-width-large;
-      }
-    }
-  }
-}
-
 .gem-c-step-nav__step:last-child {
   // little dash at the bottom of the line
   &:before {
@@ -238,7 +234,8 @@ $top-border: solid 2px $grey-3;
   }
 
   &:hover {
-    .gem-c-step-nav__button {
+    .gem-c-step-nav__button,
+    .gem-c-step-nav__circle {
       color: $link-colour;
     }
 
@@ -321,12 +318,6 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-step-nav__links--required {
-  .gem-c-step-nav__link-item {
-    font-weight: bold;
-  }
-}
-
 .gem-c-step-nav__links--choice {
   $links-margin: 20px;
 
@@ -380,6 +371,7 @@ $top-border: solid 2px $grey-3;
 
   .gem-c-step-nav__link-item {
     color: $black;
+    text-decoration: none;
 
     &:visited,
     &:active,
@@ -389,14 +381,6 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-step-nav__link-item {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 .gem-c-step-nav__context {
   display: inline-block;
   font-weight: normal;
@@ -421,12 +405,6 @@ $top-border: solid 2px $grey-3;
     height: calc(100% + #{$gutter});
   }
 
-  .gem-c-step-nav__step--optional & {
-    &:after {
-      display: none;
-    }
-  }
-
   .gem-c-step-nav--large & {
     @include media(tablet) {
       &:after {

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

@@ -47,7 +47,7 @@
     </div>
   </div>
 
-  <form action="/contact/govuk/problem_reports" id="something-is-wrong" class="gem-c-feedback__form js-feedback-form js-hidden" data-track-category="yesNoFeedbackForm" data-track-action="ffFormSubmit">
+  <form action="/contact/govuk/problem_reports" id="something-is-wrong" class="gem-c-feedback__form js-feedback-form js-hidden" data-track-category="yesNoFeedbackForm" data-track-action="ffFormSubmit" method="post">
     <a href="#" class="gem-c-feedback__close gem-c-feedback__js-show js-close-form" aria-controls="something-is-wrong" aria-expanded="true" role="button">Close</a>
 
     <div class="gem-c-feedback__grid-row">
@@ -80,7 +80,7 @@
     </div>
   </form>
 
-  <form action="/contact/govuk/email-survey-signup" id="page-is-not-useful" class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form js-hidden" data-track-category="user_satisfaction_survey" data-track-action="banner_taken">
+  <form action="/contact/govuk/email-survey-signup" id="page-is-not-useful" class="gem-c-feedback__form gem-c-feedback__form--email gem-c-feedback__js-show js-feedback-form js-hidden" data-track-category="user_satisfaction_survey" data-track-action="banner_taken" method="post">
     <a href="#" class="gem-c-feedback__close js-close-form" aria-controls="page-is-not-useful" aria-expanded="true" role="button">Close</a>
 
     <div class="gem-c-feedback__grid-row">

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

@@ -34,30 +34,34 @@
           circle_class = "gem-c-step-nav__circle--logic" if logic
         %>
         <li class="gem-c-step-nav__step js-step
-          <%= "gem-c-step-nav__step--optional" if step[:optional] %>
           <%= "gem-c-step-nav__step--active" if step_is_active %>"
           <% if step_is_active %>aria-current="step"<% end %>
           <%= "data-show" if step_count == show_step %>
           id="<%= id %>"
           data-track-count="stepNavSection"
+          <%= "data-optional" if step[:optional] %>
         >
-          <div class="gem-c-step-nav__circle <%= circle_class %>">
-            <span class="gem-c-step-nav__circle-inner">
-              <span class="gem-c-step-nav__circle-background">
-                <% if logic %>
-                  <%= logic %>
-                <% else %>
-                  <%
-                    step_number += 1
-                  %>
-                  <span class="visuallyhidden">Step</span> <%= step_number %>
-                <% end %>
+          <div class="gem-c-step-nav__header js-toggle-panel" data-position="<%= "#{step_index + 1}" %>">
+            <%= content_tag("h#{heading_level}", class: 'gem-c-step-nav__title') do %>
+              <span class="gem-c-step-nav__circle <%= circle_class %>">
+                <span class="gem-c-step-nav__circle-inner">
+                  <span class="gem-c-step-nav__circle-background">
+                    <% if logic %>
+                      <%= logic %>
+                    <% else %>
+                      <%
+                        step_number += 1
+                      %>
+                      <span class="visuallyhidden">Step</span> <%= step_number %>
+                    <% end %>
+                  </span>
+                </span>
               </span>
-            </span>
-          </div>
 
-          <div class="gem-c-step-nav__header js-toggle-panel" data-position="<%= "#{step_index + 1}" %>">
-            <%= content_tag("h#{heading_level}", step[:title], class: 'gem-c-step-nav__title js-step-title') %>
+              <span class="js-step-title">
+                <%= step[:title] %>
+              </span>
+            <% end %>
           </div>
 
           <div class="gem-c-step-nav__panel js-panel" id="step-panel-<%= id %>-<%= step_index + 1 %>">

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

@@ -1,8 +1,6 @@
 <%
   title ||= false
   path ||= false
-  skip_link ||= false
-  skip_link_text ||= "Skip content"
   tracking_id ||= false
 %>
 <% if title %>
@@ -24,17 +22,5 @@
         <%= title %>
       </span>
     <% end %>
-
-    <% if skip_link %>
-      <a href="<%= skip_link %>"
-        class="gem-c-step-nav-header__skip-link"
-        data-track-category="stepNavHeaderClicked"
-        data-track-action="top"
-        data-track-label="<%= skip_link %>"
-        data-track-dimension="<%= skip_link_text %>"
-        data-track-dimension-index="29">
-        <%= skip_link_text %>
-      </a>
-    <% end %>
   </div>
 <% end %>

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

@@ -191,7 +191,7 @@ examples:
     description: |
       Links can have the following attributes:
 
-      - style, an attribute on the parent list that controls its appearance, either required (bold), optional (not bold) or choice (not bold, with bullets on the list). The default is optional.
+      - style, an attribute on the parent list that controls its appearance. Defaults to optional but can be set to 'choice' (adds indent and bullets to the list)
       - context, an optional text field to show some extra information after the link, usually a monetary value
       - active, whether to make the link highlighted (to indicate the current page)
       - highlight_step, a general option to highlight the step. Usually the active link would be in the active step, but in some circumstances there might be an active step but no highlighted link.
@@ -212,7 +212,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: '/component-guide/step_by_step_navigation/with_links/preview',
@@ -232,31 +231,6 @@ examples:
                 }
               ]
             },
-            {
-              type: 'paragraph',
-              text: 'These links represent tasks that are optional.'
-            },
-            {
-              type: 'list',
-              contents: [
-                {
-                  href: '/component-guide/step_by_step_navigation/with_links/preview',
-                  text: 'Learn to play the saxophone',
-                  active: true
-                },
-                {
-                  href: '/component-guide/step_by_step_navigation/with_links/preview',
-                  text: 'Develop a new method of extracting juice from oranges',
-                  context: '£0 to £300',
-                  active: true
-                },
-                {
-                  href: '/component-guide/step_by_step_navigation/with_links/preview',
-                  text: 'Buy a race car',
-                  active: true
-                }
-              ]
-            },
             {
               type: 'paragraph',
               text: 'These links represent a choice:'
@@ -285,7 +259,6 @@ examples:
           contents: [
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: '/component-guide/step_by_step_navigation/',
@@ -362,7 +335,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://solicitors.lawsociety.org.uk/',
@@ -384,7 +356,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: '/looking-after-children-divorce/apply-for-court-order',
@@ -428,7 +399,6 @@ examples:
           contents: [
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://google.com',
@@ -457,7 +427,6 @@ examples:
           contents: [
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: '/component-guide/step_by_step_navigation/with_links/preview',
@@ -480,7 +449,10 @@ examples:
       ]
   with_optional_steps:
     description: |
-      Steps can be optional. This is controlled by two parameters for maximum flexibility, 'optional' (which causes the step to have a dotted line down the side) and 'logic', which defaults to showing the word 'and' alongside the step title, but also accepts 'or'.
+      Steps can be optional. This is controlled by two parameters, 'optional' and 'logic'.
+
+      - Optional steps used to have a dotted line down the side but this was removed as it confused users. In some cases we may still need to record if a step is optional, so if this parameter is applied, GA tracking events will have 'optional' appended to the end of the eventLabel.
+      - Logic will change the number next to a step to the word 'and' or the word 'or'.
 
       If a step is optional this should be conveyed by the text within that step.
     data:
@@ -687,7 +659,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'https://en.wikipedia.org/wiki/HDMI',
@@ -707,7 +678,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'https://www.google.co.uk/',
@@ -730,7 +700,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://www.google.com',
@@ -798,7 +767,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://www.google.com',
@@ -819,7 +787,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://www.google.com',
@@ -883,7 +850,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'https://en.wikipedia.org/wiki/HDMI',
@@ -903,7 +869,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'https://www.google.co.uk/',
@@ -926,7 +891,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://www.google.com',
@@ -994,7 +958,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://www.google.com',
@@ -1015,7 +978,6 @@ examples:
             },
             {
               type: 'list',
-              style: 'required',
               contents: [
                 {
                   href: 'http://www.google.com',

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

@@ -5,9 +5,7 @@ body: |
 accessibility_criteria: |
   The component is designed to go into the top of an existing content page and should not interfere with the heading structure of the page, so therefore should not contain a heading tag.
 
-  The component must:
-
-  - provide a skip link to the step by step navigation on the page, if one is present
+  An early version of the component contained a hidden skip link for keyboard and screen reader users, that jumped to the step by step navigation component in the sidebar (similiar to the 'skip to content' link at the top of all GOV.UK pages). User testing suggested that rather than helping users it confused them, so this has been removed.
 shared_accessibility_criteria:
   - link
 examples:
@@ -24,16 +22,3 @@ examples:
       title: 'With a tracking id'
       path: '#'
       tracking_id: 'this-is-the-tracking-id'
-  with_a_skip_link:
-    description: This option allows the insertion of a skip link to a step by step navigation elsewhere on the page. This aids navigation when using a keyboard or screen reader. The skip link is visually hidden until it receives focus.
-    data:
-      title: 'Separating from a spouse or civil partner: step by step'
-      path: /divorce
-      skip_link: '#step-nav-wrapper'
-  with_a_skip_link_with_custom_text:
-    description: It's hard to think of good text to put in a skip link, so this option lets you customise it.
-    data:
-      title: 'Buying and renting a property: step by step'
-      path: /buy-sell-your-home
-      skip_link: '#step-nav-steps'
-      skip_link_text: Skip to steps

data/lib/govuk_publishing_components/components/step_by_step_nav_helper.rb

@@ -86,11 +86,7 @@ private
   end
 
   def get_list_style(style)
-    if style == "required"
-      "gem-c-step-nav__links--required"
-    elsif style == "choice"
-      "gem-c-step-nav__links--choice"
-    end
+    "gem-c-step-nav__links--choice" if style == "choice"
   end
 
   def get_list_element(style)

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '5.1.1'.freeze
+  VERSION = '5.1.2'.freeze
 end

metadata

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