Skip to content

Commit

Permalink
Merge dev to master (#176)
Browse files Browse the repository at this point in the history
* Bump version

* [CLD-514] Create Toast message comp (#174)

* [CLD-514] Create Toast message comp
  • Loading branch information
trankhacvy authored Dec 16, 2019
1 parent f5fc136 commit 3dae57d
Show file tree
Hide file tree
Showing 9 changed files with 159 additions and 49 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@reapit/elements",
"version": "0.5.15",
"version": "0.5.16",
"description": "A collection of React components and utilities for building apps for Reapit Marketplace",
"main": "dist/index.js",
"umd:main": "dist/elements.umd.production.js",
Expand Down
12 changes: 1 addition & 11 deletions src/components/Toast/__tests__/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import { Toast, ToastProps, getVariant, ErrorDataType, ButtonVariant } from '..'
import { Toast, ToastProps } from '..'

const defaultProps = {
serverError: {
Expand Down Expand Up @@ -84,13 +84,3 @@ describe('Toast', () => {
jest.resetAllMocks()
})
})

describe('getVariant', () => {
it('should return correct variant', () => {
const types: ErrorDataType[] = ['COMPONENT', 'SERVER', 'INFO']
const variants: ButtonVariant[] = ['danger', 'danger', 'info']
types.forEach((type, index) => {
expect(getVariant(type)).toEqual(variants[index])
})
})
})
18 changes: 2 additions & 16 deletions src/components/Toast/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,10 @@ import { Button } from '../Button'
* class to primary and success
*/

export type ErrorDataType = 'COMPONENT' | 'SERVER' | 'INFO'
export type ButtonVariant = 'danger' | 'info'

export interface ErrorData {
readonly status?: number
readonly message?: string
readonly type: ErrorDataType
readonly type: 'COMPONENT' | 'SERVER'
}

export interface ToastProps {
Expand All @@ -23,15 +20,6 @@ export interface ToastProps {
errorClearedComponent: () => void
}

export const getVariant = (type: ErrorDataType): ButtonVariant => {
let variantClass: ButtonVariant = 'danger'
// use switch case if we have more options
if (type === 'INFO') {
variantClass = 'info'
}
return variantClass
}

export const Toast: React.FC<ToastProps> = ({
serverError,
componentError,
Expand All @@ -41,15 +29,13 @@ export const Toast: React.FC<ToastProps> = ({
const error = componentError || serverError || null
const isVisible = Boolean(error)
const errorClearHandler = error && error.type === 'SERVER' ? errorClearedServer : errorClearedComponent
const variant = getVariant(error ? error.type : 'INFO')

if (isVisible) {
setTimeout(errorClearHandler, 5000)
}

return (
<div data-test="toast-wrapper" className={`toast ${isVisible ? 'visible' : ''}`} onClick={errorClearHandler}>
<Button type="reset" variant={variant} fullWidth>
<Button type="reset" variant="danger" fullWidth>
{error && error.message}
</Button>
</div>
Expand Down
26 changes: 5 additions & 21 deletions src/components/Toast/toast.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ const DEFAULT_COMPONENT_ERROR = {
const stories = storiesOf('Toast', module)

const Usage = () => {
const [serverError, setErrorServer] = useState<any>()
const [componentError, setErrorComponent] = useState<any>()
const [serverError, setErrorServer] = useState()
const [componentError, setErrorComponent] = useState()

const errorClearedComponent = () => {
setErrorComponent(undefined)
setErrorComponent(null)
}

const errorClearedServer = () => {
setErrorServer(undefined)
setErrorServer(null)
}

return (
Expand All @@ -47,20 +47,4 @@ const Usage = () => {
)
}

stories
.add('Error', () => <Usage />)
.add('Info', () => (
<Toast
componentError={{
type: 'INFO',
message: 'success'
}}
serverError={null}
errorClearedComponent={() => {
// do some stuff
}}
errorClearedServer={() => {
// do some stuff
}}
/>
))
stories.add('Error', () => <Usage />)
17 changes: 17 additions & 0 deletions src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap
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>
`;
37 changes: 37 additions & 0 deletions src/components/ToastMessage/__tests__/index.tsx
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()
})
})
25 changes: 25 additions & 0 deletions src/components/ToastMessage/index.tsx
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>
)
}
70 changes: 70 additions & 0 deletions src/components/ToastMessage/toastMessage.stories.tsx
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 />)
1 change: 1 addition & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export * from './components/AcDynamicLinks/dynamic-link-gen'
export * from './components/HtmlRender'
export * from './components/Form'
export * from './components/ProgressBar'
export * from './components/ToastMessage'

// Utils
export * from './utils/validators'
Expand Down

0 comments on commit 3dae57d

Please sign in to comment.