MWPW-144801 - [Hero-Marquee] 🆕 block (#2412)

* initial marquee-hero block

* allow key w/ classes structure

* button-l default

* rename lockup class to flex-row

* added icon-list item types

* Enable meta rows be authored above main content && authored Icon list support

* update block name to just hero and row keys to hero-

* added textOverrides

* support for 'reverse, reverse-mobile' and remove empty split asset div

* fixed padding on split mobile views, linting

* multi classes on key rows. Cleaned up some format

* decorateBg, order-reverse, con-block dark/light tablet, desktop selectors

* default copy margins, extended decorateText for target

* updated block name to hero-marquee, per GWP reques, renamed row key to 'milo-row-type`

* decorateBgRow fix for selector

* Fixed icon-size inheritance across rows and block variant

* lockup default

* Extending button class in row-text types

* min-height on tablet/desk

* trim badge titles and set approp margin

* Few design feedback items, removed badge

* Default spacing on bg-stack

* Few design feedback refeinments

* added tests

- `con-block-row-` naming
- Static links w/ dark-tablet etc.
- min-height-m (560), min-height-l (700), m-height-l-desktop, etc...
- `5 | 7` vs `6 | 6` - Did this w/ 100 margin-end on .copy in desktop. rather then grid 12. Easier w/ split set up
- spacing w/ bg-stack-mobile etc - didn't force padding on type. Use authoring instead
- bullet icon size margin - OK as is, if bullet and icon are used together the :marker: is default margin

* fix align items action area

* no default padding on bg-stack

* refine naming conventions

* Fixed decorate text logic to not rely on buttonClass to continue

* distill sup content

* bgcolor naming

* bgcolor Type

* con-vars support for bg-stack-*

* - Split image display cover and 0 padding on stacked mobile/tablet.  top or bttm 0 depending on stacking order
- Split w/ video - treat same as image

* milo_blocks list

* split variant default padding bottom

* added block to adobetv list

* updated test row type -row-bgcolor

* typo in class

* moved bg-stack out of styles.css and scoped to hero, shared bg posltion feature from bricks and made a global export, added bg-stack-bottom-mobile to set order of that feature

* logic style for split-asset

* refactor asset selector for autoblock content

* updated naming convention of fg-media

* refactored .split to .fg-media-cover && .foreground-split to .foreground-media

* fg-media-top -> fg-media-stack-top. same as bg-stack

* fixed fg-media-cover sel to fix poly elem

* refactored min-height-l, to l-min-height for naming convention

* addressed a few rtl lang displays

* updated icons to use margin-inline for better rtl support. Added selector for .image-link as asset

* moved breakpoint-thheme into own file and imported based on classFind

* decorateBtns by defatult on row-text type

* few missing selectors in bg-stack, removed order .action-area defatul

* fixed scope of .fg-media .foreground

* added -only to tablet/desktop breakpoint-theme

* fixed scope of fg-stack-top

* distill CLass in -list, fg-media-hidden-mobile w/ foreground-asset

* padding fix for media-hidden

* lockup transform

* padding on bg-stack-bottom

* default min-height, helper classes tablet/desktop

* -min-height defaults

* clean up  a few stylss

* rtl fix for foreground-media

* code coverage

* removed blocks/marquee-hero - fragments of the past

* Few nit PR formatting feeback issues resolve

* Few PR feedback refactors

* minor css optimizing

* fixed some linting issues and optimized selectors

* refined the breakpoint-theme a bit w/ :is scopes

* revert style.css

* added conditional for distillClasses, removed if w/ switch

* removed variant names `fg-` and `stack-`

* bg-top, vs bg-stack

* linting

* removed shorthand `mobile-tablet` vp selectors

* check rtl support fix

---------

Co-authored-by: milo-pr-merge[bot] <169241390+milo-pr-merge[bot]@users.noreply.github.com>

libs/blocks/adobetv/adobetv.js

@@ -4,7 +4,7 @@ import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
 const ROOT_MARGIN = 1000;
 
 const loadAdobeTv = (a) => {
-  const bgBlocks = ['aside', 'marquee'];
+  const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
     const { href, hash } = a;

libs/blocks/brick/brick.js

@@ -1,11 +1,17 @@
-import { decorateTextOverrides, decorateBlockText, decorateBlockBg, decorateIconStack, decorateButtons } from '../../utils/decorate.js';
+import {
+  decorateBlockBg,
+  decorateBlockText,
+  decorateIconStack,
+  decorateTextOverrides,
+  decorateButtons,
+  handleObjectFit,
+} from '../../utils/decorate.js';
 import { createTag, getConfig, loadStyle } from '../../utils/utils.js';
 
 const blockTypeSizes = {
   large: ['xxl', 'm', 'l'],
   default: ['xl', 'm', 'l'],
 };
-const objFitOptions = ['fill', 'contain', 'cover', 'none', 'scale-down'];
 
 function getBlockSize(el) {
   const sizes = Object.keys(blockTypeSizes);
@@ -21,30 +27,6 @@ function handleSupplementalText(foreground) {
   if (lastP) lastP.className = 'supplemental-text';
 }
 
-function setObjectFitAndPos(text, pic, bgEl) {
-  const backgroundConfig = text.split(',').map((c) => c.toLowerCase().trim());
-  const fitOption = objFitOptions.filter((c) => backgroundConfig.includes(c));
-  const focusOption = backgroundConfig.filter((c) => !fitOption.includes(c));
-  if (fitOption) [pic.querySelector('img').style.objectFit] = fitOption;
-  bgEl.innerHTML = '';
-  bgEl.append(pic);
-  bgEl.append(document.createTextNode(focusOption.join(',')));
-}
-
-function handleObjectFit(bgRow) {
-  const bgConfig = bgRow.querySelectorAll('div');
-  [...bgConfig].forEach((r) => {
-    const pic = r.querySelector('picture');
-    if (!pic) return;
-    let text = '';
-    const pchild = [...r.querySelectorAll('p:not(:empty)')].filter((p) => p.innerHTML.trim() !== '');
-    if (pchild.length > 2) text = pchild[1]?.textContent.trim();
-    if (!text && r.textContent) text = r.textContent;
-    if (!text) return;
-    setObjectFitAndPos(text, pic, r);
-  });
-}
-
 function handleClickableBrick(el, foreground) {
   if (!el.classList.contains('click')) return;
   const links = foreground.querySelectorAll('.brick-text a');