RubyGems - polymer-gold-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-gold-rails 1.0.0.pre.rc.1

Files changed (202) hide show

data/app/assets/components/gold-cc-input/test/index.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>gold-cc-input tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'basic.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/gold-elements/README.md ADDED Viewed

@@ -0,0 +1,12 @@
+# gold-elements
+Elements built for e-commerce-specific use-cases, like checkout flows.
+Current elements include:
+* `gold-cc-cvc-input`: A credit card verification input field
+* `gold-cc-expiration-input`: A field for a credit card expiration date
+* `gold-cc-input`: An input field for a credit card number
+* `gold-email-input`: An input field for an email address
+* `gold-phone-input`: An input field for a phone number
+* `gold-zip-input`: An input field for a zip
+![gold screen shot](/screenshot.png?raw=true)

data/app/assets/components/gold-elements/bower.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "gold-elements",
+  "version": "1.0.0",
+  "homepage": "https://github.com/PolymerElements/gold-elements",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "description": "The gold elements are built for e-commerce use-cases like checkout flows.",
+  "main": "gold-elements.html",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "google",
+    "ecommerce",
+    "checkout"
+  ],
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "gold-cc-cvc-input": "PolymerElements/gold-cc-cvc-input#^1.0.0",
+    "gold-cc-expiration-input": "PolymerElements/gold-cc-expiration-input#^1.0.0",
+    "gold-cc-input": "PolymerElements/gold-cc-input#^1.0.0",
+    "gold-email-input": "PolymerElements/gold-email-input#^1.0.0",
+    "gold-phone-input": "PolymerElements/gold-phone-input#^1.0.0",
+    "gold-zip-input": "PolymerElements/gold-zip-input#^1.0.0"
+  },
+  "devDependencies": {
+    "polymer": "Polymer/polymer#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "paper-button": "PolymerElements/paper-button#^1.0.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "iron-form": "PolymerElements/iron-form#^1.0.0"
+  }
+}

data/app/assets/components/gold-elements/demo/complex-form.html ADDED Viewed

@@ -0,0 +1,127 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../paper-styles/color.html">
+<link rel="import"href="../../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../../paper-styles/color.html">
+<link rel="import" href="../../iron-form/iron-form.html">
+<link rel="import" href="../../paper-input/paper-input.html">
+<link rel="import" href="../../paper-button/paper-button.html">
+<link rel="import" href="../../gold-cc-input/gold-cc-input.html">
+<link rel="import" href="../../gold-cc-cvc-input/gold-cc-cvc-input.html">
+<link rel="import" href="../../gold-cc-expiration-input/gold-cc-expiration-input.html">
+<link rel="import" href="../../gold-zip-input/gold-zip-input.html">
+<link rel="import" href="../../gold-email-input/gold-email-input.html">
+<link rel="import" href="../../gold-phone-input/gold-phone-input.html">
+<dom-module id="complex-form">
+  <link rel="import" type="css" href="simple-form.css">
+  <style>
+    gold-cc-expiration-input, gold-cc-cvc-input {
+      width: 120px;
+      margin-right: 20px;
+    }
+    gold-zip-input {
+      width: 120px;
+    }
+    gold-email-input {
+      width: 300px;
+      margin-right: 20px;
+    }
+    gold-phone-input {
+      width: 200px;
+    }
+    .country {
+      width: 260px;
+      margin-right: 20px;
+    }
+    .quantity {
+      width: 120px;
+    }
+    h4 {
+      margin-bottom: 0px;
+    }
+    paper-button {
+      width: 100%;
+    }
+  </style>
+  <template>
+    <form is="iron-form" id="form">
+      <h4>Quantity</h4>
+      <paper-input name="quantity" class="quantity" value="1" type="number"></paper-input>
+      <h4>Contact Information</h4>
+      <paper-input name="name" label="Name" required auto-validate></paper-input>
+      <paper-input name="address" label="Address" required auto-validate></paper-input>
+      <div class="horizontal layout">
+        <gold-email-input name="email" required auto-validate></gold-email-input>
+        <gold-phone-input name="phone" required auto-validate></gold-phone-input>
+      </div>
+      <h4>Payment</h4>
+      <gold-cc-input name="cc" required auto-validate
+          value="4000 0000 0000 0002"
+          label="Sample Valid VISA number">
+      </gold-cc-input>
+      <div class="horizontal layout">
+        <gold-cc-expiration-input name="cc-expiration" required auto-validate></gold-cc-expiration-input>
+        <gold-cc-cvc-input name="cc-cvc" required auto-validate></gold-cc-cvc-input>
+        <gold-zip-input name="zip" required auto-validate></gold-zip-input>
+      </div>
+      <h4>Shipping</h4>
+      <div class="horizontal layout">
+        <paper-input name="country" class="country" label="Country" placeholder="United States" required auto-validate></paper-input>
+        <gold-zip-input name"mail-zip" required auto-validate></gold-zip-input>
+      </div>
+      <paper-button on-click="_submit">Pay</paper-button>
+    </form>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'complex-form',
+    listeners: {
+      'iron-form-submit': '_formSubmitted'
+    },
+    _submit: function() {
+      this.$.form.submit();
+    },
+    _formSubmitted: function(event) {
+      console.log("Submitted: ", event.detail);
+    }
+  });
+</script>

data/app/assets/components/gold-elements/demo/index.html ADDED Viewed

@@ -0,0 +1,94 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>gold-elements demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+  <link rel="import" href="../../paper-dialog/paper-dialog.html">
+  <link rel="import" href="simple-form.html">
+  <link rel="import" href="complex-form.html">
+  <link rel="import" href="item-card.html">
+</head>
+<style>
+  paper-dialog {
+    max-height: 600px;
+  }
+  simple-form {
+    width: 400px;
+  }
+  complex-form {
+    padding-left: 40px;
+    width: 400px;
+  }
+  .divider {
+    padding-right: 40px;
+    border-right: 1px solid #ccc;
+  }
+  item-card {
+    padding-right: 20px;
+  }
+</style>
+<body>
+  <section>
+    <h1>Form in an overlay</h1>
+    <div class="layout horizontal" onclick="clickHandler(event);">
+      <item-card price="10"></item-card>
+      <item-card price="50"></item-card>
+      <item-card price="60"></item-card>
+    </div>
+    <paper-dialog id="backdrop" with-backdrop>
+      <simple-form></simple-form>
+    </paper-dialog>
+  </section>
+  <section>
+    <h1>Different forms</h1>
+    <div class="layout horizontal">
+      <simple-form></simple-form>
+      <div class="divider"></div>
+      <complex-form></complex-form>
+    </div>
+  </section>
+  <script>
+    function clickHandler(e) {
+      if (!e.target.hasAttribute('elevation')) {
+        return;
+      }
+      var dialog = document.getElementById('backdrop');
+      if (dialog) {
+        dialog.open();
+      }
+    }
+  </script>
+</body>
+</html>

data/app/assets/components/gold-elements/demo/item-card.html ADDED Viewed

@@ -0,0 +1,59 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../paper-styles/color.html">
+<link rel="import"href="../../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../../paper-button/paper-button.html">
+<dom-module id="item-card">
+  <style is="custom-style">
+    .header {
+      width: 200px;
+      height: 150px;
+      background-color: var(--google-blue-300);
+    }
+    .footer {
+      width: 200px;
+      height: 50px;
+      background-color: var(--google-blue-100);
+    }
+    .price {
+      font-size: 20px;
+      color: var(--google-blue-700);
+      padding-left: 10px;
+    }
+    paper-button {
+      background-color: var(--google-blue-500);
+      color: #fff;
+      margin-right: 10px;
+    }
+  </style>
+  <template>
+    <div class="header"></div>
+      <div class="footer horizontal layout center">
+      <div class="price flex">$<span>[[price]]</span></div>
+      <paper-button raised>buy now</paper-button>
+    </div>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'item-card',
+    properties: {
+      price: {
+        type: Number
+      }
+    }
+  });
+</script>

data/app/assets/components/gold-elements/demo/simple-form.css ADDED Viewed

@@ -0,0 +1,55 @@
+/*
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+:host {
+  display: block;
+}
+.form-title, .footer {
+  margin-bottom: 20px;
+}
+.avatar {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  background: var(--google-blue-700);
+  margin-right: 20px;
+}
+.company {
+  color: var(--google-blue-700);
+  font-size: 20px;
+  font-weight: 200;
+}
+gold-cc-expiration-input, .filler {
+  width: 50%;
+  margin-right: 20px;
+}
+.footer {
+  width: 50%;
+  @apply(--paper-input-container-font);
+  color:  var(--secondary-text-color);
+}
+.price {
+  color:  var(--primary-text-color);
+}
+paper-button {
+  background-color: var(--google-blue-500);
+  color: #fff;
+  margin-right: 0px;
+  margin-top: 50px;
+}

data/app/assets/components/gold-elements/demo/simple-form.html ADDED Viewed

@@ -0,0 +1,93 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../paper-styles/color.html">
+<link rel="import"href="../../iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../../iron-form/iron-form.html">
+<link rel="import" href="../../paper-styles/color.html">
+<link rel="import" href="../../paper-input/paper-input.html">
+<link rel="import" href="../../paper-button/paper-button.html">
+<link rel="import" href="../../gold-cc-input/gold-cc-input.html">
+<link rel="import" href="../../gold-cc-cvc-input/gold-cc-cvc-input.html">
+<link rel="import" href="../../gold-cc-expiration-input/gold-cc-expiration-input.html">
+<dom-module id="simple-form">
+  <link rel="import" type="css" href="simple-form.css">
+  <template>
+    <form is="iron-form" id="form">
+      <div class="horizontal layout center form-title">
+        <div class="avatar" item-icon></div>
+        <div class="flex company">ACME Goods Co.</div>
+      </div>
+      <paper-input name="name" label="Name on card" required></paper-input>
+      <gold-cc-input name="cc-number" required value="4000 0000 0000 0002"></gold-cc-input>
+      <div class="horizontal layout">
+        <gold-cc-expiration-input name="cc-expiration" required></gold-cc-expiration-input>
+        <gold-cc-cvc-input name="cc-cvc" required></gold-cc-cvc-input>
+      </div>
+      <br><br>
+      <div class="horizontal layout">
+        <div class="filler"></div>
+        <div class="footer">
+          <div class="total-item horizontal layout">
+            <div class="flex">Sub total </div>
+            <div class="price">$30</div>
+          </div>
+          <div class="total-item horizontal layout">
+            <div class="flex">Tax </div>
+            <div class="price">$2.99</div>
+          </div>
+          <div class="total-item horizontal layout">
+            <div class="flex">Your total </div>
+            <div class="price">$32.99</div>
+          </div>
+          <div class="horizontal layout end-justified">
+            <paper-button on-click="_submit">Pay $32.99</paper-button>
+          </div>
+        </div>
+      </div>
+    </form>
+  </template>
+</dom-module>
+<script>
+  Polymer({
+    is: 'simple-form',
+    listeners: {
+      'iron-form-submit': '_formSubmitted'
+    },
+    _submit: function() {
+      this.$.form.submit();
+    },
+    _formSubmitted: function(event) {
+      console.log("Submitted: ", event.detail);
+    }
+  });
+</script>