From a0399b7f5e10143a5074261dfae4ba9072b12507 Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Fri, 31 Dec 2021 17:38:25 +0530
Subject: [PATCH] Add disabled attribute in Checkbox, Toggle and RadioButton

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/atoms/button/Checkbox.jsx     |  7 ++++++-
 src/app/atoms/button/Checkbox.scss    |  2 ++
 src/app/atoms/button/RadioButton.jsx  |  5 ++++-
 src/app/atoms/button/RadioButton.scss |  2 ++
 src/app/atoms/button/Toggle.jsx       | 12 +++++++++---
 src/app/atoms/button/Toggle.scss      |  2 ++
 6 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/atoms/button/Checkbox.jsx b/src/app/atoms/button/Checkbox.jsx
index 5bac0c08..5079a401 100644
--- a/src/app/atoms/button/Checkbox.jsx
+++ b/src/app/atoms/button/Checkbox.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Checkbox.scss';
 
-function Checkbox({ variant, isActive, onToggle }) {
+function Checkbox({
+  variant, isActive, onToggle, disabled,
+}) {
   const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
   if (onToggle === null) return <span className={className} />;
   return (
@@ -11,6 +13,7 @@ function Checkbox({ variant, isActive, onToggle }) {
       onClick={() => onToggle(!isActive)}
       className={className}
       type="button"
+      disabled={disabled}
     />
   );
 }
@@ -19,12 +22,14 @@ Checkbox.defaultProps = {
   variant: 'primary',
   isActive: false,
   onToggle: null,
+  disabled: false,
 };
 
 Checkbox.propTypes = {
   variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
   isActive: PropTypes.bool,
   onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default Checkbox;
diff --git a/src/app/atoms/button/Checkbox.scss b/src/app/atoms/button/Checkbox.scss
index 5b26b9da..a54daa63 100644
--- a/src/app/atoms/button/Checkbox.scss
+++ b/src/app/atoms/button/Checkbox.scss
@@ -1,4 +1,5 @@
 @use '../../partials/flex';
+@use './state';
 
 .checkbox {
   width: 20px;
@@ -8,6 +9,7 @@
   background-color: var(--bg-surface-border);
   box-shadow: var(--bs-surface-border);
   cursor: pointer;
+  @include state.disabled;
   @extend .cp-fx__row--c-c;
 
   &--active {
diff --git a/src/app/atoms/button/RadioButton.jsx b/src/app/atoms/button/RadioButton.jsx
index c14a3344..35b68baf 100644
--- a/src/app/atoms/button/RadioButton.jsx
+++ b/src/app/atoms/button/RadioButton.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RadioButton.scss';
 
-function RadioButton({ isActive, onToggle }) {
+function RadioButton({ isActive, onToggle, disabled }) {
   if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
@@ -10,6 +10,7 @@ function RadioButton({ isActive, onToggle }) {
       onClick={() => onToggle(!isActive)}
       className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
       type="button"
+      disabled={disabled}
     />
   );
 }
@@ -17,11 +18,13 @@ function RadioButton({ isActive, onToggle }) {
 RadioButton.defaultProps = {
   isActive: false,
   onToggle: null,
+  disabled: false,
 };
 
 RadioButton.propTypes = {
   isActive: PropTypes.bool,
   onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default RadioButton;
diff --git a/src/app/atoms/button/RadioButton.scss b/src/app/atoms/button/RadioButton.scss
index f76eefbb..19284910 100644
--- a/src/app/atoms/button/RadioButton.scss
+++ b/src/app/atoms/button/RadioButton.scss
@@ -1,4 +1,5 @@
 @use '../../partials/flex';
+@use './state';
 
 .radio-btn {
   @extend .cp-fx__row--c-c;
@@ -8,6 +9,7 @@
   background-color: var(--bg-surface-border);
   border: 2px solid var(--bg-surface-border);
   cursor: pointer;
+  @include state.disabled;
 
   &::before {
     content: '';
diff --git a/src/app/atoms/button/Toggle.jsx b/src/app/atoms/button/Toggle.jsx
index 5d83c49a..b599791f 100644
--- a/src/app/atoms/button/Toggle.jsx
+++ b/src/app/atoms/button/Toggle.jsx
@@ -2,24 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Toggle.scss';
 
-function Toggle({ isActive, onToggle }) {
+function Toggle({ isActive, onToggle, disabled }) {
+  const className = `toggle${isActive ? ' toggle--active' : ''}`;
+  if (onToggle === null) return <span className={className} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
     <button
       onClick={() => onToggle(!isActive)}
-      className={`toggle${isActive ? ' toggle--active' : ''}`}
+      className={className}
       type="button"
+      disabled={disabled}
     />
   );
 }
 
 Toggle.defaultProps = {
   isActive: false,
+  disabled: false,
+  onToggle: null,
 };
 
 Toggle.propTypes = {
   isActive: PropTypes.bool,
-  onToggle: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default Toggle;
diff --git a/src/app/atoms/button/Toggle.scss b/src/app/atoms/button/Toggle.scss
index 9980e715..bc6d8a90 100644
--- a/src/app/atoms/button/Toggle.scss
+++ b/src/app/atoms/button/Toggle.scss
@@ -1,4 +1,5 @@
 @use '../../partials/dir';
+@use './state';
 
 .toggle {
   width: 44px;
@@ -10,6 +11,7 @@
   box-shadow: var(--bs-surface-border);
   cursor: pointer;
   background-color: var(--bg-surface-low);
+  @include state.disabled;
 
   transition: background 200ms ease-in-out;