summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web-ui/src/account_recovery/new_password_form/new_password_form.js6
-rw-r--r--web-ui/src/account_recovery/new_password_form/new_password_form.spec.js5
-rw-r--r--web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js6
-rw-r--r--web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js5
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.js11
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.spec.js4
-rw-r--r--web-ui/src/common/back_link/back_link.js15
-rw-r--r--web-ui/src/common/back_link/back_link.scss4
-rw-r--r--web-ui/src/common/back_link/back_link.spec.js37
9 files changed, 53 insertions, 40 deletions
diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.js b/web-ui/src/account_recovery/new_password_form/new_password_form.js
index 3c32df07..94e08997 100644
--- a/web-ui/src/account_recovery/new_password_form/new_password_form.js
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.js
@@ -41,11 +41,7 @@ export const NewPasswordForm = ({ t, previous }) => (
label={t('account-recovery.new-password-form.input-label2')}
/>
<SubmitButton buttonText={t('account-recovery.new-password-form.button')} />
- <BackLink
- text={t('account-recovery.back')}
- onClick={previous} onKeyDown={previous}
- role='button'
- />
+ <BackLink text={t('account-recovery.back')} onClick={previous} />
</form>
);
diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
index 2d326aea..ace238be 100644
--- a/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
@@ -37,9 +37,4 @@ describe('NewPasswordForm', () => {
newPasswordForm.find('BackLink').simulate('click');
expect(mockPrevious).toHaveBeenCalled();
});
-
- it('returns to previous step on key down', () => {
- newPasswordForm.find('BackLink').simulate('keyDown');
- expect(mockPrevious).toHaveBeenCalled();
- });
});
diff --git a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
index cfdcdc26..0df40a6e 100644
--- a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.js
@@ -42,11 +42,7 @@ export const UserRecoveryCodeForm = ({ t, previous, next }) => (
</div>
<InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
<SubmitButton buttonText={t('account-recovery.user-form.button')} />
- <BackLink
- text={t('account-recovery.back')}
- onClick={previous} onKeyDown={previous}
- role='button'
- />
+ <BackLink text={t('account-recovery.back')} onClick={previous} />
</form>
);
diff --git a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
index cb6998c8..6ecb22e4 100644
--- a/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
+++ b/web-ui/src/account_recovery/user_recovery_code_form/user_recovery_code_form.spec.js
@@ -44,9 +44,4 @@ describe('UserRecoveryCodeForm', () => {
userRecoveryCodeForm.find('BackLink').simulate('click');
expect(mockPrevious).toHaveBeenCalled();
});
-
- it('returns to previous step on key down', () => {
- userRecoveryCodeForm.find('BackLink').simulate('keyDown');
- expect(mockPrevious).toHaveBeenCalled();
- });
});
diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js
index 41637dab..49b0d19c 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -18,6 +18,7 @@
import React from 'react';
import { translate } from 'react-i18next';
import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
import './confirmation.scss';
@@ -29,12 +30,10 @@ export const Confirmation = ({ t }) => (
<form action='/'>
<SubmitButton buttonText={t('backup-account.confirmation.button')} type='submit' />
</form>
- <div className='link-content'>
- <a href='/backup-account' className='link'>
- <i className='fa fa-angle-left' aria-hidden='true' />
- <span>{t('backup-account.confirmation.retry-button')}</span>
- </a>
- </div>
+ <BackLink
+ href='/backup-account'
+ text={t('backup-account.confirmation.retry-button')}
+ />
</div>
);
diff --git a/web-ui/src/backup_account/confirmation/confirmation.spec.js b/web-ui/src/backup_account/confirmation/confirmation.spec.js
index 291d156d..7a6f38ca 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.spec.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.spec.js
@@ -20,10 +20,10 @@ describe('Confirmation', () => {
});
it('renders confirmation retry button', () => {
- expect(page.find('a').text()).toEqual('backup-account.confirmation.retry-button');
+ expect(page.find('BackLink').props().text).toEqual('backup-account.confirmation.retry-button');
});
it('retries button redirects to backup account', () => {
- expect(page.find('a').props().href).toEqual('/backup-account');
+ expect(page.find('BackLink').props().href).toEqual('/backup-account');
});
});
diff --git a/web-ui/src/common/back_link/back_link.js b/web-ui/src/common/back_link/back_link.js
index f3bdb2b5..bb5ffbea 100644
--- a/web-ui/src/common/back_link/back_link.js
+++ b/web-ui/src/common/back_link/back_link.js
@@ -19,12 +19,19 @@ import React from 'react';
import './back_link.scss';
+const icon = <i className='fa fa-angle-left' aria-hidden='true' />;
+
+const button = (text, options) => (
+ <button className='link' {...options}>{icon}<span>{text}</span></button>
+);
+
+const link = (text, options) => (
+ <a className='link' {...options}>{icon}<span>{text}</span></a>
+);
+
const BackLink = ({ text, ...other }) => (
<div className='link-content'>
- <a className='link' tabIndex='0' {...other}>
- <i className='fa fa-angle-left' aria-hidden='true' />
- <span>{text}</span>
- </a>
+ { other.href ? link(text, other) : button(text, other) }
</div>
);
diff --git a/web-ui/src/common/back_link/back_link.scss b/web-ui/src/common/back_link/back_link.scss
index a799a710..5541d9d9 100644
--- a/web-ui/src/common/back_link/back_link.scss
+++ b/web-ui/src/common/back_link/back_link.scss
@@ -21,6 +21,10 @@
color: $dark_blue;
font-style: italic;
font-size: 0.8em;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: transparent;
.fa {
font-size: 1.6em;
diff --git a/web-ui/src/common/back_link/back_link.spec.js b/web-ui/src/common/back_link/back_link.spec.js
index ee659267..5f49a6f9 100644
--- a/web-ui/src/common/back_link/back_link.spec.js
+++ b/web-ui/src/common/back_link/back_link.spec.js
@@ -4,17 +4,38 @@ import React from 'react';
import BackLink from 'src/common/back_link/back_link';
describe('BackLink', () => {
- let backLink;
+ context('as link', () => {
+ let backLink;
- beforeEach(() => {
- backLink = shallow(<BackLink text='Back to inbox' href='/' />);
- });
+ beforeEach(() => {
+ backLink = shallow(<BackLink text='Back to inbox' href='/' />);
+ });
+
+ it('renders link with text', () => {
+ expect(backLink.find('a').text()).toEqual('Back to inbox');
+ });
- it('renders link with text', () => {
- expect(backLink.find('a').text()).toEqual('Back to inbox');
+ it('adds link action', () => {
+ expect(backLink.find('a').props().href).toEqual('/');
+ });
});
- it('adds link action', () => {
- expect(backLink.find('a').props().href).toEqual('/');
+ context('as button', () => {
+ let backLink;
+ let mockClick;
+
+ beforeEach(() => {
+ mockClick = expect.createSpy();
+ backLink = shallow(<BackLink text='Back to inbox' onClick={mockClick} />);
+ });
+
+ it('renders button with text', () => {
+ expect(backLink.find('button').text()).toEqual('Back to inbox');
+ });
+
+ it('adds button click event', () => {
+ backLink.find('button').simulate('click');
+ expect(mockClick).toHaveBeenCalled();
+ });
});
});