From c56bf133feddfcfed9487c16229138fcdb046983 Mon Sep 17 00:00:00 2001 From: Sriram Viswanathan Date: Wed, 22 Mar 2017 16:26:50 -0300 Subject: |#973| Thais + Sriram | Adds logout component to be shown on the header --- web-ui/src/common/flat_button/flat_button.js | 55 +++++++++++++++++++++++ web-ui/src/common/flat_button/flat_button.spec.js | 20 +++++++++ 2 files changed, 75 insertions(+) create mode 100644 web-ui/src/common/flat_button/flat_button.js create mode 100644 web-ui/src/common/flat_button/flat_button.spec.js (limited to 'web-ui/src/common/flat_button') diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js new file mode 100644 index 00000000..8b65ca30 --- /dev/null +++ b/web-ui/src/common/flat_button/flat_button.js @@ -0,0 +1,55 @@ +/* + * 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 . + */ + +import React from 'react'; +import FlatButton from 'material-ui/FlatButton'; +import FontIcon from 'material-ui/FontIcon'; +import { grey500 } from 'material-ui/styles/colors'; + +const labelStyle = { + textTransform: 'none', + verticalAlign: 'middle' +}; + +const iconStyle = { + marginRight: 0 +}; + +const flatButtonStyle = { + minWidth: 0, + verticalAlign: 'top' +}; + +const SubmitFlatButton = ({ buttonText, fontIconClass }) => ( + } + /> +); + +SubmitFlatButton.propTypes = { + buttonText: React.PropTypes.string.isRequired, + fontIconClass: React.PropTypes.string.isRequired +}; + +export default SubmitFlatButton; diff --git a/web-ui/src/common/flat_button/flat_button.spec.js b/web-ui/src/common/flat_button/flat_button.spec.js new file mode 100644 index 00000000..500eb8fb --- /dev/null +++ b/web-ui/src/common/flat_button/flat_button.spec.js @@ -0,0 +1,20 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import FlatButton from 'src/common/flat_button/flat_button'; + +describe('FlatButton', () => { + let flatButton; + + beforeEach(() => { + flatButton = shallow(); + }); + + it('renders a FlatButton of type submit with text logout', () => { + expect(flatButton.find('FlatButton').props().label).toEqual('Logout'); + }); + + it('renders a FlatButton with given fontIcon class', () => { + expect(flatButton.find('FlatButton').props().icon.props.className).toEqual('fa fa-sign-out'); + }); +}); -- cgit v1.2.3 From a6dbb3a7849881247270f0cf84d8b725f9022310 Mon Sep 17 00:00:00 2001 From: Sriram Viswanathan Date: Wed, 22 Mar 2017 18:03:10 -0300 Subject: |#973| Thais + Sriram | Adds name attribute to logout button and make it transparent on hover --- web-ui/src/common/flat_button/flat_button.js | 5 ++++- web-ui/src/common/flat_button/flat_button.spec.js | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) (limited to 'web-ui/src/common/flat_button') diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js index 8b65ca30..d9930ff5 100644 --- a/web-ui/src/common/flat_button/flat_button.js +++ b/web-ui/src/common/flat_button/flat_button.js @@ -34,10 +34,12 @@ const flatButtonStyle = { verticalAlign: 'top' }; -const SubmitFlatButton = ({ buttonText, fontIconClass }) => ( +const SubmitFlatButton = ({ name, buttonText, fontIconClass }) => ( ( ); SubmitFlatButton.propTypes = { + name: React.PropTypes.string.isRequired, buttonText: React.PropTypes.string.isRequired, fontIconClass: React.PropTypes.string.isRequired }; diff --git a/web-ui/src/common/flat_button/flat_button.spec.js b/web-ui/src/common/flat_button/flat_button.spec.js index 500eb8fb..8939e3d9 100644 --- a/web-ui/src/common/flat_button/flat_button.spec.js +++ b/web-ui/src/common/flat_button/flat_button.spec.js @@ -7,7 +7,11 @@ describe('FlatButton', () => { let flatButton; beforeEach(() => { - flatButton = shallow(); + flatButton = shallow(); + }); + + it('renders a FlatButton of type submit with name logout', () => { + expect(flatButton.find('FlatButton').props().name).toEqual('logout'); }); it('renders a FlatButton of type submit with text logout', () => { -- cgit v1.2.3 From eafa3efb5073c3c6bbf933decbf094b27edc7e99 Mon Sep 17 00:00:00 2001 From: Sriram Viswanathan Date: Thu, 23 Mar 2017 17:14:18 -0300 Subject: |#973| Thais + Sriram | Removes containerElement to use default 'button' container - fixes functionality --- web-ui/src/common/flat_button/flat_button.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'web-ui/src/common/flat_button') diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js index d9930ff5..33df7de4 100644 --- a/web-ui/src/common/flat_button/flat_button.js +++ b/web-ui/src/common/flat_button/flat_button.js @@ -38,9 +38,7 @@ const SubmitFlatButton = ({ name, buttonText, fontIconClass }) => ( Date: Fri, 24 Mar 2017 14:39:43 -0300 Subject: |#973| Thais + Sriram | Adds title and aria label for the logout button on the header --- web-ui/src/common/flat_button/flat_button.js | 2 ++ web-ui/src/common/flat_button/flat_button.spec.js | 8 ++++++++ 2 files changed, 10 insertions(+) (limited to 'web-ui/src/common/flat_button') diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js index 33df7de4..b8c6c2c7 100644 --- a/web-ui/src/common/flat_button/flat_button.js +++ b/web-ui/src/common/flat_button/flat_button.js @@ -43,6 +43,8 @@ const SubmitFlatButton = ({ name, buttonText, fontIconClass }) => ( labelPosition='before' label={buttonText} labelStyle={labelStyle} + aria-label={buttonText} + title={buttonText} icon={} /> ); diff --git a/web-ui/src/common/flat_button/flat_button.spec.js b/web-ui/src/common/flat_button/flat_button.spec.js index 8939e3d9..16f03acb 100644 --- a/web-ui/src/common/flat_button/flat_button.spec.js +++ b/web-ui/src/common/flat_button/flat_button.spec.js @@ -18,6 +18,14 @@ describe('FlatButton', () => { expect(flatButton.find('FlatButton').props().label).toEqual('Logout'); }); + it('renders a FlatButton of type submit with title logout', () => { + expect(flatButton.find('FlatButton').props().title).toEqual('Logout'); + }); + + it('renders a FlatButton of type submit with aria-label logout', () => { + expect(flatButton.find('FlatButton').props()['aria-label']).toEqual('Logout'); + }); + it('renders a FlatButton with given fontIcon class', () => { expect(flatButton.find('FlatButton').props().icon.props.className).toEqual('fa fa-sign-out'); }); -- cgit v1.2.3