diff --git a/js/src/ui/Tooltips/Tooltip/tooltip.js b/js/src/ui/Tooltips/Tooltip/tooltip.js index a8faf2017..af3b5e0b3 100644 --- a/js/src/ui/Tooltips/Tooltip/tooltip.js +++ b/js/src/ui/Tooltips/Tooltip/tooltip.js @@ -15,12 +15,13 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { FlatButton } from 'material-ui'; -import ActionDoneAll from 'material-ui/svg-icons/action/done-all'; -import ContentClear from 'material-ui/svg-icons/content/clear'; -import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward'; + +import { CancelIcon, DoneIcon, NextIcon } from '~/ui/Icons'; +import { nodeOrStringProptype } from '~/util/proptypes'; import { newTooltip, nextTooltip, closeTooltips } from '../actions'; @@ -30,15 +31,15 @@ let tooltipId = 0; class Tooltip extends Component { static propTypes = { - title: PropTypes.string, - text: PropTypes.string, - right: PropTypes.bool, + className: PropTypes.string, currentId: PropTypes.number, maxId: PropTypes.number, - className: PropTypes.string, onNewTooltip: PropTypes.func, onNextTooltip: PropTypes.func, - onCloseTooltips: PropTypes.func + onCloseTooltips: PropTypes.func, + right: PropTypes.bool, + text: nodeOrStringProptype(), + title: nodeOrStringProptype() } state = { @@ -54,8 +55,7 @@ class Tooltip extends Component { render () { const { id } = this.state; - const { className, currentId, maxId, right, onCloseTooltips, onNextTooltip } = this.props; - const classes = `${styles.box} ${right ? styles.arrowRight : styles.arrowLeft} ${className}`; + const { className, currentId, maxId, right, onCloseTooltips, onNextTooltip, text, title } = this.props; if (id !== currentId) { return null; @@ -64,32 +64,57 @@ class Tooltip extends Component { const buttons = id !== maxId ? [ } key='skipButton' - icon={ } - label='Skip' + label={ + + } onTouchTap={ onCloseTooltips } />, } key='nextButton' - icon={ } - label='Next' + label={ + + } onTouchTap={ onNextTooltip } /> ] : ( } - label='Done' + icon={ } + label={ + + } onTouchTap={ onCloseTooltips } /> ); return ( -
+
- { this.props.title } + { title }
- { this.props.text } + { text }
{ buttons } @@ -102,7 +127,10 @@ class Tooltip extends Component { function mapStateToProps (state) { const { currentId, maxId } = state.tooltip; - return { currentId, maxId }; + return { + currentId, + maxId + }; } function mapDispatchToProps (dispatch) { diff --git a/js/src/ui/Tooltips/Tooltip/tooltip.spec.js b/js/src/ui/Tooltips/Tooltip/tooltip.spec.js new file mode 100644 index 000000000..57e820c96 --- /dev/null +++ b/js/src/ui/Tooltips/Tooltip/tooltip.spec.js @@ -0,0 +1,68 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity 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 General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React from 'react'; +import { shallow } from 'enzyme'; +import sinon from 'sinon'; + +import Tooltip from './'; + +let component; +let store; + +function createRedux (currentId = 0) { + store = { + dispatch: sinon.stub(), + subscribe: sinon.stub(), + getState: () => { + return { + tooltip: { + currentId, + maxId: 2 + } + }; + } + }; + + return store; +} + +function render () { + component = shallow( + , + { + context: { + store: createRedux() + } + } + ).find('Tooltip').shallow(); + + return component; +} + +describe('ui/Tooltips/Tooltip', () => { + beforeEach(() => { + render(); + }); + + it('renders defaults', () => { + expect(component.get(0)).to.be.ok; + }); + + it('renders null when id !== currentId', () => { + expect(render(1).get(0)).to.be.null; + }); +}); diff --git a/js/src/ui/Tooltips/index.js b/js/src/ui/Tooltips/index.js index 9996fdc74..8918ce14c 100644 --- a/js/src/ui/Tooltips/index.js +++ b/js/src/ui/Tooltips/index.js @@ -14,8 +14,7 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import Tooltip from './Tooltip'; -import tooltipReducer from './reducers'; - export default from './tooltips'; -export { Tooltip, tooltipReducer }; + +export Tooltip from './Tooltip'; +export tooltipReducer from './reducers'; diff --git a/js/src/ui/Tooltips/tooltips.js b/js/src/ui/Tooltips/tooltips.js index fb2de6f22..0647cae37 100644 --- a/js/src/ui/Tooltips/tooltips.js +++ b/js/src/ui/Tooltips/tooltips.js @@ -29,7 +29,6 @@ class Tooltips extends Component { static propTypes = { currentId: PropTypes.number, - closed: PropTypes.bool, onNextTooltip: PropTypes.func } @@ -72,7 +71,9 @@ class Tooltips extends Component { function mapStateToProps (state) { const { currentId } = state.tooltip; - return { currentId }; + return { + currentId + }; } function mapDispatchToProps (dispatch) { diff --git a/js/src/ui/Tooltips/tooltips.spec.js b/js/src/ui/Tooltips/tooltips.spec.js new file mode 100644 index 000000000..b52153f8e --- /dev/null +++ b/js/src/ui/Tooltips/tooltips.spec.js @@ -0,0 +1,76 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity 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 General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import { shallow } from 'enzyme'; +import React from 'react'; +import sinon from 'sinon'; + +import Tooltips from './'; + +let component; +let router; +let store; + +function createRedux () { + store = { + dispatch: sinon.stub(), + subscribe: sinon.stub(), + getState: () => { + return { + tooltip: { + currentId: 1 + } + }; + } + }; + + return store; +} + +function createRouter () { + router = { + push: sinon.stub() + }; + + return router; +} + +function render () { + component = shallow( + , + { + context: { + store: createRedux() + } + } + ).find('Tooltips').shallow({ + context: { + router: createRouter() + } + }); + + return component; +} + +describe('ui/Tooltips', () => { + beforeEach(() => { + render(); + }); + + it('renders defaults', () => { + expect(component.get(0)).to.be.ok; + }); +}); diff --git a/js/src/views/Accounts/accounts.js b/js/src/views/Accounts/accounts.js index c84400f3a..80a292cd6 100644 --- a/js/src/views/Accounts/accounts.js +++ b/js/src/views/Accounts/accounts.js @@ -15,6 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import ContentAdd from 'material-ui/svg-icons/content/add'; @@ -88,7 +89,12 @@ class Accounts extends Component { + } /> { this.renderWallets() } @@ -228,7 +234,12 @@ class Accounts extends Component { + } /> ); diff --git a/js/src/views/Application/TabBar/Tab/tab.js b/js/src/views/Application/TabBar/Tab/tab.js index 7763c581a..9496c73e4 100644 --- a/js/src/views/Application/TabBar/Tab/tab.js +++ b/js/src/views/Application/TabBar/Tab/tab.js @@ -26,13 +26,12 @@ const SIGNER_ID = 'signer'; export default class Tab extends Component { static propTypes = { - children: PropTypes.node, pendings: PropTypes.number, view: PropTypes.object.isRequired }; render () { - const { view, children } = this.props; + const { view } = this.props; return ( - { children } - + /> ); } diff --git a/js/src/views/Application/TabBar/Tab/tabs.spec.js b/js/src/views/Application/TabBar/Tab/tabs.spec.js index e7ab61a7b..c1771412a 100644 --- a/js/src/views/Application/TabBar/Tab/tabs.spec.js +++ b/js/src/views/Application/TabBar/Tab/tabs.spec.js @@ -26,7 +26,6 @@ let instance; function render (id = 'signer') { component = shallow( testChildren
} pending={ 5 } view={ { id } } /> diff --git a/js/src/views/Application/TabBar/tabBar.css b/js/src/views/Application/TabBar/tabBar.css index 4ac00b848..2903f3ed3 100644 --- a/js/src/views/Application/TabBar/tabBar.css +++ b/js/src/views/Application/TabBar/tabBar.css @@ -60,8 +60,8 @@ } .tabbarTooltip { - left: 3.3em; - top: 0.5em; + left: 3em; + top: 4em; } .label { diff --git a/js/src/views/Application/TabBar/tabBar.js b/js/src/views/Application/TabBar/tabBar.js index 939e1b298..d9aa07089 100644 --- a/js/src/views/Application/TabBar/tabBar.js +++ b/js/src/views/Application/TabBar/tabBar.js @@ -15,6 +15,7 @@ // along with Parity. If not, see . import React, { Component, PropTypes } from 'react'; +import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { Link } from 'react-router'; import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar'; @@ -49,6 +50,15 @@ class TabBar extends Component {
{ this.renderTabItems() } + + } + />
@@ -61,15 +71,6 @@ class TabBar extends Component { const { views, pending } = this.props; return views.map((view, index) => { - const body = (view.id === 'accounts') - ? ( - - ) - : null; - return ( - { body } - + /> ); });