[chore] Standardizing polyfills for reporting (#647)

* chore Moving polyfills into a separate file with standard syntax to make reporting on these easier in future
* chore Add a documentation section on other types of polyfills and the property syntax for adding them
* chore Add reporting to the demo page for polyfills and todos

Author: castastrophe

CHANGELOG-prerelease.md

@@ -12,6 +12,7 @@ Tag: [v1.0.0-prerelease.33](https://github.com/patternfly/patternfly-elements/re
 
 - [5ad398](https://github.com/patternfly/patternfly-elements/commit/5ad3983b9ead73cf2db30fd0bc52aada334c6961) Disclosure accordion variant
 - [3ccec6](https://github.com/patternfly/patternfly-elements/commit/3ccec6c82efc52aae67b74072b6c0b8ff1b47f23) Update pfe-cta to include broadcast variables for all variants [#659](https://github.com/patternfly/patternfly-elements/issues/658)
+- [](https://github.com/patternfly/patternfly-elements/commit/) chore: Pull polyfills out into separate files for easier parsing/reporting
 
 ## Prerelease 32 ( 2019-12-05 )
 
@@ -26,11 +27,11 @@ Tag: [v1.0.0-prerelease.32](https://github.com/patternfly/patternfly-elements/re
 Tag: [v1.0.0-prerelease.31](https://github.com/patternfly/patternfly-elements/releases/tag/v1.0.0-prerelease.31)
 
 - [cdcdddf](https://github.com/patternfly/patternfly-elements/commit/cdcdddfa6858953727a3b6d7dcb9add7a61adf93) fix: Bring back pfe-cta hover animation effect [#624](https://github.com/patternfly/patternfly-elements/pull/624)
-- [32b138e](https://github.com/patternfly/patternfly-elements/commit/32b138e64223031fd70ed2e525ee98cd5bb7f954) Update Travis tests
+- [32b138e](https://github.com/patternfly/patternfly-elements/commit/32b138e64223031fd70ed2e525ee98cd5bb7f954) fix: Update Travis tests
 - [67fa1fb](https://github.com/patternfly/patternfly-elements/commit/67fa1fb3f29ec3e48a6d0767b6c08eb008e56655) fix: pfe-navigation mobile login/language links working [#620](https://github.com/patternfly/patternfly-elements/pull/620)
 - [4ebcbcc](https://github.com/patternfly/patternfly-elements/commit/4ebcbcccaf50247c27a242a944dd4a5a654aeb80) fix: pfe-navigation add styles for when JavaScript does not load [#600](https://github.com/patternfly/patternfly-elements/pull/600))
 - [27ef3ec](https://github.com/patternfly/patternfly-elements/commit/27ef3ec08371ec32c9a9376904163ef48148affa) feat: Updating broadcast and how variables are applied [#392](https://github.com/patternfly/patternfly-elements/pull/392)
-- [a78ea1f]() Speed up Travis tests  [#621](https://github.com/patternfly/patternfly-elements/issues/621)
+- [a78ea1f](https://github.com/patternfly/patternfly-elements/commit/a78ea1fc5e114856ede20e459d35875697410b56) fix: Speed up Travis tests  [#621](https://github.com/patternfly/patternfly-elements/issues/621)
 - [f144b6f](https://github.com/patternfly/patternfly-elements/commit/f144b6f33dd6a8b615ac2a63cec6b29f3bf70d32) feat: pfe-select component [#553](https://github.com/patternfly/patternfly-elements/pull/553)
 
 

docs/content/develop/step-2b.md

@@ -39,8 +39,8 @@ We'll also need to update `/demo/index.html` so that the user's name is passed i
     <link href="../../pfelement/dist/pfelement.min.css" rel="stylesheet">
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
     <script>require(['../pfe-cool-element.umd.js'])</script>
   </head>

docs/content/getting-started/browser-support.md

@@ -34,9 +34,9 @@ As a developer, you will need to make sure you include the necessary polyfills.
     <title>PatternFly Elements</title>
 
     <!-- uncomment the es5-adapter if you're using the compiled version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
     <!-- webcomponents-bundle.js includes all of the polyfills -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/webcomponents-bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
   </head>
   <body>
 
@@ -58,8 +58,8 @@ There's only a difference of the web component file that's being downloaded, but
     <title>PatternFly Elements</title>
 
     <!-- uncomment the es5-adapter if you're using the compiled version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/webcomponents-loader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-loader.js"></script>
   </head>
   <body>
     <script>
@@ -78,7 +78,7 @@ For a more in-depth explanation, view the [example on GitHub](https://github.com
 The two examples above also include the `custom-elements-es5-adapter.js` file before the web component polyfill. In the case that you need to support ES5, you need to include this polyfill. According to the spec, custom elements must be written as ES6 classes. However, in our build step we transpile our ES6 components to ES5 which makes it necessary for us to include the adapter to get our components to work.
 
 ```
-<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/custom-elements-es5-adapter.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
 ```
 
 For more documentation, check out the [custom-elements-es5-adapter.js section](https://github.com/WebComponents/webcomponentsjs#custom-elements-es5-adapterjs) on GitHub.

docs/content/getting-started/polyfills.md

@@ -26,11 +26,11 @@ the head of your document.
     <title>PatternFly Elements</title>
 
     <!-- polyfills -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.4/webcomponents-bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
   </head>
   <body></body>
-</html
+</html>
 ```
 
 ## What type of Javascript are you using?
@@ -43,8 +43,8 @@ the head of your document.
 ## Custom elements ES5 adapter
 
 This polyfill is needed if your custom elements have been compiled from ES6 to ES5.
-It's not necessary to include this polyfill for IE 11 and it will throw a syntax
-error in IE 11 because the adapter was written in ES6. However, you can ignore
+It's not necessary to include this polyfill for IE11 and it will throw a syntax
+error in IE11 because the adapter was written in ES6. However, you can ignore
 this error because it will not cause issues with your elements.
 
 
@@ -68,3 +68,18 @@ this error because it will not cause issues with your elements.
 
 Check out the ES6 pfelement and include it.
 
+## Additional polyfills
+
+Some components may require the addition of certain functions in order to use modern JavaScript in older browsers.  Until we can build in a way to automatically add these polyfills, please create a separate file called `polyfills--<component-name>.js` and import that file into your component using the following syntax.  Be sure to specify what functions are being defined inside the polyfills file in the comment section above the import statement.
+
+```js
+// Import polyfills: <list of function names>
+import "polyfills--<component-name>.js";
+```
+
+In your polyfills file, please prefix each addition with the name of the polyfill and the URL from which it was copied.  Please use the following syntax so that we can easily report on/grep for these values:
+
+```js
+// @POLYFILL  Array.prototype.find
+// https://tc39.github.io/ecma262/#sec-array.prototype.find
+```

elements/pfe-accordion/demo/index.html

@@ -21,8 +21,8 @@
     <link rel="stylesheet" href="../../pfe-styles/dist/pfe-layouts.css" />
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
 
     <script>require([

elements/pfe-accordion/src/pfe-accordion.js

@@ -1,49 +1,7 @@
-import PFElement from "../../pfelement/dist/pfelement.js";
-
-// Polyfill: findIndex -- https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
-if (!Array.prototype.findIndex) {
-  Object.defineProperty(Array.prototype, "findIndex", {
-    value: function(predicate) {
-      // 1. Let O be ? ToObject(this value).
-      if (this == null) {
-        throw new TypeError('"this" is null or not defined');
-      }
-
-      var o = Object(this);
-
-      // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
-
-      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-      if (typeof predicate !== "function") {
-        throw new TypeError("predicate must be a function");
-      }
-
-      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-      var thisArg = arguments[1];
-
-      // 5. Let k be 0.
-      var k = 0;
-
-      // 6. Repeat, while k < len
-      while (k < len) {
-        // a. Let Pk be ! ToString(k).
-        // b. Let kValue be ? Get(O, Pk).
-        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-        // d. If testResult is true, return k.
-        var kValue = o[k];
-        if (predicate.call(thisArg, kValue, k, o)) {
-          return k;
-        }
-        // e. Increase k by 1.
-        k++;
-      }
+// Import polyfills: findIndex
+import "./polyfills--pfe-accordion.js";
 
-      // 7. Return -1.
-      return -1;
-    }
-  });
-}
+import PFElement from "../../pfelement/dist/pfelement.js";
 
 function generateId() {
   return Math.random()

elements/pfe-accordion/src/polyfills--pfe-accordion.js

@@ -0,0 +1,45 @@
+// @POLYFILL  Array.prototype.findIndex
+// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
+if (!Array.prototype.findIndex) {
+    Object.defineProperty(Array.prototype, "findIndex", {
+      value: function(predicate) {
+        // 1. Let O be ? ToObject(this value).
+        if (this == null) {
+          throw new TypeError('"this" is null or not defined');
+        }
+  
+        var o = Object(this);
+  
+        // 2. Let len be ? ToLength(? Get(O, "length")).
+        var len = o.length >>> 0;
+  
+        // 3. If IsCallable(predicate) is false, throw a TypeError exception.
+        if (typeof predicate !== "function") {
+          throw new TypeError("predicate must be a function");
+        }
+  
+        // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
+        var thisArg = arguments[1];
+  
+        // 5. Let k be 0.
+        var k = 0;
+  
+        // 6. Repeat, while k < len
+        while (k < len) {
+          // a. Let Pk be ! ToString(k).
+          // b. Let kValue be ? Get(O, Pk).
+          // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
+          // d. If testResult is true, return k.
+          var kValue = o[k];
+          if (predicate.call(thisArg, kValue, k, o)) {
+            return k;
+          }
+          // e. Increase k by 1.
+          k++;
+        }
+  
+        // 7. Return -1.
+        return -1;
+      }
+    });
+  }

elements/pfe-autocomplete/src/pfe-autocomplete.js

@@ -1,25 +1,3 @@
-/*
- * Copyright 2018 Red Hat, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
 import PFElement from "../../pfelement/dist/pfelement.js";
 
 const KEYCODE = {

elements/pfe-avatar/demo/index.html

@@ -22,8 +22,8 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
 
     <script>require([

elements/pfe-band/demo/index.html

@@ -25,13 +25,13 @@
     <link href="../../pfe-styles/dist/pfe-layouts.css" rel="stylesheet">
 
     <!-- uncomment the es5-adapter if you're using the umd version -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/custom-elements-es5-adapter.js"></script>
     <!-- testing to see if this is needed -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-loader.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-loader.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
 
     <!-- Use webcomponents-loader when you are adding support for more modern browsers -->
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/webcomponents-bundle.js"></script> -->
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.3.0/webcomponents-bundle.js"></script> -->
 
     <!-- IE11 test: use bundle + require with umd files -->
     <!-- Use webcomponents-bundle when supporting much older browsers like IE11 -->