govuk_tech_docs 1.9.0.pre.rc2 → 2.0.0.pre.test.pre.release.pre.524

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 6043a675efcea70664f45249f57ad63449cf23e0
-  data.tar.gz: 970f900a0a08eaca4b3c1438144bf279b1e24f90
+SHA256:
+  metadata.gz: dd5458318d29da0043ef81ea589997e758b06657df364ba8972f3aecef0c6827
+  data.tar.gz: 30a9902a8c2fbf4f41c92092f9c3a1db752454fb562ae734011c927fd213b630
 SHA512:
-  metadata.gz: 4e1129e161f411a9a6d98739ce9dc914892db36d9f8dc9bcd194360267d39f242b53e75081a1f609719a9f323ebfb93ff95cc79eeda7afc948d745e15d3309ec
-  data.tar.gz: 3d4e246b84a49d4a98bb8680a39b177c1bfe97f1d9cdf90a546f71d9222625bffa28bdbfdbd14fc75d1c7652bd5dcf1e571eb4b6003435bc1475d50a450e1b65
+  metadata.gz: 3bd5199f84615e0b0d0812f39a1a5b98bdb4fab604ccd0dc3d73cead385b0a17740df57f5523229e9d55baf51c22f22db5f09b87de8889d0ab9694515c516194
+  data.tar.gz: d27ff7ad83e36c34015b2ea2f9a7ed6546e592334c7c8687c8236fb5047811940d6065e156fb2d51276d4890b5922423e588be555b28a605c1d96a3b86577cdd

data/.ruby-version

@@ -1 +1 @@
-2.4.2
+2.6.3

data/.travis.yml

@@ -1,4 +1,7 @@
 language: ruby
+before_install:
+  - gem update --system
+  - gem install bundler
 before_script:
   - npm install
 deploy:
@@ -8,4 +11,4 @@ deploy:
     secure: CY9C+IUqUeYWqXSyQgfF5swdYw1rRtYi0ai1xasD3R5rwARF6Qr8CnmdSBjfT2S84fXQiMza45Jto4w1jiy3o4wpxuKN68xEB7J4W/YEpFcZectzsmXwcMJH+DXh720KFIX2xiHaG5N0nWzAoV+6zgw6Vq24IXYE33wO6BgCmTe3vtO+Apg0+wDRAOuJ4T5XfSyWUvG8JqLRb81t+WbrsOLcUgZn24DHvs+lrjXTDDTzrgwTuKeaKd+h+mfxlHZD+Xxbcy624qop5ICwOOP0koRXCdVmTOSZ4mNI10+loCyA1B5Tryj/2wweyc8CanqRMniF8p/BxLV1sAwihpCmCpuWUyxq2pTPSgjF1A1f5hXwkAT/HiaXLzXKyO1REnbtLHYvre10EIYIII4nDAtCZP0YLYvPoKQUrAydeWiQ4jL+cyEeN/8Dznx2OPrhcwxazsElMm0yOZDNXERNIf3IVnQshxMFxQfGW3NTG8XR4l5PHAI2XqKy/O/VGbiRcNV3EYVG5w/KumB698BGDGV2QPOlh3JOEkebXTGDsMJj/gzZik2BtvAqYatwgx7oiYzvhEPz0m9o/DTS7Gf/5Hkj3iV2mpcNtRMc0HKmS7bwkv8Cl6dWECt7PWQ8Kz5ttrCKRmTCJDgra2xLFuV8kbBISPkKKv87KCXzxthM8ps94WE=
   on:
     repo: alphagov/tech-docs-gem
-    branch: master
+    branch: ensure-govuk-frontend-installed-via-npm

data/CHANGELOG.md

@@ -1,8 +1,13 @@
 # Changelog
 
-## Unreleased
+## 2.0.0
 
-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.
+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)) and remove the legacy framework [GOV.UK Frontend Toolkit](https://github.com/alphagov/govuk_frontend_toolkit). This required a lot of markup being ported over
+to use the design system’s markup and all custom CSS to use new variables and mixins.
+
+Custom components such as the table of contents (toc) were updated to use the WCAG 2.1 AA compliant focus states too.
+
+It was also necessary to upgrade the Ruby version to `2.6.3` so that we could bump the gem versions of `govuk_lint`, `rubocop` and `sprockets`. The new version of sprockets allowed us to pull through assets from `node_modules/govuk-frontend` without having to manually include them as was the case before with govuk_frontend_toolkit.
 
 ## 1.8.3
 

data/example/.ruby-version

@@ -1 +1 @@
-2.4.2
+2.6.3

data/govuk_tech_docs.gemspec

@@ -3,9 +3,15 @@ lib = File.expand_path("../lib", __FILE__)
 $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
 require "govuk_tech_docs/version"
 
+`npm install`
+abort 'npm install failed' unless $?.success?
+
+unless File.exist?('node_modules/govuk-frontend/govuk/all.scss')
+  abort 'govuk-frontend npm package not installed'
+end
+
 Gem::Specification.new do |spec|
   spec.name          = "govuk_tech_docs"
-  spec.version       = GovukTechDocs::VERSION
   spec.authors       = ["Government Digital Service"]
   spec.email         = ["govuk-dev@digital.cabinet-office.gov.uk"]
 
@@ -16,8 +22,8 @@ Gem::Specification.new do |spec|
 
   files_in_git = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
 
-  # Include the CSS and JS from GOV.UK Frontend library
-  govuk_frontend_assets = Dir["node_modules/govuk-frontend/**/*.{scss,js}"]
+  # Include assets from GOV.UK Frontend library in the distributed gem
+  govuk_frontend_assets = Dir["node_modules/govuk-frontend/**/*.{scss,js,woff,woff2}"]
 
   spec.files         = files_in_git + govuk_frontend_assets
 
@@ -32,6 +38,8 @@ Gem::Specification.new do |spec|
   spec.add_dependency "middleman-compass", ">= 4.0.0"
   spec.add_dependency "middleman-livereload"
   spec.add_dependency "middleman-sprockets", "~> 4.0.0"
+  spec.add_dependency "sprockets", "4.0.0.beta10"
+  spec.add_dependency "sass"
   spec.add_dependency "middleman-syntax", "~> 3.0.0"
   spec.add_dependency "middleman-search-gds"
   spec.add_dependency "nokogiri"
@@ -43,8 +51,19 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "bundler", "~> 2.0.1"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "capybara", "~> 2.18.0"
-  spec.add_development_dependency "govuk-lint", "~> 3.7.0"
+  spec.add_development_dependency "govuk-lint", "~> 3.11.5"
   spec.add_development_dependency "jasmine", "~> 3.1.0"
   spec.add_development_dependency "rspec", "~> 3.7.0"
   spec.add_development_dependency "byebug"
+
+  if ENV.key?('TRAVIS')
+    test_version_prefix = GovukTechDocs::VERSION
+    test_version_fragment = 'test-release'
+    test_version_suffix = ENV.fetch('TRAVIS_BUILD_NUMBER')
+    spec.version = [
+      test_version_prefix, test_version_fragment, test_version_suffix
+    ].join('-')
+  else
+    spec.version = GovukTechDocs::VERSION
+  end
 end

data/lib/assets/javascripts/govuk_tech_docs.js

@@ -4,7 +4,9 @@
 //= require _vendor/lodash
 //= require _analytics
 //= require _start-modules
+//= require govuk/all.js
 
 $(function () {
   $('.fixedsticky').fixedsticky()
+  GOVUKFrontend.initAll()
 })

data/lib/assets/stylesheets/_core.scss

@@ -3,65 +3,17 @@
 $tablet-breakpoint: 768px !default;
 $desktop-breakpoint: 992px !default;
 
-@import "utilities/fonts";
 @import "utilities/printable";
 
-@import "govuk_frontend_toolkit/colours";
-@import "govuk_frontend_toolkit/conditionals";
-@import "govuk_frontend_toolkit/css3";
-@import "govuk_frontend_toolkit/device-pixels";
-@import "govuk_frontend_toolkit/font_stack";
-@import "govuk_frontend_toolkit/grid_layout";
-@import "govuk_frontend_toolkit/helpers";
-@import "govuk_frontend_toolkit/measurements";
-@import "govuk_frontend_toolkit/typography";
-
 @import "palette/syntax-highlighting";
 @import "syntax-highlighting";
 
 @import "modules/anchored-heading";
 @import "modules/app-pane";
 @import "modules/footer";
-@import "modules/govuk-logo";
-@import "modules/header";
 @import "modules/page-review";
-@import "modules/skip-link";
 @import "modules/search";
 @import "modules/contribution-banner";
 @import "modules/technical-documentation";
 @import "modules/toc";
 @import "modules/collapsible";
-
-@import "accessibility";
-
-html, body {
-  color: $text-colour;
-  background-color: $page-colour;
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  @include core-19;
-}
-
-// basic styles for HTML5 and other elements
-html, body, div, h1, h2, h3, h4, h5, h6, article, aside, footer, header, hgroup, nav, section {
-  margin: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-a:link {
-  color: $link-colour;
-}
-
-a:visited {
-  color: $link-visited-colour;
-}
-
-a:hover {
-  color: $link-hover-colour;
-}
-
-a:active {
-  color: $link-active-colour;
-}

data/lib/assets/stylesheets/_govuk_tech_docs.scss

@@ -1,10 +1,6 @@
-@import "core";
-@import "vendor/fixedsticky";
-
-$govuk-image-url-function: "image-url";
-$govuk-font-url-function: "font-url";
+$govuk-assets-path: "/assets/govuk/assets/";
 
-$govuk-compatibility-govukfrontendtoolkit: true;
-$govuk-compatibility-govuktemplate: true;
+@import "govuk/all";
 
-@import "../../../node_modules/govuk-frontend/govuk/all";
+@import "core";
+@import "vendor/fixedsticky";

data/lib/assets/stylesheets/modules/_anchored-heading.scss

@@ -18,16 +18,16 @@
     text-decoration: none;
     text-indent: -9999em;
 
-    background-image: file-url('anchored-heading-icon.png');
+    background-image: url('/images/anchored-heading-icon.png');
     background-repeat: no-repeat;
     background-position: center center;
 
-    @include device-pixel-ratio {
-      background-image: file-url('anchored-heading-icon-2x.png');
+    @include govuk-device-pixel-ratio {
+      background-image: url('/images/anchored-heading-icon-2x.png');
       background-size: $icon-width $icon-height;
     }
 
-    @include media(tablet) {
+    @include govuk-media-query(tablet) {
       display: block;
     }
 
@@ -39,13 +39,13 @@
   }
 
   &:hover &__icon {
-    @include media(tablet) {
+    @include govuk-media-query(tablet) {
       opacity: 1;
     }
   }
 
   &__icon:focus {
-    @include media(tablet) {
+    @include govuk-media-query(tablet) {
       opacity: 1;
       outline-width: 1px;
       padding: 0 ($icon-spacing - 1);

data/lib/assets/stylesheets/modules/_app-pane.scss

@@ -1,64 +1,63 @@
-@include screen {
-  @include media(tablet) {
-    $toc-width: 330px;
+@include govuk-media-query(tablet, $media-type: screen) {
+  $toc-width: 330px;
 
-    .flexbox, .flexboxtweener {
+  .flexbox, .flexboxtweener {
 
-      body {
-        overflow: hidden;
-      }
+    body {
+      overflow: hidden;
+    }
 
-      .app-pane {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        height: 100vh;
-      }
+    .app-pane {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      height: 100vh;
+    }
 
-      .app-pane__header {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 auto;
+    .app-pane__header {
+      display: flex;
+      flex-direction: column;
+      flex: 1 0 auto;
 
-        > * {
-          flex: 1 0 auto;
-        }
+      > * {
+        flex: 1 0 auto;
       }
+    }
 
-      .app-pane__body {
-        display: flex;
-        flex: 1 1 100%;
-        min-height: 0;
-        position: relative;
+    .app-pane__body {
+      display: flex;
+      flex: 1 1 100%;
+      min-height: 0;
+      position: relative;
 
-        > * {
-          overflow-x: scroll;
-          -webkit-overflow-scrolling: touch;
-          -ms-overflow-style: none;
-        }
+      > * {
+        overflow-x: scroll;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: none;
       }
+    }
 
-      .app-pane__toc {
-        flex: 0 0 auto;
-        width: $toc-width;
-        border-right: 1px solid $grey-2;
-      }
+    .app-pane__toc {
+      flex: 0 0 auto;
+      width: $toc-width;
+      border-right: 1px solid $govuk-border-colour;
+    }
 
-      .app-pane__content {
-        flex: 1 1 auto;
-      }
+    .app-pane__content {
+      flex: 1 1 auto;
     }
+  }
 
-    .no-flexbox.no-flexboxtweener,
-    .no-js {
-      .app-pane__toc {
-        float: left;
-        width: $toc-width;
-      }
+  .no-flexbox.no-flexboxtweener,
+  .no-js {
+    .app-pane__toc {
+      float: left;
+      width: $toc-width;
+    }
 
-      .app-pane__content {
-        margin-left: $toc-width;
-      }
+    .app-pane__content {
+      margin-left: $toc-width;
     }
   }
 }
+

data/lib/assets/stylesheets/modules/_collapsible.scss

@@ -11,10 +11,12 @@
     display: block
   }
 }
+
 .collapsible__heading,
 .toc__list > ul > li > a:link.collapsible__heading {
   margin-right: 30px;
 }
+
 .collapsible__toggle {
   position: absolute;
   top: 0;
@@ -27,18 +29,20 @@
   background: 0;
   color: inherit;
   padding: 0;
+
   &:focus {
-    outline: 3px solid $focus-colour;
+    @include govuk-focused-text;
   }
 }
+
 .collapsible__toggle-icon {
   position: absolute;
   top: 0;
-  right: 30px;
+  right: 20px;
   &::after {
     content: '';
     display: block;
-    border: 2px solid $black;
+    border: 2px solid govuk-colour("black");
     border-width: 2px 2px 0 0;
     transform: rotate(135deg);
     width: 10px;

data/lib/assets/stylesheets/modules/_contribution-banner.scss

@@ -1,17 +1,19 @@
 .contribution-banner {
   padding: 0;
   max-width: 40em;
-  margin-top: $gutter * 2;
-  margin-left: $gutter-half;
-  margin-right: $gutter-half;
+  margin-top: govuk-spacing(9);
+  margin-left: govuk-spacing(3);
+  margin-right: govuk-spacing(3);
 
-  @include media(tablet) {
-    margin-left: $gutter + 2px;
-    margin-right: $gutter + 2px;
+  @include govuk-media-query(tablet) {
+    margin-left: govuk-spacing(6) + 2px;
+    margin-right: govuk-spacing(6) + 2px;
   }
 
   a {
-    margin-right: $gutter-half;
+    margin-right: govuk-spacing(3);
+    @include govuk-link-common;
+    @include govuk-link-style-default;
   }
 
   li {

data/lib/assets/stylesheets/modules/_footer.scss

@@ -1,130 +1,9 @@
-/**
- * Footer Component
- *
- * Based on the existing GOV.UK footer in GOV.UK Template, built with flexbox
- * and with tweaked behaviour for the OGL logo for the smaller viewport (when
- * allowing for the table of contents)
- *
- * Example Usage:
- *
- * <footer class="footer">
- *   <div class="footer__licence">
- *     <a class="footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a>
- *     <p class="footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
- *   </div>
- * 
- *   <div class="footer__copyright">
- *     <a class="footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
- *   </div>
- * </footer>
- */
+.app-footer {
+  padding-left: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
 
-// Copied from govuk_template
-$footer-background: $grey-3;
-$footer-border-top: #a1acb2;
-$footer-link: #454a4c;
-$footer-link-hover: #171819;
-$footer-text: $footer-link;
-
-.footer {
-  display: block;
-  margin-top: $gutter * 2;
-  padding: $gutter $gutter-half ($gutter * 2);
-  border-top: 1px solid $footer-border-top;
-  background: $footer-background;
-  color: $footer-text;
-  
-  @include media(tablet) {
-    padding: $gutter;
-    display: flex;
-    flex-shrink: 0;
-    align-items: flex-end;
-    justify-content: space-between;
-  }
-
-  a:link, a:visited {
-    color: $footer-link;
-  }
-
-  a:hover, a:active {
-    color: $footer-link-hover;
-  }
-}
-
-.footer__licence {
-  line-height: 1;
-  margin-bottom: -1em;
-}
-
-.footer__licence-logo {
-  margin-top: -2px; // Align baseline with paragraph
-  margin-bottom: 1em;
-  display: block;
-  width: 41px;
-  height: 17px;
-  overflow: hidden;
-  text-indent: -999em;
-
-  background-image: file-url("/images/open-government-licence.png");
-  background-repeat: no-repeat;
-  background-size: 41px 17px;
-
-  @include device-pixel-ratio() {
-    background-image: file-url("/images/open-government-licence_2x.png");
-  }
-
-  @include media(tablet) {
-    float: left;
-    margin-right: 12px;
-  }
-}
-
-.footer__licence-description {
-  @include core-16;
-  margin: 0 0 1em;
-  display: inline-block;
-}
-
-.footer__copyright {
-  @include core-16;
-  margin-top: 30px;
-}
-
-.footer__copyright-logo {
-  display: block;
-  white-space: nowrap;
-  
-  padding: 115px 0 0 0;
-  min-width: 125px;
-
-  background-image: file-url("/images/govuk-crest.png");
-  background-size: 125px 102px;
-  background-repeat: no-repeat;
-  background-position: 50% 0%;
-  
-  text-align: center;
-  text-decoration: none;
-
-  @include device-pixel-ratio() {
-    background-image: file-url("/images/govuk-crest-2x.png");
-  }    
-}
-
-.flexbox, .flexboxtweener {
-  @include media(tablet) {
-
-    .footer__license {
-      flex-shrink: 1;
-    }
-
-    .footer__copyright {
-      margin-top: 0;
-      display: inline-block;
-      margin-left: $gutter;
-    }
-
-    .footer__copyright-logo {
-      text-align: right;
-    }
+  @include govuk-media-query($from: tablet) {
+    padding-left: govuk-spacing(6);
+    padding-right: govuk-spacing(6);
   }
 }