feat(primitivas): capa gráfica y de movimiento reutilizable
Diez primitivas que dan a la landing el "gráfico y movimiento" que pidió la dueña, todas con guarda de prefers-reduced-motion: - FondoPuntos / PatronPuntos — el patrón de puntos del manual - TarjetaSpotlight, TextoDesenfoque, ContadorNumero — realce y reveal - Carrusel — deslizable, con contador, autoplay pausable - Icono, SimboloTresLineas, IlustracionInflexion — línea, sin relleno - FondoFoto — duotono azul/dorado sobre foto useAutoStep en lib/motion.ts comparte la forma del autoplay del carrusel para indicadores de paso que no son carrusel. IlustracionInflexion documenta un detalle que muerde: motion.path aplica su propio andamiaje de dasharray aunque no reciba initial/animate, así que la rama de reduced motion renderiza <path> planos en vez de intentar neutralizar los animados. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
a9758a92f9
commit
5b400cb161
19 files changed
+881
No files matched your search
@@ -0,0 +1,19 @@
|
||||
import { render } from '@testing-library/react';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { FondoFoto } from '../FondoFoto';
|
||||
|
||||
describe('<FondoFoto />', () => {
|
||||
it('is decorative: hidden from assistive tech, empty alt text', () => {
|
||||
const { container } = render(<FondoFoto src="/images/test.jpg" />);
|
||||
expect(container.firstElementChild).toHaveAttribute('aria-hidden', 'true');
|
||||
expect(container.querySelector('img')).toHaveAttribute('alt', '');
|
||||
});
|
||||
it('lazy-loads the image', () => {
|
||||
const { container } = render(<FondoFoto src="/images/test.jpg" />);
|
||||
expect(container.querySelector('img')).toHaveAttribute('loading', 'lazy');
|
||||
});
|
||||
it('tints the photo into the brand duotone via mix-blend-mode, not raw colour', () => {
|
||||
const { container } = render(<FondoFoto src="/images/test.jpg" />);
|
||||
expect(container.querySelector('img')?.className).toContain('mix-blend-luminosity');
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user