From 091dc67dc1dbdbac0a252c9fc7912bfffcc5866c Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Sat, 18 Jul 2020 21:13:00 -0400 Subject: [PATCH 1/3] Checkbox --- src/Checkbox/index.js | 32 ++++++++++++++++++++++++++++++++ src/Checkbox/stories.js | 25 +++++++++++++++++++++++++ src/index.mjs | 2 ++ 3 files changed, 59 insertions(+) create mode 100644 src/Checkbox/index.js create mode 100644 src/Checkbox/stories.js diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js new file mode 100644 index 0000000..870ceee --- /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, className, 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/index.mjs b/src/index.mjs index de07366..d9d8b15 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -1,6 +1,7 @@ /* 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'; @@ -14,6 +15,7 @@ import SearchAssist from './Search/SearchAssist'; export default { Alert, Button, + Checkbox, ChoiceTile, Drawer, Icon, From c4fe2e253c2b91477d0a471de71e11b459ec2691 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Mon, 20 Jul 2020 22:11:45 -0400 Subject: [PATCH 2/3] Add Radio & Radio Set --- src/Checkbox/index.js | 2 +- src/Radio/RadioSet.js | 16 ++++++++++++++ src/Radio/index.js | 26 ++++++++++++++++++++++ src/Radio/stories.js | 51 +++++++++++++++++++++++++++++++++++++++++++ src/index.mjs | 11 +++++++--- 5 files changed, 102 insertions(+), 4 deletions(-) create mode 100644 src/Radio/RadioSet.js create mode 100644 src/Radio/index.js create mode 100644 src/Radio/stories.js diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js index 870ceee..3a8f373 100644 --- a/src/Checkbox/index.js +++ b/src/Checkbox/index.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React, { useRef, useEffect } from 'react'; -const Checkbox = ({ id, label, className, indeterminate, ...rest }) => { +const Checkbox = ({ id, label, indeterminate, ...rest }) => { const inputRef = useRef(); useEffect(() => { inputRef.current.indeterminate = indeterminate; diff --git a/src/Radio/RadioSet.js b/src/Radio/RadioSet.js new file mode 100644 index 0000000..84b4f08 --- /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..d21fc18 --- /dev/null +++ b/src/Radio/stories.js @@ -0,0 +1,51 @@ +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 d9d8b15..cfaeea6 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -8,9 +8,12 @@ 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, @@ -21,8 +24,10 @@ export default { Icon, Modal, Popover, - Select, Tooltip, + Radio, + RadioSet, Search, - SearchAssist + SearchAssist, + Select, }; From 09b34a6ae8ea6349cd38942607e594caa59b2ea4 Mon Sep 17 00:00:00 2001 From: Nicko Winner-Arroyo Date: Mon, 20 Jul 2020 22:16:14 -0400 Subject: [PATCH 3/3] add stories --- src/Radio/RadioSet.js | 2 +- src/Radio/stories.js | 78 ++++++++++++++++++++++--------------------- 2 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/Radio/RadioSet.js b/src/Radio/RadioSet.js index 84b4f08..a29383a 100644 --- a/src/Radio/RadioSet.js +++ b/src/Radio/RadioSet.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; -const RadioSet = ({ className, children, ...rest}) => { +const RadioSet = ({ className, children, ...rest }) => { return ( {children} diff --git a/src/Radio/stories.js b/src/Radio/stories.js index d21fc18..222d4c7 100644 --- a/src/Radio/stories.js +++ b/src/Radio/stories.js @@ -6,46 +6,48 @@ 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', () => { +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 ( - - - - + + + + ); -}); + });