Merge pull request nhsuk-archive#48 from nhsuk/CSSE-tool

Csse tool
unboxed · Feb 10, 2022 · 03ac4db · 03ac4db
2 parents 6b1fe8d + d5057e4
commit 03ac4db
Show file tree

Hide file tree

Showing 17 changed files with 2,177 additions and 1,730 deletions.
diff --git a/app/assets/javascript/add-letter-code-list.js b/app/assets/javascript/add-letter-code-list.js
@@ -14,11 +14,11 @@ letterCodeButton.addEventListener('click', addNumberTolist);
 
 //Function to save the nhs number and spit it back out above
 function addNumberTolist() {
-  if(document.getElementById('autocomplete-customTemplates').value != "") {
-    var number = document.getElementById('autocomplete-customTemplates').value; // get value of whats inside the box
+  if(document.getElementById('letter-codes-autocomplete').value != "") {
+    var number = document.getElementById('letter-codes-autocomplete').value; // get value of whats inside the box
     var letterCodelength = letterCodes.push(number) //adds it to the array + adds to new variable
     letterCodelist.innerHTML+="<li id='letter-code-"+letterCodelength+"'name='letter-code-data' value='{{ data['letter-code-data'] }}'><strong>"+number+"</strong> <span class='nhsuk-body-s' style='display: inline; text-decoration: underline; margin-left:6px'><a class='remove-link' href='javascript:removeNumberFromList("+letterCodelength+")'> Remove </a> </span> </li>" //spit it back out (with some added extras)
-    document.getElementById('autocomplete-customTemplates').value="" // clears the box for the next input
+    document.getElementById('letter-codes-autocomplete').value="" // clears the box for the next input
   }
 
 }

diff --git a/app/assets/javascript/add-result-code-list.js b/app/assets/javascript/add-result-code-list.js
@@ -7,9 +7,6 @@
 //Define empty array where NHS numbers will live when entered
 var resultCode = []
 //Define variables and helps the html talk to the javascript
-var resultCodeinput = document.getElementById('result-code-result')
-var hpvCodeinput = document.getElementById('result-code-hpv')
-var actionCodeinput = document.getElementById('result-code-action')
 var resultCodelist = document.getElementById('result-code-list')
 var resultCodeButton = document.getElementById('add-result-code')
 
@@ -18,6 +15,9 @@ resultCodeButton.addEventListener('click', addNumberTolist);
 
 //Function to save the nhs number and spit it back out above
 function addNumberTolist() {
+  var resultCodeinput = document.getElementById('result-code-result-autocomplete')
+  var hpvCodeinput = document.getElementById('result-code-hpv-autocomplete')
+  var actionCodeinput = document.getElementById('result-code-action-autocomplete')
   var rCode = resultCodeinput.value; // get value of whats inside the box of Result input
   var hCode = hpvCodeinput.value; // get value of whats inside the box of HPV input
   var aCode = actionCodeinput.value; // get value of whats inside the box of result input

diff --git a/app/assets/javascript/add-sender-code-list.js b/app/assets/javascript/add-sender-code-list.js
@@ -7,7 +7,6 @@
 //Define empty array where NHS numbers will live when entered
 var senderCodes = []
 //Define variables and helps the html talk to the javascript
-var senderCodeinput = document.getElementById('sender-code-input')
 var senderCodelist = document.getElementById('sender-code-list')
 var senderCodeButton = document.getElementById('add-sender-code')
 
@@ -16,6 +15,7 @@ senderCodeButton.addEventListener('click', addNumberTolist);
 
 //Function to save the nhs number and spit it back out above
 function addNumberTolist() {
+  var senderCodeinput = document.getElementById('sender-code-input-autocomplete')
   var number = senderCodeinput.value; // get value of whats inside the box
   var senderCodelength = senderCodes.push(number) //adds it to the array
   senderCodelist.innerHTML+="<li id='sender-code-"+senderCodelength+"'><strong>"+number+"</strong> <span class='nhsuk-body-s' style='display: inline; text-decoration: underline; margin-left:6px'><a class='remove-link' href='javascript:removeNumberFromList("+senderCodelength+")'> Remove </a> </span> </li>" //spit it back out (with some added extras)

diff --git a/app/assets/javascript/suggestionDropdown.js b/app/assets/javascript/suggestionDropdown.js
@@ -0,0 +1,39 @@
+
+const createSuggestionDropdown = (data, elementId) => {
+    function customSuggest(query, syncResults) {
+      const results = data;
+      syncResults(
+        query
+          ? results.filter(function (result) {
+              var codeContains =
+                result.code.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+              var resultNameContains =
+                result.name.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+              return codeContains || resultNameContains;
+            })
+          : []
+      );
+    }
+
+    function inputValueTemplate(result) {
+      return result && result.code;
+    }
+
+    function suggestionTemplate(result) {
+      return result && `<div class="nhsuk-u-font-weight-bold autocomplete__option-code">${result.code}</div><div class="autocomplete__option-name">${result.name}</div>`;
+    }
+
+    const element = document.querySelector(`#${elementId}`);
+    const id = `${elementId}-autocomplete`;
+    accessibleAutocomplete({
+      element: element,
+      id: id,
+      name: elementId,
+      displayMenu: 'overlay',
+      source: customSuggest,
+      templates: {
+        inputValue: inputValueTemplate,
+        suggestion: suggestionTemplate,
+      },
+    });
+}
diff --git a/app/assets/sass/components/_autocomplete.scss b/app/assets/sass/components/_autocomplete.scss
@@ -2,166 +2,145 @@
 // COMPONENTS / AUTOCOMPLETE
 // ==========================================================================
 
-// needed to add a further wrapper as this 
+// needed to add a further wrapper as this
 
-.codecomplete {
-  .autocomplete__wrapper {
-    position: relative;
-    border-radius: 4px;
-    background-color: $color_nhsuk-white;
-  }
-
-  .autocomplete__hint,
-  .autocomplete__input {
-    background-color: $color_nhsuk-white;
-    border-radius: 4px;
-    height: 40px;
-    font-size: 17px;
-    line-height: 1.5;
-    -webkit-appearance: none;
-    border: 2px solid #4c6272;
-    border-radius: 0;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    margin-bottom: 0;
-    width: 100%;
-  }
-
-  .autocomplete__input {
-    background-color: transparent;
-    position: relative;
-  }
-
-  .autocomplete__hint {
-    color: #bfc1c3;
-    position: absolute;
-  }
-
-  .autocomplete__input--default {
-    padding: 8px;
-  }
-
-  .autocomplete__input--focused {
-    outline-offset: 0;
-    outline: 3px solid #ffeb3b;
-  }
-
-  .autocomplete__input--show-all-values {
-    padding: 4px 34px 4px 4px;
-    cursor: pointer;
-  }
-
-  .autocomplete__dropdown-arrow-down {
-    z-index: -1;
-    display: inline-block;
-    position: absolute;
-    right: 8px;
-    width: 24px;
-    height: 24px;
-    top: 10px;
-  }
-
+.autocomplete__wrapper {
+  position: relative;
+}
+.autocomplete__hint,
+.autocomplete__input {
+  @extend .nhsuk-input;
+  @extend .nhsuk-input--width-10;
+}
+.autocomplete__input {
+  background-color: white;
+  position: relative;
+}
+.autocomplete__hint {
+  color: #b1b4b6;
+  position: absolute;
+}
+.autocomplete__input--default {
+  padding: 5px;
+}
+.autocomplete__input--show-all-values {
+  padding: 5px 34px 5px 5px;
+  cursor: pointer;
+}
+.autocomplete__dropdown-arrow-down {
+  z-index: -1;
+  display: inline-block;
+  position: absolute;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  top: 10px;
+}
+.autocomplete__menu {
+  background-color: #fff;
+  border: 2px solid #0b0c0c;
+  border-top: 0;
+  color: #0b0c0c;
+  margin: 0;
+  max-height: 342px;
+  overflow-x: hidden;
+  padding: 0;
+  width: 100%;
+  width: calc(100% - 4px);
+}
+.autocomplete__menu--visible {
+  display: block;
+}
+.autocomplete__menu--hidden {
+  display: none;
+}
+.autocomplete__menu--overlay {
+  box-shadow: rgba(0, 0, 0, 0.256863) 0 2px 6px;
+  left: 0;
+  position: absolute;
+  top: 100%;
+  z-index: 100;
+  min-width: 500px;
+}
+.autocomplete__menu--inline {
+  position: relative;
+}
+.autocomplete__option {
+  border-bottom: solid #b1b4b6;
+  border-width: 1px 0;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+}
+.autocomplete__option > * {
+  pointer-events: none;
+}
+.autocomplete__option:first-of-type {
+  border-top-width: 0;
+}
+.autocomplete__option:last-of-type {
+  border-bottom-width: 0;
+}
+.autocomplete__option--odd {
+  background-color: #fafafa;
+}
+.autocomplete__option--focused,
+.autocomplete__option:hover {
+  background-color: #1d70b8;
+  border-color: #1d70b8;
+  color: #fff;
+  outline: 0;
+}
+.autocomplete__option--focused .autocomplete__option-name,
+.autocomplete__option:hover .autocomplete__option-name {
+  color:#fff;
+
+}
+.autocomplete__multiple-input {
+  display: flex;
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
   .autocomplete__menu {
-    background-color: #fff;
-    border: 4px solid #0b0c0c;
-    border-top: 0;
-    color: #34384b;
-    margin: 0;
-    max-height: 342px;
-    overflow-x: hidden;
-    padding: 0;
-    width: 100%;
-    width: calc(100% - 4px);
-  }
-
-  .autocomplete__menu--visible {
-    display: block;
-  }
-
-  .autocomplete__menu--hidden {
-    display: none;
+    border-color: FieldText;
   }
-
-  .autocomplete__menu--overlay {
-    box-shadow: rgba(0,0,0,.256863) 0 2px 6px;
-    left: 0;
-    position: absolute;
-    top: 100%;
-    z-index: 100;
-  }
-
-  .autocomplete__menu--inline {
-    position: relative;
-  }
-
   .autocomplete__option {
-    border-bottom: solid #bfc1c3;
-    border-width: 1px 0;
-    cursor: pointer;
-    display: block;
-    position: relative;
-  }
-
-  .autocomplete__option > * {
-    pointer-events: none;
-  }
-
-  .autocomplete__option:first-of-type {
-    border-top-width: 0;
-  }
-
-  .autocomplete__option:last-of-type {
-    border-bottom-width: 0;
-  }
-
-  .autocomplete__option--odd {
-    background-color: #fafafa;
+    background-color: Field;
+    color: FieldText;
   }
-
   .autocomplete__option--focused,
   .autocomplete__option:hover {
-    background-color: #005ea5;
-    border-color: #005ea5;
-    color: #fff;
-    outline: 0;
+    forced-color-adjust: none;
+    background-color: SelectedItem;
+    border-color: SelectedItem;
+    color: SelectedItemText;
+    outline-color: SelectedItemText;
   }
-
-  .autocomplete__option--no-results {
-    background-color: #fafafa;
-    color: #646b6f;
-    cursor: not-allowed;
-  }
-
+}
+.autocomplete__option--no-results {
+  background-color: #fafafa;
+  color: #646b6f;
+  cursor: not-allowed;
+}
+.autocomplete__hint,
+.autocomplete__input,
+.autocomplete__option {
+  font-size: 16px;
+  line-height: 1.25;
+  margin-bottom: 0;
+}
+.autocomplete__hint,
+.autocomplete__option {
+  padding: 5px;
+}
+.autocomplete__option-name {
+  margin-left: 1em;
+  color: #4C6272;
+}
+@media (min-width: 641px) {
   .autocomplete__hint,
   .autocomplete__input,
   .autocomplete__option {
-    font-size: 17px;
-    line-height: 1.5;
+    font-size: 19px;
+    line-height: 1.31579;
   }
-
-  .autocomplete__hint,
-  .autocomplete__option {
-    padding: 8px;
-  }
-  @media (min-width:641px) {
-    .autocomplete__hint,
-    .autocomplete__input,
-    .autocomplete__option {
-      font-size: 17px;
-      line-height: 1.5;
-    }
-  }
-
-
-  .autocomplete__input {
-    &:focus {
-      box-shadow: 0 0 0 4px 	#ffeb3b;
-      outline: 4px solid transparent;
-      outline-offset: 4px;
-      border: 4px solid black;
-    }
-  }
-
 }
-