Updated UAC page and proto branding

ONSdigital · Feb 19, 2020 · bc87d36 · bc87d36
1 parent 43b83cf
commit bc87d36
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 76 deletions.
diff --git a/_prototypes/individual-response--your-household-v15/assets/modules/uac/uac.css b/_prototypes/individual-response--your-household-v15/assets/modules/uac/uac.css
@@ -0,0 +1,18 @@
+.uac__field {
+    display: inline-block;
+    position: relative;
+}
+
+.uac__input {
+  height: 100%;
+  font-family: monospace;
+  font-weight: bold;
+  width: 14.9em !important;
+  max-width: 14.9em;
+  font-size: 24px;
+  letter-spacing: 0.14em;
+}
+
+.uac__security {
+  display: flex;
+}
diff --git a/_prototypes/individual-response--your-household-v15/assets/modules/uac/uac.js b/_prototypes/individual-response--your-household-v15/assets/modules/uac/uac.js
@@ -0,0 +1,34 @@
+export default class UAC {
+  constructor(context) {
+    this.input = context;
+    const groupSize = parseInt(context.getAttribute('data-group-size'), 10);
+    this.groupingRegex = new RegExp(`.{1,${groupSize}}`, 'g');
+
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    this.input.addEventListener('input', this.handleInput.bind(this));
+  }
+
+  handleInput() {
+    const cursorPosition = this.input.selectionStart;
+    const shouldRepositionCursor = cursorPosition !== this.input.value.length;
+
+    this.input.value = (this.input.value.replace(/\s/g, '').match(this.groupingRegex) || []).join(' ');
+
+    if (shouldRepositionCursor) {
+      this.input.setSelectionRange(cursorPosition, cursorPosition);
+    }
+  }
+}
+
+function runUAC() {
+  const uacInputs = [...document.querySelectorAll('.js-uac')];
+
+  if (uacInputs.length) {
+    uacInputs.forEach(element => new UAC(element));
+  }
+}
+
+document.addEventListener('UAC-READY', runUAC);
diff --git a/_prototypes/individual-response--your-household-v15/bundle.js b/_prototypes/individual-response--your-household-v15/bundle.js
@@ -13,6 +13,7 @@ import './assets/lib/abortcontroller-polyfill';
  * DOM modules
  */
 import './assets/modules/typeahead-refactored/typeahead.module';
+import './assets/modules/uac/uac';
 
 import {
   RELATIONSHIPS_STORAGE_KEY,

diff --git a/_prototypes/individual-response--your-household-v15/index.html b/_prototypes/individual-response--your-household-v15/index.html
@@ -7,58 +7,8 @@
 hideSaveLater: true
 ---
 
-<style>
-    .lock {
-        font-weight : normal;
-        font-size: 1rem;
-        margin-top:1em;
-    }
-
-    .uac-border {
-        display: inline-block;
-        border-style: solid;
-        border-width: 0.4em;
-        border-color: #033e58;
-        padding: 0.7em;
-    }
-
-    .uac__input {
-        width: 14.9em!important;
-        max-width: 14.9em;
-        font-family: monospace;
-        font-weight: bold;
-        font-size: 24px;
-        text-transform: uppercase;
-        letter-spacing: .35rem;
-    }
-
-    p {
-        margin-bottom: 0.3em;
-    }
-
-    .label {
-        margin-bottom: 0;
-    }
-
-    .label__description {
-        font-size: .77777778rem;
-        font-weight: normal;
-    }
-
-    .textbox-div {
-        display: flex;
-    }
-
-    .textbox-space {
-        margin-right: 1em;
-    }
-
-    .input-length { 
-        width: 9.2rem !important; 
-    }
-</style>
-
 <link rel="stylesheet" href="../style.css"/>
+<link rel="stylesheet" href="../assets/modules/uac/uac.css"/>
 <div class="page__subheader">
 </div>
 
@@ -89,30 +39,29 @@
                                 data-qa="question-title">
                                 Start census
                             </h1>
-
-                            <div class = "uac-border">
-                                <p class="field">
-                                    <label class="label" for="uac">Enter your household access code printed on the letter
-                                        <span class="label__description">Keep this code safe and only share it with others in your household</span>
-                                    </label>
-                                    <input autocomplete="new-password" type="text" id="uac" class="input input--text input-type__input uac__input js-uac" name="uac" maxlength="19" data-group-size="4" autocomplete="new-password" />
-                                </p>
+                            <p class="field uac__field panel panel--branded panel--simple">
+                                <label class="label" for="uac">Enter the 16 character code printed on the letter
+                                    <br>
+                                    <span class="label__description">Keep this code safe and only share it with others in your household</span>
+                                </label>
+                                <input type="text" id="uac" class="input input--text input-type__input  uac__input js-uac" name="uac" maxlength="19" data-group-size="4" autocomplete="off" />
+                            </p>
+                            <div class="uac__security u-mt-m">
+                                <div class="uac__icon"><span class="icon icon--lock"></span></div>
+                                <p class="uac__message">Your personal information is protected by law and will be kept confidential.</p>
                             </div>
-                            <p class="lock">Your personal information is protected by law and will be kept confidential.</p>
+                            <button class="btn btn-submit btn--primary btn--lg"
+                                    data-qa="btn-submit" type="submit"
+                                    name="action[save_continue]">Access census
+                            </button>                        
                         </div>
                     </div>
-                </div>
-                <br>
-                <button class="btn btn-submit btn--primary btn--lg"
-                        data-qa="btn-submit" type="submit"
-                        name="action[save_continue]">Access census
-                </button>
-                <div>
-                <br>
-                    <strong>If you don't have a code</strong>
-                    <p>You can request a new code if you have lost, forgotten or not received an
-                    access code. <a href="#" class="footer2__link">Request a new code to start a new survey</a></p>
-                </div>
+                    <div>
+                        <br>
+                        <strong>If you don't have a code</strong>
+                        <p>You can request a new code if you have lost, forgotten or not received an
+                        access code. <a href="#" class="footer2__link">Request a new code to start a new survey</a></p>
+                    </div>
             </main>
         </div>
     </div>
@@ -121,6 +70,8 @@
 <script src='/js/compiled/individual-response--your-household-v15/bundle.js'></script>
 
 <script>
+  document.dispatchEvent(new CustomEvent('UAC-READY'));
+
   $('.btn-submit').click(function(e) {
     e.preventDefault();
 

diff --git a/_prototypes/individual-response--your-household-v15/style.css b/_prototypes/individual-response--your-household-v15/style.css
@@ -180,6 +180,11 @@ p.js-declaration {
     display: block;
 }
 
+.panel--branded {
+    background-color: rgba(227,77,219,.15);
+    border-color: #93328e;
+}
+
 .question {
     margin-bottom: 0;
 }
@@ -510,6 +515,10 @@ hr {
   margin-bottom : 0;
 }
 
+.header__main {
+    background: #93328e;
+}
+
 .lock {
     padding-left : 1.5rem;
     background : url('../img/icons/lockicon.svg') no-repeat left top;

diff --git a/css/fixed.css b/css/fixed.css
diff --git a/css/main.css b/css/main.css
diff --git a/css/responsive.css b/css/responsive.css