From 81dc730b0d7d0d7b000036cdcbc25a63d54ef605 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 12:09:57 -0800
Subject: [PATCH 01/15] Added classnames dependency. Used for dynamic className
 generation to comply with Bulma style modifiers.

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 5b0b787e8..33f525ccb 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "axios": "^0.19.0",
     "babel-jest": "^24.9.0",
     "bulma": "^0.8.0",
+    "classnames": "^2.2.6",
     "dataframe-js": "^1.4.3",
     "dotenv-webpack": "^1.7.0",
     "gh-pages": "^2.1.1",

From 89ea9ca32c91fb82bcacd7e2d1cc1cc64c6061fd Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 12:17:09 -0800
Subject: [PATCH 02/15] Generic button component adhering to Bulma styling
 modifiers.

---
 src/components/common/Button.jsx | 87 ++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 src/components/common/Button.jsx

diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx
new file mode 100644
index 000000000..04b4027cd
--- /dev/null
+++ b/src/components/common/Button.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+
+const Button = ({
+  label,
+  handleClick,
+  color,
+  light,
+  size,
+  fullWidth,
+  outlined,
+  inverted,
+  rounded,
+  hovered,
+  focused,
+  active,
+  loading,
+  isStatic,
+  disabled,
+}) => {
+  // Dynamically generates className for Bulma styling from props.
+  const buttonClassName = classNames('button', {
+    [`is-${color}`]: color,
+    'is-light': light,
+    [`is-${size}`]: size,
+    'is-fullwidth': fullWidth,
+    'is-outlined': outlined,
+    'is-inverted': inverted,
+    'is-rounded': rounded,
+    'is-hovered': hovered,
+    'is-focused': focused,
+    'is-active': active,
+    'is-loading': loading,
+    'is-static': isStatic,
+    'is-disabled': disabled,
+  });
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled}
+      className={buttonClassName}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;
+
+Button.propTypes = {
+  label: PropTypes.string,
+  handleClick: PropTypes.func,
+  color: PropTypes.string,
+  light: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  fullWidth: PropTypes.bool,
+  outlined: PropTypes.bool,
+  inverted: PropTypes.bool,
+  rounded: PropTypes.bool,
+  hovered: PropTypes.bool,
+  focused: PropTypes.bool,
+  active: PropTypes.bool,
+  loading: PropTypes.bool,
+  isStatic: PropTypes.bool,
+  disabled: PropTypes.bool,
+};
+
+Button.defaultProps = {
+  label: null,
+  handleClick: () => {},
+  color: null,
+  light: false,
+  size: 'normal',
+  fullWidth: false,
+  outlined: false,
+  inverted: false,
+  rounded: false,
+  hovered: false,
+  focused: false,
+  active: false,
+  loading: false,
+  isStatic: false,
+  disabled: false,
+};

From b0c5060b7434811b4397d7e21fd37596873b2dbd Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 12:18:13 -0800
Subject: [PATCH 03/15] Rephrased comment for greater clarity.

---
 src/components/common/Button.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx
index 04b4027cd..daf8e87bf 100644
--- a/src/components/common/Button.jsx
+++ b/src/components/common/Button.jsx
@@ -19,7 +19,7 @@ const Button = ({
   isStatic,
   disabled,
 }) => {
-  // Dynamically generates className for Bulma styling from props.
+  // Dynamically generates button className from props to comply with Bulma styling modifiers.
   const buttonClassName = classNames('button', {
     [`is-${color}`]: color,
     'is-light': light,

From 99de5cb4150db891103d93b18c8dc64d8f09b0a0 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 12:59:58 -0800
Subject: [PATCH 04/15] Added bulma-checkradio and react-id-generator
 dependencies.

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 33f525ccb..2d6cb5a32 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "axios": "^0.19.0",
     "babel-jest": "^24.9.0",
     "bulma": "^0.8.0",
+    "bulma-checkradio": "^1.1.1",
     "classnames": "^2.2.6",
     "dataframe-js": "^1.4.3",
     "dotenv-webpack": "^1.7.0",
@@ -16,6 +17,7 @@
     "proptypes": "^1.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-id-generator": "^3.0.0",
     "react-leaflet": "^2.4.0",
     "react-leaflet-choropleth": "^2.0.0",
     "react-redux": "^7.1.3",

From 171e79470a13d3f3a04339d9acd70f4ea3518c8c Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 13:00:37 -0800
Subject: [PATCH 05/15] Unique id generation added to Button component.

---
 src/components/common/Button.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx
index daf8e87bf..48b79be28 100644
--- a/src/components/common/Button.jsx
+++ b/src/components/common/Button.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'proptypes';
 import classNames from 'classnames';
+import { useId } from 'react-id-generator';
 
 const Button = ({
   label,
@@ -35,9 +36,12 @@ const Button = ({
     'is-static': isStatic,
     'is-disabled': disabled,
   });
+  const [uniqueId] = useId();
+  const htmlId = `btn-${uniqueId}`;
 
   return (
     <button
+      id={htmlId}
       type="button"
       onClick={handleClick}
       disabled={disabled}

From 79ffb1cddcab536c25206483321222f5ef20a13c Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 14:24:03 -0800
Subject: [PATCH 06/15] Bulma-checkradio import.

---
 src/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.js b/src/index.js
index e1cda0823..bb89a73e6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import 'bulma';
+import 'bulma-checkradio';
 
 import store from './redux/store';
 import App from './App';

From 08fd65219e13662d34a15fa9e474b6792d984274 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 14:25:02 -0800
Subject: [PATCH 07/15] Generic checkbox component adhering to Bulma-checkradio
 extension styling modifiers.

---
 src/components/common/Checkbox.jsx | 78 ++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 src/components/common/Checkbox.jsx

diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
new file mode 100644
index 000000000..c601f51bc
--- /dev/null
+++ b/src/components/common/Checkbox.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+import { useId } from 'react-id-generator';
+
+const Checkbox = ({
+  rtl,
+  color,
+  size,
+  circle,
+  block,
+  hasNoBorder,
+  hasBackgroundColor,
+  disabled,
+  handleCheckboxClick,
+  label,
+  name,
+}) => {
+  // Dynamically generates checkbox className from props to comply with Bulma styling modifiers.
+  const checkboxClassName = classNames('is-checkradio', {
+    'is-rtl': rtl,
+    [`is-${color}`]: color,
+    [`is-${size}`]: size,
+    'is-circle': circle,
+    'is-block': block,
+    'has-no-border': hasNoBorder,
+    'has-background-color': hasBackgroundColor,
+  });
+
+  const [uniqueId] = useId();
+  const htmlId = `checkbox-${uniqueId}`;
+
+  return (
+    <div className="field">
+      <input
+        type="checkbox"
+        id={htmlId}
+        className={checkboxClassName}
+        onChange={handleCheckboxClick}
+        disabled={disabled}
+        name={name}
+      />
+      <label htmlFor={htmlId}>
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export default Checkbox;
+
+Checkbox.propTypes = {
+  rtl: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  circle: PropTypes.bool,
+  block: PropTypes.bool,
+  hasNoBorder: PropTypes.bool,
+  hasBackgroundColor: PropTypes.bool,
+  disabled: PropTypes.bool,
+  handleCheckboxClick: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.string,
+};
+
+Checkbox.defaultProps = {
+  rtl: false,
+  color: null,
+  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  circle: false,
+  block: false,
+  hasNoBorder: false,
+  hasBackgroundColor: false,
+  disabled: false,
+  handleCheckboxClick: () => null,
+  label: null,
+  name: null,
+};

From 7e6bc5bd5ae698525e595e7985d202d267df4bb2 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 14:30:02 -0800
Subject: [PATCH 08/15] Added type attribute to Checkbox props.

---
 src/components/common/Checkbox.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
index c601f51bc..ab29386f8 100644
--- a/src/components/common/Checkbox.jsx
+++ b/src/components/common/Checkbox.jsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { useId } from 'react-id-generator';
 
 const Checkbox = ({
+  type,
   rtl,
   color,
   size,
@@ -33,7 +34,7 @@ const Checkbox = ({
   return (
     <div className="field">
       <input
-        type="checkbox"
+        type={type}
         id={htmlId}
         className={checkboxClassName}
         onChange={handleCheckboxClick}
@@ -50,6 +51,7 @@ const Checkbox = ({
 export default Checkbox;
 
 Checkbox.propTypes = {
+  type: PropTypes.oneOf(['checkbox', 'radio']),
   rtl: PropTypes.bool,
   color: PropTypes.string,
   size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
@@ -64,6 +66,7 @@ Checkbox.propTypes = {
 };
 
 Checkbox.defaultProps = {
+  type: 'checkbox',
   rtl: false,
   color: null,
   size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),

From 0cce2f3490136a6d414fa4f57c767722b83b4a18 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 15:06:07 -0800
Subject: [PATCH 09/15] Added bulma-switch dependency and import.

---
 package.json | 1 +
 src/index.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/package.json b/package.json
index 2d6cb5a32..75d40d77d 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "babel-jest": "^24.9.0",
     "bulma": "^0.8.0",
     "bulma-checkradio": "^1.1.1",
+    "bulma-switch": "^2.0.0",
     "classnames": "^2.2.6",
     "dataframe-js": "^1.4.3",
     "dotenv-webpack": "^1.7.0",
diff --git a/src/index.js b/src/index.js
index bb89a73e6..18041d949 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import 'bulma';
 import 'bulma-checkradio';
+import 'bulma-switch';
 
 import store from './redux/store';
 import App from './App';

From e3a456d554c230eeb0c6b67f4a6f07caed51400e Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 15:06:34 -0800
Subject: [PATCH 10/15] Fixed Checkbox  defaultProps.

---
 src/components/common/Checkbox.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
index ab29386f8..b395e8610 100644
--- a/src/components/common/Checkbox.jsx
+++ b/src/components/common/Checkbox.jsx
@@ -68,8 +68,8 @@ Checkbox.propTypes = {
 Checkbox.defaultProps = {
   type: 'checkbox',
   rtl: false,
-  color: null,
-  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  color: 'primary',
+  size: 'normal',
   circle: false,
   block: false,
   hasNoBorder: false,

From a19c901c7340a8e000c54e714f7e556638725a25 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 15:08:17 -0800
Subject: [PATCH 11/15] Generic toggleswitch component adhering to Bulma-switch
 extension styling modifiers.

---
 src/components/common/ToggleSwitch.jsx | 73 ++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 src/components/common/ToggleSwitch.jsx

diff --git a/src/components/common/ToggleSwitch.jsx b/src/components/common/ToggleSwitch.jsx
new file mode 100644
index 000000000..7a36aac34
--- /dev/null
+++ b/src/components/common/ToggleSwitch.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'proptypes';
+import classNames from 'classnames';
+import { useId } from 'react-id-generator';
+
+const ToggleSwitch = ({
+  rtl,
+  color,
+  size,
+  thin,
+  rounded,
+  outlined,
+  disabled,
+  handleToggleClick,
+  label,
+  name,
+}) => {
+  const toggleswitchClassName = classNames('switch', {
+    'is-rtl': rtl,
+    [`is-${color}`]: color,
+    [`is-${size}`]: size,
+    'is-thin': thin,
+    'is-rounded': rounded,
+    'is-outlined': outlined,
+  });
+
+  const [uniqueId] = useId();
+  const htmlId = `toggleswitch-${uniqueId}`;
+
+  return (
+    <div className="field">
+      <input
+        type="checkbox"
+        id={htmlId}
+        name={name}
+        className={toggleswitchClassName}
+        onChange={handleToggleClick}
+        disabled={disabled}
+      />
+      <label htmlFor={htmlId}>
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export default ToggleSwitch;
+
+ToggleSwitch.propTypes = {
+  rtl: PropTypes.bool,
+  color: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  thin: PropTypes.bool,
+  rounded: PropTypes.bool,
+  outlined: PropTypes.bool,
+  disabled: PropTypes.bool,
+  handleToggleClick: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.string,
+};
+
+ToggleSwitch.defaultProps = {
+  rtl: false,
+  color: 'primary',
+  size: 'normal',
+  thin: false,
+  rounded: false,
+  outlined: false,
+  disabled: false,
+  handleToggleClick: () => null,
+  label: null,
+  name: null,
+};

From e8324737bd3f08b216a11eb4b238e251b4d29732 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 15:12:17 -0800
Subject: [PATCH 12/15] Added leftLabel and rightLabel to ToggleSwitch props.

---
 src/components/common/ToggleSwitch.jsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/common/ToggleSwitch.jsx b/src/components/common/ToggleSwitch.jsx
index 7a36aac34..33535d0c0 100644
--- a/src/components/common/ToggleSwitch.jsx
+++ b/src/components/common/ToggleSwitch.jsx
@@ -12,7 +12,8 @@ const ToggleSwitch = ({
   outlined,
   disabled,
   handleToggleClick,
-  label,
+  leftLabel,
+  rightLabel,
   name,
 }) => {
   const toggleswitchClassName = classNames('switch', {
@@ -29,6 +30,9 @@ const ToggleSwitch = ({
 
   return (
     <div className="field">
+      <label htmlFor={htmlId}>
+        {leftLabel}
+      </label>
       <input
         type="checkbox"
         id={htmlId}
@@ -38,7 +42,7 @@ const ToggleSwitch = ({
         disabled={disabled}
       />
       <label htmlFor={htmlId}>
-        {label}
+        {rightLabel}
       </label>
     </div>
   );
@@ -55,7 +59,8 @@ ToggleSwitch.propTypes = {
   outlined: PropTypes.bool,
   disabled: PropTypes.bool,
   handleToggleClick: PropTypes.func,
-  label: PropTypes.string,
+  leftLabel: PropTypes.string,
+  rightLabel: PropTypes.string,
   name: PropTypes.string,
 };
 
@@ -68,6 +73,7 @@ ToggleSwitch.defaultProps = {
   outlined: false,
   disabled: false,
   handleToggleClick: () => null,
-  label: null,
+  leftLabel: null,
+  rightLabel: null,
   name: null,
 };

From 49e8403a51f0702a4a87159c2dac93a758221de5 Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Tue, 28 Jan 2020 20:53:06 -0800
Subject: [PATCH 13/15] Added id field to props and removed react-id-generator.

---
 src/components/common/Button.jsx       | 10 ++++++----
 src/components/common/Checkbox.jsx     | 11 ++++++-----
 src/components/common/ToggleSwitch.jsx | 13 +++++++------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx
index 48b79be28..1a0b37097 100644
--- a/src/components/common/Button.jsx
+++ b/src/components/common/Button.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'proptypes';
 import classNames from 'classnames';
-import { useId } from 'react-id-generator';
 
 const Button = ({
+  id,
   label,
   handleClick,
   color,
@@ -36,12 +36,12 @@ const Button = ({
     'is-static': isStatic,
     'is-disabled': disabled,
   });
-  const [uniqueId] = useId();
-  const htmlId = `btn-${uniqueId}`;
+
+  const buttonId = `btn-${id}`;
 
   return (
     <button
-      id={htmlId}
+      id={buttonId}
       type="button"
       onClick={handleClick}
       disabled={disabled}
@@ -55,6 +55,7 @@ const Button = ({
 export default Button;
 
 Button.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string,
   handleClick: PropTypes.func,
   color: PropTypes.string,
@@ -73,6 +74,7 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
+  id: null,
   label: null,
   handleClick: () => {},
   color: null,
diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
index b395e8610..9be1a1aa0 100644
--- a/src/components/common/Checkbox.jsx
+++ b/src/components/common/Checkbox.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'proptypes';
 import classNames from 'classnames';
-import { useId } from 'react-id-generator';
 
 const Checkbox = ({
+  id,
   type,
   rtl,
   color,
@@ -28,20 +28,19 @@ const Checkbox = ({
     'has-background-color': hasBackgroundColor,
   });
 
-  const [uniqueId] = useId();
-  const htmlId = `checkbox-${uniqueId}`;
+  const checkboxId = `checkbox-${id}`;
 
   return (
     <div className="field">
       <input
+        id={checkboxId}
         type={type}
-        id={htmlId}
         className={checkboxClassName}
         onChange={handleCheckboxClick}
         disabled={disabled}
         name={name}
       />
-      <label htmlFor={htmlId}>
+      <label htmlFor={checkboxId}>
         {label}
       </label>
     </div>
@@ -51,6 +50,7 @@ const Checkbox = ({
 export default Checkbox;
 
 Checkbox.propTypes = {
+  id: PropTypes.string,
   type: PropTypes.oneOf(['checkbox', 'radio']),
   rtl: PropTypes.bool,
   color: PropTypes.string,
@@ -66,6 +66,7 @@ Checkbox.propTypes = {
 };
 
 Checkbox.defaultProps = {
+  id: null,
   type: 'checkbox',
   rtl: false,
   color: 'primary',
diff --git a/src/components/common/ToggleSwitch.jsx b/src/components/common/ToggleSwitch.jsx
index 33535d0c0..62cd55168 100644
--- a/src/components/common/ToggleSwitch.jsx
+++ b/src/components/common/ToggleSwitch.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'proptypes';
 import classNames from 'classnames';
-import { useId } from 'react-id-generator';
 
 const ToggleSwitch = ({
+  id,
   rtl,
   color,
   size,
@@ -25,23 +25,22 @@ const ToggleSwitch = ({
     'is-outlined': outlined,
   });
 
-  const [uniqueId] = useId();
-  const htmlId = `toggleswitch-${uniqueId}`;
+  const toggleswitchId = `toggleswitch-${id}`;
 
   return (
     <div className="field">
-      <label htmlFor={htmlId}>
+      <label htmlFor={toggleswitchId}>
         {leftLabel}
       </label>
       <input
         type="checkbox"
-        id={htmlId}
+        id={toggleswitchId}
         name={name}
         className={toggleswitchClassName}
         onChange={handleToggleClick}
         disabled={disabled}
       />
-      <label htmlFor={htmlId}>
+      <label htmlFor={toggleswitchId}>
         {rightLabel}
       </label>
     </div>
@@ -51,6 +50,7 @@ const ToggleSwitch = ({
 export default ToggleSwitch;
 
 ToggleSwitch.propTypes = {
+  id: PropTypes.string,
   rtl: PropTypes.bool,
   color: PropTypes.string,
   size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
@@ -65,6 +65,7 @@ ToggleSwitch.propTypes = {
 };
 
 ToggleSwitch.defaultProps = {
+  id: null,
   rtl: false,
   color: 'primary',
   size: 'normal',

From 086a9c38b6773fa93c7f433f35d2cfceddfeea6f Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Wed, 29 Jan 2020 20:29:55 -0800
Subject: [PATCH 14/15] Removed react-id-generator from dependencies.

---
 package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/package.json b/package.json
index 75d40d77d..f1663c0a2 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "proptypes": "^1.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-id-generator": "^3.0.0",
     "react-leaflet": "^2.4.0",
     "react-leaflet-choropleth": "^2.0.0",
     "react-redux": "^7.1.3",

From d6320884ba64315e310c258ef77e8a2a88b6571f Mon Sep 17 00:00:00 2001
From: Adam Kendis <atkendis@gmail.com>
Date: Fri, 31 Jan 2020 23:54:02 -0800
Subject: [PATCH 15/15] Changed id to required prop. Other minor tweaks to
 props and comments.

---
 src/components/common/Button.jsx       | 11 ++++--
 src/components/common/Checkbox.jsx     | 49 ++++++++++++++-----------
 src/components/common/ToggleSwitch.jsx | 51 ++++++++++++--------------
 3 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/src/components/common/Button.jsx b/src/components/common/Button.jsx
index 1a0b37097..75b99b250 100644
--- a/src/components/common/Button.jsx
+++ b/src/components/common/Button.jsx
@@ -6,6 +6,10 @@ const Button = ({
   id,
   label,
   handleClick,
+  /*
+   *  Props below correspond with Bulma modifiers.
+   *  bulma.io/documentation/elements/button/
+  */
   color,
   light,
   size,
@@ -55,7 +59,7 @@ const Button = ({
 export default Button;
 
 Button.propTypes = {
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
   label: PropTypes.string,
   handleClick: PropTypes.func,
   color: PropTypes.string,
@@ -74,10 +78,9 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  id: null,
   label: null,
-  handleClick: () => {},
-  color: null,
+  handleClick: () => null,
+  color: 'primary',
   light: false,
   size: 'normal',
   fullWidth: false,
diff --git a/src/components/common/Checkbox.jsx b/src/components/common/Checkbox.jsx
index 9be1a1aa0..0130b8447 100644
--- a/src/components/common/Checkbox.jsx
+++ b/src/components/common/Checkbox.jsx
@@ -5,7 +5,15 @@ import classNames from 'classnames';
 const Checkbox = ({
   id,
   type,
-  rtl,
+  handleClick,
+  label,
+  name,
+  value,
+  /*
+   *  Props below correspond with Bulma modifiers.
+   *  wikiki.github.io/form/checkradio/
+  */
+  rightToLeft,
   color,
   size,
   circle,
@@ -13,13 +21,10 @@ const Checkbox = ({
   hasNoBorder,
   hasBackgroundColor,
   disabled,
-  handleCheckboxClick,
-  label,
-  name,
 }) => {
   // Dynamically generates checkbox className from props to comply with Bulma styling modifiers.
   const checkboxClassName = classNames('is-checkradio', {
-    'is-rtl': rtl,
+    'is-rtl': rightToLeft,
     [`is-${color}`]: color,
     [`is-${size}`]: size,
     'is-circle': circle,
@@ -31,52 +36,54 @@ const Checkbox = ({
   const checkboxId = `checkbox-${id}`;
 
   return (
-    <div className="field">
+    <>
       <input
         id={checkboxId}
         type={type}
+        onChange={handleClick}
+        name={name}
+        value={value}
         className={checkboxClassName}
-        onChange={handleCheckboxClick}
         disabled={disabled}
-        name={name}
       />
       <label htmlFor={checkboxId}>
         {label}
       </label>
-    </div>
+    </>
   );
 };
 
 export default Checkbox;
 
 Checkbox.propTypes = {
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['checkbox', 'radio']),
-  rtl: PropTypes.bool,
+  handleClick: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  rightToLeft: PropTypes.bool,
   color: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  size: PropTypes.oneOf(['small', '', 'medium', 'large']),
   circle: PropTypes.bool,
   block: PropTypes.bool,
   hasNoBorder: PropTypes.bool,
   hasBackgroundColor: PropTypes.bool,
   disabled: PropTypes.bool,
-  handleCheckboxClick: PropTypes.func,
-  label: PropTypes.string,
-  name: PropTypes.string,
 };
 
 Checkbox.defaultProps = {
-  id: null,
   type: 'checkbox',
-  rtl: false,
+  handleClick: () => null,
+  label: null,
+  name: null,
+  value: undefined,
+  rightToLeft: false,
   color: 'primary',
-  size: 'normal',
+  size: '',
   circle: false,
   block: false,
   hasNoBorder: false,
   hasBackgroundColor: false,
   disabled: false,
-  handleCheckboxClick: () => null,
-  label: null,
-  name: null,
 };
diff --git a/src/components/common/ToggleSwitch.jsx b/src/components/common/ToggleSwitch.jsx
index 62cd55168..03c4d7cf8 100644
--- a/src/components/common/ToggleSwitch.jsx
+++ b/src/components/common/ToggleSwitch.jsx
@@ -4,20 +4,23 @@ import classNames from 'classnames';
 
 const ToggleSwitch = ({
   id,
-  rtl,
+  handleClick,
+  label,
+  name,
+  /*
+   *  Props below correspond with Bulma modifiers.
+   *  wikiki.github.io/form/switch/
+  */
+  rightToLeft,
   color,
   size,
   thin,
   rounded,
   outlined,
   disabled,
-  handleToggleClick,
-  leftLabel,
-  rightLabel,
-  name,
 }) => {
   const toggleswitchClassName = classNames('switch', {
-    'is-rtl': rtl,
+    'is-rtl': rightToLeft,
     [`is-${color}`]: color,
     [`is-${size}`]: size,
     'is-thin': thin,
@@ -28,53 +31,47 @@ const ToggleSwitch = ({
   const toggleswitchId = `toggleswitch-${id}`;
 
   return (
-    <div className="field">
-      <label htmlFor={toggleswitchId}>
-        {leftLabel}
-      </label>
+    <>
       <input
         type="checkbox"
         id={toggleswitchId}
+        onChange={handleClick}
         name={name}
         className={toggleswitchClassName}
-        onChange={handleToggleClick}
         disabled={disabled}
       />
       <label htmlFor={toggleswitchId}>
-        {rightLabel}
+        {label}
       </label>
-    </div>
+    </>
   );
 };
 
 export default ToggleSwitch;
 
 ToggleSwitch.propTypes = {
-  id: PropTypes.string,
-  rtl: PropTypes.bool,
+  id: PropTypes.string.isRequired,
+  handleClick: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.string,
+  rightToLeft: PropTypes.bool,
   color: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'normal', 'medium', 'large']),
+  size: PropTypes.oneOf(['small', '', 'medium', 'large']),
   thin: PropTypes.bool,
   rounded: PropTypes.bool,
   outlined: PropTypes.bool,
   disabled: PropTypes.bool,
-  handleToggleClick: PropTypes.func,
-  leftLabel: PropTypes.string,
-  rightLabel: PropTypes.string,
-  name: PropTypes.string,
 };
 
 ToggleSwitch.defaultProps = {
-  id: null,
-  rtl: false,
+  handleClick: () => null,
+  label: null,
+  name: null,
+  rightToLeft: false,
   color: 'primary',
-  size: 'normal',
+  size: '',
   thin: false,
   rounded: false,
   outlined: false,
   disabled: false,
-  handleToggleClick: () => null,
-  leftLabel: null,
-  rightLabel: null,
-  name: null,
 };