From 6bcbeaef7090063958d3ba653b38e677fd40f868 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 14 Jan 2016 15:53:19 +0000
Subject: [PATCH] Install GOV.UK Elements + Frontend Toolkit w/ NPM

Because:
- GOV.UK elements is now published with a package.json that only install the
  SASS files (https://github.com/alphagov/govuk_elements/pull/156)
- We can drop Git submodules, so one less dependency management tool

This commit also changes the `gulpfile.js` and `main.scss` files to use the
assets from `node_modules` rather than the Git submodules.
---
 app/assets/stylesheets/main.scss | 50 ++++++++++++++++----------------
 gulpfile.babel.js                | 20 +++++++++----
 package.json                     |  2 ++
 3 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 28ddc0ce4..2882baaa7 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -1,33 +1,33 @@
 // Dependencies from GOV.UK Frontend Toolkit
 // https://github.com/alphagov/govuk_frontend_toolkit/
-@import '../govuk_frontend_toolkit/stylesheets/conditionals';
-@import '../govuk_frontend_toolkit/stylesheets/shims';
-@import '../govuk_frontend_toolkit/stylesheets/measurements';
-@import '../govuk_frontend_toolkit/stylesheets/css3';
-@import '../govuk_frontend_toolkit/stylesheets/colours';
-@import '../govuk_frontend_toolkit/stylesheets/typography';
-@import '../govuk_frontend_toolkit/stylesheets/grid_layout';
-@import '../govuk_frontend_toolkit/stylesheets/helpers';
-@import '../govuk_frontend_toolkit/stylesheets/url-helpers';
-@import '../govuk_frontend_toolkit/stylesheets/design-patterns/buttons';
-@import '../govuk_frontend_toolkit/stylesheets/design-patterns/alpha-beta';
+@import 'conditionals';
+@import 'shims';
+@import 'measurements';
+@import 'css3';
+@import 'colours';
+@import 'typography';
+@import 'grid_layout';
+@import 'helpers';
+@import 'url-helpers';
+@import 'design-patterns/buttons';
+@import 'design-patterns/alpha-beta';
 
 // Dependencies from GOV.UK Elements
 // https://github.com/alphagov/govuk_elements
-@import '../govuk_elements/public/sass/elements/helpers';
-@import '../govuk_elements/public/sass/elements/reset';
-@import '../govuk_elements/public/sass/elements/buttons';
-@import '../govuk_elements/public/sass/elements/details';
-@import '../govuk_elements/public/sass/elements/elements-typography';
-@import '../govuk_elements/public/sass/elements/forms';
-@import '../govuk_elements/public/sass/elements/forms/form-validation';
-@import '../govuk_elements/public/sass/elements/forms/form-block-labels';
-@import '../govuk_elements/public/sass/elements/forms/form-validation';
-@import '../govuk_elements/public/sass/elements/icons';
-@import '../govuk_elements/public/sass/elements/layout';
-@import '../govuk_elements/public/sass/elements/lists';
-@import '../govuk_elements/public/sass/elements/panels';
-@import '../govuk_elements/public/sass/elements/tables';
+@import 'elements/helpers';
+@import 'elements/reset';
+@import 'elements/buttons';
+@import 'elements/details';
+@import 'elements/elements-typography';
+@import 'elements/forms';
+@import 'elements/forms/form-validation';
+@import 'elements/forms/form-block-labels';
+@import 'elements/forms/form-validation';
+@import 'elements/icons';
+@import 'elements/layout';
+@import 'elements/lists';
+@import 'elements/panels';
+@import 'elements/tables';
 
 
 // Specific to this application
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 38af01ad9..6c336ce97 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -13,7 +13,8 @@ var gulp = require('gulp'),
     paths = {
         src: 'app/assets/',
         dist: 'app/static/',
-        templates: 'app/templates/'
+        templates: 'app/templates/',
+        npm: 'node_modules/'
     };
 
 // 3. TASKS
@@ -31,8 +32,8 @@ gulp.task('copy:govuk_template:assets', () => gulp.src('bower_components/govuk_t
 
 gulp.task('javascripts', () => gulp
   .src([
-    paths.src + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
-    paths.src + 'govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js',
+    paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
+    paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js',
     paths.src + 'javascripts/highlightTags.js',
     paths.src + 'javascripts/dropdown.js',
     paths.src + 'javascripts/main.js'
@@ -50,7 +51,13 @@ gulp.task('javascripts', () => gulp
 
 gulp.task('sass', () => gulp
   .src(paths.src + '/stylesheets/main*.scss')
-  .pipe(plugins.sass({outputStyle: 'compressed'}))
+  .pipe(plugins.sass({
+    outputStyle: 'compressed',
+    includePaths: [
+      paths.npm + 'govuk-elements-sass/public/sass/',
+      paths.npm + 'govuk_frontend_toolkit/stylesheets/'
+    ]
+  }))
   .pipe(gulp.dest(paths.dist + '/stylesheets'))
 );
 
@@ -58,7 +65,10 @@ gulp.task('sass', () => gulp
 // Copy images
 
 gulp.task('images', () => gulp
-  .src(paths.src + 'images/**/*')
+  .src([
+    paths.src + 'images/**/*',
+    paths.npm + 'govuk_frontend_toolkit/images/**/*'
+  ])
   .pipe(gulp.dest(paths.dist + '/images'))
 );
 
diff --git a/package.json b/package.json
index 4b5ad6edf..582ad19c2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "babel-core": "6.3.26",
     "babel-preset-es2015": "6.3.13",
     "bower": "1.7.1",
+    "govuk-elements-sass": "github:alphagov/govuk_elements#v1.1.1",
+    "govuk_frontend_toolkit": "4.6.0",
     "gulp": "3.9.0",
     "gulp-add-src": "0.2.0",
     "gulp-babel": "6.1.1",