[Release] Stage to Main

libs/blocks/editorial-card/editorial-card.css

@@ -0,0 +1,250 @@
+.editorial-card {
+  --card-height-default: 213px;
+  --card-scale-default: 1.03;
+
+  border: 1px solid var(--color-gray-300);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transform: translateZ(0);
+}
+
+.editorial-card,
+.editorial-card::after,
+.editorial-card::before {
+    box-sizing: border-box;
+}
+
+.section.masonry-layout > .editorial-card[class*='grid-span-'] {
+  display: flex;
+}
+
+.dark .editorial-card,
+.editorial-card.dark {
+  color: #fff;
+  border-color: var(--color-gray-700);
+}
+
+.editorial-card.no-bg { background: none;}
+.editorial-card.no-border { border: none;}
+
+.editorial-card.click {
+  cursor: pointer;
+}
+
+.editorial-card.click.hover-scale { 
+  transition: all .2s ease-in-out;
+}
+
+.editorial-card.click.hover-scale:hover { 
+  transform: scale(var(--card-scale-default));
+}
+
+.editorial-card:not(.no-bg).click.hover-scale:hover { 
+  box-shadow: 0 3px 6px 0  rgba(0 0 0 / 16%);
+}
+
+.editorial-card.static-links-copy .foreground a:not([class*="button"]) {
+  color: inherit;
+  text-decoration: underline;
+}
+
+[class*=-up] .editorial-card {
+  max-width: none;
+  width: 100%;
+  min-width: initial;
+}
+
+.editorial-card.has-footer {
+  height: 100%;
+}
+
+.editorial-card .media-area picture,
+.editorial-card .foreground picture {
+  line-height: 0;
+  display: block;
+}
+
+.editorial-card .media-area img,
+.editorial-card .media-area video {
+  object-fit: cover;
+  object-position: center;
+  width: 100%;
+  height: 100%;
+  max-height: var(--card-height-default);
+}
+
+.editorial-card .media-area .modal-img-link {
+  display: block;
+}
+
+.editorial-card .foreground,
+.editorial-card .footer {
+  padding: var(--spacing-xs);
+}
+
+.editorial-card .extra-row {
+  padding: 0 var(--spacing-xs);
+}
+
+.editorial-card .footer {
+  padding-top: 0;
+  margin-top: auto;
+}
+
+.editorial-card .footer > div {
+  display: flex;
+  flex-direction: column;
+  text-align: end;
+  justify-content: end;
+  row-gap: var(--spacing-xxs);
+}
+
+.editorial-card.no-bg.no-border .foreground {
+  padding: var(--spacing-s) 0;
+}
+
+.editorial-card.no-bg.no-media > .foreground {
+  padding-top: 0;
+}
+
+.editorial-card.no-bg.no-border .static,
+.editorial-card.no-bg.no-border .footer {
+  padding-inline: 0;
+}
+
+.editorial-card .foreground > div {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--spacing-xxs);
+}
+
+.editorial-card .background > div {
+  height: 100%;
+}
+
+.editorial-card .media-area > div {
+  line-height: 0;
+}
+
+.editorial-card.footer-align-left .footer > div { text-align: start; }
+.editorial-card.footer-align-center .footer > div { text-align: center; }
+
+.editorial-card.no-bg.no-border .foreground > div { 
+  row-gap: var(--spacing-xs);
+}
+
+.editorial-card .background img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.editorial-card .lockup-area,
+.editorial-card .device {
+  margin: 0;
+}
+
+.editorial-card .lockup-area {
+  row-gap: var(--spacing-xxs);
+}
+
+.editorial-card .lockup-label {
+  line-height: initial;
+}
+
+.editorial-card .action-area, 
+.editorial-card .footer > .action-area {
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  gap: var(--spacing-xxs);
+  flex-flow: wrap;
+  flex-direction: row;
+}
+
+.editorial-card .action-area .con-button { 
+  white-space: nowrap;
+}
+
+.editorial-card.center .action-area {
+  justify-content: center;
+}
+
+.editorial-card.right .action-area {
+  justify-content: right;
+}
+
+.editorial-card hr {
+  background-color: currentcolor;
+  border: none;
+  height: 1px;
+  width: 100%;
+  margin: var(--spacing-xs) 0;
+}
+
+.editorial-card .background {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+}
+
+.editorial-card .media-area {
+  overflow: hidden;
+  width: 100%;
+}
+
+.editorial-card .media-area.background {
+  position: relative;
+  z-index: initial;
+}
+
+.editorial-card .media-area.background video {
+  position: relative;
+}
+
+/* Aspect Ratio */
+.editorial-card.media-square .media-area img,
+.editorial-card.media-square .media-area video {
+  aspect-ratio: var(--aspect-ratio-square);
+  max-height: unset;
+}
+
+.editorial-card.media-wide .media-area img,
+.editorial-card.media-wide .media-area video {
+  aspect-ratio: var(--aspect-ratio-wide);
+  max-height: unset;
+}
+
+.editorial-card.media-standard .media-area img,
+.editorial-card.media-standard .media-area video {
+  aspect-ratio: var(--aspect-ratio-standard);
+  max-height: unset;
+}
+
+.editorial-card.media-tall .media-area img,
+.editorial-card.media-tall .media-area video {
+  aspect-ratio: var(--aspect-ratio-tall);
+  max-height: unset;
+}
+
+/* Media Height */
+.editorial-card.media-height-auto .media-area img,
+.editorial-card.media-height-auto .media-area video {
+  max-height: unset;
+}
+
+/* Align */
+.editorial-card.center { 
+  text-align: center; 
+  justify-items: center; 
+}
+
+.editorial-card.right { 
+  text-align: end; 
+  justify-items: end; 
+}
+
+.editorial-card.footer-align-left .action-area { justify-content: start; }
+.editorial-card.footer-align-center .action-area { justify-content: center; }

libs/blocks/editorial-card/editorial-card.js

@@ -0,0 +1,121 @@
+import { createTag, loadStyle, getConfig } from '../../utils/utils.js';
+import { decorateBlockBg, decorateBlockText, decorateBlockHrs, decorateTextOverrides, applyHoverPlay } from '../../utils/decorate.js';
+
+const { miloLibs, codeRoot } = getConfig();
+const base = miloLibs || codeRoot;
+
+async function loadIconography() {
+  await new Promise((resolve) => { loadStyle(`${base}/styles/iconography.css`, resolve); });
+}
+
+async function decorateLockupFromContent(el) {
+  const rows = el.querySelectorAll(':scope > div > p');
+  const firstRowImg = rows[0]?.querySelector('img');
+  if (!firstRowImg) return;
+  await loadIconography();
+  rows[0].classList.add('lockup-area');
+  rows[0].childNodes.forEach((node) => {
+    if (node.nodeType === 3 && node.nodeValue !== ' ') {
+      const newSpan = createTag('span', { class: 'lockup-label' }, node.nodeValue);
+      node.parentElement.replaceChild(newSpan, node);
+    }
+  });
+}
+
+const extendDeviceContent = (el) => {
+  const detail = el.querySelector('[class^="detail-"]');
+  const prevElem = detail?.previousElementSibling;
+  if (!prevElem || ![...prevElem.classList].some((c) => c.startsWith('body-'))) return;
+  prevElem.classList.remove('body-m');
+  prevElem.classList.add('body-xxs', 'device');
+};
+
+const decorateMedia = (el, media) => {
+  if (!media) return;
+  media.classList.add('media-area');
+  const mediaVideo = media.querySelector('video');
+  if (mediaVideo) {
+    applyHoverPlay(mediaVideo);
+  }
+  if (media.children.length > 1) decorateBlockBg(el, media);
+};
+
+const decorateForeground = async (el, rows) => {
+  rows.forEach(async (row, i) => {
+    if (i === 0) {
+      row.classList.add('foreground');
+      await decorateLockupFromContent(row);
+    } else if (i === (rows.length - 1)) {
+      row.classList.add('footer');
+    } else {
+      row.classList.add('extra-row');
+    }
+    decorateBlockText(row, ['m', 'm', 'm']); // heading, body, detail
+    decorateBlockHrs(row);
+  });
+};
+
+const decorateBgRow = (el, background) => {
+  if (background.textContent.trim() === '') {
+    el.classList.add('no-bg');
+    background.remove();
+    return;
+  }
+  decorateBlockBg(el, background);
+};
+
+function handleClickableCard(el) {
+  const links = el.querySelectorAll('a');
+  if (el.classList.contains('click') && links) {
+    el.addEventListener('click', (e) => {
+      /* c8 ignore next 2 */
+      if (e.target.tagName === 'A') return;
+      (() => (links[0].target === '_blank' ? window.open(links[0].href) : window.location.assign(links[0].href)))();
+    });
+  }
+}
+
+const init = async (el) => {
+  el.classList.add('con-block');
+  if (el.className.includes('open')) {
+    el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
+  }
+  if (el.className.includes('rounded-corners')) {
+    loadStyle(`${base}/styles/rounded-corners.css`);
+  }
+  if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
+  let rows = el.querySelectorAll(':scope > div');
+  const [head, middle, ...tail] = rows;
+  if (rows.length === 4) el.classList.add('has-footer');
+  if (rows.length >= 1) {
+    const count = rows.length >= 3 ? 'three-plus' : rows.length;
+    switch (count) {
+      case 'three-plus':
+        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:footer)
+        decorateBgRow(el, head);
+        rows = tail;
+        await decorateForeground(el, rows);
+        decorateMedia(el, middle);
+        break;
+      case 2:
+        // 2 rows (0:media, 1:copy)
+        rows = middle;
+        await decorateForeground(el, [rows]);
+        decorateMedia(el, head);
+        el.classList.add('no-bg');
+        break;
+      case 1:
+        // 1 row  (0:copy)
+        rows = head;
+        await decorateForeground(el, [rows]);
+        el.classList.add('no-bg', 'no-media');
+        break;
+      default:
+    }
+  }
+  extendDeviceContent(el);
+  decorateTextOverrides(el);
+  handleClickableCard(el);
+};
+
+export default init;

libs/blocks/graybox/graybox.css

@@ -90,7 +90,7 @@
   position: fixed;
   right: 0;
   top: 15%;
-  z-index: calc(var(--above-all) + 1);
+  z-index: calc(var(--above-all) + 2);
 }
 
 .graybox-container .gb-toggle {
@@ -190,7 +190,7 @@
 }
 
 .dialog-modal.graybox-modal {
-  z-index: var(--above-all);
+  z-index: calc(var(--above-all) + 1);
 }
 
 .dialog-modal.graybox-modal.mobile > div {
@@ -260,7 +260,7 @@
 
 .modal-curtain.graybox-curtain.is-open {
   background: var(--gb-modal-bg);
-  z-index: calc(var(--above-all) - 1);
+  z-index: var(--above-all);
 }
 
 @media (max-height: 910px), (max-width: 420px) {