v1.28.0

### Features - Multi-lang versions of the `document-standard` result card and the `documentsearch-standard` direct answer card have been added. (#1041, #1039) - We automatically bump the `sdkVersion` in the `global_config` on upgrade. (#1031) ### Changes - RTF styling was added to the `event-standard`, `faq-accordion`, and `location-standard` cards. (#1037) - The default `universalSectionTemplate` for a `vertical-grid` page was updated to `grid-three-columns`. (#1038) ### Bugfixes - When clicking outside the iFrame'd experience, the query suggestions dropdown now closes. (#1034) - There was a bug with the custom `card` command. If the new card's name contained the name of the forked card, the former would not be added properly. This is now fixed. (#1036) - Previously, if there was a Map on the Universal page, a user could get stuck on the Map while scrolling down the page. This has been fixed. (#1030, #1042)
yext · Feb 8, 2022 · 402d4a5 · 402d4a5
2 parents 7f9eeac + 88f44a3
commit 402d4a5
Show file tree

Hide file tree

Showing 68 changed files with 1,106 additions and 377 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    node: true,
+    jest: true
+  },
+  parserOptions: {
+    ecmaVersion: 12
+  },
+  ignorePatterns: ['tests/**/fixtures/**/*.js'],
+  rules: {
+    'arrow-spacing': 'error',
+    quotes: ['error', 'single'],
+    'space-before-function-paren': ['error', {
+      named: 'never',
+      anonymous: 'never'
+    }],
+    'quote-props': ['error', 'as-needed'],
+    'max-len': ['error', {
+      code: 100
+    }],
+    'newline-before-return': 'warn',
+    semi: 'warn',
+    indent: ['warn', 2, { SwitchCase: 1 }]
+  }
+};
diff --git a/.github/run_browserstack_acceptance.sh b/.github/run_browserstack_acceptance.sh
@@ -5,13 +5,16 @@ GITHUB_BRANCH=${GITHUB_REF#refs/heads/}
 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
+export BROWSER=$1
+export CONCURRENCY=$2
+export BROWSERSTACK_DEBUG="true"
+export BROWSERSTACK_CONSOLE="verbose"
+export BROWSERSTACK_NETWORK_LOGS="true"
+export BROWSERSTACK_DISPLAY_RESOLUTION="1920x1080"
 
-if [[ $GITHUB_BRANCH == release/*
-  || $GITHUB_BRANCH == hotfix/*
-  || $GITHUB_BRANCH == master
-  || $GITHUB_BRANCH == support/* ]]
+if [[ -n $CONCURRENCY ]] # If $CONCURRENCY is non-zero
 then
-  npm run acceptance -- --browsers browserstack:[email protected] browserstack:safari browserstack:firefox
+  npm run acceptance -- --browsers $BROWSER --concurrency $CONCURRENCY
 else
-  npm run acceptance -- --browsers browserstack:[email protected] --concurrency 2
+  npm run acceptance -- --browsers $BROWSER 
 fi
diff --git a/.github/workflows/acceptance.yml b/.github/workflows/acceptance.yml
diff --git a/.github/workflows/acceptance_browserstack.yml b/.github/workflows/acceptance_browserstack.yml
@@ -0,0 +1,55 @@
+name: Browserstack Acceptance Tests
+
+on:
+  push:
+    branches-ignore: dev/*
+
+jobs:
+  browserstack-safari-acceptance-tests:
+    name: Safari Acceptance Tests (Browserstack)
+    runs-on: ubuntu-latest
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: npm ci
+      - run: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Run Acceptance Tests
+        run: ./.github/run_browserstack_acceptance.sh browserstack:safari
+  browserstack-firefox-acceptance-tests:
+    name: Firefox Acceptance Tests (Browserstack)
+    runs-on: ubuntu-latest
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: npm ci
+      - run: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Run Acceptance Tests
+        run: ./.github/run_browserstack_acceptance.sh browserstack:firefox
+  browserstack-ie11-acceptance-tests:
+    name: IE11 Acceptance Tests (Browserstack)
+    runs-on: ubuntu-latest
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: npm ci
+      - run: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Run Acceptance Tests
+        run: ./.github/run_browserstack_acceptance.sh browserstack:[email protected] 3
diff --git a/.github/workflows/acceptance_headless.yml b/.github/workflows/acceptance_headless.yml
@@ -0,0 +1,18 @@
+name: Headless Acceptance Tests
+
+on: push
+
+jobs:
+  headless-acceptance-tests:
+    name: Chrome Acceptance Tests (Headless)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 14
+      - run: npm ci
+      - run: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Run Acceptance Tests
+        run: npm run acceptance -- --browsers chrome:headless
diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js
@@ -28,7 +28,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
       // subtitle: '', // The sub-header text of the card
       hours: Formatter.openStatus(profile),
       // services: [], // Used for a comma delimited list of services for the location
-      address: Formatter.address(profile), // The address for the card
+      address: Formatter.address(profile) || profile.locationString || '', // The address for the card
       phone: Formatter.nationalizedPhoneDisplay(profile), // The phone number for the card
       phoneEventOptions: this.addDefaultEventOptions(), // The analytics event options for phone clicks
       distance: Formatter.toLocalizedDistance(profile), // Distance from the user’s or inputted location

diff --git a/cards/multilang-document-standard/component.js b/cards/multilang-document-standard/component.js
@@ -0,0 +1,73 @@
+{{> cards/card_component componentName='multilang-document-standard' }}
+
+class multilang_document_standardCardComponent extends BaseCard['multilang-document-standard'] {
+  constructor(config = {}, systemConfig = {}) {
+    super(config, systemConfig);
+  }
+
+  /**
+   * This returns an object that will be called `card`
+   * in the template. Put all mapping logic here.
+   *
+   * @param profile profile of the entity in the card
+   */
+  dataForRender(profile) {
+    let detailsData = '';
+    if (profile?.d_highlightedFields?.s_snippet) {
+      const { value, matchedSubstrings } = profile.d_highlightedFields.s_snippet;
+      detailsData = Formatter.highlightField(value, matchedSubstrings);
+    } else if (profile.s_snippet) {
+      detailsData = profile.s_snippet;
+    }
+
+    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.
+      // image: '', // The URL of the image to display on the card
+      // altText: '', // The alternate text for the image
+      titleEventOptions: this.addDefaultEventOptions(),
+      subtitle: profile.externalArticleUpdateDate ? {{ translateJS phrase='Last Updated on [[date]]' date=profile.externalArticleUpdateDate }} : '', // The sub-header text of the card
+      details: detailsData, // The text in the body of the card
+      // The primary CTA of the card
+      CTA1: {
+        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
+        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
+      },
+      // The secondary CTA of the card
+      CTA2: {
+        label: profile.c_secondaryCTA ? profile.c_secondaryCTA.label : null,
+        iconName: 'chevron',
+        url: Formatter.generateCTAFieldTypeLink(profile.c_secondaryCTA),
+        target: '_top',
+        eventType: 'CTA_CLICK',
+        eventOptions: this.addDefaultEventOptions(),
+        // ariaLabel: '',
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: {{ translateJS phrase='Thanks!' }}, // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down
+    };
+  }
+
+  /**
+   * The template to render
+   * @returns {string}
+   * @override
+   */
+  static defaultTemplateName (config) {
+    return 'cards/multilang-document-standard';
+  }
+}
+
+ANSWERS.registerTemplate(
+  'cards/multilang-document-standard',
+  {{{stringifyPartial (read 'cards/multilang-document-standard/template') }}}
+);
+ANSWERS.registerComponentType(multilang_document_standardCardComponent);
diff --git a/cards/multilang-document-standard/template.hbs b/cards/multilang-document-standard/template.hbs
@@ -0,0 +1,94 @@
+<div class="HitchhikerDocumentStandard {{cardName}}">
+  {{> image }}
+  <div class="HitchhikerDocumentStandard-body">
+    {{> title }}
+    {{> subtitle }}
+    <div class="HitchhikerDocumentStandard-contentWrapper">
+      <div class="HitchhikerDocumentStandard-info">
+        {{> details }}
+      </div>
+      {{> ctas }}
+    </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
+  </div>
+</div>
+
+{{#*inline 'image'}}
+{{#if card.image}}
+<div class="HitchhikerDocumentStandard-imgWrapper">
+  <img class="HitchhikerDocumentStandard-img" src="{{#unless (isNonRelativeUrl card.image)}}{{@root.relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}"/>
+</div>
+{{/if}}
+{{/inline}}
+
+{{#*inline 'title'}}
+{{#if card.title}}
+<div class="HitchhikerDocumentStandard-title">
+  {{#if card.url}}
+  <a class="HitchhikerDocumentStandard-titleLink js-HitchhikerDocumentStandard-titleLink"
+     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"{{/if}}>
+    {{card.title}}
+  </a>
+  {{else}}
+  {{card.title}}
+  {{/if}}
+</div>
+{{/if}}
+{{/inline}}
+
+{{#*inline 'subtitle'}}
+{{#if card.subtitle}}
+<div class="HitchhikerDocumentStandard-subtitle">
+  {{card.subtitle}}
+</div>
+{{/if}}
+{{/inline}}
+
+{{#*inline 'details'}}
+{{#if card.details}}
+<div class="HitchhikerDocumentStandard-cardDetails">
+  <div class="HitchhikerDocumentStandard-detailsText js-HitchhikerCard-detailsText">
+    {{{card.details}}}
+  </div>
+</div>
+{{/if}}
+{{/inline}}
+
+{{#*inline 'ctas'}}
+{{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
+<div class="HitchhikerDocumentStandard-ctasWrapper">
+  {{> CTA card.CTA1 ctaName="primaryCTA" }}
+  {{> CTA card.CTA2 ctaName="secondaryCTA" }}
+</div>
+{{/if}}
+{{/inline}}
+
+{{#*inline 'CTA'}}
+{{#if (all url label)}}
+<div class="HitchhikerDocumentStandard-{{ctaName}}">
+  <a class="HitchhikerCTA js-HitchhikerCTA{{#if modifiers}} {{modifiers}}{{/if}}"
+    href="{{#unless (isNonRelativeUrl url)}}{{@root.relativePath}}/{{/unless}}{{url}}"
+    data-eventtype="{{eventType}}"
+    data-eventoptions='{{json eventOptions}}'
+    target="{{#if target}}{{target}}{{else}}_top{{/if}}"
+    {{#if ariaLabel}}aria-label="{{ariaLabel}}"{{/if}}>
+    {{#if (any iconName iconUrl)}}
+    <div class="HitchhikerCTA-iconWrapper">
+      <div class="HitchhikerCTA-icon">
+        {{> icons/iconPartial
+            iconName=iconName
+            iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)
+        }}
+      </div>
+    </div>
+    {{/if}}
+    <div class='HitchhikerCTA-iconLabel'>
+      {{label}}
+    </div>
+  </a>
+</div>
+{{/if}}
+{{/inline}}
diff --git a/commands/cardcreator.js b/commands/cardcreator.js
@@ -156,7 +156,6 @@ class CardCreator {
    */
   _getRenamedCardComponent(content, customCardName) {
     const cardNameSuffix = 'CardComponent';
-    const registerComponentTypeRegex = /\([\w_]+CardComponent\)/g;
     const regexArray = [...content.matchAll(/componentName\s*=\s*'(.*)'/g)];
     if (regexArray.length === 0 || regexArray[0].length < 2) {
       return content;
@@ -167,10 +166,9 @@ class CardCreator {
       customCardName.replace(/-/g, '_') + cardNameSuffix;
 
     return content
-      .replace(/class (.*) extends/g, `class ${customComponentClassName} extends`)
-      .replace(registerComponentTypeRegex, `(${customComponentClassName})`)
       .replace(new RegExp(originalComponentName, 'g'), customCardName)
-      .replace(/cards[/_](.*)[/_]template/g, `cards/${customCardName}/template`);
+      .replace(/(class )(.*)( extends)/g, `$1${customComponentClassName}$3`)
+      .replace(/(ANSWERS.registerComponentType\()(.*)(\))/g, `$1${customComponentClassName}$3`);
   }
 }
 module.exports = CardCreator;
diff --git a/commands/directanswercardcreator.js b/commands/directanswercardcreator.js
@@ -158,7 +158,6 @@ class DirectAnswerCardCreator {
    */
   _getRenamedCardComponent(content, customCardName) {
     const cardNameSuffix = 'Component';
-    const registerComponentTypeRegex = /\([\w_]+Component\)/g;
     const regexArray = [...content.matchAll(/componentName\s*=\s*'(.*)'/g)];
     if (regexArray.length === 0 || regexArray[0].length < 2) {
       return content;
@@ -169,12 +168,9 @@ class DirectAnswerCardCreator {
       customCardName.replace(/-/g, '_') + cardNameSuffix;
 
     return content
-      .replace(/class (.*) extends/g, `class ${customComponentClassName} extends`)
-      .replace(registerComponentTypeRegex, `(${customComponentClassName})`)
       .replace(new RegExp(originalComponentName, 'g'), customCardName)
-      .replace(
-        /directanswercards[/_](.*)[/_]template/g,
-        `directanswercards/${customCardName}/template`);
+      .replace(/(class )(.*)( extends)/g, `$1${customComponentClassName}$3`)
+      .replace(/(ANSWERS.registerComponentType\()(.*)(\))/g, `$1${customComponentClassName}$3`);
   }
 }
 

diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs
@@ -19,7 +19,7 @@
 
 {{#*inline 'icon'}}
 {{#if (any iconName iconUrl)}}
-<div class="HitchhikerAllFieldsStandard-titleIconWrapper"></div>
+<div class="HitchhikerAllFieldsStandard-titleIconWrapper">
   {{> icons/iconPartial
       iconName=iconName
       iconUrl=(relativePathHandler url=iconUrl relativePath=@root.relativePath)