[Release] Stage to Main 02/05

creativecloud/blocks/prm-yt-gallery/prm-yt-gallery.js

@@ -15,6 +15,7 @@ const DEFAULT_PROPS = {
   collectionId: 'GClrnGPOMA39cFtEAAeNWoykuhUmaUw0',
   buttonText: 'Edit this template',
   freeTagText: 'Free',
+  branchLinkTestId: 'gRUEA7oVAYb',
 };
 
 // CSS Class Names
@@ -57,7 +58,7 @@ const ICONS = {
 const cleanUrl = (url) => (url ? url.replace(/\\\//g, '/') : '');
 
 // Generates template deep link URL.
-const createTemplateDeepLink = (templateId) => `https://premierepro.app.link/gRUEA7oVAYb?template_id=${templateId}`;
+const createTemplateDeepLink = (templateId, branchLinkTestId) => `https://premierepro.app.link/${branchLinkTestId}?template_id=${templateId}`;
 
 // Detects if the user is on an iOS device.
 const isIOSDevice = () => {
@@ -95,10 +96,10 @@ const setAriaHidden = (elementOrSelector, hidden, parent = document) => {
 };
 
 // Normalizes API item to consistent internal structure.
-const normalizeItem = (apiItem) => ({
+const normalizeItem = (apiItem, branchLinkTestId) => ({
   image: cleanUrl(apiItem.thumbnail_url),
   altText: apiItem.title || 'premiere youtube card',
-  deepLinkUrl: createTemplateDeepLink(apiItem.id),
+  deepLinkUrl: createTemplateDeepLink(apiItem.id, branchLinkTestId),
   video: cleanUrl(apiItem.video_preview_url),
   isFree: apiItem.is_free || false,
   ID: apiItem.id,
@@ -151,6 +152,7 @@ const PROPERTY_MAP = {
   'collection-id': 'collectionId',
   button: 'buttonText',
   'free-tag-text': 'freeTagText',
+  'branch-link-test-id': 'branchLinkTestId',
 };
 
 // Parses block properties from the authoring table.
@@ -538,14 +540,14 @@ const addFreeTagToCard = (card, freeTagText) => {
 };
 
 // Updates cards with fetched data from API.
-const updateCardsWithData = (container, data, cardLimit, freeTagText) => {
+const updateCardsWithData = (container, data, cardLimit, freeTagText, branchLinkTestId) => {
   const cards = container.querySelectorAll(`.${CLASSES.CARD}`);
   const items = data?.files?.slice(0, cardLimit) || [];
   items.forEach((rawItem, index) => {
     const card = cards[index];
     if (!card) return;
 
-    const item = normalizeItem(rawItem);
+    const item = normalizeItem(rawItem, branchLinkTestId);
     const eager = index < CONFIG.EAGER_LOAD_COUNT;
 
     updateCardWithData(card, item, eager);
@@ -592,6 +594,6 @@ export default async function init(el) {
     limit: 96,
   });
   if (data) {
-    updateCardsWithData(grid, data, cardLimit, blockProps.freeTagText);
+    updateCardsWithData(grid, data, cardLimit, blockProps.freeTagText, blockProps.branchLinkTestId);
   }
 }

creativecloud/blocks/showcase-marquee/showcase-marquee.css

@@ -1,3 +1,7 @@
+:root {
+  --offset-filler-size: 1.5rem;
+}
+
 .showcase-marquee {
   position: relative;
   color: var(--color-white);
@@ -81,6 +85,49 @@
     /* background-color: red; */
 }
 
+.showcase-marquee .animation-controls {
+  display: flex;
+  padding: 0 0.5rem 0.5rem;
+  width: auto;
+  align-items: center;
+  justify-content: end;
+  position: absolute;
+  inset-block-end: 5%;
+  inset-inline-end: 1rem;
+}
+
+.showcase-marquee .animation-controls .pause-play-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+  border-radius: 50%;
+  z-index: 3;
+  padding: 2px;
+  cursor: pointer;
+  background-color: var(--color-white);
+  margin: 0;
+}
+
+.showcase-marquee .animation-controls .pause-play-wrapper .offset-filler {  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--offset-filler-size);
+  height: var(--offset-filler-size);
+  border-radius: inherit;
+  background: var(--color-gray-800);
+}
+
+.showcase-marquee .animation-controls .pause-play-wrapper:focus-visible {
+  outline: var(--color-accent-focus-ring) solid 2px;
+}
+
+.showcase-marquee .pause-play-wrapper .offset-filler.is-playing .play-icon,
+.showcase-marquee .pause-play-wrapper .offset-filler:not(.is-playing) .pause-icon {
+  display: none;
+}
+
 .showcase-marquee .logo-row {
     opacity: .3;
     position: absolute;
@@ -102,6 +149,10 @@
   animation-name: scroll-right;
 }
 
+.showcase-marquee .logo-row .logo-container.paused {
+  animation-play-state: paused;
+}
+
 .showcase-marquee.unity-enabled .interactive-area {
     background: none;
 }
@@ -190,6 +241,10 @@
     padding: 0;
   }
 
+  .showcase-marquee .animation-controls .pause-play-wrapper .offset-filler{
+    --offset-filler-size: 2rem;
+  }
+
   .showcase-marquee.unity-enabled .interactive-area {
     width: auto;
   }
@@ -252,6 +307,10 @@
     margin-bottom: 20px;
   }
 
+  .showcase-marquee .animation-controls .pause-play-wrapper .offset-filler {
+    --offset-filler-size: 2.5rem;
+  }
+
   .showcase-marquee.unity-enabled .interactive-area {
     width: auto;
   }
@@ -303,4 +362,23 @@
   .showcase-marquee .logo-row svg {
     height: 50px;
   }
+
+  .showcase-marquee .animation-controls {
+    padding: 0;
+    width: fit-content;
+    inset-block-end: 8%;
+    inset-inline-end: 2.5rem;
+    justify-content: center;
+    border-radius: 50%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .showcase-marquee .logo-row .logo-container {
+    animation: none !important;
+  }
+
+  .showcase-marquee .animation-controls {
+    display: none;
+  }
 }

creativecloud/blocks/showcase-marquee/showcase-marquee.js

@@ -3,6 +3,21 @@ import { getLibs } from '../../scripts/utils.js';
 const miloLibs = getLibs('/libs');
 const { createTag } = await import(`${miloLibs}/utils/utils.js`);
 
+const LANA_OPTIONS = { tags: 'showcase-marquee', errorType: 'i' };
+
+const PLACEHOLDER_LABELS = ['pause-motion', 'play-motion', 'pause-icon', 'play-icon'];
+
+let animationLabels = {
+  playMotion: 'Play',
+  pauseMotion: 'Pause',
+  pauseIcon: 'Pause icon',
+  playIcon: 'Play icon',
+};
+
+function logError(message, error) {
+  window.lana?.log(`Animation slot text ${message}: ${error}`, LANA_OPTIONS);
+}
+
 export function createRollingLogos(logos) {
   const copies = Array.from({ length: 3 }, () => {
     const copy = createTag('div', { class: 'logos-duplicate' });
@@ -67,9 +82,110 @@ export function createRollingLogos(logos) {
   return { addScrolling, logoContainer };
 }
 
+async function fetchAnimationLabels(getFedsPlaceholderConfig, replaceKeyArray) {
+  try {
+    const [pauseMotion, playMotion, pauseIcon, playIcon] = await replaceKeyArray(
+      PLACEHOLDER_LABELS,
+      getFedsPlaceholderConfig(),
+    );
+    return { playMotion, pauseMotion, pauseIcon, playIcon, hasFetched: true };
+  } catch (err) {
+    logError('Failed to fetch animation labels', err);
+    return animationLabels;
+  }
+}
+
+function initAnimationControls({ button, iconWrapper, logoContainer }) {
+  let isPlaying = true;
+  if (!button || !iconWrapper || !logoContainer) return;
+
+  const updateControlState = (playing) => {
+    isPlaying = playing;
+    iconWrapper.classList.toggle('is-playing', playing);
+    button.setAttribute('aria-label', playing ? animationLabels.pauseMotion : animationLabels.playMotion);
+    button.setAttribute('title', playing ? animationLabels.pauseMotion : animationLabels.playMotion);
+    button.setAttribute('aria-pressed', String(playing));
+  };
+
+  const pauseAnimation = () => {
+    updateControlState(false);
+    const { transform } = getComputedStyle(logoContainer);
+    logoContainer.style.animation = 'none';
+    logoContainer.style.transform = transform;
+    logoContainer.classList.add('paused');
+  };
+
+  const playAnimation = () => {
+    updateControlState(true);
+    logoContainer.style.animation = '';
+    logoContainer.style.transform = '';
+    logoContainer.classList.remove('paused');
+  };
+
+  const toggleAnimation = () => (isPlaying ? pauseAnimation() : playAnimation());
+
+  const handleKeydown = (event) => {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault();
+      toggleAnimation();
+    }
+  };
+
+  button.addEventListener('click', (event) => {
+    event.preventDefault();
+    toggleAnimation();
+  });
+
+  button.addEventListener('keydown', handleKeydown);
+}
+
+function createAnimationControls({ container, getFederatedContentRoot, logoContainer }) {
+  const fedRoot = getFederatedContentRoot();
+  if (!container || !fedRoot) return;
+  const controlsWrapper = createTag('div', { class: 'animation-controls' });
+
+  const button = createTag('button', {
+    class: 'pause-play-wrapper',
+    title: animationLabels.pauseMotion,
+    'aria-label': animationLabels.pauseMotion,
+    'aria-pressed': true,
+  });
+
+  const iconWrapper = createTag('div', { class: 'offset-filler is-playing' });
+
+  const playIcon = createTag('img', {
+    class: 'accessibility-control play-icon',
+    alt: animationLabels.playIcon,
+    src: `${fedRoot}/federal/assets/svgs/accessibility-play.svg`,
+  });
+
+  const pauseIcon = createTag('img', {
+    class: 'accessibility-control pause-icon',
+    alt: animationLabels.pauseIcon,
+    src: `${fedRoot}/federal/assets/svgs/accessibility-pause.svg`,
+  });
+
+  iconWrapper.append(playIcon, pauseIcon);
+  button.appendChild(iconWrapper);
+  controlsWrapper.appendChild(button);
+
+  container.appendChild(controlsWrapper);
+
+  initAnimationControls({
+    button,
+    iconWrapper,
+    logoContainer,
+  });
+}
+
 export default async function init(el) {
   const { decorateBlockBg } = await import(`${miloLibs}/utils/decorate.js`);
-
+  const { getFederatedContentRoot, getFedsPlaceholderConfig } = await import(`${miloLibs}/utils/utils.js`);
+  const { replaceKeyArray } = await import(`${miloLibs}/features/placeholders.js`);
+  animationLabels = await fetchAnimationLabels(
+    getFedsPlaceholderConfig,
+    replaceKeyArray,
+  );
   const children = el.querySelectorAll(':scope > div');
   const foreground = children[children.length - 2];
 
@@ -95,10 +211,13 @@ export default async function init(el) {
   logoRowContent.innerHTML = '';
   // TODO: cut down 1 level of DOM nesting
   const { logoContainer, addScrolling } = createRollingLogos(logos);
+  createAnimationControls({ container: logoRowContent, getFederatedContentRoot, logoContainer });
   logoRowContent.append(logoContainer);
   new IntersectionObserver(([{ isIntersecting }], ob) => {
     if (!isIntersecting) return;
     ob.disconnect();
-    addScrolling();
+    if (!logoContainer.classList.contains('paused')) {
+      addScrolling();
+    }
   }).observe(el);
 }

nala/blocks/mediablockroundedcorners/mediablockroundedcorners.page.js

@@ -0,0 +1,26 @@
+export default class mediaroundedcorners {
+  constructor(page) {
+    this.page = page;
+    // Media rounded corners styles for both images and madia block UI locators
+    this.mediaRoundedCornerImageGroup = page.locator('.section.three-up.s-spacing');
+    this.firstimagerow = this.mediaRoundedCornerImageGroup.locator('.media-row').nth(0);
+    this.secondimagerow = this.mediaRoundedCornerImageGroup.locator('.media-row').nth(1);
+    this.thirdimagerow = this.mediaRoundedCornerImageGroup.locator('.media-row').nth(2);
+    this.image_SmallRoundedCorners = this.mediaRoundedCornerImageGroup.locator('.media.s-rounded-corners-image.con-block.has-bg').first();
+    this.image_MediumRoundedCorners = this.mediaRoundedCornerImageGroup.locator('media.m-rounded-corners-image.con-block.has-bg');
+    this.image_LargeRoundedCorners = this.mediaRoundedCornerImageGroup.locator('media.l-rounded-corners-image.con-block.has-bg');
+    this.mediaRoundedBlockGroup = page.locator('.section.two-up.s-spacing').first();
+    this.firstMediaBlock = this.mediaRoundedBlockGroup.locator('.media.l-rounded-corners.con-block.has-bg');
+    this.secondMediaBlock = this.mediaRoundedBlockGroup.locator('.media.large.dark.m-rounded-corners.s-rounded-corners-image.con-block.has-bg.media-reverse-mobile');
+    this.imageWithInBlock = this.mediaRoundedBlockGroup.locator('//img[@src="./media_15701a692530b54cb77445d12a98ec8d5b498e188.jpeg?width=750&format=jpeg&optimize=medium"]');
+    this.fullRoundedCornersBlock = page.locator('.media.l-rounded-corners.full-rounded-corners-image.con-block');
+    this.fullRoundedcornerimage = this.fullRoundedCornersBlock.locator('//img[@src="./media_1f320de06e9c6a05dc899e773a62d93cf1149bb40.jpeg?width=750&format=jpeg&optimize=medium"]');
+    // image & block rounded corner css property
+    this.cssProperties = {
+      smallRoundedCorners: { 'border-radius': '4px' },
+      mediumRoundedCorners: { 'border-radius': '8px' },
+      largeRoundedCorners: { 'border-radius': '16px' },
+      fullRoundedCorners: { 'border-radius': '50%' },
+    };
+  }
+}

nala/blocks/mediablockroundedcorners/mediablockroundedcorners.spec.js

@@ -0,0 +1,23 @@
+module.exports = {
+  name: 'mediaroundedcorners',
+  features: [
+    {
+      tcid: '0',
+      name: 'media-roundedsmall',
+      path: '/drafts/Automation-PW/blocks/round-media-block?georouting=off',
+      tags: '@cc @cc-mediarounded @cc-imageroundedcornersmall',
+    },
+    {
+      tcid: '1',
+      name: 'media-roundedmedium',
+      path: '/drafts/Automation-PW/blocks/round-media-block?georouting=off',
+      tags: '@cc @cc-mediarounded @cc-imageroundedcornermedium',
+    },
+    {
+      tcid: '2',
+      name: 'media-roundedlarge',
+      path: '/drafts/Automation-PW/blocks/round-media-block?georouting=off',
+      tags: '@cc @cc-mediarounded @cc-imageroundedcornerlarge',
+    },
+  ],
+};