Version 1.12 (#1604)

## Version 1.12.0
### Features
- Allow search rate tracking (#1558)
- Add support for setting and changing the visitor and passing it to answers-core (#1564)
- Add support for the auth token that is passed in from the config (#1566)
- Add an `environment` field to support consumer auth in Sandbox (#1597)
- Allow components to override the beforeMount function (#1547)
- Add distance to the card data and a function to format it (#1550)
- WCAG updates (allow pagination with Enter (#1575), identify current page in navigation tab (#1576), update autocomplete screen reader support (#1578, #1579))

### Changes
- Update directAnswers component data to include the searcher (#1596)
- Use custom alerts instead of window.alert (#1549)
- Update Mapbox version to match the Theme (#1551)
- Internal repo changes (#1562, #1577)

### Bugfixes
- Fix console error which would appear on google maps (#1548)
- Fix FAQ expansion when default is expanded (#1553)
- Fix error for searches on page load with no businessId (#1561)

.eslintrc.json

@@ -1,6 +1,19 @@
 {
    "extends": ["semistandard"],
    "ignorePatterns": ["dist", "docs"],
+   "rules": {
+      "arrow-spacing": "error",
+      "quotes": ["error", "single"],
+      "max-len": ["error", {
+        "code": 110,
+        "ignorePattern": "^import\\s.+\\sfrom\\s.+;$",
+        "ignoreUrls": true,
+        "ignoreTemplateLiterals": true,
+        "ignoreStrings": true,
+        "ignoreRegExpLiterals": true,
+        "ignoreTrailingComments": true
+      }]
+    },
    "globals": {
       "beforeEach": true,
       "afterEach": true,

.github/workflows/percy_snapshots.yml

@@ -23,6 +23,6 @@ jobs:
     - run: npm ci
     - run: npm run build
     - name: Percy Snapshots
-      run: npx percy exec -- node tests/acceptance/percy/snapshots.mjs
+      run: npx percy exec -- node tests/acceptance/percy/snapshots.js
       env:
         PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

.github/workflows/sync_develop_and_main.yml

@@ -0,0 +1,27 @@
+name: create PR from main to develop
+
+on:
+  push:
+    branches: [main, master]
+
+permissions:
+  contents: read
+  pull-requests: write
+
+jobs:
+  createPullRequest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: extract package version
+        id: vars
+        run: |
+          PACKAGE_VERSION="v$(cat ./package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[",]//g' | tr -d '[[:space:]]')"
+          echo ::set-output name=tag::${PACKAGE_VERSION}
+      - uses: repo-sync/pull-request@v2
+        with:
+          source_branch: "${{ github.event.repository.default_branch }}"
+          destination_branch: "develop"
+          pr_title: "Merge ${{ github.event.repository.default_branch }} (${{ steps.vars.outputs.tag }}) into develop"
+          pr_body: "Merge ${{ github.event.repository.default_branch }} (${{ steps.vars.outputs.tag }}) into develop"
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/wcag_test.yml

@@ -0,0 +1,22 @@
+name: WCAG tests
+
+on:
+  pull_request:
+    branches: [develop, hotfix/*, release/*, support/*]
+
+jobs:
+  WCAG-test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run wcag

.size-limit.js

@@ -1,11 +1,11 @@
 module.exports = [
   {
     path: 'dist/answers.min.js',
-    limit: '160 KB'
+    limit: '170 KB'
   },
   {
     path: 'dist/answers-modern.min.js',
-    limit: '130kb'
+    limit: '142kb'
   },
   {
     path: 'dist/answerstemplates.compiled.min.js',

README.md

@@ -78,8 +78,8 @@ Add the Javascript library and placeholder elements for [Answers components](#co
 <div id="UniversalResultsContainer"></div>
 ```
 
-Add an initialization script with an apiKey, experienceKey and onReady function. In the example below, we've initialized two
-basic components: [SearchBar](#searchbar-component) and [UniversalResults](#universal-results-component).
+Add an initialization script with an apiKey or token, experienceKey and onReady function. In the example below, we've initialized two
+basic components with apiKey: [SearchBar](#searchbar-component) and [UniversalResults](#universal-results-component).
 ```js
 function initAnswers() {
   ANSWERS.init({
@@ -125,10 +125,21 @@ The configuration provided here is configuration that is shared across component
 ```js
 function initAnswers() {
   ANSWERS.init({
-    // Required, your Yext Answers API key
+    // Required*, your Yext Answers API key. *Do NOT provide apiKey if token is used.
     apiKey: '<API_KEY_HERE>',
+    // Required*, custom auth token. *Do NOT provide token if apiKey is used.
+    token: '<TOKEN_HERE>',
     // Required, the key used for your Answers experience
     experienceKey: '<EXPERIENCE_KEY_HERE>',
+    // Optional, indicates the environment to run Answers experience in ('production' or 'sandbox')
+    environment: '<ENVIRONMENT_HERE',
+    // Optional, visitor interacting with the experience, see Visitor Configuration below for details
+    visitor: {
+      // Required, see below
+      id: '<ID_HERE>',
+      // Optional, see below
+      idMethod: '<ID_METHOD_HERE>',
+    },
     // Optional, initialize components here, invoked when the Answers component library is loaded/ready.
     //    If components are not added here, they can also be added when the init promise resolves
     onReady: function() {},
@@ -323,6 +334,21 @@ function (searchParams) => {
 }),
 ```
 
+## Visitor Configuration
+
+Below is a list of configuration attributes related to a visitor, used in the [base configuration](#answersinit-configuration-options) above.
+
+The visitor object ties a user's identity to their searches and actions. The visitor can also be set or changed using the `ANSWERS.setVisitor` function.
+
+```js
+    visitor: {
+      // Required, the ID associated with the user. This will be the yextUserId if Yext Auth is used.
+      id: '123919',
+      // Optional, the method used to generate the visitor ID.
+      idMethod: 'YEXT_USER',
+    },
+```
+
 # Component Usage
 
 The Answers Component Library exposes an easy to use interface for adding and customizing various types of UI components on your page.

THIRD-PARTY-NOTICES

@@ -304,7 +304,7 @@ MIT License
 
 The following NPM package may be included in this product:
 
- - @yext/answers-core@1.3.2
+ - @yext/answers-core@1.4.0
 
 This package contains the following license and notice below:
 
@@ -342,7 +342,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
 The following NPM packages may be included in this product:
 
- - @yext/answers-search-ui@1.11.0
+ - @yext/answers-search-ui@1.12.0
  - @yext/[email protected]
 
 These packages each contain the following license and notice below:
@@ -2405,6 +2405,37 @@ THE SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - [email protected]
+
+This package contains the following license and notice below:
+
+Copyright (c) 2015-2017 Rubén Norte <[email protected]>
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+-----------
+
 The following NPM packages may be included in this product:
 
  - [email protected]
@@ -6168,6 +6199,35 @@ SOFTWARE.**
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - [email protected]
+
+This package contains the following license and notice below:
+
+Copyright (c) 2014 Taylor Hakes
+Copyright (c) 2014 Forbes Lindesay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+-----------
+
 The following NPM packages may be included in this product:
 
  - [email protected]
@@ -7831,6 +7891,36 @@ SOFTWARE.
 
 -----------
 
+The following NPM package may be included in this product:
+
+ - [email protected]
+
+This package contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2014-present Tristan Edwards
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----------
+
 The following NPM package may be included in this product:
 
  - [email protected]

conf/gulp-tasks/bundle/bundle.js

@@ -131,7 +131,8 @@ function _buildBundle (callback, rollupConfig, bundleName, locale, libVersion, t
     .pipe(source(`${bundleName}.js`))
     .pipe(replace('@@LIB_VERSION', libVersion))
     .pipe(replace('@@LOCALE', locale))
-    .pipe(replace('\'@@SPEECH_RECOGNITION_LOCALES_SUPPORTED_BY_EDGE\'', JSON.stringify(SPEECH_RECOGNITION_LOCALES_SUPPORTED_BY_EDGE)))
+    .pipe(replace('\'@@SPEECH_RECOGNITION_LOCALES_SUPPORTED_BY_EDGE\'',
+      JSON.stringify(SPEECH_RECOGNITION_LOCALES_SUPPORTED_BY_EDGE)))
     .pipe(replace(TRANSLATION_FLAGGER_REGEX, translateCall => {
       const placeholder = new TranslateCallParser().parse(translateCall);
       const translationResult = translationResolver.resolve(placeholder);

conf/gulp-tasks/library.gulpfile.js

@@ -1,10 +1,9 @@
 const { series, parallel, src, dest, watch } = require('gulp');
 const path = require('path');
 const postcss = require('gulp-postcss');
-const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const rtlcss = require('gulp-rtlcss');
 const rename = require('gulp-rename');
-sass.compiler = require('sass');
 
 const getLibraryVersion = require('./utils/libversion');
 const { BundleType, BundleTaskFactory } = require('./bundle/bundletaskfactory');

conf/gulp-tasks/template/createprecompiletemplates.js

@@ -88,8 +88,8 @@ function precompileTemplates (callback, isSearchBarOnly, outputFile, processAST)
             return JSON.stringify(name);
           }
         },
-        // TBH, this isn't really needed anymore since we don't name files like so 'foo.bar.js', but this is here to
-        // support that use case.
+        // TBH, this isn't really needed anymore since we don't name files
+        // like so 'foo.bar.js', but this is here to support that use case.
         customContext: function (fileName) {
           const name = fileName.split('.')[0];
           const keys = name.split('.');

conf/i18n/translations/ar.po

@@ -12,15 +12,26 @@ msgstr[3] "([[resultsCount]] نتائج)"
 msgstr[4] "([[resultsCount]] نتيجة)"
 msgstr[5] "([[resultsCount]] نتيجة)"
 
+#: src/ui/templates/search/autocomplete.hbs:6
+msgid "[[resultsCount]] [[label]] autocomplete option found."
+msgid_plural "[[resultsCount]] [[label]] autocomplete options found."
+msgstr[0] "[[resultsCount]] [[label]] خيارات إكمال تلقائي موجودة."
+msgstr[1] "[[resultsCount]] [[label]] خيار إكمال تلقائي موجود."
+msgstr[2] "[[resultsCount]] [[label]] خيار إكمال تلقائي موجود."
+msgstr[3] "[[resultsCount]] [[label]] خيارات إكمال تلقائي موجودة."
+msgstr[4] "[[resultsCount]] [[label]] خيار إكمال تلقائي موجودًا."
+msgstr[5] "[[resultsCount]] [[label]] خيار إكمال تلقائي موجود."
+
 #: src/ui/templates/search/autocomplete.hbs:14
-msgid "[[resultsCount]] autocomplete option found"
-msgid_plural "[[resultsCount]] autocomplete options found"
-msgstr[0] "[[resultsCount]] خيارات إكمال تلقائي موجودة"
-msgstr[1] "[[resultsCount]] خيار إكمال تلقائي موجود"
-msgstr[2] "[[resultsCount]] خيارات إكمال تلقائي موجودة"
-msgstr[3] "[[resultsCount]] خيارات إكمال تلقائي موجودة"
-msgstr[4] "[[resultsCount]] خيار إكمال تلقائي موجود"
-msgstr[5] "[[resultsCount]] خيار إكمال تلقائي موجودة"
+#: src/ui/templates/search/autocomplete.hbs:23
+msgid "[[resultsCount]] autocomplete option found."
+msgid_plural "[[resultsCount]] autocomplete options found."
+msgstr[0] "[[resultsCount]] خيارات إكمال تلقائي موجودة."
+msgstr[1] "[[resultsCount]] خيار إكمال تلقائي موجود."
+msgstr[2] "[[resultsCount]] خيار إكمال تلقائي موجود."
+msgstr[3] "[[resultsCount]] خيارات إكمال تلقائي موجودة."
+msgstr[4] "[[resultsCount]] خيار إكمال تلقائي موجودًا."
+msgstr[5] "[[resultsCount]] خيار إكمال تلقائي موجود."
 
 #: src/ui/templates/results/resultsheader.hbs:19
 #: src/ui/templates/results/verticalresultscount.hbs:3
@@ -204,6 +215,11 @@ msgstr "تعذر علينا تحديد موقعك"
 msgid "We're sorry, an error occurred."
 msgstr "نأسف لذلك، حدث خطأ."
 
+#: src/ui/templates/search/filtersearch.hbs:12
+#: src/ui/templates/search/search.hbs:29
+msgid "When autocomplete results are available, use up and down arrows to review and enter to select."
+msgstr "عندما تتوفر نتائج الإكمال التلقائي، استخدم السهمين لأعلى ولأسفل للمراجعة ومفتاح الإدخال للتحديد."
+
 #: src/ui/templates/results/noresults.hbs:7
 msgid "Your search - <span class=\"yxt-NoResults-query\">[[query]]</span> - did not match any answers we have."
 msgstr "لم يتطابق بحثك - <span class=\"yxt-NoResults-query\">[[query]]</span> - مع أي إجابات لدينا."