Skip to content

Commit

Permalink
Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux)" (#2777)
Browse files Browse the repository at this point in the history
Revert "MWPW-151936 - Aside Tiger Team Enhancements (redux) (#2767)"

This reverts commit 88cb101.
  • Loading branch information
elan-tbx authored Aug 22, 2024
1 parent 0ae86a3 commit d90dcc0
Show file tree
Hide file tree
Showing 8 changed files with 840 additions and 744 deletions.
309 changes: 119 additions & 190 deletions libs/blocks/aside/aside.css

Large diffs are not rendered by default.

31 changes: 10 additions & 21 deletions libs/blocks/aside/aside.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Expand Down Expand Up @@ -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]);
Expand All @@ -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');
Expand All @@ -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');
}
71 changes: 18 additions & 53 deletions libs/styles/iconography.css
Original file line number Diff line number Diff line change
@@ -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 */
Expand Down Expand Up @@ -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);
}
116 changes: 0 additions & 116 deletions test/blocks/aside/aside-legacy.test.js

This file was deleted.

Loading

0 comments on commit d90dcc0

Please sign in to comment.