Check labels styles

We are use a display: block style for labels containing check boxes inside
them, and the label has a width of 100%.

This means that clicking on the blank space on the right of the label text
will check/uncheck the checkbox. To avoid this behaviour we modify the
"display" attribute of the labels.

In order to prevent unexpected behaviour in terms_of_service form labels,
we add specific css for this case when define a checkbox within the
.actions class.

app/assets/stylesheets/layout.scss

@@ -1063,6 +1063,10 @@ form {
     line-height: $line-height;
   }
 
+  .checkbox-label {
+    display: table;
+  }
+
   fieldset legend {
     font-weight: bold;
   }

app/assets/stylesheets/mixins/forms.scss

@@ -170,6 +170,11 @@
     @include breakpoint(medium) {
       width: 75%;
     }
+
+    label {
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 }
 

lib/consul_form_builder.rb

@@ -25,7 +25,10 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
     else
       label = tag.span sanitize(label_text(attribute, options[:label])), class: "checkbox"
 
-      super(attribute, options.merge(label: label, label_options: label_options_for(options)))
+      super(attribute, options.merge(
+        label: label,
+        label_options: { class: "checkbox-label" }.merge(label_options_for(options))
+      ))
     end
   end
 

spec/lib/consul_form_builder_spec.rb

@@ -4,7 +4,7 @@ describe ConsulFormBuilder do
   before do
     dummy_model = Class.new do
       include ActiveModel::Model
-      attr_accessor :title, :quality
+      attr_accessor :title, :quality, :published
     end
 
     stub_const("DummyModel", dummy_model)
@@ -75,6 +75,15 @@ describe ConsulFormBuilder do
     end
   end
 
+  describe "#check_box" do
+    it "adds a checkbox-label class to the label by default" do
+      render builder.check_box(:published)
+
+      expect(page).to have_css "label", count: 1
+      expect(page).to have_css ".checkbox-label"
+    end
+  end
+
   attr_reader :content
 
   def render(content)