mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-11-11 01:30:29 +03:00
Add checkbox component
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
parent
fd9f734de1
commit
d3dcb320f4
2 changed files with 67 additions and 0 deletions
30
src/app/atoms/button/Checkbox.jsx
Normal file
30
src/app/atoms/button/Checkbox.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import './Checkbox.scss';
|
||||
|
||||
function Checkbox({ variant, isActive, onToggle }) {
|
||||
const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
|
||||
if (onToggle === null) return <span className={className} />;
|
||||
return (
|
||||
// eslint-disable-next-line jsx-a11y/control-has-associated-label
|
||||
<button
|
||||
onClick={() => onToggle(!isActive)}
|
||||
className={className}
|
||||
type="button"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Checkbox.defaultProps = {
|
||||
variant: 'primary',
|
||||
isActive: false,
|
||||
onToggle: null,
|
||||
};
|
||||
|
||||
Checkbox.propTypes = {
|
||||
variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
|
||||
isActive: PropTypes.bool,
|
||||
onToggle: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Checkbox;
|
||||
Loading…
Add table
Add a link
Reference in a new issue