Skip to content

Commit

Permalink
MWPW-135990 fix styles for merch cards (#1262)
Browse files Browse the repository at this point in the history 
MWPW-135990 fixed the ordered list and styles. 

Co-authored-by: Volodymyr Kniaziev <vkniaziev@adobe.com>
  • Loading branch information
@VKniaz
VKniaz and Volodymyr Kniaziev authored Sep 19, 2023
1 parent 06d5a45 commit 6d5b87f
Show file tree
Hide file tree
Showing 5 changed files with 113 additions and 95 deletions.
53 changes: 40 additions & 13 deletions libs/blocks/merch-card/merch-card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,34 +63,31 @@
flex: none;
}

.merch-card .consonant-SpecialOffers-title h4 {
.merch-card h4.consonant-SpecialOffers-title {
text-transform: uppercase;
}

.merch-card .consonant-PlansCard-title h2 {
.merch-card h2.consonant-PlansCard-title {
font-size: var(--type-heading-m-size);
line-height: var(--type-heading-l-lh);
}

.merch-card .consonant-SpecialOffers-title h3,
.merch-card .consonant-PlansCard-title h3 {
.merch-card h3.consonant-SpecialOffers-title,
.merch-card h3.consonant-PlansCard-title {
margin-bottom: 0;
}

.merch-card .consonant-PlansCard-title h3 {
.merch-card h3.consonant-PlansCard-title {
margin-bottom: var(--spacing-xxs);
line-height: var(--type-heading-s-lh);
}

.merch-card .consonant-SpecialOffers-title h4,
.merch-card .consonant-PlansCard-title h4,
.merch-card .consonant-SegmentBlade-title h4 {
font-size: var(--type-heading-xxs-size);
.merch-card h4.consonant-PlansCard-title {
font-size: var(--type-body-xxs-size);
font-style: italic;
}

.merch-card .consonant-SpecialOffers-title h5,
.merch-card .consonant-PlansCard-title h5,
.merch-card .consonant-SegmentBlade-title h5 {
.merch-card h5[class$="-title"] {
font-size: var(--type-heading-xxs-size);
font-weight: 500;
}
Expand Down Expand Up @@ -191,6 +188,9 @@
text-align: center;
padding: 8px 11px;
border-radius: 5px 0 0 5px;
}

.merch-card .consonant-SpecialOffers-ribbon {
text-transform: uppercase;
}

Expand All @@ -205,6 +205,11 @@
font-size: var(--type-body-xs-size);
}

.merch-card .consonant-SpecialOffers-description em,
.merch-card .consonant-PlansCard-description em {
color: var(--color-gray-600);
}

.merch-card.special-offers h4 {
font-size: var(--type-body-xxs-size);
text-transform: uppercase;
Expand All @@ -227,7 +232,7 @@
.merch-card .secure-transaction-label {
font-size: var(--type-body-xxs-size);
line-height: 1.3;
color: var(--color-gray-700);
color: var(--color-gray-600);
}

.merch-card .secure-transaction-icon {
Expand Down Expand Up @@ -285,6 +290,28 @@
grid-template-columns: 40px 1fr;
}

.merch-card ul[class$="-list"] {
list-style: none;
margin: 0;
padding-left: var(--spacing-xxs);
font-size: var(--type-body-xxs-size);
line-height: 1.5;
color: var(--color-black);
}

.merch-card li[class$="-list-item"] {
position: relative;
}

.merch-card li[class$="-list-item"]::before {
content: "\B7";
position: absolute;
left: -0.4em;
font-size: 1.5em;
top: calc(0.5 * 1.5 * var(--type-body-xxs-size) - 0.05em);
transform: translateY(-50%);
}

.merch-card.inline-heading .consonant-SegmentBlade-description,
.merch-card.inline-heading .consonant-CardFooter {
grid-column: span 2;
Expand Down
58 changes: 31 additions & 27 deletions libs/blocks/merch-card/merch-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,7 @@ const getPodType = (styles) => {
return cardTypes[authoredType] || SEGMENT_BLADE;
};

const createDescription = (rows, cardType) => createTag('div', { class: `consonant-${cardType}-description` }, rows.slice(0, rows.length - 1));

const createTitle = (titles, cardType) => {
const titleWrapper = createTag('div', { class: `consonant-${cardType}-title` });
titles?.forEach((title) => titleWrapper.appendChild(title));
return titleWrapper;
};

const decorateFooter = (el, altCtaMetaData, styles, cardType) => {
const decorateFooter = (el, altCtaMetaData, cardType) => {
const cardFooter = el.querySelector('.consonant-CardFooter');
const decorateWithSecureTransactionSign = () => {
const secureTransactionWrapper = createTag('div', { class: 'secure-transaction-wrapper' });
Expand All @@ -43,7 +35,6 @@ const decorateFooter = (el, altCtaMetaData, styles, cardType) => {
};

const createCheckbox = (checkBoxText) => {
cardFooter.querySelector('hr')?.remove();
const container = createTag('label', { class: 'checkbox-container' });
const input = createTag('input', { id: 'alt-cta', type: 'checkbox' });
const checkmark = createTag('span', { class: 'checkmark' });
Expand All @@ -52,18 +43,18 @@ const decorateFooter = (el, altCtaMetaData, styles, cardType) => {
return container;
};

const createSecureSign = () => {
const cardFooterRow = el.querySelector('.consonant-CardFooter-row');
const standardWrapper = createTag('div', { class: 'standard-wrapper' });
const secureTransactionWrapper = decorateWithSecureTransactionSign();
standardWrapper.append(secureTransactionWrapper, cardFooterRow);
cardFooter?.append(standardWrapper);
};

const decorateAlternativeCta = () => {
const altCtaRegex = /href=".*"/;
if (!altCtaRegex.test(altCtaMetaData[1]?.innerHTML)) return;

const cardFooterRow = el.querySelector('.consonant-CardFooter-row');
if (el.classList.contains('secure')) {
const standardWrapper = createTag('div', { class: 'standard-wrapper' });
const secureTransactionWrapper = decorateWithSecureTransactionSign();
standardWrapper.append(secureTransactionWrapper, cardFooterRow);
cardFooter?.append(standardWrapper);
}

const originalCtaButton = cardFooterRow.querySelector('.consonant-CardFooter-cell--right');
const checkboxContainer = createCheckbox(altCtaMetaData[0]);
const altCtaButtonData = altCtaMetaData[1];
Expand All @@ -79,25 +70,32 @@ const decorateFooter = (el, altCtaMetaData, styles, cardType) => {
altCtaMetaData[0].parentNode.remove();
};
if (altCtaMetaData !== null) decorateAlternativeCta();
if (el.classList.contains('secure')) createSecureSign();
cardFooter.querySelectorAll('.consonant-CardFooter-cell').forEach((cell) => cell.classList.add(`consonant-${cardType}-cell`));
};

const addInner = (el, altCta, cardType, merchCard) => {
const titles = [...el.querySelectorAll('h1, h2, h3, h4, h5, h6')];
const rows = [...el.querySelectorAll('p')];
const innerElements = [...el.querySelectorAll('h1, h2, h3, h4, h5, h6, p, ul')];
const styles = [...el.classList];
const merch = styles.includes('merch-card');
const pElement = merch && el.querySelector(':scope > div > div > p:last-of-type');
const links = pElement ? pElement.querySelectorAll('a') : el.querySelectorAll('a');
const list = el.querySelector('ul');

const inner = el.querySelector(':scope > div:not([class])');
inner.classList.add(`consonant-${cardType}-inner`);
const title = createTitle(titles, cardType);
const description = createDescription(rows, cardType, inner);

inner.prepend(title);
inner.append(description);
addFooter(links, inner, merchCard);
innerElements.forEach((element) => {
if (element.tagName.match(/^H[1-6]$/)) element.classList.add(`consonant-${cardType}-title`);
if (element.tagName.match(/^P$/)) element.classList.add(`consonant-${cardType}-description`);
if (element.tagName.match(/^UL$/)) {
list.classList.add(`consonant-${cardType}-list`);
list.querySelectorAll('li').forEach((li) => li.classList.add(`consonant-${cardType}-list-item`));
}
});

inner.append(...innerElements);
addFooter(links, inner, cardType !== PLANS_CARD);
decorateFooter(el, altCta, cardType);
merchCard.append(inner);
};
Expand All @@ -110,9 +108,15 @@ const decorateRibbon = (el, ribbonMetadata, cardType) => {
const ribbonWrapper = ribbonMetadata[0].parentNode;
const ribbon = ribbonMetadata[1];
ribbon.classList.add(`consonant-${cardType}-ribbon`);
ribbon.style.backgroundColor = ribbonBgColor;
const borderStyle = `1px solid ${ribbonBgColor}`;
if (el.classList.contains('evergreen')) {
ribbon.style.border = borderStyle;
ribbon.style.borderRight = 'none';
} else {
ribbon.style.backgroundColor = ribbonBgColor;
el.style.border = borderStyle;
}
ribbon.style.color = ribbonTextColor;
el.style.border = `1px solid ${ribbonBgColor}`;
const picture = el.querySelector(`.consonant-${cardType}-img`);
if (picture) {
picture.insertAdjacentElement('afterend', ribbon);
Expand Down
61 changes: 36 additions & 25 deletions test/blocks/merch-card/merch-card.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ describe('Merch Card', () => {
const cardFooter = inner.querySelector('.consonant-CardFooter');
const buttons = cardFooter.querySelectorAll('.con-button');

expect(document.querySelector('.consonant-ProductCard')).to.be.exist;
expect(inner.querySelector('.consonant-SegmentBlade-title')).to.be.exist;
expect(inner.querySelector('.consonant-SegmentBlade-description')).to.be.exist;
expect(cardFooter.querySelector('.con-button')).to.be.exist;
expect(document.querySelector('.consonant-ProductCard')).to.exist;
expect(inner.querySelector('.consonant-SegmentBlade-title')).to.exist;
expect(inner.querySelector('.consonant-SegmentBlade-description')).to.exist;
expect(cardFooter.querySelector('.con-button')).to.exist;
expect(buttons.length).to.be.equal(2);
expect(buttons[0].textContent).to.be.equal('Learn More');
expect(buttons[1].textContent).to.be.equal('Save now');
Expand Down Expand Up @@ -47,14 +47,18 @@ describe('Merch Card', () => {
const ribbon = document.querySelector('.consonant-SpecialOffers-ribbon');
const buttons = cardFooter.querySelectorAll('.con-button');

expect(document.querySelector('.consonant-ProductCard')).to.be.exist;
expect(inner.querySelector('.consonant-SpecialOffers-title')).to.be.exist;
expect(inner.querySelector('.consonant-SpecialOffers-description')).to.be.exist;
expect(document.querySelector('.consonant-SpecialOffers-iconWrapper')).to.be.exist;
expect(ribbon).to.be.exist;
expect(ribbon.style.backgroundColor).to.be.equal('rgb(237, 204, 45)');
expect(document.querySelector('.consonant-ProductCard')).to.exist;
expect(inner.querySelector('.consonant-SpecialOffers-title')).to.exist;
expect(inner.querySelector('.consonant-SpecialOffers-description')).to.exist;
expect(document.querySelector('.consonant-SpecialOffers-iconWrapper')).to.exist;
expect(ribbon).to.exist;
expect(ribbon.style.backgroundColor).to.be.equal('');
expect(ribbon.style.color).to.be.equal('rgb(0, 0, 0)');
expect(ribbon.textContent).to.be.equal('LOREM IPSUM DOLOR');
expect(ribbon.style.borderLeft).to.be.equal('1px solid rgb(237, 204, 45)');
expect(ribbon.style.borderRight).to.be.equal('none');
expect(ribbon.style.borderTop).to.be.equal('1px solid rgb(237, 204, 45)');
expect(ribbon.style.borderBottom).to.be.equal('1px solid rgb(237, 204, 45)');
expect(buttons.length).to.be.equal(2);
expect(buttons[0].textContent).to.be.equal('Learn More');
expect(buttons[1].textContent).to.be.equal('Save now');
Expand All @@ -78,26 +82,33 @@ describe('Merch Card', () => {
const plansCard = document.querySelector('.consonant-ProductCard');
const iconsWrapper = document.querySelector('.consonant-PlansCard-iconWrapper');
const icons = iconsWrapper.querySelectorAll('.consonant-MerchCard-ProductIcon');
const list = document.querySelector('.consonant-PlansCard-list');
const listItems = list.querySelectorAll('li');

expect(plansCard).to.be.exist;
expect(plansCard).to.exist;
expect(plansCard.style.border).to.be.equal('1px solid rgb(237, 204, 45)');
expect(inner.querySelector('.consonant-PlansCard-title')).to.be.exist;
expect(inner.querySelector('.consonant-PlansCard-description')).to.be.exist;
expect(iconsWrapper).to.be.exist;
expect(inner.querySelector('.consonant-PlansCard-title')).to.exist;
expect(inner.querySelector('.consonant-PlansCard-description')).to.exist;
expect(iconsWrapper).to.exist;
expect(icons.length).to.be.equal(2);
expect(ribbon).to.be.exist;
expect(ribbon).to.exist;
expect(ribbon.style.backgroundColor).to.be.equal('rgb(237, 204, 45)');
expect(ribbon.style.color).to.be.equal('rgb(0, 0, 0)');
expect(ribbon.textContent).to.be.equal('LOREM IPSUM DOLOR');
expect(buttons.length).to.be.equal(2);
expect(buttons[0].textContent).to.be.equal('Learn More');
expect(buttons[1].textContent).to.be.equal('Save now');
expect(secureWrapper).to.be.exist;

expect(checkBoxContainer.querySelector('.checkMark')).to.be.exist;
expect(secureWrapper).to.exist;
expect(list).to.exist;
expect(list.classList.contains('consonant-PlansCard-list')).to.be.true;
expect(listItems.length).to.be.equal(2);
expect(listItems[0].textContent).to.be.equal('Maecenas porttitor congue massa');
expect(listItems[1].textContent).to.be.equal('Nunc viverra imperdiet enim.');

expect(checkBoxContainer.querySelector('.checkMark')).to.exist;
expect(checkBoxContainer.querySelector('.checkbox-label').textContent).to.be.equal('Lorem ipsum dolor sit amet');
expect(secureWrapper.querySelector('.secure-transaction-icon').classList).to.be.exist;
expect(secureWrapper.querySelector('.secure-transaction-label')).to.be.exist;
expect(secureWrapper.querySelector('.secure-transaction-icon').classList).to.exist;
expect(secureWrapper.querySelector('.secure-transaction-label')).to.exist;

expect(inactiveButton.classList.contains('button--inactive')).to.be.true;
checkBoxContainer.querySelector('.checkMark').click();
Expand All @@ -120,17 +131,17 @@ describe('Merch Card', () => {
const iconsWrapper = document.querySelector('.consonant-PlansCard-iconWrapper');
const icons = iconsWrapper.querySelectorAll('.consonant-MerchCard-ProductIcon');

expect(plansCard).to.be.exist;
expect(plansCard).to.exist;
console.log(plansCard.style.border);
expect(inner.querySelector('.consonant-PlansCard-title')).to.be.exist;
expect(inner.querySelector('.consonant-PlansCard-description')).to.be.exist;
expect(iconsWrapper).to.be.exist;
expect(inner.querySelector('.consonant-PlansCard-title')).to.exist;
expect(inner.querySelector('.consonant-PlansCard-description')).to.exist;
expect(iconsWrapper).to.exist;
expect(icons.length).to.be.equal(2);
expect(ribbon).to.not.exist;
expect(buttons.length).to.be.equal(2);
expect(buttons[0].textContent).to.be.equal('Learn More');
expect(buttons[1].textContent).to.be.equal('Save now');
expect(inactiveButton).to.be.exist;
expect(inactiveButton).to.exist;
expect(secureWrapper).to.not.exist;
expect(checkBoxContainer).to.not.exist;
});
Expand Down
34 changes: 5 additions & 29 deletions test/blocks/merch-card/mocks/plans-card.html
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,4 @@
<div class="section">
<div class="merch-card plans">
<div>
<div>#EDCC2D, #000000</div>
<div>LOREM IPSUM DOLOR</div>
</div>
<div>
<div>
<p>
<picture>
<source type="image/webp" srcset="" media="(min-width: 600px)">
<source type="image/webp" srcset="">
<source type="image/png" srcset="" media="(min-width: 600px)">
<img loading="lazy" alt="" src="" width="1600" height="900">
</picture>
</p>
<h4 id="lorem-ipsum-dolor-sit-amet"><em>Lorem ipsum dolor sit amet</em></h4>
<h3 id="lorem-ipsum-dolor">Lorem ipsum dolor</h3>
<p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
<p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>
<h6 id="secure-transaction">{{secure-transaction}}</h6>
<p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
</div>
</div>
<div>
<div>Lorem ipsum dolor sit amet</div>
<div><a href="/tools/ost?osi=Habitant&#x26;offerId=123456789&#x26;type=checkoutUrl&#x26;text=free-trial">CTA {{free-trial}}</a></div>
</div>
</div>
<div class="merch-card empty">
<div>
<div></div>
Expand Down Expand Up @@ -56,6 +27,11 @@ <h4 id="lorem-ipsum-dolor-sit-amet"><em>Lorem ipsum dolor sit amet</em></h4>
<h3 id="lorem-ipsum-dolor">Lorem ipsum dolor</h3>
<p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
<p><strong>Maecenas</strong></p>
<ul>
<li>Maecenas porttitor congue massa</li>
<li>Nunc viverra imperdiet enim.</li>
</ul>
<p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>
<p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion test/blocks/merch-card/mocks/special-offers.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="section">
<div class="merch-card special-offers">
<div class="merch-card special-offers evergreen">
<div>
<div>#EDCC2D, #000000</div>
<div>LOREM IPSUM DOLOR</div>
Expand Down

0 comments on commit 6d5b87f

Please sign in to comment.