Skip to content

Commit

Permalink
MWPW-154209 - [hero-marquee] bugs (#2727)
Browse files Browse the repository at this point in the history 
* hero bugz updates

* added wrapInnerHTMLInPTag for single line entries

* changed order to wrapInnerinP so it happens before decorateButtons

* PR feedback

* PR feedback - minor logic fix for potential null value

* minor fix, missing scope for flex dir col for .bg-bottom-tablet

* missing selector for bg-bottom-tablet btm padding

* Fixed scope so row-lockup also gets iconography.css

* PR feedback, shorten some code logic

* await loadIconography
  • Loading branch information
@ryanmparrish
ryanmparrish authored Sep 2, 2024
1 parent 5417762 commit 3551ffd
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 78 deletions.
74 changes: 14 additions & 60 deletions libs/blocks/hero-marquee/hero-marquee.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,22 +62,8 @@
justify-content: center;
}

/* Lockup Area */
.hero-marquee .lockup-area {
font-weight: 700;
display: flex;
align-items: center;
gap: var(--spacing-xs);
margin: 0 0 var(--spacing-xxs);
font-size: var(--type-body-m-size);
line-height: var(--type-body-m-lh);
text-transform: initial;
white-space: nowrap;
}

.hero-marquee .lockup-area picture {
line-height: 0;
display: block;
.hero-marquee .row-lockup .lockup-area {
margin: 0;
}

.hero-marquee .lockup-area a,
Expand All @@ -102,45 +88,6 @@
display: block;
}

/* Lockup Area sizes - default large */
.hero-marquee .lockup-area picture img,
.hero-marquee .l-icon .lockup-area,
.hero-marquee.l-icon .lockup-area {
font-size: var(--type-body-m-size);
line-height: var(--type-body-m-lh);
}

.hero-marquee .lockup-area picture img,
.hero-marquee .l-icon .lockup-area picture img,
.hero-marquee.l-icon .lockup-area picture img {
min-width: var(--icon-size-l);
height: var(--icon-size-l);
}

.hero-marquee .m-icon .lockup-area,
.hero-marquee.m-icon .lockup-area {
font-size: var(--type-body-s-size);
line-height: var(--type-body-s-lh);
}

.hero-marquee .m-icon .lockup-area picture img,
.hero-marquee.m-icon .lockup-area picture img {
min-width: var(--icon-size-m);
height: var(--icon-size-m);
}

.hero-marquee .xl-icon .lockup-area,
.hero-marquee.xl-icon .lockup-area {
font-size: var(--type-body-xl-size);
line-height: var(--type-body-xl-lh);
}

.hero-marquee .xl-icon .lockup-area picture img,
.hero-marquee.xl-icon .lockup-area picture img {
min-width: var(--icon-size-xl);
height: var(--icon-size-xl);
}

.hero-marquee.center {
text-align: center;
align-items: center;
Expand All @@ -158,7 +105,6 @@
.hero-marquee .main-copy [class^="heading"],
.hero-marquee .norm p:only-child { margin: 0; }
.hero-marquee .norm :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 var(--spacing-xs) 0; }
.hero-marquee .norm .action-area { margin-top: var(--spacing-s); }
.hero-marquee .norm div > *:last-child { margin-bottom: 0; }
.hero-marquee .norm div *:first-child { margin-top: 0; }

Expand Down Expand Up @@ -322,8 +268,10 @@ html[dir="rtl"] .hero-marquee li.icon-item span.icon {
}

/* con-vars support */
.hero-marquee:is(.bg-top-mobile, .bg-top-mobile, .bg-bottom-mobile) .background {
.hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile, .bg-top-tablet, .bg-bottom-tablet) .background,
.hero-marquee:is(.bg-top-mobile, .bg-bottom-mobile, .bg-top-tablet, .bg-bottom-tablet) .background video {
position: relative;
width: 100%;
}

.hero-marquee.bg-top-mobile {
Expand Down Expand Up @@ -375,14 +323,19 @@ html[dir="rtl"] .hero-marquee li.icon-item span.icon {
}

/* con-vars support */
.hero-marquee.bg-top-tablet .background,
.hero-marquee.bg-bottom-tablet .background {
.hero-marquee:is(.bg-top-tablet, .bg-bottom-tablet) .background,
.hero-marquee:is(.bg-top-tablet, .bg-bottom-tablet) .background video {
position: relative;
width: 100%;
}

.hero-marquee.bg-top-tablet {
padding-top: 0;
}

.hero-marquee.bg-bottom-tablet {
padding-bottom: 0;
}

.hero-marquee.bg-bottom-tablet .background {
order: 2;
Expand Down Expand Up @@ -413,7 +366,8 @@ html[dir="rtl"] .hero-marquee li.icon-item span.icon {
justify-content: center;
}

.hero-marquee.bg-top-tablet {
.hero-marquee.bg-top-tablet,
.hero-marquee.bg-bottom-tablet {
flex-direction: column;
}

Expand Down
68 changes: 50 additions & 18 deletions libs/blocks/hero-marquee/hero-marquee.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,13 @@ import { createTag, loadStyle, getConfig } from '../../utils/utils.js';
const contentTypes = ['list', 'qrcode', 'lockup', 'text', 'bgcolor', 'supplemental'];
const rowTypeKeyword = 'con-block-row-';
const breakpointThemeClasses = ['dark-mobile', 'light-mobile', 'dark-tablet', 'light-tablet', 'dark-desktop', 'light-desktop'];
const textDefault = ['xxl', 'm', 'l']; // heading, body, detail

const { miloLibs, codeRoot } = getConfig();
const base = miloLibs || codeRoot;

function distillClasses(el, classes) {
const taps = ['-heading', '-body', '-detail'];
const taps = ['-heading', '-body', '-detail', '-button'];
classes?.forEach((elClass) => {
const elTaps = taps.filter((tap) => elClass.endsWith(tap));
if (!elTaps.length) return;
Expand Down Expand Up @@ -48,10 +52,31 @@ function decorateQr(el) {
});
}

function decorateLockupFromContent(el) {
async function loadIconography() {
await new Promise((resolve) => { loadStyle(`${base}/styles/iconography.css`, resolve); });
}

async function decorateLockupFromContent(el) {
const rows = el.querySelectorAll(':scope > p');
const firstRowImg = rows[0]?.querySelector('img');
if (firstRowImg) rows[0].classList.add('lockup-area');
if (!firstRowImg) return;
await loadIconography();
rows[0].classList.add('lockup-area');
rows[0].childNodes.forEach((node) => {
if (node.nodeType === 3 && node.nodeValue?.trim()) {
const newSpan = createTag('span', { class: 'lockup-label' }, node.nodeValue);
node.parentElement.replaceChild(newSpan, node);
}
});
}

async function decorateLockupRow(el, classes) {
const child = el.querySelector(':scope > div');
await loadIconography();
child?.classList.add('lockup-area');
const iconSizeClass = classes?.find((c) => c.endsWith('-icon'));
if (iconSizeClass) el.classList.remove(iconSizeClass);
el.classList.add(`${iconSizeClass?.split('-')[0] || 'l'}-lockup`);
}

function decorateBg(el) {
Expand All @@ -60,22 +85,29 @@ function decorateBg(el) {
el.remove();
}

function wrapInnerHTMLInPTag(el) {
const innerDiv = el.querySelector(':scope > div');
const containsPTag = [...innerDiv.childNodes].some((node) => node.nodeName === 'P');
if (!containsPTag) {
const pTag = createTag('p');
while (innerDiv.firstChild) pTag.appendChild(innerDiv.firstChild);
innerDiv.appendChild(pTag);
}
}

function decorateText(el, classes) {
el.classList.add('norm');
wrapInnerHTMLInPTag(el);
const btnClass = classes?.find((c) => c.endsWith('-button'));
if (btnClass) {
const [theme, size] = btnClass.split('-').reverse();
el.classList.remove(btnClass);
decorateButtons(el, `${size}-${theme}`);
decorateButtons(el, `${theme}-${size}`);
} else {
decorateButtons(el, 'button-xl');
}
distillClasses(el, classes);
}

function decorateLockupRow(el) {
const child = el.querySelector(':scope > div');
if (child) child.classList.add('lockup-area');
decorateBlockText(el, textDefault);
decorateTextOverrides(el, ['-heading', '-body', '-detail']);
}

function decorateSup(el, classes) {
Expand Down Expand Up @@ -107,7 +139,7 @@ function loadContentType(el, key, classes) {
decorateBg(el);
break;
case 'lockup':
decorateLockupRow(el);
decorateLockupRow(el, classes);
break;
case 'qrcode':
decorateQr(el);
Expand All @@ -126,8 +158,7 @@ function loadContentType(el, key, classes) {
}

function loadBreakpointThemes() {
const { miloLibs, codeRoot } = getConfig();
loadStyle(`${miloLibs || codeRoot}/styles/breakpoint-theme.css`);
loadStyle(`${base}/styles/breakpoint-theme.css`);
}

export default async function init(el) {
Expand Down Expand Up @@ -175,8 +206,8 @@ export default async function init(el) {
: null;
if (assetUnknown) assetUnknown.classList.add('asset-unknown');

decorateBlockText(copy, ['xxl', 'm', 'l']); // heading, body, detail
decorateLockupFromContent(copy);
decorateBlockText(copy, textDefault);
await decorateLockupFromContent(copy);
extendButtonsClass(copy);

/* c8 ignore next 2 */
Expand All @@ -187,15 +218,16 @@ export default async function init(el) {

const assetRow = allRows[0].classList.contains('asset');
if (assetRow) el.classList.add('asset-left');
const mainCopy = createTag('div', { class: 'main-copy' }, copy.innerHTML);
const mainCopy = createTag('div', { class: 'main-copy' });
while (copy.childNodes.length > 0) {
mainCopy.appendChild(copy.childNodes[0]);
}
rows.splice(mainRowIndex, 1);
if (mainRowIndex > 0) {
for (let i = 0; i < mainRowIndex; i += 1) {
rows[i].classList.add('prepend');
}
}

copy.innerHTML = '';
copy.append(mainCopy);
[...rows].forEach((row) => {
if (row.classList.contains('prepend')) {
Expand Down

0 comments on commit 3551ffd

Please sign in to comment.