v1.20.0

## Version 1.20.0 ### Changes - Added the `vertical` custom command. This command allows the user to quickly spin up a page for a particular vertical. Some of the page's configuration, such as `verticalKey` and `cardType` is pre-populated. (#588) - A new page template was added: `vertical-full-page-map`. This template creates a Locator-style page. On Desktop, there is a full page map with a list of results overlaid on top. Clicking a pin on the map highlights the corresponding result in the list. On Mobile, users can toggle between a full-screen map or list view. - A new formatter,`highlightField`, was created. The formatter takes in a string and indices of the substrings to highlight. These substrings are then wrapped in `<mark>` tags. (#582) - The `documentsearch-standard` card was added. This card supports the new `FEATURED_SNIPPET` type direct answers. (#584) - A new universal section template was added: `grid-four-columns`. This layout, as the name suggests, organizes the results into a grid of four columns. (#622, #653) ### Bug Fixes - Out of date or vulnerable dependencies were updated. (#667) - Missing null checks for CTA label were added for the accordion-type cards. (#619) - A custom footer is now hidden when collapsible filters are active. Previously, only the built-in Theme footer would be hidden. (#630)
yext · Apr 13, 2021 · 7cd08d3 · 7cd08d3
2 parents ca3be6d + 1e8a236
commit 7cd08d3
Show file tree

Hide file tree

Showing 208 changed files with 13,864 additions and 859 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+*.json  linguist-language=JSON-with-Comments
diff --git a/README.md b/README.md
@@ -0,0 +1,74 @@
+# Answers Hitchhiker Theme
+
+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/.
+
+Need help? Ask a question in the [Hitchhiker's Community](https://hitchhikers.yext.com/community/c/answers).
+
+## Getting Started
+
+### Prerequisites
+- Jambo, a static site generator, which can be installed with `npm i jambo`
+- An Answers experience configured at https://yext.com. This will provide the `experienceKey` and the `apiKey`
+
+### Creating an Answers site
+
+Inside a new directory, initialize jambo with the theme:
+```bash
+npx jambo init --theme answers-hitchhiker-theme
+```
+
+Add a universal search page:
+```bash
+npx jambo page --name index --template universal-standard
+```
+
+Inside config/global_config.json, delete the "//" before "apiKey" and enter your `apiKey`. Do the same for the `experienceKey` inside config/locale_config.json.
+You can find examples inside test-site/config.
+
+Build the site:
+```bash
+npx jambo build && grunt webpack
+```
+
+Finally, serve the site:
+```bash
+npx serve public
+```
+
+The site should now be available at http://localhost:5000.
+
+## Custom Jambo Commands
+
+This theme makes the following commands available when Jambo imports this theme.
+
+### Vertical Command
+Creates a vertical page of an Answers experience.
+
+Example usage:
+```bash
+npx jambo vertical --name Locations --verticalKey locations --template vertical-standard
+```
+
+See `jambo vertical --help` for more info.
+
+### Card Command
+Creates a new, custom card based on an existing card.
+
+Example usage:
+```bash
+npx jambo card --name custom-location --templateCardFolder cards/location-standard
+```
+
+See `jambo card --help` for more info.
+
+### Direct Answer Card
+Creates a new, custom direct answer card.
+
+Example usage:
+```bash
+npx jambo directanswercard --name custom-directanswer --templateCardFolder directanswercards/allfields-standard
+```
+
+See `jambo directanswercard --help` for more info.
diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js
@@ -13,7 +13,7 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
    */
   dataForRender(profile) {
     return {
-      title: profile.name, // The header text of the card
+      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
       // If the card's details are longer than a certain character count, you can truncate the

diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
@@ -21,7 +21,7 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+    {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
       <div class="HitchhikerFaqAccordion-ctasWrapper">
         {{#if card.CTA1.url}}
         <div class="HitchhikerFaqAccordion-primaryCTA">

diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js
@@ -5,6 +5,12 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
     super(config, systemConfig);
   }
 
+  onMount() {
+    const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
+    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    super.onMount();
+  }
+
   /**
    * This returns an object that will be called `card`
    * in the template. Put all mapping logic here.
@@ -13,7 +19,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
    */
   dataForRender(profile) {
     return {
-      showOrdinal: true, // Whether to display the corresponding map pin number on the card
+      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

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -1,16 +1,19 @@
-<div class="HitchhikerFinancialProfessionalLocation {{cardName}}">
+<div class="HitchhikerFinancialProfessionalLocation HitchhikerLocationCard {{cardName}}">
   {{> image }}
   <div class="HitchhikerFinancialProfessionalLocation-body">
     {{#if (any card.title card.distance)}}
     <div class="HitchhikerFinancialProfessionalLocation-topRow">
       {{> ordinal }}
       {{> title }}
-      {{> distance }}
+      <div class="HitchhikerLocationCard-closeCardButtonWrapper">
+        {{> closeCardButton }}
+        {{> distance }}
+      </div>
     </div>
     {{/if}}
     {{> subtitle }}
     <div class="HitchhikerFinancialProfessionalLocation-contentWrapper">
-      <div class="HitchhikerFinancialProfessionalLocation-info">
+      <div class="HitchhikerFinancialProfessionalLocation-info HitchhikerLocationCard-info">
         {{> address }}
         {{> details }}
         {{> list }}
@@ -33,7 +36,7 @@
 
 {{#*inline 'ordinal'}}
 {{#if card.showOrdinal}}
-<div class="HitchhikerFinancialProfessionalLocation-ordinal">
+<div class="HitchhikerFinancialProfessionalLocation-ordinal HitchhikerLocationCard-ordinal">
   {{result.ordinal}}
 </div>
 {{/if}}
@@ -44,7 +47,7 @@
 <div class="HitchhikerFinancialProfessionalLocation-title">
   {{#if card.url}}
   <a class="HitchhikerFinancialProfessionalLocation-titleLink js-HitchhikerFinancialProfessionalLocation-titleLink"
-    href="{{#unless (isNonRelativeUrl card.url}}{{@root.relativePath}}/{{/unless}}{{card.url}}"
+    href="{{#unless (isNonRelativeUrl card.url)}}{{@root.relativePath}}/{{/unless}}{{card.url}}"
     data-eventtype="TITLE_CLICK" data-eventoptions='{{json card.titleEventOptions}}'
     target={{#if card.target}}"{{card.target}}"{{else}}"_top" rel="noopener noreferrer nofollow" {{/if}}>
     {{card.title}}
@@ -151,7 +154,7 @@
 
 {{#*inline 'ctas'}}
 {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-<div class="HitchhikerFinancialProfessionalLocation-ctasWrapper">
+<div class="HitchhikerFinancialProfessionalLocation-ctasWrapper HitchhikerLocationCard-ctasWrapper">
   {{> CTA card.CTA1 ctaName="primaryCTA" }}
   {{> CTA card.CTA2 ctaName="secondaryCTA" }}
 </div>
@@ -182,4 +185,13 @@
   </a>
 </div>
 {{/if}}
+{{/inline}}
+
+{{#*inline 'closeCardButton'}}
+<button class="HitchhikerFinancialProfessionalLocation-closeCardButton HitchhikerLocationCard-closeCardButton js-HitchhikerLocationCard-closeCardButton">
+  <span class="HitchhikerLocationCard-closeCardButtonImageWrapper">
+    {{ close-card-svg }}
+  </span>
+  <span class="sr-only">Close Card</span>
+</button>
 {{/inline}}
diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js
@@ -5,6 +5,12 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
     super(config, systemConfig);
   }
 
+  onMount() {
+    const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
+    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    super.onMount();
+  }
+
   /**
    * This returns an object that will be called `card`
    * in the template. Put all mapping logic here.
@@ -27,7 +33,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
       // details: profile.description, // The description for the card, displays below the address and phone
       // altText: '', // The alt-text of the displayed image
       // image: '', // The URL of the image to display on the card
-      showOrdinal: true, // If the ordinal should be displayed on the card
+      showOrdinal: true, // Show the map pin number on the card. Only supported for universal search
       CTA1: { // The primary call to action for the card
         label: 'Call', // The label of the CTA
         iconName: 'phone', // The icon to use for the CTA

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -2,21 +2,24 @@
     any card template. This value contains the ordinal of the card.
 }}
 
-<div class="HitchhikerLocationStandard {{cardName}}">
+<div class="HitchhikerLocationStandard HitchhikerLocationCard {{cardName}}">
   {{> image }}
   <div class="HitchhikerLocationStandard-contentWrapper">
     {{#if (any card.title card.distance)}}
     <div class="HitchhikerLocationStandard-topRow">
       {{> ordinalAndTitle displayOrdinal=(all card.showOrdinal result.ordinal) }}
-      {{> distance }}
+      <div class="HitchhikerLocationCard-closeCardButtonWrapper">
+        {{> closeCardButton }}
+        {{> distance }}
+      </div>
     </div>
     {{/if}}
     {{#if card.subtitle}}
     <div class="HitchhikerLocationStandard-subtitle">
       {{card.subtitle}}
     </div>
     {{/if}}
-    <div class="HitchhikerLocationStandard-content">
+    <div class="HitchhikerLocationStandard-content HitchhikerLocationCard-content">
       <div class="HitchhikerLocationStandard-infoWrapper">
         {{> contactInfo }}
         {{> details }}
@@ -69,7 +72,7 @@
 
 {{#*inline 'ctas'}}
 {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-<div class="HitchhikerLocationStandard-ctasWrapper">
+<div class="HitchhikerLocationStandard-ctasWrapper HitchhikerLocationCard-ctasWrapper">
   {{> CTA card.CTA1 ctaName="primaryCTA" }}
   {{> CTA card.CTA2 ctaName="secondaryCTA" }}
 </div>
@@ -106,7 +109,7 @@
 {{#if (any displayOrdinal card.title)}}
 <div class="HitchhikerLocationStandard-ordinalAndTitle">
   {{#if displayOrdinal}}
-  <div class="HitchhikerLocationStandard-ordinal">
+  <div class="HitchhikerLocationStandard-ordinal HitchhikerLocationCard-ordinal">
     {{result.ordinal}}
   </div>
   {{/if}}
@@ -194,3 +197,12 @@
 </div>
 {{/if}}
 {{/inline}}
+
+{{#*inline 'closeCardButton'}}
+<button class="HitchhikerLocationStandard-closeCardButton HitchhikerLocationCard-closeCardButton js-HitchhikerLocationCard-closeCardButton">
+  <span class="HitchhikerLocationCard-closeCardButtonImageWrapper">
+    {{ close-card-svg }}
+  </span>
+  <span class="sr-only">Close Card</span>
+</button>
+{{/inline}}
diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js
@@ -13,7 +13,7 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
    */
   dataForRender(profile) {
     return {
-      title: profile.name, // The header text of the card
+      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
       // If the card's details are longer than a certain character count, you can truncate the

diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
@@ -21,7 +21,7 @@
       </div>
     {{/if}}
     {{> 'details'}}
-    {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+    {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
       <div class="HitchhikerFaqAccordion-ctasWrapper">
         {{#if card.CTA1.url}}
         <div class="HitchhikerFaqAccordion-primaryCTA">

diff --git a/cards/multilang-financial-professional-location/component.js b/cards/multilang-financial-professional-location/component.js
@@ -5,6 +5,12 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
     super(config, systemConfig);
   }
 
+  onMount() {
+    const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
+    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    super.onMount();
+  }
+
   /**
    * This returns an object that will be called `card`
    * in the template. Put all mapping logic here.
@@ -13,7 +19,7 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
    */
   dataForRender(profile) {
     return {
-      showOrdinal: true, // Whether to display the corresponding map pin number on the card
+      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

diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
@@ -1,16 +1,19 @@
-<div class="HitchhikerFinancialProfessionalLocation {{cardName}}">
+<div class="HitchhikerFinancialProfessionalLocation HitchhikerLocationCard {{cardName}}">
   {{> image }}
   <div class="HitchhikerFinancialProfessionalLocation-body">
     {{#if (any card.title card.distance)}}
     <div class="HitchhikerFinancialProfessionalLocation-topRow">
       {{> ordinal }}
       {{> title }}
-      {{> distance }}
+      <div class="HitchhikerLocationCard-closeCardButtonWrapper">
+        {{> closeCardButton }}
+        {{> distance }}
+      </div>
     </div>
     {{/if}}
     {{> subtitle }}
     <div class="HitchhikerFinancialProfessionalLocation-contentWrapper">
-      <div class="HitchhikerFinancialProfessionalLocation-info">
+      <div class="HitchhikerFinancialProfessionalLocation-info HitchhikerLocationCard-info">
         {{> address }}
         {{> details }}
         {{> list }}
@@ -33,7 +36,7 @@
 
 {{#*inline 'ordinal'}}
 {{#if card.showOrdinal}}
-<div class="HitchhikerFinancialProfessionalLocation-ordinal">
+<div class="HitchhikerFinancialProfessionalLocation-ordinal HitchhikerLocationCard-ordinal">
   {{result.ordinal}}
 </div>
 {{/if}}
@@ -151,7 +154,7 @@
 
 {{#*inline 'ctas'}}
 {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-<div class="HitchhikerFinancialProfessionalLocation-ctasWrapper">
+<div class="HitchhikerFinancialProfessionalLocation-ctasWrapper HitchhikerLocationCard-ctasWrapper">
   {{> CTA card.CTA1 ctaName="primaryCTA" }}
   {{> CTA card.CTA2 ctaName="secondaryCTA" }}
 </div>
@@ -182,4 +185,13 @@
   </a>
 </div>
 {{/if}}
+{{/inline}}
+
+{{#*inline 'closeCardButton'}}
+<button class="HitchhikerFinancialProfessionalLocation-closeCardButton HitchhikerLocationCard-closeCardButton js-HitchhikerLocationCard-closeCardButton">
+  <span class="HitchhikerLocationCard-closeCardButtonImageWrapper">
+    {{ close-card-svg }}
+  </span>
+  <span class="sr-only">{{translate phrase='Close Card' context='Close is a verb'}}</span>
+</button>
 {{/inline}}
diff --git a/cards/multilang-location-standard/component.js b/cards/multilang-location-standard/component.js
@@ -5,6 +5,12 @@ class multilang_location_standardCardComponent extends BaseCard['multilang-locat
     super(config, systemConfig);
   }
 
+  onMount() {
+    const onVerticalFullPageMap = !!document.querySelector('.js-answersVerticalFullPageMap');
+    onVerticalFullPageMap && new VerticalFullPageMap.CardListenerAssigner({card: this}).addListenersToCard();
+    super.onMount();
+  }
+
   /**
    * This returns an object that will be called `card`
    * in the template. Put all mapping logic here.
@@ -27,7 +33,7 @@ class multilang_location_standardCardComponent extends BaseCard['multilang-locat
       // details: profile.description, // The description for the card, displays below the address and phone
       // altText: '', // The alt-text of the displayed image
       // image: '', // The URL of the image to display on the card
-      showOrdinal: true, // If the ordinal should be displayed on the card
+      showOrdinal: true, // Show the map pin number on the card. Only supported for universal search
       CTA1: { // The primary call to action for the card
         label: {{ translateJS phrase='Call' context='Call is a verb' }}, // The label of the CTA
         iconName: 'phone', // The icon to use for the CTA