Add description field to all input type components.

README.md

@@ -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

@@ -30,13 +30,18 @@ module.exports = [
           "limit": 10,
           "required": "required",
           type: "email"
-        }
+        },
+        "description": "Some arbitrary text explaining how this all works. " +
+                       "It's cool if this wraps across multiple lines"
+
       },
       {
         "type": "toggle",
         "appKey": "cool_stuff",
         "label": "Enable Cool Stuff",
-        "defaultValue": false
+        "defaultValue": false,
+        "description": "Some arbitrary text explaining how this all works. " +
+                       "It's cool if this wraps across multiple lines"
       },
       {
         "type": "color",
@@ -50,7 +55,9 @@ module.exports = [
         "appKey": "sunnyColorTest",
         "defaultValue": "00FF00",
         "label": "Sunny Color",
-        "sunlight": true
+        "sunlight": true,
+        "description": "Some arbitrary text explaining how this all works. " +
+                       "It's cool if this wraps across multiple lines"
       }
     ]
   },
@@ -71,7 +78,9 @@ module.exports = [
           { "label": "One really long thing that would not fit", "value": "three" },
           { "label": "Small", "value": "quote' \"test" },
           { "label": "Final thing", "value": "three" }
-        ]
+        ],
+        "description": "Some arbitrary text explaining how this all works. " +
+                       "It's cool if this wraps across multiple lines"
       },
       {
         "type": "checkboxgroup",
@@ -84,7 +93,9 @@ module.exports = [
           { "label": "One really long thing that would not fit", "value": "three" },
           { "label": "Small", "value": "quote' \"test" },
           { "label": "Final thing", "value": "three" }
-        ]
+        ],
+        "description": "Some arbitrary text explaining how this all works. " +
+                       "It's cool if this wraps across multiple lines"
       },
       {
         "type": "input",
@@ -108,7 +119,9 @@ module.exports = [
         ],
         "attributes": {
           "required": "required"
-        }
+        },
+        "description": "Some arbitrary text explaining how this all works. " +
+                       "It's cool if this wraps across multiple lines"
       }
     ]
   },

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

@@ -147,52 +147,59 @@ a {
   }
 }
 
+.description {
+  padding-top: $item-spacing-v;
+  @include font-size(0.9);
+  color: $color-gray-9;
+}
+
 .inputs {
   display: block;
   width:100%;
   border-collapse: collapse;
 
-  .section & .component {
+  //.section & .component {
-    display: table;
+  //  display: table;
-    width:100%;
+  //  width:100%;
-
+  //
-    .label,
+  //  .label,
-    .input {
+  //  .input {
-      display: table-cell;
+  //    display: table-cell;
-    }
+  //  }
-    
+  //
-    .input {
+  //  .input {
-      text-align: right;
+  //    text-align: right;
-    }
+  //  }
-
+  //
-    &.invalid {
+  //  &.invalid {
-      .input:after {
+  //    .input:after {
-        content: "!";
+  //      content: "!";
-        display: inline-block;
+  //      display: inline-block;
-        color: $color-white;
+  //      color: $color-white;
-        background: $color-orange;
+  //      background: $color-orange;
-        border-radius: $border-radius;
+  //      border-radius: $border-radius;
-        width: 1.2em;
+  //      width: 1.2em;
-        text-align: center;
+  //      text-align: center;
-        height: 1.2em;
+  //      height: 1.2em;
-        font-size: 1em;
+  //      font-size: 1em;
-        vertical-align: middle;
+  //      vertical-align: middle;
-        line-height: 1.3em;
+  //      line-height: 1.3em;
-        margin-left: -0.7em;
+  //      margin-left: -0.7em;
-        position:absolute;
+  //      position:absolute;
-        @include font-pfdin(regular);
+  //      @include font-pfdin(regular);
-      }
+  //    }
-
+  //
-      .input input {
+  //    .input input {
-        color: $color-orange;
+  //      color: $color-orange;
-        padding-right: 1em;
+  //      padding-right: 1em;
-
+  //
-        @include placeholder {
+  //      @include placeholder {
-          color: $color-orange;
+  //        color: $color-orange;
-        }
+  //      }
-
+  //
-      }
+  //    }
-    }
+  //  }
-
+  //
-  }
+  //}
 }
+

src/styles/clay/components/select.scss

@@ -2,7 +2,10 @@
 @import "clay";
 
 .component-select {
-  position: relative;
+
+  label {
+    position: relative;
+  }
 
   .value {
     $triangle-size: 0.85rem;

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

@@ -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

@@ -6,4 +6,7 @@
       {{each key: attributes}}{{key}}="{{this}}"{{/each}}
     />
   </span>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
 </label>

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">
+<div class="component component-select">
-  <span class="label">{{{label}}}</span>
+  <label>
-  <span class="value"></span>
+    <span class="label">{{{label}}}</span>
-  <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
+    <span class="value"></span>
-    {{each options}}
+    <select data-manipulator-target {{each key: attributes}}{{key}}="{{this}}"{{/each}}>
-      <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
+      {{each options}}
-    {{/each}}
+        <option value="{{this.value}}" class="item-select-option">{{this.label}}</option>
-  </select>
+      {{/each}}
-</label>
+    </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">
+<div class="component component-toggle">
-  <span class="label">{{{label}}}</span>
+  <label>
-  <span class="input">
+    <span class="label">{{{label}}}</span>
-    <input
+    <span class="input">
-      data-manipulator-target
+      <input
-      type="checkbox"
+        data-manipulator-target
-      {{each key: attributes}}{{key}}="{{this}}"{{/each}}
+        type="checkbox"
-    />
+        {{each key: attributes}}{{key}}="{{this}}"{{/each}}
-    <span class="graphic">
+      />
-      <span class="slide"></span>
+      <span class="graphic">
-      <span class="marker"></span>
+        <span class="slide"></span>
+        <span class="marker"></span>
+      </span>
     </span>
-  </span>
+  </label>
-</label>
+  {{if description}}
+    <div class="description">{{{description}}}</div>
+  {{/if}}
+</div>