From 7008d672e5b899aa3d54ed5600876c05032f2a7d Mon Sep 17 00:00:00 2001
From: coreylafferty <coreylafferty@gmail.com>
Date: Fri, 27 Mar 2020 13:14:24 -0400
Subject: [PATCH] adjusted checkbox styles and template for cases where label
 is invisible or before the input (#346)

---
 .../_form-item--checkbox.scss                 | 80 ++++++++++---------
 .../form-item--checkbox.twig                  |  2 +-
 templates/form/form-element.html.twig         |  2 +-
 3 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/source/_patterns/04-components/form-item/form-item--checkbox/_form-item--checkbox.scss b/source/_patterns/04-components/form-item/form-item--checkbox/_form-item--checkbox.scss
index d010cdc..6acccf2 100644
--- a/source/_patterns/04-components/form-item/form-item--checkbox/_form-item--checkbox.scss
+++ b/source/_patterns/04-components/form-item/form-item--checkbox/_form-item--checkbox.scss
@@ -5,50 +5,52 @@
   @include vertical-spacing(rem(gesso-spacing(1)));
 }
 
-.form-item__checkbox {
-  @include visually-hidden(true);
-
-  + .form-item__label {
-    cursor: pointer;
-    display: block;
-
-    &::before {
-      @include focus();
-      background: gesso-color(form, background-unchecked);
-      border: 1px solid gesso-color(form, border-dark);
-      content: '\a0';
-      display: inline-block;
-      height: rem(20px);
-      line-height: rem(20px);
-      margin-right: 0.6em;
-      text-indent: 0.15em;
-      transition-duration: gesso-duration(short);
-      transition-property: background-color, border-color, box-shadow, color,
-        opacity, text-shadow, transform;
-      transition-timing-function: gesso-easing(ease-in-out);
-      vertical-align: middle;
-      width: rem(20px);
+.form-item--checkbox.has-visible-label-after {
+  .form-item__checkbox {
+    @include visually-hidden(true);
+
+    + .form-item__label {
+      cursor: pointer;
+      display: block;
+
+      &::before {
+        @include focus();
+        background: gesso-color(form, background-unchecked);
+        border: 1px solid gesso-color(form, border-dark);
+        content: '\a0';
+        display: inline-block;
+        height: rem(20px);
+        line-height: rem(20px);
+        margin-right: 0.6em;
+        text-indent: 0.15em;
+        transition-duration: gesso-duration(short);
+        transition-property: background-color, border-color, box-shadow, color,
+          opacity, text-shadow, transform;
+        transition-timing-function: gesso-easing(ease-in-out);
+        vertical-align: middle;
+        width: rem(20px);
+      }
     }
-  }
 
-  &:checked + .form-item__label::before {
-    @include svg-background(correct);
-    background-color: gesso-color(form, background-checked);
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: rem(20px);
-  }
+    &:checked + .form-item__label::before {
+      @include svg-background(correct);
+      background-color: gesso-color(form, background-checked);
+      background-position: 50%;
+      background-repeat: no-repeat;
+      background-size: rem(20px);
+    }
 
-  &:focus + .form-item__label::before {
-    outline-color: gesso-color(ui, generic, focus);
-  }
+    &:focus + .form-item__label::before {
+      outline-color: gesso-color(ui, generic, focus);
+    }
 
-  &:disabled + .form-item__label {
-    cursor: default;
-    opacity: $form-disabled-opacity;
+    &:disabled + .form-item__label {
+      cursor: default;
+      opacity: $form-disabled-opacity;
 
-    &::before {
-      cursor: not-allowed;
+      &::before {
+        cursor: not-allowed;
+      }
     }
   }
 }
diff --git a/source/_patterns/04-components/form-item/form-item--checkbox/form-item--checkbox.twig b/source/_patterns/04-components/form-item/form-item--checkbox/form-item--checkbox.twig
index 8347815..be9d6b8 100644
--- a/source/_patterns/04-components/form-item/form-item--checkbox/form-item--checkbox.twig
+++ b/source/_patterns/04-components/form-item/form-item--checkbox/form-item--checkbox.twig
@@ -1,4 +1,4 @@
-<div class="form-item form-item--checkbox">
+<div class="form-item form-item--checkbox has-visible-label-after">
   <input class="form-item__checkbox" id="{{ checkbox_id }}" type="checkbox" {% if checkbox_disabled %}disabled{% endif %} {% if checkbox_checked %}checked{% endif %}>
   <label class="form-item__label is-after" for="{{ checkbox_id }}">{{ checkbox_label }}</label>
 </div>
diff --git a/templates/form/form-element.html.twig b/templates/form/form-element.html.twig
index 8a5d127..dce5d1a 100644
--- a/templates/form/form-element.html.twig
+++ b/templates/form/form-element.html.twig
@@ -6,6 +6,7 @@
   'js-form-type-' ~ type|clean_class,
   'js-form-item-' ~ name|clean_class,
   title_display not in ['after', 'before'] ? 'has-no-label',
+  title_display not in ['invisible'] and title_display in ['after'] ? 'has-visible-label-after',
   disabled == 'disabled' ? 'is-disabled',
   errors ? 'has-error',
 ] %}
@@ -14,7 +15,6 @@
   'form-item__description',
   description_display == 'invisible' ? 'visually-hidden',
 ] %}
-
 <div{{ attributes.addClass(add_classes) }}>
   {% if label_display in ['before', 'invisible'] %}
     {{ label }}
-- 
2.24.1