npm package: @ongov/ontario-search
Description: React components containing search bar and autosuggest to be used for search on ontario government websites
Author: Ontario Digital Service
Latest version: 1.9.5

# 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.

1. Install all the required NPM packages by issuing `npm install` from this
   folder
2. 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:

1. Import the package into your project
2. 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>
```

3. Import the JS from the NPM package into the page via a script tag
4. 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