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

MWPW-154209 - [hero-marquee] bugs #2727

Merged
merged 10 commits into from
Sep 2, 2024
Merged

MWPW-154209 - [hero-marquee] bugs #2727

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dddcfaa
hero bugz updates
ryanmparrish Aug 12, 2024
c5e717f
added wrapInnerHTMLInPTag for single line entries
ryanmparrish Aug 12, 2024
c6d9cc5
changed order to wrapInnerinP so it happens before decorateButtons
ryanmparrish Aug 12, 2024
6b9d804
PR feedback
ryanmparrish Aug 20, 2024
785f38f
PR feedback - minor logic fix for potential null value
ryanmparrish Aug 21, 2024
26c3c58
minor fix, missing scope for flex dir col for .bg-bottom-tablet
ryanmparrish Aug 21, 2024
396930e
missing selector for bg-bottom-tablet btm padding
ryanmparrish Aug 21, 2024
2b259e2
Fixed scope so row-lockup also gets iconography.css
ryanmparrish Aug 21, 2024
17d4f6c
PR feedback, shorten some code logic
ryanmparrish Aug 22, 2024
9bff24f
await loadIconography
ryanmparrish Aug 23, 2024
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
74 changes: 14 additions & 60 deletions libs/blocks/hero-marquee/hero-marquee.css
View file
Open in desktop
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
Open in desktop
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);
}
});
}

function decorateLockupRow(el, classes) {
const child = el.querySelector(':scope > div');
loadIconography();
ryanmparrish marked this conversation as resolved.
Show resolved Hide resolved
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