From 0c976ab86b586eda03493be07d3a1b80bf330991 Mon Sep 17 00:00:00 2001
From: Eric Newport <kethinov@gmail.com>
Date: Thu, 15 Jun 2023 16:06:30 -0400
Subject: [PATCH] 3.0.2

- Added support for a single checkbox rather than a group of checkboxes.
---
 CHANGELOG.md               |  4 ++++
 README.md                  | 16 +++++++++++++++-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 semanticForms.css          | 13 +++++++++++++
 semanticForms.html         |  6 ++++++
 semanticForms.js           |  7 ++++++-
 semanticFormsNoImages.css  | 13 +++++++++++++
 semanticFormsNoImages.less | 16 ++++++++++++++++
 9 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b1b09d3..82c45a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 - Put your changes here...
 
+## 3.0.2
+
+- Added support for a single checkbox rather than a group of checkboxes.
+
 ## 3.0.1
 
 - Fixed alignment issue.
diff --git a/README.md b/README.md
index f85787b..bbfe4b5 100644
--- a/README.md
+++ b/README.md
@@ -111,7 +111,21 @@ Driven by flexbox to intelligently align the buttons based on how many are in th
 ## Checkboxes and radio buttons
 
 Checkboxes and radio buttons need to follow the following markup structure:
-### Checkboxes
+
+### A single checkbox
+
+Not too different than other inputs:
+
+```html
+<form class="semanticForms">
+  <dl>
+    <dt><label for="checkbox">Single checkbox</label></dt>
+    <dd><input id="checkbox" name="checkbox" type="checkbox"></dd>
+  </dl>
+</form>
+```
+
+### Checkbox group
 
 ```html
 <form class="semanticForms">
diff --git a/package-lock.json b/package-lock.json
index a9fbe36..b713bc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "semantic-forms",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "semantic-forms",
-      "version": "3.0.0",
+      "version": "3.0.2",
       "license": "CC-BY-4.0",
       "devDependencies": {
         "less": "4.1.3",
diff --git a/package.json b/package.json
index d028be3..c15dfdc 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "semantic-forms",
   "description": "Semantic Forms",
   "author": "Eric Newport <kethinov@gmail.com>",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "files": [
     "semanticForms.css",
     "semanticForms.js",
diff --git a/semanticForms.css b/semanticForms.css
index 3f6622e..8d8e8df 100644
--- a/semanticForms.css
+++ b/semanticForms.css
@@ -202,6 +202,19 @@
   transform-origin: left bottom;
   transform: translate(0, 38px) scale(1.5);
 }
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox {
+  width: 292px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: left;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox label {
+  margin-top: 10px;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox input {
+  margin: 10px 10px 0 0;
+}
 .semanticForms .floatLabelForm ::placeholder {
   opacity: 0;
   transition: inherit;
diff --git a/semanticForms.html b/semanticForms.html
index 5563245..8824d0d 100644
--- a/semanticForms.html
+++ b/semanticForms.html
@@ -71,6 +71,9 @@ <h1>Semantic Forms</h1>
                 </ul>
               </dd>
 
+              <dt><label for="checkbox">Single checkbox</label></dt>
+              <dd><input id="checkbox" name="checkbox" type="checkbox"></dd>
+
               <dt><label data-for="radios">Radios:</label></dt>
               <dd class="radios">
                 <ul id="radios">
@@ -180,6 +183,9 @@ <h1>Semantic Forms</h1>
                 </ul>
               </dd>
 
+              <dt><label for="low-flow-checkbox">Single checkbox</label></dt>
+              <dd><input id="low-flow-checkbox" name="low-flow-checkbox" type="checkbox"></dd>
+
               <dt><label data-for="low-flow-radios">Radios:</label></dt>
               <dd class="radios">
                 <ul id="low-flow-radios">
diff --git a/semanticForms.js b/semanticForms.js
index d222265..0a4b439 100644
--- a/semanticForms.js
+++ b/semanticForms.js
@@ -49,7 +49,7 @@ window.semanticForms = function () {
               if (!dl.classList.contains('floatLabelForm')) {
                 dl.classList.add('floatLabelForm')
               }
-              if (type === 'checkbox' || type === 'radio') {
+              if (input.parentNode.parentNode.id && (type === 'checkbox' || type === 'radio')) {
                 label = document.querySelector('label[data-for=' + input.parentNode.parentNode.id + ']')
               } else {
                 label = document.querySelector('label[for=' + input.id + ']')
@@ -63,6 +63,11 @@ window.semanticForms = function () {
                 if (dl.firstChild.nodeName !== 'LABEL') {
                   newLabel = document.createElement('label')
                   newLabel.className = 'floatLabelFormAnimatedLabel'
+                  if (type === 'checkbox' && input.parentNode.nodeName === 'DD') {
+                    newLabel.setAttribute('for', input.id)
+                    input.parentNode.classList.add('singleCheckbox')
+                    newLabel.className = ''
+                  }
                   newLabel.innerHTML = labelHTML
                   dl.insertBefore(newLabel, dl.firstChild)
                 }
diff --git a/semanticFormsNoImages.css b/semanticFormsNoImages.css
index 351162a..7859dd2 100644
--- a/semanticFormsNoImages.css
+++ b/semanticFormsNoImages.css
@@ -202,6 +202,19 @@
   transform-origin: left bottom;
   transform: translate(0, 38px) scale(1.5);
 }
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox {
+  width: 292px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: left;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox label {
+  margin-top: 10px;
+}
+.semanticForms .floatLabelForm dd:not(.checkboxes):not(.radios).singleCheckbox input {
+  margin: 10px 10px 0 0;
+}
 .semanticForms .floatLabelForm ::placeholder {
   opacity: 0;
   transition: inherit;
diff --git a/semanticFormsNoImages.less b/semanticFormsNoImages.less
index 5caf6d5..03e1866 100644
--- a/semanticFormsNoImages.less
+++ b/semanticFormsNoImages.less
@@ -247,6 +247,22 @@
       transform: translate(0, 38px) scale(1.5);
     }
 
+    dd:not(.checkboxes):not(.radios).singleCheckbox {
+      width: 292px;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: flex-start;
+      justify-content: left;
+
+      label {
+        margin-top: 10px;
+      }
+
+      input {
+        margin: 10px 10px 0 0;
+      }
+    }
+
     // hide placeholder content until the input is focused
     ::placeholder {
       opacity: 0;