[Release] Stage to Main

libs/blocks/action-item/action-item.css

@@ -114,18 +114,11 @@
   transition: transform .2s ease;
 }
 
-.action-item:not(.zoom) a:focus-visible picture:not(.floated-icon) img,
-.action-item.zoom a:focus-visible picture:not(.floated-icon) {
-  outline-color: -webkit-focus-ring-color;
-  outline-style: auto;
-}
-
 .action-item:not(.float-button) a {
   width: 100%;
 }
 
 .action-item a:not(.con-button):focus-visible {
-  outline: none;
   text-decoration: underline;
 }
 

libs/blocks/action-scroller/action-scroller.css

@@ -16,7 +16,7 @@
   grid-auto-columns: minmax(var(--action-scroller-column-width), 1fr);
   grid-auto-flow: column;
   gap: var(--spacing-m);
-  padding: 0 var(--action-scroller-mobile-padding);
+  padding: 3px var(--action-scroller-mobile-padding);
   overflow-x: auto;
   -ms-overflow-style: none;
   scrollbar-width: none;

libs/blocks/locui-create/locui-create.css

@@ -0,0 +1,16 @@
+.locui-create.missing-details {
+  margin: 0 auto;
+  margin-top: 10vh;
+  max-width: 60%;
+  border-radius: 10px;
+  border: 10px solid var(--color-gray-200);
+  padding: 10px 30px 30px;
+}
+
+.locui-create .goto-step ul {
+  list-style-type: disc;
+}
+
+.locui-create .goto-step p {
+  margin: 0;
+}

libs/blocks/locui-create/locui-create.js

@@ -0,0 +1,22 @@
+import { createTag } from '../../utils/utils.js';
+
+function makeGotoSteps(link, linkText) {
+  const goToAnchor = createTag('a', { href: link, target: '_blank', rel: 'noopener noreferrer' }, linkText);
+  return goToAnchor;
+}
+
+export default function init(el) {
+  el.classList.add('missing-details');
+  const heading = createTag('h2', null, 'Missing project details');
+  const paragraph = createTag('p', null, 'The project details were removed after you logged in. To resolve this:');
+  const steps = createTag('ol', null);
+  const gotoSteps = createTag('ul', null);
+  const gotoURls = [{ link: 'https://milostudio.adobe.com', linkText: 'Production' }, { link: 'https://milostudio.stage.adobe.com', linkText: 'Stage' }, { link: 'https://milostudio.dev.adobe.com', linkText: 'Development' }];
+  const goToContainer = createTag('div', { class: 'goto-step' });
+  gotoURls.forEach((gotoUrl) => gotoSteps.append(createTag('li', null, makeGotoSteps(gotoUrl.link, gotoUrl.linkText))));
+  goToContainer.append(createTag('p', null, 'Please navigate to the respective MiloStudio environment:'));
+  goToContainer.append(gotoSteps);
+  const stepsList = ['Close this window or tab.', goToContainer, 'Select the tenant.', 'Click on Localization.', 'Click on "Add New Project".'];
+  stepsList.forEach((step) => steps.append(createTag('li', null, step)));
+  el.append(heading, paragraph, steps);
+}

libs/blocks/merch-card/merch-card.js

@@ -391,23 +391,98 @@ const getMiniCompareChartFooterRows = (el) => {
   return footerRows;
 };
 
-const decorateFooterRows = (merchCard, footerRows) => {
-  if (footerRows) {
-    const footerRowsSlot = createTag('div', { slot: 'footer-rows' });
-    footerRows.forEach((row) => {
-      const rowIcon = row.firstElementChild.querySelector('picture');
-      const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
-      const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
-      const footerRowCell = createTag('ul', { class: 'footer-row-cell' });
-      if (rowIcon) {
-        rowIcon.classList.add('footer-row-icon');
-        footerRowCell.appendChild(rowIcon);
+const createFirstRow = async (firstRow, isMobile, checkmarkCopyContainer, defaultChevronState) => {
+  const firstRowText = firstRow.querySelector('div > div:last-child').innerHTML;
+  let firstRowTextParagraph;
+
+  if (isMobile) {
+    const { chevronDownSVG, chevronUpSVG } = await import('./img/chevron.js');
+    const chevronIcon = createTag('span', { class: 'chevron-icon' }, chevronDownSVG);
+    firstRowTextParagraph = createTag('div', { class: 'footer-rows-title' }, firstRowText);
+    firstRowTextParagraph.appendChild(chevronIcon);
+
+    if (defaultChevronState === 'open') {
+      checkmarkCopyContainer.classList.add('open');
+    }
+
+    firstRowTextParagraph.addEventListener('click', () => {
+      const isOpen = checkmarkCopyContainer.classList.toggle('open');
+      chevronIcon.innerHTML = isOpen ? chevronUpSVG : chevronDownSVG;
+    });
+  } else {
+    firstRowTextParagraph = createTag('div', { class: 'footer-rows-title' }, firstRowText);
+    checkmarkCopyContainer.classList.add('open');
+  }
+
+  return firstRowTextParagraph;
+};
+
+const createFooterRowCell = (row, isCheckmark) => {
+  const rowIcon = row.firstElementChild.querySelector('picture');
+  const rowText = row.querySelector('div > div:nth-child(2)').innerHTML;
+  const rowTextParagraph = createTag('div', { class: 'footer-row-cell-description' }, rowText);
+  const footerRowCellClass = isCheckmark ? 'footer-row-cell-checkmark' : 'footer-row-cell';
+  const footerRowIconClass = isCheckmark ? 'footer-row-icon-checkmark' : 'footer-row-icon';
+  const footerRowCell = createTag('li', { class: footerRowCellClass });
+
+  if (rowIcon) {
+    rowIcon.classList.add(footerRowIconClass);
+    footerRowCell.appendChild(rowIcon);
+  }
+  footerRowCell.appendChild(rowTextParagraph);
+
+  return footerRowCell;
+};
+
+const decorateFooterRows = async (merchCard, footerRows) => {
+  if (!footerRows) return;
+
+  const footerRowsSlot = createTag('div', { slot: 'footer-rows' });
+  const isCheckmark = merchCard.classList.contains('bullet-list');
+  const isMobile = window.matchMedia('(max-width: 767px)').matches;
+
+  const ulContainer = createTag('ul');
+  if (isCheckmark) {
+    const firstRow = footerRows[0];
+    const firstRowContent = firstRow.querySelector('div > div:first-child').innerHTML.split(',');
+    let bgStyle = '#E8E8E8';
+    let defaultChevronState = 'close';
+
+    firstRowContent.forEach((item) => {
+      const trimmedItem = item.trim();
+      if (trimmedItem.startsWith('#')) {
+        bgStyle = trimmedItem;
+      } else if (trimmedItem === 'open' || trimmedItem === 'close') {
+        defaultChevronState = trimmedItem;
       }
-      footerRowCell.appendChild(rowTextParagraph);
-      footerRowsSlot.appendChild(footerRowCell);
     });
-    merchCard.appendChild(footerRowsSlot);
+
+    const hrElem = createTag('hr', { style: `background: ${bgStyle};` });
+    footerRowsSlot.appendChild(hrElem);
+    merchCard.classList.add('has-divider');
+
+    ulContainer.classList.add('checkmark-copy-container');
+    const firstRowTextParagraph = await createFirstRow(
+      firstRow,
+      isMobile,
+      ulContainer,
+      defaultChevronState,
+    );
+
+    footerRowsSlot.appendChild(firstRowTextParagraph);
+
+    footerRows.splice(0, 1);
+    footerRowsSlot.style.padding = '0px var(--consonant-merch-spacing-xs)';
+    footerRowsSlot.style.marginBlockEnd = 'var(--consonant-merch-spacing-xs)';
   }
+  footerRowsSlot.appendChild(ulContainer);
+
+  footerRows.forEach((row) => {
+    const footerRowCell = createFooterRowCell(row, isCheckmark);
+    ulContainer.appendChild(footerRowCell);
+  });
+
+  merchCard.appendChild(footerRowsSlot);
 };
 
 const setMiniCompareOfferSlot = (merchCard, offers) => {
@@ -624,7 +699,7 @@ export default async function init(el) {
     decorateBlockHrs(merchCard);
     simplifyHrs(merchCard);
     if (merchCard.classList.contains('has-divider')) merchCard.setAttribute('custom-hr', true);
-    decorateFooterRows(merchCard, footerRows);
+    await decorateFooterRows(merchCard, footerRows);
   } else {
     parseTwpContent(el, merchCard);
   }

libs/blocks/preflight/panels/general.js

@@ -7,6 +7,7 @@ const NOT_FOUND = {
   preview: { lastModified: DEF_NOT_FOUND },
   live: { lastModified: DEF_NOT_FOUND },
 };
+const DA_DOMAIN = 'da.live';
 
 const content = signal({});
 
@@ -25,7 +26,10 @@ async function getStatus(url) {
   const preview = json.preview.lastModified || DEF_NEVER;
   const live = json.live.lastModified || DEF_NEVER;
   const publish = await userCanPublishPage(json, false);
-  const edit = json.edit.url;
+  const { sourceLocation } = json.preview;
+  const edit = json.edit?.url
+    || (sourceLocation?.includes(DA_DOMAIN) && sourceLocation?.replace('markup:https://content.da.live', 'https://da.live/edit#'))
+    || '';
   return { url, edit, preview, live, publish };
 }
 
@@ -165,13 +169,14 @@ function Item({ name, item, idx }) {
   const { publishText, disablePublish } = usePublishProps(item);
   const isChecked = item.checked ? ' is-checked' : '';
   const isFetching = item.edit ? '' : ' is-fetching';
+  const editIcon = item.edit && item.edit.includes(DA_DOMAIN) ? 'da-icon' : 'sharepoint-icon';
   if (!item.url) return undefined;
 
   return html`
     <div class="preflight-group-row preflight-group-detail${isChecked}${checkPublishing(item, isFetching)}"
       onClick=${(e) => handleChange(e.target, name, idx)}>
       <p><a href=${item.url.pathname} target=_blank>${prettyPath(item.url)}</a></p>
-      <p>${item.edit && html`<a href=${item.edit} class=preflight-edit target=_blank>EDIT</a>`}</p>
+      <p>${item.edit && html`<a href=${item.edit} class="preflight-edit ${editIcon}" target=_blank>EDIT</a>`}</p>
       <p class=preflight-date-wrapper>${item.action === 'preview' ? 'Previewing' : prettyDate(item.preview)}</p>
       <p class="preflight-date-wrapper">
         ${isChecked && disablePublish ? html`<span class=disabled-publish>${disablePublish}</span>` : publishText}

libs/blocks/preflight/preflight.css

@@ -170,14 +170,22 @@ p.preflight-content-heading-edit {
 }
 
 a.preflight-edit {
-  background: url('./img/word-icon.svg');
-  background-repeat: no-repeat;
   display: block;
   text-indent: -1000px;
   overflow: hidden;
   height: 32px;
 }
 
+a.preflight-edit.sharepoint-icon {
+  background: url('./img/word-icon.svg');
+  background-repeat: no-repeat;
+}
+
+a.preflight-edit.da-icon {
+  background: url('./img/document-authoring.svg');
+  background-repeat: no-repeat;
+}
+
 .preflight-group-row.preflight-group-detail.not-found::before {
   background-image: url('./img/red-error.svg');
   background-repeat: no-repeat;

libs/deps/mas/merch-card-collection.js

@@ -1,4 +1,4 @@
-var N=Object.defineProperty;var y=(s,e,t)=>e in s?N(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var E=(s,e,t)=>(y(s,typeof e!="symbol"?e+"":e,t),t);import{html as l,LitElement as O}from"../lit-all.min.js";var f=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var x="hashchange";function L(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,i=""]=o.split("=");n&&e.push([n,decodeURIComponent(i.replace(/\+/g," "))])}return Object.fromEntries(e)}function d(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,i])=>{i?e.set(n,i):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function T(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=L(window.location.hash);s(t)};return e(),window.addEventListener(x,e),()=>{window.removeEventListener(x,e)}}var g="merch-card-collection:sort",S="merch-card-collection:showmore";var A="(max-width: 1199px)",R="(min-width: 768px)",C="(min-width: 1200px)";import{css as M,unsafeCSS as w}from"../lit-all.min.js";var b=M`
+var N=Object.defineProperty;var y=(s,e,t)=>e in s?N(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var E=(s,e,t)=>y(s,typeof e!="symbol"?e+"":e,t);import{html as l,LitElement as O}from"../lit-all.min.js";var f=class{constructor(e,t){this.key=Symbol("match-media-key"),this.matches=!1,this.host=e,this.host.addController(this),this.media=window.matchMedia(t),this.matches=this.media.matches,this.onChange=this.onChange.bind(this),e.addController(this)}hostConnected(){var e;(e=this.media)==null||e.addEventListener("change",this.onChange)}hostDisconnected(){var e;(e=this.media)==null||e.removeEventListener("change",this.onChange)}onChange(e){this.matches!==e.matches&&(this.matches=e.matches,this.host.requestUpdate(this.key,!this.matches))}};var x="hashchange";function L(s=window.location.hash){let e=[],t=s.replace(/^#/,"").split("&");for(let o of t){let[n,i=""]=o.split("=");n&&e.push([n,decodeURIComponent(i.replace(/\+/g," "))])}return Object.fromEntries(e)}function d(s){let e=new URLSearchParams(window.location.hash.slice(1));Object.entries(s).forEach(([n,i])=>{i?e.set(n,i):e.delete(n)}),e.sort();let t=e.toString();if(t===window.location.hash)return;let o=window.scrollY||document.documentElement.scrollTop;window.location.hash=t,window.scrollTo(0,o)}function T(s){let e=()=>{if(window.location.hash&&!window.location.hash.includes("="))return;let t=L(window.location.hash);s(t)};return e(),window.addEventListener(x,e),()=>{window.removeEventListener(x,e)}}var g="merch-card-collection:sort",S="merch-card-collection:showmore";var A="(max-width: 1199px)",R="(min-width: 768px)",C="(min-width: 1200px)";import{css as M,unsafeCSS as w}from"../lit-all.min.js";var b=M`
     #header,
     #resultText,
     #footer {