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

AEM-3796 - Testimonials #555

Merged
merged 3 commits into from
Aug 31, 2018
Merged

AEM-3796 - Testimonials #555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1f725e7
AEM-3796 - Testimonials
Aug 30, 2018
5b77d8f
AEM-3796 - Testimonials PR
Aug 30, 2018
62a80ab
AEM-3796 - Testimonials PR
Aug 30, 2018
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
35 changes: 35 additions & 0 deletions src/components/o-testimonials/_preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,38 @@
<cite class="o-testimonials__item-author">ANDREW JACKSON, DOCTOR</cite>
</div>
</axa-testimonials>
<axa-testimonials classes="o-testimonials"
title="Customer Reviews"
show-all-inline="true"
subtitle="AXA works hard to provide the best service possible to its customers.">
<div class="o-testimonials__item js-o-testimonial__item">
<p class="o-testimonials__item-testimonial">Very helpful once I got through to the correct person but I was constantly
being transferred from person to person,
in the end I called into my local axa once in the city and got sorted in 10 minutes after 3 weeks of phone
calls. </p>
<cite class="o-testimonials__item-author">ANDREW JACKSON, ADVOCATE</cite>
</div>
<div class="o-testimonials__item js-o-testimonial__item">
<p class="o-testimonials__item-testimonial">Very helpful once I got through to the correct person but I was constantly
being transferred from person to person,
in the end I called into my local axa once in the city and got sorted in 10 minutes after 3 weeks of phone
calls. </p>
<cite class="o-testimonials__item-author">ANDREW JACKSON, PROFESSOR</cite>
</div>
<div class="o-testimonials__item js-o-testimonial__item">
<p class="o-testimonials__item-testimonial">Very helpful once I got through to the correct person but I was constantly
being transferred from person to person,
in the end I called into my local axa once in the city and got sorted in 10 minutes after 3 weeks of phone
calls. Very helpful once I got through to the correct person but I was constantly
being transferred from person to person,
in the end I called into my local axa once in the city and got sorted in 10 minutes after 3 weeks of phone
calls. Very helpful once I got through to the correct person but I was constantly
being transferred from person to person,
in the end I called into my local axa once in the city and got sorted in 10 minutes after 3 weeks of phone
calls. Very helpful once I got through to the correct person but I was constantly
being transferred from person to person,
in the end I called into my local axa once in the city and got sorted in 10 minutes after 3 weeks of phone
calls. </p>
<cite class="o-testimonials__item-author">ANDREW JACKSON, DOCTOR</cite>
</div>
</axa-testimonials>
4 changes: 3 additions & 1 deletion src/components/o-testimonials/_template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import html from 'nanohtml';
import classnames from 'classnames';

export default ({
title,
subtitle,
showAllInline,
}, childrenFragment) => html`
<article class="o-testimonials__background js-o-testimonials">
<article class="${classnames('o-testimonials__background', 'js-o-testimonials', { 'o-testimonials--show-all-inline': showAllInline })}" >
<axa-container>
${title && html`<h1 class="o-testimonials__title">${title}</h1>`}
${subtitle && html`<p class="o-testimonials__subtitle">${subtitle}</p>`}
Expand Down
2 changes: 1 addition & 1 deletion src/components/o-testimonials/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Testimonials from './js/testimonials';
class AXATestimonials extends BaseComponentGlobal {
static tagName = 'axa-testimonials';

static get observedAttributes() { return ['classes', 'title', 'subtitle', 'auto-rotate-disabled', 'auto-rotate-time']; }
static get observedAttributes() { return ['classes', 'title', 'subtitle', 'auto-rotate-disabled', 'auto-rotate-time', 'show-all-inline']; }

constructor() {
super({
Expand Down
10 changes: 10 additions & 0 deletions src/components/o-testimonials/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ $o-testimonials-author-position-bottom: -40px;
}

.o-testimonials__arrow-left {
display: none;
padding: $o-testimonials-arrow-width-xs;
height: $o-testimonials-arrow-height-xs;
width: $o-testimonials-arrow-width-xs;
Expand All @@ -81,6 +82,7 @@ $o-testimonials-author-position-bottom: -40px;
}

.o-testimonials__arrow-right {
display: none;
height: $o-testimonials-arrow-height-xs;
width: $o-testimonials-arrow-width-xs;
padding: $o-testimonials-arrow-width-xs;
Expand Down Expand Up @@ -167,6 +169,14 @@ $o-testimonials-author-position-bottom: -40px;
animation: fromRight 0.8s;
}

.o-testimonials--show-all-inline .o-testimonials__item-author {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are currently discussing CSS specificity and the goal of zero CSS specificity inclination #383

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LucaMele @AndyOGo
We need alternative option to display the slider in author. This is why I did this.
I can implement it in AEM without using the showAllInline tag if the way it is implemented doesn't comply with the pattern library. (zero CSS specificity inclination).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nakovskijosif
I would not worry about it right now, we already have higher CSS specificity code and it's an idea we think could be worth it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is fine as it is @nakovskijosif

position: relative;

bottom: 0;

margin-bottom: 20px;
}

@keyframes fromRight {
from {
opacity: 0;
Expand Down
36 changes: 27 additions & 9 deletions src/components/o-testimonials/js/testimonials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ class Testimonials extends UiEvents {
animationRight: 'o-testimonials__item_animation_right',
autoRotateDisabled: 'auto-rotate-disabled',
autoRotateTime: 'auto-rotate-time',
showAllInline: 'show-all-inline',
};

constructor(wcNode, options = {
Expand All @@ -40,17 +41,22 @@ class Testimonials extends UiEvents {
this.slider = this.wcNode.querySelector(this.options.slider);
this.autoRotateDisabled = getAttribute(this.wcNode, this.options.autoRotateDisabled);
this.autoRotateTimeInMiliseconds = getAttribute(this.wcNode, this.options.autoRotateTime);
this.showAllInline = getAttribute(this.wcNode, this.options.showAllInline);
if (!this.autoRotateTimeInMiliseconds) {
this.autoRotateTimeInMiliseconds = 5000;
}
this.calculateContainerMinHeight();
this.hideAllSlides();
if (this.slides.length < 2) {
this.hideControls();
// if show all inline is enabled no need to init swipe controls and hide/show slides.
if (!this.showAllInline) {
// show if more than 1 slide and not inline.
if (this.slides.length > 1) {
this.showControls();
}
this.hideAllSlides();
this.showSlide(0);
this.on();
this.initSwipe();
}
this.showSlide(0);
this.on();
this.initSwipe();
}

calculateContainerMinHeight() {
Expand Down Expand Up @@ -106,9 +112,9 @@ class Testimonials extends UiEvents {
}
}

hideControls() {
this.controlRight.style.display = 'none';
this.controlLeft.style.display = 'none';
showControls() {
this.controlRight.style.display = 'block';
this.controlLeft.style.display = 'block';
}

showSlide(positionDifference) {
Expand Down Expand Up @@ -172,6 +178,18 @@ class Testimonials extends UiEvents {
if (this.slider) {
delete this.slider;
}

if (this.autoRotateDisabled) {
delete this.autoRotateDisabled;
}

if (this.autoRotateTimeInMiliseconds) {
delete this.autoRotateTimeInMiliseconds;
}

if (this.showAllInline) {
delete this.showAllInline;
}
}
}

Expand Down