Version 1.23.0 (#933)

### Features - Support for new languages including Chinese (Traditional), Chinese (Simplified), Russian, Polish, Portuguese, Dutch, Arabic, Korean, Swedish, and Hindi (#918) (#900) - A loading indicator can now be enabled on the search bar (#875) - Voice search support (#894) - Analytics, session tracking, and query source can now be toggled through Runtime Config (#869) (#879) - Added validation to ensure that parts of global_config and page configs are valid (#888) - Font preloads are now located in the layouts/preload-fonts.hbs file (#893) - Global config now includes "sessionTrackingEnabled" and "analyticsEventsEnabled" (#898) - Added a partial for additional Answers configuration (#903) - Map pins now support custom label colors (#922) ### Enhancements - The full-page-map "Search This Area" functionality is better optimized when a user quickly zooms in or out of the map (#861) - Improved build time during development mode (#865) - Icons were updated from components to Handlebars partials to improve performance (#874) ### Bugfixes - When upgrading the theme version, the global config will no longer contain duplicate options which are commented out (#916) - When upgrading the theme, the tests folders are now removed which improves build performance (#913)
yext · Aug 24, 2021 · 6e4a9d6 · 6e4a9d6
2 parents 71f9d21 + 4fe89e7
commit 6e4a9d6
Show file tree

Hide file tree

Showing 220 changed files with 6,885 additions and 2,370 deletions.
diff --git a/.github/run_browserstack_acceptance.sh b/.github/run_browserstack_acceptance.sh
@@ -6,4 +6,12 @@ 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 browserstack:firefox
+if [[ $GITHUB_BRANCH == release/*
+  || $GITHUB_BRANCH == hotfix/*
+  || $GITHUB_BRANCH == master
+  || $GITHUB_BRANCH == support/* ]]
+then
+  npm run acceptance -- --browsers browserstack:[email protected] browserstack:safari browserstack:firefox
+else
+  npm run acceptance -- --browsers browserstack:[email protected] --concurrency 2
+fi
diff --git a/.github/run_translation_verification.sh b/.github/run_translation_verification.sh
@@ -0,0 +1,31 @@
+#!/bin/bash
+
+set -e
+
+# Verifiy that the messages.pot file in the repo is up to date
+# If there is a git diff after translations are extracted, the checked-in file is out of date
+npm run extract-translations
+git diff --exit-code translations/messages.pot > /dev/null # send stdout to /dev/null to reduce clutter in the CI output
+diff_exit_code=$?
+
+if test $diff_exit_code -eq 1
+then
+  echo "Extracted translations are out of date. Run 'npm run extract-translations' and commit the updated pot file."
+  exit 1
+else
+  echo "The messages.pot translation file is up to date."
+fi
+
+# Verify that translations are present for all languages
+cd translations
+if [[ $GITHUB_BASE_REF == refs/heads/release/*
+  || $GITHUB_BASE_REF == refs/heads/hotfix/*
+  || $GITHUB_BASE_REF == refs/heads/master
+  || $GITHUB_BASE_REF == refs/heads/support/* ]]
+then
+  for po_file in *.po
+    do msgcmp $po_file messages.pot
+  done
+else
+  echo "Skipping the verification that all translations are present"
+fi
diff --git a/.github/workflows/translation-test.yml b/.github/workflows/translation-test.yml
@@ -0,0 +1,22 @@
+name: Translation Test
+
+on:
+  pull_request:
+
+jobs:
+  build:
+    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: sudo apt-get install -qq gettext
+    - name: 'translation verification'
+      run: ./.github/run_translation_verification.sh
diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
@@ -76,10 +76,12 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
+      </div>
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>

diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
@@ -73,13 +73,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -95,10 +97,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}

diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
@@ -7,10 +7,8 @@
     <h3 class="HitchhikerFaqAccordion-title">
       {{{card.title}}}
     </h3>
-    <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}"
-      data-component="IconComponent"
-      data-opts='{"iconName": "chevron"}'
-      data-prop="icon">
+    <div class="HitchhikerFaqAccordion-icon js-HitchhikerFaqAccordion-icon{{#if card.isExpanded}} HitchhikerFaqAccordion-icon--expanded{{/if}}">
+      {{> icons/builtInIcon iconName='chevron' }}
     </div>
   </button>
   <div class="HitchhikerFaqAccordion-content js-HitchhikerFaqAccordion-content"
@@ -61,13 +59,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -83,10 +83,11 @@
    {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
   {{#if (any iconName iconUrl)}}
   <div class="HitchhikerCTA-iconWrapper">
-    <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-      "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-      "iconName": "{{iconName}}"
-    }'>
+    <div class="HitchhikerCTA-icon">
+      {{> icons/iconPartial
+          iconName=iconName
+          iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+      }}
     </div>
   </div>
   {{/if}}

diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
@@ -102,13 +102,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -172,10 +174,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{iconUrl}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}

diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
@@ -65,13 +65,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -96,10 +98,12 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'></div>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
+      </div>
     </div>
     {{/if}}
     <div class='HitchhikerCTA-iconLabel'>

diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
@@ -18,7 +18,7 @@
      data-eventoptions='{{json card.titleEventOptions}}'
      target={{#if card.target}}"{{card.target}}"{{else}}"_top"{{/if}}>
     {{{card.title}}}
-    {{> chevron_icon }}
+    {{> icons/builtInIcon iconName='chevron'}}
   </a>
   {{else}}
   {{{card.title}}}
@@ -27,14 +27,6 @@
 {{/if}}
 {{/inline}}
 
-{{#*inline 'chevron_icon'}}
-<svg viewBox="0 0 7 9" xmlns="http://www.w3.org/2000/svg">
-  <g transform="translate(-1 -8)">
-    <path d="m2.6417004 8-1.1417004 1.0575 3.70850202 3.4425-3.70850202 3.4425 1.1417004 1.0575 4.8582996-4.5z"></path>
-  </g>
-</svg>
-{{/inline}}
-
 {{#*inline 'subtitle'}}
 {{#if card.subtitle}}
 <div class="HitchhikerLinkStandard-subtitle">
@@ -62,13 +54,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>

diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
@@ -90,10 +90,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}
@@ -185,13 +186,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>

diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
@@ -92,13 +92,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -116,10 +118,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}

diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
@@ -73,13 +73,15 @@
   {{#if showExcessDetailsToggle}}
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
     {{card.showMoreDetails.showMoreText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseDown" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseDown' }}
+    </span>
   </button>
   <button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle js-hidden">
     {{card.showMoreDetails.showLessText}}
-    <span data-component="IconComponent"
-      data-opts='{ "iconName": "chevron", "classNames": "Icon--sm Icon-collapseUp" }'></span>
+    <span>
+      {{> icons/builtInIcon iconName='chevron' classNames='Icon--sm Icon--collapseUp' }}
+    </span>
   </button>
   {{/if}}
 </div>
@@ -95,10 +97,11 @@
     {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
     {{#if (any iconName iconUrl)}}
     <div class="HitchhikerCTA-iconWrapper">
-      <div class="HitchhikerCTA-icon" data-component="IconComponent" data-opts='{
-        "iconUrl": "{{#if iconUrl}}{{#unless (isNonRelativeUrl iconUrl)}}{{@root.relativePath}}/{{/unless}}{{iconUrl}}{{/if}}",
-        "iconName": "{{iconName}}"
-      }'>
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
       </div>
     </div>
     {{/if}}