Restore idle option to LogoSuite.Logobar (#1055)

Author: rezrah

.changeset/twelve-lamps-roll.md

@@ -0,0 +1,14 @@
+---
+'@primer/react-brand': patch
+---
+
+Restore `idle` option to `LogoSuite.Logobar` for enabling a default paused state, and programmatic control over animation.
+
+Use `marqueeSpeed="idle"` to display a logo bar that is initially paused.
+
+```jsx
+<LogoSuite>
+  <LogoSuite.Heading />
+  <LogoSuite.Logobar marquee marqueeSpeed="idle" />
+</LogoSuite>
+```

packages/e2e/scripts/playwright/playwright.generate-tests.ts

@@ -99,8 +99,6 @@
     'components-pillar-features--frosted-glass-effect': 3000, // for image to load
     'components-testimonial-examples--with-frosted-glass': 4000, // for animation to complete
     'components-testimonial-examples--with-frosted-glass-dark': 4000, // for animation to complete
-    'components-logosuite-features--condensed-gap': 6000, // animation only
-    'components-logosuite-features--marquee': 6000, // animation only
   }
 
   /**
@@ -139,6 +137,7 @@
     'components-hero-features--with-native-block-end-default', // for being non-deterministic due to video buffering
     'components-hero-features--with-youtube-video-block-end-default', // for loading a remote video
     'components-hero-features--with-youtube-video-inline-end', // for loading a remote video
+    'components-logosuite-features--marquee', // for the animation
   ]
 
   const categorisedStories = Object.keys((stories as typeof StoryIndex).entries).reduce((acc, key) => {

packages/react/src/LogoSuite/LogoSuite.features.stories.tsx

@@ -102,21 +102,13 @@ export const CondensedGap = () => (
       </LogoSuite>
       <LogoSuite>
         <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>
-        <LogoSuite.Logobar gap="condensed" marquee>
+        <LogoSuite.Logobar gap="condensed" marquee marqueeSpeed="idle">
           {logos.slice(0, 12)}
         </LogoSuite.Logobar>
       </LogoSuite>
     </Grid.Column>
   </Grid>
 )
-CondensedGap.play = async ({canvasElement}) => {
-  const canvas = within(canvasElement)
-
-  await new Promise(resolve => setTimeout(resolve, 3000))
-
-  const pauseButton = canvas.getByLabelText('Pause animation')
-  await userEvent.click(pauseButton)
-}
 
 export const Marquee = () => (
   <LogoSuite>
@@ -134,6 +126,15 @@ Marquee.play = async ({canvasElement}) => {
   await userEvent.click(pauseButton)
 }
 
+export const IdleMarqueeSpeed = () => (
+  <LogoSuite>
+    <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>
+    <LogoSuite.Logobar marquee marqueeSpeed="idle">
+      {logos.slice(0, 12)}
+    </LogoSuite.Logobar>
+  </LogoSuite>
+)
+
 export const SlowerMarqueeSpeed = () => (
   <LogoSuite>
     <LogoSuite.Heading visuallyHidden>Heading</LogoSuite.Heading>

packages/react/src/LogoSuite/LogoSuite.stories.tsx

@@ -97,7 +97,7 @@ const meta: Meta<StoryProps> = {
 
     marqueeSpeed: {
       control: 'radio',
-      options: ['slow', 'normal'],
+      options: ['slow', 'normal', 'idle'],
       table: {
         category: 'LogoSuite.Logobar',
       },

packages/react/src/LogoSuite/LogoSuite.test.tsx

@@ -236,6 +236,45 @@ describe('LogoSuite', () => {
     expect(el.classList).toContain(expectedClass)
   })
 
+  it('can render a marquee logobar sans-animation using the idle speed option', () => {
+    const {container, getByRole} = render(
+      <LogoSuite>
+        <LogoSuite.Heading visuallyHidden>{mockHeading}</LogoSuite.Heading>
+        <LogoSuite.Logobar marquee marqueeSpeed="idle">
+          <svg data-testid="svg1" aria-label="Mock SVG" />
+          <svg data-testid="svg2" aria-label="Mock SVG" />
+        </LogoSuite.Logobar>
+      </LogoSuite>,
+    )
+
+    const playButton = getByRole('button', {name: 'Play animation'})
+    expect(playButton).toBeInTheDocument()
+    expect(container.querySelector('.LogoSuite__logobar--paused')).toBeInTheDocument()
+  })
+
+  it('can start the animation on idle marquee speed settings by pressing the play button', async () => {
+    const user = userEvent.setup()
+
+    const {container, getByRole} = render(
+      <LogoSuite>
+        <LogoSuite.Heading visuallyHidden>{mockHeading}</LogoSuite.Heading>
+        <LogoSuite.Logobar marquee marqueeSpeed="idle">
+          <svg data-testid="svg1" aria-label="Mock SVG" />
+          <svg data-testid="svg2" aria-label="Mock SVG" />
+        </LogoSuite.Logobar>
+      </LogoSuite>,
+    )
+
+    const playButtonEl = getByRole('button', {name: 'Play animation'})
+
+    await user.click(playButtonEl)
+
+    const pauseButtonEl = getByRole('button', {name: 'Pause animation'})
+
+    expect(pauseButtonEl).toBeInTheDocument()
+    expect(container.querySelector('.LogoSuite__logobar--paused')).not.toBeInTheDocument()
+  })
+
   it('renders a pause button when the marquee prop is true', () => {
     const {getByRole} = render(
       <LogoSuite>

packages/react/src/LogoSuite/LogoSuite.tsx

@@ -200,7 +200,7 @@ export type LogoSuiteLogoBarProps = BaseProps<HTMLDivElement> & {
   /**
    * The speed of the marquee effect
    */
-  marqueeSpeed?: 'slow' | 'normal'
+  marqueeSpeed?: 'slow' | 'normal' | 'idle'
   /**
    * The stylistic variant of the LogoBar.
    */
@@ -221,7 +221,7 @@ const _LogoBar = forwardRef(
     ref: Ref<HTMLDivElement>,
   ) => {
     const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
-    const [isPlaying, setIsPlaying] = useState(marquee && !prefersReducedMotion)
+    const [isPlaying, setIsPlaying] = useState(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')
 
     const childrenCount = React.Children.toArray(children).length
     variant ??= childrenCount <= 5 ? 'emphasis' : 'muted'
@@ -242,8 +242,8 @@ const _LogoBar = forwardRef(
     }, [])
 
     useEffect(() => {
-      setIsPlaying(marquee && !prefersReducedMotion)
-    }, [marquee, prefersReducedMotion])
+      setIsPlaying(marquee && !prefersReducedMotion && marqueeSpeed !== 'idle')
+    }, [marquee, prefersReducedMotion, marqueeSpeed])
 
     const defaultProps = {
       ref,

packages/react/src/LogoSuite/LogoSuite.visual.spec.ts

@@ -91,14 +91,16 @@ test.describe('Visual Comparison: LogoSuite', () => {
       'http://localhost:6006/iframe.html?args=&id=components-logosuite-features--condensed-gap&viewMode=story',
     )
 
-    await page.waitForTimeout(6000)
+    await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
-  test('LogoSuite / Marquee', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-logosuite-features--marquee&viewMode=story')
+  test('LogoSuite / Idle Marquee Speed', async ({page}) => {
+    await page.goto(
+      'http://localhost:6006/iframe.html?args=&id=components-logosuite-features--idle-marquee-speed&viewMode=story',
+    )
 
-    await page.waitForTimeout(6000)
+    await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })