diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js new file mode 100644 index 0000000..3a8f373 --- /dev/null +++ b/src/Checkbox/index.js @@ -0,0 +1,32 @@ +import PropTypes from 'prop-types'; +import React, { useRef, useEffect } from 'react'; + +const Checkbox = ({ id, label, indeterminate, ...rest }) => { + const inputRef = useRef(); + useEffect(() => { + inputRef.current.indeterminate = indeterminate; + }, [indeterminate]); + + return ( + + + + + ); +}; + +Checkbox.propTypes = { + checked: PropTypes.bool.isRequired, + id: PropTypes.string.isRequired, + disabled: PropTypes.bool, + indeterminate: PropTypes.bool, + required: PropTypes.bool, + label: PropTypes.bool, + name: PropTypes.string, + onChange: PropTypes.func, +}; + +export default Checkbox; diff --git a/src/Checkbox/stories.js b/src/Checkbox/stories.js new file mode 100644 index 0000000..6728c7d --- /dev/null +++ b/src/Checkbox/stories.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; +import { boolean, text } from '@storybook/addon-knobs/react'; +import { storiesOf } from '@storybook/react'; + +import Checkbox from './index'; + +storiesOf('Checkbox', module).add('All Knobs', () => { + let label = text('label', 'check me out'); + let checked = boolean('checked', false); + let disabled = boolean('disabled', false); + let indeterminate = boolean('indeterminate', false); + let required = boolean('required', false); + return ( + + ); +}); diff --git a/src/Radio/RadioSet.js b/src/Radio/RadioSet.js new file mode 100644 index 0000000..a29383a --- /dev/null +++ b/src/Radio/RadioSet.js @@ -0,0 +1,16 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +const RadioSet = ({ className, children, ...rest }) => { + return ( + + {children} + + ); +}; + +RadioSet.propTypes = { + children: PropTypes.node, +}; + +export default RadioSet; diff --git a/src/Radio/index.js b/src/Radio/index.js new file mode 100644 index 0000000..00c095f --- /dev/null +++ b/src/Radio/index.js @@ -0,0 +1,26 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +const Radio = ({ id, label, className, ...rest }) => { + return ( + + + + + ); +}; + +Radio.propTypes = { + checked: PropTypes.bool.isRequired, + id: PropTypes.string.isRequired, + disabled: PropTypes.bool, + required: PropTypes.bool, + label: PropTypes.bool, + name: PropTypes.string, + onChange: PropTypes.func, +}; + +export default Radio; diff --git a/src/Radio/stories.js b/src/Radio/stories.js new file mode 100644 index 0000000..222d4c7 --- /dev/null +++ b/src/Radio/stories.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; +import { boolean, text } from '@storybook/addon-knobs/react'; +import { storiesOf } from '@storybook/react'; + +import Radio from './index'; +import RadioSet from './RadioSet'; + +storiesOf('Radio', module) + .add('All Knobs', () => { + let label = text('label', 'Radio Label'); + let checked = boolean('checked', false); + let disabled = boolean('disabled', false); + let required = boolean('required', false); + return ( + + ); + }) + .add('Radio Set', () => { + let checked = boolean('default checked', false); + let disabled = boolean('disabled', false); + let required = boolean('required', false); + return ( + + + + + ); + }); diff --git a/src/index.mjs b/src/index.mjs index de07366..cfaeea6 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -1,26 +1,33 @@ /* Export helix-react definition */ import Alert from './Alert'; import Button from './Button'; +import Checkbox from './Checkbox'; import ChoiceTile from './ChoiceTile'; import Drawer from './Drawer'; import Icon from './Icon'; import Modal from './Modal'; import Popover from './Popover'; import Tooltip from './Tooltip'; -import Select from './Select'; +import Radio from './Radio'; +import RadioSet from './Radio/RadioSet'; import Search from './Search'; import SearchAssist from './Search/SearchAssist'; +import Select from './Select'; + export default { Alert, Button, + Checkbox, ChoiceTile, Drawer, Icon, Modal, Popover, - Select, Tooltip, + Radio, + RadioSet, Search, - SearchAssist + SearchAssist, + Select, };