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;