feat(recover): add submit recover btn custom label

akiokio · Aug 24, 2018 · 37e31aa · 37e31aa
1 parent 415d410
commit 37e31aa
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 9 deletions.
diff --git a/dist/ReactSignupLoginComponent.js b/dist/ReactSignupLoginComponent.js
@@ -141,7 +141,8 @@ var ReactSignupLoginComponent = function (_React$Component) {
           styles: _this2.props.styles.recoverPassword,
           username: _this2.state.username,
           usernameCustomLabel: _this2.props.usernameCustomLabel,
-          goToLoginCustomLabel: _this2.props.goToLoginCustomLabel
+          goToLoginCustomLabel: _this2.props.goToLoginCustomLabel,
+          submitRecoverPasswordCustomLabel: _this2.props.submitRecoverPasswordCustomLabel
         });
       };
       return React.createElement(
@@ -210,7 +211,8 @@ ReactSignupLoginComponent.propTypes = {
   goToSignupCustomLabel: PropTypes.string,
   submitLoginCustomLabel: PropTypes.string,
   goToLoginCustomLabel: PropTypes.string,
-  submitSignupCustomLabel: PropTypes.string
+  submitSignupCustomLabel: PropTypes.string,
+  submitRecoverPasswordCustomLabel: PropTypes.string
 };
 
 ReactSignupLoginComponent.defaultProps = {
@@ -225,7 +227,8 @@ ReactSignupLoginComponent.defaultProps = {
   goToSignupCustomLabel: 'Signup',
   goToLoginCustomLabel: 'Login',
   submitLoginCustomLabel: 'Signup',
-  submitSignupCustomLabel: 'Signup'
+  submitSignupCustomLabel: 'Signup',
+  submitRecoverPasswordCustomLabel: 'Recover'
 };
 
 export default ReactSignupLoginComponent;
diff --git a/dist/RecoverPassword.js b/dist/RecoverPassword.js
@@ -40,7 +40,8 @@ var RecoverPassword = function RecoverPassword(_ref) {
       handleRecoverPassword = _ref.handleRecoverPassword,
       username = _ref.username,
       usernameCustomLabel = _ref.usernameCustomLabel,
-      goToLoginCustomLabel = _ref.goToLoginCustomLabel;
+      goToLoginCustomLabel = _ref.goToLoginCustomLabel,
+      submitRecoverPasswordCustomLabel = _ref.submitRecoverPasswordCustomLabel;
   return React.createElement(
     'section',
     {
@@ -81,7 +82,7 @@ var RecoverPassword = function RecoverPassword(_ref) {
         id: 'submit-recover-password',
         name: 'submit-recover-password',
         type: 'submit',
-        value: 'Recover',
+        value: submitRecoverPasswordCustomLabel,
         style: Object.assign({}, localStyles.button, styles.button),
         onClick: handleRecoverPassword
       })
@@ -102,7 +103,8 @@ RecoverPassword.propTypes = {
     button: PropTypes.object
   }),
   usernameCustomLabel: PropTypes.string.isRequired,
-  goToLoginCustomLabel: PropTypes.string.isRequired
+  goToLoginCustomLabel: PropTypes.string.isRequired,
+  submitRecoverPasswordCustomLabel: PropTypes.string.isRequired
 };
 
 RecoverPassword.defaultProps = {

diff --git a/dist/RecoverPassword.test.js b/dist/RecoverPassword.test.js
@@ -11,7 +11,8 @@ describe('the main wrapper', function () {
     handleRecoverPassword: jest.fn(),
     username: '',
     usernameCustomLabel: 'Username',
-    goToLoginCustomLabel: 'Login'
+    goToLoginCustomLabel: 'Login',
+    submitRecoverPasswordCustomLabel: 'Help me'
   };
   it('renders without crashing', function () {
     shallow(React.createElement(RecoverPassword, requiredMockProps));
@@ -26,11 +27,14 @@ describe('the main wrapper', function () {
   describe('with custom labels', function () {
     var customLabelUsername = 'email?';
     var customGoToLogin = 'Back to login';
+    var customSubmitRecover = 'Help me';
     var wrapper = shallow(React.createElement(RecoverPassword, Object.assign({}, requiredMockProps, {
       usernameCustomLabel: customLabelUsername,
-      goToLoginCustomLabel: customGoToLogin
+      goToLoginCustomLabel: customGoToLogin,
+      submitRecoverPasswordCustomLabel: customSubmitRecover
     })));
     it('should render custom labels if provided', function () {
+      expect(wrapper.find('input[name="submit-recover-password"]').prop('value')).toEqual(customSubmitRecover);
       expect(wrapper.find('input[name="username"]').prop('placeholder')).toEqual(customLabelUsername);
       expect(wrapper.find('#login-button').text()).toEqual(customGoToLogin);
     });

diff --git a/src/components/ReactSignupLoginComponent.js b/src/components/ReactSignupLoginComponent.js
@@ -125,6 +125,7 @@ class ReactSignupLoginComponent extends React.Component {
           username={this.state.username}
           usernameCustomLabel={this.props.usernameCustomLabel}
           goToLoginCustomLabel={this.props.goToLoginCustomLabel}
+          submitRecoverPasswordCustomLabel={this.props.submitRecoverPasswordCustomLabel}
         />
       );
     };
@@ -184,6 +185,7 @@ ReactSignupLoginComponent.propTypes = {
   submitLoginCustomLabel: PropTypes.string,
   goToLoginCustomLabel: PropTypes.string,
   submitSignupCustomLabel: PropTypes.string,
+  submitRecoverPasswordCustomLabel: PropTypes.string,
 };
 
 ReactSignupLoginComponent.defaultProps = {
@@ -199,6 +201,7 @@ ReactSignupLoginComponent.defaultProps = {
   goToLoginCustomLabel: 'Login',
   submitLoginCustomLabel: 'Signup',
   submitSignupCustomLabel: 'Signup',
+  submitRecoverPasswordCustomLabel: 'Recover',
 };
 
 export default ReactSignupLoginComponent;
diff --git a/src/components/RecoverPassword.js b/src/components/RecoverPassword.js
@@ -41,6 +41,7 @@ const RecoverPassword = ({
   username,
   usernameCustomLabel,
   goToLoginCustomLabel,
+  submitRecoverPasswordCustomLabel,
 }) => (
   <section
     id="recover-password-form"
@@ -72,7 +73,7 @@ const RecoverPassword = ({
         id="submit-recover-password"
         name="submit-recover-password"
         type="submit"
-        value="Recover"
+        value={submitRecoverPasswordCustomLabel}
         style={Object.assign({}, localStyles.button, styles.button)}
         onClick={handleRecoverPassword}
       />
@@ -94,6 +95,7 @@ RecoverPassword.propTypes = {
   }),
   usernameCustomLabel: PropTypes.string.isRequired,
   goToLoginCustomLabel: PropTypes.string.isRequired,
+  submitRecoverPasswordCustomLabel: PropTypes.string.isRequired,
 };
 
 RecoverPassword.defaultProps = {

diff --git a/src/components/RecoverPassword.test.js b/src/components/RecoverPassword.test.js
@@ -12,6 +12,7 @@ describe('the main wrapper', () => {
     username: '',
     usernameCustomLabel: 'Username',
     goToLoginCustomLabel: 'Login',
+    submitRecoverPasswordCustomLabel: 'Help me',
   };
   it('renders without crashing', () => {
     shallow(<RecoverPassword {...requiredMockProps} />);
@@ -26,14 +27,17 @@ describe('the main wrapper', () => {
   describe('with custom labels', () => {
     const customLabelUsername = 'email?';
     const customGoToLogin = 'Back to login';
+    const customSubmitRecover = 'Help me';
     const wrapper = shallow(
       <RecoverPassword
         {...requiredMockProps}
         usernameCustomLabel={customLabelUsername}
         goToLoginCustomLabel={customGoToLogin}
+        submitRecoverPasswordCustomLabel={customSubmitRecover}
       />,
     );
     it('should render custom labels if provided', () => {
+      expect(wrapper.find('input[name="submit-recover-password"]').prop('value')).toEqual(customSubmitRecover);
       expect(wrapper.find('input[name="username"]').prop('placeholder')).toEqual(customLabelUsername);
       expect(wrapper.find('#login-button').text()).toEqual(customGoToLogin);
     });

diff --git a/src/stories/index.js b/src/stories/index.js
@@ -95,5 +95,6 @@ storiesOf('React signup login component', module)
       goToLoginCustomLabel="Back up login"
       submitSignupCustomLabel="Custom send"
       goToSignupCustomLabel="Create account?"
+      submitRecoverPasswordCustomLabel="Help me!"
     />
   ));