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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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>