MWPW-136171 - Icon block consistant variant convention from "fullwidt…

…h" to "full-width" (#1268) * use consonant block variant convention 'full-width' and add backwards compatibility for 'fullwidth' variants in the icon and text blocks. * fix style lint errors in styles.css * use fallbacks for variables that are set post LCP and use global nav variables in appropriate places in styles.css
adobecom · Sep 18, 2023 · 2c08fd5 · 2c08fd5
1 parent 22743b0
commit 2c08fd5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 47 deletions.
diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css
@@ -56,7 +56,7 @@
   font-size: var(--type-body-m-size);
 }
 
-.icon-block.fullwidth .foreground .text-content .action-area a,
+.icon-block.full-width .foreground .text-content .action-area a,
 .icon-block .foreground .text-content .action-area.supplemental-text a {
   font-weight: bold;
 }
@@ -104,7 +104,7 @@
   min-width: var(--icon-size-xl);
 }
 
-.icon-block.fullwidth .foreground .icon-area {
+.icon-block.full-width .foreground .icon-area {
   margin-bottom: var(--spacing-m);
 }
 
@@ -151,7 +151,7 @@
   margin-top: var(--spacing-s);
 }
 
-.icon-block.fullwidth.small .foreground .icon-area,
+.icon-block.full-width.small .foreground .icon-area,
 .icon-block.vertical.small .foreground .icon-area {
   margin-bottom: var(--spacing-s);
 }
@@ -160,7 +160,7 @@
   margin-bottom: var(--spacing-m);
 }
 
-.five-up .icon-block:not(.fullwidth) .foreground .icon-area {
+.five-up .icon-block:not(.full-width) .foreground .icon-area {
   max-height: 48px;
   max-width: 147px;
   margin-bottom: var(--spacing-xs);
@@ -170,7 +170,7 @@
   width: fit-content;
 }
 
-.five-up .icon-block:not(.fullwidth) .foreground .icon-area img {
+.five-up .icon-block:not(.full-width) .foreground .icon-area img {
   max-height: 48px;
   max-width: 147px;
 }
@@ -233,7 +233,7 @@
   margin-bottom: 0;
 }
 
-.icon-block.fullwidth .foreground .text-content .action-area {
+.icon-block.full-width .foreground .text-content .action-area {
   justify-content: center;
 }
 
@@ -242,7 +242,7 @@
   flex-direction: column;
 }
 
-.icon-block:not(.small.fullwidth) .foreground .text-content .action-area {
+.icon-block:not(.small.full-width) .foreground .text-content .action-area {
   white-space: initial;
   display: flex;
   flex-wrap: wrap;
@@ -260,13 +260,13 @@
   margin-bottom: var(--spacing-s);
 }
 
-.icon-block.fullwidth .foreground,
+.icon-block.full-width .foreground,
 .icon-block.bio .foreground {
   width: var(--grid-container-width);
   margin: 0 auto;
 }
 
-[class*='grid-width-'] .icon-block.fullwidth .foreground,
+[class*='grid-width-'] .icon-block.full-width .foreground,
 [class*='grid-width-'] .icon-block.bio .foreground {
   width: unset;
   max-width: unset;
@@ -298,21 +298,13 @@
   line-height: var(--type-body-xs-lh);
 }
 
-.icon-block.fullwidth.small .foreground .text-content .action-area > a:not(.con-button) {
+.icon-block.full-width.small .foreground .text-content .action-area > a:not(.con-button) {
   display: block;
   margin-top: var(--spacing-s);
   font-size: var(--type-body-m-size);
   line-height: var(--type-body-m-lh);
 }
 
-.two-up .icon-block.fullwidth,
-.three-up .icon-block.fullwidth,
-.four-up .icon-block.fullwidth,
-.five-up .icon-block.fullwidth {
-  grid-column: 1 /-1;
-}
-
-
 @media screen and (min-width: 600px) and (max-width: 1200px) {
   .icon-block .foreground .icon-area {
     max-width: 234px;
@@ -350,7 +342,7 @@
 }
 
 @media screen and (min-width: 1200px) {
-  .icon-block.fullwidth .foreground,
+  .icon-block.full-width .foreground,
   .icon-block.bio .foreground {
     max-width: 800px;
     margin: 0 auto;

diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js
@@ -17,7 +17,7 @@
 import { decorateBlockText, getBlockSize } from '../../utils/decorate.js';
 import { createTag } from '../../utils/utils.js';
 
-const variants = ['fullwidth', 'vertical', 'bio', 'inline'];
+const variants = ['full-width', 'vertical', 'bio', 'inline'];
 const iconBlocks = {
   small: {
     [variants[0]]: ['m', 'm'],
@@ -63,7 +63,7 @@ function decorateContent(el) {
       text.lastElementChild.classList.add('action-area');
     }
     const size = getBlockSize(el, 2);
-    const variant = [...variants].filter((v) => el.classList.contains(v))?.[0] ?? 'fullwidth';
+    const variant = [...variants].filter((v) => el.classList.contains(v))?.[0] ?? variants[0];
     const textSize = upAndInline(el) ? ['xs', 's'] : iconBlocks[size][variant];
     decorateBlockText(el, textSize);
     if (el.classList.contains('inline')) {
@@ -80,5 +80,6 @@ function decorateContent(el) {
 export default function init(el) {
   el.classList.add('con-block');
   if (el.classList.contains('intro')) el.classList.add('xxxl-spacing-top', 'xl-spacing-static-bottom');
+  if (el.classList.contains('fullwidth')) el.classList.replace('fullwidth', 'full-width');
   decorateContent(el);
 }
diff --git a/libs/styles/styles.css b/libs/styles/styles.css
@@ -1,7 +1,10 @@
-
- /*** Variables ***/
+/*** Variables ***/
 
  :root {
+  --global-height-nav: 64px;
+  --global-height-breadcrumbs: 33px;
+  --feds-totalheight-nav: calc(var(--feds-height-nav, --global-height-nav) + var(--feds-height-breadcrumbs, --global-height-breadcrumbs));
+
   /* Colors */
   --link-color: #035fe6;
   --link-hover-color: #136ff6;
@@ -482,6 +485,7 @@ span.icon.margin-inline-end { margin-inline-end: 8px; }
 .con-block.xxl-spacing-static-bottom { padding-bottom: var(--spacing-xxl-static); }
 .con-block.xxxl-spacing-static-bottom { padding-bottom: var(--spacing-xxxl-static); }
 
+div[class*='-up'] .con-block.full-width { grid-column: 1 /-1; }
 div[class*='-up'] .con-block.has-bg { padding: var(--spacing-m); }
 div[class*='-up'] .con-block.has-bg.xs-spacing { padding: var(--spacing-xs); }
 div[class*='-up'] .con-block.has-bg.s-spacing { padding: var(--spacing-s); }
@@ -528,11 +532,6 @@ div[class*='-up'] .con-block.has-bg.no-spacing { padding: 0; }
 }
 
 /*** Global Styles ***/
-
-:root {
-  --feds-totalheight-nav: calc(var(--feds-height-nav) + var(--feds-height-breadcrumbs));
-}
-
 @font-face {
   font-family: 'Trebuchet MS';
   font-weight: 700;
@@ -589,13 +588,13 @@ header:not(.global-navigation) ~ main {
   all of the ':not(.global-navigation)' rules can be entirely removed.
  */
 header.global-navigation {
-  height: 64px; /* TODO better approach for value? */
+  height: var(--global-height-nav); /* TODO better approach for value? */
   visibility: hidden;
 }
 
 @media (min-width: 900px) {
   header.global-navigation.has-breadcrumbs {
-    padding-bottom: 33px; /* TODO better approach for value? */
+    padding-bottom: var(--global-height-breadcrumbs); /* TODO better approach for value? */
   }
 }
 
@@ -691,6 +690,19 @@ div:not([class]) > div > div > img[src^="./media_"] {
   margin: 0 auto;
 }
 
+picture.bg-img {
+  display: block;
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+
+picture.bg-img img {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
 .section .section-background img {
   object-fit: cover;
   height: 100%;
@@ -747,27 +759,13 @@ div[data-failed="true"]::before {
   display: block;
 }
 
-/* Utilities */
-picture.bg-img {
-  display: block;
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-}
-
-picture.bg-img img {
-  object-fit: cover;
-  height: 100%;
-  width: 100%;
-}
-
 .milo-card-section {
   visibility: hidden;
 }
 
 @media (min-width: 900px) {
   header:not(.global-navigation) {
-    min-height: 64px;
+    min-height: var(--global-height-nav);
     border-bottom: 1px solid #EAEAEA;
     overflow: unset;
   }

diff --git a/test/blocks/icon-block/mocks/body.html b/test/blocks/icon-block/mocks/body.html
@@ -56,7 +56,7 @@ <h3 id="full-width-medium">FULL-WIDTH MEDIUM</h3>
   </div>
 </div>
 <div>
-  <div class="icon-block fullwidth medium">
+  <div class="icon-block full-width medium">
     <div>
       <div>
         <p>
@@ -92,7 +92,7 @@ <h3 id="full-width-medium-intro">FULL-WIDTH MEDIUM INTRO</h3>
   </div>
 </div>
 <div>
-  <div class="icon-block fullwidth medium intro">
+  <div class="icon-block full-width medium intro">
     <div>
       <div>
         <p>