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

Polymer2.0 preview
predixdesignsystem · Nov 7, 2017 · 8eb7a3d · 8eb7a3d
2 parents a25c3ae + 55620fb
commit 8eb7a3d
Show file tree

Hide file tree

Showing 16 changed files with 168 additions and 416 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,5 @@ bower_components
 .idea
 reports
 css/noprefix
-npm-debug.log
+bower_components-*/
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
@@ -14,10 +14,8 @@ addons:
     packages:
     - google-chrome-stable
 before_script:
-- npm install web-component-tester@^5.0.0
-- npm install bower
-- export PATH=$PWD/node_modules/.bin:$PATH
-- bower install
+- yarn add polymer-cli
+- polymer install --variants
 script:
 - xvfb-run wct --skip-plugin sauce
 - if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --plugin sauce --skip-plugin

diff --git a/HISTORY.md b/HISTORY.md
@@ -1,3 +1,7 @@
+v2.1.0
+==================
+* Polymer 1.x/2.x hybrid support
+
 v2.0.20
 ==================
 * add device flags

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "px-icon-set",
-  "version": "2.0.20",
+  "version": "2.1.0",
   "description": "Polymer component to allow easy use of Predix icons",
   "main": "px-icon-set.html",
   "ignore": [
@@ -22,7 +22,7 @@
     "examples"
   ],
   "dependencies": {
-    "polymer": "^1.9.0",
+    "polymer": "#1.9 - 2",
     "iron-iconset-svg": "^2.0.0",
     "iron-icon": "^2.0.0",
     "iron-flex-layout": "^2.0.0"
@@ -31,9 +31,23 @@
     "px-theme": "^3.0.0",
     "px-code-design": "^2.0.0",
     "px-toggle-design": "^2.0.0",
-    "px-demo": "^2.0.0"
+    "web-component-tester": "^6.3.0",
+    "px-demo": "^3.0.0"
   },
   "resolutions": {
-    "webcomponentsjs": "^0.7.24"
+    "webcomponentsjs": "^1.0.0"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "^1.9.0"
+      },
+      "devDependencies": {
+        "web-component-tester": "^5.0.0"
+      },
+      "resolutions": {
+        "webcomponentsjs": "^0.7.0"
+      }
+    }
   }
 }
diff --git a/demo/px-icon-set-demo.html b/demo/px-icon-set-demo.html
@@ -3,7 +3,6 @@
 
 <!-- Common demo imports -->
 <link rel="import" href="../../px-demo/px-demo-header.html" />
-<link rel="import" href="../../px-demo/px-demo-api-viewer.html" />
 <link rel="import" href="../../px-demo/px-demo-footer.html" />
 <link rel="import" href="../../px-demo/px-demo-configs.html" />
 <link rel="import" href="../../px-demo/px-demo-props.html" />
@@ -55,18 +54,19 @@
     <!-- 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>
 
       <!-- Component ---------------------------------------------------------->
-      <px-demo-component>
+      <px-demo-component slot="px-demo-component">
         <px-icon id="demoIcon" icon="[[props.icon.value]]"></px-icon>
       </px-demo-component>
       <!-- END Component ------------------------------------------------------>
 
       <px-demo-component-snippet
+          slot="px-demo-component-snippet"
           element-properties="{{_propsSubset(props.*)}}"
           element-name="px-icon"
           parent-name="px-icon-set"

diff --git a/examples/use-iron-icon.html b/examples/use-iron-icon.html
@@ -1,56 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Example: px-icon-set</title>
-
-  <!--
-      Fast bootstrapping of the webcomponents-lite library. Only loads the library
-      if the browser doesn't natively support web components.
-    -->
-    <script type="text/javascript">
-    (function() {
-      'use strict';
-
-      var onload = function() {
-        // For native Imports, manually fire WebComponentsReady so user code
-        // can use the same code path for native and polyfill'd imports.
-        if (!window.HTMLImports) {
-          document.dispatchEvent(
-            new CustomEvent('WebComponentsReady', {bubbles: true})
-          );
-        }
-      };
-
-      var webComponentsSupported = (
-        'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
-      );
-
-      if (!webComponentsSupported) {
-        var script = document.createElement('script');
-        script.async = true;
-        script.src = '../webcomponentsjs/webcomponents-lite.min.js';
-        script.onload = onload;
-        document.head.appendChild(script);
-      } else {
-        onload();
-      }
-    })();
-    </script>
-
-  <link rel="import" href="../../polymer/polymer.html"/>
-
-  <!--Import the icon set-->
-  <link rel="import" href="../px-icon-set.html"/>
-
-  <!--Import the px-icon-->
-  <link rel="import" href="../../iron-icon/iron-icon.html"/>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Example: use px-icon-set icons in iron-icon</title>
+
+    <!-- Load polyfills and Polymer library -->
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../polymer/polymer.html"/>
+    <link rel="import" href="../../polymer/lib/elements/dom-bind.html">
+
+    <!-- Load theme -->
+    <link rel="import" href="../../px-theme/px-theme-styles.html"/>
+    <custom-style>
+      <style is="custom-style" include="px-theme-styles"></style>
+    </custom-style>
 
-</head>
-<body>
-  <template is="dom-bind">
+    <!-- Load components -->
+    <link rel="import" href="../px-icon-set.html"/>
+    <link rel="import" href="../../iron-icon/iron-icon.html"/>
+  </head>
+  <body>
     <custom-style>
       <style is="custom-style">
         body {
@@ -112,6 +83,5 @@ <h3>You will have to reverse the stroke and fill in CSS</h3>
       <p>Custom size (using CSS)</p>
       <iron-icon class="custom-size inverse-color" icon="px-fea:deployments"></iron-icon>
     </div>
-  </template>
-</body>
+  </body>
 </html>
diff --git a/examples/use-px-icon.html b/examples/use-px-icon.html
@@ -1,56 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Example: px-icon-set</title>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Example: px-icon-set</title>
 
-  <!--
-      Fast bootstrapping of the webcomponents-lite library. Only loads the library
-      if the browser doesn't natively support web components.
-    -->
-    <script type="text/javascript">
-    (function() {
-      'use strict';
+    <!-- Load polyfills and Polymer library -->
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../polymer/polymer.html"/>
+    <link rel="import" href="../../polymer/lib/elements/dom-bind.html">
 
-      var onload = function() {
-        // For native Imports, manually fire WebComponentsReady so user code
-        // can use the same code path for native and polyfill'd imports.
-        if (!window.HTMLImports) {
-          document.dispatchEvent(
-            new CustomEvent('WebComponentsReady', {bubbles: true})
-          );
-        }
-      };
-
-      var webComponentsSupported = (
-        'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
-      );
-
-      if (!webComponentsSupported) {
-        var script = document.createElement('script');
-        script.async = true;
-        script.src = '../webcomponentsjs/webcomponents-lite.min.js';
-        script.onload = onload;
-        document.head.appendChild(script);
-      } else {
-        onload();
-      }
-    })();
-    </script>
-
-  <link rel="import" href="../../polymer/polymer.html"/>
-
-  <!--Import the icon set-->
-  <link rel="import" href="../px-icon-set.html"/>
-
-  <!--Import the px-icon-->
-  <link rel="import" href="../px-icon.html"/>
+    <!-- Load theme -->
+    <link rel="import" href="../../px-theme/px-theme-styles.html"/>
+    <custom-style>
+      <style is="custom-style" include="px-theme-styles"></style>
+    </custom-style>
 
-</head>
-<body>
-  <template is="dom-bind">
+    <!-- Load components -->
+    <link rel="import" href="../px-icon-set.html"/>
+    <link rel="import" href="../px-icon.html"/>
+  </head>
+  <body>
     <custom-style>
       <style is="custom-style">
         body {
@@ -110,6 +81,5 @@ <h3>Using px-icon, the icons auto size depending on their optimized size</h3>
       <p>Custom size (using CSS variables)</p>
       <px-icon class="custom-size" icon="px-fea:deployments"></px-icon>
     </div>
-  </template>
-</body>
+  </body>
 </html>
diff --git a/index.html b/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 {
@@ -42,20 +42,22 @@
     <!--
       Load the Polymer library.
     -->
-    <link rel="import" href="../polymer/polymer.html" />
+    <link rel="import" href="../polymer/polymer.html"/>
 
     <!--
       Load theme files, apply 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>
 
     <!--
       Load dark theme files for later use. Stamp dynamic theme switcher, which
       listens for theme update messages from the parent page and applies them.
     -->
-    <link defer rel="import" href="../px-dark-theme/px-dark-theme-styles.html">
-    <link defer rel="import" href="../px-dark-demo-theme/px-dark-demo-theme-styles.html">
+    <link defer rel="import" href="../px-dark-theme/px-dark-theme-styles.html"/>
+    <link defer rel="import" href="../px-dark-demo-theme/px-dark-demo-theme-styles.html"/>
     <link defer rel="import" href="../px-demo/px-demo-theme-switcher.html"/>
     <px-demo-theme-switcher-frame id="themeMessenger" origin="https://www.predix-ui.com"></px-demo-theme-switcher-frame>
     <px-demo-theme-switcher id="themeSwitcher"></px-demo-theme-switcher>
@@ -73,16 +75,12 @@
       Asynchronously import the px-catalog element, which is the entrypoint
       for our application.
     -->
-    <link
-        async
-        id="main-element-import"
-        rel="import"
-        href="demo/px-icon-set-demo.html">
+    <link async rel="import" href="demo/px-icon-set-demo.html"/>
 
     <!--
       Load the app icon and manifest for Android devices.
     -->
-    <link defer rel="icon" href="favicon.ico" type="image/x-icon" />
+    <link defer rel="icon" href="favicon.ico" type="image/x-icon"/>
 
     <!--
       Basic page styles.
@@ -96,8 +94,6 @@
   </head>
 
   <body>
-    <!-- Elements wait on the page and are upgraded after demo/index.html is loaded. -->
     <px-icon-set-demo></px-icon-set-demo>
-
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "px-icon-set",
-    "version": "2.0.20",
+    "version": "2.1.0",
     "description": "Base icon styles for Predix UI",
     "private": false,
     "scripts": {

diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'px-icon-set-fixture.html?wc-shadydom=true&wc-ce=true&wc-shimcssproperties=true',
+        'px-icon-set-fixture.html?dom=shadow'
+      ]);
+    </script>
+  </body>
+</html>