Merge pull request #32 from pebble/#31/generic-btn-component

Add generic button component

README.md

@@ -108,7 +108,7 @@ Sections help divide up the page into logical groups of items. It is recommended
 
 ### Heading
 
-**Manipulator:** `html`
+**Manipulator:** [`html`](#html)
 
 Headings can be used in anywhere and can have their size adjusted to suit the context. If you place a heading item at the first position of a section's `items` array then it will automatically be styled as the header for that section. 
 
@@ -138,7 +138,7 @@ Headings can be used in anywhere and can have their size adjusted to suit the co
 
 ### Text
 
-**Manipulator:** `html`
+**Manipulator:** [`html`](#html)
 
 Text is used to provide descriptions of sections or to explain complex parts of your page. Feel free to add any extra HTML you require to the `defaultValue` 
 
@@ -165,7 +165,7 @@ Text is used to provide descriptions of sections or to explain complex parts of
 
 ### Input
 
-**Manipulator:** `val`
+**Manipulator:** [`val`](#val)
 
 Standard text input field. 
 
@@ -203,7 +203,7 @@ Standard text input field.
 
 #### Toggle
 
-**Manipulator:** `checked`
+**Manipulator:** [`checked`](#checked)
 
 Switch for a single item. 
 
@@ -238,7 +238,7 @@ Switch for a single item.
 
 #### Select
 
-**Manipulator:** `val`
+**Manipulator:** [`val`](#val)
 
 A dropdown menu containing multiple options.
 
@@ -291,7 +291,7 @@ A dropdown menu containing multiple options.
 
 #### Color
 
-**Manipulator:** `color`
+**Manipulator:** [`color`](#color)
 
 A color picker containing the 64 supported colors on Basalt and Chalk.
 
@@ -321,9 +321,9 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
 
 ---
 
-#### RadioGroup
+#### Radio Group
 
-**Manipulator:** `radiogroup`
+**Manipulator:** [`radiogroup`](#radiogroup)
 
 A list of options allowing the user can only choose one option to submit.
 
@@ -366,9 +366,9 @@ A list of options allowing the user can only choose one option to submit.
 
 ---
 
-#### CheckboxGroup
+#### Checkbox Group
 
-**Manipulator:** `checkboxgroup`
+**Manipulator:** [`checkboxgroup`](#checkboxgroup)
 
 A list of options where a user may choose more than one option to submit.
 
@@ -412,9 +412,35 @@ A list of options where a user may choose more than one option to submit.
 
 ---
 
+### Generic Button
+
+**Manipulator:** [`button`](#button)
+
+##### Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| type | string | Set to `button`. |
+| defaultValue | string | The text displayed on the button. |
+| primary | boolean | If `true` the button will be orange, if `false`, the button will be gray (defaults to `false`)|
+| attributes | object | An object containing HTML attributes to set on the input field. |
+| description | string | Optional sub-text to include below the component |
+
+##### Example
+
+```javascript
+{
+  "type": "button",
+  "primary": true,
+  "defaultValue": "Send"
+}
+```
+
+---
+
 ### Submit
 
-**Manipulator:** `html`
+**Manipulator:** [`button`](#button)
 
 The submit button for the page. You **MUST** include this component somewhere in the config page (traditionally at the bottom) or users will not be able to save the form. 
 
@@ -440,7 +466,6 @@ The submit button for the page. You **MUST** include this component somewhere in
 ### Coming Soon
 
 - Range Slider
-- Generic Button
 - Tabs
 - Footer
 - Dynamic + draggable list
@@ -468,6 +493,17 @@ Eg: If you run the `.show()` manipulator on an item that is already visible, the
 | `.hide()` | `ClayItem` | `hide` | Hides the item |
 | `.show()` | `ClayItem` | `show` | Shows the item |
 
+#### button
+
+| Method | Returns | Event Fired | Description | 
+|--------|---------|-------------| ------------|
+| `.set( [string\|HTML] value)` | `ClayItem` | `change` | Sets the content of this item. |
+| `.get()` | `string` | | Gets the content of this item. |
+| `.disable()` |  `ClayItem` | `disabled` | Prevents this item from being clicked by the user. |
+| `.enable()` |  `ClayItem` | `enabled` | Allows this item to be clicked by the user. |
+| `.hide()` | `ClayItem` | `hide` | Hides the item |
+| `.show()` | `ClayItem` | `show` | Shows the item |
+
 #### val
 
 | Method | Returns | Event Fired | Description | 

dev/config.js

@@ -50,6 +50,14 @@ module.exports = [
         "defaultValue": "00FF00",
         "label": "Sunny Color Picker",
         "sunlight": true
+      },
+      {
+        type: 'button',
+        id: 'testButton',
+        primary: false,
+        defaultValue: 'Generic Button',
+        description: 'This is a generic button. ' +
+                     'You can listen for standard events like "click"'
       }
     ]
   },

src/scripts/components/button.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  name: 'button',
+  template: require('../../templates/components/button.tpl'),
+  style: require('../../styles/clay/components/button.scss'),
+  manipulator: 'button',
+  defaults: {
+    primary: false,
+    attributes: {},
+    description: ''
+  }
+};

src/scripts/components/index.js

@@ -10,5 +10,6 @@ module.exports = {
   text: require('./text'),
   toggle: require('./toggle'),
   radiogroup: require('./radiogroup'),
-  checkboxgroup: require('./checkboxgroup')
+  checkboxgroup: require('./checkboxgroup'),
+  button: require('./button')
 };

src/scripts/components/submit.js

@@ -4,7 +4,7 @@ module.exports = {
   name: 'submit',
   template: require('../../templates/components/submit.tpl'),
   style: require('../../styles/clay/components/submit.scss'),
-  manipulator: 'html',
+  manipulator: 'button',
   defaults: {
     attributes: {}
   }

src/scripts/lib/manipulators.js

@@ -57,6 +57,20 @@ module.exports = {
     hide: hide,
     show: show
   },
+  button: {
+    get: function() {
+      return this.$manipulatorTarget.get('innerHTML');
+    },
+    set: function(value) {
+      if (this.get() === value.toString(10)) { return this; }
+      this.$manipulatorTarget.set('innerHTML', value);
+      return this.trigger('change');
+    },
+    disable: disable,
+    enable: enable,
+    hide: hide,
+    show: show
+  },
   val: {
     get: function() {
       return this.$manipulatorTarget.get('value');

src/styles/clay/_base.scss

@@ -183,6 +183,7 @@ label {
   padding: 0 $item-spacing-h $item-spacing-v ;
   @include font-size(0.9);
   color: $color-gray-9;
+  text-align: left;
 }
 
 .inputs {

src/styles/clay/_vars.scss

@@ -34,7 +34,7 @@ $color-gray-9: #a4a4a4 ;
 $color-gray-10: #ececec;
 $color-gray-11: #f2f2f2;
 
-$button-padding: 0.7rem;
+$button-padding: 0.6rem;
-$button-padding-ios: 0.6rem;
+$button-padding-ios: 0.5rem;
 
 $box-shadow-small-components: $color-gray-1 0 0.1rem 0.1rem;

src/styles/clay/components/button.scss

@@ -0,0 +1,12 @@
+.component-button {
+  text-align: center;
+
+  .section & {
+    padding-bottom: 0;
+  }
+
+  .description {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

src/styles/clay/elements/_button.scss

@@ -3,52 +3,30 @@
 button,
 .button {
   @include font-pfdin(medium);
+  @include font-size(1);
   text-transform: uppercase;
-  background-color: $color-gray-4;
+  background-color: $color-gray-7;
   border-radius: $border-radius;
-  font-size: 1rem;
-  line-height: 1;
   border: none;
   display: inline-block;
 
   color: $color-white;
   min-width: 12rem;
   text-align: center;
-  margin: 0 auto;
+  margin: 0 auto $item-spacing-v;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
   padding: $button-padding;
 
+  @include tap-highlight($color-gray-8);
+
   .platform-ios & {
     padding: $button-padding-ios;
   }
 
-  &:disabled {
+  &.primary, &[type="submit"] {
-    background-color: $color-gray-3;
-    color: $color-gray-8;
-  }
-
-  &:not(:disabled):active {
-    background-color: $color-gray-8;
-  }
-
-  &.orange, &[type="submit"] {
     background-color: $color-orange;
 
-    &:disabled {
+    @include tap-highlight($color-red);
-      background-color: $color-orange-dark;
-      color: $color-gray-3;
-    }
-
-    &:not(:disabled):active {
-      background-color: $color-red;
-    }
   }
-
-  &.light-grey {
-    background-color: $color-gray-5;
-  }
-
 }
 
 a.button {

src/templates/components/button.tpl

@@ -0,0 +1,11 @@
+<div class="component component-button">
+  <button
+    type="button"
+    data-manipulator-target
+    class="{{primary ? 'primary' : ''}}"
+    {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+  ></button>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

test/spec/lib/manipulators.js

@@ -144,10 +144,20 @@ describe('manipulators', function() {
 
   describe('html', function() {
     testSetGet('text', 'test123');
+    testSetGet('button', '<span>some HTML</span>');
     testShow('text');
     testHide('text');
   });
 
+  describe('button', function() {
+    testSetGet('button', 'test123');
+    testSetGet('button', '<span>some HTML</span>');
+    testDisable('button');
+    testEnable('button');
+    testShow('button');
+    testHide('button');
+  });
+
   describe('val', function() {
     testSetGet('input', 'test321');
     testSetGet('input', 1234, '1234');