Documentation! + some little fixes to add consistency between components

src/scripts/components/checkboxgroup.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'checkboxgroup',
   defaults: {
     label: '',
-    options: []
+    options: [],
+    attributes: {}
   }
 };

src/scripts/components/footer.js

@@ -3,8 +3,5 @@
 module.exports = {
   name: 'footer',
   template: require('../../templates/components/footer.tpl'),
-  manipulator: 'html',
-  defaults: {
-    attributes: {}
-  }
+  manipulator: 'html'
 };

src/scripts/components/heading.js

@@ -5,7 +5,6 @@ module.exports = {
   template: require('../../templates/components/heading.tpl'),
   manipulator: 'html',
   defaults: {
-    attributes: {},
     size: 4
   }
 };

src/scripts/components/radiogroup.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'radiogroup',
   defaults: {
     label: '',
-    options: []
+    options: [],
+    attributes: {}
   }
 };

src/scripts/components/select.js

@@ -7,7 +7,8 @@ module.exports = {
   manipulator: 'val',
   defaults: {
     label: '',
-    options: []
+    options: [],
+    attributes: {}
   },
   initialize: function() {
     var self = this;

src/scripts/components/submit.js

@@ -3,9 +3,8 @@
 module.exports = {
   name: 'submit',
   template: require('../../templates/components/submit.tpl'),
-  manipulator: 'val',
+  manipulator: 'html',
   defaults: {
-    label: '',
     attributes: {}
   }
 };

src/scripts/components/text.js

@@ -3,8 +3,5 @@
 module.exports = {
   name: 'text',
   template: require('../../templates/components/text.tpl'),
-  manipulator: 'html',
-  defaults: {
-    attributes: {}
-  }
+  manipulator: 'html'
 };

src/scripts/lib/clay-config.js

@@ -113,7 +113,7 @@ function ClayConfig(settings, config, $rootContainer) {
   utils.updateProperties(self.EVENTS, {writable: false});
 
   /**
-   * @returns {ClayItem}
+   * @returns {Array.<ClayItem>}
    */
   self.getAllItems = function() {
     _checkBuilt('getAllItems');
@@ -121,21 +121,21 @@ function ClayConfig(settings, config, $rootContainer) {
   };
 
   /**
-   * @param {string} key
+   * @param {string} appKey
    * @returns {ClayItem}
    */
-  self.getItemByAppKey = function(key) {
+  self.getItemByAppKey = function(appKey) {
     _checkBuilt('getItemByAppKey');
-    return _itemsByAppKey[key];
+    return _itemsByAppKey[appKey];
   };
 
   /**
-   * @param {string} key
+   * @param {string} id
    * @returns {ClayItem}
    */
-  self.getItemById = function(key) {
+  self.getItemById = function(id) {
     _checkBuilt('getItemById');
-    return _itemsById[key];
+    return _itemsById[id];
   };
 
   /**
@@ -181,6 +181,9 @@ function ClayConfig(settings, config, $rootContainer) {
   // prevent external modifications of properties
   utils.updateProperties(self, { writable: false, configurable: false });
 
+  // expose the config to allow developers to update it before the build is run
+  self.config = config;
+
 }
 
 /**
@@ -191,7 +194,7 @@ function ClayConfig(settings, config, $rootContainer) {
  * @param {string|{}} component.manipulator - methods to attach to the component
  * @param {function} component.manipulator.set - set manipulator method
  * @param {function} component.manipulator.get - get manipulator method
- * @param {{}} component.defaults - template defaults
+ * @param {{}} [component.defaults] - template defaults
  * @param {function} [component.initialize] - method to scaffold the component
  * @return {boolean} - Returns true if component was registered correctly
  */

src/scripts/lib/clay-item.js

@@ -23,7 +23,7 @@ function ClayItem(config) {
                     'Make sure to register it with ClayConfig.registerComponent()');
   }
 
-  var _templateData = _.extend({}, _component.defaults, config);
+  var _templateData = _.extend({}, _component.defaults || {}, config);
 
   /** @type {string|null} */
   self.id = config.id || null;

src/scripts/vendor/autoprefixify.js

@@ -43,9 +43,6 @@ module.exports = function (file, options) {
   }
 
   if (typeof file !== 'string') {
-    // Factory: return a function.
-    // Set options variable here so it is ready for when browserifyTransform
-    // is called. Note: first argument is the options.
     options = file;
     return browserifyTransform;
   } else {

src/styles/clay/components/checkboxgroup.scss

@@ -25,7 +25,8 @@
     }
 
     input {
-      display: none;
+      opacity: 0;
+      position: absolute;
     }
 
     i {

src/styles/clay/components/radiogroup.scss

@@ -25,7 +25,8 @@
     }
 
     input {
-      display: none;
+      opacity: 0;
+      position: absolute;
     }
 
     i {

src/templates/components/checkboxgroup.tpl

@@ -9,6 +9,7 @@
           value="{{this.value}}"
           name="clay-{{clayId}}"
           data-manipulator-target
+          {{each key: attributes}}{{key}}="{{this}}"{{/each}}
         />
         <i></i>
       </label>

src/templates/components/footer.tpl

@@ -1,5 +1 @@
-<div
-  data-manipulator-target
-  class="item-container-footer"
-  {{each attributes}} {{this.key}}="{{this.value}}" {{/each}}
-></div>
+<footer data-manipulator-target class="component component-footer"></footer>

src/templates/components/heading.tpl

@@ -1,3 +1,3 @@
 <div class="component component-heading">
-  <h{{size}} data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></h{{size}}>
+  <h{{size}} data-manipulator-target></h{{size}}>
 </div>

src/templates/components/radiogroup.tpl

@@ -9,6 +9,7 @@
           value="{{this.value}}"
           name="clay-{{clayId}}"
           data-manipulator-target
+          {{each key: attributes}}{{key}}="{{this}}"{{/each}}
         />
         <i></i>
       </label>

src/templates/components/select.tpl

@@ -1,7 +1,7 @@
 <label class="component component-select">
   <span class="label">{{{label}}}</span>
   <span class="value"></span>
-  <select data-manipulator-target>
+  <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
     {{each options}}
       <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
     {{/each}}

src/templates/components/submit.tpl

@@ -3,7 +3,5 @@
     data-manipulator-target
     type="submit"
     {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-  >
-    {{{label}}}
-  </button>
+  ></button>
 </div>

src/templates/components/text.tpl

@@ -1,3 +1,3 @@
 <div class="component component-text">
-  <p data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}></p>
+  <p data-manipulator-target></p>
 </div>