@ongov/ontario-search NPM

Ontario.ca Search Components Package

This package contains the ontario.ca search bar and the associated autosuggest dropdown for it.

Development

To make development of the NPM package simpler, we have added a hot reload local server workflow to the project. It's very simple.

Install all the required NPM packages by issuing npm install from this folder
Run npm run start to build the development bundle and serve it with hot reload

Note that in order to make this work as expected, we have created separate Webpack files to handle the two scenarios.

Packaging & Deployment

To do a push to NPM, all changes must be pushed to the main branch and a new tag needs to be created and pushed to remote:

Navigate to the root folder of the project (the main project, not packaged-components) and ensure you are on the main branch
Issue the following command: npm run npm-publish [<newversion> | major | minor | patch] <tagmessage> where <newversion> is replaced with one of major, minor or patch. This will automatically increment the version number in package.json and create a git tag for the version. Note that the versions are prefixed with a npm-v so they look like npm-v1.3.14
This will automatically push the tag and prepare the package for publishing to NPM
Because the CI is set to manual deploy, you will need to click the publish button to have it published to NPM
After the pipeline is deployed, run npm update @ongov/ontario-search to update to the newest version of the NPM package on our main package.
Commit and Push the package-lock.json changes back into main.

Package Use In Projects

To use the NPM package in your own project, you need to do the following:

Import the package into your project
Add server configuration as a script tag on the page like this:

  <script>      // This is the configuration for the ElasticSearch AppSearch Connector
      window.apiConfig = {
          searchKey: "search-XXXXXXX",
          engineName: "XXXXXXX-search",
          endpointBase: "https://XXXXXXX.ent.us-east-1.aws.found.io"
      }
      // This is the endpoint configuration for the search results page for EN and FR
      window.endpointConfig = {
          en: "/search/search-results/",
          fr: "/fr/recherche/resultats-de-recherche/"
      }
  </script>

Import the JS from the NPM package into the page via a script tag
Create an element on the page for the NPM package to hook into. This element should have id of ontario-search-autosuggest

Example:

<div id="ontario-search-autosuggest" className="ontario-header__search-container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6">...</div>

Tips and other things to consider when using this package

Please recieve the proper apiConfig from the Ontario.ca Search team.
The package must be imported/loaded after the DOM is loaded.
Add the design system classes to the anchor element.
We have implemented this package into our own Ontario.ca Search Autosuggest repository, it may be helpful to take a look!
There may be some minor CSS changes needed.
Make sure the mobile searchOpen/searchClose buttons work as expected with the package imported. This includes focus being moved to the input on button click.
It is recommended to nest a simple search bar in the element as a backup in-case this package does not load. You would just need to make the submission send the user to https://www.ontario.ca/search/search-results/?query=QUERY and https://www.ontario.ca/fr/recherche/resultats-de-recherche/?query=QUERY Here is an example from the Ontario Design System of a simple search bar: https://designsystem.ontario.ca/components/detail/search-box.html