govuk_tech_docs 1.8.3 → 1.9.0.pre.gfe

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA256:
-  metadata.gz: ca98142d9889b9d327ef922e841aadb51dee44d44ba1e649219e7db4e1c8494d
-  data.tar.gz: 9ddc5532e23363a4916e5c0b90adf32e11aceb02ebdcacde6e2175476bc83116
+SHA1:
+  metadata.gz: b15917404d723a9e26821b9631a06b181a051265
+  data.tar.gz: ff5c490cfde2dbde881f4a6d8dc678de7e81e536
 SHA512:
-  metadata.gz: ab412d6c77c2e49f5d7d21474fb5e16fccaf20f338d64cf1eb29d32ad58af238f9889d44b39bc799ab7639b3b319233b880508beb2e394c58b8db701d58ee245
-  data.tar.gz: 305c7029a492835b53775ae79d4b6e43f66319b669adc1fb7375fd0aacdaa6d1643bc1a97f7260ef89a2e172f549cb6e101b9c0a0589f626b72412101f25518a
+  metadata.gz: 7a7e6cdda4975aa034ac877c90a0ab8efdd52efcf68d4126d2fd7310d24952095cd58ed70b0b9d5cb45c10510a0baea28e01dfaa272d78dc16b36eb9f849cb52
+  data.tar.gz: f551baaafad28fda969b023d430e6694d8a068513a7ebfe7a4f043baa776865945df144feef0c03873c95c2861eea9f8872d3e6544a7e9e4cc113c2fa9ea0a3c

data/.gitignore

@@ -32,3 +32,4 @@
 /example/.sass-cache
 
 Gemfile.lock
+node_modules

data/.nvmrc

@@ -0,0 +1 @@
+10.16.0

data/.travis.yml

@@ -1,4 +1,6 @@
 language: ruby
+before_script:
+  - npm install
 deploy:
   provider: rubygems
   gem: govuk_tech_docs

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+This release adds [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) (part of the [GOV.UK Design System](https://design-system.service.gov.uk)). Converts the "phase tag" (the alpha/beta thing next to the logo) to use a GOV.UK Frontend component. Also adds [Standard JS](https://standardjs.com) to the code base to lint all Javascript.
+
 ## 1.8.3
 
 Fixes bug where search results disappear when opening results in a new tab, making it difficult to open several results in a batch (PR #86).

data/README.md

@@ -15,6 +15,12 @@ Everybody who uses this project is encouraged to contribute.
 
 👉 [See CONTRIBUTING.md](CONTRIBUTING.md) for guidance on making changes.
 
+## GOV.UK frontend
+
+This gem uses [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), part of the [GOV.UK Design System](https://design-system.service.gov.uk/).
+
+We use `npm` to download the govuk-frontend package. To update to a new version, change the version in [package.json](blob/master/package.json) and run `npm update`.
+
 ## Developing locally
 
 There are 2 ways to develop with this gem. You can see your changes on either:

data/Rakefile

@@ -8,6 +8,7 @@ load 'jasmine/tasks/jasmine.rake'
 
 task :lint do
   sh "govuk-lint-ruby example lib spec Rakefile"
+  sh "npm run lint --silent"
 end
 
 task default: ['lint', 'spec', 'jasmine:ci']

data/example/source/index.html.md.erb

@@ -17,3 +17,5 @@ To change the title of the page or include additional files you'll need to edit
 If you want slightly more control, you can always use <strong>HTML</strong>.
 
 For more detail and troubleshooting, take a look at the `README.md` file in the root of this project.
+
+<%= warning_text "Look out! A warning!" %>

data/govuk_tech_docs.gemspec

@@ -14,9 +14,9 @@ Gem::Specification.new do |spec|
   spec.homepage      = "https://github.com/alphagov/tech-docs-gem"
   spec.license       = "MIT"
 
-  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
-    f.match(%r{^(test|spec|features)/})
-  end
+  files_in_git = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.files         = files_in_git + ["node_modules/govuk-frontend"]
+
   spec.bindir        = "exe"
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]

data/lib/assets/javascripts/_analytics.js

@@ -1,8 +1,8 @@
-(function($) {
-  function trackLinkClick(action, $element) {
-    var linkText = $.trim($element.text());
-    var linkURL = $element.attr('href');
-    var label = linkText + '|' + linkURL;
+(function ($) {
+  function trackLinkClick (action, $element) {
+    var linkText = $.trim($element.text())
+    var linkURL = $element.attr('href')
+    var label = linkText + '|' + linkURL
 
     ga(
       'send',
@@ -10,38 +10,38 @@
       'SM Technical Documentation', // Event Category
       action, // Event Action
       label // Event Label
-    );
+    )
   }
 
-  function linkTrackingEventHandler(action) {
-    return function() {
-      trackLinkClick(action, $(this));
-    };
-  };
+  function linkTrackingEventHandler (action) {
+    return function () {
+      trackLinkClick(action, $(this))
+    }
+  }
 
-  function catchBrokenFragmentLinks() {
-    var fragment = window.location.hash;
-    var $target = $(fragment);
-    if(!$target.get(0)) {
+  function catchBrokenFragmentLinks () {
+    var fragment = window.location.hash
+    var $target = $(fragment)
+    if (!$target.get(0)) {
       ga(
         'send',
         'event',
         'Broken fragment ID', // Event Category
         'pageview', // Event Action
         window.location.pathname + fragment // Event Label
-      );
+      )
     }
   }
 
-  $(document).on('ready', function() {
+  $(document).on('ready', function () {
     if (typeof ga === 'undefined') {
-      return;
+      return
     }
 
-    $('.technical-documentation a').on('click', linkTrackingEventHandler('inTextClick'));
-    $('.header a').on('click', linkTrackingEventHandler('topNavigationClick'));
-    $('.toc a').on('click', linkTrackingEventHandler('tableOfContentsNavigationClick'));
-    catchBrokenFragmentLinks();
+    $('.technical-documentation a').on('click', linkTrackingEventHandler('inTextClick'))
+    $('.header a').on('click', linkTrackingEventHandler('topNavigationClick'))
+    $('.toc a').on('click', linkTrackingEventHandler('tableOfContentsNavigationClick'))
+    catchBrokenFragmentLinks()
 
     // Borrowed from:
     // https://github.com/alphagov/govuk_frontend_toolkit/blob/master/javascripts/govuk/analytics/analytics.js
@@ -50,9 +50,9 @@
       var POSTCODE_PATTERN = /[A-PR-UWYZ][A-HJ-Z]?[0-9][0-9A-HJKMNPR-Y]?(?:[\s+]|%20)*[0-9][ABD-HJLNPQ-Z]{2}/gi
       var DATE_PATTERN = /\d{4}(-?)\d{2}(-?)\d{2}/g
       var stripped = string.replace(EMAIL_PATTERN, '[email]')
-      .replace(DATE_PATTERN, '[date]')
-      .replace(POSTCODE_PATTERN, '[postcode]');
+        .replace(DATE_PATTERN, '[date]')
+        .replace(POSTCODE_PATTERN, '[postcode]')
       return stripped
     }
-  });
-})(jQuery);
+  })
+})(jQuery)

data/lib/assets/javascripts/_govuk/modules.js

@@ -1,57 +1,56 @@
-(function($, root) {
-  "use strict";
-  root.GOVUK = root.GOVUK || {};
-  GOVUK.Modules = GOVUK.Modules || {};
+(function ($, root) {
+  'use strict'
+  root.GOVUK = root.GOVUK || {}
+  GOVUK.Modules = GOVUK.Modules || {}
 
   GOVUK.modules = {
-    find: function(container) {
-      var modules,
-          moduleSelector = '[data-module]',
-          container = container || $('body');
+    find: function (container) {
+      var modules
+      var moduleSelector = '[data-module]'
+      var component = container || $('body')
 
-      modules = container.find(moduleSelector);
+      modules = component.find(moduleSelector)
 
       // Container could be a module too
-      if (container.is(moduleSelector)) {
-        modules = modules.add(container);
+      if (component.is(moduleSelector)) {
+        modules = modules.add(component)
       }
 
-      return modules;
+      return modules
     },
 
-    start: function(container) {
-      var modules = this.find(container);
+    start: function (container) {
+      var modules = this.find(container)
 
       for (var i = 0, l = modules.length; i < l; i++) {
-        var module,
-            element = $(modules[i]),
-            type = camelCaseAndCapitalise(element.data('module')),
-            started = element.data('module-started');
-
-
-        if (typeof GOVUK.Modules[type] === "function" && !started) {
-          module = new GOVUK.Modules[type]();
-          module.start(element);
-          element.data('module-started', true);
+        var module
+        var element = $(modules[i])
+        var type = camelCaseAndCapitalise(element.data('module'))
+        var started = element.data('module-started')
+
+        if (typeof GOVUK.Modules[type] === 'function' && !started) {
+          module = new GOVUK.Modules[type]()
+          module.start(element)
+          element.data('module-started', true)
         }
       }
 
       // eg selectable-table to SelectableTable
-      function camelCaseAndCapitalise(string) {
-        return capitaliseFirstLetter(camelCase(string));
+      function camelCaseAndCapitalise (string) {
+        return capitaliseFirstLetter(camelCase(string))
       }
 
       // http://stackoverflow.com/questions/6660977/convert-hyphens-to-camel-case-camelcase
-      function camelCase(string) {
+      function camelCase (string) {
         return string.replace(/-([a-z])/g, function (g) {
-          return g[1].toUpperCase();
-        });
+          return g[1].toUpperCase()
+        })
       }
 
       // http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript
-      function capitaliseFirstLetter(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
+      function capitaliseFirstLetter (string) {
+        return string.charAt(0).toUpperCase() + string.slice(1)
       }
     }
   }
-})(jQuery, window);
+})(jQuery, window)

data/lib/assets/javascripts/_modules/anchored-headings.js

@@ -1,18 +1,18 @@
-(function($, Modules) {
-  'use strict';
+(function ($, Modules) {
+  'use strict'
 
-  Modules.AnchoredHeadings = function() {
-    this.start = function($element) {
-      var headings = $element.find('h1, h2, h3, h4, h5, h6');
-      headings.each(injectAnchor);
-    };
+  Modules.AnchoredHeadings = function () {
+    this.start = function ($element) {
+      var headings = $element.find('h1, h2, h3, h4, h5, h6')
+      headings.each(injectAnchor)
+    }
 
-    function injectAnchor() {
-      var $this = $(this);
-      $this.addClass('anchored-heading');
+    function injectAnchor () {
+      var $this = $(this)
+      $this.addClass('anchored-heading')
       $this.prepend(
         '<a href="#' + $this.attr('id') + '" class="anchored-heading__icon" aria-hidden="true"></a>'
-      );
-    };
-  };
-})(jQuery, window.GOVUK.Modules);
+      )
+    }
+  }
+})(jQuery, window.GOVUK.Modules)

data/lib/assets/javascripts/_modules/collapsible-navigation.js

@@ -1,95 +1,84 @@
-(function($, Modules) {
-  'use strict';
+(function ($, Modules) {
+  'use strict'
 
   Modules.CollapsibleNavigation = function () {
-
-    var $contentPane;
-    var $nav;
-    var $topLevelItems;
-    var $headings;
-    var $listings;
-
-    var $openLink;
-    var $closeLink;
+    var $contentPane
+    var $nav
+    var $topLevelItems
 
     this.start = function ($element) {
-      $contentPane = $('.app-pane__content');
-      $nav = $element;
-      $topLevelItems = $nav.find('> ul > li');
-      $headings = $topLevelItems.find('> a');
-      $listings = $topLevelItems.find('> ul');
+      $contentPane = $('.app-pane__content')
+      $nav = $element
+      $topLevelItems = $nav.find('> ul > li')
 
       // Attach collapsible heading functionality,on mobile and desktop
-      collapsibleHeadings();
-      openActiveHeading();
-      $contentPane.on('scroll', _.debounce(openActiveHeading, 100, { maxWait: 100 }));
-
-    };
+      collapsibleHeadings()
+      openActiveHeading()
+      $contentPane.on('scroll', _.debounce(openActiveHeading, 100, { maxWait: 100 }))
+    }
 
-    function collapsibleHeadings() {
+    function collapsibleHeadings () {
       for (var i = $topLevelItems.length - 1; i >= 0; i--) {
-        var $topLevelItem = $($topLevelItems[i]);
-        var $heading = $topLevelItem.find('> a');
-        var $listing = $topLevelItem.find('> ul');
-        var id = 'toc-' + $heading.text().toLowerCase().replace(' ', '-');
+        var $topLevelItem = $($topLevelItems[i])
+        var $heading = $topLevelItem.find('> a')
+        var $listing = $topLevelItem.find('> ul')
+        var id = 'toc-' + $heading.text().toLowerCase().replace(' ', '-')
         // Only add collapsible functionality if there are children.
-        if ($listing.length == 0) {
-          continue;
+        if ($listing.length === 0) {
+          continue
         }
-        $topLevelItem.addClass('collapsible');
+        $topLevelItem.addClass('collapsible')
         $listing.addClass('collapsible__body')
-        .attr('id', id)
-        .attr('aria-expanded', 'false');
+          .attr('id', id)
+          .attr('aria-expanded', 'false')
         $heading.addClass('collapsible__heading')
-        .after('<button class="collapsible__toggle" aria-controls="' + id +'"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
-        $topLevelItem.on('click', '.collapsible__toggle', function(e) {
-          e.preventDefault();
-          var $parent = $(this).parent();
-          toggleHeading($parent);
-        });
+          .after('<button class="collapsible__toggle" aria-controls="' + id + '"><span class="collapsible__toggle-label">Expand ' + $heading.text() + '</span><span class="collapsible__toggle-icon" aria-hidden="true"></button>')
+        $topLevelItem.on('click', '.collapsible__toggle', function (e) {
+          e.preventDefault()
+          var $parent = $(this).parent()
+          toggleHeading($parent)
+        })
       }
     }
 
-    function toggleHeading($topLevelItem) {
-      var isOpen = $topLevelItem.hasClass('is-open');
-      var $heading = $topLevelItem.find('> a');
-      var $body = $topLevelItem.find('.collapsible__body');
-      var $toggleLabel = $topLevelItem.find('.collapsible__toggle-label');
+    function toggleHeading ($topLevelItem) {
+      var isOpen = $topLevelItem.hasClass('is-open')
+      var $heading = $topLevelItem.find('> a')
+      var $body = $topLevelItem.find('.collapsible__body')
+      var $toggleLabel = $topLevelItem.find('.collapsible__toggle-label')
 
-      $topLevelItem.toggleClass('is-open', !isOpen);
-      $body.attr('aria-expanded', isOpen ? 'false' : 'true');
-      $toggleLabel.text(isOpen ? 'Expand ' + $heading.text() : 'Collapse ' + $heading.text());
+      $topLevelItem.toggleClass('is-open', !isOpen)
+      $body.attr('aria-expanded', isOpen ? 'false' : 'true')
+      $toggleLabel.text(isOpen ? 'Expand ' + $heading.text() : 'Collapse ' + $heading.text())
     }
 
-    function openActiveHeading() {
-      var $activeElement;
-      var currentPath = window.location.pathname;
-      var isActiveTrail = '[href*="' + currentPath + '"]';
+    function openActiveHeading () {
+      var $activeElement
+      var currentPath = window.location.pathname
+      var isActiveTrail = '[href*="' + currentPath + '"]'
       // Add an exception for the root page, as every href includes /
-      if(currentPath == '/') {
+      if (currentPath === '/') {
         isActiveTrail = '[href="' + currentPath + window.location.hash + '"]'
       }
       for (var i = $topLevelItems.length - 1; i >= 0; i--) {
-        var $element = $($topLevelItems[i]);
-        var $heading = $element.find('> a');
+        var $element = $($topLevelItems[i])
+        var $heading = $element.find('> a')
         // Check if this item href matches
-        if($heading.is(isActiveTrail)) {
-          $activeElement = $element;
-          break;
+        if ($heading.is(isActiveTrail)) {
+          $activeElement = $element
+          break
         }
         // Otherwise check the children
-        var $children = $element.find('li > a');
-        var $matchingChildren = $children.filter(isActiveTrail);
+        var $children = $element.find('li > a')
+        var $matchingChildren = $children.filter(isActiveTrail)
         if ($matchingChildren.length) {
-          $activeElement = $element;
-          break;
+          $activeElement = $element
+          break
         }
       }
-      if($activeElement && !$activeElement.hasClass('is-open')) {
-        toggleHeading($activeElement);
+      if ($activeElement && !$activeElement.hasClass('is-open')) {
+        toggleHeading($activeElement)
       }
     }
-
-
-  };
-})(jQuery, window.GOVUK.Modules);
+  }
+})(jQuery, window.GOVUK.Modules)

data/lib/assets/javascripts/_modules/in-page-navigation.js

@@ -1,132 +1,132 @@
-(function($, Modules) {
-  'use strict';
+(function ($, Modules) {
+  'use strict'
 
-  Modules.InPageNavigation = function InPageNavigation() {
-    var $tocPane;
-    var $contentPane;
-    var $tocItems;
-    var $targets;
+  Modules.InPageNavigation = function InPageNavigation () {
+    var $tocPane
+    var $contentPane
+    var $tocItems
+    var $targets
 
-    this.start = function start($element) {
-      $tocPane = $element.find('.app-pane__toc');
-      $contentPane = $element.find('.app-pane__content');
-      $tocItems = $('.js-toc-list').find('a');
-      $targets = $contentPane.find('[id]');
+    this.start = function start ($element) {
+      $tocPane = $element.find('.app-pane__toc')
+      $contentPane = $element.find('.app-pane__content')
+      $tocItems = $('.js-toc-list').find('a')
+      $targets = $contentPane.find('[id]')
 
-      $contentPane.on('scroll', _.debounce(handleScrollEvent, 100, { maxWait: 100 }));
+      $contentPane.on('scroll', _.debounce(handleScrollEvent, 100, { maxWait: 100 }))
 
       if (Modernizr.history) {
         // Popstate is triggered when using the back button to navigate 'within'
         // the page, i.e. changing the anchor part of the URL.
         $(window).on('popstate', function (event) {
-          restoreScrollPosition(event.originalEvent.state);
-        });
+          restoreScrollPosition(event.originalEvent.state)
+        })
 
         if (history.state && history.state.scrollTop) {
           // Restore existing state when e.g. using the back button to return to
           // this page
-          restoreScrollPosition(history.state);
+          restoreScrollPosition(history.state)
         } else {
           // Store the initial position so that we can restore it even if we
           // never scroll.
-          handleInitialLoadEvent();
+          handleInitialLoadEvent()
         }
       }
-    };
+    }
 
-    function restoreScrollPosition(state) {
+    function restoreScrollPosition (state) {
       if (state && typeof state.scrollTop !== 'undefined') {
-        $contentPane.scrollTop(state.scrollTop);
+        $contentPane.scrollTop(state.scrollTop)
       }
     }
 
-    function handleInitialLoadEvent() {
-      var fragment = fragmentForTargetElement();
+    function handleInitialLoadEvent () {
+      var fragment = fragmentForTargetElement()
 
       if (!fragment) {
-        fragment = fragmentForFirstElementInView();
+        fragment = fragmentForFirstElementInView()
       }
 
-      handleChangeInActiveItem(fragment);
+      handleChangeInActiveItem(fragment)
     }
 
-    function handleScrollEvent() {
-      handleChangeInActiveItem(fragmentForFirstElementInView());
+    function handleScrollEvent () {
+      handleChangeInActiveItem(fragmentForFirstElementInView())
     }
 
-    function handleChangeInActiveItem(fragment) {
-      storeCurrentPositionInHistoryApi(fragment);
-      highlightActiveItemInToc(fragment);
+    function handleChangeInActiveItem (fragment) {
+      storeCurrentPositionInHistoryApi(fragment)
+      highlightActiveItemInToc(fragment)
     }
 
-    function storeCurrentPositionInHistoryApi(fragment) {
+    function storeCurrentPositionInHistoryApi (fragment) {
       if (Modernizr.history && fragment) {
         history.replaceState(
           { scrollTop: $contentPane.scrollTop() },
-          "",
+          '',
           fragment
-        );
+        )
       }
     }
 
-    function highlightActiveItemInToc(fragment) {
+    function highlightActiveItemInToc (fragment) {
       // Navigation items for single page navigation don't necessarily include the path name, but
       // navigation items for multipage navigation items do include it. This checks for either case.
       var $activeTocItem = $tocItems.filter(
         '[href="' + window.location.pathname + fragment + '"],[href="' + fragment + '"]'
-      );
+      )
       // Navigation items with children don't contain fragments in their url
       // Check to see if any nav items contain just the path name.
-      if(!$activeTocItem.get(0)) {
-        $activeTocItem = $tocItems.filter('[href="' + window.location.pathname + '"]');
+      if (!$activeTocItem.get(0)) {
+        $activeTocItem = $tocItems.filter('[href="' + window.location.pathname + '"]')
       }
       if ($activeTocItem.get(0)) {
-        $tocItems.removeClass('toc-link--in-view');
-        $activeTocItem.addClass('toc-link--in-view');
-        scrollTocToActiveItem($activeTocItem);
+        $tocItems.removeClass('toc-link--in-view')
+        $activeTocItem.addClass('toc-link--in-view')
+        scrollTocToActiveItem($activeTocItem)
       }
     }
 
-    function scrollTocToActiveItem($activeTocItem) {
-      var paneHeight = $tocPane.height();
-      var linkTop = $activeTocItem.position().top;
-      var linkBottom = linkTop + $activeTocItem.outerHeight();
+    function scrollTocToActiveItem ($activeTocItem) {
+      var paneHeight = $tocPane.height()
+      var linkTop = $activeTocItem.position().top
+      var linkBottom = linkTop + $activeTocItem.outerHeight()
 
-      var offset = null;
+      var offset = null
 
       if (linkTop < 0) {
-        offset = linkTop;
+        offset = linkTop
       } else if (linkBottom >= paneHeight) {
-        offset = -(paneHeight - linkBottom);
+        offset = -(paneHeight - linkBottom)
       } else {
-        return;
+        return
       }
 
-      var newScrollTop = $tocPane.scrollTop() + offset;
+      var newScrollTop = $tocPane.scrollTop() + offset
 
-      $tocPane.scrollTop(newScrollTop);
+      $tocPane.scrollTop(newScrollTop)
     }
 
-    function fragmentForTargetElement() {
-      return window.location.hash;
+    function fragmentForTargetElement () {
+      return window.location.hash
     }
 
-    function fragmentForFirstElementInView() {
-      var result = null;
+    function fragmentForFirstElementInView () {
+      var result = null
 
-      $($targets.get().reverse()).each(function checkIfInView(index) {
+      $($targets.get().reverse()).each(function checkIfInView (index) {
         if (result) {
-          return;
+          return
         }
 
-        var $this = $(this);
+        var $this = $(this)
 
         if (Math.floor($this.position().top) <= 0) {
-          result = $this;
+          result = $this
         }
-      });
+      })
 
-      return result ? '#' + result.attr('id') : false;
+      return result ? '#' + result.attr('id') : false
     }
-  };
-})(jQuery, window.GOVUK.Modules);
+  }
+})(jQuery, window.GOVUK.Modules)