Refine logo list marquee behavior

entry_types/scrolled/package/spec/contentElements/logoList/LogoList/features/marquee-spec.js

@@ -42,6 +42,16 @@ describe('LogoList marquee', () => {
     expect(lists[1]).toHaveAttribute('inert');
   });
 
+  it('renders a single unanimated list in static preview', () => {
+    const {container} = renderLogoList({items, marquee: true}, {
+      isStaticPreview: true
+    });
+
+    expect(container.querySelectorAll('ul')).toHaveLength(1);
+    expect(container.querySelectorAll('img')).toHaveLength(2);
+    expect(container.querySelector(`.${styles.marquee}`)).toBeNull();
+  });
+
   it('passes logo count to animation duration', () => {
     const {container} = renderLogoList({items, marquee: true});
 

entry_types/scrolled/package/src/contentElements/logoList/LogoList.js

@@ -9,13 +9,15 @@ import {
   useContentElementEditorCommandSubscription,
   useContentElementEditorState,
   useContentElementLifecycle,
-  useFile
+  useFile,
+  useIsStaticPreview
 } from 'pageflow-scrolled/frontend';
 
 import styles from './LogoList.module.css';
 
 export function LogoList({configuration}) {
   const {shouldLoad} = useContentElementLifecycle();
+  const isStaticPreview = useIsStaticPreview();
   const {isSelected, setTransientState} = useContentElementEditorState();
   const updateConfiguration = useContentElementConfigurationUpdate();
   const [selectedItemId, setSelectedItemId] = useState(null);
@@ -72,7 +74,7 @@ export function LogoList({configuration}) {
     }
   }
 
-  const marquee = configuration.marquee && (!isSelected || marqueePreview);
+  const marquee = !isStaticPreview && configuration.marquee && (!isSelected || marqueePreview);
 
   return (
     <LinkTooltipProvider position="above" align="center" gap={5}>

entry_types/scrolled/package/src/contentElements/logoList/LogoList.module.css

@@ -47,7 +47,7 @@
     display: flex;
   }
 
-  .marquee:hover > .list {
+  .marquee:has(a[href]):hover > .list {
     animation-play-state: paused;
   }
 }

entry_types/scrolled/package/src/testHelpers/renderInContentElement.js

@@ -16,6 +16,7 @@ import {
 import {Consent} from 'pageflow/frontend';
 
 import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycle';
+import {StaticPreview} from '../frontend/useScrollPositionLifecycle';
 
 /**
  * Provide context as if component was rendered inside of a content element.
@@ -43,6 +44,7 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl
  *   false, setTransientState: noop`) without wrapping any
  *   inline-editing-only providers (DndProvider, editor command
  *   emitter).
+ * @param {boolean} [options.isStaticPreview=false] - Render in static preview context, like editor thumbnails.
  * @param {Object} [options.phonePlatform] - Fake result of `usePhonePlatform`.
  * @param {Object} [options.consentState] - Pass 'undecided' to render third party consent opt in.
  *
@@ -60,6 +62,7 @@ import {renderInEntryWithScrollPositionLifecycle} from './scrollPositionLifecycl
  * simulateStorylineMode('background');
  */
 export function renderInContentElement(ui, {inlineEditing,
+                                            isStaticPreview = false,
                                             phonePlatform = false,
                                             wrapper: OriginalWrapper,
                                             consentState = 'accepted',
@@ -94,6 +97,10 @@ export function renderInContentElement(ui, {inlineEditing,
 
     let tree = OriginalWrapper ? <OriginalWrapper children={children} /> : children;
 
+    if (isStaticPreview) {
+      tree = <StaticPreview>{tree}</StaticPreview>;
+    }
+
     if (inlineEditingConfig) {
       tree = (
         <DndProvider backend={HTML5Backend}>