Initial commit

r-spacex · Dec 4, 2017 · 7e90080 · 7e90080
commit 7e90080
Show file tree

Hide file tree

Showing 9 changed files with 350 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components/
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# \<maxq-input\>
+
+An input element following the maxq design pattern
+
+## Install the Polymer-CLI
+
+First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+
+## Viewing Your Element
+
+```
+$ polymer serve
+```
+
+## Running Tests
+
+```
+$ polymer test
+```
+
+Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,16 @@
+{
+  "name": "maxq-input",
+  "description": "An input element following the maxq design pattern",
+  "main": "maxq-input.html",
+  "dependencies": {
+    "polymer": "Polymer/polymer#^2.0.0"
+  },
+  "devDependencies": {
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>maxq-input demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../maxq-input.html">
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
+  </head>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>Basic maxq-input demo</h3>
+      <demo-snippet>
+        <template>
+          <maxq-input placeholder="Placeholder..."></maxq-input>
+        </template>
+      </demo-snippet>
+
+      <h3>Number type</h3>
+      <demo-snippet>
+        <template>
+          <maxq-input placeholder="Age" type="number"></maxq-input>
+        </template>
+      </demo-snippet>
+
+      <h3>Match condition</h3>
+      <demo-snippet>
+        <template>
+          <maxq-input placeholder="Username" match="/^[a-z0-9_-]{6,18}$/"
+            error-message="Your username must be at least 6 characters, no longer than 18, and can only contain a-z, 0-9, - and _"></maxq-input>
+        </template>
+      </demo-snippet>
+
+      <h3>In a group</h3>
+      <demo-snippet>
+        <template>
+          <style>
+            .group .group-element {
+              width: 100px;
+            }
+          </style>
+          <div class="group">
+            <maxq-input placeholder="1 (800)" class="group-element"></maxq-input>
+            <maxq-input placeholder="229" class="group-element"></maxq-input>
+            <maxq-input placeholder="4822" class="group-element"></maxq-input>
+          </div>
+        </template>
+      </demo-snippet>
+    </div>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>maxq-input</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
+</html>
diff --git a/maxq-input.html b/maxq-input.html
@@ -0,0 +1,158 @@
+<link rel="import" href="../polymer/polymer-element.html">
+
+<dom-module id="maxq-input">
+  <template>
+    <style>
+      :host {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        border-radius: 32px;
+        background-color: #EBEBEB;
+        font-family: inherit;
+        padding: 0 16px;
+        box-sizing: border-box;
+        transition: border 0.2s ease, background-color 0.2s ease;
+      }
+
+      input {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        -ms-appearance: none;
+        appearance: none;
+        border: none;
+        background: none;
+        font-family: inherit;
+        font-size: 16px;
+        padding: 0;
+        margin: 0;
+        outline: none;
+      }
+      :host(.group-element) {
+        border-radius: 0;
+        border-right: 1px solid #ddd;
+        margin-right: -4px;
+      }
+      :host(:not([valid])) {
+        background-color: #ff9999;
+      }
+      :host(.group-element:first-child) {
+        border-top-left-radius: 32px;
+        border-bottom-left-radius: 32px;
+      }
+
+      :host([focused]) {
+        border: 1px solid #ddd;
+        background-color: white;
+        outline: none;
+      }
+
+      :host(.group-element:last-child) {
+        border-top-right-radius: 32px;
+        border-bottom-right-radius: 32px;
+        margin-right: 0;
+      }
+
+      :host(.group-element:last-child:not([focused])) {
+        border-right: none;
+      }
+
+      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+        :host([focused]) {
+          border-width: 0.75px;
+        }
+
+      }
+
+      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+        :host([focused]) {
+          border-width: 0.5px;
+        }
+      }
+    </style>
+    <input type="[[type]]" placeholder="[[placeholder]]" value="{{value::input}}" on-input="handleInput">
+  </template>
+
+  <script>
+    /**
+     * `maxq-input`
+     * An input element following the maxq design pattern
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class MaxqInput extends Polymer.Element {
+      static get is() { return 'maxq-input'; }
+      static get properties() {
+        return {
+          placeholder: {
+            type: String,
+            reflectToAttribute: true,
+            value: ''
+          },
+          value: {
+            type: String,
+            reflectToAttribute: true,
+            value: ''
+          },
+          type: {
+            type: String,
+            reflectToAttribute: true,
+            value: 'text'
+          },
+          focused: {
+            type: Boolean,
+            reflectToAttribute: true,
+            value: false
+          },
+          min: {
+            type: Number,
+            reflectToAttribute: true
+          },
+          max: {
+            type: Boolean,
+            reflectToAttribute: true
+          },
+          match: {
+            type: String,
+            reflectToAttribute: true,
+            value: null
+          },
+          errorMesage: {
+            type: String,
+            reflectToAttribute: true,
+            value: 'Sorry, the input is invalid'
+          },
+          valid: {
+            type: Boolean,
+            reflectToAttribute: true,
+            value: true
+          }
+        };
+      }
+
+      ready() {
+        super.ready();
+        let input = this.shadowRoot.querySelector('input');
+        input.addEventListener('blur', () => {
+          this.focused = false;
+        });
+        input.addEventListener('focus', () => {
+          this.focused = true;
+        });
+      }
+
+      handleInput(e) {
+        if (this.match) {
+          console.log(this.match);
+          let regex = new RegExp(this.match);
+          this.valid = regex.test(this.value);
+        }
+        this.dispatchEvent(new CustomEvent('input', {value: this.value, valid: this.valid}));
+      }
+    }
+
+    window.customElements.define(MaxqInput.is, MaxqInput);
+  </script>
+</dom-module>
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}
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="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'maxq-input_test.html'
+      ]);
+    </script>
+
+</body></html>
diff --git a/test/maxq-input_test.html b/test/maxq-input_test.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>maxq-input test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../maxq-input.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <maxq-input></maxq-input>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <maxq-input prop1="new-prop1"></maxq-input>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('maxq-input', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'maxq-input');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello maxq-input!');
+        });
+
+        test('setting a property on the element works', () => {
+          // Create a test fixture
+          const element = fixture('ChangedPropertyTestFixture');
+          assert.equal(element.prop1, 'new-prop1');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello new-prop1!');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>