diff --git a/component-library/src/components/Checkbox/Checkbox.jsx b/component-library/src/components/Checkbox/Checkbox.jsx index 25b6f549e..f8e348eae 100644 --- a/component-library/src/components/Checkbox/Checkbox.jsx +++ b/component-library/src/components/Checkbox/Checkbox.jsx @@ -1,44 +1,150 @@ import React from 'react' import PropTypes from 'prop-types' -import './checkbox.css' - - const Checkbox = ({ label, isDisabled, isIndeterminate, hasLabel, onChange, ...props}) => { - const classes = "checkbox" + (isDisabled ? "-disabled" : "") + (isIndeterminate ? "-indeterminate" : "") + (hasLabel ? "-hasLabel" : "") - return ( - - ); -}; + : + + + + } + + +); + +Checkbox.defaultProps = { theme }; Checkbox.propTypes = { - label: PropTypes.string, - hasLabel: PropTypes.bool, - isDisabled: PropTypes.bool, - isIndeterminate: PropTypes.bool, - onChange: PropTypes.func, -} - -Checkbox.defaultProps = { - label: "Label", - hasLabel: false, - isDisabled: false, - isIndeterminate: false, - onChange: undefined, -} - -export default Checkbox; \ No newline at end of file + checked: PropTypes.bool, + children: PropTypes.node, + defaultChecked: PropTypes.bool, + disabled: PropTypes.bool, + id: PropTypes.string, + name: PropTypes.string, + onChange: PropTypes.func, + theme: PropTypes.object, + value: PropTypes.any, + vertical: PropTypes.bool, + ...COMMON.propTypes, +}; + +export default Checkbox; diff --git a/component-library/src/components/Checkbox/index.js b/component-library/src/components/Checkbox/index.js new file mode 100644 index 000000000..f1d630302 --- /dev/null +++ b/component-library/src/components/Checkbox/index.js @@ -0,0 +1,3 @@ +import Checkbox from "./Checkbox"; + +export default Checkbox; \ No newline at end of file diff --git a/component-library/src/stories/Checkbox.stories.jsx b/component-library/src/stories/Checkbox.stories.jsx index 54251772e..01160d5b1 100644 --- a/component-library/src/stories/Checkbox.stories.jsx +++ b/component-library/src/stories/Checkbox.stories.jsx @@ -1,13 +1,13 @@ import React from 'react'; -import Checkbox from '../components/Checkbox/Checkbox'; +import { default as Checkbox } from '../components/Checkbox'; import { withDesign } from 'storybook-addon-designs' export default { title: 'Components/Checkbox', component: Checkbox, argTypes: { - label: { + children: { type: { summary: 'string', detail: 'checkbox label'