Polymer 3 Conversion

.eslintignore

@@ -0,0 +1,2 @@
+test/acceptance/*
+reports

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "brightspace/polymer-config"
+  "extends": "brightspace/polymer-3-config"
 }

.gitignore

@@ -1,5 +1,4 @@
-bower_components/
-bower_components-1.x/
-bower-1.x.json
 node_modules
 offscreen.css
+
+node_modules

d2l-offscreen-shared-styles.html → 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);

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'
+});

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>

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"
   }
 }

polymer.json

@@ -1,7 +1,8 @@
 {
+  "npm": true,
   "lint": {
     "rules": [
-      "polymer-2-hybrid"
+      "polymer-3"
     ]
   }
 }

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>