From 43595aaada2d814255e77bf9f9b0f4739ddcdb55 Mon Sep 17 00:00:00 2001
From: nmanu1 <88398086+nmanu1@users.noreply.github.com>
Date: Wed, 1 Sep 2021 16:42:17 -0400
Subject: [PATCH 1/3] Add feedback buttons to cards (#938)
Add thumbs up/down feedback buttons to all cards without doing card-specific styling yet. Created a shared partial for the buttons, as well as a new config option in 'dataForRender', called 'feedback' that controls whether or not the buttons appear. Used the shared partial in all cards, including direct answers cards.
J=SLAP-1544
TEST=manual
Smoke testing to see if thumbs up/down buttons appear on each card
---
cards/common-partials/thumbsfeedback.hbs | 46 +++++++++++++
cards/document-standard/component.js | 6 +-
cards/document-standard/template.hbs | 9 ++-
cards/event-standard/component.js | 6 +-
cards/event-standard/template.hbs | 35 ++++++----
cards/faq-accordion/component.js | 4 ++
cards/faq-accordion/template.hbs | 41 ++++++-----
.../component.js | 6 +-
.../template.hbs | 9 ++-
cards/job-standard/component.js | 6 +-
cards/job-standard/template.hbs | 9 ++-
cards/link-standard/component.js | 4 ++
cards/link-standard/template.hbs | 7 +-
cards/location-standard/component.js | 6 +-
cards/location-standard/template.hbs | 9 ++-
cards/menuitem-standard/component.js | 6 +-
cards/menuitem-standard/template.hbs | 25 ++++---
cards/multilang-event-standard/component.js | 6 +-
cards/multilang-event-standard/template.hbs | 37 +++++-----
cards/multilang-faq-accordion/component.js | 4 ++
cards/multilang-faq-accordion/template.hbs | 41 ++++++-----
.../component.js | 6 +-
.../template.hbs | 9 ++-
cards/multilang-job-standard/component.js | 6 +-
cards/multilang-job-standard/template.hbs | 9 ++-
cards/multilang-link-standard/component.js | 4 ++
cards/multilang-link-standard/template.hbs | 7 +-
.../multilang-location-standard/component.js | 6 +-
.../multilang-location-standard/template.hbs | 9 ++-
.../multilang-menuitem-standard/component.js | 6 +-
.../multilang-menuitem-standard/template.hbs | 25 ++++---
.../component.js | 4 ++
.../template.hbs | 5 ++
.../component.js | 6 +-
.../template.hbs | 7 +-
.../component.js | 6 +-
.../template.hbs | 5 ++
cards/multilang-product-standard/component.js | 4 ++
cards/multilang-product-standard/template.hbs | 23 ++++---
.../component.js | 6 +-
.../template.hbs | 9 ++-
.../component.js | 6 +-
.../template.hbs | 7 +-
cards/multilang-standard/component.js | 6 +-
cards/multilang-standard/template.hbs | 9 ++-
.../component.js | 4 ++
.../template.hbs | 5 ++
cards/product-prominentimage/component.js | 6 +-
cards/product-prominentimage/template.hbs | 7 +-
cards/product-prominentvideo/component.js | 6 +-
cards/product-prominentvideo/template.hbs | 6 ++
cards/product-standard/component.js | 4 ++
cards/product-standard/template.hbs | 23 ++++---
cards/professional-location/component.js | 6 +-
cards/professional-location/template.hbs | 9 ++-
cards/professional-standard/component.js | 6 +-
cards/professional-standard/template.hbs | 7 +-
cards/standard/component.js | 6 +-
cards/standard/template.hbs | 9 ++-
.../allfields-standard/component.js | 4 +-
.../allfields-standard/template.hbs | 52 +-------------
.../documentsearch-standard/component.js | 4 +-
.../documentsearch-standard/template.hbs | 52 +-------------
.../multilang-allfields-standard/component.js | 4 +-
.../multilang-allfields-standard/template.hbs | 52 +-------------
script/core.hbs | 5 ++
.../directanswercards/allfields-standard.scss | 52 ++------------
.../documentsearch-standard.scss | 55 +++------------
static/scss/answers/module.scss | 68 ++++++++++++++++---
test-site/config/global_config.json | 4 +-
translations/messages.pot | 50 ++++++++++++--
71 files changed, 596 insertions(+), 422 deletions(-)
create mode 100644 cards/common-partials/thumbsfeedback.hbs
diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs
new file mode 100644
index 000000000..0d29f674f
--- /dev/null
+++ b/cards/common-partials/thumbsfeedback.hbs
@@ -0,0 +1,46 @@
+
+
+ {{#if feedbackSubmitted}}
+
+ {{feedbackTextOnSubmission}}
+
+ {{else}}
+ {{#if feedbackText}}
+
+ {{feedbackText}}
+
+ {{/if}}
+
+
+
+ {{/if}}
+
+
diff --git a/cards/document-standard/component.js b/cards/document-standard/component.js
index f1f55f707..7e79f93a8 100644
--- a/cards/document-standard/component.js
+++ b/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: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
index a9f3b0402..fc29fed09 100644
--- a/cards/document-standard/template.hbs
+++ b/cards/document-standard/template.hbs
@@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerDocumentStandard"}}
+ {{/if}}
+
@@ -90,4 +95,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/event-standard/component.js b/cards/event-standard/component.js
index a9cb2278f..42764a44f 100644
--- a/cards/event-standard/component.js
+++ b/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: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
index 6fd9a597e..edf7bf258 100644
--- a/cards/event-standard/template.hbs
+++ b/cards/event-standard/template.hbs
@@ -32,24 +32,29 @@
{{/if}}
{{> 'details'}}
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-
- {{#if (all card.CTA1.url card.CTA1.label)}}
-
- {{#with card.CTA1}}
- {{> CTA }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+
+ {{#if (all card.CTA1.url card.CTA1.label)}}
+
+ {{#with card.CTA1}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
+ {{#if (all card.CTA2.url card.CTA2.label)}}
+
+ {{#with card.CTA2}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
{{/if}}
- {{#if (all card.CTA2.url card.CTA2.label)}}
-
- {{#with card.CTA2}}
- {{> CTA }}
- {{/with}}
-
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerEventStandard"}}
{{/if}}
- {{/if}}
@@ -109,4 +114,4 @@
{{label}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js
index f05c1e8ca..6d61acb8b 100644
--- a/cards/faq-accordion/component.js
+++ b/cards/faq-accordion/component.js
@@ -47,6 +47,10 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
// ariaLabel: '',
},
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
index fd73c014d..04e3379f5 100644
--- a/cards/faq-accordion/template.hbs
+++ b/cards/faq-accordion/template.hbs
@@ -19,24 +19,29 @@
{{/if}}
{{> 'details'}}
- {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
-
- {{#if card.CTA1.url}}
-
- {{#with card.CTA1}}
- {{> CTA }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
+
+ {{#if card.CTA1.url}}
+
+ {{#with card.CTA1}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
+ {{#if card.CTA2.url}}
+
+ {{#with card.CTA2}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
- {{/if}}
- {{#if card.CTA2.url}}
-
- {{#with card.CTA2}}
- {{> CTA }}
- {{/with}}
-
- {{/if}}
-
- {{/if}}
+ {{/if}}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}}
+ {{/if}}
+
@@ -95,4 +100,4 @@
{{label}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js
index 033539bba..3f4267b0e 100644
--- a/cards/financial-professional-location/component.js
+++ b/cards/financial-professional-location/component.js
@@ -64,7 +64,11 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ''
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
index 76021ecac..93587173b 100644
--- a/cards/financial-professional-location/template.hbs
+++ b/cards/financial-professional-location/template.hbs
@@ -19,7 +19,12 @@
{{> list }}
{{> phone }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+ {{/if}}
+
@@ -197,4 +202,4 @@
Close Card
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/job-standard/component.js b/cards/job-standard/component.js
index 17893ce3a..91577d553 100644
--- a/cards/job-standard/component.js
+++ b/cards/job-standard/component.js
@@ -39,7 +39,11 @@ class job_standardCardComponent extends BaseCard['job-standard'] {
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
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
index d1535314a..ffb79575e 100644
--- a/cards/job-standard/template.hbs
+++ b/cards/job-standard/template.hbs
@@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+ {{/if}}
+
@@ -112,4 +117,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/link-standard/component.js b/cards/link-standard/component.js
index 5061223ae..e8ef4714f 100644
--- a/cards/link-standard/component.js
+++ b/cards/link-standard/component.js
@@ -28,6 +28,10 @@ class link_standardCardComponent extends BaseCard['link-standard'] {
// showLessText: 'Show less' // Label when toggle will hide truncated text
// },
details: profile.htmlSnippet, // The text in the body of the card
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
index 206a6d2f3..c761335be 100644
--- a/cards/link-standard/template.hbs
+++ b/cards/link-standard/template.hbs
@@ -4,6 +4,11 @@
{{> subtitle }}
{{> details }}
+
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+ {{/if}}
+
@@ -67,4 +72,4 @@
{{/if}}
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js
index 8e997c306..7b17bfc03 100644
--- a/cards/location-standard/component.js
+++ b/cards/location-standard/component.js
@@ -53,7 +53,11 @@ class location_standardCardComponent extends BaseCard['location-standard'] {
eventType: 'DRIVING_DIRECTIONS',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
index a12a0ded0..3cb536b75 100644
--- a/cards/location-standard/template.hbs
+++ b/cards/location-standard/template.hbs
@@ -24,7 +24,12 @@
{{> contactInfo }}
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+ {{/if}}
+
@@ -208,4 +213,4 @@
Close Card
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/menuitem-standard/component.js b/cards/menuitem-standard/component.js
index c0c6ef15e..1b3ad11ca 100644
--- a/cards/menuitem-standard/component.js
+++ b/cards/menuitem-standard/component.js
@@ -54,7 +54,11 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] {
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
index 9c9966794..e2bf64b84 100644
--- a/cards/menuitem-standard/template.hbs
+++ b/cards/menuitem-standard/template.hbs
@@ -8,16 +8,21 @@
{{> list }}
{{> details }}
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-
- {{#with card.CTA1}}
- {{> CTA ctaName="primaryCTA" }}
- {{/with}}
- {{#with card.CTA2}}
- {{> CTA ctaName="secondaryCTA" }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+
+ {{#with card.CTA1}}
+ {{> CTA ctaName="primaryCTA" }}
+ {{/with}}
+ {{#with card.CTA2}}
+ {{> CTA ctaName="secondaryCTA" }}
+ {{/with}}
+
+ {{/if}}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+ {{/if}}
- {{/if}}
@@ -132,4 +137,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-event-standard/component.js b/cards/multilang-event-standard/component.js
index af223357c..cfc0f07d6 100644
--- a/cards/multilang-event-standard/component.js
+++ b/cards/multilang-event-standard/component.js
@@ -48,7 +48,11 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st
eventType: 'DRIVING_DIRECTIONS',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
index 6fd9a597e..510bfd103 100644
--- a/cards/multilang-event-standard/template.hbs
+++ b/cards/multilang-event-standard/template.hbs
@@ -32,24 +32,29 @@
{{/if}}
{{> 'details'}}
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-
- {{#if (all card.CTA1.url card.CTA1.label)}}
-
- {{#with card.CTA1}}
- {{> CTA }}
- {{/with}}
-
+
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+
+ {{#if (all card.CTA1.url card.CTA1.label)}}
+
+ {{#with card.CTA1}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
+ {{#if (all card.CTA2.url card.CTA2.label)}}
+
+ {{#with card.CTA2}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
+
{{/if}}
- {{#if (all card.CTA2.url card.CTA2.label)}}
-
- {{#with card.CTA2}}
- {{> CTA }}
- {{/with}}
-
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerEventStandard"}}
{{/if}}
- {{/if}}
@@ -109,4 +114,4 @@
{{label}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js
index 529fbb14a..6907109d1 100644
--- a/cards/multilang-faq-accordion/component.js
+++ b/cards/multilang-faq-accordion/component.js
@@ -47,6 +47,10 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }),
// ariaLabel: '',
},
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
index fd73c014d..04e3379f5 100644
--- a/cards/multilang-faq-accordion/template.hbs
+++ b/cards/multilang-faq-accordion/template.hbs
@@ -19,24 +19,29 @@
{{/if}}
{{> 'details'}}
- {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
-
- {{#if card.CTA1.url}}
-
- {{#with card.CTA1}}
- {{> CTA }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
+
+ {{#if card.CTA1.url}}
+
+ {{#with card.CTA1}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
+ {{#if card.CTA2.url}}
+
+ {{#with card.CTA2}}
+ {{> CTA }}
+ {{/with}}
+
+ {{/if}}
- {{/if}}
- {{#if card.CTA2.url}}
-
- {{#with card.CTA2}}
- {{> CTA }}
- {{/with}}
-
- {{/if}}
-
- {{/if}}
+ {{/if}}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}}
+ {{/if}}
+
@@ -95,4 +100,4 @@
{{label}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-financial-professional-location/component.js b/cards/multilang-financial-professional-location/component.js
index 07595f9b3..002623931 100644
--- a/cards/multilang-financial-professional-location/component.js
+++ b/cards/multilang-financial-professional-location/component.js
@@ -64,7 +64,11 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ''
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
index a802076a3..4f0f91644 100644
--- a/cards/multilang-financial-professional-location/template.hbs
+++ b/cards/multilang-financial-professional-location/template.hbs
@@ -19,7 +19,12 @@
{{> list }}
{{> phone }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}}
+ {{/if}}
+
@@ -197,4 +202,4 @@
{{translate phrase='Close Card' context='Close is a verb'}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-job-standard/component.js b/cards/multilang-job-standard/component.js
index db073bd0c..5df6f8631 100644
--- a/cards/multilang-job-standard/component.js
+++ b/cards/multilang-job-standard/component.js
@@ -39,7 +39,11 @@ class multilang_job_standardCardComponent extends BaseCard['multilang-job-standa
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
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
index d1535314a..ffb79575e 100644
--- a/cards/multilang-job-standard/template.hbs
+++ b/cards/multilang-job-standard/template.hbs
@@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerJobStandard"}}
+ {{/if}}
+
@@ -112,4 +117,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-link-standard/component.js b/cards/multilang-link-standard/component.js
index 2e1b5e74d..7eb07832a 100644
--- a/cards/multilang-link-standard/component.js
+++ b/cards/multilang-link-standard/component.js
@@ -28,6 +28,10 @@ class multilang_link_standardCardComponent extends BaseCard['multilang-link-stan
// showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text
// },
details: profile.htmlSnippet, // The text in the body of the card
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
index 206a6d2f3..c761335be 100644
--- a/cards/multilang-link-standard/template.hbs
+++ b/cards/multilang-link-standard/template.hbs
@@ -4,6 +4,11 @@
{{> subtitle }}
{{> details }}
+
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}}
+ {{/if}}
+
@@ -67,4 +72,4 @@
{{/if}}
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-location-standard/component.js b/cards/multilang-location-standard/component.js
index bc5d5d0c4..da489ac7b 100644
--- a/cards/multilang-location-standard/component.js
+++ b/cards/multilang-location-standard/component.js
@@ -53,7 +53,11 @@ class multilang_location_standardCardComponent extends BaseCard['multilang-locat
eventType: 'DRIVING_DIRECTIONS',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
index afbc93210..28292d542 100644
--- a/cards/multilang-location-standard/template.hbs
+++ b/cards/multilang-location-standard/template.hbs
@@ -24,7 +24,12 @@
{{> contactInfo }}
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}}
+ {{/if}}
+
@@ -208,4 +213,4 @@
{{translate phrase='Close Card' context='Close is a verb'}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-menuitem-standard/component.js b/cards/multilang-menuitem-standard/component.js
index 269728ca4..0f7226f66 100644
--- a/cards/multilang-menuitem-standard/component.js
+++ b/cards/multilang-menuitem-standard/component.js
@@ -54,7 +54,11 @@ class multilang_menuitem_standardCardComponent extends BaseCard['multilang-menui
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs
index 9c9966794..de293dfa6 100644
--- a/cards/multilang-menuitem-standard/template.hbs
+++ b/cards/multilang-menuitem-standard/template.hbs
@@ -8,16 +8,21 @@
{{> list }}
{{> details }}
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
-
- {{#with card.CTA1}}
- {{> CTA ctaName="primaryCTA" }}
- {{/with}}
- {{#with card.CTA2}}
- {{> CTA ctaName="secondaryCTA" }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
+
+ {{#with card.CTA1}}
+ {{> CTA ctaName="primaryCTA" }}
+ {{/with}}
+ {{#with card.CTA2}}
+ {{> CTA ctaName="secondaryCTA" }}
+ {{/with}}
+
+ {{/if}}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}}
+ {{/if}}
- {{/if}}
@@ -132,4 +137,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-product-prominentimage-clickable/component.js b/cards/multilang-product-prominentimage-clickable/component.js
index c3b66bc29..18063da72 100644
--- a/cards/multilang-product-prominentimage-clickable/component.js
+++ b/cards/multilang-product-prominentimage-clickable/component.js
@@ -40,6 +40,10 @@ class multilang_product_prominentimage_clickableCardComponent
altText: alternateText, // The alternate text for the image
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card, Warning: cannot contain links
// tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs
index 6b06630db..1cd6c9954 100644
--- a/cards/multilang-product-prominentimage-clickable/template.hbs
+++ b/cards/multilang-product-prominentimage-clickable/template.hbs
@@ -13,6 +13,11 @@
{{> subtitle }}
{{> details }}
+
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+ {{/if}}
+
{{#if card.url}}{{/if}}
diff --git a/cards/multilang-product-prominentimage/component.js b/cards/multilang-product-prominentimage/component.js
index f1d8e21e0..c34128f66 100644
--- a/cards/multilang-product-prominentimage/component.js
+++ b/cards/multilang-product-prominentimage/component.js
@@ -57,7 +57,11 @@ class multilang_product_prominentimageCardComponent extends BaseCard['multilang-
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs
index 9314c43f0..1769650f0 100644
--- a/cards/multilang-product-prominentimage/template.hbs
+++ b/cards/multilang-product-prominentimage/template.hbs
@@ -5,7 +5,12 @@
{{> subtitle }}
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+ {{/if}}
+
diff --git a/cards/multilang-product-prominentvideo/component.js b/cards/multilang-product-prominentvideo/component.js
index 631515086..76a0da752 100644
--- a/cards/multilang-product-prominentvideo/component.js
+++ b/cards/multilang-product-prominentvideo/component.js
@@ -52,7 +52,11 @@ class multilang_product_prominentvideoCardComponent extends BaseCard['multilang-
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs
index d01f4a9d3..ae13da210 100644
--- a/cards/multilang-product-prominentvideo/template.hbs
+++ b/cards/multilang-product-prominentvideo/template.hbs
@@ -5,6 +5,11 @@
{{> video }}
{{> content }}
+
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}}
+ {{/if}}
+
{{#*inline 'title'}}
diff --git a/cards/multilang-product-standard/component.js b/cards/multilang-product-standard/component.js
index 947c66e7f..27f9cd01f 100644
--- a/cards/multilang-product-standard/component.js
+++ b/cards/multilang-product-standard/component.js
@@ -57,6 +57,10 @@ class multilang_product_standardCardComponent extends BaseCard['multilang-produc
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
},
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs
index a1a245d6d..cde2ccab7 100644
--- a/cards/multilang-product-standard/template.hbs
+++ b/cards/multilang-product-standard/template.hbs
@@ -5,16 +5,21 @@
{{> subtitle }}
{{> details }}
- {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
-
- {{#with card.CTA1}}
- {{> CTA ctaName="primaryCTA" }}
- {{/with}}
- {{#with card.CTA2}}
- {{> CTA ctaName="secondaryCTA" }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
+
+ {{#with card.CTA1}}
+ {{> CTA ctaName="primaryCTA" }}
+ {{/with}}
+ {{#with card.CTA2}}
+ {{> CTA ctaName="secondaryCTA" }}
+ {{/with}}
+
+ {{/if}}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductStandard"}}
+ {{/if}}
- {{/if}}
diff --git a/cards/multilang-professional-location/component.js b/cards/multilang-professional-location/component.js
index 55006a511..d497a1ef7 100644
--- a/cards/multilang-professional-location/component.js
+++ b/cards/multilang-professional-location/component.js
@@ -64,7 +64,11 @@ class multilang_professional_locationCardComponent extends BaseCard['multilang-p
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ''
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs
index a20c75bfd..43b3fcdd3 100644
--- a/cards/multilang-professional-location/template.hbs
+++ b/cards/multilang-professional-location/template.hbs
@@ -19,7 +19,12 @@
{{> list }}
{{> phone }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}}
+ {{/if}}
+
@@ -194,4 +199,4 @@
{{translate phrase='Close Card' context='Close is a verb'}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/multilang-professional-standard/component.js b/cards/multilang-professional-standard/component.js
index 0d969a180..56dceb90f 100644
--- a/cards/multilang-professional-standard/component.js
+++ b/cards/multilang-professional-standard/component.js
@@ -54,7 +54,11 @@ class multilang_professional_standardCardComponent extends BaseCard['multilang-p
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ''
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs
index 4ea666620..296e3e9f7 100644
--- a/cards/multilang-professional-standard/template.hbs
+++ b/cards/multilang-professional-standard/template.hbs
@@ -9,7 +9,12 @@
{{> list }}
{{> phone }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}}
+ {{/if}}
+
diff --git a/cards/multilang-standard/component.js b/cards/multilang-standard/component.js
index 1d12e678d..1090d6eac 100644
--- a/cards/multilang-standard/component.js
+++ b/cards/multilang-standard/component.js
@@ -49,7 +49,11 @@ class multilang_standardCardComponent extends BaseCard['multilang-standard'] {
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // 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
};
}
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs
index 9c37fe70d..366ec5fa1 100644
--- a/cards/multilang-standard/template.hbs
+++ b/cards/multilang-standard/template.hbs
@@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerStandard"}}
+ {{/if}}
+
@@ -114,4 +119,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/product-prominentimage-clickable/component.js b/cards/product-prominentimage-clickable/component.js
index f70bd39d0..3c469f239 100644
--- a/cards/product-prominentimage-clickable/component.js
+++ b/cards/product-prominentimage-clickable/component.js
@@ -39,6 +39,10 @@ class product_prominentimage_clickableCardComponent extends BaseCard['product-pr
altText: alternateText, // The alternate text for the image
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card, Warning: cannot contain links
// tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs
index 32fa8f716..a3d447239 100644
--- a/cards/product-prominentimage-clickable/template.hbs
+++ b/cards/product-prominentimage-clickable/template.hbs
@@ -13,6 +13,11 @@
{{> subtitle }}
{{> details }}
+
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable"}}
+ {{/if}}
+
{{#if card.url}}{{/if}}
diff --git a/cards/product-prominentimage/component.js b/cards/product-prominentimage/component.js
index 163eea636..4f3ab4857 100644
--- a/cards/product-prominentimage/component.js
+++ b/cards/product-prominentimage/component.js
@@ -57,7 +57,11 @@ class product_prominentimageCardComponent extends BaseCard['product-prominentima
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs
index 677aeb8e0..596cfb040 100644
--- a/cards/product-prominentimage/template.hbs
+++ b/cards/product-prominentimage/template.hbs
@@ -5,7 +5,12 @@
{{> subtitle }}
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}}
+ {{/if}}
+
diff --git a/cards/product-prominentvideo/component.js b/cards/product-prominentvideo/component.js
index 29015b903..85209c3ec 100644
--- a/cards/product-prominentvideo/component.js
+++ b/cards/product-prominentvideo/component.js
@@ -52,7 +52,11 @@ class product_prominentvideoCardComponent extends BaseCard['product-prominentvid
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs
index d01f4a9d3..7760541c7 100644
--- a/cards/product-prominentvideo/template.hbs
+++ b/cards/product-prominentvideo/template.hbs
@@ -5,6 +5,12 @@
{{> video }}
{{> content }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}}
+ {{/if}}
+
{{#*inline 'title'}}
diff --git a/cards/product-standard/component.js b/cards/product-standard/component.js
index 08d911d0e..e69f0f41a 100644
--- a/cards/product-standard/component.js
+++ b/cards/product-standard/component.js
@@ -57,6 +57,10 @@ class product_standardCardComponent extends BaseCard['product-standard'] {
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
},
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs
index a1a245d6d..cde2ccab7 100644
--- a/cards/product-standard/template.hbs
+++ b/cards/product-standard/template.hbs
@@ -5,16 +5,21 @@
{{> subtitle }}
{{> details }}
- {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
-
- {{#with card.CTA1}}
- {{> CTA ctaName="primaryCTA" }}
- {{/with}}
- {{#with card.CTA2}}
- {{> CTA ctaName="secondaryCTA" }}
- {{/with}}
+
+ {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
+
+ {{#with card.CTA1}}
+ {{> CTA ctaName="primaryCTA" }}
+ {{/with}}
+ {{#with card.CTA2}}
+ {{> CTA ctaName="secondaryCTA" }}
+ {{/with}}
+
+ {{/if}}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProductStandard"}}
+ {{/if}}
- {{/if}}
diff --git a/cards/professional-location/component.js b/cards/professional-location/component.js
index 38f0e0531..1d22bd5b4 100644
--- a/cards/professional-location/component.js
+++ b/cards/professional-location/component.js
@@ -64,7 +64,11 @@ class professional_locationCardComponent extends BaseCard['professional-location
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ''
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs
index 83c8763ab..734346a8e 100644
--- a/cards/professional-location/template.hbs
+++ b/cards/professional-location/template.hbs
@@ -19,7 +19,12 @@
{{> list }}
{{> phone }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}}
+ {{/if}}
+
@@ -194,4 +199,4 @@
Close Card
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/cards/professional-standard/component.js b/cards/professional-standard/component.js
index 2dc4949a1..86508a810 100644
--- a/cards/professional-standard/component.js
+++ b/cards/professional-standard/component.js
@@ -54,7 +54,11 @@ class professional_standardCardComponent extends BaseCard['professional-standard
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: ''
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs
index 4ea666620..296e3e9f7 100644
--- a/cards/professional-standard/template.hbs
+++ b/cards/professional-standard/template.hbs
@@ -9,7 +9,12 @@
{{> list }}
{{> phone }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}}
+ {{/if}}
+
diff --git a/cards/standard/component.js b/cards/standard/component.js
index 17ab9c0d5..893619e4d 100644
--- a/cards/standard/component.js
+++ b/cards/standard/component.js
@@ -49,7 +49,11 @@ class standardCardComponent extends BaseCard['standard'] {
eventType: 'CTA_CLICK',
eventOptions: this.addDefaultEventOptions(),
// ariaLabel: '',
- }
+ },
+ feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // 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
};
}
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs
index 9c37fe70d..366ec5fa1 100644
--- a/cards/standard/template.hbs
+++ b/cards/standard/template.hbs
@@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }}
+
+ {{> ctas }}
+ {{#if card.feedback}}
+ {{> thumbsfeedback card cardType="HitchhikerStandard"}}
+ {{/if}}
+
@@ -114,4 +119,4 @@
{{/if}}
-{{/inline}}
\ No newline at end of file
+{{/inline}}
diff --git a/directanswercards/allfields-standard/component.js b/directanswercards/allfields-standard/component.js
index 531ca79df..51fbdfd9b 100644
--- a/directanswercards/allfields-standard/component.js
+++ b/directanswercards/allfields-standard/component.js
@@ -187,8 +187,8 @@ class allfields_standardComponent extends BaseDirectAnswerCard['allfields-standa
// eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
// eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics
// },
- footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked
- footerText: 'Was this the answer you were looking for?', // Text to display in the footer
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked
+ feedbackText: 'Was this the answer you were looking for?', // Text to display in the footer
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
isRichText: isRichText, // If the direct answer is sourced from a rich-text field
diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs
index bc3210a53..6adeafdb9 100644
--- a/directanswercards/allfields-standard/template.hbs
+++ b/directanswercards/allfields-standard/template.hbs
@@ -14,7 +14,7 @@
{{> cta CTA linkTarget=linkTarget}}
{{/if}}
- {{> footer }}
+ {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard"}}
{{#*inline 'icon'}}
@@ -112,56 +112,6 @@
{{/if}}
{{/inline}}
-{{#*inline 'footer'}}
-{{#if (any footerTextOnSubmission footerText)}}
-
-{{/if}}
-{{/inline}}
-
{{#*inline 'cta'}}
{{#if (all url label)}}
diff --git a/directanswercards/documentsearch-standard/component.js b/directanswercards/documentsearch-standard/component.js
index 2dee30bcb..1574b7945 100644
--- a/directanswercards/documentsearch-standard/component.js
+++ b/directanswercards/documentsearch-standard/component.js
@@ -39,8 +39,8 @@ class documentsearch_standardComponent extends BaseDirectAnswerCard['documentsea
// eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
// eventOptions: this.addDefaultEventOptions({ fieldName: 'snippet' }) // The event options for CTA click analytics
// },
- footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked
- footerText: 'Was this the answer you were looking for?', // Text to display in the footer
+ feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked
+ feedbackText: 'Was this the answer you were looking for?', // Text to display in the footer
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
};
diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs
index 028de17c5..a80399571 100644
--- a/directanswercards/documentsearch-standard/template.hbs
+++ b/directanswercards/documentsearch-standard/template.hbs
@@ -9,7 +9,7 @@
{{> cta CTA linkTarget=linkTarget}}
- {{> footer}}
+ {{> thumbsfeedback cardType="HitchhikerDocumentSearchStandard"}}
{{#*inline 'title'}}
@@ -43,56 +43,6 @@
{{/if}}
{{/inline}}
-{{#*inline 'footer'}}
-{{#if (any footerTextOnSubmission footerText)}}
-
-{{/if}}
-{{/inline}}
-
{{#*inline 'cta'}}
{{#if (all url label)}}
diff --git a/directanswercards/multilang-allfields-standard/component.js b/directanswercards/multilang-allfields-standard/component.js
index 3b50f0ba6..bb91f66ba 100644
--- a/directanswercards/multilang-allfields-standard/component.js
+++ b/directanswercards/multilang-allfields-standard/component.js
@@ -185,8 +185,8 @@ class multilang_allfields_standardComponent extends BaseDirectAnswerCard['multil
// eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA
// eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics
// },
- footerTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display in the footer when a thumbs up/down is clicked
- footerText: {{ translateJS phrase='Was this the answer you were looking for?' }}, // Text to display in the footer
+ feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display in the footer when a thumbs up/down is clicked
+ feedbackText: {{ translateJS phrase='Was this the answer you were looking for?' }}, // Text to display in the footer
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
};
diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs
index 025addb96..07b87d36b 100644
--- a/directanswercards/multilang-allfields-standard/template.hbs
+++ b/directanswercards/multilang-allfields-standard/template.hbs
@@ -14,7 +14,7 @@
{{> cta CTA linkTarget=linkTarget}}
{{/if}}
- {{> footer }}
+ {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard"}}
{{#*inline 'icon'}}
@@ -112,56 +112,6 @@
{{/if}}
{{/inline}}
-{{#*inline 'footer'}}
-{{#if (any footerTextOnSubmission footerText)}}
-
-{{/if}}
-{{/inline}}
-
{{#*inline 'cta'}}
{{#if (all url label)}}
diff --git a/script/core.hbs b/script/core.hbs
index 6b78f0e3e..e4f8112ba 100644
--- a/script/core.hbs
+++ b/script/core.hbs
@@ -84,6 +84,11 @@
return ANSWERS.renderer.SafeString({{{stringifyPartial (read 'static/assets/images/close-card') }}});
});
+ ANSWERS.registerPartial(
+ 'thumbsfeedback',
+ {{{stringifyPartial (read 'cards/common-partials/thumbsfeedback') }}}
+ );
+
/**
* If the url is not relative, return it. If it is relative,
* append relativePath to it.
diff --git a/static/scss/answers/directanswercards/allfields-standard.scss b/static/scss/answers/directanswercards/allfields-standard.scss
index 24fdc39b1..5d9bef815 100644
--- a/static/scss/answers/directanswercards/allfields-standard.scss
+++ b/static/scss/answers/directanswercards/allfields-standard.scss
@@ -97,12 +97,12 @@
}
- &-footerWrapper
+ &-feedbackWrapper
{
background-color: var(--yxt-direct-answer-footer-background-color);
}
- &-footer
+ &-feedback
{
display: flex;
justify-content: flex-end;
@@ -113,7 +113,7 @@
padding-bottom: 8px;
}
- &-footerText
+ &-feedbackText
{
display: inline;
margin-right: 8px;
@@ -125,44 +125,9 @@
);
}
- &-thumbs
+ &-thumbsWrapper
{
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
@@ -198,15 +163,6 @@
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 cabdb173f..406a7a801 100644
--- a/static/scss/answers/directanswercards/documentsearch-standard.scss
+++ b/static/scss/answers/directanswercards/documentsearch-standard.scss
@@ -86,7 +86,12 @@
}
- &-footer
+ &-feedbackWrapper
+ {
+ background-color: var(--yxt-direct-answer-footer-background-color);
+ }
+
+ &-feedback
{
display: flex;
justify-content: flex-end;
@@ -97,7 +102,7 @@
padding-bottom: 8px;
}
- &-footerText
+ &-feedbackText
{
display: inline;
margin-right: 8px;
@@ -109,53 +114,9 @@
);
}
- &-thumbs
+ &-thumbsWrapper
{
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
diff --git a/static/scss/answers/module.scss b/static/scss/answers/module.scss
index 762490075..85cf1e6b7 100644
--- a/static/scss/answers/module.scss
+++ b/static/scss/answers/module.scss
@@ -17,14 +17,66 @@
@include sr-only-focusable();
}
-.HitchhikerCard-detailsToggle
+.HitchhikerCard
{
- text-align: left;
- margin-top: calc(var(--yxt-base-spacing) / 4);
+ &-detailsToggle
+ {
+ text-align: left;
+ margin-top: calc(var(--yxt-base-spacing) / 4);
+ @include Text(
+ $color: var(--yxt-color-brand-primary),
+ $line-height: var(--yxt-line-height-md),
+ $style: italic);
+ @include TextButton($padding: 0);
+ }
+
+ &-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-brand-primary),
- $line-height: var(--yxt-line-height-md),
- $style: italic);
- @include TextButton($padding: 0);
-}
+ $color: var(--yxt-color-text-neutral),
+ );
+ background-color: var(--yxt-color-background-highlight);
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json
index b86160394..9c505ad2b 100644
--- a/test-site/config/global_config.json
+++ b/test-site/config/global_config.json
@@ -1,8 +1,8 @@
{
- "sdkVersion": "1.10", // The version of the Answers SDK to use
+ "sdkVersion": "develop", // The version of the Answers SDK to use
"apiKey": "2d8c550071a64ea23e263118a2b0680b", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system
// "experienceVersion": "
", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system
- // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system
+ "businessId": "3350634", // The business ID of the account. This will be provided automatically by the Yext CI system
// "initializeManually": true, // If true, the experience must be started by calling AnswersExperience.init() or AnswersExperienceFrame.init() for iframe integrations.
// "useJWT": true, // Whether or not to enable JWT. If true, the apiKey will be hidden from the build and the token must be specified through the runtime config.
"sessionTrackingEnabled": true, // Whether or not session tracking is enabled for all pages
diff --git a/translations/messages.pot b/translations/messages.pot
index 16c7cee7d..9a1d7ac0e 100644
--- a/translations/messages.pot
+++ b/translations/messages.pot
@@ -88,7 +88,7 @@ msgstr ""
msgid "Saturday"
msgstr ""
-#: cards/multilang-location-standard/template.hbs:140
+#: cards/multilang-location-standard/template.hbs:145
msgid "Services:"
msgstr ""
@@ -132,6 +132,20 @@ msgstr ""
msgid "Sunday"
msgstr ""
+#: cards/multilang-event-standard/component.js:53
+#: cards/multilang-faq-accordion/component.js:51
+#: cards/multilang-financial-professional-location/component.js:69
+#: cards/multilang-job-standard/component.js:44
+#: cards/multilang-link-standard/component.js:32
+#: cards/multilang-location-standard/component.js:58
+#: cards/multilang-menuitem-standard/component.js:59
+#: cards/multilang-product-prominentimage-clickable/component.js:44
+#: cards/multilang-product-prominentimage/component.js:62
+#: cards/multilang-product-prominentvideo/component.js:57
+#: cards/multilang-product-standard/component.js:61
+#: cards/multilang-professional-location/component.js:69
+#: cards/multilang-professional-standard/component.js:59
+#: cards/multilang-standard/component.js:54
#: directanswercards/multilang-allfields-standard/component.js:188
msgid "Thank you for your feedback!"
msgstr ""
@@ -142,10 +156,38 @@ msgid_plural "The following search categories yielded results for
Date: Fri, 3 Sep 2021 10:47:17 -0400
Subject: [PATCH 2/3] Add feedback analytics (#939)
Add analytics for the thumbs up/down feedback buttons on cards. Update the analytics on direct answer cards to include additional event attributes that are consistent with those for results cards.
J=SLAP-1545
TEST=manual
Smoke testing to see if clicking feedback buttons on each card sent the correct analytics event and displayed the feedback submission message
---
cards/card_component.js | 72 ++++++++++++++++++-
cards/common-partials/thumbsfeedback.hbs | 24 +++++--
cards/document-standard/template.hbs | 2 +-
cards/event-standard/template.hbs | 2 +-
cards/faq-accordion/template.hbs | 2 +-
.../template.hbs | 2 +-
cards/job-standard/template.hbs | 2 +-
cards/link-standard/template.hbs | 2 +-
cards/location-standard/template.hbs | 2 +-
cards/menuitem-standard/template.hbs | 2 +-
cards/multilang-event-standard/template.hbs | 2 +-
cards/multilang-faq-accordion/template.hbs | 2 +-
.../template.hbs | 2 +-
cards/multilang-job-standard/template.hbs | 2 +-
cards/multilang-link-standard/template.hbs | 2 +-
.../multilang-location-standard/template.hbs | 2 +-
.../multilang-menuitem-standard/template.hbs | 2 +-
.../template.hbs | 2 +-
.../template.hbs | 2 +-
.../template.hbs | 2 +-
cards/multilang-product-standard/template.hbs | 2 +-
.../template.hbs | 2 +-
.../template.hbs | 2 +-
cards/multilang-standard/template.hbs | 2 +-
.../template.hbs | 2 +-
cards/product-prominentimage/template.hbs | 2 +-
cards/product-prominentvideo/template.hbs | 2 +-
cards/product-standard/template.hbs | 2 +-
cards/professional-location/template.hbs | 2 +-
cards/professional-standard/template.hbs | 2 +-
cards/standard/template.hbs | 2 +-
.../allfields-standard/template.hbs | 2 +-
directanswercards/card_component.js | 57 +++++----------
.../documentsearch-standard/template.hbs | 2 +-
.../multilang-allfields-standard/template.hbs | 2 +-
static/js/HitchhikerJS.js | 3 +
static/js/dom.js | 30 ++++++++
.../directanswercards/allfields-standard.scss | 58 ++++++++++++++-
.../documentsearch-standard.scss | 55 +++++++++++++-
39 files changed, 281 insertions(+), 82 deletions(-)
create mode 100644 static/js/dom.js
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(
From 692f9f574a49ddd43f1d45486ffd6bcccda04a9a Mon Sep 17 00:00:00 2001
From: nmanu1 <88398086+nmanu1@users.noreply.github.com>
Date: Thu, 9 Sep 2021 16:55:55 -0400
Subject: [PATCH 3/3] Add card-specific feedback button styling (#940)
Add card-specific styling for thumbs up/down feedback buttons on all results cards.
J=SLAP-1544
TEST=manual
Smoke testing to see if buttons match mock for each card
---
cards/common-partials/thumbsfeedback.hbs | 110 ++++++++----------
cards/document-standard/template.hbs | 4 +-
cards/event-standard/template.hbs | 4 +-
cards/faq-accordion/component.js | 22 +++-
cards/faq-accordion/template.hbs | 4 +-
.../template.hbs | 4 +-
cards/job-standard/template.hbs | 4 +-
cards/link-standard/template.hbs | 4 +-
cards/location-standard/template.hbs | 4 +-
cards/menuitem-standard/template.hbs | 4 +-
cards/multilang-event-standard/template.hbs | 4 +-
cards/multilang-faq-accordion/component.js | 22 +++-
cards/multilang-faq-accordion/template.hbs | 4 +-
.../template.hbs | 4 +-
cards/multilang-job-standard/template.hbs | 4 +-
cards/multilang-link-standard/template.hbs | 4 +-
.../multilang-location-standard/template.hbs | 4 +-
.../multilang-menuitem-standard/template.hbs | 4 +-
.../template.hbs | 4 +-
.../template.hbs | 4 +-
.../template.hbs | 4 +-
cards/multilang-product-standard/template.hbs | 4 +-
.../template.hbs | 4 +-
.../template.hbs | 4 +-
cards/multilang-standard/template.hbs | 4 +-
.../template.hbs | 4 +-
cards/product-prominentimage/template.hbs | 4 +-
cards/product-prominentvideo/template.hbs | 4 +-
cards/product-standard/template.hbs | 4 +-
cards/professional-location/template.hbs | 4 +-
cards/professional-standard/template.hbs | 4 +-
cards/standard/template.hbs | 4 +-
.../allfields-standard/template.hbs | 2 +-
.../documentsearch-standard/template.hbs | 2 +-
.../multilang-allfields-standard/template.hbs | 2 +-
.../scss/answers/cards/document-standard.scss | 8 ++
static/scss/answers/cards/event-standard.scss | 8 ++
static/scss/answers/cards/faq-accordion.scss | 19 +++
.../scss/answers/cards/location-standard.scss | 23 ++++
.../product-prominentimage-clickable.scss | 18 +++
.../answers/cards/product-prominentimage.scss | 18 +++
.../answers/cards/product-prominentvideo.scss | 18 +++
static/scss/answers/cards/standard.scss | 8 ++
.../interactive-map/VerticalFullPageMap.scss | 8 ++
static/scss/answers/module.scss | 47 ++++++++
45 files changed, 327 insertions(+), 124 deletions(-)
diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs
index ea905ed3d..a211443a7 100644
--- a/cards/common-partials/thumbsfeedback.hbs
+++ b/cards/common-partials/thumbsfeedback.hbs
@@ -1,62 +1,54 @@
-
-
- {{#if feedbackSubmitted}}
-
- {{feedbackTextOnSubmission}}
-
- {{else}}
- {{#if feedbackText}}
-
- {{feedbackText}}
+{{#if directAnswerClass}}
+ {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}}
+{{else}}
+ {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}}
+{{/if}}
+
+{{#*inline 'feedback'}}
+
+
+ {{#if feedbackSubmitted}}
+
+ {{feedbackTextOnSubmission}}
+
+ {{else}}
+ {{#if feedbackText}}
+
+ {{feedbackText}}
+
+ {{/if}}
+
+
{{/if}}
-
-
-
- {{/if}}
+
-
+{{/inline}}
diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs
index 0f6bbf935..990728dd7 100644
--- a/cards/document-standard/template.hbs
+++ b/cards/document-standard/template.hbs
@@ -7,10 +7,10 @@
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerDocumentStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs
index 3f3eba419..69841178f 100644
--- a/cards/event-standard/template.hbs
+++ b/cards/event-standard/template.hbs
@@ -32,7 +32,7 @@
{{/if}}
{{> 'details'}}
-
+
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
{{#if (all card.CTA1.url card.CTA1.label)}}
@@ -52,7 +52,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js
index 6d61acb8b..ff6b4db0f 100644
--- a/cards/faq-accordion/component.js
+++ b/cards/faq-accordion/component.js
@@ -68,11 +68,29 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
const contentEl = this._container.querySelector(accordionContentSelector);
let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`);
- contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
+
+ const cardEl = this._container.querySelector(accordionCardSelector);
const linkEls = contentEl.querySelectorAll('a');
+
+ if (this.stayExpanded && this.getState('feedbackSubmitted')) {
+ isExpanded = true;
+ cardEl.classList.add(accordionExpandedClass);
+ accordionToggleEl.setAttribute('aria-expanded', 'true');
+ contentEl.setAttribute('aria-hidden', 'false');
+ }
+ contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
this._setLinksInteractivity(linkEls, isExpanded);
- const cardEl = this._container.querySelector(accordionCardSelector);
+ this.stayExpanded = false;
+
+ const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
+ if (thumbSelectorEls) {
+ thumbSelectorEls.forEach(el => {
+ el.addEventListener('click', (e) => {
+ this.stayExpanded = true;
+ });
+ });
+ }
accordionToggleEl.addEventListener('click', function() {
isExpanded = !isExpanded;
diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs
index fa39cef8a..2906450f0 100644
--- a/cards/faq-accordion/template.hbs
+++ b/cards/faq-accordion/template.hbs
@@ -19,7 +19,7 @@
{{/if}}
{{> 'details'}}
-
+
{{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
{{#if card.CTA1.url}}
@@ -39,7 +39,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs
index f8bd379a9..f92ff84c7 100644
--- a/cards/financial-professional-location/template.hbs
+++ b/cards/financial-professional-location/template.hbs
@@ -19,10 +19,10 @@
{{> list }}
{{> phone }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs
index 7ed89f090..212c50c7b 100644
--- a/cards/job-standard/template.hbs
+++ b/cards/job-standard/template.hbs
@@ -7,10 +7,10 @@
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs
index 4a3cfd914..0e60c4c40 100644
--- a/cards/link-standard/template.hbs
+++ b/cards/link-standard/template.hbs
@@ -4,9 +4,9 @@
{{> subtitle }}
{{> details }}
-
+
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs
index 38e04fc8d..cdb4356d6 100644
--- a/cards/location-standard/template.hbs
+++ b/cards/location-standard/template.hbs
@@ -24,10 +24,10 @@
{{> contactInfo }}
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs
index a8adb267d..ceca3bf20 100644
--- a/cards/menuitem-standard/template.hbs
+++ b/cards/menuitem-standard/template.hbs
@@ -8,7 +8,7 @@
{{> list }}
{{> details }}
-
+
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
{{#with card.CTA1}}
@@ -20,7 +20,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs
index f18dffcf4..2c275320a 100644
--- a/cards/multilang-event-standard/template.hbs
+++ b/cards/multilang-event-standard/template.hbs
@@ -32,7 +32,7 @@
{{/if}}
{{> 'details'}}
-
+
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
{{#if (all card.CTA1.url card.CTA1.label)}}
@@ -52,7 +52,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js
index 6907109d1..c32c7a1ca 100644
--- a/cards/multilang-faq-accordion/component.js
+++ b/cards/multilang-faq-accordion/component.js
@@ -68,11 +68,29 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
const contentEl = this._container.querySelector(accordionContentSelector);
let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`);
- contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
+
+ const cardEl = this._container.querySelector(accordionCardSelector);
const linkEls = contentEl.querySelectorAll('a');
+
+ if (this.stayExpanded && this.getState('feedbackSubmitted')) {
+ isExpanded = true;
+ cardEl.classList.add(accordionExpandedClass);
+ accordionToggleEl.setAttribute('aria-expanded', 'true');
+ contentEl.setAttribute('aria-hidden', 'false');
+ }
+ contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
this._setLinksInteractivity(linkEls, isExpanded);
- const cardEl = this._container.querySelector(accordionCardSelector);
+ this.stayExpanded = false;
+
+ const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
+ if (thumbSelectorEls) {
+ thumbSelectorEls.forEach(el => {
+ el.addEventListener('click', (e) => {
+ this.stayExpanded = true;
+ });
+ });
+ }
accordionToggleEl.addEventListener('click', function() {
isExpanded = !isExpanded;
diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs
index fa39cef8a..2906450f0 100644
--- a/cards/multilang-faq-accordion/template.hbs
+++ b/cards/multilang-faq-accordion/template.hbs
@@ -19,7 +19,7 @@
{{/if}}
{{> 'details'}}
-
+
{{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
{{#if card.CTA1.url}}
@@ -39,7 +39,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs
index 3e0ae750f..90999f442 100644
--- a/cards/multilang-financial-professional-location/template.hbs
+++ b/cards/multilang-financial-professional-location/template.hbs
@@ -19,10 +19,10 @@
{{> list }}
{{> phone }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs
index 7ed89f090..212c50c7b 100644
--- a/cards/multilang-job-standard/template.hbs
+++ b/cards/multilang-job-standard/template.hbs
@@ -7,10 +7,10 @@
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs
index 4a3cfd914..0e60c4c40 100644
--- a/cards/multilang-link-standard/template.hbs
+++ b/cards/multilang-link-standard/template.hbs
@@ -4,9 +4,9 @@
{{> subtitle }}
{{> details }}
-
+
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs
index 2fb09d193..929553765 100644
--- a/cards/multilang-location-standard/template.hbs
+++ b/cards/multilang-location-standard/template.hbs
@@ -24,10 +24,10 @@
{{> contactInfo }}
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs
index 7d395f265..a8a9ed612 100644
--- a/cards/multilang-menuitem-standard/template.hbs
+++ b/cards/multilang-menuitem-standard/template.hbs
@@ -8,7 +8,7 @@
{{> list }}
{{> details }}
-
+
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
{{#with card.CTA1}}
@@ -20,7 +20,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs
index a92dc854d..2cf510f90 100644
--- a/cards/multilang-product-prominentimage-clickable/template.hbs
+++ b/cards/multilang-product-prominentimage-clickable/template.hbs
@@ -13,9 +13,9 @@
{{> subtitle }}
{{> details }}
-
+
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs
index 2989163d8..df3d75ff6 100644
--- a/cards/multilang-product-prominentimage/template.hbs
+++ b/cards/multilang-product-prominentimage/template.hbs
@@ -5,10 +5,10 @@
{{> subtitle }}
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs
index 0141d25ee..d2fc309f8 100644
--- a/cards/multilang-product-prominentvideo/template.hbs
+++ b/cards/multilang-product-prominentvideo/template.hbs
@@ -5,9 +5,9 @@
{{> video }}
{{> content }}
-
+
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs
index fed2297ee..7eab7a8a3 100644
--- a/cards/multilang-product-standard/template.hbs
+++ b/cards/multilang-product-standard/template.hbs
@@ -5,7 +5,7 @@
{{> subtitle }}
{{> details }}
-
+
{{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
{{#with card.CTA1}}
@@ -17,7 +17,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs
index f1249b6d5..befb06fc2 100644
--- a/cards/multilang-professional-location/template.hbs
+++ b/cards/multilang-professional-location/template.hbs
@@ -19,10 +19,10 @@
{{> list }}
{{> phone }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs
index 9e4761878..8fef8f9b1 100644
--- a/cards/multilang-professional-standard/template.hbs
+++ b/cards/multilang-professional-standard/template.hbs
@@ -9,10 +9,10 @@
{{> list }}
{{> phone }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs
index 74bdd1164..9fdb99b9d 100644
--- a/cards/multilang-standard/template.hbs
+++ b/cards/multilang-standard/template.hbs
@@ -7,10 +7,10 @@
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs
index 943decce8..b30dd4e0b 100644
--- a/cards/product-prominentimage-clickable/template.hbs
+++ b/cards/product-prominentimage-clickable/template.hbs
@@ -13,9 +13,9 @@
{{> subtitle }}
{{> details }}
-
+
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs
index 94d25fe5d..45d4e4e59 100644
--- a/cards/product-prominentimage/template.hbs
+++ b/cards/product-prominentimage/template.hbs
@@ -5,10 +5,10 @@
{{> subtitle }}
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs
index fd03ed714..7df080fc0 100644
--- a/cards/product-prominentvideo/template.hbs
+++ b/cards/product-prominentvideo/template.hbs
@@ -5,10 +5,10 @@
{{> video }}
{{> content }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs
index fed2297ee..7eab7a8a3 100644
--- a/cards/product-standard/template.hbs
+++ b/cards/product-standard/template.hbs
@@ -5,7 +5,7 @@
{{> subtitle }}
{{> details }}
-
+
{{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}}
{{#with card.CTA1}}
@@ -17,7 +17,7 @@
{{/if}}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs
index 5282ca995..c2a9da855 100644
--- a/cards/professional-location/template.hbs
+++ b/cards/professional-location/template.hbs
@@ -19,10 +19,10 @@
{{> list }}
{{> phone }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs
index 9e4761878..8fef8f9b1 100644
--- a/cards/professional-standard/template.hbs
+++ b/cards/professional-standard/template.hbs
@@ -9,10 +9,10 @@
{{> list }}
{{> phone }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs
index 74bdd1164..9fdb99b9d 100644
--- a/cards/standard/template.hbs
+++ b/cards/standard/template.hbs
@@ -7,10 +7,10 @@
{{> details }}
-
+
{{> ctas }}
{{#if card.feedback}}
- {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}}
+ {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs
index 5789306ad..6c673ed4e 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" directAnswer=true}}
+ {{> thumbsfeedback directAnswerClass="HitchhikerAllFieldsStandard"}}
{{#*inline 'icon'}}
diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs
index b1e2db18f..0af0faefb 100644
--- a/directanswercards/documentsearch-standard/template.hbs
+++ b/directanswercards/documentsearch-standard/template.hbs
@@ -9,7 +9,7 @@
{{> cta CTA linkTarget=linkTarget}}
- {{> thumbsfeedback cardType="HitchhikerDocumentSearchStandard" directAnswer=true}}
+ {{> thumbsfeedback directAnswerClass="HitchhikerDocumentSearchStandard"}}
{{#*inline 'title'}}
diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs
index ff5cf86ea..8a1904e75 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" directAnswer=true}}
+ {{> thumbsfeedback directAnswerClass="HitchhikerAllFieldsStandard"}}
{{#*inline 'icon'}}
diff --git a/static/scss/answers/cards/document-standard.scss b/static/scss/answers/cards/document-standard.scss
index a2772937c..40ceb2b97 100644
--- a/static/scss/answers/cards/document-standard.scss
+++ b/static/scss/answers/cards/document-standard.scss
@@ -91,4 +91,12 @@
{
display: none;
}
+
+ .HitchhikerCard-feedbackWrapper
+ {
+ @include bpgte(sm)
+ {
+ margin-right: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
}
diff --git a/static/scss/answers/cards/event-standard.scss b/static/scss/answers/cards/event-standard.scss
index 0fad3e910..c8a5898dc 100644
--- a/static/scss/answers/cards/event-standard.scss
+++ b/static/scss/answers/cards/event-standard.scss
@@ -109,4 +109,12 @@
{
display: none;
}
+
+ .HitchhikerCard-feedbackWrapper
+ {
+ @include bpgte(sm)
+ {
+ margin-left: 1.5rem;
+ }
+ }
}
diff --git a/static/scss/answers/cards/faq-accordion.scss b/static/scss/answers/cards/faq-accordion.scss
index 32d84f701..975e9183b 100644
--- a/static/scss/answers/cards/faq-accordion.scss
+++ b/static/scss/answers/cards/faq-accordion.scss
@@ -142,4 +142,23 @@
{
display: none;
}
+
+ .HitchhikerCard
+ {
+ &-actions
+ {
+ flex-direction: row;
+ }
+
+ &-feedbackWrapper
+ {
+ margin: calc(var(--yxt-base-spacing) / 2) var(--yxt-base-spacing);
+ padding-bottom: calc(var(--yxt-base-spacing) / 2);
+ }
+
+ &-feedbackContent
+ {
+ margin-top: 0;
+ }
+ }
}
diff --git a/static/scss/answers/cards/location-standard.scss b/static/scss/answers/cards/location-standard.scss
index 751f7342c..e56750f9e 100644
--- a/static/scss/answers/cards/location-standard.scss
+++ b/static/scss/answers/cards/location-standard.scss
@@ -50,6 +50,29 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac
}
}
}
+
+ .HitchhikerCard
+ {
+ &-actions
+ {
+ flex-direction: row;
+
+ @include bpgte(lg)
+ {
+ flex-direction: column;
+ }
+ }
+
+ &-feedbackWrapper
+ {
+ margin-left: 0;
+
+ @include bpgte(lg)
+ {
+ margin-left: calc(var(--hh-location-standard-base-spacing) / 2);
+ }
+ }
+ }
}
.HitchhikerLocationStandard
diff --git a/static/scss/answers/cards/product-prominentimage-clickable.scss b/static/scss/answers/cards/product-prominentimage-clickable.scss
index 16d5787aa..6c77edc44 100644
--- a/static/scss/answers/cards/product-prominentimage-clickable.scss
+++ b/static/scss/answers/cards/product-prominentimage-clickable.scss
@@ -111,4 +111,22 @@
{
@include rich_text_formatting;
}
+
+ .HitchhikerCard
+ {
+ &-actions
+ {
+ flex-direction: row;
+ }
+
+ &-feedbackWrapper
+ {
+ margin-left: 0;
+ }
+
+ &-feedbackContent
+ {
+ margin-top: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
}
diff --git a/static/scss/answers/cards/product-prominentimage.scss b/static/scss/answers/cards/product-prominentimage.scss
index 63a051dc7..963f7035e 100644
--- a/static/scss/answers/cards/product-prominentimage.scss
+++ b/static/scss/answers/cards/product-prominentimage.scss
@@ -112,4 +112,22 @@
{
display: none;
}
+
+ .HitchhikerCard
+ {
+ &-actions
+ {
+ flex-direction: row;
+ }
+
+ &-feedbackWrapper
+ {
+ margin-left: 0;
+ }
+
+ &-feedbackContent
+ {
+ margin-top: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
}
diff --git a/static/scss/answers/cards/product-prominentvideo.scss b/static/scss/answers/cards/product-prominentvideo.scss
index e341222f1..23820dedd 100644
--- a/static/scss/answers/cards/product-prominentvideo.scss
+++ b/static/scss/answers/cards/product-prominentvideo.scss
@@ -84,4 +84,22 @@
{
display: none;
}
+
+ .HitchhikerCard
+ {
+ &-actions
+ {
+ flex-direction: row;
+ }
+
+ &-feedbackWrapper
+ {
+ margin-left: 0;
+ }
+
+ &-feedbackContent
+ {
+ margin-top: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
}
diff --git a/static/scss/answers/cards/standard.scss b/static/scss/answers/cards/standard.scss
index 7182a178e..23f5438e1 100644
--- a/static/scss/answers/cards/standard.scss
+++ b/static/scss/answers/cards/standard.scss
@@ -91,4 +91,12 @@
{
display: none;
}
+
+ .HitchhikerCard-feedbackWrapper
+ {
+ @include bpgte(sm)
+ {
+ margin-right: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
}
diff --git a/static/scss/answers/interactive-map/VerticalFullPageMap.scss b/static/scss/answers/interactive-map/VerticalFullPageMap.scss
index 75ebd6b4e..71452a7a5 100644
--- a/static/scss/answers/interactive-map/VerticalFullPageMap.scss
+++ b/static/scss/answers/interactive-map/VerticalFullPageMap.scss
@@ -551,6 +551,10 @@
&-ctasWrapper {
margin-top: calc(var(--yxt-base-spacing) / 2);
}
+
+ .HitchhikerCard-actions {
+ flex-direction: row;
+ }
}
.HitchhikerLocationCard {
@@ -592,6 +596,10 @@
font-weight: bold;
justify-content: flex-end;
}
+
+ .HitchhikerCard-feedbackWrapper {
+ margin-left: 0;
+ }
}
.yxt-Card--isVisibleOnMobileMap {
diff --git a/static/scss/answers/module.scss b/static/scss/answers/module.scss
index 85cf1e6b7..ce1730493 100644
--- a/static/scss/answers/module.scss
+++ b/static/scss/answers/module.scss
@@ -31,6 +31,53 @@
@include TextButton($padding: 0);
}
+ &-actions
+ {
+ display: flex;
+ align-items: flex-end;
+
+ @include bpgte(sm)
+ {
+ flex-direction: column;
+ }
+ }
+
+ &-feedbackWrapper
+ {
+ display: flex;
+ flex-grow: 1;
+ background-color: var(--yxt-color-background-highlight);
+ min-width: 55px;
+ @include bpgte(sm)
+ {
+ margin-left: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
+
+ &-feedbackContent
+ {
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ flex-grow: 1;
+ @include bpgte(sm)
+ {
+ margin-top: calc(var(--yxt-base-spacing) / 2);
+ }
+ }
+
+ &-feedbackText
+ {
+ display: inline;
+ @include Text(
+ $size: var(--yxt-font-size-md),
+ $line-height: var(--yxt-line-height-md),
+ $weight: var(--yxt-font-weight-normal),
+ $color: var(--yxt-color-text-secondary)
+ );
+ text-align: right;
+ }
+
&-thumbs
{
display: flex;