From 31b0bcaa673794024a71065be76681150ad4b9d6 Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Tue, 7 Feb 2017 18:51:08 -0200 Subject: [#922] Extract input field to a component with @anikarni --- web-ui/src/common/submit_button/submit-button.scss | 48 ++++++++++++++++++++++ web-ui/src/common/submit_button/submit_button.js | 26 ++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 web-ui/src/common/submit_button/submit-button.scss create mode 100644 web-ui/src/common/submit_button/submit_button.js (limited to 'web-ui/src/common/submit_button') 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..86a24e5a --- /dev/null +++ b/web-ui/src/common/submit_button/submit-button.scss @@ -0,0 +1,48 @@ +/* + * 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 "~scss/base/colors"; + +.submit-button { + background: $dark_blue; + padding: 0.8em; + color: $white; + text-align: center; + border: none; + border-radius: 2px; + font-weight: 300; + width: 100%; + margin-bottom: 1em; +} + +@media only screen and (min-width : 500px) { + .submit-button { + flex-basis: 70%; + -webkit-align-self: center; + align-self: center; + } +} + +@media only screen and (min-width : 960px) { + .submit-button { + width: 300px; + -webkit-align-self: flex-start; + align-self: flex-start; + font-size: 0.8em; + margin-bottom: 1em; + } +} 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..89cfc55b --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.js @@ -0,0 +1,26 @@ +/* + * 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 './submit-button.scss' + +const SubmitButton = ({ buttonText }) => ( + +) + +export default SubmitButton -- cgit v1.2.3 From aa26a47abac48d817a04a4f2375f1378767fa83c Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Tue, 7 Feb 2017 19:02:47 -0200 Subject: [#922] Fix button and input width with @anikarni --- web-ui/src/common/submit_button/submit-button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit-button.scss b/web-ui/src/common/submit_button/submit-button.scss index 86a24e5a..ccd0bef4 100644 --- a/web-ui/src/common/submit_button/submit-button.scss +++ b/web-ui/src/common/submit_button/submit-button.scss @@ -31,7 +31,7 @@ @media only screen and (min-width : 500px) { .submit-button { - flex-basis: 70%; + width: 70%; -webkit-align-self: center; align-self: center; } -- cgit v1.2.3 From 7f76c79319bf0817222fc88011fd870d97648963 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Tue, 7 Feb 2017 19:46:45 -0200 Subject: [#922] Adds eslint for react and es6 files --- web-ui/src/common/submit_button/submit_button.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index 89cfc55b..ea1bbf26 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -23,4 +23,8 @@ const SubmitButton = ({ buttonText }) => ( ) +SubmitButton.propTypes = { + buttonText: React.PropTypes.string.isRequired +} + export default SubmitButton -- cgit v1.2.3 From 94fc7554995e4b6fcd95e74d082ed411239ea8e9 Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 8 Feb 2017 11:11:38 -0200 Subject: [#922] Add semincolon to lint and fix js code with @tayanefernandes --- web-ui/src/common/submit_button/submit_button.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index ea1bbf26..fb87bf7d 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -15,16 +15,16 @@ * along with Pixelated. If not, see . */ -import React from 'react' +import React from 'react'; -import './submit-button.scss' +import './submit-button.scss'; const SubmitButton = ({ buttonText }) => ( -) +); SubmitButton.propTypes = { buttonText: React.PropTypes.string.isRequired -} +}; -export default SubmitButton +export default SubmitButton; -- cgit v1.2.3 From ea852b12e33b0e50ba7986c33ad68be5e38305ba Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Wed, 8 Feb 2017 13:49:54 -0200 Subject: [#922] Add css autoprefixer for compatibility with browsers with @tayanefernandes --- web-ui/src/common/submit_button/submit-button.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit-button.scss b/web-ui/src/common/submit_button/submit-button.scss index ccd0bef4..13cb7607 100644 --- a/web-ui/src/common/submit_button/submit-button.scss +++ b/web-ui/src/common/submit_button/submit-button.scss @@ -32,7 +32,6 @@ @media only screen and (min-width : 500px) { .submit-button { width: 70%; - -webkit-align-self: center; align-self: center; } } @@ -40,7 +39,6 @@ @media only screen and (min-width : 960px) { .submit-button { width: 300px; - -webkit-align-self: flex-start; align-self: flex-start; font-size: 0.8em; margin-bottom: 1em; -- cgit v1.2.3 From db8ded2876a981b259f2ccfc5b07133e6eec666b Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Thu, 23 Feb 2017 17:01:58 -0300 Subject: [#907] Normalizes scss file names with @thaissiqueira --- web-ui/src/common/submit_button/submit-button.scss | 46 ---------------------- web-ui/src/common/submit_button/submit_button.js | 2 +- web-ui/src/common/submit_button/submit_button.scss | 46 ++++++++++++++++++++++ 3 files changed, 47 insertions(+), 47 deletions(-) delete mode 100644 web-ui/src/common/submit_button/submit-button.scss create mode 100644 web-ui/src/common/submit_button/submit_button.scss (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit-button.scss b/web-ui/src/common/submit_button/submit-button.scss deleted file mode 100644 index 13cb7607..00000000 --- a/web-ui/src/common/submit_button/submit-button.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* - * 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 "~scss/base/colors"; - -.submit-button { - background: $dark_blue; - padding: 0.8em; - color: $white; - text-align: center; - border: none; - border-radius: 2px; - font-weight: 300; - width: 100%; - margin-bottom: 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.js b/web-ui/src/common/submit_button/submit_button.js index fb87bf7d..4754e042 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -17,7 +17,7 @@ import React from 'react'; -import './submit-button.scss'; +import './submit_button.scss'; const SubmitButton = ({ buttonText }) => ( 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..13cb7607 --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.scss @@ -0,0 +1,46 @@ +/* + * 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 "~scss/base/colors"; + +.submit-button { + background: $dark_blue; + padding: 0.8em; + color: $white; + text-align: center; + border: none; + border-radius: 2px; + font-weight: 300; + width: 100%; + margin-bottom: 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; + } +} -- cgit v1.2.3 From fec26b211a42b068e677ac5b43080bd4bf59e47a Mon Sep 17 00:00:00 2001 From: Thais Siqueira Date: Fri, 24 Feb 2017 14:27:31 -0300 Subject: [#907] Moves tests to directories components --- web-ui/src/common/submit_button/submit_button.spec.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 web-ui/src/common/submit_button/submit_button.spec.js (limited to 'web-ui/src/common/submit_button') 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..8279547c --- /dev/null +++ b/web-ui/src/common/submit_button/submit_button.spec.js @@ -0,0 +1,16 @@ +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(); + }); + + it('renders an input of type submit for add email', () => { + expect(submitButton.find('input[type="submit"]').props().value).toEqual('Add Email'); + }); +}); -- cgit v1.2.3 From aad05a38511a8bdd9bd13d2d38092ce6b35ac46b Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Thu, 9 Mar 2017 18:54:10 -0300 Subject: [#923] Disable button when the email is invalid on the backup email page with @FrailWords --- web-ui/src/common/submit_button/submit_button.js | 14 +++++++++++--- web-ui/src/common/submit_button/submit_button.scss | 7 ------- web-ui/src/common/submit_button/submit_button.spec.js | 2 +- 3 files changed, 12 insertions(+), 11 deletions(-) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index 4754e042..1e7da021 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -16,15 +16,23 @@ */ import React from 'react'; +import RaisedButton from 'material-ui/RaisedButton'; import './submit_button.scss'; -const SubmitButton = ({ buttonText }) => ( - +const SubmitButton = ({ buttonText, disabled }) => ( +
+ +
); SubmitButton.propTypes = { - buttonText: React.PropTypes.string.isRequired + buttonText: React.PropTypes.string.isRequired, + disabled: React.PropTypes.boolean +}; + +SubmitButton.defaultProps = { + disabled: true }; 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 index 13cb7607..ac1307a8 100644 --- a/web-ui/src/common/submit_button/submit_button.scss +++ b/web-ui/src/common/submit_button/submit_button.scss @@ -18,13 +18,6 @@ @import "~scss/base/colors"; .submit-button { - background: $dark_blue; - padding: 0.8em; - color: $white; - text-align: center; - border: none; - border-radius: 2px; - font-weight: 300; width: 100%; 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 index 8279547c..d4308e6d 100644 --- a/web-ui/src/common/submit_button/submit_button.spec.js +++ b/web-ui/src/common/submit_button/submit_button.spec.js @@ -11,6 +11,6 @@ describe('SubmitButton', () => { }); it('renders an input of type submit for add email', () => { - expect(submitButton.find('input[type="submit"]').props().value).toEqual('Add Email'); + expect(submitButton.find('RaisedButton').props().label).toEqual('Add Email'); }); }); -- cgit v1.2.3 From 29a59d4ec216a895c8004fc0addbec1b329df200 Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Fri, 10 Mar 2017 14:29:27 -0300 Subject: [#923] Fix submit button style of material-ui with @FrailWords --- web-ui/src/common/submit_button/submit_button.js | 26 ++++++++++++++++++---- web-ui/src/common/submit_button/submit_button.scss | 1 + .../src/common/submit_button/submit_button.spec.js | 4 ++++ 3 files changed, 27 insertions(+), 4 deletions(-) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index 1e7da021..73f9b21c 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -20,19 +20,37 @@ import RaisedButton from 'material-ui/RaisedButton'; import './submit_button.scss'; -const SubmitButton = ({ buttonText, disabled }) => ( +const labelStyle = { + textTransform: 'none', + fontSize: '1em', + lineHeight: '48px' +}; + +const buttonStyle = { + height: '48px' +}; + +const SubmitButton = ({ buttonText, disabled=false }) => (
- +
); SubmitButton.propTypes = { buttonText: React.PropTypes.string.isRequired, - disabled: React.PropTypes.boolean + disabled: React.PropTypes.bool }; SubmitButton.defaultProps = { - disabled: true + 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 index ac1307a8..851899f7 100644 --- a/web-ui/src/common/submit_button/submit_button.scss +++ b/web-ui/src/common/submit_button/submit_button.scss @@ -20,6 +20,7 @@ .submit-button { width: 100%; margin-bottom: 1em; + font-size: 1em; } @media only screen and (min-width : 500px) { diff --git a/web-ui/src/common/submit_button/submit_button.spec.js b/web-ui/src/common/submit_button/submit_button.spec.js index d4308e6d..0ba8137c 100644 --- a/web-ui/src/common/submit_button/submit_button.spec.js +++ b/web-ui/src/common/submit_button/submit_button.spec.js @@ -13,4 +13,8 @@ describe('SubmitButton', () => { 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); + }); }); -- cgit v1.2.3 From 9e5dce775c51b44cf7b17d8ab564fdefc16a06c0 Mon Sep 17 00:00:00 2001 From: Tayane Fernandes Date: Fri, 10 Mar 2017 15:25:43 -0300 Subject: [#923] Fix the submit button when the email is empty When the email is empty the button should be disabled, but we should not see any error message with @FrailWords --- web-ui/src/common/submit_button/submit_button.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'web-ui/src/common/submit_button') diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js index 73f9b21c..1224c7bd 100644 --- a/web-ui/src/common/submit_button/submit_button.js +++ b/web-ui/src/common/submit_button/submit_button.js @@ -30,9 +30,10 @@ const buttonStyle = { height: '48px' }; -const SubmitButton = ({ buttonText, disabled=false }) => ( +const SubmitButton = ({ buttonText, disabled = false }) => (
-