[Release] Stage to Main (#2734)

adobecom · Aug 14, 2024 · baef0d5 · baef0d5
2 parents 0b80fa1 + 302e9be
commit baef0d5
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 10 deletions.
diff --git a/libs/blocks/footer/footer.js b/libs/blocks/footer/footer.js
@@ -150,6 +150,12 @@ export class Footer {
         const ariaExpanded = regionButton.classList.contains('inline-dialog-active');
         regionButton.setAttribute('aria-expanded', ariaExpanded);
       });
+      document.addEventListener('click', (e) => {
+        if (regionButton.classList.contains('inline-dialog-active') && !e.target.closest('.footer-region')) {
+          regionButton.setAttribute('aria-expanded', false);
+          regionButton.classList.remove('inline-dialog-active');
+        }
+      });
     }
     regionButton.className = 'footer-region-button';
     regionButton.setAttribute('aria-haspopup', true);

diff --git a/libs/blocks/quiz/quizcontainer.js b/libs/blocks/quiz/quizcontainer.js
@@ -1,6 +1,7 @@
 import { html } from '../../deps/htm-preact.js';
+import { removeLeftToRightMark } from './utils.js';
 
-export const DecorateBlockBackgroundCmp = ({ background = '' }) => html`<img loading="eager" alt="" src=${background} height="1020" width="1920" />`;
+export const DecorateBlockBackgroundCmp = ({ background = '' }) => html`<img loading="eager" alt="" src=${removeLeftToRightMark(background)} height="1020" width="1920" />`;
 
 export const DecorateBlockForeground = ({ heading, subhead }) => html`<div class="quiz-foreground">
     <h1 id="question" class="quiz-question-title" daa-lh="${heading}">${heading}</h1>

diff --git a/libs/blocks/quiz/quizoption.js b/libs/blocks/quiz/quizoption.js
@@ -1,4 +1,5 @@
 import { html } from '../../deps/htm-preact.js';
+import { removeLeftToRightMark } from './utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options, disabled, selected, background,
@@ -22,15 +23,15 @@ export const OptionCard = ({
 
   const getIconHtml = () => html`<div class="quiz-option-icon ${getIconClass()}">
     <picture>
-      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${iconDesktop}" />`}
-      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${iconTablet}" />`}
-      <img src="${icon}" alt="" loading="lazy" />
+      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${removeLeftToRightMark(iconDesktop)}" />`}
+      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${removeLeftToRightMark(iconTablet)}" />`}
+      <img src="${removeLeftToRightMark(icon)}" alt="" loading="lazy" />
     </picture>
   </div>`;
 
   const imageHtml = html`
     <div class="quiz-option-image" 
-      style="background-image: url('${image}'); background-size: cover" loading="lazy">
+      style="background-image: url('${removeLeftToRightMark(image)}'); background-size: cover" loading="lazy">
     </div>`;
 
   const titleHtml = html`

diff --git a/libs/blocks/quiz/utils.js b/libs/blocks/quiz/utils.js
@@ -520,8 +520,11 @@ export const isValidUrl = (url) => VALID_URL_RE.test(url);
 
 export const getNormalizedMetadata = (el) => normalizeKeys(getMetadata(el));
 
+export const removeLeftToRightMark = (url) => decodeURIComponent(url).replace(/\u200E/g, '');
+
 export const getLocalizedURL = (originalURL) => {
   const { locale } = getConfig();
   const { prefix, ietf = 'en-US' } = locale || {};
-  return ietf !== 'en-US' && !originalURL.startsWith(`${prefix}/`) ? `${prefix}${originalURL}` : originalURL;
+  const decodedURL = removeLeftToRightMark(originalURL);
+  return ietf !== 'en-US' && !decodedURL.startsWith(`${prefix}/`) ? `${prefix}${decodedURL}` : decodedURL;
 };
diff --git a/libs/deps/mas/commerce.js b/libs/deps/mas/commerce.js
diff --git a/libs/deps/mas/mas.js b/libs/deps/mas/mas.js
diff --git a/libs/features/mas/commerce/src/wcs.js b/libs/features/mas/commerce/src/wcs.js
@@ -22,8 +22,8 @@ import { Log } from './log.js';
  */
 const ACOM = '_acom';
 const WcsBaseUrl = {
-    [Env.PRODUCTION]: 'https://wcs.adobe.com',
-    [Env.STAGE]: 'https://wcs.stage.adobe.com',
+    [Env.PRODUCTION]: 'https://www.adobe.com',
+    [Env.STAGE]: 'https://www.stage.adobe.com',
     [Env.PRODUCTION + ACOM]: 'https://www.adobe.com',
     [Env.STAGE + ACOM]: 'https://www.stage.adobe.com',
 };

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -635,6 +635,10 @@ export function decorateLinks(el) {
       a.setAttribute('target', '_blank');
       a.href = a.href.replace('#_blank', '');
     }
+    if (a.href.includes('#_nofollow')) {
+      a.setAttribute('rel', 'nofollow');
+      a.href = a.href.replace('#_nofollow', '');
+    }
     if (a.href.includes('#_dnb')) {
       a.href = a.href.replace('#_dnb', '');
     } else {

diff --git a/test/blocks/footer/footer.test.js b/test/blocks/footer/footer.test.js
@@ -1,5 +1,6 @@
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
+import { setConfig } from '../../../libs/utils/utils.js';
 
 const { Footer } = await import('../../../libs/blocks/footer/footer.js');
 
@@ -57,4 +58,38 @@ describe('Footer', () => {
       expect(privacy.querySelector('p:nth-of-type(2)')).not.to.be.null;
     });
   });
+
+  describe('region selector', async () => {
+    let infoRow = null;
+
+    before(async () => {
+      const config = {
+        codeRoot: '/libs',
+        autoBlocks: [{ }],
+      };
+      setConfig(config);
+      const regionSelector = await readFile({ path: './mocks/region-selector.html' });
+      const parser = new DOMParser();
+      const regionSelectorDom = parser.parseFromString(regionSelector, 'text/html');
+      document.body.innerHTML = '<footer></footer>';
+      const footer = new Footer(regionSelectorDom.body, document.querySelector('footer'));
+      infoRow = await footer.createInfoRow();
+    });
+
+    it('expect region selector modal to be visible', () => {
+      expect(infoRow).not.to.be.null;
+      const button = infoRow.querySelector('.footer-region button');
+      button.click();
+      expect(button.getAttribute('aria-expanded')).to.equal('true');
+      expect(button.classList.contains('inline-dialog-active')).to.be.true;
+    });
+
+    it('expect region selector modal to be closed on clicking outside', () => {
+      expect(infoRow).not.to.be.null;
+      const button = infoRow.querySelector('.footer-region button');
+      document.body.click();
+      expect(button.getAttribute('aria-expanded')).to.equal('false');
+      expect(button.classList.contains('inline-dialog-active')).to.be.false;
+    });
+  });
 });
diff --git a/test/blocks/footer/mocks/region-selector.html b/test/blocks/footer/mocks/region-selector.html
@@ -0,0 +1,78 @@
+<div>
+  <h2 id="contact-us">Contact Us</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/request-consultation/experience-cloud.html">Request a demo</a></li>
+    <li><a href="https://www.adobe.com/index.html">Adobe.com</a></li>
+  </ul>
+  <h2 id="why-adobe">Why Adobe</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/why-adobe/why-partner-with-us.html">Why partner with Adobe</a></li>
+    <li><a href="https://business.adobe.com/why-adobe/how-we-use-our-products.html">How we use our products</a></li>
+    <li><a href="https://business.adobe.com/customers/partners/main.html">Our partners</a></li>
+    <li><a href="https://business.adobe.com/resources/leader-in-experiences.html">Industry leadership</a></li>
+    <li><a href="https://www.adobe.com/creativecloud/business/enterprise.html">Creative Cloud for Enterprise</a></li>
+    <li><a href="https://www.adobe.com/documentcloud/business.html">Document Cloud for Business</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="about-experience-cloud">About Experience Cloud</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/products/adobe-experience-cloud-products.html">Explore all products</a></li>
+    <li><a href="https://business.adobe.com/products/experience-platform/adobe-experience-platform.html">Adobe Experience Platform</a></li>
+    <li><a href="https://business.adobe.com/products/analytics/adobe-analytics.html">Adobe Analytics</a></li>
+    <li><a href="https://business.adobe.com/products/experience-manager/sites/aem-sites.html">Adobe Experience Manager Sites (CMS)</a></li>
+    <li><a href="https://business.adobe.com/products/experience-manager/assets/aem-assets.html">Adobe Experience Manager Assets (DAM)</a></li>
+    <li><a href="https://business.adobe.com/products/marketo/adobe-marketo.html">Marketo Engage</a></li>
+    <li><a href="https://business.adobe.com/products/magento/magento-commerce.html">Adobe Commerce</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="our-solutions">Our solutions</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/solutions/data-insights-audiences.html">Data insights &#x26; audiences</a></li>
+    <li><a href="https://business.adobe.com/solutions/experience-management-platform.html">Experience management platform</a></li>
+    <li><a href="https://business.adobe.com/solutions/content-management.html">Content management</a></li>
+    <li><a href="https://business.adobe.com/solutions/commerce.html">Commerce</a></li>
+    <li><a href="https://business.adobe.com/solutions/customer-journeys.html">Customer journeys</a></li>
+    <li><a href="https://business.adobe.com/solutions/b2b-marketing.html">B2B marketing</a></li>
+    <li><a href="https://business.adobe.com/solutions/digital-enrollment-onboarding.html">Digital enrollment &#x26; onboarding</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="resources">Resources</h2>
+  <ul>
+    <li><a href="https://business.adobe.com/resources/main.html">Resource center</a></li>
+    <li><a href="https://business.adobe.com/customer-success-stories/index.html">Customer success stories</a></li>
+    <li><a href="https://experienceleague.adobe.com/#home">Experience League (learn &#x26; support)</a></li>
+    <li><a href="https://experienceleaguecommunities.adobe.com/">Community forums</a></li>
+    <li><a href="https://business.adobe.com/glossary/index.html">Glossary</a></li>
+    <li><a href="https://www.adobe.io/apis/experiencecloud.html">Development resources</a></li>
+  </ul>
+</div>
+<div>
+  <h2 id="company">Company</h2>
+  <ul>
+    <li><a href="https://www.adobe.com/about-adobe.html">About Adobe</a></li>
+    <li><a href="https://www.adobe.com/careers.html">Careers</a></li>
+    <li><a href="https://news.adobe.com/">Newsroom</a></li>
+    <li><a href="https://www.adobe.com/corporate-responsibility.html">Corporate responsibility</a></li>
+    <li><a href="https://www.adobe.com/investor-relations.html">Investor relations</a></li>
+    <li><a href="https://www.adobe.com/corporate-responsibility/supply-chain.html">Supply chain</a></li>
+    <li><a href="https://www.adobe.com/trust.html">Trust center</a></li>
+    <li><a href="https://www.adobe.com/events.html">Events</a></li>
+    <li><a href="https://www.adobe.com/diversity.html">Diversity &#x26; inclusion</a></li>
+    <li><a href="https://www.adobe.com/about-adobe/integrity.html">Integrity</a></li>
+    <li><a href="https://www.adobe.com/covid-19-response.html">COVID-19</a></li>
+  </ul>
+</div>
+<div>
+  <div class="region-selector popup">
+    <div>
+      <div><a href="/fragments/regions">Change region</a></div>
+    </div>
+  </div>
+</div>
+<div>
+  <p><em>All rights reserved.</em> / <a href="https://www.adobe.com/privacy.html">Privacy</a> / <a href="https://www.adobe.com/legal/terms.html">Terms of Use</a> / <a href="https://www.adobe.com/#openPrivacy">Cookie preferences</a> / <a href="https://www.adobe.com/privacy/ca-rights.html">Do not sell my personal information</a> / <a href="https://www.adobe.com/privacy/opt-out.html#interest-based-ads">AdChoices</a></p>
+  <p>More copyright text</p>
+</div>
diff --git a/test/blocks/modals/mocks/body.html b/test/blocks/modals/mocks/body.html
@@ -21,3 +21,7 @@
 <a id="faas-modal-link" href="https://milo.adobe.com/test/blocks/modals/mocks/faas"
    data-modal-path="/test/blocks/modals/mocks/faas"
    data-modal-hash="#faas">FaaS</a>
+
+<a id="geo-modal-link" href="https://milo.adobe.com/test/blocks/modals/mocks/federal/geo"
+   data-modal-path="/test/blocks/modals/mocks/federal/geo"
+   data-modal-hash="#geo">FaaS</a>
diff --git a/test/blocks/modals/mocks/federal/geo.plain.html b/test/blocks/modals/mocks/federal/geo.plain.html
@@ -0,0 +1,5 @@
+<div>
+  <h1>Federated modal</h1>
+  <button id="milo-button-1">Geo Button 1</button>
+  <button id="milo-button-2">Geo Button 2</button>
+</div>
diff --git a/test/blocks/modals/modals.test.js b/test/blocks/modals/modals.test.js
@@ -3,8 +3,10 @@ import { readFile, sendKeys } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { delay, waitForElement, waitForRemoval } from '../../helpers/waitfor.js';
+import { mockFetch } from '../../helpers/generalHelpers.js';
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+
 const {
   default: init,
   getModal,
@@ -14,6 +16,8 @@ const {
 } = await import('../../../libs/blocks/modal/modal.js');
 const satellite = { track: sinon.spy() };
 
+const ogFetch = window.fetch;
+
 describe('Modals', () => {
   beforeEach(() => {
     window._satellite = satellite;
@@ -22,6 +26,7 @@ describe('Modals', () => {
 
   afterEach(() => {
     sinon.restore();
+    window.fetch = ogFetch;
   });
 
   it('Doesnt load modals on page load with no hash', async () => {
@@ -265,4 +270,14 @@ describe('sendAnalytics', () => {
     sendAnalytics({});
     expect(window._satellite.track.called).to.be.true;
   });
+
+  it('Loads a federated modal on load with hash and closes when removed from hash', async () => {
+    window.fetch = mockFetch({ payload: { data: '' } });
+    window.location.hash = '#geo';
+    await waitForElement('#geo');
+    expect(document.getElementById('geo')).to.exist;
+    window.location.hash = '';
+    await waitForRemoval('#geo');
+    expect(document.getElementById('geo')).to.be.null;
+  });
 });
diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -24,6 +24,8 @@
     <p><a href="http://localhost:2000">http://localhost:2000/img/favicon.svg</a></p>
     <!-- #_blank -->
     <p><a class="new-tab" href="https://www.adobe.com/test#_blank">New Tab</a></p>
+    <!-- Nofollow individual link-->
+    <p><a class="no-follow" href="https://www.adobe.com/test#_nofollow">No Follow</a></p>
     <!-- Nofollow -->
     <p><a href="https://analytics.google.com">Google analytics</a></p>
     <!-- Disable Auto Block-->

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -244,6 +244,14 @@ describe('Utils', () => {
       expect(newTabLink.href).to.equal('https://www.adobe.com/test');
     });
 
+    it('Add rel=nofollow to a link', () => {
+      const noFollowContainer = document.querySelector('main div');
+      utils.decorateLinks(noFollowContainer);
+      const noFollowLink = noFollowContainer.querySelector('.no-follow');
+      expect(noFollowLink.rel).to.contain('nofollow');
+      expect(noFollowLink.href).to.equal('https://www.adobe.com/test');
+    });
+
     it('Sets up milo.deferredPromise', async () => {
       const { resolveDeferred } = utils.getConfig();
       expect(window.milo.deferredPromise).to.exist;