From c4fa9426b398cd13eb092152d802399b1f78078a Mon Sep 17 00:00:00 2001
From: Matteo Pagliazzi <matteopagliazzi@gmail.com>
Date: Fri, 16 Jun 2017 18:58:34 +0200
Subject: [PATCH] Client Tasks v1 / Bootstrap configurable  (#8822)

* make bs4 configurable, change gutters to match zeplin\s

* correctly customize gutters
---
 gulp/gulp-bootstrap.js                        | 36 +++++++++++++++++++
 package.json                                  |  4 +--
 .../client/assets/scss/bootstrap_config.scss  | 17 +++++++++
 3 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 gulp/gulp-bootstrap.js
 create mode 100644 website/client/assets/scss/bootstrap_config.scss

diff --git a/gulp/gulp-bootstrap.js b/gulp/gulp-bootstrap.js
new file mode 100644
index 0000000000..49e570aa4b
--- /dev/null
+++ b/gulp/gulp-bootstrap.js
@@ -0,0 +1,36 @@
+import gulp from 'gulp';
+import fs from 'fs';
+
+// Copy Bootstrap 4 config variables from /website /node_modules so we can check
+// them into Git
+
+const BOOSTRAP_NEW_CONFIG_PATH = 'website/client/assets/scss/bootstrap_config.scss';
+const BOOTSTRAP_ORIGINAL_CONFIG_PATH = 'node_modules/bootstrap/scss/_custom.scss';
+
+// https://stackoverflow.com/a/14387791/969528
+function copyFile(source, target, cb) {
+  let cbCalled = false;
+
+  function done(err) {
+    if (!cbCalled) {
+      cb(err);
+      cbCalled = true;
+    }
+  }
+
+  let rd = fs.createReadStream(source);
+  rd.on('error', done);
+  let wr = fs.createWriteStream(target);
+  wr.on('error', done);
+  wr.on('close', () => done());
+  rd.pipe(wr);
+}
+
+gulp.task('bootstrap', (done) => {
+  // use new config
+  copyFile(
+    BOOSTRAP_NEW_CONFIG_PATH,
+    BOOTSTRAP_ORIGINAL_CONFIG_PATH,
+    done,
+  );
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 8dd376fce5..a2cc1876ff 100644
--- a/package.json
+++ b/package.json
@@ -157,8 +157,8 @@
     "test:nodemon": "gulp test:nodemon",
     "coverage": "COVERAGE=true mocha --require register-handlers.js --reporter html-cov > coverage.html; open coverage.html",
     "sprites": "gulp sprites:compile",
-    "client:dev": "node webpack/dev-server.js",
-    "client:build": "node webpack/build.js",
+    "client:dev": "gulp bootstrap && node webpack/dev-server.js",
+    "client:build": "gulp bootstrap && node webpack/build.js",
     "client:unit": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js --single-run",
     "client:unit:watch": "cross-env NODE_ENV=test karma start test/client/unit/karma.conf.js",
     "client:e2e": "node test/client/e2e/runner.js",
diff --git a/website/client/assets/scss/bootstrap_config.scss b/website/client/assets/scss/bootstrap_config.scss
new file mode 100644
index 0000000000..96a7836938
--- /dev/null
+++ b/website/client/assets/scss/bootstrap_config.scss
@@ -0,0 +1,17 @@
+// Custom variables for Bootstrap 4
+
+
+// See here https://github.com/twbs/bootstrap/issues/22458
+// why it's not enough to just override $grid-gutter-width-base.
+//
+// Basically you have to copy here every variable from _variables.scss
+// that uses a custom variable.
+$grid-gutter-width-base: 24px;
+$grid-gutter-widths: (
+  xs: $grid-gutter-width-base,
+  sm: $grid-gutter-width-base,
+  md: $grid-gutter-width-base,
+  lg: $grid-gutter-width-base,
+  xl: $grid-gutter-width-base
+);
+$card-deck-margin: ($grid-gutter-width-base / 2);
\ No newline at end of file