major overhaul

WillHutt · Jan 28, 2016 · 98a467f · 98a467f
1 parent 2219970
commit 98a467f
Show file tree

Hide file tree

Showing 9 changed files with 709 additions and 369 deletions.
diff --git a/README.md b/README.md
@@ -9,13 +9,9 @@ See [component page](http://zecat.github.io/paper-stepper)
 
 ## todo
 
-- apply material layout
 - horizontal layout
-- add connector line
 - add summarize
-- cancel button action ?
+- cancel button action
 - add doc
-- better demo
-- alternativeLabel
+- add test
 - mobileStep
-- add events
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-stepper",
-  "version": "1.1.0",
+  "version": "2.0-alpha",
   "authors": [
     "Zecat <[email protected]>"
   ],
@@ -22,15 +22,16 @@
     "paper-button": "PolymerElements/paper-button#~1.0.11",
     "iron-icons": "PolymerElements/iron-icons#~1.1.1",
     "paper-styles": "PolymerElements/paper-styles#~1.1.2",
-    "iron-dropdown": "PolymerElements/iron-dropdown#~1.1.0",
     "paper-ripple": "PolymerElements/paper-ripple#~1.0.5",
     "iron-selector": "PolymerElements/iron-selector#~1.0.8",
-    "iron-checked-element-behavior": "PolymerElements/iron-checked-element-behavior#~1.0.4",
     "iron-icon": "PolymerElements/iron-icon#~1.0.7",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.2.2",
-    "neon-animation": "PolymerElements/neon-animation#~1.0.9",
+    "neon-animation": "PolymerElements/neon-animation#~1.1.0",
     "paper-input": "PolymerElements/paper-input#~1.1.4",
-    "neon-advanced-animations": "Zecat/neon-advanced-animations#~1.1.0",
+    "neon-advanced-animations": "Zecat/neon-advanced-animations#master",
+    "iron-label": "PolymerElements/iron-label#~1.0.2",
+    "paper-badge": "PolymerElements/paper-badge#~1.1.1",
+    "paper-material": "PolymerElements/paper-material#~1.0.6",
     "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#~1.0.5"
   },
   "devDependencies": {

diff --git a/demo/index.html b/demo/index.html
@@ -16,6 +16,7 @@
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="../../paper-input/paper-input.html">
     <link rel="import" href="../../paper-input/paper-textarea.html">
+    <link rel="import" href="../../paper-styles/shadow.html">
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
     <link rel="import" href="../../iron-form/iron-form.html">
@@ -24,44 +25,54 @@
   </head>
   <body unresolved>
 
-  <style include="demo-pages-shared-styles">
+  <style is="custom-style" include="demo-pages-shared-styles">
     .vertical-section-container {
       max-width: 700px;
       margin: auto;
     }
+    demo-snippet {
+      --demo-snippet-demo: {
+        padding: 0;
+      };
+    }
   </style>
 
   <div class="vertical-section-container">
     <demo-snippet>
       <template>
-        <paper-stepper linear>
-          <paper-step id="step" label="Create an account" summarize="Summarize if needed">
-            <form is="iron-form" id="form" method="post" action="/">
+        <paper-stepper vertical>
+          <paper-step id="step1" label="Create an account" summarize="Summarize if needed">
+            <form is="iron-form" id="form1" method="post" action="/">
               <paper-input label="Pseudo*" required error-message="required"></paper-input>
               <paper-input type="password" label="Password"></paper-input>
               <paper-input type="password" label="Confirm password"></paper-input>
             </form>
           </paper-step>
-          <paper-step editable label="Enter personal informations" optional>
+          <paper-step label="Enter personal informations">
             <paper-input label="Name"></paper-input>
             <paper-input label="Address"></paper-input>
           </paper-step>
-          <paper-step label="Write a word about you">
+          <paper-step label="Write a word about you" editable optional>
+            <paper-textarea label="Your description" rows=3></paper-textarea>
+          </paper-step>
+          <paper-step label="Enter personal informations">
+            <paper-input label="Name"></paper-input>
+            <paper-input label="Address"></paper-input>
+          </paper-step>
+          <paper-step label="Write a word about you" optional>
             <paper-textarea label="Your description" rows=3></paper-textarea>
           </paper-step>
         </paper-stepper>
+        <script>
+          // var step1 = document.getElementById('step1');
+          // var form1 = document.getElementById('form1');
+          // step1._getValidity = function() {
+          //   return form1.validate();
+          // };
+        </script>
       </template>
     </demo-snippet>
   </div>
 
-  <script>
-    var step = document.getElementById('step');
-    var form = document.getElementById('form');
-
-    step._getValidity = function() {
-      return form.validate();
-    }
-  </script>
-
   </body>
 </html>