This commit replaces all data-component="IconComponent" usages
with iconPartial instead. As a result, we...

1. cut down the number of data- attributes scanned by the SDK
2. remove a majority of the components tracked by the ComponentManager, which by extension will
3. reduce the number of component lifecycles that need to be run

J=SLAP-1297
TEST=manual

smoke tested that the page loads as expected, can run searches and things
like filters, navigation, and pagination icons look as expected

tested that I could access the icons/iconPartial partial from a component using a custom template
(to make sure it will work with the theme)

tried setting a custom icon for the searchbar

check that the animated search icon keyframes are still namespaced correctly by the searchbar's component
name (both the default of "SearchBar" and setting a custom name)

hooked up my local SDK to the theme, before this change on a vertical-full-page-map there were 50 icon components
after this change there were only 40
these 40 icons come from the 20 results cards that were rendered, each having 2 cta buttons
updating the theme will remove these remaining ones

This PR replaces all icon usages that only are meant to use a 
baked in icon with the icons/bakedInIcon partial.

The issue with just using iconPartial for everything is that, some icons are intended
to always use a baked in icon instead of switch between an iconName
(for built in icons) and an iconUrl (for custom icons).
However, handlebars partials operate on the context on which they are called, not only
on the variables passed into it. So, if an iconUrl exists on the scope somebody calls
`{{> icons/iconPartial iconName='chevron'}}`, an iconUrl will be passed into the partial
even though none was explicitly passed in.

Since iconUrl has higher priority than iconName, this can cause undesired behavior.
I think the best workaround is just creating a separate partial when we want an icon
that is built into the SDK.

J=SLAP-1297
TEST=manual

test that baked in icons display as expected and do not have this
behavior

see the animated search icon working as expected

manually check that all iconPartial usages have a specified iconUrl

* Added universalLimit to universal searches.

J=SLAP-1267
TEST=manual/auto

Checked test site to make sure change went through.

* added test and other stuff

* generate notices

* changed name of SearchConfig.limit to limitForVertical

* added validate

* added clarity to error message

Originally I thought builtInIcon was hard on the eyes to read,
so I called it bakedInIcon instead.

I still think it's a little hard on the eyes, but builtInIcon
definitely is more accurate and professional.

J=SLAP-1297
TEST=manual

see filterbox and searchbar icons show up

The package-lock.json is a unique identifier for the node module
dependencies for a repo. The package.json is not, so we shouldn't
use its hash as part of the circleci cache key.

TEST=manual
J=none

saw that the circleci build still saves a cache and uses it in subsequent builds

This way the theme's test-site can point to canary/latest
and have i18n snapshots work.
I was wrong, and the i18n build will build ALL the locales, not just the languages.
On the other hand, this still shouldn't cost too much storage since it's only a single branch.

J=SLAP-1423
TEST=manual

use this branch's name (dev/i18n-develop) instead of develop in the circleci config,
see the i18n build run

* Properly implemented sessionTrackingEnabled

J=SLAP-1408
TEST=manual

Checked on test page to make sure that session_id and cookies are being passed as expected. When sessionTrackingEnabled is true, the sessionID is passed to the test site and no cookie for sessionID is dropped. When sessionTrackingEnabled is false, the sessionID is generated by the API and no cookie is dropped. When no sessionID is passed and sessionTrackingEnabled is true, a cookie is dropped.

* nits and new version of core

* unmerge

* third party notices

Add support for loading indicator and related style changes to SDK

- Update searchBarComponent's animation cycle to include loading indicator and support for custom icon url, if provided in the config data.
- Add loading indicator animation css, magnifying glass and yext animation icon now have static version without transitions
- Add opacity to results section on page during loading state (regardless of the use of loading indicator)
- Update SearchBar template to include default and custom loading indicator html
- Update universalComponent to not change results during loading state
- Move searchBar icon related handlebars into its own partial

J=SLAP-1335
TEST=manual

Serve test page in SDk dist/ with the new changes in bundle and tested in universal and vertical page:
- default initial search show loading indicator and switch to magifying glass/Yext icon
- During loading, universal result section have opacity set to 0.5
- hitting enter or apply filter change icon to loading indicator, and change back to magnifying glass after loading
- Click on submit button will change icon to loading indicator, and change back to Yext icon after loading
- Icon is not frozen during loading state transition to non loading state
- Default loading indicator works with custom non-loading icons based on tests above
- Custom loading indicator works with default non-loading icons based on tests above
- Custom loading indicator works with custom non-loading icons based on tests above
- smoke test on ios mobile

Convert a spellcheck acceptance test into integration tests

This test coverage has two parts. In the first part, our test coverage confirms that the spellcheck components renders with the correct query params in the hyperlink. To accomplish this, I converted the previous spellcheck tests to more of an integration test by mounting the component with the enzyme adapter.

In the second part, I confirm that when ANSWERS initializes with the spellcheck params in the URL, a search is fired with those spellcheck params. To make this possible, this PR sets up integration testing for answers-umd which previously did not exist in our jest tests. This PR mocks the core library so that we don't actually fire HTTP requests when running these tests.

J=SLAP-1062
TEST=auto

Add integration test coverage

Add ability to set the querySource at runtime with a call to `ANSWERS.setQuerySource()`

J=SLAP-1438
TEST=manual

Use the setter and observe the updated query param in subsequent network requests

J=SLAP-1409
TEST=automatic

ran tests and they work as expected.

Update testCafe acceptance test

- Add waitOnSearchComplete functionality in verticalResults and UniversalResults component to wait for query response(s) and searchComplete state appears on page.
- Register requestLogger to each test to track vertical/universal requests and response to Answers API endpoint
- Update acceptance tests to wait for results on search

J=SLAP-1425
TEST= auto

ran testCafe locally, verify logger requests and wait time in tests

Add opacity to DirectAnswer while search is loading

- Update DirectAnswer to have searchState 
- add the corresponding css class to container based on searchState for opacity styling

J=SLAP-1445
TEST=auto&manual

- added jest test to verify the right css class is set for different loading state
- Launched test site and verified that opacity is added to direct answer on universal page

async function `isLoggerResultsPresent` returns a promise<boolean> on query response,  added the missing `await` keyword when invoking the function.

Ran npx browserslist@latest --update-db
Right now running tests locally spams a warning to bump it.

J=SLAP-1451
TEST=manual

run build and test, see page load

Slash division is deprecated and throws annoying warnings during the build.

J=SLAP-1454
TEST=manual

open dev tools, see that the css variables that use the changed scss
variables ($line-height-xlg and $line-height-md-sm) still have the correct values

- update hook registration to use `requestHook` on fixture instead of `beforeEach` for each test
- update waitOnSearchComplete to use current testInstance from test suite instead of the imported testInstance reference from testcafe

…1468)

This commit adds a method to handle locale defaulting on microsoft edge.
Chrome and Safari both have nice handling for strange locales like en_FAKE.
Edge is more sensitive, and will throw an error if the locale is not one
of its specific supported ones, or if the locale uses underscores instead of dashes.

The list of locales supported in edge was generated programmatically using a script.
There is documentation for the list of locales supported by Azure's Speech service,
but I could not find anything saying that the SpeechRecognition implementation on Edge
uses this service directly (though it seems to be the case).

J=SLAP-1441
TEST=manual,auto

tested the isMicrosoftEdge() function on different browsers by exposing it on ANSWERS
did the same thing with transformSpeechRecognitionLocaleForEdge()

When I was trying to get arabic to work the SDK (it
was hard to even tell it was the SDK) was throwing a very
unhelpful error message regarding translations.

The issue was that our translation processor was trying to access
a plural form that did not exist in the arabic po file, since we
only received translations for the SDK and not the theme.
The method would then return undefined, and break later on.

I chose to display the original msgid instead of trying to find the "closest"
english plural form, for simplicity.

J=SLAP-1394
TEST=manual

see that the error is handled gracefully now

Add the voice search icon for voice search support

There are two voice search icon SVGs. One is the microphone and the other are the listening dots. The animations are stored in the SVGs and they are activated by the VoiceSearchController. Both the microphone and the listening icon can be swapped out with custom icons. When a custom icon is supplied, it will simply fade in or fade out with CSS animations. This is a little different than the built-in icons which use SVG animations.

In a future PR, the animated dots will be modified to move when listening to sound.

When the listening state is change, the screen reader text is updated to be either "Start Voice Search" or "Stop Voice Search". Translations will be added once we receive them. A focus state is also present for keyboard WCAG support.

J=SLAP-1442
TEST=manual

Load a test site with voice search enabled in the config and see the icon appear. See that the transitions work properly when clicking on the icon. Also try specifying custom mic and custom listening icons and see them properly fade in and out during the click. Observe the screen reader text change when the button is clicked.

We cannot use testcafe to testcafe to create a no-unsafe-eval test, because
testcafe internals rely on eval.
Instead, this commit adds a percy snapshot which tests the same thing - that
the page loads even with a CSP that disables unsafe-eval.

Note we only guarantee no unsafe-eval's for the SearchBar component.

J=SLAP-1440
TEST=auto

regenerator-runtime got unpinned from 0.13.1, probably because I
originally wanted to also pin our devDependency of regenerator-runtime
that we use in jest, but unfortunately that broke our tests.

Also bump the actions/setup-node to v2. we are already using v2 in the npm_publish
github action.

Add the POT file to the repo so that we can easily access it

Also update the translation verification script to throw an error if the extracted translations are out of date

NOTE: The translation test is failing because we don't have all the translations in yet.

J=none
TEST=manual

See that when the messages.pot file in the repo is out of date, the test fails

Move logic around searchBar icons to a state machine system

- Added a general state machine model and state class
- Added a searchBarIconController that holds a state machine and manages all events and behavior surrounding the search bar icons.
- Added 3 states for different behavior in search bar icon (loading, search, and default)
- Removed related search bar icon code from searchBarComponent
- Removed RequestAnimationFrame calls since we are relying on CSS animations

J=SLAP-1437
TEST=manual & auto

- serve page from sdk dist/ and verified icon changes during search, click outside of search bar, type query, and click submit. Verified that custom icons for default and loading states work.
- Added Jest tests for the controller

- update core version to 1.3.0-beta.2
- include feature/DirectAnswer-in-Vertical changes
- update core.js file: vertical search set StorageKeys.DIRECT_ANSWERS to loading state at the beginning of the search for opacity styling

Support map options specific to the map provider

This can be used for things such as styling the mapbox map

J=SLAP-1449
TEST=manual

Use the hitchhikers theme to build a site and see that the provider options on the map vertical also affects the universal map. Test a custom style for Mapbox, and test a custom background color for Google.

…1485)

Update the config so that the translation verification is no longer required in order to deploy assets for develop and dev branches

We still run the test so that we have visibility into whether or not translations are present, but they shouldn't prevent a deploy

J=SLAP-1476
TEST=manual

See that this PR deploys despite the translation verification failing. Check the Circle CI workflow graph and see that the translation verification runs but is not required for a deploy

Update testcafe concurrency and browser type when running acceptance test

- update testcafe command to use a config file, including `--app` or `appCommand` option to start server instead of starting/shutting down server per fixture
- update run_browserstack_acceptance script to spin up 2 browserstack instances of ie11 only on dev branch. Will only test safari as well when run on master and release branches. Chrome and firefox is tested in headless acceptance test with concurrency of 3.
- overall time is reduced by half (~4mins) with 2 instances of ie11.

J=SLAP-1426
TEST=auto

- ran acceptance tests from circleCI workflow multiple times. See that number of instance of the expected browser type is setup in browserStack. See that the time, for the most part, is reduced by ~4 mins.
- tested script locally: change the CIRCLE_BRANCH var to different branch names and see what command line is called
- tested script through circleCI from pr: made a push to pr with a hardcoded CIRCLE_BRANCH value (hotfix/test-something) and see that it spin up 2 ie11 instance in browserstack. made a push without hardcoded value (which will take this pr name dev/testcafe-browsers) and see that 1 instance of ie11 and safari is up in browserstack.

- Voice Search Icon Reorganization (#1476)
- Update listening icon with new animations (#1479)
- Speech Recognition Functionality (#1480)

Update the translation check to correspond with the changes to the hitchhikers theme's check

J=none
TEST=manual

Confirm that the test fails when the messages.pot file is out of date or if translations are missing

Add some integration testing that checks that clicking on the icon starts and stops the speech recognition

Due to the async nature of the code, I had to tweak the speech recognition code so that we can wait for the code to execute before continuing the test.

J=none
TEST=auto

Confirm tests pass

Fix a bug that caused voice search to break due to the async keyword

The keyword is not necessary, and it causes a 'regeneratorRuntime' error in browsers. Removing it fixes the issue

J=none
TEST=manual

Smoke test voice search

- add mapbox-gl-rtl-text plugin to support right to left languages

J=SLAP-1459
TEST=manual

from feature/arabic-i18n branch, built ar-* bundle and use it in theme to spin up ar map page (locations.html), and see that arabic is displayed properly. see that en and es is displayed as normal.

- Update DOM.once to create a one time handler that would remove itself after the event is trigger once.
- remove the self-destructing listener in searchbariconController and use DOM.once instead

J=SLAP-1432
TEST=manual

Put console log in the handler for 'mouseup' event on document in searchbar icon and passed to DOM.once. Click on document multiple times and see that console log is called once. Repeat process for DOM.once call in autocomplete component and see that console log is called once.

Add an RTL CSS bundle

The RTL bundle does a few things including putting the filter checkboxes on the right side. We probably don't need to build the RTL bundle unless we are building for all languages or locales, however it is so quick that I think it makes sense to just build it during dev mode since it makes developing RTL styling much faster.

J=SLAP-1465
TEST=manual

Build a site with the RTL styling and see the filter checkboxes on the right side

Flip chevrons for RTL

J=SLAP-1460
TEST=SLAP-1460

See that chevrons appear are reversed when using the rtl bundle

Add listening dot css classes so that the dots colors can be changed with CSS

example:
```
.yxt-SearchBar-dot1 { fill: red }
.yxt-SearchBar-dot2 { fill: yellow }
.yxt-SearchBar-dot3 { fill: blue }
.yxt-SearchBar-dot4 { fill: green }
```

J=none
TEST=manual

Add some CSS to a search bar page and confirm the colors appear

Don't run the dots animation when voice search is not active. This improves performance and prevents icon flickering when clicking on and off of the search bar

I also removed some SVG animations which weren't doing anything because all of the values were set to -0

J=SLAP-1473
TEST=manual

Enable voice search and see that the yext logo icon doesn't flicker when clicking on and off of the icon. Test clicking the voice search icon really fast and see that I'm unable to get the icon animations into a broken state.

Set an explicit custom icon width so that the voice and clear button don't shift around when the loading indicator appears

J=SLAP-1473
TEST=manual

Enable the loading indicator and set a custom icon. See that the voice icon and the clear button stay in the same spot

Disable the loading icon when it is inactive in order to prevent the icon from flashing during transitions

Note: The search bar will still sometimes flash the very first time the icon is clicked because of a long tasks associated with creating the components and waiting for the autocomplete response, but that's a separate issue

J=SLAP-1473
TEST=manual

See that when the loading indicator is enabled, the icon will no longer flash when clicking on and off the search bar.

- surface email error from backend with code 22 and display corresponding error message in hbs template
- update questionSubmission URLs to use liveapi version
- minor fix: added optional chaining in case analyticsReporter is not set

J=SLAP-1020
TEST=manual

- serve page from dist folder with QASubmission component, submit with invalid email domain and see that the error message is displayed.

- Add a script to generate the exports field in package.json that specified import paths to css, js, and template bundles for different language. This will execute in build step.

J=SLAP-1422
TEST=manual

Create jest test to see that exports field is created as expected
import answers-search-ui locally in another repo. Tried import statements for different bundles and verified no NoModuleFound error. Bundled with webpack, serve page and console.log Answers

If sessionStorage doesn't exist or usage is blocked by the browser
we still default to using the old session-id cookie, but an error
would still be printed even though nothing is "going wrong".

Rose said we can change to a warning. I also added a little extra context.

J=SLAP-1518
TEST=manual

J=SLAP-1519
TEST=manual

see that check mark is not inverted in filter box from en and ar locale

This PR adds translations for the following new languages: Arabic, Chinese (Traditional and Simplified), Polish, Portugese, Dutch, Swedish, Korea, Hindi, and Russian. Because new static text has been added for Speech Recognition, new translations were added to the existing language files as well.

A subsequent PR will update the `constants.js` file to include the new languages and their supported locales. Translations for the QA submission email errors will appear in a later PR, once Smartling is done with them.

TEST=none

- create github action to add commit with updated 3rd party notices if it's not up to date
- remove the check from circleci

J=SLAP-1505
TEST=auto

push a package.json with version different from what's listed in the 3rd party notice file and see that a automated commit is made in this pr

…irs. (#1512)

Rose provided these new pairs directly from Knowledge Graph.

TEST=manual

I ran `build-locales` and saw assets generated for the new pairs and languages.

add config options for voice search and loading indicator in search bar component in README.md

J=SLAP-1523
TEST=none

This commit makes the "Note: for Safari users, Siri must be
enabled" message only appear on Safari, using user-agent sniffing.
Generally speaking you want to avoid UA sniffing where you can, but
here it doesn't seem like there are any alternatives.

I tried using https://www.npmjs.com/package/bowser for sniffing,
but that adds an extra 8KB to our modern bundle (128KB -> 134KB).
Our use case is pretty small so it seems a little overkill to use a fully featured
library. Bowser also does not try to use userAgentData internally (AKA user agent clients hints),
which are more robust than the regular user-agent string.

J=SLAP-1522
TEST=manual,auto

test that the Safari specific not only shows up in Safari
I couldn't figure out how to naturally get the 'service-not-allowed'
error to show up on safari/chrome, so I changed the error switching
code to always go into this case.
For Chrome I disconneted from wifi to trigger the 'network' error.
For Edge I ended the voice recognition before it was done to trigger the 'no-speech' error.

Instead of writing unit tests for specific UA strings, which aren't
particularly useful for making sure your sniffing works in a real
scenario (since issues normally arise from the strings becoming out
of date, NOT somebody changing the source code), I added a useragent
acceptance test suite. This suite spins up instances of specific browsers,
and checks that the sniffer methods work as expected on each of them.
If need be, we can run these tests on specific browser versions.

I moved the quarantine-mode flag to only the tests run by CI.
Locally, we typically don't want to run the tests in quarnatine mode.
Also these tests don't need to run in quarantine mode.

The useragentsuite is in a different folder than the other acceptance suites,
because it's meant to be run separately with a specific suite of browsers.

This PR adds a new entry point to the SDK's source. This entry point defines a class, `AnswersSearchBar`, that powers a `SearchBar` only integration. The class is defined in `answers-search-bar.js`, which bears many similarities to `answers-umd.js`. There are a few key differences:
- The `FilterNodeFactory`, `formatRichText`, and `processTranslations` methods are not exported on the top-level object. These are not needed for this type of integration.
- We will not handle CSS variables in this integration. Styling is very limited and prescriptive. So, all related ponyfills were removed.
- It is assumed that the client has pulled down the `TemplateBundle` on their own and we will not need to load it for them. So, the `DefaultTemplateLoader` is not used.

A new registry of `Components`, specific to this type of integration, was added. This registry was put in a new file, `search-bar-only-registry.js`. At first, I attempted to export a second registry from the existing `registry.js`. But, Gulp's tree-shaking was still including all `Component` classes in the `SearchBar`-only bundle. Creating a new file solved that issue.

Finally, the `ComponentManager` class is no longer a singleton. This is because it can now accept different `componentRegistry`s. I don't think this should cause an issue. If you attempt to `init` twice on your page, you would
already get the same `componentManager` since `ANSWERS` itself is a singleton. Likewise if you tried to make multiple instances of either on your page.

The Gulp infrastructure of the SDK was modified to support building the assets for this integration. There is a new top-level command, `npm run build-search-bar-only`. The existing `npm run build`, `npm run build-languages`, and `npm run build-locales` commands work as before. They do not produce the assets for this integration. The `build-search-bar-only` command has not been added to the CI either. We still need to determine what the automated build/release process for this integration looks like. It is versioned separately from the SDK. One thing to note is that Product asked the same asset names (`answers.js`, `answers.min.js`, `answers.css`, etc.) be used for this integration. 

J=SLAP-1271
TEST=auto,manual

Built a new JS and TemplateBundle asset from this entry point. Verified the following:

- The `SearchBar` appears on the page and works as expected.
- The `Autocomplete` works as expected.
- The `setContext` method could add a context to the search.
- The `redirectUrl` worked as expected and the correct query params were added to it.
- The `defaultInitialSearch` worked as expected.
- I could configure the `SearchBar` component. 
- The `setSessionsOptIn` method worked as expected.

A new acceptance test was added for this integration. I verified it passed when the integration's assets were present in `dist`. Note that the test is not run by default since we do not build this integration's assets by default.

The `QuestionSubmission` component was recently updated to display a detailed
error message about invalid emails. This PR provides all the necessary translations
for that error message.

J=SLAP-1487
TEST=none

J=SLAP-1525
TEST=manual

ran build-languages for just chinese, assets had correct paths

Ran my codepen that brute force checks locales on edge, which works by
by turning on speech recognition for 10s, and adding the locale
to a list if a 'network' occurs. After 10s, the speech recognition
is aborted and a 'no-speech' error is expected.

Also added a zh-cn and zh-tw to the supported locales list, even
though they're not currently locales the SDK has built in, in case
a user manually supplies these locales.

J=SLAP-1532
TEST=manual,auto

manually test a number of the locales (~a third of them)

chinese i18n tweaks

update edge supported locales for voice search (#1519)
rename zh-CN to zh-Hans and zh-TW to zh-Hant (#1517)

Update locale parsing to use the new utility

J=SLAP-1531
TEST=manual

Run an i18n build and smoke test with the theme sample site

Add support for additional languages and language scripts

Most notably, this adds support for Simplified and Traditional Chinese for the maps

J=1534
TEST=manual

Load a test site with traditional and simplifed Chinese for mapbox and google maps

Setup Circle CI to build and deploy the search bar only assets

The deploy process for the search bar is based on the same deployment process of the regular assets. I added a deploy-bucket param to the deploy-to-aws so that we can specify which bucket to deploy the assets to.

I updated the github action for the npm publish so that we only publish the full answers assets to NPM and not the search bar assets.

J=SLAP-1509
TEST=manual

Create a test release (v0.0.1) and see the tests pass in circle CI and see the assets deploy under the appropriate version (v0, v0.0, and v0.0.1)

Bump core version to 1.3.0

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

…y notices check