From 55a700eeaf86848e8207038743205bd3b3fff157 Mon Sep 17 00:00:00 2001
From: Stephen Williams <stephenwilliams@salesforce.com>
Date: Fri, 14 Apr 2017 13:54:35 -0400
Subject: [PATCH 1/4] whitespace

---
 less/forms.less | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/less/forms.less b/less/forms.less
index 9a55afbb4..e4fde63f5 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -36,7 +36,7 @@
 				.checkbox-radio-hover();
 			}
 		}
-		
+
 		label, .input-label, label& {
 			cursor: pointer;
 			font-weight: normal;
@@ -102,7 +102,7 @@
 				color: @text-color;
 				color: @checkbox-primary-color;
 				cursor: pointer;
-				
+
 				&:before {
 					.checkbox-radio-focus();
 					outline: none;
@@ -176,12 +176,12 @@
 
 
 
-// Allows multiline labels next to checkboxes and radio 
+// Allows multiline labels next to checkboxes and radio
 // Should be wrapped in `<form class="form-horizontal"><div class="form-group">`
 .fuelux {
 
 	.checkbox.multiline, .radio.multiline {
-		float: left; 
+		float: left;
 		margin-left: 15px;
 	}
 
@@ -191,9 +191,9 @@
 .fuelux {
 
 	.checkbox.multiline ~ .control-label, .radio.multiline ~ .control-label {
-		float: left; 
-		width: 80%; 
-		margin-left: 10px; 
+		float: left;
+		width: 80%;
+		margin-left: 10px;
 		text-align: left;
 
 		& > label {

From b35c9485c4462fc6fbd82813c54d08318ee65d2a Mon Sep 17 00:00:00 2001
From: Stephen Williams <stephenwilliams@salesforce.com>
Date: Fri, 14 Apr 2017 13:54:08 -0400
Subject: [PATCH 2/4] add validation and require support to templates

---
 templates/handlebars/bootstrap/input.hbs             | 4 ++--
 templates/handlebars/bootstrap/textarea.hbs          | 4 ++--
 templates/handlebars/fuelux/checkbox.hbs             | 4 ++--
 templates/handlebars/fuelux/combobox.hbs             | 4 ++--
 templates/handlebars/fuelux/radio.hbs                | 4 ++--
 templates/handlebars/fuelux/selectlist.hbs           | 4 ++--
 templates/handlebars/fuelux/spinbox.hbs              | 4 ++--
 templates/underscore/bootstrap/input.html            | 4 ++--
 templates/underscore/bootstrap/textarea.html         | 2 +-
 templates/underscore/fuelux/checkboxes.html          | 4 ++--
 templates/underscore/fuelux/input-with-combobox.html | 4 ++--
 templates/underscore/fuelux/radios.html              | 4 ++--
 templates/underscore/fuelux/selectlist.html          | 4 ++--
 templates/underscore/fuelux/spinbox.html             | 4 ++--
 14 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/templates/handlebars/bootstrap/input.hbs b/templates/handlebars/bootstrap/input.hbs
index 4c5667fb5..029825d9b 100644
--- a/templates/handlebars/bootstrap/input.hbs
+++ b/templates/handlebars/bootstrap/input.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
 	{{#if label}}<label for="{{#if id}}{{id}}{{else}}myInput{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{label}}</label>{{/if}}
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 		{{#if hasAside}}<div class="input-group">{{/if}}
@@ -29,4 +29,4 @@
 		{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}myInput{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/handlebars/bootstrap/textarea.hbs b/templates/handlebars/bootstrap/textarea.hbs
index 6ff63973c..2a1d57738 100644
--- a/templates/handlebars/bootstrap/textarea.hbs
+++ b/templates/handlebars/bootstrap/textarea.hbs
@@ -1,7 +1,7 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}myTextarea{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
 		<textarea class="form-control" id="{{#if id}}{{id}}{{else}}myTextarea{{/if}}" name="{{#if name}}{{name}}{{else}}{{#if id}}{{id}}{{else}}myTextarea{{/if}}{{/if}}" rows="{{#if rows}}{{rows}}{{/if}}"{{#if required}} required{{/if}}{{#if readonly}} readonly{{/if}}{{#if disabled}} disabled{{/if}}>{{#if text}}{{text}}{{/if}}</textarea>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/handlebars/fuelux/checkbox.hbs b/templates/handlebars/fuelux/checkbox.hbs
index 2228ec65f..43dcc6238 100644
--- a/templates/handlebars/fuelux/checkbox.hbs
+++ b/templates/handlebars/fuelux/checkbox.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCustomCheckboxWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	<div class="{{#if inline}}checkbox{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
@@ -12,4 +12,4 @@
 		{{/each}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/handlebars/fuelux/combobox.hbs b/templates/handlebars/fuelux/combobox.hbs
index e6fa49fcb..345b659e6 100644
--- a/templates/handlebars/fuelux/combobox.hbs
+++ b/templates/handlebars/fuelux/combobox.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
+<div class="form-group{{#if horizontal}}{{#if inputsize}} form-group-{{inputsize}}{{/if}}{{/if}}{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Input" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	{{#if horizontal}}<div class="col-sm-10">{{/if}}
@@ -17,4 +17,4 @@
 	{{#if feedback}}<span class="glyphicon glyphicon-{{feedback}} form-control-feedback" aria-hidden="true"></span><span id="{{#if id}}{{id}}{{else}}myCombobox{{/if}}Status" class="sr-only">({{#if validation}}{{validation}}{{/if}})</span>{{/if}}
 	{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	{{#if horizontal}}</div>{{/if}}
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/handlebars/fuelux/radio.hbs b/templates/handlebars/fuelux/radio.hbs
index 068bb598c..da610f620 100644
--- a/templates/handlebars/fuelux/radio.hbs
+++ b/templates/handlebars/fuelux/radio.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label for="{{#if id}}{{id}}{{else}}myCustomRadioWrapper{{/if}}" class="control-label{{#if horizontal}} col-sm-2{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 
 	<div class="{{#if inline}}radio{{/if}}{{#if horizontal}} col-sm-10{{/if}}"{{#if required}} required{{/if}}>
@@ -12,4 +12,4 @@
 		{{/each}}
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/handlebars/fuelux/selectlist.hbs b/templates/handlebars/fuelux/selectlist.hbs
index 97f987a84..592e9112c 100644
--- a/templates/handlebars/fuelux/selectlist.hbs
+++ b/templates/handlebars/fuelux/selectlist.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{/if}}{{#if required}} required{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">{{#if label}}{{label}}{{/if}}</label>
 	<div class="controls text-{{#if buttonalign}}{{buttonalign}}{{else}}left{{/if}}{{#if horizontal}} col-sm-10{{/if}}">
 		<div class="btn-group selectlist"{{#unless doNotInit}} data-initialize="selectlist"{{/unless}} data-resize="auto" id="{{#if id}}{{id}}{{else}}mySelectlist{{/if}}">
@@ -16,4 +16,4 @@
 		</div>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/handlebars/fuelux/spinbox.hbs b/templates/handlebars/fuelux/spinbox.hbs
index 5abab7849..2c5565f17 100644
--- a/templates/handlebars/fuelux/spinbox.hbs
+++ b/templates/handlebars/fuelux/spinbox.hbs
@@ -1,4 +1,4 @@
-<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}">
+<div class="form-group{{#if validation}} has-{{validation}}{{#if feedback}} has-feedback{{/if}}{{/if}}{{#if required}} required{{/if}}">
 	<label class="control-label{{#if horizontal}} col-sm-2{{/if}}" for="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}Input">{{#if label}}{{label}}{{/if}}</label>
 	<div{{#if horizontal}} class="col-sm-10"{{/if}}>
 		<div class="spinbox" {{#unless doNotInit}}data-initialize="spinbox"{{/unless}} id="{{#if id}}{{id}}{{else}}mySpinbox{{/if}}">
@@ -15,4 +15,4 @@
 		</div>
 		{{#if helptext}}<p class="help-block">{{helptext}}</p>{{/if}}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/underscore/bootstrap/input.html b/templates/underscore/bootstrap/input.html
index 2b717a7bc..ef00c4d1c 100644
--- a/templates/underscore/bootstrap/input.html
+++ b/templates/underscore/bootstrap/input.html
@@ -1,8 +1,8 @@
 <!-- Text input http://getbootstrap.com/css/#forms -->
-<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %>">
+<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %><% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= id %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <% if(horizontal) {%><div class="col-sm-10"><% } %>
     <input type="<%= inputtype %>" class="<% if(!horizontal && inputsize.length > 0) {%>input-<%= inputsize %> <% } %>form-control" id="<%= id %>" placeholder="<%= placeholder %>"<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   <% if(horizontal) {%></div><% } %>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/underscore/bootstrap/textarea.html b/templates/underscore/bootstrap/textarea.html
index 7e907bec0..0012caad7 100644
--- a/templates/underscore/bootstrap/textarea.html
+++ b/templates/underscore/bootstrap/textarea.html
@@ -1,5 +1,5 @@
 <!-- Textarea http://getbootstrap.com/css/#textarea -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>"><%= label %></label>
   <% if(horizontal) {%><div class="col-sm-10"><% } %>
     <textarea class="form-control" id="<%= id %>" name="<%= id %>" rows="<%= rows %>"<% if(required) {%> required <% } %><% if(readonly) {%> readonly <% } %><% if(isDisabled) {%> disabled <% } %>><%= textarea %></textarea>
diff --git a/templates/underscore/fuelux/checkboxes.html b/templates/underscore/fuelux/checkboxes.html
index b1be18f1d..aeb93469e 100644
--- a/templates/underscore/fuelux/checkboxes.html
+++ b/templates/underscore/fuelux/checkboxes.html
@@ -1,5 +1,5 @@
 <!-- Fuel UX Checkboxes http://getfuelux.com/javascript.html#checkbox -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= name %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <div class="<% if(horizontal) {%> col-sm-10<% } %><% if(required) {%> required<% } %>">
     <% _.each(checkboxes, function(checkbox, i){ %><div class="checkbox">
@@ -10,4 +10,4 @@
     </div><% }); %>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/underscore/fuelux/input-with-combobox.html b/templates/underscore/fuelux/input-with-combobox.html
index 8035f30e4..50651cc86 100644
--- a/templates/underscore/fuelux/input-with-combobox.html
+++ b/templates/underscore/fuelux/input-with-combobox.html
@@ -1,5 +1,5 @@
 <!-- Input With Combobox http://getfuelux.com/javascript.html#combobox -->
-<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %>">
+<div class="form-group<% if(horizontal && inputsize.length > 0) {%> form-group-<%= inputsize %><% } %><% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>Input"><%= label %></label>
   <% if(horizontal) {%><div class="col-sm-10"><% } %>
     <div class="input-group <% if(placement=="appended") { %>input-append<% } else { %>input-prepend<% } %> dropdown combobox<% if(inputsize.length > 0) {%> input-group-<%= inputsize %><% } %>" data-initialize="combobox" id="<%= id %>">
@@ -14,4 +14,4 @@
     </div>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   <% if(horizontal) {%></div><% } %>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/underscore/fuelux/radios.html b/templates/underscore/fuelux/radios.html
index 505a4cf58..8e7b4329d 100644
--- a/templates/underscore/fuelux/radios.html
+++ b/templates/underscore/fuelux/radios.html
@@ -1,5 +1,5 @@
 <!-- Fuel UX Radios http://getfuelux.com/javascript.html#radio -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= name %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <div class="<% if(horizontal) {%> col-sm-10<% } %><% if(required) {%> required<% } %>">
     <% _.each(radios, function(radio, i){ %><div class="radio">
@@ -10,4 +10,4 @@
     </div><% }); %>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/underscore/fuelux/selectlist.html b/templates/underscore/fuelux/selectlist.html
index 1de400375..649905979 100644
--- a/templates/underscore/fuelux/selectlist.html
+++ b/templates/underscore/fuelux/selectlist.html
@@ -1,5 +1,5 @@
 <!-- Fuel UX Select http://getfuelux.com/javascript.html#selectlist -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label class="control-label<% if(horizontal) { %> col-sm-2<% } %>" for="<%= id %>"><%= label %></label>
   <div class="controls <%= buttonalign %><% if(horizontal) {%> col-sm-10<% } %>">
     <div class="btn-group selectlist" data-initialize="selectlist" data-resize="auto" id="<%= id %>">
@@ -15,4 +15,4 @@
     </div>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/templates/underscore/fuelux/spinbox.html b/templates/underscore/fuelux/spinbox.html
index 32346f38b..7da427148 100644
--- a/templates/underscore/fuelux/spinbox.html
+++ b/templates/underscore/fuelux/spinbox.html
@@ -1,5 +1,5 @@
 <!-- Spinbox http://getfuelux.com/javascript.html#spinbox -->
-<div class="form-group">
+<div class="form-group<% if(validation) {%> has-<%= validation %><% } %><% if(required) {%> required<% } %>">
   <label for="<%= id %>" class="control-label<% if(horizontal) { %> col-sm-2<% } %>"><%= label %></label>
   <div<% if(horizontal) {%> class="col-sm-10"<% } %>>
     <div class="spinbox" data-initialize="spinbox" id="<%= id %>">
@@ -15,4 +15,4 @@
     </div>
     <% if (helptext.length > 0) { %><p class="help-block"><%= helptext %></p><% } %>
   </div>
-</div>
\ No newline at end of file
+</div>

From a5ad40fdf6258c62755a25b341c18c6421e85347 Mon Sep 17 00:00:00 2001
From: Stephen Williams <stephenwilliams@salesforce.com>
Date: Fri, 14 Apr 2017 13:55:54 -0400
Subject: [PATCH 3/4] add required class form group for asterisk on control
 label

---
 less/forms.less | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/less/forms.less b/less/forms.less
index e4fde63f5..d0f897031 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -204,3 +204,16 @@
 
 }
 
+.fuelux {
+	.form-group {
+		&.required {
+			.control-label {
+				&:before {
+					content: '*';
+					color: @text-danger;
+					margin-right: @margin-xs;
+				}
+			}
+		}
+	}
+}

From 374faed7652f17b2ea99faf1875d54c789cb9079 Mon Sep 17 00:00:00 2001
From: Christopher McCulloh <cmcculloh@exacttarget.com>
Date: Mon, 24 Apr 2017 16:54:32 -0400
Subject: [PATCH 4/4] (w3847298) add hbs driven checkbox to index page with
 validation state of error for testing

---
 index.html | 2 +-
 index.js   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a967e48fd..7bf7079a7 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@
 				<h2>Checkboxes</h2>
 				<div class="thin-box">
 					<section id="checkboxes-block">
-
+						<div id="myCheckbox1Wrapper" style="width: 300px;"></div>
 						<div class="checkbox" id="myCheckbox">
 							<label class="checkbox-custom" data-initialize="checkbox" id="myCustomCheckbox1">
 								<input class="sr-only" type="checkbox" value="" />
diff --git a/index.js b/index.js
index bb3871400..784a56b67 100644
--- a/index.js
+++ b/index.js
@@ -30,6 +30,10 @@ define(function (require) {
 	 CHECKBOX
 	 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 
+	var checkbox = require('hbs!fuelux_templates/checkbox');
+	var $myCheckbox1Wrapper = $('#myCheckbox1Wrapper');
+	$myCheckbox1Wrapper.html(checkbox({ id: 'myCheckbox1', required: true, validation: 'error', label: 'Checkboxes', checkboxes: [{label: 'Checkbox Label 1' }, {label: 'Checkbox Label 2' }]}));
+
 	// sample method buttons
 	$('#btnCheckboxToggle').on('click', function () {
 		$('#myCustomCheckbox1').checkbox('toggle');