Feature/province list

[EricDube]

Description

Dropdown

Closes: https://trello.com/c/KcuVOorR/181-people-can-type-to-select-their-province-or-territory-from-a-list Allow users to select their province or territory from a drop down list. It allows the users to type in the province or territory and will auto-complete to the appropriate value. It does not allow values not in the list.

Test Instructions

1. Navigate to the Your province or territory page
2. Enter text in text field or click on arrow of dropdown
3. Validate that the correct result displays on the results page.

Back Button

Modified implementation of the Back button. The back button now stores a history of pages viewed in the session so the user can navigate back to the last page viewed with javascript disabled.

Test Instructions for back button changes

1. Navigate to the Your province or territory page
2. Select a province or territory and click Next
3. Validate that the back button appears at the top left of the current page
4. Click back button
5. Validate that it brings you back to the Your province or territory page
6. Validate that the back button does NOT appear on the Your province or territory page

Help Requested

• Validate that the province drop down looks and behaves as expected.

[katewilhelm]

I've now finished testing that all provinces get the right result. Just the French ordering needs fixing as far as I can see

[CalvinRodo]

Province Sorting has been fixed, just need to fix unit tests

[katewilhelm]

Order of provinces looks great!

[CalvinRodo]

I've also addressed @katedee 's comments about the drop down colours

[dsamojlenko]

I'd recommend decoupling the js from the dropdown macro, and using the webpack build pipeline to compile the related js.

So:

• remove the accessible-autocomplete.min.js file from both assets/js and public/dist/js
• use npm to pull it into the project npm install --save accessible-autocomplete
• remove the js code from the dropdown.njk macro
• in routes/question-province/js/question-province.js import and setup the autocomplete:

import accessibleAutocomplete from 'accessible-autocomplete'

accessibleAutocomplete.enhanceSelectElement({
  selectElement: document.querySelector('#province-select'),
  showAllValues: true,
  showNoOptionsFound: false,
})

• tell webpack about that file in webpack.common.js:

entry: {
  styles: './assets/scss/app.scss',
  app: './assets/js/app.js',
  province: './routes/question-province/js/question-province.js',
},

• then include the compiled file in a script block in routes/question-province/question-province.njk:

{% block scripts %}
    <script type="text/javascript" src="{{ asset('/dist/js/province.js') }}"></script>
{% endblock %}

[corahansen]

Reviewed and approved, thank you!