Merge branch 'stage' into carousel-video-sizing

.eslintrc-code-compatibility.js

@@ -14,6 +14,7 @@ module.exports = {
   ],
   ignorePatterns: [
     '/libs/deps/*',
+    '/libs/navigation/dist/*',
     '/tools/loc/*',
   ],
 };

.eslintrc.js

@@ -62,6 +62,7 @@ module.exports = {
     '/libs/features/mas/*',
     '/tools/loc/*',
     '/libs/features/spectrum-web-components/*',
+    '/libs/navigation/dist/*',
   ],
   plugins: [
     'chai-friendly',

.github/workflows/helpers.js

@@ -43,7 +43,11 @@ const RCPDates = [
   },
 ];
 
-const isWithinRCP = (offset = 0) => {
+const isShortRCP = (start, end) => {
+  return ((end - start) / (1000 * 60 * 60)) < 24;
+};
+
+const isWithinRCP = ({ offset = 0, excludeShortRCP = false } = {}) => {
   const now = new Date();
   if (now.getFullYear() !== CURRENT_YEAR) {
     console.log(`ADD NEW RCPs for ${CURRENT_YEAR + 1}`);
@@ -53,7 +57,9 @@ const isWithinRCP = (offset = 0) => {
   if (RCPDates.some(({ start, end }) => {
     const adjustedStart = new Date(start);
     adjustedStart.setDate(adjustedStart.getDate() - offset);
-    return start <= now && now <= end
+    const match = adjustedStart <= now && now <= end;
+    if (!match || (excludeShortRCP && isShortRCP(start, end))) return false;
+    return true;
   })) {
     console.log(
       'Current date is within a RCP (2 days earlier for stage, to keep stage clean & make CSO contributions during an RCP easier). Stopping execution.'
@@ -148,6 +154,7 @@ module.exports = {
   getLocalConfigs,
   slackNotification,
   pulls: { addLabels, addFiles, getChecks, getReviews },
+  isShortRCP,
   isWithinRCP,
   RCPDates,
 };

.github/workflows/merge-to-main.js

@@ -9,6 +9,7 @@ const {
 const PR_TITLE = '[Release] Stage to Main';
 const STAGE = 'stage';
 const PROD = 'main';
+const MIN_SOT_APPROVALS = process.env.MIN_SOT_APPROVALS ? Number(process.env.MIN_SOT_APPROVALS) : 4;
 
 let github, owner, repo;
 
@@ -40,7 +41,7 @@ const main = async (params) => {
     const stageToMainPR = await getStageToMainPR();
     const signOffs = stageToMainPR?.labels.filter((l) => l.includes('SOT'));
     console.log(`${signOffs.length} SOT labels on PR ${stageToMainPR.number}`);
-    if (signOffs.length >= 4) {
+    if (signOffs.length >= MIN_SOT_APPROVALS) {
       console.log('Stage to Main  PR has all required labels. Merging...');
       await github.rest.pulls.merge({
         owner,

.github/workflows/merge-to-main.yaml

@@ -9,6 +9,7 @@ on:
 
 env:
   MILO_RELEASE_SLACK_WH: ${{ secrets.MILO_RELEASE_SLACK_WH }}
+  MIN_SOT_APPROVALS: ${{ secrets.MIN_SOT_APPROVALS }}
 
 jobs:
   merge-to-main:

.github/workflows/merge-to-stage.js

@@ -20,19 +20,20 @@ const LABELS = {
   zeroImpact: 'zero-impact',
 };
 const TEAM_MENTIONS = [
-  '@adobecom/miq-sot',
   '@adobecom/bacom-sot',
-  '@adobecom/homepage-sot',
   '@adobecom/creative-cloud-sot',
   '@adobecom/document-cloud-sot',
+  '@adobecom/express-sot',
+  '@adobecom/homepage-sot',
+  '@adobecom/miq-sot',
 ];
 const SLACK = {
   merge: ({ html_url, number, title, prefix = '' }) => `:merged: PR merged to stage: ${prefix} <${html_url}|${number}: ${title}>.`,
   openedSyncPr: ({ html_url, number }) => `:fast_forward: Created <${html_url}|Stage to Main PR ${number}>`,
 };
 
-let github; 
-let owner; 
+let github;
+let owner;
 let repo;
 
 let body = `
@@ -230,7 +231,7 @@ const main = async (params) => {
   github = params.github;
   owner = params.context.repo.owner;
   repo = params.context.repo.repo;
-  if (isWithinRCP(process.env.STAGE_RCP_OFFSET_DAYS || 2)) return console.log('Stopped, within RCP period.');
+  if (isWithinRCP({ offset: process.env.STAGE_RCP_OFFSET_DAYS || 2, excludeShortRCP: true })) return console.log('Stopped, within RCP period.');
 
   try {
     const stageToMainPR = await getStageToMainPR();

.github/workflows/rcp-notifier.js

@@ -2,10 +2,13 @@ const {
   slackNotification,
   getLocalConfigs,
   RCPDates,
+  isShortRCP,
 } = require('./helpers.js');
 
-const isWithin24Hours = (targetDate) =>
-  Math.abs(new Date() - targetDate) <= 24 * 60 * 60 * 1000;
+const isWithin24Hours = (targetDate) => {
+  const now = new Date();
+  return now < targetDate && new Date(now.getTime() + 24 * 60 * 60 * 1000) > targetDate;
+};
 
 const calculateDateOffset = (date, offset) => {
   const newDate = new Date(date);
@@ -19,17 +22,18 @@ const main = async () => {
   for (const rcp of RCPDates) {
     const start = new Date(rcp.start);
     const end = new Date(rcp.end);
+    const isShort = isShortRCP(start, end);
     const tenDaysBefore = calculateDateOffset(start, 10);
     const fourDaysBefore = calculateDateOffset(start, 4);
     const stageOffset = Number(process.env.STAGE_RCP_OFFSET_DAYS) || 2;
     const slackText = (days) =>
       `Reminder RCP starts in ${days} days: from ${start.toUTCString()} to ${end.toUTCString()}. Merges to stage will be disabled beginning ${calculateDateOffset(start, stageOffset).toUTCString()}.`;
-    if (isWithin24Hours(tenDaysBefore)) {
+    if (isWithin24Hours(tenDaysBefore) && !isShort) {
       console.log('Is within 24 hours of 10 days before RCP');
       await slackNotification(slackText(10), process.env.MILO_DEV_HOOK);
     }
 
-    if (isWithin24Hours(fourDaysBefore)) {
+    if (isWithin24Hours(fourDaysBefore) && !isShort) {
       console.log('Is within 24 hours of 4 days before RCP');
       await slackNotification(slackText(4), process.env.MILO_DEV_HOOK);
     }

.github/workflows/release-standalone-feds.yml

@@ -0,0 +1,55 @@
+name: Create a Release for Standalone Feds GlobalNav and Footer
+on:
+  workflow_dispatch:
+    inputs:
+      version:
+        description: 'Version'
+        required: true
+        type: string
+
+permissions:
+  contents: write
+
+jobs:
+  release-feds:
+    name: Release Standalone Feds
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    defaults:
+      run:
+        working-directory: ./libs/navigation
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 2
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Build Files
+      run: node ./build.mjs
+
+    - name: Generate tarball
+      run: npm pack
+
+    - name: Create Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: |
+          gh release create "feds-standalone-v${{ inputs.version }}" \
+              --repo="$GITHUB_REPOSITORY" \
+              --title="@adobecom/standalone-feds v${{ inputs.version }} Release" \
+              --generate-notes
+
+    - name: Upload Files to Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      run: gh release upload "feds-standalone-v${{ inputs.version }}" "adobecom-standalone-feds-${{ inputs.version }}.tgz"

.github/workflows/run-nala-circleci.yml

@@ -1,9 +1,7 @@
 name: Nala Tests on CircleCI
 
 on:
-  push:
-    branches:
-      - stage
+  workflow_dispatch:
 
 jobs:
   trigger-circleci:
@@ -15,4 +13,4 @@ jobs:
           curl -X POST 'https://circle.ci.adobe.com/api/v2/project/gh/wcms/nala/pipeline' \
               -H 'Circle-Token: ${{ secrets.CCI_TOKEN }}' \
               -H 'content-type: application/json' \
-              -d "{\"branch\":\"main\"}"
+              -d "{\"branch\":\"main\"}"

.gitignore

@@ -11,3 +11,4 @@ logs/*
 test-html-results/
 test-results/
 test-a11y-results/
+libs/navigation/dist/

helix-query.yaml

@@ -60,18 +60,42 @@ indices:
       - '/blog/drafts/**'
     target: /blog/query-index.xlsx
     properties:
+      author:
+        select: head > meta[name="author"]
+        value: |
+          attribute(el, 'content')
       title:
         select: head > meta[property="og:title"]
         value: |
           attribute(el, 'content')
+      date:
+        select: head > meta[name="publication-date"]
+        value: |
+          dateValue(attribute(el, 'content'), 'MM-DD-YYYY')
       image:
         select: head > meta[property="og:image"]
         value: |
           match(attribute(el, 'content'), 'https:\/\/[^/]+(\/.*)')
+      imageAlt:
+        select: head > meta[property="og:image:alt"]
+        value: |
+          attribute(el, 'content')
       description:
         select: head > meta[name="description"]
         value: |
           attribute(el, 'content')
+      tags:
+        select: head > meta[property="article:tag"]
+        values: |
+          attribute(el, 'content')
+      category:
+        select: head > meta[property="category"]
+        values: |
+          attribute(el, 'content')
+      robots:
+        select: head > meta[name="robots"]
+        value: |
+          attribute(el, 'content')
       lastModified:
         select: none
         value: |

libs/blocks/adobetv/adobetv.css

@@ -1,4 +1,5 @@
 @import url('../../styles/iframe.css');
+@import url('../video/video.css');
 
 a[href*='.mp4'].hide-video {
   visibility: hidden !important;

libs/blocks/article-feed/article-feed.js

@@ -303,7 +303,7 @@ async function buildFilter(type, tax, block, config) {
   dropdown.setAttribute('aria-labelledby', `${type}-filter-button`);
   dropdown.setAttribute('role', 'menu');
 
-  const SEARCH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
+  const SEARCH_ICON = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false">
     <path d="M14 2A8 8 0 0 0 7.4 14.5L2.4 19.4a1.5 1.5 0 0 0 2.1 2.1L9.5 16.6A8 8 0 1 0 14 2Zm0 14.1A6.1 6.1 0 1 1 20.1 10 6.1 6.1 0 0 1 14 16.1Z"></path>
   </svg>`;
   const searchBar = createTag('div', { class: 'filter-search' });

libs/blocks/article-feed/article-helpers.js

@@ -81,12 +81,18 @@ function loadArticleTaxonomy(article) {
   // for now, we can only compute the category
   const { tags, path } = clonedArticle;
 
+  let topics;
+
   if (tags) {
-    const topics = tags
-      .replace(/[["\]]/gm, '')
-      .split(',')
-      .map((t) => t.trim())
-      .filter((t) => t && t !== '');
+    if (Array.isArray(tags)) {
+      topics = tags.map((t) => t.trim()).filter((t) => t && t !== '');
+    } else {
+      topics = tags
+        .replace(/[["\]]/gm, '')
+        .split(',')
+        .map((t) => t.trim())
+        .filter((t) => t && t !== '');
+    }
 
     const articleTax = computeTaxonomyFromTopics(topics, path);
 
@@ -175,7 +181,7 @@ export async function loadTaxonomy() {
  */
 export function formatCardLocaleDate(date) {
   if (!date) return '';
-  const jsDate = !date.includes('-') ? calculateExcelDate(date) : date.replace(/-/g, '/');
+  const jsDate = !date.toString().includes('-') ? calculateExcelDate(date) : date.replace(/-/g, '/');
 
   const dateLocale = getConfig().locale?.ietf;
 

libs/blocks/aside/aside.css

@@ -298,6 +298,7 @@
 }
 
 .aside.rounded-corners .foreground .image img,
+.aside.rounded-corners .foreground .image:not(:has(.video-container)) .pause-play-wrapper,
 .aside.rounded-corners .foreground .image video {
   border-radius: 16px;
 }

libs/blocks/aside/aside.js

@@ -33,7 +33,7 @@ const blockConfig = {
   },
 };
 const FORMAT_REGEX = /^format:/i;
-const closeSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+const closeSvg = `<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                     <g transform="translate(-10500 3403)">
                       <circle cx="10" cy="10" r="10" transform="translate(10500 -3403)" fill="#707070"></circle>
                       <line y1="8" x2="8" transform="translate(10506 -3397)" fill="none" stroke="#fff" stroke-width="2"></line>
@@ -197,7 +197,8 @@ function decorateLayout(el) {
   }
   const foregroundImage = foreground.querySelector(':scope > div:not(.text) img')?.closest('div');
   const bgImage = el.querySelector(':scope > div:not(.text):not(.foreground) img')?.closest('div');
-  const foregroundMedia = foreground.querySelector(':scope > div:not(.text) video, :scope > div:not(.text) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div');
+  const foregroundMedia = foreground.querySelector(':scope > div:not(.text) :is(.video-container, video, a[href*=".mp4"], a[href*="tv.adobe.com"]), :scope > div:not(.text) iframe[src*="tv.adobe.com"]')
+    ?.closest('div:not(.video-container)');
   const bgMedia = el.querySelector(':scope > div:not(.text):not(.foreground) video, :scope > div:not(.text):not(.foreground) a:is([href*=".mp4"], [href*="tv.adobe.com"])')?.closest('div');
   const image = foregroundImage ?? bgImage;
   const asideMedia = foregroundMedia ?? bgMedia ?? image;

libs/blocks/brick/brick.css

@@ -98,6 +98,10 @@
   margin: 0;
 }
 
+.brick .foreground div > .video-container {
+  margin: 0;
+}
+
 .brick .foreground div > * {
   margin-top: var(--spacing-xs);
 }
@@ -342,6 +346,11 @@
     position: absolute;
   }
 
+  .brick.split.row .foreground .brick-media .video-container img,
+  .brick.split.row .foreground .brick-media .video-container video {
+    width: 100%;
+  }
+
   .brick .foreground .brick-media video,
   .brick.split.row .foreground .brick-media video {
     object-fit: fill;

libs/blocks/caas/utils.js

@@ -587,15 +587,24 @@ export const getConfig = async (originalState, strs = {}) => {
       },
       button: { style: state.collectionBtnStyle },
       resultsPerPage: state.resultsPerPage,
-      endpoint: `https://${
-        state.endpoint
-      }${targetActivity}?originSelection=${originSelection}&contentTypeTags=${state.contentTypeTags.join(
-        ',',
-      )}&secondSource=${state.showSecondarySource ? state.secondarySource.join(',') : []}&secondaryTags=${state.showSecondarySource ? state.secondaryTags.join(
-        ',',
-      ) : []}&collectionTags=${collectionTags}&excludeContentWithTags=${excludeContentWithTags}&language=${language}&country=${country}&complexQuery=${complexQuery}&excludeIds=${excludedCards}&currentEntityId=&featuredCards=${featuredCards}&environment=&draft=${
-        state.draftDb
-      }&size=${state.collectionSize || state.totalCardsToShow}${localesQueryParam}${debug}${flatFile}`,
+      endpoint: `https://${state.endpoint
+      }${targetActivity
+      }?originSelection=${originSelection
+      }&contentTypeTags=${state.contentTypeTags.join().toLowerCase()
+      }&secondSource=${state.showSecondarySource ? state.secondarySource.join(',') : []
+      }&secondaryTags=${state.showSecondarySource ? state.secondaryTags.join(',').toLowerCase() : []
+      }&collectionTags=${collectionTags.toLowerCase()
+      }&excludeContentWithTags=${excludeContentWithTags.toLowerCase()
+      }&language=${language
+      }&country=${country
+      }&complexQuery=${complexQuery
+      }&excludeIds=${excludedCards
+      }&currentEntityId=&featuredCards=${featuredCards
+      }&environment=&draft=${state.draftDb
+      }&size=${state.collectionSize || state.totalCardsToShow
+      }${localesQueryParam
+      }${debug
+      }${flatFile}`,
       fallbackEndpoint: state.fallbackEndpoint,
       totalCardsToShow: state.totalCardsToShow,
       showCardBadges: state.showCardBadges,