Skip to content

Commit

Permalink
Added additional options for media block (#971)
Browse files Browse the repository at this point in the history 
* MWPW-129919 - Added additional options for media block

---------

Co-authored-by: Blaine Gunn <Blainegunn@gmail.com>
Co-authored-by: Ryan Parrish <churchofslidin@gmail.com>
  • Loading branch information
@saragajic11 @Blainegunn @ryanmparrish
3 people authored Aug 14, 2023
1 parent 0cf86d4 commit 565caa6
Show file tree
Hide file tree
Showing 6 changed files with 206 additions and 9 deletions.
107 changes: 100 additions & 7 deletions libs/blocks/media/media.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@

.media [class^="detail"] { margin: 0 0 var(--spacing-xxs) 0; }

.media .action-area { margin-top: var(--spacing-s); }
.media .action-area {
margin-top: var(--spacing-s);
margin-bottom: 0;
}

.media div > *:last-child { margin-bottom: 0; }

Expand Down Expand Up @@ -103,13 +106,86 @@ div[class*="-up"] .media .foreground > .media-row {
padding: 0 0 var(--spacing-m);
}

.media .default-list {
padding-left: 20px;
margin-top: var(--spacing-xs);
margin-bottom: var(--spacing-xs);
}

.media li::before {
content: "";
display: inline-block;
margin-left: 3px;
}

.media.checklist li {
background: url("/libs/img/ui/checkmark-green.svg") no-repeat 5px 5px transparent;
list-style-type: none;
margin-left: -25px;
padding: 0 0 1px 29px;
vertical-align: middle;
}

.media .subcopy {
font-size: var(--type-heading-xs-size);
line-height: var(--type-body-s-lh);
margin-top: var(--spacing-xs);
}

.media h3.heading-xs {
margin-top: var(--spacing-s);
margin-bottom: var(--spacing-xs);
}

.media p.icon-area {
margin-bottom: 0;
}

.media p.subcopy-link {
margin-top: 0;
margin-bottom: 8px;
}

.media svg.icon-milo, img.icon-milo {
top: .155em;
}

.media.qr-code img.qr-code-img {
display: none;
}

.media.qr-code .qr-button-container {
display: inline;
margin-right: var(--spacing-s);
}

.media.qr-code a {
width: 135px;
max-width: 140px;
height: 50px;
font-size: 19px;
align-items: center;
justify-content: center;
padding-bottom: 0;
padding-top: 0;
display: inline-flex;
}

.media.qr-code .google-play {
background: url('/libs/img/ui/google-play.svg') no-repeat transparent;
}

.media.qr-code .app-store {
background: url('/libs/img/ui/app-store.svg') no-repeat transparent;
}

@media screen and (min-width: 600px) {
.media > .foreground .media-row {
gap: var(--spacing-m);
flex-direction: row;
max-width: 1000px;
}

.media[class*="-up"] .foreground > .media-row .image,
div[class*="-up"] .media .foreground > .media-row .image {
margin-bottom: var(--spacing-s);
Expand All @@ -132,28 +208,28 @@ div[class*="-up"] .media .foreground > .media-row {
.media.large > .foreground .media-row .image {
width: 50%;
}

.media[class*="-up"].large > .foreground .media-row .text,
.media[class*="-up"].large > .foreground .media-row .image,
div[class*="-up"] .media.large > .foreground .media-row .text,
div[class*="-up"] .media.large > .foreground .media-row .image {
width: 100%;
}

.media.media-reversed .foreground .media-row > div:first-child {
order: 2;
}

.media .text .icon-area {
grid-template-columns: 1fr 1fr;
}
.media[class*="-up"] .foreground > div.media-row,

.media[class*="-up"] .foreground > div.media-row,
div[class*="-up"] .media .foreground > div.media-row {
padding: 0 0 var(--spacing-s);
display: block;
}

.media.two-up .foreground,
.media.three-up .foreground,
.media.four-up .foreground,
Expand Down Expand Up @@ -186,4 +262,21 @@ div[class*="-up"] .media .foreground > .media-row {
.media.three-up .foreground { grid-template-columns: repeat(3, 1fr); }
.media.four-up .foreground { grid-template-columns: repeat(4, 1fr); }
.media.five-up .foreground { grid-template-columns: repeat(5, 1fr); }

.media .subcopy {
font-size: var(--type-body-xxs-size);
line-height: var(--type-body-xxs-lh);
margin-top: 8px;
}

.media.qr-code img.qr-code-img {
display: flex;
width: 150px;
height: 170px;
}

.media.qr-code .qr-button-container {
display: none;
}

}
39 changes: 39 additions & 0 deletions libs/blocks/media/media.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,45 @@ export default function init(el) {
if (image) image.classList.add('image');
const img = image.querySelector(':scope img');
if (header && img?.alt === '') img.alt = header.textContent;

// lists
if (row.querySelector('ul')) {
el.querySelector('ul').classList.add('default-list');
}

// subcopy
const actionArea = row.querySelector('p.action-area');
if (actionArea?.nextElementSibling?.tagName === 'P') {
actionArea.nextElementSibling.className = 'subcopy';
}

// subcopy with links
if (actionArea?.nextElementSibling?.tagName === 'H3') {
actionArea.nextElementSibling.classList.remove('heading-m', 'body-xl');
actionArea.nextElementSibling.classList.add('heading-xs');
const links = row.querySelectorAll('h3.heading-xs ~ p.body-s a, h3.heading-xs ~ p.icon-area a');
links.forEach((link) => {
link.parentElement.className = 'subcopy-link';
link.className = 'body-xxs';
});
}

// qr code
if (row.closest('.qr-code')) {
const imgQRCode = row.querySelector('.text > p.body-s > picture > img');
if (imgQRCode) {
imgQRCode.classList.add('qr-code-img');
}
const qrCodeLinks = row.querySelectorAll('a');
const googleBtn = qrCodeLinks[0];
const appleBtn = qrCodeLinks[1];
googleBtn.textContent = '';
googleBtn.classList.add('google-play');
googleBtn.parentNode.classList.add('qr-button-container');
appleBtn.textContent = '';
appleBtn.classList.add('app-store');
appleBtn.parentNode.classList.add('qr-button-container');
}
container.append(row);
});
el.append(container);
Expand Down
11 changes: 9 additions & 2 deletions libs/blocks/z-pattern/z-pattern.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,11 @@ function getReversedRowCount(rows) {

function getChildSingleRowCount(children) {
return [...children].reduce((length, child) => {
if (child.children.length === 1) length += 1;
return length;
let el = length;
if (child.children.length === 1) {
el += 1;
}
return el;
}, 0);
}

Expand Down Expand Up @@ -84,7 +87,11 @@ export default function init(el) {
});
}
const mediaItems = el.querySelectorAll(':scope > .media');
const variants = ['checklist', 'qr-code'];
mediaItems.forEach((i) => {
variants.forEach((v) => {
if (el.classList.contains(v)) i.classList.add(v);
});
initMedia(i, false);
});
}
5 changes: 5 additions & 0 deletions libs/styles/typography.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,11 @@
line-height: var(--type-body-xs-lh);
}

.body-xxs {
font-size: var(--type-heading-xxs-size);
line-height: var(--type-body-xs-lh);
}

.detail-xl {
font-size: var(--type-detail-l-size);
line-height: var(--type-detail-l-lh);
Expand Down
20 changes: 20 additions & 0 deletions test/blocks/media/media.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,24 @@ describe('media', () => {
expect(isDark).to.equal(false);
});
});
describe('subcopy with links media', () => {
it('does have subcopy with links', () => {
const links = medias[4].querySelectorAll('h3.heading-xs ~ p.subcopy-link > a');
expect(links.length).to.greaterThanOrEqual(2);
});
});
describe('media with qr-code', () => {
it('does have qr-code image', () => {
const qrCodeImg = medias[5].querySelector('img.qr-code-img');
expect(qrCodeImg).to.exist;
});
it('does have CTA for google-play', () => {
const googlePlayCta = medias[5].querySelector('a.google-play');
expect(googlePlayCta).to.exist;
});
it('does have CTA for app-store', () => {
const appStoreCta = medias[5].querySelector('a.app-store');
expect(appStoreCta).to.exist;
});
});
});
33 changes: 33 additions & 0 deletions test/blocks/media/mocks/body.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,37 @@ <h2 id="använd-acrobat-verktyg-kostnadsfritt">Använd Acrobat-verktyg kostnadsf
</div>
</div>
</div>
<div class="media">
<div class="container foreground">
<div>
<picture>
<source media="(max-width: 400px)" srcset="./">
<img alt="" loading="lazy" src="">
</picture>
</div>
<div>
<p>Body S 16/24 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p class="action-area"><strong><a href="https://adobe.com/">Learn More</a></strong></p>
<h3 id="watch-tutorial-h3" class="'heading-m', 'body-xl">Watch tutorial H3</h3>
<p class="body-s"><strong><a href="https://adobe.com/acrobat"><span class="icon icon-play-circle"></span>Subcopy Link 1</a></strong></p>
<p class="body-s"><strong><a href="https://www.adobe.com/acrobat/personal-document-management.html#AdobeTV_341149"><span class="icon icon-play-circle"></span>Subcopy link 2</a></strong></p>
</div>
</div>
</div>
<div class="media qr-code">
<div class="container foreground">
<div>
<picture>
<source media="(max-width: 400px)" srcset="./">
<img alt="" loading="lazy" src="">
</picture>
</div>
<div class="text">
<p class="body-s">Body S 16/24 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
<p class="body-s"><picture><img loading="lazy" src="/drafts/sara/qr.svg"></picture></p>
<p><a href="http://play.google.com">Google play</a></p>
<p><a href="https://adobeacrobat.app.link/ooe3VYFioeb">Apple store</a></p>
</div>
</div>
</div>

0 comments on commit 565caa6

Please sign in to comment.