diff options
Diffstat (limited to 'web-ui/src/common')
6 files changed, 204 insertions, 0 deletions
diff --git a/web-ui/src/common/back_link/back_link.js b/web-ui/src/common/back_link/back_link.js new file mode 100644 index 00000000..f3bdb2b5 --- /dev/null +++ b/web-ui/src/common/back_link/back_link.js @@ -0,0 +1,35 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +import React from 'react'; + +import './back_link.scss'; + +const BackLink = ({ text, ...other }) => ( + <div className='link-content'> + <a className='link' tabIndex='0' {...other}> + <i className='fa fa-angle-left' aria-hidden='true' /> + <span>{text}</span> + </a> + </div> +); + +BackLink.propTypes = { + text: React.PropTypes.string.isRequired +}; + +export default BackLink; diff --git a/web-ui/src/common/back_link/back_link.scss b/web-ui/src/common/back_link/back_link.scss new file mode 100644 index 00000000..a799a710 --- /dev/null +++ b/web-ui/src/common/back_link/back_link.scss @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +@import "~scss/base/colors"; + +.link { + color: $dark_blue; + font-style: italic; + font-size: 0.8em; + + .fa { + font-size: 1.6em; + position: relative; + top: 3px; + margin-right: 0.3em; + } +} diff --git a/web-ui/src/common/back_link/back_link.spec.js b/web-ui/src/common/back_link/back_link.spec.js new file mode 100644 index 00000000..ee659267 --- /dev/null +++ b/web-ui/src/common/back_link/back_link.spec.js @@ -0,0 +1,20 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import BackLink from 'src/common/back_link/back_link'; + +describe('BackLink', () => { + let backLink; + + beforeEach(() => { + backLink = shallow(<BackLink text='Back to inbox' href='/' />); + }); + + it('renders link with text', () => { + expect(backLink.find('a').text()).toEqual('Back to inbox'); + }); + + it('adds link action', () => { + expect(backLink.find('a').props().href).toEqual('/'); + }); +}); diff --git a/web-ui/src/common/snackbar_notification/snackbar_notification.js b/web-ui/src/common/snackbar_notification/snackbar_notification.js new file mode 100644 index 00000000..8a7e5094 --- /dev/null +++ b/web-ui/src/common/snackbar_notification/snackbar_notification.js @@ -0,0 +1,65 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +import React from 'react'; +import Snackbar from 'material-ui/Snackbar'; +import { red500, blue500 } from 'material-ui/styles/colors'; + +import './snackbar_notification.scss'; + +const notificationStyle = () => ({ + top: 0, + left: 'auto', + bottom: 'auto', + alignSelf: 'center', + transform: 'translate3d(0, 0px, 0)' +}); + +const contentStyle = { + textAlign: 'center' +}; + +const getStyleByType = (isError) => { + const style = { height: 'auto' }; + style.backgroundColor = isError ? red500 : blue500; + return style; +}; + +const SnackbarNotification = ({ message, isError = false, autoHideDuration = 5000 }) => ( + <Snackbar + id='snackbar' + open + bodyStyle={getStyleByType(isError)} + message={message} + autoHideDuration={autoHideDuration} + contentStyle={contentStyle} + style={notificationStyle()} + /> +); + +SnackbarNotification.propTypes = { + message: React.PropTypes.string.isRequired, + isError: React.PropTypes.bool, + autoHideDuration: React.PropTypes.number +}; + +SnackbarNotification.defaultProps = { + isError: false, + autoHideDuration: 5000 +}; + +export default SnackbarNotification; diff --git a/web-ui/src/common/snackbar_notification/snackbar_notification.scss b/web-ui/src/common/snackbar_notification/snackbar_notification.scss new file mode 100644 index 00000000..e37ba4ae --- /dev/null +++ b/web-ui/src/common/snackbar_notification/snackbar_notification.scss @@ -0,0 +1,22 @@ +/* + * Copyright (c) 2017 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. + */ + +//TODO: Refer to Issue - https://github.com/callemall/material-ui/issues/3860 +#snackbar > div { + line-height: 20px !important; + padding: 24px !important; +} diff --git a/web-ui/src/common/snackbar_notification/snackbar_notification.spec.js b/web-ui/src/common/snackbar_notification/snackbar_notification.spec.js new file mode 100644 index 00000000..24b79e71 --- /dev/null +++ b/web-ui/src/common/snackbar_notification/snackbar_notification.spec.js @@ -0,0 +1,31 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification'; +import Snackbar from 'material-ui/Snackbar'; +import { red500 } from 'material-ui/styles/colors'; + +describe('SnackbarNotification', () => { + let snackbarNotification; + + beforeEach(() => { + snackbarNotification = shallow(<SnackbarNotification message={'Error Message'} isError />); + }); + + it('renders snackbar with error message', () => { + expect(snackbarNotification.find(Snackbar).props().message).toEqual('Error Message'); + }); + + it('renders snackbar with open as true', () => { + expect(snackbarNotification.find(Snackbar).props().open).toEqual(true); + }); + + it('renders snackbar with error body style', () => { + expect(snackbarNotification.find(Snackbar).props().bodyStyle) + .toEqual({ height: 'auto', backgroundColor: red500 }); + }); + + it('renders snackbar with default auto-hide duration', () => { + expect(snackbarNotification.find(Snackbar).props().autoHideDuration).toEqual(5000); + }); +}); |