Add disabled attribute in Checkbox, Toggle and RadioButton

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

diff --git a/src/app/atoms/button/Checkbox.jsx b/src/app/atoms/button/Checkbox.jsx
index 5bac0c081a99545b39c12fda79c73bff6a15c107..5079a40122998d5c83ec71fb51aca45074f1f1c2 100644 (file)
--- 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 5b26b9da1e2f5b27f68d8d7bf389db2d89016a27..a54daa63494099a69b1b5fc01b3896cd245a862e 100644 (file)
--- 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 c14a334453120fd9779826291f27e45d89cd34ce..35b68baf7146734114caed8aafa4425f2c0866bf 100644 (file)
--- 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 f76eefbb722ebf22e09ef9853fbd13df005d7661..19284910ea4c230afc71fe35a8d8f64a4a73f377 100644 (file)
--- 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 5d83c49aa2ef001745aa07d19b1453f35ba2c365..b599791fcb825fa62f1dd3625ccda3f67b8f3d18 100644 (file)
--- 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 9980e7157eedaf4868baade7eabcd6d7a741151e..bc6d8a9020df233a790d43e680b849f32545a435 100644 (file)
--- 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;