Theme Version 1.22 (#850)

## Version 1.22.0 ### Changes - Code coverage reports are now generated automatically for the Theme. (#759) - A number of dependencies were updated in accordance with Dependabot's suggestions. (#780) - The build time in `Development` mode was reduced significantly. (#782, #829) Build times in `Production` mode were also decreased. (#783, #825) - Two new cards supporting videos were added: `product-prominentvideo` and `multilang-product-prominentvideo`. These cards work with either YouTube or Vimeo content. (#794) - The process for formatting hours was made more efficient, resulting in faster renders for cards with hours. (#784) - Any SDK branch can now be specified in the `global_config.sdkVersion` attribute. (#791) - Unused CSS was removed from the Theme. (#793, #798) - To reduce flashing related to the SDK Component lifecycle, placeholder skeletons were added for the `SearchBar` and `Navigation` components. (#797) - Additional acceptance tests were added for the `VerticalFullPageMap` and Percy snapshots are now generated for all cards. (#830, #820) - Multi-language tests were added for the Theme. (#826) - The `documentsearch-standard` card now supports rich text featured snippets. (#838) - A new concept, `RuntimeConfig` was added. This allows configuration, computed at run-time, to be injected into the Theme and SDK. This new concept enables JWT integrations as well. (#843) ### Bug Fixes - A number of changes were made to make the Theme's visual regression tests more reliable. (#764, #765, #766, #778) - Corrected how the CTA URLs for the `menuitem-standard` and `multilang-menuitem-standard` cards are computed. (#787) - The Google Streetview person icon is now visible when using the `VerticalFullPageMap` layout. (#801) - The size of the cluster and result pins are now configurable. (#807) - A double encoding error for `verticalUrl` was fixed. (#836) - The `Opens At` open status message is now properly translated in all languages. (#834)
yext · Jun 23, 2021 · 6129782 · 6129782
2 parents ba45252 + 4320780
commit 6129782
Show file tree

Hide file tree

Showing 279 changed files with 4,101 additions and 2,963 deletions.
diff --git a/.github/run_browserstack_acceptance.sh b/.github/run_browserstack_acceptance.sh
@@ -6,4 +6,4 @@ export BROWSERSTACK_BUILD_ID="${GITHUB_BRANCH} - ${GITHUB_RUN_ID}"
 COMMIT_MSG_TITLE=$(git log -n 1 --pretty=format:%s)
 export BROWSERSTACK_TEST_RUN_NAME=$COMMIT_MSG_TITLE
 
-npm run acceptance -- --browsers browserstack:[email protected] browserstack:safari
+npm run acceptance -- --browsers browserstack:[email protected] browserstack:safari browserstack:firefox
diff --git a/.github/workflows/acceptance.yml b/.github/workflows/acceptance.yml
@@ -1,4 +1,4 @@
-name: BrowserStack Acceptance Tests
+name: Acceptance Tests
 
 on: push
 
@@ -31,4 +31,4 @@ jobs:
       - run: npm run setup-test-site
       - run: npm run build-test-site
       - name: Run Acceptance Tests
-        run: npm run acceptance -- --browsers chrome:headless firefox:headless
+        run: npm run acceptance -- --browsers chrome:headless
diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
@@ -0,0 +1,30 @@
+# This workflow will run our tests, generate an lcov code coverage file,
+# and send that coverage to Coveralls 
+
+name: Code Coverage
+
+on:
+  push:
+    branches-ignore: dev/*
+  pull_request:
+
+jobs:
+  Coveralls:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [15.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npx jest tests/static/ --coverage
+    - name: Coveralls
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/README.md b/README.md
@@ -1,5 +1,11 @@
 # Answers Hitchhiker Theme
 
+<div>
+  <a href='https://coveralls.io/github/yext/answers-hitchhiker-theme?branch=master'>
+    <img src='https://coveralls.io/repos/github/yext/answers-hitchhiker-theme/badge.svg?branch=master' alt='Coverage Status' />
+  </a>
+</div>
+
 A [Jambo](https://github.com/yext/jambo) theme for building Answers experiences.
 
 Additonal resources for integrating Answers can be found at https://hitchhikers.yext.com/.

diff --git a/cards/event-standard/component.js b/cards/event-standard/component.js
@@ -12,10 +12,12 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.website, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       date: Formatter.bigDate(profile),
       subtitle: Formatter.dateRange(profile),
@@ -32,7 +34,7 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
         label: 'RSVP', // The CTA's label
         iconName: 'calendar', // The icon to use for the CTA
         url: profile.ticketUrl || profile.website, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'RSVP', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -42,7 +44,7 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
         label: 'Directions',
         iconName: 'directions',
         url: Formatter.getDirectionsUrl(profile),
-        target: '_top',
+        target: linkTarget,
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js
@@ -12,10 +12,12 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
    * @param {Object} profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.question || profile.name, // The header text of the card
       // subtitle: '', // The sub-header text of the card
-      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", "_top") : null, // The text in the body of the card
+      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null, // The text in the body of the card
       // If the card's details are longer than a certain character count, you can truncate the
       // text. A toggle will be supplied that can show or hide the truncated text.
       // showMoreDetails: {
@@ -29,7 +31,7 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
         label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
         // iconName: '', // The icon to use for the CTA
         url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened. To open in a new tab use '_blank'
+        target: linkTarget, // Where the new URL will be opened. To open in a new tab use '_blank'
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         // Event options for the analytics event fired when this CTA is clicked.
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
@@ -40,7 +42,7 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         // iconName: '',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
         // ariaLabel: '',

diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js
@@ -18,12 +18,14 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       showOrdinal: true, // Show the map pin number on the card. Only supported for universal search
       title: profile.name, // The header text of the card
       // subtitle: '', // The sub-header text of the card
       url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       address: Formatter.address(profile), // The address for the card
       details: profile.description, // The text in the body of the card
@@ -48,7 +50,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
         label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
         iconName: 'chevron', // The icon to use for the CTA
         url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -58,7 +60,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         iconName: 'chevron',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: ''

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -145,7 +145,7 @@
     href="tel:{{card.phone}}"
     data-eventtype="TAP_TO_CALL"
     data-eventoptions='{{json card.phoneEventOptions}}'
-    target="_top">
+    target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
     {{card.phone}}
   </a>
 </div>

diff --git a/cards/job-standard/component.js b/cards/job-standard/component.js
@@ -12,10 +12,12 @@ class job_standardCardComponent extends BaseCard['job-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       // image: '', // The URL of the image to display on the card
       // tagLabel: '', // The label of the displayed image
       titleEventOptions: this.addDefaultEventOptions(),
@@ -33,7 +35,7 @@ class job_standardCardComponent extends BaseCard['job-standard'] {
         label: 'Apply Now', // The CTA's label
         iconName: 'briefcase', // The icon to use for the CTA
         url: profile.applicationUrl || profile.landingPageUrl, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA

diff --git a/cards/link-standard/component.js b/cards/link-standard/component.js
@@ -12,10 +12,12 @@ class link_standardCardComponent extends BaseCard['link-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.htmlTitle, // The header text of the card
       url: profile.link, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       // subtitle: '', // The sub-header text of the card
       // If the card's details are longer than a certain character count, you can truncate the

diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js
@@ -18,10 +18,12 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
    * @param {Object} profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.website || profile.landingPageUrl, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(), // The event options for title click analytics
       // subtitle: '', // The sub-header text of the card
       hours: Formatter.openStatus(profile),
@@ -38,7 +40,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
         label: 'Call', // The label of the CTA
         iconName: 'phone', // The icon to use for the CTA
         url: Formatter.phoneLink(profile), // The URL a user will be directed to when clicking
-        target: '_top', // If the URL will be opened in a new tab, etc.
+        target: linkTarget, // If the URL will be opened in a new tab, etc.
         eventType: 'TAP_TO_CALL', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(), // The analytics event options for CTA clicks
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -47,7 +49,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
         label: 'Get Directions',
         iconName: 'directions',
         url: Formatter.getDirectionsUrl(profile),
-        target: '_top',
+        target: linkTarget,
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -47,7 +47,7 @@
   <a class="HitchhikerLocationStandard-phone--mobile js-Hitchhiker-phone" href="tel:{{card.phone}}"
     data-eventtype="TAP_TO_CALL"
     data-eventoptions='{{json card.phoneEventOptions}}'
-    target="_top">
+    target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
     {{card.phone}}
   </a>
 </div>

diff --git a/cards/menuitem-standard/component.js b/cards/menuitem-standard/component.js
@@ -12,10 +12,12 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
       altText: Formatter.image(profile.c_photo).alternateText,  // The alternate text for the image
       // tagLabel: '', // The label of the displayed image
@@ -37,8 +39,8 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
       CTA1: {
         label: 'Order Now', // The CTA's label
         iconName: 'chevron', // The icon to use for the CTA
-        url: profile.orderUrl, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        url: profile.orderUrl && profile.orderUrl.url, // The URL a user will be directed to when clicking
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -48,7 +50,7 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
         label: 'View Menu',
         iconName: 'magnifying_glass',
         url: profile.landingPageUrl,
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/multilang-event-standard/component.js b/cards/multilang-event-standard/component.js
@@ -12,10 +12,12 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
    * @param profile profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.name, // The header text of the card
       url: profile.website, // If the card title is a clickable link, set URL here
-      target: '_top', // If the title's URL should open in a new tab, etc.
+      target: linkTarget, // If the title's URL should open in a new tab, etc.
       titleEventOptions: this.addDefaultEventOptions(),
       date: Formatter.bigDate(profile),
       subtitle: Formatter.dateRange(profile),
@@ -32,7 +34,7 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
         label: {{ translateJS phrase='RSVP' context='RSVP is a verb' }}, // The CTA's label
         iconName: 'calendar', // The icon to use for the CTA
         url: profile.ticketUrl || profile.website, // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened
+        target: linkTarget, // Where the new URL will be opened
         eventType: 'RSVP', // Type of Analytics event fired when clicking the CTA
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '', // Accessible text providing a descriptive label for the CTA
@@ -42,7 +44,7 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
         label: {{ translateJS phrase='Directions' }},
         iconName: 'directions',
         url: Formatter.getDirectionsUrl(profile),
-        target: '_top',
+        target: linkTarget,
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',

diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js
@@ -12,10 +12,12 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
    * @param {Object} profile of the entity in the card
    */
   dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
     return {
       title: profile.question || profile.name, // The header text of the card
       // subtitle: '', // The sub-header text of the card
-      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", "_top") : null, // The text in the body of the card
+      details: profile.answer ? ANSWERS.formatRichText(profile.answer, "answer", linkTarget) : null, // The text in the body of the card
       // If the card's details are longer than a certain character count, you can truncate the
       // text. A toggle will be supplied that can show or hide the truncated text.
       // showMoreDetails: {
@@ -29,7 +31,7 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
         label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
         // iconName: '', // The icon to use for the CTA
         url: Formatter.generateCTAFieldTypeLink(profile.c_primaryCTA), // The URL a user will be directed to when clicking
-        target: '_top', // Where the new URL will be opened. To open in a new tab use '_blank'
+        target: linkTarget, // Where the new URL will be opened. To open in a new tab use '_blank'
         eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
         // Event options for the analytics event fired when this CTA is clicked.
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
@@ -40,7 +42,7 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
         label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
         // iconName: '',
         url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
-        target: '_top',
+        target: linkTarget,
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
         // ariaLabel: '',