152 lines
4.0 KiB
TypeScript
152 lines
4.0 KiB
TypeScript
import React, { useState } from 'react'
|
|
|
|
interface PartnerLogo {
|
|
id: string
|
|
label: React.ReactNode
|
|
}
|
|
|
|
interface PartnerTickerProps {
|
|
ariaLabel: string
|
|
logos: PartnerLogo[]
|
|
}
|
|
|
|
export const PARTNER_TICKER_ITEM_WIDTH_PX = 260
|
|
export const PARTNER_TICKER_SPEED_PX_PER_SECOND = 48
|
|
export const PARTNER_TICKER_MIN_DURATION_SECONDS = 24
|
|
|
|
export function partnerTickerDurationSeconds(logoCount: number) {
|
|
if (logoCount <= 0) return 0
|
|
|
|
const loopDistance = logoCount * PARTNER_TICKER_ITEM_WIDTH_PX
|
|
return Math.max(
|
|
PARTNER_TICKER_MIN_DURATION_SECONDS,
|
|
loopDistance / PARTNER_TICKER_SPEED_PX_PER_SECOND,
|
|
)
|
|
}
|
|
|
|
export function PartnerTicker({ ariaLabel, logos }: PartnerTickerProps) {
|
|
const [hasFocusWithin, setHasFocusWithin] = useState(false)
|
|
const [isHovered, setIsHovered] = useState(false)
|
|
|
|
if (logos.length === 0) return null
|
|
|
|
const durationSeconds = partnerTickerDurationSeconds(logos.length)
|
|
const isPaused = hasFocusWithin || isHovered
|
|
|
|
const renderLogoCopy = (copy: number) => (
|
|
<div
|
|
aria-hidden={copy === 1 ? 'true' : undefined}
|
|
className="partner-ticker-copy"
|
|
data-testid="partner-ticker-copy"
|
|
key={copy}
|
|
style={{ display: 'flex' }}
|
|
>
|
|
{logos.map((logo) => (
|
|
<div
|
|
key={`${copy}-${logo.id}`}
|
|
style={{
|
|
alignItems: 'center',
|
|
color: '#fff',
|
|
display: 'flex',
|
|
flexShrink: 0,
|
|
fontFamily: '"IBM Plex Sans", sans-serif',
|
|
justifyContent: 'center',
|
|
padding: '0 24px',
|
|
textAlign: 'center',
|
|
whiteSpace: 'nowrap',
|
|
width: PARTNER_TICKER_ITEM_WIDTH_PX,
|
|
}}
|
|
>
|
|
{logo.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div
|
|
aria-label={ariaLabel}
|
|
className="partner-ticker-viewport"
|
|
data-duration-seconds={durationSeconds}
|
|
data-testid="partner-ticker"
|
|
onBlur={(event) => {
|
|
if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
|
|
setHasFocusWithin(false)
|
|
}
|
|
}}
|
|
onFocus={() => setHasFocusWithin(true)}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
role="region"
|
|
style={{ flex: 1, minWidth: 0, overflow: 'hidden', position: 'relative' }}
|
|
tabIndex={0}
|
|
>
|
|
<div
|
|
style={{
|
|
background: 'linear-gradient(to right, rgba(5,26,135,0.6), transparent)',
|
|
inset: 0,
|
|
left: 0,
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
width: 32,
|
|
zIndex: 1,
|
|
}}
|
|
/>
|
|
<div
|
|
style={{
|
|
background: 'linear-gradient(to left, rgba(5,26,135,0.6), transparent)',
|
|
inset: 0,
|
|
left: 'auto',
|
|
pointerEvents: 'none',
|
|
position: 'absolute',
|
|
right: 0,
|
|
width: 32,
|
|
zIndex: 1,
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
className="partner-ticker-track"
|
|
data-testid="partner-ticker-track"
|
|
style={{
|
|
animation: `partner-marquee ${durationSeconds}s linear infinite`,
|
|
animationPlayState: isPaused ? 'paused' : 'running',
|
|
display: 'flex',
|
|
width: 'max-content',
|
|
}}
|
|
>
|
|
{renderLogoCopy(0)}
|
|
{renderLogoCopy(1)}
|
|
</div>
|
|
|
|
<style>{`
|
|
@keyframes partner-marquee {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
.partner-ticker-viewport:hover .partner-ticker-track,
|
|
.partner-ticker-viewport:focus-within .partner-ticker-track {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.partner-ticker-viewport {
|
|
overflow-x: auto !important;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.partner-ticker-track {
|
|
animation: none !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.partner-ticker-copy[aria-hidden="true"] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|