diff --git a/cards/card_component.js b/cards/card_component.js
index 78a1a01b0..5d51e91e7 100644
--- a/cards/card_component.js
+++ b/cards/card_component.js
@@ -26,6 +26,8 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
})
);
}
+
+ this.addFeedbackListeners();
const rtfElement = this._container.querySelector('.js-yxt-rtfValue');
if (rtfElement) {
@@ -34,6 +36,36 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
}
}
+ 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) {
const { _raw, ...derivedFields } = this.result;
const profile = { ..._raw };
@@ -48,7 +80,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component {
cardData.titleEventOptions = updatedEventOptions;
}
- let { details, showMoreDetails } = cardData;
+ const { details, showMoreDetails } = cardData;
const cardDetails = details || '';
const cardShowMoreConfig = showMoreDetails || {};
@@ -58,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)}...`
: '';
@@ -80,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,
diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs
index 0d29f674f..ea905ed3d 100644
--- a/cards/common-partials/thumbsfeedback.hbs
+++ b/cards/common-partials/thumbsfeedback.hbs
@@ -1,5 +1,5 @@
-
+
{{#if feedbackSubmitted}}
{{feedbackTextOnSubmission}}
@@ -11,7 +11,13 @@
{{/if}}
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
index edf7bf258..3f3eba419 100644
--- a/cards/event-standard/template.hbs
+++ b/cards/event-standard/template.hbs
@@ -52,7 +52,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerEventStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
index 04e3379f5..fa39cef8a 100644
--- a/cards/faq-accordion/template.hbs
+++ b/cards/faq-accordion/template.hbs
@@ -39,7 +39,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}}
+ {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
index 93587173b..f8bd379a9 100644
--- a/cards/financial-professional-location/template.hbs
+++ b/cards/financial-professional-location/template.hbs
@@ -22,7 +22,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+ {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
index ffb79575e..7ed89f090 100644
--- a/cards/job-standard/template.hbs
+++ b/cards/job-standard/template.hbs
@@ -10,7 +10,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
index c761335be..4a3cfd914 100644
--- a/cards/link-standard/template.hbs
+++ b/cards/link-standard/template.hbs
@@ -6,7 +6,7 @@
{{> details }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
index 3cb536b75..38e04fc8d 100644
--- a/cards/location-standard/template.hbs
+++ b/cards/location-standard/template.hbs
@@ -27,7 +27,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
index e2bf64b84..a8adb267d 100644
--- a/cards/menuitem-standard/template.hbs
+++ b/cards/menuitem-standard/template.hbs
@@ -20,7 +20,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
index 510bfd103..f18dffcf4 100644
--- a/cards/multilang-event-standard/template.hbs
+++ b/cards/multilang-event-standard/template.hbs
@@ -52,7 +52,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerEventStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
index 04e3379f5..fa39cef8a 100644
--- a/cards/multilang-faq-accordion/template.hbs
+++ b/cards/multilang-faq-accordion/template.hbs
@@ -39,7 +39,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}}
+ {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
index 4f0f91644..3e0ae750f 100644
--- a/cards/multilang-financial-professional-location/template.hbs
+++ b/cards/multilang-financial-professional-location/template.hbs
@@ -22,7 +22,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+ {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
index ffb79575e..7ed89f090 100644
--- a/cards/multilang-job-standard/template.hbs
+++ b/cards/multilang-job-standard/template.hbs
@@ -10,7 +10,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
index c761335be..4a3cfd914 100644
--- a/cards/multilang-link-standard/template.hbs
+++ b/cards/multilang-link-standard/template.hbs
@@ -6,7 +6,7 @@
{{> details }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
index 28292d542..2fb09d193 100644
--- a/cards/multilang-location-standard/template.hbs
+++ b/cards/multilang-location-standard/template.hbs
@@ -27,7 +27,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs
index de293dfa6..7d395f265 100644
--- a/cards/multilang-menuitem-standard/template.hbs
+++ b/cards/multilang-menuitem-standard/template.hbs
@@ -20,7 +20,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs
index 1cd6c9954..a92dc854d 100644
--- a/cards/multilang-product-prominentimage-clickable/template.hbs
+++ b/cards/multilang-product-prominentimage-clickable/template.hbs
@@ -15,7 +15,7 @@
{{> details }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs
index 1769650f0..2989163d8 100644
--- a/cards/multilang-product-prominentimage/template.hbs
+++ b/cards/multilang-product-prominentimage/template.hbs
@@ -8,7 +8,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs
index ae13da210..0141d25ee 100644
--- a/cards/multilang-product-prominentvideo/template.hbs
+++ b/cards/multilang-product-prominentvideo/template.hbs
@@ -7,7 +7,7 @@
{{> content }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs
index cde2ccab7..fed2297ee 100644
--- a/cards/multilang-product-standard/template.hbs
+++ b/cards/multilang-product-standard/template.hbs
@@ -17,7 +17,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs
index 43b3fcdd3..f1249b6d5 100644
--- a/cards/multilang-professional-location/template.hbs
+++ b/cards/multilang-professional-location/template.hbs
@@ -22,7 +22,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs
index 296e3e9f7..9e4761878 100644
--- a/cards/multilang-professional-standard/template.hbs
+++ b/cards/multilang-professional-standard/template.hbs
@@ -12,7 +12,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs
index 366ec5fa1..74bdd1164 100644
--- a/cards/multilang-standard/template.hbs
+++ b/cards/multilang-standard/template.hbs
@@ -10,7 +10,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs
index a3d447239..943decce8 100644
--- a/cards/product-prominentimage-clickable/template.hbs
+++ b/cards/product-prominentimage-clickable/template.hbs
@@ -15,7 +15,7 @@
{{> details }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs
index 596cfb040..94d25fe5d 100644
--- a/cards/product-prominentimage/template.hbs
+++ b/cards/product-prominentimage/template.hbs
@@ -8,7 +8,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs
index 7760541c7..fd03ed714 100644
--- a/cards/product-prominentvideo/template.hbs
+++ b/cards/product-prominentvideo/template.hbs
@@ -8,7 +8,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs
index cde2ccab7..fed2297ee 100644
--- a/cards/product-standard/template.hbs
+++ b/cards/product-standard/template.hbs
@@ -17,7 +17,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs
index 734346a8e..5282ca995 100644
--- a/cards/professional-location/template.hbs
+++ b/cards/professional-location/template.hbs
@@ -22,7 +22,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs
index 296e3e9f7..9e4761878 100644
--- a/cards/professional-standard/template.hbs
+++ b/cards/professional-standard/template.hbs
@@ -12,7 +12,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs
index 366ec5fa1..74bdd1164 100644
--- a/cards/standard/template.hbs
+++ b/cards/standard/template.hbs
@@ -10,7 +10,7 @@
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerStandard"}}
+ {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs
index 6adeafdb9..5789306ad 100644
--- a/directanswercards/allfields-standard/template.hbs
+++ b/directanswercards/allfields-standard/template.hbs
@@ -14,7 +14,7 @@
{{> cta CTA linkTarget=linkTarget}}
{{/if}}
- {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard"}}
+ {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard" directAnswer=true}}
{{#*inline 'icon'}}
diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js
index 851d27e95..18c4f026e 100644
--- a/directanswercards/card_component.js
+++ b/directanswercards/card_component.js
@@ -5,7 +5,7 @@ BaseDirectAnswerCard = typeof (BaseDirectAnswerCard) !== 'undefined' ?
BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component {
constructor(config = {}, systemConfig = {}) {
super(config, systemConfig);
- let data = config.data || {};
+ const data = config.data || {};
this.type = data.type || '';
this.answer = data.answer || {};
this.snippet = this.answer.snippet || {};
@@ -40,17 +40,24 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component {
}
onMount() {
- let feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm';
+ this.addFeedbackListeners();
+
+ const rtfElement = this._container.querySelector('.js-yxt-rtfValue');
+ rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e));
+ }
+
+ addFeedbackListeners() {
+ const feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm';
let feedbackFormEl = this._container.querySelector(feedbackFormSelector);
if (feedbackFormEl) {
// For WCAG compliance, the feedback should be a submittable form
feedbackFormEl.addEventListener('submit', (e) => {
- let formTargetEl = e.target;
- let checkedValue = formTargetEl.querySelector('input:checked').value === 'true';
+ const formTargetEl = e.target;
+ const isGood = formTargetEl.querySelector('input:checked').value === 'true';
- this.reportQuality(checkedValue);
+ this.reportQuality(isGood);
this.updateState({
- 'feedbackSubmitted': true
+ feedbackSubmitted: true
});
});
@@ -62,42 +69,11 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component {
if (input) {
input.checked = true;
}
- this._triggerCustomEvent(feedbackFormSelector, 'submit');
+ HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit');
});
});
}
}
-
- const rtfElement = this._container.querySelector('.js-yxt-rtfValue');
- rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e));
- }
-
- /**
- * Triggers the event passed in dispatched from the given selector
- * @param {string} selector selector to dispatch event from
- * @param {string} event event to fire
- * @param {Object} settings additional settings
- */
- _triggerCustomEvent(selector, event, settings) {
- let e = this._customEvent(event, settings);
- this._container.querySelector(selector).dispatchEvent(e);
- }
-
- /**
- * _customEvent is an event constructor polyfill
- * @param {string} event event to fire
- * @param {Object} settings additional settings
- */
- _customEvent(event, settings) {
- const _settings = {
- bubbles: true,
- cancelable: true,
- detail: null,
- ...settings
- };
- const evt = document.createEvent('CustomEvent');
- evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail);
- return evt;
}
/**
@@ -118,7 +94,10 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component {
const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN;
const event = new ANSWERS.AnalyticsEvent(eventType)
.addOptions({
- 'directAnswer': true
+ directAnswer: true,
+ verticalKey: this.verticalConfigId,
+ searcher: 'UNIVERSAL',
+ entityId: this.associatedEntityId
});
this.analyticsReporter.report(event);
diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs
index a80399571..b1e2db18f 100644
--- a/directanswercards/documentsearch-standard/template.hbs
+++ b/directanswercards/documentsearch-standard/template.hbs
@@ -9,7 +9,7 @@
{{> cta CTA linkTarget=linkTarget}}
- {{> thumbsfeedback cardType="HitchhikerDocumentSearchStandard"}}
+ {{> thumbsfeedback cardType="HitchhikerDocumentSearchStandard" directAnswer=true}}
{{#*inline 'title'}}
diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs
index 07b87d36b..ff5cf86ea 100644
--- a/directanswercards/multilang-allfields-standard/template.hbs
+++ b/directanswercards/multilang-allfields-standard/template.hbs
@@ -14,7 +14,7 @@
{{> cta CTA linkTarget=linkTarget}}
{{/if}}
- {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard"}}
+ {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard" directAnswer=true}}
{{#*inline 'icon'}}
diff --git a/static/js/HitchhikerJS.js b/static/js/HitchhikerJS.js
index 65554705d..df27c3791 100644
--- a/static/js/HitchhikerJS.js
+++ b/static/js/HitchhikerJS.js
@@ -41,3 +41,6 @@ import AnswersExperience from './answers-experience';
window.AnswersExperience = new AnswersExperience(runtimeConfig);
export * from './video-apis';
+
+import DOM from './dom';
+export { DOM };
\ No newline at end of file
diff --git a/static/js/dom.js b/static/js/dom.js
new file mode 100644
index 000000000..168e4d32b
--- /dev/null
+++ b/static/js/dom.js
@@ -0,0 +1,30 @@
+export default class DOM {
+ /**
+ * Triggers the event passed in dispatched from the given selector
+ * @param {HTMLElement} container container to select from
+ * @param {string} selector selector to dispatch event from
+ * @param {string} event event to fire
+ * @param {Object} settings additional settings
+ */
+ static triggerCustomEvent(container, selector, event, settings) {
+ const e = this.customEvent(event, settings);
+ container.querySelector(selector).dispatchEvent(e);
+ }
+
+ /**
+ * _customEvent is an event constructor polyfill
+ * @param {string} event event to fire
+ * @param {Object} settings additional settings
+ */
+ static customEvent(event, settings) {
+ const _settings = {
+ bubbles: true,
+ cancelable: true,
+ detail: null,
+ ...settings
+ };
+ const evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail);
+ return evt;
+ }
+}
\ No newline at end of file
diff --git a/static/scss/answers/directanswercards/allfields-standard.scss b/static/scss/answers/directanswercards/allfields-standard.scss
index 5d9bef815..00e6448d2 100644
--- a/static/scss/answers/directanswercards/allfields-standard.scss
+++ b/static/scss/answers/directanswercards/allfields-standard.scss
@@ -97,12 +97,14 @@
}
- &-feedbackWrapper
+ &-feedbackWrapper,
+ &-footerWrapper
{
background-color: var(--yxt-direct-answer-footer-background-color);
}
- &-feedback
+ &-feedbackContent,
+ &-footer
{
display: flex;
justify-content: flex-end;
@@ -113,7 +115,8 @@
padding-bottom: 8px;
}
- &-feedbackText
+ &-feedbackText,
+ &-footerText
{
display: inline;
margin-right: 8px;
@@ -130,6 +133,46 @@
display: flex;
}
+ &-thumbs
+ {
+ display: flex;
+ margin: 0;
+ }
+
+ &-thumbUpIcon
+ {
+ transform: rotate(180deg);
+ }
+
+ &-thumbUpIcon,
+ &-thumbDownIcon
+ {
+ display: inline-flex;
+ color: var(--yxt-color-text-secondary);
+ }
+
+ &-thumb
+ {
+ display: inline;
+ flex-shrink: 0;
+ cursor: pointer;
+ font-size: 18px;
+
+ & + &
+ {
+ margin-left: 8px;
+ }
+ }
+
+ &-fieldset
+ {
+ display: inline;
+ margin-inline-start: 2px;
+ margin-inline-end: 2px;
+ line-height: 0;
+ min-inline-size: min-content;
+ }
+
&-fieldValueLink
{
@include Link;
@@ -163,6 +206,15 @@
list-style-position: inside;
}
+ &-feedback
+ {
+ @include Text(
+ $color: var(--yxt-color-text-neutral),
+ );
+ background-color: var(--yxt-color-background-highlight);
+ display: none;
+ }
+
&-viewMore
{
@include Text(
diff --git a/static/scss/answers/directanswercards/documentsearch-standard.scss b/static/scss/answers/directanswercards/documentsearch-standard.scss
index 406a7a801..665821450 100644
--- a/static/scss/answers/directanswercards/documentsearch-standard.scss
+++ b/static/scss/answers/directanswercards/documentsearch-standard.scss
@@ -91,7 +91,8 @@
background-color: var(--yxt-direct-answer-footer-background-color);
}
- &-feedback
+ &-feedbackContent,
+ &-footer
{
display: flex;
justify-content: flex-end;
@@ -102,7 +103,8 @@
padding-bottom: 8px;
}
- &-feedbackText
+ &-feedbackText,
+ &-footerText
{
display: inline;
margin-right: 8px;
@@ -119,6 +121,55 @@
display: flex;
}
+ &-thumbs
+ {
+ display: flex;
+ margin: 0;
+ }
+
+ &-thumbUpIcon
+ {
+ transform: rotate(180deg);
+ }
+
+ &-thumbUpIcon,
+ &-thumbDownIcon
+ {
+ display: inline-flex;
+ color: var(--yxt-color-text-secondary);
+ }
+
+ &-thumb
+ {
+ display: inline;
+ flex-shrink: 0;
+ cursor: pointer;
+ font-size: 18px;
+
+ & + &
+ {
+ margin-left: 8px;
+ }
+ }
+
+ &-fieldset
+ {
+ display: inline;
+ margin-inline-start: 2px;
+ margin-inline-end: 2px;
+ line-height: 0;
+ min-inline-size: min-content;
+ }
+
+ &-feedback
+ {
+ @include Text(
+ $color: var(--yxt-color-text-neutral),
+ );
+ background-color: var(--yxt-color-background-highlight);
+ display: none;
+ }
+
&-viewMore
{
@include Text(