Template: Bulldog Magazine Article #88

blocks/v2-hero/v2-hero.css

@@ -99,11 +99,14 @@
   height: 375px;
 }
 
-.v2-hero.v2-hero--magazine .v2-hero__content,
-.v2-hero.v2-hero--magazine .v2-hero__content * {
+.v2-hero.v2-hero--magazine .v2-hero__content {
   max-width: 850px;
 }
 
+.v2-hero.v2-hero--magazine .v2-hero__content * {
+  max-width: 489px;
+}
+
 .v2-hero--magazine .v2-hero__content-wrapper {
   justify-content: flex-start;
   padding: 25px 17px 0;
@@ -116,10 +119,6 @@
   text-transform: uppercase;
 }
 
-.v2-hero--magazine .v2-hero__heading span {
-  display: block;
-}
-
 @media (min-width: 1200px) {
   .v2-hero {
     --hero-magazine-headline: 96px;

blocks/v2-image-banner/v2-image-banner.css

@@ -1,15 +1,12 @@
-.section.v2-image-banner-container {
-  margin-bottom: 48px;
-  margin-top: 48px;
-}
-
 .v2-image-banner {
   background-size: cover;
   background-position: center;
   max-height: 160px;
   overflow: hidden;
   position: relative;
   width: 100%;
+  margin-bottom: 48px;
+  margin-top: 48px;
 }
 
 .v2-image-banner picture {
@@ -25,13 +22,15 @@
   background-attachment: fixed;
 }
 
-@media (min-width: 1200px) {
-  .section.v2-image-banner-container {
-    margin-bottom: 64px;
-    margin-top: 64px;
+@media (min-width: 768px) {
+  .v2-image-banner {
+    max-height: 360px;
   }
+}
 
+@media (min-width: 1200px) {
   .v2-image-banner {
-    max-height: 360px;
+    margin-bottom: 64px;
+    margin-top: 64px;
   }
 }

blocks/v2-recommendations/v2-recommendations.css

@@ -1,8 +1,10 @@
-.v2-recommendations-container {
+.v2-recommendations-wrapper {
   background-color: var(--c-primary-gray);
 }
 
 .v2-recommendations {
+  max-width: var(--wrapper-width);
+  margin: 0 auto;
   padding-top: 12px;
   padding-bottom: 32px;
 }

blocks/v2-recommendations/v2-recommendations.js

@@ -96,7 +96,7 @@ export default async function decorate(block) {
 
   if (filteredArticles.length) {
     buildBlock(filteredArticles, block);
+    block.parentElement.classList.add('full-width');
+    unwrapDivs(block);
   }
-
-  unwrapDivs(block);
 }

blocks/v2-social-block/v2-social-block.css

@@ -1,12 +1,9 @@
-.redesign-v2 .section.v2-social-block-container {
-  padding: 0;
-}
-
 .v2-social-block {
   --social-block-list-gap: 30px;
   --social-text-color: var(--c-primary-black);
 
-  padding: 32px 0;
+  padding: 24px 0;
+  margin: 32px 0;
 }
 
 .v2-social-block__title {
@@ -55,19 +52,47 @@
 }
 
 /* V2-MAGAZINE template stylings */
-.v2-magazine .v2-social-block-wrapper:last-child .v2-social-block {
+.v2-magazine .v2-social-block {
   border-top: 1px solid var(--c-primary-black);
-  padding-bottom: 72px;
 }
 
-.v2-magazine .v2-social-block:first-of-type .v2-social-block__list {
+.v2-magazine .v2-social-block .v2-social-block__list {
   justify-content: flex-start;
 }
 
+.v2-social-block--attribution {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.v2-magazine .v2-social-block--attribution {
+  border-top: none;
+}
+
+.v2-social-block__attribution-date {
+  font-family: var(--ff-accents-regular);
+  font-size: 14px;
+  line-height: 16.8px;
+  margin-top: 0;
+  margin-bottom: 14px;
+}
+
+.v2-social-block__attribution-author {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 @media (min-width: 744px) {
-  .v2-magazine
-    .v2-social-block-wrapper:not(:last-child)
-    .v2-social-block__list {
-    justify-content: flex-end;
+  .v2-social-block--attribution {
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 0;
+    padding-top: 32px;
+    padding-bottom: 32px;
+  }
+
+  .v2-social-block--attribution .v2-social-block__list {
+    align-self: flex-end;
   }
 }

blocks/v2-social-block/v2-social-block.js

@@ -2,9 +2,12 @@ import {
   getTextLabel,
   unwrapDivs,
   decorateIcons,
+  variantsClassesToBEM,
 } from '../../scripts/common.js';
+import { getMetadata } from '../../scripts/aem.js';
 
 const blockName = 'v2-social-block';
+const variantClasses = ['attribution'];
 const docRange = document.createRange();
 
 const LABELS = {
@@ -17,6 +20,10 @@ const CLASSES = {
   listItem: `${blockName}__list-item`,
   tooltipTop: ['tooltip', 'tooltip--top'],
   tooltipShow: 'show',
+  attribution: `${blockName}--attribution`,
+  attributionWrapper: `${blockName}__attribution-wrapper`,
+  attributionDate: `${blockName}__attribution-date`,
+  attributionAuthor: `${blockName}__attribution-author`,
 };
 
 const TEMPLATE_LINK_CONFIGS = [
@@ -25,19 +32,35 @@ const TEMPLATE_LINK_CONFIGS = [
   ['fb', 'https://www.facebook.com/sharer/sharer.php?u='],
 ];
 
-const buildTemplateBlock = (links) => {
-  const fragment = docRange.createContextualFragment(`
-    <ul class='${CLASSES.list}'>
-      ${links.map((link) => `
-        <li class='${CLASSES.listItem}'>
-          <a href='${link[1]}${window.location.href}' target='_blank'>
-            <span class='icon icon-${link[0]}'></span>
-          </a>
-        </li>
-        `).join('')}
+const buildTemplateBlock = (links, hasAttribution) => {
+  const attributionDate = getMetadata('date');
+  const attributionAuthor = getMetadata('author');
+
+  const attributionContent = hasAttribution ? `
+    <div class="${CLASSES.attributionWrapper}">
+      ${attributionDate ? `<p class="${CLASSES.attributionDate}">${attributionDate}</p>` : ''}
+      ${attributionAuthor ? `<p class="${CLASSES.attributionAuthor}">${attributionAuthor}</p>` : ''}
+    </div>
+  ` : '';
+
+  const listItems = links.map(([icon, baseHref]) => `
+    <li class="${CLASSES.listItem}">
+      <a href="${baseHref}${window.location.href}" target="_blank">
+        <span class="icon icon-${icon}"></span>
+      </a>
+    </li>
+  `).join('');
+
+  const template = `
+    ${attributionContent}
+    <ul class="${CLASSES.list}">
+      ${listItems}
     </ul>
-  `);
+  `;
+
+  const fragment = docRange.createContextualFragment(template);
   decorateIcons(fragment);
+
   return fragment;
 };
 
@@ -77,7 +100,9 @@ export default function decorate(block) {
   const isMagazineTemplate = document.body.classList.contains('v2-magazine');
 
   if (isMagazineTemplate) {
-    fragment = buildTemplateBlock(TEMPLATE_LINK_CONFIGS);
+    variantsClassesToBEM(block.classList, variantClasses, blockName);
+    const hasAttribution = block.classList.contains(CLASSES.attribution);
+    fragment = buildTemplateBlock(TEMPLATE_LINK_CONFIGS, hasAttribution);
   } else {
     const heading = block.querySelectorAll('h1, h2, h3, h4, h5, h6')[0];
     const links = Array.from(block.querySelectorAll('a'));

templates/v2-magazine/v2-magazine.css

@@ -0,0 +1,54 @@
+.v2-magazine .v2-magazine-article .section {
+  gap: 0;
+}
+
+.v2-magazine .v2-magazine-article .default-content-wrapper,
+.v2-magazine .v2-magazine-article .v2-social-block--attribution,
+.v2-magazine .v2-magazine-article .v2-embed {
+  max-width: 864px;
+  margin: auto;
+}
+
+.v2-magazine .v2-magazine-article .v2-pull-quote-wrapper {
+  max-width: 689px;
+  margin: auto;
+}
+
+.v2-magazine .v2-magazine-article .v2-hero {
+  margin-bottom: 40px;
+}
+
+.v2-magazine .v2-magazine-article .v2-embed,
+.v2-magazine .v2-magazine-article .v2-pull-quote-wrapper {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
+.v2-magazine .v2-magazine-article .default-content-wrapper h3 {
+  font-family: var(--ff-headline-medium);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 23px;
+}
+
+@media (min-width: 1200px) {
+  .v2-magazine .v2-magazine-article .v2-hero {
+    margin-bottom: 32px;
+  }
+
+  .v2-magazine .v2-magazine-article .default-content-wrapper h3 {
+    font-size: 32px;
+    line-height: 36.8px;
+  }
+
+  .v2-magazine .v2-magazine-article .v2-image-banner {
+    margin-top: 128px;
+    margin-bottom: 128px;
+  }
+
+  .v2-magazine .v2-magazine-article .v2-social-block {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-bottom: 48px;
+  }
+}