Add disabled attribute in Checkbox, Toggle and RadioButton

Signed-off-by: Ajay Bura <ajbura@gmail.com>

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;

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 {

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;

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: '';

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;

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;