-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Bump version * [CLD-514] Create Toast message comp (#174) * [CLD-514] Create Toast message comp
- Loading branch information
1 parent
f5fc136
commit 3dae57d
Showing
9 changed files
with
159 additions
and
49 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
17 changes: 17 additions & 0 deletions
17
src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap
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,17 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`ToastMessage should match a snapshot 1`] = ` | ||
<div | ||
className="toast visible" | ||
data-test="toast-wrapper" | ||
onClick={[MockFunction]} | ||
> | ||
<Component | ||
fullWidth={true} | ||
type="reset" | ||
variant="primary" | ||
> | ||
Toast message | ||
</Component> | ||
</div> | ||
`; |
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,37 @@ | ||
import * as React from 'react' | ||
import { shallow } from 'enzyme' | ||
import toJson from 'enzyme-to-json' | ||
import { ToastMessage, ToastMessageProps, ToastVariant } from '..' | ||
|
||
const defaultProps: ToastMessageProps = { | ||
visible: true, | ||
message: 'Toast message', | ||
variant: 'primary', | ||
onCloseToast: jest.fn() | ||
} | ||
|
||
describe('ToastMessage', () => { | ||
it('should match a snapshot', () => { | ||
expect(toJson(shallow(<ToastMessage {...defaultProps} />))).toMatchSnapshot() | ||
}) | ||
|
||
it('should dismiss toast when click', () => { | ||
shallow(<ToastMessage {...defaultProps} />) | ||
.find('[data-test="toast-wrapper"]') | ||
.first() | ||
.simulate('click') | ||
|
||
expect(defaultProps.onCloseToast).toHaveBeenCalledTimes(1) | ||
}) | ||
|
||
it('should dismiss toast after 3 seconds', () => { | ||
jest.useFakeTimers() | ||
shallow(<ToastMessage {...defaultProps} />) | ||
jest.runAllTimers() | ||
expect(defaultProps.onCloseToast).toHaveBeenCalledTimes(1) | ||
}) | ||
|
||
afterEach(() => { | ||
jest.resetAllMocks() | ||
}) | ||
}) |
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,25 @@ | ||
import * as React from 'react' | ||
import { Button } from '../Button' | ||
|
||
export type ToastVariant = 'primary' | 'secondary' | 'danger' | 'info' | ||
|
||
export interface ToastMessageProps { | ||
visible: boolean | ||
message: string | ||
variant: ToastVariant | ||
onCloseToast: () => void | ||
} | ||
|
||
export const ToastMessage: React.FC<ToastMessageProps> = ({ visible = false, message, onCloseToast, variant }) => { | ||
if (visible) { | ||
setTimeout(onCloseToast, 3000) | ||
} | ||
|
||
return ( | ||
<div data-test="toast-wrapper" className={`toast ${visible ? 'visible' : ''}`} onClick={onCloseToast}> | ||
<Button type="reset" variant={variant} fullWidth> | ||
{message} | ||
</Button> | ||
</div> | ||
) | ||
} |
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,70 @@ | ||
import React, { useState } from 'react' | ||
|
||
import { storiesOf } from '@storybook/react' | ||
import { ToastMessage, ToastVariant } from '.' | ||
import { Button } from '../Button' | ||
|
||
const stories = storiesOf('ToastMessage', module) | ||
|
||
const Usage = () => { | ||
const [visible, setVisible] = useState<boolean>(false) | ||
const [variant, setVariant] = useState<ToastVariant>('primary') | ||
|
||
const closeToast = () => { | ||
setVisible(false) | ||
} | ||
|
||
return ( | ||
<section className="section"> | ||
<Button | ||
variant="primary" | ||
type="button" | ||
onClick={() => { | ||
setVariant('primary') | ||
setVisible(true) | ||
}} | ||
> | ||
Primary | ||
</Button> | ||
<br /> | ||
<br /> | ||
<Button | ||
variant="primary" | ||
type="button" | ||
onClick={() => { | ||
setVariant('secondary') | ||
setVisible(true) | ||
}} | ||
> | ||
Secondary | ||
</Button> | ||
<br /> | ||
<br /> | ||
<Button | ||
variant="primary" | ||
type="button" | ||
onClick={() => { | ||
setVariant('danger') | ||
setVisible(true) | ||
}} | ||
> | ||
Danger | ||
</Button> | ||
<br /> | ||
<br /> | ||
<Button | ||
variant="primary" | ||
type="button" | ||
onClick={() => { | ||
setVariant('info') | ||
setVisible(true) | ||
}} | ||
> | ||
Info | ||
</Button> | ||
<ToastMessage visible={visible} message={'My message'} variant={variant} onCloseToast={closeToast} /> | ||
</section> | ||
) | ||
} | ||
|
||
stories.add('Default', () => <Usage />) |
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