-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add AlertInCard component. Auto color for Alert icons. (#82)
* Add AlertInCard component. Auto color for Alert icons. * Update Alert/readme.md * Update CHANGELOG.md * Remove useless generic in getTheme * tiny fixes to match design specs * Update typing ignores * design feedback. remove useless typing * hush now codecov * Force add DSD specific icons if prop not filled * PR feedback Co-authored-by: maartenafink <[email protected]>
- Loading branch information
1 parent
68db885
commit deebe46
Showing
22 changed files
with
1,867 additions
and
1,094 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
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
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,32 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import { AlertTypes } from './Alert'; | ||
| import { IconWarning } from '../Icon/Warning'; | ||
| import { IconInfo } from '../Icon/Info'; | ||
| import { IconDanger } from '../Icon/Danger'; | ||
| import { IconVerified } from '../Icon/Verified'; | ||
|
|
||
| interface AlertIcons { | ||
| type: AlertTypes; | ||
| } | ||
| const AlertIcons: React.FC<AlertIcons> = ({ type }) => { | ||
| if (type === 'info') { | ||
| return <IconInfo />; | ||
| } | ||
|
|
||
| if (type === 'success') { | ||
| return <IconVerified />; | ||
| } | ||
|
|
||
| if (type === 'warning') { | ||
| return <IconWarning />; | ||
| } | ||
|
|
||
| if (type === 'danger') { | ||
| return <IconDanger />; | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export { AlertIcons }; |
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 * as React from 'react'; | ||
| import { customRender, fireEvent } from 'test-utils'; | ||
| import { AlertInCard } from './AlertInCard'; | ||
|
|
||
| describe('AlertInCard ', () => { | ||
| it('renders correctly', () => { | ||
| const { getByText } = customRender(<AlertInCard type="info">Hello World</AlertInCard>); | ||
| expect(getByText('Hello World')).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('removes close button', () => { | ||
| const { queryByText, getByRole } = customRender( | ||
| <AlertInCard type="success">Hello World</AlertInCard>, | ||
| ); | ||
| fireEvent.click(getByRole('button')); | ||
| expect(queryByText('Hello World')).toBeFalsy(); | ||
| }); | ||
|
|
||
| it('does not render the close button', () => { | ||
| const { queryByRole } = customRender( | ||
| <AlertInCard type="warning" noCloseBtn> | ||
| Hello World | ||
| </AlertInCard>, | ||
| ); | ||
|
|
||
| expect(queryByRole('button')).toBeFalsy(); | ||
| }); | ||
|
|
||
| it('accepts a custom handleClose function', () => { | ||
| const handleClose = jest.fn(); | ||
| const { getByRole } = customRender( | ||
| <AlertInCard type="danger" onClose={handleClose}> | ||
| Hello World | ||
| </AlertInCard>, | ||
| ); | ||
|
|
||
| expect(handleClose).not.toHaveBeenCalled(); | ||
|
|
||
| fireEvent.click(getByRole('button')); | ||
|
|
||
| expect(handleClose).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
Oops, something went wrong.