Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add card-specific feedback button styling #940

Merged
merged 9 commits into from
Sep 9, 2021
Merged

Add card-specific feedback button styling #940

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1cb9943
Add card-specific feedback button styling
nmanu1 Sep 7, 2021
035d2d6
Minor styling fix
nmanu1 Sep 8, 2021
16897d4
Address comments
nmanu1 Sep 8, 2021
01c5a74
Make inline partial
nmanu1 Sep 8, 2021
642fe90
Use const
nmanu1 Sep 8, 2021
e242f76
Modify faq toggle for ie11 compatibility
nmanu1 Sep 8, 2021
99150a0
Use add and remove
nmanu1 Sep 9, 2021
82200b7
Remove unnecessary toggle code
nmanu1 Sep 9, 2021
77614ba
Use variable for faq accordion
nmanu1 Sep 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 51 additions & 59 deletions cards/common-partials/thumbsfeedback.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,54 @@
<div class="{{cardType}}-feedbackWrapper">
<div class="{{cardType}}-feedbackContent">
{{#if feedbackSubmitted}}
<div class="{{cardType}}-feedbackText">
{{feedbackTextOnSubmission}}
</div>
{{else}}
{{#if feedbackText}}
<div class="{{cardType}}-feedbackText">
{{feedbackText}}
{{#if directAnswerClass}}
{{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}}
{{else}}
{{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}}
{{/if}}

{{#*inline 'feedback'}}
<div class="{{className}}-feedbackWrapper">
<div class="{{className}}-feedbackContent">
{{#if feedbackSubmitted}}
<div class="{{className}}-feedbackText">
{{feedbackTextOnSubmission}}
</div>
{{else}}
{{#if feedbackText}}
<div class="{{className}}-feedbackText">
{{feedbackText}}
</div>
{{/if}}
<div class="{{className}}-thumbsWrapper">
<form class="HitchhikerCard-thumbs js-{{cardType}}-feedbackForm">
<fieldset class="HitchhikerCard-fieldset">
<label class="HitchhikerCard-thumb">
<span class="HitchhikerCard-thumbUpIcon">
{{> icons/builtInIcon iconName='thumb' }}
</span>
<input type="radio"
name="feedback"
value="true"
class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-{{cardType}}-thumbInput">
<span class="sr-only">
{{positiveFeedbackSrText}}
</span>
</label>
<label class="HitchhikerCard-thumb">
<span class="HitchhikerCard-thumbDownIcon">
{{> icons/builtInIcon iconName='thumb' }}
</span>
<input type="radio"
name="feedback"
value="false"
class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-{{cardType}}-thumbInput">
<span class="sr-only">
{{negativeFeedbackSrText}}
</span>
</label>
</fieldset>
<button type="submit" class="sr-only sr-only-focusable">Send feedback</button>
</form>
</div>
{{/if}}
<div class="{{cardType}}-thumbsWrapper">
<form
{{#if directAnswer}}
class="HitchhikerCard-thumbs js-HitchhikerDirectAnswerCard-feedbackForm"
{{else}}
class="HitchhikerCard-thumbs js-HitchhikerCard-feedbackForm"
{{/if}}
>
<fieldset class="HitchhikerCard-fieldset">
<label class="HitchhikerCard-thumb">
<span class="HitchhikerCard-thumbUpIcon">
{{> icons/builtInIcon iconName='thumb' }}
</span>
<input type="radio"
name="feedback"
value="true"
{{#if directAnswer}}
class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerDirectAnswerCard-thumbInput"
{{else}}
class="HitchhikerCard-feedback HitchhikerCard-thumbUpButton js-HitchhikerCard-thumbInput"
{{/if}}
>
<span class="sr-only">
{{positiveFeedbackSrText}}
</span>
</label>
<label class="HitchhikerCard-thumb">
<span class="HitchhikerCard-thumbDownIcon">
{{> icons/builtInIcon iconName='thumb' }}
</span>
<input type="radio"
name="feedback"
value="false"
{{#if directAnswer}}
class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerDirectAnswerCard-thumbInput"
{{else}}
class="HitchhikerCard-feedback HitchhikerCard-thumbDownButton js-HitchhikerCard-thumbInput"
{{/if}}
>
<span class="sr-only">
{{negativeFeedbackSrText}}
</span>
</label>
</fieldset>
<button type="submit" class="sr-only sr-only-focusable">Send feedback</button>
</form>
</div>
{{/if}}
</div>
</div>
</div>
{{/inline}}
4 changes: 2 additions & 2 deletions cards/document-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<div class="HitchhikerDocumentStandard-info">
{{> details }}
</div>
<div class="HitchhikerDocumentStandard-actions">
<div class="HitchhikerCard-actions">
{{> ctas }}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerDocumentStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/event-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
{{/if}}
{{> 'details'}}
</div>
<div class="HitchhikerEventStandard-actions">
<div class="HitchhikerCard-actions">
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
<div class="HitchhikerEventStandard-ctasWrapper">
{{#if (all card.CTA1.url card.CTA1.label)}}
Expand All @@ -52,7 +52,7 @@
</div>
{{/if}}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions cards/faq-accordion/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] {
const accordionContentSelector = '.js-HitchhikerFaqAccordion-content';
const accordionExpandedClass = 'HitchhikerFaqAccordion--expanded';
const accordionCardSelector = '.js-HitchhikerFaqAccordion';
const stayExpandedClass = 'HitchhikerFaqAccordion--stayExpanded';

const accordionToggleEl = self._container.querySelector(accordionToggleSelector);
if (!accordionToggleEl) {
Expand All @@ -68,11 +69,28 @@ 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`;
let stayExpanded = this._container.querySelector(`.${stayExpandedClass}`);
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved

const cardEl = this._container.querySelector(accordionCardSelector);
const linkEls = contentEl.querySelectorAll('a');

if (stayExpanded && this.getState('feedbackSubmitted')) {
isExpanded = true;
cardEl.classList.toggle(accordionExpandedClass, isExpanded);
accordionToggleEl.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
}
cardEl.classList.toggle(stayExpandedClass, false);
contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
this._setLinksInteractivity(linkEls, isExpanded);

const cardEl = this._container.querySelector(accordionCardSelector);
let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
if (thumbSelectorEls) {
thumbSelectorEls.forEach(el => {
el.addEventListener('click', (e) => {
cardEl.classList.toggle(stayExpandedClass, true);
});
});
}

accordionToggleEl.addEventListener('click', function() {
isExpanded = !isExpanded;
Expand Down
6 changes: 3 additions & 3 deletions cards/faq-accordion/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="HitchhikerFaqAccordion yxt-{{cardName}} js-HitchhikerFaqAccordion{{#if card.isExpanded}} HitchhikerFaqAccordion--expanded{{/if}}"
<div class="HitchhikerFaqAccordion yxt-{{cardName}} js-HitchhikerFaqAccordion{{#if card.isExpanded}} HitchhikerFaqAccordion--expanded{{/if}} HitchhikerFaqAccordion--stayExpanded"
id="{{id}}">
<button class="HitchhikerFaqAccordion-toggle js-HitchhikerFaqAccordion-toggle"
aria-expanded="{{#if card.isExpanded}}true{{else}}false{{/if}}"
Expand All @@ -19,7 +19,7 @@
</div>
{{/if}}
{{> 'details'}}
<div class="HitchhikerFaqAccordion-actions">
<div class="HitchhikerCard-actions">
{{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
<div class="HitchhikerFaqAccordion-ctasWrapper">
{{#if card.CTA1.url}}
Expand All @@ -39,7 +39,7 @@
</div>
{{/if}}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/financial-professional-location/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
{{> list }}
{{> phone }}
</div>
<div class="HitchhikerFinancialProfessionalLocation-actions">
<div class="HitchhikerCard-actions">
{{> ctas }}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/job-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<div class="HitchhikerJobStandard-info">
{{> details }}
</div>
<div class="HitchhikerJobStandard-actions">
<div class="HitchhikerCard-actions">
{{> ctas }}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/link-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
{{> subtitle }}
<div class="HitchhikerLinkStandard-contentWrapper">
{{> details }}
<div class="HitchhikerLinkStandard-actions">
<div class="HitchhikerCard-actions">
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/location-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
{{> contactInfo }}
{{> details }}
</div>
<div class="HitchhikerLocationStandard-actions">
<div class="HitchhikerCard-actions">
{{> ctas }}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/menuitem-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{{> list }}
{{> details }}
</div>
<div class="HitchhikerMenuItemStandard-actions">
<div class="HitchhikerCard-actions">
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
<div class="HitchhikerMenuItemStandard-ctasWrapper">
{{#with card.CTA1}}
Expand All @@ -20,7 +20,7 @@
</div>
{{/if}}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/multilang-event-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
{{/if}}
{{> 'details'}}
</div>
<div class="HitchhikerEventStandard-actions">
<div class="HitchhikerCard-actions">
{{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}}
<div class="HitchhikerEventStandard-ctasWrapper">
{{#if (all card.CTA1.url card.CTA1.label)}}
Expand All @@ -52,7 +52,7 @@
</div>
{{/if}}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
22 changes: 20 additions & 2 deletions cards/multilang-faq-accordion/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor
const accordionContentSelector = '.js-HitchhikerFaqAccordion-content';
const accordionExpandedClass = 'HitchhikerFaqAccordion--expanded';
const accordionCardSelector = '.js-HitchhikerFaqAccordion';
const stayExpandedClass = 'HitchhikerFaqAccordion--stayExpanded';

const accordionToggleEl = self._container.querySelector(accordionToggleSelector);
if (!accordionToggleEl) {
Expand All @@ -68,11 +69,28 @@ 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`;
let stayExpanded = this._container.querySelector(`.${stayExpandedClass}`);

const cardEl = this._container.querySelector(accordionCardSelector);
const linkEls = contentEl.querySelectorAll('a');

if (stayExpanded && this._state._state.feedbackSubmitted) {
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
isExpanded = true;
cardEl.classList.toggle(accordionExpandedClass, isExpanded);
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
accordionToggleEl.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
}
cardEl.classList.toggle(stayExpandedClass, false);
contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`;
this._setLinksInteractivity(linkEls, isExpanded);

const cardEl = this._container.querySelector(accordionCardSelector);
let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput');
if (thumbSelectorEls) {
thumbSelectorEls.forEach(el => {
el.addEventListener('click', (e) => {
cardEl.classList.toggle(stayExpandedClass, true);
});
});
}

accordionToggleEl.addEventListener('click', function() {
isExpanded = !isExpanded;
Expand Down
6 changes: 3 additions & 3 deletions cards/multilang-faq-accordion/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="HitchhikerFaqAccordion yxt-{{cardName}} js-HitchhikerFaqAccordion{{#if card.isExpanded}} HitchhikerFaqAccordion--expanded{{/if}}"
<div class="HitchhikerFaqAccordion yxt-{{cardName}} js-HitchhikerFaqAccordion{{#if card.isExpanded}} HitchhikerFaqAccordion--expanded{{/if}} js-HitchhikerFaqAccordion{{#if card.isExpanded}} HitchhikerFaqAccordion--expanded{{/if}} HitchhikerFaqAccordion--stayExpanded"
nmanu1 marked this conversation as resolved.
Show resolved Hide resolved
id="{{id}}">
<button class="HitchhikerFaqAccordion-toggle js-HitchhikerFaqAccordion-toggle"
aria-expanded="{{#if card.isExpanded}}true{{else}}false{{/if}}"
Expand All @@ -19,7 +19,7 @@
</div>
{{/if}}
{{> 'details'}}
<div class="HitchhikerFaqAccordion-actions">
<div class="HitchhikerCard-actions">
{{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
<div class="HitchhikerFaqAccordion-ctasWrapper">
{{#if card.CTA1.url}}
Expand All @@ -39,7 +39,7 @@
</div>
{{/if}}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/multilang-financial-professional-location/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@
{{> list }}
{{> phone }}
</div>
<div class="HitchhikerFinancialProfessionalLocation-actions">
<div class="HitchhikerCard-actions">
{{> ctas }}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/multilang-job-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
<div class="HitchhikerJobStandard-info">
{{> details }}
</div>
<div class="HitchhikerJobStandard-actions">
<div class="HitchhikerCard-actions">
{{> ctas }}
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions cards/multilang-link-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
{{> subtitle }}
<div class="HitchhikerLinkStandard-contentWrapper">
{{> details }}
<div class="HitchhikerLinkStandard-actions">
<div class="HitchhikerCard-actions">
{{#if card.feedback}}
{{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}}
{{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}}
</div>
</div>
Expand Down
Loading