Merge 3e59484 into d0cc365

.github/workflows/percy-snapshots.yml

@@ -6,25 +6,98 @@ on:
   pull_request:
 
 jobs:
-  build:
+  nonce:
     runs-on: ubuntu-latest
+    outputs:
+      result: ${{ steps.nonce.outputs.result }}
+    steps:
+    - id: nonce
+      run: echo "::set-output name=result::${{ github.run_id }}-$(date +%s)"
+
+  default-snapshots:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.18]
+    needs: nonce
+    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: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Percy snapshots
+        run: npx percy exec --parallel -- node tests/percy/index.js
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }}
+          PERCY_PARALLEL_TOTAL: 4
 
+  iframe-snapshots:
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         node-version: [12.18]
+    needs: nonce
+    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: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Percy snapshots
+        run: npx percy exec --parallel -- node tests/percy/index.js iframe
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }}
+          PERCY_PARALLEL_TOTAL: 4
 
+  spanish-snapshots:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.18]
+    needs: nonce
+    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: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Percy snapshots
+        run: npx percy exec --parallel -- node tests/percy/index.js spanish
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }}
+          PERCY_PARALLEL_TOTAL: 4
+
+  rtl-snapshots:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.18]
+    needs: nonce
     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: npm run setup-test-site
-    - run: npm run build-test-site
-    - name: Percy snapshots
-      uses: percy/exec-action@v0.3.1
-      with:
-        command: node tests/percy/index.js
-      env:
-        PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+      - 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: npm run setup-test-site
+      - run: npm run build-test-site
+      - name: Percy snapshots
+        run: npx percy exec --parallel -- node tests/percy/index.js rtl
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+          PERCY_PARALLEL_NONCE: ${{ needs.nonce.outputs.result }}
+          PERCY_PARALLEL_TOTAL: 4

.github/workflows/wcag_test.yml

@@ -0,0 +1,24 @@
+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 setup-test-site
+    - run: npm run build-test-site
+    - run: npm run wcag

cards/card_component.js

@@ -30,6 +30,38 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
         })
       );
     }
+
+    this.addFeedbackListeners();
+  }
+
+  addFeedbackListeners() {
+    const feedbackFormSelector = '.js-HitchhikerCard-feedbackForm';
+    let feedbackFormEl = this._container.querySelector(feedbackFormSelector);
+    if (feedbackFormEl) {
+      // For WCAG compliance, the feedback should be a submittable form
+      feedbackFormEl.addEventListener('submit', (e) => {
+        const formTargetEl = e.target;
+        const isGood = formTargetEl.querySelector('input:checked').value === 'true';
+
+        this.reportQuality(isGood);
+        this.updateState({
+          feedbackSubmitted: true
+        });
+      });
+
+      let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
+      if (thumbSelectorEls) {
+        thumbSelectorEls.forEach(el => {
+          el.addEventListener('click', (e) => {
+            let input = el.querySelector('input');
+            if (input) {
+              input.checked = true;
+            }
+            HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit');
+          });
+        });
+      }
+    }
   }
 
   setState(data) {
@@ -46,7 +78,9 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
       cardData.titleEventOptions = updatedEventOptions;
     }
 
-    let { details, showMoreDetails } = cardData;
+    cardData.feedbackEnabled = ANSWERS.getAnalyticsOptIn() && cardData.feedback;
+
+    const { details, showMoreDetails } = cardData;
 
     const cardDetails = details || '';
     const cardShowMoreConfig = showMoreDetails || {};
@@ -56,7 +90,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     // The card's details must extend past this limit as well for the toggling to be enabled.
     const showExcessDetailsToggle = showMoreLimit && cardDetails.length > showMoreLimit;
 
-    let truncatedDetails = showExcessDetailsToggle
+    const truncatedDetails = showExcessDetailsToggle
       ? `${cardDetails.substring(0, showMoreLimit)}...`
       : '';
 
@@ -78,6 +112,42 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
     }
   }
 
+  /**
+   * reportQuality will send the quality feedback to analytics
+   * @param {boolean} isGood true if the answer is what you were looking for
+   */
+  reportQuality(isGood) {
+    /**
+     * EventTypes are explicit strings defined
+     * for what the server expects for analytics.
+     *
+     * @enum
+     */
+    const EventTypes = {
+      THUMBS_UP: 'THUMBS_UP',
+      THUMBS_DOWN: 'THUMBS_DOWN'
+    };
+    const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN;
+    const event = new ANSWERS.AnalyticsEvent(eventType)
+      .addOptions({
+        directAnswer: false,
+        verticalKey: this.verticalKey,
+        searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL',
+        entityId: this.result.id
+      });
+
+    this.analyticsReporter.report(event);
+  }
+
+  /**
+   * updateState enables for partial updates (the delta between the old and new)
+   * @type {object} The new state to apply to the old
+   */
+  updateState (state = {}) {
+    const newState = Object.assign({}, this.getState(), state);
+    this.setState(newState);
+  }
+
   addDefaultEventOptions(eventOptions = {}) {
     return Object.assign({}, {
         verticalKey: this.verticalKey,

cards/common-partials/thumbsfeedback.hbs

@@ -0,0 +1,56 @@
+{{#if feedbackEnabled}}
+  {{#if directAnswerClass}}
+    {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}}
+  {{else}}
+    {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}}
+  {{/if}}
+{{/if}}
+
+{{#*inline 'feedback'}}
+  <div class="{{className}}-feedbackWrapper">
+    <div class="{{className}}-feedbackContent">
+      {{#if feedbackSubmitted}}
+        <div class="{{className}}-feedbackText">
+          {{feedbackTextOnSubmission}}
+        </div>
+      {{else}}
+        {{#if feedbackText}}
+          <div class="{{className}}-feedbackText">
+            {{feedbackText}}
+          </div>
+        {{/if}}
+        <div class="{{className}}-thumbsWrapper">
+          <form class="HitchhikerCard-thumbs js-{{cardType}}-feedbackForm">
+            <fieldset class="HitchhikerCard-fieldset">
+              <label class="HitchhikerCard-thumb">
+                <span class="HitchhikerCard-thumbUpIcon">
+                  {{> icons/builtInIcon iconName='thumb' }}
+                </span>
+                <input type="radio"
+                  name="feedback"
+                  value="true"
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-{{cardType}}-thumbInput">
+                <span class="sr-only">
+                  {{positiveFeedbackSrText}}
+                </span>
+              </label>
+              <label class="HitchhikerCard-thumb">
+                <span class="HitchhikerCard-thumbDownIcon">
+                  {{> icons/builtInIcon iconName='thumb' }}
+                </span>
+                <input type="radio"
+                  name="feedback"
+                  value="false"
+                  class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-{{cardType}}-thumbInput">
+                <span class="sr-only">
+                  {{negativeFeedbackSrText}}
+                </span>
+              </label>
+            </fieldset>
+            <button type="submit" class="sr-only sr-only-focusable">Send feedback</button>
+          </form>
+        </div>
+      {{/if}}
+    </div>
+  </div>
+{{/inline}}

cards/document-standard/component.js

@@ -48,7 +48,11 @@ class document_standardCardComponent extends BaseCard['document-standard'] {
         eventType: 'CTA_CLICK',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',
-      }
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thanks!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }
 

cards/document-standard/template.hbs

@@ -9,6 +9,7 @@
       </div>
       {{> ctas }}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 
@@ -90,4 +91,4 @@
   </a>
 </div>
 {{/if}}
-{{/inline}}
+{{/inline}}

cards/event-standard/component.js

@@ -48,7 +48,11 @@ class event_standardCardComponent extends BaseCard['event-standard'] {
         eventType: 'DRIVING_DIRECTIONS',
         eventOptions: this.addDefaultEventOptions(),
         // ariaLabel: '',
-      }
+      },
+      feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+      feedbackTextOnSubmission: 'Thanks!', // Text to display after a thumbs up/down is clicked
+      positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up
+      negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down
     };
   }
 

cards/event-standard/template.hbs

@@ -33,24 +33,25 @@
         {{> 'details'}}
       </div>
       {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-      <div class="HitchhikerEventStandard-ctasWrapper">
-        {{#if (all card.CTA1.url card.CTA1.label)}}
-        <div class="HitchhikerEventStandard-primaryCTA">
-          {{#with card.CTA1}}
-            {{> CTA }}
-          {{/with}}
-        </div>
-        {{/if}}
-        {{#if (all card.CTA2.url card.CTA2.label)}}
-        <div class="HitchhikerEventStandard-secondaryCTA">
-          {{#with card.CTA2}}
-            {{> CTA }}
-          {{/with}}
+        <div class="HitchhikerEventStandard-ctasWrapper">
+          {{#if (all card.CTA1.url card.CTA1.label)}}
+          <div class="HitchhikerEventStandard-primaryCTA">
+            {{#with card.CTA1}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
+          {{#if (all card.CTA2.url card.CTA2.label)}}
+          <div class="HitchhikerEventStandard-secondaryCTA">
+            {{#with card.CTA2}}
+              {{> CTA }}
+            {{/with}}
+          </div>
+          {{/if}}
         </div>
-        {{/if}}
-      </div>
       {{/if}}
     </div>
+    {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
   </div>
 </div>
 
@@ -109,4 +110,4 @@
       {{label}}
     </div>
   </a>
-{{/inline}}
+{{/inline}}