Merge remote-tracking branch 'origin/master' into #13/fix-checkboxgroups-return-value

# Conflicts:
#	test/spec/lib/manipulators.js

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/select.js

@@ -16,11 +16,18 @@ module.exports = {
 
     var $value = self.$element.select('.value');
 
-    self.on('change', function() {
+    /**
+     * Updates the HTML value of the component to match the slected option's label
+     * @return {void}
+     */
+    function setValueDisplay() {
       var selectedIndex = self.$manipulatorTarget.get('selectedIndex');
       var $options = self.$manipulatorTarget.select('option');
       var value = $options[selectedIndex] && $options[selectedIndex].innerHTML;
       $value.set('innerHTML', value);
-    });
+    }
+
+    setValueDisplay();
+    self.on('change', setValueDisplay);
   }
 };

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

@@ -1,35 +1,45 @@
 'use strict';
 
+var _ = require('../vendor/minified')._;
+
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function disable() {
+  if (this.$manipulatorTarget.get('disabled')) { return this; }
   this.$element.set('+disabled');
   this.$manipulatorTarget.set('disabled', true);
   return this.trigger('disabled');
 }
 
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function enable() {
+  if (!this.$manipulatorTarget.get('disabled')) { return this; }
   this.$element.set('-disabled');
   this.$manipulatorTarget.set('disabled', false);
   return this.trigger('enabled');
 }
 
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function hide() {
+  if (this.$element[0].classList.contains('hide')) { return this; }
   this.$element.set('+hide');
   return this.trigger('hide');
 }
 
 /**
- * @returns {ClayEvents}
+ * @returns {ClayItem|ClayEvents}
+ * @extends {ClayItem}
  */
 function show() {
+  if (!this.$element[0].classList.contains('hide')) { return this; }
   this.$element.set('-hide');
   return this.trigger('show');
 }
@@ -40,17 +50,33 @@ module.exports = {
       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');
     },
     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');
     },
     set: function(value) {
+      if (this.get() === value.toString(10)) { return this; }
       this.$manipulatorTarget.set('value', value);
       return this.trigger('change');
     },
@@ -64,6 +90,7 @@ module.exports = {
       return this.$manipulatorTarget.get('checked');
     },
     set: function(value) {
+      if (!this.get() === !value) { return this; }
       this.$manipulatorTarget.set('checked', !!value);
       return this.trigger('change');
     },
@@ -77,6 +104,7 @@ module.exports = {
       return this.$element.select('input:checked').get('value');
     },
     set: function(value) {
+      if (this.get() === value.toString(10)) { return this; }
       this.$element
         .select('input[value="' + value.replace('"', '\\"') + '"]')
         .set('checked', true);
@@ -97,8 +125,12 @@ module.exports = {
     },
     set: function(values) {
       var self = this;
-      self.$element.select('input').set('checked', false);
       values = values || [];
+
+      if (_.equals(this.get(), values)) { return this; }
+
+      self.$element.select('input').set('checked', false);
+
       values.map(function(value) {
         self.$element
           .select('input[value="' + value.replace('"', '\\"') + '"]')
@@ -120,8 +152,10 @@ module.exports = {
         case 'number': value = value.toString(16); break;
         case 'string': value = value.replace(/^#|^0x/, ''); break;
       }
+      value = value || '000000';
 
-      this.$manipulatorTarget.set('value', value || '000000');
+      if (this.get() === parseInt(value, 16)) { return this; }
+      this.$manipulatorTarget.set('value', value);
       return this.trigger('change');
     },
     disable: disable,

src/scripts/vendor/minified.js

@@ -1,8 +1,8 @@
 // minified.js config start -- use this comment to re-create a configuration in the Builder
 // - Only sections add, always, amdsupport, copyobj, dollardollar,
-// - each, eachobj, error, extend, find, format, formathtml, get, ht, html,
-// - isobject, off, on, ready, request, select, set, template, trigger, underscore,
-// - wait.
+// - each, eachobj, equals, error, extend, find, format, formathtml, get, ht,
+// - html, isobject, off, on, ready, request, select, set, template, trigger,
+// - underscore, wait.
 
 
 // WARNING! This file is autogenerated from minified-master.js and others.
@@ -1550,6 +1550,53 @@ define('minified', function() {
      */
     'each': listBind(each),
 
+    /*$
+     * @id equals
+     * @group LIST
+     * @requires
+     * @configurable default
+     * @name .equals()
+     * @altname _.equals()
+     * @syntax list.equals(otherObject)
+     * @syntax _.equals(thisObject, otherObject)
+     * @module UTIL
+     * Checks whether two values, lists or objects are equal in a deep comparison.
+     *
+     * First <var>equals()</var> checks whether it got a function as parameter.
+     * If yes, it will be invoked without arguments and <var>equals()</var> calls itself recursively with the function's result.
+     *
+     * Once both values are no functions anymore, the values will be evaluated, If the first value is...
+     * <ul><li>...<var>null</var> or <var>undefined</var>, they are only equal if the other one is also either <var>null</var> or <var>undefined</var>.</li>
+     * <li>...a value as defined by ##_.isValue(), but not a Date, they are equal if the other value is the same type and is equal according to the '==' operator.</li>
+     * <li>...a Date, they are equal if the other value is a Date representing the same time.</li>
+     * <li>...a list or array, they are equal if the other value is also either a list or an array, has the same number of items and all items equal the items of the other
+     *         list at the same position. The equality of list items is determined recursively using the same rules, so you can also nest lists.</li>
+     * <li>...a function, it will be invoked without arguments and its return value is evaluated using these rules as if the value has been passed. </li>
+     * <li>...any other object, they are equal if they contain exactly the same keys (as defined by ##_.eachObj()) and all values are equal as determined using these rules
+     *      recursively.</li>
+     * </ul>
+     *
+     * Please note that, according to the rules, a ##list#Minified list## is equal to an array, as long as their content is equal. <var>equals</var> does not
+     * differentiate between <var>null</var> and <var>undefined</var>.
+     *
+     * <var>equals</var> is commutative. If you swap the parameters, the result is the same as long as no functions are involved.
+     *
+     * @example Compare a list and an array:
+     *  <pre>
+     *  _.equals([1, 2, 3], _(1, 2, 3));  // returns true
+     * </pre>
+     *
+     * @example Same result, but with a list method:
+     *  <pre>
+     *  _(1, 2, 3).equals([1, 2, 3]);  // returns true
+     * </pre>
+     *
+     * @param thisObject The first reference to evaluate.
+     * @param otherObject The second reference to evaluate.
+     * @return true if both references are equal. False otherwise.
+     */
+    'equals': listBind(equals),
+
     /*$
      * @id find
      * @group LIST
@@ -2626,6 +2673,9 @@ define('minified', function() {
     // @condblock find
     'find': find,
     // @condend
+    // @condblock equals
+    'equals': equals,
+    // @condend
 
     /*$
      * @id copyobj

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-ios: 0.6rem;
+$button-padding: 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;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-
+  margin: 0 auto $item-spacing-v;
   padding: $button-padding;
 
+  @include tap-highlight($color-gray-8);
+
   .platform-ios & {
     padding: $button-padding-ios;
   }
 
-  &:disabled {
-    background-color: $color-gray-3;
-    color: $color-gray-8;
-  }
-
-  &:not(:disabled):active {
-    background-color: $color-gray-8;
-  }
-
-  &.orange, &[type="submit"] {
+  &.primary, &[type="submit"] {
     background-color: $color-orange;
 
-    &:disabled {
-      background-color: $color-orange-dark;
-      color: $color-gray-3;
-    }
-
-    &:not(:disabled):active {
-      background-color: $color-red;
-    }
+    @include tap-highlight($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>