govuk_publishing_components 9.5.3 → 9.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 51687893e007b2b8670406ccda7045a8afe684cc91997683752b01b1ed830a96
-  data.tar.gz: ebce78f938ed96d8553bef568dab8f8b7bf00c366e85458ffb1178b330ba188d
+  metadata.gz: ee1bc2d4e6fb993c27eba2510c283cda497987294f93fc21f3a30e94f2deecf8
+  data.tar.gz: 9f9cc5eb7519cd81ba336464e8a9f6f3b7dc3fb0c254d5d12d59e667201ed6d8
 SHA512:
-  metadata.gz: ed685a583720028754d1428b2a4c68f5e5baf6be94fb705c0f188b9e537e59bd8997694c1bc5302da868567076ffc0d30892d6f9e0fb07989fad1169efbd4ac7
-  data.tar.gz: e32489b5857c458ba38d7d595a43c049aa5885e2529c1021e992e732afb9cfec658a5296596af14f0c872ac7e84b134155c72143b786d38110db9f08b0302255
+  metadata.gz: f7fd7e8f9617b31d253a820723d312b67cbd7d2c770c90f8e05c205463505e1155cf3a990c8e292e20d0fd58cdb1533506f49f31b0a50f4a0c68c51f612ba764
+  data.tar.gz: 14141157d36c0985c423074c3e2d095bb1ca6c7d0c066b45417d201cc8e61a0f6ba5853ca44d6d60e486463b8a94e3420c85b8530a709c4e9e58525abd0afe8b

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

@@ -9,6 +9,7 @@
     var stepNavSize;
     var sessionStoreLink = 'govuk-step-nav-active-link';
     var activeLinkClass = 'gem-c-step-nav__list-item--active';
+    var activeStepClass = 'gem-c-step-nav__step--active';
     var activeLinkHref = '#content';
     var uniqueId;
 
@@ -29,6 +30,11 @@
       var $showOrHideAllButton;
 
       uniqueId = $element.data('id') || false;
+
+      if (uniqueId) {
+        sessionStoreLink = sessionStoreLink + "_" + uniqueId;
+      }
+
       var stepNavTracker = new StepNavTracker(totalSteps, totalLinks, uniqueId);
 
       getTextForInsertedElements();
@@ -37,8 +43,8 @@
       addShowHideToggle();
       addAriaControlsAttrForShowHideAllButton();
 
-      showPreviouslyOpenedSteps();
       ensureOnlyOneActiveLink();
+      showPreviouslyOpenedSteps();
 
       bindToggleForSteps(stepNavTracker);
       bindToggleShowHideAllButton(stepNavTracker);
@@ -190,11 +196,12 @@
           var thisLinkHref = $(this).attr('href');
 
           if ($(this).attr('rel') !== 'external') {
-            saveToSessionStorage(sessionStoreLink, $(this).data('position'));
+            saveToSessionStorage(sessionStoreLink, $(this).attr('data-position'));
           }
 
           if (thisLinkHref == activeLinkHref) {
             setOnlyThisLinkActive($(this));
+            setActiveStepClass();
           }
         });
       }
@@ -216,6 +223,11 @@
         clicked.parent().addClass(activeLinkClass);
       }
 
+      // if a link occurs more than once in a step nav, the backend doesn't know which one to highlight
+      // so it gives all those links the 'active' attribute and highlights the last step containing that link
+      // if the user clicked on one of those links previously, it will be in the session store
+      // this code ensures only that link and its corresponding step have the highlighting
+      // otherwise it accepts what the backend has already passed to the component
       function ensureOnlyOneActiveLink() {
         var $activeLinks = $element.find('.js-list-item.' + activeLinkClass);
 
@@ -226,10 +238,15 @@
         var lastClicked = loadFromSessionStorage(sessionStoreLink);
 
         if (lastClicked) {
+          // it's possible for the saved link position value to not match any of the currently duplicate highlighted links
+          // so check this otherwise it'll take the highlighting off all of them
+          if (!$element.find('.js-link[data-position="' + lastClicked + '"]').parent().hasClass(activeLinkClass)) {
+            lastClicked = $element.find('.' + activeLinkClass).first().find('.js-link').attr('data-position');
+          }
           removeActiveStateFromAllButCurrent($activeLinks, lastClicked);
-          removeFromSessionStorage(sessionStoreLink);
+          setActiveStepClass();
         } else {
-          var activeLinkInActiveStep = $element.find('.gem-c-step-nav__step--active').find('.' + activeLinkClass).first();
+          var activeLinkInActiveStep = $element.find('.' + activeStepClass).find('.' + activeLinkClass).first();
 
           if (activeLinkInActiveStep.length) {
             $activeLinks.removeClass(activeLinkClass);
@@ -240,14 +257,19 @@
         }
       }
 
-      function removeActiveStateFromAllButCurrent($links, current) {
-        $links.each(function() {
-          if ($(this).find('.js-link').data('position').toString() !== current.toString()) {
+      function removeActiveStateFromAllButCurrent($activeLinks, current) {
+        $activeLinks.each(function() {
+          if ($(this).find('.js-link').attr('data-position').toString() !== current.toString()) {
             $(this).removeClass(activeLinkClass);
           }
         });
       }
 
+      function setActiveStepClass() {
+        $element.find('.' + activeStepClass).removeClass(activeStepClass).removeAttr('data-show');
+        $element.find('.' + activeLinkClass).closest('.gem-c-step-nav__step').addClass(activeStepClass).attr('data-show', "");
+      }
+
       function bindToggleShowHideAllButton(stepNavTracker) {
         $showOrHideAllButton = $element.find('.js-step-controls-button');
         $showOrHideAllButton.on('click', function () {

data/app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss

@@ -19,7 +19,7 @@
   }
 
   @include media-down(mobile) {
-    &.gem-c-breadcrumbs--collapse-on-mobile .gem-c-breadcrumbs--item {
+    &.gem-c-breadcrumbs--collapse-on-mobile .gem-c-breadcrumbs__item {
       display: none;
 
       &.gem-c-breadcrumbs--parent {

data/app/assets/stylesheets/govuk_publishing_components/components/_select.scss

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

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

@@ -21,7 +21,7 @@
       css_class = invert_class.concat(crumb[:is_current_page] ? ' gem-c-breadcrumbs--current ' : '')
     %>
 
-    <li class='gem-c-breadcrumbs--item <%= "gem-c-breadcrumbs--parent" if crumb[:is_page_parent] %>'>
+    <li class='gem-c-breadcrumbs__item <%= "gem-c-breadcrumbs--parent" if crumb[:is_page_parent] %>'>
       <% if is_link %>
         <%= link_to(
           crumb[:title],

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

@@ -0,0 +1,17 @@
+<%
+  options ||= []
+  id ||= false
+  label ||= false
+%>
+<% if options.any? && id && label %>
+  <div class="govuk-form-group gem-c-select">
+    <label class="govuk-label" for="<%= id %>">
+      <%= label %>
+    </label>
+    <select class="govuk-select" id="<%= id %>" name="<%= id %>">
+      <% options.each do |option| %>
+        <option value="<%= option[:value] %>" <% if option[:selected] %>selected<% end %>><%= option[:text] %></option>
+      <% end %>
+    </select>
+  </div>
+<% end %>

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

@@ -0,0 +1,35 @@
+name: Select (experimental)
+description: A dropdown select
+part_of_admin_layout: true
+govuk_frontend_components:
+  - select
+accessibility_criteria: |
+The component must:
+  - accept focus
+  - be focusable with a keyboard
+  - be usable with a keyboard
+  - indicate when it has focus
+examples:
+  default:
+    data:
+      id: 'dropdown1'
+      label: 'My Dropdown'
+      options:
+      - text: 'Option one'
+        value: 'option1'
+      - text: 'Option two'
+        value: 'option2'
+      - text: 'Option three'
+        value: 'option3'
+  with_preselect:
+    data:
+      id: 'dropdown2'
+      label: 'My Dropdown'
+      options:
+      - text: 'Option one'
+        value: 'option1'
+      - text: 'Option two'
+        value: 'option2'
+        selected: true
+      - text: 'Option three'
+        value: 'option3'

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

@@ -340,18 +340,19 @@ examples:
       ]
   solve_the_double_dot_problem:
     description: |
-      If a page is in a step by step navigation more than once and a user is viewing that URL, both links to it will be highlighted as the site has no way to know which link the user is currently viewing (highlighted links should only occur when the step by step navigation is in the sidebar).
+      If a page is in a step by step navigation more than once and a user is viewing that URL, both links to it will be highlighted as the backend has no way to know which link the user is currently viewing (links should only be highlighted when the step by step navigation is in the sidebar).
 
-      JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight when the new page loads. This session storage data is immediately deleted after it is read on page load, mainly to prevent problems with highlighting if the user were to move between different step by step navigations.
+      JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link (and parent step) to highlight and expand when the new page loads. Note that it uses the tracking_id attribute to uniquely identify the current step nav. If tracking_id is not set this may result in other step navs having the wrong link highlighted.
 
       If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) the first active link in the first active step will be highlighted. If there is no active step, the first active link will be highlighted (but there should always be an active step).
 
       The current page in the step by step navigation is an anchor link to the top of the page. If there are more than one of these and the user clicks one that is not currently highlighted, that one will be highlighted.
 
-      The example below will show all links highlighted if JS is disabled, in the real world no more than two or three links are likely to be highlighted at once.
+      The example below will show all non-external links highlighted if JS is disabled. In the real world no more than two or three links are likely to be highlighted at once.
     data:
       highlight_step: 2
       show_step: 2
+      tracking_id: "example-id"
       steps: [
         {
           title: "Not the active step",

data/lib/govuk_publishing_components/presenters/page_with_step_by_step_navigation.rb

@@ -83,7 +83,6 @@ module GovukPublishingComponents
                 link[:active] = true
                 step_nav_content[:show_step] = step_index + 1
                 step_nav_content[:highlight_step] = step_index + 1
-                return step_nav_content
               end
             end
           end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '9.5.3'.freeze
+  VERSION = '9.6.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 9.5.3
+  version: 9.6.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-07-17 00:00:00.000000000 Z
+date: 2018-07-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -364,6 +364,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_radio.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_related-navigation.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_search.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_select.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_skip-link.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-header.scss
@@ -461,6 +462,7 @@ files:
 - app/views/govuk_publishing_components/components/_radio.html.erb
 - app/views/govuk_publishing_components/components/_related_navigation.html.erb
 - app/views/govuk_publishing_components/components/_search.html.erb
+- app/views/govuk_publishing_components/components/_select.html.erb
 - app/views/govuk_publishing_components/components/_share_links.html.erb
 - app/views/govuk_publishing_components/components/_skip_link.html.erb
 - app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb
@@ -504,6 +506,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/radio.yml
 - app/views/govuk_publishing_components/components/docs/related_navigation.yml
 - app/views/govuk_publishing_components/components/docs/search.yml
+- app/views/govuk_publishing_components/components/docs/select.yml
 - app/views/govuk_publishing_components/components/docs/share_links.yml
 - app/views/govuk_publishing_components/components/docs/skip_link.yml
 - app/views/govuk_publishing_components/components/docs/step_by_step_nav.yml