diff --git a/_prototypes/individual-response--your-household-v15/assets/modules/character-check.js b/_prototypes/individual-response--your-household-v15/assets/modules/character-check.js new file mode 100644 index 0000000000..2d5517aaab --- /dev/null +++ b/_prototypes/individual-response--your-household-v15/assets/modules/character-check.js @@ -0,0 +1,59 @@ +const inputClassLimitReached = 'input--limit-reached'; +const remainingClassLimitReached = 'input__limit--reached'; +const attrCharCheckRef = 'data-char-check-ref'; +const attrCharCheckVal = 'data-char-check-num'; + +class CharCheck { + constructor(context) { + this.context = context; + this.input = this.context.querySelector('input'); + this.checkElement = document.getElementById(this.input.getAttribute(attrCharCheckRef)); + this.checkVal = this.input.getAttribute(attrCharCheckVal); + + this.charLimitSingularMessage = this.checkElement.getAttribute('data-charcount-limit-singular'); + this.charLimitPluralMessage = this.checkElement.getAttribute('data-charcount-limit-plural'); + + this.updateCheckReadout(null, true); + this.input.addEventListener('input', this.updateCheckReadout.bind(this)); + } + + updateCheckReadout(event, firstRun) { + const value = this.input.value; + const remaining = this.checkVal - value.length; + // Prevent aria live announcement when component initialises + if (!firstRun && event.inputType) { + this.checkElement.setAttribute('aria-live', 'polite'); + } else { + this.checkElement.removeAttribute('aria-live'); + } + + this.checkRemaining(remaining); + this.setCheckClass(remaining, this.input, inputClassLimitReached); + this.setCheckClass(remaining, this.checkElement, remainingClassLimitReached); + } + + checkRemaining(remaining) { + let message; + if (remaining === -1) { + message = this.charLimitSingularMessage; + this.checkElement.innerText = message.replace('{x}', Math.abs(remaining)); + } else if (remaining < -1) { + message = this.charLimitPluralMessage; + this.checkElement.innerText = message.replace('{x}', Math.abs(remaining)); + } + this.setShowMessage(remaining); + } + + setShowMessage(remaining) { + this.checkElement.classList[remaining < 0 ? 'remove' : 'add']('u-d-no'); + } + + setCheckClass(remaining, element, setClass) { + element.classList[remaining < 0 ? 'add' : 'remove'](setClass); + } +} + +const checkedWrapper = [...document.querySelectorAll('.js-char-check')]; +if (checkedWrapper.length) { + checkedWrapper.forEach(input => new CharCheck(input)); +} \ No newline at end of file diff --git a/_prototypes/individual-response--your-household-v15/bundle.js b/_prototypes/individual-response--your-household-v15/bundle.js index a8b2c3d783..8e96eaee2b 100644 --- a/_prototypes/individual-response--your-household-v15/bundle.js +++ b/_prototypes/individual-response--your-household-v15/bundle.js @@ -15,6 +15,7 @@ import "regenerator-runtime/runtime"; */ import './assets/modules/typeahead/typeahead'; import './assets/modules/uac/uac'; +import './assets/modules/character-check'; import { RELATIONSHIPS_STORAGE_KEY, @@ -512,7 +513,7 @@ function fieldItemDisplayHack() { $('.field__item').after('
'); } -function validateInputs() { +function validateInputs(testFails) { var inputs = Array.from(document.querySelectorAll('.input')); inputs .filter(function(input) { return input.required }) @@ -523,7 +524,7 @@ function validateInputs() { field = input.closest('.field'), errorMsg = input.getAttribute('data-error-msg'); - if (input.value === '') { + if (input.value === testFails || testFails === true) { hasErrors = true; if (!listItem.classList.contains('js-visible')) { errorBox.classList.remove('u-d-no'); diff --git a/_prototypes/individual-response--your-household-v15/complete copy.html b/_prototypes/individual-response--your-household-v15/complete copy.html new file mode 100644 index 0000000000..2082cb5331 --- /dev/null +++ b/_prototypes/individual-response--your-household-v15/complete copy.html @@ -0,0 +1,116 @@ +--- +title: IR - Household prototype v15 +project: Individual Response +globalcss: false +layout: eq-default-extras +assetPrefixUrl: https://sdc-global-design-patterns.netlify.com +hideSaveLater: true +--- + + +
+ + +
+
+
+
+ +
+
+
+
+
+
+
+
+

+ Your census has been submitted +

+

Thank you for completing the census. + We have received your answers and you do not need to do anything else.

+

Your confirmation number

+ 1098 5379 24 +
+
+

Your personal information is protected by law and will be kept confidential.

+

Send this confirmation to an email address

+

If you would like confirmation of your completed census please provide a valid email address.

+
+
+ + +
+ +
+
+

Share

+

Let others know you've completed the census

+ + +
+
+
+
+ + + + diff --git a/_prototypes/individual-response--your-household-v15/complete--confirmation-resend.html b/_prototypes/individual-response--your-household-v15/complete--confirmation-resend.html new file mode 100644 index 0000000000..df938395a2 --- /dev/null +++ b/_prototypes/individual-response--your-household-v15/complete--confirmation-resend.html @@ -0,0 +1,134 @@ +--- +title: IR - Household prototype v15 +project: Individual Response +globalcss: false +layout: eq-default-extras +assetPrefixUrl: https://sdc-global-design-patterns.netlify.com +hideSaveLater: true +--- + + +
+ + +
+
+
+
+ +
+
+
+
+
+
+
+
+
This page has an error
+
+
+

This must be corrected to continue

+ +
+
+

Send another confirmation email

+ +
+
+ + +
+ +
+ +
+
+
+
+ + + + diff --git a/_prototypes/individual-response--your-household-v15/complete--confirmation-sent.html b/_prototypes/individual-response--your-household-v15/complete--confirmation-sent.html index 9676763f6a..adada32bc9 100644 --- a/_prototypes/individual-response--your-household-v15/complete--confirmation-sent.html +++ b/_prototypes/individual-response--your-household-v15/complete--confirmation-sent.html @@ -56,35 +56,14 @@
-

- Confirmation email sent +

+ A confirmation email has been sent to {x}

-

An email confirming you have completed your census has been sent to {x}

-

Share

-

Let others know you've done your census.

- -
- - - -
-
-
-
- -
-
+

Didn't receive an email?

+

It can take a few minutes for the email to arrive. If it doesn't arrive, you can send another confirmation email.

+
diff --git a/_prototypes/individual-response--your-household-v15/complete.html b/_prototypes/individual-response--your-household-v15/complete.html index efb536f33e..664afd6c94 100644 --- a/_prototypes/individual-response--your-household-v15/complete.html +++ b/_prototypes/individual-response--your-household-v15/complete.html @@ -55,28 +55,52 @@
+
+
+
This page has an error
+
+
+

This must be corrected to continue

+ +
+
-

- Thank you for submitting your census +

+ Your census has been submitted

-

We have received your answers and you do not need to do anything else.

+

Thank you for completing the census. + We have received your answers and you do not need to do anything else.

+

Your confirmation number

+ 1098 5379 24
-

If you would like confirmation sent to you, enter your email address.

+

Your personal information is protected by law and will be kept confidential

+

Get confirmation email

+

If you would like to be sent confirmation that you have completed your census, enter your email address.

-

- - -

+ +
+ + +
+
-

Your personal information is protected by law and will be kept confidential.

-
+
@@ -92,15 +117,32 @@

Share

diff --git a/_prototypes/individual-response--your-household-v15/index.html b/_prototypes/individual-response--your-household-v15/index.html index f8246a9eb6..402ec28d4b 100644 --- a/_prototypes/individual-response--your-household-v15/index.html +++ b/_prototypes/individual-response--your-household-v15/index.html @@ -61,15 +61,15 @@

If you don't have a household access code

You can request a new household access code to start a new census if you have lost or not received an access code.

- + diff --git a/_prototypes/individual-response--your-household-v15/individual-decision-answer-behalf.html b/_prototypes/individual-response--your-household-v15/individual-decision-answer-behalf.html index c639bd704b..bf2f5c317c 100644 --- a/_prototypes/individual-response--your-household-v15/individual-decision-answer-behalf.html +++ b/_prototypes/individual-response--your-household-v15/individual-decision-answer-behalf.html @@ -63,9 +63,8 @@

Is there anyone in your type="submit" name="">Save and continue - + + + + + + + + + + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

--> + return to this question later

-->