diff --git a/entry_types/scrolled/package/spec/contentElements/logoList/LogoList/features/marquee-spec.js b/entry_types/scrolled/package/spec/contentElements/logoList/LogoList/features/marquee-spec.js index d57024cfde..5f7466fb63 100644 --- a/entry_types/scrolled/package/spec/contentElements/logoList/LogoList/features/marquee-spec.js +++ b/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}); diff --git a/entry_types/scrolled/package/src/contentElements/logoList/LogoList.js b/entry_types/scrolled/package/src/contentElements/logoList/LogoList.js index bca2d370e9..a656ea340f 100644 --- a/entry_types/scrolled/package/src/contentElements/logoList/LogoList.js +++ b/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 ( diff --git a/entry_types/scrolled/package/src/contentElements/logoList/LogoList.module.css b/entry_types/scrolled/package/src/contentElements/logoList/LogoList.module.css index 9ee8b6f3e4..3e5ea0c621 100644 --- a/entry_types/scrolled/package/src/contentElements/logoList/LogoList.module.css +++ b/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; } } diff --git a/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js b/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js index fb8e85dcf9..6623764dfe 100644 --- a/entry_types/scrolled/package/src/testHelpers/renderInContentElement.js +++ b/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 ? : children; + if (isStaticPreview) { + tree = {tree}; + } + if (inlineEditingConfig) { tree = (