diff --git a/src/components/Buttons/CircleButton.js b/src/components/Buttons/CircleButton.js index 7da386a4..480ac91d 100644 --- a/src/components/Buttons/CircleButton.js +++ b/src/components/Buttons/CircleButton.js @@ -55,6 +55,7 @@ const CircleButton = props => { styles.default, props.styles ]} + disabled={props.disabled} > { props.children } @@ -64,6 +65,8 @@ const CircleButton = props => { CircleButton.propTypes = { /** Label to be used by screen readers */ ariaLabel: PropTypes.string, + /** Bool to disable click/touch listeners */ + disabled: PropTypes.bool, /** Callback function called after button click */ onClick: PropTypes.func, /** Optional style overrides */ diff --git a/src/components/Buttons/__tests__/CircleButton.spec.js b/src/components/Buttons/__tests__/CircleButton.spec.js index 08a8a78b..4992bc70 100644 --- a/src/components/Buttons/__tests__/CircleButton.spec.js +++ b/src/components/Buttons/__tests__/CircleButton.spec.js @@ -66,6 +66,21 @@ it('renders CircleButton with passed ariaLabel correctly', () => { expect(tree).toMatchSnapshot() }) +it('renders CircleButton with passed disabled prop correctly', () => { + const tree = renderer.create( + +
+ + 1 + +
+
+ ).toJSON() + expect(tree).toMatchSnapshot() +}) + it('calls onClick callback correctly', () => { const onClick = spy() const CButton = mount( @@ -85,11 +100,15 @@ it('calls onClick callback correctly', () => { expect(onClick.calledOnce).toBeTruthy() }) -it('does not call onClick when not passed one', () => { +it('does not call onClick when disabled prop is true', () => { + const onClick = spy() const CButton = mount(
- + 1
@@ -98,4 +117,5 @@ it('does not call onClick when not passed one', () => { const button = CButton.find('button').first() button.simulate('click') + expect(onClick.calledOnce).toBeFalsy() }) diff --git a/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap b/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap index c29d5d72..9420edd7 100644 --- a/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap +++ b/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap @@ -9,6 +9,7 @@ exports[`renders CircleButton with Icon correctly 1`] = ` aria-label={undefined} className="rmq-4534e6b" data-radium={true} + disabled={undefined} onBlur={[Function]} onClick={[Function]} onFocus={[Function]} @@ -76,6 +77,54 @@ exports[`renders CircleButton with passed ariaLabel correctly 1`] = ` aria-label="this is a button test" className="rmq-4534e6b" data-radium={true} + disabled={undefined} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onKeyDown={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseEnter={[Function]} + onMouseLeave={[Function]} + style={ + Object { + "backgroundColor": "#FFFFFF", + "border": "0", + "borderRadius": "50%", + "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)", + "color": "#43B02A", + "height": "40px", + "lineHeight": "1", + "textAlign": "center", + "transition": "background-color 150ms ease-in-out", + "width": "40px", + "zIndex": 100, + } + } + > + 1 + + +