diff options
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(); + }); }); }); |