Merge pull request #512 from alphagov/update-to-govuk-frontend-7.0.0

Update to GOV.UK Frontend

.gitignore

@@ -4,8 +4,6 @@
 .start.pid
 .port.tmp
 public
-lib/govuk_template.html
-govuk_modules
 node_modules/*
 .tmuxp.*
 package-lock.json

CONTRIBUTING.md

@@ -25,11 +25,6 @@ Please raise feature requests as issues before contributing any code.
 
 This ensures they are discussed properly before any time is spent on them.
 
-## GOV.UK Elements
-
-The project contains code taken from the [GOV.UK Elements](https://github.com/alphagov/govuk_elements/) project.
-Please check that any issues related to that code are raised with that project, not this one.
-
 ## Contributing code
 
 ### Indentation and whitespace
@@ -56,6 +51,8 @@ which describes how we prefer git history and commit messages to read.
 
 ## To release a new version
 
+Checkout a new branch for the release.
+
 Update [CHANGELOG.md](https://github.com/alphagov/govuk_prototype_kit/blob/master/CHANGELOG.md) to summarise the changes made since the last release.
 
 To see the commits to be summarised in the changelog since the last release, [compare the latest-release branch with master](https://github.com/alphagov/govuk_prototype_kit/compare/latest-release...master).

app/assets/javascripts/application.js

@@ -1,22 +1,10 @@
 /* global $ */
-/* global GOVUK */
 
 // Warn about using the kit in production
 if (window.console && window.console.info) {
   window.console.info('GOV.UK Prototype Kit - do not use for production')
 }
 
 $(document).ready(function () {
-  // Use GOV.UK shim-links-with-button-role.js to trigger a link styled to look like a button,
-  // with role="button" when the space key is pressed.
-  GOVUK.shimLinksWithButtonRole.init()
-
-  // Details/summary polyfill from frontend toolkit
-  GOVUK.details.init()
-
-  // Show and hide toggled content
-  // Where .multiple-choice uses the data-target attribute
-  // to toggle hidden content
-  var showHideContent = new GOVUK.ShowHideContent()
-  showHideContent.init()
+  window.GOVUKFrontend.initAll()
 })

app/assets/sass/application-ie8.scss

@@ -1,4 +1,3 @@
-$is-ie: true;
-$ie-version: 8;
+$govuk-is-ie8: true;
 
 @import "application";

app/assets/sass/application.scss

@@ -1,31 +1,15 @@
-// Path to assets for use with the file-url function
-// in the govuk frontend toolkit's url-helpers partial
-$path: "/public/images/";
+// global styles for <a> and <p> tags
+$govuk-global-styles: true;
 
-// Import GOV.UK elements from /govuk-modules/, this will import the frontend toolkit and some base styles.
-// Take a look in /govuk-modules/_govuk-elements.scss to see which files are imported.
-@import 'govuk-elements';
+// Import GOV.UK Frontend
+@import "node_modules/govuk-frontend/all";
 
-// Take a look at in app/assets/sass/patterns/ to see which files are imported.
-@import 'patterns/check-your-answers';
-@import 'patterns/task-list';
+// Patterns that aren't in Frontend
+@import "patterns/check-your-answers";
+@import "patterns/task-list";
+@import "patterns/related-items";
 
-// Related items
-// (These styles will be moved to GOV.UK elements, duplicating here for now.)
-.govuk-related-items {
-  margin-top: $gutter;
-  border-top: 10px solid $govuk-blue;
-  padding-top: 5px;
-
-  .heading-medium {
-    margin-top: 0.3em;
-    margin-bottom: 0.5em;
-  }
-
-  li {
-    margin-bottom: 10px;
-    list-style-type: none;
-  }
-}
+// Components that aren't in Frontend
+@import "components/cookie-banner";
 
 // Add extra styles here, or re-organise the Sass files in whichever way makes most sense to you

app/assets/sass/components/_cookie-banner.scss

@@ -0,0 +1,24 @@
+.app-cookie-banner {
+  @include govuk-font(16);
+  @include govuk-text-colour;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  padding-top: govuk-spacing(3);
+  padding-right: govuk-spacing(3);
+  padding-bottom: govuk-spacing(3);
+  padding-left: govuk-spacing(3);
+  background-color: lighten(desaturate(govuk-colour("light-blue"), 8.46), 42.55);
+}
+
+.app-cookie-banner__message {
+  margin: 0;
+  @include govuk-width-container;
+}
+
+@include govuk-media-query($media-type: print) {
+  .app-cookie-banner {
+    display: none !important;
+  }
+}

app/assets/sass/patterns/_check-your-answers.scss

@@ -1,95 +1,83 @@
 // Recommended - Use these styles for the check your answers pattern
-.govuk-check-your-answers {
+.app-check-your-answers {
 
-  @include media(desktop) {
-    display: table;
-  }
-
-  > * {
-    position: relative;
-    border-bottom: 1px solid $border-colour;
-
-    @include media(desktop) {
-      display: table-row;
-      border-bottom-width: 0;
-    }
-
-    > * {
-      display: block;
-
-      @include media(desktop) {
-        display: table-cell;
-        border-bottom: 1px solid $border-colour;
-        padding: em(12, 19) em(20, 19) em(9, 19) 0; // copied from Elements' td padding
-        margin: 0;
-      }
-    }
+  @include govuk-font(19);
 
-    @include media(desktop) {
-      &:first-child > * {
-        padding-top: 0;
-      }
-    }
-  }
-
-  .cya-question {
-    font-weight: bold;
-    margin: em(12, 19) 4em em(4,19) 0;
-    // top: from Elements' td
-    // right: due to length of "change" link (adjust if you change the link to be much longer)
-    // bottom: by eye
-    // using margin instead of padding because of easier absolutely positioning of .change
-  }
-
-  > *:first-child .cya-question {
-    margin-top: 0;
+  @include govuk-media-query($from: desktop) {
+    display: table;
   }
+}
 
-  @include media(desktop) {
+.app-check-your-answers--short {
+  @include govuk-media-query($from: desktop) {
     // to make group of q&a line up horizontally (unless there is just one group)
-    &.cya-questions-short,
-    &.cya-questions-long {
-      width: 100%;
-    }
-
+    width: 100%;
     // recommended for mostly short questions
-    &.cya-questions-short .cya-question {
+    .app-check-your-answers__question {
       width: 30%;
     }
+  }
+}
 
+.app-check-your-answers--long {
+  @include govuk-media-query($from: desktop) {
+    // to make group of q&a line up horizontally (unless there is just one group)
+    width: 100%;
     // recommended for mostly long questions
-    &.cya-questions-long .cya-question {
+    .app-check-your-answers__question {
       width: 50%;
     }
   }
+}
+
+.app-check-your-answers__contents {
+  position: relative;
+  border-bottom: 1px solid $govuk-border-colour;
 
-  .cya-answer {
-    padding-bottom: em(9, 19); // from Elements' td
+  @include govuk-media-query($from: desktop) {
+    display: table-row;
+    border-bottom-width: 0;
   }
+}
 
-  .cya-change {
-    text-align: right;
-    position: absolute;
-    top: 0;
-    right: 0;
+.app-check-your-answers__contents:first-child .app-check-your-answers__question,
+.app-check-your-answers__contents:first-child .app-check-your-answers__answer,
+.app-check-your-answers__contents:first-child .app-check-your-answers__change {
+  @include govuk-media-query($from: desktop) {
+    padding-top: 0;
+  }
+}
 
-    @include media(desktop) {
-      position: static;
-      padding-right: 0;
-    }
+.app-check-your-answers__question,
+.app-check-your-answers__answer,
+.app-check-your-answers__change {
+  display: block;
+  margin: 0;
+  @include govuk-media-query($from: desktop) {
+    display: table-cell;
+    border-bottom: 1px solid $govuk-border-colour;
+    padding: govuk-em(12, 19) govuk-em(20, 19) govuk-em(9, 19) 0;
   }
+}
 
+.app-check-your-answers__question {
+  font-weight: bold;
+  margin: govuk-em(12, 19) 4em govuk-em(4,19) 0;
+  // using margin instead of padding because of easier absolutely positioning of .app-check-your-answers__change
 }
 
-// Deprecated - these styles will be removed in a later release
-.check-your-answers {
-  td {
-    @include core-19;
-    vertical-align: top;
-  }
-  .change-answer {
-    text-align: right;
-    font-weight: bold;
+.app-check-your-answers__answer {
+  padding-bottom: govuk-em(9, 19);
+}
+
+.app-check-your-answers__change {
+  text-align: right;
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  @include govuk-media-query($from: desktop) {
+    position: static;
     padding-right: 0;
   }
 }

app/assets/sass/patterns/_related-items.scss

@@ -0,0 +1,11 @@
+// This is a GOV.UK Publishing specific component that
+// can be seen at http://govuk-static.herokuapp.com/component-guide/related_items
+
+.app-related-items {
+  border-top: 10px solid govuk-colour("blue");
+  padding-top: govuk-spacing(2);
+}
+
+.app-related-items .govuk-list > li {
+  margin-bottom: govuk-spacing(2);
+}