Merge pull request #126 from awikkerink/hybridize-attempt

Hybridize attempt
BrightspaceUI · Aug 23, 2017 · 515cc3a · 515cc3a
2 parents d16ea07 + a888945
commit 515cc3a
Show file tree

Hide file tree

Showing 40 changed files with 1,093 additions and 864 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -8,6 +8,6 @@ insert_final_newline = true
 indent_style = tab
 indent_size = 4
 
-[{package.json,.travis.yml,.eslintrc}]
+[{*.json,*.yml}]
 indent_style = space
 indent_size = 2
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,5 @@
 bower_components
+bower_components-1.x
 node_modules
 dumps
 reports

diff --git a/.eslintrc → .eslintrc.json b/.eslintrc → .eslintrc.json
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
+bower-1.x.json
 bower_components
+bower_components-1.x
 node_modules
 reports
 *.css
-.DS_STORE
+.DS_STORE
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- 5.6
+- node
 cache:
   directories:
   - node_modules
@@ -23,8 +23,7 @@ before_install:
 - export JAVA_HOME=/usr/lib/jvm/java-8-oracle
 - export PATH=$JAVA_HOME/bin:$PATH
 script:
-- concurrently -p name -n lint:js,lint:wc,wct "npm run test:lint:js" "npm run test:lint:wc" "polymer test --skip-plugin local"
-- npm run test:galen:sauce
+- concurrently -p name -n lint:js,lint:wc,wct "npm run test:lint:js" "npm run test:lint:wc" "polymer test --skip-plugin local" && npm run test:galen:sauce
 env:
   global:
     SAUCE_USERNAME: Desire2Learn
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyf
 
 HTML:
 ```html
-<table is="d2l-table">
+<d2l-table><table class="d2l-table">
 	<thead>
 		<tr>
 			<th>Header column 1</th>
@@ -52,7 +52,7 @@ HTML:
 			<td>row 2 column 2</td>
 		</tr>
 	</tbody>
-</table>
+</table></d2l-table>
 ```
 
 #### Row Styles
@@ -61,7 +61,7 @@ HTML:
 
 HTML:
 ```html
-<table is="d2l-table">
+<d2l-table><table class="d2l-table">
 	<tr selected>
 		<td>selected</td>
 	</tr>
@@ -71,7 +71,7 @@ HTML:
 	<tr active selected>
 		<td>active and selected</td>
 	</tr>
-</table>
+</table></d2l-table>
 ```
 
 #### Header Icons
@@ -80,13 +80,13 @@ HTML:
 
 HTML:
 ```html
-<table is="d2l-table">
+<d2l-table><table class="d2l-table">
 	<thead>
 		<th>
-			<button is="d2l-table-col-sort-button">Ascending</button>
+			<d2l-table-col-sort-button>Ascending</d2l-table-col-sort-button>
 		</th>
 		<th>
-			<button is="d2l-table-col-sort-button" desc>Descending</button>
+			<d2l-table-col-sort-button desc>Descending</d2l-table-col-sort-button>
 		</th>
 	</thead>
 	<tbody>
@@ -99,7 +99,7 @@ HTML:
 		<td>654</td>
 	</tr>
 	</tbody>
-</table>
+</table></d2l-table>
 ```
 
 ### Usage in Production

diff --git a/bower.json b/bower.json
@@ -9,16 +9,35 @@
     "package.json"
   ],
   "dependencies": {
-    "polymer": "^1.9.1",
-    "d2l-colors": "^2.4.0",
-    "d2l-icons": "^3.3.0",
-    "iron-resizable-behavior": "^1.0.6",
+    "polymer": "1.9 - 2",
+    "d2l-colors": "^2.4.0 || ^3.1.0",
+    "d2l-icons": "^4.4.0",
+    "iron-resizable-behavior": "1 - 2",
     "Stickyfill": "^1.1.4"
   },
   "devDependencies": {
-    "d2l-demo-template": "^0.0.12",
-    "iron-component-page": "^1.1.9",
-    "polyperf": "https://github.com/Brightspace/polyperf.git",
+    "d2l-demo-template": "0.0.12 - 1",
+    "iron-component-page": "1 - 2",
     "web-component-tester": "^6.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "^1.9.3",
+        "d2l-colors": "^2.4.0",
+        "iron-resizable-behavior": "^1.0.6"
+      },
+      "devDependencies": {
+        "d2l-demo-template": "^0.0.12",
+        "iron-component-page": "^1.1.9",
+        "web-component-tester": "^4.0.0"
+      },
+      "resolutions": {
+        "webcomponentsjs": "^0.7"
+      }
+    }
+  },
+  "resolutions": {
+    "webcomponentsjs": "^1.0.2"
   }
 }
diff --git a/d2l-scroll-wrapper.html b/d2l-scroll-wrapper.html
@@ -127,98 +127,84 @@
 				overflow-x: auto;
 				width: 100%;
 				box-sizing: border-box;
-				@apply(--d2l-scroll-wrapper-inner);
+				@apply --d2l-scroll-wrapper-inner;
 			}
 
-			:host-context([dir="rtl"])[h-scrollbar] .wrapper,
+			:host([is-rtl][h-scrollbar]) .wrapper,
 			:host([h-scrollbar]) .wrapper {
-				@apply(--d2l-scroll-wrapper-h-scroll);
+				@apply --d2l-scroll-wrapper-h-scroll;
 			}
 
-			:host-context([dir="rtl"]):host([h-scrollbar]) .wrapper {
-				@apply(--d2l-scroll-wrapper-h-scroll);
-			}
-
-			:host-context([dir="rtl"])[scrollbar-right] .wrapper,
+			:host([is-rtl][scrollbar-right]) .wrapper,
 			:host([scrollbar-left]) .wrapper {
-				@apply(--d2l-scroll-wrapper-left);
-			}
-
-			:host-context([dir="rtl"]):host([scrollbar-right]) .wrapper {
-				@apply(--d2l-scroll-wrapper-left);
+				@apply --d2l-scroll-wrapper-left;
 			}
 
-			:host-context([dir="rtl"])[scrollbar-left] .wrapper,
+			:host([is-rtl][scrollbar-left]) .wrapper,
 			:host([scrollbar-right]) .wrapper {
-				@apply(--d2l-scroll-wrapper-right);
-			}
-
-			:host-context([dir="rtl"]):host([scrollbar-left]) .wrapper {
-				@apply(--d2l-scroll-wrapper-right);
+				@apply --d2l-scroll-wrapper-right;
 			}
 
 			.action {
-				@apply(--d2l-scroll-wrapper-action);
+				@apply --d2l-scroll-wrapper-action;
 			}
 			.sticky {
-				@apply(--d2l-scroll-wrapper-action-hidden);
-				@apply(--d2l-scroll-wrapper-sticky);
+				@apply --d2l-scroll-wrapper-action-hidden;
+				@apply --d2l-scroll-wrapper-sticky;
 			}
 
-			:host-context([dir="rtl"]) .left .action,
+			:host([is-rtl]) .left .action,
 			.right .action {
-				@apply(--d2l-scroll-wrapper-action-end);
+				@apply --d2l-scroll-wrapper-action-end;
 			}
 
-			:host-context([dir="rtl"]) .right .action,
+			:host([is-rtl]) .right .action,
 			.left .action {
-				@apply(--d2l-scroll-wrapper-action-start);
+				@apply --d2l-scroll-wrapper-action-start;
 			}
 
-			:host-context([dir="rtl"]) .left,
+			:host([is-rtl]) .left,
 			.right {
 				float: right;
 			}
 
-			:host-context([dir="rtl"]) .right,
+			:host([is-rtl]) .right,
 			.left {
 				float: left;
 			}
 
 			:host([h-scrollbar]) .sticky {
-				@apply(--d2l-scroll-wrapper-action-visible);
+				@apply --d2l-scroll-wrapper-action-visible;
 			}
 
 			/* Hide the start/end buttons depending on the state */
 			:host([scrollbar-right]) .right,
 			:host([scrollbar-left]) .left {
-				@apply(--d2l-scroll-wrapper-action-hidden);
+				@apply --d2l-scroll-wrapper-action-hidden;
 			}
 		</style>
-		<template is="dom-if" if="{{showActions}}" strip-whitespace>
+		<template is="dom-if" if="[[showActions]]" strip-whitespace>
 			<d2l-sticky-element class="left sticky" disabled="[[scrollbarLeft]]">
-				<button
-					is="d2l-icon-button"
+				<d2l-icon-button
 					class="action"
 					icon="[[startIcon]]"
 					on-tap="handleTapLeft"
 					tabindex="-1"
 					aria-hidden="true"
-				></button>
+				></d2l-icon-button>
 			</d2l-sticky-element>
 			<d2l-sticky-element class="right sticky" disabled="[[scrollbarRight]]">
-				<button
-					is="d2l-icon-button"
+				<d2l-icon-button
 					class="action"
 					icon="[[endIcon]]"
 					on-tap="handleTapRight"
 					tabindex="-1"
 					aria-hidden="true"
-				></button>
+				></d2l-icon-button>
 			</d2l-sticky-element>
 		</template>
 		<div id="wrapper" class="wrapper">
-			<content id="content"></content>
+			<slot></slot>
 		</div>
 	</template>
 	<script>
@@ -343,10 +329,11 @@
 						value: 'd2l-tier1:chevron-right'
 					},
 
-					isRTL: {
+					isRtl: {
 						type: Boolean,
 						value: false,
-						computed: '_calculateRTL(isAttached)'
+						computed: '_calculateRTL(isAttached)',
+						reflectToAttribute: true
 					},
 
 					showActions: Boolean
@@ -416,7 +403,7 @@
 
 				/* Scrolls the set distance. positive === right, negative === left. Reversed when dir=rtl */
 				scrollDistance: function(distance, smooth) {
-					if (this.isRTL) {
+					if (this.isRtl) {
 						if (this.scrollRtlReverse) {
 							this.scroll(this.$.wrapper.scrollLeft + distance, smooth);
 						} else {
@@ -464,7 +451,7 @@
 				checkScrollThresholds: function() {
 					var lowerScrollValue = this.$.wrapper.scrollWidth - this.$.wrapper.offsetWidth - Math.abs(this.$.wrapper.scrollLeft);
 
-					if (this.isRTL && this.scrollRtlDefault) {
+					if (this.isRtl && this.scrollRtlDefault) {
 						this._setScrollbarRight(this.$.wrapper.scrollLeft === 0);
 						this._setScrollbarLeft(lowerScrollValue <= 0);
 					} else {

diff --git a/d2l-sticky-element.html b/d2l-sticky-element.html
@@ -13,9 +13,10 @@
 				position: sticky;
 				top: 0;
 				z-index: 1;
+				line-height: 0;
 			}
 		</style>
-		<content></content>
+		<slot></slot>
 	</template>
 	<script>
 		/* global Stickyfill */
@@ -37,13 +38,17 @@
 					return;
 				}
 				var sticky = !this.disabled;
-				if (sticky) {
-					Stickyfill.add(this);
-					this._added = true;
-				} else if (this._added) {
-					Stickyfill.remove(this);
-					this._added = false;
-				} else {
+				try {
+					if (sticky) {
+						Stickyfill.add(this);
+						this._added = true;
+					} else if (this._added) {
+						Stickyfill.remove(this);
+						this._added = false;
+					} else {
+						return;
+					}
+				} catch (e) {
 					return;
 				}
 				Stickyfill.rebuild();

diff --git a/d2l-table-col-sort-button.html b/d2l-table-col-sort-button.html
@@ -23,29 +23,30 @@
 					text-decoration: underline;
 				};
 			}
-			:host(::-moz-focus-inner) {
+			button::-moz-focus-inner {
 				border: 0;
 			}
-			:host {
-				@apply(--d2l-table-col-sort-button);
+			button {
+				@apply --d2l-table-col-sort-button;
 			}
-			:host(:disabled) {
+			button:disabled {
 				opacity: 0.5;
 			}
-			:host(:hover),
-			:host(:focus) {
-				@apply(--d2l-table-col-sort-button-hover);
+			button:hover,
+			button:focus {
+				@apply --d2l-table-col-sort-button-hover;
 			}
 		</style>
-		<content></content>
-		<template is="dom-if" if="{{!nosort}}" strip-whitespace>
-			<d2l-table-col-sort desc="[[desc]]"></d2l-table-col-sort>
-		</template>
+		<button>
+			<slot></slot>
+			<template is="dom-if" if="{{!nosort}}" strip-whitespace>
+				<d2l-table-col-sort desc="[[desc]]"></d2l-table-col-sort>
+			</template>
+		</button>
 	</template>
 	<script>
 		Polymer({
 			is: 'd2l-table-col-sort-button',
-			extends: 'button',
 
 			properties: {
 				desc: Boolean,