Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2536 from illiteratewriter/closebutton
feat(CloseButton): add close button
- Loading branch information
Showing
10 changed files
with
184 additions
and
6 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
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,44 @@ | ||
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']) | ||
} | ||
|
||
const defaultProps = { | ||
'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,21 @@ | ||
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 CloseButtonDisabled } from './examples/CloseButtonDisabled'; | ||
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,9 @@ | ||
import React from 'react'; | ||
import { CloseButton } from 'reactstrap'; | ||
|
||
const Example = (args) => { | ||
return ( | ||
<CloseButton disabled /> | ||
) | ||
} | ||
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; |
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,12 @@ | ||
import * as React from 'react'; | ||
import { CSSModule } from './utils'; | ||
|
||
export interface CloseButtonProps | ||
extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
active?: boolean; | ||
variant?: 'white' | 'black'; | ||
cssModule?: CSSModule; | ||
} | ||
|
||
declare class CloseButton extends React.Component<CloseButtonProps> {} | ||
export default CloseButton; |