MWPW-153372 - Add ability to further customize buttons

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);
-}

libs/utils/decorate.js

@@ -5,17 +5,27 @@ export function decorateButtons(el, size) {
   if (buttons.length === 0) return;
   const buttonTypeMap = { STRONG: 'blue', EM: 'outline', A: 'blue' };
   buttons.forEach((button) => {
+    let target = button;
     const parent = button.parentElement;
     const buttonType = buttonTypeMap[parent.nodeName] || 'outline';
     if (button.nodeName === 'STRONG') {
-      parent.classList.add('con-button', buttonType);
-      if (size) parent.classList.add(size); /* button-l, button-xl */
+      target = parent;
     } else {
-      button.classList.add('con-button', buttonType);
-      if (size) button.classList.add(size); /* button-l, button-xl */
       parent.insertAdjacentElement('afterend', button);
       parent.remove();
     }
+    target.classList.add('con-button', buttonType);
+    if (size) target.classList.add(size); /* button-l, button-xl */
+    const customClasses = target.href && [...target.href.matchAll(/#_button-([a-zA-Z-]+)/g)];
+    if (customClasses) {
+      customClasses.forEach((match) => {
+        target.href = target.href.replace(match[0], '');
+        if (target.dataset.modalHash) {
+          target.setAttribute('data-modal-hash', target.dataset.modalHash.replace(match[0], ''));
+        }
+        target.classList.add(match[1]);
+      });
+    }
     const actionArea = button.closest('p, div');
     if (actionArea) {
       actionArea.classList.add('action-area');