Merge pull request #15 from PredixDev/polymer2.0-preview

Polymer2.0 preview

.gitignore

@@ -6,4 +6,6 @@ bower_components
 reports
 css/noprefix
 .yo-rc.json
-
+bower_components-*/
+bower-*.json
+monogram-wdmk.png

HISTORY.md

@@ -1,3 +1,7 @@
+v3.0.0
+==========================
+* Migrate to Polymer 1.x/2.x hybrid component
+
 v2.4.0
 ==========================
 * add indicators for device sizes

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "px-demo",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "main": [
     "px-demo.html"
   ],
@@ -23,37 +23,52 @@
     "wct.conf.json"
   ],
   "dependencies": {
-    "polymer": "^1.9.0",
+    "polymer": "1.9 - 2",
     "px-theme": "^3.0.0",
-    "px-dropdown": "^4.0.0",
-    "px-demo-snippet": "^1.0.0",
-    "px-api-viewer": "^1.0.0",
-    "px-tabs": "^2.0.0",
+    "px-dropdown": "polymer2.0-preview",
+    "px-demo-snippet": "polymer2.0-preview",
+    "px-api-viewer": "polymer2.0-preview",
+    "px-tabs": "polymer2.0-preview",
     "px-demo-design": "^2.0.0",
-    "px-overlay": "^1.0.0",
+    "px-overlay": "polymer2.0-preview",
     "iron-a11y-keys": "^2.0.0",
-    "px-code-editor": "^2.0.0",
-    "px-view-header": "^1.0.0",
-    "px-deck-selector": "^2.0.0",
-    "px-typeahead": "^2.0.0",
-    "px-toggle": "^2.0.0"
+    "px-code-editor": "polymer2.0-preview",
+    "px-view-header": "polymer2.0-preview",
+    "px-deck-selector": "polymer2.0-preview",
+    "px-typeahead": "polymer2.0-preview",
+    "px-toggle": "polymer2.0-preview"
   },
   "devDependencies": {
     "px-forms-design": "^2.0.0",
     "px-tables-design": "^2.0.0",
-    "px-icon-set": "^2.0.0",
+    "px-icon-set": "polymer2.0-preview",
     "px-list-inline-design": "^1.0.0",
     "px-toggle-design": "^2.0.0",
     "px-headings-design": "^1.0.0",
     "px-actionable-design": "^2.0.0",
     "px-code-design": "^2.0.0",
     "px-meta-lists-design": "^1.0.0",
     "px-starter-kit-design": "^1.0.0",
-    "px-calendar-picker": "^1.0.0",
     "iron-demo-helpers": "^2.0.0",
-    "px-buttons-design": "^2.0.0"
+    "px-buttons-design": "^2.0.0",
+    "web-component-tester": "^6.3.0"
   },
   "resolutions": {
-    "webcomponentsjs": "^0.7.24"
+    "webcomponentsjs": "^1.0.0",
+    "px-dropdown": "polymer2.0-preview",
+    "px-icon-set": "polymer2.0-preview"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "^1.9.0"
+      },
+      "devDependencies": {
+        "web-component-tester": "^4.0.0"
+      },
+      "resolutions": {
+        "webcomponentsjs": "^0.7.0"
+      }
+    }
   }
 }

demo/index.html

@@ -18,7 +18,9 @@
 <!-- Demo DOM module -->
 <dom-module id="local-element-demo">
   <template>
-    <style include="px-demo-styles" is="custom-style"></style>
+    <custom-style>
+      <style include="px-demo-styles" is="custom-style"></style>
+    </custom-style>
 
     <!-- Header -->
     <px-demo-header
@@ -30,16 +32,16 @@
     <!-- Interactive -->
     <px-demo-interactive>
       <!-- Configs -->
-      <px-demo-configs configs="[[configs]]" props="{{props}}" chosen-config="{{chosenConfig}}"></px-demo-configs>
+      <px-demo-configs slot="px-demo-configs" configs="[[configs]]" props="{{props}}" chosen-config="{{chosenConfig}}"></px-demo-configs>
 
       <!-- Props -->
-      <px-demo-props props="{{props}}" config="[[chosenConfig]]"></px-demo-props>
+      <px-demo-props slot="px-demo-props" props="{{props}}" config="[[chosenConfig]]"></px-demo-props>
 
       <!-- Code Editor -->
-      <px-demo-code-editor props="{{props}}" config="[[chosenConfig]]"></px-demo-code-editor>
+      <px-demo-code-editor slot="px-demo-code-editor" props="{{props}}" config="[[chosenConfig]]"></px-demo-code-editor>
 
       <!-- Component ---------------------------------------------------------->
-      <px-demo-component>
+      <px-demo-component slot="px-demo-component">
         <template is="dom-if" if="{{props.preventRangeSelection.value}}">
           <p class="u-mb0 u-mt0">Event fired: <strong>px-calendar-selected</strong></p>
           <p class="zeta u-mt0 u-mb++">See API Reference below for more details</p>
@@ -66,6 +68,7 @@
       <!-- END Component ------------------------------------------------------>
 
       <px-demo-component-snippet
+          slot="px-demo-component-snippet"
           element-properties="{{props}}"
           element-name="px-calendar-picker"
           links-includes="[[linksIncludes]]">

index.html

@@ -30,7 +30,7 @@
       if (!webComponentsSupported) {
         var script = document.createElement('script');
         script.async = true;
-        script.src = '../webcomponentsjs/webcomponents-lite.min.js';
+        script.src = '../webcomponentsjs/webcomponents-lite.js';
         script.onload = onload;
         document.head.appendChild(script);
       } else {
@@ -48,7 +48,9 @@
       Load the light theme (default theme).
     -->
     <link rel="import" href="../px-theme/px-theme-styles.html">
-    <style include="px-theme-styles" is="custom-style"></style>
+    <custom-style>
+      <style include="px-theme-styles" is="custom-style"></style>
+    </custom-style>
 
     <!--
       Asynchronously import the px-catalog element, which is the entrypoint

package.json

@@ -2,7 +2,7 @@
     "name": "px-demo",
     "author": "General Electric",
     "description": "A Predix UI Demo Component",
-    "version": "2.4.0",
+    "version": "3.0.0",
     "private": false,
     "extName" : null,
     "repository" :

px-demo-footer.html

@@ -28,7 +28,7 @@
     <footer class="demo-background--footer flex flex--center">
       <div class="demo-footer__container u-pv">
         <div>
-          <a href="https://www.ge.com/digital"><img src="monogram-wdmk.png" alt="GE Monogram" class=""></a>
+          <a href="https://www.ge.com/digital"><img src="[[importPath]]monogram-wdmk.png" alt="GE Monogram" class=""></a>
         </div>
         <div class="demo-footer__list">
           <ul class="list-inline list-inline--delimited">

px-demo-interactive.html

@@ -28,12 +28,12 @@
 
     <!-- If a code editor instance was given, it will go outside everything
          because it appears as an overlay. -->
-    <content select="px-demo-code-editor"></content>
+    <slot name="px-demo-code-editor"></slot>
 
     <section class="demo-background--interactive">
       <!-- Tabs go above -->
       <div class="[ u-ph++ u-pt++ ]">
-        <content select="px-demo-configs"></content>
+        <slot name="px-demo-configs"></slot>
       </div>
 
       <!-- Wraps around all interactive -->
@@ -42,17 +42,17 @@
         <!-- The demo properties go in here -->
         <div class="demo-properties-container">
           <div id="propsContainer" class="demo-properties">
-            <content select="px-demo-props"></content>
+            <slot name="px-demo-props"></slot>
           </div>
         </div>
 
         <!-- The demo component and snippet go in here -->
         <div class="demo-component-code-container flex__item flex__item--msfix u-mt+">
           <div class=" demo-component-container u-p++">
-            <content select="px-demo-component"></content>
+            <slot name="px-demo-component"></slot>
           </div>
 
-          <content select="px-demo-component-snippet"></content>
+          <slot name="px-demo-component-snippet"></slot>
         </div>
 
       </article>

px-demo-theme-util.html

@@ -34,7 +34,7 @@
       // selector (all the color style vars are under this)
       var themeRootStyleRule = null;
       for (var i=0; i<themeCSSRules.length; i++) {
-        if (themeCSSRules[i].parsedSelector === ':root') {
+        if (themeCSSRules[i].parsedSelector === 'html') {
           themeRootStyleRule = themeCSSRules[i];
         }
       }