govuk_publishing_components 4.1.1 → 5.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9cc0e69ba995b899312ec518fc2193c23b09b942d5cc4a3fefe65a6d2bb3535e
-  data.tar.gz: e51a19c9a7298816343b611486c92873fba2f05160344e22ff8c39ab33b447a9
+  metadata.gz: 2246fa0ef19db8a5d4ce9ab9f9e58c0f7858d1504f4e7c847b45ef511ad38eea
+  data.tar.gz: 3468abaaa41ec8bdd66820bcba7615d28d937da6dd229c4a2eaa9a33a604edb2
 SHA512:
-  metadata.gz: 7b864217c5e2b22c3ef1ec1c999a857aab5116cf57bea4aa523f2f5927673b1236538ef3d6dd57970fc33906b967dca79456bc28fb65eb57e162deb4c9b6e3ff
-  data.tar.gz: 745f7d086a3ae2eba8ebbf8ca0ddd3a179c7c09320aaab5518a6edec150aae8f74c7738d0670173ca17395ef23440a033122f68b372e2cffd518232a0afbe2ad
+  metadata.gz: c52ef6feed05da9b9dcc06fac40deb988d93d9b4e9cd56cc772bae21186dd993e9158e802fef751087effd37f8e85e61a9a1106061ccc15b0200fa15a6c25f1d
+  data.tar.gz: 29bab2b37364334ef3f873394fd2859dce85568b83e7b57012e3da1eaa6adafc9398c67433633a9e8cebcedd0cf9807b6584597370ae70387a5b0a816ab1c7e6

data/app/assets/javascripts/current-location.js

@@ -1,4 +1,4 @@
-// used by the tasklist component
+// used by the step by step navigation component
 
 (function(root) {
   "use strict";

data/app/assets/javascripts/govuk_publishing_components/components/{task-list.js → step-by-step-nav.js}

@@ -4,7 +4,7 @@
   "use strict";
   window.GOVUK = window.GOVUK || {};
 
-  Modules.Gemtasklist = function () {
+  Modules.Gemstepnav = function () {
 
     var actions = {
       showLinkText: "Show",
@@ -25,9 +25,9 @@
     };
 
     var rememberShownStep = false;
-    var taskListSize;
-    var sessionStoreLink = 'govuk-task-list-active-link';
-    var activeLinkClass = 'gem-c-task-list__link--active';
+    var stepNavSize;
+    var sessionStoreLink = 'govuk-step-nav-active-link';
+    var activeLinkClass = 'gem-c-step-nav__link--active';
     var activeLinkHref = '#content';
 
     this.start = function ($element) {
@@ -35,22 +35,21 @@
       $(window).unload(storeScrollPosition);
 
       // Indicate that js has worked
-      $element.addClass('gem-c-task-list--active');
+      $element.addClass('gem-c-step-nav--active');
 
       // Prevent FOUC, remove class hiding content
       $element.removeClass('js-hidden');
 
       rememberShownStep = !!$element.filter('[data-remember]').length;
-      taskListSize = $element.hasClass('gem-c-task-list--large') ? 'Big' : 'Small';
-      var $groups = $element.find('.gem-c-task-list__group');
+      stepNavSize = $element.hasClass('gem-c-step-nav--large') ? 'Big' : 'Small';
       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-task-list__link-item').length;
+      var totalLinks = $element.find('.gem-c-step-nav__link-item').length;
 
       var $showOrHideAllButton;
 
-      var tasklistTracker = new TasklistTracker(totalSteps, totalLinks);
+      var stepNavTracker = new StepNavTracker(totalSteps, totalLinks);
 
       addButtonstoSteps();
       addShowHideAllButton();
@@ -61,11 +60,11 @@
       showLinkedStep();
       ensureOnlyOneActiveLink();
 
-      bindToggleForSteps(tasklistTracker);
-      bindToggleShowHideAllButton(tasklistTracker);
-      bindComponentLinkClicks(tasklistTracker);
+      bindToggleForSteps(stepNavTracker);
+      bindToggleShowHideAllButton(stepNavTracker);
+      bindComponentLinkClicks(stepNavTracker);
 
-      // When navigating back in browser history to the tasklist, the browser will try to be "clever" and return
+      // When navigating back in browser history to the step nav, the browser will try to be "clever" and return
       // the user to their previous scroll position. However, since we collapse all but the currently-anchored
       // step, the content length changes and the user is returned to the wrong position (often the footer).
       // In order to correct this behaviour, as the user leaves the page, we anticipate the correct height we wish the
@@ -84,7 +83,7 @@
       }
 
       function addShowHideAllButton() {
-        $element.prepend('<div class="gem-c-task-list__controls"><button aria-expanded="false" class="gem-c-task-list__button gem-c-task-list__button--controls js-step-controls-button">' + bulkActions.showAll.buttonText + '</button></div>');
+        $element.prepend('<div class="gem-c-step-nav__controls"><button aria-expanded="false" class="gem-c-step-nav__button gem-c-step-nav__button--controls js-step-controls-button">' + bulkActions.showAll.buttonText + '</button></div>');
       }
 
       function addShowHideToggle() {
@@ -95,7 +94,7 @@
             linkText = actions.hideLinkText;
           }
           if (!$(this).find('.js-toggle-link').length) {
-            $(this).append('<span class="gem-c-task-list__toggle-link js-toggle-link">' + linkText + '</span>');
+            $(this).append('<span class="gem-c-step-nav__toggle-link js-toggle-link">' + linkText + '</span>');
           }
         });
       }
@@ -157,20 +156,20 @@
 
           $title.wrapInner(
             '<button ' +
-            'class="gem-c-task-list__button gem-c-task-list__button--title js-step-title-button" ' +
+            'class="gem-c-step-nav__button gem-c-step-nav__button--title js-step-title-button" ' +
             'aria-expanded="false" aria-controls="' + contentId + '">' +
             '</button>' );
         });
       }
 
-      function bindToggleForSteps(tasklistTracker) {
+      function bindToggleForSteps(stepNavTracker) {
         $element.find('.js-toggle-panel').click(function (event) {
           preventLinkFollowingForCurrentTab(event);
 
           var stepView = new StepView($(this).closest('.js-step'));
           stepView.toggle();
 
-          var toggleClick = new StepToggleClick(event, stepView, $steps, tasklistTracker, $groups);
+          var toggleClick = new StepToggleClick(event, stepView, $steps, stepNavTracker);
           toggleClick.track();
 
           setShowHideAllText();
@@ -178,9 +177,9 @@
       }
 
       // tracking click events on links in step content
-      function bindComponentLinkClicks(tasklistTracker) {
+      function bindComponentLinkClicks(stepNavTracker) {
         $element.find('.js-link').click(function (event) {
-          var linkClick = new componentLinkClick(event, tasklistTracker, $(this).attr('data-position'));
+          var linkClick = new componentLinkClick(event, stepNavTracker, $(this).attr('data-position'));
           linkClick.track();
           var thisLinkHref = $(this).attr('href');
 
@@ -224,11 +223,11 @@
           removeActiveStateFromAllButCurrent($activeLinks, lastClicked);
           removeFromSessionStorage(sessionStoreLink);
         } else {
-          var activeLinkInActiveGroup = $element.find('.gem-c-task-list__group--active').find('.' + activeLinkClass).first();
+          var activeLinkInActiveStep = $element.find('.gem-c-step-nav__step--active').find('.' + activeLinkClass).first();
 
-          if (activeLinkInActiveGroup.length) {
+          if (activeLinkInActiveStep.length) {
             $activeLinks.removeClass(activeLinkClass);
-            activeLinkInActiveGroup.addClass(activeLinkClass);
+            activeLinkInActiveStep.addClass(activeLinkClass);
           } else {
             $activeLinks.slice(1).removeClass(activeLinkClass);
           }
@@ -237,7 +236,7 @@
 
       function removeActiveStateFromAllButCurrent($links, current) {
         $links.each(function() {
-          if ($(this).find('.js-link').data('position') !== current) {
+          if ($(this).find('.js-link').data('position').toString() !== current.toString()) {
             $(this).removeClass(activeLinkClass);
           }
         });
@@ -253,7 +252,7 @@
         event.preventDefault();
       }
 
-      function bindToggleShowHideAllButton(tasklistTracker) {
+      function bindToggleShowHideAllButton(stepNavTracker) {
         $showOrHideAllButton = $element.find('.js-step-controls-button');
         $showOrHideAllButton.on('click', function () {
           var shouldshowAll;
@@ -263,16 +262,16 @@
             $element.find('.js-toggle-link').text(actions.hideLinkText)
             shouldshowAll = true;
 
-            tasklistTracker.track('pageElementInteraction', 'tasklistAllShown', {
-              label: bulkActions.showAll.eventLabel + ": " + taskListSize
+            stepNavTracker.track('pageElementInteraction', 'stepNavAllShown', {
+              label: bulkActions.showAll.eventLabel + ": " + stepNavSize
             });
           } else {
             $showOrHideAllButton.text(bulkActions.showAll.buttonText);
             $element.find('.js-toggle-link').text(actions.showLinkText);
             shouldshowAll = false;
 
-            tasklistTracker.track('pageElementInteraction', 'tasklistAllHidden', {
-              label: bulkActions.hideAll.eventLabel + ": " + taskListSize
+            stepNavTracker.track('pageElementInteraction', 'stepNavAllHidden', {
+              label: bulkActions.hideAll.eventLabel + ": " + stepNavSize
             });
           }
 
@@ -377,19 +376,17 @@
       history.replaceState({}, '', newLocation);
     }
 
-    function StepToggleClick(event, stepView, $steps, tasklistTracker, $groups) {
+    function StepToggleClick(event, stepView, $steps, stepNavTracker) {
       this.track = trackClick;
       var $target = $(event.target);
-      var $thisGroup = stepView.element.closest('.gem-c-task-list__group');
-      var $thisGroupSteps = $thisGroup.find('.gem-c-task-list__step');
 
       function trackClick() {
         var tracking_options = {label: trackingLabel(), dimension28: stepView.numberOfContentItems().toString()}
-        tasklistTracker.track('pageElementInteraction', trackingAction(), tracking_options);
+        stepNavTracker.track('pageElementInteraction', trackingAction(), tracking_options);
 
         if (!stepView.isHidden()) {
-          tasklistTracker.track(
-            'tasklistLinkClicked',
+          stepNavTracker.track(
+            'stepNavLinkClicked',
             String(stepIndex()),
             {
               label: stepView.href,
@@ -401,16 +398,16 @@
       }
 
       function trackingLabel() {
-        return $target.closest('.js-toggle-panel').attr('data-position') + ' - ' + stepView.title + ' - ' + locateClickElement() + ": " + taskListSize;
+        return $target.closest('.js-toggle-panel').attr('data-position') + ' - ' + stepView.title + ' - ' + locateClickElement() + ": " + stepNavSize;
       }
 
-      // returns index of the clicked step in the overall number of accordion steps, regardless of how many per group
+      // returns index of the clicked step in the overall number of steps
       function stepIndex() {
         return $steps.index(stepView.element) + 1;
       }
 
       function trackingAction() {
-        return (stepView.isHidden() ? 'tasklistHidden' : 'tasklistShown');
+        return (stepView.isHidden() ? 'stepNavHidden' : 'stepNavShown');
       }
 
       function locateClickElement() {
@@ -436,27 +433,27 @@
       }
     }
 
-    function componentLinkClick(event, tasklistTracker, linkPosition) {
+    function componentLinkClick(event, stepNavTracker, linkPosition) {
       this.track = trackClick;
 
       function trackClick() {
-        var tracking_options = {label: $(event.target).attr('href') + " : " + taskListSize};
-        var dimension28 = $(event.target).closest('.gem-c-task-list__links').attr('data-length');
+        var tracking_options = {label: $(event.target).attr('href') + " : " + stepNavSize};
+        var dimension28 = $(event.target).closest('.gem-c-step-nav__links').attr('data-length');
 
         if (dimension28) {
           tracking_options['dimension28'] = dimension28;
         }
 
-        tasklistTracker.track('taskAccordionLinkClicked', linkPosition, tracking_options);
+        stepNavTracker.track('stepNavLinkClicked', linkPosition, tracking_options);
       }
     }
 
     // A helper that sends a custom event request to Google Analytics if
     // the GOVUK module is setup
-    function TasklistTracker(totalSteps, totalLinks) {
+    function StepNavTracker(totalSteps, totalLinks) {
       this.track = function(category, action, options) {
-        // dimension26 records the total number of expand/collapse steps in this tasklist
-        // dimension27 records the total number of links in this tasklist
+        // dimension26 records the total number of expand/collapse steps in this step nav
+        // dimension27 records the total number of links in this step nav
         // dimension28 records the number of links in the step that was shown/hidden (handled in click event)
         if (GOVUK.analytics && GOVUK.analytics.trackEvent) {
           options = options || {};

data/app/assets/javascripts/history-support.js

@@ -1,4 +1,4 @@
-// used by the tasklist component
+// used by the step by step navigation component
 
 if(typeof window.GOVUK === 'undefined'){ window.GOVUK = {}; }
 if(typeof window.GOVUK.support === 'undefined'){ window.GOVUK.support = {}; }

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -13,6 +13,6 @@
 @import "components/input";
 @import "components/label";
 @import "components/radio";
-@import "components/task-list";
-@import "components/task-list-header";
-@import "components/task-list-related";
+@import "components/step-by-step-nav";
+@import "components/step-by-step-nav-header";
+@import "components/step-by-step-nav-related";

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -7,5 +7,5 @@
 @import "typography";
 @import "colours";
 
-@import "components/print/task-list";
-@import "components/print/task-list-header";
+@import "components/print/step-by-step-nav";
+@import "components/print/step-by-step-nav-header";

data/app/assets/stylesheets/govuk_publishing_components/component_guide_print.scss

@@ -0,0 +1,3 @@
+@import "typography";
+@import "components/print/step-by-step-nav";
+@import "components/print/step-by-step-nav-header";

data/app/assets/stylesheets/govuk_publishing_components/components/{_task-list-header.scss → _step-by-step-nav-header.scss}

@@ -1,4 +1,4 @@
-.gem-c-task-list-header {
+.gem-c-step-nav-header {
   position: relative;
   padding: 10px;
   background: $grey-4;
@@ -12,18 +12,18 @@
 
 // scss-lint:disable SelectorFormat
 
-.gem-c-task-list-header__part-of {
+.gem-c-step-nav-header__part-of {
   @include bold-16;
 
   display: block;
   padding-bottom: 0.2em;
 }
 
-.gem-c-task-list-header__title {
+.gem-c-step-nav-header__title {
   @include bold-24;
 }
 
-.gem-c-task-list-header__skip-link {
+.gem-c-step-nav-header__skip-link {
   position: absolute;
   top: 0;
   right: 9999em;

data/app/assets/stylesheets/govuk_publishing_components/components/{_task-list-related.scss → _step-by-step-nav-related.scss}

@@ -1,15 +1,15 @@
-.gem-c-task-list-related {
+.gem-c-step-nav-related {
   margin-bottom: $gutter-half;
 }
 
-.gem-c-task-list-related__heading,
-.gem-c-task-list-related__links {
+.gem-c-step-nav-related__heading,
+.gem-c-step-nav-related__links {
   @include bold-19;
   margin: 0;
   padding: 0;
 }
 
-.gem-c-task-list-related__pretitle {
+.gem-c-step-nav-related__pretitle {
   display: block;
   margin-bottom: $gutter-half;
 
@@ -18,11 +18,11 @@
   }
 }
 
-.gem-c-task-list-related__links {
+.gem-c-step-nav-related__links {
   list-style: none;
 }
 
-.gem-c-task-list-related__link-item {
+.gem-c-step-nav-related__link-item {
   margin-top: $gutter-half;
 
   @include media(tablet) {
@@ -30,7 +30,7 @@
   }
 }
 
-.gem-c-task-list-related__link {
+.gem-c-step-nav-related__link {
   text-decoration: none;
 
   &:hover {

data/app/assets/stylesheets/govuk_publishing_components/components/{_task-list.scss → _step-by-step-nav.scss}

@@ -8,7 +8,7 @@ $number-circle-size-large: 35px;
 $dot-size: 16px;
 $top-border: solid 2px $grey-3;
 
-@mixin task-list-vertical-line ($line-style: solid) {
+@mixin step-nav-vertical-line ($line-style: solid) {
   content: "";
   position: absolute;
   z-index: 2;
@@ -18,27 +18,27 @@ $top-border: solid 2px $grey-3;
   background: $white;
 }
 
-@mixin task-list-line-position {
-  left: -($gutter + $gutter-half);
+@mixin step-nav-line-position {
+  left: 0;
   margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
 }
 
-@mixin task-list-line-position-large {
-  left: -($gutter * 2);
+@mixin step-nav-line-position-large {
+  left: 0;
   margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
   border-width: $stroke-width-large;
 }
 
-.gem-c-task-list {
+.gem-c-step-nav {
   margin-bottom: $gutter-half;
 }
 
-.gem-c-task-list__controls {
+.gem-c-step-nav__controls {
   padding: 3px 3px 0 0;
   text-align: right;
 }
 
-.gem-c-task-list__button {
+.gem-c-step-nav__button {
   color: $link-colour;
   cursor: pointer;
   background: none;
@@ -48,51 +48,78 @@ $top-border: solid 2px $grey-3;
 
 // removes extra dotted outline from buttons in Firefox
 // on focus (standard yellow outline unaffected)
-.gem-c-task-list__button::-moz-focus-inner {
+.gem-c-step-nav__button::-moz-focus-inner {
   border: 0;
 }
 
-.gem-c-task-list__button--title {
+.gem-c-step-nav__button--title {
   @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
   display: inline-block;
   padding: 0;
   text-align: left;
   color: $black;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(24px, 19px, 24px, 1.4, 1.4, false, bold);
   }
 }
 
-.gem-c-task-list__button--controls {
+.gem-c-step-nav__button--controls {
   @include _core-font-generator(14px, 14px, 14px, 1, 1, false);
   position: relative;
   z-index: 1; // this and relative position stops focus outline underlap with border of accordion
   padding: 0.5em 0;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(16px, 14px, 16px, 1, 1, false);
   }
 }
 
-.gem-c-task-list__groups {
+.gem-c-step-nav__steps {
   padding: 0;
   margin: 0;
 }
 
-.gem-c-task-list__group {
+.gem-c-step-nav__step {
   position: relative;
   padding-left: $gutter + $gutter-half;
   list-style: none;
 
-  .gem-c-task-list--large & {
+  // line down the side of a step
+  &:after {
+    @include step-nav-vertical-line;
+    @include step-nav-line-position;
+    top: $gutter-half;
+  }
+
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       padding-left: $gutter * 2;
+
+      &:after {
+        @include step-nav-line-position-large;
+        top: $gutter;
+      }
+    }
+  }
+}
+
+.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-task-list__group:last-child {
+.gem-c-step-nav__step:last-child {
   // little dash at the bottom of the line
   &:before {
     content: "";
@@ -106,20 +133,18 @@ $top-border: solid 2px $grey-3;
     border-bottom: solid $stroke-width $grey-2;
   }
 
-  .gem-c-task-list__step:last-child {
-    &:after {
-      // scss-lint:disable DuplicateProperty
-      height: -webkit-calc(100% - #{$gutter-half}); // fallback
-      height: calc(100% - #{$gutter-half});
-      // scss-lint:enable DuplicateProperty
-    }
+  &:after {
+    // scss-lint:disable DuplicateProperty
+    height: -webkit-calc(100% - #{$gutter-half}); // fallback for iphone 4
+    height: calc(100% - #{$gutter-half});
+    // scss-lint:enable DuplicateProperty
+  }
 
-    .gem-c-task-list__help:after {
-      height: 100%;
-    }
+  .gem-c-step-nav__help:after {
+    height: 100%;
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       &:before {
         margin-left: $number-circle-size-large / 4;
@@ -127,65 +152,29 @@ $top-border: solid 2px $grey-3;
         border-width: $stroke-width-large;
       }
 
-      .gem-c-task-list__step:last-child {
-        &:after {
-          height: calc(100% - #{$gutter});
-        }
+      &:after {
+        height: calc(100% - #{$gutter});
       }
     }
   }
 }
 
-.gem-c-task-list__group--active {
+.gem-c-step-nav__step--active {
   &:last-child:before,
-  .gem-c-task-list__circle--number,
-  .gem-c-task-list__step:after,
-  .gem-c-task-list__substep:after,
-  .gem-c-task-list__help:after {
+  .gem-c-step-nav__circle--number,
+  &:after,
+  .gem-c-step-nav__substep:after,
+  .gem-c-step-nav__help:after {
     border-color: $black;
   }
 }
 
-.gem-c-task-list__step {
-  position: relative;
-
-  // line down the side of a step
-  &:after {
-    @include task-list-vertical-line;
-    @include task-list-line-position;
-    top: $gutter-half;
-  }
-
-  .gem-c-task-list--large & {
-    @include media(tablet) {
-      &:after {
-        @include task-list-line-position-large;
-        top: $gutter;
-      }
-    }
-  }
-}
-
-.gem-c-task-list__step--optional {
-  // broken line down the side of a step
-  &:after {
-    border-left-style: dotted;
-  }
-
-  .gem-c-task-list--large & {
-    @include media(tablet) {
-      &:after {
-        border-width: $stroke-width-large;
-      }
-    }
-  }
-}
-
-.gem-c-task-list__circle {
+.gem-c-step-nav__circle {
   @include box-sizing(border-box);
   position: absolute;
   z-index: 5;
   top: $gutter-half;
+  left: 0;
   width: $number-circle-size;
   height: $number-circle-size;
   color: $black;
@@ -193,7 +182,7 @@ $top-border: solid 2px $grey-3;
   border-radius: 100px;
   text-align: center;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       top: $gutter;
       width: $number-circle-size-large;
@@ -202,12 +191,11 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-task-list__circle--number {
+.gem-c-step-nav__circle--number {
   @include _core-font-generator(16px, 16px, 16px, 23px, 23px, false, bold);
-  left: 0;
   border: solid $stroke-width $grey-2;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(19px, 16px, 19px, 30px, 23px, false, bold);
 
     @include media(tablet) {
@@ -216,26 +204,21 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-task-list__circle--logic {
+.gem-c-step-nav__circle--logic {
   @include _core-font-generator(16px, 16px, 16px, 28px, 28px, false, bold);
-  left: -($gutter + $gutter-half);
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(19px, 16px, 19px, 34px, 28px, false, bold);
-
-    @include media(tablet) {
-      left: -$gutter * 2;
-    }
   }
 }
 
 // makes sure logic text expands to the left if text size is zoomed, preventing overlap
-.gem-c-task-list__circle-inner {
+.gem-c-step-nav__circle-inner {
   float: right;
   min-width: 100%;
 }
 
-.gem-c-task-list__circle-background {
+.gem-c-step-nav__circle-background {
   $shadow-offset: 0.1em;
   $shadow-colour: $white;
 
@@ -246,128 +229,128 @@ $top-border: solid 2px $grey-3;
               -#{$shadow-offset} 0 0 $shadow-colour;
 }
 
-.gem-c-task-list__header {
+.gem-c-step-nav__header {
   padding: $gutter-half 0;
   border-top: $top-border;
 
-  .gem-c-task-list--active & {
+  .gem-c-step-nav--active & {
     cursor: pointer;
   }
 
   &:hover {
-    .gem-c-task-list__button {
+    .gem-c-step-nav__button {
       color: $link-colour;
     }
 
-    .gem-c-task-list__toggle-link {
+    .gem-c-step-nav__toggle-link {
       text-decoration: underline;
     }
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       padding: $gutter 0;
     }
   }
 }
 
-.gem-c-task-list__title {
+.gem-c-step-nav__title {
   @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
   margin: 0;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(24px, 19px, 24px, 1.4, 1.4, false, bold);
   }
 }
 
-.gem-c-task-list__toggle-link {
+.gem-c-step-nav__toggle-link {
   @include _core-font-generator(14px, 14px, 14px, 1.2, 1.2, false);
   display: block;
   color: $link-colour;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(16px, 14px, 16px, 1.2, 1.2, false);
   }
 }
 
-.gem-c-task-list__panel {
+.gem-c-step-nav__panel {
   @include _core-font-generator(16px, 16px, 16px);
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include _core-font-generator(19px, 16px, 19px);
   }
 }
 
-// contents of the task list, such as paragraphs and links
+// contents of the steps, such as paragraphs and links
 
-.gem-c-task-list__paragraph,
-.gem-c-task-list__heading {
+.gem-c-step-nav__paragraph,
+.gem-c-step-nav__heading {
   padding-bottom: $gutter-half;
   margin: 0;
   font-size: inherit;
 
-  + .gem-c-task-list__links {
+  + .gem-c-step-nav__links {
     margin-top: -5px;
 
-    .gem-c-task-list--large & {
+    .gem-c-step-nav--large & {
       @include media(tablet) {
         margin-top: -$gutter-half;
       }
     }
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       padding-bottom: $gutter;
     }
   }
 }
 
-.gem-c-task-list__heading {
+.gem-c-step-nav__heading {
   font-weight: bold;
 }
 
-.gem-c-task-list__links {
+.gem-c-step-nav__links {
   padding: 0;
   padding-bottom: 10px;
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       padding-bottom: 20px;
     }
   }
 }
 
-.gem-c-task-list__links--required {
-  .gem-c-task-list__link-item {
+.gem-c-step-nav__links--required {
+  .gem-c-step-nav__link-item {
     font-weight: bold;
   }
 }
 
-.gem-c-task-list__links--choice {
+.gem-c-step-nav__links--choice {
   $links-margin: 20px;
 
   margin-left: $links-margin;
   list-style: disc;
 
-  .gem-c-task-list__link--active:before {
+  .gem-c-step-nav__link--active:before {
     left: -($gutter + $gutter-half) - $links-margin;
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
-      .gem-c-task-list__link--active:before {
+      .gem-c-step-nav__link--active:before {
         left: -($gutter * 2) - $links-margin;
       }
     }
   }
 }
 
-.gem-c-task-list__link {
+.gem-c-step-nav__link {
   margin-bottom: 10px;
 }
 
-.gem-c-task-list__link--active {
+.gem-c-step-nav__link--active {
   position: relative;
 
   &:before {
@@ -386,7 +369,7 @@ $top-border: solid 2px $grey-3;
     border-radius: 100px;
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       &:before {
         left: -($gutter * 2);
@@ -395,7 +378,7 @@ $top-border: solid 2px $grey-3;
     }
   }
 
-  .gem-c-task-list__link-item {
+  .gem-c-step-nav__link-item {
     color: $black;
 
     &:visited,
@@ -406,7 +389,7 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-task-list__link-item {
+.gem-c-step-nav__link-item {
   text-decoration: none;
 
   &:hover {
@@ -414,7 +397,7 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-task-list__context {
+.gem-c-step-nav__context {
   display: inline-block;
   font-weight: normal;
   color: $grey-1;
@@ -424,36 +407,38 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-task-list__help {
+.gem-c-step-nav__help {
   position: relative;
   padding: $gutter-half 0;
   border-top: $top-border;
 
   &:after {
-    @include task-list-vertical-line(dotted);
-    @include task-list-line-position;
+    @include step-nav-vertical-line(dotted);
+    @include step-nav-line-position;
     z-index: 3;
     top: 0;
+    left: -($gutter + $gutter-half);
     height: calc(100% + #{$gutter});
   }
 
-  .gem-c-task-list__step--optional & {
+  .gem-c-step-nav__step--optional & {
     &:after {
       display: none;
     }
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       &:after {
-        @include task-list-line-position-large;
+        @include step-nav-line-position-large;
+        left: -($gutter * 2);
         height: calc(100% + #{$gutter} + #{$gutter-half});
       }
     }
   }
 }
 
-.gem-c-task-list__help-link {
+.gem-c-step-nav__help-link {
   text-decoration: none;
   font-weight: bold;
 
@@ -462,29 +447,31 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-task-list__substep {
+.gem-c-step-nav__substep {
   position: relative;
   padding-top: $gutter-half;
   border-top: $top-border;
 
   &:after {
-    @include task-list-vertical-line;
-    @include task-list-line-position;
+    @include step-nav-vertical-line;
+    @include step-nav-line-position;
     z-index: 3;
     top: 0;
+    left: -($gutter + $gutter-half);
   }
 
-  .gem-c-task-list--large & {
+  .gem-c-step-nav--large & {
     @include media(tablet) {
       padding-top: $gutter;
 
       &:after {
-        @include task-list-line-position-large;
+        @include step-nav-line-position-large;
+        left: -($gutter * 2);
       }
     }
   }
 }
 
-.gem-c-task-list__substep--optional:after {
+.gem-c-step-nav__substep--optional:after {
   border-left-style: dotted;
 }