Merge pull request #24 from pebble/#11/description-for-input-components

Add description field to all input type components.

README.md

@@ -67,7 +67,7 @@ Your root element **must** be an array. This represents the entire page. Inside
 
 ## Components
 
-![Example](src/images/example.png)
+<img src="src/images/example.png" width="360" title="Example">
 
 ### Section
 
@@ -178,6 +178,7 @@ Standard text input field.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default value of the input field. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attributes such as `required` or `type`. |
 
 
@@ -215,6 +216,7 @@ Switch for a single item.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | int\|boolean | The default value of the toggle. Defaults to `false` if not specified. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 
 
@@ -249,6 +251,7 @@ A dropdown menu containing multiple options.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default value of the dropdown menu. Must match a value in the `options` array. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 | options | array of objects | The options you want to appear in the dropdown menu. Each option is an object with a `label` and `value` property. |
 
@@ -301,6 +304,7 @@ A color picker containing the 64 supported colors on Basalt and Chalk.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string OR int | The default color. Always use the uncorrected value even if `sunlight` is true. The component will do the conversion internally. |
+| description | string | Optional sub-text to include below the component |
 | sunlight | boolean | Use the color-corrected sunlight color palette if `true`, else the uncorrected version. Defaults to `true` if not specified. |
 
 ##### Example
@@ -332,6 +336,7 @@ A list of options allowing the user can only choose one option to submit.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | string | The default selected item. Must match a value in the `options` array. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 | options | array of objects | The options you want to appear in the radio group. Each option is an object with a `label` and `value` property. |
 
@@ -376,6 +381,7 @@ A list of options where a user may choose more than one option to submit.
 | appKey | string (unique) | The AppMessage key matching the `appKey` item defined in your `appinfo.json`.  Set this to a unique string to allow this item to be looked up using `Clay.getItemsByAppKey()` in your custom function. You must set this if you wish for the value of this item to be persisted after the user closes the config page. |
 | label | string | The label that should appear next to this item. |
 | defaultValue | array of strings | The default selected items. Each value must match one in the `options` array. |
+| description | string | Optional sub-text to include below the component |
 | attributes | object | An object containing HTML attributes to set on the input field. You can add basic HTML5 validation this way by setting attribute such as `required`. |
 | options | array of objects | The options you want to appear in the checkbox group. Each option is an object with a `label` and `value` property. |
 

dev/config.js

@@ -24,32 +24,31 @@ module.exports = [
         "type": "input",
         "appKey": "email",
         "defaultValue": "",
-        "label": "Email",
+        "label": "Input Field",
+        "description": "This is a description for the input component. " +
+                       "You can add <strong>html</strong> in here too.",
         "attributes": {
-          "placeholder": "eg: name@domain.com",
-          "limit": 10,
-          "required": "required",
-          type: "email"
+          "placeholder": "Placeholder set with attributes"
         }
       },
       {
         "type": "toggle",
         "appKey": "cool_stuff",
-        "label": "Enable Cool Stuff",
+        "label": "This is a Toggle",
         "defaultValue": false
       },
       {
         "type": "color",
         "appKey": "colorTest",
         "defaultValue": "FF0000",
-        "label": "Background Color",
+        "label": "Standard Color Picker",
         "sunlight": false
       },
       {
         "type": "color",
         "appKey": "sunnyColorTest",
         "defaultValue": "00FF00",
-        "label": "Sunny Color",
+        "label": "Sunny Color Picker",
         "sunlight": true
       }
     ]
@@ -64,46 +63,33 @@ module.exports = [
       {
         "type": "radiogroup",
         "appKey": "radiogroup-test",
-        "label": "Radio test",
+        "label": "Radio Group",
         "options": [
-          { "label": "Test thing one", "value": "one" },
+          { "label": "Test thing", "value": "one" },
           { "label": "Another thing", "value": "two" },
-          { "label": "One really long thing that would not fit", "value": "three" },
-          { "label": "Small", "value": "quote' \"test" },
-          { "label": "Final thing", "value": "three" }
+          { "label": "Final thing with <em>html</em>", "value": "three" }
         ]
       },
       {
         "type": "checkboxgroup",
         "appKey": "checkboxgroup-test",
         "defaultValue": ["quote' \"test", "two"],
-        "label": "Checkbox test",
+        "label": "Checkbox Group",
         "options": [
-          { "label": "Test <strong>thing</strong> one", "value": "one" },
+          { "label": "First thing", "value": "three" },
           { "label": "Another thing", "value": "two" },
-          { "label": "One really long thing that would not fit", "value": "three" },
-          { "label": "Small", "value": "quote' \"test" },
           { "label": "Final thing", "value": "three" }
         ]
       },
-      {
-        "type": "input",
-        "appKey": "date",
-        "defaultValue": "",
-        "label": "Range",
-        "attributes": {
-          type: "range"
-        }
-      },
       {
         "type": "select",
         "appKey": "flavor",
         "defaultValue": "grape",
-        "label": "Favorite Flavor",
+        "label": "Select Menu",
         "options": [
           { "label": "", "value": "" },
           { "label": "Berry", "value": "berry" },
-          { "label": "Grape", "value": "grape" },
+          { "label": "This Option is Selected", "value": "grape" },
           { "label": "Banana", "value": "banana" }
         ],
         "attributes": {

dist/clay.js

@@ -1,3 +1,3 @@
-/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-29T01:15:16.630Z */
-!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,c){if(!n[a]){if(!e[a]){var s="function"==typeof require&&require;if(!c&&s)return s(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<o.length;a++)r(o[a]);return r}({1:[function(t,e,n){function o(t){return/^[a-z_$][0-9a-z_$]*$/gi.test(t)&&!i.test(t)}function r(t){if(a)return t.toString();var e=t.source.replace(/\//g,function(t,e,n){return 0===e||"\\"!==n[e-1]?"\\/":"/"}),n=(t.global&&"g"||"")+(t.ignoreCase&&"i"||"")+(t.multiline&&"m"||"");return"/"+e+"/"+n}e.exports=function(t,e,n,i){function a(t,e,n,i,c){function s(t){return n.slice(1)+t.join(","+(n&&"\n")+l)+(n?" ":"")}var l=i+n;switch(t=e?e(t):t,typeof t){case"string":return JSON.stringify(t);case"boolean":case"number":case"undefined":return""+t;case"function":return t.toString()}if(null===t)return"null";if(t instanceof RegExp)return r(t);if(t instanceof Date)return"new Date("+t.getTime()+")";var u=c.indexOf(t)+1;if(u>0)return"{$circularReference:"+u+"}";if(c.push(t),Array.isArray(t))return"["+s(t.map(function(t){return a(t,e,n,l,c.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+s(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,c.slice())}))+"}":"{}"}var c=[];return a(t,e,void 0===n?"  ":n||"",i||"",c)};var i=/^(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|undefined|var|void|volatile|while|with)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":19}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"000000":"000000","000055":"001e41","0000aa":"004387","0000ff":"0068ca","005500":"2b4a2c","005555":"27514f","0055aa":"16638d","0055ff":"007dce","00aa00":"5e9860","00aa55":"5c9b72","00aaaa":"57a5a2","00aaff":"4cb4db","00ff00":"8ee391","00ff55":"8ee69e","00ffaa":"8aebc0","00ffff":"84f5f1",550000:"4a161b",550055:"482748","5500aa":"40488a","5500ff":"2f6bcc",555500:"564e36",555555:"545454","5555aa":"4f6790","5555ff":"4180d0","55aa00":"759a64","55aa55":"759d76","55aaaa":"71a6a4","55aaff":"69b5dd","55ff00":"9ee594","55ff55":"9de7a0","55ffaa":"9becc2","55ffff":"95f6f2",aa0000:"99353f",aa0055:"983e5a",aa00aa:"955694",aa00ff:"8f74d2",aa5500:"9d5b4d",aa5555:"9d6064",aa55aa:"9a7099",aa55ff:"9587d5",aaaa00:"afa072",aaaa55:"aea382",aaaaaa:"ababab",ffffff:"ffffff",aaaaff:"a7bae2",aaff00:"c9e89d",aaff55:"c9eaa7",aaffaa:"c7f0c8",aaffff:"c3f9f7",ff0000:"e35462",ff0055:"e25874",ff00aa:"e16aa3",ff00ff:"de83dc",ff5500:"e66e6b",ff5555:"e6727c",ff55aa:"e37fa7",ff55ff:"e194df",ffaa00:"f1aa86",ffaa55:"f1ad93",ffaaaa:"efb5b8",ffaaff:"ecc3eb",ffff00:"ffeeab",ffff55:"fff1b5",ffffaa:"fff6d3"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],c="",s=100/a[0].length,l=100/a.length,u=o.$element,f=0;f<a.length;f++)for(var p=0;p<a[f].length;p++){var d=a[f][p],m=d?" selectable":"",b=0===f&&0===p||0===f&&!a[f][p-1]||!a[f][p-1]&&!a[f-1][p]?" rounded-tl":"",g=0===f&&!a[f][p+1]||!a[f][p+1]&&!a[f-1][p]?" rounded-tr 
Line truncated
-},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(){i.meta={activeWatchInfo:Pebble.getActiveWatchInfo&&Pebble.getActiveWatchInfo(),accountToken:Pebble.getAccountToken(),watchToken:Pebble.getWatchToken()}}function r(t){Array.isArray(t)?t.forEach(function(t){r(t)}):"section"===t.type?r(t.items):a[t.type]&&i.registerComponent(a[t.type])}var i=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},i.config=t,i.customFn=e||function(){},i.components={},i.meta={activeWatchInfo:null,accountToken:"",watchToken:""},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble?(Pebble.addEventListener("showConfiguration",function(){o(),Pebble.openURL(i.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(i.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})):"undefined"!=typeof Pebble&&Pebble.addEventListener("ready",function(){o()}),r(i.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var c=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components)).replace("$$META$$",i(this.meta));return e?o.encodeDataUri(c,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(c)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,c,s,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u<t.length;)o=t.charCodeAt(u++),r=t.charCodeAt(u++),i=t.charCodeAt(u++),a=o>>2,c=(3&o)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(s=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(c),n.charAt(s),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":29,tosource:1}]},{},["pebble-clay"])("pebble-clay")});
+/* Clay - https://github.com/pebble/clay - Version: 0.1.0 - Build Date: 2016-02-29T12:16:57.922Z */
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.clay=t()}}(function(){return function t(e,n,o){function r(a,s){if(!n[a]){if(!e[a]){var c="function"==typeof require&&require;if(!s&&c)return c(a,!0);if(i)return i(a,!0);var l=new Error("Cannot find module '"+a+"'");throw l.code="MODULE_NOT_FOUND",l}var u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var n=e[a][1][t];return r(n?n:t)},u,u.exports,t,e,n,o)}return n[a].exports}for(var i="function"==typeof require&&require,a=0;a<o.length;a++)r(o[a]);return r}({1:[function(t,e,n){function o(t){return/^[a-z_$][0-9a-z_$]*$/gi.test(t)&&!i.test(t)}function r(t){if(a)return t.toString();var e=t.source.replace(/\//g,function(t,e,n){return 0===e||"\\"!==n[e-1]?"\\/":"/"}),n=(t.global&&"g"||"")+(t.ignoreCase&&"i"||"")+(t.multiline&&"m"||"");return"/"+e+"/"+n}e.exports=function(t,e,n,i){function a(t,e,n,i,s){function c(t){return n.slice(1)+t.join(","+(n&&"\n")+l)+(n?" ":"")}var l=i+n;switch(t=e?e(t):t,typeof t){case"string":return JSON.stringify(t);case"boolean":case"number":case"undefined":return""+t;case"function":return t.toString()}if(null===t)return"null";if(t instanceof RegExp)return r(t);if(t instanceof Date)return"new Date("+t.getTime()+")";var u=s.indexOf(t)+1;if(u>0)return"{$circularReference:"+u+"}";if(s.push(t),Array.isArray(t))return"["+c(t.map(function(t){return a(t,e,n,l,s.slice())}))+"]";var f=Object.keys(t);return f.length?"{"+c(f.map(function(r){return(o(r)?r:JSON.stringify(r))+":"+a(t[r],e,n,l,s.slice())}))+"}":"{}"}var s=[];return a(t,e,void 0===n?"  ":n||"",i||"",s)};var i=/^(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|undefined|var|void|volatile|while|with)$/,a="\\/"===new RegExp("/").source},{}],2:[function(t,e,n){"use strict";e.exports={name:"checkboxgroup",template:t("../../templates/components/checkboxgroup.tpl"),style:t("../../styles/clay/components/checkboxgroup.scss"),manipulator:"checkboxgroup",defaults:{label:"",options:[],attributes:{}}}},{"../../styles/clay/components/checkboxgroup.scss":13,"../../templates/components/checkboxgroup.tpl":20}],3:[function(t,e,n){"use strict";e.exports={name:"color",template:t("../../templates/components/color.tpl"),style:t("../../styles/clay/components/color.scss"),manipulator:"color",defaults:{label:""},initialize:function(t){function e(t){if(t===!1)return"transparent";for("number"==typeof t&&(t=t.toString(16));t.length<6;)t="0"+t;return"#"+(r?i[t]:t)}for(var n=t.HTML,o=this,r=o.config.sunlight!==!1,i={"000000":"000000","000055":"001e41","0000aa":"004387","0000ff":"0068ca","005500":"2b4a2c","005555":"27514f","0055aa":"16638d","0055ff":"007dce","00aa00":"5e9860","00aa55":"5c9b72","00aaaa":"57a5a2","00aaff":"4cb4db","00ff00":"8ee391","00ff55":"8ee69e","00ffaa":"8aebc0","00ffff":"84f5f1",550000:"4a161b",550055:"482748","5500aa":"40488a","5500ff":"2f6bcc",555500:"564e36",555555:"545454","5555aa":"4f6790","5555ff":"4180d0","55aa00":"759a64","55aa55":"759d76","55aaaa":"71a6a4","55aaff":"69b5dd","55ff00":"9ee594","55ff55":"9de7a0","55ffaa":"9becc2","55ffff":"95f6f2",aa0000:"99353f",aa0055:"983e5a",aa00aa:"955694",aa00ff:"8f74d2",aa5500:"9d5b4d",aa5555:"9d6064",aa55aa:"9a7099",aa55ff:"9587d5",aaaa00:"afa072",aaaa55:"aea382",aaaaaa:"ababab",ffffff:"ffffff",aaaaff:"a7bae2",aaff00:"c9e89d",aaff55:"c9eaa7",aaffaa:"c7f0c8",aaffff:"c3f9f7",ff0000:"e35462",ff0055:"e25874",ff00aa:"e16aa3",ff00ff:"de83dc",ff5500:"e66e6b",ff5555:"e6727c",ff55aa:"e37fa7",ff55ff:"e194df",ffaa00:"f1aa86",ffaa55:"f1ad93",ffaaaa:"efb5b8",ffaaff:"ecc3eb",ffff00:"ffeeab",ffff55:"fff1b5",ffffaa:"fff6d3"},a=o.config.layout||[[!1,!1,"55ff00","aaff55",!1,"ffff55","ffffaa",!1,!1],[!1,"aaffaa","55ff55","00ff00","aaff00","ffff00","ffaa55","ffaaaa",!1],["55ffaa","00ff55","00aa00","55aa00","aaaa55","aaaa00","ffaa00","ff5500","ff5555"],["aaffff","00ffaa","00aa55","55aa55","005500","555500","aa5500","ff0000","ff0055"],[!1,"55aaaa","00aaaa","005555","ffffff","000000","aa5555","aa0000",!1],["55ffff","00ffff","00aaff","0055aa","aaaaaa","555555","550000","aa0055","ff55aa"],["55aaff","0055ff","0000ff","0000aa","000055","550055","aa00aa","ff00aa","ffaaff"],[!1,"5555aa","5555ff","5500ff","5500aa","aa00ff","ff00ff","ff55ff",!1],[!1,!1,!1,"aaaaff","aa55ff","aa55aa",!1,!1,!1]],s="",c=100/a[0].length,l=100/a.length,u=o.$element,f=0;f<a.length;f++)for(var p=0;p<a[f].length;p++){var d=a[f][p],m=d?" selectable":"",g=0===f&&0===p||0===f&&!a[f][p-1]||!a[f][p-1]&&!a[f-1][p]?" rounded-tl":"",b=0===f&&!a[f][p+1]||!a[f][p+1]&&!a[f-1][p]?" rounded-tr 
Line truncated
+},{}],"pebble-clay":[function(t,e,n){"use strict";function o(t,e,n){function o(t){Array.isArray(t)?t.forEach(function(t){o(t)}):"section"===t.type?o(t.items):a[t.type]&&r.registerComponent(a[t.type])}var r=this;if(!Array.isArray(t))throw new Error("config must be an Array");if(e&&"function"!=typeof e)throw new Error('customFn must be a function or "null"');n=n||{},r.config=t,r.customFn=e||function(){},r.components={},n.autoHandleEvents!==!1&&"undefined"!=typeof Pebble&&(Pebble.addEventListener("showConfiguration",function(){Pebble.openURL(r.generateUrl())}),Pebble.addEventListener("webviewclosed",function(t){t&&t.response&&Pebble.sendAppMessage(r.getSettings(t.response),function(){console.log("Sent config data to Pebble")},function(t){console.log("Failed to send config data!"),console.log(JSON.stringify(t))})})),o(r.config)}var r=t("./tmp/config-page.html"),i=t("tosource"),a=t("./src/scripts/components");o.prototype.registerComponent=function(t){this.components[t.name]=t},o.prototype.generateUrl=function(){var t={},e=!Pebble||"pypkjs"===Pebble.platform,n=e?"$$$RETURN_TO$$$":"pebblejs://close#";try{t=JSON.parse(localStorage.getItem("clay-settings"))||{}}catch(a){console.error(a.toString())}var s=r.replace("$$RETURN_TO$$",n).replace("$$CUSTOM_FN$$",i(this.customFn)).replace("$$CONFIG$$",i(this.config)).replace("$$SETTINGS$$",i(t)).replace("$$COMPONENTS$$",i(this.components));return e?o.encodeDataUri(s,"http://clay.pebble.com.s3-website-us-west-2.amazonaws.com/#"):o.encodeDataUri(s)},o.prototype.getSettings=function(t){var e={};try{e=JSON.parse(decodeURIComponent(t))}catch(n){throw new Error("The provided response was not valid JSON")}return localStorage.setItem("clay-settings",JSON.stringify(e)),e},o.encodeDataUri=function(t,e){if(e="undefined"!=typeof e?e:"data:text/html;base64,",window.btoa)return e+encodeURIComponent(window.btoa(t));var n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";t=String(t);var o,r,i,a,s,c,l,u=0,f=[];if(/[^\x00-\xFF]/.test(t))throw Error("InvalidCharacterError");for(;u<t.length;)o=t.charCodeAt(u++),r=t.charCodeAt(u++),i=t.charCodeAt(u++),a=o>>2,s=(3&o)<<4|r>>4,c=(15&r)<<2|i>>6,l=63&i,u===t.length+2?(c=64,l=64):u===t.length+1&&(l=64),f.push(n.charAt(a),n.charAt(s),n.charAt(c),n.charAt(l));return e+encodeURIComponent(f.join(""))},e.exports=o},{"./src/scripts/components":6,"./tmp/config-page.html":30,tosource:1}]},{},["pebble-clay"])("pebble-clay")});

src/scripts/components/checkboxgroup.js

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

src/scripts/components/color.js

@@ -6,7 +6,8 @@ module.exports = {
   style: require('../../styles/clay/components/color.scss'),
   manipulator: 'color',
   defaults: {
-    label: ''
+    label: '',
+    description: ''
   },
   initialize: function(minified) {
     var HTML = minified.HTML;

src/scripts/components/input.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'val',
   defaults: {
     label: '',
+    description: '',
     attributes: {}
   }
 };

src/scripts/components/radiogroup.js

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

src/scripts/components/select.js

@@ -8,6 +8,7 @@ module.exports = {
   defaults: {
     label: '',
     options: [],
+    description: '',
     attributes: {}
   },
   initialize: function() {

src/scripts/components/toggle.js

@@ -7,6 +7,7 @@ module.exports = {
   manipulator: 'checked',
   defaults: {
     label: '',
+    description: '',
     attributes: {}
   }
 };

src/styles/clay/_base.scss

@@ -20,6 +20,23 @@ body {
   padding: 0 $item-spacing-h $item-spacing-v;
 }
 
+em {
+  font-style: italic;
+}
+
+strong {
+  @include font-pfdin(medium);
+  color: $color-orange;
+}
+
+a {
+  color: $color-gray-8;
+
+  &:hover {
+    color: inherit;
+  }
+}
+
 h1, h2, h3, h4 {
   text-transform: uppercase;
   @include font-pfdin(medium);
@@ -50,23 +67,11 @@ h6 {
   @include font-size(0.8);
 }
 
-strong {
-  @include font-pfdin(medium);
-  color: $color-orange;
-}
-
-a {
-  color: $color-gray-8;
-
-  &:hover {
-    color: inherit;
-  }
-}
-
 label {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: $item-spacing-v $item-spacing-h;
 
   .input {
     white-space: nowrap;
@@ -131,11 +136,6 @@ label {
       margin-top: 0;
     }
 
-    &:last-child,
-    &:first-child {
-      padding-bottom: $item-spacing-v;
-    }
-
     &:first-child:after {
       display: none;
     }
@@ -179,52 +179,15 @@ label {
 
 }
 
+.description {
+  padding: 0 $item-spacing-h $item-spacing-v ;
+  @include font-size(0.9);
+  color: $color-gray-9;
+}
+
 .inputs {
   display: block;
   width:100%;
   border-collapse: collapse;
-
-  .section & .component {
-    display: table;
-    width:100%;
-
-    .label,
-    .input {
-      display: table-cell;
-    }
-
-    .input {
-      text-align: right;
-    }
-
-    &.invalid {
-      .input:after {
-        content: "!";
-        display: inline-block;
-        color: $color-white;
-        background: $color-orange;
-        border-radius: $border-radius;
-        width: 1.2em;
-        text-align: center;
-        height: 1.2em;
-        font-size: 1em;
-        vertical-align: middle;
-        line-height: 1.3em;
-        margin-left: -0.7em;
-        position:absolute;
-        @include font-pfdin(regular);
-      }
-
-      .input input {
-        color: $color-orange;
-        padding-right: 1em;
-
-        @include placeholder {
-          color: $color-orange;
-        }
-
-      }
-    }
-
-  }
 }
+

src/styles/clay/components/checkboxgroup.scss

@@ -5,6 +5,10 @@
 
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
+
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -12,13 +16,14 @@
 
   .checkbox-group {
 
+    padding-bottom: $item-spacing-v / 2;
+
     label {
-      padding: $item-spacing-v / 2 0;
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -56,6 +61,10 @@
 
       }
     }
+  }
 
+  .description {
+    padding-left: 0;
+    padding-right: 0;
   }
 }

src/styles/clay/components/color.scss

@@ -2,6 +2,10 @@
 
 .component-color {
 
+  .section & {
+    padding: 0;
+  }
+
   .value {
     width: $small-component-width;
     height: $base-height;

src/styles/clay/components/input.scss

@@ -2,7 +2,13 @@
 
 .component-input {
 
-  display: block;
+  .section & {
+    padding: 0;
+  }
+
+  label {
+    display: block;
+  }
 
   .label {
     padding-bottom: $item-spacing-v;

src/styles/clay/components/radiogroup.scss

@@ -5,6 +5,10 @@
 
   display: block;
 
+  .section & {
+    padding-right: $item-spacing-h / 2;
+  }
+
   > .label {
     display: block;
     padding-bottom: $item-spacing-v / 2;
@@ -12,13 +16,14 @@
 
   .radio-group {
 
+    padding-bottom: $item-spacing-v / 2;
+
     label {
-      padding: $item-spacing-v / 2 0;
+      padding: $item-spacing-v / 2 $item-spacing-h / 2;
     }
 
     .label {
       font-size: 0.9em;
-      padding: 0 $item-spacing-h / 2;
     }
 
     input {
@@ -55,4 +60,9 @@
     }
 
   }
+
+  .description {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }

src/styles/clay/components/select.scss

@@ -2,7 +2,14 @@
 @import "clay";
 
 .component-select {
-  position: relative;
+
+  .section & {
+    padding: 0;
+  }
+
+  label {
+    position: relative;
+  }
 
   .value {
     $triangle-size: 0.85rem;
@@ -16,7 +23,7 @@
       right: 0;
       top: 50%;
       margin-top: -0.1rem;
-      @include triangle($triangle-size, $color-gray-10, down);
+      @include triangle($triangle-size, $color-orange, down);
     }
   }
 

src/styles/clay/components/toggle.scss

@@ -6,6 +6,10 @@
   $slide-width: $small-component-width;
   $marker-diameter: $base-height;
 
+  .section & {
+    padding: 0;
+  }
+
   input {
     display: none; // @todo make sure this doesn't mess up interactivity on iOS
   }

src/templates/components/checkboxgroup.tpl

@@ -15,4 +15,7 @@
       </label>
     {{/each}}
   </div>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
 </div>

src/templates/components/color.tpl

@@ -1,5 +1,5 @@
-<div class="component component-color tap-highlight">
-  <label>
+<div class="component component-color">
+  <label class="tap-highlight">
     <input
       data-manipulator-target
       type="hidden"
@@ -7,6 +7,9 @@
     <span class="label">{{{label}}}</span>
     <span class="value"></span>
   </label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
   <div class="picker-wrap">
     <div class="picker">
       <div class="color-box-wrap">

src/templates/components/input.tpl

@@ -1,9 +1,15 @@
-<label class="component component-input tap-highlight">
-  <span class="label">{{{label}}}</span>
-  <span class="input">
-    <input
+<div class="component component-input">
+  <label class="tap-highlight">
+    <span class="label">{{{label}}}</span>
+    <span class="input">
+      <input
       data-manipulator-target
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+        {{each key: attributes}}{{key}}="{{this}}"{{/each}}
     />
-  </span>
-</label>
+    </span>
+  </label>
+
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

src/templates/components/radiogroup.tpl

@@ -15,4 +15,7 @@
       </label>
     {{/each}}
   </div>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
 </div>

src/templates/components/select.tpl

@@ -1,9 +1,14 @@
-<label class="component component-select tap-highlight">
-  <span class="label">{{{label}}}</span>
-  <span class="value"></span>
-  <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
-    {{each options}}
-      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
-    {{/each}}
-  </select>
-</label>
+<div class="component component-select">
+  <label class="tap-highlight">
+    <span class="label">{{{label}}}</span>
+    <span class="value"></span>
+    <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
+      {{each options}}
+        <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+      {{/each}}
+    </select>
+  </label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

src/templates/components/toggle.tpl

@@ -1,14 +1,19 @@
-<label class="component component-toggle tap-highlight">
-  <span class="label">{{{label}}}</span>
-  <span class="input">
-    <input
-      data-manipulator-target
-      type="checkbox"
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-    />
-    <span class="graphic">
-      <span class="slide"></span>
-      <span class="marker"></span>
+<div class="component component-toggle">
+  <label class="tap-highlight">
+    <span class="label">{{{label}}}</span>
+    <span class="input">
+      <input
+        data-manipulator-target
+        type="checkbox"
+        {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+      />
+      <span class="graphic">
+        <span class="slide"></span>
+        <span class="marker"></span>
+      </span>
     </span>
-  </span>
-</label>
+  </label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>

test/spec/lib/clay-item.js

@@ -77,7 +77,7 @@ describe('ClayItem', function() {
   describe('.$element', function() {
     it('sets $element correctly', function() {
       var clayItem = fixture.clayItem('input');
-      assert.strictEqual(clayItem.$element[0].tagName, 'LABEL');
+      assert.strictEqual(clayItem.$element[0].classList.contains('component'), true);
     });
   });