From 88f3836485e259559c1c675a9262ba898465e62d Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Thu, 24 Oct 2019 08:12:39 +0000
Subject: [PATCH] Radio checkbox whitespace

---
 Makefile                                      |  2 ++
 package-lock.json                             |  2 +-
 package.json                                  |  3 +-
 src/bootstrap/CheckBox.js                     |  8 ++---
 src/bootstrap/RadioSet.js                     | 16 +++------
 src/bootstrap/RadioSet.md                     |  2 ++
 .../__snapshots__/CheckBox.test.js.snap       | 34 ++++++++-----------
 .../__snapshots__/RadioSet.test.js.snap       |  4 +--
 8 files changed, 30 insertions(+), 41 deletions(-)

diff --git a/Makefile b/Makefile
index d44dba7..2ddbdea 100644
--- a/Makefile
+++ b/Makefile
@@ -35,6 +35,8 @@ lint:
 
 test:
 	npm test
+test-js-update-snapshots:
+	npm test -- -u
 
 create-messages:
 	pybabel extract -F babel.cfg -o ./translations/forisjs.pot .
diff --git a/package-lock.json b/package-lock.json
index 081c0c2..521c890 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 88f307d..72984ef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
@@ -73,7 +73,6 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage --colors",
-    "test:update-snapshots": "jest -u",
     "docs": "npx styleguidist build ",
     "docs:watch": "styleguidist server"
   },
diff --git a/src/bootstrap/CheckBox.js b/src/bootstrap/CheckBox.js
index 02f336c..f97a90f 100644
--- a/src/bootstrap/CheckBox.js
+++ b/src/bootstrap/CheckBox.js
@@ -32,8 +32,8 @@ export function CheckBox({
 }) {
     const uid = useUID();
     return (
-        <div className={useDefaultSize ? formFieldsSize : ""} style={{ marginBottom: "1rem" }}>
-            <div className="custom-control custom-checkbox" style={{ marginBottom: "0" }}>
+        <div className={`form-group ${useDefaultSize ? formFieldsSize : ""}`.trim()}>
+            <div className="custom-control custom-checkbox ">
                 <input
                     className="custom-control-input"
                     type="checkbox"
@@ -42,9 +42,9 @@ export function CheckBox({
 
                     {...props}
                 />
-                <label className="custom-control-label" htmlFor={uid} style={helpText ? { marginBottom: "0" } : null}>{label}</label>
+                <label className="custom-control-label" htmlFor={uid}>{label}</label>
+                {helpText && <small className="form-text text-muted">{helpText}</small>}
             </div>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </div>
     );
 }
diff --git a/src/bootstrap/RadioSet.js b/src/bootstrap/RadioSet.js
index 7125cb6..48017a4 100644
--- a/src/bootstrap/RadioSet.js
+++ b/src/bootstrap/RadioSet.js
@@ -52,16 +52,10 @@ export function RadioSet({
     });
 
     return (
-        <div className={`form-group ${formFieldsSize}`} style={{ marginBottom: "1rem" }}>
-            {label
-                ? (
-                    <label className="col-12" htmlFor={uid} style={{ paddingLeft: "0" }}>
-                        {label}
-                    </label>
-                )
-                : null}
+        <div className={`form-group ${formFieldsSize}`}>
+            {label && <label htmlFor={uid} className="d-block">{label}</label>}
             {radios}
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
+            {helpText && <small className="form-text text-muted">{helpText}</small>}
         </div>
     );
 }
@@ -77,7 +71,7 @@ function Radio({
 }) {
     return (
         <>
-            <div className="custom-control custom-radio custom-control-inline">
+            <div className={`custom-control custom-radio ${!helpText ? "custom-control-inline" : ""}`.trim()}>
                 <input
                     id={id}
                     className="custom-control-input"
@@ -86,8 +80,8 @@ function Radio({
                     {...props}
                 />
                 <label className="custom-control-label" htmlFor={id}>{label}</label>
+                {helpText && <small className="form-text text-muted mt-0 mb-3">{helpText}</small>}
             </div>
-            {helpText ? <small className="form-text text-muted">{helpText}</small> : null}
         </>
     );
 }
diff --git a/src/bootstrap/RadioSet.md b/src/bootstrap/RadioSet.md
index 5ccc534..13c3338 100644
--- a/src/bootstrap/RadioSet.md
+++ b/src/bootstrap/RadioSet.md
@@ -2,6 +2,8 @@ Set of radio Bootstrap component input with label and predefined sizes and struc
 
 All additional `props` are passed to the `<input type="number">` HTML component.
 
+Unless `helpText` is set for one of the options they are displayed inline.
+
 ```js
 import {useState} from 'react';
 const CHOICES=[
diff --git a/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap b/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
index fe9d182..31b0d57 100644
--- a/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/CheckBox.test.js.snap
@@ -2,12 +2,10 @@
 
 exports[`<Checkbox/> Render checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <div
-    class="custom-control custom-checkbox"
-    style="margin-bottom: 0px;"
+    class="custom-control custom-checkbox "
   >
     <input
       checked=""
@@ -18,27 +16,24 @@ exports[`<Checkbox/> Render checkbox 1`] = `
     <label
       class="custom-control-label"
       for="1"
-      style="margin-bottom: 0px;"
     >
       Test label
     </label>
+    <small
+      class="form-text text-muted"
+    >
+      Some help text
+    </small>
   </div>
-  <small
-    class="form-text text-muted"
-  >
-    Some help text
-  </small>
 </div>
 `;
 
 exports[`<Checkbox/> Render uncheked checkbox 1`] = `
 <div
-  class="col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
+  class="form-group col-sm-12 offset-lg-1 col-lg-10"
 >
   <div
-    class="custom-control custom-checkbox"
-    style="margin-bottom: 0px;"
+    class="custom-control custom-checkbox "
   >
     <input
       class="custom-control-input"
@@ -48,15 +43,14 @@ exports[`<Checkbox/> Render uncheked checkbox 1`] = `
     <label
       class="custom-control-label"
       for="1"
-      style="margin-bottom: 0px;"
     >
       Test label
     </label>
+    <small
+      class="form-text text-muted"
+    >
+      Some help text
+    </small>
   </div>
-  <small
-    class="form-text text-muted"
-  >
-    Some help text
-  </small>
 </div>
 `;
diff --git a/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap b/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
index f142d87..ffec0b5 100644
--- a/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
+++ b/src/bootstrap/__tests__/__snapshots__/RadioSet.test.js.snap
@@ -3,12 +3,10 @@
 exports[`<RadioSet/> Render radio set 1`] = `
 <div
   class="form-group col-sm-12 offset-lg-1 col-lg-10"
-  style="margin-bottom: 1rem;"
 >
   <label
-    class="col-12"
+    class="d-block"
     for="1"
-    style="padding-left: 0px;"
   >
     Radios set label
   </label>