From a34c55b11bc42915aa84303a1d72a74f413e315e Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <Stacey.VanHerk@D2L.com>
Date: Wed, 14 Nov 2018 14:10:30 -0500
Subject: [PATCH] Polymer 3 Conversion

---
 .eslintignore                                 |  2 +
 .eslintrc.json                                |  2 +-
 .gitignore                                    |  5 +-
 bower.json                                    | 50 ----------------
 ...les.html => d2l-offscreen-shared-styles.js | 10 +++-
 d2l-offscreen.html                            | 32 ----------
 d2l-offscreen.js                              | 40 +++++++++++++
 demo/index.html                               | 58 ++++++++++++++-----
 index.html                                    | 13 -----
 package.json                                  | 52 +++++++++++------
 polymer.json                                  |  3 +-
 test/a11y.html                                | 19 +++---
 test/d2l-offscreen.html                       | 32 +++++-----
 test/index.html                               |  4 +-
 14 files changed, 163 insertions(+), 159 deletions(-)
 create mode 100644 .eslintignore
 delete mode 100644 bower.json
 rename d2l-offscreen-shared-styles.html => d2l-offscreen-shared-styles.js (53%)
 delete mode 100644 d2l-offscreen.html
 create mode 100644 d2l-offscreen.js
 delete mode 100644 index.html

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..58d9402
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,2 @@
+test/acceptance/*
+reports
diff --git a/.eslintrc.json b/.eslintrc.json
index d41a881..10677a2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "brightspace/polymer-config"
+  "extends": "brightspace/polymer-3-config"
 }
diff --git a/.gitignore b/.gitignore
index 86db733..60f3e3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
-bower_components/
-bower_components-1.x/
-bower-1.x.json
 node_modules
 offscreen.css
+
+node_modules
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 5fe5fad..0000000
--- a/bower.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
-  "name": "d2l-offscreen",
-  "description": "Polymer web component and Sass mixin for positioning elements offscreen",
-  "main": [
-    "d2l-offscreen.html",
-    "offscreen.scss"
-  ],
-  "license": "Apache-2.0",
-  "keywords": [
-    "d2l",
-    "ui",
-    "offscreen",
-    "scss",
-    "sass",
-    "mixins",
-    "polymer",
-    "web component"
-  ],
-  "dependencies": {
-    "polymer": "1 - 2"
-  },
-  "devDependencies": {
-    "d2l-typography": "^6.0.0",
-    "iron-component-page": "^2.0.0",
-    "iron-demo-helpers": "^2.0.0",
-    "web-component-tester": "^6.0.0"
-  },
-  "variants": {
-    "1.x": {
-      "dependencies": {
-        "polymer": "^1.9.1"
-      },
-      "resolutions": {
-        "webcomponentsjs": "^0.7"
-      }
-    }
-  },
-  "resolutions": {
-    "webcomponentsjs": "^v1.0.0"
-  },
-  "ignore": [
-    ".editorconfig",
-    ".eslintrc.json",
-    ".gitignore",
-    ".travis.yml",
-    "package.json",
-    "polymer.json",
-    "test"
-  ]
-}
diff --git a/d2l-offscreen-shared-styles.html b/d2l-offscreen-shared-styles.js
similarity index 53%
rename from d2l-offscreen-shared-styles.html
rename to d2l-offscreen-shared-styles.js
index 51491e4..5ef7c64 100644
--- a/d2l-offscreen-shared-styles.html
+++ b/d2l-offscreen-shared-styles.js
@@ -1,5 +1,7 @@
-<link rel="import" href="../polymer/polymer.html">
-<dom-module id="d2l-offscreen-shared-styles">
+import '../@polymer/polymer/polymer-legacy.js';
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<dom-module id="d2l-offscreen-shared-styles">
 	<template>
 		<style>
 			:host {
@@ -18,4 +20,6 @@
 			}
 		</style>
 	</template>
-</dom-module>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
diff --git a/d2l-offscreen.html b/d2l-offscreen.html
deleted file mode 100644
index a3e5b00..0000000
--- a/d2l-offscreen.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="d2l-offscreen-shared-styles.html">
-
-<!--
-`d2l-offscreen`
-Polymer web component for positioning elements offscreen
-
-@demo demo/index.html
--->
-
-<dom-module id="d2l-offscreen">
-	<template strip-whitespace>
-		<style include="d2l-offscreen-shared-styles">
-			:host {
-				display: inline-block;
-				@apply --d2l-offscreen;
-			}
-			:host(:dir(rtl)) {
-				@apply --d2l-offscreen-rtl;
-			}
-			:host-context([dir="rtl"]) {
-				@apply --d2l-offscreen-rtl;
-			}
-		</style>
-		<slot></slot>
-	</template>
-	<script>
-		Polymer({
-			is: 'd2l-offscreen'
-		});
-	</script>
-</dom-module>
diff --git a/d2l-offscreen.js b/d2l-offscreen.js
new file mode 100644
index 0000000..d787bbd
--- /dev/null
+++ b/d2l-offscreen.js
@@ -0,0 +1,40 @@
+/**
+`d2l-offscreen`
+Polymer web component for positioning elements offscreen
+
+@demo demo/index.html
+*/
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../@polymer/polymer/polymer-legacy.js';
+
+import './d2l-offscreen-shared-styles.js';
+import { Polymer } from '../@polymer/polymer/lib/legacy/polymer-fn.js';
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<dom-module id="d2l-offscreen">
+	<template strip-whitespace="">
+		<style include="d2l-offscreen-shared-styles">
+			:host {
+				display: inline-block;
+				@apply --d2l-offscreen;
+			}
+			:host(:dir(rtl)) {
+				@apply --d2l-offscreen-rtl;
+			}
+			:host-context([dir="rtl"]) {
+				@apply --d2l-offscreen-rtl;
+			}
+		</style>
+		<slot></slot>
+	</template>
+	
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
+Polymer({
+	is: 'd2l-offscreen'
+});
diff --git a/demo/index.html b/demo/index.html
index 12b451c..c191cd7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -4,25 +4,54 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 		<title>d2l-offscreen demo</title>
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
-		<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
-		<link rel="import" href="../../d2l-typography/d2l-typography.html">
-		<link rel="import" href="../d2l-offscreen.html">
-		<custom-style>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script type="module" src="../../@polymer/iron-demo-helpers/demo-pages-shared-styles.js"></script>
+		<script type="module" src="../../@polymer/iron-demo-helpers/demo-snippet.js"></script>
+		<script type="module" src="../../d2l-typography/d2l-typography.js"></script>
+		<script type="module" src="../d2l-offscreen.js"></script>
+		<!-- FIXME(polymer-modulizer):
+		These imperative modules that innerHTML your HTML are
+		a hacky way to be sure that any mixins in included style
+		modules are ready before any elements that reference them are
+		instantiated, otherwise the CSS @apply mixin polyfill won't be
+		able to expand the underlying CSS custom properties.
+		See: https://github.com/Polymer/polymer-modulizer/issues/154
+		-->
+	<script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<custom-style>
 			<style is="custom-style" include="demo-pages-shared-styles"></style>
-		</custom-style>
-		<custom-style include="d2l-typography">
+		</custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
+		<script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<custom-style include="d2l-typography">
 			<style is="custom-style" include="d2l-typography"></style>
-		</custom-style>
-		<style>
+		</custom-style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
+		<script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<style>
 			html {
 				font-size: 20px;
 			}
-			</style>
+			</style>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
 	</head>
 	<body unresolved class="d2l-typography">
-		<div class="vertical-section-container centered">
+		<script type="module">
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = `<div class="vertical-section-container centered">
 
 			<h3>Offscreen</h3>
 			<demo-snippet>
@@ -34,6 +63,9 @@ <h3>Offscreen</h3>
 				</template>
 			</demo-snippet>
 
-		</div>
+		</div>`;
+
+document.body.appendChild($_documentContainer.content);
+</script>
 	</body>
 </html>
diff --git a/index.html b/index.html
deleted file mode 100644
index ea49996..0000000
--- a/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-		<title>d2l-offscreen</title>
-		<script src="../webcomponentsjs/webcomponents-lite.js"></script>
-		<link rel="import" href="../iron-component-page/iron-component-page.html">
-	</head>
-	<body>
-		<iron-component-page src="d2l-offscreen.html"></iron-component-page>
-	</body>
-</html>
diff --git a/package.json b/package.json
index 5fa4135..d4ee766 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,5 @@
 {
-  "name": "d2l-offscreen",
   "description": "Polymer web component and Sass mixin for positioning elements offscreen",
-  "private": true,
-  "scripts": {
-    "postinstall": "polymer install --variants",
-    "test:lint:html": "eslint *.html",
-    "test:lint:wc": "polymer lint",
-    "test:lint": "npm run test:lint:html && npm run test:lint:wc",
-    "test:polymer:local": "polymer test --skip-plugin sauce",
-    "test:polymer:sauce": "polymer test --skip-plugin local",
-    "test": "npm run test:lint && npm run test:polymer:local"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/BrightspaceUI/offscreen.git"
-  },
   "keywords": [
     "d2l",
     "ui",
@@ -25,18 +10,49 @@
     "polymer",
     "web component"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BrightspaceUI/offscreen.git"
+  },
+  "homepage": "https://github.com/BrightspaceUI/offscreen",
+  "name": "d2l-offscreen",
+  "scripts": {
+    "test:lint:js": "eslint . --ext .js,.html test/**/*.js test/**/*.html demo/**/*.js demo/**/*.html",
+    "test:lint:wc": "polymer lint",
+    "test:lint": "npm run test:lint:wc && npm run test:lint:js",
+    "test:polymer:local": "polymer test --skip-plugin sauce",
+    "test:polymer:sauce": "polymer test --skip-plugin local",
+    "test": "npm run test:lint && npm run test:polymer:local"
+  },
   "author": "D2L Corporation",
   "license": "Apache 2.0",
   "bugs": {
     "url": "https://github.com/BrightspaceUI/offscreen/issues"
   },
-  "homepage": "https://github.com/BrightspaceUI/offscreen",
   "devDependencies": {
+    "@babel/polyfill": "^7.0.0",
+    "@polymer/iron-component-page": "^3.0.0-pre.18",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "@webcomponents/webcomponentsjs": "^2.1.3",
+    "babel-eslint": "^10.0.1",
     "chromedriver": "^2.40.0",
+    "d2l-typography": "BrightspaceUI/typography#semver:^7.0.0",
     "eslint": "^4.15.0",
     "eslint-config-brightspace": "^0.4.0",
     "eslint-plugin-html": "^4.0.1",
-    "polymer-cli": "^1.5.7",
-    "sauce-connect-launcher": "^1.2.4"
+    "polymer-cli": "^1.9.0",
+    "sauce-connect-launcher": "^1.2.4",
+    "wct-browser-legacy": "^1.0.1"
+  },
+  "version": "",
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0"
+  },
+  "main": "d2l-offscreen.js",
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0"
   }
 }
diff --git a/polymer.json b/polymer.json
index 3d0892e..6111e49 100644
--- a/polymer.json
+++ b/polymer.json
@@ -1,7 +1,8 @@
 {
+  "npm": true,
   "lint": {
     "rules": [
-      "polymer-2-hybrid"
+      "polymer-3"
     ]
   }
 }
diff --git a/test/a11y.html b/test/a11y.html
index 9734207..ef11a26 100644
--- a/test/a11y.html
+++ b/test/a11y.html
@@ -6,10 +6,11 @@
 
 		<title>d2l-offscreen test</title>
 
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@babel/polyfill/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 
-		<link rel="import" href="../d2l-offscreen.html">
+		<script type="module" src="../d2l-offscreen.js"></script>
 	</head>
 	<body>
 		<test-fixture id="a11y">
@@ -18,10 +19,12 @@
 			</template>
 		</test-fixture>
 
-		<script>
-			suite('a11y', function() {
-				a11ySuite('a11y');
-			});
-		</script>
+		<script type="module">
+import '../d2l-offscreen.js';
+import { a11ySuite } from '../../wct-browser-legacy/a11ySuite.js';
+suite('a11y', function() {
+	a11ySuite('a11y');
+});
+</script>
 	</body>
 </html>
diff --git a/test/d2l-offscreen.html b/test/d2l-offscreen.html
index e02ab7d..2d35a77 100644
--- a/test/d2l-offscreen.html
+++ b/test/d2l-offscreen.html
@@ -6,10 +6,11 @@
 
 		<title>d2l-offscreen test</title>
 
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@babel/polyfill/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 
-		<link rel="import" href="../d2l-offscreen.html">
+		<script type="module" src="../d2l-offscreen.js"></script>
 	</head>
 	<body>
 		<test-fixture id="basic">
@@ -21,18 +22,19 @@
 			</template>
 		</test-fixture>
 
-		<script>
-			suite('d2l-offscreen', function() {
-				var offscreen, element;
-				setup(function() {
-					offscreen = fixture('basic');
-					element = offscreen.querySelector('d2l-offscreen');
-				});
+		<script type="module">
+import '../d2l-offscreen.js';
+suite('d2l-offscreen', function() {
+	var offscreen, element;
+	setup(function() {
+		offscreen = fixture('basic');
+		element = offscreen.querySelector('d2l-offscreen');
+	});
 
-				test('instantiating the element works', function() {
-					expect(element.is).to.equal('d2l-offscreen');
-				});
-			});
-		</script>
+	test('instantiating the element works', function() {
+		expect(element.is).to.equal('d2l-offscreen');
+	});
+});
+</script>
 	</body>
 </html>
diff --git a/test/index.html b/test/index.html
index f70e444..85feb17 100644
--- a/test/index.html
+++ b/test/index.html
@@ -4,8 +4,8 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 		<title>d2l-offscreen tests</title>
-		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-		<script src="../../web-component-tester/browser.js"></script>
+		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+		<script src="../../wct-browser-legacy/browser.js"></script>
 	</head>
 	<body>
 		<script>