Merge pull request #122 from PolymerElements/2.0-preview

2.0-preview
PolymerElements · May 12, 2017 · c9291af · c9291af
2 parents 7f349a9 + f2b1fd0
commit c9291af
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 99 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-bower_components
+bower_components*
+bower-*.json
diff --git a/.travis.yml b/.travis.yml
@@ -1,24 +1,26 @@
 language: node_js
 sudo: required
 before_script:
-  - npm install -g bower polylint web-component-tester
-  - bower install
-  - polylint
+  - npm install -g polymer-cli
+  - polymer install --variants
 env:
   global:
     - secure: >-
         OqWtaAPVAWrMk+C50ECYQBxTBjJNnhVargB5yCMMhZdRruUV8qP64lI+rme+pPzLOOZZyjiepjvPycLxHe8ha8pW2FYxz4mpPwHjcgodEN+VypiXf7JtxfUXF2R7J6I0tI+oGlS/d9eJgl5HQmTjJqNjop6rTqCAH6tXuOo8PXs=
     - secure: >-
         SnvNLWCibiemlbhjr+r+lSRKZD1bbGuqGfp9kNGWDqjzMh8R2DuNNtp10vBlNDQiotkK/J9jTdq11ng1Brk2YGF/65TRI5Vj9VxfsOuKuzLAmNUlfteYFDI7PMVeeB9FcgC0b51DBXKeyNr/sD5VmUqUoIrtDfKUT1pHaMZHAjQ=
-node_js: '6'
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
     packages:
       - google-chrome-stable
+  sauce_connect: true
 script:
-  - xvfb-run wct
-  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
 dist: trusty
diff --git a/bower.json b/bower.json
@@ -13,25 +13,42 @@
     "type": "git",
     "url": "git://github.com/PolymerElements/iron-component-page.git"
   },
-  "version": "1.1.9",
+  "version": "2.0.0",
   "private": true,
   "license": "http://polymer.github.io/LICENSE.txt",
   "dependencies": {
-    "hydrolysis": "Polymer/hydrolysis#^1.18",
-    "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
-    "iron-doc-viewer": "PolymerElements/iron-doc-viewer#^1.0.1",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
-    "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
-    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
-    "polymer": "Polymer/polymer#^1.1.0"
+    "app-layout": "PolymerElements/app-layout#2.0-preview",
+    "hydrolysis": "Polymer/polymer-analyzer#hydrolysis-1.x",
+    "iron-ajax": "PolymerElements/iron-ajax#2.0-preview",
+    "iron-doc-viewer": "PolymerElements/iron-doc-viewer#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-icons": "PolymerElements/iron-icons#2.0-preview",
+    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
   },
   "devDependencies": {
-    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "app-layout": "PolymerElements/app-layout#^0.10.0",
+        "hydrolysis": "Polymer/hydrolysis#^1.18",
+        "iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
+        "iron-doc-viewer": "PolymerElements/iron-doc-viewer#^1.0.1",
+        "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+        "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+        "iron-selector": "PolymerElements/iron-selector#^1.0.0",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+        "polymer": "Polymer/polymer#^1.1.0"
+      },
+      "devDependencies": {
+        "web-component-tester": "^4.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+      }
+    }
   },
   "main": "iron-component-page.html",
   "ignore": []

diff --git a/demo/index.html b/demo/index.html
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../../iron-component-page/iron-component-page.html">
+  <link rel="import" href="../iron-component-page.html">
 
 </head>
 <body>

diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-component-page/iron-component-page.html">
+  <link rel="import" href="iron-component-page.html">
 </head>
 <body>
 

diff --git a/iron-component-page.html b/iron-component-page.html
@@ -15,29 +15,30 @@
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../iron-selector/iron-selector.html">
-<link rel="import" href="../paper-header-panel/paper-header-panel.html">
+<link rel="import" href="../app-layout/app-scroll-effects/effects/waterfall.html">
+<link rel="import" href="../app-layout/app-header/app-header.html">
+<link rel="import" href="../app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="../paper-styles/typography.html">
-<link rel="import" href="../paper-toolbar/paper-toolbar.html">
+<link rel="import" href="../app-layout/app-toolbar/app-toolbar.html">
 
 <!--
 Loads Polymer element and behavior documentation using
 [Hydrolysis](https://github.com/PolymerLabs/hydrolysis) and renders a complete
 documentation page including demos (if available).
 
 To display a warning inside an `iron-component-page` element,
-add the `.warning` class to a child.
+add the `warning` slot to a child.
 -->
 
 <dom-module id="iron-component-page">
   <template>
     <style>
       :host {
         font-family: 'Roboto', 'Noto', sans-serif;
-        @apply(--layout-fit);
-        @apply(--layout);
-        @apply(--layout-vertical);
-        overflow: hidden;
+        @apply --layout-fit;
+        @apply --layout;
+        @apply --layout-vertical;
         background: var(--paper-grey-50);
       }
 
@@ -49,54 +50,33 @@
         max-width: 20em;
       }
 
-      paper-header-panel {
-        @apply(--layout-flex);
+      app-header {
         background: var(--paper-grey-50);
       }
 
-      paper-toolbar {
-        --paper-toolbar-background: var(--paper-grey-50);
-        --paper-toolbar-color: var(--paper-grey-800);
-        flex-shrink: 0;
-      }
-
-      :host > paper-header-panel {
-        opacity: 0;
-        transition: opacity 0.5s;
-      }
-
-      :host(.loaded) > paper-header-panel {
-        opacity: 1.0;
-      }
-
-      #content {
-        display: block;
-        background: var(--paper-grey-50);
-      }
-
-      paper-toolbar a {
+      app-toolbar a {
         margin: 0 10px;
         cursor: pointer;
       }
 
-      paper-toolbar a:last-child {
+      app-toolbar a:last-child {
         margin-right: 0;
       }
 
-      paper-toolbar a, paper-toolbar a iron-icon {
+      app-toolbar a, app-toolbar a iron-icon {
         font-weight: normal;
         color: var(--paper-grey-500);
       }
 
-      paper-toolbar iron-icon {
+      app-toolbar iron-icon {
         margin: -2px 5px 0 0;
       }
 
-      paper-toolbar a.iron-selected, paper-toolbar a.iron-selected iron-icon {
+      app-toolbar a.iron-selected, app-toolbar a.iron-selected iron-icon {
         color: var(--paper-grey-800);
       }
 
-      paper-toolbar a:hover, paper-toolbar a:hover iron-icon {
+      app-toolbar a:hover, app-toolbar a:hover iron-icon {
         color: var(--paper-pink-500);
       }
 
@@ -105,7 +85,7 @@
       }
 
       #demo iframe {
-        @apply(--layout-fit);
+        @apply --layout-fit;
       }
 
       #nodocs {
@@ -134,7 +114,7 @@
 
       #docs {
         max-width: var(--iron-component-page-max-width, 48em);
-        @apply(--iron-component-page-container);
+        @apply --iron-component-page-container;
         padding: 20px;
         margin: 0 auto;
       }
@@ -146,7 +126,7 @@
         background: transparent;
       }
 
-      paper-toolbar a {
+      app-toolbar a {
         font-size: 14px;
         text-transform: uppercase;
         cursor: pointer;
@@ -163,7 +143,7 @@
 
       #catalog-heading h2 {
         color: var(--paper-grey-800);
-        @apply(--paper-font-title);
+        @apply --paper-font-title;
         margin: 0;
       }
 
@@ -192,44 +172,46 @@
       }
 
       .no-docs {
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
-        @apply(--layout-fit);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
+        @apply --layout-fit;
       }
 
       .docs-header {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
     </style>
 
     <hydrolysis-analyzer id="analyzer" src="[[_srcUrl]]" transitive="[[transitive]]" clean analyzer="{{_hydroDesc}}" loading="{{_hydroLoading}}"></hydrolysis-analyzer>
     <iron-ajax id="ajax" url="[[docSrc]]" handle-as="json" on-response="_handleAjaxResponse" on-error="_handleError"></iron-ajax>
 
-    <paper-header-panel id="headerPanel" mode="[[scrollMode]]">
-      <paper-toolbar catalog-hidden>
-        <div class="docs-header">
-          <!-- TODO: Replace with paper-dropdown-menu when available -->
-          <select id="active" value="[[active]]" on-change="_handleMenuItemSelected">
-            <template is="dom-repeat" items="[[docElements]]">
-              <option value="[[item.is]]">[[item.is]]</option>
-            </template>
-            <template is="dom-repeat" items="[[docBehaviors]]">
-              <option value="[[item.is]]">[[item.is]]</option>
-            </template>
-          </select>
-        </div>
-        <iron-selector attr-for-selected="view" selected="{{view}}" id="links" hidden$="[[!docDemos.length]]">
-          <a view="docs"><iron-icon icon="description"></iron-icon> Docs</a>
-          <a view="[[_demoView(docDemos.0.path)]]"><iron-icon icon="visibility"></iron-icon> <span>Demo</span></a>
-        </iron-selector>
-      </paper-toolbar>
+    <app-header-layout has-scrolling-region>
+      <app-header id="headerPanel" fixed slot="header" effects="waterfall">
+        <app-toolbar catalog-hidden>
+          <div class="docs-header">
+            <!-- TODO: Replace with paper-dropdown-menu when available -->
+            <select id="active" value="[[active]]" on-change="_handleMenuItemSelected">
+              <template is="dom-repeat" items="[[docElements]]">
+                <option value="[[item.is]]">[[item.is]]</option>
+              </template>
+              <template is="dom-repeat" items="[[docBehaviors]]">
+                <option value="[[item.is]]">[[item.is]]</option>
+              </template>
+            </select>
+          </div>
+          <iron-selector attr-for-selected="view" selected="{{view}}" id="links" hidden$="[[!docDemos.length]]">
+            <a view="docs"><iron-icon icon="description"></iron-icon> Docs</a>
+            <a view="[[_demoView(docDemos.0.path)]]"><iron-icon icon="visibility"></iron-icon> <span>Demo</span></a>
+          </iron-selector>
+        </app-toolbar>
+      </app-header>
       <div id="content">
         <iron-selector id="view" selected="[[_viewType(view)]]" attr-for-selected="id">
           <div id="docs">
             <div id="catalog-heading" catalog-only>
               <h2><span>[[active]]</span> <span class="version" hidden$="[[!version]]">[[version]]</span></h2>
             </div>
-            <content select=".warning"></content>
+            <slot name="warning"></slot>
             <iron-doc-viewer prefix="[[_fragmentPrefix]]" id="viewer" descriptor="{{_activeDescriptor}}"
               on-iron-doc-viewer-component-selected="_handleComponentSelectedEvent"></iron-doc-viewer>
             <div id="nodocs" hidden$="[[_activeDescriptor]]" class="no-docs">
@@ -239,7 +221,7 @@ <h2><span>[[active]]</span> <span class="version" hidden$="[[!version]]">[[versi
           <div id="demo"></div>
         </iron-selector>
       </div>
-    </paper-header-panel>
+    </app-header-layout>
   </template>
 
   <script>
@@ -374,15 +356,6 @@ <h2><span>[[active]]</span> <span class="version" hidden$="[[!version]]">[[versi
             readOnly: true
           },
 
-          /**
-           * The scroll mode for the page. For details about the modes,
-           * see the mode property in paper-header-panel.
-           */
-          scrollMode: {
-            type: String,
-            value: 'waterfall'
-          },
-
           /**
            * The currently displayed element.
            *
@@ -642,7 +615,7 @@ <h2><span>[[active]]</span> <span class="version" hidden$="[[!version]]">[[versi
           }
           this.async(function() { this.$.active.value = active; });
           if (analyzer && analyzer.elementsByTagName) {
-            this.$.headerPanel.scroller.scrollTop = 0;
+            this.$.headerPanel.scrollTarget.scrollTop = 0;
             this._activeDescriptor = this._findDescriptor(active);
             if (this._activeDescriptor) {
               var hasDemo;

diff --git a/test/index.html b/test/index.html
@@ -18,10 +18,10 @@
   <body>
     <script>
       WCT.loadSuites([
-        'iron-component-page.html',
-        'iron-component-page.html?dom=shadow'
+        'iron-component-page.html?dom=shadow',
+        'iron-component-page.html?wc-shadowdom=true&wc-ce=true'
       ]);
     </script>
-  
+
 
 </body></html>