Use babel-polyfill in place of polyfill.io CDN (#2496)

Update provides support for running the examples app on IE 11.

There appeared to be a number of issues with using `polyfill.io`
with slate. While trying to run the example app on IE 11, I ran
into each of the following:
https://github.com/Financial-Times/polyfill-service/issues/792
https://github.com/Financial-Times/polyfill-service/issues/854
https://github.com/Financial-Times/polyfill-service/issues/1341

`babel-polyfill` provides more robust support for polyfilling and
will allow for better targeting of supported browser envs in the
future (if desired).

Also includes `element-closest` polyfill, which is necessary for
using with IE 11 :(

package.json

@@ -12,6 +12,7 @@
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -22,6 +23,7 @@
     "copy-webpack-plugin": "^4.4.1",
     "cross-env": "^5.1.3",
     "css-loader": "^0.28.9",
+    "element-closest": "^2.0.2",
     "emojis": "^1.0.10",
     "emotion": "^9.2.4",
     "eslint": "^4.19.1",

support/webpack/config.js

@@ -13,7 +13,14 @@ const IS_PROD = process.env.NODE_ENV === 'production'
 const IS_DEV = !IS_PROD
 
 const config = {
-  entry: ['react-hot-loader/patch', './examples/index.js'],
+  entry: [
+    'babel-polyfill',
+    // COMPAT: Missing in IE 11 and included separately because babel-polyfill does not support DOM elements:
+    // https://github.com/zloirock/core-js/issues/317
+    'element-closest',
+    'react-hot-loader/patch',
+    './examples/index.js',
+  ],
   output: {
     path: path.resolve(__dirname, '../../build'),
     filename: '[name]-[hash].js',
@@ -79,7 +86,6 @@ const config = {
           content: 'width=device-width, initial-scale=1',
         },
       ],
-      scripts: ['https://cdn.polyfill.io/v2/polyfill.min.js'],
       links: [
         'https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&subset=latin-ext',
         'https://fonts.googleapis.com/icon?family=Material+Icons',

yarn.lock

@@ -2702,6 +2702,10 @@ electron@0.4.x:
   dependencies:
     drip "1.1.x"
 
+element-closest@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/element-closest/-/element-closest-2.0.2.tgz#72a740a107453382e28df9ce5dbb5a8df0f966ec"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"