Merge pull request #28 from BrightspaceUI/dbatiste/hybrid-cleanup

Dbatiste/hybrid cleanup
BrightspaceUI · Jan 10, 2018 · 2c62ede · 2c62ede
2 parents 5799964 + c7258f6
commit 2c62ede
Show file tree

Hide file tree

Showing 12 changed files with 155 additions and 47 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -8,6 +8,6 @@ insert_final_newline = true
 indent_style = tab
 indent_size = 4
 
-[{bower.json,package.json,.travis.yml}]
+[{*.json,*.yml}]
 indent_style = space
 indent_size = 2
diff --git a/.eslintrc → .eslintrc.json b/.eslintrc → .eslintrc.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,4 @@
 language: node_js
-node_js: stable
-sudo: false
-install:
-  - npm install
-  - polymer install --variants
+node_js: node
+script:
+- npm run test
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -1,2 +1 @@
-*       @dlockhart
-*       @dbatiste
+*       @dlockhart @dbatiste
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 # d2l-offscreen
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/offscreen)
 [![Bower version][bower-image]][bower-url]
 [![Build status][ci-image]][ci-url]
 
@@ -23,15 +24,46 @@ Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyf
 
 ```html
 <head>
-	<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
+	<script src="../webcomponentsjs/webcomponents-lite.js"></script>
 	<link rel="import" href="../d2l-offscreen/d2l-offscreen.html">
 </head>
 ```
 
 The `<d2l-offscreen>` custom element can now be used in your markup, the children of which will be hidden offscreen.
 
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../d2l-typography/d2l-typography.html">
+    <link rel="import" href="d2l-offscreen.html">
+    <custom-style include="d2l-typography">
+      <style is="custom-style" include="d2l-typography"></style>
+    </custom-style>
+    <style>
+      html {
+        font-size: 20px;
+      }
+      body {
+        color: var(--d2l-color-ferrite);
+        font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
+        letter-spacing: 0.01rem;
+        font-size: 0.95rem;
+        font-weight: 400;
+        line-height: 1.4rem;
+      }
+    </style>
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
 ```html
-<d2l-offscreen>This message will only be visible to assistive technology, such as a screen reader.</d2l-offscreen>
+Some offscreen content:
+<d2l-offscreen>
+	This message will only be visible to assistive technology, such as a screen reader.
+</d2l-offscreen>
 ```
 
 ### Polymer Mixin
@@ -43,8 +75,9 @@ You'll still include the web component polyfill, but instead of importing `d2l-o
 ```html
 <link rel="import" href="../d2l-offscreen/d2l-offscreen-shared-styles.html">
 <style include="d2l-offscreen-shared-styles">
+
 my-element {
-	@apply(--d2l-offscreen);
+	@apply --d2l-offscreen;
 }
 ```
 
@@ -56,7 +89,9 @@ Alternatively, to position an element offscreen using the Sass mixin, apply the
 
 For example, to hide this message:
 ```html
-<p class="offscreen">This message will only be visible to assistive technology, such as a screen reader.</p>
+<p class="offscreen">
+	This message will only be visible to assistive technology, such as a screen reader.
+</p>
 ```
 
 SCSS:
@@ -67,9 +102,39 @@ SCSS:
 }
 ```
 
-## Coding styles
+## Developing, Testing and Contributing
+
+After cloning the repo, run `npm install` to install dependencies.
+
+If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally:
+
+```shell
+npm install -g polymer-cli
+```
+
+To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests:
+
+```shell
+polymer serve
+```
 
-See the [VUI Best Practices & Style Guide](https://github.com/Brightspace/valence-ui-docs/wiki/Best-Practices-&-Style-Guide) for information on D2L UI naming conventions, plus information about the [EditorConfig](http://editorconfig.org) rules used in this repo.
+To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)):
+
+```shell
+npm run lint
+```
+
+To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests):
+
+```shell
+polymer test --skip-plugin sauce
+```
+
+To lint AND run local unit tests:
+
+```shell
+npm test
+```
 
 [bower-url]: http://bower.io/search/?q=d2l-offscreen
 [bower-image]: https://img.shields.io/bower/v/d2l-offscreen.svg

diff --git a/bower.json b/bower.json
@@ -17,31 +17,38 @@
     "web component"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#1.9 - 2"
+    "polymer": "1 - 2"
   },
   "devDependencies": {
-    "d2l-demo-template": "0.0.12 - 1.0.1",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
+    "d2l-typography": "^6.0.0",
+    "iron-component-page": "1 - 2",
+    "iron-demo-helpers": "1 - 2",
+    "web-component-tester": "^6.0.0"
   },
   "variants": {
     "1.x": {
       "dependencies": {
-        "polymer": "Polymer/polymer#1.9"
+        "polymer": "^1.9.1"
       },
       "devDependencies": {
-        "d2l-demo-template": "^0.0.12",
-        "web-component-tester": "Polymer/web-component-tester#^4.0.0"
+        "iron-component-page": "^1.1.9",
+        "iron-demo-helpers": "^1.2.6"
       },
       "resolutions": {
         "webcomponentsjs": "^0.7"
       }
     }
   },
+  "resolutions": {
+    "webcomponentsjs": "^v1.0.0"
+  },
   "ignore": [
     ".editorconfig",
-    ".eslintrc",
+    ".eslintrc.json",
     ".gitignore",
     ".travis.yml",
-    "package.json"
+    "package.json",
+    "polymer.json",
+    "test"
   ]
 }
diff --git a/d2l-offscreen.html b/d2l-offscreen.html
@@ -1,5 +1,13 @@
 <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>
 		<style include="d2l-offscreen-shared-styles">

diff --git a/demo/index.html b/demo/index.html
@@ -1,20 +1,39 @@
-<html>
-<head>
-	<title>d2l-offscreen</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-	<link rel="import" href="../../d2l-demo-template/d2l-demo-template.html">
-	<link rel="import" href="../d2l-offscreen.html">
-</head>
-<body unresolved>
+<!doctype html>
+<html lang="en">
+	<head>
+		<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>
+			<style is="custom-style" include="demo-pages-shared-styles"></style>
+		</custom-style>
+		<custom-style include="d2l-typography">
+			<style is="custom-style" include="d2l-typography"></style>
+		</custom-style>
+		<style>
+			html {
+				font-size: 20px;
+			}
+			</style>
+	</head>
+	<body unresolved class="d2l-typography">
+		<div class="vertical-section-container centered">
 
-	<d2l-demo-template title="d2l-offscreen">
+			<h3>Offscreen</h3>
+			<demo-snippet>
+				<template>
+					<div>
+						Some offscreen content:
+						<d2l-offscreen>This message will only be visible to assistive technology, such as a screen reader.</d2l-offscreen>
+					</div>
+				</template>
+			</demo-snippet>
 
-		<div slot="d2l-demo-fixture" class="d2l-demo-fixture">
-			Some offscreen content: <d2l-offscreen>this should be offscreen</d2l-offscreen><d2l-offscreen>this should be offscreen</d2l-offscreen>
 		</div>
-
-	</d2l-demo-template>
-
-</body>
+	</body>
 </html>
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!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
@@ -1,13 +1,12 @@
 {
   "name": "d2l-offscreen",
-  "version": "2.2.1",
   "description": "Polymer web component and Sass mixin for positioning elements offscreen",
   "private": true,
   "scripts": {
-    "postinstall": "bower install",
-    "test": "npm run test:lint:html && npm run test:lint:wc",
+    "postinstall": "polymer install --variants",
     "test:lint:html": "eslint *.html",
-    "test:lint:wc": "polymer lint d2l-offscreen.html"
+    "test:lint:wc": "polymer lint",
+    "test": "npm run test:lint:html && npm run test:lint:wc"
   },
   "repository": {
     "type": "git",
@@ -30,9 +29,9 @@
   },
   "homepage": "https://github.com/BrightspaceUI/offscreen",
   "devDependencies": {
-    "eslint": "^2.5.3",
-    "eslint-config-brightspace": "^0.2.1",
-    "eslint-plugin-html": "^1.4.0",
-    "polymer-cli": "^1.1.0"
+    "eslint": "^4.15.0",
+    "eslint-config-brightspace": "^0.4.0",
+    "eslint-plugin-html": "^4.0.1",
+    "polymer-cli": "^1.5.7"
   }
 }
diff --git a/test/.eslintrc → test/.eslintrc.json b/test/.eslintrc → test/.eslintrc.json
diff --git a/wct.conf.json b/wct.conf.json
@@ -28,7 +28,7 @@
 				{
 					"browserName": "safari",
 					"platform": "OS X 10.12",
-					"version": "10.0"
+					"version": ""
 				},
 				{
 					"browserName": "microsoftedge",