From e96319160aa1a313c1c2ed99be8fd89b12a4972b Mon Sep 17 00:00:00 2001 From: Daniel Silva Date: Tue, 2 Apr 2019 15:44:01 -0300 Subject: [PATCH] feat(Radio Button Group): Radio Button Group --- components/Button/buttonStyle.js | 28 +- components/RadioGroup/Radio.jsx | 25 +- components/RadioGroup/RadioButton.jsx | 83 +- .../RadioGroup/RadioButton.unit.test.jsx | 42 + components/RadioGroup/RadioGroup.jsx | 26 +- .../RadioGroup/RadioGroup.unit.test.jsx | 192 +++-- .../__snapshots__/Radio.unit.test.jsx.snap | 92 ++- .../RadioButton.unit.test.jsx.snap | 753 ++++++++++++++++++ .../RadioGroup.unit.test.jsx.snap | 610 +++++++++++++- components/shared/ButtonGroupLabel.jsx | 1 + .../RadioGroup/sub-components/buttonGroup.jsx | 9 +- 11 files changed, 1648 insertions(+), 213 deletions(-) create mode 100644 components/RadioGroup/RadioButton.unit.test.jsx create mode 100644 components/RadioGroup/__snapshots__/RadioButton.unit.test.jsx.snap diff --git a/components/Button/buttonStyle.js b/components/Button/buttonStyle.js index ed1af1727..e093292dd 100644 --- a/components/Button/buttonStyle.js +++ b/components/Button/buttonStyle.js @@ -70,22 +70,22 @@ const skin = props => { border-color: ${hovered.border}; color: ${hovered.color}; } - ` - : '' - } - &:focus { - box-shadow: ${focused.shadow}; - background-color: ${focused.background}; - border-color: ${focused.border}; - color: ${focused.color}; - } + &:focus { + box-shadow: ${focused.shadow}; + background-color: ${focused.background}; + border-color: ${focused.border}; + color: ${focused.color}; + } - &:active { - box-shadow: ${selected.shadow}; - background-color: ${selected.background}; - border-color: ${selected.border}; - color: ${selected.color}; + &:active { + box-shadow: ${selected.shadow}; + background-color: ${selected.background}; + border-color: ${selected.border}; + color: ${selected.color}; + } + ` + : '' } `; }; diff --git a/components/RadioGroup/Radio.jsx b/components/RadioGroup/Radio.jsx index 3366a4953..78bb75587 100644 --- a/components/RadioGroup/Radio.jsx +++ b/components/RadioGroup/Radio.jsx @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import Colors from '../Colors'; import Label from '../shared/Label'; +import HiddenRadio from './HiddenRadio'; const RadioMark = styled.span` background-color: ${Colors.WHITE}; @@ -29,24 +30,11 @@ const RadioMark = styled.span` } `; -const StyledRadio = styled.input.attrs({ - type: 'radio', -})` - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -`; - const RadioLabel = styled(Label)` cursor: pointer; user-select: none; - ${StyledRadio} { + ${HiddenRadio} { :checked { ~ ${RadioMark} { border-color: ${Colors.BLUE[500]}; @@ -76,7 +64,7 @@ const RadioLabel = styled(Label)` ${({ error }) => error && ` - ${StyledRadio} { + ${HiddenRadio} { :checked { ~ ${RadioMark} { border-color: ${Colors.ERROR[500]}; @@ -118,7 +106,7 @@ const RadioLabel = styled(Label)` cursor: not-allowed; } - ${StyledRadio} { + ${HiddenRadio} { :disabled { ~ ${RadioMark} { background-color: ${Colors.BLACK[200]}; @@ -159,7 +147,7 @@ const RadioLabel = styled(Label)` } `} - ${StyledRadio}:checked:disabled ~ ${RadioMark} { + ${HiddenRadio}:checked:disabled ~ ${RadioMark} { background-color: ${Colors.BLACK[400]}; border-color: ${Colors.BLACK[400]}; box-shadow: inset 0 0 0 3.5px ${Colors.WHITE}; @@ -176,9 +164,10 @@ const Radio = ({ ...rest }) => ( - onChange({ value, label }, e)} + value={value} {...rest} /> diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx index 7a24152cf..cd8545a28 100644 --- a/components/RadioGroup/RadioButton.jsx +++ b/components/RadioGroup/RadioButton.jsx @@ -2,18 +2,34 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import ButtonGroupLabel from '../shared/ButtonGroupLabel'; +import HiddenRadio from './HiddenRadio'; +import Icon from '../Icon'; -const StyledRadio = styled.input.attrs({ - type: 'radio', -})` - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; +const LockIcon = styled(Icon).attrs({ + name: 'lock', +})``; + +const ButtonIcon = styled(Icon)` + margin-right: 8px; +`; + +const Wrapper = styled.div` + ${({ inline }) => + inline && + ` + display: inline-block; + vertical-align: top; + margin-right: 16px; + + :last-child { + margin-right: 0; + } + `} + + ${LockIcon} { + margin-left: 8px; + font-size: 17px; + } `; const Radio = ({ @@ -24,47 +40,58 @@ const Radio = ({ onChange, value, checked, + icon, + inline, ...rest }) => { const skin = checked ? 'primary' : 'secondary'; return ( - - + onChange({ value, label }, e)} - {...rest} - /> - {children || label} - + skin={skin} + checked={checked} + > + {icon && } + onChange({ value, label }, e)} + value={value} + {...rest} + /> + {children || label} + {disabled && } + + ); }; -Radio.displayName = 'RadioGroup.Radio'; +Radio.displayName = 'RadioGroup.Button'; Radio.defaultProps = { checked: false, + children: undefined, disabled: false, error: false, - children: undefined, + icon: undefined, + inline: false, label: undefined, onChange: () => {}, }; Radio.propTypes = { checked: PropTypes.bool, + children: PropTypes.string, disabled: PropTypes.bool, error: PropTypes.bool, - children: PropTypes.string, + icon: PropTypes.string, + inline: PropTypes.bool, label: PropTypes.string, - value: PropTypes.string.isRequired, onChange: PropTypes.func, + value: PropTypes.string.isRequired, }; export default Radio; diff --git a/components/RadioGroup/RadioButton.unit.test.jsx b/components/RadioGroup/RadioButton.unit.test.jsx new file mode 100644 index 000000000..85d2ca532 --- /dev/null +++ b/components/RadioGroup/RadioButton.unit.test.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +import RadioButton from './RadioButton'; + +describe('', () => { + describe('snapshot', () => { + it('simple', () => { + const component = ; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + + it('checked', () => { + const component = ; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + + it('inline', () => { + const component = ; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + + it('icon', () => { + const component = ; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + + it('disabled', () => { + const component = ; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + + it('error', () => { + const component = ; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + + it('children', () => { + const component = Foo; + expect(renderer.create(component).toJSON()).toMatchSnapshot(); + }); + }); +}); diff --git a/components/RadioGroup/RadioGroup.jsx b/components/RadioGroup/RadioGroup.jsx index 983c0f58a..8591e19c2 100644 --- a/components/RadioGroup/RadioGroup.jsx +++ b/components/RadioGroup/RadioGroup.jsx @@ -9,8 +9,6 @@ import RadioButton from './RadioButton'; const Group = styled(FieldGroup).attrs({ role: 'radiogroup', })` - display: flex; - flex-direction: column; position: relative; `; @@ -21,9 +19,11 @@ const ErrorLabel = styled(ErrorMessage)` ErrorLabel.displayName = 'ErrorLabel'; const RadioGroup = ({ + type, children, - name, error, + inline, + name, onChange, options, value, @@ -33,6 +33,7 @@ const RadioGroup = ({ name, error: Boolean(error), onChange, + inline, }; const radioOptions = options.map(option => Object.assign({}, option, { @@ -48,7 +49,10 @@ const RadioGroup = ({ checked: child.props.value === value ? true : undefined, ...commonProps, }), - ) || radioOptions.map(props => ); + ) || + radioOptions.map(props => + type === 'button' ? : , + ); return ( @@ -65,14 +69,17 @@ RadioGroup.Button = RadioButton; * Group for Radio components. */ RadioGroup.defaultProps = { - value: undefined, - error: undefined, + type: 'radio', children: undefined, - options: [], + error: undefined, + inline: false, onChange: () => {}, + options: [], + value: undefined, }; RadioGroup.propTypes = { + type: PropTypes.oneOf(['radio', 'button']), options: PropTypes.arrayOf( PropTypes.shape({ label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), @@ -81,9 +88,10 @@ RadioGroup.propTypes = { }), ), children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, + PropTypes.arrayOf(PropTypes.element), + PropTypes.element, ]), + inline: PropTypes.bool, onChange: PropTypes.func, /** Initialize RadioGroup with a value */ value: PropTypes.string, diff --git a/components/RadioGroup/RadioGroup.unit.test.jsx b/components/RadioGroup/RadioGroup.unit.test.jsx index d797ef504..58a308c14 100644 --- a/components/RadioGroup/RadioGroup.unit.test.jsx +++ b/components/RadioGroup/RadioGroup.unit.test.jsx @@ -5,6 +5,78 @@ import diff from 'jest-diff'; import stripAnsi from 'strip-ansi'; import RadioGroup from './RadioGroup'; +const _childrenTest = RadioItem => { + describe(`<${RadioItem.displayName} />`, () => { + it(`should render three <${RadioItem.displayName} />`, () => { + const component = ( + + Foo + Bar + Baz + + ); + const wrapper = shallow(component); + const radios = wrapper.find(RadioItem); + + expect(radios).toHaveLength(3); + }); + + it(`every <${ + RadioItem.displayName + } /> should have the name`, () => { + const component = ( + + Foo + Bar + Baz + + ); + const wrapper = mount(component); + const radios = wrapper.find(RadioItem); + + radios.map(radio => + expect(radio.prop('name')).toBe(wrapper.prop('name')), + ); + }); + + it(`should have <${ + RadioItem.displayName + } /> checked matching value`, () => { + const component = ( + + Foo + Bar + Baz + + ); + const wrapper = shallow(component); + const radios = wrapper.find(RadioItem); + + const radioBar = radios.at(1); + expect(radioBar.prop('checked')).toBe(true); + }); + + it(`should call onChange on every <${RadioItem.displayName} />`, () => { + const onChangeMock = jest.fn(); + + const component = ( + + Foo + Bar + Baz + + ); + + const wrapper = shallow(component); + const radios = wrapper.find(RadioItem); + + radios.map(radio => radio.simulate('change')); + + expect(onChangeMock).toBeCalledTimes(3); + }); + }); +}; + describe('', () => { describe('snapshot', () => { it('simple with options', () => { @@ -18,6 +90,19 @@ describe('', () => { expect(renderer.create(component)).toMatchSnapshot(); }); + it('simple with button options', () => { + const options = [ + { value: 'Foo', label: 'Foo' }, + { value: 'Bar', label: 'Bar' }, + { value: 'Baz', label: 'Baz' }, + ]; + + const component = ( + + ); + expect(renderer.create(component)).toMatchSnapshot(); + }); + it('simple with ', () => { const component = ( @@ -29,6 +114,28 @@ describe('', () => { expect(renderer.create(component)).toMatchSnapshot(); }); + it('simple with ', () => { + const component = ( + + Foo + Bar + Baz + + ); + expect(renderer.create(component)).toMatchSnapshot(); + }); + + it('simple with inline', () => { + const component = ( + + Foo + Bar + Baz + + ); + expect(renderer.create(component)).toMatchSnapshot(); + }); + it('should render the same', () => { const options = [ { value: 'Foo', label: 'Foo' }, @@ -54,71 +161,34 @@ describe('', () => { `Snapshot Diff:\n ${stripAnsi(diff(snapOptions, snapComposable))}`, ).toMatchSnapshot(); }); - }); - - describe('', () => { - it('should render three ', () => { - const component = ( - - Foo - Bar - Baz - - ); - const wrapper = shallow(component); - const radios = wrapper.find(RadioGroup.Radio); - expect(radios).toHaveLength(3); - }); - - it('every should have the name', () => { - const component = ( - - Foo - Bar - Baz - - ); - const wrapper = mount(component); - const radios = wrapper.find(RadioGroup.Radio); - - radios.map(radio => - expect(radio.prop('name')).toBe(wrapper.prop('name')), - ); - }); - - it('should have checked matching value', () => { - const component = ( - - Foo - Bar - Baz - - ); - const wrapper = shallow(component); - const radios = wrapper.find(RadioGroup.Radio); - - const radioBar = radios.at(1); - expect(radioBar.prop('checked')).toBe(true); - }); - - it('should call onChange on every ', () => { - const onChangeMock = jest.fn(); - - const component = ( - - Foo - Bar - Baz - - ); + it('should render the same, with ', () => { + const options = [ + { value: 'Foo', label: 'Foo' }, + { value: 'Bar', label: 'Bar' }, + { value: 'Baz', label: 'Baz' }, + ]; - const wrapper = shallow(component); - const radios = wrapper.find(RadioGroup.Radio); + const snapOptions = renderer + .create() + .toJSON(); - radios.map(radio => radio.simulate('change')); + const snapComposable = renderer + .create( + + Foo + Bar + Baz + , + ) + .toJSON(); - expect(onChangeMock).toBeCalledTimes(3); + expect( + `Snapshot Diff:\n ${stripAnsi(diff(snapOptions, snapComposable))}`, + ).toMatchSnapshot(); }); }); + + _childrenTest(RadioGroup.Radio); + _childrenTest(RadioGroup.Button); }); diff --git a/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap index 6552fb355..15d2c76b3 100644 --- a/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap +++ b/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap @@ -1,6 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` snapshot children 1`] = ` +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + .c4 { background-color: #FFFFFF; border: 1.5px solid #999999; @@ -26,17 +37,6 @@ exports[` snapshot children 1`] = ` width: 50%; } -.c2 { - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -} - .c0 { display: block; margin-bottom: 5px; @@ -191,6 +191,7 @@ exports[` snapshot children 1`] = ` disabled={false} onChange={[Function]} type="radio" + value="Foo" /> snapshot children 1`] = ` `; exports[` snapshot disabled 1`] = ` +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + .c4 { background-color: #FFFFFF; border: 1.5px solid #999999; @@ -225,17 +237,6 @@ exports[` snapshot disabled 1`] = ` width: 50%; } -.c2 { - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -} - .c5 .c1:checked ~ .c3 { border-color: #1355d0; } @@ -345,6 +346,7 @@ exports[` snapshot disabled 1`] = ` disabled={true} onChange={[Function]} type="radio" + value="Foo" /> snapshot disabled 1`] = ` `; exports[` snapshot error 1`] = ` +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + .c4 { background-color: #FFFFFF; border: 1.5px solid #999999; @@ -379,17 +392,6 @@ exports[` snapshot error 1`] = ` width: 50%; } -.c2 { - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -} - .c5 .c1:checked ~ .c3 { border-color: #1355d0; } @@ -544,6 +546,7 @@ exports[` snapshot error 1`] = ` disabled={false} onChange={[Function]} type="radio" + value="Foo" /> snapshot error 1`] = ` `; exports[` snapshot simple 1`] = ` +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + .c4 { background-color: #FFFFFF; border: 1.5px solid #999999; @@ -578,17 +592,6 @@ exports[` snapshot simple 1`] = ` width: 50%; } -.c2 { - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -} - .c0 { display: block; margin-bottom: 5px; @@ -634,6 +637,7 @@ exports[` snapshot simple 1`] = ` disabled={false} onChange={[Function]} type="radio" + value="Foo" /> snapshot checked 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #1355d0; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #FFFFFF; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c1:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #002f7b; + border-color: #002f7b; + color: #FFFFFF; +} + +.c1:focus { + box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); + background-color: #1355d0; + border-color: #1355d0; + color: #FFFFFF; +} + +.c1:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #002f7b; + border-color: #002f7b; + color: #FFFFFF; +} + +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c0 .c3 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; + +exports[` snapshot children 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c1:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c1:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c1:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c0 .c3 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; + +exports[` snapshot disabled 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: not-allowed; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: rgba(204,204,204,0.4); + border: 1.5px solid #999999; + box-shadow: 0 2px 4px 0 #cccccc; + color: #999999; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c0 .c3 { + margin-left: 8px; + font-size: 17px; +} + +.c4 .c3 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; + +exports[` snapshot error 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + color: #ff2d4d; + border-color: #ff2d4d; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c1:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c1:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c1:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c1:hover, +.c1:focus { + border-color: #ff2d4d; + box-shadow: 0 2px 6px 0 #ff2d4d; + color: #ff2d4d; + border-color: #ff2d4d; + background-color: #ffe5e9; +} + +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c0 .c3 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; + +exports[` snapshot icon 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c1:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c1:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c1:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c3 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c2 { + margin-right: 8px; +} + +.c0 .c4 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; + +exports[` snapshot inline 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c1:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c1:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c1:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c0 { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.c0:last-child { + margin-right: 0; +} + +.c0 .c3 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; + +exports[` snapshot simple 1`] = ` +.c1 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c1 *:nth-child(2) { + margin-left: 5px; +} + +.c1:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c1:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c1:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c2 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c0 .c3 { + margin-left: 8px; + font-size: 17px; +} + +
+ +
+`; diff --git a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap index 24b5c98e2..2a13f8dd2 100644 --- a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap +++ b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap @@ -5,7 +5,387 @@ exports[` snapshot should render the same 1`] = ` Compared values have no visual difference." `; +exports[` snapshot should render the same, with 1`] = ` +"Snapshot Diff: + Compared values have no visual difference." +`; + +exports[` snapshot simple with 1`] = ` +.c2 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c2 *:nth-child(2) { + margin-left: 5px; +} + +.c2:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c2:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c2:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c4 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c5 .c3:checked ~ .c6 { + border-color: #1355d0; +} + +.c5 .c3:checked ~ .c6:after { + background-color: #1355d0; + display: block; +} + +.c5 .c3:focus ~ .c6 { + border-color: #1355d0; + box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); +} + +.c5 .c3:checked:disabled ~ .c6 { + background-color: #999999; + border-color: #999999; + box-shadow: inset 0 0 0 3.5px #FFFFFF; +} + +.c1 .c7 { + margin-left: 8px; + font-size: 17px; +} + +.c0 { + position: relative; + margin-bottom: 20px; + min-width: 250px; + width: 100%; + position: relative; +} + +
+
+ +
+
+ +
+
+ +
+
+`; + +exports[` snapshot simple with inline 1`] = ` +.c2 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c2 *:nth-child(2) { + margin-left: 5px; +} + +.c2:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c2:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c2:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c4 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c5 .c3:checked ~ .c6 { + border-color: #1355d0; +} + +.c5 .c3:checked ~ .c6:after { + background-color: #1355d0; + display: block; +} + +.c5 .c3:focus ~ .c6 { + border-color: #1355d0; + box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); +} + +.c5 .c3:checked:disabled ~ .c6 { + background-color: #999999; + border-color: #999999; + box-shadow: inset 0 0 0 3.5px #FFFFFF; +} + +.c1 { + display: inline-block; + vertical-align: top; + margin-right: 16px; +} + +.c1:last-child { + margin-right: 0; +} + +.c1 .c7 { + margin-left: 8px; + font-size: 17px; +} + +.c0 { + position: relative; + margin-bottom: 20px; + min-width: 250px; + width: 100%; + position: relative; +} + +
+
+ +
+
+ +
+
+ +
+
+`; + exports[` snapshot simple with 1`] = ` +.c3 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + .c5 { background-color: #FFFFFF; border: 1.5px solid #999999; @@ -31,17 +411,6 @@ exports[` snapshot simple with 1`] = ` width: 50%; } -.c3 { - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -} - .c1 { display: block; margin-bottom: 5px; @@ -83,13 +452,6 @@ exports[` snapshot simple with 1`] = ` margin-bottom: 20px; min-width: 250px; width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; position: relative; } @@ -107,6 +469,7 @@ exports[` snapshot simple with 1`] = ` name="groceries" onChange={[Function]} type="radio" + value="Foo" /> snapshot simple with 1`] = ` name="groceries" onChange={[Function]} type="radio" + value="Bar" /> snapshot simple with 1`] = ` name="groceries" onChange={[Function]} type="radio" + value="Baz" /> snapshot simple with 1`] = ` `; +exports[` snapshot simple with button options 1`] = ` +.c2 { + display: block; + margin-bottom: 5px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + cursor: pointer; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + font-size: 16px; + font-weight: bold; + height: 40px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0 16px; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background-color: #FFFFFF; + border: 1.5px solid #1355d0; + box-shadow: 0 2px 4px 0 #cccccc; + color: #1355d0; + -webkit-text-decoration: none; + text-decoration: none; + border-radius: 4px; + margin-bottom: 16px; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.c2 *:nth-child(2) { + margin-left: 5px; +} + +.c2:hover { + box-shadow: 0 2px 4px 0 #cccccc; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c2:focus { + box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5); + background-color: #FFFFFF; + border-color: #1355d0; + color: #1355d0; +} + +.c2:active { + box-shadow: 0 2px 4px 0 #4c4c4c; + background-color: #e5edfc; + border-color: #1355d0; + color: #1355d0; +} + +.c4 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + +.c5 .c3:checked ~ .c6 { + border-color: #1355d0; +} + +.c5 .c3:checked ~ .c6:after { + background-color: #1355d0; + display: block; +} + +.c5 .c3:focus ~ .c6 { + border-color: #1355d0; + box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5); +} + +.c5 .c3:checked:disabled ~ .c6 { + background-color: #999999; + border-color: #999999; + box-shadow: inset 0 0 0 3.5px #FFFFFF; +} + +.c1 .c7 { + margin-left: 8px; + font-size: 17px; +} + +.c0 { + position: relative; + margin-bottom: 20px; + min-width: 250px; + width: 100%; + position: relative; +} + +
+
+ +
+
+ +
+
+ +
+
+`; + exports[` snapshot simple with options 1`] = ` +.c3 { + border: 0; + height: 0; + margin: 0; + opacity: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 0; +} + .c5 { background-color: #FFFFFF; border: 1.5px solid #999999; @@ -174,17 +727,6 @@ exports[` snapshot simple with options 1`] = ` width: 50%; } -.c3 { - border: 0; - height: 0; - margin: 0; - opacity: 0; - overflow: hidden; - padding: 0; - position: absolute; - width: 0; -} - .c1 { display: block; margin-bottom: 5px; @@ -226,13 +768,6 @@ exports[` snapshot simple with options 1`] = ` margin-bottom: 20px; min-width: 250px; width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; position: relative; } @@ -250,6 +785,7 @@ exports[` snapshot simple with options 1`] = ` name="foo" onChange={[Function]} type="radio" + value="Foo" /> snapshot simple with options 1`] = ` name="foo" onChange={[Function]} type="radio" + value="Bar" /> snapshot simple with options 1`] = ` name="foo" onChange={[Function]} type="radio" + value="Baz" /> error && diff --git a/stories/RadioGroup/sub-components/buttonGroup.jsx b/stories/RadioGroup/sub-components/buttonGroup.jsx index d7e45b962..4347bc55a 100644 --- a/stories/RadioGroup/sub-components/buttonGroup.jsx +++ b/stories/RadioGroup/sub-components/buttonGroup.jsx @@ -14,12 +14,15 @@ class Group extends React.Component { return ( this.setState({ value: opValue })} > - Tomato sauce - Mustard + + Tomato sauce + + + Mustard + Barbecue sauce Barbecue sauce Barbecue sauce