Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9ef40d1
commit 9e656f5
Showing
7 changed files
with
151 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import classNames from 'classnames'; | ||
import { mapToCssModules } from './utils'; | ||
|
||
const propTypes = { | ||
active: PropTypes.bool, | ||
'aria-label': PropTypes.string, | ||
onClick: PropTypes.func, | ||
variant: PropTypes.oneOf(['white', 'black']) | ||
} | ||
|
||
const defaultProps = { | ||
variant: 'black', | ||
'aria-label': 'close' | ||
} | ||
|
||
const CloseButton = (props) => { | ||
const { | ||
className, | ||
cssModule, | ||
variant, | ||
innerRef, | ||
...attributes | ||
} = props; | ||
|
||
const classes = mapToCssModules(classNames( | ||
className, | ||
'btn-close', | ||
variant && `btn-close-${variant}` | ||
)) | ||
|
||
return ( | ||
<button | ||
ref={innerRef} | ||
type="button" | ||
className={classes} | ||
{...attributes} /> | ||
) | ||
} | ||
|
||
CloseButton.propTypes = propTypes; | ||
CloseButton.defaultProps = defaultProps; | ||
|
||
export default CloseButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import React from 'react'; | ||
import { shallow, mount } from 'enzyme'; | ||
import CloseButton from '../CloseButton'; | ||
|
||
describe('CloseButton', () => { | ||
it('should render a close button', () => { | ||
const wrapper = shallow(<CloseButton />); | ||
expect(wrapper.hasClass('btn-close')).toBe(true); | ||
}) | ||
|
||
it('should render white variant', () => { | ||
const wrapper = shallow(<CloseButton variant='white'/>); | ||
expect(wrapper.hasClass('btn-close-white')).toBe(true); | ||
}) | ||
|
||
|
||
describe('onClick', () => { | ||
it('calls props.onClick if it exists', () => { | ||
const onClick = jest.fn(); | ||
const wrapper = mount(<CloseButton onClick={onClick} />); | ||
|
||
wrapper.find('button').hostNodes().simulate('click'); | ||
expect(onClick).toHaveBeenCalled(); | ||
}); | ||
|
||
it('returns the value returned by props.onClick', () => { | ||
const onClick = jest.fn(() => 1234); | ||
const wrapper = mount(<CloseButton onClick={onClick} />); | ||
|
||
const result = wrapper.find('button').props().onClick(); | ||
expect(onClick).toHaveBeenCalled(); | ||
expect(result).toEqual(1234); | ||
}); | ||
|
||
it('is not called when disabled', () => { | ||
const onClick = jest.fn(); | ||
const wrapper = mount(<CloseButton onClick={onClick} disabled />); | ||
|
||
wrapper.find('button').hostNodes().simulate('click'); | ||
expect(onClick).not.toHaveBeenCalled(); | ||
}); | ||
}); | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import React from 'react'; | ||
|
||
export default { | ||
title: 'Components/CloseButton', | ||
parameters: { | ||
docs: { | ||
description: { | ||
component: ` | ||
[Bootstrap CloseButton](https://getbootstrap.com/docs/5.2/components/close-button/) | ||
A generic close button for dismissing content like modals and alerts. | ||
`, | ||
} | ||
} | ||
} | ||
}; | ||
|
||
export { default as CloseButton } from './examples/CloseButton'; | ||
export { default as CloseButtonWhite } from './examples/CloseButtonWhite'; | ||
export { default as Props } from './examples/CloseButtonProps'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react'; | ||
import { CloseButton } from 'reactstrap'; | ||
|
||
const Example = (args) => { | ||
return ( | ||
<CloseButton {...args}/> | ||
) | ||
} | ||
|
||
Example.args= { | ||
disabled: false, | ||
} | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
|
||
import React from 'react'; | ||
import { CloseButton } from 'reactstrap'; | ||
import Props from './Props'; | ||
|
||
const Example = () => ( | ||
<Props components={[CloseButton]} /> | ||
); | ||
|
||
export default Example; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
|
||
import React from 'react'; | ||
import { CloseButton } from 'reactstrap'; | ||
|
||
const Example = (args) => { | ||
return ( | ||
<div className='bg-dark p-3'> | ||
<CloseButton {...args}/> | ||
</div> | ||
) | ||
} | ||
|
||
Example.args= { | ||
disabled: false, | ||
variant: 'white' | ||
} | ||
|
||
export default Example; |