diff options
author | Anike Arni <anikarni@gmail.com> | 2017-03-13 18:41:59 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-13 18:41:59 -0300 |
commit | 99a6a41ffea6de9e4b3df43265282d76c3391fd1 (patch) | |
tree | 2b4d7b3c5ebd267ad252ab05c440a90033e4f962 /web-ui/src/common/submit_button | |
parent | 8595d3d4f31b761574c08d6f9cdf5bfc00f53a99 (diff) | |
parent | 412d95d64b5d26d4f5e00a85b7b62da23e9bb168 (diff) |
Merge branch 'master' into makefile-tests
Diffstat (limited to 'web-ui/src/common/submit_button')
-rw-r--r-- | web-ui/src/common/submit_button/submit_button.js | 57 | ||||
-rw-r--r-- | web-ui/src/common/submit_button/submit_button.scss | 40 | ||||
-rw-r--r-- | web-ui/src/common/submit_button/submit_button.spec.js | 20 |
3 files changed, 117 insertions, 0 deletions
diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js new file mode 100644 index 00000000..1224c7bd --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.js @@ -0,0 +1,57 @@ +/* + * 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 RaisedButton from 'material-ui/RaisedButton'; + +import './submit_button.scss'; + +const labelStyle = { + textTransform: 'none', + fontSize: '1em', + lineHeight: '48px' +}; + +const buttonStyle = { + height: '48px' +}; + +const SubmitButton = ({ buttonText, disabled = false }) => ( + <div className='submit-button'> + <RaisedButton + type='submit' + label={buttonText} + disabled={disabled} + labelStyle={labelStyle} + buttonStyle={buttonStyle} + overlayStyle={buttonStyle} + fullWidth + primary + /> + </div> +); + +SubmitButton.propTypes = { + buttonText: React.PropTypes.string.isRequired, + disabled: React.PropTypes.bool +}; + +SubmitButton.defaultProps = { + disabled: false +}; + +export default SubmitButton; diff --git a/web-ui/src/common/submit_button/submit_button.scss b/web-ui/src/common/submit_button/submit_button.scss new file mode 100644 index 00000000..851899f7 --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.scss @@ -0,0 +1,40 @@ +/* + * 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"; + +.submit-button { + width: 100%; + margin-bottom: 1em; + font-size: 1em; +} + +@media only screen and (min-width : 500px) { + .submit-button { + width: 70%; + align-self: center; + } +} + +@media only screen and (min-width : 960px) { + .submit-button { + width: 300px; + align-self: flex-start; + font-size: 0.8em; + margin-bottom: 1em; + } +} diff --git a/web-ui/src/common/submit_button/submit_button.spec.js b/web-ui/src/common/submit_button/submit_button.spec.js new file mode 100644 index 00000000..0ba8137c --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.spec.js @@ -0,0 +1,20 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import SubmitButton from 'src/common/submit_button/submit_button'; + +describe('SubmitButton', () => { + let submitButton; + + beforeEach(() => { + submitButton = shallow(<SubmitButton buttonText='Add Email' />); + }); + + it('renders an input of type submit for add email', () => { + expect(submitButton.find('RaisedButton').props().label).toEqual('Add Email'); + }); + + it('renders button in enabled state', () => { + expect(submitButton.find('RaisedButton').props().disabled).toEqual(false); + }); +}); |