Initial commit

r-spacex · Dec 4, 2017 · 8d240e5 · 8d240e5
commit 8d240e5
Show file tree

Hide file tree

Showing 9 changed files with 302 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-button\>
+
+A button for the MaxQ design system
+
+## 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,17 @@
+{
+  "name": "maxq-button",
+  "description": "A button for the MaxQ design system",
+  "main": "maxq-button.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",
+    "maxq-input": "r-spacex/maxq-input#^0.0.1"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,56 @@
+<!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-button 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-button.html">
+    <link rel="import" href="../../maxq-input/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-button demo</h3>
+      <demo-snippet>
+        <template>
+          <maxq-button>Default</maxq-button>
+          <maxq-button class="primary">Primary</maxq-button>
+        </template>
+      </demo-snippet>
+
+      <h3>Toggleable</h3>
+      <demo-snippet>
+        <template>
+          <maxq-button toggles>Default</maxq-button>
+          <maxq-button toggles class="primary">Primary</maxq-button>
+        </template>
+      </demo-snippet>
+
+      <h3>In a group</h3>
+      <demo-snippet>
+        <template>
+          <div class="group">
+            <maxq-input class="group-element" placeholder="Search..."></maxq-input>
+            <maxq-button class="group-element primary">Go</maxq-button>
+          </div>
+
+          <div class="group">
+            <maxq-button class="group-element" toggles>Bold</maxq-button>
+            <maxq-button class="group-element" toggles>Italic</maxq-button>
+            <maxq-button class="group-element" toggles>Underline</maxq-button>
+          </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-button</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-button.html b/maxq-button.html
@@ -0,0 +1,114 @@
+<link rel="import" href="../polymer/polymer-element.html">
+
+<dom-module id="maxq-button">
+  <template>
+    <style>
+      :host {
+        display: inline-flex;
+        font-family: inherit;
+        height: 32px;
+        border-radius: 32px;
+        padding: 0 16px;
+        font-size: 16px;
+        align-items: center;
+        background-color: #ebebeb;
+        transition: background-color 0.2s ease;
+        outline: none;
+        cursor: pointer;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      :host(:hover) {
+        background-color: #f5f5f5;
+      }
+
+      :host(:active) {
+        background-color: #e1e1e1;
+      }
+
+      :host(.primary) {
+        background-color: #3569a4;
+        color: white;
+      }
+
+      :host(.primary:hover) {
+        background-color: #4978ad;
+      }
+
+      :host(.primary:active) {
+        background-color: #2B5384;
+      }
+
+      :host(.group-element:first-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      :host(.group-element:last-child) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      :host(.group-element:not(:first-child):not(:last-child)) {
+        border-radius: 0;
+      }
+
+      :host(.group-element:not(:last-child)) {
+        border-right: 1px solid #ddd;
+        margin-right: -4px;
+      }
+
+      :host([toggles][active]) {
+        background-color: #e1e1e1;
+      }
+
+      :host(.primary[toggles][active]) {
+        background-color: #2B5384;
+      }
+    </style>
+    <slot></slot>
+  </template>
+
+  <script>
+    /**
+     * `maxq-button`
+     * A button for the MaxQ design system
+     *
+     * @customElement
+     * @polymer
+     * @demo demo/index.html
+     */
+    class MaxqButton extends Polymer.Element {
+      static get is() { return 'maxq-button'; }
+      static get properties() {
+        return {
+          toggles: {
+            type: Boolean,
+            value: false,
+            reflectToAttribute: true,
+            observer: '_togglesChanged'
+          },
+          active: {
+            type: Boolean,
+            value: false,
+            reflectToAttribute: true
+          }
+        };
+      }
+      constructor() {
+        super();
+        this.tabIndex = 0;
+      }
+
+      _togglesChanged(newVal, oldVal) {
+
+        this.addEventListener('click', (e) => {
+          this.active = !this.active;
+        });
+      }
+    }
+
+    window.customElements.define(MaxqButton.is, MaxqButton);
+  </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-button_test.html'
+      ]);
+    </script>
+
+</body></html>
diff --git a/test/maxq-button_test.html b/test/maxq-button_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-button test</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../maxq-button.html">
+  </head>
+  <body>
+
+    <test-fixture id="BasicTestFixture">
+      <template>
+        <maxq-button></maxq-button>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ChangedPropertyTestFixture">
+      <template>
+        <maxq-button prop1="new-prop1"></maxq-button>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('maxq-button', () => {
+
+        test('instantiating the element with default properties works', () => {
+          const element = fixture('BasicTestFixture');
+          assert.equal(element.prop1, 'maxq-button');
+          const elementShadowRoot = element.shadowRoot;
+          const elementHeader = elementShadowRoot.querySelector('h2');
+          assert.equal(elementHeader.innerHTML, 'Hello maxq-button!');
+        });
+
+        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>