Skip to content

Commit

Permalink
Merge branch 'end-to-end' of https://github.com/ONSdigital/eq-prototypes
Browse files Browse the repository at this point in the history 
 into end-to-end
  • Loading branch information
@boxadesign
boxadesign committed May 5, 2020
2 parents aea7373 + 78cb4e4 commit 8e31f07
Show file tree
Hide file tree
Showing 101 changed files with 374 additions and 385 deletions.
18 changes: 9 additions & 9 deletions _prototypes/end-to-end/adding-another-person.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@
<div class="feedback__border">
</div>
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has <span class="js-piping">{x} error{s}</span></div>
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no"><div class="panel__header">
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div></div>
<div class="panel__body">
<p class="js-piping">This <strong>must be corrected</strong> to continue</p>

<ol class="list list--bare">
<li class="list__item js-first-name u-d-no">
1. <a href="#first-name" class="list__link js-inpagelink">
Enter a first name
Enter a first name to continue
</a>
</li>
<li class="list__item js-last-name u-d-no">
<span class="js-piping">2</span>. <a href="#last-name" class="list__link js-inpagelink">
Enter a last name
Enter a last name to continue
</a>
</li>
</ol>
Expand Down Expand Up @@ -78,7 +78,7 @@
First name
</span>
</label>
<input autocomplete="new-password" required data-error-msg="Enter a first name" class="input input--text"
<input autocomplete="new-password" required data-error-msg="Enter a first name to continue" class="input input--text"
id="first-name"
data-qa="input-text" value=""/>
</p>
Expand All @@ -104,7 +104,7 @@
Last name
</span>
</label>
<input autocomplete="new-password" required data-error-msg="Enter a last name" class="input input--text"
<input autocomplete="new-password" required data-error-msg="Enter a last name to continue" class="input input--text"
id="last-name"
data-qa="input-text" value=""/>
</p>
Expand Down
25 changes: 25 additions & 0 deletions _prototypes/end-to-end/assets/personal-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1228,3 +1228,28 @@ export function clearPersonalBookmark(personId) {

return details;
}

export function setProxy(personId, proxy) {
return changeDetailsFor(personId, () =>
({
proxy
}));
}

export function getProxyFor(personId) {
if (getPersonalDetailsFor(personId)) {
return getPersonalDetailsFor(personId)['proxy'];
}
}

export function clearProxy(personId) {
let details = getPersonalDetailsFor(personId);

delete details.proxy;

updatePersonalDetails(personId, {
...details
});

return details;
}
58 changes: 13 additions & 45 deletions _prototypes/end-to-end/bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,10 @@ import {
personalBookmark,
getBookmarkFor,
clearPersonalBookmark,
personalQuestionSubmitDecorator
personalQuestionSubmitDecorator,
setProxy,
getProxyFor,
clearProxy
} from './assets/personal-details';

import { removeFromList, trailingNameS } from './assets/utils';
Expand Down Expand Up @@ -348,7 +351,7 @@ function updatePersonLink() {
person = getHouseholdMemberByPersonId(personId)['@person'],
pinObj = getPinFor(personId),
secureLinkTextConfig = secureLinkTextMap[
(getAnsweringIndividualByProxy() ? 'question-proxy' : (pinObj && pinObj.pin ? 'pin-you' : 'question-you'))
(getProxyFor(personId) ? 'question-proxy' : (pinObj && pinObj.pin ? 'pin-you' : 'question-you'))
],
linkHref = secureLinkTextConfig.link + '?person_id=' + personId +
'&returnurl=' + window.location.pathname,
Expand All @@ -368,40 +371,6 @@ function updatePersonLink() {
}
}

function updateBySurveyType() {
const urlParams = new URLSearchParams(window.location.search),
surveyType = urlParams.get('survey');

// if (surveyType) {
// $('.js-header-title').html(surveyTypeConfig[surveyType].title);
// $('#people-living-here').html(surveyTypeConfig[surveyType].householdSectionTitle);
// $('#people-living-here').attr('href', surveyTypeConfig[surveyType].householdSectionLink);
// $('#relationships-section').attr('href', surveyTypeConfig[surveyType].relationshipsSection);
// $('title').html(surveyTypeConfig[surveyType].title);
// }
}

function setAnsweringIndividualByProxy(bool) {
sessionStorage.setItem(INDIVIDUAL_PROXY_STORAGE_KEY, JSON.stringify(bool));
}

function getAnsweringIndividualByProxy() {
return JSON.parse(sessionStorage.getItem(INDIVIDUAL_PROXY_STORAGE_KEY));
}

function unsetAnsweringIndividualByProxy() {
(getAnsweringIndividualByProxy() !== null) && sessionStorage.removeItem(INDIVIDUAL_PROXY_STORAGE_KEY);
}

const surveyTypeConfig = {
lms: {
title: 'Online Household Study',
householdSectionTitle: 'About your household',
householdSectionLink: '../summary/?survey=lms',
relationshipsSection: '../relationships/?survey=lms'
}
};

function doILiveHere() {
return sessionStorage.getItem('lives-here') === 'yes';
}
Expand Down Expand Up @@ -567,6 +536,7 @@ function validateInputs(testFails, selector) {
errorMsg = input.getAttribute('data-error-msg');

if (input.value === testFails || testFails === true) {
window.scrollTo(0, 0);
hasErrors = true;
if (!listItem.classList.contains('js-visible')) {
errorBox.classList.remove('u-d-no');
Expand Down Expand Up @@ -606,13 +576,12 @@ function calcErrors() {

pipingDestinations.forEach(function(pipingDestination) {
pipingDestination.innerText = pipingDestination.innerText
.replace('{x}', errors)
.replace('{x}', errors === 1 ? '' : '1')
.replace('{x}', errors > 1 ? '2' : '')
.replace('is a', errors > 1 ? 'are' : 'is a')
.replace('{s}', errors > 1 ? 's' : '')
.replace('errors', errors === 1 ? 'error' : 'errors')
.replace('2', errors === 1 ? "1" : "2")
.replace('1', errors > 1 ? "2" : "1")
.replace('This', errors > 1 ? "These" : "This")
.replace('These', errors === 1 ? "This" : "These");
.replace('1', errors > 1 ? "2" : "1");
});
}

Expand Down Expand Up @@ -771,9 +740,9 @@ window.ONS.storage = {
clearPersonalBookmark,
personalQuestionSubmitDecorator,

setAnsweringIndividualByProxy,
getAnsweringIndividualByProxy,
unsetAnsweringIndividualByProxy,
setProxy,
getProxyFor,
clearProxy,

doILiveHere,
isMemberUser,
Expand Down Expand Up @@ -822,7 +791,6 @@ $(updateAddresses);
$(updatePersonLink);
$(tools);
$(updateAllLinks);
$(updateBySurveyType);
$(updateSignificantDate);
$(updateHouseholdSummary);
$(updateVisitorsSummary);
Expand Down
18 changes: 9 additions & 9 deletions _prototypes/end-to-end/change-visitors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,21 @@
<div class="feedback__border">
</div>
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has <span class="js-piping">{x} error{s}</span></div>
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no"><div class="panel__header">
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div></div>
<div class="panel__body">
<p class="js-piping">This <strong>must be corrected</strong> to continue</p>

<ol class="list list--bare">
<li class="list__item js-first-name u-d-no">
1. <a href="#first-name" class="list__link js-inpagelink">
Enter a first name
Enter a first name to continue
</a>
</li>
<li class="list__item js-last-name u-d-no">
<span class="js-piping">2</span>. <a href="#last-name" class="list__link js-inpagelink">
Enter a last name
Enter a last name to continue
</a>
</li>
</ol>
Expand Down Expand Up @@ -84,7 +84,7 @@
First name
</span>
</label>
<input autocomplete="new-password" required data-error-msg="Enter a first name" class="input input--text"
<input autocomplete="new-password" required data-error-msg="Enter a first name to continue" class="input input--text"
id="first-name"
data-qa="input-text" value=""/>
</p>
Expand All @@ -97,7 +97,7 @@
Last name
</span>
</label>
<input autocomplete="new-password" required data-error-msg="Enter a last name" class="input input--text"
<input autocomplete="new-password" required data-error-msg="Enter a last name to continue" class="input input--text"
id="last-name"
data-qa="input-text" value=""/>
</p>
Expand Down
6 changes: 4 additions & 2 deletions _prototypes/end-to-end/complete--confirmation-resend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,12 @@
<main role="main" id="main" class="page__main">
<div class="panel panel--error js-error-box u-mb-m u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has an error</div>
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div>
</div>
<div class="panel__body">
<p class="u-fs-r">This must be corrected to continue</p>

<ul class="list list--bare">
<li class="list__item u-fs-r">
1. <a class="js-inpagelink" href="#panel-error">Enter a valid email address, such as [email protected]</a>
Expand Down
6 changes: 4 additions & 2 deletions _prototypes/end-to-end/complete.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,12 @@
<main role="main" id="main" class="page__main">
<div class="panel panel--error js-error-box u-mb-m u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has an error</div>
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div>
</div>
<div class="panel__body">
<p class="u-fs-r">This must be corrected to continue</p>

<ul class="list list--bare">
<li class="list__item u-fs-r">
1. <a class="js-inpagelink" href="#panel-error">Enter a valid email address, such as [email protected]</a>
Expand Down
12 changes: 6 additions & 6 deletions _prototypes/end-to-end/confirm-address.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has
<span class="js-piping">{x} error{s}</span>
</div>
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div>
</div>
<div class="panel__body">
<p class="js-piping">This <strong>must be corrected</strong> to continue</p>

<ol class="list list--bare">
<li class="list__item js-address-correct-yes u-d-no">
1. <a href="#radios" class="list__link js-inpagelink">
Select an option
Select an answer to continue
</a>
</li>
</ol>
Expand All @@ -61,7 +61,7 @@ <h1 class="question__title u-fs-xl">
<fieldset>
<div class="field__item js-focusable-box">
<input required autocomplete="new-password" class="input input--radio js-focusable" type="radio"
name="address-correct" id="address-correct-yes" data-error-msg="Select an answer">
name="address-correct" id="address-correct-yes" data-error-msg="Select an answer to continue">
<label class="label label--inline" for="address-correct-yes">Yes, this address is correct</label>
</div>

Expand Down
12 changes: 6 additions & 6 deletions _prototypes/end-to-end/do-you-live-here.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has
<span class="js-piping">{x} error{s}</span>
</div>
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div>
</div>
<div class="panel__body">
<p class="js-piping">This <strong>must be corrected</strong> to continue</p>

<ol class="list list--bare">
<li class="list__item js-yes u-d-no">
1. <a href="#radios" class="list__link js-inpagelink">
Select an option
Select an answer to continue
</a>
</li>
</ol>
Expand Down Expand Up @@ -74,7 +74,7 @@ <h3 class="collapsible__title js-collapsible-title icon--collapsible-simple u-fs
type="radio"
name="live-here"
id="yes"
data-error-msg="Select an answer">
data-error-msg="Select an answer to continue">
<label class="label label--inline"
for="yes">
Yes, I usually live here
Expand Down
12 changes: 6 additions & 6 deletions _prototypes/end-to-end/does-anyone-else-live-here.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,16 @@
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has
<span class="js-piping">{x} error{s}</span>
</div>
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div>
</div>
<div class="panel__body">
<p class="js-piping">This <strong>must be corrected</strong> to continue</p>

<ol class="list list--bare">
<li class="list__item js-yes-someone-else u-d-no">
1. <a href="#radios" class="list__link js-inpagelink">
Select an option
Select an answer to continue
</a>
</li>
</ol>
Expand Down Expand Up @@ -83,7 +83,7 @@
name="does-anyone-else-live-here"
id="yes-someone-else"
value="Yes"
data-error-msg="Select an answer">
data-error-msg="Select an answer to continue">
<label class="label label--inline venus"
for="yes-someone-else"
id="yes-someone-else-label">
Expand Down
12 changes: 6 additions & 6 deletions _prototypes/end-to-end/household-accom-own-rent.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@
</div>
<div class="panel panel--error u-mb-m js-error-box u-d-no">
<div class="panel__header">
<div class="panel__title u-fs-r--b">This page has
<span class="js-piping">{x} error{s}</span>
</div>
<div class="panel__title u-fs-r--b">There
<span class="js-piping">is a {x} problem{s}</span> with your answer
</div>
</div>
<div class="panel__body">
<p class="js-piping">This <strong>must be corrected</strong> to continue</p>

<ol class="list list--bare">
<li class="list__item js-owns u-d-no">
1. <a href="#radios" class="list__link js-inpagelink">
Select an option
Select an answer to continue
</a>
</li>
</ol>
Expand All @@ -56,7 +56,7 @@
<div class="field field--radio field--multiplechoice">
<fieldset id="ownsRadios">
<div class="field__item js-focusable-box">
<input required autocomplete="new-password" data-error-msg="Select an option" class="input input--radio js-focusable"
<input required autocomplete="new-password" data-error-msg="Select an answer to continue" class="input input--radio js-focusable"
type="radio"
name="own-rent"
id="owns"
Expand Down
Loading

0 comments on commit 8e31f07

Please sign in to comment.