Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)"

libs/blocks/aside/aside.js

@@ -14,8 +14,8 @@
 * Aside - v5.1
 */
 
-import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg, decorateTextOverrides } from '../../utils/decorate.js';
-import { createTag, getConfig, loadStyle } from '../../utils/utils.js';
+import { decorateBlockText, decorateIconStack, applyHoverPlay, decorateBlockBg } from '../../utils/decorate.js';
+import { createTag } from '../../utils/utils.js';
 
 // standard/default aside uses same text sizes as the split
 const variants = ['split', 'inline', 'notification'];
@@ -163,13 +163,7 @@ function decoratePromobar(el) {
   return foreground;
 }
 
-async function loadIconography() {
-  const { miloLibs, codeRoot } = getConfig();
-  const base = miloLibs || codeRoot;
-  await new Promise((resolve) => { loadStyle(`${base}/styles/iconography.css`, resolve); });
-}
-
-async function decorateLayout(el) {
+function decorateLayout(el) {
   const elems = el.querySelectorAll(':scope > div');
   if (elems.length > 1) {
     decorateBlockBg(el, elems[0]);
@@ -188,12 +182,7 @@ async function decorateLayout(el) {
   }
   const picture = text?.querySelector('p picture');
   const iconArea = picture ? (picture.closest('p') || createTag('p', null, picture)) : null;
-  if (iconArea) {
-    const iconVariant = el.className.match(/-(avatar|lockup)/);
-    const iconClass = iconVariant ? `${iconVariant[1]}-area` : 'icon-area';
-    if (iconVariant) await loadIconography();
-    iconArea.classList.add(iconClass);
-  }
+  iconArea?.classList.add('icon-area');
   const foregroundImage = foreground.querySelector(':scope > div:not(.text) img')?.closest('div');
   const bgImage = el.querySelector(':scope > div:not(.text):not(.foreground) img')?.closest('div');
   const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a[href*=".mp4"]')?.closest('div');
@@ -213,18 +202,18 @@ async function decorateLayout(el) {
   } else if (!iconArea) {
     foreground?.classList.add('no-image');
   }
-  if (el.classList.contains('split')) decorateIconStack(el);
+  if (el.classList.contains('split')
+      && (el.classList.contains('medium') || el.classList.contains('large'))) {
+    decorateIconStack(el);
+  }
   return foreground;
 }
 
-export default async function init(el) {
+export default function init(el) {
   el.classList.add('con-block');
   const blockData = getBlockData(el);
-  const blockText = await decorateLayout(el);
+  const blockText = decorateLayout(el);
   decorateBlockText(blockText, blockData);
   decorateStaticLinks(el);
   formatPromoButton(el);
-  decorateTextOverrides(el);
-  // Override Detail with Title L style if class exists - Temporary solution until Spectrum 2
-  if (el.classList.contains('l-title')) el.querySelector('[class*="detail-"]')?.classList.add('title-l');
 }

libs/styles/iconography.css

@@ -1,40 +1,28 @@
-/* iconography.css
+/* iconograph.css
 This is consonant shared design patterns 
 dealing w/ groups of media and associated text 
 - lockup
+(coming soon...)
 - avatar
 */
 
 :root {
-  /* lockup sizes */
-  --type-lockup-all-weight: 700;
-  --type-lockup-xxl-size: 55px;
-  --type-lockup-xxl-ls: -0.01em;
-  --type-lockup-xl-size: 44px;
-  --type-lockup-xl-ls: -0.01em;
-  --type-lockup-l-size: 38px;
-  --type-lockup-l-ls: -0.01em;
-  --type-lockup-m-size: 27px;
-  --type-lockup-m-ls: -0.02em;
-  --type-lockup-s-size: 22px;
-  --type-lockup-s-ls: -0.02em;
-  --type-lockup-xs-size: 16px;
-  --type-lockup-xs-ls: 0;
-  --type-lockup-xxs-size: 11px;
-  --type-lockup-xxs-ls: -0.01em;
-
-  /* avatar sizes */
-  --avatar-size-xxl: 64px;
-  --avatar-size-xl: 56px;
-  --avatar-size-l: 40px;
-}
-
-@media (min-width: 1200px) {
-  :root {
-    --avatar-size-xxl: 80px;
-    --avatar-size-xl: 64px;
-    --avatar-size-l: 56px;
-  }
+    /* lockup sizes */
+    --type-lockup-all-weight: 700;
+    --type-lockup-xxl-size: 55px;
+    --type-lockup-xxl-ls: -0.01em;
+    --type-lockup-xl-size: 44px;
+    --type-lockup-xl-ls: -0.01em;
+    --type-lockup-l-size: 38px;
+    --type-lockup-l-ls: -0.01em;
+    --type-lockup-m-size: 27px;
+    --type-lockup-m-ls: -0.02em;
+    --type-lockup-s-size: 22px;
+    --type-lockup-s-ls: -0.02em;
+    --type-lockup-xs-size: 16px;
+    --type-lockup-xs-ls: 0;
+    --type-lockup-xxs-size: 11px;
+    --type-lockup-xxs-ls: -0.01em;
 }
 
 /* Lockup */
@@ -102,26 +90,3 @@ dealing w/ groups of media and associated text
 .l-lockup .lockup-area img { height: var(--icon-size-l); }
 .xl-lockup .lockup-area img { height: var(--icon-size-xl); }
 .xxl-lockup .lockup-area img { height: var(--icon-size-xxl); }
-
-.avatar-area {
-  line-height: 0;
-  margin-bottom: var(--spacing-s);
-}
-
-.l-avatar .avatar-area img {
-  border-radius: 50%;
-  height: var(--avatar-size-l);
-  width: var(--avatar-size-l);
-}
-
-.xl-avatar .avatar-area img {
-  border-radius: 50%;
-  height: var(--avatar-size-xl);
-  width: var(--avatar-size-xl);
-}
-
-.xxl-avatar .avatar-area img {
-  border-radius: 50%;
-  height: var(--avatar-size-xxl);
-  width: var(--avatar-size-xxl);
-}