From 3dae57d0b786067ee5ce98bc7a60c29c313d4cb7 Mon Sep 17 00:00:00 2001 From: Khac Vy Date: Mon, 16 Dec 2019 14:45:31 +0700 Subject: [PATCH 1/3] Merge dev to master (#176) * Bump version * [CLD-514] Create Toast message comp (#174) * [CLD-514] Create Toast message comp --- package.json | 2 +- src/components/Toast/__tests__/index.tsx | 12 +--- src/components/Toast/index.tsx | 18 +---- src/components/Toast/toast.stories.tsx | 26 ++----- .../__tests__/__snapshots__/index.tsx.snap | 17 +++++ .../ToastMessage/__tests__/index.tsx | 37 ++++++++++ src/components/ToastMessage/index.tsx | 25 +++++++ .../ToastMessage/toastMessage.stories.tsx | 70 +++++++++++++++++++ src/index.tsx | 1 + 9 files changed, 159 insertions(+), 49 deletions(-) create mode 100644 src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap create mode 100644 src/components/ToastMessage/__tests__/index.tsx create mode 100644 src/components/ToastMessage/index.tsx create mode 100644 src/components/ToastMessage/toastMessage.stories.tsx diff --git a/package.json b/package.json index c83333ec4f..c302526b77 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Toast/__tests__/index.tsx b/src/components/Toast/__tests__/index.tsx index 808bd975fa..2139dfbe01 100644 --- a/src/components/Toast/__tests__/index.tsx +++ b/src/components/Toast/__tests__/index.tsx @@ -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: { @@ -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]) - }) - }) -}) diff --git a/src/components/Toast/index.tsx b/src/components/Toast/index.tsx index 322b56164f..1b7e07d25b 100644 --- a/src/components/Toast/index.tsx +++ b/src/components/Toast/index.tsx @@ -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 { @@ -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 = ({ serverError, componentError, @@ -41,15 +29,13 @@ export const Toast: React.FC = ({ 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 (
-
diff --git a/src/components/Toast/toast.stories.tsx b/src/components/Toast/toast.stories.tsx index 14283fdb0e..55654bcdbd 100644 --- a/src/components/Toast/toast.stories.tsx +++ b/src/components/Toast/toast.stories.tsx @@ -16,15 +16,15 @@ const DEFAULT_COMPONENT_ERROR = { const stories = storiesOf('Toast', module) const Usage = () => { - const [serverError, setErrorServer] = useState() - const [componentError, setErrorComponent] = useState() + const [serverError, setErrorServer] = useState() + const [componentError, setErrorComponent] = useState() const errorClearedComponent = () => { - setErrorComponent(undefined) + setErrorComponent(null) } const errorClearedServer = () => { - setErrorServer(undefined) + setErrorServer(null) } return ( @@ -47,20 +47,4 @@ const Usage = () => { ) } -stories - .add('Error', () => ) - .add('Info', () => ( - { - // do some stuff - }} - errorClearedServer={() => { - // do some stuff - }} - /> - )) +stories.add('Error', () => ) diff --git a/src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap b/src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap new file mode 100644 index 0000000000..aa1ccdfcce --- /dev/null +++ b/src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ToastMessage should match a snapshot 1`] = ` +
+ + Toast message + +
+`; diff --git a/src/components/ToastMessage/__tests__/index.tsx b/src/components/ToastMessage/__tests__/index.tsx new file mode 100644 index 0000000000..21b5437773 --- /dev/null +++ b/src/components/ToastMessage/__tests__/index.tsx @@ -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())).toMatchSnapshot() + }) + + it('should dismiss toast when click', () => { + shallow() + .find('[data-test="toast-wrapper"]') + .first() + .simulate('click') + + expect(defaultProps.onCloseToast).toHaveBeenCalledTimes(1) + }) + + it('should dismiss toast after 3 seconds', () => { + jest.useFakeTimers() + shallow() + jest.runAllTimers() + expect(defaultProps.onCloseToast).toHaveBeenCalledTimes(1) + }) + + afterEach(() => { + jest.resetAllMocks() + }) +}) diff --git a/src/components/ToastMessage/index.tsx b/src/components/ToastMessage/index.tsx new file mode 100644 index 0000000000..b9780a0dc0 --- /dev/null +++ b/src/components/ToastMessage/index.tsx @@ -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 = ({ visible = false, message, onCloseToast, variant }) => { + if (visible) { + setTimeout(onCloseToast, 3000) + } + + return ( +
+ +
+ ) +} diff --git a/src/components/ToastMessage/toastMessage.stories.tsx b/src/components/ToastMessage/toastMessage.stories.tsx new file mode 100644 index 0000000000..95c49c64d8 --- /dev/null +++ b/src/components/ToastMessage/toastMessage.stories.tsx @@ -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(false) + const [variant, setVariant] = useState('primary') + + const closeToast = () => { + setVisible(false) + } + + return ( +
+ +
+
+ +
+
+ +
+
+ + +
+ ) +} + +stories.add('Default', () => ) diff --git a/src/index.tsx b/src/index.tsx index ceeed5301b..b3fb3fd215 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -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' From 67446e47872dd99bef746a1b285857563371302c Mon Sep 17 00:00:00 2001 From: vuhuucuong Date: Mon, 16 Dec 2019 13:27:19 +0700 Subject: [PATCH 2/3] [CLD-586] Create Helper component --- .../__tests__/__snapshots__/index.tsx.snap | 35 +++++++++++++++++++ src/components/Helper/__tests__/index.tsx | 20 +++++++++++ src/components/Helper/helper.stories.tsx | 12 +++++++ src/components/Helper/index.tsx | 25 +++++++++++++ src/index.tsx | 1 + src/styles/components/helper.scss | 21 +++++++++++ src/styles/index.scss | 1 + 7 files changed, 115 insertions(+) create mode 100644 src/components/Helper/__tests__/__snapshots__/index.tsx.snap create mode 100644 src/components/Helper/__tests__/index.tsx create mode 100644 src/components/Helper/helper.stories.tsx create mode 100644 src/components/Helper/index.tsx create mode 100644 src/styles/components/helper.scss diff --git a/src/components/Helper/__tests__/__snapshots__/index.tsx.snap b/src/components/Helper/__tests__/__snapshots__/index.tsx.snap new file mode 100644 index 0000000000..4d29fa8beb --- /dev/null +++ b/src/components/Helper/__tests__/__snapshots__/index.tsx.snap @@ -0,0 +1,35 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Helper should default to variant info without close button 1`] = ` +
+`; + +exports[`Helper should match snapshot with button for variant info 1`] = ` +
+`; + +exports[`Helper should match snapshot with button for variant warning 1`] = ` +
+`; + +exports[`Helper should match with/without closeButton 1`] = ` +
+
+`; + +exports[`Helper should match with/without closeButton 2`] = ` +
+`; diff --git a/src/components/Helper/__tests__/index.tsx b/src/components/Helper/__tests__/index.tsx new file mode 100644 index 0000000000..3e46fadf31 --- /dev/null +++ b/src/components/Helper/__tests__/index.tsx @@ -0,0 +1,20 @@ +import * as React from 'react' +import { shallow } from 'enzyme' +import { Helper, Variant } from '../index' + +const variants: Variant[] = ['info', 'warning'] + +describe('Helper', () => { + it('should default to variant info without close button', () => { + expect(shallow()).toMatchSnapshot() + }) + it('should match with/without closeButton', () => { + expect(shallow()).toMatchSnapshot() + expect(shallow()).toMatchSnapshot() + }) + variants.forEach(variant => { + it('should match snapshot with button for variant ' + variant, () => { + expect(shallow()).toMatchSnapshot() + }) + }) +}) diff --git a/src/components/Helper/helper.stories.tsx b/src/components/Helper/helper.stories.tsx new file mode 100644 index 0000000000..997f108dee --- /dev/null +++ b/src/components/Helper/helper.stories.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import { storiesOf } from '@storybook/react' +import { Helper } from './index' + +storiesOf('Helper', module) + .add('Info', () => Helper variant info) + .add('Warning', () => Helper variant warning) + .add('With close button', () => ( + console.log('clicked')}> + Helper with closeButton + + )) diff --git a/src/components/Helper/index.tsx b/src/components/Helper/index.tsx new file mode 100644 index 0000000000..c1fd12cb53 --- /dev/null +++ b/src/components/Helper/index.tsx @@ -0,0 +1,25 @@ +import * as React from 'react' + +export type Variant = 'info' | 'warning' + +export interface HelperProps { + variant?: Variant + children?: React.ReactNode + closeButton?: boolean + onCloseClick?: (e: React.MouseEvent) => void +} + +export const Helper: React.FC = ({ + variant = 'info', + children = '', + closeButton = false, + onCloseClick +}) => { + const helperColor = variant === 'warning' ? 'helper-warning' : 'helper-info' + return ( +
+ {closeButton && } + {children} +
+ ) +} diff --git a/src/index.tsx b/src/index.tsx index b3fb3fd215..276a7e317f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -39,6 +39,7 @@ export * from './components/HtmlRender' export * from './components/Form' export * from './components/ProgressBar' export * from './components/ToastMessage' +export * from './components/Helper' // Utils export * from './utils/validators' diff --git a/src/styles/components/helper.scss b/src/styles/components/helper.scss new file mode 100644 index 0000000000..815240f212 --- /dev/null +++ b/src/styles/components/helper.scss @@ -0,0 +1,21 @@ +@import '../base/colors.scss'; +@import '../base/fonts.scss'; + +.notification { + &.helper-wrap { + font-size: 1rem; + font-family: $family-sans-serif; + text-transform: lowercase; + margin-bottom: 1rem; + } + + &.helper-info { + background-color: transparentize($reapit-mid-blue, 0.8); + color: $reapit-mid-blue; + } + + &.helper-warning { + background-color: transparentize($reapit-red, 0.8); + color: $reapit-red; + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index db3d85c820..0dae764265 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -26,3 +26,4 @@ @import './components/dynamic-link.scss'; @import './components/pagination.scss'; @import './components/input.scss'; +@import './components/helper.scss'; From deb382fc86ae2ca21542d2f363e79c0fdd85c74e Mon Sep 17 00:00:00 2001 From: vuhuucuong Date: Mon, 16 Dec 2019 16:34:43 +0700 Subject: [PATCH 3/3] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c302526b77..0615624cd6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@reapit/elements", - "version": "0.5.16", + "version": "0.5.17", "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",