govuk_publishing_components 9.4.0 → 9.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 17673b0fafadbf9937d4a6df90dfe194a19c8a83a7a0a8c2dbe65be551402f64
-  data.tar.gz: 5146a665a20166d526cb1a6b4f78dc333800d0e421a847515e3f1574d7f43784
+  metadata.gz: ed9cfca2bbf3caf1dca0acaac01d1aed13fcf8e5037af8291e001fa40ee71fc8
+  data.tar.gz: 72dde8c41cf29d1d10a4639a38403badb66e2ad6d3e15151790add92506901ac
 SHA512:
-  metadata.gz: a95e67dc05e77c76c2d537330a94884fc5feced188d3e0fefac35c2e130fa6a239ec7235cc6374be4907e84bed6cf2e8006b2ace9fd4f4e06ba24ccfb0a58a09
-  data.tar.gz: f1ae0591b02e3a4ddca6ee7a45e47cb44c62322eabe5ca9292162cd73db19368fdc81d7ccf225628b9396512933261a127b1bb2af8bf47bb20c9e7c050e8dd18
+  metadata.gz: f558e44d99267415e7cd3cb42a00584bc45152d88bdf0f4772b15fea2f50d60ca96a8b967dab8589f54c7fe2c6b371ea02cdcc63b0b831cdc5199dce0c0aab9d
+  data.tar.gz: 1a500eaf9859acc22d0030e05e9082fbdc272e1a698e54029cf432520374139f7570a60d8df9ac347390d646bdc62f93403c0258fedc3c23b26014976f9c2e1b

data/app/assets/javascripts/govuk_publishing_components/admin_scripts.js

@@ -0,0 +1,4 @@
+//= require all.js
+
+// Initialise all GOVUKFrontend components
+window.GOVUKFrontend.initAll()

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

@@ -10,27 +10,25 @@
     var sessionStoreLink = 'govuk-step-nav-active-link';
     var activeLinkClass = 'gem-c-step-nav__list-item--active';
     var activeLinkHref = '#content';
+    var uniqueId;
 
     this.start = function ($element) {
 
-      $(window).unload(storeScrollPosition);
-
       // Indicate that js has worked
       $element.addClass('gem-c-step-nav--active');
 
       // Prevent FOUC, remove class hiding content
       $element.removeClass('js-hidden');
 
-      rememberShownStep = !!$element.filter('[data-remember]').length;
       stepNavSize = $element.hasClass('gem-c-step-nav--large') ? 'Big' : 'Small';
+      rememberShownStep = !!$element.filter('[data-remember]').length && stepNavSize == 'Big';
       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').length;
-
       var $showOrHideAllButton;
 
-      var uniqueId = $element.data('id') || false;
+      uniqueId = $element.data('id') || false;
       var stepNavTracker = new StepNavTracker(totalSteps, totalLinks, uniqueId);
 
       getTextForInsertedElements();
@@ -39,8 +37,7 @@
       addShowHideToggle();
       addAriaControlsAttrForShowHideAllButton();
 
-      hideAllSteps();
-      showLinkedStep();
+      showPreviouslyOpenedSteps();
       ensureOnlyOneActiveLink();
 
       bindToggleForSteps(stepNavTracker);
@@ -54,24 +51,6 @@
         actions.hideAllText = $element.attr('data-hide-all-text');
       }
 
-      // 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
-      // user to return to by forcibly scrolling them to that height, which becomes the height the browser will return
-      // them to.
-      // If we can't find an element to return them to, then reset the scroll to the top of the page. This handles
-      // the case where the user has expanded all steps, so they are not returned to a particular step, but
-      // still could have scrolled a long way down the page.
-      function storeScrollPosition() {
-        hideAllSteps();
-        var $step = getStepForAnchor();
-
-        document.body.scrollTop = $step && $step.length
-          ? $step.offset().top
-          : 0;
-      }
-
       function addShowHideAllButton() {
         $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">' + actions.showAllText + '</button></div>');
       }
@@ -83,6 +62,7 @@
           if (headerIsOpen($(this))) {
             linkText = actions.hideText;
           }
+
           if (!$(this).find('.js-toggle-link').length) {
             $(this).find('.js-step-title-button').append('<span class="gem-c-step-nav__toggle-link js-toggle-link" aria-hidden="true">' + linkText + '</span>');
           }
@@ -100,42 +80,46 @@
         $showOrHideAllButton.attr('aria-controls', ariaControlsValue);
       }
 
-      function hideAllSteps() {
-        setAllStepsShownState(false);
-      }
-
+      // called by show all/hide all, sets all steps accordingly
       function setAllStepsShownState(isShown) {
+        var data = [];
+
         $.each($steps, function () {
           var stepView = new StepView($(this));
-          stepView.preventHashUpdate();
           stepView.setIsShown(isShown);
+
+          if (isShown) {
+            data.push($(this).attr('id'));
+          }
         });
-      }
 
-      function showLinkedStep() {
-        var $step;
-        if (rememberShownStep) {
-          $step = getStepForAnchor();
+        if (isShown) {
+          saveToSessionStorage(uniqueId, JSON.stringify(data));
         } else {
-          $step = $steps.filter('[data-show]');
-        }
-
-        if ($step && $step.length) {
-          var stepView = new StepView($step);
-          stepView.show();
+          removeFromSessionStorage(uniqueId);
         }
       }
 
-      function getStepForAnchor() {
-        var anchor = getActiveAnchor();
+      // called on load, determines whether each step should be open or closed
+      function showPreviouslyOpenedSteps() {
+        var data = loadFromSessionStorage(uniqueId) || [];
 
-        return anchor.length
-          ? $element.find('#' + escapeSelector(anchor.substr(1)))
-          : null;
-      }
+        $.each($steps, function() {
+          var id = $(this).attr('id');
+          var stepView = new StepView($(this));
+
+          // show the step if it has been remembered or if it has the 'data-show' attribute
+          if ((rememberShownStep && data.indexOf(id) > -1) || typeof $(this).attr('data-show') !== "undefined") {
+            stepView.setIsShown(true);
+          } else {
+            stepView.setIsShown(false);
+          }
+        });
 
-      function getActiveAnchor() {
-        return GOVUK.getCurrentLocation().hash;
+        if (data.length > 0) {
+          $showOrHideAllButton.attr('aria-expanded', true);
+          setShowHideAllText();
+        }
       }
 
       function addButtonstoSteps() {
@@ -169,9 +153,30 @@
           toggleClick.track();
 
           setShowHideAllText();
+          rememberStepState($step);
         });
       }
 
+      // if the step is open, store its id in session store
+      // if the step is closed, remove its id from session store
+      function rememberStepState($step) {
+        if (rememberShownStep) {
+          var data = JSON.parse(loadFromSessionStorage(uniqueId)) || [];
+          var thisstep = $step.attr('id');
+          var shown = $step.hasClass('step-is-shown');
+
+          if (shown) {
+            data.push(thisstep);
+          } else {
+            var i = data.indexOf(thisstep);
+            if (i > -1) {
+              data.splice(i, 1);
+            }
+          }
+          saveToSessionStorage(uniqueId, JSON.stringify(data));
+        }
+      }
+
       // tracking click events on links in step content
       function bindComponentLinkClicks(stepNavTracker) {
         $element.find('.js-link').click(function (event) {
@@ -245,7 +250,7 @@
 
           if ($showOrHideAllButton.text() == actions.showAllText) {
             $showOrHideAllButton.text(actions.hideAllText);
-            $element.find('.js-toggle-link').text(actions.hideText)
+            $element.find('.js-toggle-link').text(actions.hideText);
             shouldshowAll = true;
 
             stepNavTracker.track('pageElementInteraction', 'stepNavAllShown', {
@@ -264,7 +269,6 @@
           setAllStepsShownState(shouldshowAll);
           $showOrHideAllButton.attr('aria-expanded', shouldshowAll);
           setShowHideAllText();
-          setHash(null);
 
           return false;
         });
@@ -279,19 +283,11 @@
           $showOrHideAllButton.text(actions.showAllText);
         }
       }
-
-      // Ideally we'd use jQuery.escapeSelector, but this is only available from v3
-      // See https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1d66b6f3c285a12f0ce/src/selector-native.js#L46
-      function escapeSelector(s) {
-        var cssMatcher = /([\x00-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;
-        return s.replace(cssMatcher, "\\$&");
-      }
     };
 
     function StepView($stepElement) {
       var $titleLink = $stepElement.find('.js-step-title-button');
       var $stepContent = $stepElement.find('.js-panel');
-      var shouldUpdateHash = rememberShownStep;
 
       this.title = $stepElement.find('.js-step-title-text').text().trim();
       this.element = $stepElement;
@@ -302,7 +298,6 @@
       this.setIsShown = setIsShown;
       this.isShown = isShown;
       this.isHidden = isHidden;
-      this.preventHashUpdate = preventHashUpdate;
       this.numberOfContentItems = numberOfContentItems;
 
       function show() {
@@ -322,10 +317,6 @@
         $stepContent.toggleClass('js-hidden', !isShown);
         $titleLink.attr("aria-expanded", isShown);
         $stepElement.find('.js-toggle-link').text(isShown ? actions.hideText : actions.showText);
-
-        if (shouldUpdateHash) {
-          updateHash($stepElement);
-        }
       }
 
       function isShown() {
@@ -336,37 +327,17 @@
         return !isShown();
       }
 
-      function preventHashUpdate() {
-        shouldUpdateHash = false;
-      }
-
       function numberOfContentItems() {
         return $stepContent.find('.js-link').length;
       }
     }
 
-    function updateHash($stepElement) {
-      var stepView = new StepView($stepElement);
-      var hash = stepView.isShown() && '#' + $stepElement.attr('id');
-      setHash(hash)
-    }
-
-    // Sets the hash for the page. If a falsy value is provided, the hash is cleared.
-    function setHash(hash) {
-      if (!GOVUK.support.history()) {
-        return;
-      }
-
-      var newLocation = hash || GOVUK.getCurrentLocation().pathname;
-      history.replaceState({}, '', newLocation);
-    }
-
     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()}
+        var tracking_options = {label: trackingLabel(), dimension28: stepView.numberOfContentItems().toString()};
         stepNavTracker.track('pageElementInteraction', trackingAction(), tracking_options);
       }
 
@@ -439,7 +410,7 @@
           options["dimension96"] = options["dimension96"] || uniqueId;
           GOVUK.analytics.trackEvent(category, action, options);
         }
-      }
+      };
     }
   };
 })(window.GOVUK.Modules);

data/app/assets/stylesheets/component_guide/application.scss

@@ -50,16 +50,6 @@ $border-color: #ccc;
   }
 }
 
-.component-warning {
-  border: 3px solid $orange;
-  margin: 0 0 $gutter;
-  padding: $gutter $gutter 0 $gutter;
-
-  .component-warning__title {
-    @include bold-24;
-  }
-}
-
 .component-doc-h2 {
   @include bold-27;
   margin: ($gutter * 1.5) 0 $gutter;

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

@@ -1,8 +1,8 @@
 // Include all of the GOV.UK Frontend styles. This includes global styles, fonts,
 // and individual components.
 $govuk-global-styles: true;
-$govuk-image-url-function: 'image-url';
-$govuk-font-url-function: 'font-url';
+$govuk-image-url-function: "image-url";
+$govuk-font-url-function: "font-url";
 
 @import "../../../node_modules/govuk-frontend/all";
 
@@ -11,3 +11,4 @@ $govuk-font-url-function: 'font-url';
 
 // Components that are only available inside the admin layout
 @import "govuk_publishing_components/components/layout-footer";
+@import "govuk_publishing_components/components/layout-header";

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

@@ -0,0 +1,30 @@
+// This component relies on styles from GOV.UK Frontend
+
+.gem-c-layout-header--integration .govuk-header__container,
+.gem-c-layout-header--staging .govuk-header__container {
+  border-bottom-color: govuk-colour("yellow");
+}
+
+.gem-c-layout-header--development .govuk-header__container {
+  border-bottom-color: govuk-colour("grey-1");
+}
+
+// Fix header component's reliance on markup whitespace
+// https://github.com/alphagov/govuk-frontend/pull/884/files
+//
+// Remove this fix after updating to GOV.UK Frontend 1.1.0
+.govuk-header__container {
+  @include govuk-clearfix;
+}
+
+.govuk-header__logo {
+  @include mq ($from: desktop) {
+    float: left;
+  }
+}
+
+.govuk-header__content {
+  @include mq ($from: desktop) {
+    float: left;
+  }
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -6,23 +6,9 @@
   margin-right: -$gutter-half;
 }
 
-.gem-c-pagination__list {
-  margin: 0;
-  padding: 0;
-
-  &:after {
-    content: "";
-    display: block;
-    clear: both;
-  }
-}
-
 .gem-c-pagination__item {
   @include core-16($line-height: (20 / 16));
   list-style: none;
-  text-align: right;
-  margin: 0;
-  padding: 0;
 }
 
 .gem-c-pagination__link {
@@ -30,6 +16,8 @@
   padding: $gutter-half;
   text-decoration: none;
 
+  &:hover,
+  &:active,
   &:visited {
     color: $link-colour;
   }
@@ -41,29 +29,16 @@
 }
 
 .gem-c-pagination__link-title {
-  @include core-27($line-height: (33.75 / 27));
   display: block;
 }
 
-.gem-c-pagination__item--previous {
-  text-align: left;
-
-  @include media(tablet) {
-    float: left;
-    width: 50%;
-  }
-}
-
-.gem-c-pagination__item--next {
-  text-align: right;
-
-  @include media(tablet) {
-    float: right;
-    width: 50%;
-  }
+.gem-c-pagination__link-text {
+  @include bold-19;
+  margin-left: $gutter / 3;
 }
 
 .gem-c-pagination__link-icon {
+  @include core-24($line-height: (33.75 / 27));
   display: inline-block;
   margin-bottom: 1px;
   height: .482em;
@@ -74,4 +49,9 @@
   display: inline-block;
   margin-top: 0.1em;
   text-decoration: underline;
+  margin-left: $gutter;
+
+  @include media(mobile) {
+    margin-left: $gutter-half + 9;
+  }
 }

data/app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss

@@ -0,0 +1 @@
+// This component relies on styles from GOV.UK Frontend

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

@@ -159,7 +159,6 @@ $top-border: solid 2px $grey-3;
   &:last-child:before,
   .gem-c-step-nav__circle--number,
   &:after,
-  .gem-c-step-nav__substep:after,
   .gem-c-step-nav__help:after {
     border-color: $black;
   }
@@ -280,8 +279,7 @@ $top-border: solid 2px $grey-3;
 
 // contents of the steps, such as paragraphs and links
 
-.gem-c-step-nav__paragraph,
-.gem-c-step-nav__heading {
+.gem-c-step-nav__paragraph {
   padding-bottom: $gutter-half;
   margin: 0;
   font-size: inherit;
@@ -303,10 +301,6 @@ $top-border: solid 2px $grey-3;
   }
 }
 
-.gem-c-step-nav__heading {
-  font-weight: bold;
-}
-
 .gem-c-step-nav__list {
   padding: 0;
   padding-bottom: 10px;
@@ -390,66 +384,3 @@ $top-border: solid 2px $grey-3;
     content: " \2013\00a0"; // dash followed by  
   }
 }
-
-.gem-c-step-nav__help {
-  position: relative;
-  padding: $gutter-half 0;
-  border-top: $top-border;
-
-  &:after {
-    @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-step-nav--large & {
-    @include media(tablet) {
-      &:after {
-        @include step-nav-line-position-large;
-        left: -($gutter * 2);
-        height: calc(100% + #{$gutter} + #{$gutter-half});
-      }
-    }
-  }
-}
-
-.gem-c-step-nav__help-link {
-  text-decoration: none;
-  font-weight: bold;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.gem-c-step-nav__substep {
-  position: relative;
-  padding-top: $gutter-half;
-  border-top: $top-border;
-
-  &:after {
-    @include step-nav-vertical-line;
-    @include step-nav-line-position;
-    z-index: 3;
-    top: 0;
-    left: -($gutter + $gutter-half);
-  }
-
-  .gem-c-step-nav--large & {
-    @include media(tablet) {
-      padding-top: $gutter;
-
-      &:after {
-        @include step-nav-line-position-large;
-        left: -($gutter * 2);
-      }
-    }
-  }
-}
-
-.gem-c-step-nav__substep--optional:after {
-  border-left-style: dotted;
-}