Merge branch 'main' into aem-experimentation

Author: ramboz

.eslintignore

@@ -1,5 +1,9 @@
 helix-importer-ui
 scripts/preact.js
 scripts/htm.js
+scripts/acdl
 tools/picker
-plugins/
+scripts/commerce-events-collector.js
+scripts/commerce-events-sdk.js
+scripts/widgets
+plugins/

.github/workflows/cleanup-on-create.yaml

@@ -6,30 +6,26 @@ on:
   create:
     branches:
       - main
+  workflow_dispatch:
 jobs:
   cleanup:
     runs-on: ubuntu-latest
     permissions:
       contents: write
       actions: write
     # only run if commit message is "Initial commit" on main branch
-    if: ${{ github.ref == 'refs/heads/main' && github.event.head_commit.message == 'Initial commit' }}
+    if: ${{ github.event_name == 'workflow_dispatch' || ( github.ref == 'refs/heads/main' && !(contains(github.event, 'head_commit') || github.event.head_commit.message == 'Initial commit' )) }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 18
-      - name: Uninstall dependencies
-        run: |
-          npm uninstall --save-dev semantic-release @semantic-release/git @semantic-release/changelog @semantic-release/exec
+          node-version: 20
       - name: Remove Helper Files
         run: | 
           rm -rf \
             .github/workflows/cleanup-on-create.yaml \
-            .github/workflows/semantic-release.yaml \
-            .releaserc.cjs \
             CHANGELOG.md
 
       - name: Initialize README
@@ -47,7 +43,7 @@ jobs:
       - name: Commit changes
         run: |
           git config --local user.email "[email protected]"
-          git config --local user.name "Helix Bot"
+          git config --local user.name "AEM Bot"
           git add .
           git commit -m "chore: cleanup repository template"
           git push

.github/workflows/main.yaml

@@ -0,0 +1,14 @@
+name: Build
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js 20
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - run: npm ci
+    - run: npm run lint

.github/workflows/run-tests.yaml

@@ -5,3 +5,5 @@ LICENSE
 package.json
 package-lock.json
 test/*
+postinstall.js
+tools/picker/src/*

.github/workflows/semantic-release.yaml

@@ -26,7 +26,7 @@
           btnContainer.append(backBtn);
         }
       }
-      sampleRUM('404', { source: document.referrer, target: window.location.href });
+      sampleRUM('404', { source: document.referrer });
     });
   </script>
   <link rel="stylesheet" href="/styles/styles.css">

.hlxignore

@@ -71,4 +71,3 @@ One of the maintainers will look at the pull request within one week. Feedback o
 The project's committers will release to the [Adobe organization on npmjs.org](https://www.npmjs.com/org/adobe).
 Please contact the [Adobe Open Source Advisory Board](https://git.corp.adobe.com/OpenSourceAdvisoryBoard/discuss/issues) to get access to the npmjs organization.
 
-The release process is fully automated using `semantic-release`, increasing the version numbers, etc. based on the contents of the commit messages found.

.releaserc.cjs

@@ -13,7 +13,13 @@ export default async function decorate(block) {
   }
 
   if (type === 'category') {
-    const categoryId = document.querySelector('.block.product-list-page')?.dataset?.category;
+    const plpBlock = document.querySelector('.block.product-list-page');
+    if (!plpBlock) return;
+
+    let categoryId = plpBlock.dataset?.category;
+    if (!categoryId) {
+      categoryId = readBlockConfig(plpBlock).category;
+    }
     if (!categoryId) return;
     filters.categories = categoryId;
   }
@@ -33,10 +39,21 @@ export default async function decorate(block) {
   (await Promise.all(matchingFragments.map((path) => loadFragment(path))))
     .filter((fragment) => fragment)
     .forEach((fragment) => {
-      const section = fragment.querySelector(':scope .section');
-      if (section) {
-        block.closest('.section').classList.add(...section.classList);
-        block.closest('.section').append(...section.childNodes);
+      const sections = fragment.querySelectorAll(':scope .section');
+
+      // If only single section, replace block with content of section
+      if (sections.length === 1) {
+        block.closest('.section').classList.add(...sections[0].classList);
+        const wrapper = block.closest('.enrichment-wrapper');
+        Array.from(sections[0].children)
+          .forEach((child) => wrapper.parentNode.insertBefore(child, wrapper));
+      } else if (sections.length > 1) {
+        // If multiple sections, insert them after section of block
+        const blockSection = block.closest('.section');
+        Array.from(sections)
+          .reverse()
+          .forEach((section) => blockSection
+            .parentNode.insertBefore(section, blockSection.nextSibling));
       }
     });
 

404.html

@@ -6,14 +6,13 @@ import { loadFragment } from '../fragment/fragment.js';
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
+  // load footer as fragment
   const footerMeta = getMetadata('footer');
-  block.textContent = '';
-
-  // load footer fragment
-  const footerPath = footerMeta.footer || '/footer';
+  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
   const fragment = await loadFragment(footerPath);
 
   // decorate footer DOM
+  block.textContent = '';
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 

CHANGELOG.md

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 /* header and nav layout */
 header .nav-wrapper {
   background-color: var(--background-color);
@@ -273,7 +275,7 @@ header nav .nav-tools {
   gap: 10px;
 }
 
-header nav .nav-tools button {
+header nav .nav-tools > button, header nav .nav-tools .minicart-wrapper > button {
   color: var(--color-brand-700);
   background: transparent;
   padding: 5px 10px;
@@ -296,12 +298,13 @@ header nav .nav-tools button.nav-search-button {
 
 header .nav-search-input {
   position: absolute;
+  z-index: 99;
   top: var(--nav-height);
+  box-shadow: var(--shape-shadow-2);
   background: var(--color-neutral-50);
   left: 0;
   right: 0;
-  padding: 10px;
-  z-index: 1;
+  padding: 20px;
 }
 
 header .nav-search-input.hidden {
@@ -310,4 +313,20 @@ header .nav-search-input.hidden {
 
 header .nav-search-input input {
   width: 100%;
+  padding: 5px;
+}
+
+header .nav-search-input .search_autocomplete .popover-container {
+  width: 100%;
+}
+
+@media (width >= 1024px) {
+  header .nav-search-input {
+    left: unset;
+    right: 20px;
+  }
+
+  header .nav-search-input input {
+    min-width: 400px;
+  }
 }

CONTRIBUTING.md

@@ -88,16 +88,17 @@ function toggleMenu(nav, navSections, forceExpanded = null) {
 }
 
 /**
- * decorates the header, mainly the nav
+ * loads and decorates the header, mainly the nav
  * @param {Element} block The header block element
  */
 export default async function decorate(block) {
   // load nav as fragment
   const navMeta = getMetadata('nav');
-  const navPath = navMeta ? new URL(navMeta).pathname : '/nav';
+  const navPath = navMeta ? new URL(navMeta, window.location).pathname : '/nav';
   const fragment = await loadFragment(navPath);
 
   // decorate nav DOM
+  block.textContent = '';
   const nav = document.createElement('nav');
   nav.id = 'nav';
   while (fragment.firstElementChild) nav.append(fragment.firstElementChild);
@@ -145,12 +146,18 @@ export default async function decorate(block) {
   });
 
   // Search
-  const searchInput = document.createRange().createContextualFragment('<div class="nav-search-input hidden"><form action="/search" method="GET"><input type="search" name="q" placeholder="Search" /></form></div>');
+  const searchInput = document.createRange().createContextualFragment(`<div class="nav-search-input hidden">
+      <form id="search_mini_form" action="/search" method="GET">
+        <input id="search" type="search" name="q" placeholder="Search" />
+        <div id="search_autocomplete" class="search-autocomplete"></div>
+      </form>
+    </div>`);
   document.body.querySelector('header').append(searchInput);
 
   const searchButton = document.createRange().createContextualFragment('<button type="button" class="nav-search-button">Search</button>');
   navTools.append(searchButton);
-  navTools.querySelector('.nav-search-button').addEventListener('click', () => {
+  navTools.querySelector('.nav-search-button').addEventListener('click', async () => {
+    await import('./searchbar.js');
     document.querySelector('header .nav-search-input').classList.toggle('hidden');
   });